Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
invokeai/frontend/web/src/common/components/IAIColorPicker.tsx
View File

@ -69,7 +69,8 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
max={255}
step={1}
w={numberInputWidth}
/>
defaultValue={90}
/>
</InvControl>
<InvControl label="Green">
<InvNumberInput
@ -79,7 +80,8 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
max={255}
step={1}
w={numberInputWidth}
/>
defaultValue={90}
/>
</InvControl>
<InvControl label="Blue">
<InvNumberInput
@ -89,7 +91,8 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
max={255}
step={1}
w={numberInputWidth}
/>
defaultValue={255}
/>
</InvControl>
<InvControl label="Alpha">
<InvNumberInput
@ -99,6 +102,7 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
min={0}
max={1}
w={numberInputWidth}
defaultValue={1}
/>
</InvControl>
</Flex>

15
invokeai/frontend/web/src/common/components/InvSlider/InvSlider.tsx
View File

@ -10,6 +10,7 @@ import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { $shift } from 'common/hooks/useGlobalModifiers';
import { AnimatePresence } from 'framer-motion';
import { isNil } from 'lodash-es';
import { memo, useCallback, useMemo, useState } from 'react';
import { InvSliderMark } from './InvSliderMark';
@ -23,7 +24,8 @@ export const InvSlider = memo((props: InvSliderProps) => {
step: _step = 1,
fineStep: _fineStep,
onChange,
onReset,
onReset: _onReset,
defaultValue,
formatValue = (v: number) => v.toString(),
marks: _marks,
withThumbTooltip: withTooltip = false,
@ -59,6 +61,16 @@ export const InvSlider = memo((props: InvSliderProps) => {
}
return [];
}, [_marks, formatValue, max, min]);
const onReset = useCallback(() => {
if (!isNil(defaultValue)) {
onChange(defaultValue);
}
if (_onReset) {
_onReset();
}
}, [defaultValue, onChange, _onReset]);
return (
<>
<ChakraSlider
@ -103,6 +115,7 @@ export const InvSlider = memo((props: InvSliderProps) => {
{withNumberInput && (
<InvNumberInput
value={value}
defaultValue={defaultValue}
min={numberInputMin}
max={numberInputMax}
step={step}

2
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
View File

@ -266,6 +266,7 @@ const IAICanvasToolChooserOptions = () => {
step={1}
onChange={handleChangeBrushSize}
marks={marks}
defaultValue={50}
/>
<InvNumberInput
value={brushSize}
@ -273,6 +274,7 @@ const IAICanvasToolChooserOptions = () => {
max={500}
step={1}
onChange={handleChangeBrushSize}
defaultValue={50}
/>
</InvControl>
</Flex>

7
invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx
View File

@ -27,9 +27,6 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
},
[dispatch, id]
);
const onReset = useCallback(() => {
dispatch(controlAdapterWeightChanged({ id, weight: 1 }));
}, [dispatch, id]);
if (isNil(weight)) {
// should never happen
@ -46,7 +43,7 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
<InvSlider
value={weight}
onChange={onChange}
onReset={onReset}
defaultValue={1}
min={0}
max={2}
step={0.05}
@ -57,12 +54,12 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
<InvNumberInput
value={weight}
onChange={onChange}
onReset={onReset}
min={-1}
max={2}
step={0.05}
fineStep={0.01}
maxW={20}
defaultValue={1}
/>
</InvControl>
</InvControlGroup>

16
invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx
View File

@ -30,12 +30,6 @@ const CannyProcessor = (props: CannyProcessorProps) => {
[controlNetId, processorChanged]
);
const handleLowThresholdReset = useCallback(() => {
processorChanged(controlNetId, {
low_threshold: DEFAULTS.low_threshold,
});
}, [controlNetId, processorChanged]);
const handleHighThresholdChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { high_threshold: v });
@ -43,19 +37,13 @@ const CannyProcessor = (props: CannyProcessorProps) => {
[controlNetId, processorChanged]
);
const handleHighThresholdReset = useCallback(() => {
processorChanged(controlNetId, {
high_threshold: DEFAULTS.high_threshold,
});
}, [controlNetId, processorChanged]);
return (
<ProcessorWrapper>
<InvControl label={t('controlnet.lowThreshold')} isDisabled={!isEnabled}>
<InvSlider
value={low_threshold}
onChange={handleLowThresholdChanged}
onReset={handleLowThresholdReset}
defaultValue={DEFAULTS.low_threshold}
min={0}
max={255}
withNumberInput
@ -65,7 +53,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
<InvSlider
value={high_threshold}
onChange={handleHighThresholdChanged}
onReset={handleHighThresholdReset}
defaultValue={DEFAULTS.high_threshold}
min={0}
max={255}
withNumberInput

8
invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx
View File

@ -30,12 +30,6 @@ const ColorMapProcessor = (props: ColorMapProcessorProps) => {
[controlNetId, processorChanged]
);
const handleColorMapTileSizeReset = useCallback(() => {
processorChanged(controlNetId, {
color_map_tile_size: DEFAULTS.color_map_tile_size,
});
}, [controlNetId, processorChanged]);
return (
<ProcessorWrapper>
<InvControl
@ -44,8 +38,8 @@ const ColorMapProcessor = (props: ColorMapProcessorProps) => {
>
<InvSlider
value={color_map_tile_size}
defaultValue={DEFAULTS.color_map_tile_size}
onChange={handleColorMapTileSizeChanged}
onReset={handleColorMapTileSizeReset}
min={1}
max={256}
step={1}

40
invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx
View File

@ -30,12 +30,6 @@ const ContentShuffleProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { image_resolution: v });
@ -43,12 +37,6 @@ const ContentShuffleProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
const handleWChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { w: v });
@ -56,12 +44,6 @@ const ContentShuffleProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleWReset = useCallback(() => {
processorChanged(controlNetId, {
w: DEFAULTS.w,
});
}, [controlNetId, processorChanged]);
const handleHChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { h: v });
@ -69,12 +51,6 @@ const ContentShuffleProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleHReset = useCallback(() => {
processorChanged(controlNetId, {
h: DEFAULTS.h,
});
}, [controlNetId, processorChanged]);
const handleFChanged = useCallback(
(v: number) => {
processorChanged(controlNetId, { f: v });
@ -82,12 +58,6 @@ const ContentShuffleProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleFReset = useCallback(() => {
processorChanged(controlNetId, {
f: DEFAULTS.f,
});
}, [controlNetId, processorChanged]);
return (
<ProcessorWrapper>
<InvControl
@ -96,8 +66,8 @@ const ContentShuffleProcessor = (props: Props) => {
>
<InvSlider
value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution}
onChange={handleDetectResolutionChanged}
onReset={handleDetectResolutionReset}
min={0}
max={4096}
marks
@ -110,8 +80,8 @@ const ContentShuffleProcessor = (props: Props) => {
>
<InvSlider
value={image_resolution}
defaultValue={DEFAULTS.image_resolution}
onChange={handleImageResolutionChanged}
onReset={handleImageResolutionReset}
min={0}
max={4096}
marks
@ -121,8 +91,8 @@ const ContentShuffleProcessor = (props: Props) => {
<InvControl label={t('controlnet.w')} isDisabled={!isEnabled}>
<InvSlider
value={w}
defaultValue={DEFAULTS.w}
onChange={handleWChanged}
onReset={handleWReset}
min={0}
max={4096}
marks
@ -132,8 +102,8 @@ const ContentShuffleProcessor = (props: Props) => {
<InvControl label={t('controlnet.h')} isDisabled={!isEnabled}>
<InvSlider
value={h}
defaultValue={DEFAULTS.h}
onChange={handleHChanged}
onReset={handleHReset}
min={0}
max={4096}
marks
@ -143,8 +113,8 @@ const ContentShuffleProcessor = (props: Props) => {
<InvControl label={t('controlnet.f')} isDisabled={!isEnabled}>
<InvSlider
value={f}
defaultValue={DEFAULTS.f}
onChange={handleFChanged}
onReset={handleFReset}
min={0}
max={4096}
marks

16
invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx
View File

@ -49,18 +49,6 @@ const HedPreprocessor = (props: HedProcessorProps) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
return (
<ProcessorWrapper>
<InvControl
@ -69,8 +57,8 @@ const HedPreprocessor = (props: HedProcessorProps) => {
>
<InvSlider
value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution}
onChange={handleDetectResolutionChanged}
onReset={handleDetectResolutionReset}
min={0}
max={4096}
marks
@ -84,7 +72,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
<InvSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
onReset={handleImageResolutionReset}
defaultValue={DEFAULTS.image_resolution}
min={0}
max={4096}
marks

16
invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx
View File

@ -37,18 +37,6 @@ const LineartAnimeProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
return (
<ProcessorWrapper>
<InvControl
@ -57,8 +45,8 @@ const LineartAnimeProcessor = (props: Props) => {
>
<InvSlider
value={detect_resolution}
defaultValue={DEFAULTS.detect_resolution}
onChange={handleDetectResolutionChanged}
onReset={handleDetectResolutionReset}
min={0}
max={4096}
withNumberInput
@ -72,7 +60,7 @@ const LineartAnimeProcessor = (props: Props) => {
<InvSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
onReset={handleImageResolutionReset}
defaultValue={DEFAULTS.image_resolution}
min={0}
max={4096}
withNumberInput

16
invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx
View File

@ -39,18 +39,6 @@ const LineartProcessor = (props: LineartProcessorProps) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
const handleCoarseChanged = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
processorChanged(controlNetId, { coarse: e.target.checked });
@ -67,7 +55,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
<InvSlider
value={detect_resolution}
onChange={handleDetectResolutionChanged}
onReset={handleDetectResolutionReset}
defaultValue={DEFAULTS.detect_resolution}
min={0}
max={4096}
marks
@ -81,7 +69,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
<InvSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
onReset={handleImageResolutionReset}
defaultValue={DEFAULTS.image_resolution}
min={0}
max={4096}
marks

12
invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx
View File

@ -37,21 +37,13 @@ const MediapipeFaceProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleMaxFacesReset = useCallback(() => {
processorChanged(controlNetId, { max_faces: DEFAULTS.max_faces });
}, [controlNetId, processorChanged]);
const handleMinConfidenceReset = useCallback(() => {
processorChanged(controlNetId, { min_confidence: DEFAULTS.min_confidence });
}, [controlNetId, processorChanged]);
return (
<ProcessorWrapper>
<InvControl label={t('controlnet.maxFaces')} isDisabled={!isEnabled}>
<InvSlider
value={max_faces}
onChange={handleMaxFacesChanged}
onReset={handleMaxFacesReset}
defaultValue={DEFAULTS.max_faces}
min={1}
max={20}
marks
@ -62,7 +54,7 @@ const MediapipeFaceProcessor = (props: Props) => {
<InvSlider
value={min_confidence}
onChange={handleMinConfidenceChanged}
onReset={handleMinConfidenceReset}
defaultValue={DEFAULTS.min_confidence}
min={0}
max={1}
step={0.01}

12
invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx
View File

@ -37,21 +37,13 @@ const MidasDepthProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleAMultReset = useCallback(() => {
processorChanged(controlNetId, { a_mult: DEFAULTS.a_mult });
}, [controlNetId, processorChanged]);
const handleBgThReset = useCallback(() => {
processorChanged(controlNetId, { bg_th: DEFAULTS.bg_th });
}, [controlNetId, processorChanged]);
return (
<ProcessorWrapper>
<InvControl label={t('controlnet.amult')} isDisabled={!isEnabled}>
<InvSlider
value={a_mult}
onChange={handleAMultChanged}
onReset={handleAMultReset}
defaultValue={DEFAULTS.a_mult}
min={0}
max={20}
step={0.01}
@ -63,7 +55,7 @@ const MidasDepthProcessor = (props: Props) => {
<InvSlider
value={bg_th}
onChange={handleBgThChanged}
onReset={handleBgThReset}
defaultValue={DEFAULTS.bg_th}
min={0}
max={20}
step={0.01}

28
invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx
View File

@ -51,26 +51,6 @@ const MlsdImageProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
const handleThrDReset = useCallback(() => {
processorChanged(controlNetId, { thr_d: DEFAULTS.thr_d });
}, [controlNetId, processorChanged]);
const handleThrVReset = useCallback(() => {
processorChanged(controlNetId, { thr_v: DEFAULTS.thr_v });
}, [controlNetId, processorChanged]);
return (
<ProcessorWrapper>
<InvControl
@ -80,7 +60,7 @@ const MlsdImageProcessor = (props: Props) => {
<InvSlider
value={detect_resolution}
onChange={handleDetectResolutionChanged}
onReset={handleDetectResolutionReset}
defaultValue={DEFAULTS.detect_resolution}
min={0}
max={4096}
marks={marks0to4096}
@ -94,7 +74,7 @@ const MlsdImageProcessor = (props: Props) => {
<InvSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
onReset={handleImageResolutionReset}
defaultValue={DEFAULTS.image_resolution}
min={0}
max={4096}
marks={marks0to4096}
@ -105,7 +85,7 @@ const MlsdImageProcessor = (props: Props) => {
<InvSlider
value={thr_d}
onChange={handleThrDChanged}
onReset={handleThrDReset}
defaultValue={DEFAULTS.thr_d}
min={0}
max={1}
step={0.01}
@ -117,7 +97,7 @@ const MlsdImageProcessor = (props: Props) => {
<InvSlider
value={thr_v}
onChange={handleThrVChanged}
onReset={handleThrVReset}
defaultValue={DEFAULTS.thr_v}
min={0}
max={1}
step={0.01}

16
invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx
View File

@ -37,18 +37,6 @@ const NormalBaeProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
return (
<ProcessorWrapper>
<InvControl
@ -58,7 +46,7 @@ const NormalBaeProcessor = (props: Props) => {
<InvSlider
value={detect_resolution}
onChange={handleDetectResolutionChanged}
onReset={handleDetectResolutionReset}
defaultValue={DEFAULTS.detect_resolution}
min={0}
max={4096}
marks
@ -72,7 +60,7 @@ const NormalBaeProcessor = (props: Props) => {
<InvSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
onReset={handleImageResolutionReset}
defaultValue={DEFAULTS.image_resolution}
min={0}
max={4096}
marks

16
invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx
View File

@ -39,18 +39,6 @@ const OpenposeProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
const handleHandAndFaceChanged = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
processorChanged(controlNetId, { hand_and_face: e.target.checked });
@ -67,7 +55,7 @@ const OpenposeProcessor = (props: Props) => {
<InvSlider
value={detect_resolution}
onChange={handleDetectResolutionChanged}
onReset={handleDetectResolutionReset}
defaultValue={DEFAULTS.detect_resolution}
min={0}
max={4096}
marks
@ -81,7 +69,7 @@ const OpenposeProcessor = (props: Props) => {
<InvSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
onReset={handleImageResolutionReset}
defaultValue={DEFAULTS.image_resolution}
min={0}
max={4096}
marks

16
invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx
View File

@ -39,18 +39,6 @@ const PidiProcessor = (props: Props) => {
[controlNetId, processorChanged]
);
const handleDetectResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
detect_resolution: DEFAULTS.detect_resolution,
});
}, [controlNetId, processorChanged]);
const handleImageResolutionReset = useCallback(() => {
processorChanged(controlNetId, {
image_resolution: DEFAULTS.image_resolution,
});
}, [controlNetId, processorChanged]);
const handleScribbleChanged = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
processorChanged(controlNetId, { scribble: e.target.checked });
@ -74,7 +62,7 @@ const PidiProcessor = (props: Props) => {
<InvSlider
value={detect_resolution}
onChange={handleDetectResolutionChanged}
onReset={handleDetectResolutionReset}
defaultValue={DEFAULTS.detect_resolution}
min={0}
max={4096}
marks
@ -88,7 +76,7 @@ const PidiProcessor = (props: Props) => {
<InvSlider
value={image_resolution}
onChange={handleImageResolutionChanged}
onReset={handleImageResolutionReset}
defaultValue={DEFAULTS.image_resolution}
min={0}
max={4096}
marks

12
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
View File

@ -5,14 +5,13 @@ import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSlider } from 'common/components/InvSlider/InvSlider';
import {
maxPromptsChanged,
maxPromptsReset,
} from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createMemoizedSelector(stateSelector, (state) => {
const { maxPrompts, combinatorial } = state.dynamicPrompts;
const { min, sliderMax, inputMax } =
const { min, sliderMax, inputMax, initial } =
state.config.sd.dynamicPrompts.maxPrompts;
return {
@ -20,12 +19,13 @@ const selector = createMemoizedSelector(stateSelector, (state) => {
min,
sliderMax,
inputMax,
initial,
isDisabled: !combinatorial,
};
});
const ParamDynamicPromptsMaxPrompts = () => {
const { maxPrompts, min, sliderMax, inputMax, isDisabled } =
const { maxPrompts, min, sliderMax, inputMax, initial, isDisabled } =
useAppSelector(selector);
const dispatch = useAppDispatch();
const { t } = useTranslation();
@ -37,10 +37,6 @@ const ParamDynamicPromptsMaxPrompts = () => {
[dispatch]
);
const handleReset = useCallback(() => {
dispatch(maxPromptsReset());
}, [dispatch]);
return (
<InvControl
label={t('dynamicPrompts.maxPrompts')}
@ -52,8 +48,8 @@ const ParamDynamicPromptsMaxPrompts = () => {
min={min}
max={sliderMax}
value={maxPrompts}
defaultValue={initial}
onChange={handleChange}
onReset={handleReset}
marks
withNumberInput
numberInputMax={inputMax}

6
invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
View File

@ -50,10 +50,6 @@ const GallerySettingsPopover = () => {
[dispatch]
);
const handleResetGalleryImageMinimumWidth = useCallback(() => {
dispatch(setGalleryImageMinimumWidth(64));
}, [dispatch]);
const handleChangeAutoSwitch = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
dispatch(shouldAutoSwitchChanged(e.target.checked));
@ -86,7 +82,7 @@ const GallerySettingsPopover = () => {
onChange={handleChangeGalleryImageMinimumWidth}
min={45}
max={256}
onReset={handleResetGalleryImageMinimumWidth}
defaultValue={90}
/>
</InvControl>
<InvControl label={t('gallery.autoSwitchNewImages')}>

6
invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx
View File

@ -29,10 +29,6 @@ const ParamHrfStrength = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleHrfStrengthReset = useCallback(() => {
dispatch(setHrfStrength(initial));
}, [dispatch, initial]);
const handleHrfStrengthChange = useCallback(
(v: number) => {
dispatch(setHrfStrength(v));
@ -48,10 +44,10 @@ const ParamHrfStrength = () => {
step={step}
fineStep={fineStep}
value={hrfStrength}
defaultValue={initial}
onChange={handleHrfStrengthChange}
marks
withNumberInput
onReset={handleHrfStrengthReset}
/>
</InvControl>
);

8
invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
View File

@ -12,7 +12,6 @@ import type { LoRA } from 'features/lora/store/loraSlice';
import {
loraRemoved,
loraWeightChanged,
loraWeightReset,
} from 'features/lora/store/loraSlice';
import { memo, useCallback } from 'react';
import { FaTrashCan } from 'react-icons/fa6';
@ -32,10 +31,6 @@ export const LoRACard = memo((props: LoRACardProps) => {
[dispatch, lora.id]
);
const onReset = useCallback(() => {
dispatch(loraWeightReset(lora.id));
}, [dispatch, lora.id]);
const handleRemoveLora = useCallback(() => {
dispatch(loraRemoved(lora.id));
}, [dispatch, lora.id]);
@ -61,8 +56,8 @@ export const LoRACard = memo((props: LoRACardProps) => {
min={-1}
max={2}
step={0.01}
onReset={onReset}
marks={marks}
defaultValue={0.75}
/>
<InvNumberInput
value={lora.weight}
@ -72,6 +67,7 @@ export const LoRACard = memo((props: LoRACardProps) => {
step={0.01}
w={20}
flexShrink={0}
defaultValue={0.75}
/>
</InvCardBody>
</InvCard>

2
invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx
View File

@ -22,12 +22,12 @@ const NodeOpacitySlider = () => {
<InvSlider
aria-label={t('nodes.nodeOpacity')}
value={nodeOpacity}
defaultValue={1}
min={0.5}
max={1}
step={0.01}
onChange={handleChange}
orientation="vertical"
defaultValue={30}
h="calc(100% - 0.5rem)"
/>
</Flex>

7
invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx
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
/>

6
invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx
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}
/>

6
invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx
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}

6
invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx
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

6
invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx
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

5
invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx
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

5
invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx
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

6
invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx
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>
);

6
invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx
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>
);

6
invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx
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}

7
invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx
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>
);

6
invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx
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}

7
invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx
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>
);

6
invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx
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}

1
invokeai/frontend/web/src/features/parameters/components/Seed/ParamSeedNumberInput.tsx
View File

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

5
invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryHorizontal.tsx
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>
);

5
invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryVertical.tsx
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>
);

1
invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
View File

@ -64,6 +64,7 @@ export const InvokeQueueBackButton = memo(() => {
max={999}
onChange={handleChange}
value={iterations}
defaultValue={1}
numberInputFieldProps={numberInputFieldProps}
pos="absolute"
insetInlineEnd={0}

6
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
View File

@ -34,20 +34,16 @@ const ParamSDXLRefinerCFGScale = () => {
[dispatch]
);
const onReset = useCallback(() => {
dispatch(setRefinerCFGScale(initial));
}, [dispatch, initial]);
return (
<InvControl label={t('sdxl.cfgScale')}>
<InvSlider
value={refinerCFGScale}
defaultValue={initial}
min={min}
max={sliderMax}
step={coarseStep}
fineStep={fineStep}
onChange={onChange}
onReset={onReset}
withNumberInput
numberInputMax={inputMax}
marks={marks}

7
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore.tsx
View File

@ -18,11 +18,6 @@ const ParamSDXLRefinerNegativeAestheticScore = () => {
[dispatch]
);
const handleReset = useCallback(
() => dispatch(setRefinerNegativeAestheticScore(2.5)),
[dispatch]
);
return (
<InvControl label={t('sdxl.negAestheticScore')}>
<InvSlider
@ -31,8 +26,8 @@ const ParamSDXLRefinerNegativeAestheticScore = () => {
step={0.5}
fineStep={0.1}
onChange={handleChange}
onReset={handleReset}
value={refinerNegativeAestheticScore}
defaultValue={2.5}
withNumberInput
marks
/>

7
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerPositiveAestheticScore.tsx
View File

@ -17,11 +17,6 @@ const ParamSDXLRefinerPositiveAestheticScore = () => {
[dispatch]
);
const handleReset = useCallback(
() => dispatch(setRefinerPositiveAestheticScore(6)),
[dispatch]
);
return (
<InvControl label={t('sdxl.posAestheticScore')}>
<InvSlider
@ -30,8 +25,8 @@ const ParamSDXLRefinerPositiveAestheticScore = () => {
max={10}
fineStep={0.1}
onChange={handleChange}
onReset={handleReset}
value={refinerPositiveAestheticScore}
defaultValue={6}
withNumberInput
marks
/>

7
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
View File

@ -23,11 +23,6 @@ const ParamSDXLRefinerStart = () => {
);
const { t } = useTranslation();
const handleReset = useCallback(
() => dispatch(setRefinerStart(0.8)),
[dispatch]
);
return (
<InvControl label={t('sdxl.refinerStart')}>
<InvSlider
@ -35,7 +30,7 @@ const ParamSDXLRefinerStart = () => {
min={0}
max={1}
onChange={handleChange}
onReset={handleReset}
defaultValue={0.8}
value={refinerStart}
withNumberInput
marks

6
invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
View File

@ -35,20 +35,16 @@ const ParamSDXLRefinerSteps = () => {
[dispatch]
);
const onReset = useCallback(() => {
dispatch(setRefinerSteps(initial));
}, [dispatch, initial]);
return (
<InvControl label={t('sdxl.steps')}>
<InvSlider
value={refinerSteps}
defaultValue={initial}
min={min}
max={sliderMax}
step={step}
fineStep={fineStep}
onChange={onChange}
onReset={onReset}
withNumberInput
marks={marks}
numberInputMax={inputMax}