用face-api.js在網絡上的面部檢測

網頁瀏覽器日益強大，網站和網絡應用程序的複雜性也在不斷提高。幾十年前需要超級計算機才能完成的操作，現在只需一部智能手機即可實現。人臉檢測就是其中之一。

人臉檢測和分析能力非常有用，因為它使我們能夠添加巧妙的功能。想想自動模糊人臉（就像谷歌地圖一樣）、平移和縮放網絡攝像頭畫面以聚焦於人（就像微軟團隊一樣）、驗證護照、添加趣味濾鏡（就像Instagram和Snapchat一樣），以及更多功能。但在我們能夠做到這一切之前，我們首先需要找到人臉！

face-api.js是一個庫，它使開發人員能夠在其應用程序中使用人臉檢測，而無需具備機器學習方面的背景知識。

本教程的代碼可在GitHub上找到。

關鍵要點

• face-api.js是一個庫，它使開發人員能夠在其網絡應用程序中使用人臉檢測，而無需具備機器學習方面的背景知識。它可以檢測人臉，估計人臉中的各種特徵，甚至識別照片中的人是誰。
• 該庫使用TensorFlow.js，這是一個流行的JavaScript機器學習庫，用於在瀏覽器中創建、訓練和使用神經網絡。但是，它將所有這些都封裝在一個直觀的API中，使其易於使用。
• face-api.js非常適合業餘項目、實驗，甚至MVP。但是，它可能會影響性能，開發人員可能需要在帶寬和性能或準確性之間進行選擇。
• 雖然face-api.js是一個強大的工具，但需要注意的是，人工智能擅長放大偏差。因此，開發人員應該謹慎使用這項技術，並使用多元化的測試組進行徹底測試。

使用機器學習進行人臉檢測

檢測物體（如人臉）相當複雜。想想看：也許我們可以編寫一個程序，掃描像素以查找眼睛、鼻子和嘴巴。這是可以做到的，但要使其完全可靠，實際上是無法實現的，因為需要考慮許多因素。想想光照條件、面部毛髮、形狀和顏色的巨大差異、化妝、角度、面罩等等。

然而，神經網絡擅長處理這類問題，並且可以進行泛化以適應大多數（如果不是全部）條件。我們可以使用TensorFlow.js（一個流行的JavaScript機器學習庫）在瀏覽器中創建、訓練和使用神經網絡。但是，即使我們使用現成的預訓練模型，我們仍然需要深入了解如何向TensorFlow提供信息以及如何解釋輸出。如果您對機器學習的技術細節感興趣，請查看“使用Python進行機器學習入門”。

face-api.js應運而生。它將所有這些都封裝在一個直觀的API中。我們可以傳遞img、canvas或video DOM元素，庫將返回一個或一組結果。 face-api.js可以檢測人臉，還可以估計人臉中的各種特徵，如下所示。

• 人臉檢測：獲取一個或多個的人臉邊界。這對於確定人臉在圖片中的位置和大小非常有用。
• 人臉特徵點檢測：獲取眉毛、眼睛、鼻子、嘴巴和嘴唇以及下巴的位置和形狀。這可以用於確定面部朝向或將圖形投影到特定區域，例如鼻子和嘴唇之間的鬍子。
• 人臉識別：確定照片中的人是誰。
• 人臉表情檢測：從人臉中獲取表情。請注意，不同文化的結果可能會有所不同。
• 年齡和性別檢測：從人臉中獲取年齡和性別。 “性別”分類將人臉分類為女性或男性，這並不一定能揭示他們的性別。

在您將這些內容用於實驗之外之前，請注意，人工智能擅長放大偏差。性別分類對順性別者效果很好，但它無法檢測到我的非二元朋友的性別。它大部分時間都會識別白人，但經常無法檢測到有色人種。

在使用這項技術時要非常謹慎，並使用多元化的測試組進行徹底測試。

安裝

我們可以通過npm安裝face-api.js：

<code>npm install face-api.js
</code>

但是，為了跳過設置構建工具，我將通過unpkg.org包含UMD包：

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

之後，我們需要從庫的存儲庫下載正確的預訓練模型。確定我們想從人臉中了解什麼，並使用“可用模型”部分確定需要哪些模型。某些功能可以使用多個模型。在這種情況下，我們必須在帶寬/性能和準確性之間進行選擇。比較各種可用模型的文件大小，並選擇您認為最適合您項目的模型。

