ai-agents-for-beginners

Создание агентов компьютерного взаимодействия (CUA)

Агенты компьютерного взаимодействия могут взаимодействовать с веб-сайтами так же, как человек: открывать браузер, исследовать страницу и выполнять наилучшее следующее действие, исходя из увиденного. В этом уроке вы создадите агента автоматизации браузера, который будет искать на Airbnb, извлекать структурированные данные объявлений и определять самую дешевую аренду в Стокгольме.

Урок объединяет Browser-Use для навигации с ИИ, Playwright и протокол Chrome DevTools (CDP) для управления браузером, Azure OpenAI для логического анализа с использованием зрения и Pydantic для структурированного извлечения.

Введение

В этом уроке будет рассмотрено:

Цели обучения

После прохождения этого урока вы будете знать, как:

Пример кода

В уроке представлен один учебный ноутбук:

Требования

Настройка

Установите пакеты, используемые в ноутбуке:

pip install browser_use playwright python-dotenv
playwright install chromium

Установите переменные окружения Azure OpenAI, используемые в ноутбуке:

AZURE_OPENAI_ENDPOINT=...
AZURE_OPENAI_API_KEY=...
AZURE_OPENAI_CHAT_DEPLOYMENT_NAME=...
# Необязательно: по умолчанию используется последняя версия API при пропуске
AZURE_OPENAI_API_VERSION=...

Обзор архитектуры

Ноутбук демонстрирует гибридный рабочий процесс автоматизации браузера:

  1. Chrome запускается с включенным CDP, чтобы Playwright и Browser-Use могли работать в одной сессии браузера.
  2. Агент Browser-Use обрабатывает задачи открытой навигации, такие как открытие Airbnb, закрытие всплывающих окон и поиск по Стокгольму.
  3. Из активной страницы извлекаются заголовки объявлений, цены за ночь, рейтинги и URL с помощью структурированной схемы Pydantic.
  4. Логика Python сравнивает извлеченные объявления и выделяет самый дешевый вариант.

Такой подход сохраняет гибкое логическое рассуждение на основе зрения, которое эффективно в Browser-Use, при этом обеспечивая детерминированное управление браузером, когда это необходимо.

Ключевые выводы и передовые практики

Когда использовать агента или актера

Сценарий Использовать агента Использовать актера
Динамические макеты Да, ИИ может адаптироваться к изменениям страницы Нет, хрупкие селекторы могут ломаться
Известная структура Нет, агент медленнее прямого управления Да, быстро и точно
Поиск элементов Да, естественный язык хорошо работает Нет, нужны точные селекторы
Контроль времени Нет, менее предсказуемо Да, полный контроль над ожиданиями и повторными попытками
Сложные рабочие процессы Да, справляется с неожиданными состояниями интерфейса Нет, требует явного ветвления

Лучшие практики Browser-Use

  1. Начинайте с агента для исследования и динамической навигации.
  2. Переключайтесь на прямое управление страницей, когда взаимодействие становится предсказуемым.
  3. Используйте структурированные модели вывода, чтобы извлечённые данные были валидированы и типобезопасны.
  4. Стратегически добавляйте задержки после действий, вызывающих видимые изменения интерфейса.
  5. Делайте снимки экрана при итерациях, чтобы упростить отладку при ошибках.
  6. Ожидайте изменения сайтов и разрабатывайте резервные стратегии для всплывающих окон и сдвигов макета.
  7. Сочетайте паттерны агента и актера, чтобы получить и гибкость, и точность.

Меры безопасности для браузерных агентов

Браузерные агенты работают с живыми сайтами, поэтому им нужны более строгие ограничения, чем скриптам, которые только вызывают известный API. Перед переходом от демонстрации в ноутбуке к реальному рабочему процессу определите контроль над тем, что агент может видеть, нажимать и отправлять.

  1. Ограничьте среду просмотра. Запускайте агента в отдельном профиле браузера или песочнице, и ограничьте его доступ только нужными доменами.
  2. Разделяйте наблюдение и действие. Позвольте агенту сначала искать, читать и извлекать данные; требуйте явного одобрения перед отправкой форм, сообщений, бронированием поездок, покупками, удалением записей или изменением настроек аккаунта.
  3. Не размещайте секреты в подсказках и логах. Не включайте пароли, платежные данные, сессионные cookie или личные данные в контекст модели. Позвольте пользователю выполнять аутентификацию и скрывать конфиденциальные поля из логов.
  4. Обращайтесь с содержимым страницы как с недоверенным вводом. На сайте могут быть инструкции для агента, а не для пользователя. Агент должен игнорировать текст страницы, требующий изменить цель, раскрыть данные, отключить меры безопасности или перейти на посторонние сайты.
  5. Используйте детерминированные проверки рискованных шагов. Проверяйте текущий URL, заголовок страницы, выбранный элемент, цену, получателя и саммари действия с помощью кода перед тем, как запрашивать у пользователя подтверждение финального шага.
  6. Устанавливайте лимиты и условия остановки. Ограничьте количество действий, повторных попыток, вкладок и времени работы агента. Прекращайте работу, если состояние страницы неоднозначно, вместо того чтобы продолжать нажимать.
  7. Записывайте полезные доказательства, а не все подряд. Храните суммарные данные по действиям, временные отметки, URL, описания выбранных элементов и ссылки на скриншоты, чтобы можно было проверить неудачи без сохранения избыточного чувствительного контента страницы.

