Local Browser - オンデバイスAI Web自動化

まもなくメインリポジトリで runanywhere-web-sdk のサポートを開始します: ぜひチェックしてみてください: https://github.com/RunanywhereAI/runanywhere-sdks

WebLLMを使用してAI駆動のWeb自動化を完全にデバイス上で実行するChrome拡張機能です。クラウドAPIなし、APIキーなし、完全にプライベートです。

デモ

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

特徴

• オンデバイスAI: WebGPUアクセラレーションを備えたWebLLMを使用してローカルLLM推論を実行
• マルチエージェントシステム: インテリジェントなタスク実行のためのPlanner + Navigatorエージェント
• ブラウザ自動化: Webページのナビゲーション、クリック、入力、データ抽出
• プライバシー最優先: すべてのAIはローカルで実行され、データがデバイスから送信されることはありません
• オフラインサポート: 初回のモデルダウンロード後はオフラインで動作

クイックスタート

前提条件

• Chrome 124+ (Service WorkerでのWebGPUに必要)
• Node.js 18+ および npm
• WebGPU対応GPU (最新のGPUのほとんどで動作します)

インストール

1. リポジトリのクローンと依存関係のインストール:

   root@kitploit:~

   cd local-browser
   npm install
   

2. 拡張機能のビルド:

   root@kitploit:~

   npm run build
   

3. Chromeに読み込む:

   • chrome://extensions を開く
   • 右上の「デベロッパーモード」を有効にする
   • 「パッケージ化されていない拡張機能を読み込む」をクリック
   • このプロジェクトの dist フォルダを選択

4. 初回実行:

   • ツールバーの拡張機能アイコンをクリック
   • 初回実行時にAIモデル (~1GB) をダウンロードします
   • これは将来の使用のためにキャッシュされます

使用方法

1. 任意のWebページに移動します
2. Local Browser拡張機能のアイコンをクリックします
3. 次のようなタスクを入力します:
   • 「Wikipediaで「WebGPU」を検索して最初の段落を抽出」
   • 「example.comにアクセスして、そこに何があるか教えて」
   • 「検索ボックスを見つけて「AI news」を検索」
4. AIがタスクをステップバイステップで実行するのを確認します

開発

開発モード

npm run dev

変更を監視して自動的に再ビルドします。

プロジェクト構造

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

仕組み

1. ユーザーがポップアップUIでタスクを入力
2. Planner Agent がタスクを分析し、高レベルの戦略を作成
3. Navigator Agent が現在のページのDOMを調査し、次のアクションを決定
4. Content Script がアクション (クリック、入力、抽出など) を実行
5. タスクが完了するか失敗するまでループを継続

エージェントシステム

この拡張機能はNanobrowserに触発された2エージェントアーキテクチャを使用しています:

• PlannerAgent: 戦略的計画、ステップバイステップのアプローチを作成
• NavigatorAgent: 戦術的実行、ページの状態に基づいて具体的なアクションを選択

両エージェントは構造化されたJSONを出力し、それが解析されて実行されます。

モデル設定

デフォルトモデル: Qwen2.5-1.5B-Instruct-q4f16_1-MLC (~1GB)

代替モデル (src/shared/constants.ts で設定):

• Phi-3.5-mini-instruct-q4f16_1-MLC (~2GB、より優れた推論能力)
• Llama-3.2-1B-Instruct-q4f16_1-MLC (~0.7GB、より軽量)

トラブルシューティング

WebGPUがサポートされていない場合

• Chromeをバージョン124以降に更新する
• chrome://gpu でWebGPUのステータスを確認する
• 一部のGPUはWebGPUをサポートしていない場合があります

モデルが読み込めない場合

• 十分なディスク容量があることを確認する (~2GBの空き容量)
• ブラウザのコンソールでエラーを確認する
• 拡張機能のストレージをクリアして再読み込みしてみる

アクションが実行されない場合

• 一部のページではコンテンツスクリプトがブロックされる (chrome://、拡張機能ページ)
• wikipedia.orgなどの通常のWebページで試してみてください

Chrome更新後に拡張機能が動作しない場合

• chrome://extensions に移動する
• 拡張機能の再読み込みボタンをクリックする

制限事項

• POCの範囲: これは概念実証であり、本番用ソフトウェアではありません
• ビジョン非対応: テキストのみのDOM解析を使用 (スクリーンショットの理解は不可)
• シングルタブ: 現在アクティブなタブでのみ動作
• 基本アクション: ナビゲーション、クリック、入力、抽出、スクロール、待機に対応
• モデルサイズ: 小さなモデルは複雑なタスクに苦労する場合があります

技術スタック

• WebLLM: WebGPUによるオンデバイスLLM推論
• React: ポップアップUI
• TypeScript: 型安全な開発
• Vite + CRXJS: Chrome拡張機能のバンドル
• Chrome拡張機能Manifest V3: 最新の拡張機能アーキテクチャ

クレジット

このプロジェクトは以下に触発されています:

• Nanobrowser - マルチエージェントWeb自動化 (MITライセンス)
• WebLLM - ブラウザ内LLM推論 (Apache-2.0ライセンス)

依存ライセンス

ライセンス

MITライセンス - 詳細はLICENSEファイルを参照してください。