Share
Embed
Slide 1
Slide 1 text
Christian Liebel
@christianliebel
Consultant
Angular-Apps smarter machen mit
Generative AI: lokal und offlinefähig
Hands-on Workshop!
Slide 2
Slide 2 text
Hello, it’s me.
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Christian Liebel
X: @christianliebel
Bluesky:
@christianliebel.com
Email:
christian.liebel
@thinktecture.com
Angular, PWA &
Generative AI
Slides:
thinktecture.com
/christian-liebel
Slide 3
Slide 3 text
Original
09:00–10:30 Block 1
10:30–11:00 Coffee Break
11:00–12:30 Block 2
12:30–13:30 Lunch Break
13:30–15:00 Block 3
15:00–15:30 Coffee Break
15:30–17:00 Block 4
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Timetable
Slide 4
Slide 4 text
What to expect
Focus on web app development
Focus on Generative AI
Up-to-date insights: the ML/AI
field is evolving fast
Live demos on real hardware
17 hands-on labs
What not to expect
Deep dive into AI specifics, RAG,
model finetuning or training
Stable libraries or specifications
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Expectations
Huge downloads! High requirements! Things may break!
Slide 5
Slide 5 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Workshop Slides
Slide 6
Slide 6 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
DEMO
Slide 7
Slide 7 text
(Workshop Edition)
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Demo Use Case
DEMO
Slide 8
Slide 8 text
Setup complete?
(Node.js, Google Chrome, Editor, Git,
macOS/Windows,
20 GB free disk space, 6 GB VRAM)
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Setup
Slide 9
Slide 9 text
git clone https://github.com/thinktecture/basta-
spring-2026-genai.git
cd basta-spring-2026-genai
npm i
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Setup
LAB #0
Slide 10
Slide 10 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Generative AI everywhere
Source: https://www.apple.com/chde/apple-intelligence/
Slide 11
Slide 11 text
Run locally on the user’s system
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Single-Page Applications
Slide 12
Slide 12 text
Make SPAs offline-capable
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Progressive Web Apps
Service
Worker
Internet
Website
HTML/JS
Cache
fetch
Slide 13
Slide 13 text
Overview
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Generative AI
Text
OpenAI GPT
Mistral
…
Audio/Music
Musico
Soundraw
…
Images
DALL·E
Firefly
…
Video
Sora
Runway
…
Speech
Whisper
tortoise-tts
…
Slide 14
Slide 14 text
Overview
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Generative AI
Text
OpenAI GPT
Mistral
…
Audio/Music
Musico
Soundraw
…
Images
DALL·E
Firefly
…
Video
Sora
Runway
…
Speech
Whisper
tortoise-tts
…
Slide 15
Slide 15 text
Examples
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Generative AI Cloud Providers
Slide 16
Slide 16 text
Drawbacks
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
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
Slide 17
Slide 17 text
Can we run GenAI models locally?
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Slide 18
Slide 18 text
Large: Trained on lots of data
Language: Process and generate text
Models: Programs/neural networks
Examples:
– Haiku, Opus, Sonnet (Claude)
– Gemini, Gemma (Google)
– LFM (Liquid AI)
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Large Language Models
Slide 19
Slide 19 text
Token
A meaningful unit of text (e.g., a word, a part of a word, a character).
Context Window
The maximum amount of tokens the model can process.
Parameters/weights
Internal variables learned during training, used to make predictions.
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Large Language Models
Slide 20
Slide 20 text
Prompts serve as the universal interface
Unstructured text conveying specific semantics
Paradigm shift in software architecture
Natural language becomes a first-class citizen
Caveats
Non-determinism and hallucination, prompt injections
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Large Language Models
Slide 21
Slide 21 text
npm i @huggingface/transformers
npm start -- -o
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
LAB #1
Slide 22
Slide 22 text
@huggingface/transformers
– JavaScript library by Hugging Face 🤗
– Functionally equivalent to Hugging Face’s transformers python lib
– Supports various ML/AI use cases (LLMs, computer vision, audio, …)
– Models are executed on-device (100% local, offline-capable)
– Uses ONNX Runtime (model inference runtime) internally
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Transformers.js
Slide 23
Slide 23 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Transformers.js vs. WebLLM
Source: https://npmtrends.com/@huggingface/transformers-vs-@mlc-ai/web-llm (27.02.2026)
Slide 24
Slide 24 text
Alternative
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
WebLLM
Slide 25
Slide 25 text
Size Comparison
Model:Parameters Size
lfm2.5-thinking:1.2b 0.7 GB
lfm2:2.6b 1.6 GB
ministral-3:3b 3.0 GB
gemma3:12b 8.1 GB
gpt-oss:20b 14 GB
devstral-2:123b 75 GB
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Model Selection
Slide 26
Slide 26 text
Liquid Foundation Models (LFM)
Highly performant on-device
LLMs by LiquidAI
https://www.liquid.ai/models
For this workshop, we are going to
use the 2.6B model.
Model sheet:
https://huggingface.co/onnx-
community/LFM2-2.6B-ONNX
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Model Selection
Source: https://www.liquid.ai/blog/introducing-lfm2-2-6b-redefining-efficiency-in-language-models
Slide 27
Slide 27 text
(1/3)
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Downloading a model LAB #2
1. Go to webgpureport.org
2. Does your GPU support the
feature “shader-f16”?
Slide 28
Slide 28 text
(2/3)
3. In src/app/todo/todo.ts (ngOnInit()), add the following line:
await this.llmService.loadModel('2.6B');
4. If your GPU does not support shader-f16, add this parameter:
await this.llmService.loadModel('2.6B', 'q4');
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Downloading a model LAB #2
Slide 29
Slide 29 text
(3/3)
5. In todo.html, change the following lines:
@if(!llmService.isReady()) {
}
…
The progress bar should begin to move.
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Downloading a model LAB #2
Slide 30
Slide 30 text
Storing model files locally
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Cache API
Internet
Website
HTML/JS
Cache with
model files
Hugging
Face
Note: Due to the Same-Origin Policy, models cannot be shared across origins.
Slide 31
Slide 31 text
Parameter cache
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Cache API
Slide 32
Slide 32 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
WebAssembly (Wasm)
– Bytecode for the web
– Compile target for arbitrary
languages
– Can be faster than JavaScript
– WebLLM uses a model-
specific Wasm library to
accelerate model
computations
Slide 33
Slide 33 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
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, and Firefox 141 on
Windows
Slide 34
Slide 34 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
– Origin Trial in Chrome 146
– Potentially even better
performance compared to
WebGPU
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
WebNN
Source: https://webmachinelearning.github.io/webnn-intro/
Slide 35
Slide 35 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
WebNN
https://huggingface.co/webnn/spaces
Hands-on Workshop!
DEMO
Slide 36
Slide 36 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
WebNN: near-native inference performance
Source: Intel. Browser: Chrome Canary 118.0.5943.0, DUT: Dell/Linux/i7-1260P, single p-core, Workloads: MediaPipe solution models (FP32, batch=1)
Slide 37
Slide 37 text
Drawbacks
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
WebNN
Models can’t be shared across origins
Inference is fast, but doesn’t reach full native speed
Hands-on Workshop!
Slide 38
Slide 38 text
https://github.com/explainers-by-googlers/cross-origin-storage
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Cross-Origin Storage
Hands-on Workshop!
Slide 39
Slide 39 text
(1/4)
1. In todo.ts, add the following line at the top of the class:
protected readonly reply = signal('');
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Model inference LAB #3
Slide 40
Slide 40 text
(3/4)
2. In the inferTransformersJs() method, add the following code:
this.llmService.clearPastKeyValues();
const messages = [
{ role: "user", content: userPrompt },
];
return this.llmService.generateResponse(messages, []);
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Model inference LAB #3
Slide 41
Slide 41 text
(2/4)
3. In the runPrompt() method, add the following code:
this.reply.set('…');
const chunks = inferenceEngine === 'transformers-js'
? this.inferTransformersJs(userPrompt)
: this.inferPromptApi(userPrompt);
let reply = '';
for await (const chunk of chunks) {
reply += chunk;
this.reply.set(reply);
}
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Model inference LAB #3
Slide 42
Slide 42 text
(4/4)
4. In todo.html, change the following line:
{{ reply() }}
You should now be able to send prompts to the model and see the
responses in the template.
⚠ Note: Browsers support better options for streaming LLM responses:
https://developer.chrome.com/docs/ai/render-llm-responses
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Model inference LAB #3
Slide 43
Slide 43 text
(1/2)
In todo.ts, add the following signal at the top:
protected readonly todos = signal([]);
Add the following line to the addTodo() method:
text ??= prompt() ?? '';
this.todos.update(todos => [...todos,
{ done: false, text }]);
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Todo management LAB #4
Slide 44
Slide 44 text
(2/2)
In todo.html, add the following lines to add todos from the UI:
@for (todo of todos(); track $index) {
{{ todo.text }}
}
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Todo management LAB #4
Slide 45
Slide 45 text
@for (todo of todos(); track $index) {
{{ todo.text }}
}
⚠ Boo! This pattern is not recommended. Instead, you should set the
changed values on the signal. But this messes up with Angular Material…
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Todo management (extended) LAB #5
Slide 46
Slide 46 text
Concept and limitations
The todo data has to be
converted into natural language.
For the sake of simplicity, we will
add all TODOs to the prompt.
Remember: LLMs have a context
window (LFM2-2.6B: 32K).
If you need to chat with larger
sets of text, refer to Retrieval
Augmented Generation (RAG).
These are the todos:
* Wash clothes
* Pet the dog
* Take out the trash
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Chat with data
Slide 47
Slide 47 text
System prompt
Metaprompt that defines…
– character
– capabilities/limitations
– output format
– behavior
– grounding data
Hallucinations and prompt injections cannot be eliminated.
You are a helpful assistant.
Answer user questions on todos.
Generate a valid JSON object.
Avoid negative content.
These are the user’s todos: …
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Chat with data
Slide 48
Slide 48 text
Flow
System
message
• The user has
these todos:
1. … 2. … 3. …
User
message
• How many
todos do I
have?
Assistant
message
• You have
three todos.
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Chat with data
Slide 49
Slide 49 text
Using a system & user prompt
Adjust the code in inferTransformerJs() to include the system prompt:
const systemPrompt = `Here's the user's todo list:
${JSON.stringify(this.todos())}`;
const messages = [
{ role: "system", content: systemPrompt },
{ role: "user", content: userPrompt },
];
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Chat with data LAB #6
Slide 50
Slide 50 text
Techniques
– Providing examples (single shot, few shot, …)
– Priming outputs
– Specify output structure
– Repeating instructions
– Chain of thought
– …
Success also depends on the model.
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt Engineering
https://learn.microsoft.com/en-us/azure/ai-foundry/openai/concepts/prompt-engineering
Slide 51
Slide 51 text
const systemPrompt = `You are a helpful assistant.
The user will ask questions about their todo list.
Briefly answer the questions.
Don't try to make up an answer if you don't know it.
Here's the user's todo list: ${JSON.stringify(this.todos())}`;
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt Engineering LAB #7
Slide 52
Slide 52 text
Alternatives
Prompt Engineering
Retrieval Augmented
Generation
Fine-tuning
Custom model
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt Engineering
Effort
Slide 53
Slide 53 text
Adjust todo.ts as follows:
return this.llmService.generateResponse(messages, [], {
measurePerformance: true,
});
Ask a new question and check your console for performance statistics.
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Performance LAB #8
Slide 54
Slide 54 text
Workshop Participants
Device Tokens/s (Decode)
Apple M4 Max 28,93
Apple M3 27,41
CPU 0,06
Lenovo T480s 1,83
Intel Iris 3
i7 4,64
NVIDIA RTX 3060 24
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Performance
Slide 55
Slide 55 text
Comparison
45 33
1200
0
200
400
600
800
1000
1200
1400
WebLLM (Llama3-8b, M4) Azure OpenAI (gpt-4o-mini) Groq (Llama3-8b)
Tokens/sec
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Performance
WebLLM/Groq: Own tests (14.11.2024), OpenAI/Azure OpenAI: https://learn.microsoft.com/en-us/azure/ai-services/openai/concepts/provisioned-throughput (18.07.2024)
Slide 56
Slide 56 text
The LLM “calls” the tool. However,
the developer has to take care of
actually executing the code and
to feed back the result into the
conversation.
Tool Calling allows an LLM to
execute “real-world” actions.
A tool usually has…
– a name
– a natural-language description
– an interface definition usually
in JSON Schema
add_todo
get_weather
search_web
read_file
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Tool Calling
Slide 57
Slide 57 text
1. Add the TODO_TOOL to the tools array in inferTransformersJs():
return this.llmService.generateResponse(messages, [TODO_TOOL],
{ measurePerformance: true });
2. Add this line to the end of the runPrompt() method:
this.llmService.executeToolCalls(reply, {
addTodo: (args: { text: string }) => this.addTodo(args.text),
});
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Tool Calling LAB #9
Slide 58
Slide 58 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!
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Web AI Landscape
Hands-on Workshop!
Slide 59
Slide 59 text
await LanguageModel.create();
about://components
about://on-device-internals
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt API
LAB #10
Edge Chrome
edge://flags chrome://flags
Prompt API for Phi mini à Enabled Prompt API for Gemini Nano à
Enabled
Enables optimization guide on
device à
EnabledBypassPerfRequirement
Slide 60
Slide 60 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt API
Operating
System
Website
HTML/JS
Browser Internet
Apple Intelligence
Gemini Nano
Slide 61
Slide 61 text
Part of Chrome’s Built-In AI initiative
– Exploratory API for local
experiments and use case
determination
– Downloads Gemini Nano into
Google Chrome
– Model can be shared across
origins
– Uses native APIs directly
– Fine-tuning API might follow in
the future
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt API
https://developer.chrome.com/docs/ai/built-in
Slide 62
Slide 62 text
npm i -D @types/dom-chromium-ai
add "dom-chromium-ai" to the
types in tsconfig.app.json
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt API
LAB #11
Slide 63
Slide 63 text
Add the following lines to inferPromptApi():
const systemPrompt = `
The user will ask questions about their todo list.
Here's the user's todo list: ${JSON.stringify(this.todos())}`;
const languageModel = await LanguageModel.create({
initialPrompts: [{ role: "system", content: systemPrompt }]
});
const chunks = languageModel.promptStreaming(userPrompt);
for await (const chunk of chunks) {
yield chunk;
}
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Local AI Models LAB #12
Slide 64
Slide 64 text
Alternatives: Ollama
– Local runner for AI models
– Offers a local server a website
can connect to à allows
sharing models across origins
– Supported on Windows, Linux,
macOS
https://ollama.ai/
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Local AI Models
Slide 65
Slide 65 text
https://webml-demo.vercel.app/
https://github.com/jacoblee93/fully-local-pdf-chatbot/
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Local RAG Demo
Slide 66
Slide 66 text
Alternatives
– Pre-trained, specialized,
significantly smaller models
beyond GenAI
– JavaScript library to run
Hugging Face transformers
in the browser
https://huggingface.co/docs/transformers.js
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Local AI Models
Slide 67
Slide 67 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Slide 68
Slide 68 text
On-Device
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Realtime Models
DEMO
Hands-on Workshop!
https://huggingface.co/spaces/webml-community/conversational-webgpu
Slide 69
Slide 69 text
On-device pipeline
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Realtime Models
Whisper
(STT)
Silero
(VAD)
SmolLM2-
1.7B (LLM)
Kokoro
(TTS)
Hands-on Workshop!
Slide 70
Slide 70 text
Just transfer the 17.34 euros to
me, my IBAN is
DE02200505501015871393. I am
with Hamburger Sparkasse
(HASPDEHH).
Data Extraction
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Use Case
Nice, here is my address:
Peter Müller, Rheinstr. 7, 04435
Schkeuditz
Slide 71
Slide 71 text
Just transfer the 17.34 euros to
me, my IBAN is
DE02200505501015871393. I am
with Hamburger Sparkasse
(HASPDEHH).
Data Extraction
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Use Case
Nice, here is my address:
Peter Müller, Rheinstr. 7, 04435
Schkeuditz
Slide 72
Slide 72 text
protected readonly formGroup
= this.fb.group({
firstName: [''],
lastName: [''],
addressLine1: [''],
addressLine2: [''],
city: [''],
state: [''],
zip: [''],
country: [''],
});
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Idea
Nice, here is my address:
Peter Müller, Rheinstr. 7, 04435
Schkeuditz
Smart
Form
Filler
(LLM)
Slide 73
Slide 73 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Form Field
“Insurance numbers
always start with
INS.”
“Try to determine the
country based on the
input.”
Slide 74
Slide 74 text
(1/2)
Add the following code to form.ts:
private readonly fb = inject(NonNullableFormBuilder);
protected readonly formGroup = this.fb.group({
name: '',
city: '',
});
async fillForm(value: string) {}
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Form Field LAB #13
Slide 75
Slide 75 text
(2/2)
Add the following code to form.html:
Fill form
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Form Field LAB #13
Slide 76
Slide 76 text
Async Clipboard API
Allows reading from/writing to
the clipboard in an
asynchronous manner
Reading from the clipboard
requires user consent first
(privacy!)
Supported by Chrome, Edge
and Safari and Firefox
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt Generator
Slide 77
Slide 77 text
(1/2)
Add the following code to form.ts:
async paste() {
const content = await navigator.clipboard.readText();
await this.fillForm(content);
}
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Async Clipboard API LAB #14
Slide 78
Slide 78 text
(2/2)
Add the following code to form.html
(after the “Fill form” button):
Paste
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Async Clipboard API LAB #14
Slide 79
Slide 79 text
System
message
• The form has the
following setup:
{ "name": "",
"city": "" }
User
message
• I am Peter from Berlin
Assistant
message
• { "name": "Peter",
"city": "Berlin" }
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt Generator
Slide 80
Slide 80 text
Add the following code to the fillForm() method:
const languageModel = await LanguageModel.create({
initialPrompts: [{
role: 'system',
content: `Extract the information to a JSON object of this
shape: ${JSON.stringify(this.formGroup.value)}`,
}],
});
const result = await languageModel.prompt(value);
console.log(result);
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt Generator LAB #15
Slide 81
Slide 81 text
Add the following code to form.ts (fillForm() method):
const result = await languageModel.prompt(value, {
responseConstraint: {
type: 'object',
properties: {
name: { type: 'string' },
city: { type: 'string' },
},
},
});
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt Generator (Structured Output) LAB #16
Slide 82
Slide 82 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt Parser
Assistant
message
• { "name": "Peter",
"city": "Berlin" }
Slide 83
Slide 83 text
Add the following code to form.ts (fillForm() method):
this.formGroup.setValue(JSON.parse(result));
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt Parser LAB #17
Slide 84
Slide 84 text
Assistant message
Parsing the assistant message
as text/JSON/…
JSON Mode
Tool calling
Specifying a well-defined
interface via a JSON schema
called by the LLM (safer, growing
support)
Structured Output
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Prompt Parser
Slide 85
Slide 85 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Agentic Browsers
Hands-on Workshop!
Slide 86
Slide 86 text
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
WebMCP
– Allows websites to
expose tools to the
browser or external
agents
– Joint effort by
Microsoft and
Google
https://github.com/webmachinelearning/webmcp
Hands-on Workshop!
Slide 87
Slide 87 text
API
Imperative
navigator.modelContext
.provideContext({ tools: [{
"name": "start_game",
"description": "Start a new
game.",
"inputSchema": {},
"execute": () => {},
}
]});
Declarative
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
WebMCP
Slide 88
Slide 88 text
Pros & Cons
+ Data does not leave the
browser (privacy)
+ High availability
(offline support)
+ Low latency
+ Stability
(no external API changes)
+ Low cost
– Lower quality
– 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: lokal und offlinefähig
Hands-on Workshop!
Summary
Slide 89
Slide 89 text
– Cloud-based models remain the most powerful models
– Due to their size and high system requirements, local generative AI
models are currently rather interesting for very special scenarios (e.g.,
high privacy demands, offline availability)
– Small, specialized models are an interesting alternative (if available)
– Large language models are becoming more compact and efficient
– Vendors are shipping AI models with their devices
– Devices are becoming more powerful for running AI workloads
– Experiment with the AI APIs and make your Angular App smarter!
Angular-Apps smarter machen mit Generative AI: lokal und offlinefähig
Hands-on Workshop!
Summary
Slide 90
Slide 90 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]