PixelRAG ディープダイブ: HTMLパース不要のビジュアルRAG、スクリーンショットで精度18%向上

はじめに：従来のRAGの致命的な欠陥

企業向けナレッジベース、AI検索システム、またはドキュメントQ&Aアプリケーションを構築している方は、間違いなくRAG（Retrieval-Augmented Generation）に直面したことがあるでしょう。従来のRAGワークフローはよく知られています：ウェブページをクロール → HTMLをパース → テキストをチャンク化 → ベクトル化 → 検索 → LLMに供給。

問題はステップ２にあります。

株式価格表を含むウィキペディアページを想像してみてください：

Year	Price
1990	12.4
1991	18.7
1995	42.3

人間は一瞬で「1995年以前の最高価格は18.7」とわかります。しかし、HTMLパーサーがテーブルをプレーンテキストに変換すると、列の位置関係が失われ、次のような文字列になります：

Year Price 1990 12.4 1991 18.7 1995 42.3

この文字列の羅列から、「1995以前の最高価格はいくらか？」とLLMに正確に答えるのは困難です。さらに悪いことに、チャート、インフォグラフィック、マルチカラムレイアウト、混合テキスト・画像PDFなど、HTMLパース時に直接失われる情報は、まさにユーザーが最も頻繁に尋ねるコンテンツタイプです。

ここにUC BerkeleyがPixelRAGを開発した動機があります：ウェブページは本質的に視覚的であるため、スクリーンショットを使って検索すればよいのではないか？

PixelRAGのコアアーキテクチャ：ピクセルから回答へ

PixelRAGの論文タイトルはストレートです—“Web Screenshots Beat Text for Retrieval-Augmented Generation.” これはBerkeleyのトップラボ三つ、Sky Computing Lab、BAIR、Berkeley NLPから来ており、Yichuan Wang、Zhifei Liらが主導し、Matei Zaharia（Sparkの創作者）、Joseph Gonzalez、Sewon Minが共同アドバイザーとして参加しています。

2つのコアコンポーネント

1. レンダラー（pixelshot）

pixelshotはPixelRAGの「目」です。PlaywrightとChrome DevTools Protocol（CDP）を使用して、任意のウェブページまたはPDFをスクリーンショットタイルにレンダリングします。各タイルは画面解像度でのビューポートサイズの画像です。

# WikipediaのPythonページをスクリーンショットタイルにレンダリング
pixelshot https://en.wikipedia.org/wiki/Python --output ./tiles

主な利点：

JavaScriptレンダリングコンテンツ—SPA、動的に読み込まれるデータ、すべてが表示可能
テーブル、チャート、インフォグラフィック—完全な視覚構造が保持される
マルチカラムレイアウト—空間的関係が維持される
PDFドキュメント—popplerによるページ単位のレンダリング

2. ビジュアルエンベディングモデル

スクリーンショットタイルはQwen3-VL-Embedding-2Bモデルでベクトル化されます。このモデルはスクリーンショットデータ（トレーニングデータセットとアダプターはオープンソース）でLoRAファインチューニングされており、スクリーンショットがベクトル空間での視覚コンテンツによって検索可能になります。

「フランスの首都は何ですか？」とクエリしたとき、システムはテキストキーワードをマッチングするのではなく、回答を含むインフォボックス、テーブル、および人間が直接読めるコンテキストを持つスクリーンショットタイルを見つけ出します。

ワークフロー

ドキュメント → pixelshot がスクリーンショットをレンダリング → Qwen3-VL エンベディング → FAISS インデックス
                                                         ↓
クエリ → Qwen3-VL がクエリをエンベディング → FAISS 検索 → スクリーンショットタイルを返却 → VLM が画像から回答を読み取り

注：パイプライン全体にテキストの中間表現はありません。スクリーンショットが入力され、スクリーンショットが出力され、VLM（Claude、GPT-4o、Qwen-VLなど）が画像から直接回答を読み取ります。

主流RAGフレームワークとの比較

PixelRAGはFirecrawlやJina Readerを置き換えようとしているわけではなく、問題の別のレイヤーを解決します。関係性をはっきりさせましょう：

