【Cradle 源码解析二】由眼入心：LMM 如何“看懂”屏幕与 UI 识别机制-优快云博客

前言

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

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

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

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

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

Capture (捕获)：获取原始屏幕截图。
Augmentation (增强)：通过辅助工具（Tools）提取元数据。
Annotation (标注)：将提取的信息（如边框、标签）“画”回图片上，或者生成辅助文本。
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) 扔给大模型（大模型对数字不敏感），而是在图片上画圈。

处理流程：

打标：Cradle 会在原始截图上，根据 OCR 和检测到的 bbox，画上红框或数字标签（1, 2, 3...）。
映射表：代码内部维护一张映射表 Label Map。
- Tag 1 -> File Menu -> Center (30, 15)
- Tag 2 -> Chrome Icon -> Center (100, 200)
视觉提示：生成的图片上密密麻麻标满了数字。

为什么这么做？

这样大大降低了 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           # 用于后续动作执行的坐标查找
        }