From 8d1b8179afac1ca8c27bf1205c9982639ea3bdc7 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Tue, 25 Jul 2023 21:59:12 +1200 Subject: [PATCH] feat: Create UI for SDXL Refiner Options --- .../components/ParamSDXLRefinerCollapse.tsx | 24 +++++-- .../ParamSDXLRefinerAestheticScore.tsx | 55 ++++++++++++++ .../SDXLRefiner/ParamSDXLRefinerCFGScale.tsx | 71 +++++++++++++++++++ ...ct.tsx => ParamSDXLRefinerModelSelect.tsx} | 4 +- .../SDXLRefiner/ParamSDXLRefinerScheduler.tsx | 63 ++++++++++++++++ .../SDXLRefiner/ParamSDXLRefinerStart.tsx | 55 ++++++++++++++ .../SDXLRefiner/ParamSDXLRefinerSteps.tsx | 13 +--- 7 files changed, 268 insertions(+), 17 deletions(-) create mode 100644 invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerAestheticScore.tsx create mode 100644 invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerCFGScale.tsx rename invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/{ParamRefinerModelSelect.tsx => ParamSDXLRefinerModelSelect.tsx} (96%) create mode 100644 invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerScheduler.tsx create mode 100644 invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerStart.tsx 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 }} /> ) : ( ); };