Привет, меня зовут Лиза, я веб-разработчик в отделе маркетинга ispmanager. Поделюсь здесь своими впечатлениями от GPT-чата — нейросети, которая облегчает написание кода, пишет посты и выдаёт краткие ответы на любые вопросы.
![](https://habrastorage.org/getpro/habr/upload_files/60a/c49/2ba/60ac492bac329bcd38efa3fb95820d6d.png)
Суперсила GPT в том, что он остаётся в контексте запроса: задания можно дополнить или уточнить, не повторяя с нуля уже сказанное. Мне захотелось проверить, как чат справится с просьбой создать полноценную страницу с разметкой, стилями и скриптом, а не просто отдельную функцию. Сервис не работает в России, но в интернете уже достаточно статей, рассказывающих, как пробиться к популярной нейросети. Запросы лучше формулировать на английском языке, с ним GPT работает лучше всего. К тому же это поможет попрактиковаться в построении фраз на английском.
Для начала спросила в чате, с какими задачами веб-разработки мне может помочь GPT.
![Задала GPT вопрос, с какими задачами веб-разработки мне может помочь чат, и нейросеть перечислила целый ряд возможностей Задала GPT вопрос, с какими задачами веб-разработки мне может помочь чат, и нейросеть перечислила целый ряд возможностей](https://habrastorage.org/getpro/habr/upload_files/05c/ce7/c55/05cce7c556a3fdb97c6342dfd6ffcf2e.png)
GPT обещает помочь с дизайном и разработкой сайта с нуля, что обнадёживает. Возможно, даже слишком. Отладка, расширение функций, интеграция с API, оптимизация, SEO… А ещё чат расскажет, как делать всё правильно. Сейчас кто-то находчивый решит, что всех веб-разработчиков пора уволить и воспользоваться услугами нейросети: ей детей кормить не нужно, ну и ипотеку платить тоже, хм.
Посмотрела, какие уже запросы тестировали авторы статей и видео: были задачи написать конкретную функцию, воспользоваться API и вывести результат на веб-странице. Всё это по шагам, с постепенным усложнением, и всё выглядело очень гладко. Я решила попросить всё и сразу, а именно: веб-страницу со скриптами и стилями. Такая вот попытка на простых задачах заменить веб-разработчика нейросетью. Прямо как в статьях и видео с кликбейтными заголовками: «Программисты больше не нужны». Вот и проверим.
Джарвис, за работу
Создадим страницу с изображением и кнопкой запуска видео. По клику изображение и кнопка должны быть скрыты, а на их месте следует отобразить и запустить видео.
Сформулировала запрос на английском и отдала в работу моему новому бесплатному веб-разработчику — сейчас он быстренько сделает сайт в одну страничку. На первом шаге попросила создать изображение, поверх которого будет кнопка запуска видео.
![В ответ на запрос сгенерировать HTML-страницу получила разметку и стили — всё в одном файле В ответ на запрос сгенерировать HTML-страницу получила разметку и стили — всё в одном файле](https://habrastorage.org/getpro/habr/upload_files/0b4/e00/0a2/0b4e000a2d3bd773d6130ead7346d240.png)
И действительно, получаю HTML-страничку и стилизованную кнопку. Остаётся только добавить рядом файл изображения или попросить нейросеть подобрать какое-то конкретное.
Картинку решила найти сама, чтобы долго не объяснять, что именно мне нужно. Пока обычный поисковик для меня роднее и привычнее, чем чатик, но допускаю, что вскоре всё будет иначе. Возможно, через пару лет, нейросети и голосовые помощники будут давать пользователям ответы чаще привычной нам поисковой строки.
![Скопировала сгенерированный HTML-код в файл, добавила рядом с ним изображение и открыла в браузере. Вот что вышло Скопировала сгенерированный HTML-код в файл, добавила рядом с ним изображение и открыла в браузере. Вот что вышло](https://habrastorage.org/getpro/habr/upload_files/9f2/a41/94b/9f2a4194b0bf597553c69853739f321b.png)
Промежуточный результат вполне себе готов: есть и изображение, и кнопка с базовыми стилями, весь код собран в одном файле. Чуть позже попробую попросить разбить HTML, CSS и JS на отдельные файлы. Но сейчас перехожу ко второй итерации и прошу сделать так, чтобы по клику запускалось видео.
![На втором шаге прошу добавить видео и запускать его по клику на кнопку. GPT дополнил файл JavaScript функциями и подключил библиотеку YouTube Player API На втором шаге прошу добавить видео и запускать его по клику на кнопку. GPT дополнил файл JavaScript функциями и подключил библиотеку YouTube Player API](https://habrastorage.org/getpro/habr/upload_files/45c/a6c/80a/45ca6c80a5f6e7e5273f7d1367e60078.png)
GPT чат комментирует, что следует воспользоваться YouTube API, и дополняет код: тут и нужное видео прописано, и JavaScript на месте. Остаётся проверить, как это работает. И вот тут находчивый товарищ, который уволил веб-разработчиков, начал бы нервничать: произошло не то, чего ожидает человек, поставивший задачу, а то, что поняла нейросеть.
Изображение есть, кнопка запуска тоже. Но видео просто находится под картинкой, а не скрыто. И по клику на кнопку видео начинает проигрываться. Но это ведь не совсем то, что мне хотелось. Теперь придётся объяснять, что нужно исправить, или вручную править код так, чтобы задача выполнялась полностью.
![Результат на втором шаге. Видео расположено под изображением. Происходит запуск по клику на кнопку, но изображение при этом не скрывается Результат на втором шаге. Видео расположено под изображением. Происходит запуск по клику на кнопку, но изображение при этом не скрывается](https://habrastorage.org/getpro/habr/upload_files/144/072/f1b/144072f1b79e10e18487b062108edd1a.png)
Тут появляется чувство, что нейросеть — это такой вот энсин Дейта, который очень старается и мастерски пользуется поиском по stackoverflow, но так спешит выполнить задачу, что не очень в неё вникает.
Пробую объяснить, что изображение нужно скрывать, когда запускается видео, но GPT меня не понимает и скрывает изображение после загрузки страницы с помощью JavaScript. Честно сказать, тут меня начали бесить все разъяснения, и проще было поправить код самостоятельно и наконец добиться нужного результата.
![Моё лицо, когда попытки объяснить GPT что мне нужно, не приносят результата Моё лицо, когда попытки объяснить GPT что мне нужно, не приносят результата](https://habrastorage.org/getpro/habr/upload_files/127/31b/c8c/12731bc8c43d948e8c4e5e287708a4a7.jpg)
Оставалось проверить, поможет ли нейросеть разделить HTML, CSS и JavaScript по файлам. Тут задание выполнено на отлично. GPT прекрасно справляется с чётко поставленными задачами и вопросами: по одному действию или функции за раз.
![GPT разделил код страницы на три отдельных файла и прокомментировал, как связать их между собой GPT разделил код страницы на три отдельных файла и прокомментировал, как связать их между собой](https://habrastorage.org/getpro/habr/upload_files/405/644/175/4056441753e0e15a3bb1cd3900625d44.png)
Запись в бортовой журнал
Сервис GPT может стать руками, которые печатают код и дополняют его, но разум разработчика нужен, чтобы доработать и проверить код, верно сформулировать задание и продумать логику.
Стоит использовать GPT-чат в качестве ассистента. Но не ждите от него уровня Джарвиса. Этот инструмент не заменит профессионала, хотя и может уменьшить количество рутины. В любом случае такие новинки радуют мою гиковскую натуру, пусть таких штук будет больше! Мечтатель внутри меня надеется, что это приближает нас к миру, где люди занимаются творчеством, а машины решают обыденные задачи.