ai-agents-for-beginners

Створення агентів для використання комп’ютера (CUA)

Агенти для використання комп’ютера можуть взаємодіяти з вебсайтами так само, як це робить людина: відкриваючи браузер, перевіряючи сторінку та виконуючи найкращу наступну дію на основі побаченого. У цьому уроці ви створите агента автоматизації браузера, який шукає на Airbnb, витягує структуровані дані про оголошення та визначає найвигідніший варіант проживання в Стокгольмі.

Урок поєднує Browser-Use для навігації з підтримкою ШІ, Playwright і Chrome DevTools Protocol (CDP) для керування браузером, Azure OpenAI для роботи з візуальною інформацією та Pydantic для структурованого вилучення.

Вступ

У цьому уроці розглянемо:

• Розуміння, коли агенти для використання комп’ютера краще підходять, ніж автоматизація лише через API
• Поєднання Browser-Use з Playwright та CDP для надійного керування життєвим циклом браузера
• Використання Azure OpenAI з візією та структурованим виводом Pydantic для вилучення даних оголошень з динамічних веб-сторінок
• Визначення, коли слід використовувати робочий процес автоматизації браузера агента-першого, актора-першого або гібридний

Цілі навчання

Після завершення цього уроку ви знатимете, як:

• Налаштувати Browser-Use з Azure OpenAI і Playwright
• Створити робочий процес автоматизації браузера, що виконує навігацію реальним сайтом і керує динамічними UI-елементами
• Вилучати типізовані результати з видимого вмісту сторінки і перетворювати їх на логіку для подальшої обробки
• Обирати між шаблонами агента та актора залежно від передбачуваності завдань браузера

Приклад коду

Урок містить один ноутбук:

• 15-browser-user.ipynb: Запускає сесію Chrome через CDP, шукає оголошення в Airbnb по Стокгольму, витягує ціни за допомогою Browser-Use з візією та повертає найдешевший варіант у вигляді структурованих даних.

Вимоги

• Python 3.12+
• Налаштоване розгортання Azure OpenAI у вашому середовищі
• Локально встановлені Chrome або Chromium
• Встановлені залежності Playwright
• Базові знання з async Python

Налаштування

Встановіть пакунки, які використовуються у ноутбуці:

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. Активна сторінка перевіряється за допомогою структурованої схеми Pydantic для вилучення назв оголошень, цін за ніч, рейтингів і посилань.
4. Логіка Python порівнює вилучені оголошення і виділяє найдешевший варіант.

Цей підхід зберігає гнучке, візуально-орієнтоване логічне осмислення Browser-Use, водночас даючи визначений контроль браузера, коли це потрібно.

Основні висновки та найкращі практики

Коли використовувати агента проти актора

Сценарій	Використовувати агента	Використовувати актора
Динамічні макети	Так, ШІ може адаптуватися до змін сторінки	Ні, крихкі селектори можуть зламатися
Відома структура	Ні, агент повільніший за пряме керування	Так, швидкий і точний
Пошук елементів	Так, природна мова працює добре	Ні, потрібні точні селектори
Керування часом	Ні, менш передбачуваний	Так, повний контроль над затримками та повторними спробами
Складні робочі процеси	Так, обробляє несподівані стани UI	Ні, вимагає явного розгалуження

Найкращі практики Browser-Use

1. Починайте з агента для дослідження та динамічної навігації.
2. Перейдіть до прямого керування сторінкою, коли взаємодія стає передбачуваною.
3. Використовуйте структуровані моделі виводу, щоб витягнуті дані були валідаційними і типобезпечними.
4. Стратегічно додавайте затримки після дій, які викликають видимі зміни UI.
5. Захоплюйте знімки екрану під час розробки, щоб полегшити налагодження помилок.
6. Очікуйте, що сайти змінюватимуться, і розробляйте запасні стратегії для спливаючих вікон і зсувів макету.
7. Поєднуйте шаблони агента і актора, щоб отримати і гнучкість, і точність.

