使用MediaPipe BlazePose和TensorFlow.js的高保真姿势跟踪

发布者：谷歌研究院的Ivan Grishchenko、Valentin Bazarevsky和Na Li

今天，我们很高兴在我们新的姿势检测API中推出MediaPipe的BlazePose。BlazePose是一个高保真的身体姿势模型，专门用于支持瑜伽、健身和舞蹈等挑战性领域。它可以检测33个关键点，扩展了我们几年前推出的原始PoseNet模型的17个关键点的拓扑结构。这些额外的关键点提供了关于脸部、手部和脚部位置以及比例和旋转的重要信息。 与我们的脸部和手部模型一起，它们可以被用来解锁各种特定领域的应用，如手势控制或手语，而无需特殊的硬件。通过今天的发布，我们使开发者能够在网络上使用与MLKit Pose和MediaPipe Python相同的模型，从而在所有设备上解锁同样出色的性能。

新的TensorFlow.js姿势检测API支持两种运行机制。TensorFlow.js和MediaPipe。TensorFlow.js提供了JavaScript的灵活性和更广泛的应用，为几个后端进行了优化，包括WebGL（GPU）、WASM（CPU）和Node。MediaPipe利用WASM的GPU加速处理，提供更快的开箱即用的推理速度。MediaPipe运行时目前缺乏对Node和iOS Safari的支持，但我们很快就会增加这种支持。

试试现场演示吧!

BlazePose可以实时跟踪各种复杂姿势的33个关键点。

安装

要使用BlazePose的新姿势检测API，你首先要决定是使用TensorFlow.js运行时还是MediaPipe运行时。要了解每个运行时的优势，请查看本文档后面的性能和加载时间部分，以了解更多细节。

对于每个运行时，你可以使用脚本标签或NPM进行安装。

使用TensorFlow.js运行时。

1. 通过脚本标签。

   <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script><script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
   

2. 通过NPM。

   yarn add @tensorflow/tfjs-core, @tensorflow/tfjs-converteryarn add @tensorflow/tfjs-backend-webglyarn add @tensorflow-models/pose-detection
   

使用MediaPipe运行时。

1. 通过脚本标签。

   <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script><script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
   

2. 通过NPM:

   yarn add @mediapipe/poseyarn add @tensorflow-models/pose-detection
   

自己试试吧!

一旦软件包安装完毕，你只需要按照下面的几个步骤就可以开始使用它。该模型有三种变体：lite、full和heavy。从lite到heavy，模型的准确性增加，而推理速度下降，内存占用增加。重型变体适用于需要高精度的应用，而轻型变体适用于延迟关键型应用。完全变体是一个平衡的选项，这也是这里的默认选项。

使用TensorFlow.js运行时。

// Import TFJS runtime with side effects.import '@tensorflow/tfjs-backend-webgl';import * as poseDetection from '@tensorflow-models/pose-detection';// Create a detector.const detector = await poseDetection.createDetector(poseDetection.SupportedModels.BlazePose, {runtime: 'tfjs'});

使用MediaPipe运行时。

// Import MediaPipe runtime with side effects.import '@mediapipe/pose';import * as poseDetection from '@tensorflow-models/pose-detection';// Create a detector.const detector = await poseDetection.createDetector(poseDetection.SupportedModels.BlazePose, {runtime: 'mediapipe'});

你也可以通过设置modelType 字段来选择精简型或重型变体，如下图所示。

// Create a detector.const detector = await poseDetection.createDetector(poseDetection.SupportedModels.BlazePose, {runtime, modelType:'lite'});

// Pass in a video stream to the model to detect poses.const video = document.getElementById('video');const poses = await detector.estimatePoses(video);

每个姿势包含33个关键点，有绝对的x、y坐标、置信度分数和名称。

console.log(poses[0].keypoints);// Outputs:// [//    {x: 230, y: 220, score: 0.9, name: "nose"},//    {x: 212, y: 190, score: 0.8, name: "left_eye_inner"},//    ...// ]

请参考我们的ReadMe（TFJS运行时，MediaPipe运行时），了解更多关于API的细节。

当您开始使用BlazePose进行游戏和开发时，我们将感谢您的反馈和贡献。如果您使用这个模型制作了一些东西，请在社交媒体上标上#MadeWithTFJS，这样我们就能找到您的作品，因为我们很想看到您的作品。

模型的深入研究

BlazePose在浏览器中提供实时的人体姿势感知，最多可以在距离摄像头4米处工作。

我们专门为瑜伽、健身和舞蹈等高要求的单人用例训练BlazePose，这些用例需要精确跟踪具有挑战性的姿势，使数字内容和信息在增强现实、 手势控制和量化身体练习中叠加在物理世界之上。

对于姿势估计，我们利用我们成熟的两步检测器-追踪器ML管道。使用检测器，该管道首先定位帧内的姿势感兴趣区域（ROI）。追踪器随后从这个ROI中预测出所有33个姿势关键点。请注意，对于视频用例，检测器只在第一帧上运行。对于随后的帧，我们从前一帧的姿势关键点中得出ROI，如下文所述。

