Maîtriser l'IA dans vos Applications Web : De la Théorie à la Pratique avec JavaScript
Maîtriser l'IA dans vos Applications Web : De la Théorie à la Pratique avec JavaScript

Développer des Applications de Reconnaissance d'Images avec TensorFlow.js

Bienvenue dans cette leçon du cours "Maîtriser l'IA dans vos Applications Web : De la Théorie à la Pratique avec JavaScript". Aujourd'hui, nous allons plonger dans le monde fascinant de la reconnaissance d'images et découvrir comment construire des applications intelligentes directement dans votre navigateur web grâce à TensorFlow.js.

La reconnaissance d'images est un domaine clé de l'intelligence artificielle, capable de transformer la manière dont nous interagissons avec les données visuelles. Que ce soit pour classer des objets, identifier des visages ou détecter des anomalies, l'IA visuelle est partout. Avec TensorFlow.js, vous avez la puissance de ces technologies à portée de main, directement dans votre pile JavaScript.

1. Introduction à la Reconnaissance d'Images

1.1 Qu'est-ce que la Reconnaissance d'Images ?

La reconnaissance d'images est une branche de l'intelligence artificielle qui permet aux ordinateurs de "voir" et d'interpréter le contenu des images et des vidéos. Cela inclut diverses tâches :

  • Classification d'images : Attribuer une étiquette ou une catégorie à une image entière (ex: "chien", "chat", "voiture").
  • Détection d'objets : Identifier et localiser plusieurs objets spécifiques au sein d'une image, en les entourant de boîtes englobantes (ex: détecter tous les piétons et feux de signalisation dans une scène urbaine).
  • Segmentation sémantique : Attribuer une catégorie à chaque pixel d'une image, permettant une compréhension fine de la scène (ex: distinguer le ciel, la route, les bâtiments).
  • Reconnaissance faciale : Identifier des individus à partir de leurs caractéristiques faciales.

Ces capacités sont rendues possibles principalement grâce à l'utilisation des réseaux de neurones convolutionnels (CNN), un type spécifique de réseaux de neurones profonds, particulièrement adaptés au traitement des données visuelles.

1.2 Pourquoi TensorFlow.js pour la Reconnaissance d'Images ?

TensorFlow.js est une bibliothèque JavaScript pour l'apprentissage automatique, conçue pour être exécutée entièrement dans le navigateur web ou avec Node.js. Voici pourquoi c'est un choix puissant pour la reconnaissance d'images :

  • Accessibilité et Déploiement Facile : Pas besoin de serveurs complexes ou de configurations de machines lourdes. Votre modèle s'exécute là où votre application web s'exécute.
  • Confidentialité des Données : Les données d'image de l'utilisateur ne quittent jamais son appareil, car le traitement est effectué côté client. Idéal pour les applications sensibles à la confidentialité.
  • Interactivité en Temps Réel : Les prédictions sont instantanées, ce qui permet des expériences utilisateur fluides et réactives, comme la détection d'objets en direct via une webcam.
  • Écosystème JavaScript : Intégration transparente dans vos projets web existants sans nécessiter de nouvelles compétences linguistiques côté serveur (Python, etc.).
  • Large Gamme de Modèles Pré-entraînés : Accès facile à des modèles d'IA populaires et performants déjà entraînés sur de vastes ensembles de données, tels que MobileNet, qui est excellent pour les tâches de classification d'images dans le navigateur.

2. Les Réseaux de Neurones Convolutionnels (CNN) en Bref

Les CNN sont la pierre angulaire de la vision par ordinateur moderne. Contrairement aux réseaux de neurones denses classiques qui traitent des données vectorielles plates, les CNN sont spécialement conçus pour reconnaître des patterns spatiaux dans les données d'image.

