Image Gen Loader
Holds the frame while FLUX generates: latent drift, film grain and progress that resolve into the final image.
Your image will appear here
In use
Every result of a Playground run, in the grid above the prompt: queued, generating, then revealed. The Image Edit Studio shows each edit in one, over its parent.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Paint over what to change. Tab reaches the marks: arrow keys move one, Enter edits its note, Delete removes it.
Your video will appear here
Installation
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/image-gen-loader.jsonImageGenLoader
Every layer, assembled. Also takes className, style and render.
| Prop | Type | Default |
|---|---|---|
| status | "idle" | "queued" | "generating" | "ready" | "moderated" | "error"Where the generation is. A "ready" image that fails to load shows as "error". | — |
| progress | number0–1. Omit while the backend reports none. | — |
| src | stringFinal image, revealed once status is "ready" and it loads. | — |
| alt | stringDescribe the image, e.g. with its prompt. | — |
| aspectRatio | number | stringA number, CSS "16 / 9", or the API's "16:9". | 1 |
| source | stringImage worked from: an edit's input or the previous result. | — |
| error | ReactNodeWhat went wrong, while status is "error" or "moderated". | — |
| onRetry | () => voidRenders a retry action on failure, except when moderated. | — |
| actions | ReactNodeShown on the revealed image. | — |
| announcements | Partial<Record<status, string>>Screen reader messages as the generation moves along. | — |
Parts
| Prop | Type | Default |
|---|---|---|
| ImageGenLoaderRoot | ImageGenLoaderRootPropsThe frame and its state. Takes status, progress and aspectRatio; layers stack in the order you write them. | — |
| ImageGenLoaderSource | <img> propsImage worked from: blurred while busy, dimmed on failure. | — |
| ImageGenLoaderLatent | <div> propsColor field in --chart-1…4 that sharpens with progress. | — |
| ImageGenLoaderAnnotations | { groups?, cursor?, track? }Fake detections in --primary. groups replaces them: boxes in %, or a function of the ratio. | — |
| ImageGenLoaderGrain | <div> propsFilm grain, cleared once the image is revealed. | — |
| ImageGenLoaderProgress | <div> propsPercent badge, bottom right, while progress is reported. | — |
| ImageGenLoaderImage | <img> propsThe result, revealed once ready and loaded. | — |
| ImageGenLoaderIdle | <div> propsShown before a run. Children replace the copy. | — |
| ImageGenLoaderError | { label?, onRetry?, retryLabel? }Failure frame. Children are the message. | — |
| ImageGenLoaderActions | <div> propsShown on the revealed image, top right. | — |
| useImageGenLoader | () => { status, progress, busy, inView, … }The root's state, for your own layers. | — |
useBflGeneration
Submits a task, polls it until it settles and maps each result onto the loader. Returns loader to spread onto the component, plus generate, retry and busy.
| Prop | Type | Default |
|---|---|---|
| poll | (task, signal) => Promise<BflResult>Fetches the task's polling_url, through your server. Called until the task settles. | — |
| interval | numberBetween polls, in ms. | 500 |