Costruisci un Agente Browser AI con LLMs, Playwright, Utilizzo del Browser

L’uso del browser è uno strumento o una piattaforma progettata per consentire agli agenti AI (come i modelli GPT di OpenAI o altri modelli di linguaggio di grandi dimensioni) di interagire e controllare i browser web in modo intelligente e automatizzato. In sostanza, colma il divario tra le capacità dell’AI e le interazioni reali con il browser, rendendo possibile per i sistemi AI eseguire compiti come navigare in siti web, estrarre dati, compilare moduli, fare clic su pulsanti e altro ancora, proprio come farebbe un utente umano.

L’obiettivo principale dell’uso del browser è rendere i siti web accessibili e utilizzabili per gli agenti AI astraendo le complessità dell’automazione del browser. Invece di richiedere agli sviluppatori di scrivere script complessi per individuare e interagire con gli elementi delle pagine web, l’uso del browser semplifica questo processo estraendo tutti gli elementi interattivi (come pulsanti, campi di input, collegamenti, ecc.) e fornendo un’interfaccia strutturata per gli agenti AI con cui interagire.

Caratteristiche chiave dell’uso del browser

Automazione guidata dall’AI

L’uso del browser sfrutta l’AI per comprendere e interagire con le pagine web. Ad esempio, può analizzare il contenuto di una pagina web, identificare azioni rilevanti (come fare clic su un pulsante o compilare un modulo) ed eseguire tali azioni in modo autonomo.

Visione + Estrazione HTML

Combina la comprensione visiva (riconoscere elementi sullo schermo) con l’estrazione della struttura HTML (analizzare il codice sottostante di una pagina web). Questo approccio duale assicura che gli agenti AI possano interagire con elementi web sia statici che dinamici, anche se non hanno identificatori chiari come ID o classi.

Gestione di più schede

L’uso del browser può gestire più schede del browser simultaneamente, consentendo agli agenti AI di eseguire flussi di lavoro complessi che coinvolgono l’interazione con più pagine web contemporaneamente.

Lo strumento traccia le esatte azioni eseguite dall’agente AI (ad esempio, cliccare un pulsante o compilare un modulo) e può replicare quelle azioni in modo coerente, anche se il layout del sito web cambia leggermente. Questo è particolarmente utile per creare test auto-guarenti nell’automazione QA.

Azioni Personalizzate

Gli utenti possono estendere l’uso del browser aggiungendo azioni personalizzate, come salvare dati in file, eseguire operazioni di database, inviare notifiche o gestire input umani durante fasi specifiche nel processo di automazione.

Auto-Correzione

L’uso del browser include una gestione intelligente degli errori e meccanismi di recupero automatico. Se qualcosa va storto durante l’automazione (ad esempio, un elemento mancante o un timeout di rete), lo strumento può rilevare il problema e tentare di recuperare automaticamente, garantendo che i flussi di lavoro continuino senza interruzioni.

Compatibilità con più LLM

L’uso del browser supporta vari modelli di linguaggio di grandi dimensioni (LLM), tra cui GPT-4 di OpenAI, Claude di Anthropic e Llama 2 di Meta. Questa flessibilità consente agli utenti di scegliere il miglior modello AI per le loro esigenze specifiche.

Come Funziona l’Uso del Browser

L’uso del browser esamina una pagina web ed estrae tutti gli elementi interattivi (pulsanti, campi di input, collegamenti, moduli, ecc.). Fornisce quindi una rappresentazione strutturata di questi elementi che gli agenti AI possono comprendere e con cui interagire.

Interazione con l’AI

Una volta identificati gli elementi interattivi, gli agenti AI possono eseguire azioni come fare clic sui pulsanti, compilare moduli, navigare tra le pagine o estrarre dati. L’agente AI può anche analizzare il contenuto della pagina web e prendere decisioni basate sulle informazioni trovate.

Flussi di lavoro automatizzati

L’uso del browser consente agli utenti di creare flussi di lavoro automatizzati complessi. Ad esempio, un agente AI potrebbe navigare attraverso un sito di e-commerce, aggiungere articoli al carrello e completare un acquisto, il tutto senza intervento umano.

Gestione degli errori e ripristino

Se durante il processo di automazione si verifica un problema (ad esempio, un elemento mancante o una pagina che si carica lentamente), l’uso del browser può rilevare il problema e tentare di ripristinare automaticamente. Ciò garantisce che i flussi di lavoro continuino senza intoppi, anche in ambienti imprevedibili.

