init

KI-Bulli-Manual.md

@@ -0,0 +1,617 @@
+# KI-Bulli Zeitreisemaschine - Bedienungsanleitung
+## Modell ZR-1955: Der Deutsche Temporale Omnibus
+
+**Version 3.14159 | Bundesamt für Zeitreisen | Geheimhaltungsstufe: Streng Vertraulich**
+
+---
+
+## Inhaltsverzeichnis
+
+1. [Einführung](#einführung)
+2. [Sicherheitsbestimmungen](#sicherheitsbestimmungen)
+3. [Technische Spezifikationen](#technische-spezifikationen)
+4. [Die Schmidhuber Besserwisser Matrix](#die-schmidhuber-besserwisser-matrix)
+5. [Der Einsteinsche Relativitätsumkehrer](#der-einsteinsche-relativitätsumkehrer)
+6. [Bedienungsanleitung](#bedienungsanleitung)
+7. [Wartung und Pflege](#wartung-und-pflege)
+8. [Fehlerdiagnose](#fehlerdiagnose)
+9. [Zeitparadoxon-Vermeidung](#zeitparadoxon-vermeidung)
+10. [Garantie und Haftung](#garantie-und-haftung)
+
+---
+
+## Einführung
+
+Herzlichen Glückwunsch zum Erwerb Ihres KI-Bulli Zeitreisefahrzeugs! Der KI-Bulli (Künstliche Intelligenz Volkswagen Bus) ist das Ergebnis jahrzehntelanger deutscher Ingenieurskunst und stellt den Höhepunkt der temporalen Transporttechnologie dar.
+
+Anders als sein amerikanisches Pendant, der DeLorean DMC-12, basiert der KI-Bulli auf dem bewährten Volkswagen Typ 2 Chassis und vereint deutsche Zuverlässigkeit mit revolutionärer Zeitreisetechnologie. Das Fahrzeug wurde speziell für den europäischen Markt entwickelt und berücksichtigt sowohl die Autobahn-Geschwindigkeiten als auch die komplexen zeitlichen Verhältnisse des europäischen Kontinents.
+
+### Wichtige Hinweise
+
+- Dieses Fahrzeug ist ausschließlich für lizenzierte Zeitreisende bestimmt
+- Eine gültige Temporale Fahrerlaubnis (Klasse ZR-A) ist erforderlich
+- Das Fahrzeug darf nicht in Zeiträume vor 1885 oder nach 2155 eingesetzt werden
+- Bei Zeitreisen in die Vergangenheit sind die Bestimmungen des Temporalen Schutzgesetzes (TSchG) zu beachten
+
+---
+
+## Sicherheitsbestimmungen
+
+### Grundlegende Sicherheitsregeln
+
+**ACHTUNG:** Zeitreisen bergen erhebliche Risiken für Pilot, Passagiere und das Raum-Zeit-Kontinuum. Befolgen Sie stets diese Sicherheitsbestimmungen:
+
+1. **Niemals das eigene Geburtsdatum als Zieldatum wählen** - Führt zu kritischen Paradoxon-Schleifen
+2. **Historische Großereignisse meiden** - Mindestabstand: 48 Stunden vor/nach bedeutsamen Ereignissen
+3. **Maximale Sprungdistanz beachten** - Nicht mehr als 500 Jahre pro Einzelsprung
+4. **Schmidhuber-Matrix regelmäßig kalibrieren** - Mindestens alle 88 Sprünge oder bei Erreichen von 1,21 Gigawatt Spitzenleistung
+
+### Persönliche Schutzausrüstung
+
+- Temporaler Schutzanzug (mitgeliefert, Größen S-XXXL verfügbar)
+- Chronometer-Armbanduhr mit Quanten-Synchronisation
+- Notfall-Zeitanker (für Rückkehr bei Systemausfall)
+- Erste-Hilfe-Set für temporale Verletzungen
+
+### Verbotene Gegenstände
+
+Folgende Gegenstände dürfen NIEMALS mit in die Vergangenheit genommen werden:
+- Sportalmanacha oder Börsenkurse
+- Zukunftstechnologie (Smartphones, Computer, etc.)
+- Medikamente, die vor 1950 unbekannt waren
+- Dokumente mit Zukunftswissen
+- Graue Sportschuhe (siehe Dok-Brown-Direktive 1885)
+
+---
+
+## Technische Spezifikationen
+
+### Grundfahrzeug: Volkswagen Typ 2 (T1)
+- **Baujahr:** 1955 (temporale Modifikationen: 2072)
+- **Motor:** 1.2L Boxer, modifiziert mit Plutonium-Zusatztank
+- **Getriebe:** 4-Gang manuell + Temporaler Overdrive
+- **Höchstgeschwindigkeit:** 95 km/h (konventionell), 88 mph (temporal kritisch)
+- **Passagiere:** 7 (inklusive Zeitreise-Sicherheitsabstand)
+
+### Temporale Antriebseinheit
+- **Kernreaktor:** Mr. Fusion Home Energy Reactor (deutsche Lizenzfertigung)
+- **Flussdichte:** 1,21 Gigawatt (2,1 GW Notreserve)
+- **Zeitspule:** Doppelt gewickelte Chromoly-Legierung
+- **Stabilisatoren:** Gyro-stabilisierte Raumzeit-Kompensatoren
+
+### Navigationssystem
+- **Temporal-GPS:** Quantenverschränkte Satellitennavigation
+- **Zielgenauigkeit:** ±3 Stunden, ±50 Meter
+- **Kartenmaterial:** Vollständige Erdgeschichte 1885-2155
+- **Sprachen:** Deutsch, Englisch, Latein, Altgriechisch, Zukunftsdeutsch
+
+---
+
+## Die Schmidhuber Besserwisser Matrix
+
+Die Schmidhuber Besserwisser Matrix (SBM) ist das Herzstück des KI-Bulli Zeitreisesystems. Entwickelt von Prof. Dr. Dr. h.c. Günther Schmidhuber am Institut für Angewandte Temporalphysik der TU München, stellt sie sicher, dass alle Zeitreisen im Einklang mit den Naturgesetzen und den Bestimmungen der Zeitreise-Verordnung erfolgen.
+
+### Funktionsweise der SBM
+
+Die Matrix besteht aus 42 miteinander vernetzten Quantencomputern, die kontinuierlich folgende Parameter berechnen:
+
+1. **Temporale Wahrscheinlichkeitsfelder**
+2. **Paradoxon-Risikofaktoren**
+3. **Kausalitätsketten-Integrität**
+4. **Schmetterlingseffekt-Minimierung**
+5. **Realitäts-Konsistenz-Index**
+
+### Kalibrierung der SBM
+
+**WICHTIG:** Die SBM muss vor jeder Zeitreise korrekt kalibriert werden. Eine fehlerhafte Kalibrierung kann zu irreversiblen Schäden am Raum-Zeit-Kontinuum führen.
+
+#### Schritt-für-Schritt Anleitung:
+
+1. **Grundkalibrierung einleiten**
+   - Hauptschalter auf "BEREIT" stellen
+   - Warten bis grüne LED-Anzeige "MATRIX AKTIV" erscheint
+   - Eingabe des persönlichen Zeitreise-Codes (8-stellig)
+
+2. **Referenzdatum setzen**
+   - Aktuelles Datum und Uhrzeit bestätigen
+   - GPS-Position verifizieren
+   - Höhenmeter über NN eingeben
+
+3. **Zielparameter eingeben**
+   - Zieldatum (Format: TT.MM.JJJJ)
+   - Zielzeit (Format: HH:MM:SS)
+   - Zielkoordinaten (Grad, Minuten, Sekunden)
+   - Aufenthaltsdauer (maximal 168 Stunden)
+
+4. **Besserwisser-Protokoll aktivieren**
+   - Slider "BESSERWISSER" auf 73% einstellen
+   - Warnhinweise lesen und bestätigen
+   - Notfall-Rückkehr-Zeitpunkt festlegen
+
+5. **Matrix-Synchronisation**
+   - "SYNC STARTEN" drücken
+   - Warten auf Bestätigung aller 42 Quantencomputer
+   - Bei roten Warnlampen: Vorgang abbrechen und Wartung kontaktieren
+
+### Erweiterte SBM-Einstellungen
+
+Für erfahrene Zeitreisende stehen erweiterte Optionen zur Verfügung:
+
+- **Präzisionsmodus:** Erhöht Zielgenauigkeit auf ±30 Minuten
+- **Stealth-Modus:** Minimiert temporale Signatur
+- **Historiker-Modus:** Erlaubt Nur-Beobachtung-Reisen
+- **Notfall-Modus:** Ermöglicht unkalibrierten Rücksprung (nur in Extremsituationen!)
+
+---
+
+## Der Einsteinsche Relativitätsumkehrer
+
+Der Einsteinsche Relativitätsumkehrer (ERU) ist die physikalische Grundlage aller Zeitreisen im KI-Bulli. Dieses geniale System nutzt die Prinzipien der Allgemeinen Relativitätstheorie und kehrt sie kontrolliert um, wodurch Bewegung rückwärts durch die Zeit möglich wird.
+
+### Wissenschaftliche Grundlagen
+
+Einstein bewies, dass Zeit relativ ist und von Geschwindigkeit und Gravitation beeinflusst wird. Der ERU nutzt diese Erkenntnis und erzeugt ein kontrolliertes Gravitationsfeld, das die Zeit in einem begrenzten Bereich umkehrt.
+
+#### Die ERU-Formel:
+```
+Δt = -(v²/c²) × √(1 - (2GM/rc²)) × ℏ × ψ(SBM)
+```
+
+Wobei:
+- Δt = Zeitverschiebung
+- v = Fahrzeuggeschwindigkeit 
+- c = Lichtgeschwindigkeit
+- G = Gravitationskonstante
+- M = Masse des temporalen Feldes
+- r = Radius der Zeitblase
+- ℏ = Reduziertes Plancksches Wirkungsquantum
+- ψ(SBM) = Schmidhuber-Besserwisser-Matrix-Funktion
+
+### ERU-Betriebsmodi
+
+Der Relativitätsumkehrer kann in verschiedenen Modi betrieben werden:
+
+#### 1. Standard-Modus (Empfohlen)
+- **Energieverbrauch:** 1,21 GW
+- **Maximaler Zeitsprung:** 100 Jahre
+- **Genauigkeit:** ±2 Stunden
+- **Sicherheitslevel:** Maximal
+
+#### 2. Öko-Modus (Energiesparend)
+- **Energieverbrauch:** 0,88 GW
+- **Maximaler Zeitsprung:** 50 Jahre
+- **Genauigkeit:** ±6 Stunden
+- **Sicherheitslevel:** Hoch
+
+#### 3. Sport-Modus (Für Profis)
+- **Energieverbrauch:** 2,1 GW
+- **Maximaler Zeitsprung:** 500 Jahre
+- **Genauigkeit:** ±30 Minuten
+- **Sicherheitslevel:** Mittel
+
+#### 4. Ludicrous-Modus (Nur für Notfälle!)
+- **Energieverbrauch:** 5,55 GW
+- **Maximaler Zeitsprung:** 1000 Jahre
+- **Genauigkeit:** ±5 Minuten
+- **Sicherheitslevel:** GEFÄHRLICH!
+
+### Koordination zwischen SBM und ERU
+
+Die korrekte Abstimmung zwischen der Schmidhuber Besserwisser Matrix und dem Einsteinschen Relativitätsumkehrer ist kritisch für erfolgreiche Zeitreisen:
+
+1. **Initialisierungsphase**
+   - SBM berechnet optimale ERU-Parameter
+   - ERU bestätigt physikalische Machbarkeit
+   - Gegenseitige Validierung der Berechnungen
+
+2. **Synchronisationsphase**
+   - SBM sendet Startsequenz an ERU
+   - ERU lädt temporales Feld auf
+   - Bei 88 mph: Automatische Zeitsprung-Auslösung
+
+3. **Überwachungsphase**
+   - Kontinuierliche Parameterüberwachung
+   - Automatische Korrekturen bei Abweichungen
+   - Notabschaltung bei kritischen Werten
+
+### Wartung des ERU
+
+**Monatlich:**
+- Plutonium-Füllstand prüfen
+- Kühlmitteltemperatur kontrollieren
+- Gravitations-Sensoren kalibrieren
+
+**Jährlich:**
+- Komplette ERU-Inspektion durch zertifizierten Techniker
+- Austausch der Temporalspulen
+- Update der Einstein-Algorithmen
+
+**Bei Bedarf:**
+- Notfall-Reset nach Paradoxon-Exposition
+- Rekalibrierung nach Blitzschlag
+- Vollservice nach 100.000 Zeitreise-Kilometern
+
+---
+
+## Bedienungsanleitung
+
+### Vor der ersten Zeitreise
+
+1. **Dokumentation studieren** (mindestens 40 Stunden)
+2. **Praxisschulung absolvieren** (Zeitreise-Fahrschule)
+3. **Versicherung abschließen** (Temporal-Haftpflicht obligatorisch)
+4. **Testsprung durchführen** (max. 24 Stunden in die Vergangenheit)
+
+### Vorbereitung einer Zeitreise
+
+#### Fahrzeug-Check
+- [ ] Kraftstoff: mindestens 3/4 Tank
+- [ ] Plutonium: 100% (rote LED = nachfüllen!)
+- [ ] Reifen: Mindestprofiltiefe 1,6mm (auch in der Vergangenheit!)
+- [ ] Scheibenwischer: funktionsfähig (Dinosaurier-Kot ist hartnäckig)
+- [ ] Zeitanzeige: synchronisiert mit Atomuhr
+- [ ] Notfallausrüstung: vollständig
+
+#### Persönliche Vorbereitung
+- [ ] Temporale Fahrerlaubnis mitführen
+- [ ] Reisepass für alle Zeitepochen
+- [ ] Erste-Hilfe-Ausbildung aufgefrischt
+- [ ] Testament aktualisiert (nur zur Sicherheit)
+- [ ] Familie über Reisepläne informiert
+
+### Durchführung der Zeitreise
+
+#### Schritt 1: Fahrzeug starten
+1. Zündung einschalten
+2. Motor warmfahren (3 Minuten)
+3. Hauptschalter "ZEITREISE" aktivieren
+4. Warten auf Systembereitschaft (gelbe Lampe)
+
+#### Schritt 2: SBM konfigurieren
+1. Hauptmenü aufrufen: "MENU" drücken
+2. "SCHMIDHUBER MATRIX" wählen
+3. Zieldatum eingeben
+4. Besserwisser-Level auf 73% einstellen
+5. "KALIBRIERUNG STARTEN" drücken
+6. Warten auf grünes "BEREIT"-Signal
+
+#### Schritt 3: ERU synchronisieren
+1. "EINSTEIN UMKEHRER" Menü öffnen
+2. Aktueller Standort bestätigen
+3. Relativitätsmodus wählen (Standard empfohlen)
+4. "SYNC MIT SBM" auswählen
+5. Bestätigung abwarten (blaue LED)
+
+#### Schritt 4: Zeitsprung vorbereiten
+1. Sicherheitsgurt anlegen (SEHR wichtig!)
+2. Alle Gegenstände sichern
+3. "ZEITSPRUNG BEREIT" bestätigen
+4. Beschleunigung auf mindestens 88 mph
+5. Bei Erreichen der kritischen Geschwindigkeit: 
+   **AUTOMATISCHER ZEITSPRUNG!**
+
+#### Schritt 5: Ankunft in der Zielzeit
+1. Motor auslaufen lassen (nicht sofort ausschalten!)
+2. Position und Zeit überprüfen
+3. Temporale Signatur messen
+4. Bei Abweichungen: Korrekturen durchführen
+5. "ANKUNFT BESTÄTIGEN" drücken
+
+### Rückkehr in die Gegenwart
+
+Die Rückreise erfolgt nach dem gleichen Prinzip:
+
+1. **Mindestens 30 Minuten vor geplanter Rückkehr vorbereiten**
+2. **SBM auf Ursprungszeit/Ort einstellen**
+3. **ERU-Rückkehr-Modus aktivieren**
+4. **Beschleunigung auf 88 mph und automatische Rückkehr**
+
+**WICHTIG:** Niemals länger als geplant in der Vergangenheit bleiben! Jede zusätzliche Minute erhöht das Paradoxon-Risiko exponentiell.
+
+---
+
+## Wartung und Pflege
+
+### Tägliche Kontrollen
+
+- **Plutonium-Füllstand:** Minimum 75%
+- **Kühlwasser:** Temperatur zwischen 80-90°C
+- **Temporale Spulen:** Keine sichtbaren Risse oder Verfärbungen
+- **SBM-Display:** Alle 42 Quantencomputer zeigen "GRÜN"
+- **ERU-Status:** Keine Fehlercodes im System
+
+### Wöchentliche Wartung
+
+#### Äußere Reinigung
+- Fahrzeug waschen (nur destilliertes Wasser verwenden!)
+- Temporale Rückstände entfernen (spezielle Lösungsmittel im Zubehör)
+- Antenne auf Beschädigungen prüfen
+- Kennzeichen auf Lesbarkeit kontrollieren
+
+#### Technische Kontrolle
+- Alle Anzeigen und Warnlampen testen
+- Sicherungen prüfen (Ersatzsicherungen im Handschuhfach)
+- Notfall-Zeitanker funktionstest
+- Backup-Systeme aktivieren und testen
+
+### Monatliche Inspektion
+
+1. **Motor-Check**
+   - Ölstand prüfen (Spezialöl für Temporal-Motoren!)
+   - Zündkerzen kontrollieren
+   - Kühlsystem überprüfen
+
+2. **Temporalsystem-Diagnose**
+   - Vollständiger SBM-Systemtest
+   - ERU-Kalibrierung überprüfen
+   - Zeitgenauigkeit mit Atomuhr abgleichen
+
+3. **Sicherheitssysteme**
+   - Notbremsung testen
+   - Paradoxon-Schutzschilde kalibrieren
+   - Raumzeit-Stabilisatoren justieren
+
+### Jährliche Hauptuntersuchung
+
+**ACHTUNG:** Muss von autorisiertem Zeitreise-Servicepartner durchgeführt werden!
+
+- Komplette Systemdiagnose aller temporalen Komponenten
+- Austausch der Verschleißteile
+- Software-Updates für SBM und ERU
+- Neue TÜV-Plakette für Zeitreisefahrzeuge
+- Versicherungsnachweis aktualisieren
+
+---
+
+## Fehlerdiagnose
+
+### Häufige Probleme und Lösungen
+
+#### "SBM zeigt ERROR 404 - Zeitraum nicht gefunden"
+**Ursache:** Zieldatum liegt außerhalb des erlaubten Bereichs
+**Lösung:** Datum zwischen 1885 und 2155 wählen
+
+#### "ERU überhitzt bei 87 mph"
+**Ursache:** Kühlsystem defekt oder Kühlmittel zu niedrig
+**Lösung:** Kühlmittel nachfüllen, bei Wiederholung Service kontaktieren
+
+#### "Zeitsprung zu ungenau (±24 Stunden Abweichung)"
+**Ursache:** SBM-Kalibrierung veraltet
+**Lösung:** Vollständige Neu-Kalibrierung durchführen
+
+#### "Paradoxon-Warnung bei Zeitsprung-Vorbereitung"
+**Ursache:** Geplante Reise würde bekannte Ereignisse beeinflussen
+**Lösung:** Zieldatum/Ort ändern oder Historiker-Modus verwenden
+
+#### "Motor startet nicht nach Zeitsprung"
+**Ursache:** Temporale Interferenz oder EMP-Schäden
+**Lösung:** 
+1. 10 Minuten warten (temporale Entladung)
+2. Notstart-Sequenz aktivieren
+3. Bei erneutem Ausfall: Notfall-Zeitanker verwenden
+
+#### "Anzeigen zeigen kryptische Zeitangaben"
+**Ursache:** Quantenverschränkung mit Paralleluniversum
+**Lösung:** 
+1. Fahrzeug ausschalten
+2. 30 Sekunden warten
+3. Neustart durchführen
+4. Bei Wiederholung: Sofortiger Service erforderlich!
+
+### Notfall-Verfahren
+
+#### Bei Festsitzen in der Vergangenheit:
+1. **Ruhe bewahren!**
+2. Notfall-Zeitanker aktivieren
+3. Funkspruch an Zeitreise-Leitstelle (Frequenz 88.8 MHz)
+4. Auf Rettungsteam warten
+5. **Niemals versuchen, ohne funktionierende Systeme zurückzureisen!**
+
+#### Bei Paradoxon-Alarm:
+1. **Sofort alle Zeitreise-Aktivitäten einstellen!**
+2. Fahrzeug an sicherem Ort parken
+3. Mindestabstand 500m zu allen Personen
+4. Notdienst verständigen (Telefon: 0800-PARADOX)
+5. Quarantäne-Protokoll befolgen
+
+#### Bei Begegnung mit sich selbst:
+1. **Sofortiger Rückzug!**
+2. Kein Blickkontakt!
+3. Minimum 1km Abstand halten
+4. ERU auf "Stealth-Modus" umschalten
+5. Bei versehentlichem Kontakt: Gedächtnis-Löschprotokoll anwenden
+
+---
+
+## Zeitparadoxon-Vermeidung
+
+Die Vermeidung von Zeitparadoxen ist oberstes Gebot für jeden Zeitreisenden. Die im KI-Bulli integrierte Schmidhuber Besserwisser Matrix wurde speziell entwickelt, um die häufigsten Paradoxon-Arten zu verhindern.
+
+### Bekannte Paradoxon-Typen
+
+#### 1. Großvater-Paradoxon
+**Beschreibung:** Veränderung der eigenen Familiengeschichte
+**Risiko:** Extrem hoch
+**Prävention:** Automatische Sperrung aller direkten Verwandten in SBM-Datenbank
+
+#### 2. Bootstrap-Paradoxon
+**Beschreibung:** Information ohne Ursprung in Zeitschleife
+**Risiko:** Mittel
+**Prävention:** Dokumentation aller mitgeführten Informationen
+
+#### 3. Schmetterlingseffekt
+**Beschreibung:** Kleine Änderungen mit großen Folgen
+**Risiko:** Hoch bei längeren Aufenthalten
+**Prävention:** Minimale Interaktion, sterilisierte Umgebung
+
+#### 4. Prädestinierungs-Paradoxon
+**Beschreibung:** Zirkuläre Kausalität
+**Risiko:** Gering bei korrekter SBM-Kalibrierung
+**Prävention:** Automatische Ereignis-Kette-Analyse
+
+### Verhaltensregeln in der Vergangenheit
+
+#### DO's:
+- ✅ Beobachten ohne zu interagieren
+- ✅ Temporale Schutzkleidung tragen
+- ✅ Dokumentation aller Aktivitäten
+- ✅ Regelmäßige Positionsmeldungen
+- ✅ Historische Akkuratesse wahren
+
+#### DON'Ts:
+- ❌ Keine Gegenstände zurücklassen
+- ❌ Keine zukunftsrelevanten Informationen preisgeben
+- ❌ Keine romantischen Beziehungen
+- ❌ Keine geschäftlichen Transaktionen
+- ❌ Keine medizinischen Eingriffe
+
+### SBM-Paradoxon-Schutzprotokoll
+
+Die Schmidhuber Besserwisser Matrix überwacht kontinuierlich folgende Parameter:
+
+1. **Kausalitäts-Index:** Messung der Wahrscheinlichkeit von Ursache-Wirkung-Störungen
+2. **Temporale Integrität:** Überprüfung der Zeitlinie auf Inkonsistenzen
+3. **Realitäts-Kohärenz:** Abgleich mit bekannter Geschichte
+4. **Quantenfluktuationen:** Überwachung der Raumzeit-Stabilität
+
+Bei kritischen Werten erfolgt automatisch:
+- Warnung an den Piloten
+- Einleitung von Schutzmaßnahmen
+- Bei Bedarf: Zwangsrückkehr zur Ursprungszeit
+
+---
+
+## Garantie und Haftung
+
+### Herstellergarantie
+
+**Zeitreise-Industries GmbH** gewährt auf den KI-Bulli folgende Garantien:
+
+#### Grundgarantie (2 Jahre oder 100.000 Zeitreise-Kilometer)
+- Motor und Antriebsstrang
+- Karosserie und Fahrwerk
+- Standard-Elektronik
+
+#### Temporale Spezialgarantie (5 Jahre oder 1.000 Zeitsprünge)
+- Schmidhuber Besserwisser Matrix
+- Einsteinscher Relativitätsumkehrer
+- Plutonium-Reaktor
+- Temporale Navigationssysteme
+
+#### Paradoxon-Schutzgarantie (10 Jahre)
+- Schutz vor Zeitparadoxen durch Herstellerfehler
+- Kostenlose Realitäts-Restaurierung bei Systemversagen
+- 24/7 Notfall-Hotline für Temporal-Krisen
+
+### Garantieausschlüsse
+
+Die Garantie erlischt bei:
+- Unsachgemäßem Gebrauch (z.B. Reisen vor 1885)
+- Selbst durchgeführten Reparaturen
+- Verwendung von Nicht-Original-Plutonium
+- Missachtung der Paradoxon-Schutzbestimmungen
+- Schäden durch Dinosaurier, Meteore oder Vulkanausbrüche
+- Manipulation der SBM oder ERU durch Zeitreise-Amateure
+
+### Haftungsausschluss
+
+**WICHTIGER HINWEIS:** Zeitreisen bergen unvorhersehbare Risiken!
+
+Zeitreise-Industries GmbH übernimmt keine Haftung für:
+- Paradoxe Effekte auf die Realität
+- Verlorene oder veränderte Erinnerungen
+- Begegnungen mit Parallelversionen Ihrer selbst
+- Unerwartete historische Ereignisse
+- Schäden durch zukünftige Zeitreise-Polizei
+- Suchtgefahr durch exzessive Zeitreisen
+
+### Versicherungsbestimmungen
+
+**Obligatorisch:**
+- Temporale Haftpflichtversicherung (minimum 50 Mio. € Deckung)
+- Paradoxon-Vollkaskoversicherung
+- Zeitreisenden-Unfallversicherung
+
+**Empfohlen:**
+- Realitäts-Korrektur-Zusatzversicherung
+- Rechtsschutz für Temporal-Verkehrsverstöße
+- Rücktransport-Versicherung bei Systemausfall
+
+### Service und Support
+
+**Bundesweite Service-Hotline:** 0800-ZEITBULI (0800-9348284)
+**Notfall-Nummer:** 112-TEMPORAL
+**E-Mail:** service@zeitreise-industries.de
+**Adresse:** Zeitreise-Industries GmbH, Temporalstraße 88, 85577 Hill Valley
+
+**Service-Zeiten:**
+- Mo-Fr: 8:00-18:00 Uhr (alle Zeitzonen)
+- Sa: 9:00-15:00 Uhr
+- So: Nur Notdienst
+- Feiertage: Nach Vereinbarung (auch historische Feiertage)
+
+**Autorisierte Servicepartner** in über 150 deutschen Städten verfügbar.
+Vollständige Liste unter: www.zeitreise-industries.de/service
+
+---
+
+## Anhang
+
+### Anhang A: Technische Daten (Detailangaben)
+
+**Motor:**
+- Typ: VW Boxer, 4-Zylinder, luftgekühlt
+- Hubraum: 1192 cm³
+- Leistung: 30 PS (22 kW) @ 3400 U/min + Temporal-Boost
+- Kraftstoff: Normalbenzin + Plutonium-Zusatz
+- Verbrauch: 12l/100km (konventionell), 0,1g Plutonium/Zeitsprung
+
+**Temporal-Antrieb:**
+- Mr. Fusion Reaktor: 1,21 GW Standardleistung
+- Zeitspulen: 2x gegenläufig, Chromoly-Legierung
+- Kühlsystem: Flüssigstickstoff-Kreislauf
+- Sicherheitssysteme: 3-fache Redundanz
+
+### Anhang B: Ersatzteilliste
+
+**Verschleißteile (alle 50.000 km):**
+- Temporalspulen (Paar): Art.-Nr. TP-4711
+- Plutonium-Filter: Art.-Nr. PF-1337
+- Relativitäts-Sensor: Art.-Nr. RS-2001
+- Paradoxon-Detektor: Art.-Nr. PD-404
+
+**Kritische Komponenten:**
+- SBM-Quantencomputer (komplett): Art.-Nr. QC-42
+- ERU-Haupteinheit: Art.-Nr. ERU-1955
+- Zeitanker (Notfall): Art.-Nr. ZA-HELP
+
+### Anhang C: Gesetzliche Bestimmungen
+
+**Relevant für KI-Bulli Betrieb:**
+- Temporales Schutzgesetz (TSchG) §§ 1-156
+- Zeitreise-Verkehrs-Ordnung (ZrVO)
+- Paradoxon-Verhütungsverordnung (PVV)
+- EU-Richtlinie 88/1955/EG "Temporaler Verkehr"
+
+### Anhang D: Erste Hilfe bei Temporal-Verletzungen
+
+**Temporale Übelkeit:**
+- Symptome: Schwindel, Zeitwahrnehmungsstörungen
+- Behandlung: Ruhe, frische Luft, Chronometer-Synchronisation
+
+**Paradoxon-Schock:**
+- Symptome: Erinnerungslücken, Déjà-vu-Attacken
+- Behandlung: Sofortige medizinische Versorgung, Realitäts-Therapie
+
+**Zeitschleifen-Syndrom:**
+- Symptome: Wiederholung derselben Handlungen
+- Behandlung: Bewusste Durchbrechung der Schleife, ggf. ERU-Reset
+
+---
+
+**© 2025 Zeitreise-Industries GmbH - Alle Rechte vorbehalten**
+**"Wo wir hinfahren, brauchen wir keine Straßen... aber einen TÜV!"**
+
+*Dieses Handbuch wurde in Zusammenarbeit mit dem Institut für Angewandte Temporalphysik der TU München erstellt und vom Bundesamt für Zeitreisen genehmigt. Alle technischen Angaben entsprechen dem aktuellen Stand der Zeitreise-Wissenschaft.*
+
+**Version 3.14159 - Letzte Aktualisierung: 31.02.2025**

README copy.md

@@ -0,0 +1,195 @@
+# 🤖 AI-Powered Document Search & RAG Chat with Transformers.js
+
+A complete **Retrieval-Augmented Generation (RAG)** system powered by **real transformer models** running directly in your browser via Transformers.js!
+
+## ✨ Real AI Features
+
+- 🧠 **Real Embeddings** - Xenova/all-MiniLM-L6-v2 (384-dimensional sentence transformers)
+- 🤖 **Q&A Model** - Xenova/distilbert-base-cased-distilled-squad for question answering
+- 🚀 **Language Model** - Xenova/distilgpt2 for creative text generation
+- 🔮 **Semantic Search** - True vector similarity using transformer embeddings
+- 💬 **Intelligent Chat** - Multiple AI modes: Q&A, Pure LLM, and LLM+RAG
+- 📚 **Document Management** - Automatic embedding generation for new documents
+- 🎨 **Professional UI** - Beautiful interface with real-time progress indicators
+- ⚡ **Browser-Native** - No server required, models run entirely in your browser
+- 💾 **Model Caching** - Downloads once, cached for future use
+
+## 🚀 Quick Start
+
+1. **Start the server:**
+```bash
+   ./start-simple.sh
+   ```
+
+2. **Open your browser:**
+   ```
+   http://localhost:8000/rag-complete.html
+   ```
+
+3. **Initialize Real AI Models:**
+   - Click "🚀 Initialize Real AI Models"
+   - First load: ~1-2 minutes (downloads ~50MB of models)
+   - Subsequent loads: Instant (models are cached)
+
+4. **Experience Real AI:**
+   - **Ask complex questions:** Get AI-generated answers with confidence scores
+   - **LLM Chat:** Generate creative text, stories, poems, and explanations
+   - **LLM+RAG:** Combine document context with language model generation
+   - **Semantic search:** Find documents by meaning, not just keywords
+   - **Add documents:** Auto-generate embeddings with real transformers
+   - **Test system:** Verify all AI components are working
+
+## 🧠 AI Models Used
+
+### Embedding Model: Xenova/all-MiniLM-L6-v2
+- **Purpose:** Generate 384-dimensional sentence embeddings
+- **Size:** ~23MB
+- **Performance:** ~2-3 seconds per document
+- **Quality:** State-of-the-art semantic understanding
+
+### Q&A Model: Xenova/distilbert-base-cased-distilled-squad
+- **Purpose:** Question answering with document context
+- **Size:** ~28MB  
+- **Performance:** ~3-5 seconds per question
+- **Quality:** Accurate answers with confidence scores
+
+### Language Model: Xenova/distilgpt2
+- **Purpose:** Creative text generation and completion
+- **Size:** ~40MB
+- **Performance:** ~3-8 seconds per generation
+- **Quality:** Coherent text with adjustable creativity
+
+## 📁 Project Structure
+
+```
+document-embedding-search/
+├── rag-complete.html      # Complete RAG system with real AI
+├── rag-backup.html        # Backup (simulated AI version)
+├── start-simple.sh        # Simple HTTP server startup script
+└── README.md              # This file
+```
+
+## 🔬 How Real AI Works
+
+### 1. **Real Embeddings Generation**
+```javascript
+// Uses actual transformer model
+embeddingModel = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2');
+const embedding = await embeddingModel(text, { pooling: 'mean', normalize: true });
+```
+
+### 2. **True Semantic Search**
+- Documents encoded into 384-dimensional vectors
+- Query embedded using same transformer
+- Cosine similarity calculated between real embeddings
+- Results ranked by actual semantic similarity
+
+### 3. **Real AI Q&A Pipeline**
+```javascript
+// Actual question-answering model
+qaModel = await pipeline('question-answering', 'Xenova/distilbert-base-cased-distilled-squad');
+const result = await qaModel(question, context);
+// Returns: { answer: "...", score: 0.95 }
+```
+
+### 4. **Intelligent RAG Flow**
+1. **Question Analysis:** Real NLP processing of user query
+2. **Semantic Retrieval:** Vector similarity using transformer embeddings  
+3. **Context Assembly:** Intelligent document selection and ranking
+4. **AI Generation:** Actual transformer-generated responses with confidence
+
+## 🎯 Technical Implementation
+
+- **Frontend:** Pure HTML5, CSS3, vanilla JavaScript
+- **AI Framework:** Transformers.js (Hugging Face models in browser)
+- **Models:** Real pre-trained transformers from Hugging Face Hub
+- **Inference:** CPU-based, runs entirely client-side
+- **Memory:** ~100MB RAM during inference
+- **Storage:** ~50MB cached models (persistent browser cache)
+
+## 🌟 Advanced Real AI Features
+
+- **Progress Tracking** - Real-time model loading progress
+- **Confidence Scores** - AI provides confidence levels for answers
+- **Error Handling** - Robust error management for model operations
+- **Performance Monitoring** - Track inference times and model status
+- **Batch Processing** - Efficient embedding generation for multiple documents
+- **Memory Management** - Optimized for browser resource constraints
+
+## 📊 Performance Characteristics
+
+| Operation | Time | Memory | Quality |
+|-----------|------|--------|---------|
+| Model Loading | 60-180s | 90MB | One-time |
+| Document Embedding | 2-3s | 25MB | High |
+| Semantic Search | 1-2s | 15MB | Excellent |
+| Q&A Generation | 3-5s | 30MB | Very High |
+| LLM Generation | 3-8s | 40MB | High |
+| LLM+RAG | 5-10s | 50MB | Very High |
+
+## 🎮 Demo Capabilities
+
+### Real Semantic Search
+- Try: "machine learning applications" vs "ML uses"
+- Experience true semantic understanding beyond keywords
+
+### Intelligent Q&A
+- Ask: "How does renewable energy help the environment?"
+- Get AI-generated answers with confidence scores
+
+### Pure LLM Generation
+- Prompt: "Tell me a story about space exploration"
+- Generate creative content with adjustable temperature
+
+### LLM+RAG Hybrid
+- Combines document retrieval with language generation
+- Context-aware creative responses
+- Best of both worlds: accuracy + creativity
+
+### Context-Aware Responses
+- Multi-document context assembly
+- Relevant source citation
+- Confidence-based answer validation
+
+## 🔧 Customization
+
+Easily swap models by changing the pipeline configuration:
+
+```javascript
+// Different embedding models
+embeddingModel = await pipeline('feature-extraction', 'Xenova/e5-small-v2');
+
+// Different QA models  
+qaModel = await pipeline('question-answering', 'Xenova/roberta-base-squad2');
+
+// Text generation models
+genModel = await pipeline('text-generation', 'Xenova/gpt2');
+```
+
+## 🚀 Deployment
+
+Since models run entirely in the browser:
+
+1. **Static Hosting:** Upload single HTML file to any web server
+2. **CDN Distribution:** Serve globally with edge caching
+3. **Offline Capable:** Works without internet after initial model download
+4. **Mobile Compatible:** Runs on tablets and modern mobile browsers
+
+## 🎉 Transformers.js Showcase
+
+This project demonstrates the incredible capabilities of Transformers.js:
+
+- ✅ **Real AI in Browser** - No GPU servers required
+- ✅ **Production Quality** - State-of-the-art model performance  
+- ✅ **Developer Friendly** - Simple API, complex AI made easy
+- ✅ **Privacy Focused** - All processing happens locally
+- ✅ **Cost Effective** - No API calls or inference costs
+- ✅ **Scalable** - Handles unlimited users without backend
+
+## 📄 License
+
+Open source and available under the MIT License.
+
+---
+
+**🎯 Result:** A production-ready RAG system showcasing real transformer models running natively in web browsers - the future of AI-powered web applications!

debug-transformers.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Transformers.js Debug</title>
+    <script type="module">
+        // Import transformers.js from CDN
+        import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
+        
+        // Make available globally
+        window.transformers = { pipeline, env };
+        window.transformersLoaded = true;
+        
+        console.log('✅ Transformers.js loaded via ES modules');
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2/dist/transformers.min.js"></script>
+</head>
+<body>
+    <h1>Transformers.js Debug Test</h1>
+    <div id="status">Loading...</div>
+    <button onclick="testTransformers()">Test Transformers.js</button>
+    <div id="result"></div>
+
+    <script>
+        async function testTransformers() {
+            const statusDiv = document.getElementById('status');
+            const resultDiv = document.getElementById('result');
+            
+            try {
+                statusDiv.textContent = 'Testing Transformers.js loading...';
+                
+                // Check what's available
+                console.log('window.transformers:', window.transformers);
+                console.log('window.Transformers:', window.Transformers);
+                console.log('window.transformersLoaded:', window.transformersLoaded);
+                
+                let pipeline, env;
+                
+                if (window.transformers && window.transformersLoaded) {
+                    console.log('Using ES modules version');
+                    ({ pipeline, env } = window.transformers);
+                } else if (window.Transformers) {
+                    console.log('Using UMD version');
+                    ({ pipeline, env } = window.Transformers);
+                } else {
+                    throw new Error('No transformers library found');
+                }
+                
+                statusDiv.textContent = 'Creating pipeline...';
+                
+                // Test basic functionality
+                const classifier = await pipeline('sentiment-analysis', 'Xenova/distilbert-base-uncased-finetuned-sst-2-english');
+                
+                statusDiv.textContent = 'Running inference...';
+                
+                const result = await classifier('I love transformers.js!');
+                
+                statusDiv.textContent = '✅ Success!';
+                resultDiv.innerHTML = `<pre>${JSON.stringify(result, null, 2)}</pre>`;
+                
+            } catch (error) {
+                console.error('Error:', error);
+                statusDiv.textContent = '❌ Error: ' + error.message;
+                resultDiv.textContent = error.stack;
+            }
+        }
+        
+        // Auto-test when page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            setTimeout(testTransformers, 2000);
+        });
+    </script>
+</body>
+</html>

index-new.js

@@ -0,0 +1,954 @@
+// Import transformers.js 3.0.0 from CDN (new Hugging Face ownership)
+import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
+
+// Make available globally
+window.transformers = { pipeline, env };
+window.transformersLoaded = true;
+
+console.log('✅ Transformers.js 3.0.0 loaded via ES modules (Hugging Face)');
+
+// Global variables for transformers.js
+let transformersPipeline = null;
+let transformersEnv = null;
+let transformersReady = false;
+
+// Document storage and AI state
+let documents = [
+    {
+        id: 0,
+        title: "Artificial Intelligence Overview",
+        content: "Artificial Intelligence (AI) is a branch of computer science that aims to create intelligent machines that work and react like humans. Some activities computers with AI are designed for include speech recognition, learning, planning, and problem-solving. AI is used in healthcare, finance, transportation, and entertainment. Machine learning enables computers to learn from experience without explicit programming. Deep learning uses neural networks to understand complex patterns in data.",
+        embedding: null
+    },
+    {
+        id: 1,
+        title: "Space Exploration",
+        content: "Space exploration is the ongoing discovery and exploration of celestial structures in outer space through evolving space technology. Physical exploration is conducted by unmanned robotic probes and human spaceflight. Space exploration has been used for geopolitical rivalries like the Cold War. The early era was driven by a Space Race between the Soviet Union and United States. Modern exploration includes Mars missions, the International Space Station, and satellite programs.",
+        embedding: null
+    },
+    {
+        id: 2,
+        title: "Renewable Energy", 
+        content: "Renewable energy comes from naturally replenished resources on a human timescale. It includes sunlight, wind, rain, tides, waves, and geothermal heat. Renewable energy contrasts with fossil fuels that are used faster than replenished. Most renewable sources are sustainable. Solar energy is abundant and promising. Wind energy and hydroelectric power are major contributors to renewable generation worldwide.",
+        embedding: null
+    }
+];
+
+let embeddingModel = null;
+let qaModel = null;
+let llmModel = null;
+let loadedModelName = '';
+let modelsInitialized = false;
+
+// Calculate cosine similarity between two vectors
+function cosineSimilarity(a, b) {
+    const dotProduct = a.reduce((sum, val, i) => sum + val * b[i], 0);
+    const magnitudeA = Math.sqrt(a.reduce((sum, val) => sum + val * val, 0));
+    const magnitudeB = Math.sqrt(b.reduce((sum, val) => sum + val * val, 0));
+    
+    if (magnitudeA === 0 || magnitudeB === 0) return 0;
+    return dotProduct / (magnitudeA * magnitudeB);
+}
+
+// Initialize transformers.js when the script loads
+async function initTransformers() {
+    try {
+        console.log('🔄 Initializing Transformers.js...');
+        
+        // Try ES modules first (preferred method)
+        if (window.transformers && window.transformersLoaded) {
+            console.log('✅ Using ES modules version (Transformers.js 3.0.0)');
+            ({ pipeline: transformersPipeline, env: transformersEnv } = window.transformers);
+        } 
+        // Fallback to UMD version
+        else if (window.Transformers) {
+            console.log('✅ Using UMD version (Transformers.js 3.0.0)');
+            ({ pipeline: transformersPipeline, env: transformersEnv } = window.Transformers);
+        }
+        // Wait for library to load
+        else {
+            console.log('⏳ Waiting for library to load...');
+            let attempts = 0;
+            while (!window.Transformers && !window.transformersLoaded && attempts < 50) {
+                await new Promise(resolve => setTimeout(resolve, 200));
+                attempts++;
+            }
+            
+            if (window.transformers && window.transformersLoaded) {
+                ({ pipeline: transformersPipeline, env: transformersEnv } = window.transformers);
+            } else if (window.Transformers) {
+                ({ pipeline: transformersPipeline, env: transformersEnv } = window.Transformers);
+            } else {
+                throw new Error('Failed to load Transformers.js library');
+            }
+        }
+        
+        // Configure transformers.js with minimal settings
+        if (transformersEnv) {
+            transformersEnv.allowLocalModels = false;
+            transformersEnv.allowRemoteModels = true;
+            // Let Transformers.js use default WASM paths for better compatibility
+        }
+        
+        transformersReady = true;
+        console.log('✅ Transformers.js initialized successfully');
+        
+        // Update UI to show ready state
+        updateStatus();
+        
+        // Update status indicator
+        const statusSpan = document.getElementById('transformersStatus');
+        if (statusSpan) {
+            statusSpan.textContent = '✅ Ready!';
+            statusSpan.style.color = 'green';
+        }
+        
+    } catch (error) {
+        console.error('❌ Error initializing Transformers.js:', error);
+        
+        // Show error in UI
+        const statusDiv = document.getElementById('status');
+        if (statusDiv) {
+            statusDiv.textContent = `❌ Failed to load Transformers.js: ${error.message}`;
+            statusDiv.style.color = 'red';
+        }
+        
+        // Update status indicator
+        const statusSpan = document.getElementById('transformersStatus');
+        if (statusSpan) {
+            statusSpan.textContent = `❌ Failed: ${error.message}`;
+            statusSpan.style.color = 'red';
+        }
+    }
+}
+
+// Initialize when page loads
+document.addEventListener('DOMContentLoaded', function() {
+    initTransformers();
+    initFileUpload();
+});
+
+// UI Functions
+function showTab(tabName) {
+    // Hide all tabs
+    document.querySelectorAll('.tab-content').forEach(tab => {
+        tab.classList.remove('active');
+    });
+    document.querySelectorAll('.tab').forEach(button => {
+        button.classList.remove('active');
+    });
+    
+    // Show selected tab
+    document.getElementById(tabName).classList.add('active');
+    event.target.classList.add('active');
+}
+
+function updateSliderValue(sliderId) {
+    const slider = document.getElementById(sliderId);
+    const valueSpan = document.getElementById(sliderId + 'Value');
+    valueSpan.textContent = slider.value;
+}
+
+function updateStatus() {
+    const status = document.getElementById('status');
+    const transformersStatus = transformersReady ? 'Ready' : 'Not ready';
+    const embeddingStatus = embeddingModel ? 'Loaded' : 'Not loaded';
+    const qaStatus = qaModel ? 'Loaded' : 'Not loaded';
+    const llmStatus = llmModel ? 'Loaded' : 'Not loaded';
+    status.textContent = `📊 Documents: ${documents.length} | 🔧 Transformers.js: ${transformersStatus} | 🤖 QA: ${qaStatus} | 🧠 Embedding: ${embeddingStatus} | 🚀 LLM: ${llmStatus}`;
+}
+
+function updateProgress(percent, text) {
+    const progressBar = document.getElementById('progressBar');
+    const progressText = document.getElementById('progressText');
+    progressBar.style.width = percent + '%';
+    progressText.textContent = text;
+}
+
+// AI Functions
+async function initializeModels() {
+    const statusDiv = document.getElementById('initStatus');
+    const progressDiv = document.getElementById('initProgress');
+    const initBtn = document.getElementById('initBtn');
+    
+    statusDiv.style.display = 'block';
+    progressDiv.style.display = 'block';
+    initBtn.disabled = true;
+    
+    try {
+        // Check if transformers.js is ready
+        if (!transformersReady || !transformersPipeline) {
+            updateProgress(5, "Waiting for Transformers.js to initialize...");
+            statusDiv.innerHTML = '🔄 Initializing Transformers.js library...';
+            
+            // Wait for transformers.js to be ready
+            let attempts = 0;
+            while (!transformersReady && attempts < 30) {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                attempts++;
+            }
+            
+            if (!transformersReady) {
+                throw new Error('Transformers.js failed to initialize. Please refresh the page.');
+            }
+        }
+        
+        updateProgress(10, "Loading embedding model...");
+        statusDiv.innerHTML = '🔄 Loading embedding model (Xenova/all-MiniLM-L6-v2)...';
+        
+        // Load embedding model with progress tracking
+        embeddingModel = await transformersPipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
+            progress_callback: (progress) => {
+                if (progress.status === 'downloading') {
+                    const percent = progress.loaded && progress.total ? 
+                        Math.round((progress.loaded / progress.total) * 100) : 0;
+                    statusDiv.innerHTML = `🔄 Downloading embedding model: ${percent}%`;
+                }
+            }
+        });
+        
+        updateProgress(40, "Loading question-answering model...");
+        statusDiv.innerHTML = '🔄 Loading QA model (Xenova/distilbert-base-cased-distilled-squad)...';
+        
+        // Load QA model with progress tracking
+        qaModel = await transformersPipeline('question-answering', 'Xenova/distilbert-base-cased-distilled-squad', {
+            progress_callback: (progress) => {
+                if (progress.status === 'downloading') {
+                    const percent = progress.loaded && progress.total ? 
+                        Math.round((progress.loaded / progress.total) * 100) : 0;
+                    statusDiv.innerHTML = `🔄 Downloading QA model: ${percent}%`;
+                }
+            }
+        });
+        
+        updateProgress(70, "Loading language model...");
+        statusDiv.innerHTML = '🔄 Loading LLM (trying SmolLM models)...';
+        
+        // Load LLM model - Stable Transformers.js 3.0.0 configuration
+        const modelsToTry = [
+            {
+                name: 'Xenova/gpt2',
+                options: {}
+            },
+            {
+                name: 'Xenova/distilgpt2', 
+                options: {}
+            }
+        ];
+        
+        let modelLoaded = false;
+        for (const model of modelsToTry) {
+            try {
+                console.log(`Trying to load ${model.name}...`);
+                statusDiv.innerHTML = `🔄 Loading LLM (${model.name})...`;
+                
+                // Load LLM with progress tracking
+                llmModel = await transformersPipeline('text-generation', model.name, {
+                    progress_callback: (progress) => {
+                        if (progress.status === 'downloading') {
+                            const percent = progress.loaded && progress.total ? 
+                                Math.round((progress.loaded / progress.total) * 100) : 0;
+                            statusDiv.innerHTML = `🔄 Downloading ${model.name}: ${percent}%`;
+                        }
+                    }
+                });
+                
+                console.log(`✅ Successfully loaded ${model.name}`);
+                loadedModelName = model.name;
+                modelLoaded = true;
+                break;
+            } catch (error) {
+                console.warn(`${model.name} failed:`, error);
+            }
+        }
+        
+        if (!modelLoaded) {
+            throw new Error('Failed to load any LLM model');
+        }
+        
+        updateProgress(85, "Generating embeddings for documents...");
+        statusDiv.innerHTML = '🔄 Generating embeddings for existing documents...';
+        
+        // Generate embeddings for all existing documents
+        for (let i = 0; i < documents.length; i++) {
+            const doc = documents[i];
+            updateProgress(85 + (i / documents.length) * 10, `Processing document ${i + 1}/${documents.length}...`);
+            doc.embedding = await generateEmbedding(doc.content);
+        }
+        
+        updateProgress(100, "Initialization complete!");
+        modelsInitialized = true;
+        
+        statusDiv.innerHTML = `✅ AI Models initialized successfully!
+🧠 Embedding Model: Xenova/all-MiniLM-L6-v2 (384 dimensions)
+🤖 QA Model: Xenova/distilbert-base-cased-distilled-squad
+🚀 LLM Model: ${loadedModelName} (Language model for text generation)
+📚 Documents processed: ${documents.length}
+🔮 Ready for semantic search, Q&A, and LLM chat!
+
+📊 Model Info:
+• Embedding model size: ~23MB
+• QA model size: ~28MB
+• LLM model size: ~15-50MB (depending on model loaded)
+• Total memory usage: ~70-100MB
+• Inference speed: ~2-8 seconds per operation`;
+        
+        updateStatus();
+        
+    } catch (error) {
+        console.error('Error initializing models:', error);
+        statusDiv.innerHTML = `❌ Error initializing models: ${error.message}
+        
+Please check your internet connection and try again.`;
+        updateProgress(0, "Initialization failed");
+    } finally {
+        initBtn.disabled = false;
+        setTimeout(() => {
+            progressDiv.style.display = 'none';
+        }, 2000);
+    }
+}
+
+async function generateEmbedding(text) {
+    if (!transformersReady || !transformersPipeline) {
+        throw new Error('Transformers.js not initialized');
+    }
+    
+    if (!embeddingModel) {
+        throw new Error('Embedding model not loaded');
+    }
+    
+    try {
+        const output = await embeddingModel(text, { pooling: 'mean', normalize: true });
+        return Array.from(output.data);
+    } catch (error) {
+        console.error('Error generating embedding:', error);
+        throw error;
+    }
+}
+
+async function searchDocumentsSemantic() {
+    const query = document.getElementById('searchQuery').value;
+    const maxResults = parseInt(document.getElementById('maxResults').value);
+    const resultsDiv = document.getElementById('searchResults');
+    const searchBtn = document.getElementById('searchBtn');
+    
+    if (!query.trim()) {
+        resultsDiv.style.display = 'block';
+        resultsDiv.textContent = '❌ Please enter a search query';
+        return;
+    }
+    
+    if (!transformersReady || !modelsInitialized || !embeddingModel) {
+        resultsDiv.style.display = 'block';
+        resultsDiv.textContent = '❌ Please initialize AI models first!';
+        return;
+    }
+    
+    resultsDiv.style.display = 'block';
+    resultsDiv.innerHTML = '<div class="loading"></div> Generating query embedding and searching...';
+    searchBtn.disabled = true;
+    
+    try {
+        // Generate embedding for query
+        const queryEmbedding = await generateEmbedding(query);
+        
+        // Calculate similarities
+        const results = [];
+        documents.forEach(doc => {
+            if (doc.embedding) {
+                const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                results.push({ doc, similarity });
+            }
+        });
+        
+        // Sort by similarity
+        results.sort((a, b) => b.similarity - a.similarity);
+        
+        if (results.length === 0) {
+            resultsDiv.textContent = `❌ No documents with embeddings found for '${query}'`;
+            return;
+        }
+        
+        let output = `🔍 Semantic search results for '${query}':\n\n`;
+        results.slice(0, maxResults).forEach((result, i) => {
+            const doc = result.doc;
+            const similarity = result.similarity;
+            const excerpt = doc.content.length > 200 ? doc.content.substring(0, 200) + '...' : doc.content;
+            output += `**Result ${i + 1}** (similarity: ${similarity.toFixed(3)})\n📄 Title: ${doc.title}\n📝 Content: ${excerpt}\n\n`;
+        });
+        
+        resultsDiv.textContent = output;
+        
+    } catch (error) {
+        console.error('Search error:', error);
+        resultsDiv.textContent = `❌ Error during search: ${error.message}`;
+    } finally {
+        searchBtn.disabled = false;
+    }
+}
+
+function searchDocumentsKeyword() {
+    const query = document.getElementById('searchQuery').value;
+    const maxResults = parseInt(document.getElementById('maxResults').value);
+    const resultsDiv = document.getElementById('searchResults');
+    
+    if (!query.trim()) {
+        resultsDiv.style.display = 'block';
+        resultsDiv.textContent = '❌ Please enter a search query';
+        return;
+    }
+    
+    resultsDiv.style.display = 'block';
+    resultsDiv.innerHTML = '<div class="loading"></div> Searching keywords...';
+    
+    setTimeout(() => {
+        const results = [];
+        const queryWords = query.toLowerCase().split(/\s+/);
+        
+        documents.forEach(doc => {
+            const contentLower = doc.content.toLowerCase();
+            const titleLower = doc.title.toLowerCase();
+            
+            let matches = 0;
+            queryWords.forEach(word => {
+                matches += (contentLower.match(new RegExp(word, 'g')) || []).length;
+                matches += (titleLower.match(new RegExp(word, 'g')) || []).length * 2;
+            });
+            
+            if (matches > 0) {
+                results.push({ doc, score: matches });
+            }
+        });
+        
+        results.sort((a, b) => b.score - a.score);
+        
+        if (results.length === 0) {
+            resultsDiv.textContent = `❌ No documents found containing '${query}'`;
+            return;
+        }
+        
+        let output = `🔍 Keyword search results for '${query}':\n\n`;
+        results.slice(0, maxResults).forEach((result, i) => {
+            const doc = result.doc;
+            const excerpt = doc.content.length > 200 ? doc.content.substring(0, 200) + '...' : doc.content;
+            output += `**Result ${i + 1}**\n📄 Title: ${doc.title}\n📝 Content: ${excerpt}\n\n`;
+        });
+        
+        resultsDiv.textContent = output;
+    }, 500);
+}
+
+async function chatWithRAG() {
+    const question = document.getElementById('chatQuestion').value;
+    const maxContext = parseInt(document.getElementById('maxContext').value);
+    const responseDiv = document.getElementById('chatResponse');
+    const chatBtn = document.getElementById('chatBtn');
+    
+    if (!question.trim()) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ Please enter a question';
+        return;
+    }
+    
+    if (!transformersReady || !modelsInitialized || !embeddingModel || !qaModel) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ AI models not loaded yet. Please initialize them first!';
+        return;
+    }
+    
+    responseDiv.style.display = 'block';
+    responseDiv.innerHTML = '<div class="loading"></div> Generating answer with real AI...';
+    chatBtn.disabled = true;
+    
+    try {
+        // Generate embedding for the question
+        const questionEmbedding = await generateEmbedding(question);
+        
+        // Find relevant documents using semantic similarity
+        const relevantDocs = [];
+        documents.forEach(doc => {
+            if (doc.embedding) {
+                const similarity = cosineSimilarity(questionEmbedding, doc.embedding);
+                if (similarity > 0.1) {
+                    relevantDocs.push({ doc, similarity });
+                }
+            }
+        });
+        
+        relevantDocs.sort((a, b) => b.similarity - a.similarity);
+        relevantDocs.splice(maxContext);
+        
+        if (relevantDocs.length === 0) {
+            responseDiv.textContent = '❌ No relevant context found in the documents for your question.';
+            return;
+        }
+        
+        // Combine context from top documents
+        const context = relevantDocs.map(item => item.doc.content).join(' ').substring(0, 2000);
+        
+        // Use the QA model to generate an answer
+        const qaResult = await qaModel(question, context);
+        
+        let response = `🤖 AI Answer:\n${qaResult.answer}\n\n`;
+        response += `📊 Confidence: ${(qaResult.score * 100).toFixed(1)}%\n\n`;
+        response += `📚 Sources: ${relevantDocs.length} documents\n`;
+        response += `🔍 Best match: "${relevantDocs[0].doc.title}" (similarity: ${relevantDocs[0].similarity.toFixed(3)})\n\n`;
+        response += `📝 Context used:\n${context.substring(0, 300)}...`;
+        
+        responseDiv.textContent = response;
+        
+    } catch (error) {
+        console.error('Chat error:', error);
+        responseDiv.textContent = `❌ Error generating response: ${error.message}`;
+    } finally {
+        chatBtn.disabled = false;
+    }
+}
+
+async function chatWithLLM() {
+    const prompt = document.getElementById('llmPrompt').value;
+    const maxTokens = parseInt(document.getElementById('maxTokens').value);
+    const temperature = parseFloat(document.getElementById('temperature').value);
+    const responseDiv = document.getElementById('llmResponse');
+    const llmBtn = document.getElementById('llmBtn');
+    
+    if (!prompt.trim()) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ Please enter a prompt';
+        return;
+    }
+    
+    if (!transformersReady || !modelsInitialized || !llmModel) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ LLM model not loaded yet. Please initialize models first!';
+        return;
+    }
+    
+    responseDiv.style.display = 'block';
+    responseDiv.innerHTML = '<div class="loading"></div> Generating text with LLM...';
+    llmBtn.disabled = true;
+    
+    try {
+        // Generate text with the LLM
+        const result = await llmModel(prompt, {
+            max_new_tokens: maxTokens,
+            temperature: temperature,
+            do_sample: true,
+            return_full_text: false
+        });
+        
+        let generatedText = result[0].generated_text;
+        
+        let response = `🚀 LLM Generated Text:\n\n"${generatedText}"\n\n`;
+        response += `📊 Settings: ${maxTokens} tokens, temperature ${temperature}\n`;
+        response += `🤖 Model: ${loadedModelName ? loadedModelName.split('/')[1] : 'Language Model'}\n`;
+        response += `⏱️ Generated in real-time by your browser!`;
+        
+        responseDiv.textContent = response;
+        
+    } catch (error) {
+        console.error('LLM error:', error);
+        responseDiv.textContent = `❌ Error generating text: ${error.message}`;
+    } finally {
+        llmBtn.disabled = false;
+    }
+}
+
+async function chatWithLLMRAG() {
+    const prompt = document.getElementById('llmPrompt').value;
+    const maxTokens = parseInt(document.getElementById('maxTokens').value);
+    const temperature = parseFloat(document.getElementById('temperature').value);
+    const responseDiv = document.getElementById('llmResponse');
+    const llmRagBtn = document.getElementById('llmRagBtn');
+    
+    if (!prompt.trim()) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ Please enter a prompt';
+        return;
+    }
+    
+    if (!transformersReady || !modelsInitialized || !llmModel || !embeddingModel) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ Models not loaded yet. Please initialize all models first!';
+        return;
+    }
+    
+    responseDiv.style.display = 'block';
+    responseDiv.innerHTML = '<div class="loading"></div> Finding relevant context and generating with LLM...';
+    llmRagBtn.disabled = true;
+    
+    try {
+        // Find relevant documents using semantic search
+        const queryEmbedding = await generateEmbedding(prompt);
+        const relevantDocs = [];
+        
+        documents.forEach(doc => {
+            if (doc.embedding) {
+                const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                if (similarity > 0.1) {
+                    relevantDocs.push({ doc, similarity });
+                }
+            }
+        });
+        
+        relevantDocs.sort((a, b) => b.similarity - a.similarity);
+        relevantDocs.splice(3); // Limit to top 3 documents
+        
+        // Create enhanced prompt with context
+        let enhancedPrompt = prompt;
+        if (relevantDocs.length > 0) {
+            const context = relevantDocs.map(item => item.doc.content.substring(0, 300)).join(' ');
+            enhancedPrompt = `Context: ${context}\n\nQuestion: ${prompt}\n\nAnswer:`;
+        }
+        
+        // Generate text with the LLM using enhanced prompt
+        const result = await llmModel(enhancedPrompt, {
+            max_new_tokens: maxTokens,
+            temperature: temperature,
+            do_sample: true,
+            return_full_text: false
+        });
+        
+        let generatedText = result[0].generated_text;
+        
+        let response = `🤖 LLM + RAG Generated Response:\n\n"${generatedText}"\n\n`;
+        response += `📚 Context: ${relevantDocs.length} relevant documents used\n`;
+        if (relevantDocs.length > 0) {
+            response += `🔍 Best match: "${relevantDocs[0].doc.title}" (similarity: ${relevantDocs[0].similarity.toFixed(3)})\n`;
+        }
+        response += `📊 Settings: ${maxTokens} tokens, temperature ${temperature}\n`;
+        response += `🚀 Model: ${loadedModelName ? loadedModelName.split('/')[1] : 'LLM'} enhanced with document retrieval`;
+        
+        responseDiv.textContent = response;
+        
+    } catch (error) {
+        console.error('LLM+RAG error:', error);
+        responseDiv.textContent = `❌ Error generating response: ${error.message}`;
+    } finally {
+        llmRagBtn.disabled = false;
+    }
+}
+
+async function addDocumentManual() {
+    const title = document.getElementById('docTitle').value || `User Document ${documents.length - 2}`;
+    const content = document.getElementById('docContent').value;
+    const statusDiv = document.getElementById('addStatus');
+    const previewDiv = document.getElementById('docPreview');
+    const addBtn = document.getElementById('addBtn');
+    
+    if (!content.trim()) {
+        statusDiv.style.display = 'block';
+        statusDiv.textContent = '❌ Please enter document content';
+        previewDiv.style.display = 'none';
+        return;
+    }
+    
+    statusDiv.style.display = 'block';
+    statusDiv.innerHTML = '<div class="loading"></div> Adding document...';
+    addBtn.disabled = true;
+    
+    try {
+        const docId = documents.length;
+        const newDocument = {
+            id: docId,
+            title: title,
+            content: content.trim(),
+            embedding: null
+        };
+        
+        // Generate embedding if models are initialized
+        if (transformersReady && modelsInitialized && embeddingModel) {
+            statusDiv.innerHTML = '<div class="loading"></div> Generating AI embedding...';
+            newDocument.embedding = await generateEmbedding(content);
+        }
+        
+        documents.push(newDocument);
+        
+        const preview = content.length > 300 ? content.substring(0, 300) + '...' : content;
+        const status = `✅ Document added successfully!
+📄 Title: ${title}
+📊 Size: ${content.length.toLocaleString()} characters
+📚 Total documents: ${documents.length}${(transformersReady && modelsInitialized) ? '\n🧠 AI embedding generated automatically' : '\n⚠️ AI embedding will be generated when models are loaded'}`;
+        
+        statusDiv.textContent = status;
+        previewDiv.style.display = 'block';
+        previewDiv.textContent = `📖 Preview:\n${preview}`;
+        
+        // Clear form
+        document.getElementById('docTitle').value = '';
+        document.getElementById('docContent').value = '';
+        
+        updateStatus();
+        
+    } catch (error) {
+        console.error('Error adding document:', error);
+        statusDiv.textContent = `❌ Error adding document: ${error.message}`;
+    } finally {
+        addBtn.disabled = false;
+    }
+}
+
+// File upload functionality
+function initFileUpload() {
+    const uploadArea = document.getElementById('uploadArea');
+    const fileInput = document.getElementById('fileInput');
+    
+    if (!uploadArea || !fileInput) return;
+    
+    // Click to select files
+    uploadArea.addEventListener('click', () => {
+        fileInput.click();
+    });
+    
+    // Drag and drop functionality
+    uploadArea.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadArea.classList.add('dragover');
+    });
+    
+    uploadArea.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        uploadArea.classList.remove('dragover');
+    });
+    
+    uploadArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadArea.classList.remove('dragover');
+        const files = e.dataTransfer.files;
+        handleFiles(files);
+    });
+    
+    // File input change
+    fileInput.addEventListener('change', (e) => {
+        handleFiles(e.target.files);
+    });
+}
+
+async function handleFiles(files) {
+    const uploadStatus = document.getElementById('uploadStatus');
+    const uploadProgress = document.getElementById('uploadProgress');
+    const uploadProgressBar = document.getElementById('uploadProgressBar');
+    const uploadProgressText = document.getElementById('uploadProgressText');
+    
+    if (files.length === 0) return;
+    
+    uploadStatus.style.display = 'block';
+    uploadProgress.style.display = 'block';
+    uploadStatus.textContent = '';
+    
+    let successCount = 0;
+    let errorCount = 0;
+    
+    for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const progress = ((i + 1) / files.length) * 100;
+        
+        uploadProgressBar.style.width = progress + '%';
+        if (file.size > 10000) {
+            uploadProgressText.textContent = `Processing large file: ${file.name} (${i + 1}/${files.length}) - chunking for better search...`;
+        } else {
+            uploadProgressText.textContent = `Processing ${file.name} (${i + 1}/${files.length})...`;
+        }
+        
+        try {
+            await processFile(file);
+            successCount++;
+        } catch (error) {
+            console.error(`Error processing ${file.name}:`, error);
+            errorCount++;
+        }
+    }
+    
+    uploadProgress.style.display = 'none';
+    
+    let statusText = `✅ Upload complete!\n📁 ${successCount} files processed successfully`;
+    if (errorCount > 0) {
+        statusText += `\n❌ ${errorCount} files failed to process`;
+    }
+    statusText += `\n📊 Total documents: ${documents.length}`;
+    statusText += `\n🧩 Large files automatically chunked for better search`;
+    
+    uploadStatus.textContent = statusText;
+    updateStatus();
+    
+    // Clear file input
+    document.getElementById('fileInput').value = '';
+}
+
+// Document chunking function for large files
+function chunkDocument(content, maxChunkSize = 1000) {
+    const sentences = content.split(/[.!?]+/).filter(s => s.trim().length > 0);
+    const chunks = [];
+    let currentChunk = '';
+    
+    for (let sentence of sentences) {
+        sentence = sentence.trim();
+        if (currentChunk.length + sentence.length > maxChunkSize && currentChunk.length > 0) {
+            chunks.push(currentChunk.trim());
+            currentChunk = sentence;
+        } else {
+            currentChunk += (currentChunk ? '. ' : '') + sentence;
+        }
+    }
+    
+    if (currentChunk.trim()) {
+        chunks.push(currentChunk.trim());
+    }
+    
+    return chunks.length > 0 ? chunks : [content];
+}
+
+async function processFile(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        
+        reader.onload = async function(e) {
+            try {
+                const content = e.target.result.trim();
+                const baseTitle = file.name.replace(/\.[^/.]+$/, ""); // Remove file extension
+                
+                // Check if document is large and needs chunking
+                if (content.length > 2000) {
+                    // Chunk large documents
+                    const chunks = chunkDocument(content, 1500);
+                    console.log(`📄 Chunking large file: ${chunks.length} chunks created from ${content.length} characters`);
+                    
+                    for (let i = 0; i < chunks.length; i++) {
+                        const chunkTitle = chunks.length > 1 ? `${baseTitle} (Part ${i + 1}/${chunks.length})` : baseTitle;
+                        const newDocument = {
+                            id: documents.length,
+                            title: chunkTitle,
+                            content: chunks[i],
+                            embedding: null
+                        };
+                        
+                        // Generate embedding if models are loaded
+                        if (transformersReady && modelsInitialized && embeddingModel) {
+                            newDocument.embedding = await generateEmbedding(chunks[i]);
+                        }
+                        
+                        documents.push(newDocument);
+                    }
+                } else {
+                    // Small document - process as single document
+                    const newDocument = {
+                        id: documents.length,
+                        title: baseTitle,
+                        content: content,
+                        embedding: null
+                    };
+                    
+                    // Generate embedding if models are loaded
+                    if (transformersReady && modelsInitialized && embeddingModel) {
+                        newDocument.embedding = await generateEmbedding(content);
+                    }
+                    
+                    documents.push(newDocument);
+                }
+                
+                resolve();
+                
+            } catch (error) {
+                reject(error);
+            }
+        };
+        
+        reader.onerror = function() {
+            reject(new Error(`Failed to read file: ${file.name}`));
+        };
+        
+        // Read file as text
+        reader.readAsText(file);
+    });
+}
+
+async function testSystem() {
+    const outputDiv = document.getElementById('testOutput');
+    const testBtn = document.getElementById('testBtn');
+    
+    outputDiv.style.display = 'block';
+    outputDiv.innerHTML = '<div class="loading"></div> Running system tests...';
+    testBtn.disabled = true;
+    
+    try {
+        let output = `🧪 System Test Results:\n\n`;
+        output += `📊 Documents: ${documents.length} loaded\n`;
+        output += `🔧 Transformers.js: ${transformersReady ? '✅ Ready' : '❌ Not ready'}\n`;
+        output += `🧠 Embedding Model: ${embeddingModel ? '✅ Loaded' : '❌ Not loaded'}\n`;
+        output += `🤖 QA Model: ${qaModel ? '✅ Loaded' : '❌ Not loaded'}\n`;
+        output += `🚀 LLM Model: ${llmModel ? '✅ Loaded' : '❌ Not loaded'}\n\n`;
+        
+        if (transformersReady && modelsInitialized && embeddingModel) {
+            output += `🔍 Testing embedding generation...\n`;
+            const testEmbedding = await generateEmbedding("test sentence");
+            output += `✅ Embedding test: Generated ${testEmbedding.length}D vector\n\n`;
+            
+            output += `🔍 Testing semantic search...\n`;
+            const testQuery = "artificial intelligence";
+            const queryEmbedding = await generateEmbedding(testQuery);
+            
+            let testResults = [];
+            documents.forEach(doc => {
+                if (doc.embedding) {
+                    const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                    testResults.push({ doc, similarity });
+                }
+            });
+            testResults.sort((a, b) => b.similarity - a.similarity);
+            
+            if (testResults.length > 0) {
+                output += `✅ Search test: Found ${testResults.length} results\n`;
+                output += `📄 Top result: "${testResults[0].doc.title}" (similarity: ${testResults[0].similarity.toFixed(3)})\n\n`;
+            }
+            
+            if (qaModel) {
+                output += `🤖 Testing QA model...\n`;
+                const context = documents[0].content.substring(0, 500);
+                const testQuestion = "What is artificial intelligence?";
+                const qaResult = await qaModel(testQuestion, context);
+                output += `✅ QA test: Generated answer with ${(qaResult.score * 100).toFixed(1)}% confidence\n`;
+                output += `💬 Answer: ${qaResult.answer.substring(0, 100)}...\n\n`;
+            }
+            
+            if (llmModel) {
+                output += `🚀 Testing LLM model...\n`;
+                const testPrompt = "Explain artificial intelligence:";
+                const llmResult = await llmModel(testPrompt, { max_new_tokens: 30, temperature: 0.7, do_sample: true, return_full_text: false });
+                output += `✅ LLM test: Generated text completion\n`;
+                output += `💬 Generated: "${llmResult[0].generated_text.substring(0, 100)}..."\n\n`;
+            }
+            
+            output += `🎉 All tests passed! System is fully operational.`;
+        } else {
+            output += `⚠️ Models not initialized. Click "Initialize AI Models" first.`;
+        }
+        
+        outputDiv.textContent = output;
+        
+    } catch (error) {
+        console.error('Test error:', error);
+        outputDiv.textContent = `❌ Test failed: ${error.message}`;
+    } finally {
+        testBtn.disabled = false;
+    }
+}
+
+// Initialize UI
+updateStatus();
+
+// Show version info in console
+console.log('🤖 AI-Powered RAG System with Transformers.js');
+console.log('Models: Xenova/all-MiniLM-L6-v2, Xenova/distilbert-base-cased-distilled-squad');
+
+// Export functions for global access
+window.showTab = showTab;
+window.updateSliderValue = updateSliderValue;
+window.initializeModels = initializeModels;
+window.searchDocumentsSemantic = searchDocumentsSemantic;
+window.searchDocumentsKeyword = searchDocumentsKeyword;
+window.chatWithRAG = chatWithRAG;
+window.chatWithLLM = chatWithLLM;
+window.chatWithLLMRAG = chatWithLLMRAG;
+window.addDocumentManual = addDocumentManual;
+window.testSystem = testSystem;

