JGGL — AI-генератор изображений

Веб-интерфейс для генерации изображений с помощью нейросетей. Галерея, арена для сравнения моделей, статистика.

Стек

• Next.js 16 — App Router, React 19, standalone output
• Tailwind CSS v4 — CSS-first конфигурация
• Motion (Framer Motion) — анимации
• Lucide React — иконки
• PostgreSQL — база для арены, голосований, лидерборда
• Docker — multi-stage сборка, non-root пользователь, health check
• GitLab CI/CD — автоматический билд и деплой

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

Разработка

pnpm install
pnpm dev

Открыть http://localhost:3000.

Docker

docker build -t jggl-ui .
docker run -p 3001:3001 jggl-ui

Открыть http://localhost:3001.

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

app/
├── layout.tsx                  # Корневой layout, шрифты, метадата
├── page.tsx                    # Studio — генерация изображений
├── globals.css                 # Тема, переменные, Tailwind v4
├── arena/page.tsx              # Арена — голосование + лидерборд
├── carousel/page.tsx           # Карусель — просмотр всех картинок
├── stats/page.tsx              # Статистика моделей
├── login/page.tsx              # Авторизация
└── api/
    ├── generate/route.ts       # POST — генерация изображения
    ├── enhance/route.ts        # POST — улучшение промпта (Gemini 3 Flash)
    ├── matchup/route.ts        # GET — случайная пара для арены
    ├── leaderboard/route.ts    # GET/SSE — таблица лидеров
    ├── battles/route.ts        # POST — создание баттла
    ├── images/route.ts         # GET — сохранённые изображения
    ├── carousel/route.ts       # GET — все изображения для карусели
    ├── stats/route.ts          # GET — статистика моделей
    ├── auth/                   # Авторизация (login/register/me)
    └── health/route.ts         # GET — health check
components/
├── Header.tsx                  # Лого + статус
├── Navigation.tsx              # Навигация (Studio, Carousel, Arena, Stats)
├── GeneratePanel.tsx           # Промпт + выбор модели
├── ImageGallery.tsx            # Masonry-сетка результатов
├── ImageCard.tsx               # Карточка с действиями (скачать, копировать, инфо)
├── Arena/
│   ├── MatchupCard.tsx         # Сравнение двух картинок
│   └── LeaderboardTable.tsx    # Таблица лидеров
└── Carousel/
    └── ImageGrid.tsx           # Сетка карусели с фильтрами
lib/
├── api.ts                      # Fetch-клиент с таймаутом
├── types.ts                    # Типы, константы, модели, DEFAULT_STEPS
├── arena.ts                    # Логика арены (баттлы, голосование, ELO)
├── real-generate.ts            # Генерация через RunPod API
├── scheduler.ts                # Планировщик автогенерации для арены
├── db.ts                       # Подключение к PostgreSQL
├── auth.ts                     # JWT-авторизация
├── model_metrics.ts            # Метрики моделей (скорость, VRAM)
├── sse.ts                      # Server-Sent Events утилиты
└── utils.ts                    # cn() хелпер

Модели

Модель	Шаги	Статус
Z-Image (turbo)	9	Live
Z-Image (base)	50	Live
HunyuanImage-3.0	50	Live
Flux-1-dev	20	Mock
GLM-Image	20	Mock
Qwen-Image	20	Mock
flux2	20	Mock
flux2.klein	10	Mock

Основные функции

Studio

Генерация изображений — ввод промпта, выбор модели, автоматическое улучшение промпта через AI (kie.ai Gemini 3 Flash). Результаты сохраняются в localStorage.

Арена

Слепое сравнение — один промпт, две модели. Пользователь голосует за лучший результат, не зная какая модель сгенерировала какую картинку. ELO-рейтинг на лидерборде. Пары не повторяются до просмотра всех.

Карусель

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

Статистика

Распределение по моделям, средние метрики, профили моделей.

API

POST /api/generate

Генерация изображения. Промпт автоматически улучшается через AI.

Поле	Тип	Описание
prompt	string	Текстовый промпт (макс. 750 символов)
model	string	Название модели

Шаги задаются автоматически для каждой модели.

GET /api/matchup

Случайная пара для голосования в арене.

Параметр	Тип	Описание
exclude	string	Список ID баттлов через запятую (уже просмотренные)

GET /api/health

Health check. Возвращает { "status": "ok", "timestamp": "..." }.

Деплой

GitLab CI/CD

Пайплайн (.gitlab-ci.yml) запускается при пуше в main:

1. Build — сборка Docker-образа, пуш в GitLab Container Registry
2. Deploy — SSH на сервер, pull образа, перезапуск контейнера
3. Verify — health check развёрнутого инстанса

Переменные CI/CD

Переменная	Описание	Masked
SSH_PRIVATE_KEY	Ed25519 приватный ключ для деплой-сервера	Yes
SSH_KNOWN_HOSTS	Вывод ssh-keyscan <deploy-host>	No
DEPLOY_HOST	IP-адрес сервера	No
KIE_API_KEY	API-ключ kie.ai для улучшения промптов	Yes
POSTGRES_PASSWORD	Пароль PostgreSQL	Yes
ADMIN_USERNAME	Логин администратора	Yes
ADMIN_PASSWORD	Пароль администратора	Yes
JWT_SECRET	Секрет для JWT-токенов	Yes
REAL_GEN_API_KEY	API-ключ RunPod для генерации	Yes
REAL_GEN_BASE_URL	URL бэкенда генерации (по умолчанию RunPod proxy); используется для /api/v1/models и генерации	No

GitLab автоматически предоставляет: CI_REGISTRY, CI_REGISTRY_USER, CI_REGISTRY_PASSWORD, CI_REGISTRY_IMAGE.

Лицензия

Приватный проект.