From f057d5c85b5a0e3434ae9ad27fb4ca68f50500d5 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Thu, 27 Jul 2023 19:40:32 +1200 Subject: [PATCH 01/11] fix: Lint Errors --- .../components/parameters/ParamControlNetModel.tsx | 3 ++- .../fields/ControlNetModelInputFieldComponent.tsx | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx index 8392bdd2e3..9de9afbffb 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx @@ -12,6 +12,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors'; import { forEach } from 'lodash-es'; import { memo, useCallback, useMemo } from 'react'; import { useGetControlNetModelsQuery } from 'services/api/endpoints/models'; +import { BaseModelType } from 'services/api/types'; type ParamControlNetModelProps = { controlNetId: string; @@ -58,7 +59,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => { data.push({ value: id, label: model.model_name, - group: MODEL_TYPE_MAP[model.base_model], + group: MODEL_TYPE_MAP[model.base_model as BaseModelType], disabled, tooltip: disabled ? `Incompatible base model: ${model.base_model}` diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/ControlNetModelInputFieldComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/ControlNetModelInputFieldComponent.tsx index 7fe2373f66..7d45f1c1d0 100644 --- a/invokeai/frontend/web/src/features/nodes/components/fields/ControlNetModelInputFieldComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/fields/ControlNetModelInputFieldComponent.tsx @@ -11,6 +11,7 @@ import { modelIdToControlNetModelParam } from 'features/parameters/util/modelIdT import { forEach } from 'lodash-es'; import { memo, useCallback, useMemo } from 'react'; import { useGetControlNetModelsQuery } from 'services/api/endpoints/models'; +import { BaseModelType } from 'services/api/types'; import { FieldComponentProps } from './types'; const ControlNetModelInputFieldComponent = ( @@ -53,7 +54,7 @@ const ControlNetModelInputFieldComponent = ( data.push({ value: id, label: model.model_name, - group: MODEL_TYPE_MAP[model.base_model], + group: MODEL_TYPE_MAP[model.base_model as BaseModelType], }); }); @@ -87,7 +88,8 @@ const ControlNetModelInputFieldComponent = ( Date: Thu, 27 Jul 2023 22:05:46 +1200 Subject: [PATCH 02/11] fix: TextArea Resizer styling when disabled --- .../web/src/theme/components/textarea.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/invokeai/frontend/web/src/theme/components/textarea.ts b/invokeai/frontend/web/src/theme/components/textarea.ts index b737cf5e57..8dd59c18e0 100644 --- a/invokeai/frontend/web/src/theme/components/textarea.ts +++ b/invokeai/frontend/web/src/theme/components/textarea.ts @@ -13,6 +13,15 @@ const invokeAI = defineStyle((props) => ({ var(--invokeai-colors-base-200) 70%, var(--invokeai-colors-base-200) 100%)`, }, + _disabled: { + '::-webkit-resizer': { + backgroundImage: `linear-gradient(135deg, + var(--invokeai-colors-base-50) 0%, + var(--invokeai-colors-base-50) 70%, + var(--invokeai-colors-base-200) 70%, + var(--invokeai-colors-base-200) 100%)`, + }, + }, _dark: { '::-webkit-resizer': { backgroundImage: `linear-gradient(135deg, @@ -21,6 +30,15 @@ const invokeAI = defineStyle((props) => ({ var(--invokeai-colors-base-800) 70%, var(--invokeai-colors-base-800) 100%)`, }, + _disabled: { + '::-webkit-resizer': { + backgroundImage: `linear-gradient(135deg, + var(--invokeai-colors-base-900) 0%, + var(--invokeai-colors-base-900) 70%, + var(--invokeai-colors-base-800) 70%, + var(--invokeai-colors-base-800) 100%)`, + }, + }, }, })); From b60adc31d0b3fb7df106c22ceb17d160f3513603 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Thu, 27 Jul 2023 22:21:35 +1200 Subject: [PATCH 03/11] feat: Unify Prompt Area Design Between SDXL and Regular Models --- .../Parameters/Prompt/ParamPromptArea.tsx | 21 +++++++++++++++ .../sdxl/components/ParamSDXLPromptArea.tsx | 27 +++++++++++++++++++ .../SDXLImageToImageTabParameters.tsx | 24 ++--------------- .../SDXLTextToImageTabParameters.tsx | 24 ++--------------- .../ImageToImageTabParameters.tsx | 6 ++--- .../TextToImage/TextToImageTabParameters.tsx | 6 ++--- .../UnifiedCanvas/UnifiedCanvasParameters.tsx | 6 ++--- 7 files changed, 58 insertions(+), 56 deletions(-) create mode 100644 invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx create mode 100644 invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx new file mode 100644 index 0000000000..f7bc95528b --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx @@ -0,0 +1,21 @@ +import { Flex } from '@chakra-ui/react'; +import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; +import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; + +export default function ParamPromptArea() { + return ( + + + + + ); +} diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx new file mode 100644 index 0000000000..82d1122db4 --- /dev/null +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx @@ -0,0 +1,27 @@ +import { Flex } from '@chakra-ui/react'; +import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; +import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; +import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt'; +import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning'; +import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning'; + +export default function ParamSDXLPromptArea() { + return ( + + + + + + + + ); +} diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx index 05aca62b79..c0b143a557 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx @@ -1,34 +1,14 @@ -import { Flex } from '@chakra-ui/react'; import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse'; -import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; -import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; -import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt'; -import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning'; -import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning'; +import ParamSDXLPromptArea from './ParamSDXLPromptArea'; import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse'; import SDXLImageToImageTabCoreParameters from './SDXLImageToImageTabCoreParameters'; const SDXLImageToImageTabParameters = () => { return ( <> - - - - - - - + diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx index eddc0b8891..35bc0b4284 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx @@ -1,34 +1,14 @@ -import { Flex } from '@chakra-ui/react'; import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse'; -import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; -import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; import TextToImageTabCoreParameters from 'features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters'; -import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt'; -import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning'; -import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning'; +import ParamSDXLPromptArea from './ParamSDXLPromptArea'; import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse'; const SDXLTextToImageTabParameters = () => { return ( <> - - - - - - - + diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx index 9de6a74ec0..b8de2f8308 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx @@ -2,20 +2,18 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse'; import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse'; import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse'; -import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; -import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse'; import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse'; // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse'; +import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters'; const ImageToImageTabParameters = () => { return ( <> - - + diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx index 8b6fb6f46c..75fa063e17 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx @@ -2,20 +2,18 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse'; import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse'; import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse'; -import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; -import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse'; import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse'; import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse'; // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; +import ParamPromptArea from '../../../../parameters/components/Parameters/Prompt/ParamPromptArea'; import TextToImageTabCoreParameters from './TextToImageTabCoreParameters'; const TextToImageTabParameters = () => { return ( <> - - + 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 95270c6bbc..de7ce3b084 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 @@ -4,18 +4,16 @@ import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Adv import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse'; import ParamSeamCorrectionCollapse from 'features/parameters/components/Parameters/Canvas/SeamCorrection/ParamSeamCorrectionCollapse'; import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse'; -import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; -import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse'; // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse'; +import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea'; import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons'; import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters'; const UnifiedCanvasParameters = () => { return ( <> - - + From 611f31c057cacfdb447e72aa77d957d9a155fc5f Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Thu, 27 Jul 2023 22:30:50 +1200 Subject: [PATCH 04/11] fix: Adjust embedding button on PositivePrompt for new changes --- .../components/Parameters/Core/ParamPositiveConditioning.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx index 5a52358670..da1588bd72 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx @@ -148,7 +148,7 @@ const ParamPositiveConditioning = () => { From 4d2b87ea01000728b0c3874105c7eac4cf3c6432 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Thu, 27 Jul 2023 15:46:50 +1000 Subject: [PATCH 05/11] fix(ui): fix types for controlnet models `ControlNetModelConfig` was split into `ControlNetModelCheckpointConfig` and `ControlNetModelDiffusersConfig`, need to update the UI types --- invokeai/frontend/web/src/services/api/types.d.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/invokeai/frontend/web/src/services/api/types.d.ts b/invokeai/frontend/web/src/services/api/types.d.ts index 7d9040321c..17f20ca1ac 100644 --- a/invokeai/frontend/web/src/services/api/types.d.ts +++ b/invokeai/frontend/web/src/services/api/types.d.ts @@ -42,8 +42,13 @@ export type ControlField = components['schemas']['ControlField']; // Model Configs export type LoRAModelConfig = components['schemas']['LoRAModelConfig']; export type VaeModelConfig = components['schemas']['VaeModelConfig']; +export type ControlNetModelCheckpointConfig = + components['schemas']['ControlNetModelCheckpointConfig']; +export type ControlNetModelDiffusersConfig = + components['schemas']['ControlNetModelDiffusersConfig']; export type ControlNetModelConfig = - components['schemas']['ControlNetModelConfig']; + | ControlNetModelCheckpointConfig + | ControlNetModelDiffusersConfig; export type TextualInversionModelConfig = components['schemas']['TextualInversionModelConfig']; export type DiffusersModelConfig = From b8b46aec09c84b3f1450468563ed72ffe526c69f Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Fri, 28 Jul 2023 04:34:41 +1200 Subject: [PATCH 06/11] Revert "fix: Lint Errors" This reverts commit f057d5c85b5a0e3434ae9ad27fb4ca68f50500d5. --- .../components/parameters/ParamControlNetModel.tsx | 3 +-- .../fields/ControlNetModelInputFieldComponent.tsx | 6 ++---- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx index 9de9afbffb..8392bdd2e3 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx @@ -12,7 +12,6 @@ import { selectIsBusy } from 'features/system/store/systemSelectors'; import { forEach } from 'lodash-es'; import { memo, useCallback, useMemo } from 'react'; import { useGetControlNetModelsQuery } from 'services/api/endpoints/models'; -import { BaseModelType } from 'services/api/types'; type ParamControlNetModelProps = { controlNetId: string; @@ -59,7 +58,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => { data.push({ value: id, label: model.model_name, - group: MODEL_TYPE_MAP[model.base_model as BaseModelType], + group: MODEL_TYPE_MAP[model.base_model], disabled, tooltip: disabled ? `Incompatible base model: ${model.base_model}` diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/ControlNetModelInputFieldComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/ControlNetModelInputFieldComponent.tsx index 7d45f1c1d0..7fe2373f66 100644 --- a/invokeai/frontend/web/src/features/nodes/components/fields/ControlNetModelInputFieldComponent.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/fields/ControlNetModelInputFieldComponent.tsx @@ -11,7 +11,6 @@ import { modelIdToControlNetModelParam } from 'features/parameters/util/modelIdT import { forEach } from 'lodash-es'; import { memo, useCallback, useMemo } from 'react'; import { useGetControlNetModelsQuery } from 'services/api/endpoints/models'; -import { BaseModelType } from 'services/api/types'; import { FieldComponentProps } from './types'; const ControlNetModelInputFieldComponent = ( @@ -54,7 +53,7 @@ const ControlNetModelInputFieldComponent = ( data.push({ value: id, label: model.model_name, - group: MODEL_TYPE_MAP[model.base_model as BaseModelType], + group: MODEL_TYPE_MAP[model.base_model], }); }); @@ -88,8 +87,7 @@ const ControlNetModelInputFieldComponent = ( Date: Fri, 28 Jul 2023 15:01:40 +1200 Subject: [PATCH 07/11] feat: Add Concat Link Animation Might remove the lines. Just pushing to save changes for now. --- .../Core/ParamPositiveConditioning.tsx | 2 +- .../Parameters/Prompt/ParamPromptArea.tsx | 4 -- .../sdxl/components/ParamSDXLConcatButton.tsx | 43 +++++++++++ .../sdxl/components/ParamSDXLConcatPrompt.tsx | 33 --------- .../sdxl/components/ParamSDXLPromptArea.tsx | 35 +++++++-- .../sdxl/components/SDXLConcatLink.tsx | 72 +++++++++++++++++++ 6 files changed, 144 insertions(+), 45 deletions(-) create mode 100644 invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx delete mode 100644 invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx create mode 100644 invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx index da1588bd72..59b5138e3e 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx @@ -148,7 +148,7 @@ const ParamPositiveConditioning = () => { diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx index f7bc95528b..3066490847 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx @@ -8,10 +8,6 @@ export default function ParamPromptArea() { sx={{ flexDirection: 'column', gap: 2, - p: 2, - borderRadius: 4, - bg: 'base.100', - _dark: { bg: 'base.850' }, }} > diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx new file mode 100644 index 0000000000..2787360b33 --- /dev/null +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx @@ -0,0 +1,43 @@ +import { RootState } from 'app/store/store'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import IAIIconButton from 'common/components/IAIIconButton'; +import { FaLink } from 'react-icons/fa'; +import { setShouldConcatSDXLStylePrompt } from '../store/sdxlSlice'; + +export default function ParamSDXLConcatButton() { + const shouldConcatSDXLStylePrompt = useAppSelector( + (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt + ); + + const shouldPinParametersPanel = useAppSelector( + (state: RootState) => state.ui.shouldPinParametersPanel + ); + + const dispatch = useAppDispatch(); + + const handleShouldConcatPromptChange = () => { + dispatch(setShouldConcatSDXLStylePrompt(!shouldConcatSDXLStylePrompt)); + }; + + return ( + } + size="xs" + sx={{ + position: 'absolute', + insetInlineEnd: 1, + top: shouldPinParametersPanel ? 12 : 20, + border: 'none', + color: 'base.500', + _hover: { + bg: 'none', + }, + }} + > + ); +} diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx deleted file mode 100644 index 89e67be652..0000000000 --- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatPrompt.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Box } from '@chakra-ui/react'; -import { RootState } from 'app/store/store'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import IAISwitch from 'common/components/IAISwitch'; -import { ChangeEvent } from 'react'; -import { setShouldConcatSDXLStylePrompt } from '../store/sdxlSlice'; - -export default function ParamSDXLConcatPrompt() { - const shouldConcatSDXLStylePrompt = useAppSelector( - (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt - ); - - const dispatch = useAppDispatch(); - - const handleShouldConcatPromptChange = (e: ChangeEvent) => { - dispatch(setShouldConcatSDXLStylePrompt(e.target.checked)); - }; - - return ( - - - - ); -} diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx index 82d1122db4..a365f6067e 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx @@ -1,27 +1,48 @@ -import { Flex } from '@chakra-ui/react'; +import { Box, Flex } from '@chakra-ui/react'; +import { RootState } from 'app/store/store'; +import { useAppSelector } from 'app/store/storeHooks'; import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; -import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt'; +import ParamSDXLConcatButton from './ParamSDXLConcatButton'; import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning'; import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning'; +import SDXLConcatLink from './SDXLConcatLink'; export default function ParamSDXLPromptArea() { + const shouldPinParametersPanel = useAppSelector( + (state: RootState) => state.ui.shouldPinParametersPanel + ); + return ( + + + + + + + - ); } diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx new file mode 100644 index 0000000000..37930bdb24 --- /dev/null +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx @@ -0,0 +1,72 @@ +import { Box, Flex } from '@chakra-ui/react'; +import { RootState } from 'app/store/store'; +import { useAppSelector } from 'app/store/storeHooks'; +import { motion } from 'framer-motion'; +import { FaLink } from 'react-icons/fa'; + +export default function SDXLConcatLink() { + const shouldConcatSDXLStylePrompt = useAppSelector( + (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt + ); + return ( + shouldConcatSDXLStylePrompt && ( + + + + + + + + ) + ); +} From f155b03eeedbb5f8c68c6e9f71d0c21a7a5bd7c9 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Fri, 28 Jul 2023 18:55:59 +1200 Subject: [PATCH 08/11] feat: New animation for Concat Link --- .../sdxl/components/ParamSDXLPromptArea.tsx | 4 +- .../sdxl/components/SDXLConcatLink.tsx | 76 ++++++++++++++----- 2 files changed, 60 insertions(+), 20 deletions(-) diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx index a365f6067e..233894e280 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx @@ -24,7 +24,7 @@ export default function ParamSDXLPromptArea() { sx={{ position: 'absolute', w: 'full', - top: shouldPinParametersPanel ? '131px' : '187px', + top: shouldPinParametersPanel ? '119px' : '175px', }} > @@ -33,7 +33,7 @@ export default function ParamSDXLPromptArea() { sx={{ position: 'absolute', w: 'full', - top: shouldPinParametersPanel ? '275px' : '331px', + top: shouldPinParametersPanel ? '263px' : '319px', }} > diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx index 37930bdb24..e9c3e0a6ab 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx @@ -15,23 +15,36 @@ export default function SDXLConcatLink() { h: 0.5, placeContent: 'center', gap: 2, - px: 2, + flexDirection: 'column', }} > @@ -39,30 +52,57 @@ export default function SDXLConcatLink() { as={motion.div} initial={{ opacity: 0, + scale: 0, + rotate: 0, }} animate={{ - opacity: 1, - transition: { duration: 0.3 }, + rotate: 360, + opacity: [0, 1, 1, 1], + scale: [0, 0.75, 1.5, 1], + transition: { duration: 0.6, times: [0, 0.25, 0.5, 1] }, + }} + sx={{ + zIndex: 3, + position: 'absolute', + left: '48%', + top: '3px', + p: 1, + borderRadius: 4, + bg: 'accent.200', + _dark: { + bg: 'accent.500', + }, }} - zIndex={2} - mt={-1.5} > - + From 14c465080182b4a385f95903543438d43327ee46 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Fri, 28 Jul 2023 19:03:29 +1200 Subject: [PATCH 09/11] fix: Lint Errors (returning possible null component) --- .../sdxl/components/ParamSDXLPromptArea.tsx | 44 ++-- .../sdxl/components/SDXLConcatLink.tsx | 195 +++++++++--------- 2 files changed, 120 insertions(+), 119 deletions(-) diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx index 233894e280..61719cea3f 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx @@ -13,6 +13,10 @@ export default function ParamSDXLPromptArea() { (state: RootState) => state.ui.shouldPinParametersPanel ); + const shouldConcatSDXLStylePrompt = useAppSelector( + (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt + ); + return ( - - - - - - + {shouldConcatSDXLStylePrompt && ( + + + + )} + {shouldConcatSDXLStylePrompt && ( + + + + )} diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx index e9c3e0a6ab..c4a7caf1d5 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx @@ -1,112 +1,105 @@ import { Box, Flex } from '@chakra-ui/react'; -import { RootState } from 'app/store/store'; -import { useAppSelector } from 'app/store/storeHooks'; import { motion } from 'framer-motion'; import { FaLink } from 'react-icons/fa'; export default function SDXLConcatLink() { - const shouldConcatSDXLStylePrompt = useAppSelector( - (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt - ); return ( - shouldConcatSDXLStylePrompt && ( - + + - - - - - - - ) + + + + ); } From 1df30f72606551240ef2865e7923c223283a942c Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Fri, 28 Jul 2023 20:45:39 +1200 Subject: [PATCH 10/11] feat: Pulse Animate SDXL Concat Link --- .../sdxl/components/ParamSDXLPromptArea.tsx | 49 ++++++++++-------- .../sdxl/components/SDXLConcatLink.tsx | 51 ++++++++++--------- 2 files changed, 54 insertions(+), 46 deletions(-) diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx index 61719cea3f..513b210a0a 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx @@ -3,6 +3,7 @@ import { RootState } from 'app/store/store'; import { useAppSelector } from 'app/store/storeHooks'; import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning'; import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning'; +import { AnimatePresence } from 'framer-motion'; import ParamSDXLConcatButton from './ParamSDXLConcatButton'; import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning'; import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning'; @@ -24,28 +25,32 @@ export default function ParamSDXLPromptArea() { gap: 2, }} > - {shouldConcatSDXLStylePrompt && ( - - - - )} - {shouldConcatSDXLStylePrompt && ( - - - - )} + + {shouldConcatSDXLStylePrompt && ( + + + + )} + + + {shouldConcatSDXLStylePrompt && ( + + + + )} + diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx index c4a7caf1d5..ac21ceebc8 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx @@ -1,7 +1,21 @@ import { Box, Flex } from '@chakra-ui/react'; +import { CSSObject } from '@emotion/react'; import { motion } from 'framer-motion'; import { FaLink } from 'react-icons/fa'; +const sharedConcatLinkStyle: CSSObject = { + position: 'absolute', + bg: 'none', + w: 'full', + minH: 2, + borderRadius: 0, + borderLeft: 'none', + borderRight: 'none', + zIndex: 2, + maskImage: + 'radial-gradient(circle at center, black, black 65%, black 30%, black 15%, transparent)', +}; + export default function SDXLConcatLink() { return ( @@ -47,13 +55,15 @@ export default function SDXLConcatLink() { initial={{ opacity: 0, scale: 0, - rotate: 0, }} animate={{ - rotate: 360, opacity: [0, 1, 1, 1], scale: [0, 0.75, 1.5, 1], - transition: { duration: 0.6, times: [0, 0.25, 0.5, 1] }, + transition: { duration: 0.42, times: [0, 0.25, 0.5, 1] }, + }} + exit={{ + opacity: 0, + scale: 0, }} sx={{ zIndex: 3, @@ -74,29 +84,22 @@ export default function SDXLConcatLink() { as={motion.div} initial={{ scaleX: 0, - borderRadius: 0, borderWidth: 0, display: 'none', }} animate={{ display: ['block', 'block', 'block', 'none'], scaleX: [0, 0.25, 0.5, 1], - borderRadius: [0, 0, 0, 3], borderWidth: [0, 3, 3, 0], - transition: { duration: 0.5, times: [0, 0.25, 0.5, 1] }, + transition: { duration: 0.37, times: [0, 0.25, 0.5, 1] }, }} sx={{ - position: 'absolute', top: '17px', - bg: 'none', - w: 'full', - minH: 2, borderBottom: 'none', - borderBottomRadius: 0, - borderColor: 'accent.300', - zIndex: 2, + borderColor: 'base.400', + ...sharedConcatLinkStyle, _dark: { - borderColor: 'accent.600', + borderColor: 'accent.500', }, }} /> From e4a2f56ad104367ba66a067df2ae973dec9522b9 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 28 Jul 2023 19:57:05 +1000 Subject: [PATCH 11/11] feat(ui): tweak link colors - make the `SDXLConcatLink` icon match existing colors in light mode - make the link toggle button accent color when active (its not super obvious but at least there is *some* visual difference for the button) --- .../web/src/features/sdxl/components/ParamSDXLConcatButton.tsx | 2 +- .../web/src/features/sdxl/components/SDXLConcatLink.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx index 2787360b33..9393b245ef 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx @@ -33,7 +33,7 @@ export default function ParamSDXLConcatButton() { insetInlineEnd: 1, top: shouldPinParametersPanel ? 12 : 20, border: 'none', - color: 'base.500', + color: shouldConcatSDXLStylePrompt ? 'accent.500' : 'base.500', _hover: { bg: 'none', }, diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx index ac21ceebc8..d64daae70d 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx @@ -72,7 +72,8 @@ export default function SDXLConcatLink() { top: '3px', p: 1, borderRadius: 4, - bg: 'accent.200', + bg: 'accent.400', + color: 'base.50', _dark: { bg: 'accent.500', },