Milo, l'école de l'IA pour les enfants 🎓

Contexte

Milo est une plateforme éducative qui initie les 6-16 ans à l'intelligence artificielle. L'enfant entraîne des classifieurs jouets, règle les poids d'un neurone, compose des consignes, traque un biais dans un jeu de données, et repart avec un projet imprimable. Projet mené pendant mon stage IA & Automatisation chez Café Crème.

Le projet est en cours : le parcours compte aujourd'hui 16 modules et continue d'évoluer.

Un point d'honnêteté qui compte : l'application n'appelle aucun modèle de langage. Tout ce qui ressemble à de l'IA est implémenté à la main, en local, avec des mécanismes déterministes (classification par similarité, arbre de décision, somme pondérée). Milo apprend l'IA aux enfants, il n'est pas piloté par elle. Le choix est assumé et affiché dans l'application comme dans le code, où chaque endroit qui serait branché sur un vrai modèle en production porte un commentaire // [PROD].

Fonctionnalités clés

• 16 modules répartis en 4 chapitres, chacun avec un mode d'interaction différent : leçons interactives, mini-jeux, ateliers de création, projet final imprimable.
• Trois tranches d'âge (6-8, 9-12, 13-16) : le parcours filtre les modules et ajuste le vocabulaire et la difficulté selon la tranche choisie.
• Mécanismes d'apprentissage jouets, écrits à la main : entraînement d'un classifieur par centroïdes de caractéristiques, reconnaissance de dessin par comparaison de motifs, arbre de décision qui pose la question la plus discriminante, neurone à poids réglables et seuil, diagnostic de biais, composition de prompt.
• Espace parents et enseignants : roster multi-enfants, progression par module, badges, créations sauvegardées, bilan imprimable par enfant, diplôme et mot aux familles imprimables, verrou par code à 4 chiffres.
• Mode enseignant : une fiche de séance imprimable par module (idée maîtresse, déroulé chronométré avant/pendant/après l'écran, questions de discussion, prolongements dont des activités débranchées), avec l'ancrage au socle commun et au CRCN.
• Multi-profils sur un même appareil (prénom et avatar), avec export et import de la progression en JSON, sans cloud.
• Lecture à voix haute des consignes via l'API Web Speech du navigateur, pour les enfants qui ne lisent pas encore.
• Installable en PWA et utilisable hors ligne, ce qui aide dans une salle de classe au réseau capricieux.

Approche technique

Le front est écrit en React 19, TypeScript et Vite, stylé avec Tailwind v4 (plugin Vite), animé avec Motion et illustré par les icônes Phosphor. Le routeur est fait maison, un petit store plutôt qu'une dépendance de plus, pour garder la main sur les transitions d'écran et sur le bouton retour. Chaque module est un composant chargé en lazy derrière un contrat commun ({ age, onComplete, onSaveCreation }, enveloppé dans une coquille GameShell), ce qui permet d'en ajouter un sans toucher au reste. Le build sépare React et Motion du code applicatif, pour qu'un déploiement n'invalide que la couche applicative dans le cache des navigateurs.

Le fonctionnement 100% local est un choix de conception, pas une limite de prototype : le public est mineur, l'usage visé est la classe, et le RGPD enfants pousse à ne rien faire sortir de l'appareil. Concrètement, il n'y a aucun appel réseau au runtime : pas de backend, pas de clé d'API, polices auto-hébergées en woff2, sons synthétisés en WebAudio, synthèse vocale fournie par le navigateur. Profils, progression et créations vivent en localStorage. La formulation retenue partout est "aucune donnée ne quitte l'appareil" plutôt que "aucune donnée personnelle collectée", puisque le prénom et la tranche d'âge en sont. L'espace parents permet de tout effacer, et une page dédiée porte les mentions légales et la politique de confidentialité.

Le déploiement Vercel applique une CSP stricte (connect-src 'self', object-src 'none', frame-ancestors 'none'), ce qui verrouille au niveau du navigateur la promesse faite dans le code. Côté fiabilité, un ErrorBoundary global et un second par module évitent l'écran blanc quand un chunk chargé en lazy échoue, et l'import d'une sauvegarde est non destructif (fusion ou remplacement, au choix, après confirmation). L'accessibilité a été traitée au fil de l'eau : prefers-reduced-motion plus un interrupteur d'animations dans l'application, piégeage du focus sur les modales, régions aria-live sur les jeux à révélation, cibles tactiles de 44 px, contrastes revus.

Résultats

Un parcours jouable de bout en bout : 16 modules, un diplôme et un bilan imprimables, un dictionnaire de l'IA cherchable, et un espace parents/enseignants qui donne à un adulte de quoi préparer une séance. La plateforme est en ligne et installable, sans compte ni configuration.

Ce que je retiens de ce projet, c'est la contrainte "zéro réseau" : elle oblige à implémenter vraiment les mécanismes qu'on veut expliquer, au lieu de les déléguer à un modèle. Un enfant qui règle les poids d'un neurone jusqu'à faire basculer la décision voit quelque chose qu'un chatbot ne lui aurait pas montré.

Voir en ligne

• Application : milo-sable-eight.vercel.app

Projet en cours : le parcours et les modules continuent d'évoluer.