github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into maryhipp/informational-popover

Browse Source
This commit is contained in:
chainchompa
2023-09-15 13:12:25 -04:00
committed by GitHub
parent fcea65770f ff3150a818
commit 7bf7c16a5d
120 changed files with 2230 additions and 1047 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
View File

@@ -28,6 +28,7 @@ import ParamControlNetBeginEnd from './parameters/ParamControlNetBeginEnd';
import ParamControlNetControlMode from './parameters/ParamControlNetControlMode';
import ParamControlNetProcessorSelect from './parameters/ParamControlNetProcessorSelect';
import ParamControlNetResizeMode from './parameters/ParamControlNetResizeMode';
import { useTranslation } from 'react-i18next';
type ControlNetProps = {
controlNet: ControlNetConfig;
@@ -37,6 +38,7 @@ const ControlNet = (props: ControlNetProps) => {
const { controlNet } = props;
const { controlNetId } = controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const activeTabName = useAppSelector(activeTabNameSelector);
@@ -95,8 +97,8 @@ const ControlNet = (props: ControlNetProps) => {
>
<Flex sx={{ gap: 2, alignItems: 'center' }}>
<IAISwitch
tooltip="Toggle this ControlNet"
aria-label="Toggle this ControlNet"
tooltip={t('controlnet.toggleControlNet')}
aria-label={t('controlnet.toggleControlNet')}
isChecked={isEnabled}
onChange={handleToggleIsEnabled}
/>
@@ -117,23 +119,31 @@ const ControlNet = (props: ControlNetProps) => {
)}
<IAIIconButton
size="sm"
tooltip="Duplicate"
aria-label="Duplicate"
tooltip={t('controlnet.duplicate')}
aria-label={t('controlnet.duplicate')}
onClick={handleDuplicate}
icon={<FaCopy />}
/>
<IAIIconButton
size="sm"
tooltip="Delete"
aria-label="Delete"
tooltip={t('controlnet.delete')}
aria-label={t('controlnet.delete')}
colorScheme="error"
onClick={handleDelete}
icon={<FaTrash />}
/>
<IAIIconButton
size="sm"
tooltip={isExpanded ? 'Hide Advanced' : 'Show Advanced'}
aria-label={isExpanded ? 'Hide Advanced' : 'Show Advanced'}
tooltip={
isExpanded
? t('controlnet.hideAdvanced')
: t('controlnet.showAdvanced')
}
aria-label={
isExpanded
? t('controlnet.hideAdvanced')
: t('controlnet.showAdvanced')
}
onClick={toggleIsExpanded}
variant="ghost"
sx={{

8
invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
View File

@@ -26,6 +26,7 @@ import {
ControlNetConfig,
controlNetImageChanged,
} from '../store/controlNetSlice';
import { useTranslation } from 'react-i18next';
type Props = {
controlNet: ControlNetConfig;
@@ -56,6 +57,7 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => {
} = controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const { pendingControlImages, autoAddBoardId } = useAppSelector(selector);
const activeTabName = useAppSelector(activeTabNameSelector);
@@ -208,18 +210,18 @@ const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => {
<IAIDndImageIcon
onClick={handleResetControlImage}
icon={controlImage ? <FaUndo /> : undefined}
tooltip="Reset Control Image"
tooltip={t('controlnet.resetControlImage')}
/>
<IAIDndImageIcon
onClick={handleSaveControlImage}
icon={controlImage ? <FaSave size={16} /> : undefined}
tooltip="Save Control Image"
tooltip={t('controlnet.saveControlImage')}
styleOverrides={{ marginTop: 6 }}
/>
<IAIDndImageIcon
onClick={handleSetControlImageToDimensions}
icon={controlImage ? <FaRulerVertical size={16} /> : undefined}
tooltip="Set Control Image Dimensions To W/H"
tooltip={t('controlnet.setControlImageDimensions')}
styleOverrides={{ marginTop: 12 }}
/>
</>

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

@@ -6,6 +6,7 @@ import {
} from 'features/controlNet/store/controlNetSlice';
import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
type Props = {
controlNet: ControlNetConfig;
@@ -15,6 +16,7 @@ const ParamControlNetShouldAutoConfig = (props: Props) => {
const { controlNetId, isEnabled, shouldAutoConfig } = props.controlNet;
const dispatch = useAppDispatch();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleShouldAutoConfigChanged = useCallback(() => {
dispatch(controlNetAutoConfigToggled({ controlNetId }));
@@ -22,8 +24,8 @@ const ParamControlNetShouldAutoConfig = (props: Props) => {
return (
<IAISwitch
label="Auto configure processor"
aria-label="Auto configure processor"
label={t('controlnet.autoConfigure')}
aria-label={t('controlnet.autoConfigure')}
isChecked={shouldAutoConfig}
onChange={handleShouldAutoConfigChanged}
isDisabled={isBusy || !isEnabled}

10
invokeai/frontend/web/src/features/controlNet/components/imports/ControlNetCanvasImageImports.tsx
View File

@@ -8,6 +8,7 @@ import {
import { ControlNetConfig } from 'features/controlNet/store/controlNetSlice';
import { memo, useCallback } from 'react';
import { FaImage, FaMask } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
type ControlNetCanvasImageImportsProps = {
controlNet: ControlNetConfig;
@@ -18,6 +19,7 @@ const ControlNetCanvasImageImports = (
) => {
const { controlNet } = props;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleImportImageFromCanvas = useCallback(() => {
dispatch(canvasImageToControlNet({ controlNet }));
@@ -36,15 +38,15 @@ const ControlNetCanvasImageImports = (
<IAIIconButton
size="sm"
icon={<FaImage />}
tooltip="Import Image From Canvas"
aria-label="Import Image From Canvas"
tooltip={t('controlnet.importImageFromCanvas')}
aria-label={t('controlnet.importImageFromCanvas')}
onClick={handleImportImageFromCanvas}
/>
<IAIIconButton
size="sm"
icon={<FaMask />}
tooltip="Import Mask From Canvas"
aria-label="Import Mask From Canvas"
tooltip={t('controlnet.importMaskFromCanvas')}
aria-label={t('controlnet.importMaskFromCanvas')}
onClick={handleImportMaskFromCanvas}
/>
</Flex>

22
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx
View File

@@ -17,6 +17,7 @@ import {
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetBeginEndPopover } from 'features/informationalPopovers/components/controlNetBeginEnd';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
type Props = {
controlNet: ControlNetConfig;
@@ -28,6 +29,7 @@ const ParamControlNetBeginEnd = (props: Props) => {
const { beginStepPct, endStepPct, isEnabled, controlNetId } =
props.controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleStepPctChanged = useCallback(
(v: number[]) => {
@@ -50,10 +52,10 @@ const ParamControlNetBeginEnd = (props: Props) => {
return (
<ControlNetBeginEndPopover>
<FormControl isDisabled={!isEnabled}>
<FormLabel>Begin / End Step Percentage</FormLabel>
<FormLabel>{t('controlnet.beginEndStepPercent')}</FormLabel>
<HStack w="100%" gap={2} alignItems="center">
<RangeSlider
aria-label={['Begin Step %', 'End Step %']}
aria-label={['Begin Step %', 'End Step %!']}
value={[beginStepPct, endStepPct]}
onChange={handleStepPctChanged}
min={0}
@@ -62,6 +64,22 @@ const ParamControlNetBeginEnd = (props: Props) => {
minStepsBetweenThumbs={5}
isDisabled={!isEnabled}
>
<RangeSliderTrack>
<RangeSliderFilledTrack />
</RangeSliderTrack>
<Tooltip label={formatPct(beginStepPct)} placement="top" hasArrow>
<RangeSliderThumb index={0} />
</Tooltip>
<Tooltip label={formatPct(endStepPct)} placement="top" hasArrow>
<RangeSliderThumb index={1} />
</Tooltip>
<RangeSliderMark
value={0}
sx={{
insetInlineStart: '0 !important',
insetInlineEnd: 'unset !important',
}}
>
<RangeSliderTrack>
<RangeSliderFilledTrack />
</RangeSliderTrack>

18
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx
View File

@@ -7,23 +7,25 @@ import {
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetControlModePopover } from 'features/informationalPopovers/components/controlNetControlMode';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
type ParamControlNetControlModeProps = {
controlNet: ControlNetConfig;
};
const CONTROL_MODE_DATA = [
{ label: 'Balanced', value: 'balanced' },
{ label: 'Prompt', value: 'more_prompt' },
{ label: 'Control', value: 'more_control' },
{ label: 'Mega Control', value: 'unbalanced' },
];
export default function ParamControlNetControlMode(
props: ParamControlNetControlModeProps
) {
const { controlMode, isEnabled, controlNetId } = props.controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const CONTROL_MODE_DATA = [
{ label: t('controlnet.balanced'), value: 'balanced' },
{ label: t('controlnet.prompt'), value: 'more_prompt' },
{ label: t('controlnet.control'), value: 'more_control' },
{ label: t('controlnet.megaControl'), value: 'unbalanced' },
];
const handleControlModeChange = useCallback(
(controlMode: ControlModes) => {
@@ -36,7 +38,7 @@ export default function ParamControlNetControlMode(
<ControlNetControlModePopover>
<IAIMantineSelect
disabled={!isEnabled}
label="Control Mode"
label={t('controlnet.controlMode')}
data={CONTROL_MODE_DATA}
value={String(controlMode)}
onChange={handleControlModeChange}

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

@@ -15,6 +15,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 { useTranslation } from 'react-i18next';
type ParamControlNetModelProps = {
controlNet: ControlNetConfig;
@@ -35,6 +36,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
const isBusy = useAppSelector(selectIsBusy);
const { mainModel } = useAppSelector(selector);
const { t } = useTranslation();
const { data: controlNetModels } = useGetControlNetModelsQuery();
@@ -58,13 +60,13 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
group: MODEL_TYPE_MAP[model.base_model],
disabled,
tooltip: disabled
? `Incompatible base model: ${model.base_model}`
? `${t('controlnet.incompatibleBaseModel')} ${model.base_model}`
: undefined,
});
});
return data;
}, [controlNetModels, mainModel?.base_model]);
}, [controlNetModels, mainModel?.base_model, t]);
// grab the full model entity from the RTK Query cache
const selectedModel = useMemo(
@@ -105,7 +107,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
error={
!selectedModel || mainModel?.base_model !== selectedModel.base_model
}
placeholder="Select a model"
placeholder={t('controlnet.selectModel')}
value={selectedModel?.id ?? null}
onChange={handleModelChanged}
disabled={isBusy || !isEnabled}

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

@@ -15,6 +15,7 @@ import {
controlNetProcessorTypeChanged,
} from '../../store/controlNetSlice';
import { ControlNetProcessorType } from '../../store/types';
import { useTranslation } from 'react-i18next';
type ParamControlNetProcessorSelectProps = {
controlNet: ControlNetConfig;
@@ -57,6 +58,7 @@ const ParamControlNetProcessorSelect = (
const { controlNetId, isEnabled, processorNode } = props.controlNet;
const isBusy = useAppSelector(selectIsBusy);
const controlNetProcessors = useAppSelector(selector);
const { t } = useTranslation();
const handleProcessorTypeChanged = useCallback(
(v: string | null) => {
@@ -72,7 +74,7 @@ const ParamControlNetProcessorSelect = (
return (
<IAIMantineSearchableSelect
label="Processor"
label={t('controlnet.processor')}
value={processorNode.type ?? 'canny_image_processor'}
data={controlNetProcessors}
onChange={handleProcessorTypeChanged}

16
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetResizeMode.tsx
View File

@@ -7,22 +7,24 @@ import {
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetResizeModePopover } from 'features/informationalPopovers/components/controlNetResizeMode';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
type ParamControlNetResizeModeProps = {
controlNet: ControlNetConfig;
};
const RESIZE_MODE_DATA = [
{ label: 'Resize', value: 'just_resize' },
{ label: 'Crop', value: 'crop_resize' },
{ label: 'Fill', value: 'fill_resize' },
];
export default function ParamControlNetResizeMode(
props: ParamControlNetResizeModeProps
) {
const { resizeMode, isEnabled, controlNetId } = props.controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const RESIZE_MODE_DATA = [
{ label: t('controlnet.resize'), value: 'just_resize' },
{ label: t('controlnet.crop'), value: 'crop_resize' },
{ label: t('controlnet.fill'), value: 'fill_resize' },
];
const handleResizeModeChange = useCallback(
(resizeMode: ResizeModes) => {
@@ -35,7 +37,7 @@ export default function ParamControlNetResizeMode(
<ControlNetResizeModePopover>
<IAIMantineSelect
disabled={!isEnabled}
label="Resize Mode"
label={t('controlnet.resizeMode')}
data={RESIZE_MODE_DATA}
value={String(resizeMode)}
onChange={handleResizeModeChange}

4
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx
View File

@@ -6,6 +6,7 @@ import {
} from 'features/controlNet/store/controlNetSlice';
import { ControlNetWeightPopover } from 'features/informationalPopovers/components/controlNetWeight';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
type ParamControlNetWeightProps = {
controlNet: ControlNetConfig;
@@ -14,6 +15,7 @@ type ParamControlNetWeightProps = {
const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
const { weight, isEnabled, controlNetId } = props.controlNet;
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleWeightChanged = useCallback(
(weight: number) => {
dispatch(controlNetWeightChanged({ controlNetId, weight }));
@@ -25,7 +27,7 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
<ControlNetWeightPopover>
<IAISlider
isDisabled={!isEnabled}
label="Weight"
label={t('controlnet.weight')}
value={weight}
onChange={handleWeightChanged}
min={0}

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

@@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.canny_image_processor
.default as RequiredCannyImageProcessorInvocation;
@@ -21,6 +22,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
const { low_threshold, high_threshold } = processorNode;
const isBusy = useAppSelector(selectIsBusy);
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const handleLowThresholdChanged = useCallback(
(v: number) => {
@@ -52,7 +54,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
<ProcessorWrapper>
<IAISlider
isDisabled={isBusy || !isEnabled}
label="Low Threshold"
label={t('controlnet.lowThreshold')}
value={low_threshold}
onChange={handleLowThresholdChanged}
handleReset={handleLowThresholdReset}
@@ -64,7 +66,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
/>
<IAISlider
isDisabled={isBusy || !isEnabled}
label="High Threshold"
label={t('controlnet.highThreshold')}
value={high_threshold}
onChange={handleHighThresholdChanged}
handleReset={handleHighThresholdReset}

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

@@ -6,6 +6,7 @@ import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useAppSelector } from 'app/store/storeHooks';
import { selectIsBusy } from 'features/system/store/systemSelectors';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.content_shuffle_image_processor
.default as RequiredContentShuffleImageProcessorInvocation;
@@ -21,6 +22,7 @@ const ContentShuffleProcessor = (props: Props) => {
const { image_resolution, detect_resolution, w, h, f } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@@ -90,7 +92,7 @@ const ContentShuffleProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@@ -102,7 +104,7 @@ const ContentShuffleProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@@ -114,7 +116,7 @@ const ContentShuffleProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="W"
label={t('controlnet.w')}
value={w}
onChange={handleWChanged}
handleReset={handleWReset}
@@ -126,7 +128,7 @@ const ContentShuffleProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="H"
label={t('controlnet.h')}
value={h}
onChange={handleHChanged}
handleReset={handleHReset}
@@ -138,7 +140,7 @@ const ContentShuffleProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="F"
label={t('controlnet.f')}
value={f}
onChange={handleFChanged}
handleReset={handleFReset}

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

@@ -7,6 +7,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.hed_image_processor
.default as RequiredHedImageProcessorInvocation;
@@ -25,6 +26,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
} = props;
const isBusy = useAppSelector(selectIsBusy);
const processorChanged = useProcessorNodeChanged();
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@@ -62,7 +64,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@@ -74,7 +76,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@@ -86,7 +88,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISwitch
label="Scribble"
label={t('controlnet.scribble')}
isChecked={scribble}
onChange={handleScribbleChanged}
isDisabled={isBusy || !isEnabled}

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

@@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_anime_image_processor
.default as RequiredLineartAnimeImageProcessorInvocation;
@@ -21,6 +22,7 @@ const LineartAnimeProcessor = (props: Props) => {
const { image_resolution, detect_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@@ -51,7 +53,7 @@ const LineartAnimeProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@@ -63,7 +65,7 @@ const LineartAnimeProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}

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

@@ -7,6 +7,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.lineart_image_processor
.default as RequiredLineartImageProcessorInvocation;
@@ -22,6 +23,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
const { image_resolution, detect_resolution, coarse } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@@ -59,7 +61,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@@ -71,7 +73,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@@ -83,7 +85,7 @@ const LineartProcessor = (props: LineartProcessorProps) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISwitch
label="Coarse"
label={t('controlnet.coarse')}
isChecked={coarse}
onChange={handleCoarseChanged}
isDisabled={isBusy || !isEnabled}

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

@@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.mediapipe_face_processor
.default as RequiredMediapipeFaceProcessorInvocation;
@@ -21,6 +22,7 @@ const MediapipeFaceProcessor = (props: Props) => {
const { max_faces, min_confidence } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleMaxFacesChanged = useCallback(
(v: number) => {
@@ -47,7 +49,7 @@ const MediapipeFaceProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Max Faces"
label={t('controlnet.maxFaces')}
value={max_faces}
onChange={handleMaxFacesChanged}
handleReset={handleMaxFacesReset}
@@ -59,7 +61,7 @@ const MediapipeFaceProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Min Confidence"
label={t('controlnet.minConfidence')}
value={min_confidence}
onChange={handleMinConfidenceChanged}
handleReset={handleMinConfidenceReset}

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

@@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor
.default as RequiredMidasDepthImageProcessorInvocation;
@@ -21,6 +22,7 @@ const MidasDepthProcessor = (props: Props) => {
const { a_mult, bg_th } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleAMultChanged = useCallback(
(v: number) => {
@@ -47,7 +49,7 @@ const MidasDepthProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="a_mult"
label={t('controlnet.amult')}
value={a_mult}
onChange={handleAMultChanged}
handleReset={handleAMultReset}
@@ -60,7 +62,7 @@ const MidasDepthProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="bg_th"
label={t('controlnet.bgth')}
value={bg_th}
onChange={handleBgThChanged}
handleReset={handleBgThReset}

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

@@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.mlsd_image_processor
.default as RequiredMlsdImageProcessorInvocation;
@@ -21,6 +22,7 @@ const MlsdImageProcessor = (props: Props) => {
const { image_resolution, detect_resolution, thr_d, thr_v } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@@ -73,7 +75,7 @@ const MlsdImageProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@@ -85,7 +87,7 @@ const MlsdImageProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@@ -97,7 +99,7 @@ const MlsdImageProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="W"
label={t('controlnet.w')}
value={thr_d}
onChange={handleThrDChanged}
handleReset={handleThrDReset}
@@ -110,7 +112,7 @@ const MlsdImageProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="H"
label={t('controlnet.h')}
value={thr_v}
onChange={handleThrVChanged}
handleReset={handleThrVReset}

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

@@ -6,6 +6,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.normalbae_image_processor
.default as RequiredNormalbaeImageProcessorInvocation;
@@ -21,6 +22,7 @@ const NormalBaeProcessor = (props: Props) => {
const { image_resolution, detect_resolution } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@@ -51,7 +53,7 @@ const NormalBaeProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@@ -63,7 +65,7 @@ const NormalBaeProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}

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

@@ -7,6 +7,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.openpose_image_processor
.default as RequiredOpenposeImageProcessorInvocation;
@@ -22,6 +23,7 @@ const OpenposeProcessor = (props: Props) => {
const { image_resolution, detect_resolution, hand_and_face } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@@ -59,7 +61,7 @@ const OpenposeProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@@ -71,7 +73,7 @@ const OpenposeProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@@ -83,7 +85,7 @@ const OpenposeProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISwitch
label="Hand and Face"
label={t('controlnet.handAndFace')}
isChecked={hand_and_face}
onChange={handleHandAndFaceChanged}
isDisabled={isBusy || !isEnabled}

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

@@ -7,6 +7,7 @@ import { selectIsBusy } from 'features/system/store/systemSelectors';
import { ChangeEvent, memo, useCallback } from 'react';
import { useProcessorNodeChanged } from '../hooks/useProcessorNodeChanged';
import ProcessorWrapper from './common/ProcessorWrapper';
import { useTranslation } from 'react-i18next';
const DEFAULTS = CONTROLNET_PROCESSORS.pidi_image_processor
.default as RequiredPidiImageProcessorInvocation;
@@ -22,6 +23,7 @@ const PidiProcessor = (props: Props) => {
const { image_resolution, detect_resolution, scribble, safe } = processorNode;
const processorChanged = useProcessorNodeChanged();
const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation();
const handleDetectResolutionChanged = useCallback(
(v: number) => {
@@ -66,7 +68,7 @@ const PidiProcessor = (props: Props) => {
return (
<ProcessorWrapper>
<IAISlider
label="Detect Resolution"
label={t('controlnet.detectResolution')}
value={detect_resolution}
onChange={handleDetectResolutionChanged}
handleReset={handleDetectResolutionReset}
@@ -78,7 +80,7 @@ const PidiProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISlider
label="Image Resolution"
label={t('controlnet.imageResolution')}
value={image_resolution}
onChange={handleImageResolutionChanged}
handleReset={handleImageResolutionReset}
@@ -90,12 +92,12 @@ const PidiProcessor = (props: Props) => {
isDisabled={isBusy || !isEnabled}
/>
<IAISwitch
label="Scribble"
label={t('controlnet.scribble')}
isChecked={scribble}
onChange={handleScribbleChanged}
/>
<IAISwitch
label="Safe"
label={t('controlnet.safe')}
isChecked={safe}
onChange={handleSafeChanged}
isDisabled={isBusy || !isEnabled}

108
invokeai/frontend/web/src/features/controlNet/store/constants.ts
View File

@@ -2,6 +2,7 @@ import {
ControlNetProcessorType,
RequiredControlNetProcessorNode,
} from './types';
import i18n from 'i18next';
type ControlNetProcessorsDict = Record<
ControlNetProcessorType,
@@ -12,7 +13,6 @@ type ControlNetProcessorsDict = Record<
default: RequiredControlNetProcessorNode | { type: 'none' };
}
>;
/**
* A dict of ControlNet processors, including:
* - type
@@ -25,16 +25,24 @@ type ControlNetProcessorsDict = Record<
export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
none: {
type: 'none',
label: 'none',
description: '',
get label() {
return i18n.t('controlnet.none');
},
get description() {
return i18n.t('controlnet.noneDescription');
},
default: {
type: 'none',
},
},
canny_image_processor: {
type: 'canny_image_processor',
label: 'Canny',
description: '',
get label() {
return i18n.t('controlnet.canny');
},
get description() {
return i18n.t('controlnet.cannyDescription');
},
default: {
id: 'canny_image_processor',
type: 'canny_image_processor',
@@ -44,8 +52,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
content_shuffle_image_processor: {
type: 'content_shuffle_image_processor',
label: 'Content Shuffle',
description: '',
get label() {
return i18n.t('controlnet.contentShuffle');
},
get description() {
return i18n.t('controlnet.contentShuffleDescription');
},
default: {
id: 'content_shuffle_image_processor',
type: 'content_shuffle_image_processor',
@@ -58,8 +70,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
hed_image_processor: {
type: 'hed_image_processor',
label: 'HED',
description: '',
get label() {
return i18n.t('controlnet.hed');
},
get description() {
return i18n.t('controlnet.hedDescription');
},
default: {
id: 'hed_image_processor',
type: 'hed_image_processor',
@@ -70,8 +86,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
lineart_anime_image_processor: {
type: 'lineart_anime_image_processor',
label: 'Lineart Anime',
description: '',
get label() {
return i18n.t('controlnet.lineartAnime');
},
get description() {
return i18n.t('controlnet.lineartAnimeDescription');
},
default: {
id: 'lineart_anime_image_processor',
type: 'lineart_anime_image_processor',
@@ -81,8 +101,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
lineart_image_processor: {
type: 'lineart_image_processor',
label: 'Lineart',
description: '',
get label() {
return i18n.t('controlnet.lineart');
},
get description() {
return i18n.t('controlnet.lineartDescription');
},
default: {
id: 'lineart_image_processor',
type: 'lineart_image_processor',
@@ -93,8 +117,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
mediapipe_face_processor: {
type: 'mediapipe_face_processor',
label: 'Mediapipe Face',
description: '',
get label() {
return i18n.t('controlnet.mediapipeFace');
},
get description() {
return i18n.t('controlnet.mediapipeFaceDescription');
},
default: {
id: 'mediapipe_face_processor',
type: 'mediapipe_face_processor',
@@ -104,8 +132,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
midas_depth_image_processor: {
type: 'midas_depth_image_processor',
label: 'Depth (Midas)',
description: '',
get label() {
return i18n.t('controlnet.depthMidas');
},
get description() {
return i18n.t('controlnet.depthMidasDescription');
},
default: {
id: 'midas_depth_image_processor',
type: 'midas_depth_image_processor',
@@ -115,8 +147,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
mlsd_image_processor: {
type: 'mlsd_image_processor',
label: 'M-LSD',
description: '',
get label() {
return i18n.t('controlnet.mlsd');
},
get description() {
return i18n.t('controlnet.mlsdDescription');
},
default: {
id: 'mlsd_image_processor',
type: 'mlsd_image_processor',
@@ -128,8 +164,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
normalbae_image_processor: {
type: 'normalbae_image_processor',
label: 'Normal BAE',
description: '',
get label() {
return i18n.t('controlnet.normalBae');
},
get description() {
return i18n.t('controlnet.normalBaeDescription');
},
default: {
id: 'normalbae_image_processor',
type: 'normalbae_image_processor',
@@ -139,8 +179,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
openpose_image_processor: {
type: 'openpose_image_processor',
label: 'Openpose',
description: '',
get label() {
return i18n.t('controlnet.openPose');
},
get description() {
return i18n.t('controlnet.openPoseDescription');
},
default: {
id: 'openpose_image_processor',
type: 'openpose_image_processor',
@@ -151,8 +195,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
pidi_image_processor: {
type: 'pidi_image_processor',
label: 'PIDI',
description: '',
get label() {
return i18n.t('controlnet.pidi');
},
get description() {
return i18n.t('controlnet.pidiDescription');
},
default: {
id: 'pidi_image_processor',
type: 'pidi_image_processor',
@@ -164,8 +212,12 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
},
zoe_depth_image_processor: {
type: 'zoe_depth_image_processor',
label: 'Depth (Zoe)',
description: '',
get label() {
return i18n.t('controlnet.depthZoe');
},
get description() {
return i18n.t('controlnet.depthZoeDescription');
},
default: {
id: 'zoe_depth_image_processor',
type: 'zoe_depth_image_processor',
@@ -186,4 +238,6 @@ export const CONTROLNET_MODEL_DEFAULT_PROCESSORS: {
shuffle: 'content_shuffle_image_processor',
openpose: 'openpose_image_processor',
mediapipe: 'mediapipe_face_processor',
pidi: 'pidi_image_processor',
zoe: 'zoe_depth_image_processor',
};