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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx
View File

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

18
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx
View File

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