diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx
index dcf266c368..37e1718dc6 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx
+++ b/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 (
-
-
+
+
+
+
+
+
+
+
);
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerAestheticScore.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerAestheticScore.tsx
new file mode 100644
index 0000000000..bab9011eb2
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default memo(ParamSDXLRefinerAestheticScore);
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx
new file mode 100644
index 0000000000..3e5bb3b9b5
--- /dev/null
+++ b/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 ? (
+
+ ) : (
+
+ );
+};
+
+export default memo(ParamSDXLRefinerCFGScale);
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamRefinerModelSelect.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
similarity index 96%
rename from invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamRefinerModelSelect.tsx
rename to invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx
index 4c7c32a069..1b623e23f8 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamRefinerModelSelect.tsx
+++ b/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);
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx
new file mode 100644
index 0000000000..fd2b1457d5
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default memo(ParamSDXLRefinerScheduler);
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx
new file mode 100644
index 0000000000..e4b590e988
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default memo(ParamSDXLRefinerStart);
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
index 2861f2f847..c3e61b70e4 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerSteps.tsx
+++ b/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 ? (
{
withInput
withReset
withSliderMarks
- sliderNumberInputProps={{ max: 999 }}
+ sliderNumberInputProps={{ max: 500 }}
/>
) : (
);
};