Детекция лица и ограничивающие рамки

Библиотека ml5.js предоставляет высокоуровневый интерфейс для работы с машинным обучением в браузере. Одним из ключевых компонентов является детекция лица, которая позволяет обнаруживать лица на изображениях или в реальном времени с камеры и определять их координаты для последующей обработки.

Для реализации детекции лица используется модель FaceApi, построенная на основе TensorFlow.js. Модель поддерживает обнаружение лиц, определение ключевых точек (глаз, носа, рта) и построение ограничивающих рамок вокруг обнаруженных лиц.

Инициализация модели FaceApi

Создание модели начинается с вызова конструктора ml5.faceApi с настройками:

const faceOptions = {
  withLandmarks: true,      // Определение ключевых точек лица
  withDescriptors: false,    // Генерация дескрипторов (для распознавания)
  minConfidence: 0.5         // Минимальная уверенность для детекции
};

const faceapi = ml5.faceApi(videoElement, faceOptions, modelReady);
  • videoElement — HTML-элемент <video>, который используется для потоковой передачи с веб-камеры.
  • faceOptions задаёт конфигурацию модели.
  • modelReady — функция обратного вызова, вызываемая после полной загрузки модели.

Обработка видео и получение результатов

После загрузки модели необходимо запустить процесс детекции:

function modelReady() {
  console.log('FaceApi модель загружена');
  faceapi.detect(gotResults);
}

function gotResults(err, result) {
  if (err) {
    console.error(err);
    return;
  }
  
  if (result && result.length > 0) {
    drawFaces(result);
  }
  
  faceapi.detect(gotResults); // Продолжение детекции в цикле
}

Метод detect возвращает массив объектов, каждый из которых представляет одно обнаруженное лицо. Основные поля объекта:

  • alignedRect — ограничивающая рамка лица в виде объекта { _x, _y, _width, _height }.
  • parts — координаты ключевых точек лица (глаза, нос, рот, брови).
  • expressions — вероятности различных выражений лица (при использовании модели с распознаванием эмоций).

Визуализация ограничивающих рамок

Для визуализации лиц используется HTML-элемент <canvas>:

function drawFaces(faces) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  faces.forEach(face => {
    const { _x, _y, _width, _height } = face.alignedRect._box;
    
    context.strokeStyle = 'red';
    context.lineWidth = 2;
    context.strokeRect(_x, _y, _width, _height);
    
    if (face.parts) {
      drawLandmarks(face.parts);
    }
  });
}

function drawLandmarks(parts) {
  context.fillStyle = 'blue';
  
  Object.values(parts).forEach(partArray => {
    partArray.forEach(point => {
      context.beginPath();
      context.arc(point._x, point._y, 2, 0, 2 * Math.PI);
      context.fill();
    });
  });
}
  • strokeRect используется для отрисовки прямоугольников вокруг лиц.
  • arc позволяет визуализировать ключевые точки лица.

Настройка параметров детекции

FaceApi позволяет гибко настраивать детекцию:

  • minConfidence — повышает точность, уменьшая количество ложных срабатываний.
  • withLandmarks — включение или отключение определения ключевых точек.
  • withDescriptors — используется для идентификации лиц через сравнение дескрипторов.

Пример динамического изменения параметров:

faceapi.options.minConfidence = 0.7;
faceapi.options.withLandmarks = true;
faceapi.options.withDescriptors = false;

Работа с потоковым видео

Для детекции в реальном времени важно правильно синхронизировать видеопоток и отрисовку на canvas. Используется цикл requestAnimationFrame:

function renderLoop() {
  context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(renderLoop);
}

renderLoop();

Метод detect вызывается асинхронно внутри gotResults, обеспечивая непрерывную обработку каждого кадра.

Оптимизация производительности

Для повышения скорости работы с видео:

  • Использовать уменьшенные размеры видео (video.width и video.height).
  • Регулировать minConfidence, снижая нагрузку на модель.
  • Прерывать детекцию на кадрах, если лицо не изменилось, чтобы уменьшить вычислительную нагрузку.

Интеграция с дополнительными функциями

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

  • Наложения графики (маски, очки, анимации).
  • Распознавания эмоций и выражений лица.
  • Трекинга лица для игр и интерактивных приложений.
  • Систем идентификации и анализа поведения пользователей.

ml5.js предоставляет простой и эффективный интерфейс для всех этих задач, скрывая сложности работы с нейросетями и TensorFlow.js.

Оглавление