feat: Create UI for SDXL Refiner Options

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx

@@ -4,7 +4,11 @@ import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAICollapse from 'common/components/IAICollapse';
-import ParamRefinerModelSelect from './SDXLRefiner/ParamRefinerModelSelect';
+import ParamSDXLRefinerAestheticScore from './SDXLRefiner/ParamSDXLRefinerAestheticScore';
+import ParamSDXLRefinerCFGScale from './SDXLRefiner/ParamSDXLRefinerCFGScale';
+import ParamSDXLRefinerModelSelect from './SDXLRefiner/ParamSDXLRefinerModelSelect';
+import ParamSDXLRefinerScheduler from './SDXLRefiner/ParamSDXLRefinerScheduler';
+import ParamSDXLRefinerStart from './SDXLRefiner/ParamSDXLRefinerStart';
 import ParamSDXLRefinerSteps from './SDXLRefiner/ParamSDXLRefinerSteps';
 import ParamUseSDXLRefiner from './SDXLRefiner/ParamUseSDXLRefiner';
 
@@ -12,20 +16,30 @@ const selector = createSelector(
   stateSelector,
   (state) => {
     const { shouldUseSDXLRefiner } = state.sdxl;
-    return { activeLabel: shouldUseSDXLRefiner ? 'Enabled' : undefined };
+    const { shouldUseSliders } = state.ui;
+    return {
+      activeLabel: shouldUseSDXLRefiner ? 'Enabled' : undefined,
+      shouldUseSliders,
+    };
   },
   defaultSelectorOptions
 );
 
 const ParamSDXLRefinerCollapse = () => {
-  const { activeLabel } = useAppSelector(selector);
+  const { activeLabel, shouldUseSliders } = useAppSelector(selector);
 
   return (
     <IAICollapse label="Refiner" activeLabel={activeLabel}>
       <Flex sx={{ gap: 2, flexDir: 'column' }}>
         <ParamUseSDXLRefiner />
-        <ParamRefinerModelSelect />
-        <ParamSDXLRefinerSteps />
+        <ParamSDXLRefinerModelSelect />
+        <Flex gap={2} flexDirection={shouldUseSliders ? 'column' : 'row'}>
+          <ParamSDXLRefinerSteps />
+          <ParamSDXLRefinerCFGScale />
+        </Flex>
+        <ParamSDXLRefinerScheduler />
+        <ParamSDXLRefinerAestheticScore />
+        <ParamSDXLRefinerStart />
       </Flex>
     </IAICollapse>
   );

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

@@ -0,0 +1,55 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAISlider from 'common/components/IAISlider';
+import { setRefinerAestheticScore } from 'features/sdxl/store/sdxlSlice';
+import { memo, useCallback } from 'react';
+
+const selector = createSelector(
+  [stateSelector],
+  ({ sdxl, hotkeys }) => {
+    const { refinerAestheticScore } = sdxl;
+    const { shift } = hotkeys;
+
+    return {
+      refinerAestheticScore,
+      shift,
+    };
+  },
+  defaultSelectorOptions
+);
+
+const ParamSDXLRefinerAestheticScore = () => {
+  const { refinerAestheticScore, shift } = useAppSelector(selector);
+  const dispatch = useAppDispatch();
+
+  const handleChange = useCallback(
+    (v: number) => dispatch(setRefinerAestheticScore(v)),
+    [dispatch]
+  );
+
+  const handleReset = useCallback(
+    () => dispatch(setRefinerAestheticScore(6)),
+    [dispatch]
+  );
+
+  return (
+    <IAISlider
+      label="Aesthetic Score"
+      step={shift ? 0.1 : 0.5}
+      min={1}
+      max={10}
+      onChange={handleChange}
+      handleReset={handleReset}
+      value={refinerAestheticScore}
+      sliderNumberInputProps={{ max: 10 }}
+      withInput
+      withReset
+      withSliderMarks
+      isInteger={false}
+    />
+  );
+};
+
+export default memo(ParamSDXLRefinerAestheticScore);

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

@@ -0,0 +1,71 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAINumberInput from 'common/components/IAINumberInput';
+import IAISlider from 'common/components/IAISlider';
+import { setRefinerCFGScale } from 'features/sdxl/store/sdxlSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const selector = createSelector(
+  [stateSelector],
+  ({ sdxl, ui, hotkeys }) => {
+    const { refinerCFGScale } = sdxl;
+    const { shouldUseSliders } = ui;
+    const { shift } = hotkeys;
+
+    return {
+      refinerCFGScale,
+      shouldUseSliders,
+      shift,
+    };
+  },
+  defaultSelectorOptions
+);
+
+const ParamSDXLRefinerCFGScale = () => {
+  const { refinerCFGScale, shouldUseSliders, shift } = useAppSelector(selector);
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+
+  const handleChange = useCallback(
+    (v: number) => dispatch(setRefinerCFGScale(v)),
+    [dispatch]
+  );
+
+  const handleReset = useCallback(
+    () => dispatch(setRefinerCFGScale(7)),
+    [dispatch]
+  );
+
+  return shouldUseSliders ? (
+    <IAISlider
+      label={t('parameters.cfgScale')}
+      step={shift ? 0.1 : 0.5}
+      min={1}
+      max={20}
+      onChange={handleChange}
+      handleReset={handleReset}
+      value={refinerCFGScale}
+      sliderNumberInputProps={{ max: 200 }}
+      withInput
+      withReset
+      withSliderMarks
+      isInteger={false}
+    />
+  ) : (
+    <IAINumberInput
+      label={t('parameters.cfgScale')}
+      step={0.5}
+      min={1}
+      max={200}
+      onChange={handleChange}
+      value={refinerCFGScale}
+      isInteger={false}
+      numberInputFieldProps={{ textAlign: 'center' }}
+    />
+  );
+};
+
+export default memo(ParamSDXLRefinerCFGScale);

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

