KI & Agents
Transformers.jsWebLLMWebGPUWebAssemblyIndexedDB

Offline-KI in Web-Apps – Embeddings, Chatbots und lokale Modelle

Embeddings, Chatbots und Dokumentensuche laufen auch offline in Web-Apps, wenn Modelle, Laufzeit und Inhalte lokal verfügbar sind und das Gerät sie trägt.

LKLukas Kopischke
Zuletzt aktualisiert am

Du sitzt im Zug ohne Netz und möchtest in einem Digital Garden wie lukiluki nach verwandten Artikeln suchen oder Fragen an gespeicherte Inhalte stellen. Muss die KI dafür einen Server erreichen – oder kann die Web-App selbst rechnen?

Ja: Web-Apps können Embeddings berechnen, semantisch suchen und mit einem passenden Sprachmodell auch Chatbots offline betreiben. Ebenso sind Textklassifikation, Spracherkennung und bestimmte Bildaufgaben möglich. Die Modelle rechnen dabei auf deinem Gerät. Voraussetzung sind eine offline startbare App sowie lokal verfügbare Modelle, Laufzeitdateien und Inhalte. Ob das sinnvoll funktioniert, hängt von Modellqualität, Browser, Arbeitsspeicher und Rechenleistung ab.

Merksatz

Offline-KI braucht drei Dinge gleichzeitig: eine startbare App, ein lokal ausführbares Modell und lokal verfügbare Daten. Ein installierbares App-Symbol oder ein gespeicherter Chatverlauf reicht dafür nicht.

Wie rechnet eine Web-App ohne KI-Server?

Bei lokaler führt der Browser ein fertig trainiertes Modell aus. Statt eine Frage an eine Cloud-API zu schicken, übergibt die Oberfläche sie an eine lokale Modellbibliothek. Das benötigt keinen API-Schlüssel für die Modellberechnung. Der erstmalige Bezug der App und Modelldateien braucht normalerweise eine Verbindung; danach lässt sich der vorbereitete Funktionsumfang offline nutzen.

Zwei verbreitete Bausteine sind Transformers.js für Text-, Bild- und Audioaufgaben und WebLLM für lokale Sprachmodelle mit Chat-Schnittstelle. Nicht jedes beliebige Modell lässt sich damit laden: Architektur, Dateiformat und unterstützte Rechenoperationen müssen zur Bibliothek passen.

ermöglicht einen CPU-Rechenpfad. kann die Grafikkarte nutzen. Transformers.js unterstützt beide Wege; WebLLM setzt WebGPU voraus. Ein vorhandenes Browser-API beweist noch nicht, dass ein bestimmtes Modell auf dem Gerät läuft. Dafür muss das Modell tatsächlich geladen und mit einer Eingabe ausgeführt werden.

Die Oberfläche bleibt besser bedienbar, wenn rechenintensive Arbeit in einem separaten Web Worker läuft. Dieser führt die Berechnung außerhalb des Hauptthreads aus. Ein Service Worker erfüllt eine andere Hauptaufgabe: Er kann beim Offline-Start gespeicherte App-Dateien ausliefern. WebLLM dokumentiert Worker und Modell-Caches; MDN erklärt den Offline-Start per Service Worker.

Welche KI-Funktionen sind offline möglich?

Die Tabelle beschreibt technische Möglichkeiten mit passenden Modellen, keine gemessenen Geschwindigkeiten oder Zusagen für jedes Handy. Alle Zeilen setzen vollständig lokal verfügbare Dateien voraus.

FunktionGeht offline?Beispiel in einer Web-AppEntscheidende Grenze
EmbeddingsJaArtikel oder eigene Notizen in Zahlenvektoren umwandelnSprachabdeckung und Eignung des Embedding-Modells prüfen
Semantische SucheJa„Lange Ladezeit“ findet einen Artikel über PerformanceAuch die Suchanfrage braucht einen kompatiblen Vektor
ChatbotJa, mit lokalem SprachmodellFragen beantworten oder einen Entwurf formulierenModell muss in den Speicher passen; Qualität und Tempo variieren
DokumentenchatJa, wenn die gesamte Kette lokal istAntworten mit Fundstellen aus gespeicherten ArtikelnDokumente, Suche und Antwortmodell dürfen keine Cloud benötigen
KlassifikationJaNotizen nach Thema sortierenModell muss die gewünschten Kategorien sinnvoll abbilden
Zusammenfassen und ÜbersetzenMit geeignetem ModellEinen gespeicherten Text kürzen oder übersetzenEingabelänge, Sprache und Qualität sind modellabhängig
Sprache zu TextMit geeignetem AudiomodellEine lokale Aufnahme transkribierenAudiodauer, Speicher und Rechenzeit begrenzen die Nutzung
Text zu SpracheMit geeignetem SprachmodellEinen Artikel vorlesen lassenStimme und benötigte Dateien müssen lokal verfügbar sein
BildanalyseMit geeignetem BildmodellBilder klassifizieren oder Objekte erkennenUnterstützung gilt für konkrete Aufgaben und Modellarchitekturen

