Déploiement de MobileNet avec TensorFlow.js et Flask

Introduction

Ce projet vous guide dans le processus de déploiement d'un modèle MobileNetV2 pré-entraîné à l'aide de TensorFlow.js dans une application web Flask. MobileNetV2 est un réseau neuronal profond léger utilisé principalement pour la classification d'images. TensorFlow.js permet d'exécuter des modèles d'apprentissage automatique directement dans le navigateur, permettant d'avoir des applications web interactives. Flask, un framework web Python, servira de backend pour héberger notre application. À la fin de ce projet, vous aurez une application web fonctionnelle qui classifie des images sur le vol à l'aide du modèle MobileNetV2.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment exporter un modèle MobileNetV2 pré-entraîné de Keras au format compatible TensorFlow.js.
• Comment créer une application Flask simple pour servir votre contenu web et votre modèle.
• Comment concevoir une page HTML pour télécharger et afficher des images à classifier.
• Comment utiliser TensorFlow.js pour charger le modèle exporté dans le navigateur.
• Comment prétraiter les images dans le navigateur pour correspondre aux exigences d'entrée de MobileNetV2.
• Comment exécuter le modèle dans le navigateur pour classifier les images et afficher les résultats.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Convertir un modèle Keras pré-entraîné au format utilisable avec TensorFlow.js, permettant aux modèles ML de s'exécuter dans le navigateur.
• Configurer une application Flask et servir du contenu HTML et des fichiers statiques.
• Intégrer TensorFlow.js dans une application web pour effectuer des tâches d'apprentissage automatique côté client.
• Prétraiter les images en JavaScript pour les rendre compatibles avec les exigences d'entrée des modèles de deep learning.
• Faire des prédictions à l'aide d'un modèle de deep learning dans le navigateur et afficher les résultats dynamiquement sur la page web.

Préparer l'environnement et les fichiers du projet

Avant de commencer à coder, il est important de configurer correctement notre environnement de projet. Cela inclut l'installation des packages nécessaires et la compréhension de la structure de fichiers du projet qui est déjà en place.

Tout d'abord, familiarisez-vous avec la structure initiale de fichiers du projet. Les fichiers et dossiers suivants sont déjà fournis dans votre répertoire de travail :

tree

Sortie :

.
├── app.py
├── model_convert.py
├── static
│ ├── imagenet_classes.js
│ ├── tfjs.css
│ └── tfjs.js
└── templates
└── tfjs.html

2 répertoires, 6 fichiers

La structure de votre projet est composée de plusieurs composants clés, chacun jouant un rôle vital dans le déploiement de votre application web pour la classification d'images à l'aide du modèle MobileNetV2 avec TensorFlow.js et Flask. Voici un aperçu de chaque répertoire et fichier de votre projet :

• app.py : Ceci est le fichier Python principal de votre application Flask. Il initialise l'application Flask, configure la routage pour votre page web et inclut toute la logique backend nécessaire pour servir votre modèle TensorFlow.js et votre contenu web.
• model_convert.py : Ce script Python est responsable du chargement du modèle MobileNetV2 pré-entraîné et de sa conversion au format compatible TensorFlow.js. Cette conversion est cruciale pour permettre au modèle de s'exécuter dans un navigateur web.
• static/ : Ce répertoire stocke les fichiers statiques requis par votre application web. Ils incluent :
  • imagenet_classes.js : Un fichier JavaScript contenant les classes ImageNet. Ce fichier est utilisé pour mapper les prédictions numériques du modèle aux noms de classes lisibles par l'homme.
  • tfjs.css : Une nouvelle addition, ce fichier Feuilles de style en cascade (CSS) est utilisé pour styliser l'interface utilisateur de l'application web. Il définit les aspects visuels de votre application, tels que les dispositions, les couleurs et les polices, assurant une interface plus attrayante et conviviale.
  • tfjs.js : Un autre nouveau fichier, ce fichier JavaScript contient probablement la logique pour charger le modèle TensorFlow.js, traiter les images et exécuter des prédictions dans le navigateur. Ce script est central pour l'interactivité de votre application, gérant les opérations côté client liées au modèle TensorFlow.js.
