【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 循环与反思机制的实现。

相关推荐
sg_knight17 小时前
设计模式实战:状态模式(State)
python·ui·设计模式·状态模式·state
黄思搏17 小时前
基于标注平台数据的 Unity UI 自动化构建工作流设计与工程实践
ui·unity·蓝湖·vectoui
小樱花的樱花19 小时前
1 项目概述
开发语言·c++·qt·ui
2301_8227032020 小时前
开源鸿蒙跨平台Flutter开发:跨端图形渲染引擎的类型边界与命名空间陷阱:以多维雷达图绘制中的 dart:ui 及 StrokeJoin 异常为例
算法·flutter·ui·开源·图形渲染·harmonyos·鸿蒙
极梦网络无忧1 天前
Windows UI Automation实现抖音直播间监控(桌面端场控助手核心方案)
windows·ui
newbe365241 天前
Design.md:让 AI 一致性进行前端 UI 设计的解决方案
前端·人工智能·ui
猫仍在1 天前
Playwright 架构UI 自动化质量保障平台
ui·架构·自动化
AI_零食1 天前
开源鸿蒙跨平台Flutter开发:昼夜节律与睡眠相位-脑电波周期与最佳苏醒测绘架构
flutter·ui·华为·架构·开源·harmonyos·鸿蒙
stevenzqzq1 天前
推荐页核心 UI 实现逻辑说明
ui
AI_零食1 天前
Flutter 框架跨平台鸿蒙开发 - 自定义式按钮设计应用
学习·flutter·ui·华为·harmonyos·鸿蒙