Vision2Web: A Hierarchical Benchmark for Visual Website Development with Agent Verification

Le papier présente Vision2Web, un benchmark hiérarchique évaluant les capacités des agents de codage à développer des sites web visuels complexes, depuis la génération d'interface jusqu'au développement full-stack, en utilisant une nouvelle méthode de vérification combinant un agent GUI et un juge basé sur un modèle de langage visuel.

L'essentiel

Imaginez que vous demandez à un architecte très intelligent (une intelligence artificielle) de construire une maison, mais avec une contrainte étrange : vous ne lui donnez pas de plans détaillés, juste une photo de la façade que vous voulez, et vous attendez qu'il construise non seulement la façade, mais aussi les tuyaux, l'électricité et les meubles, le tout en respectant scrupuleusement votre photo.

C'est exactement le défi que pose le papier Vision2Web. Voici une explication simple de ce projet, imagée pour mieux comprendre.

🏗️ Le Problème : Des Architectes qui perdent le fil

Jusqu'à présent, on testait les "architectes" (les IA de codage) sur des tâches simples : "Répare cette petite fissure dans le mur" ou "Peins cette fenêtre". C'est bien, mais ça ne nous dit pas si l'IA est capable de construire un gratte-ciel entier, de gérer les ascenseurs et de s'assurer que la cuisine est bien reliée à la salle de bain.

Les chercheurs ont réalisé qu'il manquait un terrain d'entraînement complet pour tester ces IA sur la création de sites web réels, du dessin à la mise en ligne.

🎯 La Solution : Vision2Web, le "Parc d'Attractions" des IA

Les auteurs ont créé Vision2Web, qui est comme un parcours d'obstacles en trois niveaux de difficulté, conçu pour tester la capacité d'une IA à transformer une image en un site web fonctionnel.

Niveau 1 : Le Dessin (La Façade)

C'est le niveau "Facile". On donne à l'IA une photo d'une page web (comme un dessin d'architecte) et elle doit reproduire exactement ce dessin en code.

• L'analogie : C'est comme si l'IA devait copier un dessin de Lego à l'identique. Si le dessin a une fenêtre bleue, l'IA doit mettre une brique bleue. Pas de mouvement, juste de la beauté visuelle.

Niveau 2 : Le Jeu (L'Interactivité)

C'est le niveau "Moyen". On donne plusieurs photos de différentes pages et on dit : "Voici comment elles sont reliées". L'IA doit créer un site où l'on peut cliquer, naviguer d'une page à l'autre, et où tout reste cohérent.

• L'analogie : C'est comme passer d'un dessin statique à un jeu vidéo. L'IA doit s'assurer que si vous cliquez sur "Menu", le menu s'ouvre, et que si vous allez sur la page "Contact", vous n'êtes pas perdu. Elle doit gérer les liens entre les pièces de la maison.

Niveau 3 : L'Usine (Le Plein Potentiel)

C'est le niveau "Expert". On donne des photos, mais aussi un cahier des charges complexe (des documents textuels). L'IA doit construire tout le site, y compris la base de données (le coffre-fort où sont stockées les infos), la sécurité, et tout ce qui se passe "sous le capot".

• L'analogie : C'est là que l'IA doit être à la fois architecte, électricien, plombier et gardien de sécurité. Elle doit construire une usine entière qui fonctionne, pas juste une jolie façade.

🔍 Comment on vérifie si c'est réussi ? (Le Système de Contrôle)

Le plus génial de ce papier, c'est comment ils vérifient le travail. Ils ne regardent pas juste si le code est écrit. Ils utilisent deux "inspecteurs" robotiques :

1. L'Inspecteur Humain (L'Agent GUI) : C'est un robot qui navigue sur le site créé comme un humain. Il clique partout, remplit des formulaires, essaie de se connecter. Il vérifie : "Est-ce que ça marche ? Est-ce que le bouton 'Acheter' enlève vraiment l'objet du panier ?"
2. L'Inspecteur Artistique (Le Juge VLM) : C'est une autre IA très visuelle qui compare le site créé avec la photo originale. Elle dit : "Tiens, ce bouton est un peu trop rouge" ou "La police d'écriture n'est pas tout à fait la même".

C'est comme avoir un inspecteur technique et un critique d'art qui travaillent ensemble pour noter le site.

