TB Logo
Reconnaissance interactive de chiffres manuscrits (CNN)

Reconnaissance interactive de chiffres manuscrits (CNN)

août 2023
Temps passé: ~25 h
Voir sur GitHub
Tags:
Deep LearningWeb DevelopmentComputer Vision
Compétences:
Python
Python
Jupyter Notebook
Jupyter Notebook
TensorFlow
TensorFlow
Keras
Keras
CNN
CNN
JavaScript
JavaScript
CSS
CSS
HTML
HTML

Reconnaissance de chiffres

Ce projet a commencé comme une expérience ludique et pédagogique.
Je voulais mieux comprendre le fonctionnement des réseaux de neurones convolutifs (CNN) en pratique, et aller un peu plus loin en transformant un modèle entraîné en une démo web interactive.

Plutôt que de m'arrêter à un notebook Jupyter, l'objectif était d'aller jusqu'au bout du processus, de l'entraînement du modèle à son utilisation réelle dans le navigateur.

Pourquoi ce projet ?

J'ai choisi la reconnaissance de chiffres manuscrits pour plusieurs raisons :

  • C'est un problème classique du machine learning
  • Il est suffisamment simple pour itérer rapidement
  • Il est visuel, intuitif et agréable à manipuler

Le fait de dessiner un chiffre et de voir immédiatement ce que “pense” le réseau de neurones est un excellent moyen de rendre le machine learning concret, plutôt qu'abstrait.

En dessinant moi-même des chiffres, j'ai pu observer la capacité du modèle à généraliser à différents styles d'écriture. En dessinant lentement, il était aussi intéressant de voir comment la prédiction évoluait en temps réel, lorsque le modèle passait progressivement d'un chiffre à un autre.

Ce projet est volontairement simple. L'objectif n'était pas d'atteindre des performances de pointe, mais de comprendre l'ensemble du workflow machine learning et du pipeline de déploiement.

Architecture du modèle

Le réseau est un CNN (Convolutional Neural Network) relativement classique, composé de :

  • Couches convolutionnelles pour extraire les caractéristiques spatiales
  • Couches entièrement connectées pour la classification

Afin d'améliorer la généralisation, j'ai ajouté des couches de dropout pour la régularisation, ce qui permet de limiter le sur-apprentissage. Sans cela, le modèle aurait de très bonnes performances sur les données d'entraînement mais se comporterait mal sur de nouvelles entrées, ce qui impacterait directement l'expérience de la démo web.

J'ai également intégré des couches de batch normalization afin de stabiliser et d'accélérer l'entraînement.

Visualisation du modèle
Visualisation du modèle

Entraînement du modèle

Le modèle a été entraîné en utilisant Python, TensorFlow et Keras dans un notebook Jupyter.

J'ai utilisé le dataset MNIST, qui contient des milliers d'images de chiffres manuscrits annotés de 0 à 9. Les images sont de petite taille, en niveaux de gris, et parfaitement adaptées aux réseaux convolutionnels.

Si cela vous intéresse, vous pouvez consulter le notebook complet ci-dessous pour tous les détails.

Notebook Jupyter : entraînement du modèle CNN

Notebook Jupyter complet montrant l'entraînement d'un réseau de neurones convolutif sur le dataset MNIST avec TensorFlow et Keras.

Avec cette configuration, le modèle atteint 99,55 % de précision sur l'ensemble de validation / test, ce qui confirme qu'il a appris à reconnaître efficacement les chiffres manuscrits.

La précision sur l'ensemble d'entraînement se stabilise autour de 99,24 %, très proche de la performance en validation. Cet écart faible indique une bonne capacité de généralisation et l'absence de sur-apprentissage notable.

Les valeurs de loss, faibles et cohérentes entre entraînement et validation, montrent également que le réseau apprend des caractéristiques pertinentes plutôt que de mémoriser les données, ce qui le rend bien adapté aux prédictions en temps réel dans la démo interactive.

Du notebook au navigateur

Une fois le modèle entraîné, le défi suivant était le déploiement.

Plutôt que de passer par une API backend, j'ai voulu que les prédictions s'exécutent entièrement dans le navigateur. Cela m'a conduit à convertir le modèle entraîné vers TensorFlow.js.

Cette approche présente plusieurs avantages :

  • Aucun serveur nécessaire
  • Retour instantané
  • Exécution entièrement côté client

Le modèle final est chargé directement dans le navigateur et utilisé pour l'inférence à chaque tracé sur le canvas. Cela est possible car le modèle reste relativement léger et efficace, ce qui le rend adapté à des applications temps réel.

Interface web interactive

Le frontend est construit avec HTML, CSS et JavaScript, en utilisant un élément <canvas> HTML5 pour le dessin des chiffres.

Fonctionnalités principales :

  • Dessin à la souris
  • Effacement du canvas
  • Mise à jour des prédictions en temps réel
  • Scores de confiance pour chaque chiffre

Interface web
Interface web

L'objectif était de garder une interface minimale afin de mettre l'accent sur l'interaction avec le modèle.

Démo en direct

Vous pouvez tester la démo directement ci-dessous.
Dessinez un chiffre entre 0 et 9 et observez la réaction du modèle.

Démo live : reconnaissance de chiffres

Dessinez un chiffre et observez les prédictions en temps réel du modèle CNN exécuté directement dans votre navigateur.

Ce que j'ai appris

Ce projet m'a permis de :

  • Approfondir ma compréhension des CNN au-delà de la théorie
  • Apprendre à entraîner des modèles avec TensorFlow et Keras
  • Découvrir le déploiement de modèles avec TensorFlow.js
  • Mieux comprendre les compromis entre simplicité et performance

Il m'a également rappelé que même des projets simples peuvent être très pertinents lorsqu'ils sont complets et interactifs.

Améliorations possibles

De nombreuses pistes sont possibles :

  • Visualiser les activations intermédiaires
  • Tester d'autres architectures ou datasets
  • Ajouter des éléments simples d'explicabilité du modèle

Mais pour l'instant, le projet remplit exactement son objectif, et c'est suffisant.