Před několika měsíci jsem v článku ukazoval, jak jsem si za velké pomoci ChatGPT vytvořil vlastní doplňky do prohlížeče. Tento článek bude podobný. Berte ho jako inspiraci, jak můžete jen se základy programování použít ChatGPT k vytvoření něčeho, co byste třeba bez AI vůbec nezvládli.
Napřed Python
Poslední dobou se bavím testováním optických snímačů tepu v hodinkách. Dostat ale z hodinek tabulku se sekundovými hodnotami tepové frekvence není vždy jednoduché. Musím jít cestami synchronizací a různých konverzí.
Jako třeba teď při prvním testu hodinek Amazfit. Aktivitu jsem synchronizací dostal do služby Strava, z ní uložil originální soubor TCX. To by mělo být prosté XML, chystal jsem se ho proto načíst… jenže to nešlo. Všechny prohlížeče a validátory hlásily chybu.
Tak jsem soubor předhodil ChatuGPT 4 a jeho schopnosti Advanced Data Analysis (dříve se jmenovala Code Interpreter). AI si navrhne kód v Pythonu, sama ho s předaným souborem spustí – a hlavně potom sama ladí, když se něco nedaří.
Podívejte se na tento obrázek, ve kterém je to skvěle vidět. Nahoře je můj první vstup s nahraným souborem a požadavkem, ať ho načte.
ChatGPT popsal, co je formát TCX a jak s ním pracovat. Připravil jednoduchý kód, spustil ho… a zjistil, že to nejde. Že XML bude muset upravit, aby ho dokázal načíst. Ani podruhé se to nepovedlo, navrhl další úpravu a potom v tabulce vypsal prvních pět záznamů.
Posléze jsem si nechal vypsat kód Pythonu, který ChatGPT použil pro načtení. Zkopíroval jsem si ho do souboru v Jupyter Notebook, řekl si ještě o formulaci kódu pro export do CSV a měl jsem připravený postup, jak data z hodinek Amazfit dostat do potřebného formátu.
Tady bych mohl skončit, už takhle mi ChatGPT skvěle pomohl. Za čtvrt hodiny jsem měl hotový nástroj, který jsem potřeboval.
A teď chci webovou aplikaci
Dostal jsem ale tip, že bych vlastně tento nástroj nemusel pouštět pomocí bloků kódu, ale že by to byla rovnou webová aplikace. Lokálně bych v prohlížeči otevřel stránku HTML s aplikací, načetl do ní soubor TCX a potom jen zkopíroval převedené hodnoty.
Zkusil jsem to a za pár desítek minut měl s mizernou znalostí JavaScriptu hotovo. Musím ale přiznat, že to vyžadovalo trochu větší úsilí. ChatGPT totiž nedokáže JavaScript sám spouštět a debugovat, jako to zvládá s Pythonem. Ladit jsem musel sám se soubory na svém disku a popisovat mu chování i chyby.
Bohužel nevyšel můj záměr, že bych vám celou konverzaci s ChatGPT nasdílel, abyste viděli všechny mé pokyny, jeho výstupy, proces ladění. Teď už vím, že pokud chat obsahuje vložený obrázek, funkce pro sdílení není k dispozici. Stručně to ale zkusím popsat.
Úvodní zadání vidíte v předchozím obrázku. Protože jsem věděl, že XML není standardní, nechtěl jsem ChatGPT pustit rovnou k věci. Napřed jsem mu zadal, aby pomocí svého Pythonu zjistil, co je v souboru špatně a jak to opravit. Proběhl stejný proces, jaký jsem popsal v úvodu.
Následně jsem ChatGPT popsal, co po něm přesně chci, jak se má aplikace chovat. Udělal analýzu a navrhl řešení:
V dalším kroku AI vytvořila základní kód HTML a javascriptové funkce. Zeptal jsem se ještě, jak s nimi mám na disku pracovat. ChatGPT vysvětlil, že HTML přijde do jednoho souboru, JavaScripty do druhého.
Vytvořil jsem soubory podle zadání, otevřel HTML, nahrál soubor TCX a zjistil, že se nic nestalo. Popsal jsem chování a prázdnou javascriptovou konzoli. ChatGPT navrhl úpravu kódu, aby do konzole vypisoval stavy:
Po dalším spuštění jsem zjistil, že v konzoli mám mimo jiné Trackpoints found: 0 a napadlo mě, že ChatGPT možná zapomněl, že nejde o standardní XML. Úvodní cvičení, kdy měl zjistit, jak ho načíst, si nespojil s druhou částí, s javascriptovou aplikací. Stačilo ho na to ale upozornit, odkázat se na úvod a hned nabídl upravený kód.
Znovu jsem načetl soubor TCX… a všechno fungovalo. Stránka ale byla jen taková základní, nepěkná. Chtěl jsem to zkusit udělat lépe.
Právě teď přišlo na řadu kouzlo, kvůli kterému jsem posléze nemohl celou konverzaci nasdílet. Nakreslil jsem si obrázek, jak bych chtěl, aby stránka vypadala. Obrázek jsem do ChatuGPT nahrál a přidal popis chování.
ChatGPT navrhl nový obsah souboru HTML, teď byl plný stylů CSS a jejich definicí, měl jsem také přidat další část kódu do souboru s JavaScripty. V další fázi jsem ještě požádal o drobné úpravy stylu ve smyslu velikosti písma a barev.
A tady je výsledek, stránka v prohlížeči po nahrání a zpracování mého špatného souboru TCX:
Bez AI bych to nedal
Nějaké základy JavaScriptu mám, v jeho variantě Apps Script jsem si už tabulkách Googlu nějaké drobnosti vytvořil. Tuto aplikaci bych ale sám rozhodně nezvládl připravit. S pomocí ChatuGPT ale mám během chvilky připravený nástroj, který dělá, co potřebuji, a k tomu i vypadá docela k světu.
Tohle bych zkrátka bez AI nedokázal. Nejspíš bych se do toho vůbec nepustil; a kdybych se přece jen odhodlal, bude mi to trvat spíš dny než desítky minut.