index.html

@@ -1,29 +1,224 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🤖 AI-Powered Document Search & RAG Chat</title>
+    <script type="module">
+        // Import transformers.js 3.0.0 from CDN (new Hugging Face ownership)
+        import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
+        
+        // Make available globally
+        window.transformers = { pipeline, env };
+        window.transformersLoaded = true;
+        
+        console.log('✅ Transformers.js 3.0.0 loaded via ES modules (Hugging Face)');
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0/dist/transformers.min.js"></script>
     <link rel="stylesheet" href="style.css" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
 </head>
-
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
+    <div class="container">
+        <div class="header">
+            <h1>🤖 AI-Powered Document Search & RAG Chat</h1>
+            <p>Real transformer models running in your browser with Transformers.js</p>
+        </div>
+        
+        <div class="status" id="status">
+            📊 Documents: 3 | 🤖 AI Models: Not loaded | 🧠 Embedding Model: Not loaded
+        </div>
+        
+        <div class="tabs">
+            <button class="tab active" onclick="showTab('init')">🚀 Initialize AI</button>
+            <button class="tab" onclick="showTab('chat')">🤖 AI Chat (RAG)</button>
+            <button class="tab" onclick="showTab('llm')">🚀 LLM Chat</button>
+            <button class="tab" onclick="showTab('search')">🔍 Semantic Search</button>
+            <button class="tab" onclick="showTab('add')">📝 Add Documents</button>
+            <button class="tab" onclick="showTab('test')">🧪 System Test</button>
+        </div>
+        
+        <!-- Initialize AI Tab -->
+        <div id="init" class="tab-content active">
+            <div class="alert alert-info">
+                <strong>🚀 Real AI Models!</strong> This system uses actual transformer models via Transformers.js.
+            </div>
+            
+            <div class="model-info">
+                <h4>🧠 Models Being Loaded:</h4>
+                <p><strong>Embedding Model:</strong> Xenova/all-MiniLM-L6-v2 (384-dimensional sentence embeddings)</p>
+                <p><strong>Q&A Model:</strong> Xenova/distilbert-base-cased-distilled-squad (Question Answering)</p>
+                <p><strong>LLM Model:</strong> Auto-selected GPT-2 or DistilGPT-2 (Transformers.js 3.0.0)</p>
+                <p><strong>Size:</strong> ~100MB total (cached after first load)</p>
+                <p><strong>Performance:</strong> CPU inference, ~2-8 seconds per operation</p>
+                <p><strong>Status:</strong> <span id="transformersStatus">⏳ Loading library...</span></p>
+            </div>
+            
+            <div class="alert alert-warning">
+                <strong>⚠️ First Load:</strong> Model downloading may take 1-2 minutes depending on your internet connection. Models are cached for subsequent uses.
+            </div>
+            
+            <button onclick="initializeModels()" id="initBtn" style="font-size: 18px; padding: 15px 30px;">
+                🚀 Initialize Real AI Models
+            </button>
+            
+            <div id="initProgress" style="display: none;">
+                <div class="progress">
+                    <div class="progress-bar" id="progressBar" style="width: 0%"></div>
+                </div>
+                <p id="progressText">Preparing to load models...</p>
+            </div>
+            
+            <div id="initStatus" class="result" style="display: none;"></div>
+        </div>
+        
+        <!-- AI Chat Tab -->
+        <div id="chat" class="tab-content">
+            <div class="alert alert-info">
+                <strong>🤖 Real AI Chat!</strong> Ask questions and get answers from actual transformer models.
+            </div>
+            <div class="alert alert-success">
+                <strong>💡 Try asking:</strong><br>
+                • "What is artificial intelligence?"<br>
+                • "How does space exploration work?"<br>
+                • "What are renewable energy sources?"<br>
+                • "Explain machine learning in simple terms"
+            </div>
+            <div class="grid">
+                <div>
+                    <label for="chatQuestion">Your Question</label>
+                    <textarea id="chatQuestion" rows="3" placeholder="Ask anything about the documents..."></textarea>
+                </div>
+                <div>
+                    <label for="maxContext">Context Documents</label>
+                    <div class="slider-container">
+                        <input type="range" id="maxContext" class="slider" min="1" max="5" value="3" oninput="updateSliderValue('maxContext')">
+                        <span id="maxContextValue" class="slider-value">3</span>
+                    </div>
+                </div>
+            </div>
+            <button onclick="chatWithRAG()" id="chatBtn">🤖 Ask AI</button>
+            <div id="chatResponse" class="result" style="display: none;"></div>
+        </div>
+        
+        <!-- LLM Chat Tab -->
+        <div id="llm" class="tab-content">
+            <div class="alert alert-info">
+                <strong>🚀 Pure LLM Chat!</strong> Chat with a language model (GPT-2 or Llama2.c) running in your browser.
+            </div>
+            <div class="alert alert-success">
+                <strong>💡 Try these prompts:</strong><br>
+                • "Tell me a story about space exploration"<br>
+                • "Explain machine learning in simple terms"<br>
+                • "Write a poem about artificial intelligence"<br>
+                • "What are the benefits of renewable energy?"
+            </div>
+            <div class="grid">
+                <div>
+                    <label for="llmPrompt">Your Prompt</label>
+                    <textarea id="llmPrompt" rows="3" placeholder="Enter your prompt for the language model..."></textarea>
+                </div>
+                <div>
+                    <label for="maxTokens">Max Tokens</label>
+                    <div class="slider-container">
+                        <input type="range" id="maxTokens" class="slider" min="20" max="200" value="100" oninput="updateSliderValue('maxTokens')">
+                        <span id="maxTokensValue" class="slider-value">100</span>
+                    </div>
+                    <label for="temperature">Temperature</label>
+                    <div class="slider-container">
+                        <input type="range" id="temperature" class="slider" min="0.1" max="1.5" step="0.1" value="0.7" oninput="updateSliderValue('temperature')">
+                        <span id="temperatureValue" class="slider-value">0.7</span>
+                    </div>
+                </div>
+            </div>
+            <div style="display: flex; gap: 10px;">
+                <button onclick="chatWithLLM()" id="llmBtn">🚀 Generate Text</button>
+                <button class="btn-secondary" onclick="chatWithLLMRAG()" id="llmRagBtn">🤖 LLM + RAG</button>
+            </div>
+            <div id="llmResponse" class="result" style="display: none;"></div>
+        </div>
+        
+        <!-- Semantic Search Tab -->
+        <div id="search" class="tab-content">
+            <div class="alert alert-info">
+                <strong>🔮 Real semantic search!</strong> Using transformer embeddings to find documents by meaning.
+            </div>
+            <div class="grid">
+                <div>
+                    <label for="searchQuery">Search Query</label>
+                    <input type="text" id="searchQuery" placeholder="Try: 'machine learning', 'Mars missions', 'solar power'">
+                </div>
+                <div>
+                    <label for="maxResults">Max Results</label>
+                    <div class="slider-container">
+                        <input type="range" id="maxResults" class="slider" min="1" max="10" value="5" oninput="updateSliderValue('maxResults')">
+                        <span id="maxResultsValue" class="slider-value">5</span>
+                    </div>
+                </div>
+            </div>
+            <div style="display: flex; gap: 10px;">
+                <button onclick="searchDocumentsSemantic()" id="searchBtn">🔮 Semantic Search</button>
+                <button class="btn-secondary" onclick="searchDocumentsKeyword()">🔤 Keyword Search</button>
+            </div>
+            <div id="searchResults" class="result" style="display: none;"></div>
+        </div>
+        
+        <!-- Add Documents Tab -->
+        <div id="add" class="tab-content">
+            <div class="alert alert-info">
+                <strong>📚 Expand your knowledge base!</strong> Upload files or paste text with real AI embeddings.
+            </div>
+            
+            <!-- File Upload Section -->
+            <div class="upload-section">
+                <h4>📁 Upload Files</h4>
+                <div class="upload-area" id="uploadArea">
+                    <div class="upload-content">
+                        <div class="upload-icon">📄</div>
+                        <div class="upload-text">
+                            <strong>Drop files here or click to select</strong>
+                            <br>Supports: .md, .txt, .json, .csv, .html, .js, .py, .xml
+                        </div>
+                    </div>
+                    <input type="file" id="fileInput" accept=".md,.txt,.json,.csv,.html,.js,.py,.xml,.rst,.yaml,.yml" multiple style="display: none;">
+                </div>
+                <div id="uploadProgress" class="progress-container" style="display: none;">
+                    <div class="progress-bar" id="uploadProgressBar"></div>
+                    <div class="progress-text" id="uploadProgressText">Processing files...</div>
+                </div>
+                <div id="uploadStatus" class="result" style="display: none;"></div>
+            </div>
+            
+            <div class="divider">OR</div>
+            
+            <!-- Manual Entry Section -->
+            <div class="manual-entry">
+                <h4>✏️ Manual Entry</h4>
+                <div class="form-group">
+                    <label for="docTitle">Document Title (optional)</label>
+                    <input type="text" id="docTitle" placeholder="Enter document title...">
+                </div>
+                <div class="form-group">
+                    <label for="docContent">Document Content</label>
+                    <textarea id="docContent" rows="8" placeholder="Paste your document text here..."></textarea>
+                </div>
+                <button onclick="addDocumentManual()" id="addBtn">📝 Add Document</button>
+                <div class="grid">
+                    <div id="addStatus" class="result" style="display: none;"></div>
+                    <div id="docPreview" class="result" style="display: none;"></div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- System Test Tab -->
+        <div id="test" class="tab-content">
+            <div class="alert alert-info">
+                <strong>🧪 Test the system</strong> to verify AI models are working correctly.
+            </div>
+            <button onclick="testSystem()" id="testBtn">🧪 Run System Test</button>
+            <div id="testOutput" class="result" style="display: none;"></div>
+        </div>
+    </div>
 
     <script src="index.js" type="module"></script>
 </body>
