目录

起点

设置BodyPix

检测脸部触摸

技术脚注

终点线

下一步是什么？我们可以使用TensorFlow.js做更多的事情吗？

  • 下载TensorFlowJS示例-6.1 MB

TensorFlow + JavaScript。现在，最流行，最先进的AI框架支持地球上使用最广泛的编程语言，因此，让我们在我们的web浏览器中通过深度学习实现奇迹，通过TensorFlow.js的WebGL GPU加速！

这是我们六个系列的第五篇文章：

  1. 使用TensorFlow.js在浏览器中进行深度学习入门
  2. 狗和披萨：使用TensorFlow.js在浏览器中实现计算机视觉
  3. 绒毛动物探测器：通过TensorFlow.js中的迁移学习识别浏览器中的自定义对象
  4. 使用TensorFlow.js进行人脸触摸检测第1部分：将实时网络摄像头数据与深度学习配合使用
  5. 使用TensorFlow.js进行人脸触摸检测第2部分：使用BodyPix
  6. 使用TensorFlow.js进行AI在网络摄像头中翻译手势和手语

在上一篇论文中，我们使用TensorFlow.js训练了一个AI以模拟donottouchyourface.com应用程序，该应用程序旨在通过学习停止触摸面部来帮助人们降低患病的风险。在本文中，我们将使用BodyPix（身体部位检测和分割库）来尝试删除面部触摸检测的训练步骤。

起点

对于此项目，我们需要：

  • 导入TensorFlow.js和BodyPix
  • 添加视频元素
  • 添加画布进行调试
  • 为“触摸与无触摸”状态添加文本元素
  • 添加网络摄像头设置功能
  • 每200毫秒运行一次模型预测，而不是选择图像，但仅在模型首次训练之后

这是我们的起点：

