copilot-handleidingen/00-presentatie/maak_dias.py

"""Bouwt de dia's van de workshop (20 stuks) als HTML-secties van 1920x1080 plus deck.json.

De beelden staan in de map beelden/ naast dit script; bouw_pdf.py maakt er een PDF van.
Licentie: CC BY-SA 4.0, zie ../../LICENSE.md. Logo van AI Netwerk Limburg uitgezonderd.
"""
import json, sys
from pathlib import Path
HERE = Path(__file__).resolve().parent
P = HERE / "project"; S = P / "slides"; S.mkdir(parents=True, exist_ok=True)
ARTIFACT = False
# Uitgebreide begeleidersnotities (privé, niet in git): notities-begeleider.json naast dit script,
# per dia-id een tekst die de sprekersnotitie vervangt. Alleen gebruikt met --notities.
NOTITIES = {}
if "--notities" in sys.argv:
    NOTITIES = json.loads((HERE / "notities-begeleider.json").read_text(encoding="utf-8"))
BEELD = {
    "logo": ("../beelden/logo-ai-netwerk-limburg.png",),
    "rapport": ("../beelden/lesmateriaal-rapport.jpg",),
    "persoonlijk": ("../beelden/studiecoach-persoonlijk.jpg",),
    "excel": ("../beelden/toetsweekplanner-excel.jpg",),
    "lex": ("../beelden/logo-lex-wit.png",),
    "lexkleur": ("../beelden/logo-lex.png",),
}
def beeld(naam): return BEELD[naam][0]
EIGENAAR = "Guido van Dijk, LeX Consultancy B.V. en AI Netwerk Limburg"
CONTACT = "guido@l-e-x.nl · guido@ai-netwerk-limburg.nl"
BRON = "git.lexconsultancy.nl/guido/copilot-handleidingen"
DARK="#1E2A3A"; LIGHT="#F7F4EC"; LIGHT2="#EFEAE0"; ACC="#D9480F"; BLUE="#2563EB"; BODY="#3D4756"; BODYD="#D9DEE6"; LINE="#D8D2C4"
H="'Rubik', Arial, sans-serif"; T="'Nunito Sans', Verdana, sans-serif"
LOGO=beeld("logo")
order=[]; sections={}
def slide(id_, body, bg=LIGHT, color=DARK, pad="128px 128px 160px", extra="display:flex; flex-direction:column; gap:40px", notes="", section=None, transition="fade", footer=True):
    fcol = "#8A8F98" if bg in (LIGHT, LIGHT2) else "#9AA3B1"
    notes = NOTITIES.get(id_, notes)
    foot = f'<p style="position:absolute; left:128px; bottom:64px; font-size:24px; color:{fcol}">Workshop AI Agents in Microsoft 365 Copilot · LeX Consultancy · AI Netwerk Limburg · CC BY-SA 4.0</p>' if footer else ""
    # Klein LeX-logo rechtsonder op elke dia; wit op donkere dia's, kleur op lichte.
    lexlogo = beeld("lexkleur") if bg in (LIGHT, LIGHT2) else beeld("lex")
    if footer:  # cover en slot hebben het logo al bovenaan
        foot += f'<img src="{lexlogo}" alt="LeX Consultancy" style="position:absolute; right:128px; bottom:52px; width:90px; height:52px; object-fit:contain">'
    html = (f'<section id="{id_}" data-transition="{transition}" style="background:{bg}; color:{color}; font-family:{T}; padding:{pad}; {extra}">\n'
            f'{body}\n{foot}\n<aside>{notes}</aside>\n</section>\n')
    (S / f"{id_}.html").write_text(html, encoding="utf-8"); order.append(id_)
    if section: sections[id_]={"description":section,"start":id_}
def h2(t): return f'<h2 style="font-family:{H}; font-size:64px; font-weight:600; line-height:1.1">{t}</h2>'
def eyebrow(t, c=ACC): return f'<p style="font-family:{H}; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:{c}">{t}</p>'
def p(t, size=32, c=BODY): return f'<p style="font-size:{size}px; color:{c}; line-height:1.4">{t}</p>'
def card(title, text, w="flex:1", bg="#FFFFFF", tc=DARK, bc=BODY, border=LINE):
    return (f'<div style="{w}; display:flex; flex-direction:column; gap:16px; background:{bg}; padding:36px; border:1px solid {border}; border-radius:16px">'
            f'<h3 style="font-family:{H}; font-size:34px; font-weight:600; color:{tc}; line-height:1.2">{title}</h3>'
            f'<p style="font-size:27px; color:{bc}; line-height:1.4">{text}</p></div>')
