Создание ИИ-приложений в Google AI Studio

Не так давно в Google AI Studio появилась возможность создавать ИИ-приложения на базе искусственного интеллекта Gemini Pro. Покажу как как это можно делать.

Доступ к Build App

В AI Studio это вкладка «Build», которая выглядит так:

Что такое «приложения» с точки зрения AI Studio?

Это важный момент, поскольку слово «приложение» здесь не совсем точное. Это скорее конструктор, который использует предопределённые модули, основанные на базе нейросети. Приложения будут написаны на React (или Angular - при выборе этой опции) и работать на сервере Node.JS.

Для пользователя всё немного проще: это просто страничка в браузере, а гугл берёт на себя всю её поддержку. Таким образом для программистов есть возможность получить исходный код приложения и запускать как им вздумается, а для простых людей — всё работает автоматом в браузере.

Можно сказать, что это vibe-кодинг, поскольку управление происходит через текстовый чат.

Первое знакомство

Чтобы лучше понять что может делать App AI Studio (название условное, чтобы отличать от обычного чата), перейдите на страницу создания приложения и нажмите кнопку «I'm feeling lucky». Обратите внимание, что в поле запроса появится не только текст, но и модули, которые будут нужны для построения приложения.

Понажимайте кнопку «I'm feeling lucky» несколько раз и почитайте какие вообще можно создавать приложения.

Если у вас трудности с английским, то переведите промпт на свой язык, так будет проще ориентироваться.

Возможности App AI Studio достаточно крутые, даже больше, чем в обычном чате. Кроме того приложения по умолчанию используют модель Gemini Pro, а это очень мощная модель.

После того, как вы написали промпт, следует нажать кнопку «Build»: начнется создание приложения.

Ваше первое приложение

Я покажу как всё делать на демо-приложении, основанное по промпте:

Создайте «Виртуального фотографа еды» для владельцев ресторанов. Они загружают свое текстовое меню, и приложение создает реалистичные высококачественные фотографии блюд для каждого блюда. Включите переключатели стилей, чтобы пользователь мог выбирать между эстетикой фотографий «Деревенский/Темный», «Яркий/Современный» или «Социальные сети» (сверху вниз).

Также выберите модули:

• Nano banana powered app
• Generate images with a prompt

После того, как вы нажали кнопку «Build», начнётся создание приложения. Вам нужно дождаться когда AI Studio выполнит всю работу и в правом окне предпросмотра появится рабочее приложение.

То есть начальный код приложения AI Studio создаёт полностью сам. Он сам принимает решение как он будет выглядеть и какой у него будет код. Последующие шаги будут направлены на то, чтобы улучшить или изменить то, что вам нужно.

Возможно, что ваше приложение будет работать немного по другому, поскольку каждое новое приложение ИИ создаёт именно как новое, а не под кальку. Но сейчас важно показать просто общий подход к созданию приложений.

Проверка работы приложения

Давайте введём для теста приложения такое меню:

макароны с яичницей, кетчупом и майонезом
чай зеленый
хлеб поджаренный в тостере
зефир

После запуска (кнопка «Generate Photos») мы видим, что картинки создаются, но при скроллинге картинки скрываются под формой ввода.

Нужно это исправить, поэтому пишем промпт в левом окне чата:

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

AI Studio начинает думать и вносит нужные исправления, после чего окно предпросмотра обновляется.

Всё замечательно работает, теперь внесём изменения.

Вносим изменения

Например сделаем переключалку языка формы.

Сделай вверху переключалку языка приложения: украинский/русский/английский. Без флагов, просто цветные метки UK, RU, EN.

После выполнения промпта появляются рабочие метки языков:

Подобным образом можно вносить любые другие изменения. Лучше всего просить делать одно изменение за один промпт пока приложение не будет полностью рабочим. Иногда ИИ ошибается и вносит не совсем то, что вы хотите. Поэтому лучше сразу указать что нужно исправить, а уже потом вносить новые изменения.

Тестирование

Программисты знают, что тестирование — важный этап разработки программ и здесь также нужно сразу проверять корректность работы приложения. Чем быстрее и точнее вы будете его проверять, тем ИИ будет проще вносить правки.

Например в нашем приложении есть возможность скачать созданные изображения. Но при сохранении получаются файлы такого вида _____________________.jpg вместо Кружка с зеленым чаем.jpg. Это происходит из-за кириллицы, которая некорректно обрабатывается.

Совет. Лучше сразу указывать на каком языке (языках) будет работать приложение.

Укажем на эту ошибку в промпте:

