WebCompass

WebCompass是一个统一的多模态基准和评估框架，用于评估LLMs从三种输入类型生成功能性网页的能力：文本设计文档、参考截图和视频演示。

WebCompass is a unified multimodal benchmark and evaluation framework designed to evaluate the capability of Large Language Models (LLMs) to generate functional webpages from three input types: textual design documents, reference screenshots, and video demonstrations. The dataset includes five task types: text, image, and video generation, editing, and repair, as well as three evaluation dimensions: runnability, specification implementation, and design quality.

原始信息汇总

WebCompass 数据集概述

数据集基本信息

• 数据集名称: WebCompass
• 发布机构: NJU-LINK × Kwaipilot
• 数据集定位: 用于评估大语言模型从多模态输入生成功能性网页能力的统一基准和评估框架。
• 官方地址: https://huggingface.co/datasets/NJU-LINK/WebCompass
• 论文地址: https://arxiv.org/abs/2604.18224
• 项目页面: https://nju-link.github.io/WebCompass/
• 许可证: Apache 2.0 License

数据集核心特点

• 多模态输入支持: 支持从文本设计文档、参考截图或视频演示生成网页。
• 五大任务类型: 文本生成、图像生成、视频生成、编辑、修复。
• 三维度评估: 可运行性、规范实现、设计质量。
• LLM-as-Judge: 使用多模态大语言模型进行视觉比较。
• 基于Docker的评估: 提供可复现的评估环境。
• 可扩展框架: 易于集成新模型和智能体。

数据集结构与规模

生成任务

配置	划分	样本数	描述
text-generation	train	123	从文本设计文档生成
image-generation	train	116	从参考截图生成
video-generation	train	94	从视频演示生成

编辑与修复任务

配置	划分	样本数	描述
editing	sp / mp	150 / 150	向单页/多页网站添加功能
repair	sp / mp	150 / 150	修复损坏的单页/多页网站以匹配目标

数据格式

每个生成任务是一个JSON对象，包含以下字段：

• instance_id: 实例标识符
• repo: 代码仓库
• base_commit: 基础提交
• problem_statement: 问题陈述列表（包含任务、类别、操作序列、预期结果、标准、最高分等）
• meta: 元数据（包含类别、难度等）

评估类别与权重（生成任务）

• 可运行性: 页面加载无错误（约10%权重）
• 规范实现: 交互符合规范（约60-70%权重）
• 设计质量: 视觉保真度和布局准确性（约20-25%权重）

下载与使用

python from datasets import load_dataset

生成任务

ds_text = load_dataset("NJU-LINK/WebCompass", "text-generation", split="train") ds_image = load_dataset("NJU-LINK/WebCompass", "image-generation", split="train") ds_video = load_dataset("NJU-LINK/WebCompass", "video-generation", split="train")

编辑任务

ds_edit_sp = load_dataset("NJU-LINK/WebCompass", "editing", split="sp") ds_edit_mp = load_dataset("NJU-LINK/WebCompass", "editing", split="mp")

修复任务

ds_repair_sp = load_dataset("NJU-LINK/WebCompass", "repair", split="sp") ds_repair_mp = load_dataset("NJU-LINK/WebCompass", "repair", split="mp")

评估框架

生成评估

• 流程: 生成 → 评估（Docker智能体）→ LLM评判（仅图像）→ 评分计算
• 支持模型: OpenAI (gpt-4o, gpt-4o-mini, o1, o3-mini)、Anthropic (claude-sonnet-4-5-20250929, claude-opus-4-5-20250929)、Google (gemini-2.5-pro-preview-05-06, gemini-2.5-flash-preview-04-17)、开源模型 (Qwen3-VL-32B-Instruct, deepseek-chat) 等。

编辑与修复评估

• 任务类型:
  • 编辑: 根据指令向现有网站添加新功能
  • 修复: 修复损坏网站中的错误以匹配目标行为
• 评估维度:
  • 编辑: 指令针对性、功能完整性、样式一致性
  • 修复: 根因针对性、交互完整性、参考保真度

项目结构

WebCompass/ ├── generation/ # 生成评估框架 │ ├── inference/ # 网页生成脚本 │ └── evaluation/ # 评估工具 ├── editing_repair/ # 编辑与修复评估 └── site/ # 项目网站

引用

