HandPose и FaceMesh

TensorFlow.js предоставляет мощные средства для обработки изображений и видео в браузере с использованием моделей машинного обучения. Две важные модели для распознавания анатомических особенностей человека — HandPose и FaceMesh. Они позволяют детектировать руки и лицо в режиме реального времени, что используется в приложениях дополненной реальности, жестового управления и анализа выражений лица.

Подключение и установка

Для работы с моделями необходимо подключить библиотеку TensorFlow.js и соответствующие модели через CDN или npm.

// Подключение TensorFlow.js
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>

// Подключение HandPose
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose"></script>

// Подключение FaceMesh
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh"></script>

Для проектов на Node.js используется установка через npm:

npm install @tensorflow/tfjs @tensorflow-models/handpose @tensorflow-models/facemesh

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

import * as tf from '@tensorflow/tfjs';
import * as handpose from '@tensorflow-models/handpose';
import * as facemesh from '@tensorflow-models/facemesh';

Инициализация и загрузка моделей

HandPose

Модель HandPose обучена распознавать 21 ключевую точку руки, включая суставы пальцев и ладонь. Основная последовательность загрузки:

const model = await handpose.load();
console.log("HandPose модель загружена");

FaceMesh

FaceMesh использует 468 ключевых точек для моделирования лица с высокой точностью. Загрузка модели выполняется аналогично:

const model = await facemesh.load();
console.log("FaceMesh модель загружена");

Подготовка видеопотока

Для детекции необходимо передать в модель видеопоток с камеры:

const video = document.createElement('video');

async function setupCamera() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    video.srcObject = stream;
    return new Promise((resolve) => {
        video.onloadedmetad ata = () => {
            video.play();
            resolve(video);
        };
    });
}

await setupCamera();

Обработка кадра и предсказание

HandPose

async function detectHands(video, model) {
    const predictions = await model.estimateHands(video);
    if (predictions.length > 0) {
        predictions.forEach((hand) => {
            hand.landmarks.forEach((point, i) => {
                console.log(`Точка ${i}: [${point[0]}, ${point[1]}, ${point[2]}]`);
            });
        });
    }
}

landmarks — массив координат [x, y, z], где x и y — пиксели на видео, z — глубина относительно камеры.

FaceMesh

async function detectFace(video, model) {
    const predictions = await model.estimateFaces({ input: video });
    predictions.forEach((face, index) => {
        face.scaledMesh.forEach((point, i) => {
            console.log(`Точка ${i}: [${point[0]}, ${point[1]}, ${point[2]}]`);
        });
    });
}

scaledMesh — массив координат с масштабированием под размер изображения.

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

Использование HTML Canvas позволяет отобразить результаты предсказания в реальном времени.

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

function drawKeypoints(points) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    points.forEach((point) => {
        ctx.beginPath();
        ctx.arc(point[0], point[1], 3, 0, 2 * Math.PI);
        ctx.fillStyle = 'red';
        ctx.fill();
    });
}

Для HandPose и FaceMesh необходимо передавать соответствующие массивы landmarks и scaledMesh.

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

  • Размер кадра: уменьшение разрешения видеопотока ускоряет обработку, но снижает точность.
  • Throttle или requestAnimationFrame: обработка каждого кадра необязательна, можно использовать частоту обновления 15–30 FPS.
  • WebGL backend: TensorFlow.js автоматически использует WebGL для ускорения вычислений на GPU, что критично для FaceMesh с большим количеством точек.
await tf.setBackend('webgl');
  • Многофреймовая обработка: для долгосрочных приложений можно сохранять историю ключевых точек для сглаживания движений и фильтрации шумов.

Дополнительные возможности

  • Определение жестов: на основе HandPose можно реализовать распознавание жестов пальцев.
  • Анализ мимики: FaceMesh позволяет вычислять выражения лица, направление взгляда, улыбку или поднятие бровей.
  • Интеграция с Three.js: визуализация 3D-моделей рук и лица в реальном времени для AR/VR приложений.

Особенности точности и ограничения

  • HandPose корректно работает при видимой ладони и пальцах; сильное перекрытие пальцев снижает точность.
  • FaceMesh чувствителен к освещению и углу обзора. Резкие движения могут вызвать временные артефакты.
  • Для мобильных устройств стоит уменьшать размер кадров и использовать throttling, чтобы избежать перегрева и падений FPS.

Сравнение HandPose и FaceMesh

Модель Количество точек Основное применение Производительность
HandPose 21 Жестовое управление, VR/AR руки Высокая
FaceMesh 468 Мимика, AR маски, трекинг лица Средняя

Эти модели можно комбинировать для комплексного взаимодействия с пользователем, например, управление объектами с помощью жестов рук при сохранении отслеживания лица для реакций или AR-фильтров.

Оглавление