Le batsignal est dans le ciel, merci d’être venu 🦇 !

Dans cette 4ème édition, le cas d’usage est le suivant :
contrôler un jeu en faisant des squats.

Pas n’importe quel jeu, le jeu T-rex Runner !

Tu sais celui qu’affiche Chrome quand tu es hors-ligne :)

Ce cas d’usage s’intègre dans le principe de créer de nouvelles expériences physiques grâce à l’IA.

Et pour cette édition : nouveau format !
Cette newsletter est construite en niveaux de profondeur.
Plus tu descends dans celle-ci et plus ça devient technique.

Le postulat de base reste le même : tu n’es pas forcément développeur.

Imagine une voiture.
Si tu es là, c’est que tu veux comprendre ce qu’il y sous le capot.
C’est l’objet du niveau -1.

👉 Niveau -1 : “Tu regardes sous le capot, tu comprends le fonctionnement et les potentiels”

👉 Niveau -2 : “Tu montes le moteur en suivant le guide”

👉 Niveau -3 : “Tu bricoles le moteur, l’améliores et changes des pièces“

Tu peux t’arrêter à n’importe quel niveau, je te laisse le choix :).
Puis on se retrouve tout en bas pour le mot de la fin.

Rentrons dans le vif du sujet ! 👇

Niveau -1 : “Regarde sous le capot”

Présentation du résultat en vidéo

Je te présente le résultat du prototype.
(La vidéo est courte < 1 min)

👉 La vidéo Démo

Cerise sur le gâteau, tu peux tester toi-même, c’est par là : fais des squats.

Tu donnes l’autorisations d’accès à ta webcam (attends quelques seconds).

Tu dois être visible de la tête aux pieds par la webcam.

Fais des squats !

Comment ça fonctionne ? En schéma :

Parce qu’un schéma vaut 1000 mots !
L’architecture du prototype avec des Lego :

👉 Teachable Machine
👉 chrome://dino

Tout l’enjeu, c’est de comprendre comment les imbriquer 🙂.

Comment peux-tu en tirer parti ?

🔷Utilise Teachable Machine pour itérer plus vite

Tu veux tester une idée qui utilise la reconnaissance d’image, de son ou de position ?

Alors tu dois utiliser Teachable Machine.

Je ne dis pas que ça va forcément fonctionner et que ce sera le meilleur outil pour ton cas.

Mais si ça fonctionne, tu gagneras beaucoup de temps pour tester ton idée !
Si en plus il y a des enjeux business derrière… tu as compris :)

Dans le prototype d’aujourd’hui, la partie intégration de l’“IA” c’est celle qui m’a pris le moins de temps :
=> 5 min à entrainer le modèle, 10 min pour comprendre comment intégrer avec le jeu et tester en conditions réelles.

Par la suite, ce qui m’a pris le plus de temps, c’est de recueillir correctement la donnée et par la suite entraîner le modèle.

🔷Le plus important c’est la donnée, ce qu’elle représente et son recueil.

C’est ce qui fera que l’IA va fonctionner ou non.

👉 Il faut s’assurer qu’elle soit le plus propre possible, c’est-à-dire sans donnée parasite.
Exemple : avoir une image où tu es debout alors que tu dois être en position squat.

Mal recueillir, c’est le chemin le plus court vers un modèle qui ne fonctionne pas.

L’équation est simple :
Donnée propre => bon modèle => bonne prédiction
Donnée bruitée => bon modèle => mauvaise prédiction.

Comment s’assurer d’avoir de la donnée propre ?

👉 Bien définir ces cas d’usages et ce que représente chaque classe :

Ce que signifie un squat, la position neutre etc.

Concrètement, si tu entraînes le modèle en faisant des squats au centre du l’écran, et que tu testes en étant sur le côté, le modèle ne va pas fonctionner.

Pourquoi ?

Car le modèle ne se sera pas entraîné sur le cas “faire un squat en étant sur le côté de l’écran”.

Et donc simplement définir la classe “Squat” par “être en position squat” ne suffit pas.

Il faut définir :
- être en position squat au centre, à droite, à gauche
- être en position squat très rapproché ou très éloigné (à définir)
- être en position squat en étant de biais ?
- être en position squat en étant de biais, en levant les bras ?
_ …

C’est à toi de bien définir tout ça.

De même, il faut des classes bien équilibrées, c’est-à-dire, avec le même nombre d’images.

Sinon tu vas créer un biais dans ton modèle.

🔷 Inspire-toi de Teachable Machine pour faire un SaaS orienté business.

👉 Et permettre d’entraîner de petites IA en mode NoCode.

J’orienterai ça dans le domaine de l’automatisation de process.

Il y a des cas d’usages d’automatisation qui nécessitent l’utilisation d’IA :
- digitalisation de factures et de documents
- exploiter des données dans des tableaux
- génération auto de rapports
- tracker si la personne travaille avec la webcam (je blague)
Bref, des tâches où entraîner une IA à la volée aurait un intérêt dans le but d’automatiser.

👉 Une autre idée serait d’ajouter cette fonctionnalité dans un SaaS.

Pourquoi ? Afin de régler le problème de sédentarité.

”Ça fait 30 min que tu bosses, joue à ce jeu, c’est pour ton bien :)”

Oui c’est une fonctionnalité “gadget”, mais je pense que dans un but de fidélisation, c’est intéressant.
Dans le business du SaaS, la fidélisation est aussi importante que l’acquisition.

👉 Dans la même veine, en faire une extension chrome.

Toutes les heures, l’extension t’invite à jouer et lance le T-rex.

Le business model serait le même que pour les applications de sport.

Je viens de te donner 3 idées, hâte de voir ce que tu vas en faire :D.

Niveau -2 : “Remonte le moteur en suivant le guide”

