AI Agents · 课时

用于屏幕理解的视觉模型

将屏幕截图发送给多模态模型，让代理“看到”人类会看到的内容。

用于屏幕理解的视觉模型 是 CoddyKit 上的免费 AI Agents 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 AI Agents 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 AI Agents 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

为什么使用视觉能力

有些网页操作很难用选择器表达：

验证码（至少可以尝试）
按视觉位置确定的元素（聊天气泡、动态界面）
没有稳定 DOM 的应用（Canvas / WebGL）

多模态 LLM 让代理能够 SEE 屏幕。

Take a Screenshot, Send to LLM

import base64
page.screenshot(path='screen.png')
with open('screen.png', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode()

response = client.chat.completions.create(
    model='gpt-4o',
    messages=[{
        'role': 'user',
        'content': [
            {'type': 'text', 'text': 'What buttons are visible? Return JSON.'},
            {'type': 'image_url', 'image_url': {'url': f'data:image/png;base64,{b64}'}}
        ]
    }]
)

Anthropic Vision

response = client.messages.create(
    model='claude-sonnet-4-5',
    max_tokens=1024,
    messages=[{
        'role': 'user',
        'content': [
            {'type': 'image', 'source': {'type': 'base64', 'media_type': 'image/png', 'data': b64}},
            {'type': 'text', 'text': 'Describe what you see.'}
        ]
    }]
)

视觉质量

GPT-4o 和 Claude Sonnet 4.5 可以：

准确描述截图
读取图像中的文字（OCR）
根据位置识别界面元素
发现模式和异常

但它们在处理极小文字、复杂表格和精确像素坐标时仍然表现不佳。

通过描述定位元素

询问模型“提交按钮在哪里？”，它会返回大致坐标或操作说明：

prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}

坐标精度注意事项

模型无法做到像素级精确。请将其坐标视为提示。若要精确点击，请尽可能结合 DOM 选择器。

SoM（标记集合）

在截图中为交互元素周围标注带编号的框。询问模型“您想点击哪个编号？”：

通过 DOM 识别交互元素
绘制带编号的覆盖层
将标注后的截图发送给 LLM
LLM 返回一个编号；您点击对应的元素

这比自由形式的坐标可靠得多。

Code for SoM

elements = page.query_selector_all('button, a, input, [role="button"]')
annotated = draw_numbered_overlays(screenshot, elements)
idx = ask_llm_for_choice(annotated, prompt='Click the Submit button')
elements[idx].click()

多帧推理

对于动态页面，请在多个时刻截图，并将所有截图发送给模型。模型可以推理随时间发生的变化。

延迟和成本

每张全分辨率截图约占 85k 个令牌。成本如下：

gpt-4o：每 100 张图片 0.85 美元
claude-sonnet-4-5：每 100 张图片约 1.50 美元

发送前请调整图片大小；只有在基于 DOM 的选择失败时才使用视觉能力。

Resize for Cheaper Calls

from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')

OCR 备用方案

对于纯文本提取，OCR（Tesseract、PaddleOCR）的成本低得多，通常也比视觉 LLM 更好。

SoM 模式

什么是标记集合（SoM）提示模式？

回顾

将截图发送给 GPT-4o 或 Claude，让它们理解屏幕内容。使用 SoM 标注实现可靠交互。纯文本使用 OCR。调整图片大小以节省成本。

常见问题解答

「用于屏幕理解的视觉模型」课时是免费的吗？

是的 — 「用于屏幕理解的视觉模型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 AI Agents 课程的其余内容，请升级到 CoddyKit PRO。 AI Agents 课程共包含 4 节课。

「用于屏幕理解的视觉模型」这节课中我会学到什么？

将屏幕截图发送给多模态模型，让代理“看到”人类会看到的内容。你通过在浏览器中直接运行的动手代码来练习 AI Agents，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 AI Agents 需要有经验吗？

无需任何先前经验。CoddyKit 上的 AI Agents 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「用于屏幕理解的视觉模型」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 AI Agents 课中编写并运行代码吗？

能。每节 AI Agents 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 AI Agents