From 52c239749831a7204514f985b0d5414f246ca573 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 04:17:30 +1200 Subject: [PATCH 01/21] ui: Keep boards modal open by default --- .../web/src/features/gallery/components/ImageGalleryContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx index 6c34029490..672cf4e17a 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx @@ -39,7 +39,7 @@ const ImageGalleryContent = () => { const { galleryView } = useAppSelector(selector); const dispatch = useAppDispatch(); const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } = - useDisclosure(); + useDisclosure({ defaultIsOpen: true }); const handleClickImages = useCallback(() => { dispatch(galleryViewChanged('images')); From 98e905ee482e25b8dd4a5b23a85e44297734205f Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 04:51:32 +1200 Subject: [PATCH 02/21] ui: Combine mask and coherence under Compositing --- invokeai/frontend/web/public/locales/en.json | 9 +-- .../ParamCanvasCoherenceSteps.tsx | 0 .../ParamCanvasCoherenceStrength.tsx | 0 .../MaskAdjustment/ParamMaskBlur.tsx | 0 .../MaskAdjustment/ParamMaskBlurMethod.tsx | 0 .../ParamCompositingSettingsCollapse.tsx | 57 +++++++++++++++++++ .../ParamMaskAdjustmentCollapse.tsx | 21 ------- .../ParamCanvasCoherencePassCollapse.tsx | 21 ------- .../SDXLUnifiedCanvasTabParameters.tsx | 6 +- .../UnifiedCanvas/UnifiedCanvasParameters.tsx | 6 +- 10 files changed, 66 insertions(+), 54 deletions(-) rename invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/{SeamPainting => Compositing/CoherencePass}/ParamCanvasCoherenceSteps.tsx (100%) rename invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/{SeamPainting => Compositing/CoherencePass}/ParamCanvasCoherenceStrength.tsx (100%) rename invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/{ => Compositing}/MaskAdjustment/ParamMaskBlur.tsx (100%) rename invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/{ => Compositing}/MaskAdjustment/ParamMaskBlurMethod.tsx (100%) create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx delete mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse.tsx delete mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse.tsx diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index e39f438146..3907acdc60 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -506,12 +506,13 @@ "hiresStrength": "High Res Strength", "imageFit": "Fit Initial Image To Output Size", "codeformerFidelity": "Fidelity", + "compositingSettingsHeader": "Compositing Settings", "maskAdjustmentsHeader": "Mask Adjustments", - "maskBlur": "Mask Blur", - "maskBlurMethod": "Mask Blur Method", + "maskBlur": "Blur", + "maskBlurMethod": "Blur Method", "coherencePassHeader": "Coherence Pass", - "coherenceSteps": "Coherence Pass Steps", - "coherenceStrength": "Coherence Pass Strength", + "coherenceSteps": "Steps", + "coherenceStrength": "Strength", "seamLowThreshold": "Low", "seamHighThreshold": "High", "scaleBeforeProcessing": "Scale Before Processing", diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherenceSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherenceSteps.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherenceStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherenceStrength.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskBlur.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskBlur.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskBlurMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx similarity index 100% rename from invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskBlurMethod.tsx rename to invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx new file mode 100644 index 0000000000..a13fa01220 --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx @@ -0,0 +1,57 @@ +import { Divider, Flex, Text } from '@chakra-ui/react'; +import IAICollapse from 'common/components/IAICollapse'; +import { PropsWithChildren, memo } from 'react'; +import { useTranslation } from 'react-i18next'; +import ParamCanvasCoherenceSteps from './CoherencePass/ParamCanvasCoherenceSteps'; +import ParamCanvasCoherenceStrength from './CoherencePass/ParamCanvasCoherenceStrength'; +import ParamMaskBlur from './MaskAdjustment/ParamMaskBlur'; +import ParamMaskBlurMethod from './MaskAdjustment/ParamMaskBlurMethod'; + +const ParamCompositingSettingsCollapse = () => { + const { t } = useTranslation(); + + return ( + + + + + {t('parameters.maskAdjustmentsHeader')} + + + + + + + + {t('parameters.coherencePassHeader')} + + + + + + + ); +}; + +const CompositingSettingsWrapper = memo((props: PropsWithChildren) => ( + + {props.children} + +)); + +CompositingSettingsWrapper.displayName = 'CompositingSettingsWrapper'; + +export default memo(ParamCompositingSettingsCollapse); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse.tsx deleted file mode 100644 index 9ca6503d3d..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Flex } from '@chakra-ui/react'; -import IAICollapse from 'common/components/IAICollapse'; -import { memo } from 'react'; -import { useTranslation } from 'react-i18next'; -import ParamMaskBlur from './ParamMaskBlur'; -import ParamMaskBlurMethod from './ParamMaskBlurMethod'; - -const ParamMaskAdjustmentCollapse = () => { - const { t } = useTranslation(); - - return ( - - - - - - - ); -}; - -export default memo(ParamMaskAdjustmentCollapse); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse.tsx deleted file mode 100644 index b454c4ccec..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Flex } from '@chakra-ui/react'; -import IAICollapse from 'common/components/IAICollapse'; -import { memo } from 'react'; -import { useTranslation } from 'react-i18next'; -import ParamCanvasCoherenceSteps from './ParamCanvasCoherenceSteps'; -import ParamCanvasCoherenceStrength from './ParamCanvasCoherenceStrength'; - -const ParamCanvasCoherencePassCollapse = () => { - const { t } = useTranslation(); - - return ( - - - - - - - ); -}; - -export default memo(ParamCanvasCoherencePassCollapse); diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx index 8fc4a3181c..01236d8ec3 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx @@ -1,8 +1,7 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse'; import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse'; +import ParamCompositingSettingsCollapse from 'features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse'; import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse'; -import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse'; -import ParamCanvasCoherencePassCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse'; import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse'; import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse'; @@ -20,9 +19,8 @@ export default function SDXLUnifiedCanvasTabParameters() { - - + ); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx index a640e1bae4..1ee748ccce 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx @@ -1,9 +1,8 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse'; import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse'; import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse'; +import ParamCompositingSettingsCollapse from 'features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse'; import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse'; -import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse'; -import ParamCanvasCoherencePassCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamCanvasCoherencePassCollapse'; import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse'; import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea'; import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse'; @@ -20,9 +19,8 @@ const UnifiedCanvasParameters = () => { - - + From 9eed8cdc271a81fd4763d9ae6fc59ca54de58576 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 04:51:53 +1200 Subject: [PATCH 03/21] ui: fix some minor spacing and color issues --- .../components/ParamDynamicPromptsCollapse.tsx | 6 +++--- .../Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx | 2 +- .../InfillAndScaling/ParamInfillAndScalingCollapse.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx index a213a398c1..249e461876 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx @@ -4,11 +4,11 @@ import { stateSelector } from 'app/store/store'; import { useAppSelector } from 'app/store/storeHooks'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import IAICollapse from 'common/components/IAICollapse'; +import { memo } from 'react'; +import { useFeatureStatus } from '../../system/hooks/useFeatureStatus'; import ParamDynamicPromptsCombinatorial from './ParamDynamicPromptsCombinatorial'; import ParamDynamicPromptsToggle from './ParamDynamicPromptsEnabled'; import ParamDynamicPromptsMaxPrompts from './ParamDynamicPromptsMaxPrompts'; -import { useFeatureStatus } from '../../system/hooks/useFeatureStatus'; -import { memo } from 'react'; const selector = createSelector( stateSelector, @@ -32,7 +32,7 @@ const ParamDynamicPromptsCollapse = () => { return ( - + diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx index 3c07768461..438e3f4041 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx @@ -20,7 +20,7 @@ export default function ParamBoundingBoxSize() { borderRadius: 4, flexDirection: 'column', w: 'full', - bg: 'base.150', + bg: 'base.100', _dark: { bg: 'base.750', }, diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx index a531eba57f..2951a7dee3 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx @@ -14,7 +14,7 @@ const ParamInfillCollapse = () => { return ( - + From 176d41d624466b58d40bd6a3995f5e61caf5146c Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 05:05:54 +1200 Subject: [PATCH 04/21] ui: Add SubParametersWrapper --- .../ParamCompositingSettingsCollapse.tsx | 40 ++++--------------- .../ParamInfillAndScalingCollapse.tsx | 18 ++++++--- .../Parameters/SubParametersWrapper.tsx | 39 ++++++++++++++++++ 3 files changed, 58 insertions(+), 39 deletions(-) create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx index a13fa01220..c3c978e8a1 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse.tsx @@ -1,7 +1,8 @@ -import { Divider, Flex, Text } from '@chakra-ui/react'; +import { Divider, Flex } from '@chakra-ui/react'; import IAICollapse from 'common/components/IAICollapse'; -import { PropsWithChildren, memo } from 'react'; +import { memo } from 'react'; import { useTranslation } from 'react-i18next'; +import SubParametersWrapper from '../../SubParametersWrapper'; import ParamCanvasCoherenceSteps from './CoherencePass/ParamCanvasCoherenceSteps'; import ParamCanvasCoherenceStrength from './CoherencePass/ParamCanvasCoherenceStrength'; import ParamMaskBlur from './MaskAdjustment/ParamMaskBlur'; @@ -13,45 +14,18 @@ const ParamCompositingSettingsCollapse = () => { return ( - - - {t('parameters.maskAdjustmentsHeader')} - + - + - - - {t('parameters.coherencePassHeader')} - + - + ); }; -const CompositingSettingsWrapper = memo((props: PropsWithChildren) => ( - - {props.children} - -)); - -CompositingSettingsWrapper.displayName = 'CompositingSettingsWrapper'; - export default memo(ParamCompositingSettingsCollapse); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx index 2951a7dee3..f2da288e59 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx @@ -1,8 +1,9 @@ -import { Flex } from '@chakra-ui/react'; +import { Divider, Flex } from '@chakra-ui/react'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import IAICollapse from 'common/components/IAICollapse'; +import SubParametersWrapper from '../../SubParametersWrapper'; import ParamInfillMethod from './ParamInfillMethod'; import ParamInfillTilesize from './ParamInfillTilesize'; import ParamScaleBeforeProcessing from './ParamScaleBeforeProcessing'; @@ -15,11 +16,16 @@ const ParamInfillCollapse = () => { return ( - - - - - + + + + + + + + + + ); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx new file mode 100644 index 0000000000..e03b80bc8f --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx @@ -0,0 +1,39 @@ +import { Flex, Text } from '@chakra-ui/react'; +import { ReactNode, memo } from 'react'; + +type SubParameterWrapperProps = { + children: ReactNode[]; + label?: string; +}; + +const SubParametersWrapper = (props: SubParameterWrapperProps) => ( + + {props.label && ( + + {props.label} + + )} + {props.children} + +); + +SubParametersWrapper.displayName = 'SubSettingsWrapper'; + +export default memo(SubParametersWrapper); From 9afc909ff05512a9941b22d0bf97c04a71518224 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 05:22:44 +1200 Subject: [PATCH 05/21] ui: tweak parameter options spacing --- invokeai/frontend/web/src/app/store/store.ts | 4 ++-- .../dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx | 2 +- .../web/src/features/lora/components/ParamLoraCollapse.tsx | 2 +- .../components/Parameters/Advanced/ParamAdvancedCollapse.tsx | 2 +- .../components/Parameters/Noise/ParamNoiseCollapse.tsx | 2 +- .../components/Parameters/Seamless/ParamSeamlessCollapse.tsx | 2 +- .../src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx | 4 ++-- .../sdxl/components/SDXLImageToImageTabCoreParameters.tsx | 2 ++ .../sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx | 2 ++ .../tabs/ImageToImage/ImageToImageTabCoreParameters.tsx | 2 ++ .../tabs/TextToImage/TextToImageTabCoreParameters.tsx | 2 ++ .../tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx | 2 ++ 12 files changed, 19 insertions(+), 9 deletions(-) diff --git a/invokeai/frontend/web/src/app/store/store.ts b/invokeai/frontend/web/src/app/store/store.ts index 6b544252db..ce2a21c6e7 100644 --- a/invokeai/frontend/web/src/app/store/store.ts +++ b/invokeai/frontend/web/src/app/store/store.ts @@ -6,11 +6,11 @@ import { configureStore, } from '@reduxjs/toolkit'; import canvasReducer from 'features/canvas/store/canvasSlice'; +import changeBoardModalReducer from 'features/changeBoardModal/store/slice'; import controlNetReducer from 'features/controlNet/store/controlNetSlice'; +import deleteImageModalReducer from 'features/deleteImageModal/store/slice'; import dynamicPromptsReducer from 'features/dynamicPrompts/store/dynamicPromptsSlice'; import galleryReducer from 'features/gallery/store/gallerySlice'; -import deleteImageModalReducer from 'features/deleteImageModal/store/slice'; -import changeBoardModalReducer from 'features/changeBoardModal/store/slice'; import loraReducer from 'features/lora/store/loraSlice'; import nodesReducer from 'features/nodes/store/nodesSlice'; import generationReducer from 'features/parameters/store/generationSlice'; diff --git a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx index 249e461876..a363520ab7 100644 --- a/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx +++ b/invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx @@ -32,7 +32,7 @@ const ParamDynamicPromptsCollapse = () => { return ( - + diff --git a/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx b/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx index c2edd94106..c0b804732c 100644 --- a/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx +++ b/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx @@ -32,7 +32,7 @@ const ParamLoraCollapse = () => { return ( - + diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx index bca1402571..07ce1ad29a 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx @@ -29,7 +29,7 @@ export default function ParamAdvancedCollapse() { return ( - + diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx index 0419ecc656..e6733495b1 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx @@ -42,7 +42,7 @@ const ParamNoiseCollapse = () => { label={t('parameters.noiseSettings')} activeLabel={activeLabel} > - + {isPerlinNoiseEnabled && } diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx index 099090fe3f..ffc39dac2b 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx @@ -50,7 +50,7 @@ const ParamSeamlessCollapse = () => { label={t('parameters.seamlessTiling')} activeLabel={activeLabel} > - + diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx index 5a3a8dc379..ae8f2ab020 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx @@ -4,6 +4,7 @@ import { stateSelector } from 'app/store/store'; import { useAppSelector } from 'app/store/storeHooks'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import IAICollapse from 'common/components/IAICollapse'; +import { memo } from 'react'; import ParamSDXLRefinerCFGScale from './SDXLRefiner/ParamSDXLRefinerCFGScale'; import ParamSDXLRefinerModelSelect from './SDXLRefiner/ParamSDXLRefinerModelSelect'; import ParamSDXLRefinerNegativeAestheticScore from './SDXLRefiner/ParamSDXLRefinerNegativeAestheticScore'; @@ -12,7 +13,6 @@ import ParamSDXLRefinerScheduler from './SDXLRefiner/ParamSDXLRefinerScheduler'; import ParamSDXLRefinerStart from './SDXLRefiner/ParamSDXLRefinerStart'; import ParamSDXLRefinerSteps from './SDXLRefiner/ParamSDXLRefinerSteps'; import ParamUseSDXLRefiner from './SDXLRefiner/ParamUseSDXLRefiner'; -import { memo } from 'react'; const selector = createSelector( stateSelector, @@ -32,7 +32,7 @@ const ParamSDXLRefinerCollapse = () => { return ( - + diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx index dae462ad47..29179e1778 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx @@ -37,6 +37,8 @@ const SDXLImageToImageTabCoreParameters = () => { sx={{ flexDirection: 'column', gap: 3, + px: 2, + pb: 2, }} > {shouldUseSliders ? ( diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx index 4cfbdeb895..eee0b9640f 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx @@ -35,6 +35,8 @@ const SDXLUnifiedCanvasTabCoreParameters = () => { sx={{ flexDirection: 'column', gap: 3, + px: 2, + pb: 2, }} > {shouldUseSliders ? ( diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx index 5c6f68e6ed..a41e7b134c 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx @@ -37,6 +37,8 @@ const ImageToImageTabCoreParameters = () => { sx={{ flexDirection: 'column', gap: 3, + px: 2, + pb: 2, }} > {shouldUseSliders ? ( diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx index 152efd3e17..d4a28858c8 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx @@ -34,6 +34,8 @@ const TextToImageTabCoreParameters = () => { sx={{ flexDirection: 'column', gap: 3, + px: 2, + pb: 2, }} > {shouldUseSliders ? ( diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx index 36f7ff7320..608e4d73f2 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx @@ -35,6 +35,8 @@ const UnifiedCanvasCoreParameters = () => { sx={{ flexDirection: 'column', gap: 3, + px: 2, + pb: 2, }} > {shouldUseSliders ? ( From f5c5f59220547cea0a80b8c4d92631b3d20a21c3 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 05:24:42 +1200 Subject: [PATCH 06/21] minor: tweak padding on ControlNet Collapse --- .../Parameters/ControlNet/ParamControlNetCollapse.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx index 9732e34c84..793c9275d5 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx @@ -69,7 +69,7 @@ const ParamControlNetCollapse = () => { return ( - + Date: Wed, 30 Aug 2023 05:49:57 +1200 Subject: [PATCH 07/21] feat: Auto Change Dimensions on Model Switch by Type --- invokeai/frontend/web/public/locales/en.json | 1 + .../listeners/modelSelected.ts | 19 +++++++++++++++++++ .../BoundingBox/ParamBoundingBoxHeight.tsx | 2 +- .../BoundingBox/ParamBoundingBoxWidth.tsx | 2 +- .../SettingsModal/SettingsModal.tsx | 16 +++++++++++++++- .../web/src/features/ui/store/uiSlice.ts | 5 +++++ .../web/src/features/ui/store/uiTypes.ts | 1 + 7 files changed, 43 insertions(+), 3 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 3907acdc60..c9f6a2f2f4 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -570,6 +570,7 @@ "useSlidersForAll": "Use Sliders For All Options", "showProgressInViewer": "Show Progress Images in Viewer", "antialiasProgressImages": "Antialias Progress Images", + "autoChangeDimensions": "Update W/H To Model Defaults On Change", "resetWebUI": "Reset Web UI", "resetWebUIDesc1": "Resetting the web UI only resets the browser's local cache of your images and remembered settings. It does not delete any images from disk.", "resetWebUIDesc2": "If images aren't showing up in the gallery or something else isn't working, please try resetting before submitting an issue on GitHub.", diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts index e44cbe504a..240890f043 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts @@ -1,9 +1,12 @@ import { logger } from 'app/logging/logger'; +import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; import { controlNetRemoved } from 'features/controlNet/store/controlNetSlice'; import { loraRemoved } from 'features/lora/store/loraSlice'; import { modelSelected } from 'features/parameters/store/actions'; import { modelChanged, + setHeight, + setWidth, vaeSelected, } from 'features/parameters/store/generationSlice'; import { zMainOrOnnxModel } from 'features/parameters/types/parameterSchemas'; @@ -74,6 +77,22 @@ export const addModelSelectedListener = () => { } } + // Update Width / Height / Bounding Box Dimensions on Model Change + if ( + state.generation.model?.base_model !== newModel.base_model && + state.ui.shouldAutoChangeDimensions + ) { + if (['sdxl', 'sdxl-refiner'].includes(newModel.base_model)) { + dispatch(setWidth(1024)); + dispatch(setHeight(1024)); + dispatch(setBoundingBoxDimensions({ width: 1024, height: 1024 })); + } else { + dispatch(setWidth(512)); + dispatch(setHeight(512)); + dispatch(setBoundingBoxDimensions({ width: 512, height: 512 })); + } + } + dispatch(modelChanged(newModel)); }, }); 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 64e44e63d0..1e2ef833e8 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 @@ -71,7 +71,7 @@ const ParamBoundingBoxWidth = () => { { { shouldShowAdvancedOptions, shouldUseNSFWChecker, shouldUseWatermarker, + shouldAutoChangeDimensions, } = useAppSelector(selector); const handleClickResetWebUI = useCallback(() => { @@ -297,6 +304,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => { ) } /> + ) => + dispatch(setShouldAutoChangeDimensions(e.target.checked)) + } + /> {shouldShowLocalizationToggle && ( { state.shouldShowEmbeddingPicker = !state.shouldShowEmbeddingPicker; }, + setShouldAutoChangeDimensions: (state, action: PayloadAction) => { + state.shouldAutoChangeDimensions = action.payload; + }, contextMenusClosed: (state) => { state.globalContextMenuCloseTrigger += 1; }, @@ -84,6 +88,7 @@ export const { setShouldShowProgressInViewer, favoriteSchedulersChanged, toggleEmbeddingPicker, + setShouldAutoChangeDimensions, contextMenusClosed, panelsChanged, } = uiSlice.actions; diff --git a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts index 0f0ed64f97..41a359a651 100644 --- a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts +++ b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts @@ -21,6 +21,7 @@ export interface UIState { shouldHidePreview: boolean; shouldShowProgressInViewer: boolean; shouldShowEmbeddingPicker: boolean; + shouldAutoChangeDimensions: boolean; favoriteSchedulers: SchedulerParam[]; globalContextMenuCloseTrigger: number; panels: Record; From cff391aa1d32fcb4406b6e90b0dc0dc4de623d15 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 05:58:07 +1200 Subject: [PATCH 08/21] feat: Update size resets to be model dependent --- .../Canvas/BoundingBox/ParamBoundingBoxHeight.tsx | 15 ++++++++++----- .../Canvas/BoundingBox/ParamBoundingBoxWidth.tsx | 15 ++++++++++----- .../components/Parameters/Core/ParamHeight.tsx | 13 ++++++++----- .../components/Parameters/Core/ParamWidth.tsx | 13 ++++++++----- 4 files changed, 36 insertions(+), 20 deletions(-) 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)); From 2469859c01edf833ee5d8adcad596188c37a5afa Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 06:23:02 +1200 Subject: [PATCH 09/21] feat: Add Set Control Image Width / Height to User Settings --- .../components/ControlNetImagePreview.tsx | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx index 312d5a517b..6290d66052 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx @@ -5,12 +5,15 @@ import { stateSelector } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import IAIDndImage from 'common/components/IAIDndImage'; +import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; import { TypesafeDraggableData, TypesafeDroppableData, } from 'features/dnd/types'; +import { setHeight, setWidth } from 'features/parameters/store/generationSlice'; +import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { memo, useCallback, useMemo, useState } from 'react'; -import { FaSave, FaUndo } from 'react-icons/fa'; +import { FaRulerVertical, FaSave, FaUndo } from 'react-icons/fa'; import { useAddImageToBoardMutation, useChangeImageIsIntermediateMutation, @@ -54,6 +57,7 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => { const dispatch = useAppDispatch(); const { pendingControlImages, autoAddBoardId } = useAppSelector(selector); + const activeTabName = useAppSelector(activeTabNameSelector); const [isMouseOverImage, setIsMouseOverImage] = useState(false); @@ -85,6 +89,24 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => { addToBoard({ imageDTO: processedControlImage, board_id: autoAddBoardId }); }, [processedControlImage, autoAddBoardId, changeIsIntermediate, addToBoard]); + const handleSetControlImageToDimensions = useCallback(() => { + if (!processedControlImage) { + return; + } + + if (activeTabName === 'unifiedCanvas') { + dispatch( + setBoundingBoxDimensions({ + width: processedControlImage.width, + height: processedControlImage.height, + }) + ); + } else { + dispatch(setWidth(processedControlImage.width)); + dispatch(setHeight(processedControlImage.height)); + } + }, [processedControlImage, activeTabName, dispatch]); + const handleMouseEnter = useCallback(() => { setIsMouseOverImage(true); }, []); @@ -157,6 +179,12 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => { tooltip="Save Control Image" styleOverrides={{ marginTop: 6 }} /> + : undefined} + tooltip="Set Control Image Dimensions To W/H" + styleOverrides={{ marginTop: 12 }} + /> @@ -192,6 +220,12 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => { tooltip="Save Control Image" styleOverrides={{ marginTop: 6 }} /> + : undefined} + tooltip="Set Control Image Dimensions To W/H" + styleOverrides={{ marginTop: 12 }} + /> From 171a0eaf51baedfb38ed2c9cd9b1205432034414 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 07:04:08 +1200 Subject: [PATCH 10/21] feat: Add Lock Ratio Option --- invokeai/frontend/web/public/locales/en.json | 3 +- .../BoundingBox/ParamBoundingBoxSize.tsx | 43 +++++++++++++- .../Parameters/Core/ParamAspectRatio.tsx | 10 +++- .../components/Parameters/Core/ParamSize.tsx | 57 ++++++++++++++++--- .../parameters/store/generationSlice.ts | 12 ++++ 5 files changed, 114 insertions(+), 11 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index c9f6a2f2f4..8d4499c65f 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -714,7 +714,8 @@ "ui": { "showProgressImages": "Show Progress Images", "hideProgressImages": "Hide Progress Images", - "swapSizes": "Swap Sizes" + "swapSizes": "Swap Sizes", + "lockRatio": "Lock Ratio" }, "nodes": { "reloadNodeTemplates": "Reload Node Templates", diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx index 438e3f4041..4c2e6d252c 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx @@ -1,17 +1,50 @@ import { Flex, Spacer, Text } from '@chakra-ui/react'; -import { useAppDispatch } from 'app/store/storeHooks'; +import { createSelector } from '@reduxjs/toolkit'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIIconButton from 'common/components/IAIIconButton'; +import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { flipBoundingBoxAxes } from 'features/canvas/store/canvasSlice'; +import { generationSelector } from 'features/parameters/store/generationSelectors'; +import { + setAspectRatio, + setShouldLockAspectRatio, +} from 'features/parameters/store/generationSlice'; +import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; +import { FaLock } from 'react-icons/fa'; import { MdOutlineSwapVert } from 'react-icons/md'; import ParamAspectRatio from '../../Core/ParamAspectRatio'; import ParamBoundingBoxHeight from './ParamBoundingBoxHeight'; import ParamBoundingBoxWidth from './ParamBoundingBoxWidth'; +const sizeOptsSelector = createSelector( + [generationSelector, canvasSelector], + (generation, canvas) => { + const { shouldFitToWidthHeight, shouldLockAspectRatio } = generation; + const { boundingBoxDimensions } = canvas; + + return { + shouldFitToWidthHeight, + shouldLockAspectRatio, + boundingBoxDimensions, + }; + } +); + export default function ParamBoundingBoxSize() { const dispatch = useAppDispatch(); const { t } = useTranslation(); + const { shouldLockAspectRatio, boundingBoxDimensions } = + useAppSelector(sizeOptsSelector); + + const handleLockRatio = useCallback(() => { + dispatch( + setAspectRatio(boundingBoxDimensions.width / boundingBoxDimensions.height) + ); + dispatch(setShouldLockAspectRatio(!shouldLockAspectRatio)); + }, [shouldLockAspectRatio, boundingBoxDimensions, dispatch]); + return ( dispatch(flipBoundingBoxAxes())} /> + } + isChecked={shouldLockAspectRatio} + onClick={handleLockRatio} + /> diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx index 41be41ec28..bf2782b525 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx @@ -2,7 +2,10 @@ import { ButtonGroup, Flex } from '@chakra-ui/react'; import { RootState } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIButton from 'common/components/IAIButton'; -import { setAspectRatio } from 'features/parameters/store/generationSlice'; +import { + setAspectRatio, + setShouldLockAspectRatio, +} from 'features/parameters/store/generationSlice'; import { activeTabNameSelector } from '../../../../ui/store/uiSelectors'; const aspectRatios = [ @@ -34,7 +37,10 @@ export default function ParamAspectRatio() { isDisabled={ activeTabName === 'img2img' ? !shouldFitToWidthHeight : false } - onClick={() => dispatch(setAspectRatio(ratio.value))} + onClick={() => { + dispatch(setAspectRatio(ratio.value)); + dispatch(setShouldLockAspectRatio(false)); + }} > {ratio.name} diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx index c629ef4601..6ebcb0beb1 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx @@ -1,22 +1,54 @@ import { Flex, Spacer, Text } from '@chakra-ui/react'; -import { RootState } from 'app/store/store'; +import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIIconButton from 'common/components/IAIIconButton'; -import { toggleSize } from 'features/parameters/store/generationSlice'; +import { generationSelector } from 'features/parameters/store/generationSelectors'; +import { + setAspectRatio, + setShouldLockAspectRatio, + toggleSize, +} from 'features/parameters/store/generationSlice'; +import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; +import { FaLock } from 'react-icons/fa'; import { MdOutlineSwapVert } from 'react-icons/md'; +import { activeTabNameSelector } from '../../../../ui/store/uiSelectors'; import ParamAspectRatio from './ParamAspectRatio'; import ParamHeight from './ParamHeight'; import ParamWidth from './ParamWidth'; -import { activeTabNameSelector } from '../../../../ui/store/uiSelectors'; + +const sizeOptsSelector = createSelector( + [generationSelector, activeTabNameSelector], + (generation, activeTabName) => { + const { shouldFitToWidthHeight, shouldLockAspectRatio, width, height } = + generation; + + return { + activeTabName, + shouldFitToWidthHeight, + shouldLockAspectRatio, + width, + height, + }; + } +); export default function ParamSize() { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const shouldFitToWidthHeight = useAppSelector( - (state: RootState) => state.generation.shouldFitToWidthHeight - ); - const activeTabName = useAppSelector(activeTabNameSelector); + const { + activeTabName, + shouldFitToWidthHeight, + shouldLockAspectRatio, + width, + height, + } = useAppSelector(sizeOptsSelector); + + const handleLockRatio = useCallback(() => { + dispatch(setAspectRatio(width / height)); + dispatch(setShouldLockAspectRatio(!shouldLockAspectRatio)); + }, [shouldLockAspectRatio, width, height, dispatch]); + return ( dispatch(toggleSize())} /> + } + isChecked={shouldLockAspectRatio} + isDisabled={ + activeTabName === 'img2img' ? !shouldFitToWidthHeight : false + } + onClick={handleLockRatio} + /> diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts index 8a4b9a7963..94f7f58b31 100644 --- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts +++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts @@ -62,6 +62,7 @@ export interface GenerationState { shouldUseCpuNoise: boolean; shouldShowAdvancedOptions: boolean; aspectRatio: number | null; + shouldLockAspectRatio: boolean; } export const initialGenerationState: GenerationState = { @@ -101,6 +102,7 @@ export const initialGenerationState: GenerationState = { shouldUseCpuNoise: true, shouldShowAdvancedOptions: false, aspectRatio: null, + shouldLockAspectRatio: false, }; const initialState: GenerationState = initialGenerationState; @@ -272,6 +274,15 @@ export const generationSlice = createSlice({ state.height = roundToMultiple(state.width / newAspectRatio, 8); } }, + setShouldLockAspectRatio: (state, action: PayloadAction) => { + if ( + action.payload === false && + ![null, 2 / 3, 16 / 9, 1 / 1].includes(state.aspectRatio) + ) { + state.aspectRatio = null; + } + state.shouldLockAspectRatio = action.payload; + }, }, extraReducers: (builder) => { builder.addCase(configChanged, (state, action) => { @@ -342,6 +353,7 @@ export const { shouldUseCpuNoiseChanged, setShouldShowAdvancedOptions, setAspectRatio, + setShouldLockAspectRatio, vaePrecisionChanged, } = generationSlice.actions; From 8d4caaabb0ab40d3e2a451687913e0853d029fa4 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 08:40:17 +1200 Subject: [PATCH 11/21] ui: Simply collapse spacing --- invokeai/frontend/web/src/common/components/IAICollapse.tsx | 4 ++-- .../dynamicPrompts/components/ParamDynamicPromptsCollapse.tsx | 2 +- .../web/src/features/lora/components/ParamLoraCollapse.tsx | 2 +- .../components/Parameters/Advanced/ParamAdvancedCollapse.tsx | 2 +- .../Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx | 2 +- .../Parameters/ControlNet/ParamControlNetCollapse.tsx | 2 +- .../components/Parameters/Noise/ParamNoiseCollapse.tsx | 2 +- .../components/Parameters/Seamless/ParamSeamlessCollapse.tsx | 2 +- .../src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx | 2 +- .../sdxl/components/SDXLImageToImageTabCoreParameters.tsx | 2 -- .../sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx | 2 -- .../tabs/ImageToImage/ImageToImageTabCoreParameters.tsx | 2 -- .../tabs/TextToImage/TextToImageTabCoreParameters.tsx | 2 -- .../tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx | 2 -- 14 files changed, 10 insertions(+), 20 deletions(-) diff --git a/invokeai/frontend/web/src/common/components/IAICollapse.tsx b/invokeai/frontend/web/src/common/components/IAICollapse.tsx index a5e08e6ddc..c2e6cebe99 100644 --- a/invokeai/frontend/web/src/common/components/IAICollapse.tsx +++ b/invokeai/frontend/web/src/common/components/IAICollapse.tsx @@ -86,8 +86,8 @@ const IAICollapse = (props: IAIToggleCollapseProps) => { { return ( - + diff --git a/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx b/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx index c0b804732c..c2edd94106 100644 --- a/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx +++ b/invokeai/frontend/web/src/features/lora/components/ParamLoraCollapse.tsx @@ -32,7 +32,7 @@ const ParamLoraCollapse = () => { return ( - + diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx index 07ce1ad29a..bca1402571 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx @@ -29,7 +29,7 @@ export default function ParamAdvancedCollapse() { return ( - + diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx index f2da288e59..8907e46e5f 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse.tsx @@ -15,7 +15,7 @@ const ParamInfillCollapse = () => { return ( - + diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx index 793c9275d5..9732e34c84 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx @@ -69,7 +69,7 @@ const ParamControlNetCollapse = () => { return ( - + { label={t('parameters.noiseSettings')} activeLabel={activeLabel} > - + {isPerlinNoiseEnabled && } diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx index ffc39dac2b..099090fe3f 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx @@ -50,7 +50,7 @@ const ParamSeamlessCollapse = () => { label={t('parameters.seamlessTiling')} activeLabel={activeLabel} > - + diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx index ae8f2ab020..fcf4d0bcd3 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLRefinerCollapse.tsx @@ -32,7 +32,7 @@ const ParamSDXLRefinerCollapse = () => { return ( - + diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx index 29179e1778..dae462ad47 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabCoreParameters.tsx @@ -37,8 +37,6 @@ const SDXLImageToImageTabCoreParameters = () => { sx={{ flexDirection: 'column', gap: 3, - px: 2, - pb: 2, }} > {shouldUseSliders ? ( diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx index eee0b9640f..4cfbdeb895 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabCoreParameters.tsx @@ -35,8 +35,6 @@ const SDXLUnifiedCanvasTabCoreParameters = () => { sx={{ flexDirection: 'column', gap: 3, - px: 2, - pb: 2, }} > {shouldUseSliders ? ( diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx index a41e7b134c..5c6f68e6ed 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabCoreParameters.tsx @@ -37,8 +37,6 @@ const ImageToImageTabCoreParameters = () => { sx={{ flexDirection: 'column', gap: 3, - px: 2, - pb: 2, }} > {shouldUseSliders ? ( diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx index d4a28858c8..152efd3e17 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters.tsx @@ -34,8 +34,6 @@ const TextToImageTabCoreParameters = () => { sx={{ flexDirection: 'column', gap: 3, - px: 2, - pb: 2, }} > {shouldUseSliders ? ( diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx index 608e4d73f2..36f7ff7320 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasCoreParameters.tsx @@ -35,8 +35,6 @@ const UnifiedCanvasCoreParameters = () => { sx={{ flexDirection: 'column', gap: 3, - px: 2, - pb: 2, }} > {shouldUseSliders ? ( From 8e4d288f028f03c2f210eb0996cb9c7c521d5818 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 08:44:34 +1200 Subject: [PATCH 12/21] ui: Make swap size unlock fixed ratio Coz it is no longer relevant --- .../web/src/features/parameters/store/generationSlice.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts index 94f7f58b31..c7b8d2b41f 100644 --- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts +++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts @@ -152,6 +152,9 @@ export const generationSlice = createSlice({ }, toggleSize: (state) => { const [width, height] = [state.width, state.height]; + if (![null, 2 / 3, 16 / 9, 1 / 1].includes(height / width)) { + state.aspectRatio = null; + } state.width = height; state.height = width; }, From b13a06f650d3b8edbdf72b436fdb0cdfa25cb110 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 08:52:11 +1200 Subject: [PATCH 13/21] ui: map aspect ratios instead of manually creating the array --- .../components/Parameters/Core/ParamAspectRatio.tsx | 2 ++ .../web/src/features/parameters/store/generationSlice.ts | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx index bf2782b525..05e0b09cee 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx @@ -15,6 +15,8 @@ const aspectRatios = [ { name: '1:1', value: 1 / 1 }, ]; +export const mappedAspectRatios = aspectRatios.map((ar) => ar.value); + export default function ParamAspectRatio() { const aspectRatio = useAppSelector( (state: RootState) => state.generation.aspectRatio diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts index c7b8d2b41f..68bd051ee7 100644 --- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts +++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts @@ -5,6 +5,7 @@ import { configChanged } from 'features/system/store/configSlice'; import { clamp } from 'lodash-es'; import { ImageDTO } from 'services/api/types'; +import { mappedAspectRatios } from '../components/Parameters/Core/ParamAspectRatio'; import { clipSkipMap } from '../types/constants'; import { CfgScaleParam, @@ -152,7 +153,7 @@ export const generationSlice = createSlice({ }, toggleSize: (state) => { const [width, height] = [state.width, state.height]; - if (![null, 2 / 3, 16 / 9, 1 / 1].includes(height / width)) { + if (!mappedAspectRatios.includes(height / width)) { state.aspectRatio = null; } state.width = height; @@ -280,7 +281,7 @@ export const generationSlice = createSlice({ setShouldLockAspectRatio: (state, action: PayloadAction) => { if ( action.payload === false && - ![null, 2 / 3, 16 / 9, 1 / 1].includes(state.aspectRatio) + !mappedAspectRatios.includes(state.aspectRatio) ) { state.aspectRatio = null; } From b5da7faafb3e91288f78b0142e7ba34a0854affc Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 09:06:38 +1200 Subject: [PATCH 14/21] ui: make bounding box swap also unlock Aspect Ratio --- .../web/src/features/parameters/store/generationSlice.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts index 68bd051ee7..9fd2c5aace 100644 --- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts +++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts @@ -5,6 +5,7 @@ import { configChanged } from 'features/system/store/configSlice'; import { clamp } from 'lodash-es'; import { ImageDTO } from 'services/api/types'; +import { flipBoundingBoxAxes } from 'features/canvas/store/canvasSlice'; import { mappedAspectRatios } from '../components/Parameters/Core/ParamAspectRatio'; import { clipSkipMap } from '../types/constants'; import { @@ -312,6 +313,9 @@ export const generationSlice = createSlice({ state.clipSkip = 0; } }); + builder.addCase(flipBoundingBoxAxes, (state) => { + state.aspectRatio = null; + }); }, }); From 1b6586dd8ccdfc118abbad7e1a230d3594a4668a Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 09:12:07 +1200 Subject: [PATCH 15/21] fix: cyclic redundancy --- .../components/Parameters/Core/ParamAspectRatio.tsx | 2 -- .../web/src/features/parameters/store/generationSlice.ts | 5 ++--- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx index 05e0b09cee..bf2782b525 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx @@ -15,8 +15,6 @@ const aspectRatios = [ { name: '1:1', value: 1 / 1 }, ]; -export const mappedAspectRatios = aspectRatios.map((ar) => ar.value); - export default function ParamAspectRatio() { const aspectRatio = useAppSelector( (state: RootState) => state.generation.aspectRatio diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts index 9fd2c5aace..4ffd5ca565 100644 --- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts +++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts @@ -6,7 +6,6 @@ import { clamp } from 'lodash-es'; import { ImageDTO } from 'services/api/types'; import { flipBoundingBoxAxes } from 'features/canvas/store/canvasSlice'; -import { mappedAspectRatios } from '../components/Parameters/Core/ParamAspectRatio'; import { clipSkipMap } from '../types/constants'; import { CfgScaleParam, @@ -154,7 +153,7 @@ export const generationSlice = createSlice({ }, toggleSize: (state) => { const [width, height] = [state.width, state.height]; - if (!mappedAspectRatios.includes(height / width)) { + if (![null, 2 / 3, 16 / 9, 1 / 1].includes(height / width)) { state.aspectRatio = null; } state.width = height; @@ -282,7 +281,7 @@ export const generationSlice = createSlice({ setShouldLockAspectRatio: (state, action: PayloadAction) => { if ( action.payload === false && - !mappedAspectRatios.includes(state.aspectRatio) + ![null, 2 / 3, 16 / 9, 1 / 1].includes(state.aspectRatio) ) { state.aspectRatio = null; } From 55f19aff3a63c214450169bed97530d4f43e051d Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 09:32:41 +1200 Subject: [PATCH 16/21] ui: encase Denoising Strength to make it more prominent --- .../ImageToImage/ImageToImageStrength.tsx | 31 ++++++++++--------- .../Parameters/SubParametersWrapper.tsx | 2 +- .../ParamSDXLImg2ImgDenoisingStrength.tsx | 29 +++++++++-------- 3 files changed, 34 insertions(+), 28 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx index b45fc9f386..2a14ee634c 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageStrength.tsx @@ -6,6 +6,7 @@ import IAISlider from 'common/components/IAISlider'; import { setImg2imgStrength } from 'features/parameters/store/generationSlice'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; +import SubParametersWrapper from '../SubParametersWrapper'; const selector = createSelector( [stateSelector], @@ -44,20 +45,22 @@ const ImageToImageStrength = () => { }, [dispatch, initial]); return ( - + + + ); }; diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx index e03b80bc8f..96c78b1336 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/SubParametersWrapper.tsx @@ -2,7 +2,7 @@ import { Flex, Text } from '@chakra-ui/react'; import { ReactNode, memo } from 'react'; type SubParameterWrapperProps = { - children: ReactNode[]; + children: ReactNode | ReactNode[]; label?: string; }; diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx index 52d7567339..66ad518655 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLImg2ImgDenoisingStrength.tsx @@ -3,6 +3,7 @@ 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 SubParametersWrapper from 'features/parameters/components/Parameters/SubParametersWrapper'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { setSDXLImg2ImgDenoisingStrength } from '../store/sdxlSlice'; @@ -34,19 +35,21 @@ const ParamSDXLImg2ImgDenoisingStrength = () => { }, [dispatch]); return ( - + + + ); }; From c6bab140434a19720fd5ca5614f80e85cb270d3b Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 09:33:04 +1200 Subject: [PATCH 17/21] ui: actually resolve circulars + fix flip bounding boxes AR unset --- .../Canvas/BoundingBox/ParamBoundingBoxSize.tsx | 11 ++++++++++- .../src/features/parameters/store/generationSlice.ts | 4 ---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx index 4c2e6d252c..7725461fd3 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx @@ -80,7 +80,16 @@ export default function ParamBoundingBoxSize() { size="sm" icon={} fontSize={20} - onClick={() => dispatch(flipBoundingBoxAxes())} + onClick={() => { + dispatch(flipBoundingBoxAxes()); + if ( + ![null, 2 / 3, 16 / 9, 1 / 1].includes( + boundingBoxDimensions.height / boundingBoxDimensions.width + ) + ) { + dispatch(setAspectRatio(null)); + } + }} /> { - state.aspectRatio = null; - }); }, }); From 65fb6af01f59af6fe27416875e7408c00f40dd22 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 10:15:26 +1200 Subject: [PATCH 18/21] ui: Make aspect ratio logic more robust --- .../BoundingBox/ParamBoundingBoxSize.tsx | 54 +++++++++++++------ .../Parameters/Core/ParamAspectRatio.tsx | 2 + .../components/Parameters/Core/ParamSize.tsx | 25 +++++++-- .../parameters/store/generationSlice.ts | 9 ---- 4 files changed, 62 insertions(+), 28 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx index 7725461fd3..1c1f60bc09 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx @@ -13,7 +13,9 @@ import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { FaLock } from 'react-icons/fa'; import { MdOutlineSwapVert } from 'react-icons/md'; -import ParamAspectRatio from '../../Core/ParamAspectRatio'; +import ParamAspectRatio, { + mappedAspectRatios, +} from '../../Core/ParamAspectRatio'; import ParamBoundingBoxHeight from './ParamBoundingBoxHeight'; import ParamBoundingBoxWidth from './ParamBoundingBoxWidth'; @@ -39,12 +41,43 @@ export default function ParamBoundingBoxSize() { useAppSelector(sizeOptsSelector); const handleLockRatio = useCallback(() => { - dispatch( - setAspectRatio(boundingBoxDimensions.width / boundingBoxDimensions.height) - ); - dispatch(setShouldLockAspectRatio(!shouldLockAspectRatio)); + if (shouldLockAspectRatio) { + dispatch(setShouldLockAspectRatio(false)); + if ( + !mappedAspectRatios.includes( + boundingBoxDimensions.width / boundingBoxDimensions.height + ) + ) { + dispatch(setAspectRatio(null)); + } else { + dispatch( + setAspectRatio( + boundingBoxDimensions.width / boundingBoxDimensions.height + ) + ); + } + } else { + dispatch(setShouldLockAspectRatio(true)); + dispatch( + setAspectRatio( + boundingBoxDimensions.width / boundingBoxDimensions.height + ) + ); + } }, [shouldLockAspectRatio, boundingBoxDimensions, dispatch]); + const handleToggleSize = useCallback(() => { + dispatch(flipBoundingBoxAxes()); + dispatch(setAspectRatio(null)); + if (shouldLockAspectRatio) { + dispatch( + setAspectRatio( + boundingBoxDimensions.height / boundingBoxDimensions.width + ) + ); + } + }, [dispatch, shouldLockAspectRatio, boundingBoxDimensions]); + return ( } fontSize={20} - onClick={() => { - dispatch(flipBoundingBoxAxes()); - if ( - ![null, 2 / 3, 16 / 9, 1 / 1].includes( - boundingBoxDimensions.height / boundingBoxDimensions.width - ) - ) { - dispatch(setAspectRatio(null)); - } - }} + onClick={handleToggleSize} /> ar.value); + export default function ParamAspectRatio() { const aspectRatio = useAppSelector( (state: RootState) => state.generation.aspectRatio diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx index 6ebcb0beb1..63700c4922 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx @@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next'; import { FaLock } from 'react-icons/fa'; import { MdOutlineSwapVert } from 'react-icons/md'; import { activeTabNameSelector } from '../../../../ui/store/uiSelectors'; -import ParamAspectRatio from './ParamAspectRatio'; +import ParamAspectRatio, { mappedAspectRatios } from './ParamAspectRatio'; import ParamHeight from './ParamHeight'; import ParamWidth from './ParamWidth'; @@ -45,10 +45,27 @@ export default function ParamSize() { } = useAppSelector(sizeOptsSelector); const handleLockRatio = useCallback(() => { - dispatch(setAspectRatio(width / height)); - dispatch(setShouldLockAspectRatio(!shouldLockAspectRatio)); + if (shouldLockAspectRatio) { + dispatch(setShouldLockAspectRatio(false)); + if (!mappedAspectRatios.includes(width / height)) { + dispatch(setAspectRatio(null)); + } else { + dispatch(setAspectRatio(width / height)); + } + } else { + dispatch(setShouldLockAspectRatio(true)); + dispatch(setAspectRatio(width / height)); + } }, [shouldLockAspectRatio, width, height, dispatch]); + const handleToggleSize = useCallback(() => { + dispatch(toggleSize()); + dispatch(setAspectRatio(null)); + if (shouldLockAspectRatio) { + dispatch(setAspectRatio(height / width)); + } + }, [dispatch, shouldLockAspectRatio, width, height]); + return ( dispatch(toggleSize())} + onClick={handleToggleSize} /> { const [width, height] = [state.width, state.height]; - if (![null, 2 / 3, 16 / 9, 1 / 1].includes(height / width)) { - state.aspectRatio = null; - } state.width = height; state.height = width; }, @@ -278,12 +275,6 @@ export const generationSlice = createSlice({ } }, setShouldLockAspectRatio: (state, action: PayloadAction) => { - if ( - action.payload === false && - ![null, 2 / 3, 16 / 9, 1 / 1].includes(state.aspectRatio) - ) { - state.aspectRatio = null; - } state.shouldLockAspectRatio = action.payload; }, }, From db4d35ed45b091f02bbba80c7bbbfe3bbfac8d7f Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 10:28:54 +1200 Subject: [PATCH 19/21] ui: update scaled width and height sliders to be model sensitive --- .../InfillAndScaling/ParamScaledHeight.tsx | 18 ++++++++++++------ .../InfillAndScaling/ParamScaledWidth.tsx | 18 +++++++++++++----- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx index 2cd70c4445..7dae01bb91 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx @@ -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} diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx index acceaeb9a2..0eda5a122c 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx @@ -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} From 8982543312dc70c8fd09d4e84b582dafb304ac45 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 30 Aug 2023 11:33:38 +1000 Subject: [PATCH 20/21] fix(ui): fix control image save button logic --- .../components/ControlNetImagePreview.tsx | 26 ++++++++++++++----- 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx index 6290d66052..cbfde49c76 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx @@ -18,6 +18,7 @@ import { useAddImageToBoardMutation, useChangeImageIsIntermediateMutation, useGetImageDTOQuery, + useRemoveImageFromBoardMutation, } from 'services/api/endpoints/images'; import { PostUploadAction } from 'services/api/types'; import IAIDndImageIcon from '../../../common/components/IAIDndImageIcon'; @@ -71,23 +72,36 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => { const [changeIsIntermediate] = useChangeImageIsIntermediateMutation(); const [addToBoard] = useAddImageToBoardMutation(); - + const [removeFromBoard] = useRemoveImageFromBoardMutation(); const handleResetControlImage = useCallback(() => { dispatch(controlNetImageChanged({ controlNetId, controlImage: null })); }, [controlNetId, dispatch]); - const handleSaveControlImage = useCallback(() => { + const handleSaveControlImage = useCallback(async () => { if (!processedControlImage) { return; } - changeIsIntermediate({ + await changeIsIntermediate({ imageDTO: processedControlImage, is_intermediate: false, - }); + }).unwrap(); - addToBoard({ imageDTO: processedControlImage, board_id: autoAddBoardId }); - }, [processedControlImage, autoAddBoardId, changeIsIntermediate, addToBoard]); + if (autoAddBoardId !== 'none') { + addToBoard({ + imageDTO: processedControlImage, + board_id: autoAddBoardId, + }); + } else { + removeFromBoard({ imageDTO: processedControlImage }); + } + }, [ + processedControlImage, + changeIsIntermediate, + autoAddBoardId, + addToBoard, + removeFromBoard, + ]); const handleSetControlImageToDimensions = useCallback(() => { if (!processedControlImage) { From 64723f06282e54750f3ee6fd0878c571e0a93e94 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 30 Aug 2023 14:07:24 +1200 Subject: [PATCH 21/21] fix: ControlNet DnD icons repeated twice --- .../components/ControlNetImagePreview.tsx | 65 +++++++------------ 1 file changed, 23 insertions(+), 42 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx index 6290d66052..aa097b5969 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx @@ -166,27 +166,7 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => { imageDTO={controlImage} isDropDisabled={shouldShowProcessedImage || !isEnabled} postUploadAction={postUploadAction} - > - <> - : undefined} - tooltip="Reset Control Image" - /> - : undefined} - tooltip="Save Control Image" - styleOverrides={{ marginTop: 6 }} - /> - : undefined} - tooltip="Set Control Image Dimensions To W/H" - styleOverrides={{ marginTop: 12 }} - /> - - + /> { imageDTO={processedControlImage} isUploadDisabled={true} isDropDisabled={!isEnabled} - > - <> - : undefined} - tooltip="Reset Control Image" - /> - : undefined} - tooltip="Save Control Image" - styleOverrides={{ marginTop: 6 }} - /> - : undefined} - tooltip="Set Control Image Dimensions To W/H" - styleOverrides={{ marginTop: 12 }} - /> - - + /> + + <> + : undefined} + tooltip="Reset Control Image" + /> + : undefined} + tooltip="Save Control Image" + styleOverrides={{ marginTop: 6 }} + /> + : undefined} + tooltip="Set Control Image Dimensions To W/H" + styleOverrides={{ marginTop: 12 }} + /> + + {pendingControlImages.includes(controlNetId) && (