ShowUI：新加坡国立联合微软推出用于 GUI 自动化的视觉-语言-操作模型

2024-12-01 19

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

图像搜索，7款服务类型 1个月

简介： ShowUI是由新加坡国立大学Show Lab和微软联合推出的视觉-语言-行动模型，旨在提升图形用户界面（GUI）助手的效率。该模型通过UI引导的视觉令牌选择和交错视觉-语言-行动流，有效减少计算成本并提高训练效率。ShowUI在小规模高质量数据集上表现出色，展现出在GUI自动化领域的潜力。

❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日跟你分享最新的 AI 资讯和开源应用，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦

🚀 快速阅读

模型介绍：ShowUI是新加坡国立大学和微软联合推出的视觉-语言-行动模型，专注于提升GUI自动化效率。
主要功能：包括UI引导的视觉令牌选择、交错视觉-语言-行动流、小规模高质量数据集的使用等。
技术特点：通过优化视觉处理和数据管理，减少计算成本并提高训练效率。

正文（附运行示例）

ShowUI 是什么

公众号: 蚝油菜花 - ShowUI

ShowUI是由新加坡国立大学Show Lab和微软共同开发的视觉-语言-行动模型，旨在提升图形用户界面（GUI）助手的效率。该模型通过UI引导的视觉令牌选择，减少计算成本，并通过交错视觉-语言-行动流统一GUI任务中的多样化需求。此外，ShowUI还管理视觉-行动历史，以增强训练效率。

ShowUI使用小规模但高质量的指令跟随数据集，用256K数据实现了75.1%的零样本截图定位准确率，训练速度提升了1.4倍，展现出在GUI视觉代理领域的潜力。

ShowUI 的主要功能

UI引导的视觉令牌选择：将屏幕截图构建为UI连接图，自适应地识别冗余关系，在自注意力模块中作为选择令牌的标准，减少计算成本。
交错视觉-语言-行动流：灵活地统一GUI任务中的多样化需求，有效管理视觉-行动历史，提高训练效率。
小规模高质量GUI指令跟随数据集：基于精心策划数据和采用重采样策略解决数据类型不平衡的问题，提高模型的准确性和效率。
零样本截图定位：在没有额外训练的情况下，直接对屏幕截图进行理解和操作的能力。
GUI自动化：自动化执行GUI任务，如点击、输入等，提高人机交互效率。

ShowUI 的技术原理

UI引导的视觉令牌选择：
- 将屏幕截图分割成规则的补丁（patches），每个补丁作为一个节点。
- 识别具有相同RGB值的相邻补丁，构建UI连接图，将视觉冗余区域组合起来。
- 在自注意力模块中，基于UI连接图选择性地处理视觉令牌，减少计算量。
交错视觉-语言-行动流：
- 结构化GUI动作，以JSON格式表示，统一不同设备上的动作。
- 基于交替处理视觉、语言和行动数据，管理复杂的交互历史。
- 在训练中，用多轮对话方式，提高数据利用效率。
数据策划和重采样策略：
- 精心策划和选择高质量的训练数据，而不是简单地聚合所有可用数据源。
- 基于重采样策略，解决不同设备和任务类型之间的数据不平衡问题。
高效处理高分辨率UI截图：针对高分辨率UI截图，优化模型以有效处理长令牌序列，减少计算成本。
模型架构：
- 基于Qwen2-VL-2B模型，整合视觉编码器和语言模型，处理视觉和文本数据。
- 基于特定的数据食谱和训练策略，提高模型在GUI任务中的性能。

如何运行 ShowUI

1. 环境准备

安装 Miniconda：通过此链接下载并安装 Miniconda（Python 版本 >= 3.11）。

1.1. 克隆仓库

打开 Conda 终端（安装 Miniconda 后，它将出现在开始菜单中），运行以下命令：

git clone https://github.com/showlab/ShowUI.git
cd ShowUI

1.2. 安装依赖

pip install -r requirements.txt

1.3. 启动界面

python app.py

成功启动后，终端将显示两个URL：

* Running on local URL:  http://127.0.0.1:7860
* Running on public URL: https://xxxxxxxxxxxxxxxx.gradio.live (不要与其他人分享此链接，否则他们将能够控制您的计算机。)

2. 加载模型