Ce guide est un guide étape par étape.
C’est un mix entre du texte, des copies d’écran annotées et des vidéos très courtes.
En le suivant, tu auras le même prototype que moi.
La classe 😎

Si tu n’as pas le temps maintenant, tu peux le lire rapidement.
Cela te donnera une idée plus détaillée de la construction derrière le prototype.
Chaque titre et sous-titre sont des étapes et te donnent une indication.

C’est par ici :
👉 Le guide étape par étape

Si tu as des difficultés et que tu es bloqué(e), dis-le-moi en répondant à ce mail.
Le SAV est inclus avec l’inscription à la newsletter 🙃.

Niveau -3 : “Bricole le moteur et change des pièces”

👉 Le code source 👈

👉 Si ton modèle ne fonctionne pas comme tu veux, quelques conseils :

• Change de pièce, la luminosité joue énormément.

• Sur la position, ajoute de la donnée où tu te tiens au centre, mais aussi sur les côtés.

• Approche-toi et éloigne-toi.

• N’hésite pas à varier les arrière-plans.

• Teste avec d’autres webcam (ou micro).
  La qualité de l’image et la résolution peuvent jouer. Et si ça ne fonctionne pas bien, tu sais ce qu’il te reste à faire : ré-entraîner le modèle 🙂.

👉 Pour aller plus vite, j’ai utilisé le code source du jeu T-rex d’origine.

J’ai pris celui-ci : Code Source T-rex Runner

Puis j’ai simplement copié-collé le script fourni par Teachable Machine.

Il ne me restait plus qu’à faire les branchements et intégrer la logique du jeu : “pour sauter, tu fais un squat”.

👉Tu te demandes comment j’ai fait pour faire sauter le T-rex ?

Je récupère la prédiction du modèle en % sur chaque classe.

Si la prédiction est supérieure à 95% alors je considère qu’elle est bonne.

Et après ?

Dans le jeu de base, pour faire sauter, il faut cliquer sur espace.

À chaque fois un “event” est produit, et c’est grâce à cet “event” que le T-rex est contrôlé par le code : tu le récupères et tu mets en place la logique de ton jeu.

Donc à chaque fois qu’il y a la prédiction “Squat”, je déclenche l’évènement “clique sur espace” 🙃.

Dans le code, ça ressemble à ça :

// Définition de l'event "espace", 32 c'st le numéro qui identifie cette touche
const eventKeyJump = new KeyboardEvent('keydown', { keyCode: 32, which: 32 });

...
// je déclenche l'event "clique sur espace"
document.dispatchEvent(eventKeyJump);

👉 Attention à ne pas faire de faute dans l’écriture de la classe, comme oublier une majuscule.

Car dans le code, tu utilises une string “Squat” pour identifier la prédiction.

C’est pourquoi j’ai préféré travailler directement avec un objet et utiliser une seule fois la string dans mon code.

Dans le passé, j’ai passé des heures à résoudre des bugs de strings : un minuscule alors qu’il fallait un majuscule.

const Actions = { squat: 'Squat', neutral: 'Neutre' };
...
if(thisAction == Actions.squat){...}

👉 Un meilleur design pattern pour la logique du jeu serait d’utiliser une machine à état.

Pour l’instant, le nombre d’actions possibles est réduit (squat ou neutre).

Si tu décides d’ajouter des actions (se baisser, double saut …), alors le code risque de devenir une usine à gaz.

Le pattern de la machine à état fonctionne bien dans ce cas-là.

👉 Tu peux modifier les paramètres du jeu.

Ils se trouvent en ligne 1649 dans index.js.

Pour faciliter les squats, j’ai modifié :
- INIITAL_JUMP_VELOCITY : -10 => -15
- AP_COEFFICIENT 0.6 => 1.5

Trex.config = {
    DROP_VELOCITY: -5,
    GRAVITY: 0.6,
    HEIGHT: 47,
    HEIGHT_DUCK: 25,
    INIITAL_JUMP_VELOCITY: -15,
    INTRO_DURATION: 1500,
    MAX_JUMP_HEIGHT: 30,
    MIN_JUMP_HEIGHT: 30,
    SPEED_DROP_COEFFICIENT: 3,
    SPRITE_WIDTH: 262,
    START_X_POS: 50,
    WIDTH: 44,
    WIDTH_DUCK: 59,
  };

Pour aller plus loin

Si tu as envie de te challenger physiquement, tu peux remplacer les squats par des burpees 😅.

Si je devais creuser le sujet, je chercherais des jeux d’arcade (avec une version web).
Et j’imaginerais de nouvelles positions de sport pour le contrôler.

Le mot de la fin

J’espère que ce format t’a plu, dis-le-moi 🙂!

J’essaie de rendre accessible sans rogner sur la profondeur.

Un like (en bas) fait toujours plaisir pour me montrer que tu as apprécié et m’encourager à continuer.

Prochaine édition dans 2 semaines ! La Batcave va devenir bimensuelle.

Pour ne rien te cacher, c’est compliqué de tenir le rythme d’un prototype par semaine.

Pour pouvoir avoir le temps de produire le contenu de la newsletter, je ne peux pas passer plus d’un jour à créer le prototype.

C’est très court et laisse peu de marge d’erreur. Spoiler alert, ça ne se passe jamais comme prévu. 😆

Donc pour ne pas rogner sur le contenu, je préfère réduire sur la quantité et en faire moins.

On se retrouve donc dans 2 semaines dans La Batcave.

D’ici là , j’espère pouvoir échanger avec toi, par mail, en commentaire ou MP sur LinkedIn !
N’hésite pas.

Prends soin de toi,
Vincent 🦇
”Explore la Tech comme un développeur, sans en être un.”