網頁版的圖片分類指南

MediaPipe 圖片分類器工作可讓您對圖片進行分類。別擔心！您可以使用這項工作能找出圖片在一組定義的類別中代表什麼內容以訓練資料為準以下操作說明會說明如何使用圖片分類器節點和網頁應用程式

您可以前往 demo」。進一步瞭解功能、模型和設定選項請參閱總覽。

程式碼範例

圖片分類器的範例程式碼提供了方便您參考。這個程式碼可協助您測試這項工作立即開始建構自己的圖片分類應用程式您可以查看、執行編輯圖片分類器程式碼範例只要使用網路瀏覽器即可。

設定

本節說明設定開發環境的重要步驟，以及以及專門使用 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`	設定任務的執行模式。這裡共有兩個模式：圖片：單一圖片輸入模式。 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`」時才能使用	不適用	未設定

準備資料

圖片分類工具可以用主機瀏覽器。這項工作也會處理資料輸入預先處理作業，包括調整大小、旋轉以及值正規化

系統會執行向圖片分類器 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 取得已開啟：

圖片分類器程式碼範例示範如何顯示分類查看工作傳回的結果程式碼範例。