• templates/ : Ce répertoire contient les fichiers HTML qui définissent la structure et la disposition de votre application web. Dans ce cas, il inclut :
  • tfjs.html : Le modèle HTML principal de votre application, tfjs.html inclut la balisage nécessaire pour afficher des images, des résultats de prédiction et éventuellement des éléments d'interaction utilisateur tels que des boutons de téléchargement de fichiers. Il intègre le modèle TensorFlow.js, utilisant le script tfjs.js pour les fonctionnalités liées au modèle et tfjs.css pour le style.

Cette structure est conçue pour séparer les préoccupations, rendant votre projet modulaire et plus facile à gérer. Les répertoires static et templates sont standards dans les applications Flask, aidant à organiser les actifs statiques et les modèles HTML respectivement. La séparation du script de conversion de modèle (model_convert.py) de la logique principale de l'application (app.py) renforce la modularité et la maintenabilité de votre code.

Ensuite, installez les packages requis :

## Installez les packages Python requis
pip install tensorflow==2.14.0 tensorflowjs==4.17.0 flask==3.0.2 flask-cors==4.0.0

Les packages incluent TensorFlow pour le modèle d'apprentissage automatique, TensorFlow.js pour convertir le modèle à utiliser dans un environnement web, Flask pour créer le serveur web et Flask-CORS pour gérer les requêtes cross-origin, qui sont courantes dans les applications web.

Exporter le modèle MobileNetV2 pré - entraîné au format TensorFlow.js

Pour utiliser le modèle MobileNetV2 dans le navigateur, nous devons tout d'abord l'exporter de Keras au format que TensorFlow.js peut comprendre.

## Compléter le fichier model_convert.py

## Exportation du modèle MobileNetV2
import tensorflowjs as tfjs
from tensorflow.keras.applications.mobilenet_v2 import MobileNetV2

## Charger le modèle MobileNetV2 pré-entraîné
model = MobileNetV2(weights='imagenet')

## Convertir et enregistrer le modèle au format TensorFlow.js
tfjs.converters.save_keras_model(model,'static/model/')

Dans cette étape, vous utilisez les bibliothèques TensorFlow et TensorFlow.js pour charger un modèle MobileNetV2 pré-entraîné et le convertir au format compatible TensorFlow.js.

MobileNetV2 est choisi pour son efficacité et sa taille relativement petite, ce qui le rend adapté au déploiement web. Cette conversion est nécessaire car le format de modèle original utilisé dans TensorFlow basé sur Python n'est pas directement utilisable dans un environnement web. La fonction tfjs.converters.save_keras_model prend le modèle Keras et le sauvegarde dans un répertoire structuré de manière que TensorFlow.js puisse facilement le charger plus tard dans l'application web.

Ensuite, vous pouvez exécuter :

python model_convert.py

Le modèle converti sera enregistré dans le dossier static/model/ :

ls static/model

## group1-shard1of4.bin  group1-shard2of4.bin  group1-shard3of4.bin  group1-shard4of4.bin  model.json

Ce processus consiste à enregistrer les poids et l'architecture du modèle dans une série de fichiers de shard et un fichier model.json respectivement.

Création de l'application Flask

Maintenant, nous allons configurer une application Flask simple pour servir notre page web et le modèle TensorFlow.js.

## Compléter le fichier app.py

## Configuration de l'application Flask
from flask import Flask, render_template
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app)  ## Activer la ressource partagée entre origines (Cross-Origin Resource Sharing)

@app.route("/")
def hello():
    ## Servir la page HTML
    return render_template('tfjs.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port='8080', debug=True)

Cette étape consiste à configurer un serveur web Flask de base. Flask est un micro-framework web écrit en Python, connu pour sa simplicité et son utilisation facile.

Vous commencez par importer Flask et CORS (ressource partagée entre origines) à partir de leurs bibliothèques respectives. CORS est essentiel pour les applications web qui demandent des ressources à partir de différents domaines, assurant que votre application web peut effectuer des requêtes de manière sécurisée vers votre serveur Flask.

Vous définissez une route simple ("/") qui sert une page HTML (tfjs.html), qui contiendra votre code TensorFlow.js côté client. L'application Flask est configurée pour s'exécuter sur votre machine locale (host='0.0.0.0') et écouter sur le port 8080. Le paramètre debug=True est utile pendant le développement car il fournit des messages d'erreur détaillés et recharge automatiquement le serveur lorsqu'un changement de code est détecté.

Maintenant, vous pouvez exécuter l'application web Flask :

python app.py
## * Serving Flask app 'app'
## * Debug mode: on
## AVERTISSEMENT : Ceci est un serveur de développement. N'utilisez pas celui-ci dans un déploiement de production. Utilisez un serveur WSGI de production à la place.
## * Running on all addresses (0.0.0.0)
## * Running on http://127.0.0.1:8080
## * Running on http://172.18.0.7:8080
## Appuyez sur CTRL+C pour quitter

Préparer la structure HTML

Maintenant, nous devons créer la structure HTML de notre application dans templates/tfjs.html. Cela inclut la disposition pour le téléchargement d'images, l'aperçu et l'affichage des résultats de prédiction.

<!-- Structure HTML pour l'application de prédiction d'images -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prédiction d'image</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <link rel="stylesheet" href="static/tfjs.css" />
  </head>
  <body class="flex flex-col items-center justify-center min-h-screen">
    <div class="card bg-white p-6 rounded-lg max-w-sm">
      <h1 class="text-xl font-semibold mb-4 text-center">Prédiction d'image</h1>
      <div class="flex flex-col items-center">
        <label
          for="imageUpload"
          class="button-custom cursor-pointer mb-4 flex items-center justify-center"
        >
          <span>Télécharger une image</span>
          <input
            type="file"
            id="imageUpload"
            class="file-input"
            accept="image/*"
          />
        </label>
        <div
          id="imagePreviewContainer"
          class="mb-4 w-56 h-56 border border-dashed border-gray-300 flex items-center justify-center"
        >
          <img
            id="imagePreview"
            class="max-w-full max-h-full"
            style="display: none"
          />
        </div>
        <h5 id="output" class="text-md text-gray-700">
          Téléchargez une image pour commencer la prédiction
        </h5>
        <script type="module" src="static/tfjs.js"></script>
      </div>
    </div>
  </body>
</html>

Cette étape consiste à créer la structure de base de notre application web à l'aide de HTML. Nous définissons le type de document comme HTML et définissons l'attribut de langue sur anglais.

Dans la section head, nous incluons des métadonnées telles que l'ensemble de caractères et les paramètres de vueport pour une conception responsive. Nous avons également lié à la bibliothèque CSS Tailwind pour utiliser ses classes utilitaires pour styliser notre application. La section body contient un élément div avec une classe card, qui sert de conteneur pour le contenu de notre application.

Dans ce conteneur, nous avons une balise h1 pour le titre de l'application, un élément label pour le bouton de téléchargement d'image (qui est stylisé pour ressembler à un bouton à l'aide de Tailwind CSS et de classes personnalisées), et un élément div pour servir de conteneur pour l'aperçu de l'image. L'élément input de type file est caché et déclenché lorsque le label est cliqué, permettant à l'utilisateur de télécharger une image. L'élément div avec un id de imagePreviewContainer affichera l'image téléchargée, et la balise h5 sera utilisée pour afficher des messages à l'utilisateur.

Ajouter un style

Dans cette étape, nous allons ajouter quelques styles CSS de base à l'aide de Tailwind CSS pour la mise en page et l'esthétique dans static/tfjs.css, ainsi que quelques styles personnalisés pour notre application.

body {
  background-color: #f0f2f5;
}
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.button-custom {
  background-color: #4f46e5; /* Indigo 600 */
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem; /* rounded-md */
  transition: background-color 0.2s;
}
.button-custom:hover {
  background-color: #4338ca; /* Indigo 700 */
}
.file-input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

Dans cette étape, nous ajoutons des styles CSS personnalisés pour améliorer l'apparence de notre application web.

Nous définissons la couleur d'arrière-plan du corps sur un gris clair pour un arrière-plan neutre. La classe card ajoute une ombre portée pour créer un effet de carte pour le conteneur. La classe button-custom style le bouton de téléchargement avec une couleur d'arrière-plan indigo, du texte blanc, du padding et des coins arrondis.

Nous incluons également un effet au survol pour changer légèrement la couleur d'arrière-plan du bouton lorsqu'il est survolé, fournissant une rétroaction visuelle à l'utilisateur. La classe file-input est utilisée pour masquer l'élément d'entrée de fichier réel, rendant le label personnalisé le principal élément interactif pour les téléchargements de fichiers.

Charger le modèle TensorFlow

Dans les étapes restantes, nous allons compléter le fichier templates/tfjs.js.

Maintenant, ajoutons TensorFlow.js à notre projet, puis écrivons du code JavaScript pour charger notre modèle TensorFlow. Nous utiliserons une fonction asynchrone pour attendre le chargement du modèle avant de faire des prédictions.

import { IMAGENET_CLASSES } from "./imagenet_classes.js";

const outputDiv = document.getElementById("output");
let model;

async function loadModel() {
  try {
    outputDiv.textContent = "Chargement du modèle TF...";
    model = await tf.loadLayersModel(
      "https://****.labex.io/static/model/model.json"
    ); // Mettez à jour l'URL
    outputDiv.textContent = "Modèle TF chargé.";
  } catch (error) {
    outputDiv.textContent = `Erreur lors du chargement du modèle : ${error}`;
  }
}

loadModel();

Remarque : Vous devriez remplacer l'URL dans tf.loadLayersModel par l'URL de l'environnement actuel. Vous pouvez la trouver en basculant vers l'onglet Web 8080.

Cette étape consiste à ajouter TensorFlow.js à notre projet en incluant sa balise de script dans notre document HTML.

Ensuite, nous écrivons du code JavaScript pour charger de manière asynchrone un modèle TensorFlow pré-entraîné. Nous utilisons la fonction tf.loadLayersModel, en lui fournissant une URL vers le fichier JSON de notre modèle. Cette fonction renvoie une promesse qui est résolue avec le modèle chargé. Nous mettons à jour le contenu de texte de outputDiv pour informer l'utilisateur sur l'état de chargement du modèle. Si le modèle est chargé avec succès, nous affichons "Modèle TF chargé."

Sinon, nous capturons toutes les erreurs et affichons un message d'erreur à l'utilisateur. Cette étape est cruciale pour permettre à notre application de faire des prédictions, car le modèle doit être chargé et prêt avant tout traitement d'image.

Gérer le téléchargement et l'affichage d'images

Cette étape consiste à créer une fonctionnalité permettant aux utilisateurs de télécharger des images et de voir un aperçu avant de faire une prédiction. Nous utiliserons un FileReader pour lire le fichier téléchargé et l'afficher.

// Continuer dans static/tfjs.js
const imageUpload = document.getElementById("imageUpload");
const imagePreview = document.getElementById("imagePreview");

imageUpload.addEventListener("change", async (e) => {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = async () => {
        imagePreview.src = img.src;
        imagePreview.style.display = "block";
        const processedImage = await preprocessImage(img);
        makePrediction(processedImage);
      };
    };
    reader.readAsDataURL(file);
  }
});

