本文轉(zhuǎn)載自公眾號“讀芯術(shù)”(ID：AI_Discovery)。

很多人都能運(yùn)行操作計算機(jī)視覺應(yīng)用程序。是的，學(xué)習(xí)并執(zhí)行它并不難，現(xiàn)在有很多庫可以用來執(zhí)行如此強(qiáng)大的計算機(jī)視覺應(yīng)用程序。

你有沒有關(guān)注最近有沒有看TensorFlow2020峰會?今年，TensorFlow團(tuán)隊發(fā)布了很多非常酷的產(chǎn)品，本文就將介紹如何使用tensorflow.js模型執(zhí)行計算機(jī)視覺應(yīng)用程序。

什么是TensorFlow.js?

TensorFlow.js是一個開源代碼庫，用于JavaScript中的機(jī)器學(xué)習(xí)應(yīng)用程序和開發(fā)機(jī)器學(xué)習(xí)模型，并直接在瀏覽器或Node.js中使用機(jī)器學(xué)習(xí)。

什么是Tensorflow.js模型?

Tensorflow.js模型是經(jīng)過預(yù)先訓(xùn)練的模型，用戶無需為訓(xùn)練模型而準(zhǔn)備/收集數(shù)據(jù)。這些模型托管在NPM(網(wǎng)絡(luò)性能監(jiān)控器)和unpkg上，可以應(yīng)用于任何現(xiàn)成的項目。

本文將介紹tensorflow.js中的MediaPipeFacemesh模型。該模型是為移動設(shè)備上的前置攝像頭設(shè)計的，在這些攝像頭中，人臉往往會占據(jù)較大一部分畫面。

Facemesh模型演示

facemesh模型會根據(jù)筆者的面部動作移動視頻幀。執(zhí)行下面的計算機(jī)視覺應(yīng)用程序需要哪些步驟呢?

第1步：這些是執(zhí)行計算機(jī)視覺應(yīng)用程序的三個重要的獨(dú)立運(yùn)行腳本標(biāo)簽代碼。

<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核心，用于神經(jīng)網(wǎng)絡(luò)和數(shù)值計算的靈活A(yù)PI。
• TensorFlow.js轉(zhuǎn)換器，將TensorFlowSavedModel導(dǎo)入TensorFlow.js的工具。
• facemesh包可查找圖像中的面部邊界和界標(biāo)。

第2步：在主題內(nèi)容中加入視頻HTML標(biāo)簽，從而通過網(wǎng)絡(luò)攝像頭識別面部。

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

第3步：通過腳本處理(通常是JavaScript)，使用畫布標(biāo)簽動態(tài)繪制圖形。

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

第4步：在畫布標(biāo)簽上添加視頻標(biāo)簽以播放視頻幀，從而根據(jù)面部動作移動視頻幀。

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

第5步：加載人臉模型并估計人臉大小，從而在圖像中找到人臉邊界和界標(biāo)。

//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]); 
  } 
  
} 

完成啦!按照上面的六個步驟就可以執(zhí)行計算機(jī)視覺應(yīng)用程序。所有人都認(rèn)為想成為數(shù)據(jù)科學(xué)家就必須熟悉python或R編程語言，現(xiàn)在，使用javascript就可以執(zhí)行機(jī)器學(xué)習(xí)應(yīng)用程序啦。