LaTCoder: Convertendo Design de Páginas da Web em Código com Layout-como-Pensamento

Resumo

A conversão de designs de páginas da web em código (design-to-code) desempenha um papel vital no desenvolvimento de Interface do Usuário (UI) para desenvolvedores front-end, servindo como ponte entre o design visual e a implementação funcional. Embora os recentes Modelos de Linguagem Multimodal de Grande Escala (MLLMs) tenham mostrado um potencial significativo em tarefas de design-to-code, eles frequentemente falham em preservar com precisão o layout durante a geração de código. Para isso, inspiramo-nos no raciocínio Chain-of-Thought (CoT) da cognição humana e propomos o LaTCoder, uma abordagem inovadora que melhora a preservação do layout no design de páginas da web durante a geração de código com o Layout-as-Thought (LaT). Especificamente, primeiro introduzimos um algoritmo simples, porém eficiente, para dividir o design da página da web em blocos de imagem. Em seguida, solicitamos aos MLLMs, usando uma abordagem baseada em CoT, que gerem código para cada bloco. Por fim, aplicamos duas estratégias de montagem—posicionamento absoluto e um método baseado em MLLM—seguidas por uma seleção dinâmica para determinar a saída ideal. Avaliamos a eficácia do LaTCoder usando múltiplos MLLMs de base (ou seja, DeepSeek-VL2, Gemini e GPT-4o) tanto em um benchmark público quanto em um novo e mais desafiador benchmark (CC-HARD) que apresenta layouts complexos. Os resultados experimentais em métricas automáticas demonstram melhorias significativas. Especificamente, os escores TreeBLEU aumentaram em 66,67% e o MAE diminuiu 38% ao usar o DeepSeek-VL2, em comparação com a solicitação direta. Além disso, os resultados da avaliação de preferência humana indicam que os anotadores preferem as páginas da web geradas pelo LaTCoder em mais de 60% dos casos, fornecendo evidências robustas da eficácia do nosso 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: Convertendo Design de Páginas da Web em Código com Layout-como-Pensamento

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

Resumo

Support