-
 </html>

index.js

@@ -1,76 +1,954 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.4.1';
+// Import transformers.js 3.0.0 from CDN (new Hugging Face ownership)
+import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
 
-// Reference the elements that we will need
-const status = document.getElementById('status');
-const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
-const example = document.getElementById('example');
+// Make available globally
+window.transformers = { pipeline, env };
+window.transformersLoaded = true;
 
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
+console.log('✅ Transformers.js 3.0.0 loaded via ES modules (Hugging Face)');
 
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
+// Global variables for transformers.js
+let transformersPipeline = null;
+let transformersEnv = null;
+let transformersReady = false;
 
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
+// Document storage and AI state
+let documents = [
+    {
+        id: 0,
+        title: "Artificial Intelligence Overview",
+        content: "Artificial Intelligence (AI) is a branch of computer science that aims to create intelligent machines that work and react like humans. Some activities computers with AI are designed for include speech recognition, learning, planning, and problem-solving. AI is used in healthcare, finance, transportation, and entertainment. Machine learning enables computers to learn from experience without explicit programming. Deep learning uses neural networks to understand complex patterns in data.",
+        embedding: null
+    },
+    {
+        id: 1,
+        title: "Space Exploration",
+        content: "Space exploration is the ongoing discovery and exploration of celestial structures in outer space through evolving space technology. Physical exploration is conducted by unmanned robotic probes and human spaceflight. Space exploration has been used for geopolitical rivalries like the Cold War. The early era was driven by a Space Race between the Soviet Union and United States. Modern exploration includes Mars missions, the International Space Station, and satellite programs.",
+        embedding: null
+    },
+    {
+        id: 2,
+        title: "Renewable Energy", 
+        content: "Renewable energy comes from naturally replenished resources on a human timescale. It includes sunlight, wind, rain, tides, waves, and geothermal heat. Renewable energy contrasts with fossil fuels that are used faster than replenished. Most renewable sources are sustainable. Solar energy is abundant and promising. Wind energy and hydroelectric power are major contributors to renewable generation worldwide.",
+        embedding: null
+    }
+];
+
+let embeddingModel = null;
+let qaModel = null;
+let llmModel = null;
+let loadedModelName = '';
+let modelsInitialized = false;
+
+// Calculate cosine similarity between two vectors
+function cosineSimilarity(a, b) {
+    const dotProduct = a.reduce((sum, val, i) => sum + val * b[i], 0);
+    const magnitudeA = Math.sqrt(a.reduce((sum, val) => sum + val * val, 0));
+    const magnitudeB = Math.sqrt(b.reduce((sum, val) => sum + val * val, 0));
+    
+    if (magnitudeA === 0 || magnitudeB === 0) return 0;
+    return dotProduct / (magnitudeA * magnitudeB);
+}
+
+// Initialize transformers.js when the script loads
+async function initTransformers() {
+    try {
+        console.log('🔄 Initializing Transformers.js...');
+        
+        // Try ES modules first (preferred method)
+        if (window.transformers && window.transformersLoaded) {
+            console.log('✅ Using ES modules version (Transformers.js 3.0.0)');
+            ({ pipeline: transformersPipeline, env: transformersEnv } = window.transformers);
+        } 
+        // Fallback to UMD version
+        else if (window.Transformers) {
+            console.log('✅ Using UMD version (Transformers.js 3.0.0)');
+            ({ pipeline: transformersPipeline, env: transformersEnv } = window.Transformers);
+        }
+        // Wait for library to load
+        else {
+            console.log('⏳ Waiting for library to load...');
+            let attempts = 0;
+            while (!window.Transformers && !window.transformersLoaded && attempts < 50) {
+                await new Promise(resolve => setTimeout(resolve, 200));
+                attempts++;
+            }
+            
+            if (window.transformers && window.transformersLoaded) {
+                ({ pipeline: transformersPipeline, env: transformersEnv } = window.transformers);
+            } else if (window.Transformers) {
+                ({ pipeline: transformersPipeline, env: transformersEnv } = window.Transformers);
+            } else {
+                throw new Error('Failed to load Transformers.js library');
+            }
+        }
+        
+        // Configure transformers.js with minimal settings
+        if (transformersEnv) {
+            transformersEnv.allowLocalModels = false;
+            transformersEnv.allowRemoteModels = true;
+            // Let Transformers.js use default WASM paths for better compatibility
+        }
+        
+        transformersReady = true;
+        console.log('✅ Transformers.js initialized successfully');
+        
+        // Update UI to show ready state
+        updateStatus();
+        
+        // Update status indicator
+        const statusSpan = document.getElementById('transformersStatus');
+        if (statusSpan) {
+            statusSpan.textContent = '✅ Ready!';
+            statusSpan.style.color = 'green';
+        }
+        
+    } catch (error) {
+        console.error('❌ Error initializing Transformers.js:', error);
+        
+        // Show error in UI
+        const statusDiv = document.getElementById('status');
+        if (statusDiv) {
+            statusDiv.textContent = `❌ Failed to load Transformers.js: ${error.message}`;
+            statusDiv.style.color = 'red';
+        }
+        
+        // Update status indicator
+        const statusSpan = document.getElementById('transformersStatus');
+        if (statusSpan) {
+            statusSpan.textContent = `❌ Failed: ${error.message}`;
+            statusSpan.style.color = 'red';
+        }
+    }
+}
+
+// Initialize when page loads
+document.addEventListener('DOMContentLoaded', function() {
+    initTransformers();
+    initFileUpload();
 });
 
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
+// UI Functions
+function showTab(tabName) {
+    // Hide all tabs
+    document.querySelectorAll('.tab-content').forEach(tab => {
+        tab.classList.remove('active');
+    });
+    document.querySelectorAll('.tab').forEach(button => {
+        button.classList.remove('active');
+    });
+    
+    // Show selected tab
+    document.getElementById(tabName).classList.add('active');
+    event.target.classList.add('active');
+}
+
+function updateSliderValue(sliderId) {
+    const slider = document.getElementById(sliderId);
+    const valueSpan = document.getElementById(sliderId + 'Value');
+    valueSpan.textContent = slider.value;
+}
+
+function updateStatus() {
+    const status = document.getElementById('status');
+    const transformersStatus = transformersReady ? 'Ready' : 'Not ready';
+    const embeddingStatus = embeddingModel ? 'Loaded' : 'Not loaded';
+    const qaStatus = qaModel ? 'Loaded' : 'Not loaded';
+    const llmStatus = llmModel ? 'Loaded' : 'Not loaded';
+    status.textContent = `📊 Documents: ${documents.length} | 🔧 Transformers.js: ${transformersStatus} | 🤖 QA: ${qaStatus} | 🧠 Embedding: ${embeddingStatus} | 🚀 LLM: ${llmStatus}`;
+}
+
+function updateProgress(percent, text) {
+    const progressBar = document.getElementById('progressBar');
+    const progressText = document.getElementById('progressText');
+    progressBar.style.width = percent + '%';
+    progressText.textContent = text;
+}
+
+// AI Functions
+async function initializeModels() {
+    const statusDiv = document.getElementById('initStatus');
+    const progressDiv = document.getElementById('initProgress');
+    const initBtn = document.getElementById('initBtn');
+    
+    statusDiv.style.display = 'block';
+    progressDiv.style.display = 'block';
+    initBtn.disabled = true;
+    
+    try {
+        // Check if transformers.js is ready
+        if (!transformersReady || !transformersPipeline) {
+            updateProgress(5, "Waiting for Transformers.js to initialize...");
+            statusDiv.innerHTML = '🔄 Initializing Transformers.js library...';
+            
+            // Wait for transformers.js to be ready
+            let attempts = 0;
+            while (!transformersReady && attempts < 30) {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                attempts++;
+            }
+            
+            if (!transformersReady) {
+                throw new Error('Transformers.js failed to initialize. Please refresh the page.');
+            }
+        }
+        
+        updateProgress(10, "Loading embedding model...");
+        statusDiv.innerHTML = '🔄 Loading embedding model (Xenova/all-MiniLM-L6-v2)...';
+        
+        // Load embedding model with progress tracking
+        embeddingModel = await transformersPipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
+            progress_callback: (progress) => {
+                if (progress.status === 'downloading') {
+                    const percent = progress.loaded && progress.total ? 
+                        Math.round((progress.loaded / progress.total) * 100) : 0;
+                    statusDiv.innerHTML = `🔄 Downloading embedding model: ${percent}%`;
+                }
+            }
+        });
+        
+        updateProgress(40, "Loading question-answering model...");
+        statusDiv.innerHTML = '🔄 Loading QA model (Xenova/distilbert-base-cased-distilled-squad)...';
+        
+        // Load QA model with progress tracking
+        qaModel = await transformersPipeline('question-answering', 'Xenova/distilbert-base-cased-distilled-squad', {
+            progress_callback: (progress) => {
+                if (progress.status === 'downloading') {
+                    const percent = progress.loaded && progress.total ? 
+                        Math.round((progress.loaded / progress.total) * 100) : 0;
+                    statusDiv.innerHTML = `🔄 Downloading QA model: ${percent}%`;
+                }
+            }
+        });
+        
+        updateProgress(70, "Loading language model...");
+        statusDiv.innerHTML = '🔄 Loading LLM (trying SmolLM models)...';
+        
+        // Load LLM model - Stable Transformers.js 3.0.0 configuration
+        const modelsToTry = [
+            {
+                name: 'Xenova/gpt2',
+                options: {}
+            },
+            {
+                name: 'Xenova/distilgpt2', 
+                options: {}
+            }
+        ];
+        
+        let modelLoaded = false;
+        for (const model of modelsToTry) {
+            try {
+                console.log(`Trying to load ${model.name}...`);
+                statusDiv.innerHTML = `🔄 Loading LLM (${model.name})...`;
+                
+                // Load LLM with progress tracking
+                llmModel = await transformersPipeline('text-generation', model.name, {
+                    progress_callback: (progress) => {
+                        if (progress.status === 'downloading') {
+                            const percent = progress.loaded && progress.total ? 
+                                Math.round((progress.loaded / progress.total) * 100) : 0;
+                            statusDiv.innerHTML = `🔄 Downloading ${model.name}: ${percent}%`;
+                        }
+                    }
+                });
+                
+                console.log(`✅ Successfully loaded ${model.name}`);
+                loadedModelName = model.name;
+                modelLoaded = true;
+                break;
+            } catch (error) {
+                console.warn(`${model.name} failed:`, error);
+            }
+        }
+        
+        if (!modelLoaded) {
+            throw new Error('Failed to load any LLM model');
+        }
+        
+        updateProgress(85, "Generating embeddings for documents...");
+        statusDiv.innerHTML = '🔄 Generating embeddings for existing documents...';
+        
+        // Generate embeddings for all existing documents
+        for (let i = 0; i < documents.length; i++) {
+            const doc = documents[i];
+            updateProgress(85 + (i / documents.length) * 10, `Processing document ${i + 1}/${documents.length}...`);
+            doc.embedding = await generateEmbedding(doc.content);
+        }
+        
+        updateProgress(100, "Initialization complete!");
+        modelsInitialized = true;
+        
+        statusDiv.innerHTML = `✅ AI Models initialized successfully!
+🧠 Embedding Model: Xenova/all-MiniLM-L6-v2 (384 dimensions)
+🤖 QA Model: Xenova/distilbert-base-cased-distilled-squad
+🚀 LLM Model: ${loadedModelName} (Language model for text generation)
+📚 Documents processed: ${documents.length}
+🔮 Ready for semantic search, Q&A, and LLM chat!
+
+📊 Model Info:
+• Embedding model size: ~23MB
+• QA model size: ~28MB
+• LLM model size: ~15-50MB (depending on model loaded)
+• Total memory usage: ~70-100MB
+• Inference speed: ~2-8 seconds per operation`;
+        
+        updateStatus();
+        
+    } catch (error) {
+        console.error('Error initializing models:', error);
+        statusDiv.innerHTML = `❌ Error initializing models: ${error.message}
+        
+Please check your internet connection and try again.`;
+        updateProgress(0, "Initialization failed");
+    } finally {
+        initBtn.disabled = false;
+        setTimeout(() => {
+            progressDiv.style.display = 'none';
+        }, 2000);
+    }
+}
+
+async function generateEmbedding(text) {
+    if (!transformersReady || !transformersPipeline) {
+        throw new Error('Transformers.js not initialized');
+    }
+    
+    if (!embeddingModel) {
+        throw new Error('Embedding model not loaded');
+    }
+    
+    try {
+        const output = await embeddingModel(text, { pooling: 'mean', normalize: true });
+        return Array.from(output.data);
+    } catch (error) {
+        console.error('Error generating embedding:', error);
+        throw error;
+    }
+}
+
+async function searchDocumentsSemantic() {
+    const query = document.getElementById('searchQuery').value;
+    const maxResults = parseInt(document.getElementById('maxResults').value);
+    const resultsDiv = document.getElementById('searchResults');
+    const searchBtn = document.getElementById('searchBtn');
+    
+    if (!query.trim()) {
+        resultsDiv.style.display = 'block';
+        resultsDiv.textContent = '❌ Please enter a search query';
+        return;
+    }
+    
+    if (!transformersReady || !modelsInitialized || !embeddingModel) {
+        resultsDiv.style.display = 'block';
+        resultsDiv.textContent = '❌ Please initialize AI models first!';
         return;
     }
+    
+    resultsDiv.style.display = 'block';
+    resultsDiv.innerHTML = '<div class="loading"></div> Generating query embedding and searching...';
+    searchBtn.disabled = true;
+    
+    try {
+        // Generate embedding for query
+        const queryEmbedding = await generateEmbedding(query);
+        
+        // Calculate similarities
+        const results = [];
+        documents.forEach(doc => {
+            if (doc.embedding) {
+                const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                results.push({ doc, similarity });
+            }
+        });
+        
+        // Sort by similarity
+        results.sort((a, b) => b.similarity - a.similarity);
+        
+        if (results.length === 0) {
+            resultsDiv.textContent = `❌ No documents with embeddings found for '${query}'`;
+            return;
+        }
+        
+        let output = `🔍 Semantic search results for '${query}':\n\n`;
+        results.slice(0, maxResults).forEach((result, i) => {
+            const doc = result.doc;
+            const similarity = result.similarity;
+            const excerpt = doc.content.length > 200 ? doc.content.substring(0, 200) + '...' : doc.content;
+            output += `**Result ${i + 1}** (similarity: ${similarity.toFixed(3)})\n📄 Title: ${doc.title}\n📝 Content: ${excerpt}\n\n`;
+        });
+        
+        resultsDiv.textContent = output;
+        
+    } catch (error) {
+        console.error('Search error:', error);
+        resultsDiv.textContent = `❌ Error during search: ${error.message}`;
+    } finally {
+        searchBtn.disabled = false;
+    }
+}
 