Guida all’installazione

Cominciare con l’uso del browser è semplice, ma richiede una configurazione iniziale per garantire che tutto funzioni correttamente. Di seguito è riportata una dettagliata guida all’installazione basata sui prerequisiti e sui passaggi che hai fornito. Questa guida ti guiderà nell’installazione di Browser Use localmente sul tuo computer.

Prerequisiti

Prima di iniziare, assicurati che il tuo sistema soddisfi i seguenti requisiti:

• Python 3.11 o superiore. Puoi verificare la tua versione di Python eseguendo il comando:
  Python

   

  python --versione
• Git. Git è richiesto per clonare il repository

Installazione Locale

Passo 1: Clonare il Repository

git clone https://github.com/browser-use/web-ui.git

cd web-ui

Passo 2: Configurare l’Ambiente Python

Consigliamo di utilizzare uv per gestire l’ambiente Python (consigliato per Mac):

curl -LsSf https://astral.sh/uv/install.sh | sh

uv venv -- python 3.11

2. Activate the virtual environment.

• Windows (command prompt):
  Shell

  .venv\Scripts\activate
• macOS/Linux:
  Shell

  sorgente .venv/bin/activate

Una volta attivato, dovresti vedere .venv nel prompt del terminale, indicando che l’ambiente virtuale è attivo.

Passo 3: Installare le Dipendenze

Ora che il tuo ambiente è configurato, è il momento di installare le dipendenze necessarie.

Installare i pacchetti Python. Usa il seguente comando per installare i pacchetti Python richiesti elencati in requirements.txt:

uv pip install -r requirements.txt

Playwright è una libreria di automazione del browser utilizzata da Browser Use.

Per installarlo, esegui il comando:

playwright install

Guida alla Configurazione Locale per Browser Use WebUI

Una volta completati i passaggi di installazione per Browser Use, puoi iniziare ad eseguire localmente il WebUI. Questa guida ti guiderà nel lanciare l’applicazione, personalizzare le impostazioni e configurarla per utilizzare il tuo browser se necessario.

Esecuzione del WebUI

Dopo aver completato i passaggi di installazione, puoi avviare il Browser Use WebUI eseguendo il seguente comando:

python webui.py --ip 127.0.0.1 --port 7788

Il WebUI fornisce diverse opzioni per personalizzare il suo comportamento. Ecco una panoramica dei flag disponibili:

• --ip– l’indirizzo IP a cui associare il WebUI
  • Predefinito – 127.0.0.1 (localhost)
• --port– la porta a cui associare il WebUI
  • Predefinito – 7788
• --tema – il tema per l’interfaccia utente

Accesso alla WebUI

Una volta avviata la WebUI, apri il tuo browser web e vai a:

http://127.0.0.1:7788

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.

Nella configurazione di LLM, seleziona un modello linguistico, ad esempio gemini. Gemini fornisce la chiave API gratuita.

Nella schermata sottostante, puoi vedere che abbiamo aggiunto le chiavi API generate con il link sopra.

Esegui Agente

In Esegui agente, diamo il prompt “vai su amazon.in e scrivi ‘Playwright’ clicca su cerca e dammi il primo URL.”

Nella schermata sottostante, puoi vedere che quando eseguiamo il prompt, aprirà il browser Chromium e interagirà con l’intero DOM della pagina.

Infine, inserirà il valore Playwright nella casella di ricerca, e potrai vedere la schermata sottostante.

Nel backend, puoi vedere che tutti i log vengono eseguiti; qualunque agente stia eseguendo il suo log, tutti i log sono nel backend.

Risultato

Nella scheda dei risultati, puoi vedere il risultato finale, l’azione del modello, i pensieri del modello, il file di traccia e la cronologia dell’agente.

Video

Puoi scaricare il video cliccando sul link fornito. Puoi anche vedere il video allegato nella scheda Registrazioni.Quando esegui il video, vedrai tutti i passaggi che l’agente ha eseguito.

Sotto ci sono alcune schermate del video.

Conclusione

L’integrazione dei LLM, Playwright e l’uso del browser rappresenta un nuovo salto nell’automazione del browser e nei flussi di lavoro guidati dall’IA. Combinare questi strumenti ti permetterà di creare agenti del browser intelligenti in grado di eseguire compiti complessi con un intervento umano minimo. Dall’automazione dei processi ripetitivi all’abilitazione di test QA dinamici e decisioni in tempo reale, le possibilità sono infinite.

Riferimento

• Uso del Browser