# 🎨 Image Playground - Google Generative AI

Playground interactivo para generar imágenes usando los modelos de Google Generative AI (Gemini).

## ✨ Características

- 🤖 **Múltiples modelos de Gemini** - Elige entre diferentes versiones de Gemini
- 🎭 **Configuración completa** - Aspect ratios, negative prompts, safety levels
- 🖼️ **Visualización en tiempo real** - Ve tus imágenes generadas al instante
- 💾 **Descarga directa** - Guarda las imágenes con un clic
- 📱 **Responsive** - Funciona en desktop y mobile
- ⚡ **Vercel AI SDK** - Integración completa con el SDK oficial

## 🚀 Instalación

1. **Instalar dependencias:**
```bash
cd frontend
npm install
```

2. **Configuración automática:**

El proyecto usa automáticamente las credenciales del archivo `bnt-ia-innovacion-new.json` ubicado en la raíz del proyecto. **No necesitas configurar nada más.**

Si quieres usar una API key diferente (opcional), crea un archivo `.env.local`:

```bash
cp .env.local.example .env.local
# Edita y descomenta GOOGLE_API_KEY
```

3. **Ejecutar el proyecto:**
```bash
npm run dev
```

Abre [http://localhost:3000](http://localhost:3000) en tu navegador.

## 📦 Estructura del Proyecto

```
frontend/
├── app/
│   ├── api/
│   │   └── generate-image/
│   │       └── route.ts          # API endpoint para generación
│   ├── layout.tsx                # Layout principal
│   ├── page.tsx                  # Página del playground
│   └── globals.css               # Estilos globales
├── components/
│   ├── model-selector.tsx        # Selector de modelos
│   ├── image-config.tsx          # Configuración de imágenes
│   └── image-card.tsx            # Tarjeta de imagen generada
├── lib/
│   ├── google-ai.ts              # Cliente de Google AI
│   └── utils.ts                  # Utilidades
└── package.json
```

## 🎯 Uso

1. **Selecciona un modelo** en el panel lateral
2. **Configura los parámetros:**
   - Aspect Ratio (1:1, 16:9, etc.)
   - Número de imágenes
   - Negative prompt (opcional)
   - Nivel de seguridad
3. **Escribe tu prompt** describiendo la imagen que quieres
4. **Haz clic en "Generar Imagen"** o presiona Enter
5. **Descarga las imágenes** haciendo hover y clic en el botón de descarga

## 🛠️ Tecnologías

- **Next.js 14** - Framework React con App Router
- **TypeScript** - Type safety
- **Vercel AI SDK** - Integración con IA
- **Google Generative AI SDK** - API de Google Gemini
- **Tailwind CSS** - Estilos
- **Lucide Icons** - Iconos

## 🔧 Configuración Avanzada

### Modelos Disponibles

El playground incluye estos modelos de Gemini:

- `gemini-2.0-flash-exp` - Experimental, rápido
- `gemini-exp-1206` - Experimental con mejoras
- `gemini-1.5-pro` - Más capaz para tareas complejas
- `gemini-1.5-flash` - Rápido y eficiente

### Aspect Ratios Soportados

- `1:1` - Cuadrado (1024x1024)
- `3:4` - Vertical (768x1024)
- `4:3` - Horizontal (1024x768)
- `9:16` - Móvil vertical (576x1024)
- `16:9` - Widescreen (1024x576)

## 🤝 Integración con el Backend Python

El proyecto también incluye un backend en Python en `/backend` que puedes usar alternativamente:

```bash
cd ../backend
python list_models.py
```

## 📝 Notas

- Las imágenes se generan usando la API de Google Generative AI
- Asegúrate de tener cuota suficiente en tu cuenta de Google Cloud
- Algunos prompts pueden ser bloqueados por políticas de seguridad
- Las imágenes se guardan temporalmente en el navegador

## 🐛 Troubleshooting

**Error: "API key inválida"**
- Verifica que tu API key esté correctamente configurada en `.env.local`
- Asegúrate de que la API key tenga permisos para Generative AI

**Error: "No se generaron imágenes"**
- Prueba con un prompt más descriptivo
- Cambia el modelo seleccionado
- Verifica los logs del servidor en la consola

**Las imágenes no se muestran**
- Verifica la consola del navegador para errores
- Asegúrate de que el modelo soporte generación de imágenes

## 📄 Licencia

MIT

## 🙋 Soporte

Si encuentras algún problema o tienes preguntas, crea un issue en el repositorio.