feat(ui): add ui for cpu noise

not hooked up to graphs

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

@@ -0,0 +1,39 @@
+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 { 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 { t } = useTranslation();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
+    dispatch(shouldUseCpuNoiseChanged(e.target.checked));
+
+  return (
+    <IAISwitch
+      isDisabled={isDisabled}
+      label="Use CPU Noise"
+      isChecked={shouldUseCpuNoise}
+      onChange={handleChange}
+    />
+  );
+};

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

@@ -7,6 +7,7 @@ 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';
@@ -40,6 +41,7 @@ const ParamNoiseCollapse = () => {
     >
       <Flex sx={{ gap: 2, flexDirection: 'column' }}>
         <ParamNoiseToggle />
+        <ParamCpuNoiseToggle />
         <ParamPerlinNoise />
         <ParamNoiseThreshold />
       </Flex>

invokeai/frontend/web/src/features/parameters/store/generationSlice.ts

@@ -55,6 +55,7 @@ export interface GenerationState {
   seamlessXAxis: boolean;
   seamlessYAxis: boolean;
   clipSkip: number;
+  shouldUseCpuNoise: boolean;
 }
 
 export const initialGenerationState: GenerationState = {
@@ -90,6 +91,7 @@ export const initialGenerationState: GenerationState = {
   seamlessXAxis: false,
   seamlessYAxis: false,
   clipSkip: 0,
+  shouldUseCpuNoise: true,
 };
 
 const initialState: GenerationState = initialGenerationState;
@@ -239,6 +241,9 @@ export const generationSlice = createSlice({
     setClipSkip: (state, action: PayloadAction<number>) => {
       state.clipSkip = action.payload;
     },
+    shouldUseCpuNoiseChanged: (state, action: PayloadAction<boolean>) => {
+      state.shouldUseCpuNoise = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(configChanged, (state, action) => {
@@ -298,6 +303,7 @@ export const {
   setSeamlessXAxis,
   setSeamlessYAxis,
   setClipSkip,
+  shouldUseCpuNoiseChanged,
 } = generationSlice.actions;
 
 export default generationSlice.reducer;