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

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

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

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

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

Посмотреть пример в песочнице.

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

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

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

{
  "shapes": {
    "rectangle": 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"
  ]
}

Посмотреть пример в песочнице.

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

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

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

Посмотреть пример в песочнице.