英文 | https://medium.com/better-programming/add-facial-recognition-to-your-app-easily-with-face-api-js-58df65921e7
翻譯 | web前端開發（web_qdkf)
隨着越來越多的複雜工具日漸成熟，圖像識別的受歡迎程度繼續增長。隨着AI和計算機視覺技術的發展（事實上，由於互聯網，我們現在可以獲得大量數據），現在也可以在瀏覽器中進行人臉表情識別。
今天，我想向你介紹face-api.js，這是在TensorFlow.js（爲JavaScript創建的流行的機器學習庫）之上實現的JavaScript人臉識別庫。
Face-api非常容易使用。它具有強大的API，該API僅公開必要的配置，隱藏了所有底層，例如實際編寫神經網絡。除了不同的識別模型外，它還帶有預建的繪圖功能，因此我們不必弄亂畫布。
在本教程中，我將介紹如何使用它來檢測圖像上的情緒。實際上，只是爲了向你展示使用face-api.js來實現它很容易，整個腳本文件大約有20行。因此，讓我們開始吧。
設置Face-API
讓我們從索引文件開始。我們需要的只是一個我們想要處理的圖像。我收集了一些馬克的面部表情不同的圖片。這將是本教程的測試主題：
除了圖像之外，我們還需要包括face-api庫。你可以直接從GitHub存儲庫中獲取它，也可以npm i face-api.js在控制檯中運行。我還創建了一個app.js文件，在該文件中我們將與庫的API進行交互。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Emotion Decetion With face-api.js</title>
<style>
body {
margin: 0;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<img src="emotions.jpg" alt="" />
<script src="face-api.min.js"></script>
<script src="app.js"></script>
</body>
</html>
我在根目錄中有圖像，並且還添加了一些次要樣式。我們將把檢測框繪製到canvas元素上。但是，我們不需要創建canvas標籤，因爲我們將從腳本中創建標籤。通過給它一個絕對位置，它將被放置在圖像的頂部。
face-api代替圖像支持其他用於人臉識別的媒體元素，例如video或canvas. 有了該設置並準備好之後，我們就可以開始進行腳本的編寫了！
加載模型
我們要做的第一件事就是包含將用於識別的模型。創建一個models文件夾，然後從GitHub存儲庫中的weights文件夾下載模型。
我們不會使用所有這些。你只需要在ssdMobilenetv1，faceLandmark68Net和faceExpressionNet模式及其相應的碎片文件一起。從文件中可以看到，該庫還可以猜測年齡和性別。
要從JavaScript加載模型，請在app.js文件中添加以下內容：
(async () => {
await faceapi.nets.ssdMobilenetv1.loadFromUri('/models');
})();
調用是異步的；因此，我們需要將整個代碼包裝到異步IIFE中。另外，我們也可以使用諾言，因爲我們從中獲得了待處理的諾言loadFromUri。如果在節點環境中使用它，則還可以使用loadFromDisk方法直接從磁盤加載它。
偵測人臉
接下來，我們將需要獲取圖像並將其用於檢測和從中創建畫布：
(async () => {
await faceapi.nets.ssdMobilenetv1.loadFromUri('/models');
const image = document.querySelector('img');
const canvas = faceapi.createCanvasFromMedia(image);
const detection = await faceapi.detectAllFaces(image);
})();
Face-api定義了一些用於在canvas元素上進行交互和繪製的函數。createCanvasFromMedia將爲canvas我們返回一個元素，可以稍後將其插入dom。
檢測人臉也是異步的，因此我們必須再次使用await。如果圖像中只有一張臉，則可以調用detectAllFaces或detectSingleFace。 默認情況下，這些方法使用SSD Mobilenet V1面部檢測器。 如果要使用其他模型，可以將其作爲第二個參數傳遞給方法，如下所示：
const detection = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions());
繪製檢測
爲了在畫布上繪製檢測結果，我們需要定義另外兩個變量。由於圖像的顯示尺寸和原始尺寸可能會有所不同，因此我們需要匹配尺寸。否則，盒子的位置將關閉。
(async () => {
...
const detection = await faceapi.detectAllFaces(image);
const dimensions = {
width: image.width,
height: image.height
};
const resizedDimensions = faceapi.resizeResults(detection, dimensions);
document.body.append(canvas);
faceapi.draw.drawDetections(canvas, resizedDimensions);
})();
在這裏，我們得到了圖像的寬度和高度，並把它傳遞到resizeResults旁邊的detection。然後，我們將畫布添加到主體並繪製檢測框。
如果你100％確定圖片的顯示尺寸和自然尺寸匹配，則可以省略計算並detection直接傳遞給drawDetections方法，而不用傳遞resizedDimensions。
到目前爲止，這只是人臉識別，但是我們沒有與這些障礙相關的任何情緒。
添加表情和地標檢測
要添加更多檢測，我們需要再加載兩個模型：faceLandmark68Net和faceExpressionNet。
(async () => {
await faceapi.nets.ssdMobilenetv1.loadFromUri('/models');
await faceapi.nets.faceLandmark68Net.loadFromUri('/models');
await faceapi.nets.faceExpressionNet.loadFromUri('/models');
...
})();
我們還需要修改我們的價值detection。我們需要告訴face-api，當檢測到人臉時，還包括地標和表情：
(async () => {
...
const detection = await faceapi.detectAllFaces(image)
.withFaceLandmarks()
.withFaceExpressions();
...
})();
最後，我們可以將它們繪製到畫布上。一切就緒後，這就是整個腳本文件：
(async () => {
await faceapi.nets.ssdMobilenetv1.loadFromUri('/models');
await faceapi.nets.faceLandmark68Net.loadFromUri('/models');
await faceapi.nets.faceExpressionNet.loadFromUri('/models');
const image = document.querySelector('img');
const canvas = faceapi.createCanvasFromMedia(image);
const detection = await faceapi.detectAllFaces(image)
.withFaceLandmarks()
.withFaceExpressions();
const dimensions = {
width: image.width,
height: image.height
};
const resizedDimensions = faceapi.resizeResults(detection, dimensions);
document.body.append(canvas);
faceapi.draw.drawDetections(canvas, resizedDimensions);
faceapi.draw.drawFaceLandmarks(canvas, resizedDimensions);
faceapi.draw.drawFaceExpressions(canvas, resizedDimensions);
})();
現在我們知道了Mark內心的真實感受。如果你想按原樣獲得項目，請訪問我爲本教程創建的faceapi存儲庫。現在，你可以開始爲自己的機器人添加感官了。祝編碼快樂！