Die Aufgabenübersicht von Transformers.js belegt unter anderem Feature Extraction, Klassifikation, Generierung sowie Audio- und Bildaufgaben. Für Chat dokumentiert WebLLM Modellinitialisierung und gestreamte Antworten.

Wie funktionieren lokale Embeddings und Suche?

Embeddings sind Zahlenvektoren, die ein Modell aus Text erzeugt. Für einen Digital Garden berechnest du zunächst Vektoren für Artikelabschnitte und speicherst sie zusammen mit Text, Titel und Link lokal. Eine neue Suchanfrage durchläuft dasselbe Embedding-Verfahren. Anschließend vergleicht die App ihren Vektor mit den gespeicherten Vektoren und zeigt passende Fundstellen an.

Der entscheidende Unterschied: Vektoren vergleichen ist keine neue Modellberechnung. Ein kleiner Datenbestand lässt sich direkt im Browser durchsuchen; eine Cloud-Vektordatenbank ist dafür nicht zwingend nötig. Bei großen Beständen werden Speicherbedarf und ein geeigneter Suchindex wichtiger.

Für öffentliche Artikel kannst du die Dokumentvektoren bereits beim Website-Build erzeugen. Der Browser muss dann nur noch die Suchanfrage einbetten. Private Notizen lassen sich dagegen vollständig auf dem Gerät verarbeiten. In beiden Fällen müssen Dokument- und Anfragevektoren aus demselben kompatiblen Modellraum stammen: gleiche Modellversion und zusammenpassende Vorverarbeitung, Dimensionen sowie gegebenenfalls vom Modell verlangte Präfixe für Anfrage und Dokument. Gleiche Vektorlänge allein genügt nicht.

Ein mit einem Cloud-Modell erzeugter Artikelindex lässt sich deshalb nicht beliebig mit einem kleinen lokalen Modell weiternutzen. Bei einem Modellwechsel müssen die Dokumentvektoren passend neu erzeugt werden. Für deutsche Artikel prüfst du außerdem deutsche Suchanfragen und Umschreibungen; ein englisch optimiertes Modell ist dafür keine verlässliche Standardwahl. Wie Vektoren und Ähnlichkeit zusammenspielen, erklärt die Kachel Embeddings – ähnliche Inhalte finden.

Was braucht ein Offline-Chatbot zusätzlich?

Ein Chatbot benötigt ein generatives Sprachmodell: Es erzeugt die Antwort Stück für Stück. Ein Embedding-Modell allein kann das nicht. Ein lokal laufender Chat kennt außerdem weder automatisch deine Artikel noch aktuelle Informationen aus dem Internet.

Für einen Chat über Garden-Inhalte passt : Die App sucht zuerst passende gespeicherte Abschnitte und gibt diese zusammen mit der Frage an das lokale Sprachmodell. Die Antwort sollte auf die verwendeten Fundstellen verweisen. Gibt es keinen passenden Beleg, soll die Oberfläche das kenntlich machen. Auch mit passenden Textstellen können falsche Antworten entstehen.

Das durchgehende Beispiel wäre: „Wie mache ich meine Seite schneller?“ wird lokal eingebettet, findet gespeicherte Performance-Abschnitte und wird mit diesen an das Antwortmodell übergeben. Suche, Kontext und Antwort bleiben auf dem Gerät. Eine aktuelle Webrecherche oder ein externes Tool benötigt weiterhin eine Verbindung.

Für Chat ist neben den Modelldateien auch zusätzlicher Arbeitsspeicher für Berechnungen und Gesprächskontext nötig. Ein kleinerer Download bedeutet deshalb nicht denselben Speicherverbrauch zur Laufzeit. kann helfen, ersetzt jedoch keinen Gerätetest. Begrenze Gesprächslänge und Fundstellen auf das Kontextfenster des gewählten Modells.

Für einen Digital Garden ist deshalb lokale Suche ein sinnvoller erster Ausbau: Sie liefert direkt überprüfbare Treffer. Ein zusätzliches Chatmodell lohnt sich, wenn formulierte Antworten einen erkennbaren Nutzen bieten und auf den Zielgeräten gut genug funktionieren. Wie eine Suche ihre Treffer für Menschen verständlich macht, zeigt Intuitive Suche.

Wie wird daraus eine wirklich offline nutzbare App?

