L'IA voit-elle vraiment ?

Le défi : inventorier le stock de la boutique

Imagine la boutique « Pétale & Brique » : elle vend des bouquets qu'on monte soi-même, en briques de plastique. Chaque jour, des clients rapportent des boîtes à moitié vidées, des pièces en vrac. Avant de refaire les stocks, il faut compter les pièces : combien de pétales roses ? combien de tiges vertes ?

Les compter une par une à la main, c'est long et pénible. La question du jour :

Le chemin qu'on va suivre

Ce que tu vas produire aujourd'hui

Les notions qu'on découvre

1. C'est quoi une IA de vision ?

Tu as sûrement déjà « parlé » à une IA en tapant du texte. Une IA de vision, c'est la même idée, mais tu peux aussi lui montrer une image. Elle « regarde » la photo et te répond à propos de ce qu'elle y voit : des objets, des couleurs, du texte, des formes.

Ce qu'elle sait faire (et ce qu'elle rate)

Ouvre l'outil

2. La bonne photo

Avant même l'IA, tout se joue sur la photo. Une IA de vision ne peut compter que ce qu'elle voit distinctement. Pièces entassées, floues, mal éclairées : elle devine, et elle se trompe. On va le prouver.

Étape 1 — Monte (ou prends) ta fleur

