← Back to Home

PixelRAG — Search the Web by How It Looks, Not Just What It Says

PixelRAG — Search the Web by How It Looks, Not Just What It Says

Retrieval-Augmented Generation (RAG) has become the default architecture for grounding LLMs in external data. But the pipeline has a fundamental blind spot: it treats the web as text. HTML is parsed, tables are linearized, charts are discarded, and the visual structure that makes information navigable for humans is lost.

PixelRAG, from UC Berkeley's Sky Computing Lab (SkyLab) and BAIR, takes a radically different approach. Instead of parsing web pages to text, it renders them as screenshots and performs retrieval directly in pixel space. The result is a RAG system that sees documents the way a human does — tables stay tabular, charts stay graphical, and layout stays meaningful.

GitHub: StarTrail-org/PixelRAG | Paper: arXiv:2606.28344 | Demo: pixelrag.ai

Why PixelRAG Matters

Traditional text-based RAG pipelines have a well-known failure mode: they lose information at the parsing step. Consider a Wikipedia table of population statistics — a text parser might render it as a flat list of comma-separated values, destroying the column relationships. A chart showing quarterly revenue becomes unreadable. Complex layouts with sidebars, callouts, and multi-column text are mangled.

PixelRAG's paper shows that on standard benchmarks like Natural Questions (NQ) and SimpleQA, pixel-native retrieval outperforms text-based RAG — even on text-centric tasks. On multimodal benchmarks (MMSearch, LiveVQA, MoNaCo), it improves accuracy by up to 18.1% over text baselines. This challenges the assumption that web retrieval must go through a text abstraction layer.

Architecture Overview

PixelRAG Architecture

The architecture follows a clean pipeline:

  1. Document Sources — Web pages, PDFs, images, or local files are fed into the renderer
  2. pixelshot Renderer — Uses Playwright's headless Chromium (via CDP) to capture each document as screenshot tiles. Each render runs in an isolated, throwaway Chrome profile
  3. Embedding Pipeline — Three stages: chunk (slice tiles into overlapping shards) → embed (Qwen3-VL-Embedding 2B, LoRA fine-tuned on screenshot data) → build-index (FAISS vector index, GPU-accelerated)
  4. FAISS Visual Search Index — Stores all screenshot embeddings. A pre-built index of 8.28 million Wikipedia articles (30M+ tiles) is available for immediate use
  5. Search API — FastAPI-based server accepting text queries and image-based (visual) queries. Returns the top-k matching screenshot tiles
  6. VLM Reader — A Vision Language Model reads the retrieved pixel tiles directly, without any intermediate text conversion. This is the key innovation: no parsing, no text extraction, just pixel-to-pixel reading
  7. Answer — The VLM produces the final answer, having seen the document exactly as it appears visually

A separate training pipeline (train/ directory, a standalone uv project) provides LoRA fine-tuning of the Qwen3-VL-Embedding model on curated screenshot data with contrastive learning.

Prerequisites

  • Python 3.10+
  • A machine with at least 8 GB RAM (16 GB+ recommended for indexing)
  • CUDA GPU recommended for embedding and indexing (macOS with Apple Silicon works via MPS)
  • Playwright (auto-installed with pixelrag)
  • For the pre-built Wikipedia index: ~220 GB free disk space (or skip and build a smaller custom index)

Installation

PixelRAG is modular — install only the stages you need:

# Core renderer (pixelshot CLI)
pip install pixelrag

# Full pipeline (chunk + embed + build-index)
pip install 'pixelrag[index]'

# Search server
pip install 'pixelrag[serve]'

# For PDF support
pip install 'pixelrag[pdf]'

Quick Start: Search the Live Wikipedia Index

The fastest way to try PixelRAG is to use the hosted API endpoint. No setup needed:

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}'

This searches a pre-built index of 8.28M Wikipedia articles. The response includes the top-k matching screenshot tiles as base64-encoded images.

Self-Hosted: Build Your Own Index

1. Render a Document to Screenshot Tiles

# Web page
pixelshot https://en.wikipedia.org/wiki/Python --output ./tiles

# PDF document
curl -sL -o paper.pdf https://arxiv.org/pdf/2503.09516
pixelshot paper.pdf --output ./tiles

# Multiple sources
pixelshot https://example.com my-document.pdf --output ./tiles

2. Create a Pipeline Configuration

# pixelrag.yaml
source:
  type: local
  path: ./my_docs

embed:
  model: Qwen/Qwen3-VL-Embedding-2B
  device: auto          # cuda on Linux, mps on macOS, cpu as fallback

