browser-useさくっと使ってみた

## はじめに
browser-useが熱いと聞いたのでサクッと使ってみました。
途中ハマった部分もあったので参考になったら嬉しいです。

## browser-useとは
AIエージェントが試行錯誤を繰り返しながらスクレイピングしてくれるPythonライブラリです。
AIが人間がウェブページを操作するのと同じように、要素をクリックしたり、テキストを入力したりといった操作を実行してくれるみたいです。

## 実行手順
### 1, 環境準備
Browser Use公式が推奨しているため、はじめにuv（pythonパッケージマネージャー）をインストールします。
※pythonのパッケージ管理はpip、venv、poetryが使用されてきましたが、uvはより高速でPythonバージョンの管理もできる優れものです
https://docs.astral.sh/uv/


```Bash
# UVインストール
curl -LsSf https://astral.sh/uv/install.sh | sh
```

```Bash
# 仮想環境を作成
uv venv --python 3.11
```

```Bash
# アクティベート
source .venv/bin/activate
```

```Bash
# browser-useのインストール
uv pip install browser-use
```

```Bash
# playwrightのインストール(Microsoft で開発およびメンテナンスが行われている、E2E テスト自動化フレームワーク)
playwright install
```

### 2, pythonコード記述

Google Flightsで 2025年01月12日のバリ島からオマーンへの片道航空券を検索。一番安いオプションを返す。
というプロンプトになっています。
```Python
import os
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from browser_use import Agent
import asyncio

load_dotenv()

llm = ChatOpenAI(
    model="gpt-4o",
)

async def main():
    agent = Agent(
        task="Find a one-way flight from Bali to Oman on 12 January 2025 on Google Flights. Return me the cheapest option.",
        llm=llm,
    )
    result = await agent.run()
    print(result)

if __name__ == "__main__":
    asyncio.run(main())
```

### 3, envファイル用意
同階層に.envファイルを用意し、OpenAiか、AnthoropicのAPIのKeyを記載する。
今回はOpenAiを使用します。
```Bash
OPENAI_API_KEY=
OR
ANTHROPIC_API_KEY=
```

## 実行

```Bash
python agent.py
```

実行してみるとエラー発生。
そんなモデルないと言われる。が、公式と同じ「model="gpt-4o"」を指定しているのになぜ・・・

```Bash
INFO     [browser_use] BrowserUse logging setup complete with level info
INFO     [root] Anonymized telemetry enabled. See https://github.com/gregpr07/browser-use for more information.
INFO     [agent] 🚀 Starting task: Find a one-way flight from Bali to Oman on 12 January 2025 on Google Flights. Return me the cheapest option.
INFO     [agent] 
📍 Step 1
ERROR    [agent] ❌ Result failed 1/3 times:
 Error code: 404 - {'error': {'message': 'The model `gpt-4o` does not exist or you do not have access to it.', 'type': 'invalid_request_error', 'param': None, 'code': 'model_not_found'}}
INFO     [agent] 
📍 Step 1
ERROR    [agent] ❌ Result failed 2/3 times:
 Error code: 404 - {'error': {'message': 'The model `gpt-4o` does not exist or you do not have access to it.', 'type': 'invalid_request_error', 'param': None, 'code': 'model_not_found'}}
INFO     [agent] 
📍 Step 1
ERROR    [agent] ❌ Result failed 3/3 times:
 Error code: 404 - {'error': {'message': 'The model `gpt-4o` does not exist or you do not have access to it.', 'type': 'invalid_request_error', 'param': None, 'code': 'model_not_found'}}
ERROR    [agent] ❌ Stopping due to 3 consecutive failures
INFO     [agent] Created GIF at agent_history.gif
AgentHistoryList(all_results=[ActionResult(is_done=False, extracted_content=None, error="Error code: 404 - {'error': {'message': 'The model `gpt-4o` does not exist or you do not have access to it.', 'type': 'invalid_request_error', 'param': None, 'code': 'model_not_found'}}", include_in_memory=True), ActionResult(is_done=False, extracted_content=None, error="Error code: 404 - {'error': {'message': 'The model `gpt-4o` does not exist or you do not have access to it.', 'type': 'invalid_request_error', 'param': None, 'code': 'model_not_found'}}", include_in_memory=True), ActionResult(is_done=False, extracted_content=None, error="Error code: 404 - {'error': {'message': 'The model `gpt-4o` does not exist or you do not have access to it.', 'type': 'invalid_request_error', 'param': None, 'code': 'model_not_found'}}", include_in_memory=True)], all_model_outputs=[])
```

### 解決策
> 従量課金制の顧客で、1ドル以上の支払いに成功しなければAPIの使用ができない

ということでした。
解決方法は2つあるのですが、今回はCreditを購入して回避したいと思います。

1. $1以上の課金支払いが発生するまで待つ
2. Credit購入する

OpenAiのSettings->Billingの設定を見ると、「Pay as you go」の項目にCredit balanceが0になっていることが確認できます。
![Screenshot 2025-01-09 at 17.54.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666483/99c45b56-8376-2457-421b-774dde8f4eb7.png)

