Object selection in an image

This section describes how to add the area selection editor to an image and speed up task completion with shortcuts. If you just need to insert a picture, read the Inserting images section.

Add the area selection editor

To allow Tolokers to select areas in pictures, use the field.image-annotation component.

{
"view": {
"type": "field.image-annotation",
"data": {
"type": "data.output",
"path": "path"
},
"image": "url"
}
}
View example

Configure labeling modes

The component offers three labeling modes: rectangle, polygon, and point markup. All three modes are available by default. You can choose to use just one or two of them.

Rectangles
Polygons
Points

To allow Tolokers to select areas only with rectangles, add the rectangle key to the shapes property and set its value to true.

{
"shapes": {
"rectangle": true
}
}
View example

Classify areas

You can allow Tolokers to select objects by type. For example, you may want all cars selected in the picture to be labeled as one type, and all road signs as another.

{
"labels": [{
"label": "Option 1",
"value": "value1"
},
{
"label": "Option 2",
"value": "value2"
}
]
}
View example

For each new object of the labels property, a button is added to the editor that allows Tolokers to select the corresponding area type. Different values of the value property let Tolokers label areas with different colors.

Add keyboard shortcuts

To help Tolokers work faster, you can add keyboard shortcuts using the plugin.field.image-annotation.hotkeys component. Shortcuts can be assigned to the up and down arrows (up,down), numbers, and Latin letters.

If you install the shortcut plugin without assigning keys, they are assigned automatically.

View example

You can change them as described below. If you don't need some of the shortcuts, leave their value fields empty.

Select area types
Select labeling modes
Confirm or cancel area creation

If you use at least two types of areas in your task, list the shortcuts for them in the array of the labels property, separating them with commas. They will be assigned to the area selection buttons in the order they are displayed.

{
"type": "plugin.field.image-annotation.hotkeys",
"labels": [
"1",
"2"
]
}
View example

Create a task

To create a template for area selection tasks, use the following components:

View example

Contact support

Last updated: February 10, 2023

Introduction
Getting started
Important tips
Useful recommendations
Working with Toloka
Projects
Pools
Tasks
Results
Project analysis
Toloka settings
Task interface
Template Builder
HTML/CSS/JS editor
Help and support
FAQTroubleshootingSupportGlossary