Adding new line for image id to Crowd Elements Json output result

Question

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
      }
    }

Answer 1

its not clear if you are using SageMaker GroundTruth or you are just building your own labeling workflow by simply using crowd elements. Since you also tagged sagemaker on this question, i can share info from SageMaker perspective.

If you are using sagemaker groundtruth, you dont need to worry about tracking the image id for each data point as that would automatically be done by sagemaker groundtruth. you just have to point your unlabeled data to it use one of the pre built ui template for bounding box or create one of your own via crowd elements.

You can check out this github repo for some inspiration