Generation settings

A compact settings panel for image generation: model, aspect ratio and count up top, with steps, guidance, seed and the negative prompt folded into Advanced. One typed value object in and out.

Markdown

On this page

Settings beside the frame they shape. Generate locks the panel until the image lands.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/generation-settings.json

Usage

tsx

import {
  GenerationSettings,
  type GenerationSettingsValue,
} from "@/components/ui/chatcn/generation-settings"

const [settings, setSettings] = React.useState<GenerationSettingsValue>()

<GenerationSettings
  models={[{ id: "flux-1-dev", label: "FLUX.1 dev" }]}
  defaultValue={{ aspectRatio: "4:5", steps: 28 }}
  onValueChange={setSettings}
  generating={job.status === "generating"}
/>

The value is { model, count, aspectRatio, steps, guidance, seed, seedLocked, negativePrompt }. Use value and onValueChange to control it, or defaultValue with any fields you want to preset; the rest fall back to the defaults, and Reset returns there. When you control value, pass the starting settings as defaultValue too, so Reset knows where to go. When seedLocked is false, draw a new seed for each run on your side.

Examples

Advanced and typed

The advanced section open, controlled, with the typed value it produces.

States

Locked while generating, a negative prompt near its limit, plain inside a sidebar.

Props

Prop	Type	Notes
`models`	`{ id, label, description?, disabled? }[]`	Required. The first is the default
`value`, `defaultValue`, `onValueChange`	`GenerationSettingsValue`	`defaultValue` takes a partial
`disabled`	`boolean`	Locks every control
`generating`	`boolean`	Locks every control and says why
`stepsRange`	`{ min, max, step }`	Default 1 to 50, step 1
`guidanceRange`	`{ min, max, step }`	Default 1 to 20, step 0.5
`negativePromptMax`	`number`	Default 400. The count turns amber at 90%
`aspectRatioOptions`	`Array<string \| AspectRatioOption>`	Passed to the picker
`advancedOpen`, `defaultAdvancedOpen`, `onAdvancedOpenChange`	`boolean`	Closed by default
`title`	`ReactNode \| null`	Default "Image settings". `null` hides the header
`resettable`	`boolean`	Shows Reset when changed. Default `true`
`variant`	`"card" \| "plain"`	Default `card`

Keyboard

Key	Action
`Tab`	Move through the controls in reading order
Arrow keys on Images	Pick 1 to 4
Arrow keys on a slider	One step. `PageUp` and `PageDown` take bigger steps
`Home`, `End` on a slider	Minimum or maximum
`Enter`, `Space` on Advanced	Open or close the advanced section

Accessibility

Every control has a visible label. The sliders are native range inputs with their value as text, plus a hint: More steps add detail and take longer.
Typing a seed locks it, and the lock is a toggle button with aria-pressed, next to words that say Same seed every run or New seed every run.
While generating, a status line says Settings are locked until this image finishes.
The character count is tied to the negative prompt and turns amber near the limit, with the numbers as the backup.

Motion

Advanced opens in 200 ms and closes in 150 ms. The summary line (28 steps · guidance 7.0 · random seed) fades as it opens. Reduced motion makes it instant.
The model list and the aspect ratio grid grow from their triggers in 180 ms, and not at all when opened from the keyboard.