Руководство по распознаванию ориентиров по лицу для веб-сайтов

Задача MediaPipe Face Landmarker позволяет обнаруживать лицевые ориентиры и выражения лица на изображениях и видео. Вы можете использовать эту задачу для идентификации выражений лица, применения лицевых фильтров и эффектов, а также для создания виртуальных аватаров. В задаче используются модели машинного обучения (ML), которые могут работать как с отдельными изображениями, так и с непрерывным потоком изображений. Задача выдает трехмерные лицевые ориентиры, оценки блендшейпов (коэффициенты, представляющие выражение лица) для определения детализированных поверхностей лица в реальном времени, а также матрицы преобразования для выполнения преобразований, необходимых для рендеринга эффектов.

В этих инструкциях показано, как использовать Face Landmarker для веб-приложений и приложений на JavaScript. Для получения дополнительной информации о возможностях, моделях и параметрах конфигурации этой задачи см. раздел «Обзор» .

Пример кода

Пример кода для приложения Face Landmarker предоставляет полную реализацию этой задачи на JavaScript для вашего ознакомления. Этот код поможет вам протестировать задачу и начать разработку собственного приложения для определения местоположения по лицу. Вы можете просматривать, запускать и редактировать пример Face Landmarker, используя только веб-браузер.

Настраивать

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

пакеты JavaScript

Код Face Landmarker доступен через NPM- пакет MediaPipe @mediapipe/tasks-vision . Вы можете найти и загрузить эти библиотеки, следуя инструкциям в руководстве по настройке платформы.

Необходимые пакеты можно установить через NPM, используя следующую команду:

npm install @mediapipe/tasks-vision

Если вы хотите импортировать код задачи через службу сети доставки контента (CDN), добавьте следующий код в тег <head> вашего HTML-файла:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

Модель

Для задачи определения маркировки лиц MediaPipe требуется обученная модель, совместимая с этой задачей. Дополнительную информацию о доступных обученных моделях для задачи определения маркировки лиц см. в разделе «Модели» обзора задачи.

Выберите и скачайте модель, а затем сохраните её в каталоге вашего проекта:

<dev-project-root>/app/shared/models/

Создайте задачу

Используйте одну из функций face Landmarker createFrom...() для подготовки задачи к выполнению выводов. Используйте функцию createFromModelPath() с относительным или абсолютным путем к файлу обученной модели. Если ваша модель уже загружена в память, вы можете использовать метод createFromModelBuffer() .

Приведённый ниже пример кода демонстрирует использование функции createFromOptions() для настройки задачи. Функция createFromOptions позволяет настраивать маркеры граней с помощью параметров конфигурации. Для получения дополнительной информации см. раздел «Параметры конфигурации» .

Приведенный ниже код демонстрирует, как создать и настроить задачу с пользовательскими параметрами:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const faceLandmarker = await faceLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

Параметры конфигурации

Данная задача имеет следующие параметры конфигурации для веб-приложений и приложений на JavaScript:

Название варианта	Описание	Диапазон значений	Значение по умолчанию
`running_mode`	Задает режим выполнения задачи. Доступны два режима: ИЗОБРАЖЕНИЕ: Режим для ввода одного изображения. ВИДЕО: Режим декодирования кадров видео или потока входных данных в реальном времени, например, с камеры.	{ `IMAGE, VIDEO` }	`IMAGE`
`numFaces`	Максимальное количество лиц, которые может обнаружить `FaceLandmarker` . Сглаживание применяется только тогда, когда `num_faces` установлено на 1.	`Integer > 0`	`1`
`minFaceDetectionConfidence`	Минимальный показатель достоверности, при котором распознавание лица считается успешным.	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	Минимальный показатель достоверности наличия лица при определении лицевых ориентиров.	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	Минимальный показатель достоверности, при котором отслеживание лица считается успешным.	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	Выводит ли Face Landmarker морфинги лица. Морфинги лица используются для рендеринга 3D-модели лица.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	Выводит ли FaceLandmarker матрицу преобразования лица. FaceLandmarker использует эту матрицу для преобразования лицевых ориентиров из канонической модели лица в обнаруженное лицо, что позволяет пользователям применять эффекты к обнаруженным ориентирам.	`Boolean`	`False`

Подготовка данных

Face Landmarker может обнаруживать лица на изображениях любого формата, поддерживаемого браузером. Задача также включает предварительную обработку входных данных, включая изменение размера, поворот и нормализацию значений. Для разметки лиц в видео можно использовать API для быстрой обработки каждого кадра по отдельности, используя временную метку кадра для определения момента появления лиц в видео.

Запустите задачу

Функция Face Landmarker использует методы detect() (в режиме выполнения IMAGE ) и detectForVideo() (в режиме выполнения VIDEO ) для запуска процесса определения границ. Задача обрабатывает данные, пытается определить границы лиц, а затем сообщает о результатах.

Вызовы методов detect() и detectForVideo() объекта Face Landmarker выполняются синхронно и блокируют поток пользовательского интерфейса. Если вы обнаруживаете лица в видеокадрах с камеры устройства, каждое обнаружение блокирует основной поток. Этого можно избежать, реализовав веб-воркеры, которые будут запускать методы detect() и detectForVideo() в другом потоке.

Следующий код демонстрирует, как выполнить обработку с использованием модели задач:

Изображение

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

Видео

await faceLandmarker.setOptions({ runningMode: "VIDEO" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const faceLandmarkerResult = faceLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Более подробную информацию о реализации задачи поиска маркировки лица см. в примере .

Обработка и отображение результатов

Функция Face Landmarker возвращает объект результата для каждого запуска обнаружения. Объект результата содержит сетку лица для каждого обнаруженного лица с координатами каждой лицевой точки. Опционально объект результата может также содержать блендшейпы, обозначающие выражения лица, и матрицу преобразования лица для применения эффектов к обнаруженным точкам.

Ниже приведён пример выходных данных, полученных в результате выполнения этой задачи:

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

На следующем изображении представлена визуализация результатов выполнения задачи:

Изображение мужчины, на котором геометрически отображены области его лица, чтобы показать форму и размеры его лица.

Пример кода Face Landmarker демонстрирует, как отобразить результаты, полученные в ходе выполнения задачи; см. пример.