Клиенты часто используют Amazon Mechanical Turk (MTurk) для задач аннотирования изображений, когда работников просят нарисовать или проверить ограничивающие рамки над определенными элементами или регионами.

При работе с такими задачами может быть полезно создавать и сохранять изображения с наложениями ограничивающей рамки. Вы можете сделать это, чтобы визуализировать результаты MTurk Worker. Или, возможно, визуализировать «основополагающий» результат, который вы планируете использовать для сравнения с ответом Работника. Или вы можете наложить их вместе, чтобы быстро оценить точность рабочего. В этом уроке мы покажем вам, как динамически рисовать эти ограничивающие рамки на любом изображении.

К концу руководства вы сможете встраивать URL-адреса изображений в HTML-код вашей задачи, чтобы отображать изображения с наложенными ограничивающими рамками с указанными координатами, например:

<!-- Original image without overlay -->
<img src='https://s3.amazonaws.com/mturk-solutions/tutorials/images/monkey.jpg'/>
<!-- Dynamically render a new version with a bounding box -->
<img src='https://jmwym8qv12.execute-api.us-east-1.amazonaws.com/Public?img=https%3A%2F%2Fs3.amazonaws.com%2Fmturk-solutions%2Ftutorials%2Fimages%2Fmonkey.jpg&left=375&top=300&width=225&height=200'/>

Отображение двух ссылок на изображения выше покажет нам результат:

URL-адрес изображения ограничивающей рамки имеет 5 параметров, которые вы можете настроить:

img: ссылка на исходное изображение, на которое вы хотите наложить ограничивающие рамки, со специальными символами в кодировке URL.

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

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

Вот пример создания нескольких ограничивающих рамок на изображении:

<!-- Original image without overlay -->
<img src='https://s3.amazonaws.com/mturk-solutions/tutorials/images/machines.jpg'/>
<!-- Dynamically render a new version with two bounding boxes -->
<img src='https://jmwym8qv12.execute-api.us-east-1.amazonaws.com/Public?img=https%3A%2F%2Fs3.amazonaws.com%2Fmturk-solutions%2Ftutorials%2Fimages%2Fmachines.jpg&left=140,700&top=210,210&width=300,310&height=530,550'/>

Это добавляет два ограничивающих прямоугольника:

Вот как это работает: URL-адрес изображения ограничивающей рамки на самом деле является конечной точкой AWS Gateway, подключенной к функции AWS Lambda. Когда вы отправляете запрос на конечную точку, она запускает функцию, которая загружает изображение из параметра img, добавляет оверлей ограничивающей рамки, сохраняет новый файл изображения в сегменте AWS S3 и отправляет обратно перенаправление HTTP 302 в расположение S3. Это заставляет изображение с наложением автоматически загружаться в браузере.

А теперь давайте построим это!

Предварительные требования
Вам потребуется доступ к учетной записи AWS. Вы можете зарегистрировать аккаунт с бесплатным пробным доступом.

Настройте корзину S3
Для вашей лямбда-функции требуется место, где она может хранить изображения, которые она генерирует с наложением ограничивающей рамки. Для этого мы будем использовать ведро S3. Чтобы создать корзину S3, перейдите в Консоль S3 в AWS и нажмите Создать корзину:

Настройте ведро с настройками по умолчанию и сохраните имя ведра под рукой на будущее.

Настройте лямбда-функцию
Далее мы по-прежнему настраиваем фактическую лямбда-функцию. Мы будем использовать Javascript и запускать наш код с помощью NodeJS.

Во-первых, давайте рассмотрим фактический код Javascript, который мы добавим в нашу лямбда-функцию:

Теперь давайте создадим и настроим функцию. Перейдите в Консоль AWS Lambda и нажмите кнопку Создать функцию:

Выберите «Автор с нуля»:

Выберите имя для своей функции и убедитесь, что среда выполнения установлена ​​на Nodejs. Настройте его для использования новой роли (назовите ее как хотите) со стандартными «разрешениями Basic Edge Lambda»:

Нажмите «Создать функцию», и после завершения вы должны увидеть, что ваша новая функция настроена, как показано ниже:

Мы собираемся запустить эту функцию, используя конечную точку шлюза API. Нажмите «API Gateway» в меню «Добавить триггеры» слева, чтобы настроить это:

Прокрутите консоль вниз, чтобы настроить триггер шлюза API. Имя API и этап развертывания не имеют большого значения. Измените поле «Безопасность» на «Открыть»:

Это позволит любому получить доступ к URL-адресу, что поможет вам быстро протестировать рабочий процесс. В производственной среде вы можете контролировать доступ, но при этом позволять широкой аудитории работников MTurk вызывать конечную точку с помощью AWS Cognito. Вот сообщение в блоге, в котором более подробно рассказывается о том, как Cognito работает с API Gateway.

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

Обратите внимание на «Invoke URL» - это общедоступная конечная точка, которую вы будете использовать.

Добавить разрешения S3 для роли
Роль, созданная вами при настройке функции, не имеет разрешения на создание файлов в вашей корзине S3. Нам нужно добавить эти разрешения. Перейдите в Консоль IAM и нажмите Роли в левом столбце, чтобы найти роль, которая была создана ранее:

Нажмите на роль и выберите «Присоединить политику»:

Введите «S3», чтобы отфильтровать всплывающий список, и выберите «AmazonS3FullAccess»:

Теперь, если вы вернетесь в консоль Lambda и посмотрите на свою функцию, вы увидите, что теперь у нее есть доступ к S3:

Теперь ваша функция настроена для доступа! Однако на нем еще нет того кода, который мы рассмотрели ранее. Давайте обновим его, чтобы добавить этот код сейчас.

Обновите свой лямбда-код
Мы собираемся обновить код функции, загрузив zip-файл, содержащий наш код и связанный с ним набор узловых модулей, которые были скомпилированы для Amazon Linux.

Перейдите к своей функции и прокрутите вниз до раздела Код функции. Выберите «Загрузить файл из Amazon S3»:

Мы подготовили скомпилированный zip-файл, который вы можете загрузить с: https://s3.amazonaws.com/mturk-solutions/tutorials/boundingboxgenerator/TutorialCode.zip. Введите это в поле URL ссылки S3. Сейчас также хорошее время для создания переменной Lambda Environment с именем S3_BUCKET и добавления имени корзины S3, которую вы создали ранее:

Последнее изменение - увеличение тайм-аута лямбда-функции с 3 секунд до большего. Мы обнаружили, что обычно достаточно 6–7 секунд, но сначала установите большее значение, чтобы избежать ошибок тайм-аута при тестировании:

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

Устранение неполадок
Сначала вы можете столкнуться с ошибками. В этом случае перейдите в консоль Amazon Cloudwatch и нажмите Журналы, чтобы просмотреть журналы, связанные с вашей функцией Lambda, и найти ошибки:

Заключительные замечания
Несколько заключительных комментариев:

  1. Это отправная точка. Наш код был упрощен, чтобы он оставался кратким для учебника и, таким образом, имеет некоторые очевидные ограничения: он не поддерживает повернутые ограничивающие рамки и не имеет никаких проверок, чтобы убедиться, что передаваемое изображение существует или имеет какое-либо здравомыслие. проверяет, сколько ограничивающих рамок можно создать, и так далее.
  2. Чтобы внести изменения в код, загрузите заархивированный файл, который мы связали ранее, разархивируйте его и измените файл index.js, а затем повторно заархивируйте и загрузите его, чтобы обновить вашу функцию.
  3. Наш код использует модуль Sharp для обработки преобразований изображений. Этот модуль необходимо скомпилировать для работы в операционной системе AWS Lambda (Amazon Linux). Это можно сделать, сгенерировав папку node_modules с помощью npm install sharp в среде Amazon Linux (например, на экземпляре AWS EC2, где вам нужно сначала установить gcc с помощью Yum). Мы выполнили этот шаг для вас в заархивированном файле выше, но если вы хотите создать его с нуля, об этом нужно знать.

Мы надеемся, что это руководство окажется для вас полезным. Если у вас есть вопросы, задайте их на нашем форуме MTurk. Чтобы стать инициатором запроса, зарегистрируйтесь здесь. Хотите внести свой вклад в качестве клиента Worker? Начни здесь.