KI im Browser: Smartere Webanwendungen mit WebNN und Prompt API

In dieser Session werden wir die Integration generativer KI-Funktionen in Webanwendungen unter Verwendung der Prompt API und der Web Neural Network (WebNN) API diskutieren. Diese APIs ermöglichen die Ausführung von Large Language Models (LLMs) auf dem Gerät des Benutzers. Zu den Hauptvorteilen der lokalen Ausführung gehören die Offlineverfügbarkeit und die Datensicherheit – vorausgesetzt, das Gerät der Benutzerinnen und Benutzer verfügt über ausreichende Leistung, um die KI-Modelle auszuführen.

Während der Session werden wir verschiedene Use Cases diskutieren und die Vor- und Nachteile der einzelnen Lösungen vergleichen. Nimm teil und erfahre, wie du deine Web-Apps smarter machen kannst!

Transcript

1. KI im Browser Smartere Webanwendungen mit WebNN und Prompt API Christian Liebel @christianliebel Consultant
2. Hello, it’s me. KI im Browser Christian Liebel W3C WebApps, WebML & TAG christian.liebel @thinktecture.com Angular, PWA & Generative AI Microsoft MVP & Google GDE (Angular, Web) Smartere Webanwendungen mit WebNN und Prompt API
3. Rule-based algorithms are limited in their capabilities. KI im Browser Why should you care about AI? Smartere Webanwendungen mit WebNN und Prompt API
4. Use AI to implement use cases that are difficult or impossible to implement using rule-based algorithms. KI im Browser Why should you care about AI? Smartere Webanwendungen mit WebNN und Prompt API
5. Examples KI im Browser Generative AI Cloud Providers Smartere Webanwendungen mit WebNN und Prompt API
6. Drawbacks KI im Browser 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 Smartere Webanwendungen mit WebNN und Prompt API
7. Bring Your Own AI (BYOAI) – Libraries – WebLLM – Frameworks – Transformers.js – 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 input & structured output – WebMCP NEW! KI im Browser Web AI Landscape Smartere Webanwendungen mit WebNN und Prompt API
8. https://huggingface.co/docs/transformers.js/index KI im Browser Transformers.js DEMO Smartere Webanwendungen mit WebNN und Prompt API
9. KI im Browser WebGPU – Grants low-level access to the Graphics Processing Unit (GPU) – Near native performance for machine learning applications – Supported by Chromium-based browsers on Windows and macOS from version 113, Safari 26 NEW!, and Firefox 141 on Windows Smartere Webanwendungen mit WebNN und Prompt API
10. – 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 KI im Browser WebNN Source: https://webmachinelearning.github.io/webnn-intro/ Smartere Webanwendungen mit WebNN und Prompt API
11. KI im Browser WebNN https://huggingface.co/webnn/spaces Smartere Webanwendungen mit WebNN und Prompt API DEMO
12. Drawbacks KI im Browser Bring Your Own AI Models can’t be shared across origins Inference is fast, but doesn’t reach full native speed Smartere Webanwendungen mit WebNN und Prompt API
13. https://github.com/explainers-by-googlers/cross-origin-storage KI im Browser Cross-Origin Storage DEMO Smartere Webanwendungen mit WebNN und Prompt API
14. Client-side NEW! KI im Browser Realtime Models DEMO Smartere Webanwendungen mit WebNN und Prompt API
15. On-device pipeline KI im Browser Realtime Models Whisper (STT) Silero (VAD) SmolLM2- 1.7B (LLM) Kokoro (TTS) Smartere Webanwendungen mit WebNN und Prompt API
16. Bring Your Own AI (BYOAI) – Libraries – WebLLM – Frameworks – Transformers.js – 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 input & structured output – WebMCP NEW! KI im Browser Web AI Landscape Smartere Webanwendungen mit WebNN und Prompt API
17. KI im Browser Built-in AI Operating System Website HTML/JS Browser Internet Apple Intelligence Gemini Nano Smartere Webanwendungen mit WebNN und Prompt API
18. – 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) KI im Browser Built-in AI https://developer.chrome.com/docs/ai/built-in Smartere Webanwendungen mit WebNN und Prompt API
19. Incubated by the WebML CG KI im Browser Built-in AI APIs https://webmachinelearning.github.io/incubations/ DEMO Smartere Webanwendungen mit WebNN und Prompt API
20. Prompt API const languageModel = await LanguageModel.create(); console.log(await languageModel.prompt("Capital of Italy?")); KI im Browser Smartere Webanwendungen mit WebNN und Prompt API Built-in AI
21. KI im Browser Multimodal Models Smartere Webanwendungen mit WebNN und Prompt API
22. KI im Browser Multimodal Models DEMO Smartere Webanwendungen mit WebNN und Prompt API
23. KI im Browser Structured Output DEMO https://bandarra.me/apps/flyby/ Smartere Webanwendungen mit WebNN und Prompt API
24. TypeScript Definitions KI im Browser Built-in AI APIs Smartere Webanwendungen mit WebNN und Prompt API
25. KI im Browser Agentic Browsers Smartere Webanwendungen mit WebNN und Prompt API
26. KI im Browser WebMCP – Allows websites to expose tools to the browser or external agents – Joint effort by Microsoft and Google https://github.com/webmachinelearning/webmcp Smartere Webanwendungen mit WebNN und Prompt API
27. KI im Browser Smartere Webanwendungen mit WebNN und Prompt API WebMCP https://webmachinelearning.github.io/webmcp/
28. API Imperative navigator.modelContext .provideContext({ tools: [{ "name": "start_game", "description": "Start a new game.", "inputSchema": {}, "execute": () => {}, } ]}); Declarative <form id="reservationForm" toolname="book_table_le_petit_bistr o" tooldescription=...> <input name="name" toolparamdescription="Customer's full name (min 2 chars)" /> </form> KI im Browser Smartere Webanwendungen mit WebNN und Prompt API WebMCP
29. Imperative KI im Browser Smartere Webanwendungen mit WebNN und Prompt API WebMCP Maze https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/ DEMO
30. Declarative KI im Browser Smartere Webanwendungen mit WebNN und Prompt API WebMCP Maze https://bandarra.me/posts/from-pytorch-to-browser-creating-a-web-friendly-ai-model DEMO
31. Agent-only! KI im Browser Smartere Webanwendungen mit WebNN und Prompt API WebMCP Maze https://webmcp-maze.bandarra.me/ DEMO
32. Agent-only! KI im Browser Smartere Webanwendungen mit WebNN und Prompt API WebMCP Maze https://nearform.github.io/web-agents/ DEMO
33. KI im Browser WebMCP https://mcp-ui.mcp-b.ai/ Smartere Webanwendungen mit WebNN und Prompt API DEMO
34. 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 KI im Browser Web AI Smartere Webanwendungen mit WebNN und Prompt API
35. Q&A KI im Browser Smartere Webanwendungen mit WebNN und Prompt API
36. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com