browser-useでインタラクティブなスクレイピング:最新情報にアクセス

![IMG_2773.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784222/6b779ad1-9225-68b4-0f24-a958a13a8582.jpeg)



# はじめに

MBA取得に向けた小論文や面接の準備に追われていたため、ここしばらく記事を書く時間がありませんでした。しかし、会社が冬期休暇に入り、少し余裕ができたので、久しぶりに記事を書いてみることにしました。

最近、**browser-use**というPythonライブラリが登場したことを、Google検索などで知りました。以前、**selenium**を使ったWebブラウザ操作の自動化に関する記事を投稿しましたが、この**browser-use**はよりインタラクティブな操作が可能で、将来的な可能性を大いに感じています。

https://qiita.com/ogi_kimura/items/db22e2697eb1a4def0c9

今回は、この**browser-use**を使ったプログラミングに挑戦し、その使い勝手や将来性について確認してみたいと思います。



# browser-useの特徴

**browser-use**は、Pythonで開発されたライブラリで、「AIエージェントがウェブブラウザを操作できるようにする」ことを目的としています。このライブラリを使うことで、AIエージェントが自律的に考えながらブラウザ操作を行うことが可能になります。

多くの記事で詳しく解説されていますが、**selenium**や従来のスクレイピングとの大きな違いは、AIエージェントが試行錯誤を繰り返しながら目的を達成しようとする点にあると感じています。後ほどご紹介する標準出力の内容からも、その様子を垣間見ることができるのではないかと思います。



# 今回のお題
**LLM - 大規模言語モデル**は、学習データが過去の情報に基づいているため、最新の情報に対応するのが難しいことがあります。そこで今回は、生成AIが最近のホットな話題についてどこまで対応できるのかを確認してみたいと思います。

最近、タレントの**中居正広さん**が週刊誌で取り上げられているとのことで、この話題をAIに質問してみます。

**質問内容: 「中居正広さんは示談金を支払ったが、何があったのか？」**

このテーマでAIがどのような回答を出すのかを検証してみます。


# 環境構築とソースコード

今回は、@むさし さんが投稿された記事を参考にしながら、サンプルコードを作成しました。むさしさん、非常にわかりやすい記事をありがとうございます！

https://zenn.dev/gunjo/articles/8450e69537dbb6

---

## 環境構築

これまでは、**pip**を直接使用してライブラリをPCにインストールしていましたが、この方法では他のプロジェクトに影響を与える可能性があります。そこで、今回は**仮想環境**を利用して構築を進めます。また、この環境をそのまま**GitHub**に公開し、同梱の「requirements.txt」を使えば誰でも簡単に同じ環境を再現できるようにしました。

まず、プロジェクト専用の仮想環境を作成します。

```dosbatch
python -m venv myenv
```

実行後、カレントディレクトリ直下に**myenv**というフォルダが作成され、その中に必要最低限のライブラリが準備されます。

### 仮想環境の有効化
次に仮想環境を有効化します。Windowsの場合、以下のコマンドを実行してください。

```dosbatch
.\myenv\Scripts\activate
```

**Linux**や**MacOS**の場合は、コマンドが異なるため、それぞれの環境に合った方法を調べてください。

仮想環境が有効化されたら、次にライブラリをインストールします。リポジトリに含まれる**requirements.txt**を利用すれば、必要なライブラリを一括でインストールできます。

```bash
pip install -r requirements.txt
```

これで、仮想環境と必要なライブラリのセットアップが完了です。


## GitHubリポジトリの利用
サンプルプログラムと**requirements.txt**は以下のリポジトリで公開しています。必要に応じてダウンロードしてご利用ください。

https://github.com/kimkimkim5/browser-use

ダウンロード後、仮想環境を作成したフォルダで作業を進めてください。


## プログラムソースコード
以下が今回実装したプログラムです。このプログラムでは、生成AIに「中居正広さんが示談金を支払った理由」を質問し、日本語で結果を取得します。

```python
from langchain_openai import ChatOpenAI
from browser_use import Agent
import asyncio

STR_JAPANESE = "日本語で訳して。"

async def main():
    agent = Agent(
        task="中居正広は示談金を支払ったが、なにがあった？" + STR_JAPANESE,
        llm=ChatOpenAI(model="gpt-4o-mini"),
    )
    result = await agent.run()
    print(result)
    print('\n')
    print('【ここから】')
    if len(result.history) > 0:
        print(result.history[len(result.history)-1].result[0].extracted_content)

asyncio.run(main())
```

このコードは、@むさし さんのプログラムを元に作成しています。一部改良を加えた点について説明します。


### 改良ポイント

#### 1. AIエージェントに渡すパラメータの変更

以下の部分で、AIエージェントに渡す**task**を修正しました。また、**STR_JAPANESE**を追記することで、日本語で回答を取得するようにしています。

```python
agent = Agent(
    task="中居正広は示談金を支払ったが、なにがあった？" + STR_JAPANESE,
    llm=ChatOpenAI(model="gpt-4o-mini"),
)
```
さらに、コスト削減のため、モデルに「gpt-4o-mini」を指定しています。


#### 2. 出力部分の調整
以下のコードでは、AIの出力内容を見やすくするために、**history**から**extracted_content**だけを表示するようにしています。

```python
print('【ここから】')
if len(result.history) > 0:
    print(result.history[len(result.history)-1].result[0].extracted_content)
```

これにより、必要な情報だけを簡潔に確認できるようにしました。

以上で環境構築から実装までの解説を終わります。このプログラムを参考に、ぜひ試してみてください！


# 実行結果
さっそくプログラムを実行してみます。

### 実行時の出力
以下は、実行中のCUIのスクリーンショットです。

![cui1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784222/4a6a4c93-e108-0d8c-638b-4bd2db13f3bc.jpeg)

![cui2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784222/d77e9a17-d972-4d23-3358-300202591adc.jpeg)

![cui3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784222/5a426635-cf9e-ae39-0538-4a909fa7d1a5.jpeg)

AIエージェントが自律的に処理を繰り返し、試行錯誤しながら進行している様子が伺えます。STEP7に到達して、ようやく目的の情報を取得しています。

### 実行中のブラウザの状態
標準出力が表示される間、Google Chromeでは以下のような画面が確認できました。エージェントは関連性のありそうな要素を解析し、パーツを番号で整理していると考えられます。

![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784222/9cddc5c3-1fdb-03a1-9acd-c4f7d23cf3b4.png)

![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784222/f0b0838a-bc3a-acfd-ec18-4dab4185eaa1.png)

### 結果について
最終的な回答は、最近Web上や週刊誌で話題になっている内容を反映しているようです。
（注：筆者は週刊誌をあまり読まないため、正確性については断定できませんが、そのように見受けられます。）


# おわりに
**browser-use**が非常に強力なツールであることが実感できました。これまでWebサイトのスクレイピングを自律的に処理を実行することはありませんでしたが、それを実現するのは非常に手間がかかります。しかし、このツールを使うことでそのプロセスが大きく簡素化されることがわかりました。

今後が非常に楽しみです。

次回は、**browser-use**を活用して、チャット形式での受け答えができるように**streamlit**を組み合わせて試してみたいと思います。