Написаният от ChatGPT код на JavaScript може наистина да ви шокира

Оригиналът е на Mate Marschalko, който с помощта на нашумелия ChatGPT създава модален прозорец с помощта на JavaScript библиотеката React за изграждане на потребителски интерфейс. 

Да си припомним накратко, че ChatGPT е чатбот, базиран на мощен изкуствен интелект, създаден от компанията OpenAI, който работи в реално време в диалогов режим и можа да отговаря на практика на всякакви въпроси и да изпълнява най-различни заявки. ChatGPT използва новия езиков модел GPT-3.5, който е значително подобрена версия на предишния GPT-3.

ChatGPT бе представен на 30-ти ноември 2022 година и оттогава всички интернет потребители могат безплатно да го тестват и използват. Възможностите на този ИИ продължават да ни учудват – той може да пише есета, съчинения и дори стихове, които сякаш са написани от човек, може да отговаря на въпроси от всички сфери на науката на ниво научен работник, но по всичко личи, че ChatGPT е най-силен и най-безпогрешен в програмирането, където и до днес продължава да учудва младшите, старшите и професионалните програмисти със своите наистина невероятни възможности.

---

Въведение

Хвалбите относно ChatGPT звучат твърде добре, за да са истина, затова нека да го накараме да напише малко JavaScript код и за нас. Искам да видя, дали този ИИ може да се справи със задачите, които ежедневно изпълнявам като front-end разработчик.

Нека да го пробваме това нещо и да видим дали този прехвален ИИ е чак пък толкова добър!

Създаване на модален прозорец

Да започнем с нещо по-лесно: да накараме ChatGPT  да създаде 2 компонента: модален прозорец и бутон за промяна на неговата видимост:

Заявка: Да се създаде функционален компонент на React с бутон и неговото име да е ModalOpen. След това да бъде добавен друг компонент, наречен Modal, с елемент div в него.

Тази сравнително елементарна задача бе изпълнена от бота абсолютно безупречно! Обърнете внимание на съдържанието на HTML елементите, което показва, че ботът знае точно какво прави. Обърнете внимание и на забележката по-долу: самите компоненти не са достатъчни за реализиране на необходимата функционалност на модалния прозорец.

Състоянието на модала и обработката на събитията

Да накараме бота да добави необходимия функционал за отварянето на модалния прозорец при кликване върху бутона:

Заявка: Модифицирай тези компоненти по такъв начин, че кликването на бутона да отваря модалния прозорец.

Ботът и с тази задача се справи великолепно! Той добави всички необходими състояния и обработки на събитията. Сега кликването върху бутона води до рендирането на модалния прозорец.

ChatGPT дори подробно обясни своите действия:

Ботът: В компонента ModalOpen добавих състоянието isOpen, като използвах хука useState. Това състояние се използва за да  се разбере дали модалният елемент е отворен или затворен. Когато се  кликне върху бутона, се извиква функцията setIsOpen, която установява isOpen на true, което води до показване на модалния прозорец. В компонента Modal добавих реквизит с име isOpen, който се предава от родителския компонент. Ако isOpen е false, компонентът връща null, т.е. не се визуализира. Ако isOpen е true, компонентът визуализира съдържанието на модалния прозорец…

Това може да бъде един  наистина отличен начин за преподаване на React на начинаещи. По този начин ботът не само прави това, което сме поискали от него, но и обяснява подробно какво и защо е направил. Трябва да се отбележи, че по  всяко време можем да му зададем уточняващи въпроси и допълнителни заявки по темата.

Добавяне на локално хранилище

Нека да накараме бота ChatGPT  да модифицира кода по такъв начин, че състоянието на модалния прозорец да се записва в локално хранилище (Local Storage):

Заявка: модифицирай ParentComponent по такъв начин, че състоянието на isOpen да се записва и съхранява в localStorage.

Ботът правилно преобразува булевото значение в низ и обяснява защо е трябвало да използва useEffect в кода:

Ботът: Добавихме два хука useEffect в ParentComponent:

1. Първият useEffect се използва за извличането значението на isOpen от локалното хранилище при неговото първоначално рендиране. Полученото значение се подава на функцията setIsOpen за обновяването състоянието на компонента.
2. Вторият useEffect се използва за записа на текущото значение на isOpen в локалното хранилище при каквато и да било промяна на това значение. По този начин значението на isOpen се запазва и правилно се съхранява дори при обновяване на уеб страницата или затваряне на браузъра от страна на потребителя…

Това изобщо не е копиране-и-вмъкване на код от документациите. Забележете, че в обясненията фигурират наименованията на променливите от кода, което съществено улеснява разбирането на случващото се, на това, което кодът върши.

Стилистика и анимация

Да видим как този ИИ ще се справи със стайлинга и анимацията:

Заявка: Добави CSS преходи в компонента Modal, за да започне да се появява и да изчезва при натискане на бутона.

Ботът учудващо добре се справи и с тази задача, бих казал дори превъзходно. Неговото обяснение изглежда по следния начин:

Ботът: В компонента Modal добавих класа modal към елемента div. Зададох два CSS блока със стилове за класа modal: единият за затворен модален прозорец, а другия – за отворен. В затворено състояние модалът използва стиловете visibility: hidden и opacity: 0. Това означава. че модалът ще бъде невидим и напълно прозрачен. Има и преход, който определя анимирането на този обект при промяна на неговото състояние. Отвореният модален прозорец използва стиловете visibility: visible и opacity: 1…

