ДжусиЦех

Веб-приложение для редактирования изображений с помощью Google Gemini 2.5 Flash Image API (Nano Banana).

Возможности

• ✨ Редактирование изображений с помощью текстовых промптов
• 🔑 Управление множественными API ключами Google Gemini
• 📝 Сохранение и выбор готовых промптов
• 📁 Загрузка множества изображений (drag-n-drop)
• 🎨 Пакетная обработка изображений
• 👀 Просмотр результатов (оригинал vs обработанное)
• 🔄 Перегенерация неудачных результатов
• 💾 Сохранение отдельных изображений или всех сразу

Технологии

• React 18
• Vite
• Tailwind CSS
• Google Generative AI SDK
• Gemini 2.5 Flash Image API

Установка

# Клонировать репозиторий
git clone <repository-url>
cd BananoBot

# Установить зависимости
npm install

Использование

Разработка

npm run dev

Приложение будет доступно по адресу: http://localhost:5173

Продакшн сборка

npm run build
npm run preview

Деплой онлайн

Вариант 1: GitHub Pages (рекомендуется)

1. Перейдите в Settings репозитория на GitHub
2. Выберите Pages в меню слева
3. В разделе "Source" выберите "GitHub Actions"
4. Запушьте код в ветку main или master
5. GitHub Actions автоматически соберёт и задеплоит приложение
6. Приложение будет доступно по адресу: https://<username>.github.io/BananoBot/

После первого пуша в main/master ветку деплой происходит автоматически!

Вариант 2: Vercel (один клик)

1. Нажмите кнопку "Deploy" выше
2. Войдите через GitHub
3. Vercel автоматически склонирует, соберёт и задеплоит приложение
4. Получите уникальный URL для вашего приложения

Вариант 3: Netlify

1. Нажмите кнопку "Deploy to netlify"
2. Войдите через GitHub
3. Netlify автоматически всё настроит

Вариант 4: Локальный деплой

# Собрать проект
npm run build

# Папка dist/ содержит готовое приложение
# Загрузите её на любой хостинг статических сайтов

Получение API ключа Google Gemini

1. Перейдите на Google AI Studio
2. Создайте новый API ключ
3. Скопируйте ключ и добавьте его в приложение

Как использовать приложение

Шаг 1: Добавить API ключ

1. Нажмите "Добавить API ключ"
2. Вставьте ваш Google Gemini API ключ
3. Нажмите "Добавить"

Ключи сохраняются в localStorage браузера.

Шаг 2: Добавить промпт

1. Нажмите "Добавить промпт"
2. Введите описание изменений, которые вы хотите применить к изображениям

Примеры промптов:

• "Change the background to a beach scene"
• "Make it black and white"
• "Add sunglasses to the person"
• "Remove the background"
• "Change the color to vintage sepia tone"

Шаг 3: Загрузить изображения

1. Перетащите изображения в область загрузки или нажмите "Выбрать файлы"
2. Можно загрузить множество изображений сразу
3. Поддерживаются форматы: JPG, PNG, WEBP и другие

Шаг 4: Запустить обработку

1. Нажмите "Запустить обработку"
2. Изображения будут обрабатываться последовательно
3. Прогресс отображается в реальном времени

Шаг 5: Просмотр результатов

1. Кликните на изображение для просмотра в полном размере
2. Сравните оригинал и результат
3. Нажмите "Перегенерировать" для повторной обработки
4. Нажмите "Сохранить" для скачивания отдельного изображения
5. Нажмите "Сохранить все" для скачивания всех результатов

Стоимость использования

Gemini 2.5 Flash Image стоит $30.00 за 1 миллион выходных токенов, где каждое изображение = 1290 токенов (~$0.039 за изображение).

Примечания

• Все данные (API ключи и промпты) хранятся только в localStorage вашего браузера
• API ключи не передаются на сторонние серверы
• Обработка изображений происходит через официальный API Google Gemini
• Для работы требуется активное подключение к интернету

Возможные ошибки

"Выберите API ключ" - Не добавлен или не выбран API ключ

"Выберите промпт" - Не добавлен или не выбран промпт для обработки

"Загрузите изображения" - Не загружены изображения для обработки

"Модель не вернула изображение" - Проверьте правильность промпта, он должен описывать изменения изображения

Лицензия

MIT

Поддержка

Для вопросов и сообщений об ошибках создайте issue в репозитории.