摘要
隨著計算機視覺技術的發展，人臉識別已成為眾多應用程式中的核心功能。本文將介紹如何利用 TensorFlow.js 和 Face API 建立一個簡單的實時人臉檢測專案。透過訪問使用者的攝像頭，實時識別並繪製面部特徵，為使用者提供直觀的反饋。
專案概述
本專案的目標是在瀏覽器中實現實時人臉檢測，能夠自動識別使用者面部特徵。使用者透過攝像頭訪問該應用，實時檢視檢測到的面部框、特徵點以及可能的面部表情。此專案展示了前端技術與機器學習的結合，極大地增強了使用者體驗。
專案效果
技術棧
TensorFlow.js：
TensorFlow.js是一個強大的機器學習庫，可以在瀏覽器中執行。它支援模型的訓練和推斷，使得我們能夠在前端環境中實現深度學習功能。Face API：
Face API是一個基於TensorFlow.js的庫，專門用於面部檢測和分析。它提供了一系列的工具和模型，能夠檢測面部位置、提取特徵點以及識別面部表情。Vite：
Vite是一個現代的前端構建工具，可以快速搭建專案。它支援快速熱過載和高效的構建流程，使得開發過程更加流暢。HTML5 & CSS：使用
HTML5和CSS構建用戶界面，展示影片流和繪製檢測結果的 Canvas。JavaScript：使用
JavaScript控制邏輯和使用者互動，包括訪問攝像頭、呼叫模型、處理檢測結果等。
建立專案
步驟 1：初始化 Vite 專案
開啟終端，執行以下命令來建立一個 Vite 專案：
npm create vite@latest face-detection --template vanilla cd face-detection npm install
安裝 face-api.js：
npm install face-api.js
步驟 2：專案結構 確保專案目錄結構如下：
face-detection/ │ ├── index.html ├── main.js ├── package.json ├── public/ │ └── models/ (放置人臉檢測模型) └── vite.config.js
步驟 3：下載模型
你可以從 face-api.js 模型倉庫 下載模型檔案，將這些 .bin 檔案和 manifest.json 放到 public/models 資料夾中。
好了，到這裏我們已經具備了最基礎的一個開發環境，下面讓我們來一起實現它。
實現邏輯
1. 載入模型
在頁面載入時，透過 loadModels 函式載入所需的面部檢測模型，包括 TinyFaceDetector、FaceLandmark68Net 和 FaceRecognitionNet。
2. 設定攝像頭
透過 setupCamera 函式訪問使用者的攝像頭，並將影片流呈現在 HTML 的 元素中。
3. 開始檢測
使用 startDetection 函式監聽影片的播放事件。在影片播放時建立一個 Canvas 元素，以便在其上繪製檢測結果。
4. 實時檢測
使用 setInterval 定時器每 100 毫秒執行一次面部檢測，呼叫 faceapi.detectAllFaces 方法。檢測到的人臉會返回面部位置和特徵點等資訊，並透過 faceapi.resizeResults 函式調整結果的尺寸。
5. 繪製檢測結果
清除 Canvas 上的舊繪圖，使用 faceapi.draw.drawDetections 繪製檢測到的面部框，使用 faceapi.draw.drawFaceLandmarks 繪製面部特徵點。
6. 使用者互動
使用者在瀏覽器中實時看到面部檢測的結果，展示檢測到的面部特徵框和點。
專案示例程式碼
import * as faceapi from 'face-api.js';
async function loadModels() {
const MODEL_URL = '/models';
// 載入必要的模型
await faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL);
await faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL);
await faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL);
console.log('Models loaded successfully!');
}
async function setupCamera() {
const video = document.getElementById('video');
const stream = await navigator.mediaDevices.getUserMedia({ video: {} });
video.srcObject = stream;
}
function startDetection() {
const video = document.getElementById('video');
video.addEventListener('play', () => {
const canvas = faceapi.createCanvasFromMedia(video);
document.body.append(canvas);
const displaySize = { width: video.width, height: video.height };
faceapi.matchDimensions(canvas, displaySize);
setInterval(async () => {
const detections = await faceapi.detectAllFaces(
video,
new faceapi.TinyFaceDetectorOptions()
).withFaceLandmarks().withFaceDescriptors(); // 也獲取面部特徵描述符
const resizedDetections = faceapi.resizeResults(detections, displaySize);
// 清除 canvas
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
// 繪製檢測到的面部
faceapi.draw.drawDetections(canvas, resizedDetections);
// 繪製面部特徵點
faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
// 繪製面部特徵描述符
faceapi.draw.drawFaceExpressions(canvas, resizedDetections); // 可選，繪製表情
}, 100);
});
}
(async () => {
await loadModels();
await setupCamera();
startDetection();
})();
結果展示
透過上述程式碼，使用者可以在瀏覽器中實時看到攝像頭捕捉到的人臉，以及識別出的面部特徵。專案不僅可以用於基礎的人臉檢測，還可以作為後續更復雜應用的基礎，例如面部表情識別或身份驗證。
總結
透過本專案，我們可以瞭解到如何結合 TensorFlow.js 和 Face API 實現實時人臉檢測。該專案僅僅是前端技術與深度學習結合的冰山一角，讓我們繼續挖掘它的強大之處吧！