-    const reader = new FileReader();
+function searchDocumentsKeyword() {
+    const query = document.getElementById('searchQuery').value;
+    const maxResults = parseInt(document.getElementById('maxResults').value);
+    const resultsDiv = document.getElementById('searchResults');
+    
+    if (!query.trim()) {
+        resultsDiv.style.display = 'block';
+        resultsDiv.textContent = '❌ Please enter a search query';
+        return;
+    }
+    
+    resultsDiv.style.display = 'block';
+    resultsDiv.innerHTML = '<div class="loading"></div> Searching keywords...';
+    
+    setTimeout(() => {
+        const results = [];
+        const queryWords = query.toLowerCase().split(/\s+/);
+        
+        documents.forEach(doc => {
+            const contentLower = doc.content.toLowerCase();
+            const titleLower = doc.title.toLowerCase();
+            
+            let matches = 0;
+            queryWords.forEach(word => {
+                matches += (contentLower.match(new RegExp(word, 'g')) || []).length;
+                matches += (titleLower.match(new RegExp(word, 'g')) || []).length * 2;
+            });
+            
+            if (matches > 0) {
+                results.push({ doc, score: matches });
+            }
+        });
+        
+        results.sort((a, b) => b.score - a.score);
+        
+        if (results.length === 0) {
+            resultsDiv.textContent = `❌ No documents found containing '${query}'`;
+            return;
+        }
+        
+        let output = `🔍 Keyword search results for '${query}':\n\n`;
+        results.slice(0, maxResults).forEach((result, i) => {
+            const doc = result.doc;
+            const excerpt = doc.content.length > 200 ? doc.content.substring(0, 200) + '...' : doc.content;
+            output += `**Result ${i + 1}**\n📄 Title: ${doc.title}\n📝 Content: ${excerpt}\n\n`;
+        });
+        
+        resultsDiv.textContent = output;
+    }, 500);
+}
 
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
+async function chatWithRAG() {
+    const question = document.getElementById('chatQuestion').value;
+    const maxContext = parseInt(document.getElementById('maxContext').value);
+    const responseDiv = document.getElementById('chatResponse');
+    const chatBtn = document.getElementById('chatBtn');
+    
+    if (!question.trim()) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ Please enter a question';
+        return;
+    }
+    
+    if (!transformersReady || !modelsInitialized || !embeddingModel || !qaModel) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ AI models not loaded yet. Please initialize them first!';
+        return;
+    }
+    
+    responseDiv.style.display = 'block';
+    responseDiv.innerHTML = '<div class="loading"></div> Generating answer with real AI...';
+    chatBtn.disabled = true;
+    
+    try {
+        // Generate embedding for the question
+        const questionEmbedding = await generateEmbedding(question);
+        
+        // Find relevant documents using semantic similarity
+        const relevantDocs = [];
+        documents.forEach(doc => {
+            if (doc.embedding) {
+                const similarity = cosineSimilarity(questionEmbedding, doc.embedding);
+                if (similarity > 0.1) {
+                    relevantDocs.push({ doc, similarity });
+                }
+            }
+        });
+        
+        relevantDocs.sort((a, b) => b.similarity - a.similarity);
+        relevantDocs.splice(maxContext);
+        
+        if (relevantDocs.length === 0) {
+            responseDiv.textContent = '❌ No relevant context found in the documents for your question.';
+            return;
+        }
+        
+        // Combine context from top documents
+        const context = relevantDocs.map(item => item.doc.content).join(' ').substring(0, 2000);
+        
+        // Use the QA model to generate an answer
+        const qaResult = await qaModel(question, context);
+        
+        let response = `🤖 AI Answer:\n${qaResult.answer}\n\n`;
+        response += `📊 Confidence: ${(qaResult.score * 100).toFixed(1)}%\n\n`;
+        response += `📚 Sources: ${relevantDocs.length} documents\n`;
+        response += `🔍 Best match: "${relevantDocs[0].doc.title}" (similarity: ${relevantDocs[0].similarity.toFixed(3)})\n\n`;
+        response += `📝 Context used:\n${context.substring(0, 300)}...`;
+        
+        responseDiv.textContent = response;
+        
+    } catch (error) {
+        console.error('Chat error:', error);
+        responseDiv.textContent = `❌ Error generating response: ${error.message}`;
+    } finally {
+        chatBtn.disabled = false;
+    }
+}
 
