網頁版臉部樣式化指南

MediaPipe 臉部觸控筆工作可讓你為圖片中的臉孔套用臉孔風格。透過這項工作，您可以建立各種風格的虛擬顯示圖片。

如需上述指示中所述的程式碼範例，請前往 GitHub。進一步瞭解功能、模型和設定選項請參閱總覽。

程式碼範例

臉部樣式設定程式碼範例提供完整實作方便您參考。這個程式碼可協助您測試這項工作開始打造自己專屬的臉部風格應用程式您可以查看、執行編輯臉部風格化工具範例只使用您的網站。

設定

本節說明設定開發環境的重要步驟這項功能也特別實用如需設定網頁和 JavaScript 開發環境，包括平台版本需求，請參閱網頁版設定指南。

JavaScript 套件

你可以透過 MediaPipe @mediapipe/tasks-vision 取得臉部風格化程式碼 NPM 套件。您可以請按照平台設定指南。

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

npm install @mediapipe/tasks-vision

如果想要使用內容傳遞網路 (CDN) 匯入工作程式碼請在 <head> 加入下列程式碼代碼：

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

型號

MediaPipe Face Stylizer 工作需要與以下程式碼相容的已訓練模型工作。如要進一步瞭解可用於臉部觸控筆的已訓練模型，請參閱工作總覽的「模型」一節。

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

<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 facestylizer = await FaceStylizer.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
      },
    });

準備資料

臉部觸控工具能以主機支援的任何格式在圖片中設定臉孔風格。這項工作也會處理資料輸入預先處理作業，包括調整大小、以及值正規化

執行工作

臉部樣式設定會使用 stylize() 方法觸發推論。工作內容會處理資料、嘗試為臉孔設定樣式，然後回報結果。系統會同步執行對臉部樣式設定 stylize() 方法的呼叫，並封鎖使用者介面執行緒。

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

const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);

處理及顯示結果

臉部風格化工具會傳回風格化下列值最高的 MPImage 物件呈現出明顯的臉孔

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

以上輸出內容是使用色彩草圖建立而成新增至下列輸入圖片：