Как мы создали приложение для генерации кода и интерфейсов при помощи ChatGPT

Генератор UI по описанию на естественном языке с ИИ под капотом — за два часа: как мы это сделали, зачем и с какими проблемами столкнулись — обо всем по порядку в нашем материале.

Всем привет! Сегодня рассказываем про наш эксперимент по созданию приложения для генерации интерфейсов на XAML по описанию на естественном языке. Ответственным за чудеса у нас выступает ChatGPT, а отрисовка интерфейса происходит прямо в браузере благодаря помощи WebAssembly.

Согласно задумке автора, пользователь задает в приложении запрос, например “Создай форму регистрации с кнопкой подтверждения”, добавляет какие ему угодно подробности типа «Сделай строки “логин”, “пароль”, подтверждение” и большую фиолетовую кнопку”», нажимает “Enter”, ждет некоторое время и получает результат на экране (в браузере) — слева код, а справа его итоговую визуализацию, соответствующую заданному промпту.

Спойлер: на создание инструмента ушло в общей сложности два часа, эксперимент удался, приложение работает и свою задачу выполняет. А вот зачем это нужно, как оно устроено и почему такую штуку не выпустишь “в народ”, сейчас подробно объясним.

Изначально процесс создания примеров приложений занимал много времени: писать код, верстать все вручную достаточно долго, особенно когда нужно создать много разных вариантов. Как и следовало ожидать, в скором времени возникла идея автоматизации. По словам Якова, он решил собрать прототип, который на основе его описаний генерировал бы примеры кода на XAML, а также отображал как этот код будет выглядеть в конечном виде (для демонстрации пользователю) .

Для генерации небольшого фрагмента кода мы запускаем приложение, связываемся с ChatGPT и предоставляем ему некоторые исходные данные в виде обычного текста. Фактически мы вызываем API-метод, но передаем запрос так, как если бы мы писали его в чате. Спустя короткое время генерируется и отображается результат, в который при необходимости можно внести коррективы, отправляя дополнительные комментарии.

Собственно говоря, в нашем случае важно было не только генерировать код, но и показывать, как он будет выглядеть визуально — вот вам и UI.

Это интересная задача, потому что мы фактически показываем XAML-код в браузере без взаимодействия с сервером (кроме отправки запроса к ChatGPT) . Весь интерфейс должен генерироваться на стороне клиента, а для визуализации XAML-кода в браузере необходимы специализированные библиотеки, которых на JavaScript вообще-то нет. Поэтому для рендеринга кода в браузере Яков использовал WebAssembly, который запускает .NET-движок, способный обрабатывать XAML-код.

В реальности мы получаем XAML-код от чат-бота, проверяем, корректен ли он = можем ли мы его отобразить, а если нет — автоматически уходит повторный запрос. Весь этот процесс с дополнительными запросами происходит “под капотом” и несколько замедляет работу приложения. Также дополнительное время уходит на то, чтобы модель GPT-4 обработала запрос, она не очень быстрая. Есть еще некоторые факторы, замедляющие работу, о которых мы расскажем далее. Но важно то, что это в любом случае несравнимо быстрее, чем написание кода разработчиком вручную.

Разговор о том, как это работает, мы уже начали, теперь давайте немного углубимся в процесс создания самого приложения.

Фактически, когда приложение запускается, каждый раз при старте оно начинает с того, что дообучает нашу модель — объясняет ChatGPT, что мы от него хотим, причем не просто делает основной запрос с первоначальным контекстом, но еще и приводит примеры того, как именно чат-бот должен нашу задачу выполнять. От этого зависит многое.

Одно из ключевых преимуществ этого приложения заключается в том, что все наши автоматизированные процессы протекают незаметно для пользователя, а конечный результат — вот он, демонстрируется прямо в браузере. Чтобы такое провернуть, компиляция, визуализация и запуск интерфейса на XAML тоже должны осуществляться в браузере на клиенте, как будто у нас тут обычное веб-приложение. А это не так, поэтому пришлось немного покреативить. Мы используем WebAssembly для компиляции нашего кода, что является большим и интересным вызовом.

Классический стек, на котором построено 90% веб-приложений, состоит из HTML, CSS и JavaScript для логики. JS является интерпретируемым языком программирования — с ним все просто и понятно, а иногда (как в случае с этой задачей) у нас возникает необходимость запустить в браузере бинарный код. Для этого браузеры предлагают поддержку WebAssembly — бинарного формата инструкций для выполнения кода внутри них. Это открывает перед нами широкие возможности. Если на JavaScript нет какой-то функции или возможности, которая есть на других языках, таких как C#, C++, Rust и т.д., то, благодаря тому, что браузеры поддерживают WebAssembly и мы можем запускать в них обычные компьютерные приложения, мы можем легко нужные функции добавить.

В нашем случае, WebAssembly запускает урезанную версию фреймворка Mono, поверх которого запускается .NET IL-код и библиотеки для рендера XAML. И это позволяет нам, собственно, выполнить конечную задачу приложения — не только получить код от ChatGPT, но и показать его в виде фрагмента интерфейса.

«Для меня, как разработчика, запуск кода на C# или XAML в браузере является обычной задачей. Однако для тех, кто работает только с веб-технологиями, это может быть интересной задачей "со звездочкой"», — комментирует Яков.

Еще одна важная техническая проблема лежит на поверхности, но решить ее при этом совершенно невозможно. Периодически приложение генерирует не то, что мы хотим. Это происходит потому, что так работает 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 вы вводите свой ключ — и начинаете работать. Но нужно помнить о материальной стороне вопроса, потому что процесс генерации чего бы то ни было неимоверно затягивает, а сделать такое приложение качественным и при этом бесплатным в текущих реалиях невозможно.

В общем, мы вас, конечно же, не отговариваем, но, в любом случае, если вы используете инструменты на основе моделей GPT, вам необходимо просчитать заранее экономическую сторону вопроса — кто и каким образом будет платить за запросы. Это не “пропащее дело”, потому что ценность продукта может значительно перекрыть затраты на него. Но нужно продумать варианты, например, как привлечь пользователей и дать им попробовать продукт, как в дальнейшем простроить эту работу.

Наш генератор кода и UI мы задеплоили на GitHub, так что все желающие, у кого имеется API key для ChatGPT могут его сами протестировать, введя свой ключ (так же как на tldraw) . Вот вам ссылка. Если вам интересно посмотреть, как это устроено и работает (так сказать, ознакомиться с результатами эксперимента вживую) или, внезапно, вам есть куда применить генератор интерфейсов на XAML — велкам!

Важно то, что несмотря на трудности, очевидна глобальная выгода от использования нейросетей для генерации пользовательских интерфейсов, причем именно для создания приложений, которые эти UI будут создавать автоматически. Если мы сможем отдать задачу по “рисованию” интерфейса конечному пользователю, это сильно улучшит и облегчит взаимодействие команд и заказчиков на проектах. Вот, что говорит наш эксперт по этому поводу:

Хочется верить, что наш эксперимент и подобные приложения — только первые шаги, а в дальнейшем мы получим возможность взглянуть на создание UI совершенно по-новому и более эффективно.