首頁 >web前端 >js教程 >用face-api.js在網絡上的面部檢測

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

Christopher Nolan
Christopher Nolan原創
2025-02-09 09:46:12526瀏覽

Face Detection on the Web with 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 Detection on the Web with Face-api.js

我們現在可以使用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 Detection on the Web with Face-api.js

總結

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn