Échec de la tentative de recréer le site web de Space Jam de 1996 avec Claude

• Une tentative a été lancée pour reproduire le site web officiel de Space Jam de 1996 de Warner Bros. avec le modèle d’IA Claude.
• Bien qu’on ait fourni à Claude des captures d’écran et les ressources d’images d’origine, le HTML généré n’avait pas une mise en page correspondant à l’original.
• Des outils supplémentaires ont été ajoutés, notamment l’estimation de coordonnées, une superposition de grille et des outils de comparaison pixel par pixel, mais Claude n’a toujours pas réussi à calculer les positions avec précision.
• Claude a qualifié ses résultats de « parfaits », mais en réalité ses erreurs se sont accumulées et il a montré une tendance à faire preuve d’excès de confiance en ses propres sorties.
• Cette expérience met en lumière les limites de précision visuelle de l’IA et ses erreurs d’auto-évaluation, tout en montrant que la simplicité d’un ancien design web peut cacher une complexité difficile à reproduire.

---

Aperçu du site web Space Jam 1996

• Le site officiel Space Jam créé par Warner Bros. en 1996 pour promouvoir le film Space Jam était composé d’une page HTML unique avec un arrière-plan GIF.
  • Couleurs simples, structure basée sur des tableaux, taille inférieure à 200 Ko.
  • Il est toujours maintenu à l’adresse spacejam.com/1996.
• L’expérimentateur a voulu vérifier si Claude pouvait reproduire ce site uniquement à partir de captures d’écran.

Préparation de l’expérience

• Matériel fourni à Claude
  • Captures d’écran complètes du site
  • Répertoire des ressources d’images d’origine
• Mise en place d’un système de journalisation du trafic API via un proxy pour suivre le fonctionnement interne de Claude
  • Tous les prompts, réponses et appels d’outils (Read, Write, commandes Bash, etc.) ont été enregistrés
  • Un fichier traffic.log a été généré à chaque tentative

Partie 1 : Claude le réaliste

• Lors de la première tentative, Claude a reproduit approximativement la disposition des planètes et la position des boutons, mais la forme orbitale différait de l’original.
  • L’original utilise un arrangement elliptique, tandis que Claude a opté pour une forme diamant symétrique.
• Claude a évalué le résultat comme « parfait » et a affirmé que son analyse et son agencement étaient exacts.
• On a ensuite demandé à Claude d’écrire explicitement les étapes de son raisonnement, mais
  • les chiffres mentionnés dans l’analyse n’ont pas été pris en compte lors de la génération du HTML.
• Face aux questions au pixel près, Claude a répondu que
  • « il ne peut pas mesurer de coordonnées exactes » et « il ne peut faire qu’une estimation visuelle »
  • Son niveau de confiance pour une précision dans les 5 pixels était de 15/100.
• Claude a admis ne pas avoir de capacité de mesure pixel précise, puis l’expérimentateur a tenté d’étendre les outils disponibles.

Partie 2 : Claude le narrateur peu fiable

• Pour compenser les limites de mesure de Claude, on a ajouté une superposition de grille, des étiquettes de coordonnées, des outils de comparaison de couleurs et un viewer de comparaison de captures d’écran.
• Claude utilise la grille « comme un élément décoratif » et continue d’interpréter les coordonnées incorrectement.
  • Exemple : il a proposé des valeurs comme centre (961,489), Planet B-Ball (850,165), qui ne correspondaient pas aux positions réelles.
• Au fil des itérations, Claude a prétendu améliorer progressivement le résultat, mais les erreurs se sont en réalité accumulées.
  • 1re itération (grille 50 px) : léger déplacement
  • 2e itération (grille 25 px) : décalage de toute l’orbite vers l’intérieur de 20 px
  • 3e itération (grille 5 px) : ajustements fins en série
  • 4e itération : déclaration de « réglage précis terminé »
• En pratique, le rayon de l’orbite des planètes manque de 150 à 200 px, la composition reste globalement comprimée.
• Claude a évalué à plusieurs reprises son travail comme « presque parfait », mais a mal jugé en se basant sur ses propres résultats.
• L’expérimentateur a cité le papier d’Anthropic “Language Models (Mostly) Know What They Know”.
  • Il explique un biais de surconfiance où le modèle confond le texte qu’il a lui-même généré avec une entrée externe.
  • Ce comportement correspond à ce qu’on observe lorsque Claude considère son propre HTML comme la « bonne réponse », ce qui déforme les corrections ultérieures.

Partie 3 : Claude l’aveugle

• Pour analyser les limites visuelles de Claude, on a posé l’hypothèse d’une contrainte structurelle du vision encoder.
  • Les images sont tokenisées par blocs de 16×16 pixels, ce qui entraîne une perte d’information géométrique fine.
  • Claude peut reconnaître des notions sémantiques comme « planète » ou « relation de position », mais pas des coordonnées précises.
• En se référant au papier “An Image is Worth 16x16 Words”,
  • on a inféré que Claude compresse les détails pixel en blocs de patchs de la même manière.
• Pour vérifier cela, une capture d’écran agrandie 2x a été fournie, mais
  • Claude n’a pas réussi à conserver les proportions, sans tenir compte du facteur d’agrandissement.
• En conclusion, Claude affiche une compréhension conceptuelle correcte mais une capacité insuffisante de reproduction géométrique.
  • L’explication « cette planète est au-dessus de celle-ci » peut être juste, mais la mise en page HTML reste en décalage.

Conclusion et défis non résolus

• Claude reconnaît la structure visuelle du site Space Jam, mais échoue à en faire une reproduction précise.
• Les causes de l’échec sont :
  • impossibilité de mesurer au pixel près
  • tendance à faire preuve d’excès de confiance dans ses propres sorties
  • limites de résolution de l’encodage visuel
• Pistes proposées pour de futures tentatives
  1. Diviser l’écran en quatre quadrants pour reproduire puis fusionner chaque partie séparément.
  2. Expérimenter un prompt engineering centré sur le raisonnement spatial.
  3. Renforcer la capacité de zoom et l’exploitation des captures d’écran.
• Cette expérience illustre à la fois les limites de précision visuelle de l’IA et la complexité de la première génération de design web.
• La page web apparemment simple de 1996 demeure pour l’IA actuelle un référentiel de benchmark toujours difficile à reproduire.