Blog InfluxIA

Generar imágenes con Google Gemini Nano Banana gratis: tutorial completo con instalación, configuración, prompts y ejemplos reales

Generar imágenes con Google Gemini Nano Banana gratis: tutorial completo con instalación, configuración, prompts y ejemplos reales

Generar imágenes con Google Gemini Nano Banana gratis: crea una app no-code con Bolt y n8n paso a paso

Tiempo de lectura: 12 min

Key takeaways

  • Construirás una app no-code con Bolt (UI) y n8n (backend) que fusiona tu producto con un “modelo” realista en segundos.
  • La generación usa OpenRouter con el modelo “Gemini 2.5 Flash (preview) free”, ideal para prototipos y pruebas.
  • Guardarás tus “modelos” (personas/escenas) en Google Drive y los combinarás con la foto del producto.
  • Flujo completo sin código: Bolt → n8n Webhook → OpenRouter → n8n → Bolt.
  • Incluye prompts listos, solución de problemas y escalado básico (seguridad, límites, colas).

Tabla de contenidos

Introducción

En este tutorial aprenderás a generar imágenes con Google Gemini Nano Banana gratis creando una app no-code para generar imágenes con IA. Subes una foto de tu producto, escribes la idea del anuncio y listo: mezclamos tu imagen con un “modelo” realista. Usaremos Bolt como interfaz, n8n como backend y la API de OpenRouter con Gemini 2.5 Flash gratis para la generación. Sin código. Sin complicaciones. Referencias: Infobae, EaseMate, Bylo AI.

Idea clave: tu producto + un “modelo” base (persona/escena) = mockups realistas en minutos, perfectos para test A/B y validación de campañas.

Para quién es y qué vas a construir

  • Ideal para: marketers, ecommerce, creadores y agencias que quieren validar anuncios visuales rápido, sin programar.
  • Construirás: una app no-code para generar imágenes con IA que:
    • Permite subir una foto de producto y escribir un prompt.
    • Mezcla esa imagen con un “modelo” base (persona o escena) y devuelve una foto realista en segundos.
    • Usa Bolt como interfaz, n8n como automatizador y Google Drive para guardar “modelos”.
  • Resultado esperado: mockups de anuncios que respetan rostro y pose del “modelo” y añaden tu producto (logo, taza, camiseta, etc.).

Sigue, te doy la visión completa para que todo tenga sentido.

Arquitectura de la app no-code para generar imágenes con IA

La arquitectura es simple y clara:

  • UI: Bolt. Un dashboard sin código con:
    • Subida de imagen (producto).
    • Campo de prompt.
    • Botón “Generar”.
    • Área de resultado.
  • Backend: n8n (tutorial n8n automatización IA). Orquesta todo:
    • Webhook POST que recibe imagen y texto.
    • Conversión del binario a base64.
    • Descarga de la imagen “modelo” desde Google Drive.
    • Llamada a OpenRouter con Gemini 2.5 Flash gratis (“Nano Banana”) para fusionar imágenes según el prompt.
    • Limpieza de la respuesta base64 y envío del archivo final a Bolt. Referencias: YouTube 1 y YouTube 2.
  • Almacenamiento: carpeta en Google Drive con imágenes “modelo”.
  • Opcional: generar tus “modelos” previos (personas/escenas) con Google AI Studio usando el mismo modelo.

Flujo de alto nivel:
Bolt → n8n Webhook → OpenRouter (Gemini 2.5 Flash) → n8n → Bolt.

Notas útiles:

  • Gemini Nano Banana también está disponible gratis en la app de Gemini y en webs como EaseMate o Bylo AI, con límites diarios. Aquí lo integramos en tu propia app vía OpenRouter, ideal para flujos y automatización. Fuente: Infobae, EaseMate, Bylo AI.
  • OpenRouter ofrece un acceso sencillo al modelo “Google Gemini 2.5 Flash (preview) free”, con cuota gratis para pruebas y prototipos. Referencia: YouTube.

Requisitos y cuentas necesarias

  • Cuenta en Bolt (plan gratuito) para crear la interfaz.
  • Cuenta en n8n (cloud trial o self-hosted).
  • Cuenta en OpenRouter y API key (hay cuota gratuita). Referencia: YouTube.
  • Acceso a Google Drive y carpeta para “modelos”.
  • Imágenes de tu producto y, opcionalmente, “modelos” generados desde Google AI Studio.