次元	Firecrawl	Jina Reader	RAGFlow	PixelRAG
コア機能	ウェブクロール + 構造化抽出	単一URLコンテンツ抽出	エンドツーエンドRAGエンジン	ビジュアル検索 + スクリーンショット読み取り
データ処理	HTML → Markdown/JSON	HTML → テキスト	マルチフォーマットパース	HTML → スクリーンショットタイル
テーブル処理	一部保持	列位置失われる	パーサー依存	完全保持（画像として）
チャート処理	失われる	失われる	部分的OCR	完全保持
ビジュアルレイアウト	失われる	失われる	部分的	完全保持
ユースケース	大規模クロール	クイックコンテンツ抽出	エンタープライズドキュメントQ&A	構造化コンテンツ検索
オープンソース	はい	はい	はい	はい（Apache 2.0）

重要な洞察：FirecrawlとJina Readerはデータ取得レイヤーのツールであり、PixelRAGは検索方法レイヤーでのイノベーションです。互いに補完し合えます—Firecrawlで大規模ウェブクロールを行い、PixelRAGで構造化コンテンツのビジュアル検索を行うことができます。

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

論文の実験データは印象的です：

ベンチマーク	テキストRAG（ベストベースライン）	PixelRAG	改善度
SimpleQA	71.6%	78.8%	+7.2%
NQ-Tables	42.5%	48.8%	+6.3%
EVQA	29.6%	45.1%	+15.5%
MMSearch	—	有意な改善	—
LiveVQA	—	有意な改善	—
MoNaCo（エージェントベンチマーク）	ベースライン	トークン3x削減	効率向上

最大の改善はテーブルと構造化コンテンツにおいて見られます—EVQA（ビジュアルQA）では15.5ポイントの向上があり、これは従来のテキストRAGがチャート情報を全く扱えないためです。

インストールとクイックスタートガイド

最小インストール

pip install pixelrag

これによりpixelshot（レンダラー）とコアライブラリがインストールされます。必要に応じて機能モジュールを追加してください：

pip install 'pixelrag[embed]'   # chunk, embed, build-index コマンド
pip install 'pixelrag[index]'   # フルパイプラインオーケストレーション
pip install 'pixelrag[serve]'   # FastAPI検索サーバー
pip install 'pixelrag[pdf]'     # PDFレンダリングサポート（popplerが必要）

ゼロコンフィグ体験：ホステッドWikipedia API

Berkeleyチームがホストする828万ページのWikipediaのプリビルドインデックスを使って最速で試す方法です：

# インストール不要、直接クエリ
curl -X POST https://api.pixelrag.ai/search \
  -H "Content-Type: application/json" \
  -d '{"queries": [{"text": "What is the capital of France?"}], "n_docs": 5}'

結果にはマッチしたスクリーンショットタイル（Base64エンコード画像）とドキュメントメタデータが含まれます。ブラウザで直接試すことも可能です：pixelrag.ai。

ローカルインデックスの構築

独自のドキュメント用インデックスを構築する手順：

1. 設定ファイル pixelrag.yaml を作成：

source:
  type: local
  path: ./my_docs

embed:
  model: Qwen/Qwen3-VL-Embedding-2B
  device: auto          # LinuxではCUDA、macOSではMPSを自動選択

output: ./my_index

2. インデックスを構築してサービスを起動：

# インデックス構築（Apple Mシリーズでは約3分、GPUでは約1分）
pixelrag index build

# 検索サービスを起動
pixelrag serve --index-dir ./my_index --port 30001

3. クエリ実行：

curl -X POST http://localhost:30001/search \
  -H "Content-Type: application/json" \
  -d '{"queries": [{"text": "What is the core principle of PixelRAG?"}], "n_docs": 5}'

実践：PDFのインデックス作成

pip install 'pixelrag[index,pdf]'

# サンプルPDFをダウンロード（PixelRAG論文本体）
curl -L -o paper.pdf https://raw.githubusercontent.com/StarTrail-org/PixelRAG/main/assets/pixelrag-paper.pdf