output: ./my_index

3. Build and Serve the Index

# Build the full index (chunk → embed → build-index)
pixelrag index build

# Start the search API server
pixelrag serve --index-dir ./my_index --port 30001

4. Query Your Index

curl -X POST http://localhost:30001/search \
-H "Content-Type: application/json" \
-d '{"queries": [{"text": "What is this document about?"}], "n_docs": 3}'

Programmatic Usage

from pixelrag_render import render_url

# Single page to tiles
tiles = render_url("https://en.wikipedia.org/wiki/Python", "./tiles")

# tiles is a list of PIL Image objects — feed them directly to a VLM
from transformers import Qwen2VLForConditionalGeneration, Qwen2VLProcessor
processor = Qwen2VLProcessor.from_pretrained("Qwen/Qwen2-VL-7B-Instruct")
model = Qwen2VLForConditionalGeneration.from_pretrained(
    "Qwen/Qwen2-VL-7B-Instruct", device_map="auto"
)

Claude Code Integration

PixelRAG ships as a Claude Code plugin called pixelbrowse. Instead of fetching raw HTML, Claude screenshots a page with pixelshot and reads the image directly:

# Install the CLI globally
uv tool install pixelrag

# Install the Claude plugin
claude plugin marketplace add StarTrail-org/PixelRAG
claude plugin install pixelbrowse@pixelrag-plugins

# Use it
claude -p "screenshot https://news.ycombinator.com and summarize the top stories"

Comparison: PixelRAG vs Traditional RAG

  • Parsing: Traditional RAG parses HTML → linearized text. PixelRAG renders to screenshots — no parsing
  • Tables: Lost in text parsing. PixelRAG preserves tabular structure visually
  • Charts/Diagrams: Inaccessible to text RAG. PixelRAG reads them as images
  • Layout: Linearized and flattened. PixelRAG keeps the original layout
  • Token Efficiency: PixelRAG can use image compression to reduce VLM token costs by up to at lower resolutions while maintaining accuracy
  • Pre-built Index: 8.28M Wikipedia pages (30M+ tiles) — ready to use at api.pixelrag.ai

Verification Checklist

  • pixelshot successfully renders a web page to screenshot tiles
  • The hosted API endpoint returns results: curl -s https://api.pixelrag.ai/search -d '...'
  • Self-hosted index builds without errors: pixelrag index build
  • Search API responds on the configured port: curl localhost:30001/search
  • Claude Code pixelbrowse plugin renders and reads pages

Resources

← Retour à l'Accueil

PixelRAG — Cherchez sur le Web par son Apparence, Pas Seulement par son Texte

PixelRAG — Cherchez sur le Web par son Apparence, Pas Seulement par son Texte

Le RAG (Retrieval-Augmented Generation) est devenu l'architecture par défaut pour ancrer les LLM dans des données externes. Mais le pipeline a un angle mort fondamental : il traite le web comme du texte. Le HTML est analysé, les tableaux sont linéarisés, les graphiques sont ignorés, et la structure visuelle qui rend l'information navigable pour les humains est perdue.

PixelRAG, du Berkeley Sky Computing Lab (SkyLab) et BAIR, adopte une approche radicalement différente. Au lieu d'analyser les pages web en texte, il les rend sous forme de captures d'écran et effectue la recherche directement dans l'espace pixel. Le résultat est un système RAG qui voit les documents comme le ferait un humain — les tableaux restent tabulaires, les graphiques restent graphiques, et la mise en page reste significative.

GitHub : StarTrail-org/PixelRAG | Article : arXiv:2606.28344 | Démo : pixelrag.ai

Pourquoi PixelRAG est Important

Les pipelines RAG textuels traditionnels ont un mode de défaillance bien connu : ils perdent des informations à l'étape d'analyse. Prenons un tableau Wikipedia de statistiques démographiques — un analyseur texte pourrait le rendre comme une liste plate de valeurs séparées par des virgules, détruisant les relations entre colonnes. Un graphique montrant les revenus trimestriels devient illisible. Les mises en page complexes avec des barres latérales, des encadrés et du texte multi-colonnes sont déformées.

L'article de PixelRAG montre que sur les benchmarks standard (Natural Questions, SimpleQA), la recherche pixel-native surpasse le RAG textuel — même sur des tâches centrées sur le texte. Sur les benchmarks multimodaux (MMSearch, LiveVQA, MoNaCo), il améliore la précision jusqu'à 18,1 % par rapport aux bases textuelles. Cela remet en question l'hypothèse selon laquelle la recherche web doit passer par une couche d'abstraction textuelle.

