Streaming

ImageGenerationProgress

Full lifecycle UI for an image-generation job — pending, prompting, generating, denoising, upscaling, done, and error. In-flight stages render a blur-to-sharp preview under an acid-green overlay with a stage label, progress bar, and percentage. On done the final image fades in clean; on error a red overlay with retry takes over.

Sourcesrc/components/ai/image-generation-progress.tsx

Denoising (in-flight)

An intermediate stage with a progress percentage. The overlay renders a brand-tinted bar and the blur amount scales with the remaining progress.

prompt
A neon cyberpunk cat in Tokyo rain, 35mm film
denoising78%
stage · denoisingseed · 42

Done (final image)

On stage='done' the overlay disappears and the image fades in at full sharpness. Pass finalUrl to swap in the production asset once upscaling completes.

prompt
Autumn forest floor, golden hour, 85mm bokeh
Autumn forest floor, golden hour, 85mm bokeh
stage · doneseed · 1337

Pending

Queued jobs show a staggered 3×3 grid of pulsing dots instead of a blurred preview.

prompt
Waiting in queue…
stage · queued

Error with retry

stage='error' dims the preview, lays a danger card over it, and optionally surfaces an onRetry handler.

prompt
A neon cyberpunk cat in Tokyo rain, 35mm film
generation failed
Upstream model returned 503. Please retry.
stage · error