feat(ui): use config for all numerical params

Centralize the initial/min/max/etc values for all numerical params. We used this for some but at some point stopped updating it.

All numerical params now use their respective configs. Far fewer hardcoded values throughout the app now.

Also updated the config types a bit to better accommodate slider vs number input constraints.

Author: psychedelicious

invokeai/frontend/web/src/app/types/invokeai.ts

@@ -43,6 +43,16 @@ export type SDFeature =
   | 'vae'
   | 'hrf';
 
+export type NumericalParameterConfig = {
+  initial: number;
+  sliderMin: number;
+  sliderMax: number;
+  numberInputMin: number;
+  numberInputMax: number;
+  fineStep: number;
+  coarseStep: number;
+};
+
 /**
  * Configuration options for the InvokeAI UI.
  * Distinct from system settings which may be changed inside the app.
@@ -66,69 +76,32 @@ export type AppConfig = {
     defaultModel?: string;
     disabledControlNetModels: string[];
     disabledControlNetProcessors: (keyof typeof CONTROLNET_PROCESSORS)[];
-    iterations: {
-      initial: number;
-      min: number;
-      sliderMax: number;
-      inputMax: number;
-      fineStep: number;
-      coarseStep: number;
-    };
-    width: {
-      initial: number;
-      min: number;
-      sliderMax: number;
-      inputMax: number;
-      fineStep: number;
-      coarseStep: number;
-    };
-    height: {
-      initial: number;
-      min: number;
-      sliderMax: number;
-      inputMax: number;
-      fineStep: number;
-      coarseStep: number;
-    };
-    steps: {
-      initial: number;
-      min: number;
-      sliderMax: number;
-      inputMax: number;
-      fineStep: number;
-      coarseStep: number;
-    };
-    guidance: {
-      initial: number;
-      min: number;
-      sliderMax: number;
-      inputMax: number;
-      fineStep: number;
-      coarseStep: number;
-    };
-    img2imgStrength: {
-      initial: number;
-      min: number;
-      sliderMax: number;
-      inputMax: number;
-      fineStep: number;
-      coarseStep: number;
-    };
-    hrfStrength: {
-      initial: number;
-      min: number;
-      sliderMax: number;
-      inputMax: number;
-      fineStep: number;
-      coarseStep: number;
-    };
+    // Core parameters
+    iterations: NumericalParameterConfig;
+    width: NumericalParameterConfig; // initial value comes from model
+    height: NumericalParameterConfig; // initial value comes from model
+    steps: NumericalParameterConfig;
+    guidance: NumericalParameterConfig;
+    cfgRescaleMultiplier: NumericalParameterConfig;
+    img2imgStrength: NumericalParameterConfig;
+    // Canvas
+    boundingBoxHeight: NumericalParameterConfig; // initial value comes from model
+    boundingBoxWidth: NumericalParameterConfig; // initial value comes from model
+    scaledBoundingBoxHeight: NumericalParameterConfig; // initial value comes from model
+    scaledBoundingBoxWidth: NumericalParameterConfig; // initial value comes from model
+    canvasCoherenceStrength: NumericalParameterConfig;
+    canvasCoherenceSteps: NumericalParameterConfig;
+    infillTileSize: NumericalParameterConfig;
+    infillPatchmatchDownscaleSize: NumericalParameterConfig;
+    // Misc advanced
+    clipSkip: NumericalParameterConfig; // slider and input max are ignored for this, because the values depend on the model
+    maskBlur: NumericalParameterConfig;
+    hrfStrength: NumericalParameterConfig;
     dynamicPrompts: {
-      maxPrompts: {
-        initial: number;
-        min: number;
-        sliderMax: number;
-        inputMax: number;
-      };
+      maxPrompts: NumericalParameterConfig;
+    };
+    ca: {
+      weight: NumericalParameterConfig;
     };
   };
 };

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

@@ -1,4 +1,4 @@
-import { useAppDispatch } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
 import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput';
@@ -17,10 +17,22 @@ type ParamControlAdapterWeightProps = {
 const formatValue = (v: number) => v.toFixed(2);
 
 const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
   const isEnabled = useControlAdapterIsEnabled(id);
   const weight = useControlAdapterWeight(id);
-  const dispatch = useAppDispatch();
-  const { t } = useTranslation();
+  const initial = useAppSelector((s) => s.config.sd.ca.weight.initial);
+  const sliderMin = useAppSelector((s) => s.config.sd.ca.weight.sliderMin);
+  const sliderMax = useAppSelector((s) => s.config.sd.ca.weight.sliderMax);
+  const numberInputMin = useAppSelector(
+    (s) => s.config.sd.ca.weight.numberInputMin
+  );
+  const numberInputMax = useAppSelector(
+    (s) => s.config.sd.ca.weight.numberInputMax
+  );
+  const coarseStep = useAppSelector((s) => s.config.sd.ca.weight.coarseStep);
+  const fineStep = useAppSelector((s) => s.config.sd.ca.weight.fineStep);
+
   const onChange = useCallback(
     (weight: number) => {
       dispatch(controlAdapterWeightChanged({ id, weight }));
@@ -43,23 +55,23 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
         <InvSlider
           value={weight}
           onChange={onChange}
-          defaultValue={1}
-          min={0}
-          max={2}
-          step={0.05}
-          fineStep={0.01}
+          defaultValue={initial}
+          min={sliderMin}
+          max={sliderMax}
+          step={coarseStep}
+          fineStep={fineStep}
           marks={marks}
           formatValue={formatValue}
         />
         <InvNumberInput
           value={weight}
           onChange={onChange}
-          min={-1}
-          max={2}
-          step={0.05}
-          fineStep={0.01}
+          min={numberInputMin}
+          max={numberInputMax}
+          step={coarseStep}
+          fineStep={fineStep}
           maxW={20}
-          defaultValue={1}
+          defaultValue={initial}
         />
       </InvControl>
     </InvControlGroup>

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

@@ -7,12 +7,17 @@ import { useTranslation } from 'react-i18next';
 
 const ParamDynamicPromptsMaxPrompts = () => {
   const maxPrompts = useAppSelector((s) => s.dynamicPrompts.maxPrompts);
-  const min = useAppSelector((s) => s.config.sd.dynamicPrompts.maxPrompts.min);
+  const sliderMin = useAppSelector(
+    (s) => s.config.sd.dynamicPrompts.maxPrompts.sliderMin
+  );
   const sliderMax = useAppSelector(
     (s) => s.config.sd.dynamicPrompts.maxPrompts.sliderMax
   );
-  const inputMax = useAppSelector(
-    (s) => s.config.sd.dynamicPrompts.maxPrompts.inputMax
+  const numberInputMin = useAppSelector(
+    (s) => s.config.sd.dynamicPrompts.maxPrompts.numberInputMin
+  );
+  const numberInputMax = useAppSelector(
+    (s) => s.config.sd.dynamicPrompts.maxPrompts.numberInputMax
   );
   const initial = useAppSelector(
     (s) => s.config.sd.dynamicPrompts.maxPrompts.initial
@@ -36,14 +41,15 @@ const ParamDynamicPromptsMaxPrompts = () => {
       renderInfoPopoverInPortal={false}
     >
       <InvSlider
-        min={min}
+        min={sliderMin}
         max={sliderMax}
         value={maxPrompts}
         defaultValue={initial}
         onChange={handleChange}
         marks
         withNumberInput
-        numberInputMax={inputMax}
+        numberInputMin={numberInputMin}
+        numberInputMax={numberInputMax}
       />
     </InvControl>
   );

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

@@ -8,8 +8,14 @@ import { useTranslation } from 'react-i18next';
 const ParamHrfStrength = () => {
   const hrfStrength = useAppSelector((s) => s.hrf.hrfStrength);
   const initial = useAppSelector((s) => s.config.sd.hrfStrength.initial);
-  const min = useAppSelector((s) => s.config.sd.hrfStrength.min);
+  const sliderMin = useAppSelector((s) => s.config.sd.hrfStrength.sliderMin);
   const sliderMax = useAppSelector((s) => s.config.sd.hrfStrength.sliderMax);
+  const numberInputMin = useAppSelector(
+    (s) => s.config.sd.hrfStrength.numberInputMin
+  );
+  const numberInputMax = useAppSelector(
+    (s) => s.config.sd.hrfStrength.numberInputMax
+  );
   const coarseStep = useAppSelector((s) => s.config.sd.hrfStrength.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.hrfStrength.fineStep);
   const dispatch = useAppDispatch();
@@ -25,7 +31,7 @@ const ParamHrfStrength = () => {
   return (
     <InvControl label={t('parameters.denoisingStrength')}>
       <InvSlider
-        min={min}
+        min={sliderMin}
         max={sliderMax}
         step={coarseStep}
         fineStep={fineStep}
@@ -34,6 +40,8 @@ const ParamHrfStrength = () => {
         onChange={onChange}
         marks
         withNumberInput
+        numberInputMin={numberInputMin}
+        numberInputMax={numberInputMax}
       />
     </InvControl>
   );

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

@@ -9,6 +9,28 @@ const ParamCFGRescaleMultiplier = () => {
   const cfgRescaleMultiplier = useAppSelector(
     (s) => s.generation.cfgRescaleMultiplier
   );
+  const initial = useAppSelector(
+    (s) => s.config.sd.cfgRescaleMultiplier.initial
+  );
+  const sliderMin = useAppSelector(
+    (s) => s.config.sd.cfgRescaleMultiplier.sliderMin
+  );
+  const sliderMax = useAppSelector(
+    (s) => s.config.sd.cfgRescaleMultiplier.sliderMax
+  );
+  const numberInputMin = useAppSelector(
+    (s) => s.config.sd.cfgRescaleMultiplier.numberInputMin
+  );
+  const numberInputMax = useAppSelector(
+    (s) => s.config.sd.cfgRescaleMultiplier.numberInputMax
+  );
+  const coarseStep = useAppSelector(
+    (s) => s.config.sd.cfgRescaleMultiplier.coarseStep
+  );
+  const fineStep = useAppSelector(
+    (s) => s.config.sd.cfgRescaleMultiplier.fineStep
+  );
+
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -24,12 +46,14 @@ const ParamCFGRescaleMultiplier = () => {
     >
       <InvSlider
         value={cfgRescaleMultiplier}
-        defaultValue={0}
-        min={0}
-        max={0.99}
-        step={0.1}
-        fineStep={0.01}
+        defaultValue={initial}
+        min={sliderMin}
+        max={sliderMax}
+        step={coarseStep}
+        fineStep={fineStep}
         onChange={handleChange}
+        numberInputMin={numberInputMin}
+        numberInputMax={numberInputMax}
         withNumberInput
         marks
       />

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

@@ -8,7 +8,13 @@ import { useTranslation } from 'react-i18next';
 
 const ParamClipSkip = () => {
   const clipSkip = useAppSelector((s) => s.generation.clipSkip);
-
+  const initial = useAppSelector((s) => s.config.sd.clipSkip.initial);
+  const sliderMin = useAppSelector((s) => s.config.sd.clipSkip.sliderMin);
+  const numberInputMin = useAppSelector(
+    (s) => s.config.sd.clipSkip.numberInputMin
+  );
+  const coarseStep = useAppSelector((s) => s.config.sd.clipSkip.coarseStep);
+  const fineStep = useAppSelector((s) => s.config.sd.clipSkip.fineStep);
   const { model } = useAppSelector((s) => s.generation);
 
   const dispatch = useAppDispatch();
@@ -43,12 +49,15 @@ const ParamClipSkip = () => {
     <InvControl label={t('parameters.clipSkip')} feature="clipSkip">
       <InvSlider
         value={clipSkip}
-        defaultValue={0}
-        min={0}
+        defaultValue={initial}
+        min={sliderMin}
         max={max}
-        step={1}
+        step={coarseStep}
+        fineStep={fineStep}
         onChange={handleClipSkipChange}
         withNumberInput
+        numberInputMin={numberInputMin}
+        numberInputMax={max}
         marks={sliderMarks}
       />
     </InvControl>