瀏覽器里標記生活大爆炸所有演員 — — face-api.js

• 2019 年 11 月 30 日
• 筆記

超神經HyperAI 導讀

忘掉那些不開心的，還是有人在好好做瀏覽器的啦。

最近，一群工程師基於 tensorflow.js core 框架，開發出一款可以在瀏覽器上運行的人臉識別 API——face-api.js，不僅能同時還可以識別多張人臉，讓更多非專業 AI 工程師，能夠低成本使用人臉識別技術。

人臉識別原理

face-api.js 是一個基於 Tensorflow.js core 的 js 框架，通過三種 CNN 來進行人臉識別和人臉特徵檢測，從而識別影像中的人物。

跟大多數影像識別技術一樣，這項技術的實現原理也是通過匹配資料庫，找到相似度最高的影像，並輸出結果。不過，face-api.js 可以同時識別一張影像中的多張人臉。

一般人臉識別技術的工作原理為：工程師們先把大量標記有人名等資訊的影像輸入到系統，構建數據訓練集，然後將識別對象作為測試集，與訓練集中的影像進行比對。

如果兩個影像相似度達到閾值，則輸出結果，否則輸出「unknown」。

face-api.js 的實現原理

首先需要進行人臉檢測，即圈出影像中所有的人臉。

face-api.js 通過 SSD 演算法（Single Shot Multibox Detector）來進行人臉檢測。SSD 演算法是一種可以直接檢測目標類別，並確定 bounding box（俗稱 b box）的多目標檢測法，在提高識別精度的同時還能提高識別速度。

可以將 SSD 理解為一個基於 MobileNetV1 的 CNN，並額外添加了邊框預測層。系統首先通過 bounding box 圈定面部輪廓，並進行打分，跟人臉越接近的影像分數越高，以此來過濾掉非面部的影像內容。

為保證準確性，輸入測試集的影像應以人臉為中心，所以需要對面部進行邊框對齊。為此 face-api.js 通過一個簡單的 CNN 來找出確定人臉影像的 68 個標誌點，為下一步人臉識別做準備。

示例圖

通過標誌點，系統可以進一步確定人臉影像，下圖是人臉對齊前（左）和對齊後（右）的效果圖。

人臉對齊效果圖

很明顯，對齊後，跟人臉無關的東西更少了，這是有利於提高系統識別精度的。

人臉識別的實現

圈定人臉後就要開始進行面部識別了。

該程式會將對齊後的人臉輸入到人臉識別深度學習網路中，該網路基於 ResNet-34 體系架構，通過 Dlib 庫進行人臉檢測。該技術可以將人臉特徵映射到一個人臉描述符（具有 128 個值的特徵向量）上，這個過程通常被稱為人臉嵌入。

之後，程式再將每個影像的人臉描述符，與訓練集中的人臉描述符進行相似度比較，並基於閾值判斷兩個面是否相似（對於 150×150 像素的人臉影像，閾值採用 0.6 較為合適）。

可採用歐式距離（即歐幾里得度量）進行相似度度量，效果非常好，實際效果可觀察下面這張 gif 圖。

Talk is cheap , show me the code !

介紹完理論知識後，就該給大家演練一下實操過程了，以下圖作為輸入影像。

第一步：獲取腳本

可以從 dist /face-api.js 上獲取最新腳本：

也可以通過 NPM 獲取：

第二步：載入數據模型

模型文件可以作為 Web 應用程式的靜態資源，也可以掛載到其他位置，可以通過指定文件路徑或 URL 來載入模型。

假設模型在 public/models 目錄下：

如果是載入特定模型，則為：

第三步：獲得完整描述

HTML 影像、畫布或影片都可以作為網路的輸入。下面是獲取輸入影像，即所有人臉的完整描述：

也可以自主選擇人臉位置和特徵：

還可以通過 HTML 畫布顯示邊框，使結果可視化：

人臉特徵顯示如下：

現在我們已經可以計算出輸入影像中每張人臉的位置和描述符，這些描述符將作為參考數據。

下一步是獲取影像的 URL，並使用 faceapi.bufferToImage 創建 HTML 影像元素：

對每個影像確定人臉位置並計算描述符：

然後遍歷輸入影像的人臉描述符，找到參考數據中最相似的描述符：

通過歐幾里得度量，獲得輸入影像中每個人臉的最佳匹配結果，並在 HTML 畫布中顯示邊框及其標籤：

這就是 face-api.js 的人臉識別全過程，是不是非常簡單呢？感興趣的朋友可以去試試，歡迎把你的實驗結果和心得體會發給我們。