1. Opening Problem Statement
Meet Sarah, a freelance graphic designer working with multiple clients daily. She often spends hours trying to replicate the unique visual style of a client’s branding from one image onto new marketing materials. This manual process is tedious, error-prone, and limits her ability to quickly produce diverse design variants. Imagine Sarah manually describing styles, searching for matching assets, or hiring costly artists to create consistent designs. This workflow provides a smart automation solution that leverages Google’s advanced AI models to instantly capture and recreate image styles, saving Sarah potentially hours per task and reducing costly design iterations.
2. What This Automation Does
This n8n workflow automates the process of copying the visual style from a source image and applying it to generate new images based on a user’s textual prompt. Here’s exactly what happens when the workflow runs:
- Users submit a source image URL and a target image description through a form.
- The source image is downloaded and passed to Google’s Gemini 2.0 model, which analyzes and outputs a detailed description of the image’s visual style without referencing characters or IP.
- The detailed style description is combined with the user’s target prompt and sent to Google’s Imagen 3.0 model to generate 1 to 4 styled images.
- The generated images are uploaded to Cloudinary, providing reliable CDN hosting and access.
- An HTML gallery page is dynamically created to present the generated images alongside the style reference and description.
- If an email is provided, the HTML page is sent to the user’s inbox via Gmail.
By automating this multi-step creative process, it eliminates hours of manual style analysis and recreation. Users can quickly explore design variations while ensuring consistent visual themes derived from any reference image.
3. Prerequisites ⚙️
- Google Gemini 2.0 API account for image style analysis
- Google Imagen 3.0 API access for AI-powered image generation
- Cloudinary account for image hosting and CDN
- Gmail account with OAuth for sending result emails
- n8n account to build and run the workflow (self-hosting possible via platforms like Hostinger https://buldrr.com/hostinger)
4. Step-by-Step Guide
Step 1: Trigger the Workflow with Form Submission
Navigate in n8n to create a new workflow.
Add a Form Trigger node (“On form submission”) and set up a webhook path, e.g., style-copy-with-imagen3.
Configure the form fields as follows to capture user inputs:
- SourceImage (URL, required): The public URL of the image with style to copy.
- TargetPrompt (string, required): Description of the new image to generate.
- Number of Images (number, optional): How many images to generate from 1 to 4.
- Your Email (Optional) (email): Receive results by email.
This form ensures users can provide all required data to initiate the workflow. On submission, the webhook triggers the workflow.
Common mistake: Forgetting to set the webhook URL publicly accessible will cause the form not to trigger.
Step 2: Validate the Submitted Image URL
Add an IF node named “Form Validation” connected to the form trigger.
Configure it to check if SourceImage is a valid URL using:
{{$json.SourceImage.isUrl()}}If the URL is true, continue; if false, route to a “Retry Form” node to prompt user to re-enter a valid URL.
This validation loop improves user experience by preventing invalid URL inputs.
Step 3: Set Workflow Variables
Add a Set node called “Variables” following the validation.
Assign variables:
sourceStyleUrl→ SourceImage URLtargetPrompt→ Target PromptnumberSamples→ Number of images to generate (defaults to 1, max 4 enforced)email→ User’s email if provided
This node prepares clean variables for downstream nodes in the workflow.
Step 4: Download the Source Image
Add an HTTP Request node named “Download Image”.
Configure it to GET the URL stored in sourceStyleUrl variable.
The downloaded image data is used as the input for style analysis.
Tip: Verify that the image URL is publicly accessible to avoid connection errors.
Step 5: Convert Image to Base64 for Gemini Input
Add an Extract from File node called “Image to Base64”.
Configure to convert the binary image data from “Download Image” into a base64 string property.
This encoding is required to send the image data inline to Gemini 2.0 for style description.
Step 6: Use Gemini 2.0 to Analyze Image Style
Add an HTTP Request node named “Gemini 2.0”.
Configure a POST request to https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent.
In the JSON body, include:
{
"contents": [{
"parts": [
{
"inline_data": {
"mime_type": "{{ $('Download Image').item.binary.data.mimeType }}",
"data": "{{ $json.data }}"
}
},
{"text": "Describe the visual style of this image. Do not include any character names or IP in the description. Include names of any famous artists associated with this style if known."}
]
}]
}This call returns a textual description capturing the image’s visual style, which is key for guided image generation.
Step 7: Use Imagen 3.0 to Generate Styled Images
Add an HTTP Request node “Imagen 3.0”.
POST to https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict with JSON body:
{
"instances": [
{
"prompt": [
$json.candidates[0].content.parts[0].text,
`Generate the following image: ${$('Variables').first().json.targetPrompt}`
].join(' ')
}
],
"parameters": {
"sampleCount": $('Variables').first().json.numberSamples.toNumber()
}
}The response includes 1-4 generated images styled according to the analysis.
Step 8: Split Output for Processing Each Image
Add a Split Out node with fieldToSplitOut set to “predictions” from the Imagen node’s output.
This separates each generated image for individual processing such as conversion and upload.
Step 9: Convert Base64 Images to Binary
Add a Convert to File node wired to “Split Out.”
Set it to convert each image’s base64 string to binary file data using JSON mimeType to set the file extension.
Step 10: Upload Images to Cloudinary
Add an HTTP Request node “Upload to Cloudinary”.
Configure POST to Cloudinary’s upload endpoint with multipart form-data:
- Parameter “file” containing the binary image data.
- Query parameter “upload_preset” set to your Cloudinary preset for unsigned uploads.
Cloudinary returns hosted URLs for display and sharing.
Step 11: Generate HTML Gallery Page
Add an HTML node named “Generate HTML.”
Use HTML template that creates a gallery with the generated images linking to their Cloudinary URLs. Include the style prompt description and the source style image as references.
This page is what users will view and download.
Step 12: Convert HTML to File for Download
Add a Convert to File node “Convert to File1” and set encoding to UTF-8 and filename based on the target prompt.
This allows the HTML page to be treated as a downloadable file.
Step 13: Conditional Email Sending
Add an If node “Has Email?” to check if an email address was provided.
If true, connect to a Gmail node “Send Results to Email”.
Configure Gmail node using OAuth, sending the HTML content with subject referencing execution ID.
If no email is given, skip sending but proceed to form completion.
Step 14: Complete the Form Submission
Add a Form node to serve a completion page after processing.
Show a success message and trigger download of the HTML gallery file.
5. Customizations ✏️
- Change Image CDN: Swap the Cloudinary “Upload to Cloudinary” HTTP Request node with another image hosting API by updating the POST URL and parameters.
- Adjust Number of Images: Modify the “numberSamples” assignment expression in “Variables” node to allow higher max images (e.g., max 8), then adjust the Imagen 3.0 node accordingly.
- Auto Trigger via Webhook: Replace the “On form submission” Form Trigger node with a Webhook node to automate image style transfer on system events or API calls.
- Change Email Provider: Replace Gmail node with SendGrid or other email service by configuring a new HTTP Request node for email sending.
- Enhance Style Description: Update the prompt text in “Gemini 2.0” node to include more specific style elements or exclude/include artistic eras for more tailored style transfer results.
6. Troubleshooting 🔧
Problem: “SourceImage is not a valid URL or returns 404 errors.”
Cause: The user entered a non-public or incorrect image URL.
Solution: Ensure the image URL is accessible publicly and properly formatted. Validate again in the “Form Validation” node and use the “Retry Form” node if invalid.
Problem: “Failed API calls to Gemini 2.0 or Imagen 3.0 with authentication errors.”
Cause: Invalid or expired API credentials.
Solution: Check your Google API credential setup in n8n and reauthenticate the GoogleGemini and Google Imagen API nodes.
Problem: “Upload to Cloudinary fails with 401 or upload preset errors.”
Cause: Incorrect Cloudinary preset or authentication configuration.
Solution: Verify that the Cloudinary “upload_preset” exists and is configured for unsigned uploads. Double-check API key and secret if used.
7. Pre-Production Checklist ✅
- Confirm all API credentials (Google Gemini, Imagen, Cloudinary, Gmail) are correctly configured and tested.
- Test the form submission with valid publicly accessible image URLs.
- Verify that generated images appear in Cloudinary and HTML gallery renders properly.
- Test email sending functionality with a real email address.
- Double-check webhook URL accessibility if externally triggered.
8. Deployment Guide
Activate the workflow by turning it ON in n8n after completing setup.
Share the form webhook URL publicly or embed the form on your website for user submissions.
Monitor workflow executions under n8n’s execution panel to ensure smooth operation.
Notify users upon completion automatically via email if provided.
9. FAQs
Q: Can I use another AI model instead of Google Gemini or Imagen?
A: Yes, you can replace those HTTP Request nodes with calls to other AI services compatible with image understanding or generation, though results may vary.
Q: Does this workflow consume a lot of API credits?
A: It depends on your usage frequency and API quotas. Generating multiple images per request raises usage. Monitor your Google API usage.
Q: Is my image data safe?
A: All data is transmitted securely over HTTPS. However, be mindful about submitting sensitive proprietary images to external AI APIs.
Q: Can this workflow handle bulk image style transfers?
A: This workflow is designed for single submissions. For bulk or batch processing, consider automating with webhook triggers and queuing.
10. Conclusion
By following this guide, you’ve built an n8n workflow capable of intelligently copying the style of a source image and generating uniquely styled new images with Google’s Imagen 3.0 AI. This automation saves designers like Sarah potentially hours on creative tasks and empowers exploring diverse visual styles with minimal manual effort.
Next, you might automate batch design iterations, integrate style-based video generation, or build a marketing asset management system powered by AI.
Give this workflow a try now and elevate your design process with AI automation!