Add Save Intermediates Step Count

For accurate mode only.

Co-Authored-By: Richard Macarthy <richardmacarthy@protonmail.com>

backend/invoke_ai_web_server.py

@@ -616,7 +616,7 @@ class InvokeAIWebServer:
 
                 if (
                     generation_parameters["progress_images"]
-                    and step % 5 == 0
+                    and step % generation_parameters['save_intermediates'] == 0
                     and step < generation_parameters["steps"] - 1
                 ):
                     image = self.generate.sample_to_image(sample)

frontend/src/common/util/parameterTranslation.ts

@@ -62,7 +62,8 @@ export const frontendToBackendParameters = (
     shouldRandomizeSeed,
   } = optionsState;
 
-  const { shouldDisplayInProgressType } = systemState;
+  const { shouldDisplayInProgressType, saveIntermediatesInterval } =
+    systemState;
 
   const generationParameters: { [k: string]: any } = {
     prompt,
@@ -78,6 +79,7 @@ export const frontendToBackendParameters = (
     seed,
     progress_images: shouldDisplayInProgressType === 'full-res',
     progress_latents: shouldDisplayInProgressType === 'latents',
+    save_intermediates: saveIntermediatesInterval,
   };
 
   generationParameters.seed = shouldRandomizeSeed

frontend/src/features/system/SettingsModal/SettingsModal.tsx

@@ -19,6 +19,7 @@ import { RootState, useAppDispatch, useAppSelector } from '../../../app/store';
 import { persistor } from '../../../main';
 import {
   InProgressImageType,
+  setSaveIntermediatesInterval,
   setShouldConfirmOnDelete,
   setShouldDisplayGuides,
   setShouldDisplayInProgressType,
@@ -28,6 +29,7 @@ import ModelList from './ModelList';
 import { IN_PROGRESS_IMAGE_TYPES } from '../../../app/constants';
 import IAISwitch from '../../../common/components/IAISwitch';
 import IAISelect from '../../../common/components/IAISelect';
+import IAINumberInput from '../../../common/components/IAINumberInput';
 
 const systemSelector = createSelector(
   (state: RootState) => state.system,
@@ -64,6 +66,12 @@ type SettingsModalProps = {
 const SettingsModal = ({ children }: SettingsModalProps) => {
   const dispatch = useAppDispatch();
 
+  const saveIntermediatesInterval = useAppSelector(
+    (state: RootState) => state.system.saveIntermediatesInterval
+  );
+
+  const steps = useAppSelector((state: RootState) => state.options.steps);
+
   const {
     isOpen: isSettingsModalOpen,
     onOpen: onSettingsModalOpen,
@@ -93,6 +101,12 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
     });
   };
 
+  const handleChangeIntermediateSteps = (value: number) => {
+    if (value > steps) value = steps;
+    if (value < 1) value = 1;
+    dispatch(setSaveIntermediatesInterval(value));
+  };
+
   return (
     <>
       {cloneElement(children, {
@@ -109,20 +123,35 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
               <div className="settings-modal-item">
                 <ModelList />
               </div>
-              <IAISelect
-                styleClass="settings-modal-item"
-                label={'Display In-Progress Images'}
-                validValues={IN_PROGRESS_IMAGE_TYPES}
-                value={shouldDisplayInProgressType}
-                onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-                  dispatch(
-                    setShouldDisplayInProgressType(
-                      e.target.value as InProgressImageType
+              <div
+                className="settings-modal-item"
+                style={{ gridAutoFlow: 'row', rowGap: '0.5rem' }}
+              >
+                <IAISelect
+                  label={'Display In-Progress Images'}
+                  validValues={IN_PROGRESS_IMAGE_TYPES}
+                  value={shouldDisplayInProgressType}
+                  onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                    dispatch(
+                      setShouldDisplayInProgressType(
+                        e.target.value as InProgressImageType
+                      )
                     )
-                  )
-                }
-              />
-
+                  }
+                />
+                {shouldDisplayInProgressType === 'full-res' && (
+                  <IAINumberInput
+                    label="Save images every n steps"
+                    min={1}
+                    max={steps}
+                    step={1}
+                    onChange={handleChangeIntermediateSteps}
+                    value={saveIntermediatesInterval}
+                    width="auto"
+                    textAlign="center"
+                  />
+                )}
+              </div>
               <IAISwitch
                 styleClass="settings-modal-item"
                 label={'Confirm on Delete'}

frontend/src/features/system/systemSlice.ts

@@ -43,6 +43,7 @@ export interface SystemState
   shouldDisplayGuides: boolean;
   wasErrorSeen: boolean;
   isCancelable: boolean;
+  saveIntermediatesInterval: number;
 }
 
 const initialSystemState: SystemState = {
@@ -72,6 +73,7 @@ const initialSystemState: SystemState = {
   hasError: false,
   wasErrorSeen: true,
   isCancelable: true,
+  saveIntermediatesInterval: 5,
 };
 
 export const systemSlice = createSlice({
@@ -186,6 +188,9 @@ export const systemSlice = createSlice({
       state.isProcessing = true;
       state.currentStatusHasSteps = false;
     },
+    setSaveIntermediatesInterval: (state, action: PayloadAction<number>) => {
+      state.saveIntermediatesInterval = action.payload;
+    },
   },
 });
 
@@ -208,6 +213,7 @@ export const {
   setModelList,
   setIsCancelable,
   modelChangeRequested,
+  setSaveIntermediatesInterval,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;