Tip rápido:

  • Si aún no tienes fotos de personas o escenas, genera 2–3 “modelos” con IA y guárdalos en Drive. Te dará variedad de poses y entornos para tus anuncios.

Paso a paso para crear app con Bolt y n8n

1) Prepara las imágenes “modelo” en Google Drive

  • Crea la carpeta: Nano Banana/modelos.
  • Sube 1–3 imágenes base (personas/escenas) con nombres claros: chica1.jpg, oficina1.jpg, playa1.jpg.
  • Intenta variedad: primer plano, medio cuerpo, diferentes fondos.
  • Tip: si no tienes fotos, crea “modelos” en Google AI Studio con el modelo “Nano Banana”. Busca expresiones naturales y manos claras (evita dedos ocultos).

2) Diseña la interfaz en Bolt (app no-code para generar imágenes con IA)

  • Componentes mínimos:
    • Uploader de imagen (producto).
    • Textarea para el prompt (pide mínimo 20–30 caracteres).
    • Botón “Generar anuncio”.
    • Área de resultado (muestra la imagen devuelta).
  • Estilo:
    • Tema oscuro + acentos de color para el botón.
    • Mensajes de ayuda: “Sube PNG/JPG hasta 2 MB”.
    • Validaciones: tamaño y formato, y que el prompt no esté vacío.
  • Conexión a backend:
    • Configura el botón para enviar un POST a n8n con:
      • Archivo binario del uploader.
      • Prompt en body.idea (por ejemplo).
    • Publica la app y guarda su URL.
  • UX de ejemplo:
    • Placeholder del prompt: “Haz que la persona de la imagen 2 sostenga la taza con mi logo. Fondo de oficina. Luz suave. Mantén el rostro y la pose.”

3) Configura el flujo en n8n (tutorial n8n automatización IA)

  • Crea un nuevo Workflow.
  • Añade un nodo Webhook:
    • Método: POST.
    • Response: “Respond when last node finishes”.
    • Espera:
      • Un archivo binario (el producto subido desde Bolt).
      • Un campo de texto body.idea (el prompt).
  • Pruébalo en modo test:
    • Copia la URL del Webhook (test URL) y ponla en Bolt.
    • Envía una prueba para ver si n8n recibe el archivo y el prompt.
  • Buenas prácticas:
    • Activa “Pin execution” al depurar para no perder los binarios cuando re-ejecutas nodos.
    • Nombra tus propiedades con claridad: productImage para el binario; idea para el prompt.
  • Por qué n8n:
    • Es ideal para integraciones HTTP/REST y módulos de IA. Puedes crear el flujo: App → OpenRouter → respuesta, todo sin código. Referencia: YouTube.

Configurar Webhook y manejar binarios en n8n

  • Nodo Webhook (POST):
    • Response Mode: Respond when last node finishes.
    • Binary Property Name: productImage (o el nombre que mandes desde Bolt).
    • JSON Body esperado: { idea: «…» }.
  • Verifica que llegan datos:
    • En la ejecución, revisa:
      • En Binary: productImage con mime-type (image/jpeg o image/png).
      • En JSON: body.idea con tu texto.
  • Procesa la imagen entrante (paso 4):
    • Conversión a base64:
      • Añade un nodo Binary → base64 (puede ser con “Move Binary Data” o “Function”).
      • Resultado esperado: productImage_base64 sin cabeceras data:…; solo el contenido.
    • Guarda el prompt:
      • En n8n puedes referenciarlo como {{$json.body.idea}}.
      • Opcional: valida longitud mínima; si es corto, añade una nota o default.
  • Preparación para el “modelo” base:
    • Añade un nodo Google Drive → “Download file”.
    • Modo por nombre: chica1.jpg (para el prototipo basta 1).
    • Convierte esa imagen a base64 igual que hiciste con el producto.
    • Sugerencia táctica:
      • Mantén 1 “modelo” fijo al principio para reducir variables.
      • Más adelante, podrás aleatorizar o dejar que el usuario elija.

Checklist rápido de este punto:

  • Bolt ya envía el archivo y el prompt al Webhook de n8n.
  • n8n ve el binario productImage y el texto body.idea.
  • Ya tienes productImage_base64 y model_base64 preparados en variables.

