See llms.txt for all machine-readable content.

Back to Templates

Generate marketing images in a webhook image studio with Google Gemini

Created by

Created by: Andrés L || andreslozano02
Andrés L

Last update

Last update 9 hours ago

Categories

Share

Quick overview

This workflow serves a self-hosted HTML “Image Studio” via webhook and uses Google Gemini to generate or edit images from one or two reference uploads, returning the result as a downloadable data URL with prompt and metadata.

How it works

  1. Receives a GET request on the /gemini-image-studio webhook and serves a single-page HTML interface with configurable title and upload limits.
  2. Receives a POST request from the page containing the selected mode, optional brand/notes/format flags, and up to two base64-encoded reference images.
  3. Validates the request, enforces image count/size/type limits, converts the base64 images into binary attachments, and builds the final Gemini prompt for the chosen mode.
  4. Routes the request to Google Gemini as text-to-image (0 images), a single-image edit (1 image), or a two-image composite (space + brand logo). Each Gemini node retries twice on transient errors before giving up.
  5. Packages Gemini's returned image binary into a JSON response containing a data URL, filename, size, elapsed time, and the exact prompt used, so the page can render it, offer a download, and let you feed the result back in as the next reference.
  6. Six preset modes carry their own prompt: product ad, aesthetic product, clean packshot, space with people, space with brand logo, and freeform. The browser downscales and compresses every upload before sending it, so requests stay well inside n8n's payload limit.

Setup

  1. Add a Google Gemini (PaLM) API credential and select it on the three Google Gemini nodes.
  2. In “Settings (generator)”, set the Gemini model ID (gemini_model) and adjust server-enforced limits like max_images and max_file_mb.
  3. In “Settings (UI)”, customize the page title/subtitle and browser-side limits (max_side_px, max_images, max_file_mb) shown in the interface.
  4. Activate the workflow, open the production webhook URL in a browser for the studio UI, and use the same URL for POST requests generated by the page.
  5. Note that n8n's test webhook only serves one request: loading the interface consumes it, so the Generate button will fail in test mode. Always use the production URL (/webhook/gemini-image-studio), where GET and POST coexist.

Requirements

  • A Google Gemini (PaLM) API key from Google AI Studio.
  • A Gemini model that supports image generation and editing. The default is models/gemini-3.1-flash-image-preview; preview models get retired, so set your current one in "Settings (generator)".
  • An n8n instance whose webhook URL is reachable from the browser you open it in.

Customization

  • Edit the prompt for any mode, or add your own, in the MODES object inside "Validate & build prompt". Add the matching entry to MODES in "Build studio page" so it shows up in the interface.
  • Change the output aspect ratios (1:1, 4:5, 9:16, 16:9) in the FORMATS object.
  • Adjust max_side_px, max_images and max_file_mb in the two Settings nodes.
  • Restyle the interface by editing the CSS inside "Build studio page".
  • Add a delivery step after "Respond with image" to also push results to Slack, Telegram or Drive.

Additional info

The interface uses a single response contract: every reply carries an "ok" flag, so the page renders the same error box whether the failure came back as 400 (bad input), 502 (Gemini refused) or 200 with no image. Nothing leaves your n8n instance except the Gemini API call.