Image results
A grid of generated images to pick from, with upscale, vary and download on each and a larger view on click.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/image-results.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/image-results.json
Usage & API
Example
import { ImageResults } from "@/components/ai/image-results"
<ImageResults
prompt="…"
results={[]}
/>Props ImageResults
| Prop | Type & description | Required |
|---|---|---|
prompt | string | Required |
results | ImageResult[] | Required |
selectedId | string | null | Optional |
onSelect | (id: string | null) => void | Optional |
onUpscale | (id: string) => void | Optional |
onVary | (id: string) => void | Optional |
onDownload | (id: string) => void | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The only variant is the grid with a lightbox. The grid is always two columns, and each cell is a 16:10 frame with its own landscape. The check button is invisible until hover or focus unless that result is selected, in which case it stays filled. Actions are pointer-events only on the buttons themselves, so the open-tile button can cover the rest of the frame. The lightbox is position absolute over the card, not a separate route. It labels itself with the result index, traps the arrow and escape keys while it is open, and moves focus to a Close button. Use this one calls the same onSelect as the corner check. Previous and next wrap around the list. The preview ships four results, one of them already upscaled and one already selected, and the demo's upscale and vary handlers only set the busy flag and then the new seed or the upscaled bit. No file is written.
Choosing a layout
Use it at the end of a generation, when you have more than one picture and the person should compare them at a glance, mark a favourite, and only then upscale or vary. The lightbox is for a closer look without leaving the card: it shows the index, previous and next buttons, the same three actions, and a button that reads Use this one or Selected. Escape closes it and returns focus to the tile that opened it. Arrow keys move between results while the dialog is open. That is the right weight for a picker inside a composer or a side panel.
Do not use it as the waiting state. Image generation, including its grid of four, is the sibling that shows progress before any tile is finished. Before and after is for two frames of the same scene and a draggable split, not a set of alternatives. Edit region is for painting a mask. If you only ever have one image and no choice to make, the gallery's select check and lightbox are extra chrome. A single finished picture can sit in a plain frame instead.
What does the checkmark change?
It toggles selectedId through onSelect. Passing the same id again clears the selection, and the button exposes that with aria-pressed. The gallery does not hide the other tiles or start a download on select. Selection is a highlight plus whatever your parent does with the id.
Does Upscale enlarge the picture in the file?
The button calls onUpscale with the result id and then disables itself when you pass upscaled or busy. The 2× badge is that flag, not a measured resolution. The landscape is still the SVG stand-in. Vary calls onVary and, in the preview, swaps the seed so a different landscape fades in. Download calls onDownload and shows a check for about a second and a half.