def num(n, label, w="flex:1"):
    return (f'<div style="{w}; display:flex; flex-direction:column; gap:8px"><p style="font-family:{H}; font-size:120px; font-weight:600; color:{ACC}; line-height:1">{n}</p>'
            f'<p style="font-size:28px; color:{BODY}; line-height:1.3">{label}</p></div>')
def ul(items, size=30, c=BODY):
    return f'<ul style="font-size:{size}px; color:{c}; line-height:1.5">' + "".join(f"<li>{i}</li>" for i in items) + "</ul>"
def table(rows, widths, size=27, head=True):
    out=[f'<table style="font-size:{size}px; color:{BODY}; border:1px solid {LINE}; background:#FFFFFF">']
    for i,r in enumerate(rows):
        tag = "th" if (head and i==0) else "td"
        bg = f' style="background:{LIGHT2}"' if (head and i==0) else ""
        cells="".join(f'<{tag} style="width:{widths[j]}%; color:{DARK if tag=="th" else BODY}">{c}</{tag}>' for j,c in enumerate(r))
        out.append(f"<tr{bg}>{cells}</tr>")
    out.append("</table>"); return "".join(out)
def interactie(label): return f'<p style="font-family:{H}; font-size:26px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:{BLUE}">Interactie · {label}</p>'


# 1 cover
slide("cover", f'''
<img src="{LOGO}" alt="AI Netwerk Limburg" style="position:absolute; right:128px; top:96px; width:260px; height:210px; object-fit:contain">
<img src="{beeld("lex")}" alt="LeX Consultancy" style="position:absolute; right:148px; top:330px; width:150px; height:86px; object-fit:contain">
<div style="flex:1"></div>
{eyebrow("Workshop · 2 uur · op school", "#F4B183")}
<h1 style="font-family:{H}; font-size:104px; font-weight:600; line-height:1.05; color:{LIGHT}; width:1400px">AI Agents bouwen<br>in Microsoft 365 Copilot</h1>
{p("Met het account dat je al hebt, in de laag die gratis is. Zelf bouwen, zelf testen, zelf breken.", 34, BODYD)}
<div style="flex:1"></div>
{p("Guido van Dijk · LeX Consultancy B.V. · AI Netwerk Limburg", 28, "#9AA3B1")}
''', bg=DARK, color=LIGHT, footer=False, section="Opening: wat gaan we doen en wie zit er in de zaal",
notes="Welkom. Laptops open, m365.cloud.microsoft, zie je links onder Agents het kopje Nieuwe agent? Wie het niet ziet: buddy naast je, en meld het bij mij. Doel van vandaag: iedereen gaat naar huis met één werkende agent in Copilot van de school en een ontwerp voor de volgende.")

# 2 programma
slide("programma", h2("Twee uur, vier blokken") + table([
 ["Tijd","Blok","Wat je doet"],
 ["0:00 - 0:15","Het landschap","Peiling, drie lagen, de gratis laag"],
 ["0:15 - 0:45","Bouwblok 1: jouw document als agent","Schoolgids-assistent met je eigen document, in duo's"],
 ["0:45 - 0:55","Demo","Ouderbrief-assistent en Toetsweekplanner (Excel)"],
 ["0:55 - 1:05","Pauze",""],
 ["1:05 - 1:35","Bouwblok 2: kies je spoor","A regels op een tekst · B verslag uit transcript · C bestand in de chat"],
 ["1:35 - 1:50","Studiecoach, de grens, ontwerpkaart","Wat niet kan, en jouw app in vijf vakken"],
 ["1:50 - 2:05","Pitch en afsluiting","30 seconden pitch, wat mag, exit ticket"],
],[22,34,44]),
notes="Strak op tijd. Bouwblokken zijn heilig; als de demo uitloopt, kort de demo in, niet het bouwen.")

