feat(ui): add refiner cfg scale & steps defaults & marks

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

@@ -1,3 +1,5 @@
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
@@ -5,26 +7,50 @@ import { setRefinerCFGScale } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
+const selector = createMemoizedSelector([stateSelector], ({ config }) => {
+  const { min, inputMax, sliderMax, coarseStep, fineStep, initial } =
+    config.sd.guidance;
+
+  return {
+    marks: [min, Math.floor(sliderMax / 2), sliderMax],
+    min,
+    inputMax,
+    sliderMax,
+    coarseStep,
+    fineStep,
+    initial,
+  };
+});
+
 const ParamSDXLRefinerCFGScale = () => {
   const refinerCFGScale = useAppSelector((state) => state.sdxl.refinerCFGScale);
+  const { marks, min, inputMax, sliderMax, coarseStep, fineStep, initial } =
+    useAppSelector(selector);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const handleChange = useCallback(
+  const onChange = useCallback(
     (v: number) => dispatch(setRefinerCFGScale(v)),
     [dispatch]
   );
 
+  const onReset = useCallback(() => {
+    dispatch(setRefinerCFGScale(initial));
+  }, [dispatch, initial]);
+
   return (
     <InvControl label={t('sdxl.cfgScale')}>
       <InvSlider
         value={refinerCFGScale}
-        min={1}
+        min={min}
-        max={200}
+        max={sliderMax}
-        step={0.5}
+        step={coarseStep}
-        fineStep={0.1}
+        fineStep={fineStep}
-        onChange={handleChange}
+        onChange={onChange}
+        onReset={onReset}
         withNumberInput
+        numberInputMax={inputMax}
+        marks={marks}
       />
     </InvControl>
   );

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

@@ -1,3 +1,5 @@
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
@@ -5,26 +7,51 @@ import { setRefinerSteps } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
+const selector = createMemoizedSelector([stateSelector], ({ config }) => {
+  const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
+    config.sd.steps;
+
+  return {
+    marks: [min, Math.floor(sliderMax / 2), sliderMax],
+    initial,
+    min,
+    sliderMax,
+    inputMax,
+    step: coarseStep,
+    fineStep,
+  };
+});
 const ParamSDXLRefinerSteps = () => {
+  const { initial, min, sliderMax, inputMax, step, fineStep, marks } =
+    useAppSelector(selector);
   const refinerSteps = useAppSelector((state) => state.sdxl.refinerSteps);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const handleChange = useCallback(
+
+  const onChange = useCallback(
     (v: number) => {
       dispatch(setRefinerSteps(v));
     },
     [dispatch]
   );
 
+  const onReset = useCallback(() => {
+    dispatch(setRefinerSteps(initial));
+  }, [dispatch, initial]);
+
   return (
     <InvControl label={t('sdxl.steps')}>
       <InvSlider
-        min={1}
-        max={100}
-        step={1}
-        onChange={handleChange}
         value={refinerSteps}
+        min={min}
+        max={sliderMax}
+        step={step}
+        fineStep={fineStep}
+        onChange={onChange}
+        onReset={onReset}
         withNumberInput
+        marks={marks}
+        numberInputMax={inputMax}
       />
     </InvControl>
   );