WebUIBench

WebUIBench是一个全面评估多模态大型语言模型（MLLMs）在WebUI到代码转换能力的数据集。数据集包含来自超过700个真实世界网站的高质量问答对，总计约21,793对。WebUIBench旨在通过WebUI感知、HTML编程、WebUI-HTML理解和WebUI到代码转换四个关键领域来评估MLLMs。数据集为9个子任务提供了多样化的评估，涵盖了WebUI元素分类、属性识别、视觉定位、OCR、代码错误纠正、代码功能编辑、网页-HTML匹配、网页-HTML检索以及WebUI到代码转换。数据集的创建过程包括收集真实世界网站的截图、源代码和页面元素信息，并通过网页切片和自动标注生成问答对。WebUIBench的数据集和评估框架为MLLMs在Web应用开发领域的性能评估提供了重要资源。WebUIBench is a comprehensive dataset designed to evaluate the web UI-to-code conversion capabilities of multimodal large language models (MLLMs). The dataset includes high-quality question-answer pairs sourced from over 700 real-world websites, with a total of approximately 21,793 pairs. WebUIBench aims to assess MLLMs across four core domains: WebUI perception, HTML programming, WebUI-HTML understanding, and WebUI-to-code conversion. It supports diverse evaluations across 9 subtasks, covering WebUI element classification, attribute recognition, visual localization, OCR, code error correction, code function editing, webpage-HTML matching, webpage-HTML retrieval, and WebUI-to-code conversion. The dataset creation process involves collecting screenshots, source codes, and page element information from real-world websites, and generating question-answer pairs via webpage slicing and automatic annotation. The WebUIBench dataset and its evaluation framework provide a critical resource for performance evaluation of MLLMs in the field of web application development.

原始信息汇总

WebUIBench 数据集概述

基本信息

• 数据集名称: WebUIBench
• 发布日期: 2024年5月20日
• 许可证: MIT
• 数据集地址: HuggingFace
• 论文地址: arXiv
• GitHub仓库: MAIL-Tele-AI/WebUIBench

数据集简介

WebUIBench是一个系统设计的基准测试，用于评估多模态大语言模型（MLLMs）在四个关键领域的能力：

1. WebUI感知
2. HTML编程
3. WebUI-HTML理解
4. WebUI-to-Code

数据集包含21K高质量的问题-答案对，源自超过0.7K个真实世界的网站。

评估结果

研究团队对29个主流多模态大语言模型进行了全面评估，包括：

• 7个闭源模型: GPT-4o、Gemini-1.5 Pro、Claude-3.5-Sonnet等
• 22个开源模型: InternVL2.5系列、Qwen2-VL系列等（参数规模从2B到78B不等）

安装与使用

1. 安装: bash git clone https://github.com/MAIL-Tele-AI/WebUIBench cd WebUIBench pip install -r requirements.txt

2. 评估: bash tasks=(ec ocr ap vg cec cfe whm whr w2c) model_name=your_model_name for task in ${tasks[@]}; do python model_eval.py --task xx --model_name ${model_name} --gold_path xx --pred_path xx --eval_model gpt4o --eval_output xx --eval_type node --task_type ${task}

引用

如需引用，请使用以下BibTeX条目： bibtex @article{xx, title={WebUIBench: A Comprehensive Benchmark for Evaluating Multimodal Large Language Models in WebUI-to-Code}, author={xx}, journal={arXiv preprint arXiv:xx}, year={2025} }

致谢

特别感谢以下项目的贡献：

• VLMEvalKit

搜集汇总

数据集介绍

构建方式

WebUIBench数据集的构建过程体现了严谨的科学方法论与创新的工程实践。研究团队从5类常用真实网站（企业门户、后台管理系统、个人博客、新闻站点和电商平台）中采集了719个完整网页截图及对应HTML源码，通过浏览器扩展工具与人工复核确保数据质量。针对新闻和电商类网页的冗余元素问题，开发了基于DOM树分析的网页简化算法，在保持元素多样性的同时优化页面结构。数据标注采用半自动化流程：先设计涵盖9个子任务的QA模板，再通过元素信息检索自动填充生成21,793个问答对，每批数据均经过抽样质检。为模拟用户浏览行为，创新性地将网页按布局分割为2,488个语义完整的切片，平均每个切片配套10.68个问答样本。

特点

