mirror of
https://github.com/invoke-ai/InvokeAI.git
synced 2026-04-23 03:00:31 -04:00
feat(ui): add support for default values for sliders
This commit is contained in:
@@ -17,11 +17,6 @@ const ParamCFGRescaleMultiplier = () => {
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const handleReset = useCallback(
|
||||
() => dispatch(setCfgRescaleMultiplier(0)),
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
return (
|
||||
<InvControl
|
||||
label={t('parameters.cfgRescaleMultiplier')}
|
||||
@@ -29,12 +24,12 @@ const ParamCFGRescaleMultiplier = () => {
|
||||
>
|
||||
<InvSlider
|
||||
value={cfgRescaleMultiplier}
|
||||
defaultValue={0}
|
||||
min={0}
|
||||
max={0.99}
|
||||
step={0.1}
|
||||
fineStep={0.01}
|
||||
onChange={handleChange}
|
||||
onReset={handleReset}
|
||||
withNumberInput
|
||||
marks
|
||||
/>
|
||||
|
||||
@@ -24,10 +24,6 @@ const ParamClipSkip = () => {
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const handleClipSkipReset = useCallback(() => {
|
||||
dispatch(setClipSkip(0));
|
||||
}, [dispatch]);
|
||||
|
||||
const max = useMemo(() => {
|
||||
if (!model) {
|
||||
return CLIP_SKIP_MAP['sd-1'].maxClip;
|
||||
@@ -50,11 +46,11 @@ const ParamClipSkip = () => {
|
||||
<InvControl label={t('parameters.clipSkip')} feature="clipSkip">
|
||||
<InvSlider
|
||||
value={clipSkip}
|
||||
defaultValue={0}
|
||||
min={0}
|
||||
max={max}
|
||||
step={1}
|
||||
onChange={handleClipSkipChange}
|
||||
onReset={handleClipSkipReset}
|
||||
withNumberInput
|
||||
marks={sliderMarks}
|
||||
/>
|
||||
|
||||
@@ -41,10 +41,6 @@ const ParamBoundingBoxWidth = () => {
|
||||
[ctx]
|
||||
);
|
||||
|
||||
const onReset = useCallback(() => {
|
||||
ctx.heightChanged(initial);
|
||||
}, [ctx, initial]);
|
||||
|
||||
return (
|
||||
<InvControl label={t('parameters.height')} isDisabled={isStaging}>
|
||||
<InvSlider
|
||||
@@ -53,8 +49,8 @@ const ParamBoundingBoxWidth = () => {
|
||||
step={CANVAS_GRID_SIZE_COARSE}
|
||||
fineStep={CANVAS_GRID_SIZE_FINE}
|
||||
value={ctx.height}
|
||||
defaultValue={initial}
|
||||
onChange={onChange}
|
||||
onReset={onReset}
|
||||
marks
|
||||
withNumberInput
|
||||
numberInputMax={4096}
|
||||
|
||||
@@ -41,10 +41,6 @@ const ParamBoundingBoxWidth = () => {
|
||||
[ctx]
|
||||
);
|
||||
|
||||
const onReset = useCallback(() => {
|
||||
ctx.widthChanged(initial);
|
||||
}, [ctx, initial]);
|
||||
|
||||
return (
|
||||
<InvControl label={t('parameters.width')} isDisabled={isStaging}>
|
||||
<InvSlider
|
||||
@@ -53,8 +49,8 @@ const ParamBoundingBoxWidth = () => {
|
||||
step={CANVAS_GRID_SIZE_COARSE}
|
||||
fineStep={CANVAS_GRID_SIZE_FINE}
|
||||
value={ctx.width}
|
||||
defaultValue={initial}
|
||||
onChange={onChange}
|
||||
onReset={onReset}
|
||||
withNumberInput
|
||||
numberInputMax={4096}
|
||||
marks
|
||||
|
||||
@@ -20,10 +20,6 @@ const ParamCanvasCoherenceSteps = () => {
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const handleReset = useCallback(() => {
|
||||
dispatch(setCanvasCoherenceSteps(20));
|
||||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<InvControl
|
||||
label={t('parameters.coherenceSteps')}
|
||||
@@ -34,8 +30,8 @@ const ParamCanvasCoherenceSteps = () => {
|
||||
max={100}
|
||||
step={1}
|
||||
value={canvasCoherenceSteps}
|
||||
defaultValue={20}
|
||||
onChange={handleChange}
|
||||
onReset={handleReset}
|
||||
withNumberInput
|
||||
numberInputMax={999}
|
||||
marks
|
||||
|
||||
@@ -19,9 +19,6 @@ const ParamCanvasCoherenceStrength = () => {
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
const handleReset = useCallback(() => {
|
||||
dispatch(setCanvasCoherenceStrength(0.3));
|
||||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<InvControl
|
||||
@@ -33,8 +30,8 @@ const ParamCanvasCoherenceStrength = () => {
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={canvasCoherenceStrength}
|
||||
defaultValue={0.75}
|
||||
onChange={handleChange}
|
||||
onReset={handleReset}
|
||||
withNumberInput
|
||||
numberInputMax={999}
|
||||
marks
|
||||
|
||||
@@ -19,9 +19,6 @@ const ParamMaskBlur = () => {
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
const handleReset = useCallback(() => {
|
||||
dispatch(setMaskBlur(16));
|
||||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<InvControl label={t('parameters.maskBlur')} feature="compositingBlur">
|
||||
@@ -29,7 +26,7 @@ const ParamMaskBlur = () => {
|
||||
min={0}
|
||||
max={64}
|
||||
value={maskBlur}
|
||||
onReset={handleReset}
|
||||
defaultValue={16}
|
||||
onChange={handleChange}
|
||||
marks
|
||||
withNumberInput
|
||||
|
||||
@@ -30,10 +30,6 @@ const ParamInfillPatchmatchDownscaleSize = () => {
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const handleReset = useCallback(() => {
|
||||
dispatch(setInfillPatchmatchDownscaleSize(2));
|
||||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<InvControl
|
||||
isDisabled={infillMethod !== 'patchmatch'}
|
||||
@@ -43,10 +39,10 @@ const ParamInfillPatchmatchDownscaleSize = () => {
|
||||
min={1}
|
||||
max={10}
|
||||
value={infillPatchmatchDownscaleSize}
|
||||
defaultValue={1}
|
||||
onChange={handleChange}
|
||||
withNumberInput
|
||||
marks
|
||||
onReset={handleReset}
|
||||
/>
|
||||
</InvControl>
|
||||
);
|
||||
|
||||
@@ -29,10 +29,6 @@ const ParamInfillTileSize = () => {
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const handleReset = useCallback(() => {
|
||||
dispatch(setInfillTileSize(32));
|
||||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<InvControl
|
||||
isDisabled={infillMethod !== 'tile'}
|
||||
@@ -43,10 +39,10 @@ const ParamInfillTileSize = () => {
|
||||
max={64}
|
||||
numberInputMax={256}
|
||||
value={infillTileSize}
|
||||
defaultValue={32}
|
||||
onChange={handleChange}
|
||||
withNumberInput
|
||||
marks
|
||||
onReset={handleReset}
|
||||
/>
|
||||
</InvControl>
|
||||
);
|
||||
|
||||
@@ -46,20 +46,16 @@ const ParamCFGScale = () => {
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const onReset = useCallback(() => {
|
||||
dispatch(setCfgScale(initial));
|
||||
}, [dispatch, initial]);
|
||||
|
||||
return (
|
||||
<InvControl label={t('parameters.cfgScale')} feature="paramCFGScale">
|
||||
<InvSlider
|
||||
value={cfgScale}
|
||||
defaultValue={initial}
|
||||
min={min}
|
||||
max={sliderMax}
|
||||
step={coarseStep}
|
||||
fineStep={fineStep}
|
||||
onChange={onChange}
|
||||
onReset={onReset}
|
||||
withNumberInput
|
||||
marks={marks}
|
||||
numberInputMax={inputMax}
|
||||
|
||||
@@ -44,18 +44,14 @@ export const ParamHeight = memo(() => {
|
||||
[ctx]
|
||||
);
|
||||
|
||||
const onReset = useCallback(() => {
|
||||
ctx.heightChanged(initial);
|
||||
}, [ctx, initial]);
|
||||
|
||||
const marks = useMemo(() => [min, initial, max], [min, initial, max]);
|
||||
|
||||
return (
|
||||
<InvControl label={t('parameters.height')}>
|
||||
<InvSlider
|
||||
value={ctx.height}
|
||||
defaultValue={initial}
|
||||
onChange={onChange}
|
||||
onReset={onReset}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
@@ -69,6 +65,7 @@ export const ParamHeight = memo(() => {
|
||||
max={inputMax}
|
||||
step={step}
|
||||
fineStep={fineStep}
|
||||
defaultValue={initial}
|
||||
/>
|
||||
</InvControl>
|
||||
);
|
||||
|
||||
@@ -43,10 +43,6 @@ const ParamSteps = () => {
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const onReset = useCallback(() => {
|
||||
dispatch(setSteps(initial));
|
||||
}, [dispatch, initial]);
|
||||
|
||||
const onBlur = useCallback(() => {
|
||||
dispatch(clampSymmetrySteps());
|
||||
}, [dispatch]);
|
||||
@@ -55,12 +51,12 @@ const ParamSteps = () => {
|
||||
<InvControl label={t('parameters.steps')} feature="paramSteps">
|
||||
<InvSlider
|
||||
value={steps}
|
||||
defaultValue={initial}
|
||||
min={min}
|
||||
max={sliderMax}
|
||||
step={step}
|
||||
fineStep={fineStep}
|
||||
onChange={onChange}
|
||||
onReset={onReset}
|
||||
onBlur={onBlur}
|
||||
withNumberInput
|
||||
marks={marks}
|
||||
|
||||
@@ -43,10 +43,6 @@ export const ParamWidth = memo(() => {
|
||||
[ctx]
|
||||
);
|
||||
|
||||
const onReset = useCallback(() => {
|
||||
ctx.widthChanged(initial);
|
||||
}, [ctx, initial]);
|
||||
|
||||
const marks = useMemo(() => [min, initial, max], [min, initial, max]);
|
||||
|
||||
return (
|
||||
@@ -54,7 +50,7 @@ export const ParamWidth = memo(() => {
|
||||
<InvSlider
|
||||
value={ctx.width}
|
||||
onChange={onChange}
|
||||
onReset={onReset}
|
||||
defaultValue={initial}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
@@ -68,6 +64,7 @@ export const ParamWidth = memo(() => {
|
||||
max={inputMax}
|
||||
step={step}
|
||||
fineStep={fineStep}
|
||||
defaultValue={initial}
|
||||
/>
|
||||
</InvControl>
|
||||
);
|
||||
|
||||
@@ -39,10 +39,6 @@ const ImageToImageStrength = () => {
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const handleReset = useCallback(() => {
|
||||
dispatch(setImg2imgStrength(initial));
|
||||
}, [dispatch, initial]);
|
||||
|
||||
return (
|
||||
<InvControl
|
||||
label={`${t('parameters.denoisingStrength')}`}
|
||||
@@ -54,8 +50,8 @@ const ImageToImageStrength = () => {
|
||||
min={min}
|
||||
max={sliderMax}
|
||||
onChange={handleChange}
|
||||
onReset={handleReset}
|
||||
value={img2imgStrength}
|
||||
defaultValue={initial}
|
||||
marks={marks}
|
||||
withNumberInput
|
||||
numberInputMax={inputMax}
|
||||
|
||||
@@ -31,6 +31,7 @@ export const ParamSeedNumberInput = memo(() => {
|
||||
onChange={handleChangeSeed}
|
||||
value={seed}
|
||||
flexGrow={1}
|
||||
defaultValue={0}
|
||||
/>
|
||||
</InvControl>
|
||||
);
|
||||
|
||||
@@ -23,21 +23,18 @@ const ParamSymmetryHorizontal = () => {
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
const handleReset = useCallback(() => {
|
||||
dispatch(setHorizontalSymmetrySteps(0));
|
||||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<InvControl label={t('parameters.hSymmetryStep')}>
|
||||
<InvSlider
|
||||
value={horizontalSymmetrySteps}
|
||||
defaultValue={0}
|
||||
onChange={handleChange}
|
||||
min={0}
|
||||
max={steps}
|
||||
step={1}
|
||||
withNumberInput
|
||||
marks
|
||||
onReset={handleReset}
|
||||
/>
|
||||
</InvControl>
|
||||
);
|
||||
|
||||
@@ -23,21 +23,18 @@ const ParamSymmetryVertical = () => {
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
const handleReset = useCallback(() => {
|
||||
dispatch(setVerticalSymmetrySteps(0));
|
||||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<InvControl label={t('parameters.vSymmetryStep')}>
|
||||
<InvSlider
|
||||
value={verticalSymmetrySteps}
|
||||
defaultValue={0}
|
||||
onChange={handleChange}
|
||||
min={0}
|
||||
max={steps}
|
||||
step={1}
|
||||
withNumberInput
|
||||
marks
|
||||
onReset={handleReset}
|
||||
/>
|
||||
</InvControl>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user