Най-вече исках да се съсредоточа върху това GPT-4 да изгради уеб приложението, но хубавото предимство на наличието на езиков модел е, че той също може да генерира улики и отговори. Дадох му няколко примерни отговора на кръстословица, попитах го дали разбира, след което го помолих да генерира още:

Аз съм основател на „компания за удостоверяване“, поради което избирам тази тема, но GPT-4 беше доста страхотен в повечето теми, които му дадох. След това го помолих за още 30 улики.

Страхотни ли бяха всички улики и отговори?

…не, но бях впечатлен от това колко добре се справи, като се има предвид колко кратко подкана го дадох.

Взех отговорите, предадох ги в python скрипт, за да ги поставя върху мрежа 13x13, преобразувах го в JSON и завърших с нещо, което изглежда така:

{
    'cols': 13,
    'rows': 13,
    'answers': [{
        'col': 1,
        'row': 1,
        'down_or_across': 'across',
        'clue': 'The process of ensuring that the person is who they claim to be.',
        'answer': 'verification',
        'number': 1
    }, {
        'col': 5,
        'row': 1,
        'down_or_across': 'down',
        'clue': "A method of authentication that involves scanning an individual's unique physical feature.",
        'answer': 'fingerprint',
        'number': 3
    }, ...
}

И тогава имах всичко необходимо, за да започна да създавам приложението си.

Генериране на приложение за кръстословица с GPT-4

Опит 1

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

… пъзел JSON …

Решетката трябва да показва празни клетки за интервали, където се намира отговор, и трябва да показва черен квадрат, ако няма такъв отговор.

Бихте ли могли да генерирате React кода за това уеб приложение?

Както ще видите, тази подкана можеше да е по-добра, но GPT-4 работи с нея.

Включително CSS:

И изглеждаше добре!

Започнах да питам за все повече и повече функции:

Бихте ли добавили списък с улики, разделени на секции за Напречно/Надолу вляво на пъзела?

Бихте ли променили CSS, така че уликите и кръстословицата да заемат еднакво място?

Можете ли да направите така, че кръстословицата винаги да е квадрат?

Страхотен! Сега нека го направим интерактивен. Искам потребителят да може да кликва върху клетките и да въвежда своите отговори. Когато щракнат веднъж върху клетка, по подразбиране ще се въвежда напречно. Когато щракнат втори път, трябва да се превключи към писане надолу. След това трябва да се подчертае уликата за отговора, който те активно попълват.

И това бързо доведе до много сложност в единствения компонент, който актуализираше:

Което води до грешки:

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

Рефакторинг

Знаете ли онова усещане, което изпитвате като разработчик, когато един клас просто става наистина дълъг и тромав? Всякакви опити да се закърпи само го влошава? Така се почувствах. Като последно усилие се опитах да го накарам да преработи кода:

но просто натрупах повече сложност към вече сложно приложение.

И в крайна сметка реших да започна отначало.

Сигурен ли си?

Най-интригуващото взаимодействие за мен беше това:

Трябва да се признае, че този въпрос е роден от разочарование повече от всичко друго. Не му казах, че е грешно (за съжаление беше), просто попитах дали е сигурно и то се поправи.

Опит 2

Реших, че проблемът с първия ми опит е, че подканата ми не беше достатъчно добра. GPT-4 е страхотен, но не е четец на мисли. Този път дадох всички подробности отпред:

…
- Приложението трябва да има две колони. Отляво са уликите, отдясно е квадратна решетка за кръстословицата.
- За мрежата, ако има буква в квадрат, квадратът трябва да е бял и трябва да бъде нещо, което потребителят може да избере.
- Ако в квадрат няма буква, той трябва да е черен и потребителят не трябва да може да го избере.
- Когато потребителят избере квадрат, той трябва да бъде маркиран. След това потребителят може да въведе и той автоматично ще премине към следващата клетка в мрежата. По подразбиране потребителят ще въвежда напречно, но може да натисне интервал, за да въведе надолу.
- Когато потребителят е в дадена клетка, уликата, съответстваща на тази клетка, трябва да бъде маркирана. Това включва не само началната клетка, но всяка клетка, която има буква за тази следа.
- Трябва да използвате Next.js / React.
- Трябва да предоставите всички компоненти и CSS.

Като се има предвид тази подкана, той реши да създаде компоненти за различните части на приложението.

И за съжаление… това просто никога не проработи.

Опитах се да му дам по-силни съвети за това какво не е наред, което помогна:

Но когато се зареди, CSS беше грешен. Опитах няколко пъти, но в крайна сметка се отказах и реших да използвам различен подход.

Опит 3

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

Дадох му същата подкана като последния път, но с този ред в края

Ще изградим това итеративно. Бихте ли могли да започнете, като ми кажете различните компоненти, които искате да изградите?

Започнахме просто като изградихме оформлението:

Направих малко насоки и тестове и напреднахме:

Ако направи грешка, успях да я коригирам, преди приложението да стане твърде сложно:

И нещата отново изглеждаха добре!

Непоправими грешки

Докато разговорът продължаваше, за GPT-4 беше по-трудно да коригира проблемите. Предполагам, че това е комбинация от това, че приложението просто става все по-сложно, предизвикателствата, свързани с голям контекстен прозорец, и това, че аз съм лош в подсказването му.

За един конкретен пример, в този блок код:

забрави да премине setTypingDirection като опора. Споменах, че setTypingDirection беше недефиниран и тръгна по грешен път.

В този момент разбрах, че за мен е значително по-голямо предизвикателство да измисля подканата, която кара GPT-4 да коригира кода, вместо просто да го коригирам сам. Сам закачих опората и продължих.

Обратно на пистата

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

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

Но в крайна сметка, с малко моя помощ, приложението е готово. Можете да го тествате тук.

Какво научих?

Работата заедно побеждава пълното доверие

Когато за първи път започнах, исках GPT-4 просто да върши цялата ми работа. Моят работен процес беше честно:

  • Помолете го да добави функция
  • Превключете разделите, за да направите нещо друго
  • Върнете се, тествайте новия код
  • Ако проработи, поискайте следващото нещо. В противен случай докладвайте за грешката и се надявайте да я поправи

Което беше добре, но имаше моменти, когато се опитвах да разбера каква подкана мога да му дам, за да го накарам да поправи грешката, която виждах сам.

Към края го третирах по-скоро като сесия за програмиране по двойки. Няма нищо лошо в това просто да коригирате проблеми от негово име. Все още бях по-ефективен с него до себе си, отколкото бих бил сам.

Не е перфектно, но все пак е много, много добро

Фактът, че успях да получа предимно работеща кръстословица на React, като просто… поисках такава, все още е невероятно впечатляващ. Не, не е перфектно. Не бих искал да предава код без надзор, особено в по-голяма кодова база, но все пак ми спести доста време тук.

Естеството на работата ми беше друго

В оптимистична светлина, аз бях супер зареден разработчик, живеещ в бъдещето с AI, който може да вземе моите идеи и да ги превърне в истински работещ код. В песимистична светлина бях досаден среден мениджър за разработчик на AI и съществувах най-вече, за да тествам продукта и да актуализирам изискванията под него.

Кое беше? Може би по малко и от двете.