Prends une fleur montée du kit (ou un petit tas d'une quinzaine de pièces si tu préfères). Ce sera ta fleur pour tout l'atelier.

Étape 2 — Prends DEUX photos exprès différentes

3. Ton premier inventaire (en français)

On garde maintenant la photo B (la bonne). On va demander à l'IA un vrai inventaire. Dépose la photo B dans claude.ai, puis écris ce prompt :

Voici une photo de pièces de fleur en briques.
Fais l'inventaire : pour chaque type de pièce,
donne la couleur et le nombre.

L'IA répond quelque chose comme ça (chez toi, les chiffres seront différents) :

Sur la photo, je vois :
- 12 pétales jaunes
- 1 centre marron
- 3 tiges vertes
- 2 feuilles vertes
Au total, environ 18 pièces.

Le hic : cette réponse, une machine ne sait pas la relire

La réponse ci-dessus est parfaite pour toi, un humain. Mais souviens-toi de la boutique : on veut que le logiciel de stock ajoute automatiquement « +12 pétales jaunes » à sa base. Or un logiciel ne sait pas lire une phrase comme « je vois 12 pétales jaunes et aussi, au total, environ… ». Il lui faut quelque chose de rangé, régulier, prévisible.

C'est exactement le rôle du JSON. Chapitre suivant.

4. Pourquoi la phrase ne suffit pas

Prends la réponse de l'IA et imagine que tu es un programme. On te demande : « combien de tiges vertes ? ». Dans la phrase « je vois 12 pétales jaunes, 1 centre marron, 3 tiges vertes… », tu devrais : trouver le mot « tiges », reculer pour trouver le nombre juste avant, vérifier que « vertes » est bien collé… et prier pour que la phrase d'après soit tournée pareil. Trop fragile.

Du texte libre aux cases

5. C'est quoi le JSON ?

JSON (prononce « djé-sonn ») veut dire JavaScript Object Notation. Oublie le nom : retiens que c'est une façon simple et universelle de ranger des données, que presque tous les logiciels du monde savent lire. On va l'apprendre depuis zéro, morceau par morceau.

Brique n°1 — la paire « clé : valeur »

Tout part d'un couple : un nom (la clé) et son contenu (la valeur), séparés par deux-points.

"couleur": "rose"

Brique n°2 — les types de valeur

Une valeur peut être du texte ou un nombre — et ça change l'écriture :

"couleur": "jaune"     <-- texte : AVEC guillemets
"quantite": 12         <-- nombre : SANS guillemets

Brique n°3 — l'objet { }

On regroupe plusieurs paires qui décrivent une même chose entre accolades { }, séparées par des virgules. Ça, c'est un objet : ici, une pièce.

{
  "type": "petale",
  "couleur": "jaune",
  "quantite": 12
}

Brique n°4 — le tableau [ ]

Une fleur, c'est plusieurs pièces. Pour faire une liste d'objets, on les met entre crochets [ ], séparés par des virgules. Ça, c'est un tableau (en anglais array).

[
  { "type": "petale", "couleur": "jaune", "quantite": 12 },
  { "type": "tige",   "couleur": "vert",  "quantite": 3 }
]

Brique n°5 — emboîter (le document complet)

Dernière marche : une valeur peut elle-même être un tableau. On obtient alors un document qui décrit toute la fleur d'un coup — un nom, la liste des pièces, et le total. C'est exactement ce que l'IA va te renvoyer.

{
  "fleur": "tournesol",
  "pieces": [
    { "type": "petale", "couleur": "jaune", "quantite": 12 },
    { "type": "tige",   "couleur": "vert",  "quantite": 3 }
  ],
  "total": 15
}

Chapitre 5 bis — Entraîne ton œil : répare le JSON

Avant de faire travailler l'IA, muscle ton œil de relecteur. Voici trois JSON cassés. Chacun contient un des pièges du chapitre 5. À toi de les réparer — sur ta feuille, puis tu vérifieras avec le corrigé en bas.

Cassé n°1

{ "type": "feuille", "couleur": "vert", "quantite": 2, }

Cassé n°2

{ "type": "petale", couleur: "rose", "quantite": 5 }

Cassé n°3

[
  { "type": "tige", "couleur": "vert", "quantite": 3 },
  { "type": "centre", "couleur": "marron", "quantite": 1
]

[
  { "type": "tige", "couleur": "vert", "quantite": 3 },
  { "type": "centre", "couleur": "marron", "quantite": 1 }
]

6. Faire rendre du JSON à l'IA

Maintenant, le bon réflexe de développeur : au lieu de demander « fais l'inventaire » (réponse en phrases), on impose le format de sortie. On donne à l'IA un modèle (on dit un schéma) et on exige qu'elle le remplisse.

Reprends ta photo B dans claude.ai et écris ce prompt :

Fais l'inventaire des pièces sur cette photo.
Réponds UNIQUEMENT en JSON, sous la forme d'un
tableau d'objets avec les clés "type", "couleur"
et "quantite". Pas de texte avant ni après.

Tu obtiens quelque chose comme :

[
  { "type": "petale", "couleur": "jaune",  "quantite": 12 },
  { "type": "centre", "couleur": "marron", "quantite": 1 },
  { "type": "tige",   "couleur": "vert",   "quantite": 3 },
  { "type": "feuille","couleur": "vert",   "quantite": 2 }
]

7. Vérifier : compte à la main !

Voici le cœur de l'atelier, et la compétence la plus importante de ta future vie de dev : ne jamais faire confiance à une sortie d'IA sans la vérifier. On va comparer le JSON de l'IA à la réalité.

La méthode « ligne par ligne »

Prends le JSON de l'IA et, pour chaque ligne, compte les vraies pièces sur la table. Note dans un petit tableau :

8. Pourquoi l'IA se trompe

Maintenant que tu l'as vue se tromper, comprenons pourquoi. Ce n'est pas un bug : c'est la nature même d'une IA de vision. Elle ne « compte » pas comme toi — elle reconnaît des motifs et estime la réponse la plus probable.

Les 4 pièges classiques

9. Corriger et affiner (reprendre la main)

Tu as deux façons de corriger une réponse d'IA. Un bon dev connaît les deux.

Façon 1 — tu corriges toi-même (le plus sûr)

Tu as fait ta matrice de vérité au chapitre 7 : tu modifies directement la quantite fausse dans le JSON. Fiable, immédiat.

Façon 2 — tu renvoies l'IA au travail (le plus rapide)

Tu lui signales précisément l'erreur :

Il y a 11 pétales jaunes, pas 12, et 3 feuilles
vertes, pas 2. Corrige le JSON et renvoie-le.

10. Le bouquet de la classe (activité commune)

Une fleur seule, c'est bien. Mais la boutique vend des bouquets. On va combiner plusieurs inventaires — et découvrir pourquoi le JSON est si pratique quand les données viennent de plusieurs sources.

Étape 1 — échange avec ton voisin

Récupère le JSON corrigé de ton voisin (le sien, de sa fleur). Vous avez maintenant deux tableaux JSON, de même forme.

Étape 2 — fusionne en un bouquet

Donne les deux à l'IA avec ce prompt :

Voici deux inventaires JSON de deux fleurs.
Fusionne-les en un seul tableau "bouquet".
Si une même pièce (même type ET même couleur)
apparaît dans les deux, additionne les quantites.
Renvoie uniquement le JSON.

[
  { "type": "petale", "couleur": "jaune", "quantite": 19 },
  { "type": "petale", "couleur": "rose",  "quantite": 8 },
  { "type": "tige",   "couleur": "vert",  "quantite": 6 },
  { "type": "feuille","couleur": "vert",  "quantite": 5 }
]

Étape 3 (défi bonus) — « qu'est-ce qu'il manque ? »

La boutique veut un bouquet « modèle » de : 24 pétales, 8 tiges, 6 feuilles. Compare avec ton bouquet fusionné.

11. Le JSON, pour de vrai

Tu viens de jouer avec des fleurs, mais le JSON que tu as appris est partout, pour de vrai. À chaque fois que deux programmes s'échangent des données, c'est presque toujours en JSON.

12. Bonus waoh : ton inventaire devient une appli

Tu as un JSON propre et vérifié. On va le transformer en vraie appli web, sans écrire une ligne de code — juste en parlant à Claude. On monte en 3 paliers, de plus en plus bluffants. Tu peux t'arrêter à n'importe quel palier : tu auras déjà quelque chose de cool et publiable.

Palier 1 — Le tableau de bord

Ouvre claude.ai et copie ce prompt (colle TON JSON à la fin) :

Crée une page web (HTML + CSS + JS dans un seul fichier)
que je puisse prévisualiser : un tableau de bord de mon
inventaire de pièces. Affiche :
- une carte par pièce (le type, une pastille de sa couleur,
  la quantité),
- un grand compteur avec le TOTAL de pièces, tout en haut,
- un graphique en barres des quantités par pièce.
Fais un rendu soigné et moderne.

Voici le JSON :
[ colle ici ton inventaire corrigé du chapitre 7 ]

→ une page apparaît à droite : ton appli. Repère Aperçu (le rendu), Code (ce que Claude a écrit) et Publier.

Ajuste-la (dis-le, ça change)

Palier 2 — Rends-la vivante

Un tableau de bord qui réagit, c'est tout de suite plus pro. Sur la même appli, enchaîne :

Ajoute à cette appli :
- des boutons pour filtrer les pièces par couleur
  (un bouton par couleur + un bouton "Tout"),
- une barre de recherche pour trouver une pièce par son type,
- un graphique en camembert de la répartition des couleurs.

Palier 3 — La 3D (le vrai waoh)

Maintenant, la question que tout le monde se pose : est-ce que l'IA peut refaire MA fleur en 3D à partir de la photo ?

Sur une nouvelle page, demande :

Crée une page web avec une scène en 3D (Three.js) que je
peux prévisualiser. À partir de mon inventaire JSON,
construis une fleur en 3D :
- autant de pétales que la quantité de "petale", disposés
  en cercle et de la couleur indiquée,
- une tige verte au centre,
- autant de feuilles que la quantité de "feuille".
Je dois pouvoir la faire tourner à la souris. Fond clair.

Voici le JSON :
[ colle ton inventaire ]

→ une fleur en 3D apparaît, que tu fais pivoter à la souris. Change un chiffre dans ton JSON, redonne-le : la fleur change !

On vérifie : mini-quiz

Réponds sans regarder, puis contrôle avec le corrigé juste après.

1. Dans "couleur": "rose", qui est la clé, qui est la valeur ?
2. Pourquoi écrit-on 12 sans guillemets mais "jaune" avec ?
3. Ce JSON est cassé — pourquoi ? { "type": "tige", "quantite": 3, }
4. Vrai ou faux : « une IA de vision compte toujours juste, c'est une machine ». Justifie.
5. Quelle est la différence entre un objet { } et un tableau [ ] ?
6. Cite une raison pour laquelle l'IA peut rater une pièce sur ta photo.

Corrigé (vérifie-toi)

Glossaire

Tu es bloqué ? La checklist

Récapitulatif — ce que tu sais faire maintenant

Compétences mobilisées — référentiel BTS SIO SLAM