feat(ui): consolidate advanced params (#4599)

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",

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
-    : initialGenerationState.shouldUseCpuNoise;
 
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
-    : shouldUseCpuNoise;
 
   const graph: NonNullableGraph = {
     id: CANVAS_INPAINT_GRAPH,

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
-    : shouldUseCpuNoise;
 
   const graph: NonNullableGraph = {
     id: CANVAS_OUTPAINT_GRAPH,

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
-    : initialGenerationState.shouldUseCpuNoise;
 
   // Construct Style Prompt
   const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
-    : shouldUseCpuNoise;
 
   // Construct Style Prompt
   const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
-    : shouldUseCpuNoise;
 
   // Construct Style Prompt
   const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
-    : initialGenerationState.shouldUseCpuNoise;
 
   const isUsingOnnxModel = model.model_type === 'onnx';
 

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
-    : initialGenerationState.shouldUseCpuNoise;
 
   const isUsingOnnxModel = model.model_type === 'onnx';
 

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
-    : initialGenerationState.shouldUseCpuNoise;
 
   // copy-pasted graph from node editor, filled in with state values & friendly node ids
   const graph: NonNullableGraph = {

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
-    : initialGenerationState.shouldUseCpuNoise;
 
   // Construct Style Prompt
   const { joinedPositiveStylePrompt, joinedNegativeStylePrompt } =

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
+
-    : initialGenerationState.shouldUseCpuNoise;
   if (!model) {
     log.error('No model found in state');
     throw new Error('No model found in state');

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
+  const use_cpu = shouldUseCpuNoise;
-    ? shouldUseCpuNoise
-    : initialGenerationState.shouldUseCpuNoise;
 
   if (!model) {
     log.error('No model found in state');

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;
+    const { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
-    return {
+      state.generation;
-      activeLabel: clipSkip > 0 ? 'Clip Skip' : undefined,
+
-    };
+    return { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise };
   },
   defaultSelectorOptions
 );
 
 export default function ParamAdvancedCollapse() {
-  const { activeLabel } = useAppSelector(selector);
+  const { clipSkip, seamlessXAxis, seamlessYAxis, shouldUseCpuNoise } =
-  const shouldShowAdvancedOptions = useAppSelector(
+    useAppSelector(selector);
-    (state: RootState) => state.generation.shouldShowAdvancedOptions
-  );
   const { t } = useTranslation();
-  if (!shouldShowAdvancedOptions) {
+  const activeLabel = useMemo(() => {
-    return null;
+    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>
   );

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<HTMLInputElement>) =>
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
       dispatch(shouldUseCpuNoiseChanged(e.target.checked));
+    },
+    [dispatch]
+  );
 
   return (
     <IAISwitch
-      isDisabled={isDisabled}
       label={t('parameters.useCpuNoise')}
       isChecked={shouldUseCpuNoise}
       onChange={handleChange}

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

@@ -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);

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 (
     <IAISlider
-      isDisabled={isDisabled}
       label={t('parameters.noiseThreshold')}
       min={0}
       max={20}

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

@@ -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}
-    />
-  );
-};

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 (
     <IAISlider
-      isDisabled={isDisabled}
       label={t('parameters.perlinNoise')}
       min={0}
       max={1}

invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamless.tsx

@@ -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);

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

@@ -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);

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<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,

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 = () => {
       <ParamControlNetCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
-      <ParamNoiseCollapse />
+      <ParamAdvancedCollapse />
-      <ParamSeamlessCollapse />
     </>
   );
 };

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 = () => {
       <ParamControlNetCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
-      <ParamNoiseCollapse />
+      <ParamAdvancedCollapse />
-      <ParamSeamlessCollapse />
     </>
   );
 };

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() {
       <ParamControlNetCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
-      <ParamNoiseCollapse />
       <ParamInfillAndScalingCollapse />
       <ParamCompositingSettingsCollapse />
-      <ParamSeamlessCollapse />
+      <ParamAdvancedCollapse />
     </>
   );
 }

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 && (
-                  <SettingSwitch
-                    label={t('settings.showAdvancedOptions')}
-                    isChecked={shouldShowAdvancedOptions}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                      dispatch(setShouldShowAdvancedOptions(e.target.checked))
-                    }
-                  />
-                )}
               </StyledFlex>
 
               <StyledFlex>

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 = () => {
       <ParamControlNetCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
-      <ParamNoiseCollapse />
       <ParamSymmetryCollapse />
-      <ParamSeamlessCollapse />
       <ParamAdvancedCollapse />
     </>
   );

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 = () => {
       <ParamControlNetCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
-      <ParamNoiseCollapse />
       <ParamSymmetryCollapse />
-      <ParamSeamlessCollapse />
       <ParamAdvancedCollapse />
     </>
   );

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 = () => {
       <ParamSymmetryCollapse />
       <ParamInfillAndScalingCollapse />
       <ParamCompositingSettingsCollapse />
-      <ParamSeamlessCollapse />
       <ParamAdvancedCollapse />
     </>
   );