AIウェブエージェントの解放:GPT-4VとPuppeteerによる自律的なブラウジングの強化

GPT-4Vとパペティアを使って強力なAIウェブエージェントを解放しましょう!自律型ブラウジング、ウェブスクレイパー、高度なAI駆動のウェブ調査を探索してください。これらの高度なAIアシスタントがRPAからカスタマーサポートまでのタスクを革新する方法を発見してください。

2025年2月19日

party-gif

AIドライブのウェブオートメーションの力を解き放つこの革新的なアプローチは、GPT-4VとPuppeteerを組み合わせています。ウェブを閲覧し、データを抽出し、複雑なタスクを簡単に完了できるAIエージェントを構築する方法を発見し、ワークフローを革新し、新しい可能性を開きます。

AIウェブエージェントの使用事例と市場機会

AIウェブエージェントの潜在的な使用例とマーケット機会を検討する1つの方法は、同様のシステムを構築する以前の試みを調べ、その限界を確認し、新しい技術や変化がダイナミクスにどのように影響する可能性があるかを検討することです。

直接的な市場カテゴリーの1つは、ロボティック・プロセス・オートメーション(RPA)です。RPAは、請求書処理やデータ入力などの反復的で標準化されたタスクを自動化するためのソフトウェアカテゴリーです。しかし、RPA ソリューションには明確な限界があります。非標準化されたプロセスや絶えず変化するプロセスに対応するのが難しく、各自動化に高額な設定コストがかかります。

これに対し、コンピューターやブラウザーを直接制御できるAIウェブエージェントは、はるかに複雑な状況を、設定コストを大幅に抑えて処理できる可能性があります。特定の自動化を構築する代わりに、エージェントはウェブサイトを簡単に移動し、データを抽出し、フォーマットの変更に関係なくタスクを完了できます。

単なる自動化を超えて、これらのAIエージェントは、顧客サポート、販売、マーケティングなどの、より知的なタスクを実行することもできます。より多くのシステムにアクセスし、意思決定能力を活用することで、これらの「労働者」AIは、より幅広い使用例、消費者アプリケーションなどの低容量のものにも展開できます。

ただし、有用なAI労働者ソリューションを提供する上での重要な課題は、単なる技術的な理解だけでなく、特定の職務機能のエンドツーエンドのワークフロー知識でもあります。1,400人以上の世界的な販売リーダーを調査したHotspotの最近の調査レポートは、現代の販売ワークフローとAIの使用例に関する貴重な洞察を提供しており、販売機能のAIエージェントを構築する上で非常に役立つ情報です。

まとめると、AIウェブエージェントの主な機会は以下のとおりです:

  • 従来のRPAと比較して、より複雑で非標準化されたタスクに対応できる
  • 自動化のセットアップコストを削減できる
  • 単なる自動化を超えて、顧客サポートや販売などのより知的なタスクを実行できる
  • 特定の職務機能のワークフロー知識を活用して、より効果的なAIエージェントを構築できる

AIウェブエージェントの構築に向けた2つのアプローチ

アプローチ1: GPT-4V搭載ウェブスクレイパー

  1. Node.jsライブラリのPuppeteerを使用して、ウェブページのスクリーンショットを撮影し、ウェブブラウザーを制御する。
  2. Python スクリプトを作成し、JavaScript ファイルを呼び出してスクリーンショットを撮影し、GPT-4Vを使ってスクリーンショットからデータを抽出する。
  3. Pythonスクリプトは、画像をbase64に変換する関数、スクリーンショットを撮る関数、GPT-4Vを使ってスクリーンショットから情報を抽出する関数を定義する。
  4. スクリプトはこれらの関数を連携させて、通常のスクレイピングサービスをブロックするウェブサイトにもアクセスできる強力なウェブスクレイパーを作成する。

アプローチ2: ウェブAIエージェントの構築

  1. 様々なライブラリをインポートし、OpenAIインスタンスとコマンドラインインターフェースを設定するNode.jsファイルを作成する。
  2. ウェブページ上のすべての対話型要素を識別し、特別な属性を追加するhighlightLinks関数を実装する。
  3. ユーザーのプロンプトと現在のウェブページの状態に基づいてGPT-4Vから応答を取得し、以下のことを行う主要な関数を定義する:
    • 応答が「リンクをクリックする」ことを示している場合は、対応する要素を見つけてクリックする。
    • 応答が「新しいURLに移動する」ことを示している場合は、そのURLに移動し、リンクをハイライトする。
    • 応答が通常のメッセージの場合は、その結果をユーザーに表示する。
  4. このウェブAIエージェントは、GPT-4Vの機能を活用して、複数のウェブサイトを移動し、リンクをクリックし、複雑な調査タスクを完了できます。

