您可以使用 MediaPipe 圖片區隔器工作,根據預先定義的類別將圖片分割成區域,以便套用背景模糊處理等視覺效果。本操作說明將說明如何使用 Node 和網頁應用程式的圖片區塊分割器。適用對象 進一步瞭解 請參閱總覽。
程式碼範例
圖片區隔器的範例程式碼會在 JavaScript 中提供此工作的完整實作方式,供您參考。這段程式碼可協助您測試這項工作,並開始建構自己的圖片分割應用程式。您只需使用網路瀏覽器,即可查看、執行及編輯圖片分割器範例程式碼。您也可以前往 GitHub。
設定
本節將說明設定開發環境和程式碼專案的關鍵步驟,以便使用圖片分割器。如要進一步瞭解如何設定開發環境以使用 MediaPipe 工作,包括平台版本需求,請參閱 網頁版設定指南。
JavaScript 套件
您可以透過 MediaPipe @mediapipe/tasks-vision
NPM 套件取得圖片分割器程式碼。您可以透過平台設定指南中的連結,尋找及下載這些程式庫。
您可以使用下列指令,透過下列本機暫存程式碼安裝必要套件:
npm install --save @mediapipe/tasks-vision
如果想要透過內容傳遞網路 (CDN) 匯入工作程式碼 請在 HTML 檔案的 標記中加入下列程式碼:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
型號
MediaPipe Image Segmenter 工作需要經過訓練且與此模型相容的模型。 工作。如要進一步瞭解圖片區隔工具可用的已訓練模型,請參閱: 工作總覽的「模型」一節。
選取並下載模型,然後將模型儲存在專案目錄中:
<dev-project-root>/app/shared/models/
建立工作
請使用其中一個圖片區隔器 createFrom...()
函式,準備執行推論的工作。使用 createFromModelPath()
函式搭配訓練模型檔案的相對或絕對路徑。如果模型已載入記憶體,您可以使用
createFromModelBuffer()
方法。
以下程式碼範例示範如何使用 createFromOptions()
函式設定工作。createFromOptions
函式可讓您使用設定選項自訂圖片區隔器。如要進一步瞭解工作設定,請參閱「設定選項」。
以下程式碼示範如何使用自訂選項建構及設定工作:
runningMode = "IMAGE";
async function createImageSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
},
outputCategoryMask: true,
outputConfidenceMasks: false
runningMode: runningMode
});
}
createImageSegmenter();
如需更完整的導入「圖片區隔工具」工作,請參閱 程式碼範例。
設定選項
這項工作具有下列網頁應用程式設定選項:
選項名稱 | 說明 | 值範圍 | 預設值 |
---|---|---|---|
outputCategoryMask |
如果設為 True ,則輸出結果會包含區隔遮罩
視為 uint8 圖片,其中每個像素值都代表勝出的類別
值。 |
{True, False } |
False |
outputConfidenceMasks |
如果設為 True ,則輸出結果會包含區隔遮罩
視為浮點值圖片,其中各浮點值代表信心值
分數圖。 |
{True, False } |
True |
displayNamesLocale |
設定標籤語言,供
工作模型的中繼資料 (如有)。預設值為英文的 en 。您可以在自訂模型的中繼資料中加入經本地化的標籤
使用 TensorFlow Lite Metadata Writer API |
語言代碼 | en |
resultListener |
在圖片分割器處於 LIVE_STREAM 模式時,將結果事件監聽器設為以非同步方式接收分割結果。只有在執行模式設為「LIVE_STREAM 」時才能使用 |
不適用 | 不適用 |
準備資料
圖片區隔工具可以用 主機瀏覽器。這項工作也會處理資料輸入預先處理作業,包括 調整大小、旋轉以及值正規化
系統會執行對圖片區隔工具 segment()
和 segmentForVideo()
方法的呼叫
以及封鎖使用者介面執行緒如果要區隔
裝置相機擷取的影片影格,每個分割工作都會封鎖
。您可以藉由實作網路工作站
其他執行緒上的segment()
和 segmentForVideo()
。
執行工作
圖片區隔工具使用 segment()
方法搭配圖片模式,以及
使用 video
模式觸發推論的 segmentForVideo()
方法。圖片區隔器會將偵測到的區隔以圖片資料的形式,傳回至您在為工作執行推論時設定的回呼函式。
以下程式碼示範如何使用工作模型執行處理程序:
圖片
const image = document.getElementById("image") as HTMLImageElement; imageSegmenter.segment(image, callback);
影片
async function renderLoop(): void { const video = document.getElementById("video"); let startTimeMs = performance.now(); imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo); requestAnimationFrame(() => { renderLoop(); }); }
如要進一步瞭解如何執行 Image Segmenter 工作,請參閱程式碼範例。
處理及顯示結果
在執行推論時,Image Segmenter 工作會將片段圖片資料傳回
回呼函式。輸出內容取決於您在設定任務時設定的 outputType
。
以下各節會列舉此工作產生的輸出資料範例:
類別可信度
下圖顯示特定類別的工作輸出圖表
以及圖片辨識結果信心遮罩輸出內容包含 [0, 1]
之間的浮點值。
原始圖片和類別可信度遮罩輸出內容。來源映像檔 2012 年 Pascal VOC 資料集。
類別值
下圖顯示特定類別的工作輸出圖表
值遮罩。類別遮罩範圍是 [0, 255]
,每個像素值
代表模型輸出的獲勝類別索引。優勝獎項
索引是模型能辨識的類別分數最高。
原始圖片和類別遮罩輸出結果。來源映像檔 2012 年 Pascal VOC 資料集。
圖片區塊分割器範例程式碼示範如何顯示工作傳回的區塊分割結果,詳情請參閱程式碼範例。