Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): "ProcessorOptionsContainer" -> "ProcessorWrapper", organise

Browse Source
This commit is contained in:
psychedelicious 2023-06-03 20:42:51 +10:00
parent d0406024e3
commit f269377a01
12 changed files with 35 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/controlNet/components/processors/CannyProcessor.tsx
View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredCannyImageProcessorInvocation } from 'features/controlNet/store/types'; import { RequiredCannyImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor.default; const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor.default;
@ -44,7 +44,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
}, [controlNetId, processorChanged]); }, [controlNetId, processorChanged]);
return ( return (
<ProcessorOptionsContainer> <ProcessorWrapper>
<IAISlider <IAISlider
label="Low Threshold" label="Low Threshold"
value={low_threshold} value={low_threshold}
@ -65,7 +65,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
max={255} max={255}
withInput withInput
/> />
</ProcessorOptionsContainer> </ProcessorWrapper>
); );
}; };

6
invokeai/frontend/web/src/features/controlNet/components/processors/ContentShuffleProcessor.tsx
View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredContentShuffleImageProcessorInvocation } from 'features/controlNet/store/types'; import { RequiredContentShuffleImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor.default; const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor.default;
@ -83,7 +83,7 @@ const ContentShuffleProcessor = (props: Props) => {
}, [controlNetId, processorChanged]); }, [controlNetId, processorChanged]);
return ( return (
<ProcessorOptionsContainer> <ProcessorWrapper>
<IAISlider <IAISlider
label="Detect Resolution" label="Detect Resolution"
value={detect_resolution} value={detect_resolution}
@ -134,7 +134,7 @@ const ContentShuffleProcessor = (props: Props) => {
max={4096} max={4096}
withInput withInput
/> />
</ProcessorOptionsContainer> </ProcessorWrapper>
); );
}; };

6
invokeai/frontend/web/src/features/controlNet/components/processors/HedProcessor.tsx
View File

@ -4,7 +4,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredHedImageProcessorInvocation } from 'features/controlNet/store/types'; import { RequiredHedImageProcessorInvocation } from 'features/controlNet/store/types';
import { ChangeEvent, memo, useCallback } from 'react'; import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor.default; const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor.default;
@ -55,7 +55,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
}, [controlNetId, processorChanged]); }, [controlNetId, processorChanged]);
return ( return (
<ProcessorOptionsContainer> <ProcessorWrapper>
<IAISlider <IAISlider
label="Detect Resolution" label="Detect Resolution"
value={detect_resolution} value={detect_resolution}
@ -81,7 +81,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
isChecked={scribble} isChecked={scribble}
onChange={handleScribbleChanged} onChange={handleScribbleChanged}
/> />
</ProcessorOptionsContainer> </ProcessorWrapper>
); );
}; };

6
invokeai/frontend/web/src/features/controlNet/components/processors/LineartAnimeProcessor.tsx
View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlNet/store/types'; import { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor.default; const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor.default;
@ -44,7 +44,7 @@ const LineartAnimeProcessor = (props: Props) => {
}, [controlNetId, processorChanged]); }, [controlNetId, processorChanged]);
return ( return (
<ProcessorOptionsContainer> <ProcessorWrapper>
<IAISlider <IAISlider
label="Detect Resolution" label="Detect Resolution"
value={detect_resolution} value={detect_resolution}
@ -65,7 +65,7 @@ const LineartAnimeProcessor = (props: Props) => {
max={4096} max={4096}
withInput withInput
/> />
</ProcessorOptionsContainer> </ProcessorWrapper>
); );
}; };

6
invokeai/frontend/web/src/features/controlNet/components/processors/LineartProcessor.tsx
View File

@ -4,7 +4,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredLineartImageProcessorInvocation } from 'features/controlNet/store/types'; import { RequiredLineartImageProcessorInvocation } from 'features/controlNet/store/types';
import { ChangeEvent, memo, useCallback } from 'react'; import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor.default; const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor.default;
@ -52,7 +52,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
); );
return ( return (
<ProcessorOptionsContainer> <ProcessorWrapper>
<IAISlider <IAISlider
label="Detect Resolution" label="Detect Resolution"
value={detect_resolution} value={detect_resolution}
@ -78,7 +78,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
isChecked={coarse} isChecked={coarse}
onChange={handleCoarseChanged} onChange={handleCoarseChanged}
/> />
</ProcessorOptionsContainer> </ProcessorWrapper>
); );
}; };

6
invokeai/frontend/web/src/features/controlNet/components/processors/MediapipeFaceProcessor.tsx
View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredMediapipeFaceProcessorInvocation } from 'features/controlNet/store/types'; import { RequiredMediapipeFaceProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor.default; const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor.default;
@ -40,7 +40,7 @@ const MediapipeFaceProcessor = (props: Props) => {
}, [controlNetId, processorChanged]); }, [controlNetId, processorChanged]);
return ( return (
<ProcessorOptionsContainer> <ProcessorWrapper>
<IAISlider <IAISlider
label="Max Faces" label="Max Faces"
value={max_faces} value={max_faces}
@ -62,7 +62,7 @@ const MediapipeFaceProcessor = (props: Props) => {
step={0.01} step={0.01}
withInput withInput
/> />
</ProcessorOptionsContainer> </ProcessorWrapper>
); );
}; };

