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): consolidate advanced params (#4599)

Browse Source
This commit is contained in:
psychedelicious 2023-09-21 00:19:31 +10:00 committed by GitHub
parent 32672cfeda
commit 9faa53ceb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 113 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/public/locales/en.json
View File

@ -885,6 +885,7 @@
},
"cfgScale": "CFG Scale",
"clipSkip": "CLIP Skip",
"clipSkipWithLayerCount": "CLIP Skip {{layerCount}}",
"closeViewer": "Close Viewer",
"codeformerFidelity": "Fidelity",
"coherenceMode": "Mode",
@ -958,6 +959,9 @@
"seamlessTiling": "Seamless Tiling",
"seamlessXAxis": "X Axis",
"seamlessYAxis": "Y Axis",
"seamlessX": "Seamless X",
"seamlessY": "Seamless Y",
"seamlessX&Y": "Seamless X & Y",
"seamLowThreshold": "Low",
"seed": "Seed",
"seedWeights": "Seed Weights",
@ -979,6 +983,8 @@
"upscaling": "Upscaling",
"useAll": "Use All",
"useCpuNoise": "Use CPU Noise",
"cpuNoise": "CPU Noise",
"gpuNoise": "GPU Noise",
"useInitImg": "Use Initial Image",
"usePrompt": "Use Prompt",
"useSeed": "Use Seed",

6
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts
View File

