From 73a95973a87788ae43a95626371e3f000165619b Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Sat, 3 Jun 2023 17:56:55 +1200 Subject: [PATCH] wip: Add Wrapper Container for Preprocessor Options For fast altering of the layout across all pre-preocessors. --- .../components/processors/CannyProcessor.tsx | 10 +++++----- .../processors/ContentShuffleProcessor.tsx | 10 +++++----- .../components/processors/HedProcessor.tsx | 10 +++++----- .../components/processors/LineartAnimeProcessor.tsx | 10 +++++----- .../components/processors/LineartProcessor.tsx | 12 ++++++------ .../components/processors/MediapipeFaceProcessor.tsx | 10 +++++----- .../components/processors/MidasDepthProcessor.tsx | 10 +++++----- .../components/processors/MlsdImageProcessor.tsx | 10 +++++----- .../components/processors/NormalBaeProcessor.tsx | 10 +++++----- .../components/processors/OpenposeProcessor.tsx | 12 ++++++------ .../components/processors/PidiProcessor.tsx | 12 ++++++------ .../components/processors/ZoeDepthProcessor.tsx | 2 +- .../processors/shared/ProcessorOptionsContainer.tsx | 12 ++++++++++++ 13 files changed, 71 insertions(+), 59 deletions(-) create mode 100644 invokeai/frontend/web/src/features/controlNet/components/processors/shared/ProcessorOptionsContainer.tsx diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx index 336d7d8bab..54aaca4eaf 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx @@ -1,9 +1,9 @@ -import { Flex } from '@chakra-ui/react'; import IAISlider from 'common/components/IAISlider'; +import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import { RequiredCannyImageProcessorInvocation } from 'features/controlNet/store/types'; import { memo, useCallback } from 'react'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; -import { RequiredCannyImageProcessorInvocation } from 'features/controlNet/store/types'; -import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor.default; @@ -44,7 +44,7 @@ const CannyProcessor = (props: CannyProcessorProps) => { }, [controlNetId, processorChanged]); return ( - + { max={255} withInput /> - + ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx index 0d8b85b89b..5c83cca2ea 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx @@ -1,9 +1,9 @@ -import { Flex } from '@chakra-ui/react'; import IAISlider from 'common/components/IAISlider'; +import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import { RequiredContentShuffleImageProcessorInvocation } from 'features/controlNet/store/types'; import { memo, useCallback } from 'react'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; -import { RequiredContentShuffleImageProcessorInvocation } from 'features/controlNet/store/types'; -import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor.default; @@ -83,7 +83,7 @@ const ContentShuffleProcessor = (props: Props) => { }, [controlNetId, processorChanged]); return ( - + { max={4096} withInput /> - + ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx index 23f79d69e2..4a55c2694f 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx @@ -1,10 +1,10 @@ -import { Flex } from '@chakra-ui/react'; import IAISlider from 'common/components/IAISlider'; import IAISwitch from 'common/components/IAISwitch'; +import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import { RequiredHedImageProcessorInvocation } from 'features/controlNet/store/types'; import { ChangeEvent, memo, useCallback } from 'react'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; -import { RequiredHedImageProcessorInvocation } from 'features/controlNet/store/types'; -import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor.default; @@ -55,7 +55,7 @@ const HedPreprocessor = (props: HedProcessorProps) => { }, [controlNetId, processorChanged]); return ( - + { isChecked={scribble} onChange={handleScribbleChanged} /> - + ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx index 1ccdcbd197..f64508e48c 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx @@ -1,9 +1,9 @@ -import { Flex } from '@chakra-ui/react'; import IAISlider from 'common/components/IAISlider'; +import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlNet/store/types'; import { memo, useCallback } from 'react'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; -import { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlNet/store/types'; -import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor.default; @@ -44,7 +44,7 @@ const LineartAnimeProcessor = (props: Props) => { }, [controlNetId, processorChanged]); return ( - + { max={4096} withInput /> - + ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx index 4376a0cbc3..13f889f245 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx @@ -1,10 +1,10 @@ -import { Flex } from '@chakra-ui/react'; import IAISlider from 'common/components/IAISlider'; -import { ChangeEvent, memo, useCallback } from 'react'; -import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; -import { RequiredLineartImageProcessorInvocation } from 'features/controlNet/store/types'; import IAISwitch from 'common/components/IAISwitch'; import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import { RequiredLineartImageProcessorInvocation } from 'features/controlNet/store/types'; +import { ChangeEvent, memo, useCallback } from 'react'; +import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; +import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor.default; @@ -52,7 +52,7 @@ const LineartProcessor = (props: LineartProcessorProps) => { ); return ( - + { isChecked={coarse} onChange={handleCoarseChanged} /> - + ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx index 9a044560cf..b7a56a9a6b 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx @@ -1,9 +1,9 @@ -import { Flex } from '@chakra-ui/react'; import IAISlider from 'common/components/IAISlider'; +import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import { RequiredMediapipeFaceProcessorInvocation } from 'features/controlNet/store/types'; import { memo, useCallback } from 'react'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; -import { RequiredMediapipeFaceProcessorInvocation } from 'features/controlNet/store/types'; -import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor.default; @@ -40,7 +40,7 @@ const MediapipeFaceProcessor = (props: Props) => { }, [controlNetId, processorChanged]); return ( - + { step={0.01} withInput /> - + ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx index ece69e7f34..84363b03bb 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx @@ -1,9 +1,9 @@ -import { Flex } from '@chakra-ui/react'; import IAISlider from 'common/components/IAISlider'; +import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import { RequiredMidasDepthImageProcessorInvocation } from 'features/controlNet/store/types'; import { memo, useCallback } from 'react'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; -import { RequiredMidasDepthImageProcessorInvocation } from 'features/controlNet/store/types'; -import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor.default; @@ -40,7 +40,7 @@ const MidasDepthProcessor = (props: Props) => { }, [controlNetId, processorChanged]); return ( - + { step={0.01} withInput /> - + ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx index 9b15935ea7..271a55cd83 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx @@ -1,9 +1,9 @@ -import { Flex } from '@chakra-ui/react'; import IAISlider from 'common/components/IAISlider'; +import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import { RequiredMlsdImageProcessorInvocation } from 'features/controlNet/store/types'; import { memo, useCallback } from 'react'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; -import { RequiredMlsdImageProcessorInvocation } from 'features/controlNet/store/types'; -import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor.default; @@ -66,7 +66,7 @@ const MlsdImageProcessor = (props: Props) => { }, [controlNetId, processorChanged]); return ( - + { step={0.01} withInput /> - + ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx index 79b6885669..bd5477e716 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx @@ -1,9 +1,9 @@ -import { Flex } from '@chakra-ui/react'; import IAISlider from 'common/components/IAISlider'; +import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import { RequiredNormalbaeImageProcessorInvocation } from 'features/controlNet/store/types'; import { memo, useCallback } from 'react'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; -import { RequiredNormalbaeImageProcessorInvocation } from 'features/controlNet/store/types'; -import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor.default; @@ -44,7 +44,7 @@ const NormalBaeProcessor = (props: Props) => { }, [controlNetId, processorChanged]); return ( - + { max={4096} withInput /> - + ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx index 40619a6d5f..bbb7db316f 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx @@ -1,10 +1,10 @@ -import { Flex } from '@chakra-ui/react'; import IAISlider from 'common/components/IAISlider'; -import { ChangeEvent, memo, useCallback } from 'react'; -import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; -import { RequiredOpenposeImageProcessorInvocation } from 'features/controlNet/store/types'; import IAISwitch from 'common/components/IAISwitch'; import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import { RequiredOpenposeImageProcessorInvocation } from 'features/controlNet/store/types'; +import { ChangeEvent, memo, useCallback } from 'react'; +import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; +import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor.default; @@ -52,7 +52,7 @@ const OpenposeProcessor = (props: Props) => { ); return ( - + { isChecked={hand_and_face} onChange={handleHandAndFaceChanged} /> - + ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx index a5e82ee8d0..2309c375d6 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx @@ -1,10 +1,10 @@ -import { Flex } from '@chakra-ui/react'; import IAISlider from 'common/components/IAISlider'; -import { ChangeEvent, memo, useCallback } from 'react'; -import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; -import { RequiredPidiImageProcessorInvocation } from 'features/controlNet/store/types'; import IAISwitch from 'common/components/IAISwitch'; import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants'; +import { RequiredPidiImageProcessorInvocation } from 'features/controlNet/store/types'; +import { ChangeEvent, memo, useCallback } from 'react'; +import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; +import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor.default; @@ -59,7 +59,7 @@ const PidiProcessor = (props: Props) => { ); return ( - + { onChange={handleScribbleChanged} /> - + ); }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/ZoeDepthProcessor.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/ZoeDepthProcessor.tsx index 20a1ec4493..d0a34784bf 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/processors/ZoeDepthProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/ZoeDepthProcessor.tsx @@ -1,5 +1,5 @@ -import { memo } from 'react'; import { RequiredZoeDepthImageProcessorInvocation } from 'features/controlNet/store/types'; +import { memo } from 'react'; type Props = { controlNetId: string; diff --git a/invokeai/frontend/web/src/features/controlNet/components/processors/shared/ProcessorOptionsContainer.tsx b/invokeai/frontend/web/src/features/controlNet/components/processors/shared/ProcessorOptionsContainer.tsx new file mode 100644 index 0000000000..5cd7ff61ae --- /dev/null +++ b/invokeai/frontend/web/src/features/controlNet/components/processors/shared/ProcessorOptionsContainer.tsx @@ -0,0 +1,12 @@ +import { Flex } from '@chakra-ui/react'; +import { PropsWithChildren } from 'react'; + +type ProcessorOptionsContainerProps = PropsWithChildren; + +export default function ProcessorOptionsContainer( + props: ProcessorOptionsContainerProps +) { + return ( + {props.children} + ); +}