ScreenAI：谷歌 UI 理解视觉模型

作者：Google Research 软件工程师 Srinivas Sunkara 和 Gilles Baechler

屏幕用户界面（UI）与信息图（例如图表、示意图和表格）在人类沟通及人机交互中发挥着重要作用，因为它们能够提供丰富且具备交互性的用户体验。UI 和信息图采用了相似的设计原则与视觉语言（例如图标和布局），这为构建一个能够理解、推理这些界面并与之交互的统一模型提供了机会。然而，由于信息图和 UI 十分复杂，呈现形式也多种多样，因此带来了独特的建模挑战。

为此，我们推出了“ScreenAI：用于理解 UI 和信息图的视觉语言模型”。ScreenAI 在 PaLI 架构的基础上，引入了 pix2struct 的灵活图块划分策略。我们使用由多种数据集和任务组成的独特混合数据来训练 ScreenAI，其中包括一项全新的 Screen Annotation 任务，要求模型识别屏幕上的 UI 元素信息，即类型、位置和描述。这些文本标注可以为大语言模型（LLM）提供屏幕描述，使其能够大规模自动生成问答（QA）、UI 导航和摘要训练数据集。ScreenAI 仅有 5B 参数，却在基于 UI 和信息图的任务 WebSRC 与 MoTIF 上取得了当前最佳结果；与规模相近的模型相比，它在 Chart QA、DocVQA 和 InfographicVQA 上也实现了同类最佳性能。我们还将发布三个新数据集：用于评估模型布局理解能力的 Screen Annotation，以及用于更全面评估模型 QA 能力的 ScreenQA Short 和 Complex ScreenQA。

ScreenAI 的架构以 PaLI 为基础，由一个多模态编码器模块和一个自回归解码器组成。PaLI 编码器使用视觉 Transformer（ViT）生成图像嵌入，并通过一个多模态编码器，将图像嵌入与文本嵌入拼接后的结果作为输入。这种灵活的架构使 ScreenAI 能够解决那些可以重新表述为“文本＋图像到文本”的视觉任务。

在 PaLI 架构之上，我们采用了 pix2struct 提出的灵活图块划分策略。它不使用固定的网格模式，而是以保留输入图像原始宽高比的方式选择网格尺寸。这使 ScreenAI 能够良好处理各种不同宽高比的图像。

ScreenAI 模型分两个阶段训练：先进行预训练，再进行微调。首先，通过自监督学习自动生成数据标签，再使用这些标签训练 ViT 和语言模型。在微调阶段，ViT 的参数被冻结；这一阶段所使用的大部分数据都由人工评审员手动标注。

ScreenAI 模型架构。

为了构建 ScreenAI 的预训练数据集，我们首先收集了大量来自不同设备的屏幕截图，包括桌面设备、手机和平板电脑。具体做法是使用公开可访问的网页，并沿用移动应用 RICO 数据集所采用的程序化探索方法。随后，我们使用一个基于 DETR 模型的布局标注器，识别并标注各种 UI 元素（例如图像、象形图标、按钮和文本）及其空间关系。对于象形图标，我们还会使用一个能够区分 77 种不同图标类型的图标分类器做进一步分析。要理解图标所传达的细微信息，这种细粒度分类至关重要。对于分类器未涵盖的图标，以及信息图和图像，我们使用 PaLI 图像描述模型生成描述性文本，以提供上下文信息。我们还会使用光学字符识别（OCR）引擎提取并标注屏幕上的文本内容。最后，我们将 OCR 文本与此前生成的标注结合起来，为每个屏幕创建详细描述。

一张带有自动生成标注的移动应用屏幕截图，其中包含 UI 元素及其描述。例如，TEXT 元素还包含 OCR 识别出的文本内容，IMAGE 元素包含图像描述，LIST_ITEM 则包含其所有子元素。

基于 LLM 的数据生成

我们使用 PaLM 2，通过一个两步流程生成输入—输出对，从而提升预训练数据的多样性。首先，使用前文所述的方法生成屏幕标注；然后，围绕这套 schema 编写 prompt，让 LLM 创建合成数据。这个过程需要进行 prompt engineering，并通过反复迭代不断完善，才能找到有效的 prompt。我们还会通过人工验证，根据质量阈值评估生成数据的质量。

用于生成 QA 数据的 prompt 示例。

通过将 LLM 的自然语言能力与结构化 schema 相结合，我们可以模拟广泛的用户交互和使用场景，生成合成但逼真的任务。具体来说，我们生成三类任务：

• 问答：要求模型回答有关屏幕截图内容的问题，例如：“这家餐厅什么时候营业？”

• 屏幕导航：要求模型将自然语言指令转换为屏幕上可执行的操作，例如：“点击搜索按钮。”

