Slide 1

Slide 1 text

Built-in AI Die AI-Revolution direkt im Browser Christian Liebel @christianliebel Consultant

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Rule-based algorithms are limited in their capabilities. Built-in AI Why should you care about AI? Die AI-Revolution direkt im Browser

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Examples Built-in AI Generative AI Cloud Providers Die AI-Revolution direkt im Browser

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

https://webllm.mlc.ai/ Built-in AI WebLLM DEMO Die AI-Revolution direkt im Browser

Slide 9

Slide 9 text

On NPM Built-in AI WebLLM Die AI-Revolution direkt im Browser

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

https://github.com/explainers-by-googlers/cross-origin-storage Built-in AI Cross-Origin Storage Die AI-Revolution direkt im Browser

Slide 14

Slide 14 text

https://huggingface.co/docs/transformers.js/index Built-in AI Transformers.js DEMO Die AI-Revolution direkt im Browser

Slide 15

Slide 15 text

Cloud only… Built-in AI Realtime Models DEMO Die AI-Revolution direkt im Browser

Slide 16

Slide 16 text

…or is it? NEW! Built-in AI Realtime Models DEMO Die AI-Revolution direkt im Browser

Slide 17

Slide 17 text

– 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

Slide 18

Slide 18 text

about://flags Enables WebNN API à Enabled Enables experimental WebNN API features à Enabled Built-in AI WebNN Die AI-Revolution direkt im Browser

Slide 19

Slide 19 text

– 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

Slide 20

Slide 20 text

Incubated by the WebML CG Built-in AI Built-in AI APIs https://webmachinelearning.github.io/incubations/ DEMO Die AI-Revolution direkt im Browser

Slide 21

Slide 21 text

Built-in AI Multimodal Models Die AI-Revolution direkt im Browser

Slide 22

Slide 22 text

Built-in AI Multimodal Models Die AI-Revolution direkt im Browser DEMO

Slide 23

Slide 23 text

Built-in AI Structured Output Die AI-Revolution direkt im Browser DEMO https://bandarra.me/apps/flyby/

Slide 24

Slide 24 text

Built-in AI Built-in AI APIs Operating System Website HTML/JS Browser Internet Apple Intelligence Gemini Nano Die AI-Revolution direkt im Browser

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

TypeScript Definitions Built-in AI Built-in AI APIs Die AI-Revolution direkt im Browser

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Built-in AI Die AI-Revolution direkt im Browser WebMCP https://www.youtube.com/watch?v=gbu9kyY2B60

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]