GAUFRE : Modèle Multi-Modal pour le Développement Automatisé de l'Interface Utilisateur

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

October 24, 2024

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

cs.AI

Résumé

Le développement web consiste à transformer des conceptions d'interface utilisateur en pages web fonctionnelles, ce qui peut être difficile aussi bien pour les débutants que pour les développeurs expérimentés en raison de la complexité des structures hiérarchiques et des styles du HTML. Bien que les grands modèles de langage (LLMs) aient montré des promesses dans la génération de code source, deux défis majeurs persistent dans la génération de code UI-vers-HTML : (1) représenter efficacement la structure hiérarchique du HTML pour les LLMs, et (2) combler l'écart entre la nature visuelle des conceptions d'interface utilisateur et le format textuel du code HTML. Pour relever ces défis, nous introduisons Waffle, une nouvelle stratégie de fine-tuning qui utilise un mécanisme d'attention conscient de la structure pour améliorer la compréhension des LLMs de la structure du HTML et une approche de fine-tuning contrastive pour aligner la compréhension des LLMs des images d'interface utilisateur et du code HTML. Les modèles fine-tunés avec Waffle présentent jusqu'à 9,00 pp (point de pourcentage) de correspondance HTML supérieure, 0,0982 de CW-SSIM supérieur, 32,99 de CLIP supérieur, et 27,12 pp de LLEM supérieur sur notre nouveau banc d'essai WebSight-Test et un banc d'essai existant Design2Code, surpassant les méthodes actuelles de 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.