Construisez un agent de navigation AI avec LLMs, Playwright, utilisation du navigateur

Tutoriels

L’utilisation du navigateur est un outil ou une plateforme conçu pour permettre aux agents d’IA (tels que les modèles GPT d’OpenAI ou d’autres grands modèles linguistiques) d’interagir avec les navigateurs Web de manière intelligente et automatisée. Il comble essentiellement l’écart entre les capacités de l’IA et les interactions réelles avec le navigateur, permettant aux systèmes d’IA d’effectuer des tâches telles que la navigation sur des sites Web, l’extraction de données, le remplissage de formulaires, le clic sur des boutons, et plus encore, tout comme le ferait un utilisateur humain.

L’objectif principal de l’utilisation du navigateur est de rendre les sites Web accessibles et exploitables pour les agents d’IA en abstrayant les complexités de l’automatisation du navigateur. Au lieu d’exiger des développeurs qu’ils écrivent des scripts complexes pour localiser et interagir avec les éléments de la page Web, l’utilisation du navigateur simplifie ce processus en extrayant tous les éléments interactifs (comme les boutons, les champs de saisie, les liens, etc.) et en fournissant une interface structurée pour que les agents d’IA interagissent.

Caractéristiques clés de l’utilisation du navigateur

Automatisation pilotée par l’IA

L’utilisation du navigateur exploite l’IA pour comprendre et interagir avec les pages Web. Par exemple, elle peut analyser le contenu d’une page Web, identifier des actions pertinentes (comme cliquer sur un bouton ou remplir un formulaire) et exécuter ces actions de manière autonome.

Extraction de vision + HTML

Elle combine la compréhension visuelle (reconnaissance des éléments à l’écran) avec l’extraction de la structure HTML (analyse du code sous-jacent d’une page Web). Cette approche double garantit que les agents d’IA peuvent interagir avec des éléments Web à la fois statiques et dynamiques, même s’ils n’ont pas d’identifiants clairs tels que des ID ou des classes.

Gestion multi-onglets

L’utilisation du navigateur peut gérer plusieurs onglets de navigateur simultanément, permettant aux agents IA d’exécuter des flux de travail complexes impliquant l’interaction avec plusieurs pages web à la fois.

L’outil suit les actions exactes effectuées par l’agent IA (par exemple, cliquer sur un bouton ou remplir un formulaire) et peut reproduire ces actions de manière cohérente, même si la mise en page du site web change légèrement. Cela est particulièrement utile pour créer des tests auto-correcteurs dans l’automatisation QA.

Actions personnalisées

Les utilisateurs peuvent étendre l’utilisation du navigateur en ajoutant des actions personnalisées, telles que sauvegarder des données dans des fichiers, effectuer des opérations sur des bases de données, envoyer des notifications ou gérer des entrées humaines lors d’étapes spécifiques du processus d’automatisation.

Auto-correction

L’utilisation du navigateur comprend une gestion intelligente des erreurs et des mécanismes de récupération automatique. Si quelque chose ne va pas pendant l’automatisation (par exemple, un élément manquant ou un délai d’attente réseau), l’outil peut détecter le problème et tenter de récupérer automatiquement, garantissant que les flux de travail se poursuivent sans interruption.

Compatibilité avec plusieurs LLMs

L’utilisation du navigateur prend en charge divers grands modèles de langage (LLMs), y compris le GPT-4 d’OpenAI, Claude d’Anthropic et Llama 2 de Meta. Cette flexibilité permet aux utilisateurs de choisir le meilleur modèle IA pour leurs besoins spécifiques.

Comment fonctionne l’utilisation du navigateur

L’utilisation du navigateur scanne une page web et extrait tous les éléments interactifs (boutons, champs de saisie, liens, formulaires, etc.). Il fournit ensuite une représentation structurée de ces éléments que les agents d’IA peuvent comprendre et avec lesquels ils peuvent interagir.

Interaction de l’IA

Une fois les éléments interactifs identifiés, les agents d’IA peuvent effectuer des actions telles que cliquer sur des boutons, remplir des formulaires, naviguer entre les pages ou extraire des données. L’agent d’IA peut également analyser le contenu de la page web et prendre des décisions en fonction des informations trouvées.

Flux de travail d’automatisation

L’utilisation du navigateur permet aux utilisateurs de créer des flux de travail d’automatisation complexes. Par exemple, un agent d’IA pourrait naviguer sur un site de commerce électronique, ajouter des articles à un panier et finaliser un achat — le tout sans intervention humaine.

Gestion des erreurs et récupération

Si quelque chose ne va pas pendant le processus d’automatisation (par exemple, un élément manquant ou une page qui met du temps à se charger), l’utilisation du navigateur peut détecter le problème et tenter de récupérer automatiquement. Cela garantit que les flux de travail se poursuivent sans problème, même dans des environnements imprévisibles.

Guide d’installation