不確定您的用途需要哪些模型？您可以稍後再返回此步驟。當我們在不加載所需模型的情況下使用API時，將拋出錯誤，說明庫期望的模型。

我們現在可以使用face-api.js API了。

示例

讓我們構建一些東西！

對於下面的示例，我將使用此函數從Unsplash Source加載隨機圖像：

<code>function loadRandomImage() {
  const image = new Image();

  image.crossOrigin = true;

  return new Promise((resolve, reject) => {
    image.addEventListener('error', (error) => reject(error));
    image.addEventListener('load', () => resolve(image));
    image.src = 'https://source.unsplash.com/512x512/?face,friends';
  });
}
</code>

裁剪圖片

您可以在隨附的GitHub存儲庫中找到此演示的代碼。

首先，我們必須選擇並加載模型。要裁剪圖像，我們只需要知道人臉的邊界框，因此人臉檢測就足夠了。我們可以使用兩個模型來做到這一點：SSD Mobilenet v1模型（略低於6MB）和Tiny Face Detector模型（低於200KB）。假設準確性是無關緊要的，因為用戶也可以手動裁剪。此外，讓我們假設訪問者在緩慢的互聯網連接上使用此功能。因為我們的重點是帶寬和性能，我們將選擇較小的Tiny Face Detector模型。

下載模型後，我們可以加載它：

<code>npm install face-api.js
</code>

我們現在可以加載圖像並將其傳遞給face-api.js。 faceapi.detectAllFaces默認使用SSD Mobilenet v1模型，因此我們必須顯式傳遞new faceapi.TinyFaceDetectorOptions()才能強制它使用Tiny Face Detector模型。

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

變量faces現在包含一個結果數組。每個結果都有一個box和score屬性。 score指示神經網絡對結果確實是人臉的信心程度。 box屬性包含人臉坐標的對象。我們可以選擇第一個結果（或者我們可以使用faceapi.detectSingleFace()），但是如果用戶提交的是集體照，我們希望在裁剪的圖片中看到所有的人臉。為此，我們可以計算自定義邊界框：

<code>function loadRandomImage() {
  const image = new Image();

  image.crossOrigin = true;

  return new Promise((resolve, reject) => {
    image.addEventListener('error', (error) => reject(error));
    image.addEventListener('load', () => resolve(image));
    image.src = 'https://source.unsplash.com/512x512/?face,friends';
  });
}
</code>

最後，我們可以創建一個畫布並顯示結果：

<code>await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
</code>

放置表情符號

您可以在隨附的GitHub存儲庫中找到此演示的代碼。

為什麼不玩得開心一點呢？我們可以製作一個過濾器，在所有眼睛上放置一個嘴巴表情符號（?）。要查找眼睛特徵點，我們需要另一個模型。這次，我們關心的是準確性，因此我們使用SSD Mobilenet v1和68點人臉特徵點檢測模型。

同樣，我們首先需要加載模型和圖像：

<code>const image = await loadRandomImage();
const faces = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions());
</code>

要獲取特徵點，我們必須將withFaceLandmarks()函數調用附加到detectAllFaces()以獲取特徵點數據：

<code>const box = {
  // 将边界设置为其反向无穷大，因此任何数字都大于/小于
  bottom: -Infinity,
  left: Infinity,
  right: -Infinity,
  top: Infinity,

  // 给定边界，我们可以计算宽度和高度
  get height() {
    return this.bottom - this.top;
  },

  get width() {
    return this.right - this.left;
  },
};

// 更新边界框
for (const face of faces) {
  box.bottom = Math.max(box.bottom, face.box.bottom);
  box.left = Math.min(box.left, face.box.left);
  box.right = Math.max(box.right, face.box.right);
  box.top = Math.min(box.top, face.box.top);
}
</code>

像上次一樣，faces包含結果列表。除了人臉的位置外，每個結果還包含特徵點的原始點列表。要獲取每個特徵的正確特徵點，我們需要切片點列表。因為點的數量是固定的，所以我選擇硬編碼索引：

<code>npm install face-api.js
</code>

