Sommaire
Si on vous disait que, pour une fois, vous pouviez faire équipe avec l’IA au lieu de l’affronter ? Retroussez vos manches, sortez vos plus beaux talents d’artiste et découvrez PictionarIA ! Pour BDX I/O 2024, le salon phare des développeurs à Bordeaux, nous avons développé ce nouveau jeu, mêlant créativité, réactivité et intelligence artificielle : en 2 min top chrono, vous devez faire deviner un maximum de mots à l’IA grâce à vos dessins.
Le moins que l’on puisse dire, c’est que PictionarIA a réussi à captiver les visiteurs sur notre stand ! L’enthousiasme suscité par PictionarIA a même dépassé nos attentes : les participants se sont pris au jeu, cherchant à améliorer leurs scores et à tester les limites de l’IA. Au-delà de l’aspect ludique, ce projet a suscité de nombreuses questions sur les coulisses de son développement. Comment avons-nous intégré l’IA ? Quels défis techniques avons-nous dû surmonter ?
Retracez l’aventure PictionarIA avec nous, de sa conception initiale à sa réalisation finale !
Un défi technique et créatif
Pour marquer les esprits à BDX I/O, nous avons relevé un défi ambitieux : développer en un temps record un jeu interactif mettant en scène l’IA. Le concept ? Un Pictionary nouvelle génération où l’intelligence artificielle tente de deviner vos croquis en temps réel. Simple en apparence, ce projet a nécessité de jongler avec plusieurs contraintes techniques :
- Assurer une expérience fluide sur tablette en contexte de salon
- Diffuser l’écran de jeu en temps réel sur un écran plus large de TV
- Intégrer un modèle d’IA performant nécessitant une connexion internet
- Gérer un système de scores et les enregistrer pour animer un concours
Le temps étant compté, nous avons opté pour une version locale du jeu sur le salon, évitant ainsi dans un premier temps les complexités liées à un déploiement en ligne (sécurisation des API, gestion de la persistance des données, etc.).
Un backend IA : dIAne, notre atout maître
Pour donner vie à PictionarIA, nous avons misé sur dIAne, notre solution de chatbot. Mais ne vous y trompez pas, dIAne n’est pas qu’un simple agent conversationnel !
dIAne : une plateforme IA polyvalente
Développée en Python, dIAne s’appuie sur les puissantes infrastructures de Bedrock et Gemini. Cette architecture nous offre une flexibilité incroyable, avec accès à une multitude de modèles d’IA de pointe. Pour PictionarIA, nous avons forké dIAne pour l’enrichir d’une couche d’API spécifique, nécessaire pour l’interaction avec le jeu. Cette couche d’API, qui sera plus tard réintégrée dans le projet, nous permettra alors plus facilement de :
- Répondre aux demandes spécifiques de nos clients
- Faciliter l’intégration future dans leurs systèmes d’information
- Ouvrir la voie à de nouvelles fonctionnalités passionnantes
L’agent IA au cœur de PictionarIA joue le rôle d’intermédiaire entre l’interface utilisateur et le service IA cloud choisi. Grâce aux librairies LangChain et LangGraph, nous avons pu abstraire les spécificités d’implémentation des différents modèles de langage, nous permettant de nous concentrer sur la logique du jeu elle-même.
Du dessin au mot : le parcours d’une prédiction
Le cœur battant de PictionarIA, c’est son endpoint API. Son fonctionnement ? Un véritable tour de magie numérique :
- Il reçoit l’image dessinée par le joueur, encodée en base64
- Le thème de la partie, choisi par l’utilisateur, est également transmis pour contextualiser la prédiction
- En retour, l’API nous livre une liste de mots correspondant à l’image
Simple en apparence, mais le résultat d’un travail d’optimisation intense !
À la recherche du modèle parfait : nos itérations
Nous sommes partis en quête d’un bon équilibre entre précision et rapidité et avons donc mis à l’épreuve plusieurs modèles d’IA :
- Claude 3 d’Anthropic
- GPT-4o d’OpenAI
- Gemini 1.5 Flash de Google Cloud
Finalement, c’est Claude 3 Haiku qui a remporté la palme puisqu’il offre le meilleur compromis entre qualité des résultats et vitesse d’exécution, essentiel pour l’expérience de jeu en temps réel que nous visions avec l’IA. Cependant, l’architecture agnostique que nous avons mise en place nous permet de basculer facilement vers les autres modèles d’IA, en modifiant simplement quelques variables d’environnement et clés API. Cette flexibilité ouvre la voie à des applications métiers personnalisables et adaptables, tout en conservant une base de code unique.
Le défi de la langue : quand l’IA joue aux polyglottes
Initialement conçu en anglais, notre prompt a rapidement évolué vers le français. Nos outils de développement nous ont cependant permis de repérer des réponses occasionnelles en anglais. La solution ? Être plus directif dans nos instructions. Notre prompt final commence désormais par le rappel suivant :
« Vous êtes un agent qui parle exclusivement français, vos réponses doivent être en français. »
Cette insistance s’est révélée payante, assurant une expérience de jeu 100% francophone !
L’architecture de PictionarIA
Pour donner vie à PictionarIA lors de BDX I/O 2024, nous avons conçu une architecture robuste et flexible. Voici les éléments clés de notre setup :
- Une clé 4G créant son propre réseau local
- Une tablette Android, interface tactile pour les joueurs
- Un serveur Linux hébergeant, dans des conteneurs Docker :
- Le backend IA, communiquant avec AWS Bedrock
- Un serveur CouchDB, qui expose une API REST et permet la sauvegarde des scores
- Le frontend React servi par un serveur NodeJS, faisant également office de proxy vers les deux serveurs précédents afin de résoudre les problématiques de CORS lors des appels depuis la tablette
Pourquoi CouchDB ?
Le choix de CouchDB pour notre base de données n’est pas anodin. Sans contraintes particulières de performance ou de scalabilité, nous avons privilégié la rapidité de développement. CouchDB, avec son API REST native, nous a permis de gagner un temps précieux.
Des scripts dédiés ont été mis en place pour :
- Préparer la base de données (création d’index, etc.)
- Simplifier l’extraction des scores
Frontend : l’interface qui donne vie au jeu
Technologies au cœur de PictionarIA
Pour le développement frontend, nous avons misé sur une stack moderne et éprouvée :
- React 18, pour une interface utilisateur réactive et performante
- XState 5, pour la gestion d’état
- TailwindCSS 3, pour un design clean et responsive
- Vite 5, Vitest 2, TypeScript 5.5, pour un développement rapide et typé
Pourquoi XState ?
Pourquoi avoir choisi XState plutôt qu’un gestionnaire d’état plus conventionnel ? Sur des projets frontend, nous avons l’habitude d’utiliser des gestionnaires d’états globaux afin de partager l’état entre tous les composants de notre application. XState peut remplacer un gestionnaire d’états globaux et ainsi nous offrir la puissance des machines à états finis, permettant de :
- Décrire exhaustivement tous les états possibles du système
- Modéliser précisément les transitions entre ces états
- Gérer les événements déclencheurs de manière structurée
Cette approche nous a permis de modéliser le fonctionnement du jeu de façon claire et visuelle. Grâce au système de visualisation de XState, nous avons pu représenter le jeu sous forme de diagrammes, facilitant grandement la phase de conception.
Diagramme d’états de la machine à états à la racine :
Diagramme d’états de la machine à états de l’écran de dessin :
XState est un outil très puissant qui nécessite une certaine prise en main et s’est révélé particulièrement adapté à un projet comme PictionarIA :
- Absence de routeur (pas d’état caché dans les routes ou query parameters)
- Écrans organisés par étapes
- Appels réseau modifiant l’état global du système
Cette approche nous a notamment permis de gérer efficacement les race conditions, comme permettre au joueur de commencer un nouveau dessin sans attendre la réponse de l’IA pour le précédent.
Devtools sur mesure
Afin de simplifier le développement et la phase de recette (par des personnes n’ayant pas accès à la console du navigateur), nous avons créé des devtools spécifiques à PictionarIA pour :
- Visualiser en temps réel les prédictions de l’IA, ce qui nous a permis d’améliorer notre prompt et de résoudre entre autres le problème de la langue
- Analyser le calcul des scores, ce qui nous a permis d’affiner un algorithme qui évite que plusieurs joueurs n’aient le même score, notamment dans le cadre d’un jeu-concours
Ces devtools ont joué un rôle crucial dans le développement : l’expérience de jeu a ainsi pu être beaucoup plus équitable et engageante !
De la recette au jour J : peaufiner l’expérience utilisateur
Une phase de test rigoureuse
Nous avons mis en place un processus de recette minutieux pour garantir une expérience optimale lors de BDX I/O 2024 :
- Déploiement de l’environnement de jeu sur un serveur Linux dans nos locaux Daveo
- Mise à disposition du jeu pour nos collaborateurs via un tunnel VPN
- Collecte et intégration des retours des testeurs en amont du salon
Nous avons pu récolter de nombreux retours au fil des jours, grâce auxquels nous avons identifié et résolu les bugs potentiels, affiné l’expérience utilisateur et optimisé les performances du jeu en conditions réelles.
PictionarIA en action : retours et enseignements à BDX I/O 2024
Dès l’ouverture des portes du salon, PictionarIA a attiré l’attention des visiteurs et déchaîné les foules, qui ne jouaient pas seulement pour remporter le jeu-concours mais aussi pour le plaisir de jouer et de tester une nouveauté ! Notre application s’est révélée être assez addictive et chaque joueur, tant pendant la phase de tests que le jour J, avait envie de recommencer encore et encore pour améliorer son score : une vraie réussite pour nous !
La réception de PictionarIA sur le salon a finalement dépassé nos attentes : enthousiasme général pour le concept innovant, curiosité marquée pour l’utilisation de l’IA dans un contexte de jeu, discussions enrichissantes sur les défis techniques et éthiques de l’IA avec les professionnels présents, questions sur le développement de ce jeu…
En résumé, des retours unanimes sur notre application qui nous ont confortés dans notre approche et ont renforcé notre envie de la faire évoluer et de la déployer plus largement, en ligne !
Les perspectives d’évolution de PictionarIA
La version présentée à BDX I/O était destinée à un usage dans le cadre d’un jeu-concours. Aujourd’hui, nous souhaitons diffuser PictionarIA en ligne, hors jeu-concours, ce qui entraîne plusieurs évolutions :
- Retrait de la partie « concours » avec les high-scores centralisés/la base de données de scores, le formulaire de contact pour le jeu-concours…
- Ajout d’une visualisation, pour un joueur, de ses propres meilleurs scores, issus du local storage du navigateur depuis lequel il joue
La version en ligne est désormais disponible ici :
N’hésitez pas à jouer et partager vos scores, voire à nous faire des retours. Nous serions ravis de vous lire ! PictionarIA est disponible et jouable sur desktop, tablette et mobile ; le setup le plus adéquat pour dessiner restant une tablette avec un stylet, bien sûr.
PictionarIA n’est que le début de notre aventure à l’intersection du jeu et de l’IA : nous avons déjà d’autres idées pour nos prochaines innovations !
