Virtual Fitting Room - Виртуальная примерочная с AI

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

🎯 Назначение

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

🚀 Быстрый старт

Требования

• Python 3.9+
• Node.js 18+
• Google Gemini API ключ (получить здесь)

Установка

1. Клонируйте репозиторий (или используйте существующий проект)

2. Установите зависимости Backend:

   cd backend
   python -m venv venv
   venv\Scripts\activate  # Windows
   # source venv/bin/activate  # Linux/Mac
   pip install -r requirements.txt

3. Настройте API ключ:

   • Получите ключ на Google AI Studio
   • Создайте файл backend/.env:

     GEMINI_API_KEY=ваш_ключ_здесь
     

4. Установите зависимости Frontend:

   cd frontend
   npm install

Запуск

Вариант 1: Автоматический (Windows)

CMD:

install.bat  # Первый раз
start.bat    # Запуск

PowerShell:

.\install.ps1  # Первый раз
.\start.ps1    # Запуск

Вариант 2: Ручной

CMD (Terminal 1 - Backend):

cd backend
venv\Scripts\activate
python main.py

PowerShell (Terminal 1 - Backend):

cd backend
.\venv\Scripts\Activate.ps1
python main.py

Terminal 2 (Frontend):

cd frontend
npm run dev

Откройте http://localhost:3000 в браузере.

Примечание для PowerShell: Если возникает ошибка "execution policy", выполните:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

Подробнее см. POWERSHELL_INSTRUCTIONS.md

📁 Структура проекта

Primer/
├── backend/              # Python Backend
│   ├── main.py          # FastAPI + Gemini API
│   ├── requirements.txt # Python зависимости
│   ├── backend_test.py  # Тестовый скрипт
│   └── .env             # API ключи (не в Git!)
│
├── frontend/            # Next.js Frontend
│   ├── app/            # Next.js 14 App Router
│   ├── components/     # React компоненты
│   ├── hooks/          # Custom hooks
│   └── public/         # Статические файлы
│
├── README.md           # Этот файл
├── GEMINI_2.5_SETUP.md # Детальная настройка Gemini
└── start.bat           # Скрипт запуска

🎨 Технологии

Backend

• Python 3.9+
• FastAPI - async веб-фреймворк
• Uvicorn - ASGI сервер
• Google Generative AI SDK - для Gemini API
• Pillow (PIL) - обработка изображений

Frontend

• Next.js 14 - React фреймворк (App Router)
• TypeScript - строгая типизация
• NextAuth.js - аутентификация через Google OAuth
• Tailwind CSS - utility-first CSS
• Framer Motion - анимации
• Lucide React - иконки
• Axios - HTTP клиент

AI Engine

• Google Gemini 2.5 Flash Image (Nano Banana 🍌)
  • Экспериментальная модель для генерации изображений
  • Бесплатный tier: 60 запросов/мин, 1,500/день
  • Отличное качество генерации

📖 API Endpoints

GET /

Health check endpoint

GET /health

Детальная проверка здоровья API

POST /api/try-on/text

Text to Image генерация

Параметры:

• person_image (file) - Фото человека
• clothing_description (string) - Описание одежды
• strength (float, optional) - Сила применения

Ответ: PNG изображение

POST /api/try-on/image

Image to Image генерация

Параметры:

• person_image (file) - Фото человека
• clothing_image (file) - Фото одежды
• description (string, optional) - Доп. описание
• strength (float, optional)

Ответ: PNG изображение

🎨 UI/UX Дизайн

• Тема: Темная с градиентами
• Стиль: Минималистичный, вдохновленный Pixlr.com
• Эффекты: Glassmorphism, градиенты, анимации
• Адаптивность: Mobile-first, responsive design

🔧 Настройка

Переменные окружения

backend/.env:

GEMINI_API_KEY=your_key_here

frontend/.env.local:

# NextAuth.js Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-here

# Google OAuth Credentials
GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-google-client-secret

# API URL (опционально)
NEXT_PUBLIC_API_URL=http://localhost:8000

Примечание: Для настройки Google OAuth см. GOOGLE_AUTH_SETUP.md

🐛 Troubleshooting

Backend не запускается

• Проверьте Python 3.9+
• Проверьте GEMINI_API_KEY в .env
• Установите зависимости: pip install -r requirements.txt

Frontend не запускается

• Проверьте Node.js 18+
• Очистите кэш: npm cache clean --force
• Переустановите зависимости: npm install

"Gemini API не настроен"

• Проверьте файл backend/.env
• Убедитесь, что ключ начинается с AIzaSyC...

"Модель не вернула изображение"

• Экспериментальная модель может быть нестабильной
• Проверьте логи backend
• Fallback: возвращается оригинал с watermark

🔐 Аутентификация

Приложение поддерживает регистрацию и авторизацию через Google OAuth.

Быстрая настройка:

1. Создайте OAuth приложение в Google Cloud Console
2. Настройте переменные окружения в frontend/.env.local
3. Следуйте инструкциям в GOOGLE_AUTH_SETUP.md

📚 Дополнительная документация

• GEMINI_2.5_SETUP.md - Детальная настройка Gemini
• GOOGLE_AUTH_SETUP.md - Настройка Google OAuth
• GEMINI_READY.txt - Сводка и инструкции
• START_HERE.md - Быстрый старт
• QUICKSTART.md - Краткая инструкция

🔗 Полезные ссылки

• Google AI Studio - Получить API ключ
• Gemini Documentation - Документация Gemini
• Pricing - Тарифы Gemini API
• Awesome Nano Banana - Ресурсы о модели

📝 Лицензия

MIT License

🙏 Благодарности

• Google Gemini 2.5 Flash Image (Nano Banana) 🍌
• Сообщество разработчиков

---

Создано с ❤️ используя Google Gemini 2.5 Flash Image