網頁版臉部地標偵測指南

MediaPipe Face Landmarker 工作可讓您偵測圖片和影片中的臉部特徵點和臉部表情。您可以使用這項工作辨識人類臉部表情、套用臉部濾鏡和效果，以及建立虛擬化身。這項工作會使用機器學習 (ML) 模型，可處理單張圖片或連續圖片串流。這項工作會輸出 3D 臉部地標、混合形狀分數 (代表臉部表情的係數)，即時推論詳細的臉部表面，以及執行效果算繪所需轉換的轉換矩陣。

以下操作說明將說明如何在網頁和 JavaScript 應用程式中使用臉部地標模型。如要進一步瞭解這項工作的能力、模型和設定選項，請參閱「總覽」。

程式碼範例

臉部地標範例程式碼提供以 JavaScript 完整實作這項工作的參考資料。這段程式碼可協助您測試這項工作，並開始建構自己的臉部地標應用程式。您只需使用網路瀏覽器，即可查看、執行及編輯臉部地標範例。

設定

本節說明設定開發環境的主要步驟，特別是使用 Face Landmarker 的步驟。如要瞭解如何設定網頁和 JavaScript 開發環境 (包括平台版本需求)，請參閱網頁設定指南。

JavaScript 套件

您可以透過 MediaPipe @mediapipe/tasks-vision NPM 套件取得 Face Landmarker 程式碼。如要尋找及下載這些程式庫，請按照平台設定指南中的操作說明進行。

您可以使用下列指令，透過 NPM 安裝必要套件：

npm install @mediapipe/tasks-vision

如要透過內容傳遞聯播網 (CDN) 服務匯入工作程式碼，請在 HTML 檔案的 <head> 代碼中加入下列程式碼：

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

型號

MediaPipe Face Landmarker 工作需要與這項工作相容的訓練模型。如要進一步瞭解 Face Landmarker 適用的預先訓練模型，請參閱工作總覽的「模型」部分。

選取並下載模型，然後儲存在專案目錄中：

<dev-project-root>/app/shared/models/

建立工作

使用其中一個 Face Landmarker createFrom...() 函式，準備執行推論作業。使用 createFromModelPath() 函式，搭配訓練好的模型檔案的相對或絕對路徑。如果模型已載入記憶體，可以使用 createFromModelBuffer() 方法。

下方程式碼範例說明如何使用 createFromOptions() 函式設定工作。createFromOptions 函式可讓您透過設定選項自訂 Face Landmarker。詳情請參閱「設定選項」。

下列程式碼示範如何使用自訂選項建構及設定工作：

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const faceLandmarker = await faceLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

設定選項

這項工作提供下列網頁和 JavaScript 應用程式的設定選項：

選項名稱 說明 值範圍 預設值
running_mode 設定工作執行模式。有兩種模式：

IMAGE：單一圖片輸入模式。

VIDEO：用於影片解碼影格的模式，或用於輸入資料的直播，例如來自攝影機的資料。		 {IMAGE, VIDEO} IMAGE
numFaces FaceLandmarker 可偵測的臉部數量上限。只有在 num_faces 設為 1 時，才會套用平滑處理。 Integer > 0 1
minFaceDetectionConfidence 臉部偵測成功所需的最低信賴分數。 Float [0.0,1.0] 0.5
minFacePresenceConfidence 臉部特徵偵測中，臉部出現信賴分數的最低分數。 Float [0.0,1.0] 0.5
minTrackingConfidence 臉部追蹤的最低信賴分數，達到這個分數才算成功。 Float [0.0,1.0] 0.5
outputFaceBlendshapes Face Landmarker 是否會輸出臉部混合形狀。 臉部混合形狀會用於算繪 3D 臉部模型。 Boolean False
outputFacialTransformationMatrixes FaceLandmarker 是否輸出臉部轉換矩陣。FaceLandmarker 會使用矩陣將標準臉部模型中的臉部地標轉換為偵測到的臉部，讓使用者在偵測到的地標上套用特效。 Boolean False

準備資料

Face Landmarker 可偵測主機瀏覽器支援的任何格式圖片中的臉部。這項工作也會處理資料輸入預先處理作業，包括調整大小、旋轉和值正規化。如要標記影片中的臉部，您可以使用 API 逐一快速處理影格，並利用影格的時間戳記判斷臉部出現在影片中的時間。

執行工作

臉部地標偵測器會使用 detect() (執行模式為 IMAGE) 和 detectForVideo() (執行模式為 VIDEO) 方法觸發推論。這項工作會處理資料、嘗試標記臉部地標，然後回報結果。

對 Face Landmarker detect() 和 detectForVideo() 方法的呼叫會同步執行，並封鎖使用者介面執行緒。如果偵測到裝置攝影機影像影格中的臉部，每次偵測都會封鎖主要執行緒。如要避免這種情況，請實作網頁工作人員，在另一個執行緒上執行 detect() 和 detectForVideo() 方法。

以下程式碼示範如何使用工作模型執行處理作業：

圖片

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

影片

await faceLandmarker.setOptions({ runningMode: "VIDEO" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const faceLandmarkerResult = faceLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

如要瞭解如何更完整地實作 Face Landmarker 工作，請參閱範例。

處理及顯示結果

Face Landmarker 會針對每次偵測執行作業傳回結果物件。結果物件會包含每個偵測到的臉部網格，以及每個臉部地標的座標。視需要，結果物件也可以包含混合形狀，表示臉部表情，以及臉部轉換矩陣，以便在偵測到的地標上套用臉部特效。

以下是這項工作的輸出資料範例：

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

下圖顯示工作輸出內容的視覺化效果：

臉部區域經過幾何對應的男子，顯示臉部形狀和尺寸

Face Landmarker 範例程式碼示範如何顯示工作傳回的結果，請參閱範例