Instruct4Edit

Instruct4Edit数据集由新加坡管理大学的研究团队创建，用于支持自然语言驱动的网页编辑。该数据集包含高质量的HTML编辑指令及其对应的HTML修改，旨在通过指令调优来提高大型语言模型在网页编辑方面的性能。数据集的生成过程完全自动化，利用大型语言模型生成指令、修改HTML代码并进行视觉验证。Instruct4Edit数据集为自然语言驱动的网页编辑提供了可扩展和透明的基础，展示了通过针对性的微调，较小的开源模型可以达到与专有系统相媲美的性能。

The Instruct4Edit dataset was created by a research team from Singapore Management University to support natural language-driven web editing. This dataset includes high-quality HTML editing instructions and their corresponding HTML modifications, aiming to enhance the performance of large language models in web editing via instruction tuning. The entire generation process of the dataset is fully automated, leveraging large language models to generate instructions, modify HTML code and conduct visual validation. The Instruct4Edit dataset provides a scalable and transparent foundation for natural language-driven web editing, demonstrating that smaller open-source models can achieve performance comparable to proprietary systems through targeted fine-tuning.

原始信息汇总

Instruct4Edit 数据集概述

数据集基本信息

• 数据集名称: Instruct4Edit
• 作者: Truong Hai Dang, Jingyu Xiao, Yintong Huo
• 会议: ACM AIWare 2025
• 关键词: LLM, GUI Automation, Front-end Development
• 许可证: CC BY 4.0

数据集描述

Instruct4Edit是一个用于完整HTML页面重写的清洁、基于指令的数据集，通过多阶段LLM驱动流程生成和验证。该数据集专门针对网页编辑任务，为大型语言模型提供高质量的微调数据。

核心特性

• 全自动管道: 三阶段LLM管道（指令生成器→HTML编辑器→视觉验证器）
• 高质量数据集: 从2500个初始对中筛选出1150个验证样本（46%接受率）
• 视觉验证: 基于截图的验证，人工验证一致性达88%
• 多模态评估: SSIM、CLIP相似度和人工验证
• 微调就绪: 为训练视觉语言模型格式化的数据集

数据集规模与统计

• 初始生成: 2500个指令-HTML对（500个种子HTML文件×5个指令）
• 最终数据集: 1150个验证样本
• 数据源: WebCode2M数据集的500个种子HTML文件

数据集格式

文本数据集格式

json { "id": "sample_N", "instruction": "自然语言设计修改指令", "original_html": "完整原始HTML文档", "modified_html": "完整修改后的HTML文档" }

视觉语言数据集格式

json { "id": "sample_N", "instruction": "自然语言设计修改指令", "original_html": "完整原始HTML文档", "modified_html": "完整修改后的HTML文档", "original_image": "data/images/original_sample_N.png" }

数据集文件结构

• data/datasets/instruction_tuning_data.json - 过滤后的高质量样本
• data/datasets/unfiltered_instruction_tuning_data.json - 完整数据集用于比较
• data/datasets/vl_instruction_tuning_data.json - 视觉语言数据集（过滤后）
• data/datasets/vl_unfiltered_instruction_tuning_data.json - 视觉语言数据集（未过滤）
• data/images/ - 截图图像（original_.png, modified_.png）
• data/evaluate_samples/ - 样本评估数据

评估结果

定量指标

模型	SSIM	CLIP
Qwen2.5-7B-Instruct（本工作）	0.952	0.993
GPT-4o-mini	0.896	0.987
Gemini-2.5-Pro	0.883	0.979

人工评估（通过率）

模型	通过	失败	通过率
GPT-4o-mini	29	21	58%
Qwen2.5-7B-Instruct（本工作）	28	22	56%
Gemini-2.5-pro	26	24	52%

主要应用场景

1. 研究: 评估LLM网页编辑能力的基准数据集
2. 训练: 为自动化网页开发微调模型
3. 评估: 比较UI修改中指令跟随的不同方法
4. 开发: 构建具有自然语言接口的交互式网页开发工具

搜集汇总

数据集介绍

构建方式

在网页界面开发领域，自动化代码编辑已成为提升开发效率的关键方向。Instruct4Edit数据集通过全自动流水线构建，首先从WebCode2M数据集中选取500个真实网页代码作为种子样本，随后利用大语言模型生成多样化自然语言编辑指令，模拟实际设计修改需求。每条指令对应原始HTML代码被送入编辑模块生成完整修改后的代码，最后通过视觉验证环节进行跨模态比对，仅保留指令与渲染结果完全对齐的高质量样本，形成包含1,150组三元组数据的精炼集合。

