谷歌TensorFlow团队和MediaPipe联合推出两款软件包，可对面部和手部特征进行跟踪 作者 | Andrey Vakunov、Ann YuanTensorFlow 最近在博客发文表示发布了两款新的软件包：facemesh 和 handpose，分别用于跟踪面部和手部的关键特征点。这两个软件包是由 MediaPipe 和谷歌研究部门的 TensorFlow.js 团队合作完成的。在不久的将来，研发团队将增加对多手跟踪的支持。以下 TensorFlow 博客完整内容。 我们也一直致力于加速我们的模型，特别是在移动设备上的那些模型。在过去几个月的开发中，我们看到 facemesh 和 handpose 的性能有了显著的提高，我们相信这一趋势将继续下去。 Facemesh 软件包? Handpose 软件包 在浏览器中尝试在线演示程序 Facemesh 软件包可以在图像中找出面部边界和特征点，而 handpose 可以找到手部边界和特征点。这些软件包体积小、速度快，并且完全在浏览器中运行，因此，数据不会离开用户的设备，从而保护了用户的隐私。你现在就可以通过下面的链接试一下： Facemesh： https://storage.googleapis.com/tfjs-models/demos/facemesh/index.html Handpose： https://storage.googleapis.com/tfjs-models/demos/handpose/index.html这些包也可以作为 MediaPipe 的一部分使用，这是一个用于构建多模态感知管道的库： MediaPipe 面部跟踪： https://github.com/google/mediapipe/tree/master/mediapipe/graphs/face_detection MediaPipe 手势跟踪： https://github.com/google/mediapipe/blob/master/mediapipe/docs/hand_tracking_mobile_gpu.md我们希望实时的面部和手部跟踪能够带来新的交互模式。例如，人脸的几何位置是对表情进行分类的基础，手势跟踪是手势识别的第一步。我们很高兴可以看看具有这些功能的应用程序将如何在 Web 上拓展交互性和可访问性。 Facemesh Facemesh 包从一个图像或视频流中推断出近似的 3D 面部表面几何形状，只需要一个摄像头输入，而不需要深度传感器。这种几何结构定位诸如眼睛、鼻子和嘴唇这样的脸部特征，包括细节，如嘴唇轮廓和面部轮廓。这些信息可用于下游任务，如表情分类（但不用于识别）。请参考我们的 模型卡，了解模型在不同数据集上的执行情况。这个包也可以通过 MediaPipe 获得。 性能特征 Facemesh 是一个轻量级包，只有大约 3MB 的权重值，因此非常适合在各种移动设备上进行实时推断。在测试时，请注意，TensorFlow.js 也提供了几个不同的后端可供选择，包括 WebGL 和带有 XNNPACK 的 WebAssembly（WASM），后者用于使用低端 GPU 的设备。下表显示了这个包在几种不同的设备和 TensorFlow.js 后端上的执行情况： 安装 安装 facemesh 软件包有以下两种方式： 通过 NPM： import * as facemesh from '@tensorflow-models/facemesh; 通过 script 标签： 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-models/facemesh"/script 使用 包安装完成以后，你只需要加载模型权重值，并传入一个图像来开始检测面部特征点： // 加载 MediaPipe facemesh 模型资产。 const model = await facemesh.load(); // 向模型传入视频流，从 MediaPipe 图中获取检测到的一组人脸。 const video = document.querySelector("video"); const faces = await model.estimateFaces(video); // 每个 face 对象包含一个`scaledMesh`属性， // 这是一个包含 468 个特征点的数组。 faces.forEach(face = console.log(face.scaledMesh)); estimateFaces 的输入可以是视频、静态图像，甚至是在 node.js 管道中使用的 ImageData 接口。然后，facemesh 返回输入中人脸的预测对象数组，其中包括关于每个人脸的信息（例如，一个置信度评分，以及人脸内 468 个特征点的位置）。下面是一个预测对象样本： { faceInViewConfidence: 1, boundingBox: { topLeft: [232.28, 145.26], // [x, y] bottomRight: [449.75, 308.36], }, mesh: [ [92.07, 119.49, -17.54], // [x, y, z] [91.97, 102.52, -30.54], ... ], scaledMesh: [ [322.32, 297.58, -17.54], [322.18, 263.95, -30.54] ], annotations: { silhouette: [ [326.19, 124.72, -3.82], [351.06, 126.30, -3.00], ... ], ... } } Handpose Handpose 包检测输入图像或视频流中的手，并返回 21 个三维特征点来定位每只手的特征。这些特征点包括每个手指关节和手掌的位置。2019 年 8 月，我们通过 MediaPipe 发布了该模型——你可以在当时发布的博文中找到更多关于模型架构的信息。请参阅我们的模型卡，了解关于如何在不同的数据集上进行手部姿势识别的详细信息。这个包也可以通过 MediaPipe 获得。 性能特征 Handpose 是一个相对轻量级的包，包含大约 12MB 的权重值，适合于实时推断。下表显示了该包在不同设备上的执行情况： 安装 安装 handpose 软件包有以下两种方式： 通过 NPM： import * as handtrack from '@tensorflow-models/handpose; 通过 script 标签： 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-models/handpose"/script 使用 包安装完成以后，你只需要加载模型权重值，并传入一副图像开始跟踪手部特征点： // 加载 MediaPipe handpose 模型资产。 const model = await handpose.load(); // 向模型传入视频流，从 MediaPipe 图中获取预测。 const video = document.querySelector("video"); const hands = await model.estimateHands(video); // 每个 face 对象包含一个`landmarks`属性， // 这是一个包含 21 个 3-D 特征点的数组。 hands.forEach(hand = console.log(hand.landmarks)); 与 facemesh 一样，estimateHands 的输入可以是视频、静态图像或 ImageData 接口。然后，该包返回一个对象数组，该数组描述输入中的手部信息。下面是一个预测对象样本： { handInViewConfidence: 1, boundingBox: { topLeft: [162.91, -17.42], // [x, y] bottomRight: [548.56, 368.23], }, landmarks: [ [472.52, 298.59, 0.00], // [x, y, z] [412.80, 315.64, -6.18], ... ], annotations: { indexFinger: [ [412.80, 315.64, -6.18], [350.02, 298.38, -7.14], ... ], ... } } 未来展望 MediaPipe 团队正在开发更精简的模型架构，而 TensorFlow.js 团队一直在研究加速推理的方法，比如操作符融合。更快的推理将反过来解锁更大、更精确的模型，以便在实时管道中使用。 原文链接： https://blog.tensorflow.org/2020/03/face-and-hand-tracking-in-browser-with-mediapipe-and-tensorflowjs.html 你也「在看」吗？?? 阅读原文