【Cradle 源码解析二】由眼入心:LMM 如何“看懂”屏幕与 UI 识别机制

前言

在上一篇架构总览中,我们知道 Cradle 像人一样通过"看屏幕"来操作电脑。但你是否想过:为什么 GPT-4V 这么强了,Cradle 还需要接入 OCR 和目标检测模型?

原因很简单:目前的 LMM(多模态大模型)擅长"描述场景"(例如:"这是一张游戏截图"),但极其不擅长"精确定位"(例如:"'开始游戏'按钮的中心坐标是 (150, 400)")。

在 GCC(通用计算机控制)场景下,坐标偏离 10 个像素可能就意味着点击无效。本篇将深入 Cradle 的 providerenvironment 模块,揭秘它是如何将一幅原本只有像素的截图,转化为 Agent 可以理解并精确操作的结构化语义信息

1. 视觉处理流水线 (The Visual Pipeline)

在代码层面,Cradle 的视觉处理不是一步到位的,而是一个精密的流水线。当 agent.step() 被触发时,视觉数据的流向如下:

  1. Capture (捕获):获取原始屏幕截图。

  2. Augmentation (增强):通过辅助工具(Tools)提取元数据。

  3. Annotation (标注):将提取的信息(如边框、标签)"画"回图片上,或者生成辅助文本。

  4. Prompting (提示):将处理后的图片 + 结构化文本喂给 LMM。

这一部分的核心代码主要集中在 cradle/provider/ 目录下。

2. 辅助感知:OCR 与 目标检测

Cradle 不单纯依赖 LMM 的"裸眼"视力,而是给它戴上了两副"特制眼镜"。

2.1 文字识别 (OCR) ------ 读懂菜单与日志

对于软件菜单、游戏内的对话框、任务提示,Cradle 使用 OCR 引擎(如 PaddleOCR 或系统自带 OCR)来提取文本及其坐标。

源码逻辑简析:

在 cradle/provider/ocr_provider.py 中,通常会有一个 extract_text 方法。它不仅返回文字内容,最重要的是返回 Bounding Box (bbox)。

Python

复制代码
# 伪代码示意
def process_screenshot(image):
    # OCR 识别
    ocr_results = ocr_model.detect(image)
    # ocr_results = [{'text': 'File', 'bbox': [10, 10, 50, 30]}, ...]
    return ocr_results

2.2 图标与物体检测 (Object Detection) ------ 识别 UI 元素

对于没有文字的图标(如"设置"齿轮、"攻击"剑图标),OCR 束手无策。Cradle 引入了开集目标检测模型(Open-set Object Detection,如 GroundingDINO)或图像分割模型(如 SAM)。

通过 Text Prompt(例如输入 "icon", "button"),模型可以在屏幕上把所有可能是 UI 交互元素的区域框选出来。

3. 核心机制:SoM (Set-of-Mark) 与 坐标映射

拿到 OCR 和 Detection 的结果后,Cradle 如何告诉 GPT-4V 呢?这里用到了一个关键技术:Set-of-Mark (SoM) 思想。

Cradle 不会直接把坐标 (256, 1024) 扔给大模型(大模型对数字不敏感),而是在图片上画圈

处理流程:

  1. 打标:Cradle 会在原始截图上,根据 OCR 和检测到的 bbox,画上红框或数字标签(1, 2, 3...)。

  2. 映射表 :代码内部维护一张映射表 Label Map

    • Tag 1 -> File Menu -> Center (30, 15)

    • Tag 2 -> Chrome Icon -> Center (100, 200)

  3. 视觉提示:生成的图片上密密麻麻标满了数字。

为什么这么做?

这样大大降低了 LMM 的推理难度。LMM 只需要输出:"点击标签 2"。然后 Cradle 的底层代码查表得到标签 2 的真实坐标,通过鼠标驱动去点击。这是一种**"大模型决策,传统算法执行"**的完美分工。

4. Prompt 构建:如何向 LMM 描述屏幕?

