「AIエージェントキャッチアップ #43 - BrowserGym」を開催しました

ジェネラティブエージェンツの大嶋です。

「AIエージェントキャッチアップ #43 - BrowserGym」という勉強会を開催しました。

generative-agents.connpass.com

アーカイブ動画はこちらです。

www.youtube.com

BrowserGym

今回は、Webエージェント研究のためのフレームワーク「BrowserGym」をキャッチアップしました。

BrowserGymのGitHubリポジトリはこちらです。

github.com

今回のポイント

BrowserGymとは

BrowserGymは、Webエージェントの研究を加速するための、オープンで使いやすく拡張可能なフレームワークとして開発されています。

Playwrightをベースとして、ブラウザ操作のエージェントを簡単に動かすことができるようになっています。

一般ユーザー向けではなく、あくまで研究用のツールとして位置づけられています。

BrowserGymが対応しているベンチマーク

BrowserGymには標準で以下のベンチマークが含まれています。

MiniWoB
WebArena
VisualWebArena
WorkArena
AssistantBench
WebLINX (static benchmark)

新しいベンチマークを追加する際はAbstractBrowserTaskクラスを継承することで実装できます。

また、BrowserGymのすべてのベンチマークを実行するためのフレームワーク「AgentLab」も提供されています。

github.com

BrowserGymのデモエージェントを動かす

実際にBrowserGymのデモエージェントを動かしてみた様子を紹介します。

github.com

`openended` の実行

以下のコマンドでデモエージェントをopenendedというタスク名で実行しました。

python demo_agent/run_demo.py --task_name openended --start_url https://www.google.com

すると、ブラウザが起動してユーザーの指示を待つ状態となりました。

「BrowserGymについて調べて」といった指示をすると、エージェントがブラウザを操作する様子を見ることができます。

AssistantBenchを実行した様子

デモエージェントを使い、AssistantBenchのタスクも実行してみました。

huggingface.co

実行したタスクは「What's the lowest price a Single Family house was sold in Queen Anne in January 2023?」という、不動産情報を検索するタスクです。

python demo_agent/run_demo.py --task_name visualwebarena.398

実行すると、エージェントがタスクを進める様子を見ることができました。

デモエージェントの改造

BrowserGymの動作のしくみが気になったので、デモエージェントを改造してみました。

以下のように、デモエージェントの内部でOpenAIのAPIを呼び出している部分を書き換え、人間がアクションを入力するようにしました。

-        response = self.openai_client.chat.completions.create(
-            model=self.model_name,
-            messages=[
-                {"role": "system", "content": system_msgs},
-                {"role": "user", "content": user_msgs},
-            ],
-        )
-        action = response.choices[0].message.content
+        print("<system_msgs>")
+        for msg in system_msgs:
+            print(msg["text"])
+        print("</system_msgs>")
+        print("<user_msgs>")
+        for msg in user_msgs:
+            print(msg["text"])
+        action = input("Enter your action: ")

この状態でデモエージェントを実行すると、標準出力にシステムメッセージとユーザーメッセージが表示され、人間がアクションを入力することになります。

プロンプトには、現在のページのアクセシビリティツリーが含まれていることが分かります。

  :
# Current page Accessibility Tree

RootWebArea 'Google'
        [22] navigation ''
                [24] link 'Googleについて'
                [25] link 'ストア'
                [31] link 'Gmail'
                [33] link '画像を検索する'
                [36] button 'Google アプリ', expanded=False
                        [37] image ''
                [39] link 'ログイン'
                        StaticText 'ログイン'
        [47] image ''
        [77] search ''
                [87] image ''
                [91] combobox '検索', autocomplete='both', hasPopup='listbox', expanded=False, controls='Alh6id'
                [103] button '音声で検索'
                        [104] image ''
                [106] button '画像で検索'
                        [107] image ''
                [237] button 'Google 検索'
                [238] button "I'm Feeling Lucky"
  :

また、以下のように、アクションの候補も含まれます。

  :
# Action Space
  :
scroll(delta_x: float, delta_y: float)
    Examples:
        scroll(0, 200)

        scroll(-50.2, -100.5)
  :
fill(bid: str, value: str)
    Examples:
        fill('237', 'example value')

        fill('45', 'multi-line\nexample')

        fill('a12', 'example with "quotes"')
  :
click(bid: str, button: Literal['left', 'middle', 'right'] = 'left', modifiers: list[typing.Literal['Alt', 'Control', 'ControlOrMeta', 'Meta', 'Shift']] = [])
    Examples:
        click('a51')

        click('b22', button='right')

        click('48', button='middle', modifiers=['Shift'])
  :

LLMがアクションとしてclick("91")のように出力すると、その内容が実行されてブラウザが操作されるということです。