LaTCoder: Conversión de Diseño de Páginas Web a Código con Layout-as-Thought

Resumen

La conversión de diseños de páginas web en código (diseño-a-código) desempeña un papel crucial en el desarrollo de Interfaces de Usuario (UI) para desarrolladores front-end, cerrando la brecha entre el diseño visual y la implementación funcional. Aunque los Modelos de Lenguaje Multimodal (MLLMs) recientes han mostrado un potencial significativo en tareas de diseño-a-código, a menudo fallan en preservar con precisión el diseño durante la generación de código. Para abordar esto, nos inspiramos en el razonamiento de Cadena de Pensamiento (CoT) en la cognición humana y proponemos LaTCoder, un enfoque novedoso que mejora la preservación del diseño en la generación de código de páginas web mediante Diseño-como-Pensamiento (LaT). Específicamente, primero introducimos un algoritmo simple pero eficiente para dividir el diseño de la página web en bloques de imagen. Luego, utilizamos un enfoque basado en CoT para generar código para cada bloque mediante MLLMs. Finalmente, aplicamos dos estrategias de ensamblaje—posicionamiento absoluto y un método basado en MLLM—seguido de una selección dinámica para determinar la salida óptima. Evaluamos la efectividad de LaTCoder utilizando múltiples MLLMs base (es decir, DeepSeek-VL2, Gemini y GPT-4o) tanto en un benchmark público como en un nuevo y más desafiante benchmark (CC-HARD) que presenta diseños complejos. Los resultados experimentales en métricas automáticas demuestran mejoras significativas. Específicamente, las puntuaciones de TreeBLEU aumentaron en un 66.67% y el MAE disminuyó en un 38% al utilizar DeepSeek-VL2, en comparación con el enfoque de indicación directa. Además, los resultados de la evaluación de preferencia humana indican que los anotadores prefieren las páginas web generadas por LaTCoder en más del 60% de los casos, proporcionando una evidencia sólida de la efectividad de nuestro método.

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: Conversión de Diseño de Páginas Web a Código con Layout-as-Thought

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

Resumen

Support