Я тестирую приложение и заметил, что когда я хочу сохранить изображение, то его имя файла получается в таком виде `_____________________.jpg`. Скорее всего это из-за кодирования не английских символов. Исправь так, чтобы имена были нормальными `Кружка с зеленым чаем.jpg`. Если символ в имени некорректный, например `:` или `/`, то просто удали его.

ИИ прекрасно понимает в чём дело и исправляет этот недочёт. После обновления, всё работает как и нужно.

Подсказки ИИ

Обратите внимание на то, что ИИ сам предлагает идеи для доработки (подсказки «Suggestions»). Если вы «застряли» и не знаете что ещё можно сделать, обратите внимание на эти подсказки. В некоторых случаях можно всё приложение создать просто выбирая эти подсказки.

Ограничения на использование ИИ

Иногда вы будете сталкиваться с ограничениями на лимиты запросов к нейросети. Это особенно касается генерации изображений через Nano Banana. В этом случае будут возникать ошибки с соответствующим сообщением.

В общем-то ИИ достаточно умный и по умолчанию сразу использует перехват таких ошибок. Просто вы должны знать, что часто это не проблема приложения, а именно ограничения используемой модели: Gemini Pro, хоть и доступна всем, но в бесплатном тарифе имеет ограничения. Обычно они не заметны при личном использовании, но могут «вылезать» при слишком частых запросах.

Модули для приложения

Все модули рассчитаны на использование ИИ и имеют разницу в «специализации».

Чтобы понять какие модули нужны для приложения, нужен некоторый опыт. Хорошим вариантом будет использование кнопки «I'm feeling lucky», чтобы посмотреть примеры использования в промптах.

Исходный код приложения

Для программистов есть возможность скачать исходный код.

Это будет zip-архив с файлами для React и Node.JS. Поэтому можно просто посмотреть как всё устроено, а можно использовать файлы уже отдельно от AI Studio.

Если делать своё отдельное приложение, то оно будет работать на сервере Node. Хотя если строго, то сервер может быть любой, но тогда нужно будет переписать серверную часть.

Есть ли в этом смысл я не знаю, потому что приложение будет привязано к личному API-ключу, а он будет иметь свои ограничения — для публики это явно не годится.

Шаринг приложения

Более простой способ поделиться приложением — это получить его ссылку прямо в AI Studio

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

Когда пользователь откроет это приложение, то он будет видеть только его без вашего чата и прочих деталей. При желании он может его доработать под свои задачи.

Работа с кодом

Для программистов есть ещё одна «фишка» — это просмотр изменений как diff-файлы. После каждого изменения, появляется ссылка View diff.

После чего можно посмотреть изменения в привычном для нас виде:

Это часто бывает полезно для точного указания ИИ что нужно исправить.

Например у меня была ситуация, когда ИИ никак не мог выставить дефолтный размер шрифта 16px вместо своего 14px. Оказалось что всё дело в стилях Tailwind CSS, который был собран для 14px, а потом в стилях были множественные rem-единицы. ИИ просто запутался, поэтому я попросил его добавить примитивное html {font-size: 16px}.

То есть, хоть AI Studio хорошо работает с кодом, он может спотыкаться на «ровном месте». Можно сколько угодно злиться и его ругать, но часто проще и продуктивней указать свой вариант исправления.

Галерея приложений

В AI Studio есть вкладка «Your Apps», которая показывает все ваши приложения, а также есть ссылка на другие публичные приложения (или вкладка «Gallery»).

Там вы найдете много готовых приложений, например есть совершенно неожиданные, как «Gemini 95».

Там же внизу есть готовые «каркасы» для новых приложений. Например если нужно создавать изображения, можно использовать каркас «Imagen». Каркас «React example» позволяет понять как работают приложения AI Studio. В этом случае нужно использовать режим «Code», где можно редактировать код. Он будет автоматически сохранён и выполнен при переключение в режим «Preview».

Итого

На мой взгляд, создание ИИ-приложений в Google AI Studio реализовано на высоком уровне. Да, там могут быть тонкости и «затыки», но в целом создать приложение совсем просто. Я думаю, что такие приложения очень хорошо подходят для каких-то специализированных задач.

Если в обычном чате мы вначале должны выстроить какой-то диалог, чтобы ИИ понял задачу, то с помощью ИИ-приложения это делается несколько проще и удобней. Поскольку есть возможность использовать разные опции (чекбоксы, выпадающие селекты, кнопки), то управление будет достаточно простым. Например, когда мне нужна озвучка, то я просто выбираю нужный голос. Или например использую селект на размер ответа: «Кратко», «Оптимизировано» и «Развернуто».

Поэтому, если у вас есть идеи использования ИИ, то с помощью Google AI Studio вы сможете их быстро реализовать. 😎