特点

该数据集的核心特征体现在其严格的质量控制机制与语义对齐能力。通过三重LLM协同架构——指令生成器、代码编辑器和视觉验证器，确保每个样本的编辑意图、代码修改与视觉呈现保持高度一致。数据内容覆盖布局调整、间距优化、样式修改等典型网页编辑场景，指令设计避免技术术语以贴近自然表达。人工抽样验证显示88%的自动过滤准确率，Cohen's Kappa系数达0.84，证明数据集具备近乎完美的人工标注一致性。

使用方法

该数据集主要服务于代码编辑模型的指令微调任务。研究者可将（指令，原始HTML，修改后HTML）三元组作为训练样本，采用参数高效的LoRA适配器对预训练语言模型进行微调。输入序列由自然语言指令与原始代码拼接构成，模型需生成完整且可渲染的修改后代码。实验表明，基于该数据集微调的Qwen2.5-7B模型在结构相似性指标(SSIM)提升至0.952，视觉语义相似度(CLIP)达0.993，显著增强模型对模糊设计指令的解析与精确代码改写能力。

背景与挑战

背景概述

随着网页应用开发的演进，迭代式代码修改成为推动软件更新的核心环节，然而传统手动编辑方式效率低下且易出错。2025年，新加坡管理大学与香港中文大学的研究团队联合推出Instruct4Edit数据集，旨在解决自然语言指令驱动网页代码编辑的难题。该数据集通过构建自动化数据生成管道，将抽象设计需求转化为可执行的HTML/CSS修改，为交互式网页开发范式提供了关键数据支撑。其创新性在于利用大语言模型实现指令生成、代码重构与视觉验证的闭环，显著提升了前端代码编辑的语义对齐能力与视觉保真度，为开源模型在网页编辑领域的应用开辟了新路径。

当前挑战

在网页代码编辑领域，模型需克服三大核心挑战：首先，抽象设计指令如‘使布局更简约’存在语义模糊性，要求模型具备视觉语义的深层理解能力；其次，修改过程需保持HTML结构连贯性，确保非相关组件稳定性与代码渲染正确性；最后，输出必须实现视觉对齐，使渲染结果精准反映用户意图。数据集构建过程中，面临高质量训练数据稀缺的困境，传统人工标注方式因成本高昂难以规模化。为此，研究团队开发了基于LLM的自动化合成管道，通过指令生成、代码编辑与跨模态验证的三阶段流程，有效解决了数据质量与规模间的矛盾，但视觉验证环节仍存在部分语义歧义样本过滤的精度挑战。

常用场景

经典使用场景

在网页开发领域，Instruct4Edit数据集最典型的应用场景是训练大型语言模型执行基于自然语言指令的HTML代码编辑任务。开发者通过输入如“将logo居中显示”或“增加区块间距”等设计需求，模型能够准确理解语义意图并生成相应的代码修改方案。这种交互式编辑模式显著提升了网页迭代开发的效率，使得非专业用户也能通过自然语言参与界面优化过程。

衍生相关工作

基于Instruct4Edit的数据生成范式，衍生出多个前沿研究方向。WebCode2M数据集扩展了其种子样本规模，DesignBench基准则系统评估了多模态模型的代码生成能力。UICopilot项目借鉴其分层代码生成思路，实现了从设计稿到完整界面的自动化合成。LayoutCoder与DCGen等工作进一步探索了视觉布局与代码结构的映射关系，推动了前端工程智能化研究体系的完善与发展。

数据集最近研究

最新研究方向

在网页开发智能化进程中，自然语言驱动的代码编辑正成为前沿探索焦点。Instruct4Edit通过构建自动化数据生成框架，将抽象设计指令转化为精确的HTML/CSS修改，解决了现有模型在理解视觉语义与保持结构一致性方面的瓶颈。该数据集推动了小型开源模型在代码编辑任务中的性能突破，其视觉验证机制显著提升了修改结果的视觉保真度，为交互式网页开发范式提供了可扩展的技术基础。当前研究热点集中于跨前端框架的泛化能力与检索增强推理，旨在通过领域知识注入进一步强化模型对复杂设计需求的理解与执行精度。

相关研究论文

• 通过

  新加坡管理大学 · 2025年