PixelRAG 深度解析：無需 HTML 解析的視覺 RAG，截圖提升 18% 準確率

引言：傳統 RAG 的致命缺陷

如果你正在建構企業知識庫、AI 搜尋系統或文件問答應用，一定接觸過 RAG（檢索增強生成）。大家對傳統 RAG 的流程都很熟悉：爬取網頁 → 解析 HTML → 文字分塊 → 向量化 → 檢索 → 餵給 LLM。

問題就出在第二步。

想像一個維基百科頁面裡有一張股價表格：

年份	價格
1990	12.4
1991	18.7
1995	42.3

人類可以一眼看出「1995 年之前的最高價格是 18.7」。但當 HTML 解析器把表格轉成純文字後，欄位對齊就消失了，表格變成：

Year Price 1990 12.4 1991 18.7 1995 42.3

面對這樣一串文字，LLM 很難準確回答「1995 年之前的最高價格是多少？」更糟糕的是，圖表、資訊圖表、多欄版面、圖文混排的 PDF——這些在 HTML 解析過程中直接遺失的資訊，恰恰是用戶最常詢問的內容類型。

這就是加州大學柏克萊分校開發 PixelRAG 的動機：既然網頁天生就是視覺化的，為什麼不用截圖來檢索呢？

PixelRAG 核心架構：從像素到答案

PixelRAG 的論文標題非常直白——“Web Screenshots Beat Text for Retrieval-Augmented Generation。” 它來自柏克萊三個頂尖實驗室：Sky Computing Lab、BAIR 和 Berkeley NLP，由 Yichuan Wang、Zhifei Li 等人領導，Matei Zaharia（Spark 創造者）、Joseph Gonzalez 和 Sewon Min 擔任共同指導教授。

兩個核心元件

1. 渲染器（pixelshot）

pixelshot 是 PixelRAG 的「眼睛」。它使用 Playwright + Chrome DevTools Protocol（CDP）將任何網頁或 PDF 渲染成截圖磚塊。每個磚塊是頁面在螢幕解析度下的視窗大小圖片。

# Render Wikipedia Python page to screenshot tiles
pixelshot https://en.wikipedia.org/wiki/Python --output ./tiles

主要優勢：

JavaScript 渲染的內容——SPA、動態載入的資料，全部可見
表格、圖表、資訊圖表——完整的視覺結構被保留
多欄版面——空間關係完整保留
PDF 文件——透過 poppler 逐頁渲染

2. 視覺嵌入模型

截圖磚塊使用 Qwen3-VL-Embedding-2B 模型進行向量化。該模型在截圖資料上進行了 LoRA 微調（訓練資料集和適配器均已開源），使截圖能夠在向量空間中按視覺內容進行檢索。

當查詢「法國的首都是什麼？」時，系統不是匹配文字關鍵字——而是找到包含答案的截圖磚塊，連同資訊框、表格和上下文，就像人類可以直接閱讀的一樣。

工作流程

Document → pixelshot renders screenshots → Qwen3-VL embedding → FAISS index
                                                    ↓
Query → Qwen3-VL embed query → FAISS retrieval → return screenshot tiles → VLM reads image for answer

注意：整個流程沒有文字中間表示。截圖輸入，截圖輸出，VLM（如 Claude、GPT-4o、Qwen-VL）直接從圖片中讀取答案。

與主流 RAG 框架的比較

PixelRAG 並非要取代 Firecrawl 或 Jina Reader——它解決的是不同層面的問題。讓我們釐清它們的關係：

維度	Firecrawl	Jina Reader	RAGFlow	PixelRAG
核心功能	網頁爬取 + 結構化提取	單一 URL 內容提取	端到端 RAG 引擎	視覺檢索 + 截圖閱讀
資料處理	HTML → Markdown/JSON	HTML → 文字	多格式解析	HTML → 截圖磚塊
表格處理	部分保留	欄位對齊遺失	依賴解析器	完整保留（以圖片形式）
圖表處理	遺失	遺失	部分 OCR	完整保留
視覺版面	遺失	遺失	部分	完整保留
使用場景	大規模爬取	快速內容提取	企業文件問答	結構化內容檢索
開源	是	是	是	是（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（Agent 基準測試）	基線	Token 減少 3 倍	效率提升