Cette étape consiste à configurer un écouteur d'événements pour l'entrée de téléchargement d'image.

Lorsque l'utilisateur sélectionne un fichier, nous utilisons un FileReader pour lire le fichier sous forme d'URL de données. Nous créons ensuite un objet Image et définissons son attribut src sur le résultat du FileReader, chargeant ainsi l'image dans le navigateur. Une fois l'image chargée, nous l'affichons dans le conteneur imagePreview en définissant l'attribut src de imagePreview sur celui de l'image et en rendant l'élément imagePreview visible.

Ensuite, l'image est prétraitée et prédite par notre modèle, nous compléterons ces fonctions dans les étapes suivantes.

Prétraiter l'image pour la prédiction

Avant de faire une prédiction, nous devons prétraiter l'image téléchargée pour qu'elle corresponde aux exigences d'entrée de notre modèle.

// Continuer dans static/tfjs.js
async function preprocessImage(imageElement) {
  try {
    let img = tf.browser.fromPixels(imageElement).toFloat();
    img = tf.image.resizeBilinear(img, [224, 224]);
    const offset = tf.scalar(127.5);
    const normalized = img.sub(offset).div(offset);
    const batched = normalized.reshape([1, 224, 224, 3]);
    return batched;
  } catch (error) {
    outputDiv.textContent = `Erreur dans la prédiction du modèle : ${error}`;
  }
}

