DOne: Decoupling Structure and Rendering for High-Fidelity Design-to-Code Generation

Le papier présente DOne, un cadre novateur qui découple la compréhension structurelle du rendu pour surmonter les limitations des modèles vision-langage dans la génération de code à partir de designs, démontrant une fidélité visuelle et une productivité supérieures grâce à un nouveau benchmark nommé HiFi2Code.

L'essentiel

🎨 DOne : Le Chef d'Orchestre qui Transforme un Dessin en Maison

Imaginez que vous êtes un architecte. Vous avez dessiné une magnifique maison sur un bout de papier (c'est le design). Maintenant, vous voulez que cette maison soit construite en vrai (c'est le code).

Jusqu'à présent, les robots (les intelligences artificielles) essayaient de regarder votre dessin d'un seul coup d'œil et de construire toute la maison d'un seul coup. Le résultat ? Souvent, c'était un désastre : les murs étaient tordus, les fenêtres étaient à l'envers, et les détails (comme la poignée de la porte) disparaissaient. C'est ce que les chercheurs appellent le "goulot d'étranglement global" : le robot essaie de tout faire en même temps et s'étouffe.

DOne est une nouvelle méthode qui change complètement la donne. Au lieu de demander au robot de tout faire d'un coup, DOne lui donne un plan de bataille en trois étapes, comme un chef d'orchestre qui dirige une symphonie.

🛠️ Les 3 Étapes Magiques de DOne

1. Le Découpeur de Gâteau (Segmentation de la mise en page)