# 3 peiling
slide("peiling", interactie("2 minuten") + h2("Sta op als...") + f'''
<div style="display:flex; gap:32px">
{card("1", "...je deze week Copilot, ChatGPT of Gemini hebt gebruikt voor je werk", bg="#FFFFFF")}
{card("2", "...je niet zeker weet welke van die drie van school mag", bg="#FFFFFF")}
{card("3", "...je ooit een prompt hebt gedeeld met een collega die daarna niet werkte", bg="#FFFFFF")}
</div>
{p("Blijf staan bij 3. Een prompt is van jou en breekbaar. Een agent staat in Copilot van de school en werkt morgen ook nog, ook als jij er niet bent.", 30)}
''', notes="Laat mensen echt staan. Bij vraag 3 staat meestal driekwart. Benoem: vandaag bouwen we iets wat blijft staan, in de omgeving die de school al heeft.")

# 4 drie lagen
slide("lagen", h2("Drie lagen, en waar wij vandaag zitten") + f'''
<div style="display:flex; gap:32px">
{card("1 · Chatbot", "Je typt, je krijgt antwoord, elke keer opnieuw uitleggen. Copilot Chat, ChatGPT, Gemini, Claude.")}
{card("2 · Assistent in je pakket", "AI in de tools die je al hebt: Copilot in Word, Teams en Outlook. Dat is de betaalde Microsoft 365 Copilot-licentie.")}
{card("3 · Bouwplatform", "Jij bouwt een agent met een instructie, eigen regels en eigen tekst, en deelt hem. De Agent Builder in Copilot Chat is het kleine broertje van Copilot Studio en Dify.", bg=DARK, tc=LIGHT, bc=BODYD, border=DARK)}
</div>
{p("Vandaag: laag 3, in de gratis laag van laag 1. Het verschil zit niet in het merk maar in het account: dit is een schoolaccount met verwerkersovereenkomst.", 30)}
''', notes="Copilot Chat zit bij elke Microsoft 365-licentie. De Agent Builder daarin is technisch een uitgeklede Copilot Studio. Later meer over wat mag; nu alleen: het account is van school, en dat is al de helft van de privacyvraag.")

# 5 gratis laag
slide("gratislaag", h2("De gratis laag: wat kan wel en wat niet") + table([
 ["Wat je wilt","Copilot Chat (gratis)","Microsoft 365 Copilot (betaald)","Copilot Studio"],
 ["Agent met instructie en startvragen","Ja","Ja","Ja"],
 ["Kennis meegeven","In de instructie (8.000 tekens) of bijvoegen in de chat","Bestanden, SharePoint, Teams","Alles, plus databases en API's"],
 ["Bestanden maken (Word, Excel)","Ja","Ja","Ja"],
 ["Delen met collega's","Ja","Ja","Ja"],
 ["Iets doen buiten het gesprek (mailen, publiceren)","Nee","Beperkt","Ja"],
 ["Mens die goedkeurt vóór publicatie","Nee","Nee","Deels"],
 ["Gesprekken teruglezen","Alleen aantallen","Aantallen","Transcripten"],
 ["Kosten","In de licentie","Per gebruiker per maand","Per bericht"],
],[34,24,22,20], size=23) + p("Alles wat in een instructie past, met tekst of een bestand erin en tekst of een Office-bestand eruit. Dat is meer dan het lijkt: zes agents vandaag.", 25),
section="Het landschap: lagen, de gratis laag en het eerste voorbeeld",
notes="Niet uitputtend behandelen. Eén zin die blijft hangen: tekst erin, tekst of Office-bestand eruit. Wat niet kan komt terug op dia 12.")

# 6 demo 01
slide("demo01", eyebrow("Demo · 5 minuten") + h2("De Schoolgids-assistent") + f'''
<div style="display:flex; gap:48px">
<div style="flex:1; display:flex; flex-direction:column; gap:20px">
{p("Beantwoordt vragen van collega's en leerlingen uit een schoolgids van twee pagina's, met hoofdstukverwijzing. Zegt het als het antwoord er niet in staat.", 30)}
{ul(["De schoolgids staat gewoon in de instructie: geen kennisbank, geen upload","Drie startvragen, een naam, een beschrijving, klaar","Delen met een collega is één klik"], 28)}
</div>
<div style="width:640px; display:flex; flex-direction:column; gap:20px; background:{LIGHT2}; padding:36px; border-radius:16px; border:1px solid {LINE}">
{interactie("sabotage")}
<p style="font-family:{H}; font-size:40px; font-weight:600; color:{DARK}; line-height:1.2">Laat hem struikelen</p>
{p("Bedenk in je duo één vraag waarop de assistent het antwoord niet mag weten, en één waarop hij een fout antwoord zou kunnen verzinnen. We proberen er drie live.", 27)}
</div>
</div>
''', notes="Live in je eigen account. Eerst 'hoe meld ik mijn kind ziek?', dan Bewerken om de instructie te laten zien. De sabotage laat zien waarom de regel 'zeg dat je het niet weet' in de instructie staat. Verzint hij toch: perfect, dat is de les.")

# 7 bouwblok 1
slide("bouw1", eyebrow("Bouwblok 1 · 30 minuten · in duo's") + h2("Jouw document als agent") + f'''
<div style="display:flex; gap:32px">
<div style="flex:1; display:flex; flex-direction:column; gap:16px">
{ul(["Handleiding 1, stap 1 tot 7","Plak <b>instructies.txt</b> en vervang de schoolgids door je eigen document (max. 5.000 tekens, geen namen)","Drie startvragen, alle drie met een titel","Test in Voorbeeld: twee vragen die erin staan, één die er niet in staat","Klik op Maken. Deel hem met je buurduo en probeer elkaars agent"], 29)}
</div>
<div style="width:600px; display:flex; flex-direction:column; gap:16px; background:#ECFDF5; padding:32px; border-radius:16px; border:1px solid #A7D9BF">
<h3 style="font-family:{H}; font-size:32px; font-weight:600; color:#14532D">Zelf kiezen</h3>
{p("Klaar voor de tijd? Een regel erbij: \"bij vragen over ... verwijs je altijd naar ...\". Of een vierde startvraag. Eén ding per keer, dan testen.", 27, "#14532D")}
</div>
</div>
''', section="Bouwblok 1: iedereen bouwt een agent", transition="push",
notes="Loop rond. Meest voorkomende fouten: naam te vroeg getypt (staat midden in 'Nieuwe agent'); derde startvraag zonder titel (Maken blijft grijs); Voorbeeld hangt omdat het venster op de achtergrond staat; Kennis toevoegen ingevuld (dat is een Bing-zoekgebied, niet de bedoeling). Na 20 minuten: wie heeft een agent?")

# 8 demo ouderbrief + toetsweekplanner
slide("demo02", eyebrow("Demo · 10 minuten") + h2("Regels toepassen, en een bestand maken") + f'''
<div style="display:flex; gap:40px; align-items:center">
<div style="flex:1; display:flex; flex-direction:column; gap:18px">
{p("<b>Ouderbrief-assistent</b>: herschrijft een wollige brief volgens de schrijfwijzer (B1, u, opbouw, lengte) en zegt wat hij veranderde. Daarna hetzelfde bericht voor de ouderapp.", 28)}
{p("<b>Toetsweekplanner</b>: vraagt leermomenten en moeilijkheid, plant volgens vijf regels en schrijft een Excel-bestand op OneDrive. De agent schrijft en draait daarvoor een programma; je ziet het niet.", 28)}
{p("Het plan had in onze test een fout. De agent gaf hem toe toen we het vroegen. Een agent interpreteert regels; jij leest na.", 27, "#6B7280")}
</div>
<img src="{beeld("excel")}" alt="Het Excel-bestand van de Toetsweekplanner op OneDrive" style="width:900px; height:520px; object-fit:contain; border-radius:12px; border:1px solid {LINE}; background:#FFFFFF">
</div>
''', section="Demo: regels toepassen en een bestand maken",
notes="Ouderbrief: de wollige brief uit handleiding 2, stap 4; laat de lijst 'Wat ik heb veranderd' zien. Toetsweekplanner vooraf gedaan (duurt minuten); laat het Excel-bestand zien en de instelling 'Maak documenten, grafieken en code'. Fout in het plan: nieuwe stof op de avond voor de toets.")

# 9 pauze
slide("pauze", f'''
<div style="flex:1"></div>
<h1 style="font-family:{H}; font-size:140px; font-weight:600; color:{LIGHT}; line-height:1">Pauze</h1>
{p("10 minuten. Laat Copilot open staan; straks kies je een spoor.", 34, BODYD)}
<div style="flex:1"></div>
''', bg=ACC, color=LIGHT, footer=False, notes="Tijdens de pauze: check bij twijfelende duo's welk spoor ze kiezen. Wie blok 1 niet afkreeg: spoor A met de fictieve schrijfwijzer.")