# 設定ファイル作成
cat > pixelrag.yaml << 'EOF'
source:
  type: local
  path: ./paper.pdf
embed:
  model: Qwen/Qwen3-VL-Embedding-2B
  device: auto
output: ./paper_index
EOF

# インデックス構築 → サービス起動 → クエリ
pixelrag index build
pixelrag serve --index-dir ./paper_index --port 30001

curl -X POST http://localhost:30001/search \
  -H "Content-Type: application/json" \
  -d '{"queries": [{"text": "Overview of PixelRAG pipeline diagram"}], "n_docs": 1}'

Claude Codeに「目」を与える

PixelRAGはまた、Claudeがウェブページを直接「見る」ことができるClaude Codeプラグインpixelbrowseも提供します：

# pixelshot CLIをインストール
uv tool install pixelrag    # または pipx install pixelrag

# Claudeプラグインをインストール
claude plugin marketplace add StarTrail-org/PixelRAG
claude plugin install pixelbrowse@pixelrag-plugins

その後：

claude -p "screenshot https://news.ycombinator.com and summarize the top stories"
claude -p "screenshot https://arxiv.org/abs/2404.12387 and explain the key findings"

Claudeはページのスクリーンショットを撮り、画像の中のコンテンツを人間のように読み取ります——テーブル、チャート、レイアウトすべてが一目でわかります。

実際のケーススタディ：複雑なテーブルとチャートの検索

ケース1：エンタープライズ財務データテーブル

マルチイヤー財務データのHTMLテーブルがあると仮定します。従来のRAGパース後、列の位置関係が失われ、「2023年Q3の前年比売上成長率はいくら？」のようなクロスカラム計算を必要とする質問にLLMが答えるのは困難になります。

PixelRAGのスクリーンショットはテーブルの完全な視覚構造を保持します。VLMは人間のように「2023 Q3」セルを特定し、横方向に対応する値を読み取り、「2022 Q3」と比較・計算することができます。

ケース2：学術論文の実験比較チャート

論文中の棒グラフや折れ線グラフはテキストパース時に完全に失われます。PixelRAGはチャートをスクリーンショットとしてレンダリングし、VLMが画像から直接トレンドを読み取り、値を比較できるようにします。

ケース3：ECサイトの商品比較ページ

マルチカラムの商品スペック比較テーブルは、従来のパーサーによって異なる商品のパラメータが混ざってしまうことがあります。PixelRAGのスクリーンショットは空間レイアウトを保持し、VLMが異なる商品のスペックを正確に区別できるようにします。

ユースケース分析

強く推奨されるシナリオ

シナリオ	理由
エンタープライズナレッジベース	表、フローチャート、承認フォームが多い内部ドキュメント
Academic Literature Retrieval	論文の実験データやチャートが核心情報
E-commerce Data	商品スペック表、価格比較、ユーザーレビューのスクリーンショット
政府/法務ドキュメント	規則の表、添付文書、印鑑
財務レポート分析	財務諸表、データ可視化チャート

向いていないシナリオ

シナリオ	理由
プレーンテキストブログ投稿	テキストRAGで十分；ビジュアルRAGはオーバーヘッド
コードドキュメント	コードブロックはテキスト表現の方が正確
大規模リアルタイムクロール	スクリーンショットレンダリングはテキスト抽出より遅い

制約と今後の方向性

現在の制約

1. ストレージコスト

828万ページのWikipediaプリビルドインデックスは約217 GBです。大規模なドキュメントボリュームを持つエンタープライズアプリケーションでは、スクリーンショットインデックスの保存コストはテキストインデックスよりはるかに高くなります。ただし、プロジェクトでは画像圧縮により97%のストレージ削減を達成しつつ、検索精度を維持していると報告しています。

2. レンダリングレイテンシー

pixelshotは各ページをレンダリングするためにヘッドレスブラウザを起動する必要があり、HTMLを直接パースするより遅いです。何千ものURLをリアルタイムで処理する必要があるシナリオではこれがボトルネックになります。

3. GPU依存

