Generation Progress
Steps, ETA, live latent preview, queue. Pro · Image generation › Results and editing
Step N/M, percent, ETA, a live latent preview that sharpens as it runs, queue position and cancel.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add generation-progressnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { GenerationProgress } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
status | 'queued' | 'running' | 'done' | 'cancelled' | 'error' | 'running' | Job state; sets the icon, the bar (indeterminate while queued) and the line under the heading. |
step | number | 0 | Sampling steps completed, clamped to 0–totalSteps. |
totalSteps | number | 30 | Sampling steps in the job; the bar fills as step / totalSteps. |
queuePosition | number | Position in the queue while queued (1 = next). | |
eta | number | Seconds left. Omit to estimate from the pace of the steps. | |
previewSrc | string | Latent preview image from the backend (e.g. TAESD). Without it a procedural preview sharpens from prompt + seed. | |
prompt | string | Prompt the procedural preview is painted from. The preview shows only when this or previewSrc is set. | |
seed | number | 0 | Seed of the procedural preview. |
width | number | 1024 | Size of the generation; sets the preview aspect ratio. |
height | number | 1024 | Height of the generation; with width sets the preview aspect ratio. |
title | ReactNode | Heading next to the status, e.g. the prompt or a job name. | |
message | ReactNode | Error details when status is error. | |
onCancel | () => void | Adds a Cancel button while the job is queued or running; called when it is clicked. | |
onRetry | () => void | Adds a Retry button to a failed or cancelled job, in its row; called when it is clicked. | |
variant | 'inline' | 'overlay' | 'inline' | inline is a row for lists and sidebars; overlay covers its positioned container with the preview. |
locale | string | BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's. | |
labels | Partial<GenerationProgressLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Image Result Grid — Result gallery with actions and a lightbox
- Image Compare — Before/after comparison: slider, side by side, overlay
- Inpaint Canvas — Inpainting mask and canvas outpainting
- Generation History — Generation history by day, with filters
- Image Adjustments — Color grading: upload, fit and seven filter sliders
- Prompt Editor — Prompt and negative prompt: weights, LoRA, autocomplete, token count
- Generation Settings — Model, sampler, steps, CFG, size, presets
- Aspect Ratio Picker — Aspect ratio and exact size
- Seed Input — Seed: random, fixed, increment
- LoRA Stack — LoRA stack: strengths, toggles, order, trigger words
- Style Presets — Style cards with previews and weights
- Reference Image Input — Reference image for img2img and ControlNet
Previous: Reference Image Input · Next: Image Result Grid · All Image generation