WAFFLE: Modello Multi-Modale per lo Sviluppo Automatico del Front-End

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

October 24, 2024

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

cs.AI

Abstract

Lo sviluppo web comporta trasformare i design dell'interfaccia utente in pagine web funzionali, il che può risultare difficile sia per i principianti che per gli sviluppatori esperti a causa della complessità delle strutture gerarchiche e degli stili dell'HTML. Sebbene i Grandi Modelli Linguistici (LLM) abbiano dimostrato promesse nella generazione di codice sorgente, due sfide principali persistono nella generazione di codice UI-in-HTML: (1) rappresentare efficacemente la struttura gerarchica dell'HTML per i LLM, e (2) colmare il divario tra la natura visiva dei design dell'interfaccia utente e il formato basato su testo del codice HTML. Per affrontare tali sfide, presentiamo Waffle, una nuova strategia di fine-tuning che utilizza un meccanismo di attenzione consapevole della struttura per migliorare la comprensione dei LLM della struttura dell'HTML e un approccio di fine-tuning contrastivo per allineare la comprensione dei LLM delle immagini UI e del codice HTML. I modelli sintonizzati con Waffle mostrano fino a 9,00 pp (punti percentuali) di corrispondenza HTML superiore, 0,0982 di CW-SSIM superiore, 32,99 di CLIP superiore e 27,12 pp di LLEM superiore nel nostro nuovo benchmark WebSight-Test e in un benchmark esistente Design2Code, superando i metodi attuali di fine-tuning.

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.