289 測定値

新しい AI エージェントが HTML ではなく Markdown を選択する理由

に Bright Data7m2025/03/19

長すぎる; 読むには

AI エージェントが HTML を Markdown に変換してトークンの使用量を最大 99% 削減する理由をご覧ください。処理速度が速くなり、コストが削減され、AI の効率が最大限に高まります。

featured image - 新しい AI エージェントが HTML ではなく Markdown を選択する理由

AI エージェントは世界を席巻しており、AI の進化における次の大きな一歩を踏み出しています 🦖。では、これらすべてのエージェントに共通するものは何でしょうか? ウェブページのコンテンツを処理する際に、生の HTML ではなく Markdown を使用します ⛓️。その理由を知りたいですか?

このブログ記事では、この簡単なトリックでトークンとお金を最大 99% 節約できる方法を紹介します。

AIエージェントとデータ処理: 概要

AI エージェントは、人工知能の力を活用してユーザーに代わってタスクを達成し、目標を追求するソフトウェアシステムです。推論、計画、記憶を備えたこれらのエージェントは、すべて自分で意思決定、学習、適応を行うことができます。🤯

ここ数か月、特にブラウザ自動化の世界で AI エージェントが急速に普及しています。これらの AI エージェントブラウザを使用すると、LLM を使用してブラウザをプログラムで制御し、Amazon カートに商品を追加するなどのタスクを自動化できます 🛒。

Crawl4AI 、 ScrapeGraphAI 、 LangChainなどの AI エージェントを動かすライブラリやフレームワークが何であるか疑問に思ったことはありませんか?

これらのソリューションは、Web ページからデータを処理する際に、データを LLM に送信する前に HTML を Markdown に自動的に変換したり、変換する方法を提供したりします。しかし、なぜこれらの AI エージェントは HTML よりも Markdown を好むのでしょうか? 🧐

簡単に答えると、トークンを節約し、処理を高速化するためです。⏩

もっと深く掘り下げてみましょう。まずは、AI エージェントがデータ負荷を軽減するために使用する別の一般的なアプローチを見てみましょう。👀

データ過多から明確化へ: AI エージェントの最初の動き

AI エージェントに次のことを行わせたいとします。

電子商取引サイト（Amazonなど）に接続する
製品を検索する（例：PlayStation 5）
特定の商品ページからデータを抽出する

これは AI エージェントにとって一般的なシナリオです。e コマースのスクレイピングは大変な作業です🎢。結局のところ、製品ページはレイアウトが絶えず変化する混沌とした状態であり、プログラムによるデータ解析は悪夢です。そこで AI エージェントがスーパーパワーを発揮し 💪、LLM を活用してページ構造がどんなに乱雑でもシームレスにデータを抽出します。

さて、Amazon のPlayStation 5 製品ページからすべての興味深い詳細を入手するというミッションに取り組んでいるとしましょう 🎮:

これを実現するために AI エージェントブラウザに指示する方法は次のとおりです。

 Navigate to Amazon's homepage. Search for 'PlayStation 5' and select the top result. Extract the product title, price, availability, and customer ratings. Return the data in a structured JSON format.

AI エージェントがすべきことはこれです (願わくば 🤞):

ブラウザでAmazonを開く🌍
「PlayStation 5」を検索してください🔍
正しい製品を特定します🎯
ページから製品の詳細を抽出し、JSON で返します 📄

しかし、本当の課題はステップ 4です。Amazon PlayStation 5 の製品ページは大変です。HTML には大量の情報が詰め込まれていますが、そのほとんどは必要ありません。

証拠が必要ですか? ブラウザの DOM からページの完全な HTML をコピーし、 LLM トークン計算ツールなどのツールにドロップします。

🚨 覚悟してください…

896,871 トークン?! 😱 はい、その通りです。なんと 896,871 トークンです!

これは膨大な量のデータ、つまり大量のお金です! 💸 (GPT-4o ではリクエストあたり 2 ドル以上です! 😬)

ご想像のとおり、すべてのデータを AI エージェントに渡すと、大きな制限が生じます。

