Interaction2Code

Interaction2Code是一个用于交互式网页生成的网页数据集，包含了网页的截图、交互元素的标记以及交互效果的区域标记。数据集提供了详细的统计信息和样本格式，适用于网页生成和评估。

Interaction2Code is a web dataset dedicated to interactive web page generation. It contains web page screenshots, annotations of interactive elements, and annotations of regions associated with interactive effects. The dataset provides detailed statistical information and sample formats, and is applicable to web page generation and evaluation.

原始信息汇总

Interaction2Code: 互动网页生成数据集

数据集概述

Interaction2Code 是一个用于互动网页生成的网页数据集，包含以下内容：

1. 数据集：实验数据的样本位于 /sample 目录下。
2. 代码：代码位于 /code 目录下，包括互动网页生成和指标计算。
3. 人类评估结果：人类评估的结果位于 /human_evaluation 目录下。

数据集结构

. ├── assets ├── code │   ├── metric # 指标计算 │   └── prompting # 互动页面生成 ├── human_evaluation │   └── failure # 失败案例注释 │   └── figure └── sample # 采样的数据集

基准统计

指标	最小值	最大值	平均值	标准差
长度（tokens）	2457	726,317	141,084	160,438
标签计数	34	12,694	1,291	1,574
DOM 深度	6	37	18	6
唯一标签	8	58	31	9
总大小	-	-	-	97

元素	频率	元素	频率	类型	频率
button	145	summary	16	new component	94
input	80	output	16	text	93
link	47	image	14	color	61
iframe	47	video	12	new window	25
textarea	43	dialog	11	position	21
option	43	audio	7	size	16
select	45	template	6	switch	15
form	26	text	4	-	-
label	25	area	2	-	-
detail	24	span	2	-	-
progress	19	table	2	-	-
datalist	16	-	-	-	-

数据集格式

sample/ 目录下的数据集格式如下：

文件夹名称是网页的编号。 x.png: 交互 "x" 的截图。 x-1.png: 交互 "x" 之前的网页截图。 x-2.png: 交互 "x" 之后的网页截图。 x-1-mark.png: 交互 "x" 之前带有交互元素标记的网页截图。 x-2-mark.png: 交互 "x" 之后带有交互效果区域标记的网页截图。 placeholder.jpg: 生成的网页的占位图。 type: url, topic 和交互类型。

代码使用

代码生成

在 /code/prompting/key.json 中添加你的密钥： json { "gemini": "your_gemini_key", "gpt": "your_openai_key", "claude": "your_anthropic_key" }

在 /code/prompting 目录下运行 gemini.py, gpt.py 和 claude.py 生成互动网页： python generate_page(path="../../sample/", web_number=1, interact_number=1, prompt_method="direct_prompt")

执行后，网页文件 {interact_numer}-{prompt_method}-{model}.html 将生成在 sample/{web_number} 文件夹中。

运行自动评估

在 /code/metric 目录下运行 calculate_metric.py 进行评估：

步骤1：自动与生成的网页交互 python interact_by_id(file_name=prediction_path+f"{web_name}/{interact_name}-{prompt_name}-{model_name}.html", folder_path=prediction_path+f"{web_name}/{interact_name}-{prompt_name}-{model_name}/")

步骤2：计算指标 python full_page_results, interact_results, message = get_all_score_new(web_name, interact_name, model_name, prompt_name)

失败类型描述

互动元素的失败

(a) 互动元素缺失：MLLMs 未生成互动元素。 (b) 无交互：生成的网页中没有交互。 (c) 错误的互动元素：MLLMs 在错误的元素上实现了互动功能。 (d) 错误的互动元素类型：MLLMs 生成的互动元素类型错误。 (e) 互动元素位置错误：MLLMs 生成的互动元素位置不正确。

互动效果的失败

(f) 交互后位置错误：MLLMs 生成的互动效果位置错误。 (g) 错误的交互效果类型：MLLMs 生成的交互效果类型错误。 (h) 效果作用于错误元素：MLLMs 在错误的元素上实现了交互效果。 (i) 部分实现：MLLMs 仅实现了部分互动功能。 (j) 错误的功能：MLLMs 实现了错误的功能。

搜集汇总

数据集介绍

构建方式

Interaction2Code数据集的构建基于从C4数据集中筛选出的网页，并通过人工标注的方式获取交互式网页截图。每个样本包括交互前后的网页截图、交互元素的标记截图以及交互效果区域的标记截图。此外，数据集还提供了网页的URL、主题和交互类型等信息，以确保数据的多样性和实用性。

特点

Interaction2Code数据集的显著特点在于其专注于交互式网页生成，涵盖了多种网页元素和交互类型。数据集提供了详细的交互前后的网页截图，以及交互元素和效果的标记，便于研究人员分析和评估交互式网页生成的准确性和效果。此外，数据集还包含了丰富的元数据，如URL、主题和交互类型，增强了数据集的应用价值。

使用方法

使用Interaction2Code数据集时，用户首先需要在`/code/prompting/key.json`文件中添加相应的API密钥。随后，通过运行`/code/prompting`目录下的`gemini.py`、`gpt.py`和`claude.py`文件，可以生成交互式网页。生成的网页文件将保存在`sample/{web_number}`目录下。此外，用户还可以通过运行`/code/metric`目录下的`calculate_metric.py`文件，自动评估生成的网页的交互效果。

背景与挑战

背景概述

Interaction2Code数据集由Xiao, Jingyu等人于2024年创建，旨在探索自动交互式网页生成的可能性。该数据集基于C4数据集筛选，包含了大量网页截图及其交互效果的标注，主要研究人员包括Xiao, Jingyu, Wan, Yuxuan, Huo, Yintong, Xu, Zhiyao和Lyu, Michael R。其核心研究问题是如何通过机器学习模型自动生成具有交互功能的网页，这一研究对网页设计和开发领域具有重要影响，推动了自动化工具的发展。

当前挑战

Interaction2Code数据集在构建过程中面临多项挑战。首先，自动生成交互式网页需要精确理解用户意图和网页结构，这对模型的语义理解和生成能力提出了高要求。其次，数据集的标注过程复杂，需要人工对网页交互效果进行详细标注，确保数据的准确性和一致性。此外，评估生成的网页质量也是一个挑战，需要设计有效的评估指标和方法，以量化生成的网页与预期效果的差距。

常用场景

经典使用场景

Interaction2Code数据集在交互式网页生成领域中具有广泛的应用。其经典使用场景包括利用该数据集训练和评估自动生成交互式网页的模型。通过提供丰富的网页截图和交互效果标注，研究者可以设计并验证各种生成算法，从而提升模型的准确性和实用性。

解决学术问题

Interaction2Code数据集解决了自动交互式网页生成中的多个关键学术问题。首先，它提供了详尽的交互元素和效果标注，有助于研究者深入分析和改进生成模型的性能。其次，通过包含多种网页类型和交互方式，该数据集促进了跨领域研究，推动了网页生成技术的创新和发展。

衍生相关工作

Interaction2Code数据集催生了多项相关研究工作。例如，基于该数据集的研究者开发了多种网页生成模型，提升了生成效率和质量。同时，该数据集还启发了对交互式网页生成过程中错误模式的深入研究，推动了错误检测和纠正技术的发展。