Débloquer les agents Web IA : GPT-4V et Puppeteer permettent la navigation autonome

Débloquez des agents web IA puissants avec GPT-4V et Puppeteer ! Explorez la navigation autonome, les grattoirs web et la recherche web sophistiquée pilotée par l'IA. Découvrez comment ces assistants IA avancés peuvent révolutionner les tâches, de l'automatisation des processus robotiques au support client.

17 février 2025

party-gif

Débloquez la puissance de l'automatisation web pilotée par l'IA avec cette approche innovante qui combine GPT-4V et Puppeteer. Découvrez comment vous pouvez construire un agent IA capable de naviguer sur le web, d'extraire des données et d'accomplir des tâches complexes avec facilité, révolutionnant ainsi votre flux de travail et ouvrant de nouvelles possibilités.

Cas d'utilisation et opportunités de marché pour les agents Web IA

Une façon d'examiner les cas d'utilisation potentiels et les opportunités de marché pour les agents web IA est d'examiner les tentatives précédentes de construction de systèmes similaires, leurs limites et la manière dont les nouvelles technologies ou les changements peuvent potentiellement modifier la dynamique.

Une catégorie de marché directe est l'automatisation des processus robotiques (RPA), qui est une catégorie de logiciels qui aide les entreprises à construire des bots automatisés pour gérer des tâches répétitives et standardisées comme le traitement des factures ou la saisie de données. Cependant, les limites des solutions RPA sont assez claires - elles ont du mal avec des processus non standardisés ou en constante évolution, et nécessitent des coûts de mise en place élevés pour chaque automatisation spécifique.

En revanche, les agents web IA qui peuvent contrôler directement l'ordinateur et le navigateur sont passionnants car ils peuvent théoriquement gérer des situations beaucoup plus complexes avec des coûts de mise en place beaucoup plus faibles. Au lieu de construire des automatisations spécifiques, l'agent peut simplement naviguer sur les sites Web, extraire des données et accomplir des tâches indépendamment des changements de format, car l'agent peut prendre les décisions nécessaires.

Au-delà de la simple automatisation, ces agents IA peuvent également aller au-delà de la RPA traditionnelle pour accomplir des tâches plus intelligentes comme le service client, les ventes et le marketing. En accédant à davantage de systèmes et en tirant parti de leurs capacités de prise de décision, ces "travailleurs" IA peuvent être déployés pour une plus grande variété de cas d'utilisation, y compris des applications grand public à plus faible volume.

Cependant, un défi clé dans la fourniture de solutions de travailleurs IA utiles n'est pas seulement la compréhension technique, mais aussi la connaissance du flux de travail de bout en bout pour des fonctions professionnelles spécifiques. Un rapport de recherche récent de Hotspot qui a interrogé plus de 1 400 responsables des ventes dans le monde fournit des informations précieuses sur le flux de travail des ventes modernes et les cas d'utilisation de l'IA, ce qui peut être très utile pour construire des agents IA pour les fonctions de vente.

En résumé, les principales opportunités pour les agents web IA comprennent :

  • Gérer des tâches plus complexes et non standardisées par rapport à la RPA traditionnelle
  • Réduire les coûts de mise en place des automatisations
  • S'étendre au-delà de la simple automatisation pour des tâches plus intelligentes comme le service client et les ventes
  • Tirer parti des connaissances approfondies du flux de travail pour des fonctions professionnelles spécifiques afin de construire des agents IA plus efficaces

Deux approches pour construire des agents Web IA

Approche 1 : Gratteur Web Alimenté par GPT-4V

  1. Utilisez une bibliothèque Node.js comme Puppeteer pour prendre des captures d'écran de pages Web et contrôler le navigateur Web.
  2. Créez un script Python qui appelle le fichier JavaScript pour prendre des captures d'écran et utilise ensuite GPT-4V pour extraire les données des captures d'écran.
  3. Le script Python définit des fonctions pour convertir l'image en base64, prendre des captures d'écran et utiliser GPT-4V pour extraire les informations des captures d'écran.
  4. Le script relie ces fonctions ensemble pour créer un gratteur Web puissant qui peut accéder aux sites Web qui bloquent normalement les services de grattage.

