使用 MediaPipe BlazePose 和 TensorFlow.js 实现高保真姿势追踪
2021 年 5 月 19 日

Ivan GrishchenkoValentin BazarevskyNa Li(谷歌研究院)发布

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

新的 TensorFlow.js 姿势检测 API 支持两种运行时:TensorFlow.js 和 MediaPipe。TensorFlow.js 提供了 JavaScript 的灵活性和更广泛的采用,针对包括 WebGL(GPU)、WASM(CPU)和 Node 在内的多个后端进行了优化。MediaPipe 利用 WASM,并利用 GPU 加速处理,提供更快的开箱即用推理速度。MediaPipe 运行时目前缺乏 Node 和 iOS Safari 支持,但我们将很快添加支持。

试用实时演示!

3 examples of BlazePose tracking dancing, stretching, and exercising
BlazePose 可以实时跟踪 33 个关键点,跨越各种复杂的姿势。

安装

要使用 BlazePose 和新的姿势检测 API,您首先要决定使用 TensorFlow.js 运行时还是 MediaPipe 运行时。要了解每个运行时的优势,请查看本文档后面关于性能和加载时间的章节,以获取更多详细信息。

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

使用 TensorFlow.js 运行时

  1. 通过脚本标签
    <script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs-core"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs-converter"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs-backend-webgl"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/pose-detection"></script>
  2. 通过 NPM
    yarn add @tensorflow/tfjs-core, @tensorflow/tfjs-converter
    yarn add @tensorflow/tfjs-backend-webgl
    yarn add @tensorflow-models/pose-detection

使用 MediaPipe 运行时

  1. 通过脚本标签
    <script src="https://cdn.jsdelivr.net.cn/npm/@mediapipe/pose"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/pose-detection"></script>
  2. 通过 NPM
    yarn add @mediapipe/pose
    yarn add @tensorflow-models/pose-detection

亲自试一试!

安装完包后,您只需按照以下几个步骤即可开始使用它。该模型有三种变体:lite、full 和 heavy。模型的准确性从 lite 到 heavy 逐渐提高,而推理速度降低,内存占用增加。heavy 变体适用于需要高精度的应用程序,而 lite 变体适用于对延迟要求高的应用程序。full 变体是一个平衡的选择,也是这里的默认选择。

使用 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 字段来选择 lite 或 heavy 变体,如下所示

// 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"},
//    ...
// ]

有关 API 的更多详细信息,请参阅我们的 ReadMe(TFJS 运行时MediaPipe 运行时)。

当您开始使用 BlazePose 进行游戏和开发时,我们感谢您的 反馈贡献。如果您使用此模型制作了一些东西,请在社交媒体上使用 #MadeWithTFJS 标签进行标记,以便我们找到您的作品,因为我们很乐意看到您的创作。

模型深入研究

BlazePose 在浏览器中提供实时人体姿势感知,最远可识别距离相机 4 米。

我们专门针对瑜伽、健身和舞蹈等高需求的单人用例训练了 BlazePose,这些用例需要对具有挑战性的姿势进行精确跟踪,从而能够在 增强现实手势控制量化体育锻炼 中将数字内容和信息叠加在物理世界之上。

对于姿势估计,我们利用我们 经过验证的 两步 检测器-跟踪器 ML 管道。使用检测器,此管道首先在帧中定位姿势感兴趣区域 (ROI)。然后,跟踪器从该 ROI 预测所有 33 个姿势关键点。请注意,对于视频用例,检测器仅在第一帧上运行。对于后续帧,我们从前一帧的姿势关键点推导出 ROI,如下所述。

BlazePose architecture.
BlazePose 架构。

BlazePose 的拓扑结构包含 33 个点,扩展了 COCO 的 17 个点,在手掌和脚部添加了额外的点,以提供肢体缺少的大小和方向信息,这对健身、瑜伽和舞蹈等实际应用至关重要。

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

BlazePose 浏览器性能

TensorFlow.js 不断寻找为浏览器提供最新最快运行时的机会。为了实现此 BlazePose 模型的最佳性能,除了 TensorFlow.js 运行时(带 WebGL 后端)之外,我们还通过 MediaPipe JavaScript 解决方案 与 MediaPipe 运行时进行了进一步集成。MediaPipe 运行时利用 WASM 来利用跨平台可用的最新管道加速技术,这也为 Google Meet 等 Google 产品提供支持。

