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

 (j0nah.com)
1 points par GN⁺ 2025-12-08 | 1 commentaires | Partager sur WhatsApp
  • 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.

À lire aussi

1 commentaires

 
GN⁺ 2025-12-08
Avis Hacker News

  • En tant que personne qui créait elle-même des sites similaires à la fin des années 90, j’ai essayé de donner le site de Space Jam à Opus 4.5
    L’auteur du texte original parlait d’une « page HTML unique construite avec du positionnement absolu », mais en réalité c’était une mise en page basée sur des tableaux. C’était inévitable à l’époque, avant l’arrivée de CSS
    Le résultat de ma tentative de recréation avec des tableaux se trouve dans cette capture d’écran

    • Merci. J’ai corrigé l’erreur avec du texte barré et indiqué la source
      Comme la blague continuait dans les commentaires, je l’ai laissée telle quelle pour le contexte
    • Je me souviens qu’à l’époque on découpait le design pour l’exporter en tableaux
    • J’ai aussi commencé le développement web avec GoLive, et je me souviens encore de cette façon de construire les pages avec des tableaux

  • Les LLM comme Claude restent faibles sur les détails d’implémentation de layout
    Mais chose intéressante, j’ai utilisé Claude pour créer en quelques minutes un programme en C ajoutant la prise en charge des profils colorimétriques gamma à un compositeur Linux (Hyprland)
    Le code généré par Claude a compilé du premier coup et allait jusqu’à lire des fichiers .icc, extraire le VCGT et l’envoyer au pilote amdgpu
    J’ai seulement dû corriger moi-même un problème d’endianness dans le parsing ICC

    • Il est plus probable que Claude n’ait pas écrit le code lui-même, mais qu’il ait repris et modifié du code venu d’ailleurs. Si un humain avait fait ça, on aurait parlé de plagiat
    • Si les LLM sont faibles sur les détails visuels, c’est parce que les données au niveau du pixel ne sont pas incluses dans l’entraînement. La plupart des jeux de données d’UI n’ont pas de captures d’écran, ou elles ne sont pas collectées
    • Mais on peut aussi se demander pourquoi ce genre de fonction devrait être géré par un compositeur Wayland. Apple avait déjà réglé ça dans les années 90 avec ColorSync

  • C’était un cas où Claude était presque parfait, mais pas tout à fait
    J’ai comme hobby de retrouver des abandonwares pour Mac OS vieux de 20 ans et de les réparer pour qu’ils tournent sur Apple Silicon
    Par exemple, j’ai réussi à faire tourner jpegview avec Claude en trois modifications de code, puis j’y ai ajouté la lecture vidéo et de nouvelles fonctions de layout
    Ces mini-projets sont parfaits à mener avec une simple fenêtre de navigateur ouverte et une instance de code Claude à côté

    • On dirait que l’expression « c’était presque bon » est rare, mais en réalité ce genre de cas arrive assez souvent
    • À titre indicatif, j’ai commencé à utiliser un Mac récemment et Phoenix Slides était plutôt pas mal

  • À propos de l’idée selon laquelle il faudrait absolument « restaurer uniquement avec Claude », il existe d’autres méthodes
    Par exemple, on peut télécharger ce fichier d’archive et le conserver dans le cloud

  • Le positionnement absolu n’est arrivé qu’avec CSS2 (1998)
    Le site de Space Jam utilisait une mise en page par tableaux avec align, valign, colspan et rowspan

    • Merci. J’ai corrigé l’erreur et indiqué la source. Comme la blague continuait, je l’ai laissée pour le contexte
    • Ces tableaux étaient rendus différemment selon les réglages du navigateur, la taille de l’écran et la police
      C’était justement la nature originelle du Web, un hypertexte interprété

  • Je me demande si ce type de test a été essayé
    L’idée serait de calculer les rayons orbitaux des planètes et de vérifier avec un script de tests unitaires que chaque planète se trouve exactement sur son orbite

    • Quand on utilise un LLM pour une tâche complexe, on peut parfois avoir de la chance et obtenir le bon résultat du premier coup, mais la plupart du temps il faut des instructions explicites et des tests itératifs
      Au final, au lieu de continuer à surveiller le LLM, il est souvent plus rapide de le faire soi-même
    • Je n’ai pas essayé ce type de tests, mais c’est intéressant. Cela dit, Claude comme les bibliothèques ont du mal avec les distinctions au pixel près, donc ce serait compliqué
    • En fin de compte, on a essentiellement créé un « langage de programmation en anglais courant », en y consacrant 10 % de l’électricité mondiale et 40 % des semi-conducteurs
    • Si un agent peut vérifier lui-même son résultat, il peut itérer rapidement. Sinon, il y a un problème. Cela dit, ce projet est vraiment génial

  • Je me dis qu’on pourrait peut-être simplement donner à Claude le HTML original du site et lui demander de le « déchiffrer »
    Le site est assez petit pour que cela semble tout à fait faisable
    Le code source original et le rendu obtenu sont différents, mais Claude semble capable de gérer cet écart
    En fin de compte, recréer est peut-être une meilleure approche que copier

    • Le « HTML original », c’est justement le code source. Le développement web moderne semble avoir semé la confusion chez les plus jeunes
    • Si on a le HTML d’origine, il n’y a pas vraiment besoin de passer par tout ce processus
    • Ce HTML source fait environ 7 000 caractères, soit autour de 2 000 tokens Claude, donc c’est largement gérable
    • Le site de Space Jam était construit sans CSS, avec des tableaux et un découpage d’images

  • Il est intéressant d’avoir pris le site de Space Jam comme benchmark pour LLM
    Claude est presque arrivé au bon résultat, mais l’ordre était faux, et c’est le genre de chose qu’un humain peut corriger directement
    Personnellement, je préfère GitHub Copilot, moins cher et mieux intégré à GitHub

    • Mais le problème, c’est qu’un développeur débutant risque de ne pas remarquer un résultat incorrect. Ce type d’échec peut se reproduire ailleurs
    • Le point principal de cet article est que Claude surévalue sa capacité à reproduire au pixel près
    • Moi non plus, je n’ai pas fait beaucoup d’essais. En réalité, restaurer du HTML à partir d’une simple capture d’écran était une contrainte irréaliste
    • Si un outil exige la validation et la correction de l’utilisateur, ce n’est pas un bon outil

  • Claude est faible dans l’exploitation des captures d’écran
    C’est bien un modèle multimodal, mais sa force reste le traitement du texte

    • Il convertit les images en espace vectoriel sémantique plutôt qu’en grille de pixels, ce qui fait perdre l’information de pixel
      La bonne approche consiste à demander à Claude de créer ses propres outils de traitement d’image, puis de les utiliser pour calculer les coordonnées et exécuter les tests
      De cette manière, la stabilité des itérations et l’efficacité sont bien meilleures
    • Même en texte, comprendre une structure 2D est difficile. Par exemple, si on lui demande de dessiner un cercle en ASCII art avec un rayon exact, il n’y arrive pas bien

  • J’ai aussi essayé avec Claude des tests visuels de composants Storybook, mais les résultats n’étaient pas bons
    J’ai ensuite combiné le mode vision de Playwright avec Codex, mais la boucle de validation visuelle a fini par échouer
    J’ai résumé cela sur mon blog