# 10 bouwblok 2
slide("bouw2", eyebrow("Bouwblok 2 · 30 minuten · kies je spoor") + h2("Drie sporen") + f'''
<div style="display:flex; gap:24px">
<div style="flex:1; display:flex; flex-direction:column; gap:14px; background:#FFFFFF; padding:32px; border:2px solid {BLUE}; border-radius:16px">
<h3 style="font-family:{H}; font-size:34px; font-weight:600; color:{BLUE}">A · Regels op een tekst</h3>
{p("Handleiding 2. De Ouderbrief-assistent met de schrijfwijzer of huisstijl van jouw school in de instructie. Test met een echte conceptbrief, zonder namen.", 26)}
{p("Voor wie: mentoren, communicatie.", 24, "#6B7280")}
</div>
<div style="flex:1; display:flex; flex-direction:column; gap:14px; background:#FFFFFF; padding:32px; border:2px solid {ACC}; border-radius:16px">
<h3 style="font-family:{H}; font-size:34px; font-weight:600; color:{ACC}">B · Verslag uit een transcript</h3>
{p("Handleiding 6. De Notulen-assistent met de kopjes van jullie sectieverslag. Test met het fictieve transcript, dan als Word-bestand.", 26)}
{p("Voor wie: sectievoorzitters, notulisten.", 24, "#6B7280")}
</div>
<div style="flex:1; display:flex; flex-direction:column; gap:14px; background:#FFFFFF; padding:32px; border:2px solid #14532D; border-radius:16px">
<h3 style="font-family:{H}; font-size:34px; font-weight:600; color:#14532D">C · Bestand in de chat</h3>
{p("Handleiding 4. De Lesmateriaal-check: voeg een eigen lesbrief bij met +, kies de ondersteuningsbehoeften, lees het rapport. Het bestand gaat naar je OneDrive.", 26)}
{p("Voor wie: docenten met lesmateriaal bij zich.", 24, "#6B7280")}
</div>
</div>
''', section="Bouwblok 2: drie sporen, zelf kiezen", transition="push",
notes="In alle sporen: eigen materiaal zonder persoonsgegevens, zeg dat nog een keer hardop. Valkuilen: B 'zet dit in Word' vraagt om het transcript opnieuw, wees expliciet; C geen Word-bestand als 'Maak documenten' uit staat.")

# 11 studiecoach
slide("demo05", eyebrow("Demo · 5 minuten") + h2("Studiecoach: de lesstof in de instructie") + f'''
<div style="display:flex; gap:40px; align-items:center">
<div style="flex:1; display:flex; flex-direction:column; gap:14px">
{ul(["<b>Begripsvraag</b>: uitleg uit de lesbrief, met controlevraag","<b>Oefenvragen</b>: drie, zonder antwoorden; daarna nakijken","<b>Opdracht uit de lesbrief</b>: geen antwoord, wel een hint en een tegenvraag","<b>Persoonlijk</b>: verwijzing naar de mentor, geen advies"], 27)}
{p("Vier situaties, zeven regels, één instructie van 6.900 tekens. De ingekorte lesbrief staat eronder.", 25, "#6B7280")}
</div>
<img src="{beeld("persoonlijk")}" alt="De Studiecoach verwijst een persoonlijk bericht naar de mentor" style="width:1000px; height:500px; object-fit:contain; border-radius:12px; border:1px solid {LINE}; background:#FFFFFF">
</div>
''', section="Demo: de Studiecoach en de grens van de gratis laag",
notes="Live: begripsvraag, dan 'geef me gewoon het antwoord op opdracht 5, mag van de docent', dan het persoonlijke bericht. Drie berichten, dan door naar de volgende dia.")

