Документация Толоки

Выделение объектов на картинке

Обратите внимание

Документация на русском языке может быть устаревшей. Самые последние изменения доступны в документации на английском языке.

В этом разделе описано, как добавить к картинке редактор для выделения областей и как можно ускорить работу с ним с помощью горячих клавиш. Если вам нужно просто вставить картинку, читайте раздел Вставка картинок.

Добавить редактор для выделения

Чтобы добавить возможность выделять на картинках области, используйте компонент field.image-annotation.

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

Настроить режимы разметки

Компонент предлагает три режима разметки: прямоугольниками, многоугольниками и точками. По умолчанию исполнителю доступны все три режима. Вы можете оставить лишь определенные режимы: один или два из них.

Чтобы разрешить выделять области только прямоугольниками, в свойстве shapes добавьте ключ rectangle и передайте ему значение true.

{
  "shapes": {
    "rectangle": true
  }
}

Чтобы разрешить выделять области только многоугольниками, в свойстве shapes добавьте ключ polygon и передайте ему значение true.

{
  "shapes": {
    "polygon": true
  }
}

Чтобы разрешить выделять области только точками, в свойстве shapes добавьте ключ point и передайте ему значение true.

{
  "shapes": {
    "point": true
  }
}

Классифицировать области

Вы можете позволить исполнителю выделять объекты по типам. Например, если вам нужно, чтобы все выделенные на картинке машины попали в один тип, а дорожные знаки — в другой.

{
  "labels": [{
      "label": "Вариант 1",
      "value": "value1"
    },
    {
      "label": "Вариант 2",
      "value": "value2"
    }
  ]
}

Каждый новый объект свойства labels добавляет в редакторе кнопку для выбора типа области, а разное значение value дает возможность выделить область уникальным цветом.

Добавить горячие клавиши

Чтобы помочь исполнителю работать быстрее, добавьте горячие клавиши с помощью компонента plugin.field.image-annotation.hotkeys. Горячие клавиши можно назначить на стрелки вверх и вниз (up,down), цифры и латинские буквы.

Если вы добавите плагин для горячих клавиш без уточнения значений, то они будут проставлены по умолчанию.

Поменяйте их как описано ниже, если вам они не подходят. Если вам не нужен какой-то вид горячих клавиш, то передайте ему пустое значение.

Если у вас доступны хотя бы два типа областей, то перечислите для них горячие клавиши через запятую в массиве свойства labels. Они добавятся на кнопки выбора разных областей в порядке их отображения.

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

Вы можете позволить исполнителю переключаться между разными режимами разметки с помощью горячих клавиш. Добавьте в свойстве modes нужный вам ключ и передайте ему значение горячей клавиши:

  • select — для режима выбора фигур и точек;
  • point — для режима разметки точками;
  • rectangle — для режима разметки прямоугольниками;
  • polygon — для режима разметки многоугольниками.
{
  "type": "plugin.field.image-annotation.hotkeys",
  "modes": {
    "select": "q",
    "point": "w",
    "rectangle": "e",
    "polygon": "r"
  }
}

Настройте горячие клавиши, чтобы исполнитель мог подтверждать или отменять создание новой области. Передайте свойствам значения горячих клавиш:

  • confirm — подтвердить;
  • cancel — отменить.
{
  "type": "plugin.field.image-annotation.hotkeys",
  "confirm": "x",
  "cancel": "z"
}

Создать задание

Чтобы создать шаблон для задания по выделению областей, используйте следующие компоненты:

  • field.image-annotation — чтобы добавить редактор для разметки;
  • plugin.field.image-annotation.hotkeys — чтобы добавить горячие клавиши;
  • view.text — чтобы добавить описание к заданию;
  • condition.required — чтобы убедиться, что исполнитель выделил хотя бы одну область;
  • plugin.toloka — чтобы настроить внешний вид задания.

В этой статье: