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
| Prop | Type | Default | Description |
|---|---|---|---|
modelName | string | 'DALL-E 3' | Model name to display in the header badge |
defaultGenerating | boolean | false | Initial generating state |
defaultProgress | number | 0 | Initial progress value (0-100) |
defaultSelectedVariation | number | 0 | Initial selected variation index |
variationCount | number | 4 | Number of variations to show in the grid |
onGenerate | () => void | — | Callback when generate button is clicked |
onDownload | (variationIndex: number) => void | — | Callback when download button is clicked |
onShare | (variationIndex: number) => void | — | Callback when share button is clicked |
onVariationSelect | (index: number) => void | — | Callback when a variation is selected |
className | string | — | Additional 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)}
/>
)
}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 meaningKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between generate, variation, download, and share buttons |
| Enter / Space | Activate 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