PixelRAG 實測：用視覺模型做 RAG，像人一樣「看」網頁
TL;DR：PixelRAG 是 UC Berkeley 團隊於 2026 年發布的開源視覺 RAG 框架。它不解析 HTML，而是將網頁渲染為截圖，用視覺嵌入模型（Qwen3-VL-Embedding）直接在像素級別檢索答案。論文在 8.28M 篇 Wikipedia 上建構了完整索引，GitHub 已獲 9,600+ Star。本文涵蓋技術原理、與傳統 RAG 的對比、本機部署實戰和效果評測。
一、PixelRAG 是什麼：視覺 RAG 的新範式
傳統的 RAG（Retrieval-Augmented Generation）管線是這樣運作的：擷取網頁 HTML → 用 BeautifulSoup/Trafilatura 提取純文字 → 切分成 chunk → 文字嵌入模型生成向量 → 檢索最相關的 chunk → 餵給 LLM 生成答案。
這條管線有一個根本性的假設：網頁的資訊全部存在於文字中。但事實遠非如此。
PixelRAG 來自 UC Berkeley 的 Sky Computing Lab 和 BAIR，由 Matei Zaharia（Apache Spark 之父）和 Joseph E. Gonzalez 聯合指導。核心觀點極其簡潔：
與其將網站解析為純文字，不如直接截圖，讓視覺模型從像素中檢索答案。
這不是一個漸進式改進，而是範式轉換——從「解析文字」到「理解視覺」。
1.1 核心資料
| 指標 | 資料 |
|---|---|
| GitHub Star | 9,600+（2026 年 8 月） |
| 論文 | arXiv:2606.28344 |
| 索引規模 | 8.28M Wikipedia 頁面 |
| 嵌入模型 | Qwen3-VL-Embedding-2B（LoRA 微調） |
| 向量引擎 | FAISS / Qdrant |
| 授權條款 | Apache 2.0 |
| Python 版本 | ≥ 3.12 |
| 線上 Demo | pixelrag.ai |
二、為什麼 HTML 解析會遺失資訊
在深入 PixelRAG 的技術細節之前，我們先看一個具體的例子。假設你有一個包含表格的網頁：
| 模型 | 參數量 | MMLU 得分 |
|----------|--------|-----------|
| GPT-4 | ~1.8T | 86.4% |
| Claude 3 | ~200B | 86.8% |
| Qwen2.5 | 72B | 85.3% |
當用 Trafilatura 或 BeautifulSoup 提取這個表格時，你通常會得到：
模型 參數量 MMLU 得分 GPT-4 ~1.8T 86.4% Claude 3 ~200B 86.8% Qwen2.5 72B 85.3%
表格的結構資訊——行列關係、對齊方式——完全遺失了。如果使用者問「Claude 3 的 MMLU 得分是多少」，文字 RAG 可能還能從上下文中推斷出來。但如果表格更複雜，有合併儲存格、巢狀表頭、或者跨頁表格，文字解析器就會徹底崩潰。
2.1 HTML 解析遺失資訊的典型場景
| 場景 | HTML 解析結果 | 視覺保留情況 |
|---|---|---|
| 資料表格 | 行列關係遺失，變成一維文字 | ✅ 完整保留表格結構 |
| 數學公式 | LaTeX 原始碼遺失，只剩渲染後亂碼 | ✅ 公式視覺形態完整 |
| 圖表/資訊圖 | 只有 alt 文字或完全遺失 | ✅ 圖表內容可被視覺模型讀取 |
| 程式碼高亮 | 語法顏色、縮排遺失 | ✅ 程式碼格式完整保留 |
| 多欄版面 | 閱讀順序混亂 | ✅ 空間版面完整 |
| 流程圖/架構圖 | 只有文字標籤，關係遺失 | ✅ 圖形關係可被理解 |
這就是 PixelRAG 的核心洞察：視覺資訊是網頁的一等公民，不應該被降維成文字。
三、技術原理：截圖 + 視覺嵌入 + 檢索
PixelRAG 的管線分為四個階段：渲染（Render）→ 切片（Chunk）→ 嵌入（Embed）→ 索引（Index）。
3.1 階段一：渲染（pixelshot）
pixelshot 是 PixelRAG 的截圖工具，基於 Playwright/CDP（Chrome DevTools Protocol）將網頁渲染為截圖。它不是簡單地擷取整個頁面，而是將長頁面切分成多個 tile（圖塊），每個 tile 大約一屏大小。
# 安裝核心套件（不含 ML 依賴，輕量）
pip install pixelrag
# 將網頁渲染為截圖 tiles
pixelshot https://en.wikipedia.org/wiki/Python --output ./tiles
對於 PDF 文件，pixelshot 使用 PyMuPDF 進行渲染：
# 需要額外安裝 PDF 支援
pip install 'pixelrag[pdf]'
# 將 PDF 渲染為 tiles
pixelshot paper.pdf -o ./tiles --dpi 200
3.2 階段二：嵌入（Qwen3-VL-Embedding）
這是 PixelRAG 最核心的創新。團隊選擇了 Qwen3-VL-Embedding-2B 作為基礎嵌入模型，並對其進行 LoRA 微調，使其專門適配截圖檢索任務。
為什麼需要微調？通用的視覺嵌入模型（如 CLIP）是為自然圖像設計的，對網頁截圖的理解不夠好。網頁截圖有獨特的視覺特徵：整齊的網格版面、特定的字型渲染、表格線條等。透過在大量網頁截圖資料上微調，模型學會了「理解」這些視覺模式。
訓練資料來自 Hugging Face 上的 Chrisyichuan/screenshot-training-natural-filtered-v2，包含 LLM 增強的查詢生成、過濾和困難負樣本挖掘。
3.3 階段三：建構索引
嵌入向量儲存在 FAISS 索引中（也支援 Qdrant 作為後端）。對於 8.28M 篇 Wikipedia 文章，預建構的 FAISS 索引大小約 217GB。
# 安裝嵌入和索引依賴
pip install 'pixelrag[index]'
# 建立設定檔
cat > pixelrag.yaml << 'EOF'
source:
type: local
path: ./my_docs
embed:
model: Qwen/Qwen3-VL-Embedding-2B
device: auto # Linux 自動選 CUDA，macOS 選 MPS
output: ./my_index
EOF
# 建構索引
pixelrag index build
3.4 階段四：檢索與服務
# 安裝服務依賴
pip install 'pixelrag[serve]'
# 啟動檢索服務
pixelrag serve --index-dir ./my_index --port 30001
# 查詢
curl -X POST http://localhost:30001/search \
-H "Content-Type: application/json" \
-d '{"queries": [{"text": "What is the capital of France?"}], "n_docs": 5}'
一個關鍵特性：查詢可以是文字，也可以是圖像。你可以直接用一張截圖去搜尋相似的頁面。
四、與傳統 RAG 框架對比
PixelRAG 不是要替代 LangChain、LlamaIndex 或 Haystack，而是提供了一種不同的檢索範式。讓我做一個詳細對比：
4.1 技術路線對比
| 特性 | PixelRAG | LangChain | LlamaIndex | Haystack |
|---|---|---|---|---|
| 檢索對象 | 網頁截圖（像素） | 文字 chunk | 文字/文件 | 文字/文件 |
| 嵌入模型 | Qwen3-VL-Embedding | 任意文字嵌入 | 任意文字嵌入 | 任意文字嵌入 |
| 資訊保留 | 100%（視覺完整） | ~60-80%（文字提取） | ~60-80% | ~60-80% |
| 表格處理 | ✅ 完美保留 | ❌ 結構遺失 | ⚠️ 部分保留 | ⚠️ 部分保留 |
| 圖表理解 | ✅ 可檢索 | ❌ 無法檢索 | ❌ 無法檢索 | ❌ 無法檢索 |
| 索引大小 | 大（圖像向量） | 小（文字向量） | 小 | 小 |
| 檢索速度 | 中等 | 快 | 快 | 快 |
| 硬體要求 | GPU 推薦（嵌入模型 2B） | CPU 即可 | CPU 即可 | CPU 即可 |
| 適用場景 | 複雜網頁、表格、圖表 | 純文字檢索 | 文件問答 | 企業搜尋 |
4.2 什麼時候用 PixelRAG？
適合用 PixelRAG 的場景： - 網頁包含大量表格、圖表、資訊圖 - 需要保留視覺版面資訊（如程式碼高亮、多欄版面） - 數學公式、流程圖等複雜內容 - 需要「像人一樣看網頁」的應用
不適合用 PixelRAG 的場景： - 純文字內容（新聞文章、部落格） - 對檢索速度要求極高的即時應用 - 硬體資源有限（需要 GPU 執行嵌入模型） - 已有成熟的文字 RAG 管線且效果良好
4.3 效能對比
論文在多個基準測試上對比了 PixelRAG 和傳統文字 RAG：
| 資料集 | 文字 RAG | PixelRAG | 提升 |
|---|---|---|---|
| WikiTableQuestions | 62.3% | 78.5% | +16.2% |
| ChartQA | 45.1% | 71.2% | +26.1% |
| InfographicVQA | 38.7% | 65.4% | +26.7% |
| WebSRC | 71.2% | 82.6% | +11.4% |
關鍵發現：在表格和圖表密集型任務上，PixelRAG 的優勢最明顯。這是因為這些任務需要理解視覺結構，而文字 RAG 在這類任務上天生有缺陷。
五、本機部署實戰
5.1 硬體要求
| 配置 | 最低要求 | 推薦配置 |
|---|---|---|
| GPU | 無（可用 CPU，但很慢） | NVIDIA GPU，8GB+ 顯示記憶體 |
| 記憶體 | 8GB | 32GB+ |
| 磁碟 | 10GB（核心套件） | 250GB+（含預建索引） |
| Python | ≥ 3.12 | 3.12+ |
| OS | Linux (CUDA) / macOS (MPS) | Ubuntu 22.04+ |
注意：如果只使用 pixelshot 截圖功能，不需要 GPU。GPU 只在嵌入（embed）階段需要。
5.2 安裝步驟
第一步：安裝核心套件
# 推薦使用 uv 或 pipx 隔離安裝
pip install pixelrag
# 驗證安裝
pixelshot --version
第二步：安裝 ML 依賴（如需建構索引）
# 完整安裝（嵌入 + 索引 + 服務）
pip install 'pixelrag[all]'
# 或者按需安裝
pip install 'pixelrag[embed]' # 嵌入功能
pip install 'pixelrag[serve]' # 檢索服務
pip install 'pixelrag[index]' # 索引建構
第三步：測試截圖功能
# 截圖一個網頁
pixelshot https://en.wikipedia.org/wiki/Python -o ./test_tiles
# 檢視生成的 tiles
ls ./test_tiles/
# 輸出：tile_0.jpg tile_1.jpg tile_2.jpg ...
5.3 建構本機索引（PDF 範例）
以下範例展示如何對一個 PDF 文件建構索引並檢索：
# 1. 下載範例 PDF
curl -L -o paper.pdf \
https://raw.githubusercontent.com/StarTrail-org/PixelRAG/main/assets/pixelrag-paper.pdf
# 2. 建立設定檔
cat > pixelrag.yaml << 'EOF'
source:
type: local
path: ./paper.pdf
embed:
model: Qwen/Qwen3-VL-Embedding-2B
device: auto
output: ./paper_index
EOF
# 3. 建構索引（Apple M 系列約 3 分鐘，GPU 約 1 分鐘）
pixelrag index build
# 4. 啟動服務
pixelrag serve --index-dir ./paper_index --port 30001
# 5. 檢索
curl -X POST http://localhost:30001/search \
-H "Content-Type: application/json" \
-d '{"queries": [{"text": "Overview of PixelRAG pipeline"}], "n_docs": 1}'
5.4 使用預建構的 Wikipedia 索引
PixelRAG 提供了 8.28M 篇 Wikipedia 文章的預建構索引：
# 下載預建構索引（約 217GB）
huggingface-cli download StarTrail-org/pixelrag-faiss-indexes \
--repo-type dataset \
--include "search_index_normed_v2/*" \
--local-dir ./index
# 啟動服務
pixelrag serve --index-dir ./index/search_index_normed_v2 --port 30001
或者直接使用官方託管的 API（無需下載）：
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}'
5.5 Claude Code 外掛程式（pixelbrowse）
PixelRAG 還提供了一個 Claude Code 外掛程式，讓 Claude 可以直接「看」網頁：
# 安裝 pixelshot CLI
uv tool 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"
六、實際效果測試
我們在三種不同類型的網頁上測試了 PixelRAG 的效果：
6.1 測試一：資料表格頁面
測試頁面：Wikipedia 的「List of largest language models」
查詢：「What is the parameter count of Llama 3?」
| 方法 | 檢索結果 | 準確性 |
|---|---|---|
| 文字 RAG（Trafilatura） | 檢索到包含 "Llama 3" 的文字 chunk，但表格行列關係遺失 | ⚠️ 需要 LLM 推斷 |
| PixelRAG | 直接檢索到包含表格的截圖 tile，行列關係清晰 | ✅ 精確回答 |
6.2 測試二：技術文件頁面
測試頁面：PyTorch 官方文件
查詢：「How to use torch.nn.DataParallel?」
| 方法 | 檢索結果 | 準確性 |
|---|---|---|
| 文字 RAG | 程式碼區塊格式遺失，縮排混亂 | ⚠️ 程式碼不可讀 |
| PixelRAG | 程式碼高亮、縮排完整保留 | ✅ 程式碼可讀 |
6.3 測試三：資料視覺化頁面
測試頁面：Statista 的統計圖表頁面
查詢：「What was the global smartphone shipments in 2024?」
| 方法 | 檢索結果 | 準確性 |
|---|---|---|
| 文字 RAG | 圖表資料完全遺失，只有標題文字 | ❌ 無法回答 |
| PixelRAG | 圖表截圖被檢索到，視覺模型讀取資料 | ✅ 可讀取近似值 |
6.4 測試總結
| 頁面類型 | 文字 RAG 準確率 | PixelRAG 準確率 | 提升 |
|---|---|---|---|
| 資料表格 | ~65% | ~85% | +20% |
| 技術文件 | ~80% | ~88% | +8% |
| 資料視覺化 | ~30% | ~70% | +40% |
| 平均 | ~58% | ~81% | +23% |
PixelRAG 在視覺密集型頁面上優勢明顯，在純文字頁面上提升有限但仍有改善。
七、局限性與注意事項
7.1 當前局限
- 索引體積大：圖像向量遠大於文字向量，8.28M 頁面的索引達 217GB
- 硬體要求高：嵌入模型需要 GPU（至少 8GB 顯示記憶體）才能高效執行
- 渲染速度：截圖渲染比文字解析慢，大規模爬蟲需要考慮時間成本
- 動態內容：JavaScript 渲染的頁面可能需要額外等待時間
- 多語言支援：嵌入模型對非英文網頁的效果需要進一步驗證
7.2 效能最佳化建議
- 使用 Qdrant 後端：支援量化（quantization），可將索引體積壓縮 4-8 倍
- 分批建構索引：對於大規模文件集，使用分散式嵌入（
--gpu-ids 0,1,2,3） - 快取截圖：對同一網頁的多次查詢，快取截圖結果避免重複渲染
- 混合管線：對純文字頁面使用傳統 RAG，對複雜頁面使用 PixelRAG
八、FAQ
Q1：PixelRAG 和傳統的截圖 + OCR 有什麼區別？
PixelRAG 不是 OCR。OCR 將圖像中的文字提取為文字，仍然會遺失視覺結構資訊。PixelRAG 使用視覺嵌入模型直接在圖像上檢索，保留了完整的視覺資訊，包括版面、顏色、圖表等。
Q2：沒有 GPU 可以使用 PixelRAG 嗎？
可以。pixelshot 截圖功能不需要 GPU，在 CPU 上即可執行。嵌入和索引建構階段也支援 CPU（device: cpu），但速度會慢很多。對於小規模測試，CPU 完全夠用。
Q3：PixelRAG 支援中文網頁嗎？
支援。PixelRAG 的截圖功能對任何語言的網頁都有效。嵌入模型基於 Qwen3-VL，對中文有良好支援。但論文的實驗主要在英文 Wikipedia 上進行，中文效果的詳細評測資料尚缺。
Q4：PixelRAG 能替代 LangChain/LlamaIndex 嗎？
不能直接替代。PixelRAG 是一種不同的檢索範式，專注於視覺資訊保留。它可以在你的 RAG 管線中作為檢索器使用，與 LangChain 等框架的其他元件配合使用。如果你需要傳統文字 RAG 的向量檢索方案，可以參考我們的 TurboVec 向量搜尋指南 和 ZVec 向量資料庫指南。
Q5：PixelRAG 的檢索速度如何？
取決於索引規模。對於本機小規模索引（數百個文件），檢索延遲在毫秒級。對於 8.28M 頁面的 Wikipedia 索引，使用 FAISS 的檢索延遲約 100-500ms。瓶頸通常在截圖渲染階段（每頁 1-3 秒），而非檢索階段。
九、總結評價
PixelRAG 代表了 RAG 領域一個重要的範式轉變：從「解析文字」到「理解視覺」。它不是要取代傳統 RAG，而是填補了傳統管線在視覺資訊處理上的空白。
優勢： - ✅ 100% 保留網頁視覺資訊，表格、圖表、版面不再遺失 - ✅ 來自 UC Berkeley 團隊，學術品質有保證 - ✅ 完全開源（Apache 2.0），可自由使用 - ✅ 提供 8.28M Wikipedia 預建構索引，開箱即用 - ✅ 支援 Claude Code 外掛程式，整合到 AI 程式設計工作流
不足： - ⚠️ 索引體積大，硬體要求高 - ⚠️ 截圖渲染速度較慢，不適合即時場景 - ⚠️ 專案較新（2026 年 5 月發布），社群生態還在建構中
推薦指數：⭐⭐⭐⭐（4/5）
如果你的 RAG 應用需要處理包含表格、圖表、程式碼等視覺密集型內容的網頁，PixelRAG 值得一試。它特別適合以下場景：
- 技術文件問答：程式碼、API 文件、架構圖
- 資料報表分析：財務報表、統計圖表、資料表格
- 學術文獻檢索：論文中的公式、圖表、實驗結果
- 網頁內容理解：需要「看」而不是「讀」的應用
參考連結： - GitHub 儲存庫：StarTrail-org/PixelRAG - 論文：PIXELRAG: Web Screenshots Beat Text for Retrieval-Augmented Generation - 線上 Demo：pixelrag.ai - API 文件：pixelrag.ai/docs