Reconnaissance interactive de chiffres manuscrits (CNN)
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.
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

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.