AI-агенты теперь могут видеть: как Peekaboo и Vision Toolkit автоматизируют работу с интерфейсом и скриншотами

Я — Денис Шохирев, архитектор агентных AI-систем из Фрайбурга. В DennisCraft AI Studio я внедряю продакшн-агентов для B2B-клиентов DACH. Мой стек: Claude, Supabase, n8n, Doppler, self-hosted Postgres. Недавно агент в логистическом проекте сломался из-за неочевидной кнопки в веб-интерфейсе — тот случай, когда LLM “слепой”. Это типичная боль в продакшене: агенту нужно не только действовать, но и видеть, что происходит на экране.

Почему агентам нужна “зрячесть” в реальном мире

Текстовые LLM (Claude, GPT-4) традиционно работают вслепую: они оперируют текстами, но не видят результаты своих действий в UI. В реальных продакшн-сценариях — от обработки заявок в SAP до сверки транзакций в банковских порталах — этого недостаточно. Без визуальной обратной связи агент не понимает, что интерфейс изменился, что кнопка недоступна, или что возникла капча. Это не гипотетические проблемы: за последний год на 5 проектах я столкнулся с 8+ случаями, когда агент “думал”, что выполнил действие, но UI не изменился.

Peekaboo и Vision Toolkit: что реально работает в продакшене

Есть десятки демо-решений для генерации скриншотов, но на практике стабильны только единицы. Я опираюсь на две связки:

• Peekaboo — модуль для нативных скриншотов (https://github.com/claudeai/peekaboo), работает с headless Chrome и поддерживает быстрый снимок экрана, кроп, сравнение с эталонами.
• Vision Toolkit — open-source набор утилит для анализа изображений, поиска элементов по шаблону, OCR (tesseract), генерации дифов между старыми и новыми скриншотами.

Обе связки интегрируются через n8n и Supabase для хранения истории: агент делает действие, запускает скриншот через Peekaboo, анализирует через Vision Toolkit, сохраняет результат в Postgres и отправляет статус в n8n workflow.

Пример пайплайна для контроля UI

import requests
from PIL import Image, ImageChops
import pytesseract

def take_screenshot(url, output_path):
    # Пример вызова headless браузера через Peekaboo API
    resp = requests.post("http://localhost:9222/screenshot", json={"url": url})
    with open(output_path, "wb") as f:
        f.write(resp.content)

def compare_images(img1_path, img2_path):
    img1 = Image.open(img1_path)
    img2 = Image.open(img2_path)
    diff = ImageChops.difference(img1, img2)
    return diff.getbbox() is not None

def extract_text(img_path):
    return pytesseract.image_to_string(Image.open(img_path))

# Использование:
take_screenshot("https://portal.example.com", "before.png")
# (Агент выполняет действие)
take_screenshot("https://portal.example.com", "after.png")
if compare_images("before.png", "after.png"):
    print("UI изменился")
else:
    print("Нет изменений")
print(extract_text("after.png"))

Как это масштабировать — архитектурные паттерны

В продакшене важно не просто “сделать скриншот”, а строить систему с повторяемой логикой:

• Вся история скриншотов и дифов хранится в Supabase (S3-совместимый сторидж + Postgres метаданные).
• Рабочий процесс управляется через n8n: шаг агента — скриншот — анализ — логгирование — оповещение.
• Для защиты персональных данных (GDPR) — автоматический блек-аут чувствительных зон на скриншотах перед сохранением (Vision Toolkit + кастомные маски).
• Ошибки (например, “элемент не найден”) сразу логируются в отдельную таблицу Postgres — это ускоряет дебаг и аудит.

Безопасность и аудит: что не пропустить

В продакшене нельзя хранить “сырые” скриншоты с персональными или финансовыми данными. Я всегда внедряю автоматическую очистку через Vision Toolkit: маскирование номеров карт, паспортов, емейлов — перед отправкой в Supabase. Для аудита включаю семантический лог: к каждому действию агента — скриншот ДО и ПОСЛЕ, краткое описание изменений (из OCR), UUID транзакции.

import re

def mask_sensitive(text):
    # Маскируем email и номера карт
    text = re.sub(r'[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+', '[MASKED_EMAIL]', text)
    text = re.sub(r'\b\d{4} \d{4} \d{4} \d{4}\b', '[MASKED_CARD]', text)
    return text

Интеграция с Doppler закрывает переменные окружения и API-ключи от утечек при логгировании. Без этого получить ISO 27001 или пройти банковский аудит в DACH невозможно.

Частые ошибки внедрения “зрячих” агентов

• Скриншоты хранятся в открытом S3, без шифрования — риск штрафа по GDPR (см. https://www.bfdi.bund.de/DE/Infothek/Europa/DSGVO/dsgvo-node.html).
• OCR прогоняется “как есть”, без маскирования — утечка чувствительных данных.
• Скриншоты делаются слишком редко — агент не видит ошибок между шагами.
• Логика сравнения только пиксельная, без анализа структуры — пропускаются мелкие, но критичные изменения в UI.

FAQ

Peekaboo или Selenium — что выбрать для скриншотов?

Peekaboo проще и быстрее для headless-режима, Selenium — когда нужен сложный UI-контроль. В продакшене чаще использую Peekaboo, так как он интегрируется в пайплайны без GUI-зависимостей.

Как интегрировать Vision Toolkit с n8n?

Через кастомные HTTP-запросы или запуск docker-контейнера Vision Toolkit как отдельного шага в workflow n8n. Можно сохранять результаты анализа прямо в Supabase.

Как автоматизировать блек-аут зон на скриншотах?

Заранее задаю координаты чувствительных зон или использую OCR для поиска паттернов (например, email, номер карты), после чего накладываю маску через PIL или Vision Toolkit.

Можно ли использовать такие пайплайны для мобильных приложений?

Да, если есть headless-эмуляция или доступ к API скриншотов. Однако OCR для мобильных UI требует донастройки шаблонов.

Сколько времени занимает обработка одного шага?

В среднем 1-3 секунды на скриншот + 2-4 секунды на OCR и анализ, зависит от сложности UI и мощности сервера.

В каких сценариях у вас чаще всего ломается агент из-за “слепоты” в UI — при изменении интерфейса, капчах, или скрытых ошибках? Напишите, если сталкивались с этим в продакшене.

Я делаю бесплатный аудит стека для основателей в DACH, кто строит AI в регулируемых рынках. Пишите в LinkedIn или @ger_dennis_ai.