• Le problème : Regarder une page web complexe d'un seul bloc, c'est comme essayer de manger un gâteau entier d'une seule bouchée. On ne voit pas les couches.
• La solution DOne : DOne utilise un "couteau magique" (un modèle d'apprentissage) pour découper votre dessin en gros morceaux logiques : le haut de page (header), la barre latérale, le contenu principal, le pied de page.
• L'analogie : C'est comme si, au lieu de regarder la maison entière, on séparait d'abord les pièces : "Voici la cuisine, voici le salon, voici la chambre". Cela permet au robot de ne pas se perdre dans le chaos.

2. Le Chasseur de Trésors (Récupération des éléments)

• Le problème : Les robots précédents avaient tendance à oublier les petits détails. Ils disaient "Voici un bouton" et dessinaient un carré gris vide, ou ils confondaient un logo avec un simple carré.
• La solution DOne : DOne envoie un détective spécialisé (un mélange de deux technologies de détection) pour chasser chaque petit objet : les icônes, les logos, les boutons précis, les petites images.
• L'analogie : Imaginez que vous construisez une maison. Au lieu de dire "il faut une fenêtre", DOne va chercher la vraie fenêtre dans votre stock, avec le bon verre et le bon cadre, et la garde de côté pour plus tard. Il ne laisse rien au hasard.

3. L'Architecte de Plan (Génération guidée par le schéma)

• Le problème : Même si le robot a les pièces, il ne sait pas toujours comment les assembler proprement. Il risque de mettre la porte de la cuisine dans le salon.
• La solution DOne : Avant d'écrire une seule ligne de code, DOne oblige le robot à dessiner un plan JSON (une sorte de liste de construction structurée). Ce plan dit : "Dans la pièce 'Salon', on met le 'Canapé' (qui est l'image 1) et la 'Table basse' (qui est l'image 2)".
• L'analogie : C'est comme donner au maçon un plan de construction détaillé avant qu'il ne pose la première brique. Le robot ne devine plus ; il suit un plan précis qui relie la structure (les murs) aux détails (les meubles).

🏆 Pourquoi c'est une révolution ?

Les chercheurs ont créé un nouveau défi, HiFi2Code, avec des designs très complexes et chargés, pour tester leurs idées.

• Avant : Les autres méthodes ressemblaient à un enfant qui dessine une maison : ça ressemble vaguement à une maison, mais les proportions sont fausses et les détails sont absents.
• Avec DOne : Le résultat est une réplique parfaite. Les développeurs humains ont confirmé que DOne leur fait gagner 3 fois plus de temps et que le résultat final est visuellement fidèle à l'original.

En résumé

DOne, c'est l'histoire d'un robot qui a appris à ne pas être pressé. Au lieu de sauter sur le résultat final, il :

1. Découpe le problème en petits morceaux gérables.
2. Trouve tous les petits détails manquants.
3. Planifie soigneusement l'assemblage avant de construire.

Grâce à cette approche, il transforme un simple dessin en un site web professionnel, précis et beau, sans laisser de place à l'erreur humaine ou aux oublis. C'est comme passer d'un croquis rapide à une maquette d'architecte parfaite.

Résumé technique

1. Problématique : Le Goulot d'Étranglement Holistique

Le domaine de la conversion Design-to-Code (transformation de maquettes visuelles en code HTML/CSS exécutable) a bénéficié de l'émergence des modèles de langage vision (VLM). Cependant, les méthodes actuelles, y compris les approches les plus avancées, souffrent d'un "goulot d'étranglement holistique".

Lorsqu'ils traitent une page complexe comme une image monolithique, les VLMs échouent à concilier deux niveaux d'information :

• La hiérarchie structurelle de haut niveau : La compréhension globale de la mise en page (en-têtes, barres latérales, contenu principal).
• Les détails visuels fins : La précision des éléments graphiques (icônes, logos, textes, couleurs).

Les résultats de l'état de l'art se traduisent souvent par :

1. Des erreurs de parsing hiérarchique : Confusion entre les sections (ex: une barre latérale interprétée comme du contenu).
2. La perte d'éléments visuels : Remplacement d'assets spécifiques par des espaces réservés génériques ou leur omission totale.
3. Une surcharge de traitement : Le sacrifice de l'intégrité structurelle pour tenter de capturer des détails locaux, ou inversement.

2. Méthodologie : Le Framework DOne

Pour surmonter ces limitations, les auteurs proposent DOne, un framework end-to-end qui découple la compréhension structurelle du rendu des éléments. L'approche repose sur une stratégie hiérarchique en trois étapes :

A. Segmentation de la Mise en Page Apprise (Layout Segmentation)

Au lieu d'utiliser un découpage heuristique ou de traiter la page entière, DOne utilise un modèle d'apprentissage profond (RT-DETR) entraîné sur un nouveau jeu de données nommé WebSeg.

• Fonction : Décomposer l'image de la page en blocs sémantiques significatifs (ex: en-tête, article, barre latérale).
• Optimisation : Un algorithme de post-traitement élimine les chevauchements et les boîtes redondantes pour garantir une structure DOM cohérente.
• Résultat : Cela brise le goulot d'étranglement holistique en fournissant une "carte" structurelle précise avant la génération de code.

B. Récupération Hybride des Éléments Visuels (Fine-Grained Element Retrieval)

Les composants UI présentent des défis uniques (rapports d'aspect extrêmes, haute densité d'icônes). DOne utilise une stratégie hybride combinant deux modèles de détection :

• DETR : Pour les structures définissant la mise en page (grands blocs contextuels) grâce à son mécanisme d'attention global.
• YOLOv10 : Pour les éléments denses et de petite taille (icônes, boutons) grâce à sa détection basée sur des ancres efficace.
• Fusion : Un système de sélection de classe assigne dynamiquement chaque élément détecté au modèle le plus approprié, assurant la préservation de tous les assets visuels.

C. Génération Guidée par le Schéma (Schema-Guided Generation)

Cette étape agit comme un pont entre la structure visuelle et le code.

1. Génération d'un Schéma JSON : Le VLM infère d'abord un plan hiérarchique (JSON) basé sur les segments et les éléments détectés. Ce schéma sert de "squelette" intermédiaire.
2. Synthèse de Code : Un second VLM utilise ce schéma pour générer le code HTML et CSS (Tailwind). Le schéma force le modèle à ancrer les éléments visuels récupérés dans leurs conteneurs sémantiques corrects, évitant ainsi les "hallucinations structurelles".

3. Contributions Clés

• Framework DOne : Une architecture unifiée combinant segmentation apprise, récupération d'éléments et génération guidée par schéma.
• WebSeg : Un nouveau jeu de données d'entraînement de 30 000 maquettes avec des annotations de régions sémantiques détaillées, conçu pour entraîner des modèles de segmentation de mise en page.
• HiFi2Code : Un nouveau benchmark d'évaluation composé de 200 pages web modernes, caractérisé par une complexité structurelle et une densité d'éléments bien supérieures aux jeux de données existants (comme Design2Code ou Web2Code).
• Preuve de concept : La démonstration que le découplage des tâches améliore significativement la fidélité visuelle et la productivité.

4. Résultats Expérimentaux

Les évaluations sur le benchmark HiFi2Code montrent que DOne surpasse les méthodes de l'état de l'art (S2C, CoT2C, DCGen) :

• Similarité Visuelle de Haut Niveau :
  • Score CLIP : DOne atteint 0.7435 (contre ~0.67 pour le meilleur concurrent).
  • Score GPT (Juge IA) : Amélioration de plus de 10 % par rapport aux méthodes existantes.
• Alignement Fin des Éléments :
  • DOne obtient des scores supérieurs en correspondance de texte, de blocs et de position.
  • Score de correspondance de couleur (Color Match) : DOne atteint 0.461, tandis que les méthodes concurrentes chutent en dessous de 0.07, prouvant que DOne rend les assets réels et non de simples wireframes.
• Évaluation Humaine :
  • Fidélité Visuelle : Dans une étude comparative, 58,6 % des développeurs et designers ont préféré DOne par rapport aux autres méthodes.
  • Productivité : L'utilisation de DOne réduit le temps de développement de 9,81 minutes à 3,18 minutes (un gain de productivité de 3x), tout en produisant un code visuellement plus fidèle.

5. Signification et Impact

L'article DOne marque une avancée significative dans l'automatisation du développement front-end. En reconnaissant que les modèles VLMs monolithiques ne peuvent pas gérer simultanément la complexité structurelle globale et les détails fins, les auteurs proposent une approche modulaire qui imite le processus de conception humaine (planification macroscopique suivie de l'exécution microscopique).

La libération des jeux de données WebSeg et HiFi2Code comble un vide critique dans la recherche, offrant des ressources pour entraîner et évaluer des systèmes capables de gérer des interfaces utilisateur réalistes et complexes. Ce travail établit un nouveau standard pour la génération de code haute fidélité, démontrant que la combinaison de la vision par ordinateur (détection) et du raisonnement structurel (schéma) est essentielle pour des applications de production.