@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
import { initialGenerationState } from 'features/parameters/store/generationSlice';
import { ImageDTO, ImageToLatentsInvocation } from 'services/api/types';
import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
@ -47,7 +46,6 @@ export const buildCanvasImageToImageGraph = (
vaePrecision,
clipSkip,
shouldUseCpuNoise,
shouldUseNoiseSettings,
seamlessXAxis,
seamlessYAxis,
} = state.generation;
@ -70,9 +68,7 @@ export const buildCanvasImageToImageGraph = (
let modelLoaderNodeId = MAIN_MODEL_LOADER;
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: initialGenerationState.shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
/**
* The easiest way to build linear graphs is to do it in the node editor, then copy and paste the

5
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts
View File

@ -61,7 +61,6 @@ export const buildCanvasInpaintGraph = (
img2imgStrength: strength,
seed,
vaePrecision,
shouldUseNoiseSettings,
shouldUseCpuNoise,
maskBlur,
maskBlurMethod,
@ -92,9 +91,7 @@ export const buildCanvasInpaintGraph = (
let modelLoaderNodeId = MAIN_MODEL_LOADER;
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
const graph: NonNullableGraph = {
id: CANVAS_INPAINT_GRAPH,

5
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts
View File

@ -63,7 +63,6 @@ export const buildCanvasOutpaintGraph = (
img2imgStrength: strength,
seed,
vaePrecision,
shouldUseNoiseSettings,
shouldUseCpuNoise,
maskBlur,
canvasCoherenceMode,
@ -96,9 +95,7 @@ export const buildCanvasOutpaintGraph = (
let modelLoaderNodeId = MAIN_MODEL_LOADER;
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
const graph: NonNullableGraph = {
id: CANVAS_OUTPAINT_GRAPH,

6
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts
View File

@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
import { initialGenerationState } from 'features/parameters/store/generationSlice';
import { ImageDTO, ImageToLatentsInvocation } from 'services/api/types';
import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
@ -48,7 +47,6 @@ export const buildCanvasSDXLImageToImageGraph = (
vaePrecision,
clipSkip,
shouldUseCpuNoise,
shouldUseNoiseSettings,
seamlessXAxis,
seamlessYAxis,
} = state.generation;
@ -78,9 +76,7 @@ export const buildCanvasSDXLImageToImageGraph = (
// Model Loader ID
let modelLoaderNodeId = SDXL_MODEL_LOADER;
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: initialGenerationState.shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
// Construct Style Prompt
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =

5
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts
View File

@ -62,7 +62,6 @@ export const buildCanvasSDXLInpaintGraph = (
steps,
seed,
vaePrecision,
shouldUseNoiseSettings,
shouldUseCpuNoise,
maskBlur,
maskBlurMethod,
@ -98,9 +97,7 @@ export const buildCanvasSDXLInpaintGraph = (
let modelLoaderNodeId = SDXL_MODEL_LOADER;
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
// Construct Style Prompt
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =

5
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts
View File

@ -64,7 +64,6 @@ export const buildCanvasSDXLOutpaintGraph = (
steps,
seed,
vaePrecision,
shouldUseNoiseSettings,
shouldUseCpuNoise,
maskBlur,
canvasCoherenceMode,
@ -102,9 +101,7 @@ export const buildCanvasSDXLOutpaintGraph = (
let modelLoaderNodeId = SDXL_MODEL_LOADER;
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
// Construct Style Prompt
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =

6
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts
View File

@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
import { initialGenerationState } from 'features/parameters/store/generationSlice';
import {
DenoiseLatentsInvocation,
ONNXTextToLatentsInvocation,
@ -49,7 +48,6 @@ export const buildCanvasSDXLTextToImageGraph = (
vaePrecision,
clipSkip,
shouldUseCpuNoise,
shouldUseNoiseSettings,
seamlessXAxis,
seamlessYAxis,
} = state.generation;
@ -72,9 +70,7 @@ export const buildCanvasSDXLTextToImageGraph = (
throw new Error('No model found in state');
}
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: initialGenerationState.shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
const isUsingOnnxModel = model.model_type === 'onnx';

6
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts
View File

@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
import { initialGenerationState } from 'features/parameters/store/generationSlice';
import {
DenoiseLatentsInvocation,
ONNXTextToLatentsInvocation,
@ -47,7 +46,6 @@ export const buildCanvasTextToImageGraph = (
vaePrecision,
clipSkip,
shouldUseCpuNoise,
shouldUseNoiseSettings,
seamlessXAxis,
seamlessYAxis,
} = state.generation;
@ -68,9 +66,7 @@ export const buildCanvasTextToImageGraph = (
throw new Error('No model found in state');
}
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: initialGenerationState.shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
const isUsingOnnxModel = model.model_type === 'onnx';

6
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearImageToImageGraph.ts
View File

@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
import { initialGenerationState } from 'features/parameters/store/generationSlice';
import {
ImageResizeInvocation,
ImageToLatentsInvocation,
@ -51,7 +50,6 @@ export const buildLinearImageToImageGraph = (
height,
clipSkip,
shouldUseCpuNoise,
shouldUseNoiseSettings,
vaePrecision,
seamlessXAxis,
seamlessYAxis,
@ -81,9 +79,7 @@ export const buildLinearImageToImageGraph = (
let modelLoaderNodeId = MAIN_MODEL_LOADER;
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: initialGenerationState.shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
// copy-pasted graph from node editor, filled in with state values & friendly node ids
const graph: NonNullableGraph = {

6
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts
View File

@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
import { initialGenerationState } from 'features/parameters/store/generationSlice';
import {
ImageResizeInvocation,
ImageToLatentsInvocation,
@ -52,7 +51,6 @@ export const buildLinearSDXLImageToImageGraph = (
height,
clipSkip,
shouldUseCpuNoise,
shouldUseNoiseSettings,
vaePrecision,
seamlessXAxis,
seamlessYAxis,
@ -91,9 +89,7 @@ export const buildLinearSDXLImageToImageGraph = (
// Model Loader ID
let modelLoaderNodeId = SDXL_MODEL_LOADER;
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: initialGenerationState.shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
// Construct Style Prompt
const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =

7
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts
View File

@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
import { initialGenerationState } from 'features/parameters/store/generationSlice';
import { addControlNetToLinearGraph } from './addControlNetToLinearGraph';
import { addIPAdapterToLinearGraph } from './addIPAdapterToLinearGraph';
import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
@ -41,7 +40,6 @@ export const buildLinearSDXLTextToImageGraph = (
height,
clipSkip,
shouldUseCpuNoise,
shouldUseNoiseSettings,
vaePrecision,
seamlessXAxis,
seamlessYAxis,
@ -54,9 +52,8 @@ export const buildLinearSDXLTextToImageGraph = (
refinerStart,
} = state.sdxl;
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: initialGenerationState.shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
if (!model) {
log.error('No model found in state');
throw new Error('No model found in state');

6
invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearTextToImageGraph.ts
View File

@ -1,7 +1,6 @@
import { logger } from 'app/logging/logger';
import { RootState } from 'app/store/store';
import { NonNullableGraph } from 'features/nodes/types/types';
import { initialGenerationState } from 'features/parameters/store/generationSlice';
import {
DenoiseLatentsInvocation,
ONNXTextToLatentsInvocation,
@ -43,16 +42,13 @@ export const buildLinearTextToImageGraph = (
height,
clipSkip,
shouldUseCpuNoise,
shouldUseNoiseSettings,
vaePrecision,
seamlessXAxis,
seamlessYAxis,
seed,
} = state.generation;
const use_cpu = shouldUseNoiseSettings
? shouldUseCpuNoise
: initialGenerationState.shouldUseCpuNoise;
const use_cpu = shouldUseCpuNoise;
if (!model) {
log.error('No model found in state');

53
invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx
View File

@ -1,37 +1,64 @@
import { Flex } from '@chakra-ui/react';
import { Divider, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { RootState, stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAICollapse from 'common/components/IAICollapse';
import ParamClipSkip from './ParamClipSkip';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { ParamCpuNoiseToggle } from '../Noise/ParamCpuNoise';
import ParamSeamless from '../Seamless/ParamSeamless';
import ParamClipSkip from './ParamClipSkip';
const selector = createSelector(
stateSelector,
(state: RootState) => {
const clipSkip = state.generation.clipSkip;
return {
activeLabel: clipSkip > 0 ? 'Clip Skip' : undefined,
};
const { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
state.generation;
return { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise };
},
defaultSelectorOptions
);
export default function ParamAdvancedCollapse() {
const { activeLabel } = useAppSelector(selector);
const shouldShowAdvancedOptions = useAppSelector(
(state: RootState) => state.generation.shouldShowAdvancedOptions
);
const { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
useAppSelector(selector);
const { t } = useTranslation();
if (!shouldShowAdvancedOptions) {
return null;
}
const activeLabel = useMemo(() => {
const activeLabel: string[] = [];
if (shouldUseCpuNoise) {
activeLabel.push(t('parameters.cpuNoise'));
} else {
activeLabel.push(t('parameters.gpuNoise'));
}
if (clipSkip > 0) {
activeLabel.push(
t('parameters.clipSkipWithLayerCount', { layerCount: clipSkip })
);
}
if (seamlessXAxis && seamlessYAxis) {
activeLabel.push(t('parameters.seamlessX&Y'));
} else if (seamlessXAxis) {
activeLabel.push(t('parameters.seamlessX'));
} else if (seamlessYAxis) {
activeLabel.push(t('parameters.seamlessY'));
}
return activeLabel.join(', ');
}, [clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise, t]);
return (
<IAICollapse label={t('common.advanced')} activeLabel={activeLabel}>
<Flex sx={{ flexDir: 'column', gap: 2 }}>
<ParamSeamless />
<Divider />
<ParamClipSkip />
<Divider pt={2} />
<ParamCpuNoiseToggle />
</Flex>
</IAICollapse>
);

30
invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx
View File

@ -1,35 +1,25 @@
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISwitch from 'common/components/IAISwitch';
import { shouldUseCpuNoiseChanged } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { ChangeEvent, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
(state) => {
const { shouldUseNoiseSettings, shouldUseCpuNoise } = state.generation;
return {
isDisabled: !shouldUseNoiseSettings,
shouldUseCpuNoise,
};
},
defaultSelectorOptions
);
export const ParamCpuNoiseToggle = () => {
const dispatch = useAppDispatch();
const { isDisabled, shouldUseCpuNoise } = useAppSelector(selector);
const shouldUseCpuNoise = useAppSelector(
(state) => state.generation.shouldUseCpuNoise
);
const { t } = useTranslation();
const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(shouldUseCpuNoiseChanged(e.target.checked));
const handleChange = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
dispatch(shouldUseCpuNoiseChanged(e.target.checked));
},
[dispatch]
);
return (
<IAISwitch
isDisabled={isDisabled}
label={t('parameters.useCpuNoise')}
isChecked={shouldUseCpuNoise}
onChange={handleChange}

55
invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseCollapse.tsx
View File

@ -1,55 +0,0 @@
import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAICollapse from 'common/components/IAICollapse';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { ParamCpuNoiseToggle } from './ParamCpuNoise';
import ParamNoiseThreshold from './ParamNoiseThreshold';
import { ParamNoiseToggle } from './ParamNoiseToggle';
import ParamPerlinNoise from './ParamPerlinNoise';
const selector = createSelector(
stateSelector,
(state) => {
const { shouldUseNoiseSettings } = state.generation;
return {
activeLabel: shouldUseNoiseSettings ? 'Enabled' : undefined,
};
},
defaultSelectorOptions
);
const ParamNoiseCollapse = () => {
const { t } = useTranslation();
const isNoiseEnabled = useFeatureStatus('noise').isFeatureEnabled;
const isPerlinNoiseEnabled = useFeatureStatus('perlinNoise').isFeatureEnabled;
const isNoiseThresholdEnabled =
useFeatureStatus('noiseThreshold').isFeatureEnabled;
const { activeLabel } = useAppSelector(selector);
if (!isNoiseEnabled) {
return null;
}
return (
<IAICollapse
label={t('parameters.noiseSettings')}
activeLabel={activeLabel}
>
<Flex sx={{ gap: 2, flexDirection: 'column' }}>
<ParamNoiseToggle />
<ParamCpuNoiseToggle />
{isPerlinNoiseEnabled && <ParamPerlinNoise />}
{isNoiseThresholdEnabled && <ParamNoiseThreshold />}
</Flex>
</IAICollapse>
);
};
export default memo(ParamNoiseCollapse);

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseThreshold.tsx
View File

@ -9,9 +9,8 @@ import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
(state) => {
const { shouldUseNoiseSettings, threshold } = state.generation;
const { threshold } = state.generation;
return {
isDisabled: !shouldUseNoiseSettings,
threshold,
};
},
@ -20,12 +19,11 @@ const selector = createSelector(
export default function ParamNoiseThreshold() {
const dispatch = useAppDispatch();
const { threshold, isDisabled } = useAppSelector(selector);
const { threshold } = useAppSelector(selector);
const { t } = useTranslation();
return (
<IAISlider
isDisabled={isDisabled}
label={t('parameters.noiseThreshold')}
min={0}
max={20}

26
invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseToggle.tsx
View File

@ -1,26 +0,0 @@
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldUseNoiseSettings } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
export const ParamNoiseToggle = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const shouldUseNoiseSettings = useAppSelector(
(state: RootState) => state.generation.shouldUseNoiseSettings
);
const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldUseNoiseSettings(e.target.checked));
return (
<IAISwitch
label={t('parameters.enableNoiseSettings')}
isChecked={shouldUseNoiseSettings}
onChange={handleChange}
/>
);
};

6
invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamPerlinNoise.tsx
View File

@ -9,9 +9,8 @@ import { useTranslation } from 'react-i18next';
const selector = createSelector(
stateSelector,
(state) => {
const { shouldUseNoiseSettings, perlin } = state.generation;
const { perlin } = state.generation;
return {
isDisabled: !shouldUseNoiseSettings,
perlin,
};
},
@ -20,12 +19,11 @@ const selector = createSelector(
export default function ParamPerlinNoise() {
const dispatch = useAppDispatch();
const { perlin, isDisabled } = useAppSelector(selector);
const { perlin } = useAppSelector(selector);
const { t } = useTranslation();
return (
<IAISlider
isDisabled={isDisabled}
label={t('parameters.perlinNoise')}
min={0}
max={1}

32
invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamless.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Box, Flex, FormControl, FormLabel } from '@chakra-ui/react';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import ParamSeamlessXAxis from './ParamSeamlessXAxis';
import ParamSeamlessYAxis from './ParamSeamlessYAxis';
const ParamSeamless = () => {
const { t } = useTranslation();
const isSeamlessEnabled = useFeatureStatus('seamless').isFeatureEnabled;
if (!isSeamlessEnabled) {
return null;
}
return (
<FormControl>
<FormLabel>{t('parameters.seamlessTiling')}</FormLabel>{' '}
<Flex sx={{ gap: 5 }}>
<Box flexGrow={1}>
<ParamSeamlessXAxis />
</Box>
<Box flexGrow={1}>
<ParamSeamlessYAxis />
</Box>
</Flex>
</FormControl>
);
};
export default memo(ParamSeamless);

65
invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx
View File

@ -1,65 +0,0 @@
import { Box, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAICollapse from 'common/components/IAICollapse';
import { generationSelector } from 'features/parameters/store/generationSelectors';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import ParamSeamlessXAxis from './ParamSeamlessXAxis';
import ParamSeamlessYAxis from './ParamSeamlessYAxis';
const getActiveLabel = (seamlessXAxis: boolean, seamlessYAxis: boolean) => {
if (seamlessXAxis && seamlessYAxis) {
return 'X & Y';
}
if (seamlessXAxis) {
return 'X';
}
if (seamlessYAxis) {
return 'Y';
}
};
const selector = createSelector(
generationSelector,
(generation) => {
const { seamlessXAxis, seamlessYAxis } = generation;
const activeLabel = getActiveLabel(seamlessXAxis, seamlessYAxis);
return { activeLabel };
},
defaultSelectorOptions
);
const ParamSeamlessCollapse = () => {
const { t } = useTranslation();
const { activeLabel } = useAppSelector(selector);
const isSeamlessEnabled = useFeatureStatus('seamless').isFeatureEnabled;
if (!isSeamlessEnabled) {
return null;
}
return (
<IAICollapse
label={t('parameters.seamlessTiling')}
activeLabel={activeLabel}
>
<Flex sx={{ gap: 5 }}>
<Box flexGrow={1}>
<ParamSeamlessXAxis />
</Box>
<Box flexGrow={1}>
<ParamSeamlessYAxis />
</Box>
</Flex>
</IAICollapse>
);
};
export default memo(ParamSeamlessCollapse);

19
invokeai/frontend/web/src/features/parameters/store/generationSlice.ts
View File

@ -46,7 +46,6 @@ export interface GenerationState {
shouldFitToWidthHeight: boolean;
shouldGenerateVariations: boolean;
shouldRandomizeSeed: boolean;
shouldUseNoiseSettings: boolean;
steps: StepsParam;
threshold: number;
infillTileSize: number;
@ -88,7 +87,6 @@ export const initialGenerationState: GenerationState = {
shouldFitToWidthHeight: true,
shouldGenerateVariations: false,
shouldRandomizeSeed: true,
shouldUseNoiseSettings: false,
steps: 50,
threshold: 0,
infillTileSize: 32,
@ -244,9 +242,6 @@ export const generationSlice = createSlice({
setVerticalSymmetrySteps: (state, action: PayloadAction<number>) => {
state.verticalSymmetrySteps = action.payload;
},
setShouldUseNoiseSettings: (state, action: PayloadAction<boolean>) => {
state.shouldUseNoiseSettings = action.payload;
},
initialImageChanged: (state, action: PayloadAction<ImageDTO>) => {
const { image_name, width, height } = action.payload;
state.initialImage = { imageName: image_name, width, height };
@ -278,12 +273,6 @@ export const generationSlice = createSlice({
shouldUseCpuNoiseChanged: (state, action: PayloadAction<boolean>) => {
state.shouldUseCpuNoise = action.payload;
},
setShouldShowAdvancedOptions: (state, action: PayloadAction<boolean>) => {
state.shouldShowAdvancedOptions = action.payload;
if (!action.payload) {
state.clipSkip = 0;
}
},
setAspectRatio: (state, action: PayloadAction<number | null>) => {
const newAspectRatio = action.payload;
state.aspectRatio = newAspectRatio;
@ -313,12 +302,6 @@ export const generationSlice = createSlice({
}
}
});
builder.addCase(setShouldShowAdvancedOptions, (state, action) => {
const advancedOptionsStatus = action.payload;
if (!advancedOptionsStatus) {
state.clipSkip = 0;
}
});
},
});
@ -359,12 +342,10 @@ export const {
initialImageChanged,
modelChanged,
vaeSelected,
setShouldUseNoiseSettings,
setSeamlessXAxis,
setSeamlessYAxis,
setClipSkip,
shouldUseCpuNoiseChanged,
setShouldShowAdvancedOptions,
setAspectRatio,
setShouldLockAspectRatio,
vaePrecisionChanged,

6
invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx
View File

@ -1,8 +1,7 @@
import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import { memo } from 'react';
import ParamSDXLPromptArea from './ParamSDXLPromptArea';
import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
@ -17,8 +16,7 @@ const SDXLImageToImageTabParameters = () => {
<ParamControlNetCollapse />
<ParamLoraCollapse />
<ParamDynamicPromptsCollapse />
<ParamNoiseCollapse />
<ParamSeamlessCollapse />
<ParamAdvancedCollapse />
</>
);
};

6
invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx
View File

@ -1,8 +1,7 @@
import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import TextToImageTabCoreParameters from 'features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters';
import { memo } from 'react';
import ParamSDXLPromptArea from './ParamSDXLPromptArea';
@ -17,8 +16,7 @@ const SDXLTextToImageTabParameters = () => {
<ParamControlNetCollapse />
<ParamLoraCollapse />
<ParamDynamicPromptsCollapse />
<ParamNoiseCollapse />
<ParamSeamlessCollapse />
<ParamAdvancedCollapse />
</>
);
};

6
invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
View File

@ -1,10 +1,9 @@
import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
import ParamCompositingSettingsCollapse from 'features/parameters/components/Parameters/Canvas/Compositing/ParamCompositingSettingsCollapse';
import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import ParamSDXLPromptArea from './ParamSDXLPromptArea';
import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
import SDXLUnifiedCanvasTabCoreParameters from './SDXLUnifiedCanvasTabCoreParameters';
@ -18,10 +17,9 @@ export default function SDXLUnifiedCanvasTabParameters() {
<ParamControlNetCollapse />
<ParamLoraCollapse />
<ParamDynamicPromptsCollapse />
<ParamNoiseCollapse />
<ParamInfillAndScalingCollapse />
<ParamCompositingSettingsCollapse />
<ParamSeamlessCollapse />
<ParamAdvancedCollapse />
</>
);
}

20
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
View File

@ -19,7 +19,6 @@ import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { setShouldShowAdvancedOptions } from 'features/parameters/store/generationSlice';
import {
consoleLogLevelChanged,
setEnableImageDebugging,
@ -29,6 +28,7 @@ import {
shouldUseNSFWCheckerChanged,
shouldUseWatermarkerChanged,
} from 'features/system/store/systemSlice';
import { LANGUAGES } from 'features/system/store/types';
import {
setShouldAutoChangeDimensions,
setShouldShowProgressInViewer,
@ -54,11 +54,10 @@ import SettingSwitch from './SettingSwitch';
import SettingsClearIntermediates from './SettingsClearIntermediates';
import SettingsSchedulers from './SettingsSchedulers';
import StyledFlex from './StyledFlex';
import { LANGUAGES } from 'features/system/store/types';
const selector = createSelector(
[stateSelector],
({ system, ui, generation }) => {
({ system, ui }) => {
const {
shouldConfirmOnDelete,
enableImageDebugging,
@ -75,8 +74,6 @@ const selector = createSelector(
shouldAutoChangeDimensions,
} = ui;
const { shouldShowAdvancedOptions } = generation;
return {
shouldConfirmOnDelete,
enableImageDebugging,
@ -85,7 +82,6 @@ const selector = createSelector(
consoleLogLevel,
shouldLogToConsole,
shouldAntialiasProgressImage,
shouldShowAdvancedOptions,
shouldUseNSFWChecker,
shouldUseWatermarker,
shouldAutoChangeDimensions,
@ -118,8 +114,6 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
const shouldShowDeveloperSettings =
config?.shouldShowDeveloperSettings ?? true;
const shouldShowResetWebUiText = config?.shouldShowResetWebUiText ?? true;
const shouldShowAdvancedOptionsSettings =
config?.shouldShowAdvancedOptionsSettings ?? true;
const shouldShowClearIntermediates =
config?.shouldShowClearIntermediates ?? true;
const shouldShowLocalizationToggle =
@ -161,7 +155,6 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
consoleLogLevel,
shouldLogToConsole,
shouldAntialiasProgressImage,
shouldShowAdvancedOptions,
shouldUseNSFWChecker,
shouldUseWatermarker,
shouldAutoChangeDimensions,
@ -242,15 +235,6 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
dispatch(setShouldConfirmOnDelete(e.target.checked))
}
/>
{shouldShowAdvancedOptionsSettings && (
<SettingSwitch
label={t('settings.showAdvancedOptions')}
isChecked={shouldShowAdvancedOptions}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldShowAdvancedOptions(e.target.checked))
}
/>
)}
</StyledFlex>
<StyledFlex>

4
invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
View File

@ -2,9 +2,7 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
import { memo } from 'react';
import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
@ -17,9 +15,7 @@ const ImageToImageTabParameters = () => {
<ParamControlNetCollapse />
<ParamLoraCollapse />
<ParamDynamicPromptsCollapse />
<ParamNoiseCollapse />
<ParamSymmetryCollapse />
<ParamSeamlessCollapse />
<ParamAdvancedCollapse />
</>
);

4
invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
View File

@ -2,8 +2,6 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
import { memo } from 'react';
import ParamPromptArea from '../../../../parameters/components/Parameters/Prompt/ParamPromptArea';
@ -17,9 +15,7 @@ const TextToImageTabParameters = () => {
<ParamControlNetCollapse />
<ParamLoraCollapse />
<ParamDynamicPromptsCollapse />
<ParamNoiseCollapse />
<ParamSymmetryCollapse />
<ParamSeamlessCollapse />
<ParamAdvancedCollapse />
</>
);

2
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
View File

@ -5,7 +5,6 @@ import ParamCompositingSettingsCollapse from 'features/parameters/components/Par
import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
import { memo } from 'react';
import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
@ -21,7 +20,6 @@ const UnifiedCanvasParameters = () => {
<ParamSymmetryCollapse />
<ParamInfillAndScalingCollapse />
<ParamCompositingSettingsCollapse />
<ParamSeamlessCollapse />
<ParamAdvancedCollapse />
</>
);