Hledáte prázdninový projekt, do kterého se s dětmi pustit? Který zabere právě tolik času, kolik mu chcete dát? Zkuste žhavou novinku – veřejnosti je přístupná sotva tři týdny – a naprogramujte, co budete chtít. Je to o dost jednodušší, než si asi myslíte. Ale chyby se samozřejmě objevují, jako ostatně ve všem, co se týká generativní umělé inteligence.

V rámci seriálu Hrajeme si s AI jsme loni ukázali i základy programování pro děti. Už tenkrát bylo samozřejmě možné zapřáhnout ChatGPT i k programování. Bylo to ale naprosto nepraktické pro kohokoli, kdo nezná alespoň základy počítačového kódu a jeho spouštění. Pustit se do programování s chatbotem tehdy bylo pro začátečníky celkem frustrující.

Nyní je situace o dost jiná. Chatbot Claude od firmy Anthropic má nyní nejenom rychlejší verzi, ale také funkci Artifacts, která umožňuje plynulé psaní instrukcí a sledování výsledků na jedné obrazovce. Vlevo si s chatbotem povídáte a přidáváte instrukce. Vpravo vzniká váš program (zde hra Had) a vy si ji můžete hned otestovat.

Podívejte se, jak to funguje v praxi:

Už dříve jste samozřejmě vygenerovaný kód mohli z chatbota zkopírovat do externího editoru, uložit a spustit. Teď se to děje samo a překvapivě rychle. Zní to jako maličkost, která ale může programování zpřístupnit i lidem, kteří se jej zatím báli.

Navíc je tato experimentální funkce dostupná zdarma pro kohokoli, není potřeba platit prémiovou verzi (bezplatná verze má omezený počet zadání). Podíváme se tedy, jak s pomocí Clauda naprogramovat něco, co si užijí rodiče i děti. Třeba nějakou „retro“ počítačovou hru.

Zatímco skutečné programování je disciplína dosti přísná, ve spolupráci s chatbotem je to naopak velice neformální záležitost. Proto zde místo vyčerpávajícího návodu najdete spíše pár tipů do začátku.

První pravidlo zní, že nejsou pravidla. Pokud chcete vy, nebo děti něco zkusit, tak to zkuste. Veškerý kód se spouští přímo v prohlížeči a tak by se nemělo stát, že provedete něco, čeho byste litovali. Maximálně se vám stránka zasekne a vy ji obnovíte. Náš první krok tedy může vypadat takto: Naprogramuj hru had v HTML, ovládat ji budu tlačítky ASDW na klávesnici.

Pokud máte zapnutou funkci Artifacts (kliknutím na ikonku vlevo dole, Feature Preview, Artifacts – On), začne vám chatbot okamžitě generovat hromadu kódu. Když je hotový, přepne se do zobrazení náhledu. A vy tak hned vidíte, co jste zatím vytvořili, respektive co vám vyrobil chatbot.

Váš výsledek může vypadat úplně jinak než to, co chatbot vyrobil mně. A to dokonce i kdybyste zadali navlas stejnou instrukci. Tohle spoluvytváření je spíše taková alchymie. Nezdráhejte se proto říci si o cokoli, co vás napadne.

Hru had jsem postupně vylepšil takto:

Jinými slovy, komunikujete s chatbotem, jako kdyby to byl váš dvorní programátor. V něčem je to programátor nadprůměrně schopný, jinde zase dělá primitivní chyby. Co se mu ale nedá upřít: je neuvěřitelně trpělivý. I proto mu můžete zadávat své legrační nápady a on je vždycky vezme vážně. Pro kreativní projekty je to ideální kombinace.

Aby mělo toto experimentování i nějakou pedagogickou hodnotu, požádejte chatbot, aby vám vždy vysvětlil, co udělal a proč. Můžete také chtít detailní komentáře přímo ve zdrojovém kódu.

Pokud máte raději vizuální diagramy, můžete si je nechat vygenerovat přímo na míru: Chtěl bych se také naučit programovat, ale zatím nerozumím javascriptu. Ukaž mi přehledné schéma celého kódu, abych pochopil, jak funguje. Nějak hezky graficky, abych to pochopil.

Právě takováto schémata pomohou dětem lépe pochopit to, co by ze zdrojového kódu nevyčetly. Že se program rozhoduje na základě jasně daných příkazů a že musíme předem promyslet všechny eventuality a popsat, co se má v takovém případě stát.

Nerad bych, aby to vypadalo, jako že si Claude poradí se vším. Zdaleka ne. Pořád je to jen jazykový model, který za sebe skládá písmenka a slova. Výsledky jsou často použitelné. Jindy jsou to ale úplné nesmysly, a konverzace se točí v kruzích. I to je ale součástí společného poznávání toho, co nyní umělá inteligence zvládne a co ještě ne.

Hra typu Had je docela primitivní. Není důvod držet se tak při zemi. Pojďme udělat simulátor rakety. Tentokrát si dáme na popisu více záležet a nenecháme nic náhodě. Zkusíme, jestli to povede k lepším výsledkům hned napoprvé, nebo jestli to naopak bude na Clauda až moc velké sousto.

Chci vytvořit hru, která používá html+css+js a umožňuje simulaci přistávání jednoduché rakety. Hra bude responzivní, černá hrací plocha má formát 4:3 a zobrazuje se do šířky okna, maximálně 800 px. Pod hrací plochou jsou tři tlačítka: doleva, nahoru, doprava. Kromě toho je možné ovládat hru i kurzorovými klávesami. Raketa červená, plamen trysky oranžový, design moderní a jednoduchý pixel-art. Náhodně buď nalevo nebo napravo dole hrací plochy je plocha na přistání, na zelené plošině. Před startem hry ukaž nad hrací plochou krátké vysvětlení hry, posuvník a tlačítko start, po jeho stisknutí vysvětlení zmizí a hra začíná. Posuvník umožňuje zvolit obtížnost (míru gravitace v procentech), výchozí je 50 %. Po úspěšném nebo neúspěšném přistání zpráva o úspěchu, nebo neúspěchu. Uživatel by měl vlevo neustále vidět aktuální horizontální a vertikální rychlost v km/h. Limit pro bezpečné přistání je pět km/h vertikální a dva km/h horizontální. Klávesa doleva i doprava otáčí raketu, klávesa nahoru je hlavní tryska (ve směru rakety). Výsledek by měl jít hrát na mobilu i na počítači. Při kontaktu s horním okrajem hrací plochy hra končí neúspěchem, při kontaktu s levým okrajem se raketa objeví vpravo a naopak, při kontaktu dole mimo přistávací plošinu také neúspěch. Exploze je animovaná pomocí rychle rostoucího mizícího oranžového kruhu.

Tak co, zvládl to? Řekl bych, že vyhověl všem mým požadavkům hned napoprvé. Některé věci jsem si představoval jinak, ale výsledek je nejen funkční, ale dokonce i hratelný.

Výslednou stránku html si můžete prohlédnout zde. Doporučuji nastavit Obtížnost na asi 20 %, jinak je hra prakticky nehratelná. Do kódu jsem ale nijak nezasahoval. Vylepšení mne samozřejmě napadá celá řada, a vás určitě taky. Tak do toho. Pro inspiraci můžete třeba:

Počínaje tímto létem se ze všech lidí stali programátoři, chtělo by se říci. Ale to by bylo dost zavádějící. Programování jako takové je hodně široká disciplína, a jen některé relativně malé části programování lze dnes zcela nechat na rozmarech umělé inteligence.

Podle mého rozhodně má cenu učit se programovat i dnes. Právě k tomu je tento nástroj výborný. Můžete si totiž s dětmi – i bez nich – vyzkoušet, jak formulovat své nápady, stavět na nich, hledat chyby a postupně projekt vylepšovat. A hlavně jak vytvořit něco, co bude ostatní lidi bavit a bude to pro ně použitelné.

To jsou ty schopnosti, které nevyjdou z módy. Ani teď, kdy se do programování může směle pustit i malé dítě.

Hledáte prázdninový projekt, do kterého se s dětmi pustit? Který zabere právě tolik času, kolik mu chcete dát? Zkuste žhavou novinku – veřejnosti je přístupná sotva tři týdny – a naprogramujte, co budete chtít. Je to o dost jednodušší, než si asi myslíte. Ale chyby se samozřejmě objevují, jako ostatně ve všem, co se týká generativní umělé inteligence.

V rámci seriálu Hrajeme si s AI jsme loni ukázali i základy programování pro děti. Už tenkrát bylo samozřejmě možné zapřáhnout ChatGPT i k programování. Bylo to ale naprosto nepraktické pro kohokoli, kdo nezná alespoň základy počítačového kódu a jeho spouštění. Pustit se do programování s chatbotem tehdy bylo pro začátečníky celkem frustrující.

Nyní je situace o dost jiná. Chatbot Claude od firmy Anthropic má nyní nejenom rychlejší verzi, ale také funkci Artifacts, která umožňuje plynulé psaní instrukcí a sledování výsledků na jedné obrazovce. Vlevo si s chatbotem povídáte a přidáváte instrukce. Vpravo vzniká váš program (zde hra Had) a vy si ji můžete hned otestovat.

Podívejte se, jak to funguje v praxi:

Už dříve jste samozřejmě vygenerovaný kód mohli z chatbota zkopírovat do externího editoru, uložit a spustit. Teď se to děje samo a překvapivě rychle. Zní to jako maličkost, která ale může programování zpřístupnit i lidem, kteří se jej zatím báli.

Navíc je tato experimentální funkce dostupná zdarma pro kohokoli, není potřeba platit prémiovou verzi (bezplatná verze má omezený počet zadání). Podíváme se tedy, jak s pomocí Clauda naprogramovat něco, co si užijí rodiče i děti. Třeba nějakou „retro“ počítačovou hru.

Zatímco skutečné programování je disciplína dosti přísná, ve spolupráci s chatbotem je to naopak velice neformální záležitost. Proto zde místo vyčerpávajícího návodu najdete spíše pár tipů do začátku.

První pravidlo zní, že nejsou pravidla. Pokud chcete vy, nebo děti něco zkusit, tak to zkuste. Veškerý kód se spouští přímo v prohlížeči a tak by se nemělo stát, že provedete něco, čeho byste litovali. Maximálně se vám stránka zasekne a vy ji obnovíte. Náš první krok tedy může vypadat takto: Naprogramuj hru had v HTML, ovládat ji budu tlačítky ASDW na klávesnici.

Pokud máte zapnutou funkci Artifacts (kliknutím na ikonku vlevo dole, Feature Preview, Artifacts – On), začne vám chatbot okamžitě generovat hromadu kódu. Když je hotový, přepne se do zobrazení náhledu. A vy tak hned vidíte, co jste zatím vytvořili, respektive co vám vyrobil chatbot.

Váš výsledek může vypadat úplně jinak než to, co chatbot vyrobil mně. A to dokonce i kdybyste zadali navlas stejnou instrukci. Tohle spoluvytváření je spíše taková alchymie. Nezdráhejte se proto říci si o cokoli, co vás napadne.

Hru had jsem postupně vylepšil takto:

Jinými slovy, komunikujete s chatbotem, jako kdyby to byl váš dvorní programátor. V něčem je to programátor nadprůměrně schopný, jinde zase dělá primitivní chyby. Co se mu ale nedá upřít: je neuvěřitelně trpělivý. I proto mu můžete zadávat své legrační nápady a on je vždycky vezme vážně. Pro kreativní projekty je to ideální kombinace.

Aby mělo toto experimentování i nějakou pedagogickou hodnotu, požádejte chatbot, aby vám vždy vysvětlil, co udělal a proč. Můžete také chtít detailní komentáře přímo ve zdrojovém kódu.

Pokud máte raději vizuální diagramy, můžete si je nechat vygenerovat přímo na míru: Chtěl bych se také naučit programovat, ale zatím nerozumím javascriptu. Ukaž mi přehledné schéma celého kódu, abych pochopil, jak funguje. Nějak hezky graficky, abych to pochopil.

