AI Image Generation Examples

AI-Generated Images

Explore different AI styles, variations, and alternatives. All images are generated on-demand and cached for optimal performance.

Image Styles

Photorealistic Style

Ultra-realistic photography perfect for professional projects

Code Example

<img src="/api/image/800x600-modern-office-workspace?provider=ai&style=photo" alt="Modern office" />

Minimal Style

Clean, simple designs with neutral backgrounds

Code Example

<img src="/api/image/800x600-coffee-cup-on-desk?provider=ai&style=minimal" alt="Coffee cup" />

Dark Mode Optimized

Images designed specifically for dark interfaces

Code Example

<img src="/api/image/800x600-laptop-coding-setup?provider=ai&style=dark" alt="Coding setup" />

Illustration Style

Artistic illustrations and creative designs

Code Example

<img src="/api/image/800x600-teamwork-collaboration?provider=ai&style=illustration" alt="Teamwork" />

Image Variations

Generate multiple variations of the same concept

Original

Variation 1

Variation 2

Variation 3

Code Example

<!-- Original -->
<img src="/api/image/600x400-sunset-over-mountains?provider=ai&style=photo" />

<!-- Variations -->
<img src="/api/image/600x400-sunset-over-mountains?provider=ai&style=photo&variation=1" />
<img src="/api/image/600x400-sunset-over-mountains?provider=ai&style=photo&variation=2" />
<img src="/api/image/600x400-sunset-over-mountains?provider=ai&style=photo&variation=3" />

💡 Tip: Variations are linked to the original image and use the same generation concept. Perfect for A/B testing or giving users choices.

Alternative Images

Different images for the same query from public cache

Alternative 1

Alternative 2

Alternative 3

Alternative 4

Code Example

<!-- Different alternatives for the same query -->
<img src="/api/image/400x400-professional-headshot?provider=ai&style=photo&alt=1" />
<img src="/api/image/400x400-professional-headshot?provider=ai&style=photo&alt=2" />
<img src="/api/image/400x400-professional-headshot?provider=ai&style=photo&alt=3" />
<img src="/api/image/400x400-professional-headshot?provider=ai&style=photo&alt=4" />

💡 Tip: Alternatives leverage the public cache to save quota. If other users have generated similar images, you'll get those instead of new generations.

Framework Integration

React Component

import { useState } from 'react';

function AIImage({ query, style = 'photo', width = 800, height = 600 }) {
  const imageUrl = `/api/image/${width}x${height}-${query}?provider=ai&style=${style}`;
  
  return (
    <img 
      src={imageUrl}
      alt={query}
      style={{ width: '100%', height: 'auto' }}
    />
  );
}

// Usage
<AIImage query="modern office" style="photo" width={800} height={600} />