Sbloccare gli agenti web AI: GPT-4V e Puppeteer abilitano la navigazione autonoma

Sblocca potenti agenti web AI con GPT-4V e Puppeteer! Esplora la navigazione autonoma, i web scraper e la ricerca web sofisticata guidata dall'AI. Scopri come questi avanzati assistenti AI possono rivoluzionare i compiti, dall'RPA al supporto clienti.

19 febbraio 2025

party-gif

Sblocca il potere dell'automazione web guidata dall'AI con questo approccio innovativo che combina GPT-4V e Puppeteer. Scopri come puoi costruire un agente AI in grado di navigare sul web, estrarre dati e completare attività complesse con facilità, rivoluzionando il tuo flusso di lavoro e sbloccando nuove possibilità.

Casi d'uso e opportunità di mercato per gli agenti web AI

Un modo per esaminare i potenziali casi d'uso e le opportunità di mercato per gli agenti web AI è quello di esaminare i precedenti tentativi di costruire sistemi simili, i loro limiti e come le nuove tecnologie o i cambiamenti possano potenzialmente modificare la dinamica.

Una categoria di mercato diretta è l'Automazione dei Processi Robotici (RPA), che è una categoria di software che aiuta le aziende a costruire bot automatizzati per gestire attività ripetitive e standardizzate come l'elaborazione delle fatture o l'inserimento dei dati. Tuttavia, i limiti delle soluzioni RPA sono abbastanza chiari - faticano con processi non standardizzati o in continuo cambiamento e richiedono alti costi di installazione per ogni specifica automazione.

Al contrario, gli agenti web AI che possono controllare direttamente il computer e il browser sono entusiasmanti perché possono teoricamente gestire situazioni molto più complesse con molto meno costo di installazione. Invece di costruire automazioni specifiche, l'agente può semplicemente navigare sui siti web, estrarre dati e completare attività indipendentemente dai cambiamenti di formato, poiché l'agente può prendere le decisioni necessarie.

Oltre alla semplice automazione, questi agenti AI possono anche andare oltre l'RPA tradizionale per completare compiti più intelligenti come il supporto clienti, le vendite e il marketing. Accedendo a più sistemi e sfruttando le loro capacità decisionali, questi "lavoratori" AI possono essere distribuiti per una gamma più ampia di casi d'uso, incluse le applicazioni per i consumatori con volumi inferiori.

Tuttavia, una sfida chiave nel fornire soluzioni di lavoratori AI utili non è solo la comprensione tecnica, ma anche la conoscenza del flusso di lavoro end-to-end per specifiche funzioni lavorative. Un recente rapporto di ricerca di Hotspot che ha intervistato oltre 1.400 leader di vendita a livello globale fornisce preziose informazioni sul flusso di lavoro di vendita moderno e sui casi d'uso dell'AI, che possono essere molto utili per la costruzione di agenti AI per le funzioni di vendita.

In sintesi, le principali opportunità per gli agenti web AI includono:

  • Gestire attività più complesse e non standardizzate rispetto all'RPA tradizionale
  • Ridurre i costi di installazione per le automazioni
  • Espandersi oltre la semplice automazione per compiti più intelligenti come il supporto clienti e le vendite
  • Sfruttare la profonda conoscenza del flusso di lavoro per specifiche funzioni lavorative per costruire agenti AI più efficaci

Due approcci per la costruzione di agenti web AI

Approccio 1: Web Scraper alimentato da GPT-4V

  1. Utilizzare una libreria Node.js come Puppeteer per acquisire screenshot di pagine web e controllare il browser web.
  2. Creare uno script Python che chiama il file JavaScript per acquisire gli screenshot e utilizza quindi GPT-4V per estrarre i dati dagli screenshot.
  3. Lo script Python definisce funzioni per convertire l'immagine in base64, acquisire screenshot e utilizzare GPT-4V per estrarre informazioni dagli screenshot.
  4. Lo script collega queste funzioni per creare un potente web scraper in grado di accedere a siti web che normalmente bloccano i servizi di web scraping.

Approccio 2: Costruire un Agente Web AI

  1. Creare un file Node.js che importa varie librerie e imposta un'istanza di OpenAI e un'interfaccia a riga di comando.
  2. Implementare una funzione highlightLinks che identifica tutti gli elementi interattivi di una pagina web e aggiunge loro un attributo speciale.
  3. Definire una funzione principale che crea un browser Puppeteer, imposta un messaggio di sistema per GPT-4V e entra in un ciclo in cui:
    • Ottiene una risposta da GPT-4V in base al prompt dell'utente e allo stato attuale della pagina web.
    • Se la risposta indica che un link deve essere cliccato, trova l'elemento corrispondente e lo clicca.
    • Se la risposta indica che si deve visitare un nuovo URL, naviga a quell'URL e evidenzia i link.
    • Se la risposta è un messaggio regolare, ne visualizza il risultato all'utente.
  4. Questo agente web AI può navigare attraverso più siti web, cliccare sui link e completare compiti di ricerca complessi sfruttando le capacità di GPT-4V.

Costruire uno scraper web alimentato da GPT-4V

Per costruire un web scraper alimentato da GPT-4V, utilizzeremo una libreria Node.js chiamata Puppeteer per controllare il browser web e acquisire screenshot. Ecco una guida passo-passo:

  1. Crea un nuovo file chiamato screenshot.js e importa le librerie necessarie:
const puppeteer = require('puppeteer');
const puppeteerExtra = require('puppeteer-extra');
  1. Definisci l'URL che vuoi scrape e un valore di timeout:
const url = 'https://en.wikipedia.org/wiki/Main_Page';
const timeout = 60000; // 60 secondi
  1. Crea una funzione asincrona per avviare il browser, navigare all'URL e acquisire uno screenshot:
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. In questo esempio, stiamo utilizzando il plugin puppeteer-extra per rendere il browser meno rilevabile dai siti web.

  2. Esegui la funzione takeScreenshot() per acquisire lo screenshot:

takeScreenshot();

Ora puoi eseguire lo script con node screenshot.js e verrà salvato uno screenshot della homepage di Wikipedia nel file screenshot.jpg.

Successivamente, creeremo uno script Python che utilizza lo screenshot e GPT-4V per estrarre i dati dal sito web:

  1. Crea un nuovo file chiamato vision_scraper.py e importa le librerie necessarie:
import os
import subprocess
import base64
import openai
from dotenv import load_dotenv

load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
  1. Definisci funzioni per convertire l'immagine in base64 e acquisire uno screenshot utilizzando lo 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. Crea una funzione per utilizzare GPT-4V per estrarre informazioni dallo screenshot:
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. Unisci tutto in una funzione 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. Ora puoi utilizzare la funzione vision_query() per estrarre informazioni da un sito web:
result = vision_query("https://www.linkedin.com/in/your-profile-url", "Extract the work experience section from the profile.")
print(result)

Questo esempio acquisirà uno screenshot del profilo LinkedIn specificato e utilizzerà GPT-4V per estrarre la sezione dell'esperienza lavorativa. Puoi personalizzare il prompt per estrarre diversi tipi di informazioni dal sito web.

FAQ