Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig

Immer mehr Entwickler beabsichtigen, Generative-AI-Funktionen in ihre Anwendungen zu integrieren. Dieser Weg führt bislang praktisch immer in die Cloud. Doch das muss nicht unbedingt so sein! Denn aktuell gibt es unterschiedliche vielversprechende Ansätze, KI-Modelle direkt auf dem Rechner des Anwenders auszuführen:

Die Web Neural Network API (WebNN) des W3C, die sich noch in der Spezifikationsphase befindet, wird KI-Modellen in Zukunft Zugang zur Neural Processing Unit (NPU) des Geräts gewähren: Damit lassen sich KI-Modelle effizient im Browser betrieiben. Und die experimentellen Built-in-AI-APIs von Google machen auf dem Gerät bereits installierte KI-Modelle für Webseiten verfügbar.

In dieser Session stellt Christian die unterschiedlichen Anwendungsfälle vor und zeigt Vor- und Nachteile der jeweiligen Lösungen auf.

Transcript

1. Christian Liebel @christianliebel Consultant Angular-Apps smarter machen mit Generative AI lokal und offlinefähig
2. Hello, it’s me. Angular-Apps smarter machen mit Generative AI Christian Liebel W3C WebML WG & CG TAG Associate christian.liebel @thinktecture.com Angular, PWA & Generative AI Microsoft MVP & Google GDE (Angular, Web) lokal und offlinefähig
3. Examples Angular-Apps smarter machen mit Generative AI Generative AI Cloud Providers lokal und offlinefähig
4. Drawbacks Angular-Apps smarter machen mit Generative AI Generative AI Cloud Providers Require a (stable) internet connection Subject to network latency and server availability Data is transferred to the cloud service Require a subscription lokal und offlinefähig
5. Can we run GenAI models locally? Angular-Apps smarter machen mit Generative AI lokal und offlinefähig
6. Bring Your Own AI (BYOAI) – Libraries – WebLLM – Transfomers.js – Frameworks – ONNX Runtime – TensorFlow.js – APIs – WebNN – Cross-Origin Storage Built-in AI (BIAI) – Writing Assistance APIs – Summarizer API – Writer API – Rewriter API – Translator & Language Detector APIs – Prompt API Angular-Apps smarter machen mit Generative AI Local AI Inference lokal und offlinefähig
7. https://webllm.mlc.ai/ Angular-Apps smarter machen mit Generative AI WebLLM DEMO lokal und offlinefähig
8. On NPM Angular-Apps smarter machen mit Generative AI WebLLM lokal und offlinefähig
9. Storing model files locally Angular-Apps smarter machen mit Generative AI WebLLM Internet Website HTML/JS Cache with model files Hugging Face Note: Due to the Same-Origin Policy, models cannot be shared across origins. lokal und offlinefähig
10. Model Size Comparison Model:Parameters Size phi3:3.8b 2.2 GB mistral:7b 4.1 GB deepseek-r1:8b 5.2 GB gemma3n:e4b 7.5 GB gemma3:12b 8.1 GB llama4:16x17b 67 GB Angular-Apps smarter machen mit Generative AI WebLLM lokal und offlinefähig
11. https://huggingface.co/docs/transformers.js/index Angular-Apps smarter machen mit Generative AI Transformers.js DEMO lokal und offlinefähig
12. – Grants web apps access to the device’s CPU, GPU and Neural Processing Unit (NPU) – In specification by the WebML Working Group at W3C – Implementation in progress in Chromium (behind a flag) – Better performance for specific workloads Angular-Apps smarter machen mit Generative AI WebNN Source: https://webmachinelearning.github.io/webnn-intro/ DEMO lokal und offlinefähig
13. Angular-Apps smarter machen mit Generative AI Why should you care? DEMO lokal und offlinefähig
14. about://flags Enables WebNN API à Enabled Enables experimental WebNN API features à Enabled Angular-Apps smarter machen mit Generative AI WebNN lokal und offlinefähig
15. Drawbacks Angular-Apps smarter machen mit Generative AI WebNN Models can’t be shared across origins Inference is fast, but doesn’t reach full native speed lokal und offlinefähig
16. https://github.com/explainers-by-googlers/cross-origin-storage Angular-Apps smarter machen mit Generative AI Cross-Origin Storage lokal und offlinefähig
17. – Initiative by Google Chrome – Exploratory APIs for local experiments and use case determination – Downloads AI models into Google Chrome – Models are shared across origins – Uses native APIs directly (full performance) Angular-Apps smarter machen mit Generative AI Built-in AI https://developer.chrome.com/docs/ai/built-in lokal und offlinefähig
18. Incubated by the WebML CG Angular-Apps smarter machen mit Generative AI Built-in AI APIs https://webmachinelearning.github.io/incubations/ DEMO lokal und offlinefähig
19. Angular-Apps smarter machen mit Generative AI Multimodal Models lokal und offlinefähig
20. Angular-Apps smarter machen mit Generative AI Built-in AI APIs Operating System Website HTML/JS Browser Internet Apple Intelligence Gemini Nano lokal und offlinefähig
21. about://on-device-internals https://www.google.com/chrome/canary/ about://flags Enables optimization guide on device à EnabledBypassPerfRequirement (API) for Gemini Nano à Enabled Angular-Apps smarter machen mit Generative AI Built-in AI APIs lokal und offlinefähig
22. TypeScript Definitions Angular-Apps smarter machen mit Generative AI Built-in AI APIs lokal und offlinefähig
23. Angular-Apps smarter machen mit Generative AI Chatbots DEMO lokal und offlinefähig
24. Angular-Apps smarter machen mit Generative AI Categorization DEMO lokal und offlinefähig
25. Pros & Cons + Data does not leave the browser (privacy) + High availability (offline support) + Low latency + Stability (no external API changes) + Low cost – Lower response quality – Less capable – High system (RAM, GPU) and bandwidth requirements – Large model size, models cannot always be shared – Model initialization and inference are relatively slow – APIs are experimental Angular-Apps smarter machen mit Generative AI On-device AI Models lokal und offlinefähig
26. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com