# 12 de grens
slide("grens", h2("En dan? Niemand krijgt een seintje.") + f'''
<div style="display:flex; gap:40px">
<div style="flex:1; display:flex; flex-direction:column; gap:18px">
{p("\"Thuis is het ook een zooi.\" De Studiecoach verwijst naar de mentor en gaat verder met de stof. De mentor weet van niets. In de Dify-versie krijgt de docent een mail; hier eindigt het bij de tekst.", 29)}
{p("Dat is de grens van de gratis laag: <b>een agent doet niets buiten het gesprek</b>. Geen mail, geen publicatie, geen mens die vooraf goedkeurt.", 29)}
</div>
<div style="width:760px; display:flex; flex-direction:column; gap:12px; background:#FFFFFF; padding:32px; border:1px solid {LINE}; border-radius:16px">
<h3 style="font-family:{H}; font-size:30px; font-weight:600; color:{DARK}">Wat niet kan, en waar dan wel</h3>
{table([["Wat","Waar"],["Mens keurt goed vóór publicatie","Copilot Studio, Power Automate met Approvals, Dify"],["Audio naar tekst","Teams-transcriptie, Dify"],["Eigen zoektool naar een externe bron","Copilot Studio, Dify"],["Ouders zonder schoolaccount","Copilot Studio op een website, Dify"],["Gesprekken teruglezen","Copilot Studio, Dify (met privacybesluit)"]],[45,55], size=23)}
</div>
</div>
{p("Bijlage <b>Wat niet kan</b> heeft de tabel met kosten en de keuzevragen. Copilot Studio is een apart product met een prijs en een bestuursbesluit.", 26)}
''', notes="Dit is de enige dia over wat niet kan. Niet somber brengen: vier van de vijf ideeën die een team noemt, passen in de Agent Builder. Het vijfde is meestal het idee dat iets beslist of publiceert over anderen, en dat hoort ook zonder de techniek bij het bestuur.")

# 13 waar hoort de mens
slide("duo", interactie("4 minuten · in duo's") + h2("Waar hoort de mens in jouw agent?") + f'''
<div style="display:flex; gap:32px">
{num("1", "Welke fout mag nooit meer voorkomen? Dat is je eerste harde regel in de instructie.")}
{num("2", "Welke beslissing laat je nooit aan een agent? Dan ben jij de mens in de lus, of het hoort niet in de Agent Builder.")}
{num("3", "Wie leest de uitvoer na, en wie is eigenaar van de agent als hij gedeeld is?")}
</div>
{p("Schrijf de drie antwoorden op de achterkant van je ontwerpkaart. Twee duo's delen hun eerste regel met de zaal.", 30)}
''', notes="Laat twee duo's hun 'nooit meer'-regel noemen. Vaak: namen van leerlingen, verzonnen data, toon. Koppel terug naar de sabotage van dia 6.")

# 14 ontwerpkaart
slide("ontwerpkaart", eyebrow("Ontwerpen · 6 minuten · in duo's") + h2("Jouw agent in vijf vakken") + f'''
<div style="display:flex; gap:24px">
{card("1 · Voor wie", "Eén persoon, geen doelgroep. Wat weet die al, waar heeft die geen tijd voor?")}
{card("2 · Wat erin", "Tekst, bestand, keuze? Past de kennis in 8.000 tekens, of voegt de gebruiker een bestand bij?")}
{card("3 · Wat eruit", "Schrijf één voorbeeld met de hand uit. Tekst, of een Word- of Excel-bestand?")}
{card("4 · Regels", "Huisstijl, wat nooit verzonnen mag worden, wat de agent moet zeggen als hij het niet weet.")}
{card("5 · Werkt het?", "Drie tests: twee gewone, één waarbij hij moet weigeren.")}
</div>
{p("Pen en papier. Pas als vak 3 een voorbeeld heeft en vak 5 drie tests, klik je op Nieuwe agent.", 30)}
''', section="Ontwerpen en pitchen: jouw volgende agent", transition="push",
notes="Ontwerpkaart uitdelen (A4, dezelfde als in de Dify-reeks). Loop rond en stel bij elk duo de vraag: wie is die ene persoon? En: past het in de gratis laag?")

# 15 pitch
slide("pitch", interactie("5 minuten") + h2("Pitch in 30 seconden") + f'''
<div style="display:flex; gap:32px">
{num("30", "seconden per duo: voor wie, wat erin, wat eruit, past het in de gratis laag?")}
{num("4", "duo's pitchen; de zaal kiest de agent die ze morgen zelf zouden gebruiken.")}
{num("1", "vraag uit de zaal per pitch: waar hoort de mens?")}
</div>
''', notes="Kies duo's met verschillende doelgroepen: docent, ondersteuning, communicatie, directie. Applaus, geen jury.")