@@ -19,7 +19,7 @@ const selector = createSelector(
   defaultSelectorOptions
 );
 
-const ParamRefinerModelSelect = () => {
+const ParamSDXLRefinerModelSelect = () => {
   const dispatch = useAppDispatch();
 
   const { model } = useAppSelector(selector);
@@ -103,4 +103,4 @@ const ParamRefinerModelSelect = () => {
   );
 };
 
-export default memo(ParamRefinerModelSelect);
+export default memo(ParamSDXLRefinerModelSelect);

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

@@ -0,0 +1,63 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
+import {
+  SCHEDULER_LABEL_MAP,
+  SchedulerParam,
+} from 'features/parameters/types/parameterSchemas';
+import { setRefinerScheduler } from 'features/sdxl/store/sdxlSlice';
+import { map } from 'lodash-es';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const selector = createSelector(
+  stateSelector,
+  ({ ui, sdxl }) => {
+    const { refinerScheduler } = sdxl;
+    const { favoriteSchedulers: enabledSchedulers } = ui;
+
+    const data = map(SCHEDULER_LABEL_MAP, (label, name) => ({
+      value: name,
+      label: label,
+      group: enabledSchedulers.includes(name as SchedulerParam)
+        ? 'Favorites'
+        : undefined,
+    })).sort((a, b) => a.label.localeCompare(b.label));
+
+    return {
+      refinerScheduler,
+      data,
+    };
+  },
+  defaultSelectorOptions
+);
+
+const ParamSDXLRefinerScheduler = () => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const { refinerScheduler, data } = useAppSelector(selector);
+
+  const handleChange = useCallback(
+    (v: string | null) => {
+      if (!v) {
+        return;
+      }
+      dispatch(setRefinerScheduler(v as SchedulerParam));
+    },
+    [dispatch]
+  );
+
+  return (
+    <IAIMantineSearchableSelect
+      w="100%"
+      label={t('parameters.scheduler')}
+      value={refinerScheduler}
+      data={data}
+      onChange={handleChange}
+    />
+  );
+};
+
+export default memo(ParamSDXLRefinerScheduler);

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

@@ -0,0 +1,55 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAISlider from 'common/components/IAISlider';
+import { setRefinerStart } from 'features/sdxl/store/sdxlSlice';
+import { memo, useCallback } from 'react';
+
+const selector = createSelector(
+  [stateSelector],
+  ({ sdxl, hotkeys }) => {
+    const { refinerStart } = sdxl;
+    const { shift } = hotkeys;
+
+    return {
+      refinerStart,
+      shift,
+    };
+  },
+  defaultSelectorOptions
+);
+
+const ParamSDXLRefinerStart = () => {
+  const { refinerStart, shift } = useAppSelector(selector);
+  const dispatch = useAppDispatch();
+
+  const handleChange = useCallback(
+    (v: number) => dispatch(setRefinerStart(v)),
+    [dispatch]
+  );
+
+  const handleReset = useCallback(
+    () => dispatch(setRefinerStart(0.7)),
+    [dispatch]
+  );
+
+  return (
+    <IAISlider
+      label="Refiner Start"
+      step={shift ? 0.1 : 0.01}
+      min={0.01}
+      max={1}
+      onChange={handleChange}
+      handleReset={handleReset}
+      value={refinerStart}
+      sliderNumberInputProps={{ max: 1 }}
+      withInput
+      withReset
+      withSliderMarks
+      isInteger={false}
+    />
+  );
+};
+
+export default memo(ParamSDXLRefinerStart);

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

@@ -5,7 +5,6 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAINumberInput from 'common/components/IAINumberInput';
 
 import IAISlider from 'common/components/IAISlider';
-import { clampSymmetrySteps } from 'features/parameters/store/generationSlice';
 import { setRefinerSteps } from 'features/sdxl/store/sdxlSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,7 +17,6 @@ const selector = createSelector(
 
     return {
       refinerSteps,
-
       shouldUseSliders,
     };
   },
@@ -40,15 +38,11 @@ const ParamSDXLRefinerSteps = () => {
     dispatch(setRefinerSteps(20));
   }, [dispatch]);
 
-  const handleBlur = useCallback(() => {
-    dispatch(clampSymmetrySteps());
-  }, [dispatch]);
-
   return shouldUseSliders ? (
     <IAISlider
       label={t('parameters.steps')}
       min={1}
-      max={200}
+      max={100}
       step={1}
       onChange={handleChange}
       handleReset={handleReset}
@@ -56,18 +50,17 @@ const ParamSDXLRefinerSteps = () => {
       withInput
       withReset
       withSliderMarks
-      sliderNumberInputProps={{ max: 999 }}
+      sliderNumberInputProps={{ max: 500 }}
     />
   ) : (
     <IAINumberInput
       label={t('parameters.steps')}
       min={1}
-      max={999}
+      max={500}
       step={1}
       onChange={handleChange}
       value={refinerSteps}
       numberInputFieldProps={{ textAlign: 'center' }}
-      onBlur={handleBlur}
     />
   );
 };