mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat: Create UI for SDXL Refiner Options
This commit is contained in:
committed by
psychedelicious
parent
3bdb059eb7
commit
8d1b8179af
@ -4,7 +4,11 @@ import { stateSelector } from 'app/store/store';
|
|||||||
import { useAppSelector } from 'app/store/storeHooks';
|
import { useAppSelector } from 'app/store/storeHooks';
|
||||||
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
|
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
|
||||||
import IAICollapse from 'common/components/IAICollapse';
|
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 ParamSDXLRefinerSteps from './SDXLRefiner/ParamSDXLRefinerSteps';
|
||||||
import ParamUseSDXLRefiner from './SDXLRefiner/ParamUseSDXLRefiner';
|
import ParamUseSDXLRefiner from './SDXLRefiner/ParamUseSDXLRefiner';
|
||||||
|
|
||||||
@ -12,20 +16,30 @@ const selector = createSelector(
|
|||||||
stateSelector,
|
stateSelector,
|
||||||
(state) => {
|
(state) => {
|
||||||
const { shouldUseSDXLRefiner } = state.sdxl;
|
const { shouldUseSDXLRefiner } = state.sdxl;
|
||||||
return { activeLabel: shouldUseSDXLRefiner ? 'Enabled' : undefined };
|
const { shouldUseSliders } = state.ui;
|
||||||
|
return {
|
||||||
|
activeLabel: shouldUseSDXLRefiner ? 'Enabled' : undefined,
|
||||||
|
shouldUseSliders,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
defaultSelectorOptions
|
defaultSelectorOptions
|
||||||
);
|
);
|
||||||
|
|
||||||
const ParamSDXLRefinerCollapse = () => {
|
const ParamSDXLRefinerCollapse = () => {
|
||||||
const { activeLabel } = useAppSelector(selector);
|
const { activeLabel, shouldUseSliders } = useAppSelector(selector);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<IAICollapse label="Refiner" activeLabel={activeLabel}>
|
<IAICollapse label="Refiner" activeLabel={activeLabel}>
|
||||||
<Flex sx={{ gap: 2, flexDir: 'column' }}>
|
<Flex sx={{ gap: 2, flexDir: 'column' }}>
|
||||||
<ParamUseSDXLRefiner />
|
<ParamUseSDXLRefiner />
|
||||||
<ParamRefinerModelSelect />
|
<ParamSDXLRefinerModelSelect />
|
||||||
<ParamSDXLRefinerSteps />
|
<Flex gap={2} flexDirection={shouldUseSliders ? 'column' : 'row'}>
|
||||||
|
<ParamSDXLRefinerSteps />
|
||||||
|
<ParamSDXLRefinerCFGScale />
|
||||||
|
</Flex>
|
||||||
|
<ParamSDXLRefinerScheduler />
|
||||||
|
<ParamSDXLRefinerAestheticScore />
|
||||||
|
<ParamSDXLRefinerStart />
|
||||||
</Flex>
|
</Flex>
|
||||||
</IAICollapse>
|
</IAICollapse>
|
||||||
);
|
);
|
||||||
|
@ -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);
|
@ -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);
|
@ -19,7 +19,7 @@ const selector = createSelector(
|
|||||||
defaultSelectorOptions
|
defaultSelectorOptions
|
||||||
);
|
);
|
||||||
|
|
||||||
const ParamRefinerModelSelect = () => {
|
const ParamSDXLRefinerModelSelect = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
const { model } = useAppSelector(selector);
|
const { model } = useAppSelector(selector);
|
||||||
@ -103,4 +103,4 @@ const ParamRefinerModelSelect = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default memo(ParamRefinerModelSelect);
|
export default memo(ParamSDXLRefinerModelSelect);
|
@ -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);
|
@ -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);
|
@ -5,7 +5,6 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
|
|||||||
import IAINumberInput from 'common/components/IAINumberInput';
|
import IAINumberInput from 'common/components/IAINumberInput';
|
||||||
|
|
||||||
import IAISlider from 'common/components/IAISlider';
|
import IAISlider from 'common/components/IAISlider';
|
||||||
import { clampSymmetrySteps } from 'features/parameters/store/generationSlice';
|
|
||||||
import { setRefinerSteps } from 'features/sdxl/store/sdxlSlice';
|
import { setRefinerSteps } from 'features/sdxl/store/sdxlSlice';
|
||||||
import { memo, useCallback } from 'react';
|
import { memo, useCallback } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
@ -18,7 +17,6 @@ const selector = createSelector(
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
refinerSteps,
|
refinerSteps,
|
||||||
|
|
||||||
shouldUseSliders,
|
shouldUseSliders,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -40,15 +38,11 @@ const ParamSDXLRefinerSteps = () => {
|
|||||||
dispatch(setRefinerSteps(20));
|
dispatch(setRefinerSteps(20));
|
||||||
}, [dispatch]);
|
}, [dispatch]);
|
||||||
|
|
||||||
const handleBlur = useCallback(() => {
|
|
||||||
dispatch(clampSymmetrySteps());
|
|
||||||
}, [dispatch]);
|
|
||||||
|
|
||||||
return shouldUseSliders ? (
|
return shouldUseSliders ? (
|
||||||
<IAISlider
|
<IAISlider
|
||||||
label={t('parameters.steps')}
|
label={t('parameters.steps')}
|
||||||
min={1}
|
min={1}
|
||||||
max={200}
|
max={100}
|
||||||
step={1}
|
step={1}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
handleReset={handleReset}
|
handleReset={handleReset}
|
||||||
@ -56,18 +50,17 @@ const ParamSDXLRefinerSteps = () => {
|
|||||||
withInput
|
withInput
|
||||||
withReset
|
withReset
|
||||||
withSliderMarks
|
withSliderMarks
|
||||||
sliderNumberInputProps={{ max: 999 }}
|
sliderNumberInputProps={{ max: 500 }}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<IAINumberInput
|
<IAINumberInput
|
||||||
label={t('parameters.steps')}
|
label={t('parameters.steps')}
|
||||||
min={1}
|
min={1}
|
||||||
max={999}
|
max={500}
|
||||||
step={1}
|
step={1}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
value={refinerSteps}
|
value={refinerSteps}
|
||||||
numberInputFieldProps={{ textAlign: 'center' }}
|
numberInputFieldProps={{ textAlign: 'center' }}
|
||||||
onBlur={handleBlur}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Reference in New Issue
Block a user