# Les 18 — Advanced AI Toolbox
## Slide Overzicht (Klas A — 3 uur fysiek, demo-driven, **laatste les!**)

**Lesvorm:** Tim demonstreert klassikaal. Studenten kijken. Korte demo's, geen lange theorie.
**Demo-app:** Vijf kleine demo-apps — voice, vision, image gen, local LLMs, edge AI
**Vervolg op:** Les 17 — AI Production Polish
**Aansluit op:** Eindopdracht (thuis)

---

## Slide 1: Title
### Les 18 — Advanced AI Toolbox

**Visual:** "Les 18" BLUE, "Advanced AI Toolbox" BLACK, subtitle "Wat er nog meer mogelijk is — voice, vision, image, local, edge"

---

## Slide 2: Terugblik 18 lessen
### Wat we samen hebben gedaan

| Lessen | Topic |
|--------|-------|
| 1-10 | Foundations (Next.js, TS, Supabase basics) |
| 11 | AI SDK basics |
| 12 | Tool Calling |
| 13 | Cursor + Vercel deploy |
| 14 | Agents |
| 15 | RAG + Embeddings |
| 16 | MCP servers |
| 17 | Production Polish |
| **18** | **Vandaag: Advanced AI Toolbox** |

**Vandaag:** alles wat we nog NIET hebben gezien. Demo-driven, korte introducties, je weet wat mogelijk is.

---

## Slide 3: Planning
### Vandaag — 180 minuten

| Onderwerp | Duur |
|-----------|------|
| Terugblik 18 lessen | 10 min |
| Theorie: het AI-landschap 2026 | 15 min |
| **Live Demo 1** — Voice (Whisper + TTS) | 25 min |
| **Live Demo 2** — Vision (GPT-4o foto-analyse) | 20 min |
| **Pauze** | 15 min |
| **Live Demo 3** — Image generation (Flux) | 25 min |
| **Live Demo 4** — Local LLMs (Ollama) | 25 min |
| **Live Demo 5** — Edge AI (Vercel AI Gateway) | 20 min |
| Wat nu? Resources + community | 10 min |
| Vragen + afsluiting cyclus | 15 min |

---

## Slide 4: Het AI-landschap 2026
### Waar staan we nu?

**Modellen (eind 2026):**
- **OpenAI:** GPT-5, o3 reasoning, GPT-5-mini, GPT-realtime (voice)
- **Anthropic:** Claude Opus 4.6, Sonnet 4.6, Haiku 4.5
- **Google:** Gemini 2.5 Pro (2M context), Gemini Flash
- **Meta:** Llama 4 (open-source)
- **xAI:** Grok 4, Grok 4 Vision

**Modaliteiten:**
- Text (alle modellen)
- Vision (GPT-4o, Claude, Gemini)
- Voice (GPT-realtime, ElevenLabs)
- Image generation (DALL-E 4, Flux, Midjourney)
- Video (Sora, Veo, Runway Gen-4)

**Modi:**
- API direct
- Edge (Vercel AI Gateway, Cloudflare AI)
- Lokaal (Ollama, llama.cpp)

---

## Slide 5: Waarom multimodal?
### Tekst is niet genoeg

**Wat krijg je met multimodal:**
- **Voice input** — handsfree, sneller dan typen, voor mobile dominant
- **Vision** — user upload foto, AI analyseert (defect-detectie, OCR, beschrijving)
- **Image gen** — assets ter plaatse genereren (landing pages, social media, avatars)
- **Voice output** — voor accessibility en cars/IoT
- **Real-time** — conversational, geen wachten op response

**In je apps:** denk niet "chat only" — vraag je af welke modaliteit het best past per feature.

---

## Slide 6: LIVE DEMO 1 — Voice (Whisper + TTS)
### ~25 min

**Wat ik laat zien:**

**Whisper voor transcriptie:**
```typescript
import { experimental_transcribe as transcribe } from "ai";
import { openai } from "@ai-sdk/openai";

const result = await transcribe({
  model: openai.transcription("whisper-1"),
  audio: audioBlob,
});
console.log(result.text);
```

**TTS voor uitspraak:**
```typescript
import { experimental_generateSpeech as speak } from "ai";

const audio = await speak({
  model: openai.speech("tts-1"),
  text: "Welkom bij Polderfest!",
  voice: "alloy",
});
```

**Demo-app:** voice-chat met Polderfest. Mic-button → spreek vraag → Whisper → LLM → TTS → spreekt antwoord. Volledige loop in 2 seconden.

