Распознавание выражений лица

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

Подключение и инициализация FaceApi

Для работы с распознаванием лиц необходимо подключить библиотеку ml5.js в HTML-документ:

<script src="https://cdn.jsdelivr.net/npm/ml5@latest/dist/ml5.min.js"></script>

Инициализация модели FaceApi выполняется следующим образом:

let faceapi;
let video;
let detections = [];

const options = {
  withLandmarks: true,
  withExpressions: true,
  withDescriptors: false
};

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();
  faceapi = ml5.faceApi(video, options, modelReady);
}

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

Ключевые моменты:

  • withLandmarks — включение распознавания ключевых точек лица.
  • withExpressions — распознавание эмоций.
  • withDescriptors — получение дескрипторов лица для идентификации (необязательно для эмоций).

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

Функция обратного вызова gotResults обрабатывает результаты распознавания:

function gotResults(err, result) {
  if (err) {
    console.error(err);
    return;
  }

  detections = result;
  faceapi.detect(gotResults); // непрерывное обнаружение
}

Особенности работы:

  • Результат содержит массив объектов с координатами лица, ключевыми точками и вероятностями выражений.
  • Для непрерывного отслеживания вызов функции detect выполняется рекурсивно.

Отображение лиц и выражений на холсте

Для визуализации данных можно использовать p5.js:

function draw() {
  image(video, 0, 0, width, height);

  if (detections.length > 0) {
    detections.forEach(detection => {
      drawBox(detection);
      drawExpressions(detection);
    });
  }
}

function drawBox(detection) {
  const { _x, _y, _width, _height } = detection.alignedRect._box;
  noFill();
  stroke(0, 255, 0);
  rect(_x, _y, _width, _height);
}

function drawExpressions(detection) {
  const expressions = detection.expressions;
  let yOffset = detection.alignedRect._box._y - 10;
  textSize(14);
  fill(255, 0, 0);

  for (let [expression, probability] of Object.entries(expressions)) {
    text(`${expression}: ${probability.toFixed(2)}`, detection.alignedRect._box._x, yOffset);
    yOffset -= 16;
  }
}

Выделенные моменты:

  • alignedRect._box — координаты прямоугольника вокруг лица.
  • detection.expressions — объект с ключами эмоций (happy, sad, angry, surprised, neutral, disgusted, fearful) и значениями вероятностей.
  • Использование toFixed(2) позволяет выводить значения с точностью до двух знаков после запятой.

Настройка чувствительности и производительности

  1. Снижение частоты кадров — уменьшает нагрузку на браузер при постоянном распознавании:
video.frameRate(15);
  1. Ограничение числа лиц для отслеживания — полезно для приложений с высокой нагрузкой:
const options = {
  withLandmarks: true,
  withExpressions: true,
  maxDetectedFaces: 1
};
  1. Использование requestAnimationFrame вместо setInterval — более плавное обновление и интеграция с p5.js:
function draw() {
  image(video, 0, 0, width, height);
  if (detections.length > 0) {
    detections.forEach(drawDetection);
  }
  requestAnimationFrame(draw);
}

Применение распознавания выражений

Распознавание эмоций в реальном времени открывает возможности для различных сценариев:

  • Интерактивные приложения и игры — динамическая реакция на выражение лица пользователя.
  • Аналитика пользовательских эмоций — выявление реакции на контент.
  • Интерфейсы доступности — управление элементами интерфейса с помощью эмоций.

Советы по точности и стабильности

  • Хорошее освещение значительно повышает точность распознавания.
  • Устранение шумов камеры снижает ложные срабатывания.
  • Калибровка модели под конкретный контекст (например, фильтры лица, очки, борода) улучшает результаты.
  • Нормализация размеров видео — одинаковые размеры видео для всех устройств позволяют избежать смещения координат лица.

Расширение возможностей

  • Интеграция с TensorFlow.js для кастомных моделей распознавания эмоций.
  • Сочетание с p5.sound для генерации звуковых эффектов на основе эмоций.
  • Использование дескрипторов лица для идентификации конкретного пользователя в приложениях с многопользовательской логикой.

Эта подробная реализация демонстрирует, как ml5.js позволяет работать с распознаванием выражений лица напрямую в браузере, используя только JavaScript и веб-камеру, без необходимости сложной настройки серверной части.

Оглавление