Chat Chatbot RAG

Viele „KI-Chats“ wirken beeindruckend – solange sie nur allgemeines Wissen wiedergeben. In der Praxis (Audit, Compliance, Fachabteilungen) zählt aber etwas anderes: Antworten müssen aus konkreten Dokumenten stammen und nachvollziehbar belegt sein. Genau dafür eignet sich RAG (Retrieval-Augmented Generation): Erst werden passende Textstellen aus deinen Unterlagen gefunden, dann wird darauf basierend geantwortet.

In diesem Beitrag zeige ich ein Verfahren, das vollständig im Browser online läuft, aber trotzdem lokale Ordner einliest und einen Such-/Chat-Workflow ermöglicht – inklusive inkrementellem Update und sauberer Quellenreferenz:

  • PDF: Treffer mit Seitenzahl

  • Nicht-PDF (TXT/MD/CSV/JSON/XML/HTML/DOCX): Treffer mit Zeilen n–m

Hinweis: Das Beispiel nutzt im Kern ein Retrieval (BM25). Eine echte LLM-Antwortgenerierung kannst du optional später ergänzen (z. B. via API). Der zentrale Mehrwert hier ist der belastbare Retrieval-Layer inkl. Quellen.

Was ist das Verfahren?

1) Datenaufnahme (Ingestion)

  • Du lädst eine Dummy-Quelle (z. B. Wikipedia-Summary) per Button, um das System sofort zu testen.

  • Optional wählst du einen lokalen Ordner aus:

    • Chromium/Edge: showDirectoryPicker() (HTTPS oder localhost)

    • Firefox: Fallback per webkitdirectory

2) Parsing / Extraktion

  • PDF wird mit PDF.js seitenweise extrahiert, damit Treffer später korrekt als „Seite X“ referenziert werden können.

  • DOCX wird im Browser via Mammoth.js in Text umgewandelt.

  • Weitere Textformate werden direkt gelesen (CSV/JSON/XML/HTML werden dabei in ein gut chunkbares Textformat umgeformt).

3) Cleaning (Qualitätssicherung)

  • Whitespace-Normalisierung, aber Zeilen werden bewusst erhalten, damit wir später Zeilenbereiche als Quellenangabe ausweisen können.

  • Bei CSV: Erkennung des Trennzeichens und zeilenorientierte Darstellung.

  • Bei HTML: Entfernen von Skript/Style/Navigation und Extraktion des sichtbaren Textes.

4) Chunking
Dokumente werden in Chunks zerlegt, die „retrieval-freundlich“ sind:

  • wortsaubere Chunk-Grenzen (kein Start mitten im Wort)

  • Overlap (Überlappung) für Kontextstabilität

  • Zu jedem Chunk werden Metadaten berechnet:

    • PDF: page

    • Nicht-PDF: line_from / line_to (Zeilen n–m)

5) Index / Retrieval
Im Worker läuft ein BM25-Index:

  • Tokenisierung + Stopword-Filter (DE/EN)

  • BM25-Scoring

  • Ergebnisliste (Top-K) inkl. Kontext-Snippet um den Treffer herum (nicht einfach Chunk-Start)

6) Inkrementelles Update
Beim erneuten Ordner-Scan werden Dateien über Signatur erkannt (Pfad + Größe + lastModified):

  • unveränderte Dateien werden nicht neu verarbeitet

  • geänderte Dateien: alte Chunks werden gelöscht, neue erzeugt

  • gelöschte Dateien: Chunks werden entfernt

7) Persistenz (Cache)
Alle Chunks + Dateisignaturen werden in IndexedDB gespeichert:

  • Browser schließen/öffnen → Cache laden → sofort wieder suchbar

  • Kein Server-State nötig

Warum „Seite“ und „Zeilen n–m“ so wichtig sind

Für professionelle Nutzung ist es nicht genug, „irgendwo stand das“ zu sagen. Du willst:

  • schnell zur Stelle springen

  • bei Reviews/Audits die Quelle belegen

  • Ergebnisse reproduzierbar machen

Darum ist die Quelle in unserem Tool nicht nur „Dokumentname“, sondern:

  • PDF Seite X

  • Text Zeilen n–m

Das ist die Brücke zwischen KI-UX und klassischer Nachvollziehbarkeit.

Grenzen und sinnvolle Datenvolumen-Limits

Damit das Ganze flüssig im Browser bleibt, gelten pragmatische Limits:

  • max. 2 MB pro Datei (konfigurierbar)

  • max. ~5 Mio Zeichen pro Scan (konfigurierbar)

Als Faustregel: Für interaktive Nutzung (ohne Warteorgien) ist ein Ordnerumfang im Bereich einige 10–200 Text/PDF-Seiten gut beherrschbar – abhängig von Gerät/Browser. Wenn du deutlich mehr brauchst:

  • aggressiver chunking/cleaning

  • Vorfilter (nur relevante Unterordner)

  • optional: „Index-Build“ in Batches, oder Worker-Sharding

Typische Use Cases

  • interne Richtlinien, Arbeitsanweisungen, Prozessdokumente

  • Audit-/Prüfungsakten (PDF)

  • Log- und Exportdateien (CSV/JSON)

  • Projektdokumentation (MD/TXT)

  • Word-Dokumente als DOCX

Fazit

Mit diesem Ansatz bekommst du eine nachvollziehbare RAG-Basis im Browser:

  • lokale Dokumente einlesen

  • inkrementell aktualisieren

  • schnell durchsuchen

  • Treffer mit Seiten und Zeilen belegen

Wenn du darauf aufbauen willst, ist der nächste Schritt die Antwortgenerierung über ein LLM (API oder eigenes Modell) – aber der kritische Teil für Professionalität ist oft genau das, was hier schon steht: guter Index + gute Quellen.

powered by social2s