はじめに

前回の記事では、browser-useの将来性について述べました。
seleniumとbrowser-useを活用することで、Webサイト上の豊富で最新な情報をより効率的に自動取得できる可能性があると考えています。

今回は、このbrowser-useエンジンを活用して、チャット形式でのやり取りを実現できないかと模索しました。
その手段として、streamlitを使用したプロトタイプの構築に挑戦しています。
具体的には、チャット形式での使用感や性能（レスポンス時間など）の確認を目的としています。

プログラム

今回のプログラムは、以前私が投稿したstreamlitに関する記事で紹介したプログラムを基に作成しました。

この記事内の「chroma_streamlit.py」をカスタマイズして、新しい機能を実現しています。

この記事や前回のプログラムをご覧になった方は、OPENAI API KEYがプログラム内に記載されていないことに気づかれたかもしれません。
これは、GitHubにプログラムをPUSHしようとした際、「API KEY情報がプログラムに含まれている」としてエラーが発生したためです。

その対策として、環境変数に「OPENAI_API_KEY」を新たに定義し、そこにAPIキー情報を設定しました。
皆様も同様に、環境変数の設定を行うことをお勧めします。

プログラムソースコード

以下にプログラムソースコードを示します。同じ内容は、GitHubリポジトリにもアップロードされています（app2.py）。ぜひダウンロードしてお試しください。

app2.py

import streamlit as st
import asyncio
import sys

from langchain_openai import ChatOpenAI
from browser_use import Agent
import asyncio

if sys.platform.startswith("win"):
    asyncio.set_event_loop_policy(asyncio.WindowsProactorEventLoopPolicy())
    
STR_JAPANESE = "日本語で訳して。"

async def main(agent):
    result = await agent.run()
    print(result)
    print('\n')
    print('【ここから】')
    if len(result.history) > 0:
        return result
    return ''

st.title("BROWSER-USE システム")

if "messages" not in st.session_state:
    st.session_state.messages = []

for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

input_message = st.chat_input("準備ができました。メッセージを入力してください。")
if input_message:
    st.session_state.messages.append({"role": "user", "content": input_message})
    print(f"入力されたメッセージ: {input_message}")
    
    # ===== ユーザ側マークダウン =====
    with st.chat_message("user"):
        st.markdown(input_message)

    # ===== アシスタント側マークダウン =====
    with st.chat_message("assistant"):
        agent = Agent(
            task=input_message + STR_JAPANESE,
            llm=ChatOpenAI(model="gpt-4o-mini"),
        )
        
        # 非同期関数で結果を取得
        try:
            result = asyncio.run(main(agent))
            
            # デバッグ用に結果を確認
            print(f"Result history: {result.history}")
            
            # データが存在するか確認
            if not result.history or len(result.history) == 0:
                response = "エージェントから結果を取得できませんでした。"
            else:
                # 安全にデータを取り出す
                last_result = result.history[-1]  # 最後の結果を取得
                if hasattr(last_result, 'result') and last_result.result:
                    response = last_result.result[0].extracted_content
                else:
                    response = "結果の形式が予期したものと異なります。"
        except Exception as e:
            response = f"エラーが発生しました: {e}"
            print(f"エラー詳細: {e}")
        
        # アシスタントのレスポンスを表示
        st.markdown(response)
        st.session_state.messages.append({"role": "assistant", "content": response})

特筆する内容

今回のプログラムでは、browser-useをstreamlitに適用する際、いくつかの課題に直面しました。特に以下の2点について工夫を行いました。

1. 非同期処理

streamlitの仕様上、非同期処理を用いる必要がありました。そのため、runメソッドの呼び出し部分を別関数に分離して非同期処理を実装しました。

async def main(agent):
    result = await agent.run()
    print(result)
    print('\n')
    print('【ここから】')
    if len(result.history) > 0:
        return result
    return ''

呼び出し側もこれに対応する形で、asyncio.runを用いてmain関数を実行しました。

result = asyncio.run(main(agent))

2. Windows環境での非同期処理

Windows環境で実行する際、上記の非同期処理ではエラーが発生しました。そのため、エラー内容をChatGPTに相談したところ、以下のコードを追加するよう提案されました。この変更により、エラーを解消できました。

if sys.platform.startswith("win"):
    asyncio.set_event_loop_policy(asyncio.WindowsProactorEventLoopPolicy())

このコードでは、asyncioライブラリのイベントループポリシーをWindows専用のプロアクターイベントループに設定しています。これにより、Windows特有の非同期処理の問題を回避することができました。

実行

では、プログラムを実行してみます。

python -m streamlit run app2.py

初期画面

久しぶりにstreamlitを動かしてみました。以下が初期画面です。

質問例

「2024年の流行語大賞は？」と質問してみました。

結果が英語で表示されましたが、内容は日本語の「ふてほど」に対応しているようです。

性能について

実行時間は約20秒程度でした。
ただ、チャット形式の対話としては、レスポンスがやや遅く感じられます。

おわりに

browser-useをstreamlitで活用し、チャット形式で質問と回答ができる仕組みを構築できることが分かりました。ただし、レスポンスが遅いため、チャット形式よりも、処理を一括で実行する「バッチ処理」向きかもしれません。

また、最近のクラウドソーシング界隈では、生成AIを使った記事やブログの自動作成が注目されています。この流れにおいて、browser-useはLLMが苦手とする「最新情報に基づく回答」を補完するツールとして活躍が期待できます。

さらにプログラムを工夫すれば、ユーザの質問に応じて、function callingを使い、browser-useと**RAG（Retrieval-Augmented Generation）**の適切な切り替えが可能になると考えます。

最後までお読みいただき、ありがとうございました！