playground/frontend/README.md

🎨 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:

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:

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

3. Ejecutar el proyecto:

npm run dev

Abre 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:

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.