cradle/agent/lmm/ 模块中,我们可以看到 Prompt 是如何构建的。一个典型的 Vision Prompt 包含三个部分:

4.1 System Prompt (人设与规则)

定义 Agent 的角色,强调输出格式。

"You are a computer control agent. Based on the screenshot and labeled elements, output the next action."

4.2 Image (处理后的视觉输入)

这里传入的不是原图,而是经过上述 SoM 打标处理 后的图片(带框、带数字)。

4.3 Auxiliary Text (辅助文本信息)

为了防止模型看不清图片上的字,Cradle 还会把 OCR 的结果以文本列表形式附在 Prompt 后面:

Plaintext

复制代码
Detected UI Elements:
- Tag 1: Text "Game Start", Location: Center
- Tag 2: Icon "Settings", Location: Top-Right
- Current Task: "Open the map"

5. 源码实战:从 Screenshot 到 Context

让我们看一段模拟核心流程的代码(基于 Cradle 逻辑抽象):

Python

复制代码
class VisualPerception:
    def parse(self, screenshot):
        # 1. 调用外部工具获取元数据
        ocr_boxes = self.ocr_provider.detect(screenshot)
        icon_boxes = self.detection_provider.detect(screenshot, prompt="icons")
        
        # 2. 混合并去重 (防止文字和图标重叠识别)
        all_elements = self.merge_elements(ocr_boxes, icon_boxes)
        
        # 3. 在图上绘制标签 (SoM)
        annotated_image, label_map = self.drawer.draw_tags(screenshot, all_elements)
        
        # 4. 生成文本描述
        text_description = self.generate_description(all_elements)
        
        return {
            "image_input": annotated_image,  # 喂给视觉模型
            "text_input": text_description,  # 喂给文本模型辅助
            "label_map": label_map           # 用于后续动作执行的坐标查找
        }

6. 总结

Cradle 的视觉模块告诉我们要想实现高精度的 GCC,"裸用" GPT-4V 是不够的

  • LMM 提供的是"语义理解"(知道要点哪个按钮)。

  • 传统 CV (OCR/Detection) 提供的是"像素精度"(知道按钮确切在哪)。

  • Prompt/SoM 提供的是"沟通桥梁"(将像素坐标转化为模型能理解的标签)。

只有当这三者结合,Agent 才能真正地"看懂"屏幕,从像素的海洋中提取出行动的锚点。

下一篇预告:

当 Agent 看懂了屏幕,它该如何规划下一步动作?遇到失败该如何自我反思?在下一篇 【Cradle 源码解析三】大脑中枢:决策推理 (Reasoning) 与 任务规划 (Planning) 中,我们将深入 Agent 的大脑,探究 ReAct 循环与反思机制的实现。

相关推荐
长空任鸟飞_阿康1 小时前
MasterGo AI 实战教程:10分钟生成网页设计图(附案例演示)
前端·人工智能·ui·ai
Xiaobaiforgod6 小时前
产品 & UI/UX
ui·产品经理·ux
航Hang*7 小时前
Photoshop 图形与图像处理技术——第3章:图像的选择与填充
图像处理·笔记·ui·photoshop
l1m0_8 小时前
UI设计规范工程化,AI生成Ant Design设计稿流程拆解
人工智能·ui·产品经理·设计·arco design·设计规范
航Hang*9 小时前
Photoshop 图形与图像处理技术——第4章:图层的应用
图像处理·笔记·ui·photoshop
航Hang*10 小时前
Photoshop 图形与图像处理技术——第2章:图像处理基础
图像处理·笔记·ui·组合模式·photoshop
UI设计兰亭妙微21 小时前
医疗设备UI设计核心准则与案例拆解——以临床场景为核心的专业设计逻辑
ui·用户体验设计·移动端界面设计
我命由我123451 天前
Photoshop - Photoshop 工具栏(46)渐变工具
经验分享·笔记·学习·ui·职场和发展·学习方法·photoshop
许泽宇的技术分享1 天前
当AI开始“画“界面:A2UI协议如何让.NET应用告别写死的UI
人工智能·ui·.net·blazor·a2ui