Approche 2 : Construire un Agent Web IA

  1. Créez un fichier Node.js qui importe diverses bibliothèques et configure une instance OpenAI et une interface en ligne de commande.
  2. Implémentez une fonction highlightLinks qui identifie tous les éléments interactifs sur une page Web et leur ajoute un attribut spécial.
  3. Définissez une fonction principale qui crée un navigateur Puppeteer, configure un message système pour GPT-4V et entre dans une boucle où elle :
    • Obtient une réponse de GPT-4V en fonction de l'invite de l'utilisateur et de l'état actuel de la page Web.
    • Si la réponse indique qu'un lien doit être cliqué, elle trouve l'élément correspondant et le clique.
    • Si la réponse indique qu'une nouvelle URL doit être visitée, elle navigue vers cette URL et met en surbrillance les liens.
    • Si la réponse est un message régulier, elle affiche le résultat à l'utilisateur.
  4. Cet agent Web IA peut naviguer sur plusieurs sites Web, cliquer sur des liens et effectuer des tâches de recherche complexes en tirant parti des capacités de GPT-4V.

Les deux approches démontrent comment vous pouvez tirer parti des modèles de langage de grande taille comme GPT-4V pour construire des outils puissants d'automatisation et de recherche Web. La première approche se concentre sur le grattage Web, tandis que la seconde approche crée un agent Web plus interactif qui peut naviguer et accomplir des tâches sur le Web.

Construire un gratteur Web alimenté par GPT-4V

Pour construire un gratteur Web alimenté par GPT-4V, nous utiliserons une bibliothèque Node.js appelée Puppeteer pour contrôler le navigateur Web et prendre des captures d'écran. Voici un guide étape par étape :

  1. Créez un nouveau fichier appelé screenshot.js et importez les bibliothèques nécessaires :
const puppeteer = require('puppeteer');
const puppeteerExtra = require('puppeteer-extra');
  1. Définissez l'URL que vous voulez gratter et une valeur de délai d'attente :
const url = 'https://en.wikipedia.org/wiki/Main_Page';
const timeout = 60000; // 60 secondes
  1. Créez une fonction asynchrone pour lancer le navigateur, naviguer jusqu'à l'URL et prendre une capture d'écran :
async function takeScreenshot() {
  const browser = await puppeteerExtra.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto(url, { waitUntil: 'networkidle0' });
  await page.screenshot({ path: 'screenshot.jpg', fullPage: true });
  await browser.close();
}
  1. Dans cet exemple, nous utilisons le plugin puppeteer-extra pour rendre le navigateur moins détectable par les sites Web.

  2. Exécutez la fonction takeScreenshot() pour capturer la capture d'écran :

takeScreenshot();

Maintenant, vous pouvez exécuter le script avec node screenshot.js, et il enregistrera une capture d'écran de la page d'accueil de Wikipédia dans le fichier screenshot.jpg.

Ensuite, nous allons créer un script Python qui utilise la capture d'écran et GPT-4V pour extraire des données du site Web :

  1. Créez un nouveau fichier appelé vision_scraper.py et importez les bibliothèques nécessaires :
import os
import subprocess
import base64
import openai
from dotenv import load_dotenv

load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
  1. Définissez des fonctions pour convertir l'image en base64 et prendre une capture d'écran à l'aide du script screenshot.js :
def image_to_b64(image_path):
    with open(image_path, "rb") as image_file:
        return base64.b64encode(image_file.read()).decode("utf-8")

def url_to_screenshot(url):
    if os.path.exists("screenshot.jpg"):
        os.remove("screenshot.jpg")
    try:
        subprocess.run(["node", "screenshot.js"], check=True)
        return "screenshot.jpg"
    except subprocess.CalledProcessError:
        return None
  1. Créez une fonction pour utiliser GPT-4V pour extraire des informations de la capture d'écran :
def vision_extract(image_b64, prompt):
    response = openai.ChatCompletion.create(
        model="gpt-4",
        messages=[
            {"role": "system", "content": "You are a web scraper. Your job is to extract information based on a screenshot of a website and user instructions."},
            {"role": "user", "content": prompt},
            {"role": "user", "content": image_b64}
        ],
        max_tokens=2048,
        n=1,
        stop=None,
        temperature=0.7,
    )
    return response.choices[0].message.content.strip()
  1. Rassemblez tout dans une fonction vision_query() :
def vision_query(url, prompt):
    screenshot_path = url_to_screenshot(url)
    if screenshot_path:
        image_b64 = image_to_b64(screenshot_path)
        return vision_extract(image_b64, prompt)
    else:
        return "Error: Unable to capture screenshot."
  1. Vous pouvez maintenant utiliser la fonction vision_query() pour extraire des informations d'un site Web :
result = vision_query("https://www.linkedin.com/in/your-profile-url", "Extract the work experience section from the profile.")
print(result)

Cet exemple prendra une capture d'écran du profil LinkedIn spécifié et utilisera GPT-4V pour extraire la section d'expérience professionnelle. Vous pouvez personnaliser l'invite pour extraire différents types d'informations du site Web.

FAQ