Изначальная идея
Да, про эту нейросеть сейчас слышно отовсюду, как она пишет текста песен, сдает экзамены, пишет куски кода, но я подумал, а сможет ли она сама целиком завершить проект под моим руководством?
Изначально я собирался просто подкинуть ей идею и наблюдать за созданием полноценного продукта, но всё оказалось немного сложнее и направлять её пришлось куда чаще чем мне бы того хотелось, но пока я этим занимался обнаружил несколько полезных функций которыми, возможно, буду пользоваться в работе.
Тема проекта
Я хотел чтобы тему придумала она сама, но её идеи были слишком расплывчаты и как подать их же ей - я не понимал, и попытки успехом не увенчались, поэтому я решил обойтись обычным портфолио вымышленной личности, но и личность, которую она могла успешно создать по моему запросу она не могла запомнить.
Начало работы
![О том, что должно содержать портфолио я решил спросить у неё же О том, что должно содержать портфолио я решил спросить у неё же](https://habrastorage.org/getpro/habr/upload_files/478/36f/a1f/47836fa1fe9b45b47c058f45e8ef9b9e.jpg)
Сначала я решил сгенерировать статичный HTML файл со всей информацией. С английским у меня пока ещё не всё хорошо, поэтому я воспользуюсь переводчиком.
Изначально я пытался создать личность, но попросив написать код, она просто начинала заполнять рандомные данные, забыв про личность которую сама же и создала, поэтому пришлось просто дать ей некоторые вводные данные о себе. Но я старался давать как можно меньше данных и больше задач требующих контекста, где потребуется упоминание меня и моей деятельности.
![Генерация прошла не без ошибок Генерация прошла не без ошибок](https://habrastorage.org/getpro/habr/upload_files/100/1b4/90e/1001b490e65f1fc6f9cdc465f713e47b.jpg)
Тут мы сталкиваемся с первой проблемой при попытке написать большой и длинный код, иногда она беспричинно зависает и перестает что-либо писать. Поэтому я попробовал попросить её продолжить код, она это сделала, но...
![...есть нюанс. ...есть нюанс.](https://habrastorage.org/getpro/habr/upload_files/300/6f9/89a/3006f989a3262fad66af009d9b97c795.jpg)
Небольшое наблюдение, почему-то если написать на русском "продолжи код", то шанс на то, что она продолжит писать именно код - выше, а на английском ломается и пишет код обычным текстом. (или мне просто так везло, результат всегда непредсказуем)
Переписываем проект на React
Я решил, что будет неинтересно просто попросить её сгенерировать HTML (с чем она отлично справилась) и поэтому решил переписать всё на фреймворке. Сначала я выбрал Vue.js, но с ним она справлялась с трудом, делала кучу ошибок, выбирала очень странные подходы которые мне даже не удавалось загуглить, поэтому я перешёл к реакту. И сходу попросил её переписать весь код самостоятельно. (предварительно я попросил её рассказать мне как создать проект с React и TypeScript, так что за создание проекта ответственна тоже она, я лишь исполнял инструкции, разбивал на файлы и т.д)
![Просто попроси её что-то переписать и она сразу это сделает Просто попроси её что-то переписать и она сразу это сделает](https://habrastorage.org/getpro/habr/upload_files/874/98a/a3d/87498aa3d8185ee2516e07d6fd8a0afb.jpg)
С вашего позволения я не буду вставлять в статью все скриншоты, переписывание всей структуры на React заняло 5-6 длинных скриншотов, но покажу интересные моменты ниже.
![Она вынесла все данные в state, получилось очень даже неплохо Она вынесла все данные в state, получилось очень даже неплохо](https://habrastorage.org/getpro/habr/upload_files/62d/7c4/ea5/62d7c4ea5e3e58090e4decd0f2a98cae.jpg)
![Изначально весь код был размещен в одном файле - App.tsx Изначально весь код был размещен в одном файле - App.tsx](https://habrastorage.org/getpro/habr/upload_files/744/9df/40e/7449df40e6fe10bc93a6e2ed83152d28.jpg)
Почему-то она не стала разбивать код на компоненты и сделала всё в один файл, что как бы лишает перенос из HTML в React какого-либо смысла, но я получил первый результат!
![Уже можно отправлять в продакшн Уже можно отправлять в продакшн](https://habrastorage.org/getpro/habr/upload_files/4cd/f37/4e2/4cdf374e26a1dabf335e4e0c7539f11b.png)
Начало долгого и мучительного процесса
Передо мной (или перед ней) стояла цель разбить файлы на компоненты, и в принципе, она поняла мою просьбу, но постоянно зависала в процессе, забывала какие-то детали, затирала данные которые ранее сама и написала. Например вот, она удалила данные из state и код начал выдавать ошибку:
![Причем она вместо данных зачем-то оставила комментарии Причем она вместо данных зачем-то оставила комментарии](https://habrastorage.org/getpro/habr/upload_files/bb6/c6d/b6c/bb6c6db6c77133ba62ddd14f1b09c6b3.jpg)
Я решил целиком скопировать ошибку и отдать ей, без объяснения, что надо с этим делать и, на удивление, она поняла в чем проблема и начала её исправлять.
![Объект она починила, но про данные забыла Объект она починила, но про данные забыла](https://habrastorage.org/getpro/habr/upload_files/7f2/49e/43c/7f249e43ce1035bb7bea3fc14dd81952.jpg)
Теперь надо опять попросить заполнить пустые данные
![Ура! Данные восстановлены. Ура! Данные восстановлены.](https://habrastorage.org/getpro/habr/upload_files/22e/cef/c44/22ecefc448613a9a80a28246343d51c6.jpg)
В целом, кое как, очень сильно стараясь и постоянно зависая, она разбила код на несколько файлов, которым сама и дала названия:
App.tsx
AboutMe.tsx
Projects.tsx
Resume.tsx
Reviews.tsx
Contact.tsx
По какой-то причине Header и Footer она выносить в отдельные файлы отказалась, но да и ладно. Теперь мне было интересно возможно ли заставить её написать стили самостоятельно. По началу я дал лишь наводку:
![Она понимает, что такое BEM Она понимает, что такое BEM](https://habrastorage.org/getpro/habr/upload_files/f51/6fe/691/f516fe6916f90ce02e3e9f8456cf8eba.jpg)
По какой-то причине она забыла, что существуют другие файлы и пришлось прописывать подобный код почти для каждого блока и создавать файлы стилей для них. В некоторых она прописала классы, но не прописала CSS, из-за чего выдавало ошибку о не найденных классах. Пока что я оставил это без внимания и продолжил дальше. Хотел чтобы она прописала конкретный CSS, а не только классы.
![Успех, из моих пожеланий она придумала цвета Успех, из моих пожеланий она придумала цвета](https://habrastorage.org/getpro/habr/upload_files/9dc/103/b35/9dc103b35176cbcc4cdd8d0f2b4ed7ff.jpg)
Она положила глобальные стили в App.module.css который не был подключен, попросив её подключить файл (add styles connection to the App), она, внезапно, прописала классы хедеру, навбару и футеру. Чтож, идей как заставить писать её CSS у меня почти не осталось, мне хотелось чтобы она стилизовала страницу, а не создавала пустые классы, и вдруг она очень хорошо отреагировала на следующий запрос:
![В .nav_link она решила написать SCSS, почему бы и нет, правда? В .nav_link она решила написать SCSS, почему бы и нет, правда?](https://habrastorage.org/getpro/habr/upload_files/834/ccd/41b/834ccd41bf20ebca7551cd1f4ae41af7.jpg)
В принципе, она прописала почти всем блокам padding-и, где-то окрасила текст и больше ничего делать не стала, а я решил перестать её мучать. Давайте посмотрим, что наш интеллект смог написать почти за часа два:
![Готов в продакшн! Готов в продакшн!](https://habrastorage.org/getpro/habr/upload_files/d63/7bd/ceb/d637bdceb77014f2b480450e08114dc7.jpg)
Итоги
Конечно, сгенерировать реальный проект с помощью нейросети нельзя (пока что), но можно попробовать. Некоторые её решения мне очень нравятся, нравится как она умеет генерировать статические данные и работать с ними, те же JSON-ки я уже генерировал для своих личных целей. Делал через неё простенькие автотесты, чуть подкорректировать и готовы в продакшн. Да и то, что она запоминает то, что она делала пару запросов назад - поражает.
Но пока это всё далеко чтобы полностью заменить программистов, максимум, оно может упросить жизнь разработчику с решением рутинных задач (и это очень круто!)
Ссылка на репозиторий и демо проекта