Local Browser - Automação Web com IA no Dispositivo

Em breve: suporte ao runanywhere-web-sdk no nosso repositório principal: confira: https://github.com/RunanywhereAI/runanywhere-sdks

Uma extensão do Chrome que usa WebLLM para executar automação web com IA totalmente no dispositivo. Sem APIs em nuvem, sem chaves de API, totalmente privado.

Demonstração

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

Recursos

• IA no Dispositivo: Usa WebLLM com aceleração WebGPU para inferência local de LLM
• Sistema Multiagente: Agentes Planejador + Navegador para execução inteligente de tarefas
• Automação de Navegador: Navegar, clicar, digitar, extrair dados de páginas web
• Privacidade em Primeiro Lugar: Toda a IA roda localmente, nenhum dado sai do seu dispositivo
• Suporte Offline: Funciona offline após o download inicial do modelo

Início Rápido

Pré-requisitos

• Chrome 124+ (necessário para WebGPU em service workers)
• Node.js 18+ e npm
• GPU com suporte a WebGPU (a maioria das GPUs modernas funciona)

Instalação

1. Clone e instale as dependências:

   root@kitploit:~

   cd local-browser
   npm install
   

2. Compile a extensão:

   root@kitploit:~

   npm run build
   

3. Carregue no Chrome:

   • Abra chrome://extensions
   • Ative o "Modo do desenvolvedor" (canto superior direito)
   • Clique em "Carregar sem compactação"
   • Selecione a pasta dist deste projeto

4. Primeira execução:

   • Clique no ícone da extensão na sua barra de ferramentas
   • A primeira execução fará o download do modelo de IA (~1GB)
   • Ele fica em cache para uso futuro

Uso

1. Navegue para qualquer página web
2. Clique no ícone da extensão Local Browser
3. Digite uma tarefa como:
   • "Pesquise por 'WebGPU' na Wikipédia e extraia o primeiro parágrafo"
   • "Vá para example.com e me diga o que há lá"
   • "Encontre a caixa de pesquisa e pesquise por 'notícias de IA'"
4. Observe a IA executar a tarefa passo a passo

Desenvolvimento

Modo de Desenvolvimento

npm run dev

Isso observa as alterações e recompila automaticamente.

Estrutura do Projeto

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

Como Funciona

1. O usuário insere uma tarefa na interface do popup
2. O Agente Planejador analisa a tarefa e cria uma estratégia de alto nível
3. O Agente Navegador examina o DOM da página atual e decide a próxima ação
4. O Content Script executa a ação (clicar, digitar, extrair, etc.)
5. O loop continua até a tarefa ser concluída ou falhar

Sistema de Agentes

A extensão usa uma arquitetura de dois agentes inspirada no Nanobrowser:

• PlannerAgent: Planejamento estratégico, cria uma abordagem passo a passo
• NavigatorAgent: Execução tática, escolhe ações específicas com base no estado da página

Ambos os agentes geram JSON estruturado que é analisado e executado.

Configuração do Modelo

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

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

• Phi-3.5-mini-instruct-q4f16_1-MLC (~2GB, melhor raciocínio)
• Llama-3.2-1B-Instruct-q4f16_1-MLC (~0.7GB, menor)

Solução de Problemas

WebGPU não suportado

• Atualize o Chrome para a versão 124 ou posterior
• Verifique chrome://gpu para confirmar o status do WebGPU
• Algumas GPUs podem não suportar WebGPU

O modelo falha ao carregar

• Certifique-se de ter espaço em disco suficiente (~2GB livres)
• Verifique o console do navegador para erros
• Tente limpar o armazenamento da extensão e recarregar

Ações não estão sendo executadas

• Algumas páginas bloqueiam content scripts (chrome://, páginas de extensão)
• Tente em uma página web normal, como wikipedia.org

Extensão não funciona após atualização do Chrome

• Vá para chrome://extensions
• Clique no botão de recarregar na extensão

Limitações

• Escopo de POC: Isto é uma prova de conceito, não um software de produção
• Sem Visão: Usa apenas análise de DOM em texto (sem compreensão de capturas de tela)
• Aba Única: Funciona apenas com a aba atualmente ativa
• Ações Básicas: Suporta navegar, clicar, digitar, extrair, rolar, aguardar
• Tamanho do Modelo: Modelos menores podem ter dificuldade com tarefas complexas

Stack Tecnológico

• WebLLM: Inferência de LLM no dispositivo com WebGPU
• React: Interface do popup
• TypeScript: Desenvolvimento com segurança de tipos
• Vite + CRXJS: Empacotamento de extensão do Chrome
• Chrome Extension Manifest V3: Arquitetura moderna de extensões

Créditos

Este projeto é inspirado em:

• Nanobrowser - Automação web multiagente (Licença MIT)
• WebLLM - Inferência de LLM no navegador (Licença Apache-2.0)

Licenças das Dependências

Licença

Licença MIT - Consulte o arquivo LICENSE para obter detalhes.