fix: lessons
This commit is contained in:
430
Les18-AI-Toolbox-Next/Les18-Slide-Overzicht.md
Normal file
430
Les18-AI-Toolbox-Next/Les18-Slide-Overzicht.md
Normal file
@@ -0,0 +1,430 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user