Wdróż TensorFlow.js w rozszerzeniu Chrome

W tym samouczku utworzysz i zainstalujesz rozszerzenie do przeglądarki Chrome, które umożliwia kliknięcie obrazu na stronie internetowej prawym przyciskiem myszy i wykrycie obiektu wieloklasowego na obrazie. Rozszerzenie stosuje do obrazu klasyfikator MobileNetV2 , a następnie etykietuje obraz przewidywaną klasą.

Przykładowy kod jest dostępny na GitHubie .

Warunki wstępne

Aby ukończyć ten samouczek, w środowisku programistycznym musisz zainstalować:

Zbuduj rozszerzenie

Pobierz kod źródłowy i zbuduj rozszerzenie:

  1. Sklonuj lub pobierz repozytorium tfjs-examples .
  2. Przejdź do katalogu chrome-extension : cd tfjs-examples/chrome-extension .
  3. Zainstaluj zależności: yarn .
  4. Uruchom skrypt budujący: yarn build .

Po uruchomieniu skryptu kompilacji powinieneś zobaczyć następujące nowe pliki:

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

Zainstaluj rozszerzenie

Zainstaluj rozszerzenie w przeglądarce Chrome:

  1. W przeglądarce Chrome przejdź do chrome://extensions .
  2. Włącz tryb programisty za pomocą przełącznika po prawej stronie przeglądarki.
  3. Wybierz opcję Załaduj rozpakowane i wybierz katalog tfjs-examples/chrome-extension/dist . Ten katalog zawiera plik manifest.json i pliki src/*.js spakowane przez kompilację.

Powinieneś zobaczyć nową kartę dla mobilenet TF.js w rozszerzeniu Chrome .

Użyj rozszerzenia

Po zainstalowaniu rozszerzenia możesz klasyfikować obrazy w przeglądarce:

  1. Przejdź do witryny zawierającej obrazy. Na przykład przejdź do google.com , wyszukaj „tygrysy” i wybierz Obrazy na stronie wyników. Powinieneś zobaczyć stronę ze zdjęciami tygrysów.
  2. Kliknij obraz prawym przyciskiem myszy i wybierz opcję Klasyfikuj obraz za pomocą TensorFlow.js . Następuje okres rozgrzewki, więc przy pierwszym uruchomieniu aplikacji wnioskowanie będzie wolniejsze. (We własnych aplikacjach możesz przygotować model, wprowadzając do niego fikcyjne dane.)

Rozszerzenie uruchamia model na obrazie, a następnie nakłada tekst wskazujący prognozę.

Usuń rozszerzenie

Kiedy skończysz eksperymentować z rozszerzeniem, możesz je usunąć:

  1. W przeglądarce Chrome przejdź do chrome://extensions .
  2. W sieci mobilnej TF.js na karcie rozszerzenia Chrome wybierz Usuń i potwierdź, że chcesz usunąć rozszerzenie.

Jak działa rozszerzenie

W tej sekcji opisano, jak działa rozszerzenie na wysokim poziomie.

Plik manifestu manifest.json określa pracownika usługi, który Chrome będzie uruchamiał w tle:

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

Skrypt Service Worker service_worker.js importuje pakiet TensorFlow.js i model mobilenet .

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

Skrypt kompilacji w package.json używa pakietu Parcel do spakowania wszystkiego razem, tak aby w czasie wykonywania nie były ładowane żadne zewnętrzne skrypty.

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

Ma to na celu zachowanie zgodności z manifestem Chrome V3, który zabrania kodu hostowanego zdalnie . Należy pamiętać, że proces roboczy usługi może nadal ładować zasoby zewnętrzne, takie jak modele TensorFlow.js.

Skrypt Service Worker tworzy element menu kontekstowego, który działa na obrazach. Następnie skrypt nasłuchuje kliknięć.

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

Gdy użytkownik wybierze element menu, wywołanie zwrotne wysyła wiadomość zawierającą identyfikator bieżącej karty i adres URL obrazu klikniętego prawym przyciskiem myszy. (Należy pamiętać, że w procesie Service Worker obiekty DOM nie są dostępne.)

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

Skrypt treści content.js nasłuchuje wiadomości i obsługuje akcję IMAGE_CLICKED . Skrypt odbiera adres URL obrazu, ładuje obraz, renderuje obraz na OffscreenCanvas , pobiera dane obrazu z kanwy i wysyła je z powrotem do pracownika usługi.

Gdy pracownik usługi otrzyma dane obrazu, uruchamia model mobilenet z danymi i otrzymuje wyniki przewidywań. W powyższej funkcji clickMenuCallback imageClassifier jest instancją klasy ImageClassifier , która ładuje model i pobiera prognozy. Skrypt procesu roboczego usługi wysyła następnie wyniki z powrotem do skryptu treści w celu wyświetlenia. Po otrzymaniu wyników skrypt treści nakłada je na oryginalny obraz.

Wątek Service Worker przechodzi w stan bezczynności, jeśli przez około 30 sekund nie zostanie wykonana żadna aktywność. Więcej informacji na temat zarządzania zdarzeniami Service Worker znajdziesz w dokumentacji Chrome .

Co dalej

W tym samouczku pokazano, jak wdrożyć rozszerzenie przeglądarki Chrome korzystające z TensorFlow.js i wstępnie przeszkolonego modelu MobileNet do klasyfikowania obrazów. Aby dowiedzieć się więcej na temat wstępnie wytrenowanych modeli dla TensorFlow.js, zobacz repozytorium wstępnie wytrenowanych modeli .