wip: Add Wrapper Container for Preprocessor Options

For fast altering of the layout across all pre-preocessors.

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 (
-    <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+    <ProcessorOptionsContainer>
       <IAISlider
         label="Low Threshold"
         value={low_threshold}
@@ -65,7 +65,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
         max={255}
         withInput
       />
-    </Flex>
+    </ProcessorOptionsContainer>
   );
 };
 

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 (
-    <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+    <ProcessorOptionsContainer>
       <IAISlider
         label="Detect Resolution"
         value={detect_resolution}
@@ -134,7 +134,7 @@ const ContentShuffleProcessor = (props: Props) => {
         max={4096}
         withInput
       />
-    </Flex>
+    </ProcessorOptionsContainer>
   );
 };
 

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 (
-    <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+    <ProcessorOptionsContainer>
       <IAISlider
         label="Detect Resolution"
         value={detect_resolution}
@@ -81,7 +81,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
         isChecked={scribble}
         onChange={handleScribbleChanged}
       />
-    </Flex>
+    </ProcessorOptionsContainer>
   );
 };
 

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 (
-    <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+    <ProcessorOptionsContainer>
       <IAISlider
         label="Detect Resolution"
         value={detect_resolution}
@@ -65,7 +65,7 @@ const LineartAnimeProcessor = (props: Props) => {
         max={4096}
         withInput
       />
-    </Flex>
+    </ProcessorOptionsContainer>
   );
 };
 

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 (
-    <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+    <ProcessorOptionsContainer>
       <IAISlider
         label="Detect Resolution"
         value={detect_resolution}
@@ -78,7 +78,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
         isChecked={coarse}
         onChange={handleCoarseChanged}
       />
-    </Flex>
+    </ProcessorOptionsContainer>
   );
 };
 

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 (
-    <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+    <ProcessorOptionsContainer>
       <IAISlider
         label="Max Faces"
         value={max_faces}
@@ -62,7 +62,7 @@ const MediapipeFaceProcessor = (props: Props) => {
         step={0.01}
         withInput
       />
-    </Flex>
+    </ProcessorOptionsContainer>
   );
 };
 

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 (
-    <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+    <ProcessorOptionsContainer>
       <IAISlider
         label="a_mult"
         value={a_mult}
@@ -63,7 +63,7 @@ const MidasDepthProcessor = (props: Props) => {
         step={0.01}
         withInput
       />
-    </Flex>
+    </ProcessorOptionsContainer>
   );
 };
 

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 (
-    <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+    <ProcessorOptionsContainer>
       <IAISlider
         label="Detect Resolution"
         value={detect_resolution}
@@ -109,7 +109,7 @@ const MlsdImageProcessor = (props: Props) => {
         step={0.01}
         withInput
       />
-    </Flex>
+    </ProcessorOptionsContainer>
   );
 };
 

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 (
-    <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+    <ProcessorOptionsContainer>
       <IAISlider
         label="Detect Resolution"
         value={detect_resolution}
@@ -65,7 +65,7 @@ const NormalBaeProcessor = (props: Props) => {
         max={4096}
         withInput
       />
-    </Flex>
+    </ProcessorOptionsContainer>
   );
 };
 

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 (
-    <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+    <ProcessorOptionsContainer>
       <IAISlider
         label="Detect Resolution"
         value={detect_resolution}
@@ -78,7 +78,7 @@ const OpenposeProcessor = (props: Props) => {
         isChecked={hand_and_face}
         onChange={handleHandAndFaceChanged}
       />
-    </Flex>
+    </ProcessorOptionsContainer>
   );
 };
 

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 (
-    <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+    <ProcessorOptionsContainer>
       <IAISlider
         label="Detect Resolution"
         value={detect_resolution}
@@ -86,7 +86,7 @@ const PidiProcessor = (props: Props) => {
         onChange={handleScribbleChanged}
       />
       <IAISwitch label="Safe" isChecked={safe} onChange={handleSafeChanged} />
-    </Flex>
+    </ProcessorOptionsContainer>
   );
 };
 

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;

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 (
+    <Flex sx={{ flexDirection: 'column', gap: 2, p: 2 }}>{props.children}</Flex>
+  );
+}