Reference Image Input

Reference image for img2img and ControlNet. Pro · Image generation › Prompt and settings

img2img / ControlNet reference: drop, paste or upload, a preprocessor preview, and strength or weight.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add reference-image-input

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ReferenceImageInput } from 'valyro-ui-pro';

Props

Prop	Type	Default
`value`	`ReferenceImage \| null`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`ReferenceImage \| null`	`null`	Initial `value` when uncontrolled.
`onValueChange`	`(image: ReferenceImage \| null) => void`		Called with the new `value` when it changes.
`mode`	`'img2img' \| 'controlnet'`	`'controlnet'`	`img2img` shows denoising strength; `controlnet` shows a preprocessor with preview and a weight.
`preprocessor`	`'none' \| 'canny' \| 'depth' \| 'lineart' \| 'softedge' \| 'openpose'`		Controlled `preprocessor`; use with `onPreprocessorChange`.
`defaultPreprocessor`	`'none' \| 'canny' \| 'depth' \| 'lineart' \| 'softedge' \| 'openpose'`	`'canny'`	Initial `preprocessor` when uncontrolled.
`onPreprocessorChange`	`(preprocessor: Preprocessor) => void`		Called with the new `preprocessor` when it changes.
`preprocessors`	`readonly Preprocessor[]`	`ALL_PREPROCESSORS`	Offered preprocessors. Default: all.
`strength`	`number`		img2img denoising strength, 0–1.
`defaultStrength`	`number`	`0.6`	Initial `strength` when uncontrolled.
`onStrengthChange`	`(strength: number) => void`		Called with the new `strength` when it changes.
`weight`	`number`		ControlNet weight, 0–2.
`defaultWeight`	`number`	`1`	Initial `weight` when uncontrolled.
`onWeightChange`	`(weight: number) => void`		Called with the new `weight` when it changes.
`accept`	`string`	`'image/*'`	File types for the picker, paste and drop. Default `image/*`.
`size`	`'sm' \| 'md'`	`'md'`	`sm` has a shorter drop zone and a smaller, muted title.
`disabled`	`boolean`	`false`	Ignores picking, paste and drop, and disables Replace, Remove, the preprocessor and the sliders.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<ReferenceImageInputLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Prompt Editor — Prompt and negative prompt: weights, LoRA, autocomplete, token count
Generation Settings — Model, sampler, steps, CFG, size, presets
Aspect Ratio Picker — Aspect ratio and exact size
Seed Input — Seed: random, fixed, increment
LoRA Stack — LoRA stack: strengths, toggles, order, trigger words
Style Presets — Style cards with previews and weights
Generation Progress — Steps, ETA, live latent preview, queue
Image Result Grid — Result gallery with actions and a lightbox
Image Compare — Before/after comparison: slider, side by side, overlay
Inpaint Canvas — Inpainting mask and canvas outpainting
Generation History — Generation history by day, with filters
Image Adjustments — Color grading: upload, fit and seven filter sliders

Previous: Style Presets · Next: Generation Progress · All Image generation