Praktische Lehren aus der Entwicklung von On-Device-KI in React Native

Textgenerierung mit LLMs

Verwende llama.rn zum Ausführen von GGUF-Modellen in React Native. Es umschließt llama.cpp und bietet native Bindings für Android (JNI) und iOS (Metal). Das Streamen von Tokens über Callbacks funktioniert gut.

Die Speicherverwaltung ist entscheidend: Ein 7B Q4-Modell benötigt zur Laufzeit ~5,5 GB RAM (Dateigröße × 1,5 für KV-Cache und Aktivierungen). Verwende 60 % des Gerätespeichers als festes Budget, warne bei 50 % und blockiere bei 60 %, um das Beenden der App durch das Betriebssystem zu verhindern.

GPU-Beschleunigung nutzt OpenCL auf Android (Adreno GPUs) und Metal auf iOS. Flash Attention stürzt mit GPU-Layern > 0 auf Android ab, also erzwinge dies im Code. KV-Cache-Quantisierung (f16/q8_0/q4_0) bringt auf den meisten Geräten mehr als die GPU; der Wechsel von f16 zu q4_0 verdreifachte in Tests etwa die Inferenzgeschwindigkeit.

Bildgenerierung mit Stable Diffusion

Dies ist plattformspezifisch, ohne dass eine einzige Bibliothek beide abdeckt.

• Android: Verwende MNN (Alibabas Framework, CPU, funktioniert auf allen ARM64-Geräten) und QNN (Qualcomm AI Engine, NPU-beschleunigt, nur Snapdragon 8 Gen 1+). QNN ist 3× schneller, funktioniert aber nur auf aktuellen Qualcomm-Chips. Implementiere Laufzeiterkennung mit automatischem Fallback.
• iOS: Verwende Apples ml-stable-diffusion-Pipeline mit Core ML und Neural Engine-Beschleunigung. Palettisierte Modelle (~1 GB, 6-Bit) sind ideal für speicherbeschränkte Geräte; Vollpräzision (~4 GB, fp16) ist auf ANE schneller, benötigt aber Spielraum.

Reale Benchmarks: 5–10 Sekunden auf Snapdragon NPU, 15 Sekunden CPU auf Flaggschiffen, 8–15 Sekunden iOS ANE für 512×512 bei 20 Schritten. Zeige eine Echtzeitvorschau alle N Denoising-Schritte, damit Nutzer nicht denken, die App sei abgestürzt.

Sprachanalyse mit Whisper

whisper.rn umschließt whisper.cpp und ist einfach zu integrieren. Biete mehrere Modellgrößen (Tiny/Base/Small) an und lass Nutzer Geschwindigkeit gegen Genauigkeit abwägen. Echtzeit-Teiltranskription (Wörter erscheinen während des Sprechens) sorgt für ein natives Gefühl.

Puffere Audio im nativen Code und lösche es nach der Transkription; schreibe keine Audiodateien auf die Festplatte, wenn Privatsphäre wichtig ist.

Vision mit multimodalen Modellen

Vision-Modelle benötigen zwei Dateien: das Haupt-GGUF und eine mmproj-Begleitdatei (multimodaler Projektor). Handhabe dies transparent: Erkenne Vision-Modelle automatisch, lade mmproj automatisch herunter, verfolge sie als Einheit und durchsuche das Modellverzeichnis zur Laufzeit, falls der Link defekt ist. Lade beide Dateien parallel herunter, um die Downloadzeit für ein 2B-Vision-Modell fast zu halbieren.

SmolVLM bei 500M ist der Sweet Spot für Mobilgeräte, mit ~7 Sekunden auf Flaggschiffgeräten, geeignet für Dokumentenlesen und Szenenbeschreibung.

Tool Calling für On-Device-Agenten-Schleifen

Modelle, die Funktionsaufrufe unterstützen, können Tools (Websuche, Taschenrechner, Datum/Uhrzeit, Geräteinfo) über eine automatische Schleife nutzen: LLM generiert, parst nach Tool-Aufrufen, führt sie aus, injiziert Ergebnisse zurück in den Kontext, LLM fährt fort. Begrenze es auf maximal 3 Iterationen, 5 Aufrufe insgesamt, um Endlosschleifen zu verhindern.

Unterstütze zwei Parsing-Pfade: Größere Modelle geben strukturierte JSON-Tool-Aufrufe nativ über llama.rn aus, während kleinere Modelle XML wie <tool_call> ausgeben. Erkenne Tool-Unterstützung beim Modellladen durch Überprüfen der Jinja-Chat-Vorlage; wenn das Modell keine Tools unterstützt, injiziere keine Tool-Definitionen in den System-Prompt, um Halluzinationen zu vermeiden. Der Taschenrechner verwendet einen rekursiven Abstiegsparser – niemals eval().

Intent-Klassifizierung

Wenn deine App sowohl Text- als auch Bildgenerierung macht, musst du basierend auf der Eingabeanalyse entscheiden, was der Nutzer möchte.