feat(ui): add support for default values for sliders

This commit is contained in:
psychedelicious
2024-01-03 08:16:44 +11:00
parent b4c0dafdc8
commit 06245bc761
44 changed files with 87 additions and 323 deletions

View File

@@ -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
/>

View File

@@ -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}
/>

View File

@@ -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}

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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>
);

View File

@@ -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>
);

View File

@@ -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}

View File

@@ -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>
);

View File

@@ -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}

View File

@@ -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>
);

View File

@@ -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}

View File

@@ -31,6 +31,7 @@ export const ParamSeedNumberInput = memo(() => {
onChange={handleChangeSeed}
value={seed}
flexGrow={1}
defaultValue={0}
/>
</InvControl>
);

View File

@@ -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>
);

View File

@@ -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>
);