🖼️Annotating Images

The blueprint of the annotate lab and example of bicycle annotation is shown below.

Annotation Blueprint

At the top, users will find details about the uploaded image, along with a download button on the right side, enabling them to download the annotated image, its settings, and the masked image. To preserve their current work, users can use the save button, which saves their progress. Finally, the exit button allows users to exit the application.

The left sidebar (tools) contains sets of tools available for annotation, sourced from the configuration that was set up. The "Select," "Drag/Pan," "Zoom In/Out," and "Show/Hide Tags" are present by default.

The right sidebar contains four sections: files, labels, regions, and history. The files section lists the uploaded images and allows users to navigate and save current stage changes. The labels section contains the list of labels, enabling users to select their desired label to apply it to the annotated region. The regions section lists annotated regions, where users can delete, lock, or hide selected regions. The history section shows action histories and offers a revert functionality to undo changes.

Annotating Orange

Between the left and right sidebars, there's a workspace section where the actual annotation takes place. Sample of annotated image along with its mask and settings is show below.

Orange Annotation

Mask of the Orange Annotated Image

{
   "orange.png":{
      "configuration":[
         {
            "image-name":"orange.png",
            "regions":[
               {
                  "region-id":"47643630436867834",
                  "image-src":"http://127.0.0.1:5000/uploads/orange.png",
                  "class":"Orange",
                  "comment":"",
                  "tags":"",
                  "points":[
                     [
                        0.4685613390092879,
                        0.7693498452012384
                     ],
                     [
                        0.6781491873065015,
                        0.6640866873065016
                     ],
                     [
                        0.723921246130031,
                        0.5092879256965944
                     ],
                     [
                        0.7480118034055728,
                        0.34055727554179566
                     ],
                     [
                        0.5841960139318886,
                        0.14705882352941177
                     ],
                     [
                        0.41917569659442727,
                        0.13312693498452013
                     ],
                     [
                        0.30113196594427244,
                        0.22755417956656346
                     ],
                     [
                        0.21079237616099072,
                        0.4411764705882353
                     ],
                     [
                        0.26620065789473685,
                        0.6764705882352942
                     ],
                     [
                        0.4011077786377709,
                        0.7879256965944272
                     ]
                  ]
               },
               {
                  "region-id":"5981359766055432",
                  "image-src":"http://127.0.0.1:5000/uploads/orange.png",
                  "class":"Apple",
                  "comment":"",
                  "tags":"",
                  "x":[
                     0.1770655959752322
                  ],
                  "y":[
                     0.11764705882352941
                  ],
                  "w":[
                     0.5854005417956657
                  ],
                  "h":[
                     0.6981424148606811
                  ]
               }
            ],
            "color-map":{
               "Orange":[
                  244,
                  67,
                  54
               ],
               "Apple":[
                  33,
                  150,
                  243
               ]
            }
         }
      ]
   }
}