Узнайте, как обучить модель машинного обучения всего несколькими щелчками мыши, применить ее на практике в простом веб-приложении и развернуть в облаке, чтобы поделиться ею с другими.
Для этого мы будем использовать Teachable Machine, ReactJS, GitHub Actions и тестовую среду разработчика.
Введение
Обучаемая машина — это умопомрачительный инструмент, который позволяет легко обучать и тестировать модели машинного обучения, не имея опыта в нужной области. Наборы данных можно создавать прямо с веб-камеры или микрофона и использовать для обучения классификаторов изображений, звука или поз.
Само обучение выполняется инструментом автоматически, и полученную модель можно протестировать сразу после завершения обучения. Если вас устраивает только что построенная модель, вы можете экспортировать ее в форматы Tensorflow и использовать в своем приложении.
Вот видео, демонстрирующее Teachable Machine, которое стоит посмотреть.
Теперь, когда вы лучше узнали Teachable Machine, я полагаю, что вы уже сжигаете свой мозг, думая о многих приложениях, которые можно было бы сделать с помощью такого удивительного инструмента. Ознакомьтесь с этим репозиторием, в котором представлен список проектов, созданных с помощью Teachable Machine.
Таким образом, я хотел бы показать, как создать простое веб-приложение, используя модель, обученную с помощью Teachable Machine. Это приложение также будет развернуто в облаке, чтобы сделать его более реалистичным и позволить вам поделиться им с другими.
И не волнуйтесь, мы будем использовать только бесплатные вещи. Кроме того, все будет только на стороне клиента, что означает, что никакие личные данные не будут поступать на серверы.
Давайте погрузимся!
Прохождение
Шаг 1. Подумайте о приложении
Наше приложение будет детектором обкусывания ногтей!
Целью этого детектора является наблюдение за пользователем через его веб-камеру, когда он работает/учится/играет/и т. д., и выдает раздражающие предупреждения, когда пальцы находятся близко ко рту. Будем надеяться, что это создаст в мозгу пользователя неприятный триггер, который заставит его дважды подумать, прежде чем снова двигать пальцами ко рту.
Поскольку мы создадим веб-приложение и развернем его в облаке, почти любое устройство с камерой и браузером можно использовать для такого современного мониторинга. Однако основное внимание будет уделяться людям, сидящим перед своими компьютерами, т. е. лицом к своим веб-камерам, что упрощает построение нашей модели.
Я понимаю, что некоторые люди изо всех сил пытаются избавиться от этой навязчивой привычки, поэтому давайте попробуем создать что-то, что потенциально может помочь другим, верно?!
Шаг 2. Обучите модель машинного обучения
Обучить наш детектор кусания ногтей легко с помощью Teachable Machine.
Используя веб-камеру, нам нужно собрать изображения для двух классов: (1) класс кусание ногтей, представленный изображениями, где пальцы находятся близко ко рту; (2) класс нормальный, представленный изображениями, на которых пальцы находятся далеко ото рта.
Итак, как только вы начали работать с Teachable Machine (перейдите в раздел Начало работы → Проект изображения → Стандартная модель изображения), продолжайте нажимать запись кнопку, пока не получите около 500 изображений на класс, что должно быть более чем достаточно для этого классификатора.
Важно варьировать положение (в основном руки и лицо) при сборе изображений, чтобы создать разнообразие в наборе данных. Кроме того, добавьте несколько изображений, на которых перед камерой никого нет, для класса normal, просто чтобы убедиться, что модель понимает, что перед камерой никого нет, что означает, что все в порядке. Вы даже можете создать класс nobody!
После того, как набор данных собран, остается только обучить модель и протестировать ее. Если результаты выглядят хорошо, экспортируйте обученную модель в формат Tensorflow.js. Результатом будет ZIP-файл, содержащий два файла JSON (model.json и metadata.json) и веса (weights.bin).
Примечание. Имейте в виду, что получившаяся обученная модель очень проста и, вероятно, должна работать лучше всего с тем же человеком, который был записан при создании набора данных, и в аналогичных условиях. Тем не менее, вы можете улучшить его с помощью более тщательного обучения, такого как сбор большего количества данных и настройка гиперпараметров обучения.
Шаг 3: Создайте веб-приложение
Я не буду описывать реализацию приложения ReactJS с нуля, так как это не является целью этого поста. Вместо этого я уже подготовил шаблонный код для нашего веб-приложения. Это простое приложение ReactJS, которое я назвал Teachable Machine Playground, где вы можете легко добавлять свои новые страницы, которые тренируют ваши новые модели.
Код с открытым исходным кодом доступен в этом репозитории GitHub для клонирования или форка. Вы найдете простое приложение ReactJS с некоторыми компонентами, готовыми к использованию. Скрипты и рабочие процессы GitHub также доступны для облегчения жизни.
Прежде чем идти дальше, клонируйте репозиторий и соберите приложение. Убедитесь, что у вас установлены Node.js и Yarn. Вы можете просто запустить yarn install && yarn build:dev в корневой папке приложения для сборки кода. Эта команда установит все зависимости, если они еще не установлены, и соберет код в режиме разработки.
Теперь давайте проверим, как добавить новую модель в этот код.
3a) Добавьте файлы обученной модели
Разархивируйте файл, который вы экспортировали из Teachable Machine, и поместите его в новую папку в папке /static/models.
В моем случае я создал папку с именем nail-biting-detector и поместил туда файлы модели.
3b) Настройте маршруты
Найдите файл Routes.tsx (/src/app/Routes.tsx). Вам нужно будет добавить записи в объекты nav и models, соответствующие вашему новому маршруту страницы и файлам модели соответственно. Эти записи позволят вам создать новую маршрутизированную страницу для вашей модели и упростят доступ к файлам модели.
В моем случае я добавил записи с ключом nbd, что является сокращением от nail-biting detector. Когда все шаги выполнены, я могу получить доступ к своей новой странице через маршрут /nail-biting-detector.
3c) Настройте информацию о модели
После добавления файлов модели как части приложения и соответствующей настройки маршрутов давайте создадим объект, который будет содержать некоторую полезную информацию о модели и упростит загрузку модели на следующих шагах.
Найдите файл Model.tsx (/src/app/Model.tsx) и экспортируйте ModelDescriptor const. В моем случае я добавил константу NAIL_BITING_DETECTOR_MODEL с информацией, относящейся к модели Детектор прикусывания ногтей.
3d) Добавьте страницу с моделью
Теперь, когда маршруты готовы, вам просто нужно реализовать логику вашей страницы в папке /src/pages. Я подготовил несколько компонентов и хуков, чтобы упростить разработку страниц, использующих веб-камеру и уведомления о пожаре.
В моем случае страница NailBitingDetectorPage просто отображает веб-камеру и запускает раздражающие уведомления (браузер и звук) при обнаружении класса nail-biting. Довольно просто, да?!
Примечание. Поведение уведомлений реализации может различаться в зависимости от ОС/браузера. Я проверил на Ubuntu/Chrome, Android/Chrome, Windows/Chrome и macOS/Safari.
Наконец, вам нужно перейти к App.tsx (/src/app/App.tsx) и сопоставить маршрут со страницей, чтобы она была доступна.
3e) Создание и запуск
После того, как все предыдущие шаги выполнены, вы готовы попробовать!
Выполните yarn install && yarn build:dev в корневой папке приложения, чтобы собрать код. Эта команда установит все зависимости, если они еще не установлены, и соберет код в режиме разработки.
Затем выполните yarn start, чтобы запустить сервер разработки, и откройте https://localhost:9001 в браузере. Вы даже можете загрузить приложение на другие устройства, подключенные к той же сети, но вам нужно будет использовать свой IP-адрес, а не localhost.
Примечание. Каждый раз, когда вы добавляете новый маршрут, он будет отображаться на главной странице в виде ссылки для перехода.
Шаг 4. Создайте и отправьте образ контейнера
Для этого шага вам нужно будет собрать производственный код с yarn build:prod, создать образ контейнера с yarn build:image и отправить его в какой-либо реестр, например quay.io или docker hub.
Я использую podman для создания изображения, но не стесняйтесь использовать docker, если хотите. Вам придется внести небольшие изменения в скрипт yarn build:image (/package.json), если вы не используете podman.
Чтобы настроить реестр образа, имя или тег, вы можете экспортировать следующие предопределенные переменные среды перед созданием образа:
IMAGE_REGISTRY (default value: quay.io/caponetto)
IMAGE_NAME (default value: teachable-machine-playground)
IMAGE_TAG (default value: latest)
Как видите, использование значений по умолчанию подготовит образ контейнера с именем teachable-machine-playground для отправки в учетную запись myquay.io под тегом latest, который доступен здесь.
Если вы планируете отправить код в свою учетную запись GitHub, я также подготовил рабочий процесс GitHub (/.github/workflows/publish.yml), который создает и отправляет образ контейнера в quay.io. Вам просто нужно настроить переменные среды и добавить свой пароль quay.io в качестве секрета репозитория (REGISTRY_PASSWORD).
Шаг 5. Разверните веб-приложение в тестовой среде разработчика.
Теперь давайте создадим приложение в тестовой среде разработчика для Red Hat OpenShift (или просто в тестовой среде разработчика), используя наш образ контейнера, опубликованный на quay.io.
Если вы не знакомы с песочницей разработчика, вот цитата с официального сайта, которая резюмирует все ее возможности:
Песочница предоставляет вам частную среду OpenShift в общем многопользовательском кластере OpenShift, который предварительно настроен с набором инструментов разработчика. Вы можете легко создавать контейнеры из исходного кода или Dockerfile, создавать новые приложения, используя предоставленные образцы и стеки, добавлять службы, такие как базы данных, из нашего каталога шаблонов, развертывать диаграммы Helm и многое другое.
Кроме того, если вы хотите узнать больше, ознакомьтесь с моим докладом, в котором я показываю, как подключить тестовую среду разработчика к Managed Kafka и DMN.
После того, как вы вошли в свой экземпляр «Песочницы разработчика», перейдите в перспективу Developer и нажмите Add. Вам будут представлены различные способы создания приложения. Затем нажмите на карточкуContainer images и заполните форму соответствующей информацией.
Вам нужно будет указать URL-адрес изображения и защитить свой маршрут, чтобы он был доступен по HTTPS (мобильные уведомления работают только по HTTPS). GIF ниже показывает, как это сделать в деталях.
Кроме того, вы можете развернуть свой образ с помощью рабочего процесса GitHub, о котором я упоминал ранее (/.github/workflows/publish.yml). В этом случае вам необходимо настроить секреты, связанные с вашим экземпляром OpenShift (OPENSHIFT_SERVER и OPENSHIFT_TOKEN) и пространством имен (OPENSHIFT_NAMESPACE).
Примечание. Срок действия токена из тестовой среды разработчика истекает ежедневно.
Когда эта информация будет готова, вы можете установить флажок «развернуть» при запуске рабочего процесса публикации. Помимо создания веб-приложения и отправки образа контейнера на quay.io, рабочий процесс также развернет приложение на вашем экземпляре OpenShift. Автоматизация ❤
Хорошо, мы почти у цели! Теперь, когда вы создали приложение из образа контейнера, нужно просто подождать несколько секунд, пока приложение заработает. Когда он будет готов, вы можете получить доступ к своему приложению и протестировать его.
Как видите, браузер запускает уведомление на рабочем столе (частично показано в верхней части GIF-файла), как только я подношу руку ко рту. Вы не могли его услышать, но браузер также запускает раздражающее звуковое оповещение.
Если вы создаете это приложение и хотите следить за собой, оставьте это окно браузера открытым и делайте все как обычно. Вы будете уведомлены, если отвлечетесь и поднесете руки ко рту. :D
ВАЖНО: еще раз, если вы собираетесь использовать это приложение в качестве личного детектора покусывания ногтей, обязательно загрузите приложение в специальном окне браузера. Вы можете использовать свой компьютер в обычном режиме (открывая другие окна над окном приложения), если вы не сворачиваете окно приложения. Веб-камера перестает снимать кадры, если вы сворачиваете окно браузера или переключаете вкладки в том же окне браузера.
Примечание. Тестовая среда разработчика поддерживает работу ваших приложений в течение 8 часов. По истечении этого периода времени вы должны снова масштабировать их.
Заключительные замечания
В этом посте я показал, как легко создавать веб-приложения, включающие возможности, основанные на моделях машинного обучения. Я намерен мотивировать людей думать о применимости моделей машинного обучения, а не посвящать время самому кодированию. Вот почему я выбрал Teachable Machine и предоставил шаблонный код (но максимально простой).
Надеюсь, вы сможете применить некоторые идеи и легко создать доказательства концепции с помощью этих инструментов. Если они окажутся применимыми, вы можете уделить больше времени части кодирования (обучению более продвинутой модели и созданию красивого приложения).
Я постараюсь придумать еще приложений и добавить их в репозиторий. Кроме того, было бы неплохо иметь настольную и мобильную версии игровой площадки, чтобы мы могли использовать всю мощь ОС.
Может быть, мы можем вызвать что-то на устройстве, когда щелкаем пальцами, хлопаем в ладоши или даже делаем какие-то жесты? Этот старый телефон, лежащий у вас на дне ящика, можно превратить в контролирующего дворецкого, который реагирует на ваши жесты или звуки! Было бы здорово автоматизировать вещи и сэкономить время, не так ли?
Поэтому обязательно опробуйте свои идеи и поделитесь результатами!
Примечание. Если вы обнаружите какие-либо проблемы или хотите внести свой вклад в код, не стесняйтесь открывать вопрос, обсуждение или запрос на вытягивание. Вам будут рады! Кроме того, вот мой личный веб-сайт, где вы можете найти ссылки на мои социальные сети, чтобы связаться со мной.
И это все на сегодня. Спасибо за прочтение! 😃