Architecture

Architecture PixelRAG

L'architecture suit un pipeline clair :

  1. Sources de documents — Pages web, PDF, images ou fichiers locaux sont envoyés au moteur de rendu
  2. pixelshot Renderer — Utilise Chromium sans tête de Playwright (via CDP) pour capturer chaque document en tuiles de capture d'écran. Chaque rendu s'exécute dans un profil Chrome isolé et jetable
  3. Pipeline d'embedding — Trois étapes : chunk (découpe des tuiles en fragments) → embed (Qwen3-VL-Embedding 2B, fine-tuné LoRA sur des captures d'écran) → build-index (index vectoriel FAISS, accéléré GPU)
  4. Index de recherche visuelle FAISS — Stocke tous les embeddings de captures d'écran. Un index pré-construit de 8,28 millions d'articles Wikipedia (30M+ tuiles) est disponible pour une utilisation immédiate
  5. API de recherche — Serveur FastAPI acceptant les requêtes textuelles et visuelles (basées sur des images)
  6. Lecteur VLM — Un modèle de langage visuel lit les tuiles pixel récupérées directement, sans conversion textuelle intermédiaire
  7. Réponse — Le VLM produit la réponse finale, ayant vu le document exactement tel qu'il apparaît visuellement

Prérequis

  • Python 3.10+
  • Machine avec au moins 8 Go de RAM (16 Go+ recommandé pour l'indexation)
  • GPU CUDA recommandé pour l'embedding et l'indexation (macOS Apple Silicon fonctionne via MPS)
  • Playwright (installé automatiquement avec pixelrag)
  • Pour l'index Wikipedia pré-construit : ~220 Go d'espace disque libre

Installation

PixelRAG est modulaire — installez uniquement les étapes nécessaires :

# Moteur de rendu principal (CLI pixelshot)
pip install pixelrag

# Pipeline complet (chunk + embed + build-index)
pip install 'pixelrag[index]'

# Serveur de recherche
pip install 'pixelrag[serve]'

# Support PDF
pip install 'pixelrag[pdf]'

Démarrage Rapide : Recherche sur l'Index Wikipedia

Le moyen le plus rapide d'essayer PixelRAG est d'utiliser l'API hébergée. Aucune configuration nécessaire :

curl -X POST https://api.pixelrag.ai/search \
-H "Content-Type: application/json" \
-d '{"queries": [{"text": "Quelle est la capitale de la France ?"}], "n_docs": 5}'

Auto-Hébergement : Construisez Votre Propre Index

1. Rendre un Document en Tuiles

# Page web
pixelshot https://en.wikipedia.org/wiki/Python --output ./tuiles

# Document PDF
pixelshot mon-document.pdf --output ./tuiles

2. Créer la Configuration

# pixelrag.yaml
source:
  type: local
  path: ./mes_docs

embed:
  model: Qwen/Qwen3-VL-Embedding-2B
  device: auto

output: ./mon_index

3. Construire et Servir l'Index

pixelrag index build
pixelrag serve --index-dir ./mon_index --port 30001

4. Interroger l'Index

curl -X POST http://localhost:30001/search \
-H "Content-Type: application/json" \
-d '{"queries": [{"text": "De quoi parle ce document ?"}], "n_docs": 3}'

Intégration Claude Code

PixelRAG est livré avec un plugin Claude Code appelé pixelbrowse :

uv tool install pixelrag
claude plugin marketplace add StarTrail-org/PixelRAG
claude plugin install pixelbrowse@pixelrag-plugins

# Utilisation
claude -p "capture d'écran https://news.ycombinator.com et résume les actualités"

Comparaison : PixelRAG vs RAG Traditionnel

  • Analyse : Le RAG textuel analyse HTML → texte linéarisé. PixelRAG rend en captures d'écran — pas d'analyse
  • Tableaux : Perdus dans l'analyse texte. PixelRAG préserve la structure tabulaire visuellement
  • Graphiques/Diagrammes : Inaccessibles au RAG textuel. PixelRAG les lit comme des images
  • Mise en page : Linéarisée et aplatie. PixelRAG conserve la mise en page originale
  • Efficacité token : PixelRAG peut réduire les coûts de tokens VLM jusqu'à grâce à la compression d'image
  • Index pré-construit : 8,28M pages Wikipedia (30M+ tuiles)

Ressources