LaTCoder: Conversione del design di pagine web in codice con Layout-as-Thought

Abstract

La conversione di progetti di pagine web in codice (design-to-code) svolge un ruolo cruciale nello sviluppo dell'interfaccia utente (UI) per i front-end developer, colmando il divario tra design visivo e implementazione funzionale. Sebbene i recenti Modelli Linguistici Multimodali di Grande Scala (MLLMs) abbiano dimostrato un potenziale significativo nei compiti di design-to-code, spesso non riescono a preservare accuratamente il layout durante la generazione del codice. A tal fine, traiamo ispirazione dal ragionamento a Catena di Pensiero (Chain-of-Thought, CoT) nella cognizione umana e proponiamo LaTCoder, un approccio innovativo che migliora la conservazione del layout nel design delle pagine web durante la generazione del codice con Layout-as-Thought (LaT). Nello specifico, introduciamo innanzitutto un algoritmo semplice ma efficiente per suddividere il design della pagina web in blocchi di immagini. Successivamente, utilizziamo un approccio basato su CoT per stimolare gli MLLMs a generare codice per ciascun blocco. Infine, applichiamo due strategie di assemblaggio—posizionamento assoluto e un metodo basato su MLLM—seguite da una selezione dinamica per determinare l'output ottimale. Valutiamo l'efficacia di LaTCoder utilizzando più MLLMs di base (ad esempio, DeepSeek-VL2, Gemini e GPT-4o) sia su un benchmark pubblico che su un nuovo benchmark più impegnativo (CC-HARD) che presenta layout complessi. I risultati sperimentali sulle metriche automatiche dimostrano miglioramenti significativi. In particolare, i punteggi TreeBLEU sono aumentati del 66,67% e l'MAE è diminuito del 38% quando si utilizza DeepSeek-VL2, rispetto al prompting diretto. Inoltre, i risultati della valutazione delle preferenze umane indicano che gli annotatori preferiscono le pagine web generate da LaTCoder in oltre il 60% dei casi, fornendo una forte evidenza dell'efficacia del nostro metodo.

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: Conversione del design di pagine web in codice con Layout-as-Thought

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

Abstract

Support