diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx index 1e2ef833e8..1711c9344a 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx @@ -14,8 +14,9 @@ const selector = createSelector( [stateSelector, isStagingSelector], ({ canvas, generation }, isStaging) => { const { boundingBoxDimensions } = canvas; - const { aspectRatio } = generation; + const { model, aspectRatio } = generation; return { + model, boundingBoxDimensions, isStaging, aspectRatio, @@ -26,11 +27,15 @@ const selector = createSelector( const ParamBoundingBoxWidth = () => { const dispatch = useAppDispatch(); - const { boundingBoxDimensions, isStaging, aspectRatio } = + const { model, boundingBoxDimensions, isStaging, aspectRatio } = useAppSelector(selector); const { t } = useTranslation(); + const initial = ['sdxl', 'sdxl-refiner'].includes(model?.base_model as string) + ? 1024 + : 512; + const handleChangeHeight = (v: number) => { dispatch( setBoundingBoxDimensions({ @@ -53,15 +58,15 @@ const ParamBoundingBoxWidth = () => { dispatch( setBoundingBoxDimensions({ ...boundingBoxDimensions, - height: Math.floor(512), + height: Math.floor(initial), }) ); if (aspectRatio) { - const newWidth = roundToMultiple(512 * aspectRatio, 64); + const newWidth = roundToMultiple(initial * aspectRatio, 64); dispatch( setBoundingBoxDimensions({ width: newWidth, - height: Math.floor(512), + height: Math.floor(initial), }) ); } diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx index 0a75754074..a70d5b33ca 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx @@ -14,8 +14,9 @@ const selector = createSelector( [stateSelector, isStagingSelector], ({ canvas, generation }, isStaging) => { const { boundingBoxDimensions } = canvas; - const { aspectRatio } = generation; + const { model, aspectRatio } = generation; return { + model, boundingBoxDimensions, isStaging, aspectRatio, @@ -26,9 +27,13 @@ const selector = createSelector( const ParamBoundingBoxWidth = () => { const dispatch = useAppDispatch(); - const { boundingBoxDimensions, isStaging, aspectRatio } = + const { model, boundingBoxDimensions, isStaging, aspectRatio } = useAppSelector(selector); + const initial = ['sdxl', 'sdxl-refiner'].includes(model?.base_model as string) + ? 1024 + : 512; + const { t } = useTranslation(); const handleChangeWidth = (v: number) => { @@ -53,14 +58,14 @@ const ParamBoundingBoxWidth = () => { dispatch( setBoundingBoxDimensions({ ...boundingBoxDimensions, - width: Math.floor(512), + width: Math.floor(initial), }) ); if (aspectRatio) { - const newHeight = roundToMultiple(512 / aspectRatio, 64); + const newHeight = roundToMultiple(initial / aspectRatio, 64); dispatch( setBoundingBoxDimensions({ - width: Math.floor(512), + width: Math.floor(initial), height: newHeight, }) ); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamHeight.tsx index 37ed43ddc0..097dec4270 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamHeight.tsx @@ -11,16 +11,15 @@ import { useTranslation } from 'react-i18next'; const selector = createSelector( [stateSelector], ({ generation, hotkeys, config }) => { - const { initial, min, sliderMax, inputMax, fineStep, coarseStep } = - config.sd.height; - const { height } = generation; + const { min, sliderMax, inputMax, fineStep, coarseStep } = config.sd.height; + const { model, height } = generation; const { aspectRatio } = generation; const step = hotkeys.shift ? fineStep : coarseStep; return { + model, height, - initial, min, sliderMax, inputMax, @@ -37,11 +36,15 @@ type ParamHeightProps = Omit< >; const ParamHeight = (props: ParamHeightProps) => { - const { height, initial, min, sliderMax, inputMax, step, aspectRatio } = + const { model, height, min, sliderMax, inputMax, step, aspectRatio } = useAppSelector(selector); const dispatch = useAppDispatch(); const { t } = useTranslation(); + const initial = ['sdxl', 'sdxl-refiner'].includes(model?.base_model as string) + ? 1024 + : 512; + const handleChange = useCallback( (v: number) => { dispatch(setHeight(v)); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx index 895b6cedbf..d1c763fe45 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx @@ -11,15 +11,14 @@ import { useTranslation } from 'react-i18next'; const selector = createSelector( [stateSelector], ({ generation, hotkeys, config }) => { - const { initial, min, sliderMax, inputMax, fineStep, coarseStep } = - config.sd.width; - const { width, aspectRatio } = generation; + const { min, sliderMax, inputMax, fineStep, coarseStep } = config.sd.width; + const { model, width, aspectRatio } = generation; const step = hotkeys.shift ? fineStep : coarseStep; return { + model, width, - initial, min, sliderMax, inputMax, @@ -33,11 +32,15 @@ const selector = createSelector( type ParamWidthProps = Omit; const ParamWidth = (props: ParamWidthProps) => { - const { width, initial, min, sliderMax, inputMax, step, aspectRatio } = + const { model, width, min, sliderMax, inputMax, step, aspectRatio } = useAppSelector(selector); const dispatch = useAppDispatch(); const { t } = useTranslation(); + const initial = ['sdxl', 'sdxl-refiner'].includes(model?.base_model as string) + ? 1024 + : 512; + const handleChange = useCallback( (v: number) => { dispatch(setWidth(v));