AI Model Node

Image Generation Node

Generate images from text descriptions using state-of-the-art AI models like Flux Pro and Gemini. Convert any text prompt into high-quality images programmatically.

Overview

The Image Generation Node converts text prompts into images using AI models. It accepts a text description as input and outputs a base64-encoded image that can be displayed, downloaded, or passed to other nodes for further processing.

Use Cases

Marketing Assets - Generate product images, social media graphics, ad creatives
Data Visualization - Create charts, infographics, threat intelligence maps
Content Generation - Produce illustrations for blog posts or documentation
Security Reporting - Generate visual threat landscape diagrams
Compliance Documentation - Create workflow diagrams for audit reports

Node Characteristics

•
Input: Text prompt (from Start node, Prompt node, or any text source)
•
Output: Base64-encoded image (PNG, JPEG, or WEBP format)
•
Processing Time: 3-30 seconds depending on model and complexity
•
Handles: One input handle (left), one output handle (right)

Configuration

Required Parameters

model

Type: string
Required: Yes
Options: black-forest-labs/flux-1.1-pro, black-forest-labs/flux-pro, gemini-2.5-flash-image
Description: AI model to use for image generation

prompt

Type: string
Source: Received from connected input node
Description: Text description of the image to generate
Example: "Professional infographic showing GDPR data subject rights, modern flat design"

Optional Parameters

aspectRatio

Type: string
Default: "1:1"
Options: "1:1", "16:9", "9:16", "4:3", "3:4", "21:9"
Description: Image dimensions ratio

outputFormat

Type: string
Default: "png"
Options: "png", "jpeg", "webp"
Description: Output image format

Configuration Tips

Be specific - Include style, colors, composition, and mood in your prompts for better results.

Choose the right model - Use Flux 1.1 Pro for speed, Flux Pro for maximum quality, Gemini Flash for quick prototypes.

Aspect ratio matters - Square (1:1) is fastest, ultrawide (21:9) takes longest.

Node Data Interface

TypeScript Definition

export type ImageGenerationNodeData = {
  // Configuration
  model: string                    // AI model identifier
  aspectRatio?: string             // Image dimensions ratio
  outputFormat?: string            // Output format (png/jpeg/webp)

  // Execution state (managed by system)
  status?: "idle" | "running" | "completed" | "error"
  output?: {
    url?: string                   // Base64 data URL
    images?: string[]              // Array of base64 images
    text?: string                  // Optional description
  }
  error?: string
}

Node Props:

import { NodeProps } from "@xyflow/react"

export function ImageGenerationNode({ data, id }: NodeProps<ImageGenerationNodeData>) {
  // Component implementation
  return (
    <div className="image-generation-node">
      <Handle type="target" position={Position.Left} />
      <Handle type="source" position={Position.Right} />
      {/* Node UI */}
    </div>
  )
}

Usage Examples

Example 1: Basic Image Generation

Simple workflow with prompt and image generation

const workflow = {
  nodes: [
    {
      id: "start-1",
      type: "start",
      data: {
        input: "cybersecurity threat landscape"
      }
    },
    {
      id: "prompt-1",
      type: "prompt",
      data: {
        template: "Create a professional diagram showing $input1, modern flat design"
      }
    },
    {
      id: "image-1",
      type: "imageGeneration",
      data: {
        model: "black-forest-labs/flux-1.1-pro",
        aspectRatio: "16:9"
      }
    },
    {
      id: "end-1",
      type: "end"
    }
  ],
  edges: [
    { id: "e1", source: "start-1", target: "prompt-1" },
    { id: "e2", source: "prompt-1", target: "image-1" },
    { id: "e3", source: "image-1", target: "end-1" }
  ]
}

Result: Generates a 16:9 diagram image of cybersecurity threat landscape

Example 2: AI-Enhanced Prompts

Use Text Model to refine the image prompt

const workflow = {
  nodes: [
    {
      id: "start-1",
      type: "start",
      data: { input: "GDPR compliance" }
    },
    {
      id: "text-1",
      type: "textModel",
      data: {
        model: "gpt-4",
        prompt: "Create a detailed image prompt for a professional infographic about $input1"
      }
    },
    {
      id: "image-1",
      type: "imageGeneration",
      data: {
        model: "black-forest-labs/flux-1.1-pro",
        aspectRatio: "1:1"
      }
    }
  ],
  edges: [
    { id: "e1", source: "start-1", target: "text-1" },
    { id: "e2", source: "text-1", target: "image-1" }
  ]
}

Result: GPT-4 creates an enhanced prompt, then generates a high-quality infographic

Example 3: Security Report Visualization

Generate threat maps from security data

