Веб-агенты, которые действительно понимают веб-сайты: как слой восприятия Notte решает проблему DOM

Фундаментальная проблема веб-агентов заключается не в автоматизации — а в восприятии. Как позволить LLM навигировать и действовать на веб-сайтах, погребённых в слоях HTML?

Техническая проблема: несоответствие импеданса DOM

Веб-агенты традиционно полагались на хрупкие подходы: парсинг DOM, CSS-селекторы и анализ HTML-структуры. Это создаёт фундаментальное несоответствие импеданса между тем, как LLM обрабатывают информацию (естественный язык) и тем, как структурированы веб-сайты (разметка).

Рассмотрим типичный подход к веб-автоматизации:

driver.find_element(By.CSS_SELECTOR, "button.submit-btn.primary")
driver.find_element(By.XPATH, "//div[@class='form-container']//input[@name='email']")

Что не так с этим подходом?

Хрупкость: CSS-селекторы ломаются, когда разработчики изменяют стили.

Когнитивная нагрузка: LLM должны симулировать структурное мышление вместо действий на основе семантических подсказок — увеличивая размер промпта и повышая риск галлюцинаций.

Потеря контекста: Сырой DOM не обеспечивает семантического понимания.

Кошмар обслуживания: Каждое изменение UI требует обновления агента.

Плохая отладка: Сбои часто выбрасывают расплывчатые или тихие исключения, особенно когда элементы динамические или скрыты за JS.

Разрыв между обработкой естественного языка LLM и структурной сложностью веб-сайтов создаёт агентов, которые хрупки, дороги в обслуживании и трудны для отладки.

Решение: семантическая абстракция через восприятие

Notte вводит слой восприятия, который действует как интерфейс перевода между веб-сайтами и LLM. Вместо принуждения LLM к парсингу DOM-структур, он трансформирует сырые веб-страницы в структурированные описания на естественном языке, сохраняя семантическое значение при абстрагировании от деталей реализации.

Как это работает

Слой восприятия преобразует это:

<div class="product-card-container">
  <div class="product-image-wrapper">
    <img src="/product-123.jpg" alt="Wireless Headphones">
  </div>
  <div class="product-details">
    <h3 class="product-title">Premium Wireless Headphones</h3>
    <span class="price-current">$99.99</span>
    <button class="btn btn-primary add-to-cart" data-product-id="123">
      Add to Cart
    </button>
  </div>
</div>

В это:

Продукт: Premium Wireless Headphones
Цена: $99.99
Изображение: Wireless Headphones
Доступные действия: Добавить в корзину

Эта трансформация не статична — она контекстно-зависима и динамична. LLM теперь работает со смыслом вместо разметки.

Преимущества архитектуры

1. Семантическая абстракция

Веб-сайты становятся навигируемыми картами, описанными на естественном языке. Вместо:

driver.find_element(By.CSS_SELECTOR, ".add-to-cart")

ваш агент думает:

"Нажать кнопку 'Добавить в корзину' для Premium Wireless Headphones."

2. Устойчивость к изменениям

Описания на естественном языке лучше адаптируются к изменениям UI, чем селекторы. Когда разработчики изменяют CSS-классы с btn-primary на button-main, слой восприятия всё ещё понимает это как "кнопка Добавить в корзину".

Когда семантическое намерение сохраняется, восприятие остаётся надёжным — даже когда разметка изменяется.

3. Оптимизация LLM

Информация представлена в формате, который LLM понимают лучше всего — естественный язык с чёткой семантической структурой. Это улучшает рассуждения, снижает риск галлюцинаций и уменьшает размер промпта.

4. Меньшие модели, лучшая производительность

Слой восприятия позволяет меньшим моделям (таким как семейство Llama) эффективно рассуждать на упрощённых входах. DOM-шум убирается, позволяя движкам вывода сосредоточиться на том, что важно. Это позволяет меньшим моделям конкурировать с большими в специфическом выполнении задач.

Реализация кода

Базовый пример агента

from notte_sdk import NotteClient

# Инициализация клиента Notte
notte = NotteClient(api_key="your-api-key")

# Выполнение задачи на естественном языке с использованием API агентов
response = notte.agents.run(
    task="Найти самые дешёвые беспроводные наушники до $100 и добавить их в корзину"
)
print(response.answer)

Продвинутый пример с контролем сессии

from notte_sdk import NotteClient
from pydantic import BaseModel

# Определение ожидаемой схемы ответа
class TwitterPost(BaseModel):
    url: str

notte = NotteClient()

# Продвинутое управление сессией с учётными данными
with notte.Vault() as vault, notte.Session(
    headless=False,
    proxies=False,
    browser_type="chrome"
) as session:
    # Безопасное управление учётными данными (используйте env vars в продакшене)
    vault.add_credentials(
        url="https://x.com",
        username="your-email", # Замените на ваш реальный email
        password="your-password" # Замените на ваш реальный пароль
    )
    
    # Создание агента с контекстом сессии
    agent = notte.Agent(
        session=session,
        vault=vault,
        max_steps=10
    )
    
    # Сложный многошаговый рабочий процесс
    response = agent.run(
        task="зайти в twitter и написать пост: новая эра это @nottecore захватывает мой аккаунт. Вернуть url поста.",
        response_format=TwitterPost # Запускает валидацию схемы
    )
    
    print(f"Успешно опубликовано: {response.answer.url}")

Извлечение данных со структурированным выводом

from notte_sdk import NotteClient
import json

notte = NotteClient()

# Структурированное извлечение данных с использованием метода scrape
data = notte.scrape(
    url="https://pump.fun",
    instructions="получить топ 5 последних трендовых монет на pf, вернуть тикер, название, mcap"
)

# Печать результата
print(json.dumps(data, indent=2, ensure_ascii=False))

Последствия для продакшена

Снижение накладных расходов на обслуживание

Когда веб-сайты изменяют свой UI, описания на естественном языке остаются стабильными. Ваши агенты продолжают работать без постоянных обновлений селекторов.

Интуитивная отладка

Отладка через трассировки на естественном языке вместо загадочных DOM-запросов:

❌ Старый способ: "Элемент не найден: button.submit-btn.primary"
✅ Новый способ: "Не удалось найти кнопку 'Подтвердить заказ' на странице оформления заказа"

Более быстрые циклы разработки

Пишите задачи агента на простом русском языке вместо изучения хрупкой логики селекторов:

# Вместо этого:
element = driver.find_element(By.XPATH,
    "//div[contains(@class, 'product-grid')]//div[contains(@class, 'product-item')][.//span[contains(text(), 'Wireless')]]//button[contains(@class, 'add-cart')]"
)

# Используйте это:
result = agent.run(task="Добавить беспроводные наушники в корзину")

Лучшие многошаговые рабочие процессы

Notte обрабатывает куки, многие типы CAPTCHA и защиту от ботов, поддерживая состояние сессии через сложные рабочие процессы.

response = agent.run(task="""
1. Сравнить цены на iPhone 15 в 3 основных ритейлерах
2. Найти лучшее предложение включая стоимость доставки
3. Проверить доступность и время доставки
4. Создать сводный отчёт с рекомендациями
""")
print(response.answer)

Примечание: Хотя многие потоки защиты от ботов обрабатываются автоматически, не все типы CAPTCHA или продвинутые потоки пока решаемы.

Бенчмарки производительности

Notte превосходит традиционных веб-агентов по скорости, стоимости и успешности выполнения благодаря:

Сокращению использования токенов: Семантические сводки избегают раздутого парсинга DOM.

Возможности использования меньших моделей: Восприятие позволяет эффективным моделям вроде Llama преуспевать.

Более быстрому выводу: Поддерживает высокопроизводительный вывод вроде Cerebras с минимальными накладными расходами.

Более высокой успешности: Понимание естественного языка снижает сбои в выполнении задач.

(Изучите наши открытые оценки операторов здесь).

Реальные применения

Автоматизация электронной коммерции

# Автоматизированный мониторинг цен конкурентов
response = agent.run(
    task="Проверить цены конкурентов на беспроводные наушники на Amazon и Best Buy, сравнить с нашей целевой ценой $99"
)

Генерация лидов

# Автоматизация профессиональных контактов
response = agent.run(
    task="Найти 20 основателей стартапов в сфере ИИ на LinkedIn, которые недавно постили о финансировании, извлечь их контактную информацию"
)

Маркетинговые исследования

# Автоматизированная маркетинговая аналитика с использованием endpoint scrape
data = notte.scrape(
    url="https://www.g2.com/categories/project-management",
    instructions="Извлечь топ 5 инструментов управления проектами с их ценами, рейтингами и ключевыми функциями для конкурентного анализа"
)

Итоговый результат

Традиционные веб-агенты принуждают LLM думать как веб-скрейперы.

Notte позволяет им думать как лицам, принимающим решения — понимая, что делать, а не просто где кликать.

Это не просто о том, чтобы агенты работали лучше. Это о том, чтобы сделать их обслуживаемыми, отлаживаемыми и готовыми к продакшену. Когда ваш агент понимает "найти самый дешёвый рейс" вместо парсинга div.flight-result-container > span.price-value, вы решили фундаментальную проблему веб-автоматизации.

Создавайте веб-агентов, которые понимают смысл, а не только разметку.

Изучите наш GitHub

Изучение и начало работы

[Эта статья была последний раз обновлена 7 июля 2025 года. Для получения последних функций и улучшений, проверьте релизы версий или наш changelog через twitter.]