bibtex @misc{lei2026webcompassmultimodalwebcoding, title={WebCompass: Towards Multimodal Web Coding Evaluation for Code Language Models}, author={Xinping Lei and Xinyu Che and Junqi Xiong and Chenchen Zhang and Yukai Huang and Chenyu Zhou and Haoyang Huang and Minghao Liu and Letian Zhu and Hongyi Ye and Jinhua Hao and Ken Deng and Zizheng Zhan and Han Li and Dailin Li and Yifan Yao and Ming Sun and Zhaoxiang Zhang and Jiaheng Liu}, year={2026}, eprint={2604.18224}, archivePrefix={arXiv}, primaryClass={cs.SE}, url={https://arxiv.org/abs/2604.18224}, }

搜集汇总

数据集介绍

构建方式

在网页生成领域，WebCompass数据集通过精心设计的任务框架构建而成。其构建过程涵盖了从文本设计文档、参考截图到视频演示三种输入模态，系统性地收集了涵盖生成、编辑与修复等五类任务的数据。数据来源于真实网页开发场景，每个任务实例均包含详细的评估标准，如运行性、规范实现与设计质量三个维度，确保了数据集的多样性与实用性。

特点

WebCompass数据集展现出多模态输入支持的显著特点，能够评估大语言模型从文本、图像或视频生成功能网页的能力。数据集包含五个任务类型，并采用三维度评估体系，结合了基于Docker的可复现评估环境与多模态大语言模型的视觉比较机制。其框架设计具有高度可扩展性，便于集成新模型与智能体，为网页生成研究提供了全面而灵活的基准。

使用方法

使用WebCompass数据集时，研究者可通过HuggingFace平台便捷加载不同任务配置的数据。评估流程包括生成网页、运行Docker代理进行自动化测试、利用多模态大语言模型进行视觉评判以及最终得分计算。数据集支持多种主流模型，并通过环境变量配置API访问，确保了评估过程的一致性与可复现性，为网页生成模型的性能评测提供了标准化工具链。

背景与挑战

背景概述

随着大型语言模型在代码生成领域的飞速发展，评估模型从多模态输入中生成功能性网页的能力成为一项关键挑战。WebCompass数据集由南京大学与Kwaipilot团队于2026年联合创建，旨在构建一个统一的多模态基准测试框架。该数据集的核心研究问题聚焦于如何系统评估模型依据文本设计文档、参考截图及视频演示等多种输入形式，准确生成、编辑与修复网页的综合能力。其创新性在于将传统的代码生成任务扩展至多模态交互场景，为网页自动编码领域提供了首个涵盖文本、图像与视频输入的标准化评估体系，对推动智能编程助手与自动化前端开发工具的发展具有深远影响。

当前挑战

WebCompass数据集致力于解决多模态网页生成这一新兴领域的评估难题，其核心挑战在于如何设计一个能够全面衡量生成网页功能完整性、交互准确性与视觉保真度的评价体系。具体而言，构建过程中面临三大挑战：首先，多模态输入对齐的复杂性，要求模型能够精准理解并融合来自文本、静态图像与动态视频的异构信息；其次，评估维度设计的科学性，需平衡可运行性、规范实现与设计质量三大指标，并建立可靠的自动化评分机制；最后，数据收集与标注的高成本，涉及大量真实网页项目的重构与多维度人工验证，以确保数据集的多样性与评估结果的可靠性。

常用场景

经典使用场景

在人工智能驱动的网页生成领域，WebCompass数据集为评估大型语言模型从多模态输入生成功能性网页的能力提供了标准化基准。其经典使用场景集中于对模型进行系统性评估，涵盖从文本设计文档、参考截图到视频演示三种输入类型，模拟真实开发流程中从需求到成品的转化过程。研究者通过该数据集能够全面检验模型在可运行性、规范实现和设计质量三个维度上的表现，从而推动多模态代码生成技术的精细化发展。

解决学术问题

该数据集有效解决了网页生成评估中缺乏统一多模态基准的学术难题，为量化模型从视觉或动态演示中理解并实现网页功能的能力提供了方法论。通过引入可运行性、规范实现和设计质量的三维评估体系，它克服了传统评估仅关注代码语法正确性的局限，将研究焦点扩展至交互逻辑匹配与视觉保真度等更高层次问题。这一框架显著提升了评估的科学性与可复现性，为多模态编程智能的演进奠定了实证基础。

衍生相关工作

围绕WebCompass数据集，已衍生出多项探索多模态网页生成的经典研究工作。这些研究通常基于其评估框架，开发新型的视觉-代码转换模型、视频理解编码代理或混合模态的指令跟随系统。部分工作进一步扩展了数据集的评估维度，例如引入可访问性检查或性能指标，而另一些研究则专注于优化基于Docker的自动化评估流程或设计更高效的LLM-as-Judge机制，共同丰富了多模态编程评估的研究生态。