Merge branch 'main' into fix/ui/fix-progress-toggle

invokeai/frontend/web/src/common/components/IAISlider.tsx

@@ -56,7 +56,6 @@ export type IAIFullSliderProps = {
   withInput?: boolean;
   isInteger?: boolean;
   inputWidth?: string | number;
-  inputReadOnly?: boolean;
   withReset?: boolean;
   handleReset?: () => void;
   tooltipSuffix?: string;
@@ -90,7 +89,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
     withInput = false,
     isInteger = false,
     inputWidth = 16,
-    inputReadOnly = false,
     withReset = false,
     hideTooltip = false,
     isCompact = false,
@@ -152,6 +150,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
   );
 
   const handleInputChange = useCallback((v: number | string) => {
+    console.log('input');
     setLocalInputValue(v);
   }, []);
 
@@ -311,7 +310,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
             {...sliderNumberInputProps}
           >
             <NumberInputField
-              readOnly={inputReadOnly}
               minWidth={inputWidth}
               {...sliderNumberInputFieldProps}
             />

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -235,7 +235,6 @@ const IAICanvasToolChooserOptions = () => {
               withInput
               onChange={(newSize) => dispatch(setBrushSize(newSize))}
               sliderNumberInputProps={{ max: 500 }}
-              inputReadOnly={false}
             />
           </Flex>
           <IAIColorPicker

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx

@@ -51,7 +51,6 @@ const ParamDynamicPromptsMaxPrompts = () => {
       sliderNumberInputProps={{ max: inputMax }}
       withSliderMarks
       withInput
-      inputReadOnly
       withReset
       handleReset={handleReset}
     />

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

@@ -1,6 +1,7 @@
 import { log } from 'app/logging/useLogger';
 import { RootState } from 'app/store/store';
 import { NonNullableGraph } from 'features/nodes/types/types';
+import { initialGenerationState } from 'features/parameters/store/generationSlice';
 import {
   ImageDTO,
   ImageResizeInvocation,
@@ -42,9 +43,8 @@ export const buildCanvasImageToImageGraph = (
     steps,
     img2imgStrength: strength,
     clipSkip,
-    iterations,
+    shouldUseCpuNoise,
-    seed,
+    shouldUseNoiseSettings,
-    shouldRandomizeSeed,
   } = state.generation;
 
   // The bounding box determines width and height, not the width and height params
@@ -52,6 +52,10 @@ export const buildCanvasImageToImageGraph = (
 
   const model = modelIdToMainModelField(currentModel?.id || '');
 
+  const use_cpu = shouldUseNoiseSettings
+    ? shouldUseCpuNoise
+    : initialGenerationState.shouldUseCpuNoise;
+
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
    * full graph here as a template. Then use the parameters from app state and set friendlier node
@@ -78,6 +82,7 @@ export const buildCanvasImageToImageGraph = (
       [NOISE]: {
         type: 'noise',
         id: NOISE,
+        use_cpu,
       },
       [MAIN_MODEL_LOADER]: {
         type: 'main_model_loader',

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

@@ -1,5 +1,6 @@
 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 { modelIdToMainModelField } from '../modelIdToMainModelField';
 import { addDynamicPromptsToGraph } from './addDynamicPromptsToGraph';
@@ -30,9 +31,8 @@ export const buildCanvasTextToImageGraph = (
     scheduler,
     steps,
     clipSkip,
-    iterations,
+    shouldUseCpuNoise,
-    seed,
+    shouldUseNoiseSettings,
-    shouldRandomizeSeed,
   } = state.generation;
 
   // The bounding box determines width and height, not the width and height params
@@ -40,6 +40,10 @@ export const buildCanvasTextToImageGraph = (
 
   const model = modelIdToMainModelField(currentModel?.id || '');
 
+  const use_cpu = shouldUseNoiseSettings
+    ? shouldUseCpuNoise
+    : initialGenerationState.shouldUseCpuNoise;
+
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
    * full graph here as a template. Then use the parameters from app state and set friendlier node
@@ -68,6 +72,7 @@ export const buildCanvasTextToImageGraph = (
         id: NOISE,
         width,
         height,
+        use_cpu,
       },
       [TEXT_TO_LATENTS]: {
         type: 't2l',

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

@@ -1,6 +1,7 @@
 import { log } from 'app/logging/useLogger';
 import { RootState } from 'app/store/store';
 import { NonNullableGraph } from 'features/nodes/types/types';
+import { initialGenerationState } from 'features/parameters/store/generationSlice';
 import {
   ImageCollectionInvocation,
   ImageResizeInvocation,
@@ -48,6 +49,8 @@ export const buildLinearImageToImageGraph = (
     width,
     height,
     clipSkip,
+    shouldUseCpuNoise,
+    shouldUseNoiseSettings,
   } = state.generation;
 
   const {
@@ -75,6 +78,10 @@ export const buildLinearImageToImageGraph = (
 
   const model = modelIdToMainModelField(currentModel?.id || '');
 
+  const use_cpu = shouldUseNoiseSettings
+    ? shouldUseCpuNoise
+    : initialGenerationState.shouldUseCpuNoise;
+
   // copy-pasted graph from node editor, filled in with state values & friendly node ids
   const graph: NonNullableGraph = {
     id: IMAGE_TO_IMAGE_GRAPH,
@@ -102,6 +109,7 @@ export const buildLinearImageToImageGraph = (
       [NOISE]: {
         type: 'noise',
         id: NOISE,
+        use_cpu,
       },
       [LATENTS_TO_IMAGE]: {
         type: 'l2i',

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

@@ -1,5 +1,6 @@
 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 { modelIdToMainModelField } from '../modelIdToMainModelField';
 import { addDynamicPromptsToGraph } from './addDynamicPromptsToGraph';
@@ -29,10 +30,16 @@ export const buildLinearTextToImageGraph = (
     width,
     height,
     clipSkip,
+    shouldUseCpuNoise,
+    shouldUseNoiseSettings,
   } = state.generation;
 
   const model = modelIdToMainModelField(currentModel?.id || '');
 
+  const use_cpu = shouldUseNoiseSettings
+    ? shouldUseCpuNoise
+    : initialGenerationState.shouldUseCpuNoise;
+
   /**
    * The easiest way to build linear graphs is to do it in the node editor, then copy and paste the
    * full graph here as a template. Then use the parameters from app state and set friendlier node
@@ -71,6 +78,7 @@ export const buildLinearTextToImageGraph = (
         id: NOISE,
         width,
         height,
+        use_cpu,
       },
       [TEXT_TO_LATENTS]: {
         type: 't2l',

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx

@@ -59,7 +59,6 @@ const ParamBoundingBoxWidth = () => {
       sliderNumberInputProps={{ max: 4096 }}
       withSliderMarks
       withInput
-      inputReadOnly
       withReset
       handleReset={handleResetHeight}
     />

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxWidth.tsx

@@ -59,7 +59,6 @@ const ParamBoundingBoxWidth = () => {
       sliderNumberInputProps={{ max: 4096 }}
       withSliderMarks
       withInput
-      inputReadOnly
       withReset
       handleReset={handleResetWidth}
     />

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx

@@ -58,7 +58,6 @@ const ParamScaledHeight = () => {
       sliderNumberInputProps={{ max: 4096 }}
       withSliderMarks
       withInput
-      inputReadOnly
       withReset
       handleReset={handleResetScaledHeight}
     />

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledWidth.tsx

@@ -56,7 +56,6 @@ const ParamScaledWidth = () => {
       sliderNumberInputProps={{ max: 4096 }}
       withSliderMarks
       withInput
-      inputReadOnly
       withReset
       handleReset={handleResetScaledWidth}
     />

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;

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx

@@ -48,7 +48,6 @@ export default function UnifiedCanvasBrushSize() {
       withInput
       onChange={(newSize) => dispatch(setBrushSize(newSize))}
       sliderNumberInputProps={{ max: 500 }}
-      inputReadOnly={false}
       isCompact
     />
   );