Transición
En el siguiente bloque conectaremos todo con OpenRouter Gemini 2.5 Flash gratis para realizar la fusión realista de imágenes y, por último, devolveremos el resultado a Bolt. Verás el endpoint, los headers y el formato JSON recomendado, además de cómo limpiar la respuesta y responder al Webhook. Referencias: YouTube 2, YouTube 1, Bylo AI.

Antes de seguir, recuerda:

  • OpenRouter ofrece un tier gratis útil para prototipos; si recibes códigos 401/403/429, suele ser por clave inválida o límite alcanzado. Referencia: YouTube.
  • Gemini Nano Banana también puede usarse gratis en la app de Gemini y en sitios compatibles si solo quieres probar generación manual. Aquí buscamos integrarlo en tu propia app no-code para escalar tu flujo. Fuentes: Infobae, EaseMate.

Integrar OpenRouter Gemini 2.5 Flash gratis

Vamos a crear el nodo HTTP Request en n8n para pedir la fusión de imágenes al modelo “free” de OpenRouter. Es el corazón de tu app no-code para generar imágenes con IA.

Configuración del nodo HTTP Request:

  • Método: POST
  • URL: https://openrouter.ai/api/v1/chat/completions
  • Headers:
    • Authorization: Bearer TU_OPENROUTER_API_KEY
    • Content-Type: application/json
    • (Recomendado) HTTP-Referer: tu-dominio-o-app
    • (Recomendado) X-Title: “Gemini Nano Banana fusion app”
  • Auth: Generic Credential (Bearer) con tu clave de OpenRouter.

Cuerpo JSON (formato sugerido y fácil de mapear en n8n):

  • model: usa el id “free” mostrado en tu panel de OpenRouter para Google Gemini 2.5 Flash (por ejemplo, “google/gemini-2.5-flash-preview:free”).
  • messages: un array con un único mensaje de usuario que combina texto e imágenes.

Ejemplo de campos:

{
  "model": "google/gemini-2.5-flash-preview:free",
  "messages": [
    {
      "role": "user",
      "content": [
        { "type": "input_text", "text": "Combina imagen A (producto) con imagen B (modelo). Conserva cara y pose de B. Coloca A en la mano derecha. Fondo oficina, luz suave. No deformes el logo. " + {{$json.body.idea}} },
        { "type": "input_image", "image_data": "data:image/jpeg;base64,{{ $json.model_base64 }}" },
        { "type": "input_image", "image_data": "data:image/png;base64,{{ $json.productImage_base64 }}" }
      ]
    }
  ],
  "extra_headers": { "cache-control": "no-cache" }
}

Notas prácticas:

  • El orden importa: primero describe claramente el resultado, luego adjunta “modelo” y “producto”.
  • Pide explícitamente salida como data URL base64 (jpg o png) para simplificar el post-procesado.
  • Si tu cuenta muestra otra etiqueta del modelo “free”, usa la que aparezca en tu lista. OpenRouter ofrece un acceso sencillo al modelo gratuito, ideal para prototipos. Referencias: YouTube 1, YouTube 2.

Qué esperar de la respuesta:

  • choices[0].message.content puede incluir:
    • Un bloque tipo image con data:image/jpeg;base64,…
    • O un texto con un enlace/JSON que contiene el base64.
  • Maneja ambos casos: si detectas “data:image/…;base64,”, extrae solo el contenido tras la coma.

Si algo falla:

  • 401/403: revisa la API key y permisos.
  • 429: alcanzaste el límite gratuito de OpenRouter; espera o sube de plan. Referencia: YouTube.
  • El modelo no aparece como “free”: valida disponibilidad actual en OpenRouter o usa otra vía gratuita como la app de Gemini para pruebas manuales rápidas. Fuentes: Infobae, EaseMate, Bylo AI.

Devolver la imagen generada a Bolt

Con la respuesta de OpenRouter en n8n, haremos el post-procesado y la respuesta al Webhook:

  • Limpieza de base64:
    • Usa un nodo Function o Set para:
      • Buscar el prefijo “data:image/…;base64,”.
      • Quitar el prefijo y quedarte con el contenido limpio.
  • Convertir a binario:
    • Nodo Move Binary Data:
      • Mode: Binary to JSON (o JSON to Binary, según tu flujo).
      • Crea un binario con propiedad data (el nombre que espera Bolt).
      • Selecciona content-type: image/jpeg (o image/png según tu caso).
  • Responder a la app:
    • Nodo Respond to Webhook:
      • Binary Property: data
      • File Name: anuncio.jpg
      • Status: 200
    • En Bolt, tu componente de imagen debe leer el binario devuelto y mostrarlo.