<html><head><title>Face Touch Detection with TensorFlow.js Part 2: Using BodyPix</title><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script><style>img, video {object-fit: cover;}</style></head><body><video autoplay playsinline muted id="webcam" width="224" height="224"></video><canvas id="canvas" width="224" height="224"></canvas><h1 id="status">Loading...</h1><script>async function setupWebcam() {return new Promise( ( resolve, reject ) => {const webcamElement = document.getElementById( "webcam" );const navigatorAny = navigator;navigator.getUserMedia = navigator.getUserMedia ||navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia ||navigatorAny.msGetUserMedia;if( navigator.getUserMedia ) {navigator.getUserMedia( { video: true },stream => {webcamElement.srcObject = stream;webcamElement.addEventListener( 'loadeddata', resolve, false );},error => reject());}else {reject();}});}(async () => {await setupWebcam();setInterval( predictImage, 200 );})();async function predictImage() {// Prediction Code Goes Here}</script></body>
</html>

设置BodyPix

在加载时，BodyPix需要几个参数——您可能会认出其中一些。它支持两种不同的架构预训练模型：MobileNetV1和ResNet50。所需参数可能会因您选择的型号而异。我们将使用MobileNet并通过以下代码初始化BodyPix：

(async () => {model = await bodyPix.load({architecture: 'MobileNetV1',outputStride: 16,multiplier: 0.50,quantBytes: 2});await setupWebcam();setInterval( predictImage, 200 );
})();

检测脸部触摸

通过身体部位分割，我们从BodyPix获得了两条数据：

  • 用二维屏幕像素坐标表示的身体部位的关键点，例如鼻子、耳朵、手腕、肘部等
  • 以一维数组格式存储的二维分割像素数据

经过简短测试，我发现检索到的鼻子和耳朵的关键点坐标相当可靠，而一个人的手腕的点还不够准确，无法确定手是否在触摸脸部。因此，我们将使用分割像素来确定面部触摸。

因为鼻子和耳朵的关键点似乎是可靠的，所以我们可以使用它们来估计人脸的圆形区域。使用该圆形区域，我们可以确定左侧或右侧分割像素是否与该区域重叠——并将状态标记为面部触摸。

这是我从起点模板编写predictImage()函数的方式，使用距离公式检查面部区域是否重叠：

async function predictImage() {const img = document.getElementById( "webcam" );const segmentation = await model.segmentPersonParts( img );if( segmentation.allPoses.length > 0 ) {const keypoints = segmentation.allPoses[ 0 ].keypoints;const nose = keypoints[ 0 ].position;const earL = keypoints[ 3 ].position;const earR = keypoints[ 4 ].position;const earLtoNose = Math.sqrt( Math.pow( nose.x - earL.x, 2 ) + Math.pow( nose.y - earL.y, 2 ) );const earRtoNose = Math.sqrt( Math.pow( nose.x - earR.x, 2 ) + Math.pow( nose.y - earR.y, 2 ) );const faceRadius = Math.max( earLtoNose, earRtoNose );// Check if any of the left_hand(10) or right_hand(11) pixels are within the nose to faceRadiuslet isTouchingFace = false;for( let y = 0; y < 224; y++ ) {for( let x = 0; x < 224; x++ ) {if( segmentation.data[ y * 224 + x ] === 10 ||segmentation.data[ y * 224 + x ] === 11 ) {const distToNose = Math.sqrt( Math.pow( nose.x - x, 2 ) + Math.pow( nose.y - y, 2 ) );// console.log( distToNose );if( distToNose < faceRadius ) {isTouchingFace = true;break;}}}if( isTouchingFace ) {break;}}if( isTouchingFace ) {document.getElementById( "status" ).innerText = "Touch";}else {document.getElementById( "status" ).innerText = "Not Touch";}// --- Uncomment the following to view the BodyPix mask ---// const canvas = document.getElementById( "canvas" );// bodyPix.drawMask(//     canvas, img,//     bodyPix.toColoredPartMask( segmentation ),//     0.7,//     0,//     false// );}
}

如果您想查看BodyPix预测的像素，可以取消该功能的底部注释。

我的方法predictImage()是使用手像素的接近度进行非常粗略的估算。一个有趣的挑战可能是找到一种更准确的方法来检测人的手何时触摸了面部！

技术脚注

  • 使用BodyPix进行面部触摸检测的一个优点是，用户无需使用不良行为示例来训练AI。
  • BodyPix的另一个优点是，当人的手隐藏在其后面时，它可以将前面的脸分割。
  • 这种方法和预测比我们在上一篇文章中所使用的更具体于识别人脸触摸动作; 但是，如果有足够的样本数据，第一种方法可能会导致更准确的预测
  • 预计性能问题，因为BodyPix在计算上很昂贵

终点线

供您参考，这是此项目的完整代码：

<html><head><title>Face Touch Detection with TensorFlow.js Part 2: Using BodyPix</title><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script><style>img, video {object-fit: cover;}</style></head><body><video autoplay playsinline muted id="webcam" width="224" height="224"></video><canvas id="canvas" width="224" height="224"></canvas><h1 id="status">Loading...</h1><script>async function setupWebcam() {return new Promise( ( resolve, reject ) => {const webcamElement = document.getElementById( "webcam" );const navigatorAny = navigator;navigator.getUserMedia = navigator.getUserMedia ||navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia ||navigatorAny.msGetUserMedia;if( navigator.getUserMedia ) {navigator.getUserMedia( { video: true },stream => {webcamElement.srcObject = stream;webcamElement.addEventListener( 'loadeddata', resolve, false );},error => reject());}else {reject();}});}let model = null;(async () => {model = await bodyPix.load({architecture: 'MobileNetV1',outputStride: 16,multiplier: 0.50,quantBytes: 2});await setupWebcam();setInterval( predictImage, 200 );})();async function predictImage() {const img = document.getElementById( "webcam" );const segmentation = await model.segmentPersonParts( img );if( segmentation.allPoses.length > 0 ) {const keypoints = segmentation.allPoses[ 0 ].keypoints;const nose = keypoints[ 0 ].position;const earL = keypoints[ 3 ].position;const earR = keypoints[ 4 ].position;const earLtoNose = Math.sqrt( Math.pow( nose.x - earL.x, 2 ) + Math.pow( nose.y - earL.y, 2 ) );const earRtoNose = Math.sqrt( Math.pow( nose.x - earR.x, 2 ) + Math.pow( nose.y - earR.y, 2 ) );const faceRadius = Math.max( earLtoNose, earRtoNose );// Check if any of the left_hand(10) or right_hand(11) pixels are within the nose to faceRadiuslet isTouchingFace = false;for( let y = 0; y < 224; y++ ) {for( let x = 0; x < 224; x++ ) {if( segmentation.data[ y * 224 + x ] === 10 ||segmentation.data[ y * 224 + x ] === 11 ) {const distToNose = Math.sqrt( Math.pow( nose.x - x, 2 ) + Math.pow( nose.y - y, 2 ) );// console.log( distToNose );if( distToNose < faceRadius ) {isTouchingFace = true;break;}}}if( isTouchingFace ) {break;}}if( isTouchingFace ) {document.getElementById( "status" ).innerText = "Touch";}else {document.getElementById( "status" ).innerText = "Not Touch";}// --- Uncomment the following to view the BodyPix mask ---// const canvas = document.getElementById( "canvas" );// bodyPix.drawMask(//     canvas, img,//     bodyPix.toColoredPartMask( segmentation ),//     0.7,//     0,//     false// );}}</script></body>
</html>

下一步是什么？我们可以使用TensorFlow.js做更多的事情吗？

在这个项目中，我们看到了使用BodyPix估算一个人的身体姿势有多么容易。对于下一个项目，让我们重新回顾网络摄像头传输学习，并从中获得一些乐趣。

请跟随本系列的下一篇文章一起看看我们是否可以训练AI来深度学习一些手势和手语。

https://www.codeproject.com/Articles/5272775/Face-Touch-Detection-with-TensorFlow-js-Part-2-Usi

使用TensorFlow.js进行人脸触摸检测第2部分：使用BodyPix相关推荐

  1. 使用TensorFlow.js进行人脸触摸检测第1部分：将实时网络摄像头数据与深度学习配合使用

    目录 起点 将HTML5网络摄像头API与TensorFlow.js结合使用 检测脸部触摸 技术脚注 终点线 下一步是什么?我们是否可以在未经培训的情况下检测到面部触摸? 下载TensorFlowJS ...

  2. 在浏览器中使用tensorflow.js进行人脸识别的JavaScript API

    作者 | Vincent Mühle 编译 | 姗姗 出品 | 人工智能头条(公众号ID:AI_Thinker) [导读]随着深度学习方法的应用,浏览器调用人脸识别技术已经得到了更广泛的应用与提升.在 ...

  3. 使用TensorFlow.js进行AI在网络摄像头中翻译手势和手语

    目录 起点 检测手势 其他手势和手语 技术脚注 终点线 下一步是什么? TensorFlow + JavaScript.现在,最流行,最先进的AI框架支持地球上使用最广泛的编程语言,因此,让我们在我们 ...

  4. 绒毛动物探测器：通过TensorFlow.js中的迁移学习识别浏览器中的自定义对象

    目录 起点 MobileNet v1体系结构上的迁移学习 修改模型 训练新模式 运行物体识别 终点线 下一步是什么?我们可以检测到脸部吗? 下载TensorFlowJS-Examples-master ...

  5. 狗和披萨：使用TensorFlow.js在浏览器中实现计算机视觉

    目录 起点 托管说明 MobileNet v1 运行物体识别 终点线 下一步是什么?绒毛动物? 下载TensorFlowJS示例-6.1 MB TensorFlow + JavaScript.现在,最 ...

  6. 使用TensorFlow.js在浏览器中进行深度学习入门

    目录 设置TensorFlow.js 创建训练数据 检查点 定义神经网络模型 训练AI 测试结果 终点线 内存使用注意事项 下一步是什么?狗和披萨? 下载TensorFlowJS示例-6.1 MB T ...

  7. 用浏览器训练Tensorflow.js模型的18个技巧（上）

    摘要: 送你18个训练Tensorflow.js模型的小技巧! 在移植现有模型(除tensorflow.js)进行物体检测.人脸检测.人脸识别后,我发现一些模型不能以最佳性能发挥.而tensorflo ...

  8. 人脸口罩检测现开源PyTorch、TensorFlow、MXNet等全部五大主流深度学习框架模型和代码...

    号外!号外! 现在,AIZOO开源PyTorch.TensorFlow.MXNet.Keras和Caffe五大主流深度学习框架的人脸检测模型和代码啦! 先附上Github链接为敬. https://g ...

  9. 使用face-api和Tensorflow.js进行预训练的AI情绪检测

    目录 设置服务器 设置HTML 获取实时视频源 使用face-api.js进行预测 将代码放在一起 测试结果 下一步是什么? 下载源-10.6 MB 面部表情识别是图像识别中关注的关键领域之一,一直都 ...

最新文章

  1. JavaScript小记
  2. 生命真的源于宇宙吗？多名宇航员身体，都曾发生“不可逆”的变化
  3. 无人驾驶还不如一个导盲犬可靠吗
  4. OpenGL开发学习指南一（freeglut+glew）
  5. Sentinel 源码分析（一）
  6. 高等数理统计(part3)--常见的连续型分布
  7. 爱立信首席执行官卫翰思离职 投资者已失去耐性
  8. 【语义分割】Pyramid Scene Parsing Network（PSNET）
  9. Frida系列--自动化生成脚本
  10. An improved genetic algorithm for the flexible job shop scheduling problem with multiple time constr
  11. matlab PTB 学习笔记01——运行前准备
  12. L1-049 天梯赛座位分配 (Python)
  13. 一口气从零读懂CAN总线以及应用
  14. android好用的NFC软件,5个有用的NFC应用程序为Android，以利于NFC | MOS86
  15. 批量去除图片的黑色背景，并且统一修改图片尺寸
  16. 2019年字节跳动2020届秋招在线笔试真题（后端开发工程师）
  17. python培训班-Python培训机构_高品质Python线下开发培训班推荐-黑马程序员
  18. 分布式文件系统HDFS实践及原理详解part3
  19. C专家编程 第6章 运动的诗章：运行时数据结构 6.1 a.out及其传说
  20. 你所不了解的第五人格手游剧情解析？你都玩懂第五人格了吗？

热门文章

  1. mysql孤立锁_SQL Server解决孤立用户浅析
  2. php mysql 地理位置_MySQL版中国省市区地址地区信息数据表
  3. 写入word_E016 如何把Word文字信息批量写入文本文件
  4. probe request帧结构_WIFI基础知识（802.11）
  5. php urledcode_用JavaScript实现PHP的urldecode函数
  6. PCM（脉冲编码调制）、iLBC编解码、opus（声音编码格式）、VP8视频压缩格式、H.264数字视频压缩格式
  7. C语言求一个数的倒数的平方根近似值
  8. 2019.02.10 17:49
  9. oracle数据库中分区表的效果是,分区表实际测试中发现并没有什么效果，帮忙看看问题出在哪里了？？？...
  10. tm图像融合编程matlab,遥感习题