Einleitung: Der fatale Fehler herkömmlicher RAG-Systeme
Wenn Sie eine Unternehmens-Wissensdatenbank, ein KI-Suchsystem oder eine Dokument-Q&A-Anwendung entwickeln, sind Ihnen RAG-Systeme (Retrieval-Augmented Generation) sicherlich begegnet. Jeder kennt den herkömmlichen RAG-Workflow: Webseiten crawlen → HTML parsen → Text in Abschnitte zerlegen → vektorisieren → abrufen → an LLM übergeben.
Das Problem liegt im zweiten Schritt.
Stellen Sie sich eine Wikipedia-Seite mit einer Aktientabelle vor:
| Jahr | Preis |
|---|---|
| 1990 | 12.4 |
| 1991 | 18.7 |
| 1995 | 42.3 |
Menschen erkennen sofort: „Der höchste Preis vor 1995 war 18,7.” Aber nachdem ein HTML-Parser die Tabelle in reinen Text umwandelt, verschwindet die Spaltenausrichtung, und die Tabelle wird zu:
Year Price 1990 12.4 1991 18.7 1995 42.3Angesichts dieser Textzeichenfolge ist es für ein LLM schwer, die Frage „Was war der höchste Preis vor 1995?” präzise zu beantworten. Noch schlimmer: Diagramme, Infografiken, mehrspaltige Layouts, PDFs mit gemischtem Text und Bildern – diese Informationen, die beim HTML-Parsing direkt verloren gehen, sind genau die Inhaltstypen, nach denen Benutzer am häufigsten fragen.
Das ist die Motivation hinter der Entwicklung von PixelRAG an der UC Berkeley: Da Webseiten inhärent visuell sind, warum nicht Screenshots für die Abfrage verwenden?
PixelRAG-Kernarchitektur: Von Pixeln zu Antworten
Der Titel der PixelRAG-Publikation ist klar formuliert – „Web Screenshots Beat Text for Retrieval-Augmented Generation.” Sie stammt aus drei führenden Berkeley-Laboren: Sky Computing Lab, BAIR und Berkeley NLP, geleitet von Yichuan Wang, Zhifei Li und anderen, mit Matei Zaharia (Spark-Erfinder), Joseph Gonzalez und Sewon Min als Mitberatern.
Zwei Kernkomponenten
1. Der Renderer (pixelshot)
pixelshot ist die „Augen” von PixelRAG. Es verwendet Playwright + Chrome DevTools Protocol (CDP), um jede Webseite oder jedes PDF in Screenshot-Kacheln zu rendern. Jede Kachel ist ein bildschirmgroßes Bild der Seite in Bildschirmauflösung.
# Render Wikipedia Python page to screenshot tiles
pixelshot https://en.wikipedia.org/wiki/Python --output ./tilesDie wichtigsten Vorteile:
- JavaScript-gerenderte Inhalte – SPAs, dynamisch geladene Daten, alles sichtbar
- Tabellen, Diagramme, Infografiken – vollständige visuelle Struktur erhalten
- Mehrspaltige Layouts – räumliche Beziehungen intakt
- PDF-Dokumente – seitenweises Rendering über poppler
2. Visuelles Embedding-Modell
Screenshot-Kacheln werden mit dem Modell Qwen3-VL-Embedding-2B vektorisiert. Dieses Modell wurde mit LoRA auf Screenshot-Daten feinabgestimmt (sowohl Trainingsdatensatz als auch Adapter sind Open Source), sodass Screenshots im Vektorraum nach visuellem Inhalt abgerufen werden können.
Bei der Abfrage „Was ist die Hauptstadt von Frankreich?” gleicht das System keine Text-Keywords ab – es findet die Screenshot-Kachel, die die Antwort enthält, mit der Infobox, den Tabellen und dem Kontext, den Menschen direkt lesen können.
Arbeitsablauf
Document → pixelshot renders screenshots → Qwen3-VL embedding → FAISS index
↓
Query → Qwen3-VL embed query → FAISS retrieval → return screenshot tiles → VLM reads image for answerHinweis: Die gesamte Pipeline hat keine textuelle Zwischenrepräsentation. Screenshots gehen hinein, Screenshots kommen heraus, und VLMs (wie Claude, GPT-4o, Qwen-VL) lesen die Antworten direkt aus den Bildern.
Vergleich mit gängigen RAG-Frameworks
PixelRAG versucht nicht, Firecrawl oder Jina Reader zu ersetzen – es löst ein Problem auf einer anderen Ebene. Lassen Sie uns die Zusammenhänge klären:
| Dimension | Firecrawl | Jina Reader | RAGFlow | PixelRAG |
|---|---|---|---|---|
| Kernfunktion | Web-Crawling + strukturierte Extraktion | Extraktion von Inhalten einzelner URLs | End-to-End-RAG-Engine | Visuelle Abfrage + Screenshot-Lesung |
| Datenverarbeitung | HTML → Markdown/JSON | HTML → Text | Multi-Format-Parsing | HTML → Screenshot-Kacheln |
| Tabellenbehandlung | Teilweise erhalten | Spaltenausrichtung verloren | Parserabhängig | Vollständig erhalten (als Bild) |
| Diagrammbehandlung | Verloren | Verloren | Teilweises OCR | Vollständig erhalten |
| Visuelles Layout | Verloren | Verloren | Teilweise | Vollständig erhalten |
| Einsatzgebiete | Großangelegtes Crawling | Schnelle Inhaltsextraktion | Unternehmens-Dokument-Q&A | Abfrage strukturierter Inhalte |
| Open Source | Ja | Ja | Ja | Ja (Apache 2.0) |
Wichtige Erkenntnis: Firecrawl und Jina Reader sind Werkzeuge der Datenerfassungsschicht; PixelRAG ist eine Innovation auf der Abfragemethodenschicht. Sie können sich ergänzen – verwenden Sie Firecrawl für großangelegtes Web-Crawling und PixelRAG für die visuelle Abfrage strukturierter Inhalte.
Leistungsbenchmarks
Die experimentellen Daten in der Publikation sind beeindruckend:
| Benchmark | Text-RAG (Bester Baseline) | PixelRAG | Verbesserung |
|---|---|---|---|
| SimpleQA | 71.6% | 78.8% | +7.2% |
| NQ-Tables | 42.5% | 48.8% | +6.3% |
| EVQA | 29.6% | 45.1% | +15.5% |
| MMSearch | — | Deutliche Verbesserung | — |
| LiveVQA | — | Deutliche Verbesserung | — |
| MoNaCo (Agent-Benchmark) | Baseline | 3x weniger Token | Effizienzgewinn |
Die größten Gewinne liegen bei Tabellen und strukturierten Inhalten – EVQA (visuelle Q&A) verbesserte sich um 15,5 Prozentpunkte, genau weil herkömmliches Text-RAG Diagramminformationen überhaupt nicht verarbeiten kann.
Installation und Schnellstartanleitung
Minimale Installation
pip install pixelragDas gibt Ihnen pixelshot (den Renderer) und die Kernbibliothek. Fügen Sie Funktionsmodule nach Bedarf hinzu:
pip install 'pixelrag[embed]' # chunk, embed, build-index commands
pip install 'pixelrag[index]' # Full pipeline orchestration
pip install 'pixelrag[serve]' # FastAPI search server
pip install 'pixelrag[pdf]' # PDF rendering support (requires poppler)Erfahrung ohne Konfiguration: Gehostete Wikipedia-API
Der schnellste Weg zum Ausprobieren – das Berkeley-Team hostet einen vorgefertigten Index von 8,28 Millionen Wikipedia-Seiten:
# No installation needed, query directly
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}'Die Ergebnisse enthalten passende Screenshot-Kacheln (base64-kodierte Bilder) und Dokumentmetadaten. Sie können es direkt in Ihrem Browser ausprobieren: pixelrag.ai.
Aufbau eines lokalen Index
Erstellen Sie einen Index für Ihre eigenen Dokumente:
1. Konfigurationsdatei pixelrag.yaml erstellen:
source:
type: local
path: ./my_docs
embed:
model: Qwen/Qwen3-VL-Embedding-2B
device: auto # Automatically selects CUDA on Linux, MPS on macOS
output: ./my_index2. Index erstellen und Dienst starten:
# Build index (~3 minutes on Apple M-series, ~1 minute on GPU)
pixelrag index build
# Start search service
pixelrag serve --index-dir ./my_index --port 300013. Abfrage:
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}'Praxis: Indexierung eines PDF
pip install 'pixelrag[index,pdf]'
# Download sample PDF (the PixelRAG paper itself)
curl -L -o paper.pdf https://raw.githubusercontent.com/StarTrail-org/PixelRAG/main/assets/pixelrag-paper.pdf
# Create configuration
cat > pixelrag.yaml << 'EOF'
source:
type: local
path: ./paper.pdf
embed:
model: Qwen/Qwen3-VL-Embedding-2B
device: auto
output: ./paper_index
EOF
# Build → Serve → Query
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 „Augen” geben
PixelRAG bietet auch ein Claude-Code-Plugin pixelbrowse, mit dem Claude Webseiten direkt „sehen” kann:
# Install pixelshot CLI
uv tool install pixelrag # or pipx install pixelrag
# Install Claude plugin
claude plugin marketplace add StarTrail-org/PixelRAG
claude plugin install pixelbrowse@pixelrag-pluginsDann:
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 macht einen Screenshot der Seite und liest den Inhalt im Bild wie ein Mensch – Tabellen, Diagramme und Layouts sind auf einen Blick sichtbar.
Reale Anwendungsfälle: Abfrage komplexer Tabellen und Diagramme
Fall 1: Unternehmens-Finanzdatentabellen
Angenommen, Sie haben eine HTML-Tabelle mit mehrjährigen Finanzdaten. Nach dem Parsing durch herkömmliches RAG geht die Spaltenausrichtung verloren, was es LLMs schwer macht, Fragen wie „Wie hoch war die jährliche Umsatzwachstumsrate für Q3 2023?” zu beantworten, die bereichsübergreifende Berechnungen erfordern.
Die Screenshots von PixelRAG bewahren die vollständige visuelle Struktur der Tabelle. Das VLM kann die Zelle „2023 Q3” wie ein Mensch lokalisieren, den entsprechenden Wert horizontal lesen und dann mit „2022 Q3” vergleichen und berechnen.
Fall 2: Experimentelle Vergleichsdiagramme in wissenschaftlichen Arbeiten
Balken- und Liniendiagramme in Publikationen gehen bei der Textanalyse vollständig verloren. PixelRAG rendert Diagramme als Screenshots, sodass VLMs Trends direkt aus den Bildern ablesen und Werte vergleichen können.
Fall 3: Produktvergleichsseiten im E-Commerce
Mehrspaltige Produktspezifikations-Vergleichstabellen führen bei herkömmlichen Parsern oft dazu, dass Parameter verschiedener Produkte vermischt werden. Die Screenshots von PixelRAG bewahren das räumliche Layout, sodass VLMs Spezifikationen verschiedener Produkte genau unterscheiden können.
Anwendungsfallanalyse
Dringend empfohlene Szenarien
| Szenario | Grund |
|---|---|
| Unternehmens-Wissensdatenbank | Interne Dokumente voller Tabellen, Flussdiagramme, Genehmigungsformulare |
| Akademische Literaturrecherche | Experimentelle Daten, Diagramme in Arbeiten sind Kerninformationen |
| E-Commerce-Daten | Produktspezifikationstabellen, Preisvergleiche, Nutzerbewertungs-Screenshots |
| Regierungs-/Rechtsdokumente | Tabellen, Anhänge, Siegel in Verordnungen |
| Finanzberichtsanalyse | Finanzabschlüsse, Datenvisualisierungsdiagramme |
Weniger geeignete Szenarien
| Szenario | Grund |
|---|---|
| Reine Text-Blogbeiträge | Text-RAG ist bereits gut genug; visuelles RAG fügt unnötigen Overhead hinzu |
| Code-Dokumentation | Codeblöcke sind in Textdarstellung präziser |
| Großangelegtes Echtzeit-Crawling | Screenshot-Rendering ist viel langsamer als Textextraktion |
Einschränkungen und zukünftige Richtungen
Aktuelle Einschränkungen
1. Speicherkosten
Der vorgefertigte Index von 8,28 Millionen Wikipedia-Seiten umfasst etwa 217 GB. Für Unternehmensanwendungen mit großen Dokumentmengen kosten Screenshot-Indizes deutlich mehr als Textindizes. Das Projekt berichtet jedoch, dass durch Bildkomprimierung 97 % Speicherersparnis bei gleichbleibender Abfragegenauigkeit erreicht wurden.
2. Rendering-Latenz
pixelshot muss einen Headless-Browser starten, um jede Seite zu rendern, was langsamer ist als direktes HTML-Parsing. Für Szenarien, die die Echtzeitverarbeitung Tausender URLs erfordern, ist dies ein Engpass.
3. GPU-Abhängigkeit
Das Embedding-Modell Qwen3-VL-Embedding-2B läuft am besten auf GPUs. Obwohl es CPU und Apple Silicon (MPS) unterstützt, erfordert der großangelegte Indexaufbau dennoch GPU-Ressourcen.
4. Abfragekosten
Bild-Tokens sind teurer als Text-Tokens. Obwohl PixelRAG durch präzise Abfrage 3-fache Token-Einsparungen erzielt (weil zurückgegebene Screenshots fokussierter sind als mehrere Textabschnitte), sind die VLM-Inferenzkosten pro Abfrage immer noch höher als bei reinen Textlösungen.
Zukünftige Richtungen
- Effizientere visuelle Komprimierung: Speicher- und Übertragungskosten weiter senken
- Streaming-Rendering: Inkrementelle Screenshot-Indexierung für großangelegte Webseiten unterstützen
- Multimodale Fusion: Text- und visuelle Signale für hybride Abfrage kombinieren
- Edge-Deployment: Modelle optimieren, um den Betrieb auf Edge-Geräten zu unterstützen
Fazit
PixelRAG vertritt einen mutigen, aber intuitiv richtigen Standpunkt: Webseiten sind dafür gedacht, von Menschen gesehen zu werden – warum sie erst in maschinellen Text „übersetzen” und dann von Maschinen lesen lassen? Durch die Bewahrung der ursprünglichen visuellen Form von Webseiten erreicht PixelRAG eine Abfragegenauigkeit, die herkömmliches Text-RAG in Szenarien mit Tabellen, Diagrammen und komplexen Layouts nicht erreichen kann.
Es versucht nicht, Firecrawl oder Jina Reader zu ersetzen, sondern füllt die Lücke der „visuellen Abfrage” im RAG-Ökosystem. Wenn Ihre Wissensdatenbank viele strukturierte Inhalte (Tabellen, Diagramme, Formulare) enthält, verdient PixelRAG eine ernsthafte Evaluierung.
Projekt-Links:
- GitHub: StarTrail-org/PixelRAG
- Live-Demo: pixelrag.ai
- Publikation: arXiv:2606.28344
- Lizenz: Apache 2.0
Häufig gestellte Fragen (FAQ)
F1: Was ist die Beziehung zwischen PixelRAG und Firecrawl/Jina Reader? Können sie zusammen verwendet werden?
PixelRAG ist eine Innovation in der Abfragemethode (Screenshots statt Text); Firecrawl/Jina Reader sind Datenerfassungswerkzeuge. Sie können sich ergänzen – verwenden Sie Firecrawl für großangelegtes Web-Crawling und PixelRAG für die visuelle Abfrage strukturierter Inhalte.
F2: Benötigt PixelRAG eine GPU?
Eine GPU wird für den Indexaufbau empfohlen (3x+ schneller), aber es unterstützt Apple Silicon (MPS) und CPU-Modi. Der Abfragedienst kann auch auf CPU laufen.
F3: Der 8,28 Millionen Seiten umfassende Wikipedia-Index ist 217 GB groß – was tun, wenn die Speicherkosten zu hoch sind?
PixelRAG berichtet, dass durch Bildkomprimierung 97 % Speicherersparnis erreicht wurden. Es unterstützt auch Qdrant-Backend-Quantisierungskonfiguration (wie int8-Quantisierung), um die Speichernutzung weiter zu reduzieren.
F4: Welche Dokumentformate unterstützt PixelRAG?
Derzeit unterstützt werden Webseiten (HTML/JS-Rendering), PDFs (poppler-Installation erforderlich) und lokale Bilder. URLs und lokale Dateien können gemischt verarbeitet werden.
F5: Auf welchem Benchmark basiert die 18 %ige Genauigkeitsverbesserung?
Auf dem SimpleQA-Benchmark erreicht PixelRAG eine Genauigkeit von 78,8 %, was 7,2 Prozentpunkte über dem stärksten Text-RAG-Baseline (71,6 %) liegt. Auf dem tabellenintensiven NQ-Tables verbessert es sich um 6,3 Prozentpunkte und beim visuellen Q&A EVQA um 15,5 Prozentpunkte.
F6: Wie fügt man Claude Code visuelle Webzugriffsfähigkeit hinzu?
Installieren Sie pixelshot (uv tool install pixelrag), dann installieren Sie das Claude-Plugin (claude plugin install pixelbrowse@pixelrag-plugins). Danach kann Claude jede Webseite direkt per Screenshot aufnehmen und lesen.
Ich hoffe, dieser tiefe Einblick ist hilfreich! Wenn Sie ein RAG-System entwickeln, das strukturierte Inhalte wie Tabellen und Diagramme umfasst, bietet PixelRAG einen völlig neuen Ansatz – Maschinen Webseiten wie Menschen „sehen” zu lassen, anstatt Webseiten zu zwingen, sich an die Textpräferenzen von Maschinen anzupassen.