Prueba end-to-end:

  • Sube una foto de producto (menos de 2 MB) y un prompt claro.
  • Observa la ejecución de n8n: Webhook → HTTP Request → limpieza → respuesta.
  • Ajusta mensajes en la UI: “Generando…”, “Todo listo” y manejo de errores.

Consejos de prompting (para resultados realistas)

Los prompts marcan la diferencia. Aquí tienes patrones que funcionan bien:

  • Define roles de las imágenes:
    “Imagen A: producto (taza con logo). Imagen B: modelo (persona en oficina).”
  • Conserva identidad y pose:
    “Mantén la cara, piel y pose de la imagen B sin cambios.”
  • Relación exacta con el producto:
    “Coloca la taza en la mano derecha de la persona, a la altura del pecho. No deformes el logo.”
  • Contexto visual:
    “Fondo oficina moderna, luz suave de tarde, tonos cálidos, desenfoque ligero atrás.”
  • Calidad y formato:
    “Salida en jpg 1024×1024, fotorealista, manos correctas, proporciones naturales.”
  • Evita ambigüedad:
    “No cubras el rostro. No repitas el producto. No agregues texto en la escena.”

Ejemplos rápidos:

  • “Fusiona A (camiseta con diseño) en B (modelo en playa). Que la persona lleve la camiseta. Fondo playa, cielo azul, luz dorada. Mantén la expresión y proporciones. Salida jpg 1024, base64.”
  • “Integra A (taza con logo) en B (oficina cowork). Colócala sobre el escritorio junto a un portátil, reflejos suaves. No distorsiones el logo.”

Solución de problemas frecuentes

  • La imagen no aparece en Bolt:
    Asegura que Respond to Webhook devuelve un binario llamado “data” y un mime-type válido.
  • El binario “desaparece” al depurar en n8n:
    Usa “Pin execution” antes de re-ejecutar nodos. Referencia: YouTube.
  • Errores 401/403/429 de OpenRouter:
    Revisa la API key, límites del tier gratuito y el id exacto del modelo “free”. Referencia: YouTube.
  • Salida no realista (manos raras, logo torcido):
    Especifica “manos correctas”, “no deformes el logo”, y da instrucciones de posición y escala. Cambia a otro “modelo” de base más limpio y con manos visibles.
  • Respuestas en texto en lugar de imagen:
    Pide “entrega final como data URL base64 (image/jpeg)”. Si devuelve URL, descarga con un nodo HTTP Request extra.
  • Lento o pesado:
    Comprime la imagen de producto a 1024 px máx antes de enviar. Usa formatos ligeros (jpg para fotos, png solo si es necesario).

Mejores prácticas, seguridad y escalado

Seguridad mínima para producción:

  • Protege el Webhook de n8n: Token en headers o firma HMAC y verificación en un Function.
  • Valida archivos: Mime-type, tamaño (<2–4 MB), dimensiones. Rechaza lo que no cumpla.
  • Manejo de claves: Variables de entorno y credenciales en n8n, nunca en el frontend.

Escalado y robustez:

  • Rate limiting: Limita peticiones por usuario y aplica colas (nodo “Queue” o estrategias con Redis).
  • Observabilidad: Log de prompts, tiempos y resultados con IDs de solicitud. Pide consentimiento para guardar imágenes.
  • Costos y límites: Detecta 429 y reintenta con backoff. Ten un “modo degradado”: si OpenRouter free cae, muestra aviso o usa otra plataforma temporal. Fuentes: EaseMate, Bylo AI.

Cumplimiento:

  • Derechos de imagen: Usa fotos propias o con licencia. Evita marcas registradas sin permiso.
  • Política de contenido: Filtra prompts sensibles o no permitidos (palabras clave y reglas simples).

Extensiones y siguientes pasos