Add to credit balanceから$5のcreditを購入します。
購入後、30分くらい経てば実行できるようになりました。
![Screenshot 2025-01-09 at 17.53.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666483/63570876-3762-d710-fa92-76d36199bf2d.png)

## 再実行

```Bash
python agent.py
```

以下のようなログが表示されつつ、Chromiumが立ち上がり、自動で検索が始まります。
```Bash
python agent.py
INFO     [browser_use] BrowserUse logging setup complete with level info
INFO     [root] Anonymized telemetry enabled. See https://github.com/gregpr07/browser-use for more information.
INFO     [agent] 🚀 Starting task: Find a one-way flight from Bali to Oman on 12 January 2025 on Google Flights. Return me the cheapest option.
INFO     [agent] 
📍 Step 1
INFO     [agent] 🤷 Eval: Unknown - Starting point with no previous actions.
INFO     [agent] 🧠 Memory: Start Google Flights search for Bali to Oman flight on 12 January 2025.
INFO     [agent] 🎯 Next goal: Search Google for Google Flights and navigate to the site.
INFO     [agent] 🛠️  Action 1/1: {"search_google":{"query":"Google Flights"}}
INFO     [controller] 🔍  Searched for "Google Flights" in Google
INFO     [agent] 
📍 Step 2
INFO     [agent] 👍 Eval: Success - Google search for Google Flights was performed.
INFO     [agent] 🧠 Memory: Navigate to Google Flights.
INFO     [agent] 🎯 Next goal: Access Google Flights from the search results.
INFO     [agent] 🛠️  Action 1/1: {"click_element":{"index":22}}
INFO     [controller] 🖱️  Clicked index 22
INFO     [agent] 
📍 Step 3
INFO     [agent] 👍 Eval: Success - Navigated to Google Flights.
INFO     [agent] 🧠 Memory: Start flight search from Bali to Oman on 12 January 2025.
INFO     [agent] 🎯 Next goal: Set departure to Bali, destination to Oman, and date to 12 January 2025.
INFO     [agent] 🛠️  Action 1/2: {"input_text":{"index":13,"text":"Bali"}}
INFO     [agent] 🛠️  Action 2/2: {"input_text":{"index":14,"text":"Oman"}}
INFO     [controller] ⌨️  Input "Bali" into index 13
INFO     [controller] Something new appeared after action 1 / 2
INFO     [agent] 
📍 Step 4
INFO     [agent] 👍 Eval: Success - Input 'Bali' into departure field.
INFO     [agent] 🧠 Memory: Departure set to Bali. Now set the destination to Oman and date to 12 January 2025.
INFO     [agent] 🎯 Next goal: Select the correct option for Bali's airport and input Oman.
INFO     [agent] 🛠️  Action 1/2: {"click_element":{"index":18}}
INFO     [agent] 🛠️  Action 2/2: {"input_text":{"index":14,"text":"Oman"}}
INFO     [controller] 🖱️  Clicked index 18
INFO     [controller] Something new appeared after action 1 / 2
INFO     [agent] 
📍 Step 5
INFO     [agent] 👍 Eval: Success - Selected Bali as departure airport.
INFO     [agent] 🧠 Memory: Continue to set destination to Oman and select the date.
INFO     [agent] 🎯 Next goal: Input Oman as the destination and select the travel date of 12 January 2025.
INFO     [agent] 🛠️  Action 1/3: {"input_text":{"index":14,"text":"Oman"}}
INFO     [agent] 🛠️  Action 2/3: {"input_text":{"index":15,"text":"12 January 2025"}}
INFO     [agent] 🛠️  Action 3/3: {"click_element":{"index":17}}
INFO     [controller] ⌨️  Input "Oman" into index 14
INFO     [controller] Something new appeared after action 1 / 3
INFO     [agent] 
```

実行すると、どんな操作が行われたのかをまとめたgifが自動的に保存されます
（今回の場合agent_history.gifという名前で）
![agent_history.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666483/cef2f3d6-7f40-f651-fb54-1fd513ccd850.gif)

また実行した結果は以下でした
```
The cheapest one-way flight from Bali to Oman on 12 January 2025 is to Muscat with 1 stop, taking 44 hours and 55 minutes, costing ¥63,890.'

2025年1月12日のバリ発オマーン行き片道最安値は、マスカット行きで1ストップ、所要時間44時間55分、料金は63,890円である。
```
## まとめ
browser-useは使いやすいですが、実行は少し遅いなと思いました。
また、トークンの消費も激しいようでしたので、今までのスクレイピング処理が簡単にbrowser-useに置き換えられるようなものではないなという印象です。
今後実行速度と精度が上がればさらに実用的になると思っており、将来的な可能性を感じました！

:::note warn
公開されているWebサイトの中にはスクレイピングを禁止しているサイトもあるため、取り扱いには十分に注意をしてください
:::