Tento týden jsem se rozhodl udělat další nástroj pomocí ChatGPT. Doposud to byly velmi jednoduché věci, kde nebylo moc prostoru pro kreativitu. Teď jsem chtěl zkusit něco trochu komplikovanější, kde se bude muset předvést.
Chtěl jsem dvě textová pole (textarea), kam zadáte texty a skript porovná jednotlivé řádky. Pak vypíše oba texty a barevně odliší rozdíly. Rozdílné znaky žlutě a celé řádky červeně.
Samozřejmě jsem mu nedal kompletní zadávání. Rozhodl jsem se jít na to postupně.
Vytvoř 2 textarea vedle sebe. První je vlevo a druhá vpravo. Přidej tlačítko, které po zmáčknutí porovná vložený text do levé textarea s pravou textarea a zvýrazní řádky s rozdíly.
Výsledek nefungoval. Do textarea vkládal tag <mark>, pro který si v CSS nadefinoval barevné zvýraznění. Samozřejmě jsem věděl kde je problém, ale chtěl jsem zkusit jestli na to přijde.
Skript nefunguje protože po spuštění řádek nezvýrazní, ale vloží tam řetězec mark
Místo pokusu o opravdu se snažil vytvořit variace skriptu, kde různě nahrazoval řetězec. Zkoušel jsem mu opakovaně psát “Skript nefunguje” jestli na to nepřijde, ale místo toho už hotový skript rozbil (tlačítko přestalo fungovat.)
Po zhruba pěti pokusech, jsem mu napsal kde má chybu.
Stále to nefunguje. Myslím si, že chyba je v tom, že v textarea nefunguje podbarvení.
Skript kompletně předělal. Sám pod textarea vložil nový div, kde zobrazoval rozdíl a vše šlo. Takže nastal čas posunout se dál.
Uprav skript tak, aby výsledek srovnání se objevil jako div pod textearea. Pod textarea 1 bude div vstupu textarea 1. Pod textarea 2 bude div se zobrazením rozdílů.
Na první pohled vše fungovalo. Takže jsem přešel k další části.
Uprav skript tak, aby se červenou barvou zobrazovali úplně rozdílné řádky a žlutou jen rozdílné části řetězců na řádku.
A tady se opravdu zasekl. Nedokázal skript (logiku vyhodnocování) správně poskládat. Ale stejně jsem zkoušel jestli na to přijde. Řešili jsem napříkald:
- Pokud chybí jeden znak na začátku řádku, tak je celý řádek považovaný za jiný.
- Nechci použít řešení s Js-diff library
- Chtěl to vzdát!?
Když už se to táhlo, tak jsem se mu rozhodl pomoct.
Podbarvení znaků funguje, ale podbarvení odlišných řádků ne. Test rozdílných řádků by měl mít ve skriptu přednost.
Tady mě překvapilo jakou velkou chybu udělal. Přidal sice podmínky, ale rozhodl se, že celý rozdílný řádek je pouze pokud je undefined. Netuším jak na tohle přišel.
Skript nefunguje. Vždy vyhodnocuje pouze rozdíl řádků.
Tady jsme se trochu posunuli, ale při generování nastala možnost, že mohl být podbarvený jak celý řádek tak i znaky, což je nesmysl.
Skript obsahuje chybu. Pokud obsahuje rozdílný znak tak je podbarven i celý řádek. Uprav skript tak, aby v případě, že bude rozdílný jen řetězec, tak se celý řádek nepodbarví
A tady už se totálně zamotal. Takže jsem mu zkusil napovědět.
Uprav skript tak, aby se nejdříve provedl test na zcela odlišný řádek. Pouze pokud zcela odlišný není, tak proveď test na jednotlivé znaky.
Nicméně nedařilo se mu skript přegenerovat do funkční podoby. Navíc po několika přegenerování tam vrátil zase podmínku, že řádek je jiný jen když je undefined. Zkusil jsem mu výslovně napsat, že to nefunguje.
Podmínka if (rightLines[index] === undefined) nefunguje
No zkoušel to různě, tak jsem mu musel napsat co přesně tam může nastat.
Tento řádek je špatně: if (rightLines[index] === undefined || rightLines[index] === “”) {
Skript nepočítá s variantou že tam může být zcela odlišný řetězec
Nicméně se do toho zamotal, zkoušel šílené varianty. Rozhodl jsem se, že mu napíšu jak to má přesně udělat. Musel jsem se ale vrátit o pár zadání výše a přepsat je novým zadáním. Skript byl už moc “rozvrtaný”
Pak jsme ladili detaily.
Teď ještě opravit výpis v div right-diff, kde je výsledek z první textarea místo druhé.
Přidej pokud někdo klikne na tlačítko, tak se nejdříve vymaže obsah left-diff a right-diff
A myslíte že to fungovalo?
Když jsem skript prošel, tak jsem narazil na pár chyb. Ty jsem opravil. Odmazal jsem kompletně variantu s červeným podbarvením, protože to bylo prostě šílené. Část jsem pak dopsal sám. Celkově jsem nad tím strávil více času, než kdybych to dělal sám. Výsledný Online nástroj pro porovnání dvou textů.
Spokojený s tím moc nejsem :)
Kde byla chyba?
Pokud chcete s ChatGPT programovat, musíte sami umět všechno co mu zadáváte a musíte už dopředu vědět jak to má fungovat. Vědět kompletní logiku celého skriptu.
Když dělám něco většího, tak si nejdříve napíšu osnovu pomocí komentářů. Pak postupně píšu pod ty komentáře funkce, podmínky, cykly atd. Vše průběžně kontroluji s testovacími hodnotami.
Myslím si, že tento přístup jsem měl zvolit i tady. Udělat si to nejdříve pro sebe a pak mu to takto podat. Při žádostech o modifikaci by pak měnil jen ty části o kterých se bavíme.
Závěr
ChatGPT beru jako nástroj, který mi má ušetřit čas, jen musí člověk přijít na to jak. Aktuálně mi pomáhá při psaní článků a popravdě celkem hezky pomohl i s tématem lithiového trhu, kde suploval wikipedii a zpracoval mi nějaká čísla. Těch možností využití bude hodně.