TensorFlow2020:如何使用Tensorflow.js执行计算机视觉应用程序？

本文转载自公众号“读芯术”(ID：AI_Discovery)。

很多人都能运行操作计算机视觉应用程序。是的，学习并执行它并不难，现在有很多库可以用来执行如此强大的计算机视觉应用程序。

你有没有关注最近有没有看TensorFlow2020峰会?今年，TensorFlow团队发布了很多非常酷的产品，本文就将介绍如何使用tensorflow.js模型执行计算机视觉应用程序。

什么是TensorFlow.js?

TensorFlow.js是一个开源代码库，用于JavaScript中的机器学习应用程序和开发机器学习模型，并直接在浏览器或Node.js中使用机器学习。

什么是Tensorflow.js模型?

Tensorflow.js模型是经过预先训练的模型，用户无需为训练模型而准备/收集数据。这些模型托管在NPM(网络性能监控器)和unpkg上，可以应用于任何现成的项目。

本文将介绍tensorflow.js中的MediaPipeFacemesh模型。该模型是为移动设备上的前置摄像头设计的，在这些摄像头中，人脸往往会占据较大一部分画面。

Facemesh模型演示

facemesh模型会根据笔者的面部动作移动视频帧。执行下面的计算机视觉应用程序需要哪些步骤呢?

第1步：这些是执行计算机视觉应用程序的三个重要的独立运行脚本标签代码。

<scriptsrcscriptsrc="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script> 
<scriptsrcscriptsrc="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script> 
<scriptsrcscriptsrc="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh"></script> 

• TensorFlow.js核心，用于神经网络和数值计算的灵活API。
• TensorFlow.js转换器，将TensorFlowSavedModel导入TensorFlow.js的工具。
• facemesh包可查找图像中的面部边界和界标。

第2步：在主题内容中加入视频HTML标签，从而通过网络摄像头识别面部。

<videowidthvideowidth=640 height=480 autoplay muted id=”camera”></video> 

第3步：通过脚本处理(通常是JavaScript)，使用画布标签动态绘制图形。

<canvaswidthcanvaswidth=640 height=480 id=”augmented_canvas”></canvas> 

第4步：在画布标签上添加视频标签以播放视频帧，从而根据面部动作移动视频帧。

<videoautoplay loop id=”movie” style=”visibility: hidden”> 
<sourcesrcsourcesrc=”TensorFlowjs.mp4" type=”video/mp4"></source> 
</video> 

第5步：加载人脸模型并估计人脸大小，从而在图像中找到人脸边界和界标。

//load camerastream 
const frame =document.getElementById("camera");//load movie stream 
const movie =document.getElementById("movie"); 
movie.play();//preparecanvas 
const canvas =document.getElementById("augmented_canvas"); 
const draw =canvas.getContext("2d");const result = awaitmodel.estimateFaces(frame, false); 

第6步;在检测到的人脸上使用以下代码绘制视频帧。

//copy camerastream to canvas 
draw.drawImage(frame,0, 0, 640, 480);//check if face is detected 
 if(result.length > 0) 
 { 
  for (let i = 0; i < result.length; i++) { 
    const start = result[i].topLeft; 
    const end = result[i].bottomRight; 
    const size = [end[0] — start[0], end[1] —start[1]];   //Render a rectangle over each detected face. 
   draw.drawImage(movie, start[0], start[1],size[0], size[1]); 
  } 
  
}