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): disable controlnets during processing

Browse Source
This commit is contained in:
psychedelicious 2023-06-12 15:35:35 +10:00
parent 36f72b5a49
commit 2e42a4bdd9
15 changed files with 83 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
invokeai/frontend/web/src/common/components/IAICustomSelect.tsx
View File

@ -18,7 +18,7 @@ import { useSelect } from 'downshift';
import { isString } from 'lodash-es';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { memo, useMemo } from 'react';
import { memo, useLayoutEffect, useMemo } from 'react';
import { getInputOutlineStyles } from 'theme/util/getInputOutlineStyles';
export type ItemTooltips = { [key: string]: string };
@ -39,6 +39,7 @@ type IAICustomSelectProps = {
tooltip?: string;
tooltipProps?: Omit<TooltipProps, 'children'>;
ellipsisPosition?: 'start' | 'end';
isDisabled?: boolean;
};
const IAICustomSelect = (props: IAICustomSelectProps) => {
@ -52,6 +53,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
data,
value,
onChange,
isDisabled = false,
} = props;
const values = useMemo(() => {
@ -86,11 +88,17 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
},
});
const { refs, floatingStyles } = useFloating<HTMLButtonElement>({
whileElementsMounted: autoUpdate,
const { refs, floatingStyles, update } = useFloating<HTMLButtonElement>({
// whileElementsMounted: autoUpdate,
middleware: [offset(4), shift({ crossAxis: true, padding: 8 })],
});
useLayoutEffect(() => {
if (isOpen && refs.reference.current && refs.floating.current) {
return autoUpdate(refs.reference.current, refs.floating.current, update);
}
}, [isOpen, update, refs.floating, refs.reference]);
const labelTextDirection = useMemo(() => {
if (ellipsisPosition === 'start') {
return document.dir === 'rtl' ? 'ltr' : 'rtl';
@ -124,6 +132,8 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
px: 2,
gap: 2,
justifyContent: 'space-between',
pointerEvents: isDisabled ? 'none' : undefined,
opacity: isDisabled ? 0.5 : undefined,
...getInputOutlineStyles(),
}}
>

3
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
View File

@ -2,6 +2,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
import IAICustomSelect, {
IAICustomSelectOption,
} from 'common/components/IAICustomSelect';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
import {
CONTROLNET_MODELS,
ControlNetModelName,
@ -24,6 +25,7 @@ const DATA: IAICustomSelectOption[] = map(CONTROLNET_MODELS, (m) => ({
const ParamControlNetModel = (props: ParamControlNetModelProps) => {
const { controlNetId, model } = props;
const dispatch = useAppDispatch();
const isReady = useIsReadyToInvoke();
const handleModelChanged = useCallback(
(val: string | null | undefined) => {
@ -41,6 +43,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
data={DATA}
value={model}
onChange={handleModelChanged}
isDisabled={!isReady}
ellipsisPosition="start"
withCheckIcon
/>

7
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
View File

@ -7,9 +7,11 @@ import {
ControlNetProcessorType,
} from '../../store/types';
import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
import { useAppDispatch } from 'app/store/storeHooks';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { CONTROLNET_PROCESSORS } from '../../store/constants';
import { map } from 'lodash-es';
import { isProcessingSelector } from 'features/system/store/systemSelectors';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
type ParamControlNetProcessorSelectProps = {
controlNetId: string;
@ -37,6 +39,8 @@ const ParamControlNetProcessorSelect = (
) => {
const { controlNetId, processorNode } = props;
const dispatch = useAppDispatch();
const isReady = useIsReadyToInvoke();
const handleProcessorTypeChanged = useCallback(
(v: string | null | undefined) => {
dispatch(
@ -55,6 +59,7 @@ const ParamControlNetProcessorSelect = (
data={CONTROLNET_PROCESSOR_TYPES}
onChange={handleProcessorTypeChanged}
withCheckIcon
isDisabled={!isReady}
/>
);
};

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

@ -4,6 +4,7 @@ import { RequiredCannyImageProcessorInvocation } from 'features/controlNet/store
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor.default;
@ -15,6 +16,7 @@ type CannyProcessorProps = {
const CannyProcessor = (props: CannyProcessorProps) => {
const { controlNetId, processorNode } = props;
const { low_threshold, high_threshold } = processorNode;
const isReady = useIsReadyToInvoke();
const processorChanged = useProcessorNodeChanged();
const handleLowThresholdChanged = useCallback(
@ -46,6 +48,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
return (
<ProcessorWrapper>
<IAISlider
isDisabled={!isReady}
label="Low Threshold"
value={low_threshold}
onChange={handleLowThresholdChanged}
@ -57,6 +60,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
withSliderMarks
/>
<IAISlider
isDisabled={!isReady}
label="High Threshold"
value={high_threshold}
onChange={handleHighThresholdChanged}

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

@ -4,6 +4,7 @@ import { RequiredContentShuffleImageProcessorInvocation } from 'features/control
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor.default;
@ -16,6 +17,7 @@ const ContentShuffleProcessor = (props: Props) => {
const { controlNetId, processorNode } = props;
const { image_resolution, detect_resolution, w, h, f } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isReady = useIsReadyToInvoke();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -94,6 +96,7 @@ const ContentShuffleProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="Image Resolution"
@ -105,6 +108,7 @@ const ContentShuffleProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="W"
@ -116,6 +120,7 @@ const ContentShuffleProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="H"
@ -127,6 +132,7 @@ const ContentShuffleProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="F"
@ -138,6 +144,7 @@ const ContentShuffleProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
</ProcessorWrapper>
);

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

@ -5,6 +5,7 @@ import { RequiredHedImageProcessorInvocation } from 'features/controlNet/store/t
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor.default;
@ -18,7 +19,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
controlNetId,
processorNode: { detect_resolution, image_resolution, scribble },
} = props;
const isReady = useIsReadyToInvoke();
const processorChanged = useProcessorNodeChanged();
const handleDetectResolutionChanged = useCallback(
@ -66,6 +67,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="Image Resolution"
@ -77,11 +79,13 @@ const HedPreprocessor = (props: HedProcessorProps) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISwitch
label="Scribble"
isChecked={scribble}
onChange={handleScribbleChanged}
isDisabled={!isReady}
/>
</ProcessorWrapper>
);

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

@ -4,6 +4,7 @@ import { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlNe
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor.default;
@ -16,6 +17,7 @@ const LineartAnimeProcessor = (props: Props) => {
const { controlNetId, processorNode } = props;
const { image_resolution, detect_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isReady = useIsReadyToInvoke();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -55,6 +57,7 @@ const LineartAnimeProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="Image Resolution"
@ -66,6 +69,7 @@ const LineartAnimeProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
</ProcessorWrapper>
);

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

@ -5,6 +5,7 @@ import { RequiredLineartImageProcessorInvocation } from 'features/controlNet/sto
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor.default;
@ -17,6 +18,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
const { controlNetId, processorNode } = props;
const { image_resolution, detect_resolution, coarse } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isReady = useIsReadyToInvoke();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -63,6 +65,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="Image Resolution"
@ -74,11 +77,13 @@ const LineartProcessor = (props: LineartProcessorProps) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISwitch
label="Coarse"
isChecked={coarse}
onChange={handleCoarseChanged}
isDisabled={!isReady}
/>
</ProcessorWrapper>
);

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

@ -4,6 +4,7 @@ import { RequiredMediapipeFaceProcessorInvocation } from 'features/controlNet/st
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor.default;
@ -16,6 +17,7 @@ const MediapipeFaceProcessor = (props: Props) => {
const { controlNetId, processorNode } = props;
const { max_faces, min_confidence } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isReady = useIsReadyToInvoke();
const handleMaxFacesChanged = useCallback(
(v: number) => {
@ -51,6 +53,7 @@ const MediapipeFaceProcessor = (props: Props) => {
max={20}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="Min Confidence"
@ -63,6 +66,7 @@ const MediapipeFaceProcessor = (props: Props) => {
step={0.01}
withInput
withSliderMarks
isDisabled={!isReady}
/>
</ProcessorWrapper>
);

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

@ -4,6 +4,7 @@ import { RequiredMidasDepthImageProcessorInvocation } from 'features/controlNet/
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor.default;
@ -16,6 +17,7 @@ const MidasDepthProcessor = (props: Props) => {
const { controlNetId, processorNode } = props;
const { a_mult, bg_th } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isReady = useIsReadyToInvoke();
const handleAMultChanged = useCallback(
(v: number) => {
@ -52,6 +54,7 @@ const MidasDepthProcessor = (props: Props) => {
step={0.01}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="bg_th"
@ -64,6 +67,7 @@ const MidasDepthProcessor = (props: Props) => {
step={0.01}
withInput
withSliderMarks
isDisabled={!isReady}
/>
</ProcessorWrapper>
);

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

@ -4,6 +4,7 @@ import { RequiredMlsdImageProcessorInvocation } from 'features/controlNet/store/
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor.default;
@ -16,6 +17,7 @@ const MlsdImageProcessor = (props: Props) => {
const { controlNetId, processorNode } = props;
const { image_resolution, detect_resolution, thr_d, thr_v } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isReady = useIsReadyToInvoke();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -77,6 +79,7 @@ const MlsdImageProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="Image Resolution"
@ -88,6 +91,7 @@ const MlsdImageProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="W"
@ -100,6 +104,7 @@ const MlsdImageProcessor = (props: Props) => {
step={0.01}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="H"
@ -112,6 +117,7 @@ const MlsdImageProcessor = (props: Props) => {
step={0.01}
withInput
withSliderMarks
isDisabled={!isReady}
/>
</ProcessorWrapper>
);

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

@ -4,6 +4,7 @@ import { RequiredNormalbaeImageProcessorInvocation } from 'features/controlNet/s
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor.default;
@ -16,6 +17,7 @@ const NormalBaeProcessor = (props: Props) => {
const { controlNetId, processorNode } = props;
const { image_resolution, detect_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isReady = useIsReadyToInvoke();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -55,6 +57,7 @@ const NormalBaeProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="Image Resolution"
@ -66,6 +69,7 @@ const NormalBaeProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
</ProcessorWrapper>
);

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

@ -5,6 +5,7 @@ import { RequiredOpenposeImageProcessorInvocation } from 'features/controlNet/st
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor.default;
@ -17,6 +18,7 @@ const OpenposeProcessor = (props: Props) => {
const { controlNetId, processorNode } = props;
const { image_resolution, detect_resolution, hand_and_face } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isReady = useIsReadyToInvoke();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -63,6 +65,7 @@ const OpenposeProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="Image Resolution"
@ -74,11 +77,13 @@ const OpenposeProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISwitch
label="Hand and Face"
isChecked={hand_and_face}
onChange={handleHandAndFaceChanged}
isDisabled={!isReady}
/>
</ProcessorWrapper>
);

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

@ -5,6 +5,7 @@ import { RequiredPidiImageProcessorInvocation } from 'features/controlNet/store/
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor.default;
@ -17,6 +18,7 @@ const PidiProcessor = (props: Props) => {
const { controlNetId, processorNode } = props;
const { image_resolution, detect_resolution, scribble, safe } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isReady = useIsReadyToInvoke();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@ -70,6 +72,7 @@ const PidiProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISlider
label="Image Resolution"
@ -81,13 +84,19 @@ const PidiProcessor = (props: Props) => {
max={4096}
withInput
withSliderMarks
isDisabled={!isReady}
/>
<IAISwitch
label="Scribble"
isChecked={scribble}
onChange={handleScribbleChanged}
/>
<IAISwitch label="Safe" isChecked={safe} onChange={handleSafeChanged} />
<IAISwitch
label="Safe"
isChecked={safe}
onChange={handleSafeChanged}
isDisabled={!isReady}
/>
</ProcessorWrapper>
);
};

3
invokeai/frontend/web/src/features/system/store/systemSelectors.ts
View File

@ -47,3 +47,6 @@ export const languageSelector = createSelector(
(system) => system.language,
defaultSelectorOptions
);
export const isProcessingSelector = (state: RootState) =>
state.system.isProcessing;