0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@sam112morris

ウェブサイトを理解するウェブエージェント：ノッテのパーセプション・レイヤーがDOM問題を解決する方法

0
Posted at

ウェブエージェントの根本的な問題は、自動化ではなく、認識である。HTMLのレイヤーに埋もれたウェブサイトをLLMがナビゲートし、操作できるようにするにはどうすればいいのか？

技術的問題：DOMインピーダンスミスマッチ

ウェブエージェントは伝統的に弱いアプローチに頼ってきた： DOM解析、CSSセレクタ、HTML構造解析などです。これは、LLMが情報を処理する方法（自然言語）とウェブサイトの構造（マークアップ）の間に、根本的なインピーダンスのミスマッチを生じさせる。

典型的なウェブ自動化のアプローチを考えてみよう：

driver.find_element(By.CSS_SELECTOR, "button.submit-btn.primary")
driver.find_element(By.XPATH, "//div[@class='form-container']//input[@name='email']")

何が問題なのでしょうか？

脆弱性：開発者がスタイリングを変更するとCSSセレクタが破綻する
認知的オーバーヘッド：LLMはセマンティックな手がかりに基づいて行動する代わりに構造的推論をシミュレートする必要があり、プロンプトサイズが膨らみ、幻覚リスクが増大する
コンテキストの喪失：生のDOMはセマンティックな理解を提供しない
保守の悪夢：UIの変更ごとにエージェントの更新が必要
デバッグの困難さ：特に要素が動的またはJSの後ろに隠れている場合、失敗は曖昧または無音の例外を投げることが多い

LLMの自然言語処理とWebサイトの構造的複雑さの断絶により、脆弱で保守が困難で、デバッグが困難なエージェントが生まれます。

解決策：知覚を通したセマンティック抽象化

Notteは、ウェブサイトとLLMの間の翻訳インターフェースとして機能する知覚層を導入します。LLMにDOM構造を解析させる代わりに、生のウェブページを構造化された自然言語記述に変換し、実装詳細を抽象化しながらセマンティックな意味を保持します。

動作原理

知覚層は以下を：

<div class="product-card-container">
  <div class="product-image-wrapper">
    <img src="/product-123.jpg" alt="Wireless Headphones">
  </div>
  <div class="product-details">
    <h3 class="product-title">Premium Wireless Headphones</h3>
    <span class="price-current">$99.99</span>
    <button class="btn btn-primary add-to-cart" data-product-id="123">
      Add to Cart
    </button>
  </div>
</div>

このように変換します：

Product: Premium Wireless Headphones
Price: $99.99
Image: Wireless Headphones
Available actions: Add to Cart

この変換は静的ではなく、コンテキストを認識し動的です。LLMはマークアップではなく意味を扱うようになります。

GitHubでNotteを探索

アーキテクチャの利点

1. セマンティック抽象化

ウェブサイトは、自然言語で記述されたナビゲート可能な地図となる。代わりに以下のようになる：

driver.find_element(By.CSS_SELECTOR, ".add-to-cart")

エージェントはこのように考えます：

プレミアムワイヤレスヘッドフォンの「カートに追加」ボタンをクリックする

2. 変更に対する耐性

自然言語記述はセレクタよりもUI変更に適応します。開発者がCSSクラスをbtn-primaryからbutton-mainに変更しても、知覚層はそれを「Add to Cartボタン」として理解します。
セマンティックな意図が保持されている場合、マークアップが変更されても知覚は堅牢性を保ちます。

3. LLM最適化

情報はLLMが最もよく理解する形式（明確なセマンティック構造を持つ自然言語）で提示されます。これにより推論が改善され、幻覚リスクが減少し、プロンプトサイズが縮小されます。

4. 小さなモデル、より良いパフォーマンス

知覚層により、小さなモデル（Llamaスイートなど）が簡素化された入力で効果的に推論できます。DOMノイズが除去され、推論エンジンは重要な部分に集中できます。これにより、小さなモデルがタスク固有の実行において大きなモデルと競合できるようになります。

コード実装

基本的なエージェントの例

from notte_sdk import NotteClient

# Notteクライアントを初期化
notte = NotteClient(api_key="your-api-key")

# agents APIを使用した自然言語タスク実行
response = notte.agents.run(
    task="100ドル以下で最も安いワイヤレスヘッドフォンを見つけてカートに追加する"
)

print(response.answer)

セッション制御の高度な例

from notte_sdk import NotteClient
from pydantic import BaseModel

# 期待される応答スキーマを定義
class TwitterPost(BaseModel):
    url: str

notte = NotteClient()

