Triển khai TensorFlow.js trong tiện ích mở rộng của Chrome

Trong hướng dẫn này, bạn sẽ xây dựng và cài đặt tiện ích mở rộng của Chrome cho phép bạn nhấp chuột phải vào hình ảnh trong trang web và thực hiện phát hiện đối tượng nhiều lớp trên hình ảnh. Tiện ích mở rộng áp dụng trình phân loại MobileNetV2 cho hình ảnh và sau đó gắn nhãn cho hình ảnh với lớp được dự đoán.

Mã ví dụ có sẵn trên GitHub .

Điều kiện tiên quyết

Để hoàn thành hướng dẫn này, bạn cần cài đặt những thứ sau trong môi trường phát triển của mình:

Xây dựng phần mở rộng

Lấy mã nguồn và xây dựng tiện ích mở rộng:

  1. Sao chép hoặc tải xuống kho lưu trữ tfjs-examples .
  2. Thay đổi vào thư mục chrome-extension : cd tfjs-examples/chrome-extension .
  3. Cài đặt phụ thuộc: yarn .
  4. Chạy tập lệnh xây dựng: yarn build .

Sau khi chạy tập lệnh xây dựng, bạn sẽ thấy các tệp mới sau:

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

Cài đặt tiện ích mở rộng

Cài đặt tiện ích mở rộng trong Chrome:

  1. Trong trình duyệt Chrome, điều hướng đến chrome://extensions .
  2. Bật Chế độ nhà phát triển bằng cách sử dụng nút bật tắt ở bên phải trình duyệt.
  3. Chọn Tải giải nén và chọn thư mục tfjs-examples/chrome-extension/dist . Thư mục này chứa tệp manifest.json và tệp src/*.js được bản dựng đóng gói.

Bạn sẽ thấy một thẻ mới cho mobilenet TF.js trong tiện ích mở rộng của Chrome .

Sử dụng tiện ích mở rộng

Với tiện ích mở rộng được cài đặt, bạn có thể phân loại hình ảnh trong trình duyệt:

  1. Điều hướng đến một trang web có hình ảnh trên đó. Ví dụ: điều hướng đến google.com , tìm kiếm "hổ" và chọn Hình ảnh trong trang kết quả. Bạn sẽ thấy một trang có hình ảnh con hổ.
  2. Nhấp chuột phải vào hình ảnh và chọn Phân loại hình ảnh bằng TensorFlow.js . Có giai đoạn khởi động nên lần đầu tiên bạn chạy ứng dụng, quá trình suy luận sẽ chậm hơn. (Trong các ứng dụng của riêng bạn, bạn có thể tạo mô hình bằng cách cung cấp cho nó dữ liệu giả.)

Tiện ích mở rộng chạy mô hình trên hình ảnh và sau đó chồng văn bản cho biết dự đoán.

Xóa tiện ích mở rộng

Khi bạn thử nghiệm xong tiện ích mở rộng, bạn có thể xóa tiện ích mở rộng đó:

  1. Trong Chrome, điều hướng đến chrome://extensions .
  2. Trong mobilenet TF.js trong thẻ tiện ích mở rộng của Chrome , hãy chọn Xóa và xác nhận rằng bạn muốn xóa tiện ích mở rộng.

Cách tiện ích mở rộng hoạt động

Phần này mô tả cách tiện ích mở rộng hoạt động ở mức cao.

Tệp kê khai , manifest.json , chỉ định một nhân viên dịch vụ mà Chrome sẽ chạy ở chế độ nền:

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

Tập lệnh của nhân viên dịch vụ, service_worker.js , nhập gói TensorFlow.js và mô hình mobilenet .

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

Tập lệnh xây dựng trong package.json sử dụng trình đóng gói Parcel để gói mọi thứ lại với nhau để không có tập lệnh bên ngoài nào được tải khi chạy.

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

Điều này nhằm tuân thủ Bản kê khai Chrome V3, nghiêm cấm mã được lưu trữ từ xa . Lưu ý rằng nhân viên dịch vụ vẫn có thể tải các tài nguyên bên ngoài, chẳng hạn như mô hình TensorFlow.js.

Tập lệnh của nhân viên dịch vụ tạo một mục menu ngữ cảnh hoạt động trên hình ảnh. Sau đó, tập lệnh sẽ lắng nghe các nhấp chuột.

/**
 * 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);

Khi người dùng chọn mục menu, lệnh gọi lại sẽ gửi thông báo chứa ID tab hiện tại và URL của hình ảnh được nhấp chuột phải. (Lưu ý rằng trong nhân viên dịch vụ, đối tượng DOM không có sẵn.)

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);
  });
}

Tập lệnh nội dung, content.js , lắng nghe tin nhắn và xử lý hành động IMAGE_CLICKED . Tập lệnh nhận URL hình ảnh, tải hình ảnh, hiển thị hình ảnh trên OffscreenCanvas , lấy dữ liệu hình ảnh từ canvas và gửi dữ liệu trở lại nhân viên dịch vụ.

Sau khi nhân viên dịch vụ nhận được dữ liệu hình ảnh, nó sẽ chạy mô hình mobilenet với dữ liệu đó và nhận được kết quả dự đoán. Trong hàm clickMenuCallback ở trên, imageClassifier là một phiên bản của lớp ImageClassifier , tải mô hình và nhận dự đoán. Sau đó, tập lệnh của nhân viên dịch vụ sẽ gửi kết quả trở lại tập lệnh nội dung để hiển thị. Sau khi tập lệnh nội dung nhận được kết quả, nó sẽ phủ kết quả lên trên hình ảnh gốc.

Chuỗi của nhân viên dịch vụ không hoạt động khi không có hoạt động nào xảy ra trong khoảng 30 giây. Để biết thêm thông tin về cách quản lý sự kiện của nhân viên dịch vụ, hãy xem tài liệu Chrome .

Tiếp theo là gì

Hướng dẫn này cho thấy cách triển khai tiện ích mở rộng của Chrome sử dụng TensorFlow.js và mô hình MobileNet được đào tạo trước để phân loại hình ảnh. Để tìm hiểu thêm về các mô hình được đào tạo trước cho TensorFlow.js, hãy xem kho lưu trữ mô hình được đào tạo trước .