Advanced Image Generation Features

📚 Overview

The ImageGenerationService provides advanced AI-powered image manipulation and generation capabilities beyond standard text-to-image generation. These features enable sophisticated workflows including batch processing, precise editing, resolution enhancement, artistic transformations, and guided generation.

🎯 Key Features

1. Batch Generation 🔢

Generate multiple images simultaneously with intelligent queue management.

2. Inpainting 🎨

Edit specific regions of existing images using mask-based selection.

3. Outpainting 🖼️

Extend images beyond their original boundaries while maintaining style consistency.

4. Upscaling 📈

Intelligently increase image resolution (2x, 4x, 8x) with quality enhancement.

5. Style Transfer 🎭

Apply artistic styles to existing images using reference images or text prompts.

6. ControlNet 🎯

Guide image generation using edge detection, pose estimation, or depth maps.

7. Real-time Generation ⚡

Ultra-fast image generation using SDXL Turbo for instant previews and iterations.

🚀 Getting Started

Installation

The advanced features are part of the core ImageGenerationService:

import { ImageGenerationService } from '@gograb-ai/services';

Basic Setup

import { Component, inject } from '@angular/core';
import { ImageGenerationService, ImageGenerationRequest } from '@gograb-ai';

@Component({
  selector: 'app-my-component',
  standalone: true
})
export class MyComponent {
  private imageService = inject(ImageGenerationService);
}

📖 Feature Documentation

Batch Generation

Generate multiple images simultaneously with automatic queue management and concurrent limit respect.

Usage

// Create multiple generation requests
const requests: ImageGenerationRequest[] = [
  { prompt: 'sunset over mountains', provider: ImageProvider.DALLE },
  { prompt: 'futuristic cityscape', provider: ImageProvider.STABLE_DIFFUSION },
  { prompt: 'abstract art pattern', provider: ImageProvider.FLUX }
];

// Generate all images in batch
this.imageService.generateBatch(requests).subscribe({
  next: (responses) => {
    console.log(`Generated ${responses.length} images`);
    responses.forEach((response, index) => {
      if (response.success) {
        console.log(`Image ${index + 1}: ${response.images[0].url}`);
      }
    });
  },
  error: (error) => console.error('Batch generation failed:', error)
});

Key Features

• Automatic Queue Management: Respects concurrent generation limits
• Error Handling: Individual failures don't stop the entire batch
• Progress Tracking: Monitor completion of each image
• Cost Optimization: Efficient parallel processing

Configuration

// Configure batch settings
this.imageService.setConfig({
  maxConcurrentGenerations: 3 // Process 3 images at a time
});

Inpainting

Edit specific regions of existing images using mask-based selection. Perfect for removing unwanted objects, fixing details, or adding new elements to specific areas.

Usage

const request: ImageGenerationRequest = {
  prompt: 'replace with a modern lamp',
  provider: ImageProvider.DALLE, // or STABLE_DIFFUSION
  initImage: 'data:image/png;base64,...', // Base64 original image
  maskImage: 'data:image/png;base64,...', // Base64 mask (white = edit area)
  strength: 0.8 // How much to change the masked area
};

this.imageService.inpaint(request).subscribe({
  next: (response) => {
    if (response.success) {
      console.log('Inpainted image:', response.images[0].url);
    }
  }
});

Supported Providers

• DALL-E 2: Full inpainting support with automatic fill
• Stable Diffusion: Advanced inpainting with fine control

Best Practices

1. Mask Quality: Use clean, high-contrast masks (white for edit areas, black for preserve)
2. Prompt Specificity: Be specific about what should appear in the masked region
3. Strength Tuning: Start with 0.7-0.8, adjust based on results
4. Context Awareness: Provide context in prompt about surrounding area

Outpainting

Extend images beyond their original boundaries while maintaining artistic style and coherence.

Usage

const request: ImageGenerationRequest = {
  prompt: 'continue the landscape with more mountains',
  provider: ImageProvider.DALLE,
  initImage: 'data:image/png;base64,...', // Original image
  width: 1792, // New width (larger than original)
  height: 1024 // New height
};

this.imageService.outpaint(request).subscribe({
  next: (response) => {
    if (response.success) {
      console.log('Extended image:', response.images[0].url);
    }
  }
});

Supported Providers

• DALL-E 2: Native outpainting support with seamless blending

Use Cases

• Expand Compositions: Add more context around existing images
• Create Panoramas: Extend landscape photos
• Fix Aspect Ratios: Adjust images for different display formats
• Add Space: Create room for text overlays or additional elements

Upscaling

Intelligently increase image resolution with quality enhancement and detail preservation.

Usage

const request: ImageGenerationRequest = {
  prompt: 'enhance and upscale',
  provider: ImageProvider.STABLE_DIFFUSION,
  initImage: 'data:image/png;base64,...', // Original low-res image
  quality: ImageQuality.ULTRA
};

