What's New in Web AI? - Speaker Deck

What's New in Web AI?

by Christian Liebel

Slide 1

Slide 1 text

What’s New in Web AI? Christian Liebel @christianliebel Consultant

Slide 2

Slide 2 text

Hello, it’s me. What’s New in Web AI? Christian Liebel W3C WebML WG & CG TAG Associate christian.liebel @thinktecture.com Angular, PWA & Generative AI Microsoft MVP & Google GDE (Angular, Web) @christianliebel

Slide 3

Slide 3 text

»It’s all about the new possibilities.« (Matthieu Riegler) What’s New in Web AI? Why should you care about AI? @christianliebel

Slide 4

Slide 4 text

Examples What’s New in Web AI? Generative AI Cloud Providers @christianliebel

Slide 5

Slide 5 text

Drawbacks What’s New in Web 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 @christianliebel

Slide 6

Slide 6 text

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! What’s New in Web AI? Web AI Landscape @christianliebel

Slide 7

Slide 7 text

https://webllm.mlc.ai/ What’s New in Web AI? WebLLM @christianliebel DEMO

Slide 8

Slide 8 text

On NPM What’s New in Web AI? WebLLM @christianliebel

Slide 9

Slide 9 text

Chat with your data What’s New in Web AI? @christianliebel WebLLM DEMO

Slide 10

Slide 10 text

Storing model files locally What’s New in Web 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. @christianliebel

Slide 11

Slide 11 text

Model Size Comparison Model:Parameters Size qwen3:4b 2.5 GB mistral:7b 4.4 GB deepseek-r1:8b 5.2 GB gemma3n:e4b 7.5 GB gpt-oss:20b 14 GB llama4:16x17b 67 GB What’s New in Web AI? WebLLM @christianliebel

Slide 12

Slide 12 text

https://huggingface.co/docs/transformers.js/index What’s New in Web AI? Transformers.js DEMO @christianliebel

Slide 13

Slide 13 text

What’s New in Web AI? @christianliebel 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

Slide 14

Slide 14 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 What’s New in Web AI? WebNN Source: https://webmachinelearning.github.io/webnn-intro/ @christianliebel

Slide 15

Slide 15 text

Drawbacks What’s New in Web AI? Bring Your Own AI Models can’t be shared across origins Inference is fast, but doesn’t reach full native speed @christianliebel

Slide 16

Slide 16 text

https://github.com/explainers-by-googlers/cross-origin-storage What’s New in Web AI? Cross-Origin Storage @christianliebel DEMO

Slide 17

Slide 17 text

Cloud only… What’s New in Web AI? Realtime Models DEMO @christianliebel

Slide 18

Slide 18 text

…or is it? NEW! What’s New in Web AI? Realtime Models DEMO @christianliebel

Slide 19

Slide 19 text

On-device pipeline What’s New in Web AI? @christianliebel Realtime Models Whisper (STT) Silero (VAD) SmolLM2- 1.7B (LLM) Kokoro (TTS)

Slide 20

Slide 20 text

Slide 21

Slide 21 text

What’s New in Web AI? Built-in AI Operating System Website HTML/JS Browser Internet Apple Intelligence Gemini Nano @christianliebel

Slide 22

Slide 22 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) What’s New in Web AI? Built-in AI https://developer.chrome.com/docs/ai/built-in @christianliebel

Slide 23

Slide 23 text

Incubated by the WebML CG What’s New in Web AI? Built-in AI APIs https://webmachinelearning.github.io/incubations/ DEMO @christianliebel

Slide 24

Slide 24 text

What’s New in Web AI? Multimodal Models @christianliebel

Slide 25

Slide 25 text

What’s New in Web AI? Multimodal Models @christianliebel DEMO

Slide 26

Slide 26 text

What’s New in Web AI? Structured Output @christianliebel DEMO https://bandarra.me/apps/flyby/

Slide 27

Slide 27 text

about://flags Enables optimization guide on device à EnabledBypassPerfRequirement (API) for Gemini Nano à Enabled What’s New in Web AI? Built-in AI APIs @christianliebel

Slide 28

Slide 28 text

TypeScript Definitions What’s New in Web AI? Built-in AI APIs @christianliebel

Slide 29

Slide 29 text

Structured Output & Signal Forms What’s New in Web AI? @christianliebel Built-in AI APIs DEMO

Slide 30

Slide 30 text

What’s New in Web AI? @christianliebel Agentic Browsers

Slide 31

Slide 31 text

What’s New in Web AI? @christianliebel WebMCP – Allows websites to expose tools to the browser or external agents – Joint effort by Microsoft and Google https://github.com/webmachinelearning/webmcp

Slide 32

Slide 32 text

What’s New in Web AI? @christianliebel WebMCP https://www.youtube.com/watch?v=gbu9kyY2B60

Slide 33

Slide 33 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 What’s New in Web AI? Web AI @christianliebel

Slide 34

Slide 34 text

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