Interaction2Code: Benchmarking MLLM-based Interactive Webpage Code Generation from Interactive Prototyping
作者: Jingyu Xiao, Yuxuan Wan, Yintong Huo, Zixin Wang, Xinyi Xu, Wenxuan Wang, Zhiyao Xu, Yuhang Wang, Michael R. Lyu
分类: cs.SE, cs.AI, cs.HC
发布日期: 2024-11-05 (更新: 2025-02-20)
备注: 21 pages,14 figures
💡 一句话要点
提出Interaction2Code基准，评估并提升MLLM在交互式网页代码生成中的能力。
🎯 匹配领域: 支柱九：具身大模型 (Embodied Foundation Models)
关键词: 交互式网页代码生成 多模态大语言模型 基准测试 交互设计 UI生成 故障感知提示 视觉显著性增强
📋 核心要点
- 现有设计到代码的基准测试主要关注静态网页，忽略了动态交互，导致生成的网页实用性受限。
- 论文提出Interaction2Code基准，包含多种交互类型，并设计增强策略以提升MLLM在交互式网页代码生成方面的性能。
- 实验表明，现有MLLM在交互生成方面存在不足，通过提出的增强策略，可以在一定程度上提高性能。
📝 摘要（中文）
多模态大型语言模型(MLLMs)在设计到代码的任务，即从UI模型生成UI代码方面表现出了卓越的性能。然而，现有的基准只包含静态网页用于评估，忽略了动态交互，限制了生成网页的实用性、可用性和用户参与度。为了弥补这些差距，我们首次对MLLMs在生成交互式网页方面的能力进行了系统研究。具体来说，我们提出了Interaction-to-Code任务，并建立了Interaction2Code基准，涵盖了127个独特的网页和374个不同的交互，跨越15种网页类型和31种交互类别。通过使用最先进的(SOTA) MLLMs进行全面实验，并通过自动指标和人工评估进行评估，我们发现了MLLM在Interaction-to-Code任务中的四个关键限制：(1)与完整页面相比，交互生成不足，(2)容易出现十种类型的失败，(3)在视觉上细微的交互方面表现不佳，以及(4)当仅限于单模态视觉描述时，对交互的理解不足。为了解决这些限制，我们提出了四种增强策略：交互元素高亮显示、故障感知提示(FAP)、视觉显著性增强和视觉-文本描述组合，所有这些都旨在提高MLLMs在Interaction-to-Code任务中的性能。Interaction2Code基准和代码可在https://github.com/WebPAI/Interaction2Code中找到。
🔬 方法详解
问题定义：现有设计到代码的任务主要关注静态网页的生成，忽略了网页的动态交互特性。这导致生成的代码缺乏实用性，无法满足用户对交互式体验的需求。因此，需要一个能够评估和提升MLLM在交互式网页代码生成能力的基准。
核心思路：论文的核心思路是构建一个包含丰富交互类型的基准数据集（Interaction2Code），并利用该基准评估现有MLLM在交互式网页代码生成方面的性能。同时，针对MLLM的不足，提出相应的增强策略，以提高其生成交互式网页代码的能力。这样设计的目的是为了弥补现有基准的不足，推动MLLM在实际应用中的发展。
技术框架：整体框架包括以下几个主要部分：1) 构建Interaction2Code基准数据集，包含多种网页类型和交互类型。2) 使用现有SOTA的MLLM在Interaction2Code上进行评估，分析其在交互式网页代码生成方面的不足。3) 提出四种增强策略：交互元素高亮显示、故障感知提示(FAP)、视觉显著性增强和视觉-文本描述组合。4) 在Interaction2Code上评估增强策略的效果。
关键创新：论文的关键创新在于：1) 提出了Interaction-to-Code任务，并构建了首个针对交互式网页代码生成的基准数据集Interaction2Code。2) 针对MLLM在交互式网页代码生成方面的不足，提出了四种有效的增强策略。这些策略能够显著提高MLLM在Interaction2Code上的性能。
关键设计：增强策略的关键设计包括：1) 交互元素高亮显示：通过突出显示交互元素，帮助MLLM更好地理解交互行为。2) 故障感知提示(FAP)：根据MLLM容易出现的错误类型，设计相应的提示，引导其生成正确的代码。3) 视觉显著性增强：增强视觉信息的表达，突出与交互相关的视觉特征。4) 视觉-文本描述组合：结合视觉信息和文本描述，提供更全面的交互信息。
🖼️ 关键图片
📊 实验亮点
实验结果表明，现有的MLLM在Interaction2Code基准上表现出不足，尤其是在交互生成方面。通过提出的四种增强策略，MLLM在Interaction2Code上的性能得到了显著提升。例如，故障感知提示(FAP)能够有效减少MLLM在生成交互代码时出现的错误，视觉-文本描述组合能够提高MLLM对复杂交互的理解能力。
🎯 应用场景
该研究成果可应用于自动化网页开发、UI/UX设计辅助、低代码/无代码平台等领域。通过提升MLLM生成交互式网页代码的能力，可以降低网页开发门槛，提高开发效率，并为用户提供更丰富的交互体验。未来，该技术有望应用于更复杂的交互式应用场景，如Web应用、移动应用等。
📄 摘要（原文）
Multimodal Large Language Models (MLLMs) have demonstrated remarkable performance on the design-to-code task, i.e., generating UI code from UI mock-ups. However, existing benchmarks only contain static web pages for evaluation and ignore the dynamic interaction, limiting the practicality, usability and user engagement of the generated webpages. To bridge these gaps, we present the first systematic investigation of MLLMs in generating interactive webpages. Specifically, we formulate the Interaction-to-Code task and establish the Interaction2Code benchmark, encompassing 127 unique webpages and 374 distinct interactions across 15 webpage types and 31 interaction categories. Through comprehensive experiments utilizing state-of-the-art (SOTA) MLLMs, evaluated via both automatic metrics and human assessments, we identify four critical limitations of MLLM on Interaction-to-Code task: (1) inadequate generation of interaction compared with full page, (2) prone to ten types of failure, (3) poor performance on visually subtle interactions, and (4) insufficient undestanding on interaction when limited to single-modality visual descriptions. To address these limitations, we propose four enhancement strategies: Interactive Element Highlighting, Failureaware Prompting (FAP), Visual Saliency Enhancement, and Visual-Textual Descriptions Combination, all aiming at improving MLLMs' performance on the Interaction-toCode task. The Interaction2Code benchmark and code are available in https://github. com/WebPAI/Interaction2Code.