-    reader.readAsDataURL(file);
-});
+async function chatWithLLM() {
+    const prompt = document.getElementById('llmPrompt').value;
+    const maxTokens = parseInt(document.getElementById('maxTokens').value);
+    const temperature = parseFloat(document.getElementById('temperature').value);
+    const responseDiv = document.getElementById('llmResponse');
+    const llmBtn = document.getElementById('llmBtn');
+    
+    if (!prompt.trim()) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ Please enter a prompt';
+        return;
+    }
+    
+    if (!transformersReady || !modelsInitialized || !llmModel) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ LLM model not loaded yet. Please initialize models first!';
+        return;
+    }
+    
+    responseDiv.style.display = 'block';
+    responseDiv.innerHTML = '<div class="loading"></div> Generating text with LLM...';
+    llmBtn.disabled = true;
+    
+    try {
+        // Generate text with the LLM
+        const result = await llmModel(prompt, {
+            max_new_tokens: maxTokens,
+            temperature: temperature,
+            do_sample: true,
+            return_full_text: false
+        });
+        
+        let generatedText = result[0].generated_text;
+        
+        let response = `🚀 LLM Generated Text:\n\n"${generatedText}"\n\n`;
+        response += `📊 Settings: ${maxTokens} tokens, temperature ${temperature}\n`;
+        response += `🤖 Model: ${loadedModelName ? loadedModelName.split('/')[1] : 'Language Model'}\n`;
+        response += `⏱️ Generated in real-time by your browser!`;
+        
+        responseDiv.textContent = response;
+        
+    } catch (error) {
+        console.error('LLM error:', error);
+        responseDiv.textContent = `❌ Error generating text: ${error.message}`;
+    } finally {
+        llmBtn.disabled = false;
+    }
+}
 
+async function chatWithLLMRAG() {
+    const prompt = document.getElementById('llmPrompt').value;
+    const maxTokens = parseInt(document.getElementById('maxTokens').value);
+    const temperature = parseFloat(document.getElementById('temperature').value);
+    const responseDiv = document.getElementById('llmResponse');
+    const llmRagBtn = document.getElementById('llmRagBtn');
+    
+    if (!prompt.trim()) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ Please enter a prompt';
+        return;
+    }
+    
+    if (!transformersReady || !modelsInitialized || !llmModel || !embeddingModel) {
+        responseDiv.style.display = 'block';
+        responseDiv.textContent = '❌ Models not loaded yet. Please initialize all models first!';
+        return;
+    }
+    
+    responseDiv.style.display = 'block';
+    responseDiv.innerHTML = '<div class="loading"></div> Finding relevant context and generating with LLM...';
+    llmRagBtn.disabled = true;
+    
+    try {
+        // Find relevant documents using semantic search
+        const queryEmbedding = await generateEmbedding(prompt);
+        const relevantDocs = [];
+        
+        documents.forEach(doc => {
+            if (doc.embedding) {
+                const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                if (similarity > 0.1) {
+                    relevantDocs.push({ doc, similarity });
+                }
+            }
+        });
+        
+        relevantDocs.sort((a, b) => b.similarity - a.similarity);
+        relevantDocs.splice(3); // Limit to top 3 documents
+        
+        // Create enhanced prompt with context
+        let enhancedPrompt = prompt;
+        if (relevantDocs.length > 0) {
+            const context = relevantDocs.map(item => item.doc.content.substring(0, 300)).join(' ');
+            enhancedPrompt = `Context: ${context}\n\nQuestion: ${prompt}\n\nAnswer:`;
+        }
+        
+        // Generate text with the LLM using enhanced prompt
+        const result = await llmModel(enhancedPrompt, {
+            max_new_tokens: maxTokens,
+            temperature: temperature,
+            do_sample: true,
+            return_full_text: false
+        });
+        
+        let generatedText = result[0].generated_text;
+        
+        let response = `🤖 LLM + RAG Generated Response:\n\n"${generatedText}"\n\n`;
+        response += `📚 Context: ${relevantDocs.length} relevant documents used\n`;
+        if (relevantDocs.length > 0) {
+            response += `🔍 Best match: "${relevantDocs[0].doc.title}" (similarity: ${relevantDocs[0].similarity.toFixed(3)})\n`;
+        }
+        response += `📊 Settings: ${maxTokens} tokens, temperature ${temperature}\n`;
+        response += `🚀 Model: ${loadedModelName ? loadedModelName.split('/')[1] : 'LLM'} enhanced with document retrieval`;
+        
+        responseDiv.textContent = response;
+        
+    } catch (error) {
+        console.error('LLM+RAG error:', error);
+        responseDiv.textContent = `❌ Error generating response: ${error.message}`;
+    } finally {
+        llmRagBtn.disabled = false;
+    }
+}
 
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
+async function addDocumentManual() {
+    const title = document.getElementById('docTitle').value || `User Document ${documents.length - 2}`;
+    const content = document.getElementById('docContent').value;
+    const statusDiv = document.getElementById('addStatus');
+    const previewDiv = document.getElementById('docPreview');
+    const addBtn = document.getElementById('addBtn');
+    
+    if (!content.trim()) {
+        statusDiv.style.display = 'block';
+        statusDiv.textContent = '❌ Please enter document content';
+        previewDiv.style.display = 'none';
+        return;
+    }
+    
+    statusDiv.style.display = 'block';
+    statusDiv.innerHTML = '<div class="loading"></div> Adding document...';
+    addBtn.disabled = true;
+    
+    try {
+        const docId = documents.length;
+        const newDocument = {
+            id: docId,
+            title: title,
+            content: content.trim(),
+            embedding: null
+        };
+        
+        // Generate embedding if models are initialized
+        if (transformersReady && modelsInitialized && embeddingModel) {
+            statusDiv.innerHTML = '<div class="loading"></div> Generating AI embedding...';
+            newDocument.embedding = await generateEmbedding(content);
+        }
+        
+        documents.push(newDocument);
+        
+        const preview = content.length > 300 ? content.substring(0, 300) + '...' : content;
+        const status = `✅ Document added successfully!
+📄 Title: ${title}
+📊 Size: ${content.length.toLocaleString()} characters
+📚 Total documents: ${documents.length}${(transformersReady && modelsInitialized) ? '\n🧠 AI embedding generated automatically' : '\n⚠️ AI embedding will be generated when models are loaded'}`;
+        
+        statusDiv.textContent = status;
+        previewDiv.style.display = 'block';
+        previewDiv.textContent = `📖 Preview:\n${preview}`;
+        
+        // Clear form
+        document.getElementById('docTitle').value = '';
+        document.getElementById('docContent').value = '';
+        
+        updateStatus();
+        
+    } catch (error) {
+        console.error('Error adding document:', error);
+        statusDiv.textContent = `❌ Error adding document: ${error.message}`;
+    } finally {
+        addBtn.disabled = false;
+    }
+}
 
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
+// File upload functionality
+function initFileUpload() {
+    const uploadArea = document.getElementById('uploadArea');
+    const fileInput = document.getElementById('fileInput');
+    
+    if (!uploadArea || !fileInput) return;
+    
+    // Click to select files
+    uploadArea.addEventListener('click', () => {
+        fileInput.click();
+    });
+    
+    // Drag and drop functionality
+    uploadArea.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadArea.classList.add('dragover');
+    });
+    
+    uploadArea.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        uploadArea.classList.remove('dragover');
+    });
+    
+    uploadArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadArea.classList.remove('dragover');
+        const files = e.dataTransfer.files;
+        handleFiles(files);
+    });
+    
+    // File input change
+    fileInput.addEventListener('change', (e) => {
+        handleFiles(e.target.files);
     });
-    status.textContent = '';
-    output.forEach(renderBox);
 }
 
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
-
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
+async function handleFiles(files) {
+    const uploadStatus = document.getElementById('uploadStatus');
+    const uploadProgress = document.getElementById('uploadProgress');
+    const uploadProgressBar = document.getElementById('uploadProgressBar');
+    const uploadProgressText = document.getElementById('uploadProgressText');
+    
+    if (files.length === 0) return;
+    
+    uploadStatus.style.display = 'block';
+    uploadProgress.style.display = 'block';
+    uploadStatus.textContent = '';
+    
+    let successCount = 0;
+    let errorCount = 0;
+    
+    for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const progress = ((i + 1) / files.length) * 100;
+        
+        uploadProgressBar.style.width = progress + '%';
+        if (file.size > 10000) {
+            uploadProgressText.textContent = `Processing large file: ${file.name} (${i + 1}/${files.length}) - chunking for better search...`;
+        } else {
+            uploadProgressText.textContent = `Processing ${file.name} (${i + 1}/${files.length})...`;
+        }
+        
+        try {
+            await processFile(file);
+            successCount++;
+        } catch (error) {
+            console.error(`Error processing ${file.name}:`, error);
+            errorCount++;
+        }
+    }
+    
+    uploadProgress.style.display = 'none';
+    
+    let statusText = `✅ Upload complete!\n📁 ${successCount} files processed successfully`;
+    if (errorCount > 0) {
+        statusText += `\n❌ ${errorCount} files failed to process`;
+    }
+    statusText += `\n📊 Total documents: ${documents.length}`;
+    statusText += `\n🧩 Large files automatically chunked for better search`;
+    
+    uploadStatus.textContent = statusText;
+    updateStatus();
+    
+    // Clear file input
+    document.getElementById('fileInput').value = '';
+}
 
-    // Draw the box
-    const boxElement = document.createElement('div');
-    boxElement.className = 'bounding-box';
-    Object.assign(boxElement.style, {
-        borderColor: color,
-        left: 100 * xmin + '%',
-        top: 100 * ymin + '%',
-        width: 100 * (xmax - xmin) + '%',
-        height: 100 * (ymax - ymin) + '%',
-    })
+// Document chunking function for large files
+function chunkDocument(content, maxChunkSize = 1000) {
+    const sentences = content.split(/[.!?]+/).filter(s => s.trim().length > 0);
+    const chunks = [];
+    let currentChunk = '';
+    
+    for (let sentence of sentences) {
+        sentence = sentence.trim();
+        if (currentChunk.length + sentence.length > maxChunkSize && currentChunk.length > 0) {
+            chunks.push(currentChunk.trim());
+            currentChunk = sentence;
+        } else {
+            currentChunk += (currentChunk ? '. ' : '') + sentence;
+        }
+    }
+    
+    if (currentChunk.trim()) {
+        chunks.push(currentChunk.trim());
+    }
+    
+    return chunks.length > 0 ? chunks : [content];
+}
 
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
+async function processFile(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        
+        reader.onload = async function(e) {
+            try {
+                const content = e.target.result.trim();
+                const baseTitle = file.name.replace(/\.[^/.]+$/, ""); // Remove file extension
+                
+                // Check if document is large and needs chunking
+                if (content.length > 2000) {
+                    // Chunk large documents
+                    const chunks = chunkDocument(content, 1500);
+                    console.log(`📄 Chunking large file: ${chunks.length} chunks created from ${content.length} characters`);
+                    
+                    for (let i = 0; i < chunks.length; i++) {
+                        const chunkTitle = chunks.length > 1 ? `${baseTitle} (Part ${i + 1}/${chunks.length})` : baseTitle;
+                        const newDocument = {
+                            id: documents.length,
+                            title: chunkTitle,
+                            content: chunks[i],
+                            embedding: null
+                        };
+                        
+                        // Generate embedding if models are loaded
+                        if (transformersReady && modelsInitialized && embeddingModel) {
+                            newDocument.embedding = await generateEmbedding(chunks[i]);
+                        }
+                        
+                        documents.push(newDocument);
+                    }
+                } else {
+                    // Small document - process as single document
+                    const newDocument = {
+                        id: documents.length,
+                        title: baseTitle,
+                        content: content,
+                        embedding: null
+                    };
+                    
+                    // Generate embedding if models are loaded
+                    if (transformersReady && modelsInitialized && embeddingModel) {
+                        newDocument.embedding = await generateEmbedding(content);
+                    }
+                    
+                    documents.push(newDocument);
+                }
+                
+                resolve();
+                
+            } catch (error) {
+                reject(error);
+            }
+        };
+        
+        reader.onerror = function() {
+            reject(new Error(`Failed to read file: ${file.name}`));
+        };
+        
+        // Read file as text
+        reader.readAsText(file);
+    });
+}
 
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
+async function testSystem() {
+    const outputDiv = document.getElementById('testOutput');
+    const testBtn = document.getElementById('testBtn');
+    
+    outputDiv.style.display = 'block';
+    outputDiv.innerHTML = '<div class="loading"></div> Running system tests...';
+    testBtn.disabled = true;
+    
+    try {
+        let output = `🧪 System Test Results:\n\n`;
+        output += `📊 Documents: ${documents.length} loaded\n`;
+        output += `🔧 Transformers.js: ${transformersReady ? '✅ Ready' : '❌ Not ready'}\n`;
+        output += `🧠 Embedding Model: ${embeddingModel ? '✅ Loaded' : '❌ Not loaded'}\n`;
+        output += `🤖 QA Model: ${qaModel ? '✅ Loaded' : '❌ Not loaded'}\n`;
+        output += `🚀 LLM Model: ${llmModel ? '✅ Loaded' : '❌ Not loaded'}\n\n`;
+        
+        if (transformersReady && modelsInitialized && embeddingModel) {
+            output += `🔍 Testing embedding generation...\n`;
+            const testEmbedding = await generateEmbedding("test sentence");
+            output += `✅ Embedding test: Generated ${testEmbedding.length}D vector\n\n`;
+            
+            output += `🔍 Testing semantic search...\n`;
+            const testQuery = "artificial intelligence";
+            const queryEmbedding = await generateEmbedding(testQuery);
+            
+            let testResults = [];
+            documents.forEach(doc => {
+                if (doc.embedding) {
+                    const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                    testResults.push({ doc, similarity });
+                }
+            });
+            testResults.sort((a, b) => b.similarity - a.similarity);
+            
+            if (testResults.length > 0) {
+                output += `✅ Search test: Found ${testResults.length} results\n`;
+                output += `📄 Top result: "${testResults[0].doc.title}" (similarity: ${testResults[0].similarity.toFixed(3)})\n\n`;
+            }
+            
+            if (qaModel) {
+                output += `🤖 Testing QA model...\n`;
+                const context = documents[0].content.substring(0, 500);
+                const testQuestion = "What is artificial intelligence?";
+                const qaResult = await qaModel(testQuestion, context);
+                output += `✅ QA test: Generated answer with ${(qaResult.score * 100).toFixed(1)}% confidence\n`;
+                output += `💬 Answer: ${qaResult.answer.substring(0, 100)}...\n\n`;
+            }
+            
+            if (llmModel) {
+                output += `🚀 Testing LLM model...\n`;
+                const testPrompt = "Explain artificial intelligence:";
+                const llmResult = await llmModel(testPrompt, { max_new_tokens: 30, temperature: 0.7, do_sample: true, return_full_text: false });
+                output += `✅ LLM test: Generated text completion\n`;
+                output += `💬 Generated: "${llmResult[0].generated_text.substring(0, 100)}..."\n\n`;
+            }
+            
+            output += `🎉 All tests passed! System is fully operational.`;
+        } else {
+            output += `⚠️ Models not initialized. Click "Initialize AI Models" first.`;
+        }
+        
+        outputDiv.textContent = output;
+        
+    } catch (error) {
+        console.error('Test error:', error);
+        outputDiv.textContent = `❌ Test failed: ${error.message}`;
+    } finally {
+        testBtn.disabled = false;
+    }
 }
+
+// Initialize UI
+updateStatus();
+
+// Show version info in console
+console.log('🤖 AI-Powered RAG System with Transformers.js');
+console.log('Models: Xenova/all-MiniLM-L6-v2, Xenova/distilbert-base-cased-distilled-squad');
+
+// Export functions for global access
+window.showTab = showTab;
+window.updateSliderValue = updateSliderValue;
+window.initializeModels = initializeModels;
+window.searchDocumentsSemantic = searchDocumentsSemantic;
+window.searchDocumentsKeyword = searchDocumentsKeyword;
+window.chatWithRAG = chatWithRAG;
+window.chatWithLLM = chatWithLLM;
+window.chatWithLLMRAG = chatWithLLMRAG;
+window.addDocumentManual = addDocumentManual;
+window.testSystem = testSystem;

rag-backup.html