• 屏幕摘要：要求模型用一到两句话概括屏幕内容。

使用现有 ScreenAI 模型和 LLM 为 QA、摘要及导航任务生成数据的工作流程框图。每项任务都会使用自定义 prompt，突出计数类问题、需要推理的问题等特定需求。

由 LLM 生成的数据，包括屏幕 QA、导航和摘要示例。在导航示例中，操作目标的边界框以红色显示在屏幕截图上。

实验与结果

如前所述，ScreenAI 分两个阶段训练：预训练和微调。预训练数据的标签通过自监督学习获得，微调数据的标签则由人工评审员提供。

我们使用公开的 QA、摘要和导航数据集，以及与 UI 相关的多种任务，对 ScreenAI 进行微调。在 QA 方面，我们采用多模态与文档理解领域中成熟的基准，包括 ChartQA、DocVQA、Multi page DocVQA、InfographicVQA、OCR VQA、Web SRC 和 ScreenQA。在导航方面，使用的数据集包括 Referring Expressions、MoTIF、Mug 和 Android in the Wild。最后，我们使用 Screen2Words 进行屏幕摘要训练。除这些微调数据集外，我们还使用三个全新的基准评估微调后的 ScreenAI 模型：

• Screen Annotation：用于评估模型的布局标注与空间理解能力。

• ScreenQA Short：ScreenQA 的一种变体，其标准答案经过缩短，只保留相关信息，因此能够更好地与其他 QA 任务保持一致。

• Complex ScreenQA：以难度更高的问题补充 ScreenQA Short，包括计数、算术、比较和无法回答的问题，并包含多种宽高比的屏幕。

微调后的 ScreenAI 模型在多项基于 UI 和信息图的任务 WebSRC 与 MoTIF 上取得了当前最佳结果；与规模相近的模型相比，它在 Chart QA、DocVQA 和 InfographicVQA 上也实现了同类最佳性能。ScreenAI 在 Screen2Words 和 OCR-VQA 上同样展现出有竞争力的表现。此外，我们还报告了模型在此次推出的新基准数据集上的结果，为后续研究提供基线。

将 ScreenAI 的模型性能与规模相近的当前最佳（SOTA）模型进行比较。

接下来，我们研究了 ScreenAI 的扩展能力。结果显示，在所有任务上，增大模型规模都能提升性能；即使模型达到目前最大的规模，性能提升也尚未饱和。

模型性能会随规模增大而提升；即使达到最大的 5B 参数规模，性能仍未饱和。

我们推出了 ScreenAI 模型及其统一表示形式，让我们能够利用所有这些领域的数据开发自监督学习任务。我们还展示了使用 LLM 生成数据所带来的影响，并研究了如何通过调整训练数据的混合比例，提升模型在特定方面的性能。我们综合运用这些技术，构建了经过多任务训练的模型，使其在多项公开基准上的表现能够与当前最佳方法竞争。不过，我们也注意到，这种方法与大型模型相比仍有差距，需要进一步研究才能弥合这一差距。

本项目由 Maria Wang、Fedir Zubach、Hassan Mansoor、Vincent Etter、Victor Carbune、Jason Lin、Jindong Chen 和 Abhanshu Sharma 共同完成。感谢 Fangyu Liu、Xi Chen、Efi Kokiopoulou、Jesse Berent、Gabriel Barcik、Lukas Zilka、Oriana Riva、Gang Li、Yang Li、Radu Soricut 和 Tania Bedrax-Weiss 提供的深刻反馈并参与讨论，也感谢 Rahul Aralikatte、Hao Cheng 和 Daniel Kim 对数据准备工作的支持。我们还要感谢 Jay Yagnik、Blaise Aguera y Arcas、Ewa Dominowska、David Petrou 和 Matt Sharifi 提供的领导、愿景与支持。我们也非常感谢 Tom Small 协助制作本文中的动画。

人机交互与可视化

使用现有 ScreenAI 模型和 LLM 为 QA、摘要及导航任务生成数据的工作流程框图。每项任务都会使用自定义 prompt，突出计数类问题、需要推理的问题等特定需求。

模型性能会随规模增大而提升；即使达到最大的 5B 参数规模，性能仍未饱和。

由 LLM 生成的数据，包括屏幕 QA、导航和摘要示例。在导航示例中，操作目标的边界框以红色显示在屏幕截图上。

将 ScreenAI 的模型性能与规模相近的当前最佳（SOTA）模型进行比较。

一张带有自动生成标注的移动应用屏幕截图，其中包含 UI 元素及其描述。例如，TEXT 元素还包含 OCR 识别出的文本内容，IMAGE 元素包含图像描述，LIST_ITEM 则包含其所有子元素。