forked from innovacion/playground
139 lines
4.1 KiB
Markdown
139 lines
4.1 KiB
Markdown
# 🎨 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.
|