AI Image Generation

AI
Results

Generate AI images with progress tracking, variation selection, download and share actions. Features animated progress bar and selectable image grid.

Preview

Full-featured image generation with progress and variations

Image Generation
DALL-E 3

Click generate

Custom Model

Display a different AI model name

Image Generation
Midjourney

Click generate

More Variations

Show 8 variation thumbnails instead of 4

Image Generation
DALL-E 3
Generated Image

Props

AIImageGeneration component API reference

PropTypeDefaultDescription
modelNamestring'DALL-E 3'Model name to display in the header badge
defaultGeneratingbooleanfalseInitial generating state
defaultProgressnumber0Initial progress value (0-100)
defaultSelectedVariationnumber0Initial selected variation index
variationCountnumber4Number of variations to show in the grid
onGenerate() => voidCallback when generate button is clicked
onDownload(variationIndex: number) => voidCallback when download button is clicked
onShare(variationIndex: number) => voidCallback when share button is clicked
onVariationSelect(index: number) => voidCallback when a variation is selected
classNamestringAdditional CSS classes for the container

Usage

Import and implementation example

import { AIImageGeneration } from '@/blocks/ai-tools/ai-image-generation'

export default function Example() {
  const handleGenerate = () => {
    // Call your AI image generation API
    console.log('Starting generation...')
  }

  const handleDownload = (variationIndex: number) => {
    // Download the selected variation
    console.log('Downloading variation:', variationIndex)
  }

  const handleShare = (variationIndex: number) => {
    // Share the selected variation
    console.log('Sharing variation:', variationIndex)
  }

  return (
    <AIImageGeneration
      modelName="DALL-E 3"
      variationCount={4}
      onGenerate={handleGenerate}
      onDownload={handleDownload}
      onShare={handleShare}
      onVariationSelect={(i) => console.log('Selected:', i)}
    />
  )
}

Built With

1 component

This block uses the following UI components from the design system:

Features

Built-in functionality

  • Progress tracking: Animated progress bar with percentage indicator during generation
  • Variation grid: Selectable grid of image variations after generation completes
  • Download & share: Action buttons appear after generation for selected variation
  • Generate/regenerate: Smart button label changes based on generation state
  • Loading states: Animated spinner and disabled state during generation
  • Square aspect ratio: Consistent image preview area for all generations
  • Model badge: Shows AI model name in header with violet badge
  • Ring selection: Selected variation highlighted with indigo ring
  • Dark mode: Full dark mode support with proper gradients

Accessibility

Accessibility considerations

ARIA Attributes

Generate button is a native button elementVariation thumbnails are clickable buttonsDownload and share are icon buttons with semantic meaning

Keyboard Navigation

KeyAction
TabNavigate between generate, variation, download, and share buttons
Enter / SpaceActivate the focused button

Notes

  • Disabled state prevents interaction during generation
  • Visual progress indicator shows generation status
  • Selected variation has visible ring focus indicator
  • Consider adding aria-label to icon-only download/share buttons
  • Consider adding role="progressbar" with aria-valuenow for progress