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 臉部風格化工具工作所需的已訓練模型與這項工作相容。如要進一步瞭解臉部風格工具可用的已訓練模型，請參閱工作總覽的「模型」部分。
選取並下載模型，然後將其儲存在專案目錄中：
<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 物件，其風格化為輸入圖片中最顯眼的臉孔。
以下為這項工作的輸出資料範例：
上述輸出是將色彩草圖模型套用至下列輸入圖片所建立：
