【大模型系列】MultiUI(2024.11)

本文链接：https://blog.csdn.net/kabuto_hui/article/details/144896237

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