PhotoVisionAI : comment une intelligence artificielle voit une photo, des patchs au sens, en six étapes

Une mini-app qui montre comment un modèle d'intelligence artificielle « voit » une photo : il la découpe en 360 patchs, les transforme en vecteurs, les aligne avec les mots de la question et, couche après couche, les regroupe par sens jusqu'à la phrase de la réponse. Trois scènes dessinées et votre photo, décomposée sans quitter le navigateur.

**PhotoVisionAI** montre en six étapes ce qui arrive à une photo dans un modèle d'intelligence artificielle : la photo devient des patchs, les patchs des vecteurs, les vecteurs se cherchent par l'attention et, à la fin, il reste le sens. Je l'ai conçue pour les visiteurs de mon portfolio et pour les curieux de l'IA sans bagage technique : pas de formules, peu de mots, tout se voit et se touche. C'est une interprétation de vulgarisation, pas un regard à l'intérieur d'un modèle précis, et la page le dit.

**Ce qu'elle fait**

- **Six étapes** : la photo, les patchs, les vecteurs, la séquence, l'attention et le sens. La lecture va de la photo à la phrase finale en 16 secondes ; avec le curseur et les étapes, on s'arrête où l'on veut. - **Patchs et vecteurs** : la photo est découpée en 360 petits carrés, 24 sur 15. En touchant l'un d'eux, un encadré montre ses 1 200 nombres, le rouge, le vert et le bleu de 400 pixels, et le vecteur de 24 valeurs dans lequel ils sont compressés. - **Attention** : en survolant un point, on voit à quels patchs il prête attention. Elle n'est pas dessinée à la main : elle vient du produit des vecteurs, comme dans une vraie couche d'attention. - **Sens** : les groupes reçoivent un nom, des fils dorés relient les objets, des concepts absents des pixels apparaissent, et la phrase de la réponse arrive à la fin. - **Trois scènes dessinées** : un coucher de soleil sur la mer, une ville de nuit et une forêt au matin. - **Votre photo** : chaque visiteur peut décomposer sa propre image, qui reste dans le navigateur et disparaît avec la page. Sans vrai modèle, les groupes viennent des couleurs et des formes, et la phrase finale le dit. - **Italien et anglais**, thème clair et sombre, et mouvement réduit pour qui le demande à son système.

**La partie difficile**

Tout faire tenir dans une page légère et honnête. Les scènes ne sont pas des images : le code les dessine sur le canevas, et c'est de là que sortent patchs, vecteurs et groupes. Aucune bibliothèque à part Vue, aucun cookie et aucune requête au-delà de la page : compressée, elle pèse environ 44 Ko. À la dernière étape, le nom de chaque fil cherche sa place le long de la courbe jusqu'à ne plus couvrir de groupes, de noms ni de concepts, sur ordinateur comme sur téléphone.

Vue 3.5 et TypeScript avec Vite, sans serveur : chaque modification passe par 54 tests automatiques, et le site tourne dans Docker sur mon serveur, derrière nginx.

Conception, développement et mise en ligne · 2026

Vue.js, TypeScript, Canvas API, Vite

Voir le site

Andrea Coppetta