Bereite die App auf einer sicheren Herkunft vor, im Betrieb üblicherweise HTTPS und bei lokaler Entwicklung localhost. Wähle ein unterstütztes Modell mit passender Lizenz und teste es auf deinen Zielgeräten. Ein Manifest und die Installation als ersetzen diese Vorbereitung nicht.

  1. App und Inhalte speichern. Halte die Einstiegsseite, benötigte Skripte, Styles, Schriften und gewünschte Artikel offline vor. Prüfe auch direkte Aufrufe und Navigation zwischen gespeicherten Seiten. Ein bereits offener Tab reicht als Nachweis nicht.
  2. Das vollständige Modellpaket vorbereiten. Dazu gehören Gewichte, Tokenizer, Konfiguration und benötigte Laufzeitdateien. Transformers.js kann Modelle und WASM-Dateien standardmäßig von externen Hosts beziehen; lokale Pfade und Remote-Laden sind konfigurierbar. Eine Datei unter einer eigenen URL ist erst offline verfügbar, wenn sie tatsächlich gespeichert wurde.
  3. Lokale Daten versionieren. Speichere Texte und Vektoren beispielsweise in IndexedDB, einer Browser-Datenbank für strukturierte Daten. Nutze den Cache der Modellbibliothek beziehungsweise die Cache API für passende Dateien. Lege Modell- und Indexversion gemeinsam fest, damit ein Update keine inkompatiblen Vektoren mischt.
  4. Speicher und Bereitschaft prüfen. Zeige Downloadfortschritt, fehlende Dateien und Speicherfehler verständlich an. Melde „offline bereit“ erst nach vollständig geladenem Paket und erfolgreichem Testlauf. Der Status muss nach gelöschten oder unvollständigen Daten wieder zurückgesetzt werden.
  5. Den Ausfall mitplanen. Wenn das Modell nicht läuft, bleiben gespeicherte Artikel und eine einfache Textsuche nutzbar. Biete eine Cloud-Alternative nur als bewusste Auswahl an, wenn dafür Eingaben das Gerät verlassen.

Browser-Speicher ist begrenzt. Daten können durch Nutzer oder bei Speicherdruck gelöscht werden; privates Browsen hat zusätzliche Einschränkungen. Die Storage API kann Belegung schätzen und dauerhafte Speicherung anfragen, deren Gewährung vom Browser abhängt. Eigene Daten brauchen weiterhin eine Exportmöglichkeit. MDN beschreibt Speicherquoten und Löschregeln.

Lokal rechnen heißt nicht automatisch privat

Lokale Inferenz benötigt keinen Upload deiner Eingabe. Analysewerkzeuge, Fehlerberichte, Synchronisierung oder ein Cloud-Fallback können trotzdem Daten übertragen. Prüfe den gesamten Datenfluss und mache solche Übertragungen sichtbar.

Wie prüfst du das Ergebnis ohne Internet?

Teste den vorbereiteten Funktionsumfang im Produktions-Build. Notiere Browser, Gerät, Modellversion und Quantisierung zu deinen Ergebnissen. Miss Ladezeit und Antwortverhalten auf den tatsächlichen Zielgeräten; aus der Unterstützung von WebGPU allein lässt sich keine verlässliche Geschwindigkeit ableiten.

  • Kalt starten: Nach vollständiger Vorbereitung die App schließen, Netzwerkzugriff blockieren und erneut öffnen. Einstieg, gespeicherte Artikel und Navigation müssen funktionieren.
  • Neue Eingaben rechnen: Eine bisher unbenutzte Suchanfrage und gegebenenfalls eine neue Chatfrage stellen. Es müssen neue Ergebnisse entstehen; ein gespeicherter Verlauf ist kein Beweis für Offline-Inferenz.
  • Fundstellen prüfen: Eine deutsche Umschreibung zu einem gespeicherten Thema und eine Frage außerhalb des Bestands testen. Treffer müssen nachvollziehbar sein; unbelegte Chatantworten dürfen nicht als gesicherte Fakten erscheinen.
  • Fehlerfälle prüfen: Fehlende Modelldateien, gelöschte Caches und ein ungeeignetes Gerät testen. Erwartet werden verständliche Hinweise und weiter lesbare Inhalte, keine endlose Ladeanzeige.
  • Netz und Bedienung prüfen: Den Netzwerkverkehr auch bei bestehender Verbindung kontrollieren; die lokale Verarbeitung darf keine Eingaben versenden. Suche und Chat müssen auf kleinen Bildschirmen und per Tastatur bedienbar bleiben, auch während das Modell rechnet.

Quellen und nächste Schritte

Die Quellen beschreiben unterstützte Verfahren und Voraussetzungen; sie ersetzen keinen Test deines Modells auf deinen Zielgeräten.

Vertiefe die Funktionsweise von Embeddings, bevor du einen Suchindex aufbaust, und nutze Intuitive Suche für die Gestaltung nachvollziehbarer Suchergebnisse.