Local Browser - Automazione Web con AI sul Dispositivo

Presto lanceremo il supporto per runanywhere-web-sdk nel nostro repository principale: dai un'occhiata: https://github.com/RunanywhereAI/runanywhere-sdks

Un'estensione Chrome che utilizza WebLLM per eseguire automazione web basata su AI interamente sul dispositivo. Nessuna API cloud, nessuna chiave API, completamente privata.

Demo

https://github.com/user-attachments/assets/898cc5c2-db77-4067-96e6-233c5da2bae5

Caratteristiche

• AI sul Dispositivo: Utilizza WebLLM con accelerazione WebGPU per inferenza LLM locale
• Sistema Multi-Agente: Agenti Planner + Navigator per l'esecuzione intelligente delle attività
• Automazione Browser: Naviga, clicca, digita, estrai dati dalle pagine web
• Privacy al Primo Posto: Tutta l'AI viene eseguita localmente, nessun dato lascia il tuo dispositivo
• Supporto Offline: Funziona offline dopo il download iniziale del modello

Avvio Rapido

Prerequisiti

• Chrome 124+ (richiesto per WebGPU nei service workers)
• Node.js 18+ e npm
• GPU con supporto WebGPU (la maggior parte delle GPU moderne funziona)

Installazione

1. Clona e installa le dipendenze:

   cd local-browser
   npm install
   

2. Compila l'estensione:

   npm run build
   

3. Carica in Chrome:

   • Apri chrome://extensions
   • Abilita "Developer mode" (in alto a destra)
   • Clicca su "Load unpacked"
   • Seleziona la cartella dist di questo progetto

4. Primo avvio:

   • Clicca sull'icona dell'estensione nella barra degli strumenti
   • Il primo avvio scaricherà il modello AI (~1GB)
   • Questo viene memorizzato nella cache per usi futuri

Utilizzo

1. Vai su qualsiasi pagina web
2. Clicca sull'icona dell'estensione Local Browser
3. Digita un'attività come:
   • "Cerca 'WebGPU' su Wikipedia ed estrai il primo paragrafo"
   • "Vai su example.com e dimmi cosa c'è"
   • "Trova la casella di ricerca e cerca 'AI news'"
4. Guarda l'AI eseguire l'attività passo dopo passo

Sviluppo

Modalità di Sviluppo

npm run dev

Questo monitora le modifiche e ricostruisce automaticamente.

Struttura del Progetto

local-browser/
├── manifest.json           # Manifest dell'estensione Chrome (MV3)
├── src/
│   ├── background/         # Service worker
│   │   ├── index.ts        # Punto di ingresso e gestione messaggi
│   │   ├── llm-engine.ts   # Wrapper WebLLM
│   │   └── agents/         # Sistema agente AI
│   │       ├── base-agent.ts
│   │       ├── planner-agent.ts
│   │       ├── navigator-agent.ts
│   │       └── executor.ts
│   ├── content/            # Content scripts
│   │   ├── dom-observer.ts # Estrazione stato pagina
│   │   └── action-executor.ts
│   ├── popup/              # UI popup React
│   │   ├── App.tsx
│   │   └── components/
│   └── shared/             # Tipi e costanti condivise
└── dist/                   # Output della build

Come Funziona

1. L'utente inserisce un'attività nell'interfaccia popup
2. L'Agente Planner analizza l'attività e crea una strategia di alto livello
3. L'Agente Navigator esamina il DOM della pagina corrente e decide l'azione successiva
4. Il Content Script esegue l'azione (clicca, digita, estrae, ecc.)
5. Il ciclo continua fino al completamento dell'attività o al fallimento

Sistema Agente

L'estensione utilizza un'architettura a due agenti ispirata a Nanobrowser:

• PlannerAgent: Pianificazione strategica, crea un approccio passo dopo passo
• NavigatorAgent: Esecuzione tattica, sceglie azioni specifiche in base allo stato della pagina

Entrambi gli agenti producono JSON strutturato che viene analizzato ed eseguito.

Configurazione del Modello

Modello predefinito: Qwen2.5-1.5B-Instruct-q4f16_1-MLC (~1GB)

Modelli alternativi (configurati in src/shared/constants.ts):

• Phi-3.5-mini-instruct-q4f16_1-MLC (~2GB, ragionamento migliore)
• Llama-3.2-1B-Instruct-q4f16_1-MLC (~0.7GB, più piccolo)

Risoluzione dei Problemi

WebGPU non supportato

• Aggiorna Chrome alla versione 124 o successiva
• Controlla chrome://gpu per verificare lo stato di WebGPU
• Alcune GPU potrebbero non supportare WebGPU

Il modello non si carica

• Assicurati di avere abbastanza spazio su disco (~2GB liberi)
• Controlla la console del browser per eventuali errori
• Prova a cancellare l'archiviazione dell'estensione e ricarica

Le azioni non vengono eseguite

• Alcune pagine bloccano i content script (chrome://, pagine delle estensioni)
• Prova su una pagina web normale come wikipedia.org

L'estensione non funziona dopo l'aggiornamento di Chrome

• Vai su chrome://extensions
• Clicca sul pulsante di ricarica dell'estensione

Limitazioni

• Ambito POC: Questo è un proof-of-concept, non un software di produzione
• Nessuna Visione: Utilizza solo analisi DOM testuale (nessuna comprensione di screenshot)
• Singola Scheda: Funziona solo con la scheda attualmente attiva
• Azioni di Base: Supporta naviga, clicca, digita, estrai, scorri, attendi
• Dimensione del Modello: Modelli più piccoli potrebbero avere difficoltà con attività complesse

Stack Tecnologico

• WebLLM: Inferenza LLM sul dispositivo con WebGPU
• React: UI popup
• TypeScript: Sviluppo type-safe
• Vite + CRXJS: Bundling dell'estensione Chrome
• Chrome Extension Manifest V3: Architettura moderna delle estensioni

Crediti

Questo progetto è ispirato da:

• Nanobrowser - Automazione web multi-agente (Licenza MIT)
• WebLLM - Inferenza LLM nel browser (Licenza Apache-2.0)

Licenze delle Dipendenze

Pacchetto	Licenza
@mlc-ai/web-llm	Apache-2.0
React	MIT
Vite	MIT
@crxjs/vite-plugin	MIT
TypeScript	Apache-2.0

Licenza

Licenza MIT - Vedi il file LICENSE per i dettagli.