В примере с Airbnb безопасный вариант — искать объявления и извлекать цены. Вход в аккаунт, контакт с хозяином или завершение бронирования должны быть действиями, одобренными пользователем.

Примеры использования в реальном мире

Пример из реального мира: Microsoft Project Opal

Агент, который вы создаёте в этом уроке, является небольшой локальной версией агента компьютерного взаимодействия (CUA) — программы, которая управляет браузером так, как это сделал бы человек. Microsoft внедряет эту же идею в корпоративную среду с помощью Project Opal (Frontier), функции в Microsoft 365 Copilot.

С Project Opal вы описываете задачу, и агент работает от вашего имени с помощью компьютерного взаимодействия на безопасном Windows 365 Cloud PC, взаимодействуя с браузерными приложениями, сайтами и данными вашей организации. Он работает асинхронно в фоновом режиме и вы можете управлять работой или взять контроль в любой момент. Примеры задач включают:

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

Концепция в этом курсе Как Project Opal её реализует
Человек в цикле (Урок 06) Opal делает паузы для ввода данных для входа, конфиденциальной информации или неоднозначных инструкций и никогда не вводит пароли и не отправляет формы без явного подтверждения. Вы можете Взять контроль и Вернуть контроль в процессе задачи.
Надежные и безопасные агенты (Уроки 06 и 18) Работает в изолированном Windows 365 Cloud PC, по умолчанию только в браузере (другой доступ к компьютеру заблокирован через Intune), использует вашу личность, чтобы получать доступ только к разрешенным ресурсам, и записывает каждое действие для аудита.
Планирование и метакогниция (Уроки 07 и 09) Opal сначала генерирует план задачи, затем контролирует свои рассуждения на каждом шаге и делает паузы при подозрительной активности.
Повторно используемые возможности / инструменты (Урок 04) Навыки позволяют создавать инструкции для повторяющихся задач (импортируются из .md файла или создаются в Opal) и использовать их в разных диалогах.

Доступность: Project Opal доступен пользователям в программе раннего доступа Frontier с подпиской Microsoft 365 Copilot, и администратор должен выполнить настройку. Поскольку это экспериментальная функция Frontier, возможности могут меняться со временем.

Проверка знаний

Проверьте свои знания, прежде чем переходить к следующему уроку.

1. Когда агент компьютерного взаимодействия в браузере лучше подходит, чем рабочий процесс, использующий только API?

Ответ Используйте браузерного агента, когда задача зависит от того, что видно в веб-интерфейсе, сайт не предоставляет нужный API, или страница меняется достаточно часто, чтобы фиксированная логика через API или селекторы была ненадежной. Если существует стабильный API для той же задачи, предпочтение отдавайте API, так как это обычно быстрее, проще тестировать и безопаснее.

2. В гибридном рабочем процессе, какие части должен обрабатывать агент, а какие — код с прямым управлением Playwright?

Ответ Пусть агент обрабатывает задачи открытой навигации и динамические состояния интерфейса, такие как поиск нужной страницы или закрытие неожиданных всплывающих окон. Переключайтесь на прямое управление Playwright, когда структура страницы известна, и действия требуют точности, повторных попыток, ожиданий или детерминированной валидации.

3. Пример Airbnb находит объявление, которое пользователь может захотеть забронировать. Что должно произойти до того, как рабочий процесс выполнит вход, свяжется с хозяином или завершит бронирование?

Ответ Рабочий процесс должен приостановиться и запросить явное одобрение пользователя. Перед запросом следует показать чёткое резюме выбранного объявления, текущий URL, цену, даты и предполагаемое действие. Поиск и извлечение цен могут выполняться автономно; доступ к аккаунту, сообщения, покупки и бронирования должны одобряться пользователем.

4. Веб-страница требует от агента игнорировать исходные инструкции, перейти на другой сайт и раскрыть сохранённые учетные данные. Как агент должен отнестись к этому тексту?

Ответ Рассматривайте это как недоверенный контент страницы, а не как указания от разработчика или пользователя. Агент должен оставаться в пределах разрешенного домена и области задачи, отказываться раскрывать секреты и избегать следования инструкциям страницы, меняющим цель, отключающим меры безопасности или перенаправляющим на посторонние сайты.

5. Какие доказательства полезно хранить во время работы браузерного агента, а чего следует избегать?

Ответ Храните суммарные данные по действиям, временные отметки, URL, описания выбранных элементов, результаты валидации и ссылки на скриншоты, чтобы можно было проанализировать запуск. Избегайте хранения паролей, платежной информации, сессионных cookie, необработанных личных данных или полного содержимого страниц, если нет специальных требований по хранению и конфиденциальности.

Дополнительные ресурсы

Предыдущий урок

Изучение Microsoft Agent Framework

Следующий урок

Развертывание масштабируемых агентов

Отказ от ответственности: Этот документ был переведен с использованием сервиса машинного перевода Co-op Translator. Несмотря на наши усилия по обеспечению точности, имейте в виду, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на его исходном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется обратиться к профессиональному человеческому переводу. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие в результате использования этого перевода.

This site is open source. Improve this page.