I’m creating an annotation-tool using the Crowd HTML Elements that let users annotate images with the bounding box format. The form looks like this:https://codepen.io/sagemaker_crowd_html_elements/pen/XWpJGad?editors=1111.
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
<crowd-bounding-box
name="annotatedResult"
src="https://images.unsplash.com/photo-1533713692156-f70938dc0d54?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2467&q=80"
header="Draw bounding boxes around all the cats and dogs in this image"
labels="['Fish', 'Coral', 'Turtle']"
>
<full-instructions header="Bounding Box Instructions" >
<p>Use the bounding box tool to draw boxes around the requested target of interest:</p>
<ol>
<li>Draw a rectangle using your mouse over each instance of the target.</li>
<li>Make sure the box does not cut into the target, leave a 2 - 3 pixel margin</li>
<li>
When targets are overlapping, draw a box around each object,
include all contiguous parts of the target in the box.
Do not include parts that are completely overlapped by another object.
</li>
<li>
Do not include parts of the target that cannot be seen,
even though you think you can interpolate the whole shape of the target.
</li>
<li>Avoid shadows, they're not considered as a part of the target.</li>
<li>If the target goes off the screen, label up to the edge of the image.</li>
</ol>
</full-instructions>
<short-instructions>
Draw boxes around the requested target of interest.
</short-instructions>
</crowd-bounding-box>
</crowd-form>
JSON OUTPUT:
TaskAnswers
[
{
"annotatedResult": {
"boundingBoxes": [
{
"height": 456,
"label": "Fish",
"left": 1010,
"top": 411,
"width": 1028
},
{
"height": 434,
"label": "Fish",
"left": 85,
"top": 1313,
"width": 1542
}
],
"inputImageProperties": {
"height": 1850,
"width": 2467
}
}
}
]
But i new a line for image id because i need to save this result in database with image id and i have many images.
I want to take this output with image_id and write it to a database. But I don’t know how to add a new line to JSON and how to save it in a remote database. I tried adding some properties and javascript code but it didn’t help me. If anyone has a solution it would be great! Or where can i find to source code for crowd element?
{
"image_id": 297992,// what i need
"annotations": [
{
"annotatedResult": {
"boundingBoxes": [
{
"height": 223,
"label": "placeholder",
"left": 168,
"top": 173,
"width": 238
}
],
"inputImageProperties": {
"height": 800,
"width": 800
}
}