WAFFLE: Modelo Multi-Modal para Desenvolvimento Automatizado de Front-End

WAFFLE: Multi-Modal Model for Automated Front-End Development

October 24, 2024

Autores: Shanchao Liang, Nan Jiang, Shangshu Qian, Lin Tan

cs.AI

Resumo

O desenvolvimento web envolve transformar designs de interface de usuário em páginas web funcionais, o que pode ser difícil tanto para iniciantes quanto para desenvolvedores experientes devido à complexidade das estruturas hierárquicas e estilos do HTML. Embora Modelos de Linguagem Grandes (LLMs) tenham mostrado promessa na geração de código-fonte, dois desafios principais persistem na geração de código UI-para-HTML: (1) representar efetivamente a estrutura hierárquica do HTML para LLMs e (2) preencher a lacuna entre a natureza visual dos designs de UI e o formato baseado em texto do código HTML. Para enfrentar esses desafios, apresentamos o Waffle, uma nova estratégia de ajuste fino que utiliza um mecanismo de atenção consciente da estrutura para melhorar a compreensão dos LLMs sobre a estrutura do HTML e uma abordagem de ajuste fino contrastante para alinhar a compreensão dos LLMs entre imagens de UI e código HTML. Modelos ajustados com o Waffle apresentam até 9,00 pp (ponto percentual) de correspondência HTML superior, 0,0982 de CW-SSIM superior, 32,99 de CLIP superior e 27,12 pp de LLEM superior em nosso novo benchmark WebSight-Test e em um benchmark existente Design2Code, superando os métodos atuais de ajuste fino.

English

Web development involves turning UI designs into functional webpages, which can be difficult for both beginners and experienced developers due to the complexity of HTML's hierarchical structures and styles. While Large Language Models (LLMs) have shown promise in generating source code, two major challenges persist in UI-to-HTML code generation: (1) effectively representing HTML's hierarchical structure for LLMs, and (2) bridging the gap between the visual nature of UI designs and the text-based format of HTML code. To tackle these challenges, we introduce Waffle, a new fine-tuning strategy that uses a structure-aware attention mechanism to improve LLMs' understanding of HTML's structure and a contrastive fine-tuning approach to align LLMs' understanding of UI images and HTML code. Models fine-tuned with Waffle show up to 9.00 pp (percentage point) higher HTML match, 0.0982 higher CW-SSIM, 32.99 higher CLIP, and 27.12 pp higher LLEM on our new benchmark WebSight-Test and an existing benchmark Design2Code, outperforming current fine-tuning methods.