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

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

- 作者：Shanchao Liang; Nan Jiang; Shangshu Qian; Lin Tan
- 原标题：WAFFLE: Fine-tuning Multi-Modal Model for Automated Front-End Development
- 发表载体：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
- 来源复核于：2026-10-20
- 收录于：2026-11-03
- 原始论文：<https://aclanthology.org/2025.acl-long.1208/>
- PDF：<https://aclanthology.org/2025.acl-long.1208.pdf>
- 代码：<https://github.com/lt-asset/Waffle/tree/5ca57f8b64b0fa8827f1f310afe6ac1afc63d088>
- BibTeX：<https://awesomerea.org/papers/citations/paper-waffle.bib>
- 目录页面：<https://awesomerea.org/zh/papers/paper-waffle/>
- 记录 JSON：<https://awesomerea.org/papers/paper-waffle/record.json>
- 英文版：[English](https://awesomerea.org/papers/paper-waffle/index.md)

## 研究范围与局限

方法根据单张截图生成静态 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 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，路径仍为占位值。

## 一手来源

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. <https://github.com/lt-asset/Waffle/blob/5ca57f8b64b0fa8827f1f310afe6ac1afc63d088/README.md>
6. <https://github.com/lt-asset/Waffle/blob/5ca57f8b64b0fa8827f1f310afe6ac1afc63d088/LICENSE>
7. <https://github.com/lt-asset/Waffle/tree/5ca57f8b64b0fa8827f1f310afe6ac1afc63d088/vlm_websight>
8. <https://github.com/lt-asset/Waffle/blob/5ca57f8b64b0fa8827f1f310afe6ac1afc63d088/vlm_websight/eval_websight.py>
9. <https://github.com/lt-asset/Waffle/blob/5ca57f8b64b0fa8827f1f310afe6ac1afc63d088/vlm_websight/dataset.py>
10. <https://github.com/lt-asset/Waffle/tree/5ca57f8b64b0fa8827f1f310afe6ac1afc63d088/WebSight-Test>
11. <https://huggingface.co/lt-asset/Waffle_VLM_WebSight/blob/296f6de57f8e646b1455ca00e3bc596ac0ea9429/README.md>
12. <https://huggingface.co/HuggingFaceM4/VLM_WebSight_finetuned>

## 关于此条目

已依据论文及一手来源复核。请通过原始论文或 BibTeX 引用原作者。
原创说明采用 MIT 许可；外部项目、论文与素材保留各自的权利和许可。