Gen Grid
A batch of generations from one prompt, laid out to fit how many there are, with one to pick.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
In use
The Playground's results: a run's images, one task each. Pick one to reuse its seed, edit it or animate it.
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/gen-grid.jsonGenGrid
| Prop | Type | Default |
|---|---|---|
| value / defaultValue | string | nullThe picked item's value, or null. Controlled with onValueChange. | null |
| onValueChange | (value: string | null) => voidMakes revealed images pickable by click. Picking the picked one clears it. | — |
| columns | numberDefaults to fit the children: one, up to three in a row, then a square-ish grid. | — |
GenGridItem
| Prop | Type | Default |
|---|---|---|
| value | stringIdentifies the item when picked. | — |
| …ImageGenLoaderProps | status, progress, src, alt, …Everything ImageGenLoader takes; spread a loader from useBflBatch. | — |
useBflBatch
FLUX makes one image per request, so a batch is one task per image, polled side by side. Takes the same poll and interval as useBflGeneration.
| Prop | Type | Default |
|---|---|---|
| generate | (count, submit: (index, signal) => Promise<BflTask>) => PromiseStarts one task per image, replacing the batch in flight. Vary each by index, e.g. its seed. | — |
| loaders | ImageGenLoaderProps[]One per image, each retrying itself on failure. | — |
| items / busy | ImageGenResult[] / booleanEach image's state, and whether any is still in flight. | — |
| retry | (index: number) => voidRuns one image of the batch again. | — |