網頁版的圖片分類指南

MediaPipe 圖片分類器工作可對圖片執行分類作業。您可以使用這項工作，從訓練時定義的一組類別中，找出圖片代表的內容。這些操作說明會介紹如何為 Node 和網頁應用程式使用圖片分類器。

如要查看這項工作實際運作情形，請參閱示範。如要進一步瞭解這項工作的能力、模型和設定選項，請參閱總覽。

程式碼範例

圖像分類器範例程式碼提供這項工作的完整 JavaScript 實作，供您參考。這段程式碼可協助您測試這項工作，並開始建構自己的圖片分類應用程式。您只需使用網路瀏覽器，即可查看、執行及編輯圖片分類器範例。

設定

本節說明設定開發環境和程式碼專案的主要步驟，以便使用圖片分類器。如要瞭解如何設定開發環境以使用 MediaPipe 工作，包括平台版本規定，請參閱 Web 設定指南。

JavaScript 套件

您可以透過 MediaPipe @mediapipe/tasks-vision NPM 套件取得 Image Classifier 程式碼。您可以透過平台設定指南提供的連結，尋找及下載這些程式庫。

您可以使用下列指令，為本機暫存環境安裝必要套件：

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.mjs"
    crossorigin="anonymous"></script>
</head>

型號

MediaPipe 圖片分類工具工作需要與這項工作相容的訓練模型。如要進一步瞭解圖片分類器可用的訓練模型，請參閱工作總覽的「模型」部分。

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

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

建立工作

使用其中一個 Image Classifier 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`
    },
  });
}

設定選項

這項工作提供下列 Web 應用程式設定選項：

選項名稱 說明 值範圍 預設值
runningMode 設定工作執行模式。有兩種模式：

IMAGE：單一圖片輸入模式。

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

準備資料

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

對 Image Classifier 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 取得：

麻雀的特寫照片

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