Клиенты часто используют 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, и найти ошибки:
Заключительные замечания
Несколько заключительных комментариев:
- Это отправная точка. Наш код был упрощен, чтобы он оставался кратким для учебника и, таким образом, имеет некоторые очевидные ограничения: он не поддерживает повернутые ограничивающие рамки и не имеет никаких проверок, чтобы убедиться, что передаваемое изображение существует или имеет какое-либо здравомыслие. проверяет, сколько ограничивающих рамок можно создать, и так далее.
- Чтобы внести изменения в код, загрузите заархивированный файл, который мы связали ранее, разархивируйте его и измените файл index.js, а затем повторно заархивируйте и загрузите его, чтобы обновить вашу функцию.
- Наш код использует модуль Sharp для обработки преобразований изображений. Этот модуль необходимо скомпилировать для работы в операционной системе AWS Lambda (Amazon Linux). Это можно сделать, сгенерировав папку node_modules с помощью npm install sharp в среде Amazon Linux (например, на экземпляре AWS EC2, где вам нужно сначала установить gcc с помощью Yum). Мы выполнили этот шаг для вас в заархивированном файле выше, но если вы хотите создать его с нуля, об этом нужно знать.
Мы надеемся, что это руководство окажется для вас полезным. Если у вас есть вопросы, задайте их на нашем форуме MTurk. Чтобы стать инициатором запроса, зарегистрируйтесь здесь. Хотите внести свой вклад в качестве клиента Worker? Начни здесь.