Harnessing Webpage UIs for Text-Rich Visual Understanding

📄 arXiv: 2410.13824v3 📥 PDF

作者: Junpeng Liu, Tianyue Ou, Yifan Song, Yuxiao Qu, Wai Lam, Chenyan Xiong, Wenhu Chen, Graham Neubig, Xiang Yue

分类: cs.CV, cs.CL

发布日期: 2024-10-17 (更新: 2024-11-06)

💡 一句话要点

利用网页UI提升富文本视觉理解能力，解决多模态大模型在结构化环境中的交互问题。

🎯 匹配领域: 支柱九：具身大模型 (Embodied Foundation Models)

关键词: 多模态学习 视觉理解 网页UI 大语言模型 结构化文本 指令生成 数据集构建

📋 核心要点

  1. 多模态大模型在处理富文本和视觉信息融合的结构化环境时面临挑战，现有方法难以有效交互。
  2. 利用文本LLM处理网页UI的结构化文本，生成指令并与UI截图配对，训练多模态模型。
  3. MultiUI数据集训练的模型在Web UI任务上显著提升，并能泛化到非Web UI和非UI领域。

📝 摘要（中文）

本文提出了一种利用网页UI合成通用多模态指令的方法，旨在提升多模态大语言模型（MLLMs）在富文本视觉理解方面的能力，使其能够有效地与结构化环境进行交互。该方法利用基于文本的大语言模型处理来自网页可访问性树的结构化文本表示，从而生成指令，并将其与UI截图配对，用于训练多模态模型。研究者构建了一个名为MultiUI的数据集，包含来自100万个网站的730万个样本，涵盖了各种多模态任务和UI布局。在MultiUI上训练的模型不仅在Web UI任务中表现出色（在VisualWebBench上提升高达48%，在Web代理数据集Mind2Web上元素准确率提升19.1%），而且还能很好地泛化到非Web UI任务，甚至是非UI领域，如文档理解、OCR和图表解释。这些结果表明，Web UI数据在促进各种场景下的富文本视觉理解方面具有广泛的适用性。

🔬 方法详解

问题定义：现有方法在处理富文本和视觉信息融合的结构化环境时存在不足，多模态大模型难以有效理解和交互。特别是在网页UI等场景下，如何让模型理解UI元素的语义并执行相应的操作是一个挑战。现有方法通常依赖人工标注数据，成本高昂且难以覆盖各种UI布局和任务。

核心思路：本文的核心思路是利用网页的结构化信息（例如，可访问性树）作为文本LLM的输入，生成多模态指令。由于文本LLM擅长处理文本信息，因此可以有效地理解UI元素的语义和关系。然后，将生成的指令与UI截图配对，用于训练多模态模型。这种方法避免了人工标注，并且可以利用大量的网页数据来提升模型的性能。

技术框架：整体框架包括以下几个主要步骤：1) 从网页中提取UI截图和可访问性树；2) 使用文本LLM处理可访问性树，生成多模态指令；3) 将指令与UI截图配对，构建训练数据集；4) 使用训练数据集训练多模态模型。该框架的关键在于利用文本LLM生成高质量的指令，以及构建一个包含各种UI布局和任务的大规模数据集。

关键创新：本文最重要的技术创新点在于利用文本LLM处理网页的结构化文本信息，生成多模态指令。与现有方法相比，这种方法避免了人工标注，并且可以利用大量的网页数据来提升模型的性能。此外，本文还构建了一个大规模的MultiUI数据集，涵盖了各种多模态任务和UI布局，为多模态模型的训练提供了充足的数据支持。

关键设计：在生成指令时，使用了Prompt Engineering来指导文本LLM生成更准确、更自然的指令。数据集构建方面，精心设计了数据收集流程，确保数据的多样性和质量。模型训练方面，采用了常见的视觉语言模型架构，并针对Web UI任务进行了微调。具体参数设置和网络结构细节在论文中有详细描述（未知）。

🖼️ 关键图片

img_0

📊 实验亮点

实验结果表明，在MultiUI数据集上训练的模型在VisualWebBench上取得了高达48%的性能提升，在Mind2Web数据集上元素准确率提升了19.1%。更重要的是，该模型还能够很好地泛化到非Web UI任务，甚至是非UI领域，如文档理解、OCR和图表解释。这些结果表明，Web UI数据在促进各种场景下的富文本视觉理解方面具有广泛的适用性。

🎯 应用场景

该研究成果可应用于智能助手、自动化测试、网页内容理解、信息检索等领域。例如，可以开发能够自动完成网页操作的智能助手，或者用于自动化测试网页应用的UI。此外，该技术还可以用于提升搜索引擎对网页内容的理解能力，从而提供更准确的搜索结果。未来，该技术有望应用于更广泛的领域，例如移动应用UI理解、桌面应用UI理解等。

📄 摘要（原文）

Text-rich visual understanding-the ability to process environments where dense textual content is integrated with visuals-is crucial for multimodal large language models (MLLMs) to interact effectively with structured environments. To enhance this capability, we propose synthesizing general multimodal instructions from webpage UIs using text-based large language models (LLMs). Despite lacking direct visual input, text-based LLMs are able to process structured text representations from webpage accessibility trees. These instructions are then paired with UI screenshots to train multimodal models. We introduce MultiUI, a dataset containing 7.3 million samples from 1 million websites, covering diverse multimodal tasks and UI layouts. Models trained on MultiUI not only excel in web UI tasks-achieving up to a 48% improvement on VisualWebBench and a 19.1% boost in element accuracy on a web agent dataset Mind2Web-but also generalize surprisingly well to non-web UI tasks and even to non-UI domains, such as document understanding, OCR, and chart interpretation. These results highlight the broad applicability of web UI data for advancing text-rich visual understanding across various scenarios.