Avant de faire une prédiction, nous devons prétraiter l'image téléchargée pour qu'elle corresponde au format d'entrée attendu par notre modèle TensorFlow. Ce prétraitement inclut le redimensionnement de l'image aux dimensions requises (dans ce cas, 224x224 pixels) et la normalisation des valeurs de pixel.

Nous utilisons des opérations de TensorFlow.js telles que tf.browser.fromPixels pour convertir l'image en tenseur, tf.image.resizeBilinear pour le redimensionnement et des opérations arithmétiques pour normaliser les valeurs de pixel. L'image prétraitée est ensuite redimensionnée en un lot de un (pour correspondre à la forme d'entrée attendue par le modèle), la rendant prête pour la prédiction.

Effectuer une prédiction

Une fois l'image prétraitée, nous sommes prêts à effectuer une prédiction. La fonction makePrediction prend l'image traitée en entrée, la fait passer par le modèle et interprète la sortie pour déterminer le libellé de classe le plus probable.

// Continuer dans static/tfjs.js
async function makePrediction(processedImage) {
  try {
    const prediction = model.predict(processedImage);
    const highestPredictionIndex = await tf.argMax(prediction, 1).data();
    const label = IMAGENET_CLASSES[highestPredictionIndex];
    outputDiv.textContent = `Prédiction : ${label}`;
  } catch (error) {
    outputDiv.textContent = `Erreur lors de la prédiction : ${error}`;
  }
}

Dans cette étape, nous utilisons la fonction model.predict(processedImage) pour passer l'image prétraitée dans le modèle TensorFlow. La fonction tf.argMax(prediction, 1).data() est utilisée pour trouver l'index de la valeur la plus élevée dans le tableau de prédictions, qui correspond au libellé de classe le plus probable pour l'image. Ce libellé est ensuite affiché à l'utilisateur.

Basculer vers l'onglet "Web 8080" et recharger la page web pour voir les effets suivants.

Résumé

Dans ce projet, vous avez appris à utiliser un modèle MobileNetV2 pré-entraîné dans une application web Flask à l'aide de TensorFlow.js. Nous avons commencé par installer les dépendances nécessaires. Nous avons ensuite exporté le modèle MobileNetV2 au format compatible TensorFlow.js et configuré une application Flask pour servir notre page web. Enfin, nous avons créé une page HTML qui utilise TensorFlow.js pour classifier des images dans le navigateur avec notre modèle MobileNetV2. En suivant ces étapes, vous avez créé une application web qui utilise l'apprentissage profond pour la classification d'images en temps réel.

Ce projet démontre le pouvoir de la combinaison de technologies web traditionnelles avec des modèles avancés d'apprentissage automatique pour créer des applications web interactives et intelligentes. Vous pouvez étendre ce projet en ajoutant plus de fonctionnalités, telles que la capacité de télécharger différentes images, d'améliorer l'interface utilisateur ou même d'intégrer des modèles plus complexes pour différentes tâches.