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

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

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

Пример кода

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

Настраивать

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

пакеты JavaScript

Код для распознавания лиц доступен через 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 Detector 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 facedetector = await FaceDetector.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

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

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

Название варианта	Описание	Диапазон значений	Значение по умолчанию
`option_var_1_web_js`	Задает режим выполнения задачи. Доступны два режима: ИЗОБРАЖЕНИЕ: Режим для ввода одного изображения. ВИДЕО: Режим декодирования кадров видео или потока входных данных в реальном времени, например, с камеры.	{ `IMAGE, VIDEO` }	`IMAGE`
`minDetectionConfidence`	Минимальный показатель достоверности, при котором распознавание лица считается успешным.	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	Минимальный порог подавления немаксимальных значений, при котором обнаружение лица считается перекрывающимся.	`Float [0,1]`	`0.3`

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

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

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

Детектор лиц использует методы detect() (в режиме обработки image ) и detectForVideo() (в режиме обработки video ) для запуска вывода результатов. Задача обрабатывает данные, пытается обнаружить лица, а затем сообщает о результатах.

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

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

Изображение

const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);

Видео

await faceDetector.setOptions({ runningMode: "video" });

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

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

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

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

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

Детектор лиц генерирует объект результата обнаружения лиц для каждого запуска детектора. Объект результата содержит лица в координатах изображения и лица в мировых координатах.

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

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

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

Двое детей с рамками вокруг лиц.

Изображение без ограничивающих рамок см. в исходном изображении .

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