WAFFLE: 自動フロントエンド開発のためのマルチモーダルモデル

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

October 24, 2024

著者: Shanchao Liang, Nan Jiang, Shangshu Qian, Lin Tan

cs.AI

要旨

Web開発は、UIデザインを機能的なWebページに変換することを含みます。これは、HTMLの階層構造とスタイルの複雑さにより、初心者から経験豊富な開発者までにとって困難な場合があります。大規模言語モデル（LLMs）は、ソースコードの生成において有望性を示していますが、UIからHTMLコードへの変換には2つの主要な課題が残っています。それは、（1）LLMsにとってHTMLの階層構造を効果的に表現すること、および（2）UIデザインの視覚的性質とHTMLコードのテキストベースの形式との間のギャップを埋めることです。これらの課題に取り組むために、私たちはWaffleを導入します。Waffleは、新しいファインチューニング戦略であり、構造を認識する注意メカニズムを使用してLLMsがHTMLの構造を理解する能力を向上させ、UI画像とHTMLコードの理解を整合させるための対照的なファインチューニングアプローチを採用しています。Waffleでファインチューニングされたモデルは、当社の新しいベンチマークWebSight-Testおよび既存のベンチマークDesign2Codeにおいて、最大9.00 pp（パーセンテージポイント）のHTML一致率、0.0982の高いCW-SSIM、32.99の高いCLIP、および27.12 ppの高いLLEMを示し、現行のファインチューニング手法を凌駕しています。

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.