Objectifs du tutoriel
Dans ce tutoriel, vous allez télécharger un modèle de classification d'images TensorFlow.js qui a été 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 de classification d'images AutoML Vision Edge 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/icn/${model-name}/* ${local-folder}
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 :
Accédez au répertoire local dans lequel vos fichiers de modèle sont stockés, si ce n'est pas déjà fait.
Créez un fichier
index.html
dans le même répertoire local avec le contenu suivant :index.html
Exemples de code
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
python3 -m SimpleHTTPServer 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.
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.
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 :
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 :
Vous spécifiez un modèle avec tf.automl.loadImageClassification(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.classify(image)
. Cette fonction exécute une image unique avec le modèle et renvoie la prédiction. L'entrée de cette fonction est un élément d'image HTML, un élément vidéo ou un tenseur 3D.
Et ensuite ?
Vous avez suivi un tutoriel illustrant l'utilisation de l'application Web de classification d'images TensorFlow.js avec un modèle Edge. Vous avez exécuté l'application Web dans un navigateur Web et effectué une prédiction de classification à 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 qui utilise le bundler Parcel pour créer du code ES6 dans une application autonome.
- 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.