Describe imagePro

Reverse prompting: drop, paste or choose an image and get four candidate prompts that describe it. Pick one with 1 to 4, use it as is, edit it in place or copy it.

Markdown

On this page

ProA portrait described into four prompts that stream in one by one. 1 to 4 picks, Enter uses, E edits. Drop or paste another image to describe it.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/describe-image

Usage

tsx

import { DescribeImage } from "@/components/ui/chatcn/pro/describe-image"

<DescribeImage
  onDescribe={(image, { file, signal }) => api.describe(file, { signal })}
  onUse={(prompt) => setPrompt(prompt)}
/>

onDescribe resolves with the prompts, or streams them with add(prompt) so each one shows as soon as the model writes it. Every slot that has not arrived yet holds a skeleton at a prompt's height, so the list never jumps. A rejection shows its message: write it as how to fix the problem.

Images come from the picker, a drop or a paste anywhere in the hotkey scope. Files of the wrong type or over maxSize are refused with the reason and the fix. To drive the server yourself, pass image, prompts, status and error instead of onDescribe.

Examples

States

The drop area, one prompt in while the rest are written, a failed run, long prompts, disabled and right to left.

ProThe drop area, one prompt in, a failed run, long prompts and disabled.

Props

Prop	Type	Notes
`image`, `defaultImage`, `onImageChange`	`DescribeImageSource \| null`	`src`, `alt`, `name`, `size`. `null` shows the drop area
`onDescribe`	`(image, { file, signal, add }) => Promise<string[] \| void>`	Called for each new image and on Describe again
`prompts`	`string[]`	Controlled candidates
`status`	`"idle" \| "describing" \| "ready" \| "error"`	Controlled status
`error`	`string`	Shown with `status="error"`
`onUse`	`(prompt, index) => void`	Shows Use on every candidate
`onPromptEdit`	`(prompt, index) => void`	After an inline edit is saved
`count`	`number`	Candidates to expect. Default 4
`accept`, `maxSize`	`string`, `number`	Default PNG, JPEG and WebP up to 20 MB
`hotkeys`	`"scoped" \| "global" \| "off"`	Default scoped to `[data-hotkey-scope]`
`disabled`	`boolean`

Keyboard

Key	Action
`1` to `4`	Pick a candidate and focus it
`Enter` on a candidate	Use it
`E` on a candidate	Edit it in place
`Enter` while editing	Save. Never while an IME is composing; `Shift` + `Enter` adds a line
`Esc` while editing	Cancel and return focus to the candidate
`⌘` + `V`	Describe a pasted image

Accessibility

Each candidate is a toggle button named by its prompt, with aria-keyshortcuts and a description of what Enter and E do.
The list is aria-busy while prompts are written. When they are in, a polite live region says how many and how to pick.
Use, Edit and Copy are named with the candidate's number: "Use prompt 2". Refused files and failed runs are announced with the fix.
The drop area is a real button that opens the file picker, so dragging is never the only way in.

Motion

Prompts arrive whole and fade in over 150 ms in place of their skeleton. No typewriter, no per word effects.
The status label waits 300 ms before it shimmers, so a fast answer never flashes a loader.
Picking and editing are instant: they are driven by the keyboard. Reduced motion keeps only the fades.