MM-WebAgent: A Hierarchical Multimodal Web Agent for Webpage Generation

随着人工智能技术的进步，网页设计领域也在不断演变。传统的网页生成方法主要依赖于代码生成技术，通过解析用户的自然语言请求来生成HTML/CSS代码。然而，这种方法在处理多模态内容时存在局限性，因为网页不仅仅是文本和代码，还包括图像、视频和图表等异构元素。这些元素的内容、风格和几何形状必须与全局布局和语义意图相一致。现有的方法通常通过检索或占位符来填充这些元素，然后独立生成或插入资产，这往往导致风格不一致和全局连贯性差的问题。为了应对这些挑战，MM-WebAgent提出了一种新的分层多模态网页生成框架，通过分层规划和自反思机制来优化多模态内容的生成和集成。

多模态网页生成的核心问题在于如何协调异构元素的生成，使其在视觉上和语义上与全局布局保持一致。传统的代码生成方法在处理多模态内容时，往往将其视为静态或外部提供的元素，缺乏对新颖、语义对齐和风格一致的多模态内容的生成能力。此外，现有的网页生成方法在处理复杂的网页布局时，容易出现风格不一致和全局连贯性差的问题。这些问题不仅影响了网页的视觉效果，也影响了用户的体验。因此，如何在多模态网页生成中实现元素的协调生成和集成，是一个亟待解决的难题。

MM-WebAgent的核心创新在于其分层代理框架和自反思机制的结合。首先，该方法将多模态生成视为一个分层的规划和优化过程，区别于传统的代码生成方法。通过全局布局规划和局部元素规划，确保多模态组件在页面结构中的原生集成。其次，引入了多级自反思机制，能够在局部和全局层面上迭代优化内容和布局。这种机制通过分析生成的网页截图和HTML代码，进行有针对性的编辑，确保布局、间距和视觉风格的一致性。此外，该框架还提出了一套新的多模态网页生成基准和评估协议，为系统性的性能评估提供了工具。

MM-WebAgent的分层代理框架包括以下几个关键步骤：

• �� 全局布局规划：定义页面的节层次结构、空间组织和页面级别的风格属性，并为多模态组件引入显式的占位符。

• �� 局部元素规划：根据全局上下文构建局部计划，指导内容生成。每个局部计划包括上下文信息和元属性，描述元素的功能角色和风格指导。

• �� 计划执行：将全局布局计划转换为网页的HTML/CSS结构，并通过指定的生成工具生成相应的资产。

• �� 自反思机制：通过局部、上下文和全局层面的自反思来优化生成的网页，确保每个元素在语义上正确且视觉上协调。

实验设计包括在MM-WebAgent-Bench和WebGen-Bench基准测试上的性能评估。MM-WebAgent-Bench测试多模态网页生成的多样性和质量，包括信息性、分析性、创造性和商业用途的网页。WebGen-Bench主要测试功能性后端代码、逻辑和组件完整性。实验中使用的基线方法包括代码生成和代理方法，如OpenAI-GPT-5.1、Qwen2.5-Coder等。评估指标包括全局布局、风格一致性、美学质量，以及图像、视频和图表的质量和集成度。消融实验用于验证分层规划和自反思机制的有效性。

实验结果表明，MM-WebAgent在多模态元素生成和集成方面优于基线方法。在MM-WebAgent-Bench基准测试中，其平均得分为0.75，显著高于代码生成和代理基线方法，尤其在图像、视频和图表等多模态元素的生成和集成上表现突出。在WebGen-Bench测试中，尽管该任务主要测试功能性后端代码，MM-WebAgent仍表现出色，显示出其在复杂多模态生成任务中的竞争力。消融实验表明，分层规划和自反思机制的引入显著提高了多模态内容的协调性和整体性能，尤其是在图像和视频等局部指标上表现出明显提升。

MM-WebAgent在多个应用场景中具有潜在价值。首先，在网页设计中，该方法可以自动生成视觉一致且语义连贯的网页，减少人工设计的工作量。其次，在电子商务平台中，可以通过生成个性化的产品展示页面，提高用户的购物体验。此外，在教育和培训领域，该方法可以用于生成交互式的学习材料，增强学习效果。为了实现这些应用，需要确保生成的内容在视觉和语义上与用户需求保持一致，并具备良好的用户体验。

尽管MM-WebAgent在多模态网页生成中表现出色，但仍存在一些局限性。首先，该方法在处理极其复杂的网页布局时可能会遇到性能瓶颈，尤其是在需要大量多模态元素的场景中。其次，尽管自反思机制能够提高内容质量，但在某些情况下可能导致计算开销增加，影响生成效率。此外，该方法在处理特定类型的多模态内容（如动态视频）时可能需要进一步优化，以提高生成的流畅性和一致性。未来的研究方向包括优化自反思机制以减少计算开销，扩展框架以支持更多类型的多模态内容，以及在更大规模的真实世界数据集上进行验证。