推理速度

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


MacBook Pro 15” 2019. 

Intel core i9. 

AMD Radeon Pro Vega 20 Graphics.

(FPS)

iPhone 11

(FPS)

Pixel 5

(FPS)

台式机 

Intel i9-10900K. Nvidia GTX 1070 GPU.

(FPS)

MediaPipe 运行时

使用 WASM 和 GPU 加速

92 | 81 | 38

N/A

32 | 22 | N/A

160  | 140 | 98

TensorFlow.js 运行时
使用 WebGL 后端

48 | 53 | 28

34 | 30 | N/A

 13 | 11 | 5

44 | 40 | 30

BlazePose 在不同设备和运行时上的推理速度。每个单元格中的第一个数字代表 lite 模型,第二个数字代表 full 模型,第三个数字代表 heavy 模型。在发布时,某些模型类型和运行时无法正常工作,我们将在不久后添加支持。

要查看模型在您的设备上的 FPS,请尝试我们的演示。您可以在演示 UI 中实时切换模型类型和运行时,以查看最适合您的设备的选项。

加载时间

捆绑包大小会影响初始页面加载体验,例如 交互时间 (TTI)、UI 渲染等。我们评估了姿势检测 API 和两种运行时选项。捆绑包大小会影响文件获取时间和 UI 平滑度,因为处理代码并将它们加载到内存中将与 CPU 上的 UI 渲染争用。它还会影响模型何时可用于进行推理。

两种运行时之间存在加载方式的不同。对于 MediaPipe 运行时,仅在初始页面下载时加载 @tensorflow-models/pose-detection@mediapipe/pose 库;运行时和模型资源在调用 createDetector 方法时加载。对于使用 WebGL 后端的 TF.js 运行时,运行时在初始页面下载时加载;仅在调用 createDetector 方法时加载模型资源。TensorFlow.js 包大小可以通过 自定义捆绑技术 进一步减小。此外,如果您的应用程序当前正在使用 TensorFlow.js,则无需再次加载这些包,模型将共享相同的 TensorFlow.js 运行时。选择最适合您的延迟和捆绑包大小要求的运行时。以下提供了加载时间和捆绑包大小的摘要


捆绑包大小

gzip 压缩 + 缩小

平均加载时间

WiFi

下载速度 100Mbps

MediaPipe 运行时



    初始页面加载

22.1KB

0.04秒

    初始检测器创建



         运行时间

1.57MB


         Lite 模型

10.6MB 

1.91秒

         完整模型

14MB

1.91秒

         重量级模型

34.9MB

4.82秒

TensorFlow.js 运行时



    初始页面加载

162.6KB

0.07秒

    初始检测器创建



         Lite 模型

10.4MB

1.91秒

         完整模型

13.8MB

1.91秒

         重量级模型

34.7MB

4.82秒

MediaPipe 和 TF.js 运行时的包大小和加载时间分析。加载时间是根据模拟的 WiFi 网络(下载速度为 100Mbps)估算的,包括从请求发送到内容下载的时间,查看更多详细信息 此处

展望未来

未来,我们计划扩展 TensorFlow.js 姿势检测 API,添加新的功能,例如 BlazePose GHUM 3D 姿势。我们还计划加速 TensorFlow.js WebGL 后端,以使模型执行速度更快。这将通过反复基准测试和后端优化(例如运算符融合)来实现。我们还将在不久的将来提供 Node.js 支持。

致谢

我们感谢参与创建 BlazePose GHUM 3D 的同事:Eduard Gabriel BazavanCristian SminchisescuTyler Zhu,以及其他 MediaPipe 贡献者:Chuo-Ling ChangMichael HaysMing Guang Yong,以及参与 TensorFlow.js 姿势检测 API 的人员:Ping YuSandeep GuptaJason MayesMasoud Charkhabi

下一篇
High Fidelity Pose Tracking with MediaPipe BlazePose and TensorFlow.js

作者:Ivan GrishchenkoValentin BazarevskyNa Li,Google Research 今天,我们很高兴在新的 姿态检测 API 中推出 MediaPipeBlazePose。BlazePose 是一款高保真身体姿态模型,专门设计用于支持瑜伽、健身和舞蹈等具有挑战性的领域。它可以检测 33 个关键点,扩展了我们最初发布的 PoseNet 模型 中的 17 个关键点拓扑结构…