Attributes Element Hierarchy Regions Output See Also

crowd-image-classifier-multi-select

A widget for classifying an image into one or more categories. Use one of the following supported image formats: APNG, BMP, GIF, ICO, JPEG, PNG, SVG. Images do not have a size limit.

See an interactive example of an HTML template that uses this Crowd HTML Element in CodePen.

The following is an example of an HTML worker task template built using this crowd element. Copy the following code and save it in a file with the extension .html. Open the file in any browser to preview and interact with this template.


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-image-classifier-multi-select
    name="animals"
    categories="['Cat', 'Dog', 'Horse', 'Pig', 'Bird']"
    src="https://images.unsplash.com/photo-1509205477838-a534e43a849f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1998&q=80"
    header="Please identify the animals in this image"
    exclusion-category="{ text: 'None of the above' }"
  >
    <full-instructions header="Classification Instructions">
      <p>If more than one label applies to the image, select multiple labels.</p>
      <p>If no labels apply, select <b>None of the above</b></p>
    </full-instructions>

    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label(s) that best suit the image.</p>
    </short-instructions>
  </crowd-image-classifier-multi-select>
</crowd-form>

Attributes

The following attributes are supported by the crowd-image-classifier-multi-select element. Each attribute accepts a string value or string values.

header

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

name

Required. The name of this widget. In the form output, the name is used as a key for the widget's input.

src

Required. The URL of the image to be classified.

exclusion-category

Optional. A JSON-formatted string with the following format: "{ text: 'default-value' }". This attribute sets a default value that workers can choose if none of the labels applies to the image shown in the worker UI.

Element Hierarchy

This element has the following parent and child elements:

Parent elements: crowd-form
Child elements: full-instructions, short-instructions, worker-comment

Regions

This element uses the following regions

full-instructions

General instructions for the worker on how to classify an image.

short-instructions

Important task-specific instructions. These instructions are displayed prominently.

Output

The output of this element is a string that specifies one or more of the values defined in the categories attribute of the <crowd-image-classifier-multi-select> element.

Example : Sample Element Outputs

The following is a sample of output from this element.


[
  {
    "<name>": {
        labels: ["label_a", "label_b"]
    }
  }
]