LaTCoder: Het omzetten van webpaginadesign naar code met Layout-as-Thought

Samenvatting

Het omzetten van webpaginadesigns naar code (design-to-code) speelt een cruciale rol in de ontwikkeling van gebruikersinterfaces (UI) voor front-end ontwikkelaars, waarbij het de kloof overbrugt tussen visueel design en functionele implementatie. Hoewel recente Multimodale Large Language Models (MLLMs) aanzienlijk potentieel hebben getoond in design-to-code taken, slagen ze er vaak niet in om de lay-out nauwkeurig te behouden tijdens het genereren van code. Daarom putten we inspiratie uit de Chain-of-Thought (CoT) redenering in de menselijke cognitie en stellen we LaTCoder voor, een nieuwe aanpak die het behoud van de lay-out in webpaginadesigns tijdens het genereren van code verbetert met Layout-as-Thought (LaT). Specifiek introduceren we eerst een eenvoudig maar efficiënt algoritme om het webpaginadesign in beeldblokken te verdelen. Vervolgens gebruiken we een CoT-gebaseerde aanpak om MLLMs aan te sturen om code voor elk blok te genereren. Ten slotte passen we twee assemblagestrategieën toe - absolute positionering en een MLLM-gebaseerde methode - gevolgd door dynamische selectie om de optimale uitvoer te bepalen. We evalueren de effectiviteit van LaTCoder met behulp van meerdere backbone MLLMs (d.w.z. DeepSeek-VL2, Gemini en GPT-4o) op zowel een openbare benchmark als een nieuw geïntroduceerde, meer uitdagende benchmark (CC-HARD) die complexe lay-outs bevat. De experimentele resultaten op automatische metrieken tonen significante verbeteringen aan. Specifiek namen de TreeBLEU-scores met 66,67% toe en de MAE nam met 38% af bij het gebruik van DeepSeek-VL2, vergeleken met directe prompting. Bovendien geven de resultaten van de menselijke voorkeurevaluatie aan dat annotatoren in meer dan 60% van de gevallen de voorkeur geven aan de webpagina's die door LaTCoder zijn gegenereerd, wat sterk bewijs levert voor de effectiviteit van onze methode.

English

Converting webpage designs into code (design-to-code) plays a vital role in User Interface (UI) development for front-end developers, bridging the gap between visual design and functional implementation. While recent Multimodal Large Language Models (MLLMs) have shown significant potential in design-to-code tasks, they often fail to accurately preserve the layout during code generation. To this end, we draw inspiration from the Chain-of-Thought (CoT) reasoning in human cognition and propose LaTCoder, a novel approach that enhances layout preservation in webpage design during code generation with Layout-as-Thought (LaT). Specifically, we first introduce a simple yet efficient algorithm to divide the webpage design into image blocks. Next, we prompt MLLMs using a CoTbased approach to generate code for each block. Finally, we apply two assembly strategies-absolute positioning and an MLLM-based method-followed by dynamic selection to determine the optimal output. We evaluate the effectiveness of LaTCoder using multiple backbone MLLMs (i.e., DeepSeek-VL2, Gemini, and GPT-4o) on both a public benchmark and a newly introduced, more challenging benchmark (CC-HARD) that features complex layouts. The experimental results on automatic metrics demonstrate significant improvements. Specifically, TreeBLEU scores increased by 66.67% and MAE decreased by 38% when using DeepSeek-VL2, compared to direct prompting. Moreover, the human preference evaluation results indicate that annotators favor the webpages generated by LaTCoder in over 60% of cases, providing strong evidence of the effectiveness of our method.

LaTCoder: Het omzetten van webpaginadesign naar code met Layout-as-Thought

LaTCoder: Converting Webpage Design to Code with Layout-as-Thought

Samenvatting

Support