Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular-Apps smarter machen mit Generative AI: ...

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.

Avatar for Christian Liebel

Christian Liebel

July 01, 2025
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. – 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
  7. about://flags Enables WebNN API à Enabled Enables experimental WebNN API

    features à Enabled Angular-Apps smarter machen mit Generative AI WebNN lokal und offlinefähig
  8. 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
  9. – 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
  10. 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
  11. 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
  12. 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
  13. 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