Voici les couches principales d'un CNN simplifié :

  • Couches de Convolution : Ce sont les "filtres" qui balayent l'image pour détecter des caractéristiques locales (bords, textures, formes). Chaque filtre produit une "carte de caractéristiques" (feature map) qui met en évidence la présence de ces patterns.
  • Couches de Pooling (ou Sous-échantillonnage) : Réduisent la dimensionnalité des cartes de caractéristiques tout en conservant les informations importantes. Cela aide à rendre le modèle plus robuste aux petites variations de position et réduit le coût de calcul. Le "Max Pooling" est le plus courant.
  • Couches Denses (Fully Connected) : Après plusieurs couches de convolution et de pooling, les caractéristiques extraites sont aplaties en un vecteur et alimentent des couches denses classiques. Ces couches apprennent à combiner les caractéristiques pour faire la prédiction finale (par exemple, la probabilité de chaque classe).

Pour la reconnaissance d'images, nous utilisons souvent des modèles pré-entraînés comme MobileNet ou ResNet. Ces modèles ont été entraînés sur d'énormes ensembles de données (comme ImageNet, qui contient des millions d'images de mille catégories différentes) et ont déjà appris à reconnaître une multitude de caractéristiques visuelles génériques. Utiliser un modèle pré-entraîné nous permet de bénéficier de cette connaissance sans avoir à entraîner le modèle nous-même pendant des jours ou des semaines sur des GPU puissants.

3. Mise en Pratique : Construire une Application Simple de Classification d'Images

Nous allons créer une application web simple qui permet à l'utilisateur de télécharger une image. Notre application utilisera ensuite un modèle pré-entraîné de TensorFlow.js (MobileNet) pour classifier cette image et afficher les prédictions.

3.1 Préparation de l'Environnement

Nous avons besoin d'un simple fichier HTML et d'un fichier JavaScript.

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classificateur d'Images avec TensorFlow.js</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; }
        h1 { color: #333; }
        input[type="file"] { margin: 20px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; }
        img { max-width: 100%; height: auto; border: 1px solid #ddd; margin-top: 20px; display: none; }
        #predictions { margin-top: 20px; padding: 15px; border: 1px solid #eee; background-color: #f9f9f9; width: 80%; max-width: 500px; text-align: left; }
        #predictions h2 { margin-top: 0; color: #555; }
        #predictions ul { list-style: none; padding: 0; }
        #predictions li { margin-bottom: 5px; }
        #loading { margin-top: 20px; font-weight: bold; color: #007bff; display: none; }
    </style>
</head>
<body>
    <h1>Classificateur d'Images avec TensorFlow.js</h1>

    <input type="file" id="imageUpload" accept="image/*">
    <img id="imagePreview" src="#" alt="Aperçu de l'image">
    
    <div id="loading">Chargement du modèle et prédiction...</div>

    <div id="predictions">
        <h2>Prédictions :</h2>
        <ul id="predictionList">
            <li>En attente d'une image...</li>
        </ul>
    </div>

    <!-- Chargement de TensorFlow.js et du modèle MobileNet -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@latest"></script>
    <!-- Notre script principal -->
    <script src="script.js"></script>
</body>
</html>

Explication du code HTML :

  • Nous incluons les CDN (Content Delivery Network) pour TensorFlow.js (tfjs) et pour le modèle pré-entraîné MobileNet (mobilenet). C'est la manière la plus simple de commencer.
  • Un input type="file" permet à l'utilisateur de sélectionner une image.
  • Un élément <img> affichera l'aperçu de l'image sélectionnée.
  • Un div avec l'id predictions affichera les résultats de la classification.
  • Un élément loading sera visible pendant le chargement du modèle et la prédiction.

3.2 Notre Script JavaScript : script.js

Ce script gérera le chargement du modèle, le traitement de l'image et l'affichage des prédictions.

let model;
const imageUpload = document.getElementById('imageUpload');
const imagePreview = document.getElementById('imagePreview');
const predictionList = document.getElementById('predictionList');
const loadingElement = document.getElementById('loading');

// 1. Fonction pour charger le modèle MobileNet
async function loadModel() {
    loadingElement.style.display = 'block'; // Afficher le message de chargement
    try {
        console.log("Chargement du modèle MobileNet...");
        // mobilenet.load() charge le modèle pré-entraîné
        model = await mobilenet.load();
        console.log("Modèle MobileNet chargé avec succès !");
        loadingElement.style.display = 'none'; // Cacher le message de chargement
        imageUpload.disabled = false; // Activer l'upload après chargement du modèle
        predictionList.innerHTML = '<li>Modèle prêt ! Téléchargez une image.</li>';
    } catch (error) {
        console.error("Erreur lors du chargement du modèle :", error);
        predictionList.innerHTML = `<li style="color: red;">Erreur de chargement du modèle : ${error.message}</li>`;
        loadingElement.style.display = 'none';
    }
}

// 2. Fonction pour prédire l'image téléchargée
async function predictImage() {
    if (!model) {
        predictionList.innerHTML = '<li>Modèle non chargé. Veuillez réessayer.</li>';
        return;
    }

    if (!imagePreview.src || imagePreview.src === '#') {
        predictionList.innerHTML = '<li>Aucune image sélectionnée.</li>';
        return;
    }

    loadingElement.style.display = 'block'; // Afficher le message de chargement pour la prédiction
    predictionList.innerHTML = '<li>Analyse de l\'image...</li>';

    try {
        // La méthode `classify` de mobilenet prend un élément image HTML
        // et retourne une promesse avec les prédictions
        const predictions = await model.classify(imagePreview);
        
        console.log('Prédictions :', predictions);

        // Afficher les prédictions dans la liste
        predictionList.innerHTML = ''; // Nettoyer les prédictions précédentes
        if (predictions.length === 0) {
            predictionList.innerHTML = '<li>Aucune prédiction trouvée.</li>';
        } else {
            predictions.forEach(p => {
                // `className` est le nom de la classe, `probability` est la confiance (0-1)
                predictionList.innerHTML += `<li>${p.className} - Confiance: ${Math.round(p.probability * 100)}%</li>`;
            });
        }
    } catch (error) {
        console.error("Erreur lors de la prédiction :", error);
        predictionList.innerHTML = `<li style="color: red;">Erreur de prédiction : ${error.message}</li>`;
    } finally {
        loadingElement.style.display = 'none'; // Cacher le message de chargement
    }
}

// 3. Gérer l'événement de changement de fichier
imageUpload.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            imagePreview.src = e.target.result; // Afficher l'aperçu de l'image
            imagePreview.style.display = 'block'; // Rendre l'image visible
            predictImage(); // Lancer la prédiction une fois l'image chargée
        };
        reader.readAsDataURL(file); // Lire le fichier comme URL de données
    } else {
        imagePreview.src = '#';
        imagePreview.style.display = 'none';
        predictionList.innerHTML = '<li>Veuillez sélectionner une image.</li>';
    }
});

