WAFFLE: Finetuning Multi-Modal Model for Automated Front-End Development
作者: Shanchao Liang, Nan Jiang, Shangshu Qian, Lin Tan
分类: cs.SE, cs.CL, cs.CV
发布日期: 2024-10-24 (更新: 2025-06-24)
💡 一句话要点
WAFFLE：微调多模态模型，实现自动化前端开发
🎯 匹配领域: 支柱九：具身大模型 (Embodied Foundation Models)
关键词: 自动化前端开发 UI到HTML代码生成 多模态学习 对比学习 结构感知注意力 大型语言模型 代码生成
📋 核心要点
- 现有UI到HTML代码生成方法难以有效表示HTML的层级结构，且视觉信息与文本代码之间存在鸿沟。
- Waffle采用结构感知注意力机制增强LLM对HTML结构的理解，并使用对比微调对齐UI图像和HTML代码。
- 实验表明，Waffle在HTML匹配度、图像相似性(CW-SSIM)、CLIP相似度和LLEM指标上均显著优于现有方法。
📝 摘要（中文）
Web开发涉及将UI设计转化为功能性网页，由于HTML层级结构和样式的复杂性，对于初学者和经验丰富的开发者来说都具有挑战性。虽然大型语言模型（LLM）在生成源代码方面显示出潜力，但在UI到HTML代码生成中仍然存在两个主要挑战：（1）如何有效地表示HTML的层级结构以供LLM理解；（2）如何弥合UI设计的视觉特性与HTML代码的文本格式之间的差距。为了应对这些挑战，我们提出了一种新的微调策略Waffle，它使用结构感知注意力机制来提高LLM对HTML结构的理解，并使用对比微调方法来对齐LLM对UI图像和HTML代码的理解。在使用Waffle进行微调的模型在我们的新基准WebSight-Test和现有基准Design2Code上，HTML匹配度提高了9.00个百分点，CW-SSIM提高了0.0982，CLIP提高了32.99，LLEM提高了27.12个百分点，优于当前的微调方法。
🔬 方法详解
问题定义：论文旨在解决UI设计到HTML代码自动生成的难题。现有方法在处理HTML的层级结构和视觉-文本模态对齐方面存在不足，导致生成的代码质量不高，与原始设计存在偏差。现有方法难以有效捕捉HTML的结构信息，并且无法很好地将UI图像的视觉信息与HTML代码的文本信息对齐。
核心思路：Waffle的核心思路是利用结构感知注意力机制和对比微调方法，增强LLM对HTML结构的理解，并对齐UI图像和HTML代码的表示。通过结构感知注意力，模型能够更好地理解HTML标签之间的层级关系。通过对比微调，模型能够学习到UI图像和对应HTML代码之间的关联性，从而生成更准确的代码。
技术框架：Waffle的整体框架包括两个主要部分：结构感知注意力机制和对比微调。结构感知注意力机制被集成到LLM中，用于处理HTML代码。对比微调则通过最小化UI图像和对应HTML代码之间的距离，最大化UI图像和非对应HTML代码之间的距离，来对齐两种模态的表示。整个流程首先使用结构感知注意力机制编码HTML，然后使用对比学习目标函数微调模型，使其能够更好地理解UI图像和HTML代码之间的关系。
关键创新：Waffle的关键创新在于结构感知注意力机制和对比微调方法的结合。结构感知注意力机制能够有效地捕捉HTML的层级结构信息，而对比微调方法能够有效地对齐UI图像和HTML代码的表示。这种结合使得模型能够更好地理解UI设计，并生成更准确的HTML代码。
关键设计：在结构感知注意力机制中，论文可能使用了某种形式的位置编码或图神经网络来表示HTML的层级结构。在对比微调中，论文可能使用了InfoNCE损失函数或其他对比学习损失函数。具体的网络结构和参数设置在论文中应该有详细描述，但摘要中未提及。
🖼️ 关键图片
📊 实验亮点
实验结果表明，Waffle在WebSight-Test和Design2Code两个基准测试集上均取得了显著的性能提升。具体来说，HTML匹配度提高了9.00个百分点，CW-SSIM提高了0.0982，CLIP提高了32.99，LLEM提高了27.12个百分点，表明Waffle能够生成更准确、更符合原始设计的HTML代码。
🎯 应用场景
Waffle可应用于自动化前端开发流程，降低Web开发的门槛，提高开发效率。它可以帮助开发者快速将UI设计转化为可用的HTML代码，减少手动编写代码的工作量。未来，该技术有望集成到各种UI设计工具和代码生成平台中，实现更智能化的Web开发。
📄 摘要（原文）
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.