WAFFLE: Multimodales Modell für die automatisierte Front-End-Entwicklung

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

October 24, 2024

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

cs.AI

Zusammenfassung

Die Webentwicklung beinhaltet die Umsetzung von UI-Designs in funktionale Webseiten, was sowohl für Anfänger als auch erfahrene Entwickler aufgrund der Komplexität der hierarchischen Strukturen und Stile von HTML schwierig sein kann. Obwohl Large Language Models (LLMs) vielversprechend bei der Generierung von Quellcode sind, bestehen weiterhin zwei Hauptprobleme bei der Generierung von UI-zu-HTML-Code: (1) die effektive Darstellung der hierarchischen Struktur von HTML für LLMs und (2) die Überbrückung der Kluft zwischen der visuellen Natur von UI-Designs und dem textbasierten Format des HTML-Codes. Um diese Herausforderungen anzugehen, stellen wir Waffle vor, eine neue Feinabstimmungsstrategie, die einen strukturbewussten Aufmerksamkeitsmechanismus verwendet, um das Verständnis von LLMs für die Struktur von HTML zu verbessern, sowie einen kontrastiven Feinabstimmungsansatz, um das Verständnis von LLMs für UI-Bilder und HTML-Code in Einklang zu bringen. Modelle, die mit Waffle feinabgestimmt wurden, zeigen auf unserem neuen Benchmark WebSight-Test und einem bestehenden Benchmark Design2Code bis zu 9,00 Prozentpunkte höhere HTML-Übereinstimmung, 0,0982 höhere CW-SSIM, 32,99 höhere CLIP und 27,12 Prozentpunkte höheres LLEM und übertreffen damit aktuelle Feinabstimmungsmethoden.

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.