@@ -0,0 +1,683 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🤖 AI-Powered Document Search & RAG Chat</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+        
+        .header h1 { font-size: 2.5em; margin-bottom: 10px; }
+        .header p { font-size: 1.2em; opacity: 0.9; }
+        
+        .status {
+            background: #f8f9fa;
+            padding: 15px 30px;
+            border-bottom: 1px solid #e9ecef;
+            font-weight: 600;
+            color: #495057;
+        }
+        
+        .tabs {
+            display: flex;
+            background: #f8f9fa;
+            border-bottom: 1px solid #e9ecef;
+        }
+        
+        .tab {
+            flex: 1;
+            padding: 15px 20px;
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            transition: all 0.3s;
+            border-bottom: 3px solid transparent;
+        }
+        
+        .tab:hover { background: #e9ecef; }
+        .tab.active { background: white; border-bottom-color: #667eea; color: #667eea; }
+        
+        .tab-content {
+            display: none;
+            padding: 30px;
+        }
+        
+        .tab-content.active { display: block; }
+        
+        .form-group {
+            margin-bottom: 20px;
+        }
+        
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 600;
+            color: #495057;
+        }
+        
+        input, textarea, select {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #e9ecef;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: border-color 0.3s;
+        }
+        
+        input:focus, textarea:focus, select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        
+        button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        
+        button:hover { transform: translateY(-2px); }
+        
+        .btn-secondary {
+            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
+        }
+        
+        .result {
+            background: #f8f9fa;
+            border: 1px solid #e9ecef;
+            border-radius: 8px;
+            padding: 20px;
+            margin-top: 15px;
+            white-space: pre-wrap;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        
+        .grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+        }
+        
+        .alert {
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+        }
+        
+        .alert-info {
+            background: #d1ecf1;
+            border: 1px solid #b8daff;
+            color: #0c5460;
+        }
+        
+        .alert-success {
+            background: #d4edda;
+            border: 1px solid #c3e6cb;
+            color: #155724;
+        }
+        
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        
+        .slider {
+            flex: 1;
+        }
+        
+        .slider-value {
+            min-width: 40px;
+            text-align: center;
+            font-weight: 600;
+            color: #667eea;
+        }
+        
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #f3f3f3;
+            border-top: 2px solid #667eea;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🤖 AI-Powered Document Search & RAG Chat</h1>
+            <p>Complete RAG system with semantic search and intelligent responses</p>
+        </div>
+        
+        <div class="status" id="status">
+            📊 Documents: 3 | 🤖 AI Models: Not loaded
+        </div>
+        
+        <div class="tabs">
+            <button class="tab active" onclick="showTab('init')">🚀 Initialize AI</button>
+            <button class="tab" onclick="showTab('chat')">🤖 AI Chat (RAG)</button>
+            <button class="tab" onclick="showTab('search')">🔍 Semantic Search</button>
+            <button class="tab" onclick="showTab('add')">📝 Add Documents</button>
+            <button class="tab" onclick="showTab('test')">🧪 System Test</button>
+        </div>
+        
+        <!-- Initialize AI Tab -->
+        <div id="init" class="tab-content active">
+            <div class="alert alert-info">
+                <strong>🚀 Start here!</strong> Initialize the AI system for semantic search and intelligent chat.
+            </div>
+            <div class="alert alert-success">
+                <strong>⚡ Features:</strong><br>
+                • 🔮 <strong>Semantic Search:</strong> AI-powered similarity matching<br>
+                • 🧠 <strong>Smart Chat:</strong> Context-aware responses with document retrieval<br>
+                • 📚 <strong>RAG Pipeline:</strong> Retrieval-Augmented Generation for accurate answers
+            </div>
+            <button onclick="initializeModels()" style="font-size: 18px; padding: 15px 30px;">
+                🚀 Initialize AI Models
+            </button>
+            <div id="initStatus" class="result" style="display: none;"></div>
+        </div>
+        
+        <!-- AI Chat Tab -->
+        <div id="chat" class="tab-content">
+            <div class="alert alert-info">
+                <strong>🤖 Ask questions!</strong> The AI searches through documents and provides intelligent answers.
+            </div>
+            <div class="alert alert-success">
+                <strong>💡 Try asking:</strong><br>
+                • "What is artificial intelligence?"<br>
+                • "How does space exploration work?"<br>
+                • "What are renewable energy sources?"
+            </div>
+            <div class="grid">
+                <div>
+                    <label for="chatQuestion">Your Question</label>
+                    <textarea id="chatQuestion" rows="3" placeholder="Ask anything about the documents..."></textarea>
+                </div>
+                <div>
+                    <label for="maxContext">Context Documents</label>
+                    <div class="slider-container">
+                        <input type="range" id="maxContext" class="slider" min="1" max="5" value="3" oninput="updateSliderValue('maxContext')">
+                        <span id="maxContextValue" class="slider-value">3</span>
+                    </div>
+                </div>
+            </div>
+            <button onclick="chatWithRAG()">🤖 Ask AI</button>
+            <div id="chatResponse" class="result" style="display: none;"></div>
+        </div>
+        
+        <!-- Semantic Search Tab -->
+        <div id="search" class="tab-content">
+            <div class="alert alert-info">
+                <strong>🔮 Semantic search!</strong> Find documents by meaning, not just keywords.
+            </div>
+            <div class="grid">
+                <div>
+                    <label for="searchQuery">Search Query</label>
+                    <input type="text" id="searchQuery" placeholder="Try: 'machine learning', 'Mars missions', 'solar power'">
+                </div>
+                <div>
+                    <label for="maxResults">Max Results</label>
+                    <div class="slider-container">
+                        <input type="range" id="maxResults" class="slider" min="1" max="10" value="5" oninput="updateSliderValue('maxResults')">
+                        <span id="maxResultsValue" class="slider-value">5</span>
+                    </div>
+                </div>
+            </div>
+            <div style="display: flex; gap: 10px;">
+                <button onclick="searchDocumentsSemantic()">🔮 Semantic Search</button>
+                <button class="btn-secondary" onclick="searchDocumentsKeyword()">🔤 Keyword Search</button>
+            </div>
+            <div id="searchResults" class="result" style="display: none;"></div>
+        </div>
+        
+        <!-- Add Documents Tab -->
+        <div id="add" class="tab-content">
+            <div class="alert alert-info">
+                <strong>📚 Expand your knowledge base!</strong> Add your own documents to search and chat with.
+            </div>
+            <div class="form-group">
+                <label for="docTitle">Document Title (optional)</label>
+                <input type="text" id="docTitle" placeholder="Enter document title...">
+            </div>
+            <div class="form-group">
+                <label for="docContent">Document Content</label>
+                <textarea id="docContent" rows="8" placeholder="Paste your document text here..."></textarea>
+            </div>
+            <button onclick="addDocument()">📝 Add Document</button>
+            <div class="grid">
+                <div id="addStatus" class="result" style="display: none;"></div>
+                <div id="docPreview" class="result" style="display: none;"></div>
+            </div>
+        </div>
+        
+        <!-- System Test Tab -->
+        <div id="test" class="tab-content">
+            <div class="alert alert-info">
+                <strong>🧪 Test the system</strong> to verify everything is working correctly.
+            </div>
+            <button onclick="testSystem()">🧪 Run System Test</button>
+            <div id="testOutput" class="result" style="display: none;"></div>
+        </div>
+    </div>
+
+    <script>
+        // Document storage and AI state
+        let documents = [
+            {
+                id: 0,
+                title: "Artificial Intelligence Overview",
+                content: "Artificial Intelligence (AI) is a branch of computer science that aims to create intelligent machines that work and react like humans. Some activities computers with AI are designed for include speech recognition, learning, planning, and problem-solving. AI is used in healthcare, finance, transportation, and entertainment. Machine learning enables computers to learn from experience without explicit programming. Deep learning uses neural networks to understand complex patterns.",
+                embedding: null
+            },
+            {
+                id: 1,
+                title: "Space Exploration",
+                content: "Space exploration is the ongoing discovery and exploration of celestial structures in outer space through evolving space technology. Physical exploration is conducted by unmanned robotic probes and human spaceflight. Space exploration has been used for geopolitical rivalries like the Cold War. The early era was driven by a Space Race between the Soviet Union and United States. Modern exploration includes Mars missions, the International Space Station, and satellite programs.",
+                embedding: null
+            },
+            {
+                id: 2,
+                title: "Renewable Energy", 
+                content: "Renewable energy comes from naturally replenished resources on a human timescale. It includes sunlight, wind, rain, tides, waves, and geothermal heat. Renewable energy contrasts with fossil fuels that are used faster than replenished. Most renewable sources are sustainable. Solar energy is abundant and promising. Wind energy and hydroelectric power are major contributors to renewable generation worldwide.",
+                embedding: null
+            }
+        ];
+
+        let modelsInitialized = false;
+
+        // Simple embedding generation based on word frequency
+        function generateEmbedding(text) {
+            const words = text.toLowerCase().split(/\s+/);
+            const embedding = new Array(10).fill(0);
+            
+            // Word to dimension mapping
+            const wordDims = {
+                'ai': 0, 'artificial': 0, 'intelligence': 0, 'machine': 0, 'learning': 0,
+                'space': 1, 'exploration': 1, 'mars': 1, 'satellite': 1, 'rocket': 1,
+                'energy': 2, 'renewable': 2, 'solar': 2, 'wind': 2, 'power': 2,
+                'computer': 3, 'technology': 3, 'science': 3, 'data': 3,
+                'human': 4, 'people': 4, 'society': 4, 'world': 4,
+                'system': 5, 'network': 5, 'process': 5, 'method': 5,
+                'research': 6, 'study': 6, 'analysis': 6, 'development': 6,
+                'future': 7, 'modern': 7, 'new': 7, 'advanced': 7,
+                'problem': 8, 'solution': 8, 'application': 8, 'use': 8,
+                'important': 9, 'major': 9, 'significant': 9, 'key': 9
+            };
+            
+            // Count word frequencies
+            words.forEach(word => {
+                if (wordDims.hasOwnProperty(word)) {
+                    embedding[wordDims[word]]++;
+                }
+            });
+            
+            // Normalize vector
+            const magnitude = Math.sqrt(embedding.reduce((sum, val) => sum + val * val, 0));
+            if (magnitude > 0) {
+                return embedding.map(val => val / magnitude);
+            }
+            return embedding;
+        }
+
+        // Calculate cosine similarity
+        function cosineSimilarity(a, b) {
+            const dotProduct = a.reduce((sum, val, i) => sum + val * b[i], 0);
+            const magnitudeA = Math.sqrt(a.reduce((sum, val) => sum + val * val, 0));
+            const magnitudeB = Math.sqrt(b.reduce((sum, val) => sum + val * val, 0));
+            
+            if (magnitudeA === 0 || magnitudeB === 0) return 0;
+            return dotProduct / (magnitudeA * magnitudeB);
+        }
+
+        // UI Functions
+        function showTab(tabName) {
+            // Hide all tabs
+            document.querySelectorAll('.tab-content').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            document.querySelectorAll('.tab').forEach(button => {
+                button.classList.remove('active');
+            });
+            
+            // Show selected tab
+            document.getElementById(tabName).classList.add('active');
+            event.target.classList.add('active');
+        }
+
+        function updateSliderValue(sliderId) {
+            const slider = document.getElementById(sliderId);
+            const valueSpan = document.getElementById(sliderId + 'Value');
+            valueSpan.textContent = slider.value;
+        }
+
+        function updateStatus() {
+            const status = document.getElementById('status');
+            status.textContent = `📊 Documents: ${documents.length} | 🤖 AI Models: ${modelsInitialized ? 'Loaded' : 'Not loaded'}`;
+        }
+
+        // AI Functions
+        function initializeModels() {
+            const statusDiv = document.getElementById('initStatus');
+            statusDiv.style.display = 'block';
+            statusDiv.innerHTML = '<div class="loading"></div> Initializing AI models...';
+            
+            setTimeout(() => {
+                modelsInitialized = true;
+                
+                // Generate embeddings for all documents
+                documents.forEach(doc => {
+                    doc.embedding = generateEmbedding(doc.content);
+                });
+                
+                statusDiv.innerHTML = `✅ AI Models initialized successfully!
+🔮 Embeddings generated for all documents
+🧠 Ready for semantic search and RAG chat!
+
+📊 System Status:
+• Documents processed: ${documents.length}
+• Embedding dimensions: 10
+• Similarity algorithm: Cosine similarity
+• Ready for advanced queries!`;
+                
+                updateStatus();
+            }, 2000);
+        }
+
+        function searchDocumentsSemantic() {
+            const query = document.getElementById('searchQuery').value;
+            const maxResults = parseInt(document.getElementById('maxResults').value);
+            const resultsDiv = document.getElementById('searchResults');
+            
+            if (!query.trim()) {
+                resultsDiv.style.display = 'block';
+                resultsDiv.textContent = '❌ Please enter a search query';
+                return;
+            }
+            
+            if (!modelsInitialized) {
+                resultsDiv.style.display = 'block';
+                resultsDiv.textContent = '❌ Please initialize AI models first!';
+                return;
+            }
+            
+            resultsDiv.style.display = 'block';
+            resultsDiv.innerHTML = '<div class="loading"></div> Searching...';
+            
+            setTimeout(() => {
+                const queryEmbedding = generateEmbedding(query);
+                const results = [];
+                
+                documents.forEach(doc => {
+                    if (doc.embedding) {
+                        const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                        results.push({ doc, similarity });
+                    }
+                });
+                
+                results.sort((a, b) => b.similarity - a.similarity);
+                
+                if (results.length === 0) {
+                    resultsDiv.textContent = `❌ No documents found for '${query}'`;
+                    return;
+                }
+                
+                let output = `🔍 Semantic search results for '${query}':\n\n`;
+                results.slice(0, maxResults).forEach((result, i) => {
+                    const doc = result.doc;
+                    const similarity = result.similarity;
+                    const excerpt = doc.content.length > 200 ? doc.content.substring(0, 200) + '...' : doc.content;
+                    output += `**Result ${i + 1}** (similarity: ${similarity.toFixed(3)})\n📄 Title: ${doc.title}\n📝 Content: ${excerpt}\n\n`;
+                });
+                
+                resultsDiv.textContent = output;
+            }, 500);
+        }
+
+        function searchDocumentsKeyword() {
+            const query = document.getElementById('searchQuery').value;
+            const maxResults = parseInt(document.getElementById('maxResults').value);
+            const resultsDiv = document.getElementById('searchResults');
+            
+            if (!query.trim()) {
+                resultsDiv.style.display = 'block';
+                resultsDiv.textContent = '❌ Please enter a search query';
+                return;
+            }
+            
+            resultsDiv.style.display = 'block';
+            resultsDiv.innerHTML = '<div class="loading"></div> Searching...';
+            
+            setTimeout(() => {
+                const results = [];
+                const queryWords = query.toLowerCase().split(/\s+/);
+                
+                documents.forEach(doc => {
+                    const contentLower = doc.content.toLowerCase();
+                    const titleLower = doc.title.toLowerCase();
+                    
+                    let matches = 0;
+                    queryWords.forEach(word => {
+                        matches += (contentLower.match(new RegExp(word, 'g')) || []).length;
+                        matches += (titleLower.match(new RegExp(word, 'g')) || []).length * 2; // Title matches weighted more
+                    });
+                    
+                    if (matches > 0) {
+                        results.push({ doc, score: matches });
+                    }
+                });
+                
+                results.sort((a, b) => b.score - a.score);
+                
+                if (results.length === 0) {
+                    resultsDiv.textContent = `❌ No documents found containing '${query}'`;
+                    return;
+                }
+                
+                let output = `🔍 Keyword search results for '${query}':\n\n`;
+                results.slice(0, maxResults).forEach((result, i) => {
+                    const doc = result.doc;
+                    const excerpt = doc.content.length > 200 ? doc.content.substring(0, 200) + '...' : doc.content;
+                    output += `**Result ${i + 1}**\n📄 Title: ${doc.title}\n📝 Content: ${excerpt}\n\n`;
+                });
+                
+                resultsDiv.textContent = output;
+            }, 500);
+        }
+
+        function chatWithRAG() {
+            const question = document.getElementById('chatQuestion').value;
+            const maxContext = parseInt(document.getElementById('maxContext').value);
+            const responseDiv = document.getElementById('chatResponse');
+            
+            if (!question.trim()) {
+                responseDiv.style.display = 'block';
+                responseDiv.textContent = '❌ Please enter a question';
+                return;
+            }
+            
+            if (!modelsInitialized) {
+                responseDiv.style.display = 'block';
+                responseDiv.textContent = '❌ AI models not loaded yet. Please initialize them first!';
+                return;
+            }
+            
+            responseDiv.style.display = 'block';
+            responseDiv.innerHTML = '<div class="loading"></div> Generating response...';
+            
+            setTimeout(() => {
+                // Use semantic search to find relevant documents
+                const queryEmbedding = generateEmbedding(question);
+                const relevantDocs = [];
+                
+                documents.forEach(doc => {
+                    if (doc.embedding) {
+                        const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                        if (similarity > 0.1) { // Threshold for relevance
+                            relevantDocs.push({ doc, similarity });
+                        }
+                    }
+                });
+                
+                relevantDocs.sort((a, b) => b.similarity - a.similarity);
+                relevantDocs.splice(maxContext); // Limit to maxContext documents
+                
+                if (relevantDocs.length === 0) {
+                    responseDiv.textContent = '❌ No relevant context found. Try asking about AI, space exploration, or renewable energy.';
+                    return;
+                }
+                
+                // Generate response based on context
+                const contextTexts = relevantDocs.map(item => item.doc.content.substring(0, 400));
+                const context = contextTexts.join(' ');
+                
+                // Simple response generation based on question type
+                const questionLower = question.toLowerCase();
+                let response = '';
+                
+                if (questionLower.includes('what') || questionLower.includes('define')) {
+                    response = `🤖 Based on the documents, here's what I found:\n\n${context.substring(0, 500)}...`;
+                } else if (questionLower.includes('how') || questionLower.includes('process') || questionLower.includes('work')) {
+                    response = `🤖 Here's how it works according to the documents:\n\n${context.substring(0, 500)}...`;
+                } else if (questionLower.includes('why') || questionLower.includes('reason')) {
+                    response = `🤖 The reasons include:\n\n${context.substring(0, 500)}...`;
+                } else {
+                    response = `🤖 Based on the relevant documents:\n\n${context.substring(0, 500)}...`;
+                }
+                
+                response += `\n\n📚 Sources: ${relevantDocs.length} documents | Best similarity: ${relevantDocs[0].similarity.toFixed(3)}`;
+                
+                responseDiv.textContent = response;
+            }, 1500);
+        }
+
+        function addDocument() {
+            const title = document.getElementById('docTitle').value || `User Document ${documents.length - 2}`;
+            const content = document.getElementById('docContent').value;
+            const statusDiv = document.getElementById('addStatus');
+            const previewDiv = document.getElementById('docPreview');
+            
+            if (!content.trim()) {
+                statusDiv.style.display = 'block';
+                statusDiv.textContent = '❌ Please enter document content';
+                previewDiv.style.display = 'none';
+                return;
+            }
+            
+            const docId = documents.length;
+            const document = {
+                id: docId,
+                title: title,
+                content: content.trim(),
+                embedding: modelsInitialized ? generateEmbedding(content) : null
+            };
+            
+            documents.push(document);
+            
+            const preview = content.length > 300 ? content.substring(0, 300) + '...' : content;
+            const status = `✅ Document added successfully!
+📄 Title: ${title}
+📊 Size: ${content.length.toLocaleString()} characters
+📚 Total documents: ${documents.length}${modelsInitialized ? '\n🔮 Embedding generated automatically' : ''}`;
+            
+            statusDiv.style.display = 'block';
+            statusDiv.textContent = status;
+            
+            previewDiv.style.display = 'block';
+            previewDiv.textContent = `📖 Preview:\n${preview}`;
+            
+            // Clear form
+            document.getElementById('docTitle').value = '';
+            document.getElementById('docContent').value = '';
+            
+            updateStatus();
+        }
+
+        function testSystem() {
+            const outputDiv = document.getElementById('testOutput');
+            outputDiv.style.display = 'block';
+            outputDiv.innerHTML = '<div class="loading"></div> Running system tests...';
+            
+            setTimeout(() => {
+                if (documents.length === 0) {
+                    outputDiv.textContent = '❌ No documents found!';
+                    return;
+                }
+                
+                // Perform a test search
+                const testQuery = 'AI';
+                const queryEmbedding = generateEmbedding(testQuery);
+                let testResults = [];
+                
+                if (modelsInitialized) {
+                    documents.forEach(doc => {
+                        if (doc.embedding) {
+                            const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                            if (similarity > 0) {
+                                testResults.push({ doc, similarity });
+                            }
+                        }
+                    });
+                    testResults.sort((a, b) => b.similarity - a.similarity);
+                }
+                
+                let output = `✅ System test successful! ${documents.length} documents loaded.\n\n`;
+                
+                if (modelsInitialized) {
+                    output += `🔮 AI Models: ✅ Loaded\n🧮 Embeddings: ✅ Generated\n🔍 Test search for "AI": ${testResults.length} results\n\n`;
+                    if (testResults.length > 0) {
+                        const topResult = testResults[0];
+                        output += `📄 Top result: "${topResult.doc.title}" (similarity: ${topResult.similarity.toFixed(3)})\n`;
+                        output += `📝 Content: ${topResult.doc.content.substring(0, 150)}...`;
+                    }
+                } else {
+                    output += `⚠️  AI Models: Not initialized\n💡 Click "Initialize AI Models" to enable semantic search and RAG chat`;
+                }
+                
+                outputDiv.textContent = output;
+            }, 1000);
+        }
+
+        // Initialize UI
+        updateStatus();
+    </script>
+</body>
+</html>

rag-complete.html

@@ -0,0 +1,1466 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🤖 AI-Powered Document Search & RAG Chat</title>
+    <script type="module">
+        // Import transformers.js 3.0.0 from CDN (new Hugging Face ownership)
+        import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
+        
+        // Make available globally
+        window.transformers = { pipeline, env };
+        window.transformersLoaded = true;
+        
+        console.log('✅ Transformers.js 3.0.0 loaded via ES modules (Hugging Face)');
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0/dist/transformers.min.js"></script>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+        
+        .header h1 { font-size: 2.5em; margin-bottom: 10px; }
+        .header p { font-size: 1.2em; opacity: 0.9; }
+        
+        .status {
+            background: #f8f9fa;
+            padding: 15px 30px;
+            border-bottom: 1px solid #e9ecef;
+            font-weight: 600;
+            color: #495057;
+        }
+        
+        .tabs {
+            display: flex;
+            background: #f8f9fa;
+            border-bottom: 1px solid #e9ecef;
+        }
+        
+        .tab {
+            flex: 1;
+            padding: 15px 20px;
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            transition: all 0.3s;
+            border-bottom: 3px solid transparent;
+        }
+        
+        .tab:hover { background: #e9ecef; }
+        .tab.active { background: white; border-bottom-color: #667eea; color: #667eea; }
+        
+        .tab-content {
+            display: none;
+            padding: 30px;
+        }
+        
+        .tab-content.active { display: block; }
+        
+        .form-group {
+            margin-bottom: 20px;
+        }
+        
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 600;
+            color: #495057;
+        }
+        
+        input, textarea, select {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #e9ecef;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: border-color 0.3s;
+        }
+        
+        input:focus, textarea:focus, select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        
+        button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        
+        button:hover { transform: translateY(-2px); }
+        button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+        
+        .btn-secondary {
+            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
+        }
+        
+        .result {
+            background: #f8f9fa;
+            border: 1px solid #e9ecef;
+            border-radius: 8px;
+            padding: 20px;
+            margin-top: 15px;
+            white-space: pre-wrap;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        
+        .upload-section {
+            margin-bottom: 30px;
+        }
+        
+        .upload-area {
+            border: 2px dashed #007bff;
+            border-radius: 12px;
+            padding: 40px;
+            text-align: center;
+            background: #f8f9ff;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin: 20px 0;
+        }
+        
+        .upload-area:hover {
+            border-color: #0056b3;
+            background: #e3f2fd;
+        }
+        
+        .upload-area.dragover {
+            border-color: #28a745;
+            background: #e8f5e8;
+        }
+        
+        .upload-content {
+            pointer-events: none;
+        }
+        
+        .upload-icon {
+            font-size: 48px;
+            margin-bottom: 15px;
+        }
+        
+        .upload-text {
+            color: #666;
+            font-size: 16px;
+        }
+        
+        .divider {
+            text-align: center;
+            margin: 30px 0;
+            position: relative;
+            color: #666;
+            font-weight: bold;
+            background: white;
+            padding: 0 20px;
+            display: inline-block;
+            width: 100%;
+        }
+        
+        .divider::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: #ddd;
+            z-index: 1;
+        }
+        
+        .manual-entry {
+            margin-top: 20px;
+        }
+        
+        .progress-container {
+            background: #f0f0f0;
+            border-radius: 6px;
+            margin: 15px 0;
+            overflow: hidden;
+            position: relative;
+        }
+        
+        .progress-bar {
+            background: linear-gradient(45deg, #007bff, #0056b3);
+            height: 20px;
+            border-radius: 6px;
+            transition: width 0.3s ease;
+            width: 0%;
+        }
+        
+        .progress-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 12px;
+            font-weight: bold;
+            color: #333;
+            white-space: nowrap;
+        }
+        
+        .grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+        }
+        
+        .alert {
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+        }
+        
+        .alert-info {
+            background: #d1ecf1;
+            border: 1px solid #b8daff;
+            color: #0c5460;
+        }
+        
+        .alert-success {
+            background: #d4edda;
+            border: 1px solid #c3e6cb;
+            color: #155724;
+        }
+        
+        .alert-warning {
+            background: #fff3cd;
+            border: 1px solid #ffeeba;
+            color: #856404;
+        }
+        
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        
+        .slider {
+            flex: 1;
+        }
+        
+        .slider-value {
+            min-width: 40px;
+            text-align: center;
+            font-weight: 600;
+            color: #667eea;
+        }
+        
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #f3f3f3;
+            border-top: 2px solid #667eea;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        
+        .progress {
+            width: 100%;
+            height: 8px;
+            background: #e9ecef;
+            border-radius: 4px;
+            overflow: hidden;
+            margin: 10px 0;
+        }
+        
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            transition: width 0.3s ease;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .model-info {
+            background: #e8f4f8;
+            border: 1px solid #bee5eb;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 15px 0;
+        }
+        
+        .model-info h4 {
+            color: #0c5460;
+            margin-bottom: 8px;
+        }
+        
+        .model-info p {
+            color: #0c5460;
+            font-size: 14px;
+            margin: 5px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🤖 AI-Powered Document Search & RAG Chat</h1>
+            <p>Real transformer models running in your browser with Transformers.js</p>
+        </div>
+        
+        <div class="status" id="status">
+            📊 Documents: 3 | 🤖 AI Models: Not loaded | 🧠 Embedding Model: Not loaded
+        </div>
+        
+        <div class="tabs">
+            <button class="tab active" onclick="showTab('init')">🚀 Initialize AI</button>
+            <button class="tab" onclick="showTab('chat')">🤖 AI Chat (RAG)</button>
+            <button class="tab" onclick="showTab('llm')">🚀 LLM Chat</button>
+            <button class="tab" onclick="showTab('search')">🔍 Semantic Search</button>
+            <button class="tab" onclick="showTab('add')">📝 Add Documents</button>
+            <button class="tab" onclick="showTab('test')">🧪 System Test</button>
+        </div>
+        
+        <!-- Initialize AI Tab -->
+        <div id="init" class="tab-content active">
+            <div class="alert alert-info">
+                <strong>🚀 Real AI Models!</strong> This system uses actual transformer models via Transformers.js.
+            </div>
+            
+            <div class="model-info">
+                <h4>🧠 Models Being Loaded:</h4>
+                <p><strong>Embedding Model:</strong> Xenova/all-MiniLM-L6-v2 (384-dimensional sentence embeddings)</p>
+                <p><strong>Q&A Model:</strong> Xenova/distilbert-base-cased-distilled-squad (Question Answering)</p>
+                <p><strong>LLM Model:</strong> Auto-selected GPT-2 or DistilGPT-2 (Transformers.js 3.0.0)</p>
+                <p><strong>Size:</strong> ~100MB total (cached after first load)</p>
+                <p><strong>Performance:</strong> CPU inference, ~2-8 seconds per operation</p>
+                <p><strong>Status:</strong> <span id="transformersStatus">⏳ Loading library...</span></p>
+            </div>
+            
+            <div class="alert alert-warning">
+                <strong>⚠️ First Load:</strong> Model downloading may take 1-2 minutes depending on your internet connection. Models are cached for subsequent uses.
+            </div>
+            
+            <button onclick="initializeModels()" id="initBtn" style="font-size: 18px; padding: 15px 30px;">
+                🚀 Initialize Real AI Models
+            </button>
+            
+            <div id="initProgress" style="display: none;">
+                <div class="progress">
+                    <div class="progress-bar" id="progressBar" style="width: 0%"></div>
+                </div>
+                <p id="progressText">Preparing to load models...</p>
+            </div>
+            
+            <div id="initStatus" class="result" style="display: none;"></div>
+        </div>
+        
+        <!-- AI Chat Tab -->
+        <div id="chat" class="tab-content">
+            <div class="alert alert-info">
+                <strong>🤖 Real AI Chat!</strong> Ask questions and get answers from actual transformer models.
+            </div>
+            <div class="alert alert-success">
+                <strong>💡 Try asking:</strong><br>
+                • "What is artificial intelligence?"<br>
+                • "How does space exploration work?"<br>
+                • "What are renewable energy sources?"<br>
+                • "Explain machine learning in simple terms"
+            </div>
+            <div class="grid">
+                <div>
+                    <label for="chatQuestion">Your Question</label>
+                    <textarea id="chatQuestion" rows="3" placeholder="Ask anything about the documents..."></textarea>
+                </div>
+                <div>
+                    <label for="maxContext">Context Documents</label>
+                    <div class="slider-container">
+                        <input type="range" id="maxContext" class="slider" min="1" max="5" value="3" oninput="updateSliderValue('maxContext')">
+                        <span id="maxContextValue" class="slider-value">3</span>
+                    </div>
+                </div>
+            </div>
+            <button onclick="chatWithRAG()" id="chatBtn">🤖 Ask AI</button>
+            <div id="chatResponse" class="result" style="display: none;"></div>
+        </div>
+        
+        <!-- LLM Chat Tab -->
+        <div id="llm" class="tab-content">
+            <div class="alert alert-info">
+                <strong>🚀 Pure LLM Chat!</strong> Chat with a language model (GPT-2 or Llama2.c) running in your browser.
+            </div>
+            <div class="alert alert-success">
+                <strong>💡 Try these prompts:</strong><br>
+                • "Tell me a story about space exploration"<br>
+                • "Explain machine learning in simple terms"<br>
+                • "Write a poem about artificial intelligence"<br>
+                • "What are the benefits of renewable energy?"
+            </div>
+            <div class="grid">
+                <div>
+                    <label for="llmPrompt">Your Prompt</label>
+                    <textarea id="llmPrompt" rows="3" placeholder="Enter your prompt for the language model..."></textarea>
+                </div>
+                <div>
+                    <label for="maxTokens">Max Tokens</label>
+                    <div class="slider-container">
+                        <input type="range" id="maxTokens" class="slider" min="20" max="200" value="100" oninput="updateSliderValue('maxTokens')">
+                        <span id="maxTokensValue" class="slider-value">100</span>
+                    </div>
+                    <label for="temperature">Temperature</label>
+                    <div class="slider-container">
+                        <input type="range" id="temperature" class="slider" min="0.1" max="1.5" step="0.1" value="0.7" oninput="updateSliderValue('temperature')">
+                        <span id="temperatureValue" class="slider-value">0.7</span>
+                    </div>
+                </div>
+            </div>
+            <div style="display: flex; gap: 10px;">
+                <button onclick="chatWithLLM()" id="llmBtn">🚀 Generate Text</button>
+                <button class="btn-secondary" onclick="chatWithLLMRAG()" id="llmRagBtn">🤖 LLM + RAG</button>
+            </div>
+            <div id="llmResponse" class="result" style="display: none;"></div>
+        </div>
+        
+        <!-- Semantic Search Tab -->
+        <div id="search" class="tab-content">
+            <div class="alert alert-info">
+                <strong>🔮 Real semantic search!</strong> Using transformer embeddings to find documents by meaning.
+            </div>
+            <div class="grid">
+                <div>
+                    <label for="searchQuery">Search Query</label>
+                    <input type="text" id="searchQuery" placeholder="Try: 'machine learning', 'Mars missions', 'solar power'">
+                </div>
+                <div>
+                    <label for="maxResults">Max Results</label>
+                    <div class="slider-container">
+                        <input type="range" id="maxResults" class="slider" min="1" max="10" value="5" oninput="updateSliderValue('maxResults')">
+                        <span id="maxResultsValue" class="slider-value">5</span>
+                    </div>
+                </div>
+            </div>
+            <div style="display: flex; gap: 10px;">
+                <button onclick="searchDocumentsSemantic()" id="searchBtn">🔮 Semantic Search</button>
+                <button class="btn-secondary" onclick="searchDocumentsKeyword()">🔤 Keyword Search</button>
+            </div>
+            <div id="searchResults" class="result" style="display: none;"></div>
+        </div>
+        
+        <!-- Add Documents Tab -->
+        <div id="add" class="tab-content">
+            <div class="alert alert-info">
+                <strong>📚 Expand your knowledge base!</strong> Upload files or paste text with real AI embeddings.
+            </div>
+            
+            <!-- File Upload Section -->
+            <div class="upload-section">
+                <h4>📁 Upload Files</h4>
+                <div class="upload-area" id="uploadArea">
+                    <div class="upload-content">
+                        <div class="upload-icon">📄</div>
+                        <div class="upload-text">
+                            <strong>Drop files here or click to select</strong>
+                            <br>Supports: .md, .txt, .json, .csv, .html, .js, .py, .xml
+                        </div>
+                    </div>
+                    <input type="file" id="fileInput" accept=".md,.txt,.json,.csv,.html,.js,.py,.xml,.rst,.yaml,.yml" multiple style="display: none;">
+                </div>
+                <div id="uploadProgress" class="progress-container" style="display: none;">
+                    <div class="progress-bar" id="uploadProgressBar"></div>
+                    <div class="progress-text" id="uploadProgressText">Processing files...</div>
+                </div>
+                <div id="uploadStatus" class="result" style="display: none;"></div>
+            </div>
+            
+            <div class="divider">OR</div>
+            
+            <!-- Manual Entry Section -->
+            <div class="manual-entry">
+                <h4>✏️ Manual Entry</h4>
+                <div class="form-group">
+                    <label for="docTitle">Document Title (optional)</label>
+                    <input type="text" id="docTitle" placeholder="Enter document title...">
+                </div>
+                <div class="form-group">
+                    <label for="docContent">Document Content</label>
+                    <textarea id="docContent" rows="8" placeholder="Paste your document text here..."></textarea>
+                </div>
+                <button onclick="addDocumentManual()" id="addBtn">📝 Add Document</button>
+                <div class="grid">
+                    <div id="addStatus" class="result" style="display: none;"></div>
+                    <div id="docPreview" class="result" style="display: none;"></div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- System Test Tab -->
+        <div id="test" class="tab-content">
+            <div class="alert alert-info">
+                <strong>🧪 Test the system</strong> to verify AI models are working correctly.
+            </div>
+            <button onclick="testSystem()" id="testBtn">🧪 Run System Test</button>
+            <div id="testOutput" class="result" style="display: none;"></div>
+        </div>
+    </div>
+
+    <script>
+        // Global variables for transformers.js
+        let pipeline = null;
+        let env = null;
+        let transformersReady = false;
+        
+        // Initialize transformers.js when the script loads
+        async function initTransformers() {
+            try {
+                console.log('🔄 Initializing Transformers.js...');
+                
+                // Try ES modules first (preferred method)
+                if (window.transformers && window.transformersLoaded) {
+                    console.log('✅ Using ES modules version (Transformers.js 3.0.0)');
+                    ({ pipeline, env } = window.transformers);
+                } 
+                // Fallback to UMD version
+                else if (window.Transformers) {
+                    console.log('✅ Using UMD version (Transformers.js 3.0.0)');
+                    ({ pipeline, env } = window.Transformers);
+                }
+                // Wait for library to load
+                else {
+                    console.log('⏳ Waiting for library to load...');
+                    let attempts = 0;
+                    while (!window.Transformers && !window.transformersLoaded && attempts < 50) {
+                        await new Promise(resolve => setTimeout(resolve, 200));
+                        attempts++;
+                    }
+                    
+                    if (window.transformers && window.transformersLoaded) {
+                        ({ pipeline, env } = window.transformers);
+                    } else if (window.Transformers) {
+                        ({ pipeline, env } = window.Transformers);
+                    } else {
+                        throw new Error('Failed to load Transformers.js library');
+                    }
+                }
+                
+                // Configure transformers.js with minimal settings
+                if (env) {
+                    env.allowLocalModels = false;
+                    env.allowRemoteModels = true;
+                    // Let Transformers.js use default WASM paths for better compatibility
+                }
+                
+                transformersReady = true;
+                console.log('✅ Transformers.js initialized successfully');
+                
+                // Update UI to show ready state
+                updateStatus();
+                
+                // Update status indicator
+                const statusSpan = document.getElementById('transformersStatus');
+                if (statusSpan) {
+                    statusSpan.textContent = '✅ Ready!';
+                    statusSpan.style.color = 'green';
+                }
+                
+            } catch (error) {
+                console.error('❌ Error initializing Transformers.js:', error);
+                
+                // Show error in UI
+                const statusDiv = document.getElementById('status');
+                if (statusDiv) {
+                    statusDiv.textContent = `❌ Failed to load Transformers.js: ${error.message}`;
+                    statusDiv.style.color = 'red';
+                }
+                
+                // Update status indicator
+                const statusSpan = document.getElementById('transformersStatus');
+                if (statusSpan) {
+                    statusSpan.textContent = `❌ Failed: ${error.message}`;
+                    statusSpan.style.color = 'red';
+                }
+            }
+        }
+        
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            initTransformers();
+            initFileUpload();
+        });
+        
+        // Document storage and AI state
+        let documents = [
+            {
+                id: 0,
+                title: "Artificial Intelligence Overview",
+                content: "Artificial Intelligence (AI) is a branch of computer science that aims to create intelligent machines that work and react like humans. Some activities computers with AI are designed for include speech recognition, learning, planning, and problem-solving. AI is used in healthcare, finance, transportation, and entertainment. Machine learning enables computers to learn from experience without explicit programming. Deep learning uses neural networks to understand complex patterns in data.",
+                embedding: null
+            },
+            {
+                id: 1,
+                title: "Space Exploration",
+                content: "Space exploration is the ongoing discovery and exploration of celestial structures in outer space through evolving space technology. Physical exploration is conducted by unmanned robotic probes and human spaceflight. Space exploration has been used for geopolitical rivalries like the Cold War. The early era was driven by a Space Race between the Soviet Union and United States. Modern exploration includes Mars missions, the International Space Station, and satellite programs.",
+                embedding: null
+            },
+            {
+                id: 2,
+                title: "Renewable Energy", 
+                content: "Renewable energy comes from naturally replenished resources on a human timescale. It includes sunlight, wind, rain, tides, waves, and geothermal heat. Renewable energy contrasts with fossil fuels that are used faster than replenished. Most renewable sources are sustainable. Solar energy is abundant and promising. Wind energy and hydroelectric power are major contributors to renewable generation worldwide.",
+                embedding: null
+            }
+        ];
+
+        let embeddingModel = null;
+        let qaModel = null;
+        let llmModel = null;
+        let loadedModelName = '';
+        let modelsInitialized = false;
+
+        // Calculate cosine similarity between two vectors
+        function cosineSimilarity(a, b) {
+            const dotProduct = a.reduce((sum, val, i) => sum + val * b[i], 0);
+            const magnitudeA = Math.sqrt(a.reduce((sum, val) => sum + val * val, 0));
+            const magnitudeB = Math.sqrt(b.reduce((sum, val) => sum + val * val, 0));
+            
+            if (magnitudeA === 0 || magnitudeB === 0) return 0;
+            return dotProduct / (magnitudeA * magnitudeB);
+        }
+
+        // UI Functions
+        function showTab(tabName) {
+            // Hide all tabs
+            document.querySelectorAll('.tab-content').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            document.querySelectorAll('.tab').forEach(button => {
+                button.classList.remove('active');
+            });
+            
+            // Show selected tab
+            document.getElementById(tabName).classList.add('active');
+            event.target.classList.add('active');
+        }
+
+        function updateSliderValue(sliderId) {
+            const slider = document.getElementById(sliderId);
+            const valueSpan = document.getElementById(sliderId + 'Value');
+            valueSpan.textContent = slider.value;
+        }
+
+        function updateStatus() {
+            const status = document.getElementById('status');
+            const transformersStatus = transformersReady ? 'Ready' : 'Not ready';
+            const embeddingStatus = embeddingModel ? 'Loaded' : 'Not loaded';
+            const qaStatus = qaModel ? 'Loaded' : 'Not loaded';
+            const llmStatus = llmModel ? 'Loaded' : 'Not loaded';
+            status.textContent = `📊 Documents: ${documents.length} | 🔧 Transformers.js: ${transformersStatus} | 🤖 QA: ${qaStatus} | 🧠 Embedding: ${embeddingStatus} | 🚀 LLM: ${llmStatus}`;
+        }
+
+        function updateProgress(percent, text) {
+            const progressBar = document.getElementById('progressBar');
+            const progressText = document.getElementById('progressText');
+            progressBar.style.width = percent + '%';
+            progressText.textContent = text;
+        }
+
+        // AI Functions
+        async function initializeModels() {
+            const statusDiv = document.getElementById('initStatus');
+            const progressDiv = document.getElementById('initProgress');
+            const initBtn = document.getElementById('initBtn');
+            
+            statusDiv.style.display = 'block';
+            progressDiv.style.display = 'block';
+            initBtn.disabled = true;
+            
+            try {
+                // Check if transformers.js is ready
+                if (!transformersReady || !pipeline) {
+                    updateProgress(5, "Waiting for Transformers.js to initialize...");
+                    statusDiv.innerHTML = '🔄 Initializing Transformers.js library...';
+                    
+                    // Wait for transformers.js to be ready
+                    let attempts = 0;
+                    while (!transformersReady && attempts < 30) {
+                        await new Promise(resolve => setTimeout(resolve, 1000));
+                        attempts++;
+                    }
+                    
+                    if (!transformersReady) {
+                        throw new Error('Transformers.js failed to initialize. Please refresh the page.');
+                    }
+                }
+                
+                updateProgress(10, "Loading embedding model...");
+                statusDiv.innerHTML = '🔄 Loading embedding model (Xenova/all-MiniLM-L6-v2)...';
+                
+                // Load embedding model with progress tracking
+                embeddingModel = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
+                    progress_callback: (progress) => {
+                        if (progress.status === 'downloading') {
+                            const percent = progress.loaded && progress.total ? 
+                                Math.round((progress.loaded / progress.total) * 100) : 0;
+                            statusDiv.innerHTML = `🔄 Downloading embedding model: ${percent}%`;
+                        }
+                    }
+                });
+                
+                updateProgress(40, "Loading question-answering model...");
+                statusDiv.innerHTML = '🔄 Loading QA model (Xenova/distilbert-base-cased-distilled-squad)...';
+                
+                // Load QA model with progress tracking
+                qaModel = await pipeline('question-answering', 'Xenova/distilbert-base-cased-distilled-squad', {
+                    progress_callback: (progress) => {
+                        if (progress.status === 'downloading') {
+                            const percent = progress.loaded && progress.total ? 
+                                Math.round((progress.loaded / progress.total) * 100) : 0;
+                            statusDiv.innerHTML = `🔄 Downloading QA model: ${percent}%`;
+                        }
+                    }
+                });
+                
+                updateProgress(70, "Loading language model...");
+                statusDiv.innerHTML = '🔄 Loading LLM (trying SmolLM models)...';
+                
+                // Load LLM model - Stable Transformers.js 3.0.0 configuration
+                const modelsToTry = [
+                    {
+                        name: 'Xenova/gpt2',
+                        options: {}
+                    },
+                    {
+                        name: 'Xenova/distilgpt2', 
+                        options: {}
+                    }
+                ];
+                
+                let modelLoaded = false;
+                for (const model of modelsToTry) {
+                    try {
+                        console.log(`Trying to load ${model.name}...`);
+                        statusDiv.innerHTML = `🔄 Loading LLM (${model.name})...`;
+                        
+                        // Load LLM with progress tracking
+                        llmModel = await pipeline('text-generation', model.name, {
+                            progress_callback: (progress) => {
+                                if (progress.status === 'downloading') {
+                                    const percent = progress.loaded && progress.total ? 
+                                        Math.round((progress.loaded / progress.total) * 100) : 0;
+                                    statusDiv.innerHTML = `🔄 Downloading ${model.name}: ${percent}%`;
+                                }
+                            }
+                        });
+                        
+                        console.log(`✅ Successfully loaded ${model.name}`);
+                        loadedModelName = model.name;
+                        modelLoaded = true;
+                        break;
+                    } catch (error) {
+                        console.warn(`${model.name} failed:`, error);
+                    }
+                }
+                
+                if (!modelLoaded) {
+                    throw new Error('Failed to load any LLM model');
+                }
+                
+                updateProgress(85, "Generating embeddings for documents...");
+                statusDiv.innerHTML = '🔄 Generating embeddings for existing documents...';
+                
+                // Generate embeddings for all existing documents
+                for (let i = 0; i < documents.length; i++) {
+                    const doc = documents[i];
+                    updateProgress(85 + (i / documents.length) * 10, `Processing document ${i + 1}/${documents.length}...`);
+                    doc.embedding = await generateEmbedding(doc.content);
+                }
+                
+                updateProgress(100, "Initialization complete!");
+                modelsInitialized = true;
+                
+                statusDiv.innerHTML = `✅ AI Models initialized successfully!
+🧠 Embedding Model: Xenova/all-MiniLM-L6-v2 (384 dimensions)
+🤖 QA Model: Xenova/distilbert-base-cased-distilled-squad
+🚀 LLM Model: ${loadedModelName} (Language model for text generation)
+📚 Documents processed: ${documents.length}
+🔮 Ready for semantic search, Q&A, and LLM chat!
+
+📊 Model Info:
+• Embedding model size: ~23MB
+• QA model size: ~28MB
+• LLM model size: ~15-50MB (depending on model loaded)
+• Total memory usage: ~70-100MB
+• Inference speed: ~2-8 seconds per operation`;
+                
+                updateStatus();
+                
+            } catch (error) {
+                console.error('Error initializing models:', error);
+                statusDiv.innerHTML = `❌ Error initializing models: ${error.message}
+                
+Please check your internet connection and try again.`;
+                updateProgress(0, "Initialization failed");
+            } finally {
+                initBtn.disabled = false;
+                setTimeout(() => {
+                    progressDiv.style.display = 'none';
+                }, 2000);
+            }
+        }
+
+        async function generateEmbedding(text) {
+            if (!transformersReady || !pipeline) {
+                throw new Error('Transformers.js not initialized');
+            }
+            
+            if (!embeddingModel) {
+                throw new Error('Embedding model not loaded');
+            }
+            
+            try {
+                const output = await embeddingModel(text, { pooling: 'mean', normalize: true });
+                return Array.from(output.data);
+            } catch (error) {
+                console.error('Error generating embedding:', error);
+                throw error;
+            }
+        }
+
+        async function searchDocumentsSemantic() {
+            const query = document.getElementById('searchQuery').value;
+            const maxResults = parseInt(document.getElementById('maxResults').value);
+            const resultsDiv = document.getElementById('searchResults');
+            const searchBtn = document.getElementById('searchBtn');
+            
+            if (!query.trim()) {
+                resultsDiv.style.display = 'block';
+                resultsDiv.textContent = '❌ Please enter a search query';
+                return;
+            }
+            
+            if (!transformersReady || !modelsInitialized || !embeddingModel) {
+                resultsDiv.style.display = 'block';
+                resultsDiv.textContent = '❌ Please initialize AI models first!';
+                return;
+            }
+            
+            resultsDiv.style.display = 'block';
+            resultsDiv.innerHTML = '<div class="loading"></div> Generating query embedding and searching...';
+            searchBtn.disabled = true;
+            
+            try {
+                // Generate embedding for query
+                const queryEmbedding = await generateEmbedding(query);
+                
+                // Calculate similarities
+                const results = [];
+                documents.forEach(doc => {
+                    if (doc.embedding) {
+                        const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                        results.push({ doc, similarity });
+                    }
+                });
+                
+                // Sort by similarity
+                results.sort((a, b) => b.similarity - a.similarity);
+                
+                if (results.length === 0) {
+                    resultsDiv.textContent = `❌ No documents with embeddings found for '${query}'`;
+                    return;
+                }
+                
+                let output = `🔍 Semantic search results for '${query}':\n\n`;
+                results.slice(0, maxResults).forEach((result, i) => {
+                    const doc = result.doc;
+                    const similarity = result.similarity;
+                    const excerpt = doc.content.length > 200 ? doc.content.substring(0, 200) + '...' : doc.content;
+                    output += `**Result ${i + 1}** (similarity: ${similarity.toFixed(3)})\n📄 Title: ${doc.title}\n📝 Content: ${excerpt}\n\n`;
+                });
+                
+                resultsDiv.textContent = output;
+                
+            } catch (error) {
+                console.error('Search error:', error);
+                resultsDiv.textContent = `❌ Error during search: ${error.message}`;
+            } finally {
+                searchBtn.disabled = false;
+            }
+        }
+
+        function searchDocumentsKeyword() {
+            const query = document.getElementById('searchQuery').value;
+            const maxResults = parseInt(document.getElementById('maxResults').value);
+            const resultsDiv = document.getElementById('searchResults');
+            
+            if (!query.trim()) {
+                resultsDiv.style.display = 'block';
+                resultsDiv.textContent = '❌ Please enter a search query';
+                return;
+            }
+            
+            resultsDiv.style.display = 'block';
+            resultsDiv.innerHTML = '<div class="loading"></div> Searching keywords...';
+            
+            setTimeout(() => {
+                const results = [];
+                const queryWords = query.toLowerCase().split(/\s+/);
+                
+                documents.forEach(doc => {
+                    const contentLower = doc.content.toLowerCase();
+                    const titleLower = doc.title.toLowerCase();
+                    
+                    let matches = 0;
+                    queryWords.forEach(word => {
+                        matches += (contentLower.match(new RegExp(word, 'g')) || []).length;
+                        matches += (titleLower.match(new RegExp(word, 'g')) || []).length * 2;
+                    });
+                    
+                    if (matches > 0) {
+                        results.push({ doc, score: matches });
+                    }
+                });
+                
+                results.sort((a, b) => b.score - a.score);
+                
+                if (results.length === 0) {
+                    resultsDiv.textContent = `❌ No documents found containing '${query}'`;
+                    return;
+                }
+                
+                let output = `🔍 Keyword search results for '${query}':\n\n`;
+                results.slice(0, maxResults).forEach((result, i) => {
+                    const doc = result.doc;
+                    const excerpt = doc.content.length > 200 ? doc.content.substring(0, 200) + '...' : doc.content;
+                    output += `**Result ${i + 1}**\n📄 Title: ${doc.title}\n📝 Content: ${excerpt}\n\n`;
+                });
+                
+                resultsDiv.textContent = output;
+            }, 500);
+        }
+
+        async function chatWithRAG() {
+            const question = document.getElementById('chatQuestion').value;
+            const maxContext = parseInt(document.getElementById('maxContext').value);
+            const responseDiv = document.getElementById('chatResponse');
+            const chatBtn = document.getElementById('chatBtn');
+            
+            if (!question.trim()) {
+                responseDiv.style.display = 'block';
+                responseDiv.textContent = '❌ Please enter a question';
+                return;
+            }
+            
+            if (!transformersReady || !modelsInitialized || !embeddingModel || !qaModel) {
+                responseDiv.style.display = 'block';
+                responseDiv.textContent = '❌ AI models not loaded yet. Please initialize them first!';
+                return;
+            }
+            
+            responseDiv.style.display = 'block';
+            responseDiv.innerHTML = '<div class="loading"></div> Generating answer with real AI...';
+            chatBtn.disabled = true;
+            
+            try {
+                // Generate embedding for the question
+                const questionEmbedding = await generateEmbedding(question);
+                
+                // Find relevant documents using semantic similarity
+                const relevantDocs = [];
+                documents.forEach(doc => {
+                    if (doc.embedding) {
+                        const similarity = cosineSimilarity(questionEmbedding, doc.embedding);
+                        if (similarity > 0.1) {
+                            relevantDocs.push({ doc, similarity });
+                        }
+                    }
+                });
+                
+                relevantDocs.sort((a, b) => b.similarity - a.similarity);
+                relevantDocs.splice(maxContext);
+                
+                if (relevantDocs.length === 0) {
+                    responseDiv.textContent = '❌ No relevant context found in the documents for your question.';
+                    return;
+                }
+                
+                // Combine context from top documents
+                const context = relevantDocs.map(item => item.doc.content).join(' ').substring(0, 2000);
+                
+                // Use the QA model to generate an answer
+                const qaResult = await qaModel(question, context);
+                
+                let response = `🤖 AI Answer:\n${qaResult.answer}\n\n`;
+                response += `📊 Confidence: ${(qaResult.score * 100).toFixed(1)}%\n\n`;
+                response += `📚 Sources: ${relevantDocs.length} documents\n`;
+                response += `🔍 Best match: "${relevantDocs[0].doc.title}" (similarity: ${relevantDocs[0].similarity.toFixed(3)})\n\n`;
+                response += `📝 Context used:\n${context.substring(0, 300)}...`;
+                
+                responseDiv.textContent = response;
+                
+            } catch (error) {
+                console.error('Chat error:', error);
+                responseDiv.textContent = `❌ Error generating response: ${error.message}`;
+            } finally {
+                chatBtn.disabled = false;
+            }
+        }
+
+        async function chatWithLLM() {
+            const prompt = document.getElementById('llmPrompt').value;
+            const maxTokens = parseInt(document.getElementById('maxTokens').value);
+            const temperature = parseFloat(document.getElementById('temperature').value);
+            const responseDiv = document.getElementById('llmResponse');
+            const llmBtn = document.getElementById('llmBtn');
+            
+            if (!prompt.trim()) {
+                responseDiv.style.display = 'block';
+                responseDiv.textContent = '❌ Please enter a prompt';
+                return;
+            }
+            
+            if (!transformersReady || !modelsInitialized || !llmModel) {
+                responseDiv.style.display = 'block';
+                responseDiv.textContent = '❌ LLM model not loaded yet. Please initialize models first!';
+                return;
+            }
+            
+            responseDiv.style.display = 'block';
+            responseDiv.innerHTML = '<div class="loading"></div> Generating text with LLM...';
+            llmBtn.disabled = true;
+            
+            try {
+                // Generate text with the LLM
+                const result = await llmModel(prompt, {
+                    max_new_tokens: maxTokens,
+                    temperature: temperature,
+                    do_sample: true,
+                    return_full_text: false
+                });
+                
+                let generatedText = result[0].generated_text;
+                
+                let response = `🚀 LLM Generated Text:\n\n"${generatedText}"\n\n`;
+                response += `📊 Settings: ${maxTokens} tokens, temperature ${temperature}\n`;
+                response += `🤖 Model: ${loadedModelName ? loadedModelName.split('/')[1] : 'Language Model'}\n`;
+                response += `⏱️ Generated in real-time by your browser!`;
+                
+                responseDiv.textContent = response;
+                
+            } catch (error) {
+                console.error('LLM error:', error);
+                responseDiv.textContent = `❌ Error generating text: ${error.message}`;
+            } finally {
+                llmBtn.disabled = false;
+            }
+        }
+
+        async function chatWithLLMRAG() {
+            const prompt = document.getElementById('llmPrompt').value;
+            const maxTokens = parseInt(document.getElementById('maxTokens').value);
+            const temperature = parseFloat(document.getElementById('temperature').value);
+            const responseDiv = document.getElementById('llmResponse');
+            const llmRagBtn = document.getElementById('llmRagBtn');
+            
+            if (!prompt.trim()) {
+                responseDiv.style.display = 'block';
+                responseDiv.textContent = '❌ Please enter a prompt';
+                return;
+            }
+            
+            if (!transformersReady || !modelsInitialized || !llmModel || !embeddingModel) {
+                responseDiv.style.display = 'block';
+                responseDiv.textContent = '❌ Models not loaded yet. Please initialize all models first!';
+                return;
+            }
+            
+            responseDiv.style.display = 'block';
+            responseDiv.innerHTML = '<div class="loading"></div> Finding relevant context and generating with LLM...';
+            llmRagBtn.disabled = true;
+            
+            try {
+                // Find relevant documents using semantic search
+                const queryEmbedding = await generateEmbedding(prompt);
+                const relevantDocs = [];
+                
+                documents.forEach(doc => {
+                    if (doc.embedding) {
+                        const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                        if (similarity > 0.1) {
+                            relevantDocs.push({ doc, similarity });
+                        }
+                    }
+                });
+                
+                relevantDocs.sort((a, b) => b.similarity - a.similarity);
+                relevantDocs.splice(3); // Limit to top 3 documents
+                
+                // Create enhanced prompt with context
+                let enhancedPrompt = prompt;
+                if (relevantDocs.length > 0) {
+                    const context = relevantDocs.map(item => item.doc.content.substring(0, 300)).join(' ');
+                    enhancedPrompt = `Context: ${context}\n\nQuestion: ${prompt}\n\nAnswer:`;
+                }
+                
+                // Generate text with the LLM using enhanced prompt
+                const result = await llmModel(enhancedPrompt, {
+                    max_new_tokens: maxTokens,
+                    temperature: temperature,
+                    do_sample: true,
+                    return_full_text: false
+                });
+                
+                let generatedText = result[0].generated_text;
+                
+                let response = `🤖 LLM + RAG Generated Response:\n\n"${generatedText}"\n\n`;
+                response += `📚 Context: ${relevantDocs.length} relevant documents used\n`;
+                if (relevantDocs.length > 0) {
+                    response += `🔍 Best match: "${relevantDocs[0].doc.title}" (similarity: ${relevantDocs[0].similarity.toFixed(3)})\n`;
+                }
+                response += `📊 Settings: ${maxTokens} tokens, temperature ${temperature}\n`;
+                response += `🚀 Model: ${loadedModelName ? loadedModelName.split('/')[1] : 'LLM'} enhanced with document retrieval`;
+                
+                responseDiv.textContent = response;
+                
+            } catch (error) {
+                console.error('LLM+RAG error:', error);
+                responseDiv.textContent = `❌ Error generating response: ${error.message}`;
+            } finally {
+                llmRagBtn.disabled = false;
+            }
+        }
+
+        async function addDocument() {
+            const title = document.getElementById('docTitle').value || `User Document ${documents.length - 2}`;
+            const content = document.getElementById('docContent').value;
+            const statusDiv = document.getElementById('addStatus');
+            const previewDiv = document.getElementById('docPreview');
+            const addBtn = document.getElementById('addBtn');
+            
+            if (!content.trim()) {
+                statusDiv.style.display = 'block';
+                statusDiv.textContent = '❌ Please enter document content';
+                previewDiv.style.display = 'none';
+                return;
+            }
+            
+            statusDiv.style.display = 'block';
+            statusDiv.innerHTML = '<div class="loading"></div> Adding document...';
+            addBtn.disabled = true;
+            
+            try {
+                const docId = documents.length;
+                const newDocument = {
+                    id: docId,
+                    title: title,
+                    content: content.trim(),
+                    embedding: null
+                };
+                
+                // Generate embedding if models are initialized
+                if (transformersReady && modelsInitialized && embeddingModel) {
+                    statusDiv.innerHTML = '<div class="loading"></div> Generating AI embedding...';
+                    newDocument.embedding = await generateEmbedding(content);
+                }
+                
+                documents.push(newDocument);
+                
+                const preview = content.length > 300 ? content.substring(0, 300) + '...' : content;
+                const status = `✅ Document added successfully!
+📄 Title: ${title}
+📊 Size: ${content.length.toLocaleString()} characters
+📚 Total documents: ${documents.length}${(transformersReady && modelsInitialized) ? '\n🧠 AI embedding generated automatically' : '\n⚠️ AI embedding will be generated when models are loaded'}`;
+                
+                statusDiv.textContent = status;
+                previewDiv.style.display = 'block';
+                previewDiv.textContent = `📖 Preview:\n${preview}`;
+                
+                // Clear form
+                document.getElementById('docTitle').value = '';
+                document.getElementById('docContent').value = '';
+                
+                updateStatus();
+                
+            } catch (error) {
+                console.error('Error adding document:', error);
+                statusDiv.textContent = `❌ Error adding document: ${error.message}`;
+            } finally {
+                addBtn.disabled = false;
+            }
+        }
+
+        // File upload functionality
+        function initFileUpload() {
+            const uploadArea = document.getElementById('uploadArea');
+            const fileInput = document.getElementById('fileInput');
+            
+            if (!uploadArea || !fileInput) return;
+            
+            // Click to select files
+            uploadArea.addEventListener('click', () => {
+                fileInput.click();
+            });
+            
+            // Drag and drop functionality
+            uploadArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                uploadArea.classList.add('dragover');
+            });
+            
+            uploadArea.addEventListener('dragleave', (e) => {
+                e.preventDefault();
+                uploadArea.classList.remove('dragover');
+            });
+            
+            uploadArea.addEventListener('drop', (e) => {
+                e.preventDefault();
+                uploadArea.classList.remove('dragover');
+                const files = e.dataTransfer.files;
+                handleFiles(files);
+            });
+            
+            // File input change
+            fileInput.addEventListener('change', (e) => {
+                handleFiles(e.target.files);
+            });
+        }
+
+        async function handleFiles(files) {
+            const uploadStatus = document.getElementById('uploadStatus');
+            const uploadProgress = document.getElementById('uploadProgress');
+            const uploadProgressBar = document.getElementById('uploadProgressBar');
+            const uploadProgressText = document.getElementById('uploadProgressText');
+            
+            if (files.length === 0) return;
+            
+            uploadStatus.style.display = 'block';
+            uploadProgress.style.display = 'block';
+            uploadStatus.textContent = '';
+            
+            let successCount = 0;
+            let errorCount = 0;
+            
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                const progress = ((i + 1) / files.length) * 100;
+                
+                uploadProgressBar.style.width = progress + '%';
+                if (file.size > 10000) {
+                    uploadProgressText.textContent = `Processing large file: ${file.name} (${i + 1}/${files.length}) - chunking for better search...`;
+                } else {
+                    uploadProgressText.textContent = `Processing ${file.name} (${i + 1}/${files.length})...`;
+                }
+                
+                try {
+                    await processFile(file);
+                    successCount++;
+                } catch (error) {
+                    console.error(`Error processing ${file.name}:`, error);
+                    errorCount++;
+                }
+            }
+            
+            uploadProgress.style.display = 'none';
+            
+            let statusText = `✅ Upload complete!\n📁 ${successCount} files processed successfully`;
+            if (errorCount > 0) {
+                statusText += `\n❌ ${errorCount} files failed to process`;
+            }
+            statusText += `\n📊 Total documents: ${documents.length}`;
+            statusText += `\n🧩 Large files automatically chunked for better search`;
+            
+            uploadStatus.textContent = statusText;
+            updateStatus();
+            
+            // Clear file input
+            document.getElementById('fileInput').value = '';
+        }
+
+        // Document chunking function for large files
+        function chunkDocument(content, maxChunkSize = 1000) {
+            const sentences = content.split(/[.!?]+/).filter(s => s.trim().length > 0);
+            const chunks = [];
+            let currentChunk = '';
+            
+            for (let sentence of sentences) {
+                sentence = sentence.trim();
+                if (currentChunk.length + sentence.length > maxChunkSize && currentChunk.length > 0) {
+                    chunks.push(currentChunk.trim());
+                    currentChunk = sentence;
+                } else {
+                    currentChunk += (currentChunk ? '. ' : '') + sentence;
+                }
+            }
+            
+            if (currentChunk.trim()) {
+                chunks.push(currentChunk.trim());
+            }
+            
+            return chunks.length > 0 ? chunks : [content];
+        }
+
+        async function processFile(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                
+                reader.onload = async function(e) {
+                    try {
+                        const content = e.target.result.trim();
+                        const baseTitle = file.name.replace(/\.[^/.]+$/, ""); // Remove file extension
+                        
+                        // Check if document is large and needs chunking
+                        if (content.length > 2000) {
+                            // Chunk large documents
+                            const chunks = chunkDocument(content, 1500);
+                            console.log(`📄 Chunking large file: ${chunks.length} chunks created from ${content.length} characters`);
+                            
+                            for (let i = 0; i < chunks.length; i++) {
+                                const chunkTitle = chunks.length > 1 ? `${baseTitle} (Part ${i + 1}/${chunks.length})` : baseTitle;
+                                const newDocument = {
+                                    id: documents.length,
+                                    title: chunkTitle,
+                                    content: chunks[i],
+                                    embedding: null
+                                };
+                                
+                                // Generate embedding if models are loaded
+                                if (transformersReady && modelsInitialized && embeddingModel) {
+                                    newDocument.embedding = await generateEmbedding(chunks[i]);
+                                }
+                                
+                                documents.push(newDocument);
+                            }
+                        } else {
+                            // Small document - process as single document
+                            const newDocument = {
+                                id: documents.length,
+                                title: baseTitle,
+                                content: content,
+                                embedding: null
+                            };
+                            
+                            // Generate embedding if models are loaded
+                            if (transformersReady && modelsInitialized && embeddingModel) {
+                                newDocument.embedding = await generateEmbedding(content);
+                            }
+                            
+                            documents.push(newDocument);
+                        }
+                        
+                        resolve();
+                        
+                    } catch (error) {
+                        reject(error);
+                    }
+                };
+                
+                reader.onerror = function() {
+                    reject(new Error(`Failed to read file: ${file.name}`));
+                };
+                
+                // Read file as text
+                reader.readAsText(file);
+            });
+        }
+
+        async function testSystem() {
+            const outputDiv = document.getElementById('testOutput');
+            const testBtn = document.getElementById('testBtn');
+            
+            outputDiv.style.display = 'block';
+            outputDiv.innerHTML = '<div class="loading"></div> Running system tests...';
+            testBtn.disabled = true;
+            
+            try {
+                let output = `🧪 System Test Results:\n\n`;
+                output += `📊 Documents: ${documents.length} loaded\n`;
+                output += `🔧 Transformers.js: ${transformersReady ? '✅ Ready' : '❌ Not ready'}\n`;
+                output += `🧠 Embedding Model: ${embeddingModel ? '✅ Loaded' : '❌ Not loaded'}\n`;
+                output += `🤖 QA Model: ${qaModel ? '✅ Loaded' : '❌ Not loaded'}\n`;
+                output += `🚀 LLM Model: ${llmModel ? '✅ Loaded' : '❌ Not loaded'}\n\n`;
+                
+                if (transformersReady && modelsInitialized && embeddingModel) {
+                    output += `🔍 Testing embedding generation...\n`;
+                    const testEmbedding = await generateEmbedding("test sentence");
+                    output += `✅ Embedding test: Generated ${testEmbedding.length}D vector\n\n`;
+                    
+                    output += `🔍 Testing semantic search...\n`;
+                    const testQuery = "artificial intelligence";
+                    const queryEmbedding = await generateEmbedding(testQuery);
+                    
+                    let testResults = [];
+                    documents.forEach(doc => {
+                        if (doc.embedding) {
+                            const similarity = cosineSimilarity(queryEmbedding, doc.embedding);
+                            testResults.push({ doc, similarity });
+                        }
+                    });
+                    testResults.sort((a, b) => b.similarity - a.similarity);
+                    
+                    if (testResults.length > 0) {
+                        output += `✅ Search test: Found ${testResults.length} results\n`;
+                        output += `📄 Top result: "${testResults[0].doc.title}" (similarity: ${testResults[0].similarity.toFixed(3)})\n\n`;
+                    }
+                    
+                    if (qaModel) {
+                        output += `🤖 Testing QA model...\n`;
+                        const context = documents[0].content.substring(0, 500);
+                        const testQuestion = "What is artificial intelligence?";
+                        const qaResult = await qaModel(testQuestion, context);
+                        output += `✅ QA test: Generated answer with ${(qaResult.score * 100).toFixed(1)}% confidence\n`;
+                        output += `💬 Answer: ${qaResult.answer.substring(0, 100)}...\n\n`;
+                    }
+                    
+                    if (llmModel) {
+                        output += `🚀 Testing LLM model...\n`;
+                        const testPrompt = "Explain artificial intelligence:";
+                        const llmResult = await llmModel(testPrompt, { max_new_tokens: 30, temperature: 0.7, do_sample: true, return_full_text: false });
+                        output += `✅ LLM test: Generated text completion\n`;
+                        output += `💬 Generated: "${llmResult[0].generated_text.substring(0, 100)}..."\n\n`;
+                    }
+                    
+                    output += `🎉 All tests passed! System is fully operational.`;
+                } else {
+                    output += `⚠️ Models not initialized. Click "Initialize AI Models" first.`;
+                }
+                
+                outputDiv.textContent = output;
+                
+            } catch (error) {
+                console.error('Test error:', error);
+                outputDiv.textContent = `❌ Test failed: ${error.message}`;
+            } finally {
+                testBtn.disabled = false;
+            }
+        }
+
+        // Initialize UI
+        updateStatus();
+        
+        // Show version info in console
+        console.log('🤖 AI-Powered RAG System with Transformers.js');
+        console.log('Models: Xenova/all-MiniLM-L6-v2, Xenova/distilbert-base-cased-distilled-squad');
+    </script>
+</body>
+</html>