// 4. Lancer le chargement du modèle au démarrage de l'application
document.addEventListener('DOMContentLoaded', loadModel);

// Désactiver l'upload d'image jusqu'à ce que le modèle soit chargé
imageUpload.disabled = true;

Explication du code JavaScript :

  1. loadModel() :
    • C'est une fonction asynchrone qui utilise await mobilenet.load() pour charger le modèle pré-entraîné MobileNet. Ce processus peut prendre quelques secondes en fonction de la connexion internet.
    • Une fois le modèle chargé, nous stockons la référence dans la variable globale model et activons le champ d'upload.
  2. predictImage() :
    • Vérifie si le modèle est chargé et si une image est affichée.
    • L'étape cruciale est await model.classify(imagePreview). L'API MobileNet simplifie énormément les choses en acceptant directement un élément <img> HTML. En coulisses, elle gère la conversion de l'image en tf.Tensor, le redimensionnement aux dimensions attendues par le modèle (224x224 pixels pour MobileNet) et la normalisation des valeurs des pixels (généralement entre -1 et 1 ou 0 et 1).
    • Les predictions sont un tableau d'objets, chacun contenant un className (le nom de la catégorie détectée) et une probability (la confiance du modèle pour cette catégorie).
    • Nous itérons sur ces prédictions pour les afficher de manière lisible dans l'interface utilisateur, en arrondissant la probabilité à un pourcentage.
  3. Gestion de l'upload de fichier :
    • Un écouteur d'événements change est attaché à l'input de type file.
    • Lorsqu'un fichier est sélectionné, un FileReader est utilisé pour lire le contenu de l'image comme une URL de données (Data URL).
    • Cette Data URL est ensuite assignée à l'attribut src de l'élément <img> d'aperçu, ce qui déclenche son affichage dans le navigateur.
    • Dès que l'image est chargée dans l'élément <img>, la fonction predictImage() est appelée pour effectuer la classification.
  4. DOMContentLoaded :
    • Nous nous assurons que loadModel() est appelée une fois que le DOM est entièrement chargé, garantissant que tous les éléments HTML sont disponibles.

