您可以使用 MediaPipe 臉部樣式化工作，將臉部樣式化效果套用至圖片中的臉部。您可以使用這個工作，以各種風格建立虛擬人物。
您可以在 GitHub 上找到這些操作說明中所述的程式碼範例。如要進一步瞭解這項工作的功能、模型和設定選項，請參閱總覽。
程式碼範例
Face Stylizer 的程式碼範例會在 JavaScript 中提供此工作的完整實作內容，供您參考。這個程式碼可協助您測試此工作，並開始建構自己的臉部風格化應用程式。您只需使用網路瀏覽器，即可查看、執行及編輯臉部風格化器範例程式碼。
設定
本節將說明設定開發環境的關鍵步驟，特別是使用 Face Stylizer 的步驟。如要進一步瞭解如何設定網路和 JavaScript 開發環境，包括平台版本需求，請參閱網路設定指南。
JavaScript 套件
您可以透過 MediaPipe @mediapipe/tasks-vision
NPM 套件取得 Face Stylizer 程式碼。您可以按照平台設定指南中的操作說明，尋找並下載這些程式庫。
您可以使用下列指令，透過 NPM 安裝必要套件：
npm install @mediapipe/tasks-vision
如果您想透過內容傳遞網路 (CDN) 服務匯入工作程式碼，請在 HTML 檔案的 <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 工作需要與此工作相容的訓練模型。如要進一步瞭解 Face Stylizer 可用的訓練模型，請參閱工作總覽的「模型」一節。
選取並下載模型，然後將模型儲存在專案目錄中：
<dev-project-root>/app/shared/models/
建立工作
請使用其中一個 Face Stylizer createFrom...() 函式，為執行推論作業做好準備。使用 createFromModelPath() 函式搭配訓練模型檔案的相對或絕對路徑。如果模型已載入記憶體，您可以使用 createFromModelBuffer() 方法。
以下程式碼範例示範如何使用 createFromOptions() 函式設定工作。createFromOptions 函式可讓您使用設定選項自訂 Face Stylizer。
以下程式碼示範如何使用自訂選項建構及設定工作：
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"
},
});
準備資料
Face Stylizer 可處理主機瀏覽器支援的任何圖片格式，為圖片中的臉部加上特效。這項工作也會處理資料輸入預先處理作業，包括調整大小、旋轉和值標準化。
執行工作
Face Stylizer 會使用 stylize() 方法觸發推論。這項工作會處理資料、嘗試將臉部轉換為圖樣，然後回報結果。對 Face Stylizer stylize() 方法的呼叫會同步執行，並封鎖使用者介面執行緒。
以下程式碼示範如何使用工作模型執行處理作業：
const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);
處理及顯示結果
臉部造型器會傳回 MPImage 物件，其中包含輸入圖片中最顯眼的臉部造型。
以下是這項工作的輸出資料範例：
上方的輸出內容是將色彩素描模型套用至下列輸入圖片所產生：