**Realtime API (kort):** voor lagere latency en interruptions. Vereist WebRTC, complexer maar voelt magisch.

---

## Slide 7: LIVE DEMO 2 — Vision (GPT-4o foto-analyse)
### ~20 min

**Wat ik laat zien:**

```typescript
import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";

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: imageUrl },  // of base64 buffer
    ],
  }],
});
```

**Demo-cases:**
- Upload foto van eten → AI noemt ingrediënten
- Upload screenshot van error → AI legt fout uit
- Upload handtekening → AI beschrijft stijl

**Use cases in productie:**
- Defect-detectie in fabrieken
- OCR voor formulieren
- Visual search ("toon me schoenen zoals deze")
- Accessibility — alt-tekst automatisch genereren

**Cost:** vision is duurder dan text — check pricing per provider.

---

## Slide 8: Pauze
### 15 min

---

## Slide 9: LIVE DEMO 3 — Image generation
### ~25 min

**Wat ik laat zien:**

**Flux via Replicate of Fal:**
```typescript
import { experimental_generateImage as generateImage } from "ai";
import { fal } from "@ai-sdk/fal";

const { image } = await generateImage({
  model: fal.image("fal-ai/flux/dev"),
  prompt: "Een poster voor Polderfest 2027, retro stijl, oranje + cream kleuren",
  size: "1024x1024",
});

// image.base64 of image.url
```

**DALL-E 4 via OpenAI:**
```typescript
const { image } = await generateImage({
  model: openai.image("dall-e-3"),
  prompt: "...",
  size: "1024x1024",
});
```

**Demo-app:** form met prompt-input → generate button → image preview + download.

**Use cases:**
- Landing page hero-images
- Social media posts on-the-fly
- Avatar generation per user
- Product mockups
- Marketing visuals

**Tips:**
- Specifieke prompts werken beter (stijl, kleur, compositie)
- Flux Pro voor hoogste kwaliteit, Flux Schnell voor speed
- Cost: $0.02-0.10 per image, schaal-bewust

---

## Slide 10: LIVE DEMO 4 — Local LLMs (Ollama)
### ~25 min

**Wat ik laat zien:**

**Ollama installeren:**
```bash
# macOS
brew install ollama

# Download een model
ollama pull llama4:8b
ollama pull qwen3:14b
```

**Run lokaal:**
```bash
ollama run llama4:8b
# Interactieve chat — runt op je laptop, geen internet
```

**Via AI SDK:**
```typescript
import { createOllama } from "ollama-ai-provider";

const ollama = createOllama();

const result = await generateText({
  model: ollama("llama4:8b"),
  prompt: "Wat zijn de hoofdfuncties van een AI Developer?",
});
```

**Wanneer lokaal:**
- **Privacy** — geen data naar third party
- **Cost** — geen API-cost (alleen elektriciteit)
- **Offline** — werkt zonder internet
- **Latency** — afhankelijk van hardware, op M-series Mac vaak snel

**Nadelen:**
- Kwaliteit < GPT-5 / Claude voor complex
- Hardware vereist (8GB+ RAM voor klein model, 32GB+ voor groot)
- Trager dan API voor grote modellen

**Demo-app:** chat-form met dropdown "Cloud (gpt-4o-mini)" of "Local (llama4)". Vergelijk antwoorden side-by-side.

---

## Slide 11: LIVE DEMO 5 — Edge AI + AI Gateway
### ~20 min

**Wat ik laat zien:**

**Vercel AI Gateway:**
- Eén endpoint, alle providers
- Automatic fallback bij outages
- Cost optimization
- Provider-agnostic key management

```typescript
import { vercel } from "@ai-sdk/vercel";

const result = await generateText({
  model: vercel("openai/gpt-4o"),  // routed via Vercel
  prompt: "...",
});

// Of fallback chain:
const result = await generateText({
  model: vercel.fallback([
    "openai/gpt-4o",
    "anthropic/claude-sonnet-4.5",  // fallback if OpenAI down
  ]),
  prompt: "...",
});
```

**Cloudflare Workers AI:**
- Lokale modellen op Cloudflare edge — ms latency wereldwijd
- Veel modellen gratis tier
- Voor: globale apps die snel willen zijn

```typescript
import { workersai } from "@ai-sdk/cloudflare";

const result = await generateText({
  model: workersai("@cf/meta/llama-3.1-8b-instruct"),
  prompt: "...",
});
```