トークンの大量使用をサポートするプレミアム/プロプランが必要になる場合があります💰
コストが膨大になります。特に頻繁にクエリを実行する場合はそうです🤑
AIが膨大な量の情報を処理する必要があるため、応答が遅くなります⏳

解決策: 余分な部分を取り除く

ほとんどの AI エージェントでは、CSS セレクターを指定して、Web ページの関連セクションのみを抽出できます。他のエージェントでは、ヘッダーとフッター (通常は価値を追加しない) を削除するなど、ヒューリスティックアルゴリズムを使用してコンテンツを自動フィルター処理します。✂️

たとえば、Amazon の PlayStation 5 製品ページを調べてみると、有用なコンテンツのほとんどが#ppd CSS セレクターで識別される HTML 要素内に存在することがわかります。

さて、AI エージェントにページ全体ではなく#ppd要素のみに焦点を当てるように指示するとどうなるでしょうか?何か違いがあるでしょうか? 🤔

以下の直接対決で試してみましょう！🔥

AI データ処理における Markdown と HTML: 直接比較

Web ページの一部を直接処理する場合と Markdown に変換する場合のトークンの使用法を比較します。

html

ブラウザで、 #ppd要素の HTML をコピーし、LLM トークン計算ツールにドロップします。

896,871 トークンから 309,951 トークンに減少しました。約 65% の節約です。

確かに大幅な減少ですが、現実的に考えれば、トークンはまだ多すぎます！😵‍💸

マークダウン

ここで、オンラインの HTML から Markdown への変換ツールを活用して、AI エージェントが使用するトリックを再現してみましょう。ただし、まず、AI エージェントは、 <style>や<script>タグなど、コンテンツに重要でないタグを削除するために前処理を実行することを覚えておいてください。

ブラウザのコンソールで次の簡単なスクリプトを使用して、ターゲット要素の HTML をフィルターできます。

 function removeScriptsAndStyles(element) { let htmlString = ppdElement.innerHTML; // Regex to match all <script>...</script> and <style>...</style> tags const scriptRegex = /<script[^>]*>[\s\S]*?<\/script>/gi; const styleRegex = /<style[^>]*>[\s\S]*?<\/style>/gi; // Remove all <script> and <style> tags let cleanHTML = htmlString.replace(scriptRegex, ''); cleanHTML = cleanHTML.replace(styleRegex, ''); } // select the target element and get its cleaned HTML const ppdElement = document.getElementById('ppd'); removeScriptsAndStyles(ppdElement);

次に、クリーンアップされた HTML をコピーし、オンラインのHTML から Markdown への変換ツールを使用して Markdown に変換します。

結果として得られる Markdown は大幅に小さくなりますが、重要なテキストデータはすべて含まれています。

次に、この Markdown を LLM トークン計算ツールに貼り付けます。

すごい！💣 896,871 トークンからわずか 7,943 トークンに減りました。なんと、約 99% の節約です！

基本的なコンテンツ削除と HTML から Markdown への変換だけで、ペイロードがスリムになり、コストが削減され、処理速度が大幅に向上します。大きな成果です! 💰

Markdown vs HTML: トークンとコスト削減をめぐる戦い

最後のステップは、Markdown テキストにすべてのキーデータが含まれていることを確認することです。これを行うには、元のプロンプトの最後の部分とともに LLM に渡すと、次の JSON 結果が得られます。

 { "product_title": "PlayStation®5 console (slim)", "price": "$499.00", "availability": "In stock", "customer_ratings": { "rating": 4.6, "total_ratings": 5814 } }

これはまさに AI エージェントが返すものです。まさにその通りです!

簡単な概要については、以下の最終概要表をご覧ください。

方法	トークン	o1-mini 価格	gpt-4o-mini 価格	gpt-4o 価格
HTML全体	896,871	13.4531ドル	0.1345ドル	2.2422ドル
`#ppd` HTML	309,951	4.6493ドル	0.0465ドル	0.7749ドル
`#ppd`マークダウン	7,943	0.0596ドル	0.0012ドル	0.0199ドル