feat(workshop): dia's over wat een agent wel en niet is, en het draaiboek erop aangepast
- twee nieuwe dia's (26 in totaal): Wat is een agent, Wat een agent niet is - deel 1 opnieuw ingedeeld: landschap 10 minuten, demo met sabotage 10 - alle dianummers in het draaiboek bijgewerkt; 18 paginas - README en CHANGELOG Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Guido van Dijk
@@ -80,9 +80,9 @@ notes="Welkom. Laptops open, cloud.dify.ai ingelogd? Wie nog geen account heeft:
|
||||
# 2 programma
|
||||
slide("programma", h2("Tweeënhalf uur, twee bouwblokken") + table([
|
||||
["Tijd","Blok","Wat je doet"],
|
||||
["0:00 - 0:15","Het landschap","Peiling, drie lagen, vijf patronen"],
|
||||
["0:15 - 0:45","Bouwblok 1: workflow","Tekst op niveau, in duo's, eigen niveaus"],
|
||||
["0:45 - 1:00","Demo en sabotage","Agent met kennisbank; laat hem struikelen"],
|
||||
["0:00 - 0:20","Het landschap","Peiling, drie lagen, wat een agent wel en niet is, vijf patronen"],
|
||||
["0:20 - 0:50","Bouwblok 1: workflow","Tekst op niveau, in duo's, eigen niveaus"],
|
||||
["0:50 - 1:00","Demo en sabotage","Agent met kennisbank; laat hem struikelen"],
|
||||
["1:00 - 1:15","Pauze",""],
|
||||
["1:15 - 1:45","Bouwblok 2: kies je spoor","A kennisbank-agent · B poortwachter"],
|
||||
["1:45 - 2:05","Ontwerpkaart en pitch","Waar hoort de mens, jouw app in vijf vakken, pitch"],
|
||||
@@ -111,6 +111,28 @@ slide("lagen", h2("Drie lagen, en waar wij vandaag zitten") + f'''
|
||||
{p("Het verschil zit niet in het model maar in het account: gratis privé, of school met verwerkersovereenkomst.", 30)}
|
||||
''', notes="Laag 3 is vandaag. Dify is geen model: het gebruikt de modellen van OpenAI, Anthropic, Google via hun API. Komt de vraag nu al (wij hebben Copilot, wij hebben Google): zeg dat daar aan het eind een blok over komt, met dezelfde agents in vier omgevingen naast elkaar.")
|
||||
|
||||
# 4b wat is een agent
|
||||
slide("watiseenagent", h2("Wat is een agent?") + f'''
|
||||
{p("<b>Een agent krijgt een doel en bepaalt zelf welke stappen hij zet</b>, met de middelen die jij hem geeft. Een chatbot wacht op je volgende vraag; een agent werkt een opdracht af.", 32)}
|
||||
<div style="display:flex; gap:32px">
|
||||
{card("1 · Een doel en regels", "Wie ben je, wat doe je, en wat doe je nooit. Dat is de instructie die je vandaag schrijft.")}
|
||||
{card("2 · Middelen", "Kennis uit jouw documenten, gereedschap om te zoeken, te rekenen of een bestand te maken, en geheugen van het gesprek.")}
|
||||
{card("3 · Ruimte om te kiezen", "Hij bepaalt de volgorde, kijkt na elke stap wat eruit kwam, en probeert het opnieuw als het misgaat.")}
|
||||
</div>
|
||||
{p("De Toetsweekplanner kreeg één opdracht: maak een studieplan. Niemand zei 'schrijf een programma'. Hij schreef er zelf een, voerde het uit, en gaf het Excel-bestand terug.", 28)}
|
||||
''', notes="Dit is de dia waar de hele middag op rust. Zeg de eerste zin langzaam. Het voorbeeld van de Toetsweekplanner is het verschil met een workflow: jij vroeg om een plan, niet om een programma. Nog niet over patronen beginnen, dat is de volgende dia.")
|
||||
|
||||
# 4c wat een agent niet is
|
||||
slide("nietagent", h2("Wat een agent niet is") + f'''
|
||||
<div style="display:flex; gap:24px">
|
||||
{card("Geen mens", "Geen oordeel, geen zorgplicht, geen verantwoordelijkheid. Een leerling die schrijft dat het thuis misgaat, hoort bij de mentor. Daarom bouwen we een mens in de lus.")}
|
||||
{card("Geen feitenmachine", "Hij weet niets, hij voorspelt tekst. Zonder kennisbank en zonder de regel 'zeg dat je het niet weet' verzint hij een antwoord dat er goed uitziet.")}
|
||||
{card("Geen programma", "Hij doet niet twee keer precies hetzelfde. Moet iets zeker zijn, zoals een datum of een woordlimiet, dan doet code dat, of een mens.")}
|
||||
{card("Geen beslisser", "Niet over toelating, cijfers of toezicht bij toetsen. Dat is hoog risico onder de AI Act, en dat bouw je niet op een woensdagmiddag.", bg=DARK, tc=LIGHT, bc=BODYD, border=DARK)}
|
||||
</div>
|
||||
{p("Een agent is geen collega en geen orakel. Het is gereedschap met een instructie, en jij blijft de eigenaar.", 30)}
|
||||
''', notes="De belangrijkste dia voor AI-geletterdheid. Vraag na de tweede kaart: wie heeft wel eens een antwoord gekregen dat klopte qua vorm maar niet qua feiten? Bijna iedereen. Koppel de vier kaarten aan wat ze straks bouwen: kennisbank (twee), poortwachter (drie), mens in de lus (een), en de AI Act komt terug aan het eind.")
|
||||
|
||||
# 5 patronen
|
||||
slide("patronen", h2("Vijf patronen: hoeveel mag het model zelf beslissen?") + table([
|
||||
["Patroon","Wie beslist de stappen","Vandaag"],
|
||||
@@ -121,7 +143,7 @@ slide("patronen", h2("Vijf patronen: hoeveel mag het model zelf beslissen?") + t
|
||||
["5 · Poortwachter","Code of een mens laat het wel of niet door","Poortwachter, docent in de lus"],
|
||||
],[34,40,26], size=28) + p("Vuistregel: kies het laagste patroon dat werkt. Elk stapje omhoog kost tijd, credits en verrassingen.", 28),
|
||||
section="Het landschap: lagen, patronen en het eerste voorbeeld",
|
||||
notes="Niet uitputtend behandelen; de bijlage Ontwerppatronen gaat mee naar huis. Wel de vuistregel benoemen.")
|
||||
notes="Niet uitputtend behandelen; de bijlage Ontwerppatronen gaat mee naar huis. Twee zinnen: hoeveel ruimte geef je het model, en de vuistregel kies het laagste patroon dat werkt. De vorige twee dia's hebben het zware werk al gedaan.")
|
||||
|
||||
# 6 demo 01
|
||||
slide("demo01", eyebrow("Demo · 3 minuten") + h2("Tekst op niveau") + f'''
|
||||
|
||||
Binary file not shown.
@@ -10,6 +10,8 @@
|
||||
"programma",
|
||||
"peiling",
|
||||
"lagen",
|
||||
"watiseenagent",
|
||||
"nietagent",
|
||||
"patronen",
|
||||
"demo01",
|
||||
"bouw1",
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<section id="nietagent" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Wat een agent niet is</h2>
|
||||
<div style="display:flex; gap:24px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">Geen mens</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Geen oordeel, geen zorgplicht, geen verantwoordelijkheid. Een leerling die schrijft dat het thuis misgaat, hoort bij de mentor. Daarom bouwen we een mens in de lus.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">Geen feitenmachine</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Hij weet niets, hij voorspelt tekst. Zonder kennisbank en zonder de regel 'zeg dat je het niet weet' verzint hij een antwoord dat er goed uitziet.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">Geen programma</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Hij doet niet twee keer precies hetzelfde. Moet iets zeker zijn, zoals een datum of een woordlimiet, dan doet code dat, of een mens.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#1E2A3A; padding:36px; border:1px solid #1E2A3A; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#F7F4EC; line-height:1.2">Geen beslisser</h3><p style="font-size:27px; color:#D9DEE6; line-height:1.4">Niet over toelating, cijfers of toezicht bij toetsen. Dat is hoog risico onder de AI Act, en dat bouw je niet op een woensdagmiddag.</p></div>
|
||||
</div>
|
||||
<p style="font-size:30px; color:#3D4756; line-height:1.4">Een agent is geen collega en geen orakel. Het is gereedschap met een instructie, en jij blijft de eigenaar.</p>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents met Dify · LeX Consultancy · AI Netwerk Limburg · CC BY-SA 4.0</p><img src="../beelden/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>De belangrijkste dia voor AI-geletterdheid. Vraag na de tweede kaart: wie heeft wel eens een antwoord gekregen dat klopte qua vorm maar niet qua feiten? Bijna iedereen. Koppel de vier kaarten aan wat ze straks bouwen: kennisbank (twee), poortwachter (drie), mens in de lus (een), en de AI Act komt terug aan het eind.</aside>
|
||||
</section>
|
||||
@@ -1,5 +1,5 @@
|
||||
<section id="patronen" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Vijf patronen: hoeveel mag het model zelf beslissen?</h2><table style="font-size:28px; color:#3D4756; border:1px solid #D8D2C4; background:#FFFFFF"><tr style="background:#EFEAE0"><th style="width:34%; color:#1E2A3A">Patroon</th><th style="width:40%; color:#1E2A3A">Wie beslist de stappen</th><th style="width:26%; color:#1E2A3A">Vandaag</th></tr><tr><td style="width:34%; color:#3D4756">1 · Eén aanroep</td><td style="width:40%; color:#3D4756">Jij, vooraf; het model doet één ding</td><td style="width:26%; color:#3D4756">Tekst op niveau</td></tr><tr><td style="width:34%; color:#3D4756">2 · Redeneren met gereedschap</td><td style="width:40%; color:#3D4756">Het model, stap voor stap, met kennisbank</td><td style="width:26%; color:#3D4756">Schoolgids-assistent</td></tr><tr><td style="width:34%; color:#3D4756">3 · Plannen en uitvoeren</td><td style="width:40%; color:#3D4756">Eerst een plan, dan losse uitvoerders</td><td style="width:26%; color:#3D4756">Schoolnieuws: drie kanalen</td></tr><tr><td style="width:34%; color:#3D4756">4 · Zelfkritiek</td><td style="width:40%; color:#3D4756">Het model kijkt zijn eigen werk na</td><td style="width:26%; color:#3D4756">Controleur</td></tr><tr><td style="width:34%; color:#3D4756">5 · Poortwachter</td><td style="width:40%; color:#3D4756">Code of een mens laat het wel of niet door</td><td style="width:26%; color:#3D4756">Poortwachter, docent in de lus</td></tr></table><p style="font-size:28px; color:#3D4756; line-height:1.4">Vuistregel: kies het laagste patroon dat werkt. Elk stapje omhoog kost tijd, credits en verrassingen.</p>
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents met Dify · LeX Consultancy · AI Netwerk Limburg · CC BY-SA 4.0</p><img src="../beelden/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Niet uitputtend behandelen; de bijlage Ontwerppatronen gaat mee naar huis. Wel de vuistregel benoemen.</aside>
|
||||
<aside>Niet uitputtend behandelen; de bijlage Ontwerppatronen gaat mee naar huis. Twee zinnen: hoeveel ruimte geef je het model, en de vuistregel kies het laagste patroon dat werkt. De vorige twee dia's hebben het zware werk al gedaan.</aside>
|
||||
</section>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<section id="programma" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Tweeënhalf uur, twee bouwblokken</h2><table style="font-size:25px; color:#3D4756; border:1px solid #D8D2C4; background:#FFFFFF"><tr style="background:#EFEAE0"><th style="width:22%; color:#1E2A3A">Tijd</th><th style="width:30%; color:#1E2A3A">Blok</th><th style="width:48%; color:#1E2A3A">Wat je doet</th></tr><tr><td style="width:22%; color:#3D4756">0:00 - 0:15</td><td style="width:30%; color:#3D4756">Het landschap</td><td style="width:48%; color:#3D4756">Peiling, drie lagen, vijf patronen</td></tr><tr><td style="width:22%; color:#3D4756">0:15 - 0:45</td><td style="width:30%; color:#3D4756">Bouwblok 1: workflow</td><td style="width:48%; color:#3D4756">Tekst op niveau, in duo's, eigen niveaus</td></tr><tr><td style="width:22%; color:#3D4756">0:45 - 1:00</td><td style="width:30%; color:#3D4756">Demo en sabotage</td><td style="width:48%; color:#3D4756">Agent met kennisbank; laat hem struikelen</td></tr><tr><td style="width:22%; color:#3D4756">1:00 - 1:15</td><td style="width:30%; color:#3D4756">Pauze</td><td style="width:48%; color:#3D4756"></td></tr><tr><td style="width:22%; color:#3D4756">1:15 - 1:45</td><td style="width:30%; color:#3D4756">Bouwblok 2: kies je spoor</td><td style="width:48%; color:#3D4756">A kennisbank-agent · B poortwachter</td></tr><tr><td style="width:22%; color:#3D4756">1:45 - 2:05</td><td style="width:30%; color:#3D4756">Ontwerpkaart en pitch</td><td style="width:48%; color:#3D4756">Waar hoort de mens, jouw app in vijf vakken, pitch</td></tr><tr><td style="width:22%; color:#3D4756">2:05 - 2:15</td><td style="width:30%; color:#3D4756">Vier omgevingen</td><td style="width:48%; color:#3D4756">Dezelfde agent in Dify, Copilot, ChatGPT en Gemini</td></tr><tr><td style="width:22%; color:#3D4756">2:15 - 2:30</td><td style="width:30%; color:#3D4756">Afsluiting</td><td style="width:48%; color:#3D4756">Wat mag, wat mee naar huis, exit ticket</td></tr></table>
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Tweeënhalf uur, twee bouwblokken</h2><table style="font-size:25px; color:#3D4756; border:1px solid #D8D2C4; background:#FFFFFF"><tr style="background:#EFEAE0"><th style="width:22%; color:#1E2A3A">Tijd</th><th style="width:30%; color:#1E2A3A">Blok</th><th style="width:48%; color:#1E2A3A">Wat je doet</th></tr><tr><td style="width:22%; color:#3D4756">0:00 - 0:20</td><td style="width:30%; color:#3D4756">Het landschap</td><td style="width:48%; color:#3D4756">Peiling, drie lagen, wat een agent wel en niet is, vijf patronen</td></tr><tr><td style="width:22%; color:#3D4756">0:20 - 0:50</td><td style="width:30%; color:#3D4756">Bouwblok 1: workflow</td><td style="width:48%; color:#3D4756">Tekst op niveau, in duo's, eigen niveaus</td></tr><tr><td style="width:22%; color:#3D4756">0:50 - 1:00</td><td style="width:30%; color:#3D4756">Demo en sabotage</td><td style="width:48%; color:#3D4756">Agent met kennisbank; laat hem struikelen</td></tr><tr><td style="width:22%; color:#3D4756">1:00 - 1:15</td><td style="width:30%; color:#3D4756">Pauze</td><td style="width:48%; color:#3D4756"></td></tr><tr><td style="width:22%; color:#3D4756">1:15 - 1:45</td><td style="width:30%; color:#3D4756">Bouwblok 2: kies je spoor</td><td style="width:48%; color:#3D4756">A kennisbank-agent · B poortwachter</td></tr><tr><td style="width:22%; color:#3D4756">1:45 - 2:05</td><td style="width:30%; color:#3D4756">Ontwerpkaart en pitch</td><td style="width:48%; color:#3D4756">Waar hoort de mens, jouw app in vijf vakken, pitch</td></tr><tr><td style="width:22%; color:#3D4756">2:05 - 2:15</td><td style="width:30%; color:#3D4756">Vier omgevingen</td><td style="width:48%; color:#3D4756">Dezelfde agent in Dify, Copilot, ChatGPT en Gemini</td></tr><tr><td style="width:22%; color:#3D4756">2:15 - 2:30</td><td style="width:30%; color:#3D4756">Afsluiting</td><td style="width:48%; color:#3D4756">Wat mag, wat mee naar huis, exit ticket</td></tr></table>
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents met Dify · LeX Consultancy · AI Netwerk Limburg · CC BY-SA 4.0</p><img src="../beelden/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Strak op tijd. Bouwblokken zijn heilig; als de demo uitloopt, kort de demo in, niet het bouwen. Op het festival zit de wisseltijd tussen bouwblok 1 en 2, en 15:30 is hard.</aside>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<section id="watiseenagent" data-transition="fade" style="background:#F7F4EC; color:#1E2A3A; font-family:'Nunito Sans', Verdana, sans-serif; padding:128px 128px 160px; display:flex; flex-direction:column; gap:40px">
|
||||
<h2 style="font-family:'Rubik', Arial, sans-serif; font-size:64px; font-weight:600; line-height:1.1">Wat is een agent?</h2>
|
||||
<p style="font-size:32px; color:#3D4756; line-height:1.4"><b>Een agent krijgt een doel en bepaalt zelf welke stappen hij zet</b>, met de middelen die jij hem geeft. Een chatbot wacht op je volgende vraag; een agent werkt een opdracht af.</p>
|
||||
<div style="display:flex; gap:32px">
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">1 · Een doel en regels</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Wie ben je, wat doe je, en wat doe je nooit. Dat is de instructie die je vandaag schrijft.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">2 · Middelen</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Kennis uit jouw documenten, gereedschap om te zoeken, te rekenen of een bestand te maken, en geheugen van het gesprek.</p></div>
|
||||
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:36px; border:1px solid #D8D2C4; border-radius:16px"><h3 style="font-family:'Rubik', Arial, sans-serif; font-size:34px; font-weight:600; color:#1E2A3A; line-height:1.2">3 · Ruimte om te kiezen</h3><p style="font-size:27px; color:#3D4756; line-height:1.4">Hij bepaalt de volgorde, kijkt na elke stap wat eruit kwam, en probeert het opnieuw als het misgaat.</p></div>
|
||||
</div>
|
||||
<p style="font-size:28px; color:#3D4756; line-height:1.4">De Toetsweekplanner kreeg één opdracht: maak een studieplan. Niemand zei 'schrijf een programma'. Hij schreef er zelf een, voerde het uit, en gaf het Excel-bestand terug.</p>
|
||||
|
||||
<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:#8A8F98">Workshop AI Agents met Dify · LeX Consultancy · AI Netwerk Limburg · CC BY-SA 4.0</p><img src="../beelden/logo-lex.png" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">
|
||||
<aside>Dit is de dia waar de hele middag op rust. Zeg de eerste zin langzaam. Het voorbeeld van de Toetsweekplanner is het verschil met een workflow: jij vroeg om een plan, niet om een programma. Nog niet over patronen beginnen, dat is de volgende dia.</aside>
|
||||
</section>
|
||||
Reference in New Issue
Block a user