Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
psychedelicious 2023-12-29 17:22:03 +11:00 committed by Kent Keirsey
parent f4ea495d23
commit 4e9841c924
2 changed files with 64 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}
max={200}
step={0.5}
fineStep={0.1}
onChange={handleChange}
min={min}
max={sliderMax}
step={coarseStep}
fineStep={fineStep}
onChange={onChange}
onReset={onReset}
withNumberInput
numberInputMax={inputMax}
marks={marks}
/>
</InvControl>
);

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

@ -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>
);