WAFFLE: Multi-Modaal Model voor Geautomatiseerde Front-End Ontwikkeling

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

October 24, 2024

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

cs.AI

Samenvatting

Webontwikkeling houdt in dat UI-ontwerpen worden omgezet in functionele webpagina's, wat zowel voor beginners als ervaren ontwikkelaars moeilijk kan zijn vanwege de complexiteit van de hiërarchische structuren en stijlen van HTML. Hoewel Grote Taalmodellen (LLM's) veelbelovend zijn gebleken in het genereren van broncode, blijven er twee belangrijke uitdagingen bestaan bij het genereren van UI-naar-HTML-code: (1) het effectief representeren van de hiërarchische structuur van HTML voor LLM's, en (2) het overbruggen van de kloof tussen de visuele aard van UI-ontwerpen en het op tekst gebaseerde formaat van HTML-code. Om deze uitdagingen aan te pakken, introduceren we Waffle, een nieuwe fine-tuning strategie die een structuur-bewust aandachtsmechanisme gebruikt om het begrip van LLM's van de structuur van HTML te verbeteren en een contrastieve fine-tuning benadering om het begrip van LLM's van UI-afbeeldingen en HTML-code op elkaar af te stemmen. Modellen die zijn gefinetuned met Waffle vertonen tot 9,00 pp (percentagepunt) hogere HTML-match, 0,0982 hogere CW-SSIM, 32,99 hogere CLIP en 27,12 pp hogere LLEM op onze nieuwe benchmark WebSight-Test en een bestaande benchmark Design2Code, waarbij ze de huidige fine-tuning methoden overtreffen.

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.