• Paper：https://arxiv.org/pdf/2410.13824
• Github：https://neulab.github.io/MultiUI/
• Author：Junpeng Liu et al., 卡内基梅隆

核心1： 先基于text-based LLMs获取网页的accessibility tree(辅助功能树，https://200t.w3cschool.cn/mdn_web/mdn-auxiliary-function-tree.html)，然后再与网页截图一起作为多模态数据，训练多模态模型。
核心2： 公开了MultiUI数据集，从1M网页中收集了7.3M的样本，包含多种UI任务（3类，9种任务）和界面

1 模型结构

• 使用Llama-3-70b-Instruct来管理网页：识别有问题的内容如成人、赌博、暴力、歧视等
• 任务提取：Llama-3-70b-Instruct、GPT-4o mini和基于规则的方法来提取3类任务：视觉理解和推理、文本识别和grounding任务
• 对于每个任务，使用被GPT-4o处理过的不同指令模板来生成任务样本

1.1 数据集构建

利用辅助功能树和现成的LLM来构建数据自动化收集管道，主要分为4个步骤：

• 原始网页数据抓取（raw website data scraping）
• 网页管理（web curation）
• 任务提取（task extraction）
• 指令构建（instruction construction）

1.1.1 原始网页数据抓取

构建原始网页数据集，包含：

• HTML/CSS
• 高分辨率的屏幕截图
• 辅助功能树：与原始HTML相比，侧重于最重要的视觉元素如按钮、链接和标题

网站整体屏幕截图肯定是高大于宽的，文章采用随机宽高比来截图，用来模拟网页在Win10(0.5~1.5)和iPhone12 Pro(1.5~2.5)上渲染。

• URL：来源于FineWeb
• 工具：playwright

1.1.2 网页管理

使用一个额外的模型Llama-3-70B-Instruct来分析网站的辅助功能树，来识别有问题的内容如成人、暴力、赌博、歧视、网络错误(403 forbidden, 503 bad gateway)等，有问题的数据被删除掉。使用的提示词如下：

1.1.3 任务提取

构建了一组对于web交互至关重要的任务：

• 视觉理解和推理：提高模型描述网页整体结构和特定视觉元素识别的能力，同时增强问答和动作预测的能力
  • Webpage Captioning：理解和总结网页的整体结构和内容
  • Webpage QA：回答有关网页种非图像内容的问题
  • Embedding Image Caption：描述web页面种得嵌入图像
  • Embedding Image QA：回答嵌入图像的相关问题
  • Action Prediction：动作预测，预测点击特定元素的结果
• 文本识别
  • Element OCR：识别超过20个单词的元素，然后构造OCR任务，每个任务包含屏幕截图和文本的bounding box信息
  • Heading OCR：侧重于识别和提取标题
• grounding
  • Action Grounding：预测响应特定指定的点击位置
  • Element Grounding：根据元素的文本描述识别元素的位置

构建提示词如下：

• webpage captions

• webpage QA paris

• Embedded Image QA samples

• Action Grounding

• Action prediction

1.1.4 构建指令模板

针对每个任务，构建多种指令模板，首先构造详细的任务描述和初始示例模板，使用GPT-4o构建200个不同的提示词模板。

2 训练细节

• 模型结构：
  • LLM：Qwen2-7B-Instruct
  • Visual encoder：Siglip
• 训练数据
  • LLaVA1.6
  • MultiUI
• 高分辨率图像处理方式：动态分辨率策略（动态切片+全图输入提供全局信息）
• 训练策略：
  • Stage1：GUI Knowledge Learning，在95%的MultiUI数据上进行微调，增强web/UI相关的理解能力
  • Stage2：Visual Instruction Tuning，视觉指令微调，使用LLaVA1.6+5%的MultiUI

3 指标

3.1 GUI understanding and grounding

3.2 GUI agent task

3.3 General multimodal task