Няма да продължаваме до края, а само ще отбележим, че обяснението е доста дълго и много подробно.

Първата грешка

Забелязахте ли грешката в предишния пример? Както можем да се убедим, ChatGPT правилно настройва всички класове и променливи, но по някакви причини не е добавил логиката за превключването на класа .open, който е необходим, за може да влезе в сила CSS и за да работи анимацията.

ОК, да дадем още един шанс на този бот:

Заявка: като за начало не е зле, но нещо не достига. Направи така, че класът open в Modal да се добавя и премахва на базата на значението isOpen.

Плашещо добре се справя, просто великолепно.

TypeScript

Нека да проверим дали този ИИ може да работи с TypeScript: даваме му списък с реквизити и го караме да ги типизира:

Перфектно! Изобщо няма грешки, но и аз дадох съвсем ясни инструкции:

Заявка: направи така, че компонентът Modal  да приема следните реквизити:

• firstName
• lastName
• profession
• profilePhoto

Определи типовете TypeScript за реквизитите на компонента, като всички значения трябва да бъдат стрингове. isOpen трябва да приема булево значение.

А дали ChatGPT разбира значенията на променливите?

Заявка: модифицирай кода на компонента Modal по такъв начин, че да може да приема масивът от обекти hobbies:

{ nameOfHobby: string; experienceInYears: number; activelyDoing: boolean;
}

Недей да забравяш да обновиш определението на типовете от гледна точка на новия обект. Събери масива в JSX вид и изведи значенията на обектите във вид на таблица. Задай заглавия на колонките със значения на тази таблица.

Искаше ми се да проверя, дали ботът ще може правилно да определи типовете на този обект и което е по-интересно – дали ще може да се справи с таблиците и заглавията на техните колони, като аз тези заглавия изобщо не съм задавал.

С типовете явно няма проблеми, но как са нещата с таблиците?

Видяхте ли? Ботът самостоятелно добави заглавията Hobby, Experience (years) и Currently Doing (Хоби, Опит (в години) и С какво се занимава в момента). Той е разбрал. че не може просто да изведе булевото значение на activelyDoing и го е преобразувал в низ  – Yes или No.

Наистина впечатляващо, нали?

Импортиране и използване на външни програмни библиотеки

Хайде да проверим дали този бот ще може да сортира масива hobbies по азбучен ред. Изрично му разрешаваме да използва външни библиотеки:

Заявка: сортирай масива hobbies по азбучен ред на колоната nameOfHobby. Можеш да използваш външна библиотека

Отново перфектно. Ботът реши да използва библиотеката lodash, импортира я без проблеми и успешно реализира заявената от нас логика.

Последна проверка

Нека да проверим, дали ботът ще успее да преобразува инструкциите за визуализирането на UI в CSS. Да го накараме и да представи обект с фиктивни данни с JSON формат, които бихме могли да използваме за тестването на компонентите:

Заявка: Създай CSS за всичките тези компоненти, за да имат приличен и съвременен вид с по-тъмни и приглушени сини цветове и фонове. Оживи тези елементи с използването на сенки и други подобни. Сформирай фиктивни JSON данни, които могат да се използват за тестване на компонентите. JSON трябва да включва минимум 5 души, като всеки от тях трябва да има минимум 2 хобита.

Според мен ботът много добре се справи и с тази задача. Той знае, че свойството position на модалния прозорец трябва да има значение fixed. Не е забравил и за черния фон, който остава под модалния прозорец.

Нека да видим какво още е добавил в CSS:

Той е поставил текста в модалния прозорец в средата и е използвал сенки, точно както му казах.

Нека да погледнем и генерираните от бота фиктивни данни:

Просто нямам думи. Имам впечатлението, че ChatGPT напълно разбира какво се използва във всичките тези компоненти и с каква цел.

Финални думи

С всички сили се опитвах да провокирам работата на този бот, но той изпълняваше инструкциите ми почти перфектно и изглежда разбираше основното значение на променливи като „хобита“, тъй като проактивно добавяше допълнителни блокове код, за които не трябваше да питам  – неща, които бих очаквал само от човек!

ChatGPT безупречно имплементира редица компоненти на React, прихващаше събитията, обработваше localStorage, справи се със стилизирането, анимацията, сортирането на данни с външните библиотеки и типовете TypeScript.

Лично аз не се притеснявам за бъдещето си на уеб разработчик (поне засега), тъй като задачите, с които ботът се справи са опростени и тривиални. Все още трябва да сте опитен разработчик и жив човек, който да взема сложни творчески решения относно архитектурата и реализацията на целия код. Без тези неща е невъзможно от началото до края да се разработи дори едно доста опростено приложение.

Само че сложните творчески решения са предшествани и съпроводени от скучна рутина: писане на елементарен JavaScript код, вмъкване на сходни функции, работа с CSS стилове и т.н.

Към днешен ден ми се струва, че ChatGPT е най-подходящ като разширение за редактора за програмисти VSCode. Да, вместо да пиша досаден и повтарящ се код, мога да дам инструкции на изкуствения интелект, който да свърши тази рутинна работа. Това би ми икономисало много време – кодът, който пиша за около 15 минути, с помощта на ChatGPT разширението бих писал само за няколко секунди.

Благодаря за вниманието и happy coding!