Christian Liebel
@christianliebel
Consultant
Angular-Apps smarter machen mit
Generativer KI
Lokal und offlinefähig (Hands-on)
Slide 2
Slide 2 text
Hello, it’s me.
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
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 Generativer KI
Lokal und offlinefähig (Hands-on)
Timetable
Slide 4
Slide 4 text
Proposal
09:00–10:30 Block 1
10:30–10:50 Coffee Break
10:50–12:30 Block 2
12:30–13:20 Lunch Break
13:20–15:00 Block 3
15:00–15:20 Coffee Break
15:30–16:30 Block 4
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Timetable
Slide 5
Slide 5 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Expectations
Huge downloads! High requirements! Things may break!
Slide 6
Slide 6 text
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
DEMO
Slide 7
Slide 7 text
(Workshop Edition)
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
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 Generativer KI
Lokal und offlinefähig (Hands-on)
Setup
Slide 9
Slide 9 text
webgpureport.org
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
WebGPU
Slide 10
Slide 10 text
git clone https://github.com/thinktecture/basta-
2025-genai.git
cd basta-2025-genai
npm i
npm start -- --open
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Setup
LAB #0
Slide 11
Slide 11 text
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Generative AI everywhere
Source: https://www.apple.com/chde/apple-intelligence/
Slide 12
Slide 12 text
Run locally on the user’s system
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Single-Page Applications
Server-
Logik
Web API
Push Service
Web API
DBs
HTML, JS,
CSS, Assets
Webserver Webbrowser
SPA
Client-
Logik
View
HTML/CSS
View
HTML/CSS
View
HTML/CSS
HTTPS
WebSockets
HTTPS
HTTPS
Slide 13
Slide 13 text
Make SPAs offline-capable
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Progressive Web Apps
Service
Worker
Internet
Website
HTML/JS
Cache
fetch
Slide 14
Slide 14 text
Overview
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
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
Overview
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Generative AI
Text
OpenAI GPT
Mistral
…
Audio/Music
Musico
Soundraw
…
Images
DALL·E
Firefly
…
Video
Sora
Runway
…
Speech
Whisper
tortoise-tts
…
Slide 16
Slide 16 text
Examples
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Generative AI Cloud Providers
Slide 17
Slide 17 text
Drawbacks
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
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 18
Slide 18 text
Can we run GenAI models locally?
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Slide 19
Slide 19 text
Large: Trained on lots of data
Language: Process and generate text
Models: Programs/neural networks
Examples:
– GPT (ChatGPT, Microsoft Copilot, …)
– Gemini, Gemma (Google)
– LLaMa (Meta AI)
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Large Language Models
Slide 20
Slide 20 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Large Language Models
Slide 21
Slide 21 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Large Language Models
Slide 22
Slide 22 text
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
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Large Language Models
Slide 23
Slide 23 text
https://webllm.mlc.ai/
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
WebLLM
DEMO
Slide 24
Slide 24 text
On NPM
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
WebLLM
Slide 25
Slide 25 text
npm i @mlc-ai/web-llm
npm start -- --open
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
LAB #1
Slide 26
Slide 26 text
(1/4)
In src/app/todo/todo.ts, add the following lines at the top of the class:
protected readonly progress = signal(0);
protected readonly ready = signal(false);
protected engine?: MLCEngine;
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Downloading a model LAB #2
Slide 27
Slide 27 text
(2/4)
In todo.ts (ngOnInit()), add the following lines:
const model = 'Llama-3.2-3B-Instruct-q4f32_1-MLC';
this.engine = await CreateMLCEngine(model, {
initProgressCallback: ({ progress }) =>
this.progress.set(progress)
});
this.ready.set(true);
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Downloading a model LAB #2
Slide 28
Slide 28 text
(3/4)
In todo.html, change the following lines:
@if(!ready()) {
}
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Downloading a model LAB #2
Slide 29
Slide 29 text
(4/4)
Launch the app via npm start. The progress bar should begin to move.
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Downloading a model LAB #2
Slide 30
Slide 30 text
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Slide 31
Slide 31 text
Storing model files locally
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
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 32
Slide 32 text
Parameter cache
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Cache API
Slide 33
Slide 33 text
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
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 34
Slide 34 text
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
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 35
Slide 35 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)
– Even better performance
compared to WebGPU
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
WebNN
Source: https://webmachinelearning.github.io/webnn-intro/
DEMO
Slide 36
Slide 36 text
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
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
(1/4)
In todo.ts, add the following lines at the top of the class:
protected readonly reply = signal('');
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Model inference LAB #3
Slide 38
Slide 38 text
(2/4)
In the runPrompt() method, add the following code:
this.reply.set('…');
const chunks = languageModel === 'webllm'
? this.inferWebLLM(userPrompt)
: this.inferPromptApi(userPrompt);
for await (const chunk of chunks) {
this.reply.set(chunk);
}
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Model inference LAB #3
Slide 39
Slide 39 text
(3/4)
In the inferWebLLM() method, add the following code:
await this.engine!.resetChat();
const messages: ChatCompletionMessageParam[] = [{role: "user", content: userPrompt}];
const chunks = await this.engine!.chat.completions.create({messages, stream: true});
let reply = '';
for await (const chunk of chunks) {
reply += chunk.choices[0]?.delta.content ?? '';
yield reply;
}
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Model inference LAB #3
Slide 40
Slide 40 text
(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.
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Model inference LAB #3
Slide 41
Slide 41 text
Stop the development server (Ctrl+C) and run
npm run build
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
LAB #4
Slide 42
Slide 42 text
1. In angular.json, increase the bundle size for the Angular project
(property architect.build.configurations.production.budgets[0]
.maximumError) to 10MB.
2. Then, run npm run build again. This time, the build should succeed.
3. If you stopped the development server, don’t forget to bring it back up
again (npm start).
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Build issues LAB #4
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:
const text = prompt() ?? '';
this.todos.update(todos => [...todos,
{ done: false, text }]);
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Todo management LAB #5
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 Generativer KI
Lokal und offlinefähig (Hands-on)
Todo management LAB #5
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 Generativer KI
Lokal und offlinefähig (Hands-on)
Todo management (extended) LAB #6
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 (Mistral-7B: 8K).
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 Generativer KI
Lokal und offlinefähig (Hands-on)
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 Generativer KI
Lokal und offlinefähig (Hands-on)
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 Generativer KI
Lokal und offlinefähig (Hands-on)
Chat with data
Slide 49
Slide 49 text
Using a system & user prompt
Adjust the code in inferWebLLM() to include the system prompt:
const systemPrompt = `Here's the user's todo list:
${this.todos().map(todo => `* ${todo.text} (${todo.done ?
'done' : 'not done'})`).join('\n')}`;
const messages: ChatCompletionMessageParam[] = [
{ role: "system", content: systemPrompt },
{ role: "user", content: userPrompt }
];
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Chat with data LAB #7
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 Generativer KI
Lokal und offlinefähig (Hands-on)
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:
${this.todos().map(todo => `* ${todo.text} (this todo is
${todo.done ? 'done' : 'not done'})`).join('\n')}
${this.todos().length === 0 ? 'The list is empty, there are
no todos.' : ''}`;
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt Engineering LAB #8
Slide 52
Slide 52 text
Alternatives
Prompt Engineering
Retrieval Augmented
Generation
Fine-tuning
Custom model
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt Engineering
Effort
Slide 53
Slide 53 text
Adjust todo.ts as follows:
const chunks = await this.engine!.chat.completions.create({ messages,
stream: true, stream_options: { include_usage: true } });
let reply = '';
for await (const chunk of chunks) {
reply += chunk.choices[0]?.delta.content ?? '';
console.log(chunk.usage);
yield reply;
}
Ask a new question and check your console for performance statistics.
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Performance LAB #9
Slide 54
Slide 54 text
Workshop Participants
Device Tokens/s (Decode)
MacBook Pro M4 Max (2024) 33,27
DELL Precision 3581 (2023) 15
Thinkpad Linux 4,53
MacBook Pro M3 (2023) 20
Thinkpad Linux mit Software-GPU 0,076
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
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 Generativer KI
Lokal und offlinefähig (Hands-on)
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
https://www.google.com/chrome/canary/
about://flags
Enables optimization guide on device à
EnabledBypassPerfRequirement
Prompt API for Gemini Nano à Enabled
await LanguageModel.create();
about://components
about://on-device-internals
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt API
LAB #10
Slide 57
Slide 57 text
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt API
Operating
System
Website
HTML/JS
Browser Internet
Apple Intelligence
Gemini Nano
Slide 58
Slide 58 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt API
https://developer.chrome.com/docs/ai/built-in
Slide 59
Slide 59 text
npm i -D @types/dom-chromium-ai
add "dom-chromium-ai" to the
types in tsconfig.app.json
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt API
LAB #11
Slide 60
Slide 60 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:
${this.todos().map(todo => `* ${todo.text} (${todo.done ? 'done' : 'not
done'})`).join('\n')}`;
const languageModel = await LanguageModel.create({ initialPrompts: [{ role:
"system", content: systemPrompt }]});
const chunks = languageModel.promptStreaming(userPrompt);
let reply = '';
for await (const chunk of chunks) {
reply += chunk;
yield reply;
}
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Local AI Models LAB #12
Slide 61
Slide 61 text
Alternatives: Ollama
– Local runner for AI models
– Offers a local server a website
can connect to à allows
sharing models across origins
– Supported on macOS and
Linux (Windows in Preview)
https://webml-demo.vercel.app/
https://ollama.ai/
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Local AI Models
Slide 62
Slide 62 text
https://github.com/jacoblee93/fully-local-pdf-chatbot/
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Local RAG Demo
Slide 63
Slide 63 text
Alternatives: Hugging Face Transformers
Pre-trained, specialized, significantly smaller models beyond GenAI
Examples:
– Text generation
– Image classification
– Translation
– Speech recognition
– Image-to-text
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Local AI Models
Slide 64
Slide 64 text
Alternatives: Transformers.js
– Pre-trained, specialized,
significantly smaller models
beyond GenAI
– JavaScript library to run
Hugging Face transformers
in the browser
– Supports most of the models
https://huggingface.co/docs/transformers.js
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Local AI Models
Slide 65
Slide 65 text
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
DEMO
Slide 66
Slide 66 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Use Case
Nice, here is my address:
Peter Müller, Rheinstr. 7, 04435
Schkeuditz
Slide 67
Slide 67 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Use Case
Nice, here is my address:
Peter Müller, Rheinstr. 7, 04435
Schkeuditz
Slide 68
Slide 68 text
protected readonly formGroup
= this.fb.group({
firstName: [''],
lastName: [''],
addressLine1: [''],
addressLine2: [''],
city: [''],
state: [''],
zip: [''],
country: [''],
});
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Idea
Nice, here is my address:
Peter Müller, Rheinstr. 7, 04435
Schkeuditz
Smart
Form
Filler
(LLM)
Slide 69
Slide 69 text
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Form Field
“Insurance numbers
always start with
INS.”
“Try to determine the
country based on the
input.”
Slide 70
Slide 70 text
(1/2)
Add the following code to form.ts:
private fb = inject(NonNullableFormBuilder);
protected formGroup = this.fb.group({
name: '',
city: '',
});
async fillForm(value: string) {}
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Form Field LAB #13
Slide 71
Slide 71 text
(2/2)
Add the following code to form.html:
Fill form
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Form Field LAB #13
Slide 72
Slide 72 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt Generator
Slide 73
Slide 73 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Async Clipboard API LAB #14
Slide 74
Slide 74 text
(2/2)
Add the following code to form.html
(after the “Fill form” button):
Paste
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Async Clipboard API LAB #14
Slide 75
Slide 75 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt Generator
Slide 76
Slide 76 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt Generator LAB #15
Slide 77
Slide 77 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt Generator (Structured Output) LAB #16
Slide 78
Slide 78 text
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt Parser
Assistant
message
• { "name": "Peter",
"city": "Berlin" }
Slide 79
Slide 79 text
Add the following code to form.ts (fillForm() method):
this.formGroup.setValue(JSON.parse(result));
Angular-Apps smarter machen mit Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt Parser LAB #17
Slide 80
Slide 80 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Prompt Parser
Slide 81
Slide 81 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Summary
Slide 82
Slide 82 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 Generativer KI
Lokal und offlinefähig (Hands-on)
Summary
Slide 83
Slide 83 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]