BlazePose的架构。

BlazePose的拓扑结构包含33个点，通过COCO扩展了17个点，并在手掌和脚掌上增加了一些点，以便为四肢提供缺乏比例和方向的信息，这对健身、瑜伽和舞蹈等实际应用至关重要。

自2020年BlazePose CVPR发布以来，MediaPipe一直在不断提高模型的质量，以保持单人姿势跟踪的网络/边缘的最先进水平。除了通过TensorFlow.js姿势检测API运行外，BlazePose还可以通过MediaPipe和ML Kit在Android、iOS和Python上使用。有关详细信息，请阅读谷歌AI博客文章和模型卡。

BlazePose浏览器性能

TensorFlow.js不断寻求机会，为浏览器带来最新、最快的运行时间。为了实现BlazePose模型的最佳性能，除了TensorFlow.js运行时（w/ WebGL后端），我们还通过MediaPipe JavaScript解决方案与MediaPipe运行时进一步整合。MediaPipe运行时利用WASM，利用跨平台的最先进的管道加速，这也是谷歌产品（如谷歌会议）的动力。

推理速度。

为了量化BlazePose的推理速度，我们在多个设备上对该模型进行了基准测试。

	MacBook Pro 15" 2019。 英特尔核心i9。 AMD Radeon Pro Vega 20图形。 (FPS)	iPhone 11 (FPS)	Pixel 5 (FPS)	台式机 英特尔i9-10900K。Nvidia GTX 1070 GPU。 (FPS)
MediaPipe运行时间 使用WASM和GPU加速器。	92 | 81 | 38	不适用	32 | 22 | 不适用	160 | 140 | 98
TensorFlow.js的运行时间 带有WebGL后端	48 | 53 | 28	34 | 30 | 不适用	13 | 11 | 5	44 | 40 | 30

BlazePose在不同设备和运行时间下的推理速度。每个单元格中的第一个数字是精简模型，第二个数字是完整模型，第三个数字是重型模型。某些模型类型和运行时间在本次发布时不工作，我们将很快添加支持。

要在你的设备上看到模型的FPS，请尝试我们的演示。你可以在演示用户界面中切换模型类型和运行时间，看看什么对你的设备最有效。

加载时间。

捆绑的大小会影响最初的页面加载体验，如交互时间（TTI），UI渲染等。我们评估了姿势检测API和两个运行时选项。捆绑的大小会影响文件的获取时间和UI的流畅性，因为处理代码和将它们加载到内存中会与CPU上的UI渲染竞争。它还会影响到模型何时可以进行推理。

这两个运行时之间的加载方式是有区别的。对于MediaPipe运行时，只有@tensorflow-models/pose-detection 和@mediapipe/pose 库在初始页面下载时被加载；运行时和模型资产在调用createDetector 方法时被加载。对于带有WebGL后端的TF.js运行时，运行时在初始页面下载时被加载；只有模型资产在调用createDetector 方法时被加载。TensorFlow.js包的大小可以通过自定义捆绑技术进一步减少。另外，如果你的应用程序目前正在使用TensorFlow.js，你不需要再次加载这些包，模型将共享相同的TensorFlow.js运行时间。选择最适合你的延迟和包的大小要求的运行时间。下面提供了一个加载时间和捆绑大小的总结。

	捆绑大小 gzipped + minified	平均加载时间 WiFi。 下载速度为100Mbps
MediaPipe运行时间
初始页面加载	22.1KB	0.04s
初始检测器创建。
运行时间	1.57MB
精简版模型	10.6MB	1.91s
完整模型	14MB	1.91s
重型模型	34.9MB	4.82s
TensorFlow.js的运行时间
初始页面加载	162.6KB	0.07s
初始检测器创建。
精简模型	10.4MB	1.91s
完整模型	13.8MB	1.91s
重型模型	34.7MB	4.82s

MediaPipe和TF.js运行时间的包大小和加载时间分析。加载时间是根据100Mbps下载速度的模拟WiFi网络估算的，包括从发送请求到下载内容的时间，在这里可以看到包括哪些内容的更多细节。

展望未来

在未来，我们计划用BlazePoseGHUM3D姿势等新功能扩展TensorFlow.js的姿势检测API。我们还计划加快TensorFlow.js的WebGL后端，使模型的执行更加快速。这将通过反复的基准测试和后端优化来实现，如运算符融合。我们还将在不久的将来带来Node.js支持。

鸣谢

我们要感谢参与创建BlazePose GHUM 3D的同事：Eduard Gabriel Bazavan、Cristian Sminchisescu、Tyler Zhu以及MediaPipe的其他贡献者。张卓玲、Michael Hays和明光勇，以及参与TensorFlow.js姿势检测API的人。Ping Yu,Sandeep Gupta,Jason Mayes, 和Masoud Charkhabi。