網頁瀏覽器日益強大,網站和網絡應用程序的複雜性也在不斷提高。幾十年前需要超級計算機才能完成的操作,現在只需一部智能手機即可實現。人臉檢測就是其中之一。
人臉檢測和分析能力非常有用,因為它使我們能夠添加巧妙的功能。想想自動模糊人臉(就像谷歌地圖一樣)、平移和縮放網絡攝像頭畫面以聚焦於人(就像微軟團隊一樣)、驗證護照、添加趣味濾鏡(就像Instagram和Snapchat一樣),以及更多功能。但在我們能夠做到這一切之前,我們首先需要找到人臉!
face-api.js是一個庫,它使開發人員能夠在其應用程序中使用人臉檢測,而無需具備機器學習方面的背景知識。
本教程的代碼可在GitHub上找到。
檢測物體(如人臉)相當複雜。想想看:也許我們可以編寫一個程序,掃描像素以查找眼睛、鼻子和嘴巴。這是可以做到的,但要使其完全可靠,實際上是無法實現的,因為需要考慮許多因素。想想光照條件、面部毛髮、形狀和顏色的巨大差異、化妝、角度、面罩等等。
然而,神經網絡擅長處理這類問題,並且可以進行泛化以適應大多數(如果不是全部)條件。我們可以使用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是一個JavaScript庫,它使用TensorFlow.js在瀏覽器中執行人臉檢測、人臉識別和人臉特徵點檢測。它通過使用機器學習模型來檢測和識別圖像或實時視頻流中的人臉。該庫提供了一些API,允許開發人員執行諸如檢測圖像中所有的人臉、識別特定個人的面部以及識別眼睛、鼻子和嘴巴等面部特徵等任務。
要安裝Face API.js,您可以使用npm或yarn。安裝後,您可以將庫導入到您的項目中並開始使用其API。該庫提供了一套全面的示例和教程,可以幫助您入門。
是的,Face API.js可以用於實時人臉檢測和識別。該庫提供可以處理視頻流並在實時檢測或識別人臉的API。這使其適用於監控、視頻會議和交互式安裝等應用程序。
Face API.js需要支持WebGL和WebAssembly的現代瀏覽器。它還需要相對強大的CPU和GPU,因為人臉檢測和識別是計算密集型任務。但是,確切的要求將取決於具體的用例以及需要處理的人臉數量。
Face API.js的準確性取決於幾個因素,包括輸入圖像或視頻的質量、光照條件以及人臉的姿勢。但是,該庫使用在大型數據集上訓練的最新機器學習模型,因此它可以在大多數條件下實現高精度。
是的,Face API.js可以在各種光照條件和姿勢下檢測和識別面部。但是,與所有機器學習模型一樣,其性能可能會受到極端光照條件或異常姿勢的影響。
是的,Face API.js是開源的,可以用於個人和商業項目。但是,在商業項目中使用任何開源庫之前,最好檢查許可條款。
有幾種方法可以提高Face API.js的性能。一種方法是優化輸入圖像或視頻,例如通過降低其分辨率或將其轉換為灰度。另一種方法是微調人臉檢測和識別算法的參數。
是的,Face API.js可以檢測和識別同一圖像或視頻中的多個人臉。該庫提供返回檢測到的人臉數組的API,每個數組都有自己的邊界框和識別結果。
是的,Face API.js可以與任何JavaScript庫或框架一起使用。它旨在靈活且易於集成到現有項目中。
以上是用face-api.js在網絡上的面部檢測的詳細內容。更多資訊請關注PHP中文網其他相關文章!