GitHub Copilot má za sebou rok testování. Umí doplňovat kód napříč programovacími jazyky. Pomůže pokročilým kodérům s otročinou a naučí začátečníky

GitHub Copilot má za sebou rok testování. Umí doplňovat kód napříč programovacími jazyky. Pomůže pokročilým kodérům s otročinou a naučí začátečníky

Jistě jste poznali HTML stránku a Javascript.  Začal jsem psát tělo funkce sayHello. Copilot podle jejího názvu pochopil význam a nabídl její obsah, který po spuštění zobrazí dialog se zprávičkou Hello.  

Jistě jste poznali HTML stránku a Javascript.  Začal jsem psát tělo funkce sayHello. Copilot podle jejího názvu pochopil význam a nabídl její obsah, který po spuštění zobrazí dialog se zprávičkou Hello.  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Píšeme do HTML elementů snadno a rychle

Píšeme do HTML elementů snadno a rychle

Píšeme do HTML elementů snadno a rychle

Píšeme do HTML elementů snadno a rychle

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vypsání kurzovního lístku ČNB a odhadu počasí v Brně pomocí mé neuronky Boženka analýzou fotografie oblohy v našem skriptu

Vypsání kurzovního lístku ČNB a odhadu počasí v Brně pomocí mé neuronky Boženka analýzou fotografie oblohy v našem skriptu

Vypsání kurzovního lístku ČNB a odhadu počasí v Brně pomocí mé neuronky Boženka analýzou fotografie oblohy v našem skriptu

Vypsání kurzovního lístku ČNB a odhadu počasí v Brně pomocí mé neuronky Boženka analýzou fotografie oblohy v našem skriptu

Pole jdou Copilotovi i v C

Pole jdou Copilotovi i v C

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

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

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

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

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

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

Jen jsem odřádkoval a bylo hotovo

Jen jsem odřádkoval a bylo hotovo

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

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

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

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

Jistě jste poznali HTML stránku a Javascript.  Začal jsem psát tělo funkce sayHello. Copilot podle jejího názvu pochopil význam a nabídl její obsah, který po spuštění zobrazí dialog se zprávičkou Hello.  
Visual Studio Code a jeho doplněk Copilot. Začne fungovat až po přihlášení k účtu GitHubu
Copilot si myslí, že chci vytvořit pole s číselnou řadou 1 až 10
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
27
Fotogalerie

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

  • GitHub Copilot je pokročilý našeptávač pro programátory
  • Automat odhadne, co asi tak chcete a napíše klidně celou funkci
  • Pomůže pokročilým kodérům s otročinou a naučí začátečníky

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.

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.

5322ee04-3751-4860-9372-935d9d93abf5
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.

c8f097b9-e8f9-44f1-918d-8506c75748be
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

Pokračování 2 / 11

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:

3d6545d7-6118-4e96-9827-c1a4f52fb45e
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.

Reakce Copilota nemusí být vždy univerzální a ve vašem případě může vracet jiné řešení. Vždy záleží na celém kontextu

Pokračování 3 / 11

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: 

9e21fcdc-a2b2-4c85-86c4-f8346f0ad211
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.

Pokračování 4 / 11

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:

57c95bca-b9b3-4c38-9952-0b0a8834caa7
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.

6c514c8f-242a-4ef3-b291-fbbc92cca23a35657e01-d2e8-45c9-aedd-2db9b53ed9d8
Druhá varianta našeptaného kódu a výsledek v konzoli prohlížeče Chrome

Pokračování 5 / 11

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:

76183b04-6319-4d77-9299-a6267e4fece6
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.

3fd4046e-da36-4d5d-b9d3-5c2eddfea8e3c3cd6702-7800-4522-9e3a-2905fa241b6e
Píšeme do HTML elementů snadno a rychle

Pokračování 6 / 11

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:

7d6e82f7-7b65-40a8-adf9-6747b4083c3d
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.

05c526eb-a5a7-49d8-9384-94afb17c6b3656735247-adaf-4b08-a91f-36db65adae64
Copilot nám pomohl s kódem, a tak po načtení stránky můžeme vypsat, co je to kokos 

Pokračování 7 / 11

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:

729b3914-c93e-480d-b00d-33c311b40bb9
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.

42c9e520-37fe-40b7-b6e2-5e6d4e1de9bae3aa4247-a066-4182-98fa-52e3b33175ad
Výsledek v integrovaném linuxovém terminálu WSL

Pokračování 8 / 11

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:

250867d9-ebc6-4671-8274-db23889b26af
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.

01b7378c-f8db-4659-9e56-04659dfc0d7761aaadf1-f2da-474f-924a-4c2ba1f0d9ee
Vypsání kurzovního lístku ČNB a odhadu počasí v Brně pomocí mé neuronky Boženka

Pokračování 9 / 11

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: 

5a8ad094-e70a-46be-80d0-99936e99f315
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.

Pokračování 10 / 11

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:

4ca25b56-0b21-41b6-8a2c-cf3cfbef87d6
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. 

e8b27d2a-399d-4d18-9b02-07bb538c1d3624e4fad2-1963-404d-88bf-6925371bf2e9
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. 

Pokračování 11 / 11

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.

3c259521-3ae5-4987-8cd8-9ab7b6b3e1c7
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.

9355dfc6-fa19-41ab-95a5-942194acecd2c318522f-5e8a-42df-b8d9-fcb13cffc6e3
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.

Určitě si přečtěte

Články odjinud