Один из самых больших прорывов, который пришел с эрой смартфонов, — это возможность делать селфи, настолько мощная концепция, что Оксфордский словарь добавил это слово в словарь. Это явление привело к росту числа приложений для социальных сетей, таких как Snapchat, которые ввели новшество в создании селфи с помощью фильтров. Со временем приложения для видеоконференций, такие как Zoom, внесли новшества в потоковое видео для фронтальных камер, позволяя пользователям скрывать/изменять свой фон.

Некоторые из этих инновационных функций основаны на машинном обучении, и мы рассмотрим, как реализовать некоторые из этих эффектов в браузерах с помощью решений MediaPipe. В этой серии мы рассмотрим сегментацию селфи и отслеживание лица в последней части. Процитируем официальный сайт MediaPipe:

«Селфи-сегментация MediaPipe сегментирует выдающихся людей на сцене. Он может работать в режиме реального времени как на смартфонах, так и на ноутбуках. Предполагаемые варианты использования включают эффекты селфи и видеоконференции, когда человек находится близко (‹ 2 м) к камере».

Это решение машинного обучения основано на MobileNetV3 и имеет две модели:

  • Общая модель, которая имеет входной тензор в форме 256 x 256 x 3 и выходные данные 256 x 256 x 1, представляющие маску сегментации. Эта модель используется в комплекте машинного обучения Google.
  • Ландшафтная модель, входной тензор которой составляет 144 x 256 x 3, имеет меньше FLOPS, поэтому работает быстрее. Вариант этой модели используется в Google Meet.

Примечание. Решение MediaPipe изменяет размер изображений, чтобы вы могли сосредоточиться на создании своего опыта.

Предпосылки

Вам нужно установить NodeJs на свой компьютер, и вы можете следовать документации, чтобы начать. Также установите Angular CLI, следуя официальной документации. При написании этого руководства использовались версии Node v14.18.0, NPM v6.14.15 и Angular CLI v12.2.7.

Настройка проекта

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

ng n selfie-segmentation — routing — style=scss

Затем создайте службу с именем ml, которая будет использоваться для инициализации моделей и выполнения логического вывода.

ng g s services/ml

Убедитесь, что вы правильно настроили модуль приложения, импортировав службу в качестве поставщика.

Установите зависимости, необходимые для веб-приложения: Bootstrap для стиля и форматирования пользовательского интерфейса и модели сегментации селфи MediaPose.

ng add ng-bootstrap && npm i -s @mediapipe/selfie_segmentation

Наконец, настройте систему сборки angular, чтобы файлы, необходимые для запуска моделей машинного обучения, обслуживались с локального сервера разработки и/или хост-сервера. Для локальной разработки обновите раздел сценариев в файле package.json.

“scripts”: {
   ...
   “start”: “npm run copy:all && ng serve”,
   “copy:all”: “ npm run copy:selfie_segmentation”,
   “copy:selfie_segmentation”: “cp -R node_modules/@mediapip/selfie_segmentation src/assets”
}

Для производственных сборок обновите цель сборки в файле angular.json, как показано ниже:

"assets”: [
   …
   {
      “glob”: “**/*”,
      “input”: “./node_modules/@mediapipe/selfie_segmentation”,
      “output”: “./assets/selfie_segmentation”
   }
],

Реализация пользовательского интерфейса

Мы используем bootstrap для стилизации и разметки необходимых HTML-элементов. Для запуска приложения необходимы два основных элемента: один — HTML-тег видео для отображения и захвата нашего видеопотока. Другой — HTML-тег холста для отображения маски сегментации. Убедитесь, что вы выбрали размеры входных изображений, например, 1280 пикселей на 720 пикселей, и жестко закодируйте эти значения как размер холста, используя размеры. Откройте HTML-файл компонента приложения и добавьте следующую HTML-разметку.

Как крупные команды выбирают для себя подходящие инструменты MLOps? Посмотрите этот клип с нашего недавнего круглого стола с клиентами, чтобы узнать!

Внедрение машинного обучения

Откройте созданный ранее сервис ml и импортируйте в проект решение для селфи от MediaPipe.

import { SelfieSegmentation } from “@mediapipe/selfie_segmentation”;

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

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

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

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

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

Заключение

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

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

Примечание редактора. Heartbeat — это интернет-издание и сообщество, созданное участниками и посвященное предоставлению лучших образовательных ресурсов для специалистов по науке о данных, машинному обучению и глубокому обучению. Мы стремимся поддерживать и вдохновлять разработчиков и инженеров из всех слоев общества.

Независимая от редакции, Heartbeat спонсируется и публикуется Comet, платформой MLOps, которая позволяет специалистам по данным и командам машинного обучения отслеживать, сравнивать, объяснять и оптимизировать свои эксперименты. Мы платим нашим авторам и не продаем рекламу.

Если вы хотите внести свой вклад, перейдите к нашему призыву к участию. Вы также можете подписаться на получение наших еженедельных информационных бюллетеней (Еженедельник глубокого обучения и Информационный бюллетень Comet), присоединиться к нам в Slack и следить за Comet в Twitter и LinkedIn, чтобы получать ресурсы, события и многое другое, что поможет вам быстрее создавать лучшие модели машинного обучения.