diff --git a/Les01-Introductie-AI/Les01-Slide-Overzicht.md b/Les01-Introductie-AI/Les01-Slide-Overzicht.md index a49456f..ebe6818 100644 --- a/Les01-Introductie-AI/Les01-Slide-Overzicht.md +++ b/Les01-Introductie-AI/Les01-Slide-Overzicht.md @@ -1,4 +1,5 @@ # Les 1: Introductie tot AI en Large Language Models + ## Slide Overzicht (3 uur les) --- @@ -6,6 +7,7 @@ ## DEEL 1: WELKOM & INTRODUCTIE (13 minuten) ### Slide 1: Titelslide + **Titel:** Introductie tot AI en Large Language Models **Subtitel:** AI Development - Les 1 **Docent:** Tim Rijkse @@ -14,6 +16,7 @@ --- ### Slide 2: Planning + **Titel:** Planning **Inhoud:** @@ -23,16 +26,16 @@ → AI Landscape: de grote spelers **14:50 - 15:15** -→ *Praktijk:* ChatGPT leren gebruiken +→ _Praktijk:_ ChatGPT leren gebruiken **15:15 - 15:30** → Prompt Engineering basics **15:30 - 16:00** -→ *Demo:* Van schets naar website met v0.dev +→ _Demo:_ Van schets naar website met v0.dev **16:00 - 16:50** -→ *Lesopdracht:* Jouw tekening wordt een website +→ _Lesopdracht:_ Jouw tekening wordt een website **16:50 - 17:00** → Afsluiting & Huiswerk @@ -40,9 +43,11 @@ --- ### Slide 3: Lesoverzicht + **Titel:** Wat gaan we vandaag doen? **Inhoud:** + - Kennismaking met elkaar en de leerlijn - Wat is AI en hoe werken LLMs? - Het AI-landschap: ChatGPT, Claude, Gemini @@ -56,9 +61,11 @@ --- ### Slide 4: Kennismaking + **Titel:** Wie zijn jullie? **Inhoud:** + - Naam - Achtergrond (werk/studie) - Ervaring met AI tools (ChatGPT, Claude, etc.) @@ -67,9 +74,11 @@ --- ### Slide 5: De Leerlijn AI Developer + **Titel:** Wat gaan we 18 weken lang doen? **Inhoud:** + - **Hoofdstuk 1 (Les 1-3):** AI Fundamentals - basis begrip en ethiek - **Hoofdstuk 2 (Les 4-9):** AI Driven Development - tools en workflows - **Hoofdstuk 3 (Les 10-18):** Full-Stack met AI - productie-klare apps bouwen @@ -81,9 +90,11 @@ ## DEEL 2: WAT IS AI? (20 minuten) ### Slide 6: Wat is Artificial Intelligence? + **Titel:** AI - Meer dan een buzzword **Inhoud:** + - **Definitie:** Computersystemen die taken uitvoeren die normaal menselijke intelligentie vereisen - **Typen AI:** - Narrow AI (wat we nu hebben): specifieke taken @@ -96,15 +107,18 @@ --- ### Slide 7: Hoe werken Large Language Models? + **Titel:** De magie achter ChatGPT en Claude **Inhoud:** + 1. **Training:** Model leest miljarden teksten (boeken, websites, code) 2. **Patroonherkenning:** Leert statistische verbanden tussen woorden 3. **Voorspelling:** Voorspelt steeds het volgende woord dat "logisch" volgt 4. **Output:** Genereert tekst token voor token **Belangrijk:** + - LLMs "begrijpen" niet echt - ze voorspellen - Ze kunnen overtuigend klinken maar fout zijn ("hallucinaties") - Altijd output checken! @@ -112,12 +126,14 @@ --- ### Slide 8: Next-Token Prediction + **Titel:** Hoe "denkt" een LLM? **Inhoud:** -**Voorbeeld:** "De kat zat op de ___" +**Voorbeeld:** "De kat zat op de \_\_\_" Het model berekent kansen: + - "mat" → 65% - "stoel" → 15% - "bank" → 10% @@ -126,6 +142,7 @@ Het model berekent kansen: → Kiest waarschijnlijk "mat" (maar niet altijd!) **Dit verklaart:** + - Waarom het soms briljant is - Waarom het soms onzin produceert - Waarom dezelfde vraag verschillende antwoorden geeft @@ -133,15 +150,18 @@ Het model berekent kansen: --- ### Slide 9: Hallucinaties + **Titel:** Waarom AI soms "liegt" **Inhoud:** **Wat zijn hallucinaties?** + - AI verzint informatie die niet bestaat - Klinkt heel overtuigend - Bronnen, namen, feiten kunnen compleet verzonnen zijn **Voorbeelden:** + - Fake wetenschappelijke papers met echte-klinkende titels - Niet-bestaande wetten of regels - Verzonnen statistieken @@ -153,6 +173,7 @@ Het model berekent kansen: ## DEEL 3: HET AI-LANDSCHAP (15 minuten) ### Slide 10: De Grote Spelers + **Titel:** Welke AI tools zijn er? **Inhoud:** @@ -168,6 +189,7 @@ Het model berekent kansen: --- ### Slide 11: Gratis vs Betaald + **Titel:** Heb je de betaalde versie nodig? **Inhoud:** @@ -183,6 +205,7 @@ Het model berekent kansen: --- ### Slide 12: Welke tool voor welke taak? + **Titel:** Snelle vergelijking **Inhoud:** @@ -201,12 +224,14 @@ Het model berekent kansen: ## DEEL 4: CHATGPT IN DE PRAKTIJK (25 minuten) ### Slide 13: ChatGPT Interface + **Titel:** Laten we ChatGPT openen **Inhoud:** -*[Live demonstratie - open chat.openai.com]* +_[Live demonstratie - open chat.openai.com]_ **Wat je ziet:** + - Chatvenster (midden) - Nieuwe chat starten (linksboven) - Chat geschiedenis (links) @@ -218,104 +243,121 @@ Het model berekent kansen: --- ### Slide 14: Model Kiezen + **Titel:** Welk model gebruik je? **Inhoud:** **In ChatGPT kun je kiezen:** + - **GPT-4o** - Standaard, snel, gratis - **GPT-4o with canvas** - Voor documenten bewerken - **GPT-4** - Meest krachtig (betaald) **Tip:** GPT-4o is voor de meeste taken prima! -*[Demonstreer model selector]* +_[Demonstreer model selector]_ --- ### Slide 15: Tijdelijke Chat + **Titel:** Privacy: Tijdelijke Chat **Inhoud:** **Wat is tijdelijke chat?** + - Chat wordt NIET opgeslagen in je geschiedenis - Wordt NIET gebruikt om model te trainen - Verdwijnt na sluiten **Wanneer gebruiken?** + - Gevoelige informatie - Werk-gerelateerde data - Als je niet wilt dat het wordt onthouden -*[Demonstreer: klik op naam → Temporary Chat]* +_[Demonstreer: klik op naam → Temporary Chat]_ --- ### Slide 16: Afbeeldingen Analyseren + **Titel:** Image-to-Text in ChatGPT **Inhoud:** **Wat kun je doen?** + - Foto uploaden en vragen stellen - Screenshot laten analyseren - **Schets laten interpreteren** ← Dit gebruiken we straks! - Tekst uit afbeelding halen (OCR) **Voorbeeld use cases:** + - "Beschrijf deze wireframe in detail" - "Maak van deze schets een gedetailleerde prompt" - "Zet deze tekening om naar specificaties" -*[Demonstreer met een schets/foto]* +_[Demonstreer met een schets/foto]_ --- ### Slide 17: Bestanden Uploaden + **Titel:** PDF's en documenten lezen **Inhoud:** **ChatGPT kan:** + - PDF's lezen en samenvatten - Word documenten analyseren - Code bestanden reviewen - Spreadsheets interpreteren **Hoe?** + - Klik op 📎 (paperclip) icoon - Sleep bestand in het chatvenster - Of copy-paste tekst -*[Demonstreer met een kort PDF]* +_[Demonstreer met een kort PDF]_ --- ### Slide 18: Custom Instructions + **Titel:** ChatGPT Personaliseren **Inhoud:** **Wat zijn Custom Instructions?** + - Permanente instructies die ChatGPT onthoudt - Hoef je niet elke chat te herhalen - Zit in Instellingen → Personalisatie **Handige voorbeelden:** + - "Ik ben een frontend developer, gebruik React en Tailwind" - "Antwoord in het Nederlands tenzij ik Engels vraag" - "Geef code voorbeelden met TypeScript" -*[Demonstreer waar dit staat]* +_[Demonstreer waar dit staat]_ --- ### Slide 19: Het Geheugen van ChatGPT + **Titel:** Wat onthoudt ChatGPT? **Inhoud:** **ChatGPT onthoudt:** + - Eerdere chats (tenzij tijdelijk) - Custom instructions - Dingen die je expliciet vraagt te onthouden **ChatGPT onthoudt NIET:** + - Automatisch alles uit vorige chats - Context na lange tijd - Wat je in andere sessies zei @@ -325,10 +367,12 @@ Het model berekent kansen: --- ### Slide 20: Praktijk Oefening + **Titel:** Probeer het zelf! (5 minuten) **Inhoud:** **Opdracht:** + 1. Open ChatGPT (chat.openai.com) 2. Start een nieuwe chat 3. Stel een vraag over een programmeerconcept @@ -336,19 +380,21 @@ Het model berekent kansen: **Bonus:** Bekijk je Custom Instructions -*[Geef 5 minuten om te experimenteren]* +_[Geef 5 minuten om te experimenteren]_ --- ## DEEL 5: PROMPT ENGINEERING (15 minuten) ### Slide 21: Wat is Prompt Engineering? + **Titel:** De kunst van het vragen stellen **Inhoud:** **Een prompt is:** De instructie die je aan AI geeft **Waarom belangrijk?** + - Zelfde vraag, andere formulering = totaal andere output - Goede prompt = bruikbaar resultaat - Slechte prompt = frustratie @@ -358,15 +404,19 @@ Het model berekent kansen: --- ### Slide 22: Slechte vs Goede Prompt + **Titel:** Het verschil zien **Slechte prompt:** + > "Maak een button" **Goede prompt:** + > "Maak een React button component met Tailwind CSS. De button moet primary styling hebben (blauw), een hover state, en een loading state met een spinner. TypeScript graag." **Waarom beter?** + - Specificeert technologie - Beschrijft gewenste features - Geeft context @@ -374,20 +424,24 @@ Het model berekent kansen: --- ### Slide 23: Prompt Framework + **Titel:** 4 elementen van een goede prompt **Inhoud:** + 1. **Rol:** "Je bent een senior frontend developer..." 2. **Context:** "...die werkt aan een SaaS landingspagina..." 3. **Taak:** "...maak een hero section met..." 4. **Format:** "...gebruik React en Tailwind, voeg comments toe" **Voorbeeld gecombineerd:** + > "Je bent een senior frontend developer. Maak een hero section voor een SaaS website. Gebruik React met Tailwind CSS. Voeg comments toe die uitleggen wat de code doet." --- ### Slide 24: Tech Stack Specificeren + **Titel:** Vertel de AI welke technologie je wilt **Inhoud:** @@ -395,11 +449,13 @@ Het model berekent kansen: De technologieën waarmee je bouwt. **Voor deze cursus gebruiken we:** + - **React** - JavaScript framework voor UI - **Tailwind CSS** - Utility-first CSS framework - **TypeScript** (optioneel) - Getypeerd JavaScript **In je prompt:** + > "Gebruik React met Tailwind CSS voor styling. Maak het responsive met mobile-first design." **Tip:** v0.dev genereert automatisch React + Tailwind! @@ -407,24 +463,29 @@ De technologieën waarmee je bouwt. --- ### Slide 25: Kleuren en Look & Feel + **Titel:** Visuele specificaties in je prompt **Inhoud:** **Wat kun je specificeren?** + - **Kleuren:** "#2563EB voor primary, #1E40AF voor secondary" - **Stijl:** "Modern, minimalistisch, professioneel" - **Sfeer:** "Vriendelijk en toegankelijk" of "Corporate en serieus" - **Referenties:** "In de stijl van Stripe.com" **Voorbeeld:** + > "Gebruik een blauw kleurenschema met primary #2563EB. De stijl moet modern en minimalistisch zijn, geschikt voor een B2B SaaS startup." --- ### Slide 26: Prompting Tips + **Titel:** Praktische tips **Inhoud:** + 1. **Geef een rol:** "Je bent een expert in..." 2. **Wees specifiek:** Niet "maak iets moois" maar "maak een hero met gradient" 3. **Specificeer tech stack:** "React, Tailwind, TypeScript" @@ -439,10 +500,12 @@ De technologieën waarmee je bouwt. ## DEEL 6: LIVE DEMO V0.DEV (27 minuten) ### Slide 27: Introductie v0.dev + **Titel:** Van schets naar werkende website **Inhoud:** **v0.dev door Vercel:** + - AI-powered UI generator - Begrijpt tekst EN afbeeldingen - Genereert React + Tailwind code @@ -454,9 +517,11 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! --- ### Slide 28: De Slimme Workflow + **Titel:** Van schets naar site in 5 stappen **Inhoud:** + ``` 1. TEKEN je idee op papier ↓ @@ -471,6 +536,7 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! ``` **Waarom eerst ChatGPT?** + - v0 heeft beperkte gratis credits (~7/dag) - ChatGPT is "gratis" voor prompt optimalisatie - Je tekening + beschrijving = perfecte prompt! @@ -478,17 +544,20 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! --- ### Slide 29: Live Demo - Schets Maken + **Titel:** Stap 1: Tekenen **Inhoud:** -*[Docent tekent live op papier]* +_[Docent tekent live op papier]_ **Ik teken een hero section:** + - Links: titel + tekst + button - Rechts: placeholder voor afbeelding - Simpele lijnen, geen kunstwerk nodig! **Belangrijke elementen:** + - Layout (waar staat wat?) - Tekst indicaties - Knoppen @@ -497,12 +566,14 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! --- ### Slide 30: Live Demo - Foto naar ChatGPT + **Titel:** Stap 2 & 3: Foto + Beschrijving **Inhoud:** -*[Docent maakt foto en upload naar ChatGPT]* +_[Docent maakt foto en upload naar ChatGPT]_ **Mijn prompt aan ChatGPT:** + > "Dit is een schets voor een hero section van mijn website. > > Beschrijf deze schets als een gedetailleerde prompt voor v0.dev. @@ -512,33 +583,37 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! > Stijl: Modern, minimalistisch, professioneel > Doel: SaaS landingspagina voor projectmanagement tool" -*[Toon ChatGPT response]* +_[Toon ChatGPT response]_ --- ### Slide 31: Live Demo - Prompt naar v0 + **Titel:** Stap 4 & 5: v0.dev **Inhoud:** -*[Docent kopieert prompt naar v0.dev]* +_[Docent kopieert prompt naar v0.dev]_ **Let op:** + - Generatie duurt ~30 seconden - Je krijgt direct een preview - Code is React + Tailwind - Precies wat je tekende! -*[Toon resultaat]* +_[Toon resultaat]_ --- ### Slide 32: Live Demo - Itereren + **Titel:** Verfijnen in v0 **Inhoud:** -*[Docent itereert op het resultaat]* +_[Docent itereert op het resultaat]_ **Follow-up prompts:** + - "Make the button larger with a hover animation" - "Add a floating image placeholder on the right" - "Change the gradient to be more subtle" @@ -548,16 +623,19 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! --- ### Slide 33: Live Demo - Deployen + **Titel:** Live zetten **Inhoud:** **Deployment in 4 stappen:** + 1. Klik "Add Integration" (linkerzijbalk) 2. Koppel je GitHub account 3. v0 maakt automatisch een repository 4. Klik "Deploy" → Live op Vercel! **Resultaat:** + - URL: `jouw-project.vercel.app` - Code staat in GitHub - Elke update → automatisch opnieuw gedeployd @@ -567,12 +645,14 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! ## DEEL 7: HANDS-ON OPDRACHT (55 minuten) ### Slide 34: Lesopdracht + **Titel:** Nu zijn jullie aan de beurt! **Inhoud:** **Opdracht:** Jouw tekening wordt een website! **Stappen:** + 1. **TEKEN** een hero section op papier 2. **FOTO** maken van je tekening 3. **CHATGPT:** Upload foto + beschrijf je wensen @@ -586,6 +666,7 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! --- ### Slide 35: Opdracht Details + **Titel:** Wat moet je specificeren? **Inhoud:** @@ -598,20 +679,24 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! 5. **Doel:** "Voor een SaaS/portfolio/webshop" **Vraag ChatGPT:** + > "Maak van deze schets en beschrijving een gedetailleerde prompt voor v0.dev" --- ### Slide 36: Tips voor de Opdracht + **Titel:** Succesvol aan de slag **Inhoud:** + - **Teken simpel:** Blokken en lijnen zijn genoeg - **Wees specifiek in ChatGPT:** Hoe meer detail, hoe beter de prompt - **v0 credits:** ~7 per dag, dus optimaliseer prompt eerst! - **GitHub vereist:** Maak account aan als je die niet hebt **Deployment in 3 klikken:** + 1. "Add Integration" → koppel GitHub 2. v0 maakt automatisch repo aan 3. "Deploy" → live! @@ -619,14 +704,17 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! --- ### Slide 37: Hulpmiddelen + **Titel:** Links en resources **Inhoud:** + - **ChatGPT:** chat.openai.com - **v0.dev:** v0.dev - **GitHub:** github.com **Hulp nodig?** + - Vraag je buurman/buurvrouw - Steek je hand op - AI mag ook helpen! @@ -636,9 +724,10 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! ## DEEL 8: AFSLUITING (10 minuten) ### Slide 38: Samenvatting + **Titel:** Wat hebben we geleerd? -**Inhoud:** +**Inhoud:** ✅ Hoe LLMs werken (next-token prediction) ✅ AI-landschap: ChatGPT, Claude, Gemini, Grok ✅ ChatGPT praktisch gebruiken @@ -648,10 +737,12 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! --- ### Slide 39: Huiswerk + **Titel:** Voor volgende week **Inhoud:** **Opdracht (2 uur):** + 1. Schrijf reflectie (500 woorden) over je eerste AI-ervaring 2. Bedenk 5 concrete use cases voor AI in jouw werk 3. **Maak een tweede schets** voor een andere pagina/component @@ -663,34 +754,42 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! --- ### Slide 40: Volgende Les + **Titel:** Les 2: Prompt Engineering Verdieping **Inhoud:** **Wat komt:** + - Geavanceerde prompt technieken - Chain of thought prompting - Few-shot learning - Custom GPTs verkennen **Voorbereiding:** + - Huiswerk af - ChatGPT account werkt --- ### Slide 41: Bedankt! + **Titel:** Tot volgende week! **Inhoud:** 🚀 Succes met het huiswerk! -*"The best way to predict the future is to create it."* +_"The best way to predict the future is to create it."_ — Alan Kay --- ## Totaal: 41 slides + ## Geschatte tijd presentatie: ~70 minuten + ## ChatGPT praktijk: ~25 minuten + ## Demo v0.dev: ~27 minuten + ## Hands-on tijd: ~55 minuten