最大的提升來自表格和結構化內容——EVQA（視覺問答）提升了 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）

零配置體驗：託管的維基百科 API

最快的嘗試方式——柏克萊團隊託管了一個預建的828 萬頁維基百科索引：

# 無需安裝，直接查詢
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 Code 外掛 pixelbrowse，讓 Claude 可以直接「看見」網頁：

# 安裝 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 解析後，欄位對齊遺失，LLM 難以回答「2023 年第三季的營收年增率是多少？」這類需要跨欄計算的問題。

PixelRAG 的截圖保留了表格的完整視覺結構。VLM 可以像人類一樣定位「2023 Q3」儲存格，水平讀取對應數值，再與「2022 Q3」進行比較計算。

案例 2：學術論文中的實驗比較圖表

論文中的長條圖和折線圖在文字解析中完全遺失。PixelRAG 將圖表渲染為截圖，讓 VLM 可以直接從圖片中讀取趨勢並比較數值。

案例 3：電商產品比較頁面

多欄的產品規格比較表經常被傳統解析器將不同產品的參數混在一起。PixelRAG 的截圖保留了空間版面，使 VLM 能夠準確區分不同產品的規格。

使用場景分析

強烈推薦的場景

場景	原因
企業知識庫	內部文件充滿表格、流程圖、簽核表單
學術文獻檢索	實驗資料、論文中的圖表是核心資訊
電商資料	產品規格表、價格比較、用戶評論截圖
政府/法律文件	法規中的表格、附件、印章
財務報表分析	財務報表、資料視覺化圖表

較不適合的場景

場景	原因
純文字部落格文章	文字 RAG 已經夠好，視覺 RAG 增加不必要的開銷
程式碼文件	程式碼區塊在文字表示中更精確
大規模即時爬取	截圖渲染比文字提取慢得多

限制與未來方向

目前的限制

1. 儲存成本

828 萬頁維基百科的預建索引約為 217 GB。對於文件量龐大的企業應用，儲存截圖索引的成本遠高於文字索引。不過，專案報告透過圖片壓縮已實現 97% 的儲存節省，同時保持檢索準確率。

2. 渲染延遲

pixelshot 需要啟動無頭瀏覽器來渲染每個頁面，比直接解析 HTML 慢。對於需要即時處理數千個 URL 的場景，這是一個瓶頸。

3. GPU 依賴

嵌入模型 Qwen3-VL-Embedding-2B 在 GPU 上表現最佳。雖然支援 CPU 和 Apple Silicon（MPS），但大規模索引建構仍需 GPU 資源。

4. 查詢成本

圖片 Token 比文字 Token 更貴。儘管 PixelRAG 透過精確檢索實現了 3 倍的 Token 節省（因為返回的截圖比多個文字分塊更聚焦），但每次查詢的 VLM 推論成本仍高於純文字方案。

未來方向

更高效的視覺壓縮：進一步降低儲存和傳輸成本
串流渲染：支援大規模網站的增量截圖索引
多模態融合：結合文字和視覺訊號進行混合檢索
邊緣部署：最佳化模型以支援邊緣裝置運行

結論

PixelRAG 提出了一個大膽但直覺上正確的觀點：網頁本來就是給人類看的——為什麼要先「翻譯」成機器文字，再讓機器去讀？ 透過保留網頁原始的視覺形式，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 進行索引建構（速度快 3 倍以上），但支援 Apple Silicon（MPS）和 CPU 模式。查詢服務也可以在 CPU 上運行。

Q3：828 萬頁的維基百科索引有 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 個百分點，在視覺問答 EVQA 上提升 15.5 個百分點。

Q6：如何為 Claude Code 新增視覺網頁存取能力？

安裝 pixelshot（uv tool install pixelrag），然後安裝 Claude 外掛（claude plugin install pixelbrowse@pixelrag-plugins）。之後 Claude 就可以直接對任何網頁截圖並閱讀內容。

希望這篇深度解析對你有幫助！如果你正在建構涉及表格和圖表等結構化內容的 RAG 系統，PixelRAG 提供了一種全新的方法——讓機器像人類一樣「看見」網頁，而不是強迫網頁去適應機器的文字偏好。

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