Pour tester cette application :

  1. Créez un dossier.
  2. Dans ce dossier, créez les fichiers index.html et script.js avec le code fourni.
  3. Ouvrez index.html directement dans votre navigateur web (Chrome, Firefox, etc.).
  4. Attendez quelques secondes que le message "Chargement du modèle et prédiction..." disparaisse.
  5. Cliquez sur "Choisir un fichier" et sélectionnez une image sur votre ordinateur.
  6. Regardez les prédictions apparaître !

4. Aller Plus Loin avec TensorFlow.js

Ce n'est que la pointe de l'iceberg ! Voici quelques pistes pour approfondir vos connaissances et capacités avec TensorFlow.js :

  • Utilisation de la Webcam : Au lieu de télécharger des fichiers, utilisez tf.data.webcam pour capturer des images en direct depuis la webcam et effectuer des prédictions en temps réel.
  • Autres Modèles Pré-entraînés :
    • COCO-SSD : Pour la détection d'objets (identifier plusieurs objets et leurs emplacements exacts dans une image).
    • Face-Landmarks Detection : Pour la reconnaissance des points clés du visage.
    • PoseNet ou MoveNet : Pour l'estimation de la posture humaine en temps réel.
  • Transfer Learning (Réapprentissage par Transfert) : Si MobileNet ne contient pas les catégories spécifiques que vous voulez reconnaître (ex: types de fleurs rares), vous pouvez ré-entraîner la dernière couche d'un modèle pré-entraîné avec vos propres données. C'est beaucoup plus rapide et nécessite moins de données que d'entraîner un modèle de zéro.
  • Création de vos propres Modèles : Pour des cas d'utilisation très spécifiques, vous pouvez définir, entraîner et évaluer des réseaux de neurones complexes directement avec l'API tf.Layers de TensorFlow.js.
  • Performance et Optimisation :
    • Utilisez tf.tidy() pour gérer la mémoire des tenseurs (libérer l'espace après utilisation).
    • Prédéfinissez les formes des tenseurs pour des calculs plus efficaces.
    • Considérez le déploiement sur Node.js pour des opérations plus lourdes côté serveur ou pour les applications de bureau.
  • Visualisation des Résultats : Au-delà du texte, utilisez un élément <canvas> pour dessiner les boîtes englobantes des objets détectés ou pour superposer des masques de segmentation.

Conclusion

Félicitations ! Vous avez fait vos premiers pas dans le développement d'applications de reconnaissance d'images avec TensorFlow.js. Vous avez appris :

  • Les concepts fondamentaux de la reconnaissance d'images et des réseaux de neurones convolutionnels.
  • Comment intégrer TensorFlow.js et un modèle pré-entraîné (MobileNet) dans une application web JavaScript.
  • La simplicité de la classification d'images directement dans le navigateur.

TensorFlow.js ouvre un monde de possibilités pour intégrer l'intelligence artificielle directement dans vos applications web. Sa capacité à exécuter des modèles complexes côté client, sans dépendance serveur, est un atout majeur pour la confidentialité, la performance et l'interactivité. Continuez à explorer les différents modèles et techniques offerts par cette puissante bibliothèque pour créer des expériences utilisateur toujours plus intelligentes et engageantes. Le futur de l'IA sur le web est entre vos mains de développeur JavaScript !