start-simple.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+
+# Simple Document Search Startup Script (No Docker Required!)
+
+echo "🚀 Starting Simple Document Search & RAG Chat"
+echo "=============================================="
+echo ""
+echo "✅ No Docker required - everything runs in memory!"
+echo "✅ No external dependencies needed"
+echo "✅ Pure browser-based AI system"
+echo ""
+
+# Check if Python is available
+if command -v python3 &> /dev/null; then
+    PYTHON_CMD="python3"
+elif command -v python &> /dev/null; then
+    PYTHON_CMD="python"
+else
+    echo "❌ Python is not installed. Please install Python 3."
+    exit 1
+fi
+
+# Start the web server
+echo "🌐 Starting web server..."
+echo "📁 Serving files from: $(pwd)"
+echo "🔗 Open your browser and navigate to: http://localhost:8000"
+echo "🛑 Press Ctrl+C to stop the server"
+echo ""
+
+$PYTHON_CMD -m http.server 8000

style.css

@@ -1,76 +1,307 @@
-* {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    font-family: sans-serif;
-}
+* { margin: 0; padding: 0; box-sizing: border-box; }
 
-html,
 body {
-    height: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
 }
 
-body {
-    padding: 32px;
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
+    overflow: hidden;
+}
+
+.header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 30px;
+    text-align: center;
+}
+
+.header h1 { font-size: 2.5em; margin-bottom: 10px; }
+.header p { font-size: 1.2em; opacity: 0.9; }
+
+.status {
+    background: #f8f9fa;
+    padding: 15px 30px;
+    border-bottom: 1px solid #e9ecef;
+    font-weight: 600;
+    color: #495057;
 }
 
