TensorFlow.js предоставляет мощные инструменты для анализа человеческой позы на изображениях и в видеопотоке. Две ключевые модели для решения этой задачи — PoseNet и BlazePose. Они позволяют детектировать положения тела, суставов и отдельных частей тела в реальном времени на стороне клиента.
PoseNet — это модель для распознавания поз человека в 2D-пространстве. Она способна определять ключевые точки тела, такие как голова, плечи, локти, запястья, бедра, колени и лодыжки.
(x, y)
и вероятностью обнаружения.Каждая ключевая точка описывается объектом с полями:
position: объект с x и
y.score: вероятность обнаружения точки.part: имя ключевой точки (например,
'leftWrist').import * as tf from '@tensorflow/tfjs';
import * as posenet from '@tensorflow-models/posenet';
const net = await posenet.load({
architecture: 'MobileNetV1', // Возможны также ResNet50
outputStride: 16,
inputResolution: { width: 640, height: 480 },
multiplier: 0.75
});
const pose = await net.estimateSinglePose(imageElement, {
flipHorizontal: false
});
console.log(pose.keypoints);
const poses = await net.estimateMultiplePoses(imageElement, {
flipHorizontal: false,
maxDetections: 5,
scoreThreshold: 0.5,
nmsRadius: 20
});
Особенности работы:
maxDetections определяет максимальное количество людей
на изображении.scoreThreshold фильтрует ключевые точки с низкой
вероятностью.nmsRadius используется для подавления повторяющихся
детекций вблизи друг друга.BlazePose — это более современная и точная модель для распознавания поз, разработанная Google для мобильных устройств. Она поддерживает 33 ключевые точки тела, включая руки, ноги и туловище, с высокой точностью.
import * as posedetection from '@tensorflow-models/pose-detection';
import '@tensorflow/tfjs-backend-webgl';
const detector = await posedetection.createDetector(
posedetection.SupportedModels.BlazePose,
{
runtime: 'tfjs',
modelType: 'full' // Возможные варианты: 'lite', 'full', 'heavy'
}
);
const poses = await detector.estimatePoses(videoElement, {
flipHorizontal: false
});
console.log(poses[0].keypoints);
Каждая точка имеет:
x, y — координаты в пикселях.z — глубина (опционально, для 3D-позы).score — вероятность обнаружения.name — название части тела (например,
'left_elbow').| Характеристика | PoseNet | BlazePose |
|---|---|---|
| Количество ключевых точек | 17 | 33 |
| Поддержка 3D | Нет | Частично (через z) |
| Точность | Средняя | Высокая |
| Производительность | Быстрая на мобильных устройствах | Очень высокая, оптимизировано для реального времени |
| Поддержка мультипоз | Да | Нет (только один человек) |
Для визуализации используется Canvas. Пример рисования скелета PoseNet:
function drawKeypoints(keypoints, ctx) {
keypoints.forEach(kp => {
if (kp.score > 0.5) {
ctx.beginPath();
ctx.arc(kp.position.x, kp.position.y, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
}
});
}
function drawSkeleton(keypoints, ctx) {
const adjacentPairs = posenet.getAdjacentKeyPoints(keypoints, 0.5);
adjacentPairs.forEach(([kp1, kp2]) => {
ctx.beginPath();
ctx.moveTo(kp1.position.x, kp1.position.y);
ctx.lineTo(kp2.position.x, kp2.position.y);
ctx.strokeStyle = 'green';
ctx.lineWidth = 2;
ctx.stroke();
});
}
Для BlazePose используется аналогичный подход, но с учетом большего числа ключевых точек.
PoseNet лучше подходит для мульти-пользовательских сценариев и легких приложений. BlazePose — для приложений, где важна точность и детализация движения одного человека.