novi-lessons/Les18-AI-Toolbox-Next/Les18-Docenttekst.md

# 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.