该数据集的核心特征体现在多维度的评估体系设计上。基于软件工程全生命周期理念，首创性地将网页生成能力分解为WebUI感知、HTML编程和WebUI-HTML理解三大子能力维度，细化为元素分类、属性识别、视觉定位等9项具体任务。数据构成上包含完整网页与切片两种形态，覆盖1800×386至1800×6802等多种分辨率。特别值得关注的是其细粒度标注体系：除常规的截图与源码外，还精确标注了每个页面元素的标签类别、文本内容、CSS样式及空间坐标（bounding box）。这种多模态、多层次的数据结构为全面评估MLLMs的网页生成能力提供了坚实基础，其中视觉定位任务包含从粗粒度网格定位到像素级坐标预测的渐进式评估。

使用方法

使用该数据集需遵循其分层评估框架。对于子能力评估（Task1-Task8），可采用自动指标：多选题任务计算准确率，开放式任务如OCR使用字符级Sørensen-Dice相似度，代码纠错任务通过字符串匹配评估。核心的WebUI-to-Code任务（Task9）需执行两级评估：粗粒度层面通过CLIP提取视觉特征计算余弦相似度；细粒度层面则先简化DOM树保留视觉元素，再分别进行元素级（文本内容、颜色相似度）和布局级（去内容后的空间结构相似度）评估。研究显示，该框架与人类专家评分的相关系数达0.83，验证了其有效性。用户可通过GitHub开源项目加载.png截图、.html源码及.json元素信息文件，按照提供的评估脚本进行模型测试，特别注意对于小参数模型需额外监控代码编译成功率。

背景与挑战

背景概述

WebUIBench是由中国电信人工智能研究院（TeleAI）、西北工业大学等机构的研究团队于2025年提出的多模态大语言模型评估基准。该数据集聚焦网页界面到代码生成（WebUI-to-Code）这一前沿领域，包含来自719个真实网站的21,793个问答对，系统评估模型在网页感知、HTML编程和跨模态理解三个维度的九项子能力。其创新性在于将软件工程的生命周期理论引入评估体系，填补了现有基准仅关注生成结果而忽视开发过程子能力的空白，为提升AI软件工程师的开发效能提供了标准化度量工具。

当前挑战

该数据集面临双重挑战：领域问题上，需解决多模态模型在像素级视觉定位、跨模态推理和复杂网页布局生成等核心能力的评估难题；构建过程中，需克服真实网页数据冗余处理（如新闻类网页的重复元素过滤）、动态内容截取（如电商页面交互元素捕捉）以及自动化标注一致性（如21K问答对的语义对齐）等技术难点。特别地，移动端网页评估缺失和JavaScript功能交互验证的局限性，反映了当前网页开发场景的复杂性与评估体系的待完善性。

常用场景

经典使用场景

WebUIBench作为多模态大语言模型在网页界面到代码转换领域的综合性评估基准，其经典使用场景聚焦于系统化测评模型在WebUI感知、HTML编程、WebUI-HTML理解及代码生成四个维度的能力。通过21,793组从真实网站提取的高质量问答对，研究者可精准量化模型在元素分类、视觉定位、代码纠错等9项子任务中的表现，尤其适用于验证模型在复杂网页布局生成与跨模态推理方面的性能边界。该数据集通过模拟前端工程开发全流程，为评估AI软件工程师的潜在能力提供了标准化实验环境。

实际应用

该数据集已成功应用于29个主流MLLMs的效能评估，包括GPT-4o、Claude-3.5等闭源模型及InternVL2.5等开源系列。实践表明，其评估结果能直接指导前端自动化工具的优化方向——例如发现模型在使用Tailwind框架时语法错误率激增的现象，促使开发者改进提示工程策略。在工业场景中，企业可基于该基准筛选适合可视化编程辅助的模型，或针对特定短板（如元素布局生成）定制训练数据，显著提升AI结对编程系统的可用性。

衍生相关工作

WebUIBench的发布催生了多个前沿研究方向：其一启发Design2Code等团队构建更复杂的网页功能交互评估模块；其二推动如WebSight等合成数据生成方法的改进，以弥补真实数据在字体样式等长尾分布的不足；其三促进多模态思维链（Multimodal CoT）在增量式网页生成中的应用探索。相关衍生工作如IWBench在布局评估算法上的优化，以及Web2Code在移动端评估扩展，均直接受其分层评估范式的启发。