ui: update scaled width and height sliders to be model sensitive

This commit is contained in:
blessedcoolant 2023-08-30 10:28:54 +12:00
parent 65fb6af01f
commit db4d35ed45
2 changed files with 25 additions and 11 deletions

View File

@ -5,16 +5,17 @@ import IAISlider from 'common/components/IAISlider';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
import { generationSelector } from 'features/parameters/store/generationSelectors';
import { systemSelector } from 'features/system/store/systemSelectors';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
[generationSelector, systemSelector, canvasSelector],
(parameters, system, canvas) => {
[generationSelector, canvasSelector],
(generation, canvas) => {
const { scaledBoundingBoxDimensions, boundingBoxScaleMethod } = canvas;
const { model } = generation;
return {
model,
scaledBoundingBoxDimensions,
isManual: boundingBoxScaleMethod === 'manual',
};
@ -24,7 +25,12 @@ const selector = createSelector(
const ParamScaledHeight = () => {
const dispatch = useAppDispatch();
const { isManual, scaledBoundingBoxDimensions } = useAppSelector(selector);
const { model, isManual, scaledBoundingBoxDimensions } =
useAppSelector(selector);
const initial = ['sdxl', 'sdxl-refiner'].includes(model?.base_model as string)
? 1024
: 512;
const { t } = useTranslation();
@ -41,7 +47,7 @@ const ParamScaledHeight = () => {
dispatch(
setScaledBoundingBoxDimensions({
...scaledBoundingBoxDimensions,
height: Math.floor(512),
height: Math.floor(initial),
})
);
};
@ -51,7 +57,7 @@ const ParamScaledHeight = () => {
isDisabled={!isManual}
label={t('parameters.scaledHeight')}
min={64}
max={1024}
max={1536}
step={64}
value={scaledBoundingBoxDimensions.height}
onChange={handleChangeScaledHeight}

View File

@ -4,15 +4,18 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISlider from 'common/components/IAISlider';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
import { generationSelector } from 'features/parameters/store/generationSelectors';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
[canvasSelector],
(canvas) => {
[canvasSelector, generationSelector],
(canvas, generation) => {
const { boundingBoxScaleMethod, scaledBoundingBoxDimensions } = canvas;
const { model } = generation;
return {
model,
scaledBoundingBoxDimensions,
isManual: boundingBoxScaleMethod === 'manual',
};
@ -22,7 +25,12 @@ const selector = createSelector(
const ParamScaledWidth = () => {
const dispatch = useAppDispatch();
const { isManual, scaledBoundingBoxDimensions } = useAppSelector(selector);
const { model, isManual, scaledBoundingBoxDimensions } =
useAppSelector(selector);
const initial = ['sdxl', 'sdxl-refiner'].includes(model?.base_model as string)
? 1024
: 512;
const { t } = useTranslation();
@ -39,7 +47,7 @@ const ParamScaledWidth = () => {
dispatch(
setScaledBoundingBoxDimensions({
...scaledBoundingBoxDimensions,
width: Math.floor(512),
width: Math.floor(initial),
})
);
};
@ -49,7 +57,7 @@ const ParamScaledWidth = () => {
isDisabled={!isManual}
label={t('parameters.scaledWidth')}
min={64}
max={1024}
max={1536}
step={64}
value={scaledBoundingBoxDimensions.width}
onChange={handleChangeScaledWidth}