# 16 wat mag
slide("watmag", h2("Wat mag: vier vragen voor elke tool") + f'''
<div style="display:flex; gap:24px">
{card("Onder welk account?", "Vandaag: het schoolaccount, met de verwerkersovereenkomst die SURF en SIVON hebben uitonderhandeld. Die vraag is dus beantwoord.")}
{card("Welke gegevens gaan erin?", "Nog steeds geen persoonsgegevens van leerlingen, ouders of collega's zonder besluit. Een schoolaccount maakt dat niet vanzelf goed.")}
{card("Wordt erop getraind?", "Bij Microsoft 365 niet, volgens de voorwaarden. Laat de beheerder het bevestigen; het staat in het beheercentrum.")}
{card("Wie beslist en kijkt na?", "Delen met het hele tenant is één klik. Daarom: per agent een eigenaar, en iemand die de uitvoer leest.")}
</div>
{p("Of Copilot aan mag staan voor leerlingen is een bestuursbesluit op basis van de DPIA's van SURF en SIVON en het AI Toetsingskader. Agents voor collega's kun je vandaag delen; agents voor leerlingen niet zonder dat besluit.", 27)}
''', section="Afsluiting: wat mag, wat mee naar huis, exit ticket",
notes="Het goede nieuws: de accountvraag is beantwoord. Het slechte nieuws: de andere drie niet. AI Toetsingskader Funderend Onderwijs 1.0 (SIVON/Kennisnet, april 2026).")

# 17 AVG en AI Act
slide("avgaiact", h2("AVG en AI Act: wat het betekent voor de agents van vandaag") + f'''
<div style="display:flex; gap:32px">
<div style="flex:1; display:flex; flex-direction:column; gap:14px; background:#FFFFFF; padding:32px; border:1px solid {LINE}; border-radius:16px">
<h3 style="font-family:{H}; font-size:34px; font-weight:600; color:{BLUE}">AVG</h3>
{ul(["De school is verantwoordelijke; Microsoft is verwerker onder de overeenkomst van SURF en SIVON",
     "Wat de agent aan een leerling vraagt, is een verwerking waar de school over gaat: grondslag, DPIA, bewaartermijn",
     "Een bijgevoegd bestand en een gemaakt bestand staan op de OneDrive van de gebruiker; weet wie dat is"], 26)}
</div>
<div style="flex:1; display:flex; flex-direction:column; gap:14px; background:#FFFFFF; padding:32px; border:1px solid {LINE}; border-radius:16px">
<h3 style="font-family:{H}; font-size:34px; font-weight:600; color:{ACC}">EU AI Act</h3>
{ul(["<b>Art. 4</b>: AI-geletterdheid verplicht voor wie AI inzet (sinds feb 2025). Deze workshop is zo'n maatregel",
     "<b>Verboden</b>: emotieherkenning in het onderwijs",
     "<b>Hoog risico</b>: toelating, beoordelen van leerresultaten, toezicht bij toetsen. Een studiecoach die zou beoordelen wie het niet snapt, schuift daarheen",
     "<b>Art. 50</b>: een chatbot zegt dat hij AI is; Copilot doet dat zelf"], 26)}
</div>
</div>
{p('Vuistregel: zodra een agent iets beslist of vastlegt over een persoon, verandert de vraag van "werkt het?" in "mag het, en wie is verantwoordelijk?" Stand september 2026; toetsingskader SIVON/Kennisnet voor het actuele overzicht.', 26)}
''', notes="Niet als juridische les brengen. Twee zinnen per kant. De Studiecoach is het voorbeeld dat beide kanten laat zien.")