📉 Ce qu'ils ont découvert (Les Résultats)

Ils ont testé les meilleures IA du monde (comme Claude, Gemini, GPT-5) sur ce parcours. Voici ce qu'ils ont vu :

• La chute de performance : Plus le niveau est haut, plus l'IA rate. Elles sont excellentes pour copier un dessin (Niveau 1), moyennes pour naviguer (Niveau 2), mais elles s'effondrent souvent quand il faut gérer une usine entière (Niveau 3).
• Le problème de la "mémoire" : Les IA oublient vite. Quand elles construisent la page 5, elles ont souvent oublié ce qu'elles ont fait sur la page 1.
• Le problème du "téléphone arabe" : Plus le site est complexe, plus l'IA se trompe sur les détails visuels. Elle construit une maison solide, mais avec des fenêtres de la mauvaise couleur.

💡 En résumé

Vision2Web est un nouveau test de conduite pour les voitures autonomes (les IA de codage). Avant, on testait juste si la voiture savait s'arrêter au feu rouge. Maintenant, on lui demande de traverser la ville, de gérer le trafic, de trouver un parking et de s'assurer que le passager est à l'aise.

Le message principal est : Nous avons des IA très douces pour le dessin, mais elles ne sont pas encore prêtes à construire des systèmes complexes et complets seules. Il faut encore beaucoup travailler pour qu'elles deviennent de véritables ingénieurs autonomes.

Résumé technique

1. Problématique

Bien que les récents progrès des modèles de langage (LLM) aient considérablement amélioré les capacités des agents de codage autonomes, l'évaluation systématique du développement de sites web complexes et de bout en bout reste limitée. Les benchmarks existants souffrent de trois lacunes majeures :

• Formulation de tâches limitée : Des benchmarks comme SWE-Bench se concentrent sur des corrections de code incrémentielles (issue-driven) plutôt que sur le développement logiciel holistique.
• Couverture multimodale inadaptée : Les benchmarks multimodaux actuels (ex: Design2Code) sont souvent restreints à la reproduction statique de pages uniques, négligeant les interactions complexes et le développement full-stack.
• Mécanismes de vérification insuffisants : L'évaluation des interactions complexes et des résultats à long terme manque de fiabilité en raison de définitions de tâches imprécises et de procédures de vérification peu contraintes.

Il existe un besoin urgent d'un benchmark capable d'évaluer les agents multimodaux sur le cycle de vie complet du développement web, en intégrant la compréhension visuelle, les exigences textuelles et la construction de codebases.

2. Méthodologie : Vision2Web

Pour combler ces lacunes, les auteurs introduisent Vision2Web, un benchmark hiérarchique conçu autour de trois principes clés : la dissociation des capacités, la construction de tâches vérifiables et une évaluation automatisée fiable.

A. Formulation des Tâches Hiérarchiques

Le benchmark organise les tâches en trois niveaux de complexité croissante, permettant de dissocier les capacités de l'agent à chaque étape :

1. Niveau 1 : Page Web Statique. Évaluation de la capacité à interpréter des prototypes UI (bureau, tablette, mobile) et à générer du code statique fidèle au design.
2. Niveau 2 : Frontend Interactif. Génération d'un frontend multi-pages interactif à partir de plusieurs prototypes et de descriptions textuelles, évaluant la cohérence structurelle et la navigation.
3. Niveau 3 : Site Web Full-Stack. Simulation de scénarios d'ingénierie réels avec des documents de exigences structurés. L'agent doit gérer des états d'application complexes, effectuer un débogage intégré et livrer un système complet (frontend + backend + base de données).

B. Construction du Dataset

• Source : Les tâches sont extraites de sites web réels (via le jeu de données C4) pour éviter les fuites de données et assurer la diversité.
• Pipeline de filtrage : Un processus en trois étapes (évaluation structurelle, filtrage de contenu par VLM, revue manuelle) garantit la qualité.
• Statistiques : Le benchmark comprend 193 tâches réparties en 16 sous-catégories, avec 918 images de prototypes et 1 255 cas de test.

C. Paradigme de Vérification par Agent (Workflow-Based Agent Verification)

Pour surmonter les limites des tests unitaires traditionnels et des comparaisons de pixels, Vision2Web propose un paradigme de vérification basé sur des flux de travail (workflows) :

