Hrajeme si s GitHub Copilot. Umělá inteligence bude programovat za vás a pomůže zelenáčům

Loni v létě se laboratoř OpenAI pochlubila svým novým textovým AI modelem Codex, který dokázal generovat smysluplný programový kód v hromadě jazyků. Technologie se zrodila na základech staršího a neméně úspěšného modelu GPT-3 a společně dnes tvoří páteř OpenAI API.

Prozkoumejte další články ze seriálu Pojďme programovat elektroniku

Používá je celý zástup zajímavých a často bezplatných experimentů nejen pro vývojáře, ovšem jeden docela zřetelně vystupuje z řady a technická média o něm píšou už celý rok. Jak už napovídá název pokračování naše seriálu o programování elektroniky, řeč je o automatu GitHub Copilot, který dnes spadá pod křídla Microsoftu.

Codexový našeptávač kódu Copilot

Copilot je unikátní našeptávač kódu založený na Codexu a je k dispozici zdarma jako Technical Preview na pozvánky. Stačí se zaregistrovat na jeho webu copilot.github.com a časem vám dorazí aktivace.

Jistě jste poznali HTML a Javascript.  Začal jsem psát tělo funkce sayHello. Copilot podle jejího názvu pochopil význam a domyslel si zbytek

Pospíchejte, Microsoft totiž na své výroční konferenci Build před pár dny oznámil, že se betatestování pomalu blíží svému konci, Copilot bude v létě hotový a mohou se změnit jeho licenční podmínky včetně širokého bezplatného přístupu.

Vyzkoušíme Copilota ve Visual Studio Code

Dnes si na několika kartách ukážeme, co vlastně Copilot umí. Jeho schopnosti demonstrujeme v bezplatném vývojářském editoru Visual Studio Code pro Windows, macOS a Linux, Copilot je totiž k dispozici jako jeho volitelný doplněk. Ten si můžete nainstalovat i bez pozvánky, nicméně kód začne doplňovat až po přihlášení k účtu a ověření, že na něj máte právo.

Visual Studio Code a jeho doplněk Copilot. Začne fungovat až po přihlášení k účtu GitHubu

Napíšete začátek a Copilot to doplní

Dejme tedy tomu, že jste si celým tímto kolečkem prošli, váš účet má aktivovanou službu Copilot a na vašem počítači svítí Visual Studio Code. Jak Copilota spustíte? Vlastně nijak – je spuštěný už od začátku a bude jen čekat na programovací jazyk, kterému bude rozumět.

Že je Copilot aktivní, poznáte docela jednoduše, vedle případného základního našeptávače se totiž při psaní zobrazí i návrh šedého textu přímo v editoru. Přesně to je Copilot! Pokud klepnete na TAB, šedý text se trvalé vloží na místo, kde právě svítí kurzor. A pokud najedete myší nad šedý návrh kódu, zobrazí se další možnosti.

Už víme, jak Copilot funguje, takže na dalších kartách se konečně podíváme na některé zajímavé ukázky

Copilot doplní číselnou řadu

Pojďme si vyzkoušet první zatěžkávací zkoušku. Klidně zůstaňme v Javascriptiu, ve kterém vytvoříme proměnnou cisla. Začnu tedy pást let cisla a takhle Copilot zareaguje:

Copilot si myslí, že chci vytvořit pole s číselnou řadou 1 až 10

Copilot si jen na základě zápisu let cisla domyslel, že mi zkusí navrhnout javascriptové pole s číselnou řadou 1 až 10. Nemusel jsem dokonce ani použít angličtinu! 

Copilot tak může fungovat i jako skvělý pomocník pro začátečníky, kteří ještě přesně nevědí, jak se vytvářejí základní bloky kódu – třeba zrovna pole.

Copilot si poradí se složitou číselnou řadou