const workflow = {
  nodes: [
    {
      id: "http-1",
      type: "httpRequest",
      data: {
        url: "https://api.example.com/threat-data",
        method: "GET"
      }
    },
    {
      id: "js-1",
      type: "javascript",
      data: {
        code: "return JSON.parse(input1).threats.map(t => t.type).join(', ')"
      }
    },
    {
      id: "prompt-1",
      type: "prompt",
      data: {
        template: "Create a heat map visualization showing these cyber threats: $input1"
      }
    },
    {
      id: "image-1",
      type: "imageGeneration",
      data: {
        model: "gemini-2.5-flash-image", // Fast for real-time reports
        aspectRatio: "16:9"
      }
    }
  ],
  edges: [
    { id: "e1", source: "http-1", target: "js-1" },
    { id: "e2", source: "js-1", target: "prompt-1" },
    { id: "e3", source: "prompt-1", target: "image-1" }
  ]
}

Result: Fetches live threat data and generates a visual heat map for security reports

Supported Models

Flux Pro Models (Recommended)

via FAL API - Industry-leading image quality

black-forest-labs/flux-1.1-pro

Speed: Fast (5-10s)
Quality: ⭐⭐⭐⭐⭐
Best For: Professional images, marketing assets

black-forest-labs/flux-pro

Speed: Medium (10-20s)
Quality: ⭐⭐⭐⭐⭐
Best For: Maximum quality, detailed illustrations

Google Gemini Models (Alternative)

via Google AI - Fast and cost-effective

gemini-2.5-flash-image

Speed: Very Fast (3-7s)
Quality: ⭐⭐⭐⭐
Best For: Quick diagrams, prototypes, data visualizations

API Keys Required

You need API keys from the respective providers:

FAL (for Flux models): Get API key at fal.ai
Google AI (for Gemini): Get API key at Google AI Studio

Add your API keys via Settings → API Keys in the TopFlow builder interface.

Validation Rules

Errors (Block Execution)

❌
No Model Selected
Must select a valid image generation model
❌
Missing API Key
API key for selected provider (FAL or Google AI) must be configured
❌
No Input Connection
Image Generation node must receive prompt from upstream node

Warnings

⚠️
Empty Prompt
Prompt appears to be empty. Image generation may fail or produce unexpected results.
⚠️
Very Short Prompt
Prompts with less than 10 characters may produce low-quality images.

Best Practices

Writing Effective Prompts

Good Prompt

"Professional infographic showing GDPR data subject rights: access, rectification, erasure, restriction, portability, objection. Modern flat design, blue and white color scheme, icons for each right, clean layout"

✅ Specific style, colors, elements described

Poor Prompt

"GDPR diagram"

❌ Too vague, no style or detail

Prompt Writing Tips

Be specific: Describe style, colors, composition, and mood
Include context: "professional", "technical", "educational", etc.
Specify format: diagram, infographic, illustration, chart, map
Mention colors: Color schemes improve consistency
Add adjectives: Clean, modern, detailed, minimalist, etc.

✓
Use Flux 1.1 Pro for best balance of speed and quality
✓
Test prompts with quick models first (Gemini Flash)
✓
Cache generated images to avoid regenerating
✓
Use conditional nodes to control when images generate
✓
Validate input prompts to prevent injection attacks

Don't

✗
Don't use vague prompts like "make an image"
✗
Don't regenerate images on every workflow run (cache them)
✗
Don't use ultrawide aspect ratios unless necessary (slow)
✗
Don't pass sensitive data in prompts (may be logged)
✗
Don't expect instant results (allow 5-30s processing time)

Troubleshooting

Error: "API key missing"

Cause: No API key configured for the selected model provider.

Solution: Click "API Keys" in the top toolbar and add your FAL or Google AI API key. Make sure you've selected the correct provider for your model.

Error: "Generation failed"

Possible Causes:

• Invalid or expired API key
• Rate limit exceeded (too many requests)
• Content filter triggered (inappropriate prompt)
• Network timeout or connectivity issue

Solutions: Verify API key is valid, wait 1 minute for rate limit reset, rephrase prompt to avoid content filters, or check network connection.

Issue: Image quality is poor

Cause: Vague prompt or suboptimal model selected.

Solution: Switch to black-forest-labs/flux-1.1-pro for better quality. Add more descriptive details to your prompt (style, colors, composition, specific elements). Use a Text Model node to enhance the prompt before generation.

Issue: Generation is too slow

Cause: High-quality model or large aspect ratio selected.

Solution: Switch to gemini-2.5-flash-image for 3-5x faster generation. Use square (1:1) aspect ratio for fastest results. Consider caching results to avoid regeneration.

Output Format

Images are returned as base64-encoded data URLs in this format:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

Using the image in other nodes:

Display inline: Use the data URL directly in <img src="..." />
Download: Click the "Download" button in the node output panel
Upload to storage: Use an HTTP Request node to upload to S3, Cloudinary, etc.

Related Nodes

Text Model Node

Generate or refine image prompts with AI

View Documentation

Prompt Node

Template-based prompt generation for images

View Documentation

Next Steps

Continue learning about image generation and related node types:

Image Generation Tutorials View All Nodes Workflow Patterns