Terapkan TensorFlow.js di ekstensi Chrome

Dalam tutorial ini, Anda akan membuat dan memasang ekstensi Chrome yang memungkinkan Anda mengeklik kanan gambar di laman web dan melakukan deteksi objek multikelas pada gambar. Ekstensi ini menerapkan pengklasifikasi MobileNetV2 ke gambar dan kemudian memberi label pada gambar dengan kelas prediksi.

Kode contoh tersedia di GitHub .

Prasyarat

Untuk menyelesaikan tutorial ini, Anda perlu menginstal yang berikut ini di lingkungan pengembangan Anda:

Bangun ekstensi

Dapatkan kode sumber dan buat ekstensi:

  1. Kloning atau unduh repositori tfjs-examples .
  2. Ubah ke direktori chrome-extension : cd tfjs-examples/chrome-extension .
  3. Instal dependensi: yarn .
  4. Jalankan skrip build: yarn build .

Setelah menjalankan skrip build, Anda akan melihat file baru berikut:

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

Instal ekstensi

Instal ekstensi di Chrome:

  1. Di browser Chrome, navigasikan ke chrome://extensions .
  2. Aktifkan mode Pengembang menggunakan tombol di sisi kanan browser.
  3. Pilih Load unpacked dan pilih direktori tfjs-examples/chrome-extension/dist . Direktori ini berisi file manifest.json dan file src/*.js yang dikemas oleh build.

Anda akan melihat kartu baru untuk mobilenet TF.js di ekstensi Chrome .

Gunakan ekstensi

Dengan ekstensi terpasang, Anda dapat mengklasifikasikan gambar di browser:

  1. Navigasikan ke situs dengan gambar di dalamnya. Misalnya, navigasikan ke google.com , telusuri "harimau", dan pilih Gambar di laman hasil. Anda akan melihat halaman gambar harimau.
  2. Klik kanan pada gambar dan pilih Klasifikasikan gambar dengan TensorFlow.js . Ada periode pemanasan, jadi saat pertama kali Anda menjalankan aplikasi, inferensi akan lebih lambat. (Dalam aplikasi Anda sendiri, Anda dapat mengunggulkan model dengan memberinya data dummy.)

Ekstensi menjalankan model pada gambar dan kemudian menempatkan teks yang menunjukkan prediksi.

Hapus ekstensi

Setelah selesai bereksperimen dengan ekstensi, Anda dapat menghapusnya:

  1. Di Chrome, navigasikan ke chrome://extensions .
  2. Di mobilenet TF.js di kartu ekstensi Chrome , pilih Hapus dan konfirmasikan bahwa Anda ingin menghapus ekstensi.

Cara kerja ekstensi

Bagian ini menjelaskan cara kerja ekstensi, pada tingkat tinggi.

File manifes , manifest.json , menentukan pekerja layanan yang akan dijalankan Chrome di latar belakang:

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

Skrip pekerja layanan, service_worker.js , mengimpor paket TensorFlow.js dan model mobilenet .

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

Skrip build di package.json menggunakan bundler, Parcel , untuk menggabungkan semuanya sehingga tidak ada skrip eksternal yang dimuat saat runtime.

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

Hal ini untuk mematuhi Chrome Manifest V3, yang melarang kode yang dihosting dari jarak jauh . Perlu diperhatikan bahwa pekerja layanan masih dapat memuat sumber daya eksternal, seperti model TensorFlow.js.

Skrip pekerja layanan membuat item menu konteks yang beroperasi pada gambar. Kemudian skrip mendengarkan klik.

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

Saat pengguna memilih item menu, panggilan balik mengirimkan pesan yang berisi ID tab saat ini dan URL gambar yang diklik kanan. (Perhatikan bahwa di pekerja layanan, objek DOM tidak tersedia.)

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

Skrip konten, content.js , mendengarkan pesan dan menangani tindakan IMAGE_CLICKED . Skrip menerima URL gambar, memuat gambar, merender gambar di OffscreenCanvas , mengambil data gambar dari kanvas, dan mengirimkan data kembali ke pekerja layanan.

Setelah pekerja layanan menerima data gambar, ia menjalankan model mobilenet dengan data tersebut dan mendapatkan hasil prediksi. Dalam fungsi clickMenuCallback di atas, imageClassifier adalah turunan dari kelas ImageClassifier , yang memuat model dan mendapatkan prediksi. Skrip pekerja layanan kemudian mengirimkan hasilnya kembali ke skrip konten untuk ditampilkan. Setelah skrip konten menerima hasilnya, skrip konten akan melapisi hasilnya di atas gambar asli.

Thread pekerja layanan menjadi tidak aktif ketika tidak ada aktivitas yang terjadi selama kurang lebih 30 detik. Untuk informasi selengkapnya tentang mengelola peristiwa pekerja layanan, lihat dokumentasi Chrome .

Apa selanjutnya

Tutorial ini menunjukkan cara men-deploy ekstensi Chrome yang menggunakan TensorFlow.js dan model MobileNet terlatih untuk mengklasifikasikan gambar. Untuk mempelajari lebih lanjut model terlatih untuk TensorFlow.js, lihat repositori model terlatih .