AwesomeREA.org

2025 · 会议论文

WAFFLE：面向自动化前端开发的多模态模型微调

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

Shanchao Liang; Nan Jiang; Shangshu Qian; Lin Tan

WAFFLE 微调多模态大语言模型，使其根据界面截图生成 HTML/CSS。解码器中四分之一的注意力头使用结构感知掩码，使每个元素的词元只关注其父元素、前序兄弟元素及自身此前的词元。对比学习目标以四个经变异的 WebSight-v0.1 页面为一组，对齐图像与代码嵌入。以 VLM-WebSight 和 Moondream2 为骨干模型时，作者报告在 WebSight-Test 上比标准微调最多高 9.00 个百分点的 HTML-Match 和 0.0982 的 CW-SSIM，在 Design2Code 的各项指标上也均有提升。

研究范围与局限

方法根据单张截图生成静态 HTML/CSS，并不恢复网站原始源码、脚本、交互、导航或后端。HTML-Match 先去除样式和属性，再要求渲染结果逐像素一致；CW-SSIM、CLIP 与 LLEM 则是相似度分数，作者也指出这些指标不能完全反映人工判断。训练数据及含 500 个页面的 WebSight-Test 均为合成的 WebSight 风格页面；Design2Code 提供 484 个真实网页。仅微调了两种骨干模型；在 Design2Code 上，经 WAFFLE 训练的 Moondream2 模型仍低于 GPT-4o 和 GPT-4o mini。Gemini 1.5 Pro 基线只回答了 384 个 Design2Code 实例。人工排序每个数据集使用 50 个样本，由两名标注者完成。商业模型的提示结果是历史基线，并非当前排名。

与本合集的关联

补充一种将 DOM 层级结构引入注意力机制、用于截图到 HTML 网站重建的训练方法，与本合集中的截图转代码基准、数据集及提示流程互补。

发表与复核详情

发表载体
ACL 2025
发表状态
会议论文
出版／提交日期
2025 年 7 月
日期依据
ACL Anthology 官方记录给出 2025 年 7 月。Crossref 仅记录年份；PDF 所印 7 月 27 日至 8 月 1 日的会议日期不作为出版日。
arXiv 首次提交
2024 年 10 月 24 日
arXiv
2410.18362
已复核的 arXiv 版本
v3
DOI
10.18653/v1/2025.acl-long.1208

出版身份以 ACL Anthology 记录与 PDF 为准。所审阅的 2026-03-02 arXiv v3（v1 为 2024-10-24，v2 为 2025-06-24）题为“WAFFLE: Finetuning Multi-Modal Models for Automated Front-End Development”；仓库 README 和模型卡则使用“WAFFLE: Multi-Modal Model for Automated Front-End Development”，并引用 arXiv 预印本。论文的可用性声明链接至 lt-asset/Waffle。所审阅的 2025-05-28 快照采用 BSD-3-Clause 许可，提供 VLM-WebSight 推理、Selenium/Chrome 渲染、HTML 树注意力工具、读取本地 load_from_disk 数据集的对比学习数据集类，以及 500 张不含参考 HTML 的 WebSight-Test PNG 截图。README 虽提及训练文件，快照中并无训练脚本、Moondream2 代码、指标实现或变异训练集；在 lt-asset 的 Hugging Face 组织中也未找到含 231,940 对样本的数据集公开副本。权重以 lt-asset/Waffle_VLM_WebSight（7B）发布于 Hugging Face。GitHub README 称在遵守基础模型条款的前提下以 Apache-2.0 发布，模型卡则声明 bsd-3-clause-clear；本条目不据此推定单一许可证。文档列出的依赖包括 Python 3.10.14、PyTorch 2.3.0、Transformers 4.41.1、PEFT 0.11.1 与 DeepSpeed 0.14.1；推理脚本需要 CUDA GPU，路径仍为占位值。本次仅阅读源码文件，未下载权重或数据、运行代码或复现结果。

来源复核于

本合集仅做来源复核，未重新运行论文实验。请通过原始论文或 BibTeX 引用原作者。

报告条目过时 建议修正翻译

一手来源

  1. https://aclanthology.org/2025.acl-long.1208/
  2. https://aclanthology.org/2025.acl-long.1208.pdf
  3. https://api.crossref.org/works/10.18653/v1/2025.acl-long.1208
  4. https://arxiv.org/abs/2410.18362
  5. README.md GitHub · lt-asset/Waffle · 修订 5ca57f8
  6. LICENSE GitHub · lt-asset/Waffle · 修订 5ca57f8
  7. vlm_websight GitHub · lt-asset/Waffle · 修订 5ca57f8
  8. vlm_websight/eval_websight.py GitHub · lt-asset/Waffle · 修订 5ca57f8
  9. vlm_websight/dataset.py GitHub · lt-asset/Waffle · 修订 5ca57f8
  10. WebSight-Test GitHub · lt-asset/Waffle · 修订 5ca57f8
  11. https://huggingface.co/lt-asset/Waffle_VLM_WebSight/blob/296f6de57f8e646b1455ca00e3bc596ac0ea9429/README.md
  12. https://huggingface.co/HuggingFaceM4/VLM_WebSight_finetuned