project
Page Agent - AlibabaのオープンソースJavaScript GUIインテリジェントエージェントライブラリ
Page Agentは、Alibabaが開発したオープンソースの純粋なフロントエンドJavaScriptインテリジェントエージェントライブラリです。たった1行のコードでウェブページに組み込むことができ、ユーザーは自然言語を使ってページのDOM要素を操作できます。
Page Agentとは何ですか？
Page Agentは、Alibabaが提供するオープンソースの純粋なフロントエンドJavaScriptインテリジェントエージェントライブラリです。たった1行のコードでウェブページに組み込むだけで、自然言語を使ってページのDOM要素を操作できます。クライアントサイドライブラリはDOMデハイドレーション技術を用いて複雑なページを簡略化されたテキストツリーに圧縮し、OpenAI互換モデルをサポート。バックエンド、スクリーンショット、ブラウザ拡張機能などを必要とせずに、クリック、フォーム入力、スクロールなどの操作を可能にします。独自のウェブアプリケーションにAIコパイロット機能を迅速に追加するのに最適です。
Page Agentの主な機能
- 自然言語制御ページユーザーがログインボタンをクリックしたり、フォームに入力したりといったコマンドを入力すると、AIは自動的にDOM操作を検出して実行します。
- DOM脱水圧縮この手法は、複雑なページ構造をFlatDomTreeテキストツリーに圧縮し、インタラクティブな要素のみを抽出することで、モデルへの入力コストを削減します。
- モデル非依存型アーキテクチャOpenAI互換のエンドポイント（Tongyi Qianwen、GPTなど）であればどれでもサポートします。baseURLとAPIキーを設定するだけで済みます。
- 内蔵セキュリティ制御操作のホワイトリスト化、機密性の高いフィールドデータの匿名化、主要操作の手動確認、およびカスタムドメイン知識の注入をサポートします。
- 単一ページインタラクションループバックエンドサービスやブラウザ拡張機能を必要とせず、単一ページ内でクリック、入力、スクロールなどの操作をすべて実行できます。
Page Agentの技術的原理
- DOM脱水ページのDOMをスキャンし、各インタラクティブ要素にインデックス、役割、ラベルを割り当て、冗長なタグを削除し、モデルが理解できるコンパクトなテキスト表現を生成します。
- PageControllerアーキテクチャコアコントローラは、DOMツリーの更新や、要素のクリック、テキスト入力、ページスクロールなどのアトミック操作の実行を担当します。
- モノレポ下請け設計：
@page-agent/coreヘッドレスインテリジェントエージェントのロジックを担当する。page-agent完全なユーザーインターフェースパネルを提供します。@page-agent/page-controllerDOMの抽出とインデックス作成を処理する。 - クライアントサンドボックス操作これはユーザーのブラウザセッション内で直接実行され、追加のバックエンドを必要とせずに、Cookie、セッション、および認証ステータスを継承します。
WeChatでフォローして「オープンソース「、参加するAIオープンソースプロジェクトに関するディスカッショングループ
Page Agent の使い方
- クイックエクスペリエンスウェブページに一行挿入する
<script>タグ内にページエージェントのIIFEデモスクリプトを含めることで、ページ上でAIコントロールパネルを有効化できます。 - 依存関係をインストールします生産環境
npm install page-agent依存関係をインストールし、フロントエンドプロジェクトにインポートしてください。 - インスタンスを作成する：使用
new PageAgent()インスタンスを作成し、モデル、ベースURL、apiKeyなどのパラメータを設定して、OpenAI互換のモデルエンドポイントを指すようにします。 - 指示を実行する： 電話
agent.execute('你的自然语言指令')AIは指示を解析し、ページのDOM内の要素を自動的に特定して、クリックや入力などのアクションを実行できる。 - セキュリティ設定オプションの設定項目には、操作ホワイトリスト、データ匿名化ルール、キー操作確認などがあり、AIの動作がセキュリティおよびビジネス要件に準拠していることを保証します。
Page Agentの主な利点
- バックエンド変換なしバックエンドを書き換えたり、ブラウザ拡張機能を配布したりすることなく、たった1行のスクリプトに組み込むことができます。
- 低コスト運営テキストDOM構造のみを送信するため、マルチモーダルなビジュアルモデルが不要になり、トークン消費量を大幅に削減できます。
- ネイティブセキュリティ継承ページの元のUI検証および権限ルールは引き続き有効であり、機密データは匿名化できます。
- モデル非依存OpenAI互換のエンドポイントであればどれでもサポートします。モデルを切り替えるには、baseURLを変更するだけで済みます。
- MITオープンソースTypeScriptで記述されたこのコードは完全にオープンソースであり、自由にカスタマイズできます。
Page Agentのプロジェクトアドレス
- プロジェクト公式サイト：https://alibaba.github.io/page-agent/
- GitHubリポジトリ：https://github.com/alibaba/page-agent
Page Agentの競合製品比較
| 寸法 | Page Agent | Playwright |
|---|---|---|
| ランニング場所 | ページ内部（クライアントサイドJavaScript） | 外部プロセス（Node.js/Python/.NET） |
| ページ読み込み中 | 脱水テキストDOM（FlatDomTree） | CDPプロトコルは、ブラウザのDOMへの直接アクセスを可能にする。 |
| 相互作用方法 | 自然言語による指示ドライバー | コードスクリプトの精密な制御 |
| モデル依存性 | LLM解析命令が必要です | AIモデルは不要、純粋なルール実行 |
| 展開方法 | 行を埋め込む <script> またはnpm経由でインストール |
ブラウザドライバとランタイム環境をインストールします |
| 認証ステータス | ユーザーのブラウザのCookie/セッションを自動的に継承する | コンテキストまたはログインプロセスは手動で設定する必要があります。 |
| 視覚能力 | なし、プレーンテキストDOM | スクリーンショット、画像比較、画面録画に対応しています。 |
| ページをまたぐ機能 | 基本的にはシングルページアプリケーションです。クロスタブ機能を利用するには、Chrome拡張機能が必要です。 | 複数のタブ、複数のウィンドウ、複数のブラウザをネイティブでサポート |
| 適用可能なシナリオ | 既存のWebアプリケーションにAIコパイロットを追加する | エンドツーエンドの自動テスト、クロスサイトクローリング |
| 学習コスト | 低レベルは、自然言語を使用することで達成可能です。 | このプロセスでは、セレクターとスクリプトを作成する必要があります。 |
Page Agentのアプリケーションシナリオ
- SaaS製品AIコパイロットテキストによる説明を提供するだけでなく、ユーザーが操作を実行できるよう直接支援するアシスタント機能を自社製品に組み込みましょう。
- スマートフォーム入力この機能は、複数の手順が必要なERP/CRMフォームを、「昨日の昼食代として50人民元の旅費精算を提出する」といった単一のコマンドに圧縮します。
- アクセシビリティWeb Speech APIを組み合わせることで、ウェブページの音声制御が可能になり、視覚障害のあるユーザーのユーザーエクスペリエンスが向上します。
- レガシーシステムの近代化APIを使用せずに、元のコードを変更することなく、既存システムに自然言語コマンドバーを追加する。