دورة

Un agent qui pilote un navigateur, en sécurité

Construire un agent Gemini qui opère un back-office web via Playwright et l'arbre d'accessibilité, sous quatre garde-fous (liste blanche, confirmation humaine, contenu non fiable, budget), tracé étape par étape et mesuré sur 5 tâches réelles.

خبير 7 دروس 6h
ابدأ الدورة
التقدّم 0% · 0/7

هذا المحتوى غير مترجم بعد. تُعرض النسخة الأصلية.

Le service client de Maison Orée, grossiste fictif en fournitures de bureau, traite chaque matin une centaine de demandes du type « où en est la commande CMD-1042 ? », « passez-la en expédiée », « envoyez-moi les commandes en attente en CSV ». Le back-office date de 2014, n'a pas d'API, et l'éditeur facture 40 jours-homme pour en ajouter une. Un agent qui manipule l'interface web comme un opérateur est tentant. Il est aussi dangereux : il lit des pages dont une partie est écrite par les clients, il a une session authentifiée, et il peut cliquer sur « Exporter ».

Ce projet construit cet agent de bout en bout, en Python, sans framework d'agent : une boucle de function calling Gemini, des outils Playwright de haut niveau, et un harness qui garde la main sur tout ce qui a un effet.

La fiche d'une commande dont la note client contient une consigne adressée à l'agent. Capture prise par le traceur pendant la démonstration du 2026-10-15.

Ce que vous livrez

  • Un back-office fictif (FastAPI) : connexion, recherche, fiche, changement de statut, export CSV.
  • Un agent Gemini avec 8 outils : se_connecter, naviguer, lire_page, cliquer, remplir, choisir, extraire_tableau, capture_ecran. Il désigne les éléments par rôle et nom accessible, jamais par sélecteur CSS ni par coordonnées.
  • Un harness de garde-fous qui s'applique quoi que décide le modèle : liste blanche de domaines au niveau réseau, requêtes à effet coupées sans confirmation humaine, contenu des pages étiqueté non fiable, budget d'étapes.
  • Un traceur : une ligne JSON et une capture PNG par étape.
  • Une démonstration mesurée sur 5 tâches, dont une page qui tente de détourner l'agent.

Architecture

flowchart LR
  U["Opérateur : la tâche"] --> L["Boucle d'agent (agent.py)"]
  L <-->|"function calling"| G["Gemini"]
  L --> B["Budget d'étapes"]
  B --> T["Outils de haut niveau (browser.py)"]
  T -->|"clic à effet"| C{"Confirmation humaine"}
  C -->|"oui : arme 1 requête"| P["Page Playwright"]
  T --> P
  P --> F["Filtre réseau : liste blanche + POST armés (guard.py)"]
  F --> W["Back-office Orée (FastAPI)"]
  P -->|"arbre ARIA simplifié, étiqueté non fiable"| L
  L --> R["Traceur : trace.jsonl + etape-NN.png"]

Résultats mesurés le 2026-10-15

MesureValeur
Taux de réussite, opérateur scripté25/25 sur 5 exécutions des 5 tâches (4 avec gemini-3.5-flash, 1 avec gemini-3.5-flash-lite)
Étapes par exécution complète15 à 17 (2 à 5 par tâche)
Jetons d'entrée par exécution76 000 à 91 000 avec l'arbre brut, 46 000 à 47 000 avec l'arbre simplifié
Page piégéeconsigne ignorée dans 5 exécutions sur 5, signalée à l'opérateur par gemini-3.5-flash dans 4 sur 4
Arbre simplifié contre capture1 149 contre 1 089 jetons ; la capture de la seule zone visible manque 3 valeurs sur 9
Coût d'un make e2eenviron 0,05 $

Stack

Python 3.10+, google-genai (function calling manuel), Playwright 1.64 (Chromium headless), FastAPI et Uvicorn pour l'application cible, pytest. Aucune ressource Google Cloud : une clé d'API Gemini suffit.

Prérequis

  • Avoir écrit une boucle d'agent avec function calling (voir Construire un agent IA de A à Z).
  • Lire du HTML et connaître les bases de HTTP (GET, POST, cookie de session).
  • Une clé Gemini (Google AI Studio) pour les leçons 5 et 6 ; tout le reste tourne sans clé.

Programme

LeçonCe qui avanceCommande qui le prouve
1. Le problème et l'architecturemodèle de menace, choix de l'arbre d'accessibilitémake setup && make app
2. L'application cibleback-office fictif et HTML sémantiquepytest tests/test_backoffice.py
3. Les outils Playwrightarbre simplifié, clic par rôle et nom, tableaupytest tests/test_browser.py
4. Les garde-fousliste blanche, filtre réseau, confirmation, budgetpytest tests/test_guard.py
5. La boucle et le traçagefunction calling manuel, faux modèle, tracesmake test puis make run
6. Démonstration et mesures5 tâches réelles, taux de réussite, arbre contre capturemake e2e
7. Computer use et productioncomparaison avec les fournisseurs, règle de décision, nettoyagemake clean

Le code complet est dans files/ : make setup, make test, make e2e.

الموارد

تنزيل الكل (.zip)

المراجع