• Structure : Les tests sont modélisés comme un graphe de dépendances dirigé, où chaque nœud est une sous-procédure de vérification autonome.
• Deux types de nœuds de vérification :
  1. Vérificateur d'Agent GUI (Fonctionnel) : Un agent autonome (basé sur WebVoyager) exécute des flux de travail guidés pour vérifier la justesse fonctionnelle et l'interactivité. Il produit un Functional Score (FS).
  2. Juge basé sur VLM (Visuel) : Un modèle de langage vision (VLM) compare les pages rendues aux prototypes de référence pour évaluer la fidélité visuelle au niveau des composants. Il produit un Visual Score (VS).
• Avantage : Cette approche combine la flexibilité des agents avec la reproductibilité des workflows structurés, permettant une évaluation objective sans sacrifier la complexité des interactions.

3. Contributions Clés

1. Conception de Tâches Hiérarchique : Une formulation qui dissocie systématiquement les capacités des agents (de la compréhension visuelle fine à la construction systémique holistique).
2. Données Multimodales Réalistes : Un benchmark à grande échelle ancré dans des sites web réels avec des spécifications explicites, permettant une évaluation sous contraintes multimodales réalistes.
3. Vérification par Agent Basée sur les Workflows : Un paradigme d'évaluation reproductible et agnostique à l'implémentation, combinant des flux de travail structurés et l'exécution par agent pour mesurer simultanément la justesse fonctionnelle et la fidélité visuelle.

4. Résultats Expérimentaux

Les auteurs ont évalué huit modèles multimodaux de pointe (incluant Claude-Opus-4.5, Gemini-3-Pro, GPT-5, Qwen3-VL) intégrés dans deux frameworks d'agents (OpenHands et Claude Code).

Principales observations :

• Dégradation des performances avec la complexité : Les performances chutent drastiquement à mesure que les tâches passent du statique au full-stack. Même les meilleurs modèles (ex: Gemini-3-Pro) voient leurs scores visuels et fonctionnels s'effondrer sur les tâches full-stack.
• Limites des petits formats et de la complexité visuelle : Les agents peinent à s'adapter aux interfaces mobiles/tablettes et aux prototypes visuellement denses.
• Supériorité de Claude-Opus-4.5 : Ce modèle obtient systématiquement les meilleurs résultats, surpassant nettement les alternatives sur les tâches complexes, bien qu'il montre encore des limites sur le développement full-stack.
• Impact du Framework : Le choix du framework d'agent (OpenHands vs Claude Code) influence significativement les résultats, suggérant un besoin d'optimisation conjointe modèle-framework.
• Difficultés par catégorie : Les sites de type "SaaS" (navigation multi-pages, interactions complexes) sont les plus difficiles, tandis que les sites de services publics (structure simple) sont mieux gérés.
• Échecs spécifiques : Les agents échouent principalement sur la gestion d'état persistante, les opérations CRUD complexes, et la coordination entre logique frontend et ressources système.

Validation des vérificateurs :

• Le vérificateur d'agent GUI atteint une précision de 87,2 % par rapport aux annotations humaines.
• Le juge VLM montre une forte corrélation de rang avec les préférences humaines (Spearman ρ = 0,66), validant la fiabilité de l'évaluation visuelle automatisée.

5. Signification et Impact

Vision2Web établit un nouveau standard pour l'évaluation des agents de codage multimodaux. Ses résultats démontrent que la performance sur des tâches isolées ne se généralise pas au développement de systèmes de bout en bout.

• Pour la recherche : Le benchmark met en évidence des lacunes fondamentales dans le raisonnement cross-modal, la planification à long horizon et la coordination multi-pages.
• Pour l'avenir : Il appelle à un changement de paradigme vers des designs de tâches hiérarchiques et progressivement plus difficiles, ainsi que vers des paradigmes d'évaluation autonome reproductibles et rigoureux.
• Éthique : Le benchmark est construit à partir de ressources publiques et ouvertes, sans données sensibles, visant uniquement la recherche académique.

En conclusion, Vision2Web fournit une base solide pour comprendre les limites actuelles des agents IA dans le développement logiciel visuel et oriente les futures recherches vers l'amélioration de la robustesse et de la capacité de planification des agents autonomes.