fix: lessons
This commit is contained in:
310
Les18-AI-Toolbox-Next/Les18-Docenttekst.md
Normal file
310
Les18-AI-Toolbox-Next/Les18-Docenttekst.md
Normal file
@@ -0,0 +1,310 @@
|
||||
# Les 18 — Advanced AI Toolbox
|
||||
## Docenttekst (Klas A — 3 uur, fysiek, demo-driven, laatste les)
|
||||
|
||||
**Les:** 18 van 18
|
||||
**Onderwerp:** Voice + Vision + Image gen + Local LLMs + Edge AI + wrap-up
|
||||
**Duur:** 180 minuten
|
||||
**Demo-app:** Vijf mini-demo's, niet één
|
||||
|
||||
---
|
||||
|
||||
## VÓÓR DE LES (60 min)
|
||||
|
||||
1. Alle vijf demo's lokaal werkend op laptop
|
||||
2. OpenAI account (Whisper + Vision werkend)
|
||||
3. Fal.ai account (image gen)
|
||||
4. Ollama geïnstalleerd + llama4:8b gedownload (vooraf — duurt 10 min)
|
||||
5. Vercel AI Gateway demo-project klaar
|
||||
6. Browser tabs: ollama.com, fal.ai, vercel.com/docs/ai-gateway
|
||||
7. Mentaal voorbereid: laatste les, ruimte voor reflectie aan eind
|
||||
|
||||
---
|
||||
|
||||
## HET SCRIPT
|
||||
|
||||
### BLOK 1 — Welkom + Recap (10 min)
|
||||
|
||||
`[SLIDE 1]`
|
||||
|
||||
**Vertel:** "Welkom bij de allerlaatste les. Les 18. Vandaag: alle leuke modaliteiten die we nog niet hebben gezien. Voice, vision, image gen, local LLMs, edge AI."
|
||||
|
||||
`[SLIDE 2]`
|
||||
|
||||
**Vertel:** "Even kort terug. 18 lessen. Foundations 1-10, AI SDK 11, Tool Calling 12, Cursor+Vercel 13, Agents 14, RAG 15, MCP 16, Production Polish 17, vandaag.
|
||||
|
||||
Vandaag is anders dan voorgaande lessen. Geen één onderwerp dat we diep in gaan. Vijf modaliteiten, korte demo's, je weet wat mogelijk is. Voor je eindopdracht: kies wat past."
|
||||
|
||||
`[SLIDE 3]`
|
||||
|
||||
**Vertel:** "180 minuten. 25 min theorie en landschap. Vijf demo's van 20-25 min. Pauze rond minuut 80. Aan eind 25 min voor reflectie + vragen."
|
||||
|
||||
---
|
||||
|
||||
### BLOK 2 — Theorie + landschap (25 min)
|
||||
|
||||
`[SLIDE 4]`
|
||||
|
||||
**Vertel:** "Het landschap eind 2026. Verschillende providers, verschillende sterke punten.
|
||||
|
||||
OpenAI heeft GPT-5 voor algemeen, o3 voor reasoning, GPT-realtime voor voice. Anthropic Claude Opus 4.6 en Sonnet 4.6 — best voor code en lange context. Google Gemini 2.5 met 2 miljoen context window. Meta Llama 4 — open-source, je kunt 'm lokaal draaien.
|
||||
|
||||
Modaliteiten — text, vision, voice, image, video. En modi — cloud API, edge, lokaal.
|
||||
|
||||
Vandaag zien we alle drie de modi."
|
||||
|
||||
`[SLIDE 5]`
|
||||
|
||||
**Vertel:** "Waarom multimodal? Tekst is niet altijd genoeg. Mobile? Voice is sneller dan typen. Foto-upload? Vision. Marketing-assets? Image gen.
|
||||
|
||||
Denk per feature: welke modaliteit past het best? Niet alles is chat."
|
||||
|
||||
---
|
||||
|
||||
### BLOK 3 — DEMO 1: Voice (25 min)
|
||||
|
||||
`[SLIDE 6]` `[SCHERM: editor + browser]`
|
||||
|
||||
**Vertel:** "Whisper voor transcriptie. Drie regels code."
|
||||
|
||||
`*[Maak app/voice/page.tsx + api/transcribe/route.ts]*`
|
||||
|
||||
```typescript
|
||||
const result = await transcribe({
|
||||
model: openai.transcription("whisper-1"),
|
||||
audio: audioBlob,
|
||||
});
|
||||
```
|
||||
|
||||
`*[Demo: klik record, spreek, zie tekst verschijnen]*`
|
||||
|
||||
**Vertel:** "Werkt. Cost: $0.006 per minuut. Voor productie: ElevenLabs voor TTS-stemmen die natuurlijker klinken.
|
||||
|
||||
Volledige voice-loop? Drie calls. Whisper + LLM + TTS. Latency ongeveer 2-4 seconden. Voor 'echte' voice met interruptions: Realtime API. Complexer, magisch."
|
||||
|
||||
💬 *Vraag: 'Hoe duur is dit op schaal?'*
|
||||
|
||||
**Antwoord:** "Voor 1000 vragen van 30 seconden: Whisper $3, LLM $1, TTS $5. Negen dollar voor duizend voice-interacties. Schaalbaar."
|
||||
|
||||
---
|
||||
|
||||
### BLOK 4 — DEMO 2: Vision (20 min)
|
||||
|
||||
`[SLIDE 7]`
|
||||
|
||||
`*[Maak app/vision/page.tsx + api/analyze/route.ts]*`
|
||||
|
||||
```typescript
|
||||
const result = await generateText({
|
||||
model: openai("gpt-4o"),
|
||||
messages: [{
|
||||
role: "user",
|
||||
content: [
|
||||
{ type: "text", text: "Beschrijf wat er op deze foto staat." },
|
||||
{ type: "image", image: buffer },
|
||||
],
|
||||
}],
|
||||
});
|
||||
```
|
||||
|
||||
`*[Demo: upload foto van eten, krijg beschrijving]*`
|
||||
|
||||
**Vertel:** "Bouw varianten. Defect detection in fabrieken. OCR voor formulieren. Receipt scanning — bonnetjes naar gestructureerde data. Code-from-screenshot.
|
||||
|
||||
Cost: vision is 2-5× duurder dan text. Een 1024×1024 image = ~1100 tokens. Voor productie: resize client-side."
|
||||
|
||||
---
|
||||
|
||||
### BLOK 5 — Pauze (15 min)
|
||||
|
||||
`[SLIDE 8]`
|
||||
|
||||
---
|
||||
|
||||
### BLOK 6 — DEMO 3: Image generation (25 min)
|
||||
|
||||
`[SLIDE 9]`
|
||||
|
||||
**Vertel:** "Image generation. Flux is het beste open-source model. Via Fal.ai of Replicate."
|
||||
|
||||
`*[Fal account, key]*`
|
||||
|
||||
```bash
|
||||
pnpm add @ai-sdk/fal
|
||||
```
|
||||
|
||||
`*[app/generate/page.tsx]*`
|
||||
|
||||
```typescript
|
||||
const { image } = await generateImage({
|
||||
model: fal.image("fal-ai/flux/schnell"),
|
||||
prompt: "Retro festival-poster voor Polderfest 2027, oranje + cream, vintage typografie",
|
||||
size: "1024x1024",
|
||||
});
|
||||
```
|
||||
|
||||
`*[Demo: type prompt, klik generate, zie image]*`
|
||||
|
||||
**Vertel:** "Drie cent per image op schnell variant. Voor productie: save in Supabase Storage, gebruik CDN.
|
||||
|
||||
Goede prompts zijn specifiek. Stijl, palette, compositie, wat NIET te tonen. 'Een mooie afbeelding' werkt niet. 'Retro festival-poster, 70s rockconcert-flyer stijl, oranje en cream, decoratieve geometrische randen' wel."
|
||||
|
||||
---
|
||||
|
||||
### BLOK 7 — DEMO 4: Local LLMs (25 min)
|
||||
|
||||
`[SLIDE 10]`
|
||||
|
||||
**Vertel:** "Tijd om lokaal te draaien. Ollama."
|
||||
|
||||
`*[Terminal]*`
|
||||
|
||||
```bash
|
||||
brew install ollama # of via download
|
||||
ollama pull llama4:8b
|
||||
ollama run llama4:8b
|
||||
```
|
||||
|
||||
`*[Interactieve chat in terminal — werkt offline]*`
|
||||
|
||||
**Vertel:** "Dat draait lokaal op mijn M-series Mac. Geen internet, geen API-cost.
|
||||
|
||||
Via AI SDK:"
|
||||
|
||||
```bash
|
||||
pnpm add ollama-ai-provider
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { createOllama } from "ollama-ai-provider";
|
||||
const ollama = createOllama();
|
||||
|
||||
const result = await generateText({
|
||||
model: ollama("llama4:8b"),
|
||||
prompt: "...",
|
||||
});
|
||||
```
|
||||
|
||||
`*[Demo: chat-app met dropdown 'Cloud (gpt-4o-mini)' vs 'Local (llama4)'. Vergelijk antwoorden]*`
|
||||
|
||||
**Vertel:** "Lokaal model is iets minder slim dan GPT-5 voor complex. Voor 70% van vragen prima. Voor privacy-critical apps — healthcare, legal — is dit dé oplossing. Voor cost — als je veel calls maakt, lokaal is gratis na hardware-investering."
|
||||
|
||||
---
|
||||
|
||||
### BLOK 8 — DEMO 5: Edge AI + Gateway (20 min)
|
||||
|
||||
`[SLIDE 11]`
|
||||
|
||||
**Vertel:** "Twee edge-opties.
|
||||
|
||||
Vercel AI Gateway. Eén endpoint, alle providers. Automatic fallback bij OpenAI-down."
|
||||
|
||||
```typescript
|
||||
import { vercel } from "@ai-sdk/vercel";
|
||||
|
||||
const result = await generateText({
|
||||
model: vercel.fallback([
|
||||
"openai/gpt-4o",
|
||||
"anthropic/claude-sonnet-4.5",
|
||||
]),
|
||||
prompt: "...",
|
||||
});
|
||||
```
|
||||
|
||||
**Vertel:** "Als OpenAI down: switch automatisch naar Claude. Geen downtime voor je users.
|
||||
|
||||
Cloudflare Workers AI. LLMs op Cloudflare's edge. 250+ datacenters wereldwijd. Latency overal laag."
|
||||
|
||||
```typescript
|
||||
import { workersai } from "@ai-sdk/cloudflare";
|
||||
|
||||
const result = await generateText({
|
||||
model: workersai("@cf/meta/llama-3.1-8b-instruct"),
|
||||
prompt: "...",
|
||||
});
|
||||
```
|
||||
|
||||
**Vertel:** "Gratis tier 10k requests per dag. Voor MVP en lichte apps: gratis productie."
|
||||
|
||||
---
|
||||
|
||||
### BLOK 9 — Resources + community (10 min)
|
||||
|
||||
`[SLIDE 12]`
|
||||
|
||||
**Vertel:** "Hoe blijf je leren? Communities. r/LocalLLaMA op Reddit voor open-source updates. AI Engineer Foundation op Discord voor productie-focus. Latent Space — podcast en Discord.
|
||||
|
||||
Blogs. Simon Willison's blog is de absolute referentie. Daily updates. The Rundown AI newsletter. Twitter accounts: Karpathy, swyx, sama.
|
||||
|
||||
Voor diepere kennis. Karpathy's Zero to Hero op YouTube — bouw neural network from scratch. Gratis, briljant.
|
||||
|
||||
Conferenties. AI Engineer Summit in SF jaarlijks. NeurIPS voor research. In Nederland: Devbase, MAINSTAGE."
|
||||
|
||||
---
|
||||
|
||||
### BLOK 10 — Eindopdracht + Afsluiting (15 min)
|
||||
|
||||
`[SLIDE 13]`
|
||||
|
||||
**Vertel:** "Tijd voor eindopdracht. Wat we hebben:
|
||||
|
||||
Volledige toolkit. Next.js, TypeScript, Tailwind. Supabase. AI SDK. Tool calling. Agents. RAG. MCP. Production polish. Multimodal.
|
||||
|
||||
Voor je eindopdracht — moet bevatten Next.js stack, Supabase met auth en RLS, AI SDK met Tool Calling, externe API, deployed op Vercel.
|
||||
|
||||
Werk er gestaag aan. 8 tot 10 uur per week voor 4 tot 6 weken. Niet één laat weekend.
|
||||
|
||||
Pitch volgt na inleveren. Acht tot twaalf minuten demonstratie.
|
||||
|
||||
Eindopdracht-voorstel deze week via Teams indienen."
|
||||
|
||||
`[SLIDE 14]`
|
||||
|
||||
**Vertel:** "Een laatste woord.
|
||||
|
||||
18 lessen. 54 uur klassikaal samen. Plus jullie thuiswerk. Een vol vak.
|
||||
|
||||
Wat jullie nu kunnen. Een AI-app van scratch naar productie. Tool calling en agents. RAG en MCP. Production-niveau observability en evals. Multimodal features. Lokale modellen draaien.
|
||||
|
||||
Drie jaar geleden was dit een specialist-skill. Nu — jullie kunnen dit.
|
||||
|
||||
Voor je eindopdracht en daarna. Doe het ding waarvan je dacht: dat kan ik niet. Bouw iets dat je écht zelf zou gebruiken. Vraag hulp tijdig. En als je iets bouwt waar je trots op bent — laat het me weten. Echt waar.
|
||||
|
||||
Bedankt voor jullie inzet. Veel succes."
|
||||
|
||||
`[SLIDE 15]`
|
||||
|
||||
**Vertel:** "Open ruimte. Vragen over de stof. Vragen over je eindopdracht. Vragen over je carrière in AI development. Feedback op de leerlijn."
|
||||
|
||||
`*[Vragenronde — laat dit echt open. 10-15 min over]*`
|
||||
|
||||
---
|
||||
|
||||
## NA DE LES — Wrap-up
|
||||
|
||||
- Brightspace: eindopdracht-instructies + voorstel-template
|
||||
- Teams: nieuwe channel "Eindopdracht support"
|
||||
- Office hours-schema voor 4-6 weken
|
||||
- Bewaar deze 18 lessen als referentie voor Klas B / volgende cyclus
|
||||
- Voor jezelf: noteer wat werkte en wat minder — voor verbetering
|
||||
|
||||
---
|
||||
|
||||
## Veelvoorkomende fouten in demo's
|
||||
|
||||
| Fout | Oplossing |
|
||||
|------|-----------|
|
||||
| MediaRecorder API niet beschikbaar | Test in Chrome eerst, Safari heeft soms anders |
|
||||
| Fal API key issue | Sign up + generate key, gratis tier |
|
||||
| Ollama "connection refused" | `ollama serve` runnen, check `:11434` poort |
|
||||
| Vision image te groot | Resize naar <4MB, of compress JPEG |
|
||||
| Vercel AI Gateway niet beschikbaar | Vercel Pro account nodig in 2026 |
|
||||
|
||||
---
|
||||
|
||||
## Mentale model voor afsluiting
|
||||
|
||||
Voor reflectie aan eind van de les:
|
||||
|
||||
> 18 lessen leiden niet tot "AI-meester". Wel tot iemand die weet welke vragen te stellen, welke tools te kiezen, en hoe te beginnen. Verdere groei = blijven bouwen, vragen stellen, community + nieuwe modellen volgen.
|
||||
|
||||
Hou de toon praktisch, niet sentimenteel. Studenten waarderen oprechte erkenning + duidelijke volgende stap.
|
||||
Reference in New Issue
Block a user