Commencer avec l’utilisation du navigateur est simple, mais cela nécessite une configuration initiale pour garantir que tout fonctionne correctement. Ci-dessous se trouve un guide d’installation détaillé basé sur les prérequis et les étapes que vous avez fournis. Ce guide vous guidera à travers la configuration de l’utilisation du navigateur localement sur votre machine.

Prérequis

Avant de commencer, assurez-vous que votre système répond aux exigences suivantes :

  • Python 3.11 ou supérieur. Vous pouvez vérifier votre version de Python en exécutant la commande :
    Python

     

  • Git. Git est requis pour cloner le dépôt

Installation Locale

Étape 1 : Cloner le Dépôt

Shell

 

Étape 2 : Configurer l’Environnement Python

Nous recommandons d’utiliser uv pour gérer l’environnement Python (recommandé pour Mac) :

Shell

 

1. Create a virtual environment. Run the following command to create a virtual environment with Python 3.11:

Shell

 

2. Activate the virtual environment.
  • Windows (invite de commandes) :
    Shell

     

  • macOS/Linux :
    Shell

     

Une fois activé, vous devriez voir .venv dans votre invite de terminal, ce qui indique que l’environnement virtuel est actif.

Étape 3 : Installer les dépendances

Maintenant que votre environnement est configuré, il est temps d’installer les dépendances nécessaires.

Installer les packages Python. Utilisez la commande suivante pour installer les packages Python requis répertoriés dans requirements.txt:

Shell

 

Étape 4 : Installer Playwright

Playwright est une bibliothèque d’automatisation de navigateur utilisée par Browser Use.

Pour l’installer, exécutez la commande :

Shell

 

Guide de configuration locale pour l’interface utilisateur Web de Browser Use

Une fois que vous avez terminé les étapes d’installation pour Browser Use, vous pouvez commencer à exécuter l’interface utilisateur Web localement. Ce guide vous guidera à travers le lancement de l’application, la personnalisation de ses paramètres et sa configuration pour utiliser votre propre navigateur si nécessaire.

Exécution de l’interface utilisateur Web

Après avoir terminé les étapes d’installation, vous pouvez démarrer l’interface utilisateur Web de Browser Use en exécutant la commande suivante :

Shell

 

L’interface utilisateur Web offre plusieurs options pour personnaliser son comportement. Voici un aperçu des drapeaux disponibles :

  • --ip– l’adresse IP à laquelle lier l’interface utilisateur Web
    • Par défaut – 127.0.0.1 (localhost)
  • --port– le port auquel lier l’interface utilisateur Web
    • Par défaut – 7788
  • --theme – le thème de l’interface utilisateur

Accéder à la WebUI

Une fois que la WebUI est en cours d’exécution, ouvrez votre navigateur web et naviguez vers :

Plain Text

 

Once the above command is executed, you should see the Browser Use interface, where you can interact with the tool and configure AI-driven browser automation tasks.

Configuration LLM

Dans la configuration LLM, sélectionnez un modèle de langage, par exemple, gemini. Gemini fournit la clé API gratuite.

Generate the API keys from the link attached below.

Dans la capture d’écran ci-dessous, vous pouvez voir que nous avons ajouté les clés API générées avec le lien ci-dessus.

Exécuter l’Agent

Dans Exécuter l’agent, donnons le prompt « aller sur amazon.in et taper ‘Playwright’, cliquer sur rechercher et me donner la première URL. »

Dans la capture d’écran ci-dessous, vous pouvez voir que lorsque nous exécutons le prompt, il ouvrira le navigateur Chromium et interagira avec l’ensemble du DOM de la page.

Enfin, il saisira la valeur Playwright dans la boîte de recherche, et vous pouvez voir la capture d’écran ci-dessous.

In the below screenshot, you can see it gives us the first URL.

Dans le backend, vous pouvez voir que tous les journaux sont exécutés ; tous les journaux de l’agent en cours d’exécution sont présents dans le backend.

Résultat

Dans l’onglet des résultats, vous pouvez voir le résultat final, l’action du modèle, les pensées du modèle, le fichier de trace et l’historique de l’agent.

Vidéo

Vous pouvez télécharger la vidéo en cliquant sur le lien fourni. Vous pouvez également voir la vidéo jointe sous l’onglet Enregistrements.Lorsque vous exécutez la vidéo, vous verrez toutes les étapes que l’agent a effectuées.

Voici quelques captures d’écran de la vidéo.

Conclusion

L’intégration des LLM, Playwright, et Browser Use représente un nouveau bond en avant dans l’automatisation des navigateurs et les flux de travail pilotés par l’IA. La combinaison de ces outils vous permettra de créer des agents de navigateur intelligents capables d’accomplir des tâches complexes avec une intervention humaine minimale. De l’automatisation des processus répétitifs à la réalisation de tests QA dynamiques et à la prise de décisions en temps réel, les possibilités sont infinies.

Référence

Source:
https://dzone.com/articles/build-ai-browser-agent-llms-playwright-browser-use