Ключевые точки лица (landmarks)

Библиотека ml5.js предоставляет высокоуровневый доступ к моделям машинного обучения в браузере, включая работу с распознаванием лиц и анализом их структуры. Один из ключевых компонентов — обнаружение и отслеживание ключевых точек лица (facial landmarks). Эти точки представляют собой координаты основных элементов лица: глаз, носа, рта, бровей и контуров лица.

Основные модели для работы с ключевыми точками лица

В ml5.js для определения ключевых точек лица используется модель FaceApi, основанная на MediaPipe и TensorFlow.js. Она позволяет:

  • Получать координаты отдельных лиц в реальном времени.
  • Определять 468 точек лица, включая внутренние элементы (глаза, рот, нос) и контур лица.
  • Отслеживать выражение лица и наклон головы.

Пример подключения модели:

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

const detectionOptions = {
  withLandmarks: true,
  withDescriptors: false
};

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

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

function gotResults(err, result) {
  if (err) {
    console.error(err);
    return;
  }
  detections = result;
  faceapi.detect(gotResults);
}

Структура объекта detection

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

  • alignedRect — координаты ограничивающего прямоугольника лица.

  • landmarks — координаты ключевых точек лица:

    • positions — массив объектов { _x, _y }, каждая точка соответствует элементу лица.

  • expressions (если включено) — вероятности различных эмоций (улыбка, грусть, удивление и др.).

Пример получения координат ключевых точек:

if (detections.length > 0) {
  const points = detections[0].landmarks.positions;
  points.forEach(pt => {
    ellipse(pt._x, pt._y, 4, 4);
  });
}

Визуализация ключевых точек

Ключевые точки удобно визуализировать для анализа положения и выражения лица. Можно выделять отдельные группы точек:

  • Контур лица — 0–16
  • Брови — 17–26
  • Глаза — 36–47
  • Нос — 27–35
  • Рот — 48–67
function drawLandmarks(points) {
  noFill();
  stroke(0, 255, 0);
  strokeWeight(2);

  // Рисуем контур лица
  beginShape();
  for (let i = 0; i <= 16; i++) {
    vertex(points[i]._x, points[i]._y);
  }
  endShape();
  
  // Рисуем глаза
  beginShape();
  for (let i = 36; i <= 41; i++) {
    vertex(points[i]._x, points[i]._y);
  }
  endShape(CLOSE);
}

Применение ключевых точек лица

  1. Фильтры и эффекты в реальном времени: наложение масок, украшений или виртуальной косметики.
  2. Анализ выражений лица: определение эмоций, например, для интерактивных приложений.
  3. Аугментация данных для ML: извлечение координат для обучения моделей распознавания лиц.
  4. Слежение за движением головы: использование координат глаз и носа для оценки наклона и поворота головы.

Оптимизация работы с видео

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

Совместимость и ограничения

  • Модель требует поддержки WebGL и WebRTC.
  • Точность детекции может снижаться при плохом освещении или частичном закрытии лица.
  • Обработка большого количества лиц одновременно может замедлять рендеринг в реальном времени.

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

Оглавление