6
invokeai/frontend/web/src/features/controlNet/components/processors/MidasDepthProcessor.tsx
View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredMidasDepthImageProcessorInvocation } from 'features/controlNet/store/types'; import { RequiredMidasDepthImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor.default; const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor.default;
@ -40,7 +40,7 @@ const MidasDepthProcessor = (props: Props) => {
}, [controlNetId, processorChanged]); }, [controlNetId, processorChanged]);
return ( return (
<ProcessorOptionsContainer> <ProcessorWrapper>
<IAISlider <IAISlider
label="a_mult" label="a_mult"
value={a_mult} value={a_mult}
@ -63,7 +63,7 @@ const MidasDepthProcessor = (props: Props) => {
step={0.01} step={0.01}
withInput withInput
/> />
</ProcessorOptionsContainer> </ProcessorWrapper>
); );
}; };

6
invokeai/frontend/web/src/features/controlNet/components/processors/MlsdImageProcessor.tsx
View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredMlsdImageProcessorInvocation } from 'features/controlNet/store/types'; import { RequiredMlsdImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor.default; const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor.default;
@ -66,7 +66,7 @@ const MlsdImageProcessor = (props: Props) => {
}, [controlNetId, processorChanged]); }, [controlNetId, processorChanged]);
return ( return (
<ProcessorOptionsContainer> <ProcessorWrapper>
<IAISlider <IAISlider
label="Detect Resolution" label="Detect Resolution"
value={detect_resolution} value={detect_resolution}
@ -109,7 +109,7 @@ const MlsdImageProcessor = (props: Props) => {
step={0.01} step={0.01}
withInput withInput
/> />
</ProcessorOptionsContainer> </ProcessorWrapper>
); );
}; };

6
invokeai/frontend/web/src/features/controlNet/components/processors/NormalBaeProcessor.tsx
View File

@ -3,7 +3,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredNormalbaeImageProcessorInvocation } from 'features/controlNet/store/types'; import { RequiredNormalbaeImageProcessorInvocation } from 'features/controlNet/store/types';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor.default; const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor.default;
@ -44,7 +44,7 @@ const NormalBaeProcessor = (props: Props) => {
}, [controlNetId, processorChanged]); }, [controlNetId, processorChanged]);
return ( return (
<ProcessorOptionsContainer> <ProcessorWrapper>
<IAISlider <IAISlider
label="Detect Resolution" label="Detect Resolution"
value={detect_resolution} value={detect_resolution}
@ -65,7 +65,7 @@ const NormalBaeProcessor = (props: Props) => {
max={4096} max={4096}
withInput withInput
/> />
</ProcessorOptionsContainer> </ProcessorWrapper>
); );
}; };

6
invokeai/frontend/web/src/features/controlNet/components/processors/OpenposeProcessor.tsx
View File

@ -4,7 +4,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredOpenposeImageProcessorInvocation } from 'features/controlNet/store/types'; import { RequiredOpenposeImageProcessorInvocation } from 'features/controlNet/store/types';
import { ChangeEvent, memo, useCallback } from 'react'; import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor.default; const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor.default;
@ -52,7 +52,7 @@ const OpenposeProcessor = (props: Props) => {
); );
return ( return (
<ProcessorOptionsContainer> <ProcessorWrapper>
<IAISlider <IAISlider
label="Detect Resolution" label="Detect Resolution"
value={detect_resolution} value={detect_resolution}
@ -78,7 +78,7 @@ const OpenposeProcessor = (props: Props) => {
isChecked={hand_and_face} isChecked={hand_and_face}
onChange={handleHandAndFaceChanged} onChange={handleHandAndFaceChanged}
/> />
</ProcessorOptionsContainer> </ProcessorWrapper>
); );
}; };

6
invokeai/frontend/web/src/features/controlNet/components/processors/PidiProcessor.tsx
View File

@ -4,7 +4,7 @@ import { CONTROLNET_PROCESSORS } from 'features/controlNet/store/constants';
import { RequiredPidiImageProcessorInvocation } from 'features/controlNet/store/types'; import { RequiredPidiImageProcessorInvocation } from 'features/controlNet/store/types';
import { ChangeEvent, memo, useCallback } from 'react'; import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged'; import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorOptionsContainer from './shared/ProcessorOptionsContainer'; import ProcessorWrapper from './common/ProcessorWrapper';
const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor.default; const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor.default;
@ -59,7 +59,7 @@ const PidiProcessor = (props: Props) => {
); );
return ( return (
<ProcessorOptionsContainer> <ProcessorWrapper>
<IAISlider <IAISlider
label="Detect Resolution" label="Detect Resolution"
value={detect_resolution} value={detect_resolution}
@ -86,7 +86,7 @@ const PidiProcessor = (props: Props) => {
onChange={handleScribbleChanged} onChange={handleScribbleChanged}
/> />
<IAISwitch label="Safe" isChecked={safe} onChange={handleSafeChanged} /> <IAISwitch label="Safe" isChecked={safe} onChange={handleSafeChanged} />
</ProcessorOptionsContainer> </ProcessorWrapper>
); );
}; };

6
invokeai/frontend/web/src/features/controlNet/components/processors/shared/ProcessorOptionsContainer.tsx → invokeai/frontend/web/src/features/controlNet/components/processors/common/ProcessorWrapper.tsx
View File

@ -1,11 +1,9 @@
import { Flex } from '@chakra-ui/react'; import { Flex } from '@chakra-ui/react';
import { PropsWithChildren } from 'react'; import { PropsWithChildren } from 'react';
type ProcessorOptionsContainerProps = PropsWithChildren; type Props = PropsWithChildren;
export default function ProcessorOptionsContainer( export default function ProcessorWrapper(props: Props) {
props: ProcessorOptionsContainerProps
) {
return ( return (
<Flex sx={{ flexDirection: 'column', gap: 2, p: 2 }}>{props.children}</Flex> <Flex sx={{ flexDirection: 'column', gap: 2, p: 2 }}>{props.children}</Flex>
); );