Пишем веб-приложение вместе с ChatGPT 4 и Stable Diffusion
Пример готового приложения
Всем привет! Ни для кого не секрет, что ChatGPT, получившая развитие в прошлом году, уже активно внедряется в обиход разработчиков. Во время новогодних каникул я решил испытать новинку, и попробовать разработать совместно с ботом небольшое веб-приложение на базе Angular 17, учитывая, что сам фреймворк я до этого практически не изучал. Что из этого вышло, читайте далее.
1. Киллер-фича ChatGPT 4
На написание данной статьи меня вдохновил следующий момент: возможность ChatGPT4 выдавать дизайн по небольшому скетчу. Изначально я ещё не знал, как будет выглядеть моё приложение, но нацарапал небольшой набросок желаемого на бумаге:
Мой «шарж» на веб-страничку. Время начертания: 30 секунд.
Далее я скормил его чат-боту, после чего он превратил эту наскальную живопись в следующую страницу:
В общем-то, близко к оригинальной идее
Забавно, что надписи были заменены на иконки, тем не менее, бот прекрасно уловил суть и сам предложил стек: использовать React + Tailwind CSS. Однако, я транслировал данный код в TypeScript для Angular, т.к. собирался писать на нём. Начало было положено.
2. Идея для приложения
На днях мне на глаза попался бумажный каталог фотоаппаратуры. Подобные каталоги начали выпускаться сотни лет назад, в момент появления бумажной почты. И закончили своё существование примерно лет 10–15 назад, так как перекочевали в интернет-пространство (хотя, возможно, некоторые ещё выпускаются). Вот пример подобного каталога, который нашёлся у меня, и датировался 2014 годом:
В моём же случае, я решил сделать каталог товаров воображаемого предприятия, торгующего различной сантехнической и водопроводной оснасткой.
3. Генерируем тестовые данные
Для генерации тестовых данных ранее мне приходилось искать различные картинки и фото при помощи поисковых систем. Теперь же я попросил ChatGPT предоставить мне, для начала, 32 различных предмета, связанных с водопроводной тематикой.
Далее я использовал Stable Diffusion (UI Automatic1111) для генерации папки с изображениями для данных предметов. Можно также использовать встроенный генератор (DALL-E) в ChatGPT, но этот вариант показался мне забавнее. Для генерации использовано расширение «Dynamic Prompts». Оно позволяет выдать набор картинок по заданному списку. Результат:
Воображаемые товары для воображаемого магазина
Забавно, что сантехнический трос (Plumber’s Snake) нейросеть отобразила в виде стальной змеи. Да и остальные предметы, скорее, напоминают гравицапу из фильма «Кин-дза-дза». Однако, примеры выглядят правдоподобно, красочно, поэтому я решил использовать их в дизайне.
4. Архитектура приложения
Архитектура задуманного мною приложения проста до безобразия, поэтому я схематически в вольной форме изобразил её на листе бумаги. У нас будет несколько страниц с переходами.
Я не архитектор, кость креативная
Приложение урезано — не имеет системы регистрации/авторизации, только лишь сам каталог, корзину и форму для отправки заказа. Сделано это ввиду того, что целью является не конкретное решение, а демонстрация процесса разработки такого приложения.
Как конечный продукт работы нашей программы мы должны получить накладную: кому из покупателей, сколько и чего требуется отгрузить из предлагаемых товаров.
5. Создаём страницы приложения и модели
В качестве дизайнера было решено положиться целиком и полностью на ChatGPT. Делается это подобным запросом в чат:
Покажи мне фрагмент кода, чтобы создать сетку с товарами из магазина. На HTML и CSS.
После чего собираем полученные кусочки. Я проделал данную процедуру для всех требуемых страниц. Либо можно использовать скетчи, как в пункте 1 статьи, если хочется порисовать.
Далее я запросил два data transfer object: для предмета из каталога и для заказа. Сеть выдала подходящие шаблоны, которые остаётся только скопировать и вставить:
Пример модели Dto, которую может предложить нам ChatGPT
6. Дизайн и презентация
Обычно при веб-дизайне сначала верстаются определённые отображения, затем на их основе пишется код. В нашем случае, мы тоже создадим файл с дизайном в Figma. Однако, мы сделаем наоборот: предложенный дизайн преобразуем в кадры. Делается это с помощью плагина html.to.design.
Плагин захватывает снапшоты веб-страницы из памяти отладчика, после чего сам расставляет элементы. Таким образом, готовый дизайн нашего будущего приложения выглядит примерно так:
Пример дизайна на основе ранее представленной архитектуры приложения
Это первоначальный вариант дизайна. В ходе разработки некоторые элементы были расширены или переработаны. В итоге мы получаем .fig файл проекта.
7. Создаём тестовый каталог товаров
В данном случае нам, опять же, ассистирует ChatGPT. Я предложил каждому товару присвоить случайную цену от 1 до 100. После чего получил Excel CSV файл с товарами. Для тестов я преобразовал его в json-объект, чтобы имитировать ответ, поступивший с сервера в результате запроса GET /items:
Подготовка набора данных бизнес-логики (каталог с товарами), из Excel в JSON
Делается это на основании модели dto, предоставленного ботом ранее.
8. Пишем приложение Angular
Как известно, в последних версиях Angular (16, 17) модули были преобразованы в отдельные компоненты. А ChatGPT рекомендует код для старого формата. Поэтому в данном случае возникли некоторые затруднения, однако, решились они подгугливанием некоторых моментов в документации Angular. В целом, данный этап занял у меня больше всего времени, однако, значительно меньше по сравнению с работой в обычном поисковике. Вот пример того, как это происходило. Начал я с создания проекта, генерации шаблонов компонентов и сервисов. Это можно сделать и без ChatGPT:
Создаём проект, компоненты и сервисы Angular
После чего перешёл, непосредственно, к реализации сервисов и логики приложения:
Окей, робот, покажи мне код для поиска предмета в массиве по его ID
В целом, когда я закончил разработку, в архиве чата остались следующие запросы от меня:
Запросы, которые я делал в ходе разработки
Как можно видеть, я уточнял некоторые моменты касательно отображения элементов. А также запрашивал шаблоны или заготовки для компонентов, которые мне нужны.
Я могу сравнить работу ChatGPT, скорее, с ассистентом — неким «Доктором Ватсоном». Он не знает контекст, однако, обладает эрудицией, и способен если не решить мою проблему сразу, то натолкнуть на мысль о том, как можно это сделать.
Запрос: создай табличку «корзина пуста». Ниже рендер этой самой таблички.
Также мне был предоставлен шаблон для накладной клиента, выполненный на обычных
Форма для осмотра заказа
9. Просим приложение Express для проверки сервисов
Для того, чтобы проверить своё приложение, я сделал запрос кода Node JS. Выглядел он так: «Create a simple Node JS Express app that handles any upcoming POST requests and logs their body to the console»
После чего мне был предоставлен готовый проект. Я запустил сервер (предварительно попросив ChatGPT добавить туда поддержку CORS), после чего мои заказы стали отображаться в консоли сервера:
Описание заказа, которое приходит от клиентского приложения
Таким образом, обработав этот запрос на стороне Back-End мы можем наладить поставки товаров. На основе модели от ChatGPT нам приходит массив с товарами, их количеством, и данные клиента (конечно, imageUrl включать в этот запрос не нужно, но я не стал делать отдельную модель для заказанных предметов ради экономии времени).
10. Выводы
Приложение, которое получилось сверстать с помощью ChatGPT 4, хоть и не идеально в плане дизайна, однако прекрасно справляется с возложенными на него задачами. В дополнение я русифицировал приложение, с этим не возникло никаких проблем.
Я могу заключить, что использование бота при вёрстке действительно сокращает время написания кода, позволяет избавить процесс от мест, когда приходится сидеть 3–4 часа в поисках одной какой-то функции из неизвестного ранее фреймворка.
Исходный код получившегося приложения можете посмотреть у меня на github:
Ссылка на репозиторий: https://github.com/ritsudo/gpt-generated-shop
Писал Kekovsky (ritsudo), 4 января 2024 года специально для habr.com
