Как мы создали приложение для генерации кода и интерфейсов при помощи ChatGPT
Генератор UI по описанию на естественном языке с ИИ под капотом — за два часа: как мы это сделали, зачем и с какими проблемами столкнулись — обо всем по порядку в нашем материале.
Всем привет! Сегодня рассказываем про наш эксперимент по созданию приложения для генерации интерфейсов на XAML по описанию на естественном языке. Ответственным за чудеса у нас выступает ChatGPT, а отрисовка интерфейса происходит прямо в браузере благодаря помощи WebAssembly.
Согласно задумке автора, пользователь задает в приложении запрос, например “Создай форму регистрации с кнопкой подтверждения”, добавляет какие ему угодно подробности типа «Сделай строки “логин”, “пароль”, подтверждение” и большую фиолетовую кнопку”», нажимает “Enter”, ждет некоторое время и получает результат на экране (в браузере) — слева код, а справа его итоговую визуализацию, соответствующую заданному промпту.
Спойлер: на создание инструмента ушло в общей сложности два часа, эксперимент удался, приложение работает и свою задачу выполняет. А вот зачем это нужно, как оно устроено и почему такую штуку не выпустишь “в народ”, сейчас подробно объясним.
Зачем мы это сделали?
В процессе работы часто возникает необходимость создавать примеры приложений на XAML и отправлять их клиентам для демонстрации, — говорит Яков Лило, технический директор компании Hello World! Technologies (HWdTech), автор и исполнитель проекта, — Как разработчику XAML-фреймворка, мне часто необходимо демонстрировать отдельные компоненты для тестов. И если у меня, допустим, возник вопрос, работает ли DataGrid, я могу накодить необходимую форму самостоятельно или использовать это приложение для создания нужного мне примера, просто задав запрос “Сгенерируй форму с такими-то условиями”. Самому, при условии, если я не помню синтаксис DataGrid Form component, пришлось бы потратить условный час на описание формы на XAML, а здесь я могу получить нужный мне код и интерфейс за считанные секунды, это значительно ускоряет и упрощает всю работу.
Для справки: XAML (англ. eXtensible Application Markup Language) — расширяемый язык разметки для приложений (произносится [замл] или [зэмл]) — основанный на XML язык разметки для декларативного программирования приложений, разработанный Microsoft. (Спасибо, Вики!)
Изначально процесс создания примеров приложений занимал много времени: писать код, верстать все вручную достаточно долго, особенно когда нужно создать много разных вариантов. Как и следовало ожидать, в скором времени возникла идея автоматизации. По словам Якова, он решил собрать прототип, который на основе его описаний генерировал бы примеры кода на XAML, а также отображал как этот код будет выглядеть в конечном виде (для демонстрации пользователю) .
Для генерации небольшого фрагмента кода мы запускаем приложение, связываемся с ChatGPT и предоставляем ему некоторые исходные данные в виде обычного текста. Фактически мы вызываем API-метод, но передаем запрос так, как если бы мы писали его в чате. Спустя короткое время генерируется и отображается результат, в который при необходимости можно внести коррективы, отправляя дополнительные комментарии.
Разработка интерфейсов — одна из областей программирования, которая может первой получить наибольшую выгоду от развития ChatGPT и подобных технологий. Эти модели пока не способны реализовать сложную бэкенд-логику, однако создание UI вполне реально
Собственно говоря, в нашем случае важно было не только генерировать код, но и показывать, как он будет выглядеть визуально — вот вам и UI.
Это интересная задача, потому что мы фактически показываем XAML-код в браузере без взаимодействия с сервером (кроме отправки запроса к ChatGPT) . Весь интерфейс должен генерироваться на стороне клиента, а для визуализации XAML-кода в браузере необходимы специализированные библиотеки, которых на JavaScript вообще-то нет. Поэтому для рендеринга кода в браузере Яков использовал WebAssembly, который запускает .NET-движок, способный обрабатывать XAML-код.
В реальности мы получаем XAML-код от чат-бота, проверяем, корректен ли он = можем ли мы его отобразить, а если нет — автоматически уходит повторный запрос. Весь этот процесс с дополнительными запросами происходит “под капотом” и несколько замедляет работу приложения. Также дополнительное время уходит на то, чтобы модель GPT-4 обработала запрос, она не очень быстрая. Есть еще некоторые факторы, замедляющие работу, о которых мы расскажем далее. Но важно то, что это в любом случае несравнимо быстрее, чем написание кода разработчиком вручную.
Как мы это сделали?
Разговор о том, как это работает, мы уже начали, теперь давайте немного углубимся в процесс создания самого приложения.
Как вы уже поняли, основной процесс — генерация XAML-кода — происходит на стороне ChatGPT. Было ясно, что для этой задачи нет смысла тренировать модель самостоятельно, вместо этого нужно воспользоваться имеющимися, они явно лучше обучены в целом — и на XAML в частности. Я пробовал более простые и более дешевые модели, но они не дали необходимого эффекта. Внятные результаты были получены с использованием ChatGPT-4, хотя даже здесь потребовалось некоторое дополнительное обучение.
Фактически, когда приложение запускается, каждый раз при старте оно начинает с того, что дообучает нашу модель — объясняет ChatGPT, что мы от него хотим, причем не просто делает основной запрос с первоначальным контекстом, но еще и приводит примеры того, как именно чат-бот должен нашу задачу выполнять. От этого зависит многое.
После первичного запроса, я дополнительно обучаю модель. Я отправляю ей примеры запрос+ответ в формате: “Если промпт такой, то я ожидаю от тебя такой результат, — рассказывает Яков о процессе дообучения, - После добавления в код приложения таких примеров, количество случаев, когда мне приходится дважды обращаться к модели вместо одного раза, значительно уменьшилось. Идея с дообучением модели была не совсем очевидной, но не сложной. Сначала я пытался использовать только один инпут, но это не давало желаемого итога. Мысль о том, что после отправки запросов модель можно дополнительно тренировать на примерах, пришла мне не сразу, но она значительно улучшила и сами результаты и скорость их получения.
Чем помог WebAssembly?
Одно из ключевых преимуществ этого приложения заключается в том, что все наши автоматизированные процессы протекают незаметно для пользователя, а конечный результат — вот он, демонстрируется прямо в браузере. Чтобы такое провернуть, компиляция, визуализация и запуск интерфейса на XAML тоже должны осуществляться в браузере на клиенте, как будто у нас тут обычное веб-приложение. А это не так, поэтому пришлось немного покреативить. Мы используем WebAssembly для компиляции нашего кода, что является большим и интересным вызовом.
Классический стек, на котором построено 90% веб-приложений, состоит из HTML, CSS и JavaScript для логики. JS является интерпретируемым языком программирования — с ним все просто и понятно, а иногда (как в случае с этой задачей) у нас возникает необходимость запустить в браузере бинарный код. Для этого браузеры предлагают поддержку WebAssembly — бинарного формата инструкций для выполнения кода внутри них. Это открывает перед нами широкие возможности. Если на JavaScript нет какой-то функции или возможности, которая есть на других языках, таких как C#, C++, Rust и т.д., то, благодаря тому, что браузеры поддерживают WebAssembly и мы можем запускать в них обычные компьютерные приложения, мы можем легко нужные функции добавить.
В нашем случае, WebAssembly запускает урезанную версию фреймворка Mono, поверх которого запускается .NET IL-код и библиотеки для рендера XAML. И это позволяет нам, собственно, выполнить конечную задачу приложения — не только получить код от ChatGPT, но и показать его в виде фрагмента интерфейса.
«Для меня, как разработчика, запуск кода на C# или XAML в браузере является обычной задачей. Однако для тех, кто работает только с веб-технологиями, это может быть интересной задачей "со звездочкой"», — комментирует Яков.
С какими трудностями мы столкнулись?
Все создание приложения заняло у меня два часа, но это потому, что все части были мне хорошо знакомы, так как я уже знал, как они работают по отдельности”, — рассказывает автор проекта, — Но были некоторые трудности, которые потребовали доработки. Помимо необходимости дополнительно обучать модель, была еще проблема с ограничением количества токенов. В сентябре в обучающем режиме ChatGPT быстро сообщил мне, что лимит токенов был исчерпан. А это напрямую влияет на качество работы приложения.
Еще одна важная техническая проблема лежит на поверхности, но решить ее при этом совершенно невозможно. Периодически приложение генерирует не то, что мы хотим. Это происходит потому, что так работает ChatGPT и никуда от этого не деться, даже с применением дообучения. Мы можем сколько угодно корректировать результат нашими повторными запросами, но вот логику приложения контролировать по понятным причинам не выйдет.
“Попросил сгенерировать форму регистрации пользователя. Не сработало. Читаю ответ под капотом — "Certainly! Please provide me with the description of the user registration form you would like to create”*, — приводит пример Яков.
(*”Конечно! Пожалуйста, предоставьте мне описание формы регистрации пользователя, которую вы хотите создать” — англ.). То есть, ChatGPT вместо того, чтобы просто выполнить запрос, на этот раз решил вступить с нами в диалог. И такое бывает.
В общем, с одной стороны, мы, конечно, можем описать задачу на естественном языке и очень быстро получить результат. И это очень круто! Но с другой — когда мы программируем самостоятельно, мы всегда четко понимаем, что, как и почему мы получим на выходе. При работе с ChatGPT о таком контроле речи не идет. Вот как наш эксперт описывает процесс работы с приложением:
Это похоже на метод проб и ошибок: я не могу заранее спланировать свои действия и получить желаемый результат. Мне приходится просто пробовать разные варианты, не зная, сколько попыток потребуется — пять, десять или сто. Кроме того, если мне удается получить хороший вариант интерфейса, я не могу повторить его, воспользовавшись тем же запросом снова. Что бы я не сделал, я не получу одинаковые результаты от одного и того же запроса дважды.
Другая проблема заключалась в том, что мы долго пытались объяснить модели, что нужно возвращать только код, без текста. Простым человеческим языком она эту просьбу не понимала, постоянно выдавая код с комментариями к нему, причем иногда с совершенно неуместными. Здесь также потребовалось дополнительное обучение формата “Вот смотри, горе луковое, я задаю запрос — а в ответ получаю чистый XAML код, без текста”. Это дополнительно описано в самом первом месседже, где мы объясняем, что вообще хотим от ChatGPT добиться, а затем еще мы подкрепляем это примерами.
«В конце концов, мне надоело его "перевоспитывать" и я просто использовал регулярное выражение для удаления лишнего текста из кода», — пояснил автор.
Почему не “в продакшен”?
Тут само напрашивается “Какая полезная штука, вот бы мне такую!”, но увы — сделать подобное приложение для широкой публике на данном этапе — сложно, неоправданно дорого, ну а нам еще и совершенно нет резона этим заниматься. “Это больше похоже на интересный эксперимент, полезное усовершенствование для рабочих процессов, нежели на готовое решение для продакшена”, — говорит Яков. Что же касается идеи “Запилю-ка я такую штуку для себя!”, часть сложностей мы для вас уже описали — и сейчас заострим внимание еще на нескольких важных моментах.
То, как работает ChatGPT в принципе, в своей основе, не позволяет создать приложение, которое генерировало бы код и интерфейсы сразу правильно и красиво, без “метода проб и ошибок” и прочих особенностей. Очевидно, что код нужно генерировать по другим правилам, отличным от тех, которые используют LLM для генерации текстов. И, возможно, создатели чат-ботов в скором времени каким-то образом разделят эти процессы, изменят какие-то настройки для более эффективной генерации кода, но пока этого не произошло — что есть, с тем и работаем (спасибо, что уже такое есть, вообще-то, грех придираться!). Это как бы сразу ограничивает нас в том, чтобы создать хороший пользовательский опыт, хотя такие приложения как tldraw, которые генерируют интерфейсы из скетчей, вполне спокойно игнорируют эту проблему. А вот следующая сложность не обошла стороной и их юзеров. Потому что…
Да, да…API key для ChatGPT — это не дешевое удовольствие. А именно с его помощью приложения и делают запросы к чат-боту. В результате буквально каждый запрос можно “посчитать” с точки зрения финансов: например, только в процессе написания этой статьи на генерацию примеров “улетело” два бакса.
В целом, все достаточно просто: в том же tldraw вы вводите свой ключ — и начинаете работать. Но нужно помнить о материальной стороне вопроса, потому что процесс генерации чего бы то ни было неимоверно затягивает, а сделать такое приложение качественным и при этом бесплатным в текущих реалиях невозможно.
Прежде чем начать что-либо делать, мне нужно было разобраться с API и выяснить, сколько денег будет тратиться при использовании такого приложения. У меня выходило около 10 центов за один экран, то есть за генерацию одного примера. Можно сказать, что это дорого, но на самом деле все относительно. По сравнению с почасовой оплатой разработчика в 50 долларов, это не так уж много.
В общем, мы вас, конечно же, не отговариваем, но, в любом случае, если вы используете инструменты на основе моделей GPT, вам необходимо просчитать заранее экономическую сторону вопроса — кто и каким образом будет платить за запросы. Это не “пропащее дело”, потому что ценность продукта может значительно перекрыть затраты на него. Но нужно продумать варианты, например, как привлечь пользователей и дать им попробовать продукт, как в дальнейшем простроить эту работу.
Наш генератор кода и UI мы задеплоили на GitHub, так что все желающие, у кого имеется API key для ChatGPT могут его сами протестировать, введя свой ключ (так же как на tldraw) . Вот вам ссылка. Если вам интересно посмотреть, как это устроено и работает (так сказать, ознакомиться с результатами эксперимента вживую) или, внезапно, вам есть куда применить генератор интерфейсов на XAML — велкам!
Важно то, что несмотря на трудности, очевидна глобальная выгода от использования нейросетей для генерации пользовательских интерфейсов, причем именно для создания приложений, которые эти UI будут создавать автоматически. Если мы сможем отдать задачу по “рисованию” интерфейса конечному пользователю, это сильно улучшит и облегчит взаимодействие команд и заказчиков на проектах. Вот, что говорит наш эксперт по этому поводу:
Вопрос взаимодействия команд разработчиков с клиентами с точки зрения интерфейсов является одним из самых острых, к созданию пользовательского интерфейса заказчики всегда относятся наиболее скрупулезно и трепетно. Если предложить инструмент, с помощью которого клиент сможет самостоятельно настраивать интерфейс, добавлять и удалять элементы, оценивать и изменять внешний вид приложения до тех пор, пока оно ему не понравится, а только потом уже передавать готовый проект в разработку — это значительно упростит и улучшит работу на проектах.
Хочется верить, что наш эксперимент и подобные приложения — только первые шаги, а в дальнейшем мы получим возможность взглянуть на создание UI совершенно по-новому и более эффективно.
Есть ли будущее у SaaS сервисов на основе этой технологии? Есть ли уже такие онлайн-сервисы?
Абсолютно точно да. Один из моих самых любимых сервисов - https://v0.dev/ . У меня есть доступ к бэтте. Честно, очень прикольно и впечатляет. Но пока что прям вот до продакшена далековато. Нужны доработки.
очень крутой эксперимент) а как вы считаете, подобные решения убьют рынок джунов? потому что кажется, что вы сейчас через ГПТ чат решали в пару кликов джуновские задачи, и теперь это делается быстрее и с меньшими косяками с помощью ИИ.
Тут вы, конечно, правы, что ChatGPT легко может заменить задачи джунов. Но я за них не сильно переживаю. Все-таки компании нанимают джунов, чтобы вырастить за год-два разработчиков под себя. А задачи им дают чтобы они развивались, а не чтобы прям какую-то задачу бизнеса закрывали. Ну придется другие задачи для джунов придумывать :) Чтоб из ChatGTP не копировали.
В ближайшие 10 лет я не думаю что рынок разработки как-то фундаментально это изменится. Вот когда ChatGPT сможет заменить опытных разрабов, вот тогда уже все пострадают
Яше привет )) работали когда то вместе в тамтэке
Привет, Максим :)
Дорогие читатели! Если у вас вдруг совершенно случайно по неведомой причине не проигрываются видео с демонстрацией работы приложения, можно их посмотреть на нашем канале: https://www.youtube.com/@hwdtech7604/videos (последние 4 мини-видео - об этом)