shadcn.io is not affiliated with official shadcn/ui
Message Image Generation AI Block for React Aria
An image answer with four takes as a 2 by 2 radio grid of drawn plates, with the chosen take's seed and size beside it, Vary this for the next of three typed sets, Download SVG and Copy prompt.
Installation
Overview
Answer a prompt with pictures, with this AI image message for React with React Aria. A compact header names Palettemoor, an image maker, and a hairline frame with a plus mark on each corner holds the exchange: your prompt as a Bubble, a one-line reply, and four takes as a 2 by 2 grid of drawn plates. The takes are a radio group, so a press or the arrow keys choose one and a ring marks it, and the facts beside the grid (take, seed, size, model) follow your choice. Vary this swaps the grid for four Skeleton tiles for under a second and then shows the next of three typed sets; Download SVG saves the chosen plate as a real file, and the Copy Button copies the prompt. The Shine Button, the only colored control, is the download. The plates are greyscale drawings placed from a seed, never photos. It's built from Message, Bubble, Skeleton, Copy Button, Button and Guides, with CSS only.
FAQ
What stays local, and how do I make it real?
Everything. Nothing is generated: the three sets are typed in SETS (a look and four seeds each) and the plates are drawn in the page from a scene and a seed. The status line says so. To make it real, call your image model when Vary this is pressed, and show each returned image in place of the Plate in Tile, keeping the radio, the caption and the skeleton.
How are the plates drawn, and is Download SVG real?
Each plate is a list of paths in a 100 by 100 space in four greys: a backdrop, a ground and a few shapes. The seed gives each take its own nudge, scale and mirror, which is why the four differ. Download SVG writes the same paths into an SVG file with named grey fills, so the file opens anywhere without the page's styles, and its name carries the take.
What does Vary this do?
It shows four skeleton tiles in the same boxes for 900 ms, with the grid marked busy, then swaps in the next typed set and chooses its first take. The button says so in the polite status line and stays focusable while busy so the press is never lost. After the third set it returns to the first.
Is it usable with a keyboard and a screen reader?
The takes are native radios in a fieldset with a hidden legend, so Tab enters the group and the arrow keys move between takes. Each take is named by its caption ("Take 2"), the plate is hidden from assistive technology, and the chosen take has a check and a ring, not a color. One polite line says what changed.