在 Chrome 擴充功能中部署 TensorFlow.js

在本教學課程中，您將建構並安裝 Chrome 擴充功能，讓您在網頁中按一下滑鼠右鍵點選圖片，並對圖片執行多類別物件偵測。此擴充功能會將 MobileNetV2 分類器套用至圖片，然後使用預測類別標記圖片。

範例程式碼可在 GitHub 上取得。

先決條件

若要完成本教學課程，您的開發環境中需要安裝下列項目

建構擴充功能

取得原始碼並建構擴充功能

  1. 複製或下載 tfjs-examples 存放區。
  2. 變更為 chrome-extension 目錄：cd tfjs-examples/chrome-extension。
  3. 安裝依附元件：yarn。
  4. 執行建構指令碼：yarn build。

執行建構指令碼後，您應該會看到下列新檔案

  • dist/src/content.js
  • dist/src/service_worker.js
  • dist/src/service_worker.js.map

安裝擴充功能

在 Chrome 中安裝擴充功能

  1. 在 Chrome 瀏覽器中，前往 chrome://extensions。
  2. 使用瀏覽器右側的切換按鈕開啟「開發人員模式」。
  3. 選取「載入未封裝項目」，然後選取 tfjs-examples/chrome-extension/dist 目錄。此目錄包含 manifest.json 檔案和建構封裝的 src/*.js 檔案。

您應該會看到「TF.js mobilenet in a Chrome extension」的新卡片。

使用擴充功能

安裝擴充功能後，您可以在瀏覽器中分類圖片

  1. 前往具有圖片的網站。例如，前往 google.com，搜尋「老虎」，然後在結果頁面中選取「圖片」。您應該會看到老虎圖片頁面。
  2. 在圖片上按一下滑鼠右鍵，然後選取「使用 TensorFlow.js 分類圖片」。會有預熱期，因此第一次執行應用程式時，推論速度會較慢。(在您自己的應用程式中，您可以透過饋送虛擬資料來啟動模型。)

擴充功能會在圖片上執行模型，然後疊加文字以指出預測。

移除擴充功能

當您完成擴充功能的實驗後，可以移除它

  1. 在 Chrome 中，前往 chrome://extensions。
  2. 在「TF.js mobilenet in a Chrome extension」卡片中，選取「移除」，然後確認您要移除擴充功能。

擴充功能的運作方式

本節將概略說明擴充功能的運作方式。

資訊清單檔案 manifest.json 指定 Chrome 將在背景執行的 Service Worker

"background": {
   "service_worker": "src/service_worker.js"
},

Service Worker 指令碼 service_worker.js 匯入 TensorFlow.js 套件和 mobilenet 模型。

import * as mobilenet from '@tensorflow-models/mobilenet';
import * as tf from '@tensorflow/tfjs';

package.json 中的建構指令碼使用套件組合器 Parcel 將所有項目組合在一起，因此在執行階段不會載入外部指令碼。

"build": "parcel build src/service_worker.js --dist-dir dist/src/ && npm run copy",

這是為了符合 Chrome Manifest V3，後者禁止遠端託管程式碼。請注意，Service Worker 仍然可以載入外部資源，例如 TensorFlow.js 模型。

Service Worker 指令碼會建立操作圖片的內容選單項目。然後，指令碼會接聽點擊。

/**
 * Adds a right-click menu option to trigger classifying the image.
 * The menu option should only appear when right-clicking an image.
 */
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'contextMenu0',
    title: 'Classify image with TensorFlow.js ',
    contexts: ['image'],
  });
});

chrome.contextMenus.onClicked.addListener(clickMenuCallback);

當使用者選取選單項目時，回呼會傳送訊息，其中包含目前的分頁 ID 和按一下滑鼠右鍵點選的圖片網址。(請注意，在 Service Worker 中，DOM 物件無法使用。)

function clickMenuCallback(info, tab) {
  const message = { action: 'IMAGE_CLICKED', url: info.srcUrl };
  chrome.tabs.sendMessage(tab.id, message, (resp) => {
    if (!resp.rawImageData) {
      console.error(
        'Failed to get image data. ' +
        'The image might be too small or failed to load. ' +
        'See console logs for errors.');
      return;
    }
    const imageData = new ImageData(
      Uint8ClampedArray.from(resp.rawImageData), resp.width, resp.height);
    imageClassifier.analyzeImage(imageData, info.srcUrl, tab.id);
  });
}

內容指令碼 content.js 會接聽訊息並處理 IMAGE_CLICKED 動作。指令碼會接收圖片網址、載入圖片、在 OffscreenCanvas 上轉譯圖片、從畫布取得圖片資料，然後將資料傳回 Service Worker。

在 Service Worker 收到圖片資料後，它會使用資料執行 mobilenet 模型並取得預測結果。在上述 clickMenuCallback 函式中，imageClassifier 是 ImageClassifier 類別的執行個體，它會載入模型並取得預測。然後，Service Worker 指令碼會將結果傳回內容指令碼以供顯示。在內容指令碼收到結果後，它會將結果疊加在原始圖片之上。

當大約 30 秒內沒有活動發生時，Service Worker 執行緒會進入閒置狀態。如需管理 Service Worker 事件的詳細資訊，請參閱 Chrome 文件。

後續步驟

本教學課程示範如何部署 Chrome 擴充功能，以使用 TensorFlow.js 和預先訓練的 MobileNet 模型來分類圖片。若要進一步瞭解 TensorFlow.js 的預先訓練模型，請參閱預先訓練模型存放區。