WebUIBench

WebUIBench是一个综合基准，用于评估多模态大语言模型在WebUI到代码转换中的表现。该数据集包含21K高质量的问题-答案对，来源于超过0.7K真实世界的网站，系统性地评估了四个关键领域：WebUI感知、HTML编程、WebUI-HTML理解和WebUI到代码转换。WebUIBench is a comprehensive benchmark for evaluating the performance of multimodal large language models on WebUI-to-code translation tasks. It includes 21K high-quality question-answer pairs sourced from over 700 real-world websites, and systematically assesses four critical domains: WebUI perception, HTML programming, WebUI-HTML comprehension, and WebUI-to-code translation.

原始信息汇总

WebUIBench 数据集概述

基本信息

• 数据集名称: WebUIBench
• 发布日期: 2024年5月20日
• 许可证: MIT
• 数据集大小: 21K 高质量问答对
• 数据来源: 超过 0.7K 真实世界网站

数据集简介

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

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

数据集特点

• 包含多维子能力的评估框架
• 专注于网页生成结果以外的多方面评估
• 基于软件工程原则设计

评估结果

• 评估了 29 个主流 MLLMs
• 包括 7 个闭源模型（如 GPT-4o、Gemini-1.5 Pro、Claude-3.5-Sonnet）
• 包括 22 个开源模型（如 InternVL2.5 系列、Qwen2-VL 系列）

获取方式

• Hugging Face 数据集: https://huggingface.co/datasets/Tele-AI-MAIL/WebUIBench
• GitHub 仓库: https://github.com/MAIL-Tele-AI/WebUIBench

引用

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数据集构建过程体现了严谨的工程方法论，研究团队从软件工程原则出发，基于700余个真实网站样本进行系统性设计。通过多维度的数据采集策略，构建了涵盖21,000个高质量问答对的标注体系，重点聚焦WebUI感知、HTML编程、界面-代码理解及代码生成四大核心能力维度。数据筛选采用多阶段验证机制，确保每个样本都能精准对应特定评估目标，同时保持原始网页的视觉-结构一致性。

特点

该数据集在评估范式上具有突破性创新，其核心价值在于构建了首个覆盖Web开发全流程的多模态评估体系。区别于传统仅关注生成结果的评测方法，WebUIBench通过细粒度的任务划分（如元素检测、视觉问答、代码纠错等9项子任务），实现对模型能力的立体化诊断。数据集包含丰富的跨模态关联标注，包括网页截图、HTML源码及结构化元数据，为研究多模态大语言模型的认知-生成协同机制提供了理想实验场。

使用方法

研究者可通过HuggingFace平台直接加载数据集，配套的评估工具链采用模块化设计。使用前需配置Python环境并安装指定依赖库，评估流程支持29种主流MLLMs的自动化测试。通过调整task_type参数可灵活选择评估维度，系统将生成包含准确率、鲁棒性等指标的详细报告。对于定制化研究，开放式的数据接口允许用户扩展新的评估任务，eval_model参数支持选用不同裁判模型进行结果验证。

背景与挑战

背景概述

WebUIBench是由MAIL-Tele-AI团队于2024年推出的多模态大语言模型评估基准，旨在系统评估模型在Web界面到代码转换任务中的多维能力。该数据集基于软件工程原理设计，包含来自700多个真实网站的2.1万条高质量问答对，重点考察模型在WebUI感知、HTML编程、WebUI-HTML理解和WebUI-to-Code四个关键维度的表现。作为首个针对网页开发全流程的综合性评估框架，WebUIBench填补了现有基准仅关注网页生成结果的局限性，为提升AI软件开发效率提供了重要研究工具。

当前挑战

该数据集面临的领域挑战在于网页开发任务固有的复杂性，需要模型同时具备视觉理解、编程语法掌握和逻辑推理等跨模态能力。构建过程中的技术挑战包括：如何从真实网站中提取具有代表性的开发场景，如何设计覆盖开发全流程的评估维度，以及如何确保21K问答对的质量一致性。此外，评估29种主流模型时还面临模型输出标准化对齐和跨模态能力量化等评价体系建立的难题。

常用场景

经典使用场景

在生成式人工智能技术迅猛发展的背景下，WebUIBench作为多模态大语言模型（MLLMs）的评估基准，广泛应用于网页用户界面到代码转换的研究领域。该数据集通过21K高质量问答对，覆盖了0.7K真实世界网站，为研究者在WebUI感知、HTML编程、WebUI-HTML理解及WebUI-to-Code等四个关键维度提供了系统化的评估框架。经典使用场景包括模型在复杂网页应用开发中的多维子能力测试，帮助研究者全面了解模型在网页生成任务中的表现。

解决学术问题

WebUIBench解决了现有基准在评估多模态大语言模型时存在的局限性，特别是缺乏对子能力的细粒度评估和仅关注网页生成结果的问题。通过结合软件工程原理，该数据集为研究者提供了一个多视角的评估框架，能够准确识别模型在开发过程中的技能特征和潜在弱点。其意义在于推动了MLLMs在网页开发领域的应用研究，为模型优化和效率提升提供了科学依据。

衍生相关工作

WebUIBench的发布催生了一系列相关研究工作，特别是在多模态大语言模型的评估方法改进方面。基于该数据集，研究者开发了更精细的评估指标和工具，如VLMEvalKit等开源项目。这些衍生工作进一步拓展了MLLMs在网页开发领域的应用边界，推动了从理论评估到实际工程落地的转化过程。