crowd-instance-segmentation - Amazon SageMaker


A widget for identifying individual instances of specific objects within an image and creating a colored overlay for each labeled instance.

The following is an example of a Liquid template that uses the <crowd-instance-segmentation> element and allows annotators to add additional labels. Copy the following code and save it in a file with the extenion .html. Open the file in any browser to preview and interact with this template.

<script src=""></script> <crowd-form> <crowd-instance-segmentation id="annotator" name="myTexts" src="{{ task.input.taskObject | grant_read_access }}" header="Please add labels and annotate each item" labels="['placeholder']" > <short-instructions> Describe your task here. <br><br><br> <h3> Add new label </h3> <crowd-input name="_customLabel" id="customLabel"></crowd-input> <br> <crowd-button id="addLabel">Add</crowd-button> <br><br><br> <h3> Manage labels </h3> <div id="labelsSection"></div> </short-instructions> <full-instructions> Describe your task in more detail here. </full-instructions> </crowd-instance-segmentation> </crowd-form> <script> document.addEventListener('all-crowd-elements-ready', function(event) { document.querySelector('crowd-instance-segmentation').labels = []; }); function populateLabelsSection() { labelsSection.innerHTML = ''; annotator.labels.forEach(function(label) { const labelContainer = document.createElement('div'); labelContainer.innerHTML = label + ' <a href="javascript:void(0)">(Delete)</a>'; labelContainer.querySelector('a').onclick = function() { annotator.labels = annotator.labels.filter(function(l) { return l !== label; }); populateLabelsSection(); }; labelsSection.appendChild(labelContainer); }); } addLabel.onclick = function() { annotator.labels = annotator.labels.concat([customLabel.value]); customLabel.value = null; populateLabelsSection(); }; </script>


The following attributes are supported by this element.


The text to display above the image. This is typically a question or simple instruction for the worker.


A JSON formatted array of strings, each of which is a label that a worker can assign to an instance of an object in the image. Workers can generate different overlay colors for each relevant instance by selecting "add instance" under the label in the tool.


The name of this widget. It is used as a key for the labeling data in the form output.


The URL of the image that is to be labeled.

Element Hierarchy

This element has the following parent and child elements.


The following regions are supported by this element.


General instructions about how to do image segmentation.


Important task-specific instructions that are displayed in a prominent place.


The following output is supported by this element.


A JSON Object containing a Base64 encoded PNG of the labels.


A JSON Array containing objects with the instance labels and colors.

  • color – The hexadecimal value of the label's RGB color in the labeledImage PNG.

  • label – The label given to overlay(s) using that color. This value may repeat, because the different instances of the label are identified by their unique color.


A JSON object that specifies the dimensions of the image that is being annotated by the worker. This object contains the following properties.

  • height – The height, in pixels, of the image.

  • width – The width, in pixels, of the image.

Example : Sample Element Outputs

The following is an example of output from this element.

[ { "annotatedResult": { "inputImageProperties": { "height": 533, "width": 800 }, "instances": [ { "color": "#1f77b4", "label": "<Label 1>": }, { "color": "#2ca02c", "label": "<Label 1>": }, { "color": "#ff7f0e", "label": "<Label 3>": }, ], "labeledImage": { "pngImageData": "<Base-64 Encoded Data>" } } } ]

See Also

For more information, see the following.