Ai редактор промпт

# AI Редактор- Техническое задание

Создай **одностраничное веб-приложение для стилизации фото** через Gemini 2.5 Flash Image API.


## Структура интерфейса (все на одном экране)

### Макет (mobile-first, но адаптивный)
```
+------------------------+
|     AI Редактор    |  <- заголовок
+------------------------+
|                        |
|    [Drop Zone или      |  <- основная область
|     Фото с слайдером]  |
|                        |
+------------------------+
| [Стили] [Стили] [Стили]|  <- кнопки стилей
| [Стили] [Стили] [Стили]|
+------------------------+
```

### 1. Зона загрузки (центр экрана)
**До загрузки фото:**
- Большая область с пунктирной границей
- Иконка загрузки по центру
- Текст: "Перетащите фото или нажмите для выбора"
- Поддержка: drag-and-drop, клик для выбора файла
- Принимать только jpg/png/webp

**После загрузки фото:**
- Зона загрузки заменяется на просмотр изображения
- Размер области фиксированный (квадрат, max-width: 512px)
- Изображение масштабируется с сохранением пропорций

### 2. Слайдер для сравнения (появляется после обработки)
- Вертикальная линия-разделитель по центру изображения
- Слева показывается оригинал, справа - результат
- Линию можно перетаскивать мышью/пальцем влево-вправо
- На линии - круглая ручка с иконками "<|>"

### 3. Панель стилей (под изображением)
Сетка кнопок 3x4 для 12 стилей:
- Каждая кнопка: эмодзи + название
- При наведении - подсветка
- При выборе - обводка и анимация

**Стили (используй эти промпты точно):**
1. 🧸 Плюшевая игрушка: "A soft, high-quality plush toy of a person on the picture, with an oversized head, small body, and stubby limbs. Made of fuzzy fabric with visible stitching and embroidered facial features."
2. 😃 Мультфильм: "Transform this image into a cute simple cartoon. Use minimal lines and solid colors."
3. 🏛️ Статуя: "Make the person look like a classical marble statue, including the clothes and eyes."
4. 🧊 3D: "Turn the person on the provided photo into a 3D transparent line art hologram"
5. ✨ 80-е: "Make the person in the photo look like a 1980s yearbook photo. Feel free to change the hairstyle and clothing."
6. 🎩 19 век: "Make the photo look like a 19th century daguerreotype. Feel free to change the background to make it period appropriate and add props like Victorian clothing."
7. 🍣 Photo Booth: Turn the photo into a 3x3 grid of photo strips with different studio-style poses and expressions.
8. 🌈 Психоделика: "Create a 1960s psychedelic hand-drawn poster-style illustration based on this image with bright bold solid colors and swirling shapes."
9. 🎮 8-бит: "Transform this image into a minimalist 8-bit brightly colored cute pixel art scene on a 80x80 pixel grid."
10. 🧔 Борода: "Make the person in the photo look like they have a huge beard."
11. 🎪 Funko Pop: "Create a detailed 3D render of a chibi Funko Pop figure, strictly based on the provided reference photo. The figure should accurately reflect the person's appearance, hairstyle, attire, and characteristic style from the photo."
12. 👵 Старость: "Make the person in the photo look extremely old."

### 4. Состояние загрузки
**Во время обработки:**
- Поверх изображения появляется полупрозрачный оверлей
- По центру - спиннер с текстом "Применяем магию..."
- Кнопки стилей блокируются

## Логика работы

### Процесс обработки:
1. Пользователь загружает фото
2. Фото конвертируется в base64
3. Пользователь выбирает стиль
4. Отправка запроса к Gemini API:
```javascript
const prompt = [
  { text: selectedStylePrompt },
  {
    inlineData: {
      mimeType: "image/jpeg",
      data: base64Image
    }
  }
];

const response = await genAI.generateContent({
  model: "gemini-2.5-flash-image-preview",
  contents: prompt,
  config: {
    responseModalities: [Modality.TEXT, Modality.IMAGE]
  }
});
```
5. Получение результата и отображение со слайдером

### Компонент слайдера сравнения:
```javascript
// Основная логика:
// - Два изображения накладываются друг на друга
// - Правое (результат) имеет clip-path, управляемый позицией слайдера
// - При перетаскивании обновляется clip-path
```

## Стилизация (Tailwind)

### Цветовая схема:
- Фон: slate-900
- Карточки: slate-800
- Акцент: violet-500
- Текст: slate-100

### Анимации:
- Плавное появление результата (fade-in)
- Пульсация кнопки при обработке
- Shimmer-эффект на загрузке

## Дополнительные требования

1. **Кнопка "Новое фото"** - появляется после обработки для загрузки другого изображения
2. **Кнопка "Скачать"** - сохранение результата
3. **Адаптивность** - на мобильных кнопки стилей в 2 колонки
4. **Обработка ошибок** - показывать понятные сообщения при сбоях API
5. **Ограничения** - максимальный размер файла 5MB

## Структура файлов
```
src/
  App.tsx           - главный компонент
  components/
    DropZone.tsx    - зона загрузки
    ImageViewer.tsx - просмотр со слайдером
    StyleGrid.tsx   - сетка стилей
  lib/
    gemini.ts       - работа с API
    styles.ts       - массив стилей и промптов
```

## Важно
- НЕ добавлять лишних функций (YAGNI)
- Весь интерфейс на одном экране без скролла
- Минималистичный дизайн без лишних элементов
- Фокус на основной функции - стилизации фото