# 認証情報を使用した高度なセッション管理
with notte.Vault() as vault, notte.Session(
    headless=False, 
    proxies=False, 
    browser_type="chrome"
) as session:

    # セキュアな認証情報管理（本番環境では環境変数を使用）
    vault.add_credentials(
        url="https://x.com",
        username="your-email",      # 実際のメールアドレスに置き換え
        password="your-password"    # 実際のパスワードに置き換え
    )

    # セッションコンテキストでエージェントを作成
    agent = notte.Agent(
        session=session,
        vault=vault,
        max_steps=10
    )

    # 複雑なマルチステップワークフロー
    response = agent.run(
        task="twitterに行って投稿: new era this is @nottecore taking over my acc. 投稿URLを返す",
        response_format=TwitterPost  # スキーマ検証をトリガー
    )

    print(f"投稿成功: {response.answer.url}")

構造化出力でのデータ抽出

from notte_sdk import NotteClient
import json

notte = NotteClient()

# scrapeメソッドを使用した構造化データ抽出
data = notte.scrape(
    url="https://pump.fun",
    instructions="pfのトップ5最新トレンディコインを取得、ティッカー、名前、時価総額を返す"
)

# 結果を出力
print(json.dumps(data, indent=2, ensure_ascii=False))

本番環境での意味合い

保守オーバーヘッドの削減

ウェブサイトがUIを変更しても、自然言語による説明は安定したままです。エージェントは、常にセレクタを更新しなくても機能し続けます。

直感的なデバッグ

暗号的なDOMクエリの代わりに自然言語トレースでデバッグ：
❌ 従来の方法：「Element not found: button.submit-btn.primary」
✅ 新しい方法：「チェックアウトページで'Submit Order'ボタンが見つかりませんでした」

開発サイクルの高速化

脆弱なセレクタロジックを学習する代わりに、プレーンな英語でエージェントタスクを記述：

# これの代わりに：
element = driver.find_element(By.XPATH, 
    "//div[contains(@class, 'product-grid')]//div[contains(@class, 'product-item')][.//span[contains(text(), 'Wireless')]]//button[contains(@class, 'add-cart')]"
)

# これを使用：
result = agent.run(task="ワイヤレスヘッドフォンをカートに追加")

より良いマルチステップワークフロー

Notteは複雑なワークフローにわたってセッション状態を維持しながら、クッキー、多くのタイプのCAPTCHA、アンチボット保護を処理します。

response = agent.run(task="""
1. 3つの主要小売業者でiPhone 15の価格を比較
2. 送料を含む最良の取引を見つける
3. 在庫と配送時間を確認
4. 推奨事項を含む要約レポートを生成
""")

print(response.answer)

注：多くのアンチボットフローは自動的に処理されますが、すべてのCAPTCHAタイプや高度なフローがまだ解決可能ではありません。

パフォーマンスベンチマーク

Notteは以下により、速度、コスト、成功率で従来のウェブエージェントを上回ります：

トークン使用量の削減：セマンティックサマリーにより肥大化したDOM解析を回避
小さなモデルの有効化：知覚により効率的なモデル（Llama等）が優秀になる
推論の高速化：最小限のオーバーヘッドでCerebrasなどの高スループット推論をサポート
成功率の向上：自然言語理解によりタスク失敗を削減

オープンオペレーター評価はこちらで探索

実世界でのアプリケーション

Eコマース自動化

# 自動化された競合価格モニタリング
response = agent.run(
    task="AmazonとBest Buyでワイヤレスヘッドフォンの競合価格をチェック、99ドルの目標価格と比較"
)

リード生成

# プロフェッショナルアウトリーチ自動化
response = agent.run(
    task="LinkedInでAI分野のスタートアップ創業者20人を見つける。最近資金調達について投稿した人の連絡先情報を抽出"
)

市場調査

# scrapeエンドポイントを使用した自動化された市場インテリジェンス
data = notte.scrape(
    url="https://www.g2.com/categories/project-management",
    instructions="競合分析のため、価格、評価、主要機能を含むトップ5プロジェクト管理ツールを抽出"
)

終わりに

従来のウェブエージェントはLLMにウェブスクレーパーのように考えることを強制します。
Notteは決定者のように考えることを可能にします — どこをクリックするかではなく、何をするかを理解します。
これは単にエージェントをより良く動作させることではありません。保守可能で、デバッグ可能で、本番環境に対応できるようにすることです。エージェントがdiv.flight-result-container > span.price-valueを解析する代わりに「最も安いフライトを見つける」を理解するとき、ウェブ自動化の根本的な問題を解決したことになります。
マークアップではなく意味を理解するウェブエージェントを構築しましょう。

探索＆開始

GitHubでNotteを探索

コンソールを始める

ドキュメントを探索

[この記事は2025年7月7日に最終更新されました。最carbon (2).png
新の機能と改善については、バージョンリリースまたはTwitter経由の変更ログを確認してください。]

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?