// Upscale by 4x (2x, 4x, or 8x supported)
this.imageService.upscale(request, 4).subscribe({
  next: (response) => {
    if (response.success) {
      const upscaled = response.images[0];
      console.log(`Upscaled to ${upscaled.width}x${upscaled.height}`);
    }
  }
});

Upscaling Factors

• 2x: Quick enhancement, subtle improvements
• 4x: Standard upscaling, good balance
• 8x: Maximum quality, significant processing time

Supported Providers

• Stability AI: Advanced upscaling with detail enhancement
• Stable Diffusion: img2img-based upscaling with refinement

Best Practices

1. Start Small: Test with 2x before jumping to 8x
2. Quality Settings: Use ImageQuality.HIGH or ULTRA for best results
3. Prompt Guidance: Provide context about image content for better detail reconstruction
4. Batch Processing: Upscaling is resource-intensive; use batch generation wisely

Style Transfer

Apply artistic styles to existing images using reference images or descriptive prompts.

Usage

const request: ImageGenerationRequest = {
  prompt: 'transform into impressionist painting style like Monet',
  provider: ImageProvider.STABLE_DIFFUSION, // or FLUX
  initImage: 'data:image/png;base64,...', // Original photo
  style: ImageStyle.IMPRESSIONIST,
  strength: 0.7, // How much to transform (0.1-1.0)
  guidanceScale: 7.5 // How closely to follow the prompt
};

this.imageService.styleTransfer(request).subscribe({
  next: (response) => {
    if (response.success) {
      console.log('Styled image:', response.images[0].url);
    }
  }
});

Supported Providers

• Stable Diffusion: img2img with style control
• FLUX: High-quality style transfer

Style Parameters

strength: 0.3-0.5  // Subtle style hints
strength: 0.5-0.7  // Balanced transformation
strength: 0.7-0.9  // Strong style application

Use Cases

• Artistic Transformations: Convert photos to paintings
• Brand Consistency: Apply consistent visual style across images
• Creative Exploration: Experiment with different artistic interpretations
• Content Adaptation: Match images to specific aesthetic requirements

ControlNet

Guide image generation using structural information from reference images (edges, poses, depth).

Usage

const request: ImageGenerationRequest = {
  prompt: 'person in futuristic armor',
  provider: ImageProvider.STABLE_DIFFUSION,
  controlNetImage: 'data:image/png;base64,...', // Edge/pose/depth map
  controlNetType: 'canny', // Type: 'canny', 'pose', 'depth', 'scribble'
  guidanceScale: 9.0 // Strong guidance from control image
};

this.imageService.controlNetGenerate(request).subscribe({
  next: (response) => {
    if (response.success) {
      console.log('ControlNet generated:', response.images[0].url);
    }
  }
});

ControlNet Types

Workflow

1. Extract Control Image:

   • Canny: Edge detection from reference
   • Pose: OpenPose skeleton extraction
   • Depth: Depth map from 3D scene or photo

2. Generate with Guidance:

   controlNetImage: extractedControlData,
   controlNetType: 'pose',
   prompt: 'astronaut in space suit' // Describe what you want
   

3. Refine Results: Adjust guidanceScale (7-15) for control strength

Real-time Generation

Ultra-fast image generation using SDXL Turbo for instant previews and rapid iteration.

Usage

const request: ImageGenerationRequest = {
  prompt: 'cyber punk character',
  style: ImageStyle.CYBERPUNK
};

// Generates in ~1 second
this.imageService.generateRealtime(request).subscribe({
  next: (response) => {
    if (response.success) {
      console.log('Real-time preview:', response.images[0].url);
    }
  }
});

Key Features

• Sub-second Generation: ~0.5-1 second generation time
• Lower Resolution: 512x512 by default (optimized for speed)
• Single-step Inference: Minimal steps for maximum speed
• Ideal for Previews: Perfect for iterative design workflows

Use Cases

• Live Previews: Show instant results as users type prompts
• Rapid Iteration: Quick exploration of different variations
• Interactive Tools: Real-time feedback in creative applications
• Concept Validation: Fast confirmation before high-quality generation

Performance Tips

// For fastest generation
const request = {
  prompt: 'your prompt',
  width: 512,  // Smaller = faster
  height: 512,
  steps: 1     // Minimum steps (set automatically)
};

🔧 Advanced Configuration

Provider-Specific Settings

// Configure for specific provider
this.imageService.setConfig({
  provider: ImageProvider.STABLE_DIFFUSION,
  defaultQuality: ImageQuality.HIGH,
  enhancePrompts: true,
  safetyFilter: true,
  maxConcurrentGenerations: 2,
  autoRetry: true,
  maxRetries: 3,
  timeoutSeconds: 120
});

Session Management

