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

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

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

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

關(guān)鍵要點

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

使用機器學(xué)習(xí)進行人臉檢測

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

然而，神經(jīng)網(wǎng)絡(luò)擅長處理這類問題，並且可以進行泛化以適應(yīng)大多數(shù)（如果不是全部）條件。我們可以使用TensorFlow.js（一個流行的JavaScript機器學(xué)習(xí)庫）在瀏覽器中創(chuàng)建、訓(xùn)練和使用神經(jīng)網(wǎng)絡(luò)。但是，即使我們使用現(xiàn)成的預(yù)訓(xùn)練模型，我們?nèi)匀恍枰钊肓私馊绾蜗騎ensorFlow提供信息以及如何解釋輸出。如果您對機器學(xué)習(xí)的技術(shù)細(xì)節(jié)感興趣，請查看“使用Python進行機器學(xué)習(xí)入門”。

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

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

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

在使用這項技術(shù)時要非常謹(jǐn)慎，並使用多元化的測試組進行徹底測試。

安裝

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

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

但是，為了跳過設(shè)置構(gòu)建工具，我將通過unpkg.org包含UMD包：

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

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

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

我們現(xiàn)在可以使用face-api.js API了。

示例

讓我們構(gòu)建一些東西！

對於下面的示例，我將使用此函數(shù)從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）。假設(shè)準(zhǔn)確性是無關(guān)緊要的，因為用戶也可以手動裁剪。此外，讓我們假設(shè)訪問者在緩慢的互聯(lián)網(wǎng)連接上使用此功能。因為我們的重點是帶寬和性能，我們將選擇較小的Tiny Face Detector模型。

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

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

我們現(xiàn)在可以加載圖像並將其傳遞給face-api.js。 faceapi.detectAllFaces默認(rèn)使用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現(xiàn)在包含一個結(jié)果數(shù)組。每個結(jié)果都有一個box和score屬性。 score指示神經(jīng)網(wǎng)絡(luò)對結(jié)果確實是人臉的信心程度。 box屬性包含人臉坐標(biāo)的對象。我們可以選擇第一個結(jié)果（或者我們可以使用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>

最後，我們可以創(chuàng)建一個畫布並顯示結(jié)果：

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

放置表情符號

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

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

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

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

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

<code>const box = {
  // 將邊界設(shè)置為其反向無窮大，因此任何數(shù)字都大于/小于
  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包含結(jié)果列表。除了人臉的位置外，每個結(jié)果還包含特徵點的原始點列表。要獲取每個特徵的正確特徵點，我們需要切片點列表。因為點的數(shù)量是固定的，所以我選擇硬編碼索引：

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

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

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

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

總結(jié)

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

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

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

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

關(guān)於Face API.js的常見問題解答（FAQ）

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

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

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

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

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

是的，F(xiàn)ace API.js可以用於實時人臉檢測和識別。該庫提供可以處理視頻流並在實時檢測或識別人臉的API。這使其適用於監(jiān)控、視頻會議和交互式安裝等應(yīng)用程序。

使用Face API.js的系統(tǒng)要求是什麼？

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

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

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

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

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

Face API.js可以用於商業(yè)項目嗎？

是的，F(xiàn)ace API.js是開源的，可以用於個人和商業(yè)項目。但是，在商業(yè)項目中使用任何開源庫之前，最好檢查許可條款。

如何提高我的應(yīng)用程序中Face API.js的性能？

有幾種方法可以提高Face API.js的性能。一種方法是優(yōu)化輸入圖像或視頻，例如通過降低其分辨率或?qū)⑵滢D(zhuǎn)換為灰度。另一種方法是微調(diào)人臉檢測和識別算法的參數(shù)。

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

是的，F(xiàn)ace API.js可以檢測和識別同一圖像或視頻中的多個人臉。該庫提供返回檢測到的人臉數(shù)組的API，每個數(shù)組都有自己的邊界框和識別結(jié)果。

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

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

以上是用face-api.js在網(wǎng)絡(luò)上的面部檢測的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！