エンベディングモデルQwen3-VL-Embedding-2BはGPUでの動作が最適です。CPUおよびApple Silicon（MPS）もサポートしますが、大規模インデックス構築には依然としてGPUリソースが必要です。

4. クエリコスト

イメージトークンはテキストトークンより高価です。ただし、PixelRAGは精密検索により返却されるスクリーンショットが複数のテキストチャンクより焦点が絞られるため、トークン使用量を3x削減しています。それでも、VLMの推論コスト per クエリは純粋なテキストソリューションより高いままです。

今後の方向性

より効率的なビジュアル圧縮：ストレージおよび転送コストをさらに削減
ストリーミングレンダリング：大規模ウェブサイト向けのインクリメンタルスクリーンショットインデックス作成をサポート
マルチモーダル融合：テキストとビジュアル信号を組み合わせたハイブリッド検索
エッジデプロイメント：エッジデバイスでの動作をサポートするためモデルを最適化

結論

PixelRAGは「ウェブページは人間が見るために存在する—なぜまず機械テキストに「翻訳」してから機械に読ませるのか？」という直感的に正当な視点を提示します。ウェブページの元の視覚形を保持することにより、テーブル、チャート、複雑なレイアウトを含むシナリオでは従来のテキストRAGでは達成できない検索精度を実現します。

FirecrawlやJina Readerを置き換えることを狙っているわけではなく、RAGエコシステムにおける「ビジュアル検索」のギャップを埋めます。ナレッジベースに**大量の構造化コンテンツ（表、チャート、フォームなど）**がある場合は、PixelRAGを真剣に評価する価値があります。

プロジェクトリンク：

GitHub: StarTrail-org/PixelRAG
ライブデモ: pixelrag.ai
論文: arXiv:2606.28344
ライセンス: Apache 2.0

よくある質問（FAQ）

Q1: PixelRAGとFirecrawl/Jina Readerの関係は？併用可能ですか？

PixelRAGは検索方法のイノベーション（スクリーンショットを使った検索）であり、Firecrawl/Jina Readerはデータ取得ツールです。互いに補完し合えます—Firecrawlで大規模ウェブクロールを行い、PixelRAGで構造化コンテンツのビジュアル検索を行うことができます。

Q2: PixelRAGはGPUが必要ですか？

GPUはインデックス構築時に推奨されます（3x以上高速化）。ただし、Apple Silicon（MPS）およびCPUモードもサポートします。クエリサービスもCPUで実行可能です。

Q3: 828万ページのWikipediaインデックスは217GBですが、ストレージコストが高すぎる場合は？

PixelRAGでは画像圧縮により97%のストレージ削減を達成していると報告しています。また、Qdrantバックエンドの量子化設定（例：int8量子化）をサポートし、メモリ使用量をさらに削減できます。

Q4: PixelRAGがサポートするドキュメントフォーマットは？

現在、ウェブページ（HTML/JSレンダリング）、PDF（popplerのインストールが必要）、ローカル画像をサポートしています。URLとローカルファイルを混合して処理することも可能です。

Q5: 18%の精度向上はどのベンチャーマークに基づいていますか？

SimpleQAベンチマークにおいて、PixelRAGは78.8%の精度を達成し、最強のテキストRAGベースライン（71.6%）より7.2ポイント向上しています。テーブル集約型のNQ-Tablesでは6.3ポイント、ビジュアルQAのEVQAでは15.5ポイントの向上があります。

Q6: Claude Codeにビジュアルウェブアクセス機能を追加するには？

pixelshotをインストール（uv tool install pixelrag）、その後Claudeプラグインをインストール（claude plugin install pixelbrowse@pixelrag-plugins）。これでClaudeは任意のウェブページをスクリーンショットし、画像から内容を読み取ることができます。

このディープダイブがお役に立てば幸いです。テーブルやチャートなどの構造化コンテンツを含むRAGシステムを構築している場合は、PixelRAGはウェブページを機械のテキストプレferに合わせるのではなく、人間のように「見せる」全く新しいアプローチを提供します。

#PixelRAG #Visual RAG #Open Source RAG #Screenshot Retrieval #RAG Framework #UC Berkeley