網頁的物件偵測指南

MediaPipe 物件偵測器工作可讓您偵測多個物件的種類。這項工作會接收圖片資料，然後輸出偵測清單每個結果都代表圖片中識別的物件。程式碼範例您可在 CodePen。

您可以前往 demo」。如要進一步瞭解功能、模型請參閱總覽一文。

程式碼範例

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

設定

本節說明設定開發環境的重要步驟專為使用物件偵測器而設計如需設定您的網路和 JavaScript 開發環境，包含平台版本需求，請參閱網頁版設定指南。

JavaScript 套件

可透過 MediaPipe @mediapipe/tasks-vision 取得物件偵測器程式碼 NPM 套件。你可以才能找到並下載這些程式庫。設定指南。

您可以透過 NPM 安裝必要的套件使用以下指令：

npm install @mediapipe/tasks-vision

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

<!-- 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 物件偵測器工作需要與這個模型相容的已訓練模型工作。如要進一步瞭解物件偵測工具可用的已訓練模型，請參閱：請參閱「Models」(模型) 一節的工作總覽。

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

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

建立工作

使用物件偵測器 ObjectDetector.createFrom...() 函式的其中一個函式即可準備執行推論的工作。使用「createFromModelPath()」內含已訓練模型檔案的相對或絕對路徑。如果模型已載入記憶體，您可以使用 createFromModelBuffer() 方法。以下程式碼範例示範如何使用 createFromOptions() 函式，可讓您進行更多設定只要設定成「自動重新啟動」和「在主機維護期間」選項即可如要進一步瞭解可用的設定選項，請參閱設定選項區段。

下列程式碼示範如何建構及設定這項工作：

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

如需更完整的建立物件偵測器工作實作方式，請參閱程式碼範例。

設定選項

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

選項名稱	說明	值範圍	預設值
`runningMode`	設定任務的執行模式。這裡共有兩個模式：圖片：單一圖片輸入模式。 VIDEO：此模式適用於影片或即時串流等輸入資料 (例如攝影機) 時	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	設定標籤語言，供工作模型的中繼資料 (如有)。以下項目的預設值為 `en`：英語。您可以在自訂模型的中繼資料中加入經本地化的標籤使用 TensorFlow Lite Metadata Writer API	語言代碼	en
`maxResults`	將最高分數偵測結果的選用數量上限設為傳回。	任何正數	-1 (傳回所有結果)
`scoreThreshold`	設定預測分數門檻，此門檻會覆寫模型中繼資料 (如有)低於這個值的結果遭到拒絕。	任何浮點值	未設定
`categoryAllowlist`	設定允許使用的類別名稱清單 (選用)。如果非空白如果偵測結果出的類別名稱不在這個組合中，系統就會將其過濾掉。系統會忽略重複或不明的類別名稱。這個選項與 `categoryDenylist` 互斥，這兩個都會造成錯誤。	任何字串	未設定
`categoryDenylist`	設定不允許使用的類別名稱清單 (選填)。如果非空白的偵測結果，如果偵測結果中屬於這個組合的類別名稱，系統就會加以篩選。系統會忽略重複或不明的類別名稱。這個選項會互相影響只使用 `categoryAllowlist` 且同時使用兩者都會發生錯誤。	任何字串	未設定

準備資料

物件偵測工具可以偵測圖片中的物件，方法包括主機瀏覽器。這項工作也會處理資料輸入預先處理作業，包括調整大小、旋轉以及值正規化如要偵測影片中的物件，請可以使用這個 API 快速處理影格，方法是使用畫面判斷手勢在影片中的時間點。

執行工作

物件偵測器會使用 detect() 來處理單一圖片， detectForVideo() 負責偵測影片畫面中的物件。工作會處理嘗試辨識物件，然後回報結果

系統會執行對 detect() 和 detectForVideo() 方法的呼叫以及封鎖使用者介面執行緒如果你對裝置相機的影片影格，每個分類都會封鎖。如要防止這種情況發生，您可以實作網路工作處理人員在上執行偵測另一個執行緒。

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

圖片

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

影片

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

如需更完整的執行物件偵測器工作實作方式，請參閱程式碼範例。

處理及顯示結果

物件偵測器會為每個偵測執行作業產生偵測結果物件。結果物件包含偵測項目清單，其中每項偵測都包括定界框和被偵測到之物件的類別資訊，包括物件名稱和可信度分數

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

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

下圖是工作輸出內容的視覺化呈現：

物件偵測器程式碼範例示範如何顯示偵測作業查看工作傳回的結果程式碼範例。