網頁版的圖片分類指南

MediaPipe 圖片分類器工作可讓您對圖片進行分類。您可以使用這項工作，識別圖片在訓練期間定義的一組類別中代表什麼。這些操作說明會示範如何使用節點和網頁應用程式適用的圖片分類器。

如要查看這項工作的實際操作方式，請查看示範。如要進一步瞭解此工作的功能、模型和設定選項，請參閱「總覽」一文。

程式碼範例

圖片分類器的範例程式碼提供這項工作在 JavaScript 中的完整實作，供您參考。這個程式碼可協助您測試這項工作，並著手建構自己的圖片分類應用程式。您可以使用網路瀏覽器來查看、執行及編輯 Image Classifier 程式碼範例。

設定

本節說明設定開發環境的重要步驟，以及特別使用 Image Classifier 的程式碼專案。如需使用 MediaPipe 工作設定開發環境的一般資訊 (包括平台版本要求)，請參閱網頁版設定指南。

JavaScript 套件

您可透過 MediaPipe @mediapipe/tasks-vision NPM 套件取得圖片分類器程式碼。你可以透過平台設定指南提供的連結，找到並下載這些程式庫。

您可以使用下列指令來安裝具有本機測試環境的必要套件：

npm install @mediapipe/tasks-vision

如要透過內容傳遞網路 (CDN) 服務匯入工作程式碼，請在 HTML 檔案的標記中加入下列程式碼：

<!-- 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 Image Classifier 工作需要與這項工作相容的已訓練模型。如要進一步瞭解圖片分類器可用的已訓練模型，請參閱工作總覽的「模型」一節。

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

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

建立工作

請使用其中一個圖片分類器 createFrom...() 函式準備執行推論的工作。搭配已訓練模型檔案的相對或絕對路徑使用 createFromModelPath() 函式。如果模型已載入記憶體，您可以使用 createFromModelBuffer() 方法。

以下程式碼範例示範如何使用 createFromOptions() 函式設定工作。createFromOptions 函式可讓您透過設定選項自訂圖片分類器。如要進一步瞭解設定選項，請參閱設定選項。

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

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

設定選項

這項工作具有下列網頁應用程式設定選項：

選項名稱	說明	值範圍	預設值
`runningMode`	設定任務的執行模式。有兩種模式：圖片：單一圖片輸入模式。影片：針對影片或輸入資料串流 (例如相機) 的解碼影格模式，	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	設定工作模型中繼資料提供的顯示名稱 (如有) 要使用的標籤語言。預設值為 `en` (英文)。您可以使用 TensorFlow Lite Metadata Writer API，將本地化的標籤新增至自訂模型的中繼資料	語言代碼	en
`maxResults`	設定要傳回的最高分數分類結果數量上限。如果小於 0，會傳回所有可用的結果。	任何正數	`-1`
`scoreThreshold`	設定預測分數門檻，以覆寫模型中繼資料 (如有) 中提供的分數值。低於這個值的結果遭到拒絕。	任何浮點值	未設定
`categoryAllowlist`	設定允許使用的類別名稱清單 (選用)。如果非空白，則不在這個集合中的類別名稱分類結果會被篩除。系統會忽略重複或不明的類別名稱。這個選項與 `categoryDenylist` 互斥，且使用兩者都會導致錯誤。	任何字串	未設定
`categoryDenylist`	設定不允許使用的類別名稱清單 (選填)。如果非空白，則會篩除這個集中的類別名稱的分類結果。系統會忽略重複或不明的類別名稱。這個選項與 `categoryAllowlist` 互斥，且同時使用這兩種做法會導致錯誤。	任何字串	未設定
`resultListener`	設定結果事件監聽器，以便在圖片分類器處於直播模式時，以非同步方式接收分類結果。只有在執行模式設為「`LIVE_STREAM`」時才能使用	不適用	未設定

準備資料

圖片分類器可根據主機瀏覽器支援的任何格式，分類圖片中的物件。這項工作也會處理資料輸入預先處理作業，包括調整大小、旋轉和值正規化。

對圖片分類器 classify() 和 classifyForVideo() 方法的呼叫會同步執行，並封鎖使用者介面執行緒。如果您根據裝置相機將影片影格中的物件分類，則每個分類都會封鎖主執行緒。如要防止這種情況發生，您可以實作網路工作站，在另一個執行緒上執行 classify() 和 classifyForVideo()。

執行工作

圖片分類器使用 classify() 方法搭配圖片模式，以及搭配 video 模式的 classifyForVideo() 方法觸發推論。Image Classifier API 會傳回輸入圖片中物件的可能類別。

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

圖片

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

影片

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

如需更完整的實作圖片分類器工作，請參閱程式碼範例。

處理及顯示結果

執行推論時，圖片分類器工作會傳回 ImageClassifierResult 物件，其中包含輸入圖片或頁框中物件的可能類別清單。

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

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

以下裝置會執行 Bird Classifier 來取得這個結果：

圖片分類器程式碼範例示範如何顯示工作傳回的分類結果，詳情請參閱程式碼範例。