現在我們可以開始在圖片上繪製表情符號了。因為我們必須對兩隻眼睛都這樣做，所以我們可以將feature.eyeLeft和feature.eyeRight放在數組中並迭代它們以對每隻眼睛執行相同的代碼。剩下的就是將表情符號繪製到畫布上！

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

請注意，我使用了一些幻數來調整字體大小和精確的文本位置。因為表情符號是unicode，並且Web上的排版很奇怪（至少對我來說是這樣），所以我只是調整數字直到它們看起來差不多。更強大的替代方法是使用圖像作為疊加層。

總結

face-api.js是一個很棒的庫，它使人臉檢測和識別真正易於訪問。無需熟悉機器學習和神經網絡。我喜歡那些具有啟用功能的工具，而這絕對是其中之一。

根據我的經驗，Web上的人臉識別會影響性能。我們將必須在帶寬和性能或準確性之間進行選擇。較小的模型的準確性肯定較低，並且會在之前提到的某些因素（例如光線不足或人臉被遮蓋）中錯過人臉。

Microsoft Azure、Google Cloud以及可能其他企業都在雲端提供人臉檢測。因為我們避免下載大型模型，基於雲的檢測避免了繁重的頁面加載，往往更準確，因為它經常得到改進，甚至可能更快，因為優化了硬件。如果您需要高精度，您可能需要考慮一個您滿意的計劃。

我絕對推薦將face-api.js用於業餘項目、實驗，也許還可以用於MVP。

關於Face API.js的常見問題解答（FAQ）

什麼是Face API.js，它是如何工作的？

Face API.js是一個JavaScript庫，它使用TensorFlow.js在瀏覽器中執行人臉檢測、人臉識別和人臉特徵點檢測。它通過使用機器學習模型來檢測和識別圖像或實時視頻流中的人臉。該庫提供了一些API，允許開發人員執行諸如檢測圖像中所有的人臉、識別特定個人的面部以及識別眼睛、鼻子和嘴巴等面部特徵等任務。

如何在我的項目中安裝和使用Face API.js？

要安裝Face API.js，您可以使用npm或yarn。安裝後，您可以將庫導入到您的項目中並開始使用其API。該庫提供了一套全面的示例和教程，可以幫助您入門。

Face API.js可以用於實時人臉檢測和識別嗎？

是的，Face API.js可以用於實時人臉檢測和識別。該庫提供可以處理視頻流並在實時檢測或識別人臉的API。這使其適用於監控、視頻會議和交互式安裝等應用程序。

使用Face API.js的系統要求是什麼？

Face API.js需要支持WebGL和WebAssembly的現代瀏覽器。它還需要相對強大的CPU和GPU，因為人臉檢測和識別是計算密集型任務。但是，確切的要求將取決於具體的用例以及需要處理的人臉數量。

Face API.js在檢測和識別人臉方面的準確性如何？

Face API.js的準確性取決於幾個因素，包括輸入圖像或視頻的質量、光照條件以及人臉的姿勢。但是，該庫使用在大型數據集上訓練的最新機器學習模型，因此它可以在大多數條件下實現高精度。

Face API.js可以在不同的光照條件和姿勢下檢測和識別面部嗎？

是的，Face API.js可以在各種光照條件和姿勢下檢測和識別面部。但是，與所有機器學習模型一樣，其性能可能會受到極端光照條件或異常姿勢的影響。

Face API.js可以用於商業項目嗎？

是的，Face API.js是開源的，可以用於個人和商業項目。但是，在商業項目中使用任何開源庫之前，最好檢查許可條款。

如何提高我的應用程序中Face API.js的性能？

有幾種方法可以提高Face API.js的性能。一種方法是優化輸入圖像或視頻，例如通過降低其分辨率或將其轉換為灰度。另一種方法是微調人臉檢測和識別算法的參數。

Face API.js可以識別包含多人的圖像或視頻中的人臉嗎？

是的，Face API.js可以檢測和識別同一圖像或視頻中的多個人臉。該庫提供返回檢測到的人臉數組的API，每個數組都有自己的邊界框和識別結果。

Face API.js可以與其他JavaScript庫或框架一起使用嗎？

是的，Face API.js可以與任何JavaScript庫或框架一起使用。它旨在靈活且易於集成到現有項目中。

以上是用face-api.js在網絡上的面部檢測的詳細內容。更多資訊請關注PHP中文網其他相關文章！