Déployer TensorFlow.js dans une extension Chrome

Dans ce didacticiel, vous allez créer et installer une extension Chrome qui vous permet de cliquer avec le bouton droit sur une image dans une page Web et d'effectuer une détection d'objets multiclasses sur l'image. L'extension applique un classificateur MobileNetV2 à l'image, puis étiquette l'image avec la classe prédite.

L'exemple de code est disponible sur GitHub .

Conditions préalables

Pour terminer ce didacticiel, vous devez installer les éléments suivants dans votre environnement de développement :

Construire l'extension

Récupérez le code source et créez l'extension :

  1. Clonez ou téléchargez le référentiel tfjs-examples .
  2. Accédez au répertoire chrome-extension : cd tfjs-examples/chrome-extension .
  3. Installer les dépendances : yarn .
  4. Exécutez le script de build : yarn build .

Après avoir exécuté le script de build, vous devriez voir les nouveaux fichiers suivants :

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

Installer l'extension

Installez l'extension dans Chrome :

  1. Dans le navigateur Chrome, accédez à chrome://extensions .
  2. Activez le mode développeur à l'aide de la bascule sur le côté droit du navigateur.
  3. Sélectionnez Charger décompressé et sélectionnez le répertoire tfjs-examples/chrome-extension/dist . Ce répertoire contient le fichier manifest.json et les fichiers src/*.js empaquetés par la build.

Vous devriez voir une nouvelle carte pour TF.js mobilenet dans une extension Chrome .

Utiliser l'extension

Une fois l'extension installée, vous pouvez classer les images dans le navigateur :

  1. Accédez à un site contenant des images. Par exemple, accédez à google.com , recherchez « tigres » et sélectionnez Images dans la page de résultats. Vous devriez voir une page d’images de tigres.
  2. Faites un clic droit sur une image et sélectionnez Classifier l'image avec TensorFlow.js . Il y a une période de préchauffage, donc la première fois que vous exécutez l'application, l'inférence sera plus lente. (Dans vos propres applications, vous pouvez amorcer le modèle en lui fournissant des données factices.)

L'extension exécute le modèle sur l'image puis superpose le texte indiquant la prédiction.

Supprimer l'extension

Lorsque vous avez fini d'expérimenter l'extension, vous pouvez la supprimer :

  1. Dans Chrome, accédez à chrome://extensions .
  2. Dans le réseau mobile TF.js dans une carte d'extension Chrome , sélectionnez Supprimer et confirmez que vous souhaitez supprimer l'extension.

Comment fonctionne l'extension

Cette section décrit le fonctionnement de l'extension, à un niveau élevé.

Le fichier manifeste , manifest.json , spécifie un service worker que Chrome exécutera en arrière-plan :

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

Le script Service Worker, service_worker.js , importe le package TensorFlow.js et le modèle mobilenet .

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

Le script de construction dans package.json utilise un bundler, Parcel , pour tout regrouper afin qu'aucun script externe ne soit chargé au moment de l'exécution.

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

Il s'agit de se conformer à Chrome Manifest V3, qui interdit le code hébergé à distance . Notez qu'un service worker peut toujours charger des ressources externes, telles que des modèles TensorFlow.js.

Le script Service Worker crée un élément de menu contextuel qui opère sur les images. Ensuite, le script écoute les clics.

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

Lorsque l'utilisateur sélectionne l'élément de menu, un rappel envoie un message contenant l'ID de l'onglet actuel et l'URL de l'image cliqué avec le bouton droit. (Notez que dans un service worker, les objets DOM ne sont pas disponibles.)

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

Le script de contenu, content.js , écoute les messages et gère l'action IMAGE_CLICKED . Le script reçoit l'URL de l'image, charge l'image, restitue l'image sur un OffscreenCanvas , récupère les données de l'image du canevas et renvoie les données au technicien de service.

Une fois que le technicien de service a reçu les données d'image, il exécute le modèle mobilenet avec les données et obtient les résultats de prédiction. Dans la fonction clickMenuCallback ci-dessus, imageClassifier est une instance de la classe ImageClassifier , qui charge le modèle et obtient des prédictions. Le script Service Worker renvoie ensuite les résultats au script de contenu pour affichage. Une fois que le script de contenu a reçu les résultats, il les superpose sur l'image d'origine.

Le thread du service worker devient inactif lorsqu'aucune activité ne se produit pendant environ 30 secondes. Pour plus d'informations sur la gestion des événements des techniciens de service, consultez la documentation Chrome .

Quelle est la prochaine étape

Ce didacticiel a montré comment déployer une extension Chrome qui utilise TensorFlow.js et un modèle MobileNet pré-entraîné pour classer les images. Pour en savoir plus sur les modèles pré-entraînés pour TensorFlow.js, consultez le référentiel de modèles pré-entraînés .