ShowUI-2B视觉语言动作模型

随着人工智能技术的不断发展，用户界面交互正逐渐走向智能化。尤其是在日常操作繁琐、交互频率高的图形用户界面（Graphical User Interface，简称GUI）领域，能够自动化完成复杂任务的智能助手成为研究热点。而近期推出的ShowUI-2B模型，通过整合视觉、语言和动作能力，带来了全新的交互方式，显著提高了图形界面操作的效率和智能化程度。

ShowUI-2B 是专为 GUI 代理设计的轻量级（2B）视觉-语言-动作模型，可以在这里尝试其在线演示，代码可以在Github访问。

1、ShowUI-2B模型简介

ShowUI-2B是一种先进的视觉-语言-动作（Vision-Language-Action）模型，旨在通过深度学习技术为用户提供更智能、更自然的界面交互体验。该模型的独特之处在于能够在复杂的界面环境中进行多模态理解与决策，适应多种类型的GUI任务，例如网页导航、桌面应用操作以及多回合交互问答。

其核心目标是解决以下问题：

• 高效理解图形界面信息：通过优化视觉和语言信息的整合，使模型能够快速识别重要界面元素。
• 动态任务执行：适应用户的多样化需求，实现连续的多步操作。
• 跨任务迁移能力：在不同的GUI任务中无需额外训练即可直接适用。

1.1 技术创新

ShowUI-2B之所以能在众多模型中脱颖而出，得益于其几项关键技术创新：

a) 基于界面的视觉Token优化：

• 传统问题：许多模型在处理GUI界面截图时，往往直接输入完整截图进行分析，导致大量无关信息增加计算成本。
• ShowUI-2B方案：采用了界面引导的视觉Token选择机制，将截图转化为基于用户界面结构的图形表示，仅保留关键的视觉元素。这种方法显著减少了冗余数据，使训练效率提高1.4倍。

b) 多模态信息的流式处理

• ShowUI-2B引入了视觉-语言-动作交互的流式架构。模型通过分析用户的操作历史和视觉界面变化，能够在多回合交互中动态调整决策。例如，在表单填写任务中，模型能够记住用户之前的选择并完成下一步操作。

c) 数据集优化与增强

• 小规模、高质量：ShowUI-2B的训练数据集虽然规模不大，但其选择了高度精炼的多模态任务样本。
• 数据再采样策略：对于一些样本不足的任务，模型通过动态采样技术提升了对这些任务的适应能力。

1.2 性能评估与突破

在多项测试中，ShowUI-2B表现出了显著的性能优势：

• 多任务通用性：在网页导航、表单填写和多回合对话等任务中，ShowUI-2B的零样本任务完成率达到了75.1%，显著优于同类模型。
• 视觉处理效率：在界面元素选择上，该模型平均减少了33%的冗余Token，训练和推理效率均得到了提升。
• 多回合交互流畅性：在需要上下文记忆的复杂任务中，模型的准确率和完成速度较上一代模型有显著提高。

1.3 实际应用场景

ShowUI-2B的技术突破使其在多个实际场景中具有广泛的应用潜力：

• 智能网页助手：通过理解网页布局和文本内容，SHowUI-2B可以帮助用户快速定位所需信息，甚至完成复杂的在线操作任务，如表单自动填写、网页爬取等。
• 移动应用交互优化：针对移动端操作复杂、屏幕小的特点，模型能够帮助用户快速完成多步操作，减少手动操作的步骤。
• 生产力工具增强：在图形化生产力工具中，SHowUI-2B可以通过动态理解用户需求，提高操作效率，例如自动生成报告、优化数据输入流程等。
• 辅助技术与无障碍设计：对于视力障碍或行动不便的用户，SHowUI-2B可以通过语音或触觉反馈提供精准的操作建议，提升无障碍技术的普及度。

2、ShowUI-2B模型快速上手

加载模型：

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)

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)

这将使结果可视化，如（其中红点为 [x,y]）：

UI导航：

设置系统提示：

_NAV_SYSTEM = """You are an assistant trained to navigate the {_APP} screen. 
Given a task instruction, a screen observation, and an action history sequence, 
output the next action and wait for the next observation. 
Here is the action space:
{_ACTION_SPACE}
"""

_NAV_FORMAT = """
Format the action as a dictionary with the following keys:
{'action': 'ACTION_TYPE', 'value': 'element', 'position': [x,y]}

If value or position is not applicable, set it as `None`.
Position might be [[x1,y1], [x2,y2]] if the action requires a start and end position.
Position represents the relative coordinates on the screenshot and should be scaled to a range of 0-1.
"""

action_map = {
'web': """
1. `CLICK`: Click on an element, value is not applicable and the position [x,y] is required. 
2. `INPUT`: Type a string into an element, value is a string to type and the position [x,y] is required. 
3. `SELECT`: Select a value for an element, value is not applicable and the position [x,y] is required. 
4. `HOVER`: Hover on an element, value is not applicable and the position [x,y] is required.
5. `ANSWER`: Answer the question, value is the answer and the position is not applicable.
6. `ENTER`: Enter operation, value and position are not applicable.
7. `SCROLL`: Scroll the screen, value is the direction to scroll and the position is not applicable.
8. `SELECT_TEXT`: Select some text content, value is not applicable and position [[x1,y1], [x2,y2]] is the start and end position of the select operation.
9. `COPY`: Copy the text, value is the text to copy and the position is not applicable.
""",

'phone': """
1. `INPUT`: Type a string into an element, value is not applicable and the position [x,y] is required. 
2. `SWIPE`: Swipe the screen, value is not applicable and the position [[x1,y1], [x2,y2]] is the start and end position of the swipe operation.
3. `TAP`: Tap on an element, value is not applicable and the position [x,y] is required.
4. `ANSWER`: Answer the question, value is the status (e.g., 'task complete') and the position is not applicable.
5. `ENTER`: Enter operation, value and position are not applicable.
"""
}

执行操作：

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": "text", "text": f'Task: {query}'},
            # {"type": "text", "text": PAST_ACTION},
            {"type": "image", "image": img_url, "min_pixels": min_pixels, "max_pixels": max_pixels},
        ],
    }
]

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}

结果：

3、结束语

ShowUI-2B在当前已经取得了显著的技术突破，但未来仍有许多值得探索的方向：

• 更大规模的训练数据：通过引入更多真实场景的数据集，进一步提升模型的泛化能力。
• 跨设备兼容性：适配不同操作系统和设备的界面，扩展其应用范围。
• 实时交互优化：降低推理延迟，使模型能够在实时任务中表现更加出色。

ShowUI-2B为图形界面智能助手的开发设立了新标杆。其创新的视觉-语言-动作整合能力，不仅提升了现有交互体验的智能化程度，也为未来更广泛的人工智能应用奠定了基础。随着技术的进一步发展，我们有理由相信，SHowUI-2B将成为推动智能助手普及的重要力量，让人机交互变得更加自然和高效。

原文链接：ShowUI-2B

汇智网翻译整理，转载请标明出处