**Wanneer edge:**
- Globale app, latency belangrijk
- Cost-sensitive (free tiers ruimer)
- Geen vendor lock-in

---

## Slide 12: Wat nu? Resources + community
### Hoe blijf je leren?

**Communities (2026):**
- **r/LocalLLaMA** — Reddit, dagelijkse update over open-source modellen
- **AI Engineer Foundation** — Discord, productie-focus
- **Latent Space** — podcast + Discord, breed
- **Hugging Face Discord** — modellen + papers
- **AI SDK Discord** — Vercel's eigen, direct contact

**Nieuwsbronnen:**
- **Simon Willison's blog** — beste AI-blog 2024-2026
- **Latent Space** — wekelijkse podcast
- **The Rundown AI** — daily newsletter
- **Twitter/X:** @karpathy, @swyx, @sama, @AnthropicAI

**Voor diepere kennis:**
- **Karpathy's Zero to Hero** — neural networks vanaf nul (YouTube, gratis)
- **Andrew Ng's courses** — Coursera, structureel
- **Hugging Face NLP course** — gratis, hands-on

**Conferenties:**
- AI Engineer Summit (jaarlijks, SF)
- NeurIPS, ICLR (research-focus)

---

## Slide 13: Eindopdracht reminder
### Volgende stap

**Wat je nu hebt:**
- Volledige toolkit voor moderne AI-apps
- 17 lesopdrachten + huiswerkopdrachten aan deelgenomen
- Eigen mini-projecten gebouwd

**Wat nog komt:**
- **Eindopdracht** — thuis bouwen (geen klassikale werkdagen)
- Eindopdracht moet bevatten:
  - Next.js + TypeScript + Tailwind
  - Supabase (DB + Auth + RLS)
  - Vercel AI SDK met Tool Calling
  - Externe API
  - Deployed naar Vercel

**Praktische tips:**
- Werk er gestaag aan — 8-10 uur/week voor 4-6 weken
- Push klein en vaak
- Vraag hulp tijdig (Slack, mail, office hours)
- Begin met je voorstel (in te leveren via Teams)

---

## Slide 14: De afsluiting
### Bedankt en succes!

**Wat we samen hebben gedaan:**
- 18 lessen, ~54 uur klassikaal
- Van localhost naar productie
- Van simple fetch naar agents + RAG + MCP
- Van mock-data naar productie-app met observability

**Wat je nu zelfstandig kunt:**
- Volledige AI-app van scratch naar productie
- Multi-modal features (voice, vision, image gen)
- Observability + evals + security in productie
- Lokale LLMs draaien
- Open-source AI ecosysteem navigeren

**Voor je eindopdracht en daarna:**
- Doe het ding waarvan je dacht: dat kan ik niet
- Vraag hulp + deel je werk
- Blijf bouwen

**Bedankt voor jullie inzet de afgelopen 18 lessen. Succes!**

---

## Slide 15: Vragen?
### Open ruimte

**~15 min voor:**
- Vragen over leerstof
- Vragen over eindopdracht
- Vragen over je carrière in AI development
- Feedback op de leerlijn

---

## Slide Summary

| # | Title | Type |
|---|-------|------|
| 1 | Title | Opening |
| 2 | Terugblik 18 lessen | Recap |
| 3 | Planning | 180-min |
| 4 | AI landschap 2026 | Theorie |
| 5 | Waarom multimodal | Theorie |
| 6 | **DEMO 1** — Voice | Demo |
| 7 | **DEMO 2** — Vision | Demo |
| 8 | Pauze | Break |
| 9 | **DEMO 3** — Image gen | Demo |
| 10 | **DEMO 4** — Local LLMs | Demo |
| 11 | **DEMO 5** — Edge AI | Demo |
| 12 | Wat nu? Resources | Reflectie |
| 13 | Eindopdracht reminder | Praktijk |
| 14 | Afsluiting cyclus | Closing |
| 15 | Vragen | Open |

---

## Bronnen

- **AI SDK Voice + Vision:** https://ai-sdk.dev/docs/ai-sdk-core/transcription, /speech
- **Ollama:** https://ollama.com/library
- **Vercel AI Gateway:** https://vercel.com/docs/ai/ai-gateway
- **Fal (image gen):** https://fal.ai/models
- **Replicate:** https://replicate.com
- **Simon Willison blog:** https://simonwillison.net
- **Latent Space podcast:** https://www.latent.space
- **AI Engineer:** https://www.ai.engineer
- **r/LocalLLaMA:** https://reddit.com/r/LocalLLaMA