Tutoriel sur le modèle TensorFlow.js avec Edge

Terminologie : consultez la page Terminologie AutoML Vision Edge pour obtenir la liste des termes utilisés dans ce tutoriel.

Objectifs du tutoriel

Dans ce tutoriel, vous allez télécharger un modèle TensorFlow.js Object Detection entraîné et exporté à l'aide d'AutoML Vision Edge. Vous créerez ensuite une page Web qui charge le modèle et effectue une prédiction pour une image.

Objectifs

Vous allez écrire du code JavaScript pour effectuer la tâche suivante :

• Exécuter un modèle AutoML Vision Edge Object Detection pré-entraîné dans une page Web à l'aide de la bibliothèque TensorFlow.js.

Avant de commencer

Entraîner un modèle à partir d'AutoML Vision Edge

Pour pouvoir déployer un modèle sur un appareil de périphérie, vous devez d'abord entraîner et exporter un modèle TensorFlow.js à partir d'AutoML Vision Edge en suivant le guide de démarrage rapide sur les modèles pour les appareils de périphérie.

Au cours de l'étape finale, exportez le modèle vers TensorFlow.js :

Une fois la procédure de démarrage rapide terminée, vous devez disposer des fichiers exportés suivants sur Google Cloud Storage :

• Un fichier dict.txt avec des étiquettes
• Un fichier model.json
• Des fichiers de pondération *.bin

Télécharger les fichiers de modèle

Copiez les fichiers exportés depuis Google Cloud Storage dans un répertoire local :

gsutil cp gs://${cloud-storage-bucket}/model-export/iod/${model-name}/* ${local-folder}

Remarque : Si vous téléchargez les fichiers à l'aide de l'interface utilisateur et non d'une commande, ils sont renommés avec un horodatage. Pour revenir au nom d'origine, vous devez modifier le nom horodaté.

Créer une petite application Web

Une fois vos fichiers de modèles TensorFlow.js stockés localement, vous pouvez procéder comme suit pour créer votre application Web :

1. Accédez au répertoire local dans lequel vos fichiers de modèle sont stockés, si ce n'est pas déjà fait.

2. Créez un fichier index.html dans le même répertoire local avec le contenu suivant :

   index.html

   Exemples de code

   <script src="https://unpkg.com/@tensorflow/tfjs"></script>
   <script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>
   <img id="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.jpg">
   <script>
   async function run() {
     const model = await tf.automl.loadObjectDetection('model.json');
     const img = document.getElementById('salad');
     const options = {score: 0.5, iou: 0.5, topk: 20};
     const predictions = await model.detect(img, options);
     console.log(predictions);
     // Show the resulting object on the page.
     const pre = document.createElement('pre');
     pre.textContent = JSON.stringify(predictions, null, 2);
     document.body.append(pre);
   }
   run();
   </script>

3. (facultatif :) Remplacez l'attribut de chemin d'accès src du tag <img> pour qu'il pointe vers votre propre image.

   Remarque : Si vous utilisez un bundler js avec NPM, vous pouvez utiliser des importations ES6 au lieu d'un tag <script>.

Exécuter l'application Web

Démarrez un serveur HTTP simple sur le port 8000 depuis le répertoire avec le fichier index.html :

Python

python -m http.server 8000

Node.js

Si vous utilisez Node.js, installez globalement le package http-server, puis exécutez la commande suivante :

http-server -p 8000

Ouvrez http://localhost:8000 dans le navigateur pour afficher le résultat de la prédiction sur la console (View [Afficher] > Developer [Développeur] > JavaScript console [Console JavaScript]), ainsi que sur la page.

Le résultat est une liste triée d'objets de prédiction :

[
  {
    "box": {
      "left": 105.1,
      "top": 22.2,
      "width": 70.6,
      "height": 55.7
    },
    "label": "Tomato",
    "score": 0.972
  },
  ...
]

Pour en savoir plus sur l'API, consultez la documentation du package NPM AutoML.

Pour savoir comment tracer les cadres de délimitation au-dessus de votre image, consultez cet exemple de code qui superpose le texte et les cadres sur l'image en SVG.

Fonctionnement

Maintenant que votre application est en cours d'exécution, vous pouvez découvrir ce que fait le code.

Les deux premiers tags de script chargent la bibliothèque TensorFlow.js et la bibliothèque AutoML, qui sont disponibles dans le gestionnaire de packages NPM.

<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>

Le package NPM AutoML fournit un ensemble d'API permettant de charger et d'exécuter des modèles produits par AutoML Vision Edge. Il assure toutes les tâches de prétraitement ou de post-traitement nécessaires à l'exécution du modèle, qu'il s'agisse de charger un élément d'image ou de vidéo, de normaliser les valeurs de pixel ou de renvoyer un objet trié avec des étiquettes et des scores.

Le tag d'image charge une image test à partir d'un chemin d'accès de publication Google Cloud Storage :

<img id="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.jpg">

Vous devez remplacer l'image src par le chemin d'accès à votre propre image lors du test de votre modèle.

Ensuite, chargez le modèle et effectuez une prédiction avec votre image :

const model = await tf.automl.loadObjectDetection('model.json');
const img = document.getElementById('salad');
const options = {score: 0.5, iou: 0.5, topk: 20};
const predictions = await model.detect(img, options);

Vous spécifiez un modèle avec tf.automl.loadObjectDetection(url). Cette fonction utilise une URL absolue ou relative pour le fichier model.json exporté, qui est dans ce cas-ci un chemin d'accès relatif, car le fichier index.html et les fichiers modèles se trouvent dans le même répertoire.

Vous obtenez des prédictions en appelant model.detect(img, options). Cette fonction exécute une image unique dans le modèle et renvoie les objets prédits. L'entrée de cette fonction est un élément d'image HTML, un élément vidéo ou un tenseur 3D.

La fonction model.detect(img, options) inclut également l'argument facultatif options avec les spécifications possibles :

• score : score de probabilité compris entre 0 et 1. La valeur par défaut est 0,5. Les cadres dont le score est inférieur à ce seuil seront ignorés.
• topk : seuls les objets les plus probables sont renvoyés. Le nombre réel d'objets peut être inférieur à ce nombre.

• iou : intersection avec le seuil d'union. IoU est une métrique comprise entre 0 et 1 utilisée pour mesurer le chevauchement de deux cadres. Les cadres prédictifs ne se chevauchent pas au-delà du seuil spécifié.

  Pour en savoir plus sur l'évaluation des modèles à l'aide de l'option IoU (Intersection over Union), consultez la page Évaluer des modèles.

Pour en savoir plus sur l'API, consultez la documentation du package NPM AutoML.

Et ensuite ?

Vous avez suivi un tutoriel sur l'application Web TensorFlow.js Object Detection à l'aide d'un modèle Edge. Vous avez exécuté l'application Web dans un navigateur Web et effectué une prédiction de détection d'objet à l'aide de votre modèle Edge personnalisé et d'une image chargée depuis le Web. Vous avez ensuite examiné certaines parties de l'exemple de code afin de comprendre les fonctionnalités sous-jacentes.

Étapes suivantes :

• Regardez une démonstration utilisant le code SVG pour superposer les zones prédictives et les probabilités sur l'image.
• Apprenez-en plus sur TensorFlow.js.
• Pour en savoir plus sur la bibliothèque NPM AutoML, consultez la documentation officielle.
• Obtenez des informations générales sur TensorFlow grâce à ses tutoriels.