import ast
import torch
from PIL import Image, ImageDraw
from qwen_vl_utils import process_vision_info
from transformers import Qwen2VLForConditionalGeneration, AutoTokenizer, AutoProcessor

def draw_point(image_input, point=None, radius=5):
    if isinstance(image_input, str):
        image = Image.open(BytesIO(requests.get(image_input).content)) if image_input.startswith('http') else Image.open(image_input)
    else:
        image = image_input

    if point:
        x, y = point[0] * image.width, point[1] * image.height
        ImageDraw.Draw(image).ellipse((x - radius, y - radius, x + radius, y + radius), fill='red')
    display(image)
    return

model = Qwen2VLForConditionalGeneration.from_pretrained(
    "showlab/ShowUI-2B",
    torch_dtype=torch.bfloat16,
    device_map="auto"
)

min_pixels = 256*28*28
max_pixels = 1344*28*28

processor = AutoProcessor.from_pretrained("Qwen/Qwen2-VL-2B-Instruct", min_pixels=min_pixels, max_pixels=max_pixels)

3. UI 定位

img_url = 'examples/web_dbd7514b-9ca3-40cd-b09a-990f7b955da1.png'
query = "Nahant"

_SYSTEM = "Based on the screenshot of the page, I give a text description and you give its corresponding location. The coordinate represents a clickable location [x, y] for an element, which is a relative coordinate on the screenshot, scaled from 0 to 1."
messages = [
    {
   
        "role": "user",
        "content": [
            {
   "type": "text", "text": _SYSTEM},
            {
   "type": "image", "image": img_url, "min_pixels": min_pixels, "max_pixels": max_pixels},
            {
   "type": "text", "text": query}
        ],
    }
]

text = processor.apply_chat_template(
    messages, tokenize=False, add_generation_prompt=True,
)
image_inputs, video_inputs = process_vision_info(messages)
inputs = processor(
    text=[text],
    images=image_inputs,
    videos=video_inputs,
    padding=True,
    return_tensors="pt",
)
inputs = inputs.to("cuda")

generated_ids = model.generate(**inputs, max_new_tokens=128)
generated_ids_trimmed = [
    out_ids[len(in_ids) :] for in_ids, out_ids in zip(inputs.input_ids, generated_ids)
]
output_text = processor.batch_decode(
    generated_ids_trimmed, skip_special_tokens=True, clean_up_tokenization_spaces=False
)[0]

click_xy = ast.literal_eval(output_text)
# [0.73, 0.21]

draw_point(img_url, click_xy, 10)

4. UI 导航

img_url = 'examples/chrome.png'
split='web'
system_prompt = _NAV_SYSTEM.format(_APP=split, _ACTION_SPACE=action_map[split])
query = "Search the weather for the New York city."

messages = [
    {
   
        "role": "user",
        "content": [
            {
   "type": "text", "text": system_prompt},
            {
   "type": "image", "image": img_url, "min_pixels": min_pixels, "max_pixels": max_pixels},
            {
   "type": "text", "text": query}
        ],
    }
]

text = processor.apply_chat_template(
    messages, tokenize=False, add_generation_prompt=True,
)
image_inputs, video_inputs = process_vision_info(messages)
inputs = processor(
    text=[text],
    images=image_inputs,
    videos=video_inputs,
    padding=True,
    return_tensors="pt",
)
inputs = inputs.to("cuda")

generated_ids = model.generate(**inputs, max_new_tokens=128)
generated_ids_trimmed = [
    out_ids[len(in_ids) :] for in_ids, out_ids in zip(inputs.input_ids, generated_ids)
]
output_text = processor.batch_decode(
    generated_ids_trimmed, skip_special_tokens=True, clean_up_tokenization_spaces=False
)[0]

print(output_text)
# {'action': 'CLICK', 'value': None, 'position': [0.49, 0.42]},
# {'action': 'INPUT', 'value': 'weather for New York city', 'position': [0.49, 0.42]},
# {'action': 'ENTER', 'value': None, 'position': None}

资源

项目官网：https://mimictalk.github.io/
GitHub 仓库：https://github.com/showlab/ShowUI
HuggingFace 模型库：https://huggingface.co/datasets/showlab/ShowUI-desktop-8K
arXiv 技术论文：https://arxiv.org/pdf/2411.17465
在线体验 Demo：https://huggingface.co/spaces/showlab/ShowUI