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

Dit paper introduceert DOne, een end-to-end framework dat structuur en rendering ontkoppelt om de beperkingen van Vision Language Models bij Design-to-Code generatie te overwinnen, en presenteert HiFi2Code als een nieuw benchmark dat aanzienlijk betere resultaten behaalt in zowel visuele gelijkenis als productiviteit.

De kern

Stel je voor dat je een prachtige, complexe tekening van een huis maakt op papier. Je wilt dat een robot dit huis precies zo bouwt, steen voor steen, met de juiste ramen, deuren en kleuren.

In de wereld van software heet dit Design-to-Code: het omzetten van een plaatje (een ontwerp) in werkende code (HTML en CSS) voor een website.

Vroeger probeerden robots (AI-modellen) het hele plaatje in één keer te "lezen" en direct om te zetten. Dit liep vaak op een ramp uit. De robot werd overweldigd door de details, vergat de grote structuur, en het eindresultaat leek meer op een vervormde droom dan op het origineel. Ze noemen dit in het artikel de "holistische bottleneck" (een knelpunt waar alles in één keer moet).

De auteurs van dit paper, DOne, hebben een slimme oplossing bedacht. Ze zeggen: "Wacht even, laten we dit niet in één keer doen. Laten we het opsplitsen."

Hier is hoe DOne werkt, vertaald naar alledaagse taal:

1. De Architect (Layout Segmentation)

Stel je voor dat je een grote, rommelige kamer hebt die je moet inrichten. In plaats van direct te beginnen met meubels, kijkt de Architect eerst naar de kamer en tekent lijnen op de vloer.

• "Hier is de woonkamer, hier de keuken, en hier de gang."
• In het verleden deden robots dit met een schaar (heuristic cropping), wat vaak onnauwkeurig was. DOne gebruikt een geleerde architect die precies weet waar de muren en ruimtes zitten, zelfs bij heel complexe ontwerpen. Dit zorgt voor een stevige fundering.

2. De Verzamelaar (Visual Element Retrieval)

Nu de ruimtes zijn afgebakend, moet de Verzamelaar aan de slag. Hij loopt door de kamer en pakt elk losse object op: een vaas, een knop, een icoontje, een logo.

• Het probleem met eerdere robots was dat ze kleine, belangrijke dingen (zoals een klein logo) vaak vergeten waren of vervangen door een generieke "hier komt een plaatje"-placeholder.
• DOne gebruikt een hybride verzamelaar: één die goed is in grote dingen (zoals een navigatiestrip) en één die goed is in kleine, dichte dingen (zoals honderdjes icoontjes in een voettekst). Hij zorgt dat niets verloren gaat.

3. De Bouwplaat (Schema-Guided Generation)

Nu hebben we de ruimtes en de losse onderdelen. Maar hoe bouw je het nu?

• In plaats van dat de robot direct begint met zinnen te typen ("Maak een rode knop..."), laat DOne de robot eerst een bouwplaat (een schema) maken.
• Dit is een soort digitale blauwdruk: "De navigatie gaat in de bovenste ruimte, en het logo (dat we net hebben gevonden) gaat precies in het midden van die ruimte."
• Pas als deze blauwdruk klaar is, laat DOne de robot de daadwerkelijke code schrijven. Omdat de robot nu precies weet waar wat moet staan, hoeft hij niet meer te gissen.

Waarom is dit zo belangrijk?

Het paper introduceert ook een nieuwe test, genaamd HiFi2Code. Dit is als een zeer moeilijke examenopgave voor robots, met ontwerpen die veel complexer en voller zijn dan de oude tests.

De resultaten zijn indrukwekkend:

• Scherper beeld: De websites die DOne bouwt, lijken 10% meer op het origineel dan de beste andere robots.
• Minder fouten: Geen meer vervormde lay-outs of verdwenen logo's.
• Sneller werken: Menselijke ontwikkelaars die DOne gebruiken, zijn 3 keer sneller klaar met het bouwen van een website. Het is alsof je van een hamer en spijker overschakelt op een krachtige boormachine.

Kortom:
DOne is als het verschil tussen een kind dat probeert een kasteel te bouwen door alle blokken in één grote hoop te gooien, en een ervaren bouwmeester die eerst de plattegrond tekent, de stenen sorteert, en dan met precisie bouwt. Het resultaat is een kasteel dat er precies uitziet zoals op de tekening.

Technische samenvatting

Probleemstelling: De "Holistische Bottleneck"

Hoewel Vision Language Models (VLMs) veelbelovend zijn voor het genereren van code vanuit ontwerpen (Design-to-Code), kampen ze met een fundamenteel probleem: het "holistische bottleneck"-fenomeen. Bestaande methoden proberen vaak een complexe webpagina als één geheel te verwerken, wat leidt tot een compromis tussen het begrijpen van de hoog-niveau structuur en het reproduceren van fijne visuele details.

De auteurs identificeren drie specifieke faalmodi in huidige state-of-the-art methoden:

1. Foutieve Hiërarchie-analyse: Modellen interpreteren semantische relaties verkeerd (bijv. verwisselen van zijbalken met inhoudsblokken), wat resulteert in een gebrekkige documentstructuur.
2. Verlies van Fijne Visuele Elementen: Discrete assets zoals iconen en logo's worden vaak vervangen door generieke placeholders of genegeerd, wat de visuele authenticiteit ondermijnt.
3. Overbelasting bij Holistische Verwerking: Het verwerken van een complexe pagina als één monolithische afbeelding overstijgt de capaciteit van huidige VLMs, waardoor structurele integriteit wordt opgeofferd voor lokale details.

Methodologie: Het DOne Framework

Om deze beperkingen te overwinnen, stellen de auteurs DOne voor, een end-to-end framework dat structureel begrip ontkoppelt van element-rendering. De aanpak bestaat uit drie fasen:

1. Layout Segmentatie (Structuur):

   • In plaats van heuristische bijsnijding, gebruikt DOne een geleerd layout-segmentatiemodel (gebaseerd op RT-DETR) dat is getraind op een nieuw dataset genaamd WebSeg.
   • Dit model decomposeert de volledige pagina in semantisch betekenisvolle blokken (zoals headers, navigatiebalken, contentgebieden).
   • Een post-processing algoritme optimaliseert de detectie door overlappende regio's te verwijderen en de structuur coherent te houden.

2. Fijne Element Retrieval (Details):

   • Om de uitdagingen van extreme aspectverhoudingen en hoge dichtheid van UI-elementen aan te pakken, wordt een hybride detectiestrategie gebruikt.
   • Deze combineert DETR (voor globale context en grote structuren) met YOLOv10 (voor kleine, dichte elementen zoals iconen en knoppen).
   • Gedetecteerde elementen worden opgeslagen in een repository en later exact in de code geplaatst, wat voorkomt dat ze als placeholders worden behandeld.

3. Schema-Gestuurde Generatie (Synthese):

   • DOne introduceert een tussenlaag: een Layout Schema (een hiërarchische JSON-blueprint).
   • Het VLM genereert eerst dit schema op basis van de gesegmenteerde layout en gedetecteerde elementen.
   • Dit schema fungeert als een strikte structuurkader waaraan de uiteindelijke code (HTML/Tailwind CSS) moet voldoen. Hierdoor wordt de VLM gefocust op styling en asset-integratie, zonder de last van het afleiden van de hoog-niveau layout, wat "structurele hallucinaties" voorkomt.

Datasets en Evaluatie

Om de prestaties rigoureus te evalueren, introduceerden de auteurs twee nieuwe datasets:

• WebSeg: Een trainingsdataset van 30.000 ontwerpen met gedetailleerde semantische annotaties voor layout-segmentatie.
• HiFi2Code: Een evaluatiebenchmark van 200 moderne webpagina's met een aanzienlijk hogere complexiteit, elementdichtheid en visuele rijkdom dan bestaande datasets (zoals Design2Code en Web2Code).

Resultaten

Uitgebreide evaluaties op HiFi2Code tonen aan dat DOne aanzienlijk beter presteert dan bestaande methoden (zoals S2C, CoT2C en DCGen):

• Visuele Gelijkenis: DOne behaalt een CLIP Score van 0,7435 en een GPT Score van 0,723 (met Claude-3.7-Sonnet), wat een verbetering van meer dan 10% betekent ten opzichte van de beste concurrenten.
• Fijne Afstemming: DOne overtreft baselines in tekst-overlap, kleurmatch en positie-accuraatheid. Vooral de kleurmatch (0,4612 vs <0,07 bij baselines) toont aan dat DOne echte assets renderen in plaats van wireframes.
• Menselijke Evaluatie: Professionele ontwikkelaars en ontwerpers gaven DOne de voorkeur in 58,6% van de gevallen.
• Productiviteit: In een tijdsmeting bleek DOne de ontwikkelingstijd te reduceren van gemiddeld 9,81 minuten naar 3,18 minuten, een 3-voudige toename in productiviteit.

Bijdragen en Significantie

De belangrijkste bijdragen van dit werk zijn:

1. DOne Framework: Een innovatieve hiërarchische aanpak die layout-segmentatie, element-retrieval en schema-gestuurde generatie unificeert om de holistische bottleneck te doorbreken.
2. Nieuwe Datasets: De release van WebSeg en HiFi2Code om het tekort aan data voor complexe web-UI-taken aan te pakken en een realistischere evaluatie mogelijk te maken.
3. Empirisch Bewijs: Het aantonen dat het ontkoppelen van structuur en rendering essentieel is voor het genereren van productieklaar, visueel getrouwe code.

Conclusie:
DOne markeert een paradigmaverschuiving in Design-to-Code generatie. Door de complexiteit van een webpagina te decomponeren in beheersbare sub-taken (structuur vs. details) en deze te koppelen via een schema, slaagt het erin om zowel de macro-structuur als de micro-visuals van moderne interfaces nauwkeurig te reproduceren. Dit maakt het een krachtig hulpmiddel om de kloof tussen design en ontwikkeling te overbruggen.