Pojďme to Copilotovi trošku znepříjemnit. Budu pokračovat v zápisu pole, ale místo obvyklé číselné řady napíšu let cisla = [1,9 a budu sledovat, jestli našeptávač pochopí, o co mi jde tentokrát: 

Copilot na základě dvou číslic pochopil, že mi jde o číselnou řadu, kde se postupně střídá nejnižší a nejvyšší zbývající hodnota

Skvělé, pochopil vzor složitější číselné řady, ve které se postupně střídá nejnižší a nejvyšší zbývající hodnota!

Stačí jen klepnout na TAB a šedý návrh se promění v hotový kód. Ovšem pozor, jsme teprve na začátku a Copilot toho samozřejmě umí mnohem více.

Copilot pochopí, že chci vypsat číselnou řadu

Nechme v kódu vygenerovanou předchozí číselnou řadu, ale chtěli bychom ji někam vypsat. K průchodu pole se ve většině jazyků zpravidla používá smyčka for a její varianty. A tak napíšu for:

Copilot doplnil smyčku for pro vypsání čísel v poli

Skvělé, Copilot doplnil smyčku, a jelikož si drží kontext celého kódu, jeho návrh počítá rovnou i s polem cisla, jehož položky jednu po druhé vypíše do konzole prohlížeče.

Copilot použil klasickou a možná zbytečně zdlouhavou podobu smyčky for. Když mu ale trošku pomohu a napíšu for(let cislo, docvakne mu to a použije moderní variantu základního průchodu polem.

Druhá varianta našeptaného kódu a výsledek v konzoli prohlížeče Chrome

Copilot vytvoří funkci pro vložení HTML

Fajn, posuňme se trošku dál. Dejme tomu, že jsme si v HTML kódu vytvořili blok <div id="chlivek"></div>, do kterého chceme pomocí Javascriptu doplnit nějaký HTML obsah. Blok má ID chlivek, a tak Copilota požádám, ať mi vytvoří funkci pro doplnění obsahu do HTML elementu dle jeho ID. Začnu psát function printToId:

Copilot pochopil, že má vytvořit funkci pro vyhledání elementu podle ID a doplnění HTML

A Copilot vytvoří jednoduchou funkci, která to všechno udělá. Ani zde tedy automat nezaváhal a vytvořil strukturu, která může opět pomoci začátečníkům, kteří práci s DOM v Javascriptu ještě moc neznají.

Pojďme si naši funkci vyzkoušet v praxi. Zavoláme ji z anonymní funkce napojené na událost window.onload a do elementu napíšeme nějakou pěknou zdravici se srdíčkem. Opět stačí napsat jen windows.onload =, chvíli počkat a Copilot se postará o zbytek.

Píšeme do HTML elementů snadno a rychle

Copilot stáhne data

Máme funkci pro vkládání obsahu do HTML elementu, a tak si zkusme stáhnout nějaká data z webu a vložit je na stránku. Způsobů je celá řada – já vždy volím moderní Fetch API –, ale nechme to opět na Copilotovi. Začnu psát function getData(url a takhle to dopadne:

Copilot podle vzoru vytvořil asynchronní funkci pro stažení dat

Copilot doplnil zbytek funkce pomocí klasického API XMLHttpRequest s tím, že asynchronní funkce má dva vstupní parametry. URL a callback, který zpracuje výsledek.

Spojíme se tedy s API Wikipedie, stáhneme z ní úryvek o tom, co je to kokos, a výsledek vypíšeme opět do kontejneru DIV. Copilot nám pomohl pří úvodním návrhu a bude nám do toho kecat i ve zbytku kódu.

Copilot nám pomohl s kódem, a tak po načtení stránky můžeme vypsat, co je to kokos 

 Stavíme asistenta Živáka. Naučíme ho kousky, které nedá ani finalista AZ-kvízu

Copilot si poradí i s Pythonem

Copilot se samozřejmě neomezuje jen na Javascript. Zvládne nespočet programovacích jazyků, byť samozřejmě s některými usnadní práci dramaticky více než s jinými. Teď zkusíme Python. Zvolím linuxové prostředí WSL přímo na Windows 11 s textovým Ubuntu, ale příklady samozřejmě poběží i v Pythonu pro Windows a macOS.

Dejme tomu, že bych po Copilotovi chtěl funkci pro textový formátovaný výpis aktuálního data a času. Začnu tedy psát třeba def getStrDateTime:

Copilot pochopil, že chci text s datem a časem

A Copilot si s tím opět bez zaváhání poradí. Vytvoří základní tělo funkce, do kterého si naimportuje i jednu ze základních knihoven pro práci s datem. Formát data a času je součástí funkce a můžeme jej snadno změnit.

Výsledek v integrovaném linuxovém terminálu WSL

Copilot stáhne data v Pythonu

V další ukázce pro Python opět zkusme stáhnout data z internetu. Budu postupovat identicky jako v případě Javascriptu a začnu psát funkci def getData(url:

Copilot vytvořil funkci v Pythonu pro stažení dat

Copilot zkonstruoval kód funkce pomocí vestavěné knihovny urllib. Osobně mám raději externí Requests, ale funguje to a opět to pomůže začátečníkům, kteří se učí Python a neví, která bije.

Vypsání kurzovního lístku ČNB a odhadu počasí v Brně pomocí mé neuronky Boženka

Copilot a pole v čistém C

Na závěr se ještě pojďme podívat na C/C++. Tady by vám mohl Copilot usnadnit práci třeba při psaní programů pro prostředí Arduino. Začneme opět polem v C. Začnu psát int cisla[ a Copilot doplní celou řadu: 

Pole jdou Copilotovi i v C

Všimněte si, že řada čísel je tentokrát na rozdíl od Javascriptu neseřazená. Zde se Copilot učil na jiném vzorku dat. Nám se to ale hodí pro další ukázku, ve které Copilotovi přikážeme, aby vytvořil funkci pro setřídění celočíselných numerických dat v C.

Copilot setřídí čísla v C

Jelikož jsou hodnoty v našem poli nesetříděné, zkusím začít psát název nové funkce void sortArray a budu doufat, že se Copilot chytne:

Copilot navrhl standardní funkci pro třídění celočíselných numerických dat

Všimněte si, že Copilot korektně doplnil kód pro funkci se dvěma parametry. Tím prvním je pole, které má setřídit, tím druhým pak jeho velikost. Zkusíme tedy funkci zavolat v hlavní funkci main a pole setřídíme.

I tady reaguje Copilot a při volání funkce sortArray rovnou navrhne doplnění správných parametrů podle kontextu celého zdrojového kódu. 

Copilot při volání funkce sortArray našeptá její parametry

Pole jsme sice seřadili, jak jej ale vypsat na obrazovku? Dáme to za úkol Copilotovi na posledním listu dnešního článku. 

Copilot vypíše setříděné pole

Jak vypsat čísla? Stačilo by opět začít univerzální smyčkou for, ale Copilot zareagoval ještě dříve už v okamžiku, když jsem odřádkoval. Podle kontextu stručného kódu vydedukoval, že bych teď mohl chtít pole vypsat a zkonstruoval za mě úplně všechno.

Jen jsem odřádkoval a bylo hotovo

Kód nicméně není zcela validní, byť si s ním většina překladačů asi poradí. Chybí mu totiž hlavičkový soubor s definicemi funkce printf pro výpis do standardního výstupu.

Na začátku kódu jsem tedy začal psát #include < a Copilot pochopil, že má doplnit hlavičkový soubor #include <stdio.h> pro standardní vstup/výstup. Na konci programu jsem ještě ručně odřádkoval, ale jinak se o výsledek níže postaral Copilot.

Celý program po přeložení a spuštění

Copilot je tedy skvělým pomocníkem pro začátečníky, kteří se teprve učí programovat. Automat jim ukáže, jak by asi šel vyřešit kdejaký problém. NEmusí to být vždy ideální, ale funguje to.

Služba také pomůže v případech, kdy by leckdo sáhl po Googlu nebo třeba katalogu otázek a odpovědí StackOverflow. Copilot a jemu podobní proto mají určitě budoucnost.