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

invokeai/frontend/web/src/common/components/IAIColorPicker.tsx

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

invokeai/frontend/web/src/common/components/InvSlider/InvSlider.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx

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

invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx

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

invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx

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

invokeai/frontend/web/src/features/lora/components/LoRACard.tsx

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

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

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

invokeai/frontend/web/src/features/parameters/components/Advanced/ParamCFGRescaleMultiplier.tsx

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

invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx

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

invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx

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

invokeai/frontend/web/src/features/parameters/components/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx

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

invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx

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

invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx

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

invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx

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

invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillPatchmatchDownscaleSize.tsx

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

invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillTilesize.tsx

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

invokeai/frontend/web/src/features/parameters/components/Core/ParamCFGScale.tsx

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

invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx

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

invokeai/frontend/web/src/features/parameters/components/Core/ParamSteps.tsx

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

invokeai/frontend/web/src/features/parameters/components/Core/ParamWidth.tsx

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

invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx

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

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

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

invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryHorizontal.tsx

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

invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryVertical.tsx

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

invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx

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

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

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

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

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

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

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

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

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

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

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