この2つのアプローチは、GPT-4Vのような大規模言語モデルを活用して、強力なウェブ自動化およびリサーチツールを構築する方法を示しています。最初のアプローチはウェブスクレイピングに焦点を当てており、2つ目のアプローチはより高度なウェブエージェントを作成し、ウェブ上を移動してタスクを完了できるようにしています。

GPT-4V駆動のウェブスクレイパーの構築

GPT-4V搭載ウェブスクレイパーを構築するには、Node.jsライブラリのPuppeteerを使ってウェブブラウザーを制御し、スクリーンショットを撮ります。以下のステップバイステップガイドに従ってください:

  1. screenshot.jsという新しいファイルを作成し、必要なライブラリをインポートします:
const puppeteer = require('puppeteer');
const puppeteerExtra = require('puppeteer-extra');
  1. スクレイピングするURLとタイムアウト値を定義します:
const url = 'https://en.wikipedia.org/wiki/Main_Page';
const timeout = 60000; // 60秒
  1. ブラウザを起動し、URLに移動してスクリーンショットを撮るための非同期関数を作成します:
async function takeScreenshot() {
  const browser = await puppeteerExtra.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto(url, { waitUntil: 'networkidle0' });
  await page.screenshot({ path: 'screenshot.jpg', fullPage: true });
  await browser.close();
}
  1. この例では、ウェブサイトに検出されにくくするためにpuppeteer-extraプラグインを使用しています。

  2. takeScreenshot()関数を呼び出してスクリーンショットを撮ります:

takeScreenshot();

これで、node screenshot.jsを実行すると、Wikipediaのホームページのスクリーンショットがscreenshot.jpgファイルに保存されます。

次に、スクリーンショットとGPT-4Vを使ってウェブサイトからデータを抽出するPythonスクリプトを作成します:

  1. vision_scraper.pyという新しいファイルを作成し、必要なライブラリをインポートします:
import os
import subprocess
import base64
import openai
from dotenv import load_dotenv

load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
  1. 画像をbase64に変換し、screenshot.jsスクリプトを使ってスクリーンショットを撮る関数を定義します:
def image_to_b64(image_path):
    with open(image_path, "rb") as image_file:
        return base64.b64encode(image_file.read()).decode("utf-8")

def url_to_screenshot(url):
    if os.path.exists("screenshot.jpg"):
        os.remove("screenshot.jpg")
    try:
        subprocess.run(["node", "screenshot.js"], check=True)
        return "screenshot.jpg"
    except subprocess.CalledProcessError:
        return None
  1. GPT-4Vを使ってスクリーンショットから情報を抽出する関数を作成します:
def vision_extract(image_b64, prompt):
    response = openai.ChatCompletion.create(
        model="gpt-4",
        messages=[
            {"role": "system", "content": "You are a web scraper. Your job is to extract information based on a screenshot of a website and user instructions."},
            {"role": "user", "content": prompt},
            {"role": "user", "content": image_b64}
        ],
        max_tokens=2048,
        n=1,
        stop=None,
        temperature=0.7,
    )
    return response.choices[0].message.content.strip()
  1. 全てをvision_query()関数にまとめます:
def vision_query(url, prompt):
    screenshot_path = url_to_screenshot(url)
    if screenshot_path:
        image_b64 = image_to_b64(screenshot_path)
        return vision_extract(image_b64, prompt)
    else:
        return "Error: Unable to capture screenshot."
  1. vision_query()関数を使ってウェブサイトから情報を抽出できます:
result = vision_query("https://www.linkedin.com/in/your-profile-url", "Extract the work experience section from the profile.")
print(result)

この例では、指定のLinkedInプロファイルのスクリーンショットを撮り、GPT-4Vを使ってワーク経験セクションを抽出します。プロンプトをカスタマイズすれば、ウェブサイトから様々な情報を抽出できます。

FAQ