diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index f979c91247..76f1ac0069 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -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", diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts index e7707d6e8a..4dbbac9f96 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasImageToImageGraph.ts @@ -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 diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts index 7117af5177..de7620bc7e 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasInpaintGraph.ts @@ -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, diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts index 2449d1ea4b..8205e477ec 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasOutpaintGraph.ts @@ -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, diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts index 35ea37f294..36fc66e559 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLImageToImageGraph.ts @@ -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 } = diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts index 897c9093b5..389d510ac7 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts @@ -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 } = diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts index 922e75fa0c..c913492335 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLOutpaintGraph.ts @@ -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 } = diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts index 8a292e9826..37245d7b6a 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLTextToImageGraph.ts @@ -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'; diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts index a99b2c9ece..2aa0b2b47d 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasTextToImageGraph.ts @@ -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'; diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearImageToImageGraph.ts index 719fb8ea78..bf8d9ea314 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearImageToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearImageToImageGraph.ts @@ -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 = { diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts index 2a7ae4064f..b10f4c5542 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph.ts @@ -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 } = diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts index ad65f649b7..73c831081d 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph.ts @@ -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'); diff --git a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearTextToImageGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearTextToImageGraph.ts index b3b663d65d..d7af045803 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearTextToImageGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildLinearTextToImageGraph.ts @@ -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'); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx index 2d461f7bb4..dea4bb7b3d 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse.tsx @@ -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 ( + + + + ); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx index f10c3dd1a5..23f8f23fb6 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamCpuNoise.tsx @@ -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) => - dispatch(shouldUseCpuNoiseChanged(e.target.checked)); + const handleChange = useCallback( + (e: ChangeEvent) => { + dispatch(shouldUseCpuNoiseChanged(e.target.checked)); + }, + [dispatch] + ); return ( { - 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 ( - - - - - {isPerlinNoiseEnabled && } - {isNoiseThresholdEnabled && } - - - ); -}; - -export default memo(ParamNoiseCollapse); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseThreshold.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseThreshold.tsx index 3abb7532b4..7244800c41 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseThreshold.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamNoiseThreshold.tsx @@ -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 ( { - const dispatch = useAppDispatch(); - const { t } = useTranslation(); - - const shouldUseNoiseSettings = useAppSelector( - (state: RootState) => state.generation.shouldUseNoiseSettings - ); - - const handleChange = (e: ChangeEvent) => - dispatch(setShouldUseNoiseSettings(e.target.checked)); - - return ( - - ); -}; diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamPerlinNoise.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamPerlinNoise.tsx index afd676223c..b5429dc292 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamPerlinNoise.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Noise/ParamPerlinNoise.tsx @@ -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 ( { + const { t } = useTranslation(); + + const isSeamlessEnabled = useFeatureStatus('seamless').isFeatureEnabled; + + if (!isSeamlessEnabled) { + return null; + } + + return ( + + {t('parameters.seamlessTiling')}{' '} + + + + + + + + + + ); +}; + +export default memo(ParamSeamless); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx deleted file mode 100644 index 099090fe3f..0000000000 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx +++ /dev/null @@ -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 ( - - - - - - - - - - - ); -}; - -export default memo(ParamSeamlessCollapse); diff --git a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts index dc79281a06..ea6aaf28ca 100644 --- a/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts +++ b/invokeai/frontend/web/src/features/parameters/store/generationSlice.ts @@ -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) => { state.verticalSymmetrySteps = action.payload; }, - setShouldUseNoiseSettings: (state, action: PayloadAction) => { - state.shouldUseNoiseSettings = action.payload; - }, initialImageChanged: (state, action: PayloadAction) => { 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) => { state.shouldUseCpuNoise = action.payload; }, - setShouldShowAdvancedOptions: (state, action: PayloadAction) => { - state.shouldShowAdvancedOptions = action.payload; - if (!action.payload) { - state.clipSkip = 0; - } - }, setAspectRatio: (state, action: PayloadAction) => { 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, diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx index 2b40eca382..5a0d7daf4e 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx @@ -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 = () => { - - + ); }; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx index ff47a42207..ab7e8c8a74 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx @@ -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 = () => { - - + ); }; diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx index 01236d8ec3..a9e94a9df0 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx @@ -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() { - - + ); } diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx index 858ff26f98..f1bc3f0a40 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx @@ -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 && ( - ) => - dispatch(setShouldShowAdvancedOptions(e.target.checked)) - } - /> - )} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx index 47b509eb36..6015b776f4 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx @@ -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 = () => { - - ); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx index 559ef0849a..14f1aac778 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx @@ -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 = () => { - - ); diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx index 1ee748ccce..a91ce1564b 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx @@ -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 = () => { - );