-body,
-#container {
+.tabs {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e9ecef;
 }
 
-#container {
-    position: relative;
-    gap: 0.4rem;
+.tab {
+    flex: 1;
+    padding: 15px 20px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 14px;
+    transition: all 0.3s;
+    border-bottom: 3px solid transparent;
+}
 
-    width: 640px;
-    height: 640px;
-    max-width: 100%;
-    max-height: 100%;
+.tab:hover { background: #e9ecef; }
+.tab.active { background: white; border-bottom-color: #667eea; color: #667eea; }
 
-    border: 2px dashed #D1D5DB;
-    border-radius: 0.75rem;
-    overflow: hidden;
+.tab-content {
+    display: none;
+    padding: 30px;
+}
+
+.tab-content.active { display: block; }
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 600;
+    color: #495057;
+}
+
+input, textarea, select {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid #e9ecef;
+    border-radius: 8px;
+    font-size: 16px;
+    transition: border-color 0.3s;
+}
+
+input:focus, textarea:focus, select:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
     cursor: pointer;
-    margin: 1rem;
+    transition: transform 0.2s;
+}
+
+button:hover { transform: translateY(-2px); }
+button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
 
-    background-size: 100% 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-    font-size: 18px;
+.btn-secondary {
+    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
 }
 
-#upload {
-    display: none;
+.result {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 20px;
+    margin-top: 15px;
+    white-space: pre-wrap;
+    max-height: 400px;
+    overflow-y: auto;
 }
 
-svg {
-    pointer-events: none;
+.upload-section {
+    margin-bottom: 30px;
 }
 
-#example {
-    font-size: 14px;
-    text-decoration: underline;
+.upload-area {
+    border: 2px dashed #007bff;
+    border-radius: 12px;
+    padding: 40px;
+    text-align: center;
+    background: #f8f9ff;
     cursor: pointer;
+    transition: all 0.3s ease;
+    margin: 20px 0;
+}
+
+.upload-area:hover {
+    border-color: #0056b3;
+    background: #e3f2fd;
+}
+
+.upload-area.dragover {
+    border-color: #28a745;
+    background: #e8f5e8;
+}
+
+.upload-content {
+    pointer-events: none;
+}
+
+.upload-icon {
+    font-size: 48px;
+    margin-bottom: 15px;
+}
+
+.upload-text {
+    color: #666;
+    font-size: 16px;
 }
 
-#example:hover {
-    color: #2563EB;
+.divider {
+    text-align: center;
+    margin: 30px 0;
+    position: relative;
+    color: #666;
+    font-weight: bold;
+    background: white;
+    padding: 0 20px;
+    display: inline-block;
+    width: 100%;
 }
 
-.bounding-box {
+.divider::before {
+    content: '';
     position: absolute;
-    box-sizing: border-box;
-    border: solid 2px;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: #ddd;
+    z-index: 1;
 }
 
-.bounding-box-label {
-    color: white;
+.manual-entry {
+    margin-top: 20px;
+}
+
+.progress-container {
+    background: #f0f0f0;
+    border-radius: 6px;
+    margin: 15px 0;
+    overflow: hidden;
+    position: relative;
+}
+
+.progress-bar {
+    background: linear-gradient(45deg, #007bff, #0056b3);
+    height: 20px;
+    border-radius: 6px;
+    transition: width 0.3s ease;
+    width: 0%;
+}
+
+.progress-text {
     position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     font-size: 12px;
-    margin: -16px 0 0 -2px;
-    padding: 1px;
+    font-weight: bold;
+    color: #333;
+    white-space: nowrap;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+.alert {
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+.alert-info {
+    background: #d1ecf1;
+    border: 1px solid #b8daff;
+    color: #0c5460;
+}
+
+.alert-success {
+    background: #d4edda;
+    border: 1px solid #c3e6cb;
+    color: #155724;
+}
+
+.alert-warning {
+    background: #fff3cd;
+    border: 1px solid #ffeeba;
+    color: #856404;
+}
+
+.slider-container {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.slider {
+    flex: 1;
+}
+
+.slider-value {
+    min-width: 40px;
+    text-align: center;
+    font-weight: 600;
+    color: #667eea;
+}
+
+.loading {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+.progress {
+    width: 100%;
+    height: 8px;
+    background: #e9ecef;
+    border-radius: 4px;
+    overflow: hidden;
+    margin: 10px 0;
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    transition: width 0.3s ease;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.model-info {
+    background: #e8f4f8;
+    border: 1px solid #bee5eb;
+    border-radius: 8px;
+    padding: 15px;
+    margin: 15px 0;
+}
+
+.model-info h4 {
+    color: #0c5460;
+    margin-bottom: 8px;
+}
+
+.model-info p {
+    color: #0c5460;
+    font-size: 14px;
+    margin: 5px 0;
 }

test-smollm.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SmolLM Test</title>
+    <script type="module">
+        import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
+        window.transformers = { pipeline, env };
+        window.transformersLoaded = true;
+        console.log('✅ Transformers.js loaded');
+    </script>
+</head>
+<body>
+    <h1>SmolLM Model Test</h1>
+    <div id="status">Loading...</div>
+    <button onclick="testSmolLM()">Test SmolLM Models</button>
+    <div id="result"></div>
+
+    <script>
+        async function testSmolLM() {
+            const statusDiv = document.getElementById('status');
+            const resultDiv = document.getElementById('result');
+            
+            statusDiv.textContent = 'Testing SmolLM models...';
+            resultDiv.innerHTML = '';
+            
+            const modelsToTest = [
+                'onnx-community/Phi-3.5-mini-instruct-onnx-web',
+                'Xenova/SmolLM-135M',
+                'Xenova/SmolLM-360M', 
+                'HuggingFaceTB/SmolLM2-135M-Instruct',
+                'HuggingFaceTB/SmolLM-135M'
+            ];
+            
+            for (const modelName of modelsToTest) {
+                try {
+                    resultDiv.innerHTML += `<p>🔄 Testing ${modelName}...</p>`;
+                    console.log(`Testing ${modelName}`);
+                    
+                    const { pipeline } = window.transformers;
+                    const generator = await pipeline('text-generation', modelName);
+                    
+                    const result = await generator('Hello, my name is', {
+                        max_new_tokens: 20,
+                        temperature: 0.7,
+                        do_sample: true,
+                        return_full_text: false
+                    });
+                    
+                    resultDiv.innerHTML += `<p>✅ ${modelName} works!</p>`;
+                    resultDiv.innerHTML += `<p>Generated: "${result[0].generated_text}"</p><hr>`;
+                    
+                    statusDiv.textContent = `✅ Found working model: ${modelName}`;
+                    break;
+                    
+                } catch (error) {
+                    console.error(`${modelName} failed:`, error);
+                    resultDiv.innerHTML += `<p>❌ ${modelName} failed: ${error.message}</p>`;
+                }
+            }
+            
+            if (!resultDiv.innerHTML.includes('✅')) {
+                statusDiv.textContent = '❌ No SmolLM models work with current setup';
+                resultDiv.innerHTML += '<p><strong>Recommendation:</strong> Use DistilGPT-2 or GPT-2 as fallback</p>';
+            }
+        }
+        
+        // Auto-test when page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            setTimeout(testSmolLM, 2000);
+        });
+    </script>
+</body>
+</html>