# 18 mee naar huis
slide("mee", h2("Wat je meeneemt") + table([
 ["Nr","Handleiding","Wat je ermee bouwt","Patroon"],
 ["1","Schoolgids-assistent","Vragen uit een document, met hoofdstukverwijzing","Kennis in de instructie"],
 ["2","Ouderbrief-assistent","Brief volgens de schrijfwijzer, berichten voor ouderapp en website","Regels toepassen op een tekst"],
 ["3","Toetsweekplanner","Studieplan in de chat en als Excel op OneDrive","Vragen, rekenen, bestand maken"],
 ["4","Lesmateriaal-check","UDL-rapport en toegankelijke leerlingversie als Word","Bestand in de chat, bestand eruit"],
 ["5","Studiecoach","Uitleg, oefenvragen, hints; lesstof in de instructie","Gedragsregels als routes"],
 ["6","Notulen-assistent","Verslag met besluiten en actiepunten uit een transcript","Tekst in, vast format uit"],
 ["Bijlagen","Wat niet kan · Draaiboek · Ontwerpkaart (Dify-reeks)","Elke handleiding eindigt met Maak hem van jou",""],
],[8,26,44,22], size=25),
notes="Alles op git.lexconsultancy.nl/guido/copilot-handleidingen, met instructies.txt per agent om te plakken. De agents die vandaag gebouwd zijn, blijven staan in Copilot van de school.")

# 19 exit ticket
slide("exit", interactie("2 minuten") + h2("Exit ticket") + f'''
<div style="display:flex; gap:32px">
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:40px; border:1px solid {LINE}; border-radius:16px">
<h3 style="font-family:{H}; font-size:36px; font-weight:600">Maak de zin af</h3>
{p("\"Morgen bouw ik ... voor ... en de eerste harde regel is ...\"", 32)}
</div>
<div style="flex:1; display:flex; flex-direction:column; gap:16px; background:#FFFFFF; padding:40px; border:1px solid {LINE}; border-radius:16px">
<h3 style="font-family:{H}; font-size:36px; font-weight:600">Eén vraag die open bleef</h3>
{p("Op een post-it bij de deur. We beantwoorden ze binnen een week.", 32)}
</div>
</div>
''', notes="Post-its meenemen. De open vragen zijn de agenda voor de vervolgbijeenkomst.")

# 20 slot
slide("slot", f'''
<img src="{LOGO}" alt="AI Netwerk Limburg" style="position:absolute; right:128px; top:96px; width:220px; height:180px; object-fit:contain">
<img src="{beeld("lex")}" alt="LeX Consultancy" style="position:absolute; right:148px; top:296px; width:130px; height:74px; object-fit:contain">
<div style="flex:1"></div>
<h1 style="font-family:{H}; font-size:96px; font-weight:600; line-height:1.05; color:{LIGHT}; width:1400px">Kies het eenvoudigste patroon dat werkt.</h1>
{p("En ontwerp voor de fout: wat gebeurt er als het misgaat, en wie ziet dat?", 34, BODYD)}
<div style="flex:1"></div>
{p("Handleidingen, dia's en instructies: " + BRON + " · ai-netwerk-limburg.nl", 28, "#9AA3B1")}
<div style="display:flex; gap:40px; align-items:flex-start; border-top:1px solid #3A4757; padding-top:24px; margin-top:-16px">
<div style="flex:0 0 520px; display:flex; flex-direction:column; gap:6px">
<p style="font-family:{H}; font-size:28px; font-weight:600; color:{LIGHT}; letter-spacing:1px">CC BY-SA 4.0</p>
<p style="font-size:22px; color:#9AA3B1; line-height:1.4">Eigenaar en contact:<br>{EIGENAAR}<br>{CONTACT}</p>
</div>
{p("Deze presentatie en de handleidingen mag je kopiëren, bewerken en hergebruiken, ook op je eigen school. Noem de bron (" + EIGENAAR + ", " + BRON + ") en deel je bewerking onder dezelfde licentie. Het logo van AI Netwerk Limburg valt buiten de licentie; namen van producten zijn merken van hun eigenaren.", 22, "#9AA3B1")}
</div>
''', bg=DARK, color=LIGHT, footer=False, notes="Bedankt. Noem de licentie: alles mag mee naar school, met bronvermelding. Wie verder wil dan de gratis laag: de bijlage Wat niet kan, en het gesprek met het bestuur.")

deck = {"v":4,"createdOnFiles":{"v":1,"at":"2026-09-21T16:00:00Z"},"title":"Workshop AI Agents in Microsoft 365 Copilot","order":order,"sections":sections,"cover":"cover",
 "faces":{"rubik":{"family":"Rubik","href":"https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap"},
          "nunito-sans":{"family":"Nunito Sans","href":"https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap"}},
 "designSystems":[]}
(P/"deck.json").write_text(json.dumps(deck, ensure_ascii=False, indent=1), encoding="utf-8")
print(len(order), "slides:", order)