Local Browser - Automatización Web con IA en Dispositivo

Pronto lanzaremos soporte para runanywhere-web-sdk en nuestro repositorio principal: échale un vistazo: https://github.com/RunanywhereAI/runanywhere-sdks

Una extensión de Chrome que utiliza WebLLM para ejecutar automatización web con IA completamente en el dispositivo. Sin APIs en la nube, sin claves API, totalmente privada.

Demo

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

Características

• IA en el dispositivo: Usa WebLLM con aceleración WebGPU para inferencia local de LLM
• Sistema multiagente: Agentes Planificador + Navegador para ejecución inteligente de tareas
• Automatización del navegador: Navegar, hacer clic, escribir, extraer datos de páginas web
• Privacidad primero: Toda la IA se ejecuta localmente, ningún dato sale de tu dispositivo
• Soporte offline: Funciona sin conexión después de la descarga inicial del modelo

Inicio rápido

Prerrequisitos

• Chrome 124+ (requerido para WebGPU en service workers)
• Node.js 18+ y npm
• GPU con soporte WebGPU (la mayoría de las GPU modernas funcionan)

Instalación

1. Clonar e instalar dependencias:

   root@kitploit:~

   cd local-browser
   npm install
   

2. Compilar la extensión:

   root@kitploit:~

   npm run build
   

3. Cargar en Chrome:

   • Abre chrome://extensions
   • Activa "Modo desarrollador" (arriba a la derecha)
   • Haz clic en "Cargar extensión sin empaquetar"
   • Selecciona la carpeta dist de este proyecto

4. Primera ejecución:

   • Haz clic en el icono de la extensión en la barra de herramientas
   • La primera ejecución descargará el modelo de IA (~1GB)
   • Se almacena en caché para usos futuros

Uso

1. Navega a cualquier página web
2. Haz clic en el icono de la extensión Local Browser
3. Escribe una tarea como:
   • "Busca 'WebGPU' en Wikipedia y extrae el primer párrafo"
   • "Ve a example.com y dime qué hay allí"
   • "Encuentra el cuadro de búsqueda y busca 'noticias de IA'"
4. Observa cómo la IA ejecuta la tarea paso a paso

Desarrollo

Modo de desarrollo

npm run dev

Esto observa los cambios y reconstruye automáticamente.

Estructura del proyecto

local-browser/
├── manifest.json           # Chrome extension manifest (MV3)
├── src/
│   ├── background/         # Service worker
│   │   ├── index.ts        # Entry point & message handling
│   │   ├── llm-engine.ts   # WebLLM wrapper
│   │   └── agents/         # AI agent system
│   │       ├── base-agent.ts
│   │       ├── planner-agent.ts
│   │       ├── navigator-agent.ts
│   │       └── executor.ts
│   ├── content/            # Content scripts
│   │   ├── dom-observer.ts # Page state extraction
│   │   └── action-executor.ts
│   ├── popup/              # React popup UI
│   │   ├── App.tsx
│   │   └── components/
│   └── shared/             # Shared types & constants
└── dist/                   # Build output

Cómo funciona

1. El usuario introduce una tarea en la interfaz emergente
2. El agente Planificador analiza la tarea y crea una estrategia de alto nivel
3. El agente Navegador examina el DOM de la página actual y decide la siguiente acción
4. El script de contenido ejecuta la acción (hacer clic, escribir, extraer, etc.)
5. El bucle continúa hasta que la tarea se completa o falla

Sistema de agentes

La extensión utiliza una arquitectura de dos agentes inspirada en Nanobrowser:

• Agente Planificador: Planificación estratégica, crea un enfoque paso a paso
• Agente Navegador: Ejecución táctica, elige acciones específicas según el estado de la página

Ambos agentes generan JSON estructurado que se analiza y ejecuta.

Configuración del modelo

Modelo predeterminado: Qwen2.5-1.5B-Instruct-q4f16_1-MLC (~1GB)

Modelos alternativos (configurados en src/shared/constants.ts):

• Phi-3.5-mini-instruct-q4f16_1-MLC (~2GB, mejor razonamiento)
• Llama-3.2-1B-Instruct-q4f16_1-MLC (~0.7GB, más pequeño)

Solución de problemas

WebGPU no compatible

• Actualiza Chrome a la versión 124 o posterior
• Comprueba chrome://gpu para verificar el estado de WebGPU
• Algunas GPU pueden no ser compatibles con WebGPU

El modelo no se carga

• Asegúrate de tener suficiente espacio en disco (~2GB libres)
• Revisa la consola del navegador en busca de errores
• Intenta limpiar el almacenamiento de la extensión y recargar

Las acciones no se ejecutan

• Algunas páginas bloquean los scripts de contenido (chrome://, páginas de extensiones)
• Prueba en una página web normal como wikipedia.org

La extensión no funciona después de una actualización de Chrome

• Ve a chrome://extensions
• Haz clic en el botón de recarga de la extensión

Limitaciones

• Alcance POC: Esto es una prueba de concepto, no un software de producción
• Sin visión: Utiliza análisis de DOM solo de texto (sin comprensión de capturas de pantalla)
• Una sola pestaña: Solo funciona con la pestaña activa actualmente
• Acciones básicas: Soporta navegar, hacer clic, escribir, extraer, desplazar, esperar
• Tamaño del modelo: Los modelos más pequeños pueden tener dificultades con tareas complejas

Stack tecnológico

• WebLLM: Inferencia de LLM en dispositivo con WebGPU
• React: Interfaz emergente
• TypeScript: Desarrollo seguro en cuanto a tipos
• Vite + CRXJS: Empaquetado de extensiones de Chrome
• Chrome Extension Manifest V3: Arquitectura moderna de extensiones

Créditos

Este proyecto está inspirado en:

• Nanobrowser - Automatización web multiagente (Licencia MIT)
• WebLLM - Inferencia de LLM en navegador (Licencia Apache-2.0)

Licencias de dependencias

Licencia

Licencia MIT - Consulta el archivo LICENSE para más detalles.