rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ee69da166509e4bd2122a6137b356627a5ff8a52
novi-lessons/Les18-AI-Toolbox-Next/Les18-Slide-Overzicht.md
Tim Rijkse 83779e0d7a fix: lessons
2026-06-07 13:35:02 +02:00

11 KiB
Raw Blame History

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:

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:

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:

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:

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:

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:

# macOS
brew install ollama

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

Run lokaal:

ollama run llama4:8b
# Interactieve chat — runt op je laptop, geen internet

Via AI SDK:

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

Reference in New Issue View Git Blame Copy Permalink