Initial commit

2025-11-26 19:00:04 +00:00
commit 0ba05b6483
27 changed files with 2517 additions and 0 deletions
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,138 @@
+# 🎨 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.