網頁版臉部地標偵測指南

MediaPipe Face Landmarker 工作可讓你在圖片、圖片和影片你可以使用這項工作來辨識人類臉部表情像是套用臉部濾鏡和特效，以及製作虛擬頭像。這項工作使用可以使用單一圖片或連續性模型的機器學習 (ML) 模型一流的圖片這項工作會輸出 3D 臉部地標、混合形狀分數 (代表臉部表情的係數) 以推斷詳細的臉部並透過轉換矩陣執行效果轉譯所需的轉換

以下操作說明會示範如何在網頁和 JavaScript 中使用臉部地標應用程式。進一步瞭解功能、模型和設定請參閱總覽。

程式碼範例

這個範例程式碼提供了這項功能的完整實作方便您參考。這個程式碼可協助您測試這項工作開始打造自己的臉部地標應用程式您可以查看、執行編輯臉部地標範例程式碼只要使用網路瀏覽器即可。

設定

本節說明設定開發環境的重要步驟而且我們特別針對「Face 地標」的使用者設計如需設定您的網路和 JavaScript 開發環境，包含平台版本需求，請參閱網頁版設定指南。

JavaScript 套件

你可以透過 MediaPipe @mediapipe/tasks-vision 取得 Face Marker 代碼 NPM 套件。你可以才能找到並下載這些程式庫。設定指南。

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

npm install @mediapipe/tasks-vision

如果想要透過內容傳遞網路 (CDN) 匯入工作程式碼請在 <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.js"
    crossorigin="anonymous"></script>
</head>

型號

MediaPipe Face 標誌 er 工作需要經過訓練且與這個模型相容的模型工作。如要進一步瞭解適用於臉部地標的已訓練模型，請參閱：工作總覽的「模型」一節。

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

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

建立工作

使用臉孔地標 createFrom...() 函式之一來準備執行推論的工作。使用「createFromModelPath()」內含已訓練模型檔案的相對或絕對路徑。如果模型已載入記憶體，您可以使用 createFromModelBuffer() 方法。

以下程式碼範例示範如何使用 createFromOptions() 函式設定工作。createFromOptions 函式可讓您自訂有設定選項的臉部地標。若需更多資訊，請參閲設定選項。

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

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`	設定任務的執行模式。這裡共有兩個模式：圖片：單一圖片輸入模式。 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 Marker 是否輸出臉部混合。臉部混合形狀是用來算繪 3D 臉部模型。	`Boolean`	`False`
`outputFacialTransformationMatrixes`	FaceLandmarker 是否會輸出臉部轉換矩陣FaceLandmarker 會使用將臉部地標從標準臉部模型轉換為，方便使用者在偵測到的地標上套用特效。	`Boolean`	`False`

準備資料

臉部地標可以偵測圖片中的臉孔，支援的格式為主機瀏覽器。這項工作也會處理資料輸入預先處理作業，包括調整大小、旋轉以及值正規化如要在影片中標記臉孔，您可以運用這個 API 的時間戳記，的影格數，判斷臉孔在影片中出現的時間點。

執行工作

臉部地標使用 detect() (搭配跑步模式 IMAGE) 和要觸發的 detectForVideo() (執行模式 VIDEO) 方法推論出工作會處理資料、嘗試建立臉孔辨識符號，然後回報結果

對臉部地標的 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();
  });
}

如需更完整的「臉部地標」工作實作說明，請參閱程式碼範例。

處理及顯示結果

臉部地標會為每個偵測傳回結果物件此程序的第一步是將程式碼簽入執行所有單元測試的存放區中結果物件中會為每個偵測到的臉孔都包含臉部網格，各個臉部地標的座標(選用) 結果物件也可以含有代表臉部表情和臉部表情的混合形狀轉換矩陣，將臉部效果套用至偵測到的地標。

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

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]
    ...

下圖是工作輸出內容的視覺化呈現：

臉部地標範例程式碼示範如何顯示查看工作傳回的結果程式碼範例