Как интегрировать редактирование изображений с помощью Gemini 2.0 Flash в ваше веб-приложение
Компания Google выпустила Gemini 2.0 Flash со встроенными возможностями редактирования изображений, и это одна из самых революционных моделей, выпущенных Google в этом году. Я немного необъективен, потому что меня очень интересуют модели изображений с тех пор, как я запустил свое веб-приложение для генерации изображений.
Известно, что технологический гигант плохо разбирается в документации по API, поэтому последние несколько дней я испытывал трудности с интеграцией Gemini 2.0 Flash в Flux Labs. К счастью, Логан Килпатрик, ведущий инженер по продуктам Google AI Studio, недавно опубликовал обновленную документацию, которая значительно облегчает работу.
Так что если вы планируете создавать приложения с нуля или интегрировать Gemini 2.0 Flash в существующее веб-приложение, то сейчас я расскажу вам, как это сделать.
Телеграм-бот SYNTX предоставляет доступ к более чем 30 ИИ-инструментам. Без ВПН, оплата любой картой, запросы на любом языке, пробуйте бесплатно! В боте есть GPTo1, Gemini, Claude, Grok, Llama, Perplexity, DeepSeek, MidJourney, DALL-E 3, Flux, Ideogram и Recraft, LUMA, Runway, Kling, Sora, Pika, Hailuo AI (Minimax), Suno, синхронизатор губ, Редактор с 12 различными ИИ-инструментами для ретуши фото. ☝Это только часть функций, доступных в SYNTX!
Что нового в Gemini 2.0 Flash?
Gemini 2.0 Flash от Google теперь поддерживает редактирование изображений с помощью промптов на естественном языке. В отличие от предыдущих мультимодальных систем, которые использовали отдельные модели (например, объединяли языковую модель с Imagen 3 для генерации изображений), Gemini 2.0 Flash обрабатывает и текст, и изображения в рамках одной единой системы.
Такой единый подход устраняет необходимость в межмодельном взаимодействии и значительно сокращает время ожидания. Кроме того, теперь она поддерживает добавление длинного текста непосредственно на изображения.
Если вы еще не опробовали новые возможности Gemini 2.0 по редактированию изображений, я очень советую сначала поэкспериментировать с ними в Google AI Studio, прежде чем создавать приложение-обертку или интегрировать его в существующее веб-приложение.
Вот краткий обзор AI Studio. Убедитесь, что выбрали модель «Gemini 2.0 Flash Experimental» и установили формат вывода «Images and text».
Потратьте время, чтобы в полной мере оценить новые возможности. Как только освоитесь, приступайте к пошаговой интеграции с использованием API.
Сначала создайте пользовательский интерфейс
Прежде чем перейти к вызовам API, убедитесь, что у вас есть работающий фронтенд. Вы можете начать с нуля или добавить специальную тестовую страницу в ваше текущее веб-приложение. В моем случае я создал страницу «Image Manipulator» на Flux Labs AI с возможностью загрузить изображение слева, окном промпта под ним и предварительным просмотром полученного изображения справа.
Итак, когда все готово, пора заняться бэкэндом.
Друзья, буду рад, если вы подпишетесь на мой телеграм-канал про нейросети и на канал с гайдами и советами по работе с нейросетями - я стараюсь делиться только полезной информацией.
Генерация ключа API
Первое, что вам понадобится для доступа к API Gemini, - это ключ API. Перейдите в Google AI Studio и нажмите на кнопку «Get API key».
Затем нажмите на кнопку «Create API key», чтобы сгенерировать секретный ключ. Убедитесь, что этот ключ защищен и является приватным.
Далее создайте переменную окружения с именем GEMINI_API_KEY и укажите в качестве ее значения ключ API, полученный от Google AI Studio.
Где находится API?
Документация Google по API представляет собой беспорядочный набор документов. Трудно найти нужный пример API для конкретной модели. Чтобы избавить вас от головной боли, вот прямая ссылка на раздел «Редактирование изображений с помощью Gemini».
Вот пример кода:
Скопируйте этот фрагмент кода, вернитесь в IDE Cursor и попросите его реализовать вызов API к Gemini 2.0 Flash.
Если у вас возникнут проблемы (как у меня), вы можете посетить пример проекта NextJS, размещенного Google на GitHub, и скопировать пример кода, расположенный в ~/app/api/image/route.ts.
Вот полный текст примера:
Эта конечная точка API взаимодействует с искусственным интеллектом Gemini 2.0 Flash от Google, обрабатывая пользовательские данные и генерируя ответ в виде текста или изображения. Она проверяет входящие запросы, форматирует историю прошлых разговоров для определения контекста и отправляет обработанные данные в Gemini AI.
Модель возвращает ответ, который API анализирует для извлечения текстовых данных или изображений в кодировке base64. Наконец, в качестве ответа выдается объект JSON, содержащий сгенерированный текст или изображение. Конечная точка поддерживает мультимодальный ввод, сохраняет историю чата и включает обработку ошибок для повышения надежности.
Скопируйте этот пример кода в Cursor AI и попросите его соответствующим образом реализовать интеграцию с бэкендом. В случае успеха у вас должны получиться такие результаты:
Промпт: Make the seal wear a party hat
Великолепно. Честно говоря, мне нравится, как Gemini сохраняет исходное изображение в основном без изменений, редактируя только нужные части. И, кстати, это изображение тюленя создано с помощью Imagen 3.
Работа с несколькими изображениями
Еще один классный трюк, который вы можете проделать с Gemini 2.0 Flash при помощи встроенной генерации изображений, - это использовать его возможности для одновременной работы с несколькими исходными изображениями.
Обновите свой внешний интерфейс, чтобы пользователи могли загружать несколько изображений одновременно. Например, дайте команду Cursor AI сделать поддержку загрузки до четырех изображений одновременно и организуйте секцию предварительного просмотра в виде аккуратной сетки 2x2.
Точное количество поддерживаемых изображений не указано в документации, но я выбрал четыре, чтобы избежать чрезмерного использования токенов. Затем Gemini объединяет все предоставленные изображения в соответствии с инструкциями в промпте.
Например, вы можете загрузить изображение модели-мужчины и изображение товара, а затем попросить Gemini:
Промпт: Make the man hold the perfume
Это очень круто, правда?
Чтобы это сделать, вы можете обратиться к этой документации по исходным изображениям, а ниже приведен пример запроса для работы с несколькими изображениями в кодировке Base64.
Скопируйте этот скрипт и попросите Cursor реализовать возможность загрузки нескольких изображений.
the image manipulator should support multiple image inputs. can you support it? [ ВСТАВЬТЕ СЮДА API СКРИПТ ]
После успешной интеграции в вашем веб-приложении можно будет легко работать с изображениями или даже объединять несколько изображений.
Сколько стоит API?
Теперь давайте поговорим о ценах. Структура цен делится на бесплатные и платные варианты.
- На бесплатной подписке пользователи могут делиться текстом, изображениями, видео или аудио без какой-либо оплаты. Результаты также бесплатны, и вы бесплатно получаете контекстное кэширование, которое позволяет хранить до 1 000 000 токенов каждый час. Кроме того, вы можете использовать Google Search для создания базы данных без какой-либо оплаты в объеме до 500 запросов в день.
- Когда вы переходите на платную подписку, то в зависимости от объема использования взимается определенная плата. За исходные данные придется заплатить 0,10 доллара за каждый 1 миллион токенов текста, изображения или видео, а за аудио - 0,70 доллара. Выходные данные стоят 0,40 доллара за 1 миллион токенов. Если вам нужно контекстное кэширование, то его стоимость составит 0,025 доллара за 1 миллион токенов для текста, изображения или видео и 0,175 доллара для аудио. Эти функции станут доступны начиная с 31 марта 2025 года.
Разница между подписками заключается в использовании данных: данные, обрабатываемые в бесплатной версии могут быть использованы для улучшения продуктов Google, в то время как данные в платной версии не используются для этих целей. Поэтому если вас волнует вопрос конфиденциальности данных, вам лучше не использовать бесплатную версию.
Вы можете спросить: сколько токенов содержится в одном изображении?
Все данные, поступающие в Gemini API, токенизируются, включая текст, файлы изображений и другие нетекстовые данные.
В Gemini 2.0 изображения с обоими размерами <=384 пикселей считаются за 258 токенов. Изображения, увеличенные в одном или обоих размерах, обрезаются и масштабируются по мере необходимости в плитки размером 768x768 пикселей, каждая из которых учитывается как 258 токенов.
Также рекомендую вам подписаться на Google Cloud Billing, чтобы вы могли отслеживать использование API. Удивительно, но я получил ~40 тысяч японских йен или 270 долларов США бесплатных кредитов после того, как подписался на нее.
Рекламные кредиты используются в качестве формы оплаты, чтобы уменьшить сумму вашего долга. К этой категории относятся кредиты на бесплатную пробную версию GCP и маркетинговые кампании. Перейдите на страницу Billing Credits, чтобы узнать подробности о ваших кредитах.
Несколько действительно классных вариантов использования
Я размышлял о некоторых действительно потрясающих вариантах использования Gemini 2.0 Flash, и вот некоторые из них:
- Продуктовый маркетинг. Вы можете загрузить изображение модели и товара и попросить ИИ сделать так, чтобы модель держала товар. Я уже делал это в примере выше, и я думаю, что это очень важно для маркетологов и бизнесменов. Представьте, как быстро и легко можно создавать рекламные материалы.
- Быстрое редактирование изображений. Возможность сохранять большинство частей исходного изображения и вносить изменения только в определенные фрагменты делает этот инструмент фотошопом на стероидах. Вы можете быстро заменить, удалить или даже стилизовать определенные части изображений, не затрагивая остальные.
- Изображения для разработчиков игр. Я видел пользователей, использующих Gemini 2.0 Flash для создания изображений и спрайтов для своих игр. Просто загрузите одно эталонное изображение и попросите ИИ создать несколько его вариантов. Это очень удобно, особенно для инди-разработчиков, которым нужны быстрые итерации.
- Нет необходимости в тонкой настройке. Знаете ли вы, что для создания изображений с вами больше не нужно настраивать модель для генерации изображений? Просто загрузите свой портрет и попросите ИИ создать другое изображение в другом стиле или окружении. Это очень важно для приложений для создания ИИ-портретов.
Gemini 2.0 Flash с встроенной функцией редактирования изображений - одна из лучших ИИ-моделей для работы с изображениями на основе инструкций, доступных прямо сейчас. Я тестировал ее несколько дней, и то, как она редактирует изображения на основе пользовательских инструкций, просто на порядок превосходит другие модели. Она не самая быстрая, и она не создает абсолютно лучшие по качеству изображения, но когда дело доходит до точных, контекстно-зависимых правок, ничто другое и близко не подходит.
Возможности становятся еще шире, если объединить его с другими ИИ-моделями, такими как Veo 2 для создания видео или Flux 1.1 Pro Ultra для обработки изображений. Как разработчику, мне хочется создавать новые приложения и экспериментировать с уникальными вариантами использования, потому что потенциал просто огромен.
Если вы еще не пробовали экспериментальный Gemini 2.0 Flash, попробуйте его в Google AI Studio. А если вы уже используете ИИ-модели для генерации изображений, то эту обязательно стоит протестировать, чтобы узнать, не превосходит ли она то, что вы используете сейчас.
Телеграм-бот SYNTX предоставляет доступ к более чем 30 ИИ-инструментам. Без ВПН, оплата любой картой, запросы на любом языке, пробуйте бесплатно! В боте есть GPTo1, Gemini, Claude, Grok, Llama, Perplexity, DeepSeek, MidJourney, DALL-E 3, Flux, Ideogram и Recraft, LUMA, Runway, Kling, Sora, Pika, Hailuo AI (Minimax), Suno, синхронизатор губ, Редактор с 12 различными ИИ-инструментами для ретуши фото. ☝Это только часть функций, доступных в SYNTX!
Источник статьи на английском - здесь