Модели компьютерного зрения для понимания экрана
Передавайте снимки экрана мультимодальной модели, чтобы агент «видел» то же, что увидел бы человек
«Модели компьютерного зрения для понимания экрана» — бесплатный урок AI Agents на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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)
- Определять элементы интерфейса по положению
- Замечать закономерности и аномалии
Однако они по-прежнему испытывают трудности с очень мелким текстом, сложными таблицами и точными координатами пикселей.
Поиск элементов по описанию
Спросите модель: «где находится кнопка Submit?», и она вернёт примерные координаты или инструкции:
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()Рассуждение по нескольким кадрам
Для динамических страниц делайте снимки экрана в несколько моментов времени и отправляйте их все модели. Модель сможет рассуждать о временных изменениях.
Задержка и стоимость
Каждый снимок экрана в полном разрешении занимает примерно 85 тыс. токенов. Стоимость:
- gpt-4o: 0,85 доллара за 100 изображений
- claude-sonnet-4-5: примерно 1,50 доллара за 100 изображений
Изменяйте размер перед отправкой; используйте визуальный анализ только тогда, когда выбор на основе 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. Изменяйте размер, чтобы снизить стоимость.
Часто задаваемые вопросы
Урок «Модели компьютерного зрения для понимания экрана» бесплатный?
Да — полный текст урока «Модели компьютерного зрения для понимания экрана» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс AI Agents, подпишись на CoddyKit PRO. Курс AI Agents содержит 4 уроков всего.
Чему я научусь в уроке «Модели компьютерного зрения для понимания экрана»?
Передавайте снимки экрана мультимодальной модели, чтобы агент «видел» то же, что увидел бы человек Ты практикуешь AI Agents с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать AI Agents?
Предыдущий опыт не требуется. AI Agents на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Модели компьютерного зрения для понимания экрана»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке AI Agents?
Да. Каждый урок AI Agents включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Автоматизация браузера с Playwright
- Модели компьютерного зрения для понимания экрана
- Шаблоны использования компьютера (Anthropic Computer-Use)
- Создание надёжного агента для заполнения форм