AIによるブラウザ操作を実現するComputer Useの要素技術

Last updated at 2025-01-26Posted at 2025-01-26

はじめに

先日、OpenAIからOperatorがo1 proユーザー向けにリリースされ、AIがブラウザを操作してタスクを実行できる機能が話題になっています。AIが人間のように画面を見て操作し、ホテルの予約やショッピングなどのタスクを自律的にこなすという、まるでSFのような機能です。

OpenAIに先立ってAnthropicも同様の「Computer Use」機能を提供しており、注目を集めていました。この機能を理解するため、最近DeepLearningAIとAnthropicが公開したComputer Useに関するレッスンを受講してみました。

本記事では、このレッスンの内容を元に、Computer Use機能の仕組みと実装方法について解説していきます。

Computer Useの概要

Computer Useは、以下のようなシンプルなループ構造です

AIモデルに画面のスクリーンショットを提供
AIモデルが画面を分析し、次のアクション（クリック、タイプ、スクロールなど）を決定
決定されたアクションを実行
新しいスクリーンショットを取得して1に戻る

Computer Useを実現する要素技術

マルチモーダル入力処理

AIモデルは画面のスクリーンショットを理解する必要があります。レッスンの中で提供されていたサンプルコードでは、以下のような形式で画像データを提供します

def create_image_message(image_path):
    # 画像をbase64エンコード
    with open(image_path, "rb") as image_file:
        binary_data = image_file.read()
    base64_encoded_data = base64.b64encode(binary_data)
    base64_string = base64_encoded_data.decode('utf-8')
    
    # MIMEタイプを取得
    mime_type, _ = mimetypes.guess_type(image_path)
    
    # 画像ブロックを作成
    return {
        "type": "image",
        "source": {
            "type": "base64",
            "media_type": mime_type,
            "data": base64_string
        }
    }

# Promptに画像と命令を渡す
messages = [
    {
        "role": "user",
        "content": [
            create_image_message("./src/004_multi_modal_request/invoice.png"),
            {"type": "text", "text": """
                Generate a JSON object representing the contents
                of this invoice.  It should include all dates,
                dollar amounts, and addresses.
                Only respond with the JSON itself.
            """}
        ]
    }
]

response = client.messages.create(
    model=MODEL_NAME,
    max_tokens=2048,
    messages=messages
)

システムプロンプト

小規模のアプリケーションであれば問題ないかもしれませんが、エンタープライズ規模のアプリケーションでは、システムプロンプトを活用して、AIの操作を制御することが推奨されています

"Chain of thought"の活用
- 分析プロセスを明示的に示すよう指示
- 結論に至るまでの思考過程を追跡可能に
- XMLタグなどを使用した出力の構造化
出力形式の標準化
- JSON形式など、プログラムで処理しやすい形式の指定
- エッジケースの考慮（例：データが存在しない場合の処理）
- 一貫した構造の維持

特にClineのシステムプロンプトなどは参考になると思います

Tool Use

AIモデルが画面を操作するために必要なアクション（クリック、タイプなど）は、「ツール」として定義されます。以下の例では、顧客のオーダー情報を扱うためのツールセットを定義しています。

そして、これらのツールをモデルに提供し、ユーザーからのリクエストに応じて適切なツールを呼び出すことができます。

tools = [
    {
        "name": "get_user",
        "description": "Looks up a user by email, phone, or username.",
        "input_schema": {
            "type": "object",
            "properties": {
                "key": {
                    "type": "string",
                    "enum": ["email", "phone", "username"],
                    "description": "The attribute to search for a user by (email, phone, or username)."
                },
                "value": {
                    "type": "string",
                    "description": "The value to match for the specified attribute."
                }
            },
            "required": ["key", "value"]
        }
    },
    {
        "name": "get_order_by_id"
        # 省略
    },
    {
        "name": "get_customer_orders"
        # 省略
    },
    {
        "name": "cancel_order"
        # 省略
    }
]

messages = [
    {
        "role": "user",
        "content": "Show me my orders.  My username is priya123"
    }
]
response = client.messages.create(
    model=MODEL_NAME,
    max_tokens=4096,
    tools=tools,
    messages=messages
)

実際にAnthropicが提供しているクイックスタートでは以下のようにtoolを定義している箇所が存在します

