Interaction2Code: Benchmarking MLLM-based Interactive Webpage Code Generation from Interactive Prototyping

Background

MLLM在从UI模型生成UI代码的任务中显示出卓越的性能，然而现存的基准测试仅局限在静态网页，忽略了动态交互。

Findings

1. MLLM难以生成交互部分
2. MLLM容易发生10种类型的故障：
   • 交互元素缺失
   • 无交互
   • 错误交互元素
   • 交互元素类型错误
   • 交互元素位置错误
   • 交互后影响元素位置
   • 交互后元素类型错误
   • 交互元素对象错误
   • 部分交互
   • 功能错误
3. MLLM在视觉上不明显的交互上表现不佳
4. 单一的视觉模态描述无法让MLLM理解交互

Improvement

1. 为交互式元素应用视觉标记
2. 利用故障感知提示使MLLM避免潜在故障
3. 视觉显著性增强
4. 视觉和文本描述结合

Methodology

1. 数据集构建：其中交互性元素分离算法如下图：
2. 评估指标：引入了交互准确性指标
3. 模型评估：研究人员在Interaction2Code上评估了多个主流MLLM，分析了它们在生成交互式网页代码方面的表现。