Запобіжні заходи безпеки для браузерних агентів

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

1. Обмежте середовище перегляду. Запускайте агента в окремому профілі браузера або піщанику, обмежуючи його лише доменами, необхідними для завдання.
2. Відокремте спостереження від дії. Дозвольте агенту спочатку шукати, читати і вилучати дані; вимагайте явного кроку підтвердження перед тим, як він надішле форми, відправить повідомлення, забронює подорож, здійснить покупку, видалить записи або змінить налаштування облікового запису.
3. Не розміщуйте секрети в запитах і трасах. Не вставляйте паролі, платіжні дані, сесійні куки або особисті дані у контекст моделі. Нехай користувач здійснює автентифікацію і приховує конфіденційні поля в логах.
4. Розглядайте вміст сторінки як недовіруваний вхід. Сайт може містити інструкції, адресовані агенту, а не користувачу. Агент має ігнорувати текст сторінки, який просить змінити ціль, розкрити дані, відключити безпекові заходи або відвідати нерелевантні сайти.
5. Використовуйте детерміновані перевірки для ризикових кроків. Перевіряйте поточну URL, заголовок сторінки, вибраний елемент, ціну, отримувача та підсумок дії за допомогою коду перед тим, як просити користувача схвалити фінальний крок.
6. Встановлюйте бюджети та умови зупинки. Обмежуйте кількість дій, повторних спроб, вкладок і хвилин, які агент може використати. Зупиняйтеся, якщо стан сторінки неоднозначний, замість того, щоб продовжувати кліки.
7. Записуйте корисні докази, а не все підряд. Зберігайте підсумки дій, часові позначки, URL, описи вибраних елементів і посилання на знімки екрану, щоб можна було переглянути помилки без зберігання зайвого конфіденційного вмісту сторінки.

У прикладі Airbnb безпечною дією за замовчуванням є пошук оголошень і вилучення цін. Вхід до системи, контакт із господарем або оформлення бронювання мають бути окремими діями з погодженням користувача.

Приклади використання в реальному світі

• Бронювання подорожей і моніторинг цін
• Порівняння цін і перевірка наявності у електронній комерції
• Структуроване вилучення з динамічних сайтів
• Тестування інтерфейсу з урахуванням візуального сприйняття і верифікація
• Моніторинг і оповіщення вебсайтів
• Інтелектуальне заповнення форм у багатоетапних процесах

Приклад із реального світу: Microsoft Project Opal

Агент, якого ви створюєте в цьому уроці, — це невелика локальна версія агента для використання комп’ютера (CUA) — програма, що керує браузером так само, як людина. Microsoft впроваджує цю ідею для корпоративного використання з допомогою Project Opal (Frontier), можливості в Microsoft 365 Copilot.

За допомогою Project Opal ви описуєте завдання, і агент виконує його від вашого імені, використовуючи використання комп’ютера на безпечному Windows 365 Cloud PC, працюючи з браузерними додатками, сайтами і даними вашої організації. Він працює асинхронно у фоновому режимі, і ви можете керувати роботою або взяти контроль у будь-який момент. Приклади завдань включають:

• Керування запитами на членство в групах безпеки
• Збирання та валідація доказів аудиту для перевірок відповідності
• Тріаж ІТ-інцидентів (оновлення статусу заявки, призначення відповідальних, закриття дублікатів)
• Компіляція даних Excel у фінальний звіт

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, можливості можуть змінюватися з часом.

Додаткові ресурси

• Початок роботи з Project Opal (Frontier)
• Шаблон інтеграції Browser-Use з Playwright
• Параметри актора Browser-Use та вилучення контенту
• Налаштування курсу

Попередній урок

Огляд Microsoft Agent Framework

Наступний урок

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

---

Відмова від відповідальності: Цей документ було перекладено за допомогою сервісу штучного інтелекту для перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.

This site is open source. Improve this page.