そして実際にclick操作であったり、マウス移動の処理は以下のように定義されております

プロンプトキャッシング

プロンプトキャッシングは、APIの使用を最適化し、コストとレイテンシーを改善するための重要な機能です

コスト削減: キャッシュからの読み取りは、通常の入力トークンよりも90%安価です
レイテンシー改善: キャッシュされた内容は再処理が不要なため、応答時間が短縮されます

例えば、以下のような長いテキストを含むプロンプトを考えてみましょう

response = client.messages.create(
    model=MODEL_NAME,
    max_tokens=1000,
    messages=[{
        "role": "user",
        "content": [
            {
                "type": "text",
                "text": book_content,  # 長いテキストコンテンツ
                "cache_control": {"type": "ephemeral"}
            }
        ]
    }]
)

チュートリアルの中ではキャッシングの有無によって、入力トークン量やレイテンシーが大きく改善されました

キャッシングなし	キャッシングあり
108,000 tokens	11,000 tokens
約17秒	約6秒

ただし、以下の点に注意が必要です

キャッシュの有効期限は5分
キャッシュからの読み取り時に有効期限がリセット
キャッシュへの書き込みは通常の入力トークンより25%高価

会話が進むにつれて長くなるコンテキストに対して、キャッシュを効果的に活用できます

最後から2番目のユーザーメッセージにキャッシュ制御ポイントを設置
最後のユーザーメッセージにも別のキャッシュ制御ポイントを設置
会話が進むにつれて、これらのポイントを移動させていく

これにより、長い会話履歴を効率的に管理しながら、必要なコンテキストを維持することができます。

ストリーミングレスポンス

AIの応答を待つユーザー体験を向上させるため、ストリーミングレスポンスを実装することができます

with client.messages.stream(
    max_tokens=1024,
    messages=[{"role": "user", "content": "write a poem"}],
    model=MODEL_NAME,
) as stream:
    for text in stream.text_stream:
        print(text, end="", flush=True)

ストリーミングを使用することで以下のメリットがあります

生成されたコンテンツをリアルタイムで表示可能
最初のレスポンスまでの待ち時間を短縮
ユーザーに処理の進行状況を視覚的に伝えられる

ただし、生成の全体的な処理時間は変わらないことに注意が必要です

まとめ

これまで見てきた各技術要素は、以下のようにComputer Use機能を支えています

マルチモーダル入力処理
- スクリーンショットをbase64形式で受け取り、AIモデルが画面の状態を理解
- これにより「今画面がどうなっているか」を認識することが可能に
システムプロンプト
- AIの動作を制御する基盤となる重要な要素
- Chain of thoughtによる思考プロセスの可視化
- 構造化された出力形式の統一による安定した処理の実現
Tool Use
- クリック、タイプ、スクロールなどの基本的な操作をツールとして定義
- AIモデルはこれらのツールを組み合わせて、複雑な画面操作を実現
- 例：検索ボックスをクリック → テキストを入力 → 検索ボタンをクリック、といった一連の流れを実行
プロンプトキャッシング
- 長い会話履歴や画面操作の文脈を効率的に保持
- これにより「前の画面で何をしたか」という文脈を維持しながら操作が可能に
ストリーミングレスポンス
- ユーザー体験を向上させる重要な要素
- リアルタイムでの処理状況の表示により、ユーザーの待ち時間の体感を改善
- チャットUIやプログレス表示などの実装に活用可能

これらの各技術要素が密接に連携することで、人間のような柔軟な画面操作が可能になっています。

ユーザーがタスクを依頼（例：「ウェブサイトで口コミが多い順に商品を並び替えて」）
AIモデルが画面を確認（マルチモーダル入力）
次に必要なアクションを判断（システムプロンプトに基づく）
アクションを実行（Tool Use）
結果を確認して次のアクションを判断（文脈の維持にプロンプトキャッシングを活用）
一連の操作をユーザーに表示（ストリーミングレスポンス）

Computer Use機能は、AIが人間のインターフェースを直接操作できるという点で革新的です。
本記事で紹介した実装手法は、DeepLearning.AIのレッスンを参考にしています。より詳細な実装については、ぜひレッスンを受講してみることをお勧めします。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up