Built-in AI: Die AI-Revolution direkt im Browser

Immer mehr Entwickler beabsichtigen, Generative-AI-Funktionen in ihre Anwendungen zu integrieren. Bislang führte dieser Weg praktisch immer in die Cloud – aber das muss nicht so sein! Plattform- und Browserhersteller sind dazu übergegangen, KI-Modelle direkt mit ihren Betriebssystemen auszuliefern: So läuft Apple Intelligence auf dem eigenen Gerät und auch Google liefert auf leistungsstarken Android-Smartphones sein Modell Gemini Nano aus. Aktuell implementieren Microsoft und Chromium die Built-in-AI-Schnittstellen in Chrome und Edge, die Zugriff auf ein lokal installiertes Large Language Modell (LLM) gewähren. Die Vorteile liegen auf der Hand: Die Anwenderdaten verlassen das Gerät nicht, alles funktioniert auch bei schwacher oder komplett ohne Internetverbindung und es muss kein extra Modell heruntergeladen werden, da einfach das lokal vorhandene genutzt wird. In dieser Session zeigt Christian Liebel, welche Anwendungsfälle die Built-in AI APIs abdecken und wie auch Sie Ihre Webanwendung dank Built-in AI smarter machen.

Transcript

1. Built-in AI Die AI-Revolution direkt im Browser Christian Liebel @christianliebel Consultant
2. Hello, it’s me. Built-in AI Christian Liebel W3C WebML WG & CG TAG Associate christian.liebel @thinktecture.com Angular, PWA & Generative AI Microsoft MVP & Google GDE (Angular, Web) Die AI-Revolution direkt im Browser
3. Rule-based algorithms are limited in their capabilities. Built-in AI Why should you care about AI? Die AI-Revolution direkt im Browser
4. Use AI to implement use cases that are difficult or impossible to implement using rule-based algorithms. Built-in AI Why should you care about AI? Die AI-Revolution direkt im Browser
5. Examples Built-in AI Generative AI Cloud Providers Die AI-Revolution direkt im Browser
6. Drawbacks Built-in 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 Die AI-Revolution direkt im Browser
7. Bring Your Own AI (BYOAI) – Libraries – WebLLM – Transfomers.js – Frameworks – ONNX Runtime – TensorFlow.js – APIs – WebGPU, WebNN – Cross-Origin Storage NEW! Built-in AI (BIAI) – Writing Assistance APIs – Summarizer API – Writer API – Rewriter API – Proofreader API NEW! – Translator & Language Detector APIs – Prompt API NEW! Multimodal – WebMCP NEW! Built-in AI Web AI Landscape Die AI-Revolution direkt im Browser
8. https://webllm.mlc.ai/ Built-in AI WebLLM DEMO Die AI-Revolution direkt im Browser
9. On NPM Built-in AI WebLLM Die AI-Revolution direkt im Browser
10. Storing model files locally Built-in 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. Die AI-Revolution direkt im Browser
11. 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 Built-in AI WebLLM Die AI-Revolution direkt im Browser
12. Drawbacks Built-in AI WebNN Models can’t be shared across origins Inference is fast, but doesn’t reach full native speed Die AI-Revolution direkt im Browser
13. https://github.com/explainers-by-googlers/cross-origin-storage Built-in AI Cross-Origin Storage Die AI-Revolution direkt im Browser
14. https://huggingface.co/docs/transformers.js/index Built-in AI Transformers.js DEMO Die AI-Revolution direkt im Browser
15. Cloud only… Built-in AI Realtime Models DEMO Die AI-Revolution direkt im Browser
16. …or is it? NEW! Built-in AI Realtime Models DEMO Die AI-Revolution direkt im Browser
17. – 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 Built-in AI WebNN Source: https://webmachinelearning.github.io/webnn-intro/ Die AI-Revolution direkt im Browser
18. about://flags Enables WebNN API à Enabled Enables experimental WebNN API features à Enabled Built-in AI WebNN Die AI-Revolution direkt im Browser
19. – 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) Built-in AI Built-in AI https://developer.chrome.com/docs/ai/built-in Die AI-Revolution direkt im Browser
20. Incubated by the WebML CG Built-in AI Built-in AI APIs https://webmachinelearning.github.io/incubations/ DEMO Die AI-Revolution direkt im Browser
21. Built-in AI Multimodal Models Die AI-Revolution direkt im Browser
22. Built-in AI Multimodal Models Die AI-Revolution direkt im Browser DEMO
23. Built-in AI Structured Output Die AI-Revolution direkt im Browser DEMO https://bandarra.me/apps/flyby/
24. Built-in AI Built-in AI APIs Operating System Website HTML/JS Browser Internet Apple Intelligence Gemini Nano Die AI-Revolution direkt im Browser
25. about://on-device-internals https://www.google.com/chrome/canary/ about://flags Enables optimization guide on device à EnabledBypassPerfRequirement (API) for Gemini Nano à Enabled Built-in AI Built-in AI APIs Die AI-Revolution direkt im Browser
26. TypeScript Definitions Built-in AI Built-in AI APIs Die AI-Revolution direkt im Browser
27. Built-in AI Die AI-Revolution direkt im Browser WebMCP – Allows websites to expose tools to browser or external agents – Joint effort by Microsoft and Google https://github.com/webmachinelearning/webmcp
28. Built-in AI Die AI-Revolution direkt im Browser WebMCP https://www.youtube.com/watch?v=gbu9kyY2B60
29. 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 Built-in AI Web AI Die AI-Revolution direkt im Browser
31. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com