Mejoras rápidas para tu app no-code:

  • Selector de “modelo”: Lista imágenes desde Google Drive y deja elegir al usuario.
  • Pre-generar “modelos”: Crea retratos/escenas en Google AI Studio y súbelos a Drive. Fuente: Infobae.
  • Afinar prompts automáticamente: Un nodo LLM que reescriba prompts a un formato estándar (“plantillas de fusión”).
  • A/B testing: Genera dos variaciones por prompt y mide clicks/ventas en tu sitio.
  • Overlays y branding: Añade logo/CTA final con un nodo de edición de imagen o un servicio externo.
  • Presets de escena: Playa, oficina, ciudad, estudio. Cambia fondo y luz con una palabra.
  • Procesamiento por lotes: Sube un CSV/lista de productos y ejecuta en cola para catálogos.

FAQ

¿Puedo Generar imágenes con Google Gemini Nano Banana gratis sin montar nada?

Sí. Puedes usar la app de Gemini (web o móvil) o webs como EaseMate y Bylo AI con límites diarios gratuitos. Ideal para pruebas rápidas. Fuente: Infobae.

¿Por qué integrar OpenRouter en lugar de usar solo la app?

Para automatizar, conectar con tu UI, hacer lotes y orquestar en n8n. OpenRouter ofrece un acceso sencillo al modelo “Google Gemini 2.5 Flash (preview) free” para prototipos. Referencias: YouTube 1, YouTube 2.

¿Es realmente gratis?

Hay un tier gratuito con límites. Suele alcanzar para prototipos o demos. Los planes y cupos pueden cambiar. Referencia: YouTube.

¿Puedo usar otro almacenamiento que no sea Google Drive?

Sí. S3, Cloud Storage, Dropbox o tu servidor. Solo cambia el nodo de descarga en n8n.

¿Funciona esto con otras herramientas no-code además de Bolt?

Sí. Webflow, Softr, Glide o cualquier frontend que haga POST al Webhook de n8n.

¿Qué pasa si mi respuesta viene como URL en lugar de base64?

Descárgala con otro HTTP Request y conviértela a binario antes de responder a Bolt.

¿Puedo autoalojar n8n?

Sí. Hay instaladores y guías oficiales. Es ideal si quieres control total de seguridad y costos.

¿Recomiendas tamaño de salida?

1024×1024 es un buen equilibrio. Para anuncios horizontales, 1200×628 o 1600×900.

¿Cómo evito manos raras o logos deformados?

Sé explícito en el prompt: “manos correctas, proporciones realistas, no deformar logo”. Cambia el “modelo” si hay dedos ocultos.

¿Qué modelo de OpenRouter elijo?

El listado cambia. Selecciona el “Gemini 2.5 Flash (preview) free” que aparezca en tu cuenta. Si no está, usa el modelo más cercano disponible con capacidad multimodal. Referencia: YouTube.

Checklist final

  • [ ] App publicada en Bolt con uploader + prompt + botón.
  • [ ] Webhook POST de n8n configurado y protegido.
  • [ ] Imagen de producto recibida y convertida a base64.
  • [ ] Imagen “modelo” descargada desde Google Drive y convertida.
  • [ ] Llamada a OpenRouter Gemini 2.5 Flash gratis funcionando y devuelve base64. Referencia: YouTube.
  • [ ] Respuesta a Bolt con binario “data” renderizado.
  • [ ] Probadas al menos 3 escenas (playa, oficina, ciudad) con prompts claros.
  • [ ] Límites de tamaño, seguridad básica y logs activados.

Conclusión

Ya tienes una app no-code para generar imágenes con IA que mezcla tu producto con modelos realistas, construida con Bolt y n8n y alimentada por OpenRouter. Este flujo es simple, barato y ampliable: ideal para testear creatividades, validar campañas y producir mockups en minutos.

Si quieres solo probar de forma manual, también puedes Generar imágenes con Google Gemini Nano Banana gratis desde la app de Gemini o sitios compatibles como Bylo AI o lo explicado en Infobae. Pero si buscas escalar y automatizar, esta integración es el camino claro.

Siguiente paso: crea 3 “modelos” base en tu Drive, publica tu app y ejecuta tu primer A/B test. Cuando veas el impacto, añade colas, presets de escenas y un pulido de prompts con un nodo LLM. Con este tutorial n8n automatización IA y la potencia de OpenRouter Gemini 2.5 Flash gratis, tienes un generador de anuncios visuales a tu medida. Referencia: YouTube.

Cover Image