WAFFLE: Modelo Multi-Modal para el Desarrollo 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

Resumen

El desarrollo web implica convertir diseños de interfaz de usuario en páginas web funcionales, lo cual puede resultar difícil tanto para principiantes como para desarrolladores experimentados debido a la complejidad de las estructuras jerárquicas y estilos de HTML. Aunque los Modelos de Lenguaje Grande (LLMs, por sus siglas en inglés) han demostrado ser prometedores en la generación de código fuente, dos desafíos principales persisten en la generación de código de UI a HTML: (1) representar de manera efectiva la estructura jerárquica de HTML para los LLMs, y (2) cerrar la brecha entre la naturaleza visual de los diseños de UI y el formato basado en texto del código HTML. Para abordar estos desafíos, presentamos Waffle, una nueva estrategia de ajuste fino que utiliza un mecanismo de atención consciente de la estructura para mejorar la comprensión de los LLMs sobre la estructura de HTML, y un enfoque de ajuste fino contrastivo para alinear la comprensión de los LLMs entre las imágenes de UI y el código HTML. Los modelos ajustados con Waffle muestran hasta un 9.00 pp (punto porcentual) más de coincidencia en HTML, 0.0982 más alto en CW-SSIM, 32.99 más alto en CLIP, y 27.12 pp más alto en LLEM en nuestro nuevo banco de pruebas WebSight-Test y en un banco de pruebas existente Design2Code, superando a los métodos actuales 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.