TensorFlow.js'yi bir Chrome uzantısında dağıtma

Bu eğitimde, bir web sayfasındaki bir görsele sağ tıklayıp görsel üzerinde çok sınıflı nesne algılama gerçekleştirmenize olanak tanıyan bir Chrome uzantısı oluşturup kuracaksınız. Uzantı, görüntüye bir MobileNetV2 sınıflandırıcısı uygular ve ardından görüntüyü tahmin edilen sınıfla etiketler.

Örnek kod GitHub'da mevcuttur.

Önkoşullar

Bu öğreticiyi tamamlamak için geliştirme ortamınızda aşağıdakilerin yüklü olması gerekir:

Uzantıyı oluşturun

Kaynak kodunu alın ve uzantıyı oluşturun:

  1. tfjs-examples deposunu klonlayın veya indirin.
  2. chrome-extension dizinine geçin: cd tfjs-examples/chrome-extension .
  3. Bağımlılıkları yükleyin: yarn .
  4. Derleme betiğini çalıştırın: yarn build .

Derleme betiğini çalıştırdıktan sonra aşağıdaki yeni dosyaları görmelisiniz:

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

Uzantıyı yükleyin

Uzantıyı Chrome'a ​​yükleyin:

  1. Chrome tarayıcısında chrome://extensions adresine gidin.
  2. Tarayıcının sağ tarafındaki düğmeyi kullanarak Geliştirici modunu açın.
  3. Paketlenmemiş yükle'yi seçin ve tfjs-examples/chrome-extension/dist dizinini seçin. Bu dizin manifest.json dosyasını ve derleme tarafından paketlenen src/*.js dosyalarını içerir.

Bir Chrome uzantısında TF.js mobilenet için yeni bir kart görmelisiniz.

Uzantıyı kullanın

Uzantı yüklendiğinde görüntüleri tarayıcıda sınıflandırabilirsiniz:

  1. Üzerinde görsellerin bulunduğu bir siteye gidin. Örneğin, google.com gidin, "kaplanlar" ifadesini arayın ve sonuçlar sayfasında Görseller'i seçin. Kaplan resimlerinin olduğu bir sayfa görmelisiniz.
  2. Bir görüntüye sağ tıklayın ve Görüntüyü TensorFlow.js ile sınıflandır'ı seçin. Bir ısınma süresi vardır, bu nedenle uygulamayı ilk kez çalıştırdığınızda çıkarım daha yavaş olacaktır. (Kendi uygulamalarınızda modeli boş verilerle besleyerek kullanıma hazırlayabilirsiniz.)

Uzantı, modeli görüntü üzerinde çalıştırır ve ardından tahmini belirten metni üst üste koyar.

Uzantıyı kaldır

Uzantıyla denemelerinizi tamamladığınızda onu kaldırabilirsiniz:

  1. Chrome'da chrome://extensions adresine gidin.
  2. Chrome uzantı kartındaki TF.js mobilenet'te Kaldır'ı seçin ve uzantıyı kaldırmak istediğinizi onaylayın.

Uzantı nasıl çalışır?

Bu bölümde uzantının yüksek düzeyde nasıl çalıştığı açıklanmaktadır.

manifest.json manifest dosyası, Chrome'un arka planda çalıştıracağı bir hizmet çalışanını belirtir:

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

Service Worker komut dosyası service_worker.js , TensorFlow.js paketini ve mobilenet modelini içe aktarır.

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

package.json dosyasındaki derleme betiği, çalışma zamanında hiçbir harici betiğin yüklenmemesi için her şeyi bir arada paketlemek üzere Parcel adlı bir paketleyici kullanır.

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

Bunun amacı, uzaktan barındırılan kodu yasaklayan Chrome Manifest V3'e uymaktır. Bir hizmet çalışanının TensorFlow.js modelleri gibi harici kaynakları yine de yükleyebileceğini unutmayın.

Service Worker komut dosyası, görüntüler üzerinde çalışan bir bağlam menüsü öğesi oluşturur. Daha sonra komut dosyası tıklamaları dinler.

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

Kullanıcı menü öğesini seçtiğinde, bir geri arama, geçerli sekme kimliğini ve sağ tıklanan görüntünün URL'sini içeren bir mesaj gönderir. (Servis çalışanında DOM nesnelerinin mevcut olmadığını unutmayı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);
  });
}

İçerik komut dosyası content.js , mesajları dinler ve IMAGE_CLICKED eylemini gerçekleştirir. Komut dosyası, görüntü URL'sini alır, görüntüyü yükler, görüntüyü OffscreenCanvas üzerinde işler, görüntü verilerini tuvalden alır ve verileri hizmet çalışanına geri gönderir.

Servis çalışanı görüntü verilerini aldıktan sonra verilerle mobilenet modelini çalıştırır ve tahmin sonuçlarını alır. Yukarıdaki clickMenuCallback işlevinde imageClassifier , modeli yükleyen ve tahminler alan ImageClassifier sınıfının bir örneğidir. Hizmet çalışanı komut dosyası daha sonra sonuçları görüntülenmek üzere içerik komut dosyasına geri gönderir. İçerik komut dosyası sonuçları aldıktan sonra sonuçları orijinal görüntünün üzerine yerleştirir.

Yaklaşık 30 saniye boyunca hiçbir etkinlik gerçekleşmediğinde, hizmet çalışanı iş parçacığı boşta kalır. Hizmet çalışanı olaylarını yönetme hakkında daha fazla bilgi için Chrome belgelerine bakın.

Sıradaki ne

Bu eğitimde, görüntüleri sınıflandırmak için TensorFlow.js ve önceden eğitilmiş bir MobileNet modeli kullanan bir Chrome uzantısının nasıl dağıtılacağı gösterildi. TensorFlow.js için önceden eğitilmiş modeller hakkında daha fazla bilgi edinmek için önceden eğitilmiş model deposuna bakın.