convert progress display to a drop-down

frontend/dist/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>InvokeAI - A Stable Diffusion Toolkit</title>
   <link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
-  <script type="module" crossorigin src="./assets/index.e2832fd4.js"></script>
+  <script type="module" crossorigin src="./assets/index.cc049b93.js"></script>
   <link rel="stylesheet" href="./assets/index.52c8231e.css">
 </head>
 

frontend/src/app/constants.ts

@@ -37,3 +37,9 @@ export const NUMPY_RAND_MIN = 0;
 export const NUMPY_RAND_MAX = 4294967295;
 
 export const FACETOOL_TYPES = ['gfpgan', 'codeformer'] as const;
+
+export const IN_PROGRESS_IMAGE_TYPES: Array<{ key: string; value: string }> = [
+  { key: "None", value: 'none'}, 
+  { key: "Full-res (slow)", value: 'full-res' },
+  { key: "Latents (fast)", value: 'latents' }
+];

frontend/src/common/util/parameterTranslation.ts

@@ -62,7 +62,7 @@ export const frontendToBackendParameters = (
     shouldRandomizeSeed,
   } = optionsState;
 
-  const { shouldDisplayInProgress, shouldDisplayInProgressLatents } = systemState;
+  const { shouldDisplayInProgressType } = systemState;
 
   const generationParameters: { [k: string]: any } = {
     prompt,
@@ -75,8 +75,8 @@ export const frontendToBackendParameters = (
     width,
     sampler_name: sampler,
     seed,
-    progress_images: shouldDisplayInProgress,
+    progress_images: shouldDisplayInProgressType === 'full-res',
-    progress_latents: shouldDisplayInProgressLatents,
+    progress_latents: shouldDisplayInProgressType === 'latents'
   };
 
   generationParameters.seed = shouldRandomizeSeed

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

@@ -20,26 +20,24 @@ import { persistor } from '../../../main';
 import {
   setShouldConfirmOnDelete,
   setShouldDisplayGuides,
-  setShouldDisplayInProgress,
+  setShouldDisplayInProgressType,
-  setShouldDisplayInProgressLatents,
   SystemState,
 } from '../systemSlice';
 import ModelList from './ModelList';
-import SettingsModalItem from './SettingsModalItem';
+import { SettingsModalItem, SettingsModalSelectItem } from './SettingsModalItem';
+import { IN_PROGRESS_IMAGE_TYPES } from '../../../app/constants';
 
 const systemSelector = createSelector(
   (state: RootState) => state.system,
   (system: SystemState) => {
     const {
-      shouldDisplayInProgress,
+      shouldDisplayInProgressType,
-      shouldDisplayInProgressLatents,
       shouldConfirmOnDelete,
       shouldDisplayGuides,
       model_list,
     } = system;
     return {
-      shouldDisplayInProgress,
+      shouldDisplayInProgressType,
-      shouldDisplayInProgressLatents,
       shouldConfirmOnDelete,
       shouldDisplayGuides,
       models: _.map(model_list, (_model, key) => key),
@@ -75,8 +73,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
   } = useDisclosure();
 
   const {
-    shouldDisplayInProgress,
+    shouldDisplayInProgressType,
-    shouldDisplayInProgressLatents,
     shouldConfirmOnDelete,
     shouldDisplayGuides,
   } = useAppSelector(systemSelector);
@@ -106,16 +103,12 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
           <ModalBody className="settings-modal-content">
             <ModelList />
             <div className="settings-modal-items">
-              <SettingsModalItem
-                settingTitle="Display In-Progress Images (slower)"
-                isChecked={shouldDisplayInProgress}
-                dispatcher={setShouldDisplayInProgress}
-              />
 
-              <SettingsModalItem
+              <SettingsModalSelectItem
-                settingTitle="Display In-Progress Latents (quick; lo-res)"
+                settingTitle="Display In-Progress Images"
-                isChecked={shouldDisplayInProgressLatents}
+                validValues={IN_PROGRESS_IMAGE_TYPES}
-                dispatcher={setShouldDisplayInProgressLatents}
+                defaultValue={shouldDisplayInProgressType}
+                dispatcher={setShouldDisplayInProgressType}
               />
 
               <SettingsModalItem

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

@@ -1,7 +1,8 @@
 import { useAppDispatch } from '../../../app/store';
+import IAISelect from '../../../common/components/IAISelect';
 import IAISwitch from '../../../common/components/IAISwitch';
 
-export default function SettingsModalItem({
+export function SettingsModalItem({
   settingTitle,
   isChecked,
   dispatcher,
@@ -20,3 +21,30 @@ export default function SettingsModalItem({
     />
   );
 }
+
+
+export function SettingsModalSelectItem({
+  settingTitle,
+  validValues,
+  defaultValue,
+  dispatcher,
+}: {
+  settingTitle: string;
+  validValues: 
+      Array<number | string>
+    | Array<{ key: string; value: string | number }>;
+  defaultValue: string;
+  dispatcher: any;
+}) {
+  const dispatch = useAppDispatch();
+  return (
+    <IAISelect
+      styleClass="settings-modal-item"
+      label={settingTitle}
+      validValues={validValues}
+      defaultValue={defaultValue}
+      onChange={(e) => dispatch(dispatcher(e.target.value))}
+    />
+  );
+}
+

frontend/src/features/system/systemSlice.ts

@@ -18,8 +18,7 @@ export interface Log {
 export interface SystemState
   extends InvokeAI.SystemStatus,
     InvokeAI.SystemConfig {
-  shouldDisplayInProgress: boolean;
+  shouldDisplayInProgressType: string;
-  shouldDisplayInProgressLatents: boolean;
   log: Array<LogEntry>;
   shouldShowLogViewer: boolean;
   isGFPGANAvailable: boolean;
@@ -44,8 +43,7 @@ const initialSystemState = {
   isProcessing: false,
   log: [],
   shouldShowLogViewer: false,
-  shouldDisplayInProgress: false,
+  shouldDisplayInProgressType: "none",
-  shouldDisplayInProgressLatents: false,
   shouldDisplayGuides: true,
   isGFPGANAvailable: true,
   isESRGANAvailable: true,
@@ -75,11 +73,8 @@ export const systemSlice = createSlice({
   name: 'system',
   initialState,
   reducers: {
-    setShouldDisplayInProgress: (state, action: PayloadAction<boolean>) => {
+    setShouldDisplayInProgressType: (state, action: PayloadAction<string>) => {
-      state.shouldDisplayInProgress = action.payload;
+      state.shouldDisplayInProgressType = action.payload;
-    },
-    setShouldDisplayInProgressLatents: (state, action: PayloadAction<boolean>) => {
-      state.shouldDisplayInProgressLatents = action.payload;
     },
     setIsProcessing: (state, action: PayloadAction<boolean>) => {
       state.isProcessing = action.payload;
@@ -187,8 +182,7 @@ export const systemSlice = createSlice({
 });
 
 export const {
-  setShouldDisplayInProgress,
+  setShouldDisplayInProgressType,
-  setShouldDisplayInProgressLatents,
   setIsProcessing,
   addLogEntry,
   setShouldShowLogViewer,