Právě takováto schémata pomohou dětem lépe pochopit to, co by ze zdrojového kódu nevyčetly. Že se program rozhoduje na základě jasně daných příkazů a že musíme předem promyslet všechny eventuality a popsat, co se má v takovém případě stát.

Nerad bych, aby to vypadalo, jako že si Claude poradí se vším. Zdaleka ne. Pořád je to jen jazykový model, který za sebe skládá písmenka a slova. Výsledky jsou často použitelné. Jindy jsou to ale úplné nesmysly, a konverzace se točí v kruzích. I to je ale součástí společného poznávání toho, co nyní umělá inteligence zvládne a co ještě ne.

Hra typu Had je docela primitivní. Není důvod držet se tak při zemi. Pojďme udělat simulátor rakety. Tentokrát si dáme na popisu více záležet a nenecháme nic náhodě. Zkusíme, jestli to povede k lepším výsledkům hned napoprvé, nebo jestli to naopak bude na Clauda až moc velké sousto.

Chci vytvořit hru, která používá html+css+js a umožňuje simulaci přistávání jednoduché rakety. Hra bude responzivní, černá hrací plocha má formát 4:3 a zobrazuje se do šířky okna, maximálně 800 px. Pod hrací plochou jsou tři tlačítka: doleva, nahoru, doprava. Kromě toho je možné ovládat hru i kurzorovými klávesami. Raketa červená, plamen trysky oranžový, design moderní a jednoduchý pixel-art. Náhodně buď nalevo nebo napravo dole hrací plochy je plocha na přistání, na zelené plošině. Před startem hry ukaž nad hrací plochou krátké vysvětlení hry, posuvník a tlačítko start, po jeho stisknutí vysvětlení zmizí a hra začíná. Posuvník umožňuje zvolit obtížnost (míru gravitace v procentech), výchozí je 50 %. Po úspěšném nebo neúspěšném přistání zpráva o úspěchu, nebo neúspěchu. Uživatel by měl vlevo neustále vidět aktuální horizontální a vertikální rychlost v km/h. Limit pro bezpečné přistání je pět km/h vertikální a dva km/h horizontální. Klávesa doleva i doprava otáčí raketu, klávesa nahoru je hlavní tryska (ve směru rakety). Výsledek by měl jít hrát na mobilu i na počítači. Při kontaktu s horním okrajem hrací plochy hra končí neúspěchem, při kontaktu s levým okrajem se raketa objeví vpravo a naopak, při kontaktu dole mimo přistávací plošinu také neúspěch. Exploze je animovaná pomocí rychle rostoucího mizícího oranžového kruhu.

Tak co, zvládl to? Řekl bych, že vyhověl všem mým požadavkům hned napoprvé. Některé věci jsem si představoval jinak, ale výsledek je nejen funkční, ale dokonce i hratelný.

Výslednou stránku html si můžete prohlédnout zde. Doporučuji nastavit Obtížnost na asi 20 %, jinak je hra prakticky nehratelná. Do kódu jsem ale nijak nezasahoval. Vylepšení mne samozřejmě napadá celá řada, a vás určitě taky. Tak do toho. Pro inspiraci můžete třeba:

Počínaje tímto létem se ze všech lidí stali programátoři, chtělo by se říci. Ale to by bylo dost zavádějící. Programování jako takové je hodně široká disciplína, a jen některé relativně malé části programování lze dnes zcela nechat na rozmarech umělé inteligence.

Podle mého rozhodně má cenu učit se programovat i dnes. Právě k tomu je tento nástroj výborný. Můžete si totiž s dětmi – i bez nich – vyzkoušet, jak formulovat své nápady, stavět na nich, hledat chyby a postupně projekt vylepšovat. A hlavně jak vytvořit něco, co bude ostatní lidi bavit a bude to pro ně použitelné.

To jsou ty schopnosti, které nevyjdou z módy. Ani teď, kdy se do programování může směle pustit i malé dítě.