La maggior parte degli strumenti di automazione dei browser funziona da un processo esterno: Playwright, Puppeteer, Selenium e browser-use sono esempi di ciò. Questi strumenti leggono la pagina attraverso screenshot o il protocollo DevTools di Chrome. Alibaba ha però sviluppato Page Agent, una soluzione diversa che si esegue direttamente all'interno della pagina come codice JavaScript puro.

Che Cos'è Page Agent?

Page Agent è una libreria client-side per aggiungere comportamenti di agenti ad un'app web. Puoi includerla, quindi emettere comandi in linguaggio naturale. L'agente trova elementi, clicca pulsanti e compila moduli direttamente all'interno della pagina.

Un vantaggio chiave è che esso eredita i cookie, la sessione e l'autenticazione dell'utente. Non si richiede uno script separato di backend; le regole di convalida dell'interfaccia e le misure di sicurezza sono già presenti.

Il design prevede un agente model-agnostic: puoi usare qualsiasi modello linguistico tramite un endpoint compatibile con OpenAI. Solo testo viene inviato al modello, quindi un modello testuale sufficientemente potente è necessario.

Come Funziona la Deidratazione del DOM

Il cuore del Page Agent è la tecnica nota come "deidratazione del DOM". Una pagina web moderna può contenere migliaia di nodi e spedire HTML grezzo a un modello potrebbe essere lento e costoso.

Quando un comando arriva, l'agente esplora l'oggetto interattivo del Document Object Model (DOM). A ogni elemento interattivo, come pulsanti, link e campi di input, viene assegnato un indice, un ruolo e un'etichetta. Il DOM attivo viene quindi convertito in un oggetto FlatDomTree, una mappa testuale di ciò che è importante.

Agente in Azione

Il team ha fornito esempi interattivi per comprendere meglio il ciclo operativo. I pannelli "Dehydrated DOM" e "Action trace" mostrano l'evolversi delle operazioni in tempo reale. Alla base di tutto sta il PageController, il quale coordina le azioni effettive:

    • updateTree()
    • clickElement(index)
    • inputText(index, text)
    • scroll(up: boolean, numPages: number)

Quest'architettura si suddivide in pacchetti modulari con diversi ruoli:

    • @page-agent/core: logica dell'agente headless
    • page-agent: classe completa con interfaccia grafica
    • @page-agent/page-controller: gestione del DOM e marcatura visiva

Come Paragona a Altri Strumenti

Analizziamo un confronto tra Page Agent e altri strumenti esistenti:

    • L'approccio: Page Agent operando in prima persona client-side, diversamente da Playwright che usa un processo esterno.
    • Dove Funziona?: Page Agent funziona all'interno della pagina; altri strumenti necessitano di server, browser o estensioni.
    • Dati Letti: Page Agent riceve un DOM deidratato come testo; strumenti come Selenium leggono il DOM attraverso un driver esterno.
    • Set-up: Page Agent richiede un tag script; gli altri possono richiedere server e tool esterni più sofisticati.
    • Miglior Utilizzo: Page Agent si adatta bene per l'integrazione di agenti come copilot in prodotti propri

Usi Pratici ed Esempi

    • Copilota SaaS: Integra un assistente che possa operare all'interno del prodotto stesso, non solo fornire istruzioni.
    • Moduli Intelligenti: Riduci un modulo complesso in una singola istruzione, tipo “Inserisci un viaggio di $50 per pranzo yesterday.”
    • Accessibilità: Collega l'agente con l'API Web Speech per il controllo vocale e rendi accessibile qualsiasi interfaccia web.
    • Modernizzazione App: Apre strumenti legacy che non hanno API, con un'interfaccia di controllo comoda.

Avvio Rapido

Per un test iniziale, puoi caricare Page Agent con un modello gratuito:

    • Aggiungi un <script> tag per installarlo.
    • Usa il model e baseURL per collegarti al tuo provider API preferito.
    • Configura il token apiKey e il linguaggio iniziale per l'interpretazione.

Esempio di codice per l'implementazione di un comando semplice:

await agent.execute('Click the login button')

Cosa Funziona e Cosa Meno

Punti Forti

    • Integrazione rapida senza modificare il backend
    • Costi modelli ridotti grazie al solo testo
    • Supporto per una varietà di modelli linguistici

Limiti

    • Limiti nella sicurezza a livello di prompt
    • Focalizzato su una singola pagina
    • Necessità di una configurazione di backend per azioni sensibili

Link Utili

Per scaricare e sperimentare con Page Agent, consulta: