Распознавание текста с изображения (OCR)

Напишите нам, если не нашли ответ в Справке. Вы можете приложить скриншоты или видео, чтобы ускорить помощь:

Написать в чат  Написать в Telegram

Используйте этот пресет в проектах, когда необходимо распознать текст на изображении для разметки данных.

В пресете по умолчанию для создания интерфейса задания используется редактор HTML/JS/CSS. В этом разделе описано, как использовать Конструктор шаблонов для этой же цели. В разделе Интерфейс проекта выберите Конструктор шаблонов и вставьте код из примера в раздел Конфигурация.

В этом примере исполнителю необходимо найти вывеску объекта на фото и ввести название в текстовое поле или активировать опцию Нет компаний.

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

Из каких компонентов состоит этот пример
  • view.list — отображает данные списком;
  • view.image — показывает картинку;
Показать код
{
  "type": "view.image",
  "noBorder": true,
  "rotatable": true,
  "url": {
    "type": "data.input",
    "path": "image"
  }
}
  • view.text — показывает текст;

Если вам нужен форматированный текст, используйте view.markdown.

Показать код
{
  "type": "view.text",
  "label": "Категория",
  "content": {
    "type": "data.input",
    "path": "category"
  }
}

  • Сочетание компонентов helper.if и condition.equals показывает поле ответа, если не была выбрана опция Нет компаний.

    Показать код
    {
  "type": "helper.if",
  "condition": {
    "type": "condition.equals",
    "data": {
      "type": "data.output",
      "path": "not_found"
    },
    "to": false
  },
  "then": {
    "type": "view.list",
    "items": [
      {
        "type": "field.text",
        "label": "Название",
        "placeholder": "Введите текст",
        "data": {
          "type": "data.output",
          "path": "output"
        },
          "validation": {
          "type": "condition.required"
        }
      }
    ]
  }
}
  • field.text — добавляет поле для ввода текста;

Используйте компонент conditions.required внутри свойства validation, чтобы проверить, что исполнитель ввел ответ в текстовое поле.

Показать код
{
  "type": "field.text",
  "label": "Название",
  "placeholder": "Введите текст",
    "data": {
      "type": "data.output",
      "path": "output"
    }
  "validation": {
    "type": "condition.required"
  }
}

С помощью него исполнитель сможет активировать опцию Нет компаний.

Показать код
{
  "type": "field.checkbox",
  "preserveFalse": true,
  "label": "Нет компаний",
  "hint": "На фото нет компаний, оно плохого качества или не загрузилось, название не видно полностью.",
  "data": {
    "type": "data.output",
    "path": "not_found"
  }
}
  • plugin.toloka — настраивает внешний вид задания.
Показать код
{
  "type": "plugin.toloka",
  "layout": {
    "kind": "scroll",
    "taskWidth": 650
  }
}

Если вам не подходит этот пресет, посмотрите другие примеры в этом разделе.

Добавить описание

Чтобы добавить подробное описание к заданию, воспользуйтесь свойством label компонента view.image.

Показать код
{
  "type": "view.image",
  "label": "Посмотрите на фото и найдите название компании.",
  "noBorder": true,
  "rotatable": true,
  "url": {
    "type": "data.input",
    "path": "image"
  }
}

Добавить уточняющий вопрос

Чтобы уточнить, почему исполнители выбрали опцию Нет компаний с помощью компонентов helper.if и field.radio-group добавьте группу переключателей (радиокнопок), чтобы исполнитель смог выбрать вариант ответа.

Показать код
{
  "type": "helper.if",
  "condition": {
    "type": "condition.equals",
    "data": {
      "type": "data.output",
      "path": "not_found"
    },
    "to": true
  },
  "then": {
    "type": "field.radio-group",
    "label": "Выберите один из вариантов ответа",
    "options": [
      {
        "label": "На фото нет компаний",
        "value": "no_business"
      },
      {
        "label": "Фото плохого качества",
        "value": "bad_quality"
      },
      {
        "label": "Название не видно полностью",
        "value": "not_fully_visible"
      },
      {
        "label": "Ошибка загрузки",
        "value": "error"
      }
    ],
    "data": {
      "type": "data.output",
      "path": "option"
    },
    "validation": {
      "type": "condition.required",
      "hint": "Выберите вариант."
    }
  }
}

Добавить оформление

Чтобы исполнитель легче ориентировался в задании, оформите разные типы данных цветом с помощью компонента view.alert. Вы можете расположить его внутри view.list вместе с другими компонентами.

В этом примере описание задания выделено синим цветом.

Показать код
  {
    "type": "view.alert",
    "theme": "info",
    "content": {
      "type": "view.text",
      "content": "Посмотрите на фото и найдите название компании."
    }
  }

Добавить поле для ввода ответа

Чтобы исполнители могли оставить комментарий, добавьте компонент для ввода многострочного текста field.textarea.

Показать код
{
  "type": "field.textarea",
  "label": "Комментарий",
  "placeholder": "Введите текст",
  "data": {
    "type": "data.output",
    "path": "comment"
  }
}

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

Добавьте горячие клавиши в конфигурации plugin.hotkeys. Так вы поможете исполнителям быстрее выполнять задания — нажимать кнопки порой удобнее, чем управлять мышкой.

Показать код
{
  "type": "plugin.hotkeys",
  "l": {
    "type": "action.rotate",
    "view": {
      "$ref": "view.items.0"
    },
    "payload": "left"
  },
  "r": {
    "type": "action.rotate",
    "view": {
      "$ref": "view.items.0"
    },
    "payload": "right"
  },
  "q": {
    "type": "action.open-close",
    "view": {
      "$ref": "view.items.0"
    }
  }
}

Написать в службу поддержки

Предыдущая
Распознавание объектов и выделение областей
Следующая
Распознавание товаров на изображении