// Monitor session statistics
this.imageService.sessionStats().subscribe(stats => {
  console.log(`Generated: ${stats.imagesGenerated}`);
  console.log(`Total cost: $${stats.totalCost}`);
  console.log(`Avg time: ${stats.averageTime}s`);
  console.log(`Success rate: ${stats.successRate}%`);
});

Gallery Management

// Access generated images gallery
const gallery = this.imageService.gallery();

// Add to favorites
this.imageService.addToFavorites('image-id');

// Delete from gallery
this.imageService.deleteFromGallery('image-id');

🎭 Complete Example: Advanced Workflow

import { Component, inject, signal } from '@angular/core';
import { ImageGenerationService, ImageProvider } from '@gograb-ai';

@Component({
  selector: 'app-advanced-image-demo',
  standalone: true,
  template: `
    <div class="image-workflow">
      <!-- Step 1: Generate base image -->
      <button (click)="generateBase()">1. Generate Base</button>
      
      <!-- Step 2: Inpaint details -->
      <button (click)="inpaintDetails()" [disabled]="!baseImage()">
        2. Inpaint Details
      </button>
      
      <!-- Step 3: Upscale result -->
      <button (click)="upscaleResult()" [disabled]="!inpaintedImage()">
        3. Upscale 4x
      </button>
      
      <!-- Display results -->
      @if (finalImage()) {
        <img [src]="finalImage()" alt="Final result" />
      }
    </div>
  `
})
export class AdvancedImageDemoComponent {
  private imageService = inject(ImageGenerationService);
  
  baseImage = signal<string | null>(null);
  inpaintedImage = signal<string | null>(null);
  finalImage = signal<string | null>(null);

  async generateBase() {
    // Step 1: Generate base image with real-time preview
    this.imageService.generateRealtime({
      prompt: 'fantasy castle on a mountain',
      provider: ImageProvider.STABLE_DIFFUSION
    }).subscribe(response => {
      if (response.success) {
        this.baseImage.set(response.images[0].url);
      }
    });
  }

  async inpaintDetails() {
    // Step 2: Add details to specific area (e.g., improve sky)
    this.imageService.inpaint({
      prompt: 'dramatic sunset sky with clouds',
      provider: ImageProvider.STABLE_DIFFUSION,
      initImage: this.baseImage()!,
      maskImage: this.createSkyMask(), // Helper method to create mask
      strength: 0.75
    }).subscribe(response => {
      if (response.success) {
        this.inpaintedImage.set(response.images[0].url);
      }
    });
  }

  async upscaleResult() {
    // Step 3: Upscale to high resolution
    this.imageService.upscale({
      prompt: 'enhance details and quality',
      provider: ImageProvider.STABLE_DIFFUSION,
      initImage: this.inpaintedImage()!
    }, 4).subscribe(response => {
      if (response.success) {
        this.finalImage.set(response.images[0].url);
      }
    });
  }

  private createSkyMask(): string {
    // Helper to create mask for sky region
    // In real app, this would use canvas or image processing
    return 'data:image/png;base64,...';
  }
}

🔍 Troubleshooting

Common Issues

1. "Init image required"

Cause: Advanced features need a base image Solution: Provide initImage in your request

2. "Provider not supported"

Cause: Feature not available for selected provider Solution: Check provider compatibility table

3. "Mask image required"

Cause: Inpainting needs both image and mask Solution: Provide maskImage along with initImage

4. Slow batch processing

Cause: Too many concurrent generations Solution: Adjust maxConcurrentGenerations config

Performance Optimization

// For better performance
const optimizedConfig = {
  maxConcurrentGenerations: 2, // Don't overwhelm API
  autoRetry: true,              // Handle transient failures
  maxRetries: 2,                // Limit retry attempts
  timeoutSeconds: 90            // Reasonable timeout
};

📊 Provider Compatibility Matrix

🎯 Best Practices

1. Choose the Right Feature

• Quick Edits: Use inpainting for targeted changes
• Expansion: Use outpainting to add context
• Quality Boost: Use upscaling for resolution
• Style Change: Use style transfer for artistic effects
• Structure Control: Use ControlNet for precise guidance
• Fast Iteration: Use real-time for exploration

2. Optimize Workflows

• Start with real-time generation for concept validation
• Use inpainting for refinements
• Apply upscaling as final step
• Batch similar requests for efficiency

3. Cost Management

• Use real-time mode for development/testing
• Reserve high-quality generation for final outputs
• Monitor session stats to track usage
• Leverage batch generation for bulk operations

4. Quality Control

• Test prompts with real-time first
• Iterate on smaller sizes before upscaling
• Use appropriate guidance scales (7-15 typical range)
• Review intermediate results in multi-step workflows

🚀 Next Steps

• Basic Image Generation: Learn fundamental image generation
• AI Orchestrator: Intelligent model selection and routing
• Video Generation: Explore AI video creation
• API Reference: Detailed API documentation

Last updated: October 2025 - GoGrab AI Platform v3.0