(ui): make detailed progress view a setting that can be hidden

invokeai/frontend/web/public/locales/en.json

@@ -1138,6 +1138,7 @@
         "resetWebUI": "Reset Web UI",
         "resetWebUIDesc1": "Resetting the web UI only resets the browser's local cache of your images and remembered settings. It does not delete any images from disk.",
         "resetWebUIDesc2": "If images aren't showing up in the gallery or something else isn't working, please try resetting before submitting an issue on GitHub.",
+        "showDetailedInvocationProgress": "Show Progress Details",
         "showProgressInViewer": "Show Progress Images in Viewer",
         "ui": "User Interface",
         "clearIntermediatesDisabled": "Queue must be empty to clear intermediates",

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx

@@ -1,14 +1,17 @@
 import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectSystemShouldShowInvocationProgressDetail } from 'features/system/store/systemSlice';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { $canvasProgressMessage } from 'services/events/stores';
 
 export const CanvasAlertsInvocationProgress = memo(() => {
   const { t } = useTranslation();
   const progressEventMessage = useStore($canvasProgressMessage);
+  const shouldShowInvocationProgressDetail = useAppSelector(selectSystemShouldShowInvocationProgressDetail);
 
-  if (!progressEventMessage) {
+  if (!shouldShowInvocationProgressDetail || !progressEventMessage) {
     return null;
   }
 

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx

@@ -77,7 +77,7 @@ const SettingsMenu = () => {
                 {t('common.hotkeysLabel')}
               </MenuItem>
             </HotkeysModal>
-            <SettingsModal>
+            <SettingsModal config={{ shouldShowInvocationProgressDetailToggle: false }}>
               <MenuItem as="button" icon={<PiToggleRightFill />}>
                 {t('common.settingsLabel')}
               </MenuItem>

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -32,11 +32,13 @@ import {
   selectSystemShouldConfirmOnNewSession,
   selectSystemShouldEnableInformationalPopovers,
   selectSystemShouldEnableModelDescriptions,
+  selectSystemShouldShowInvocationProgressDetail,
   selectSystemShouldUseNSFWChecker,
   selectSystemShouldUseWatermarker,
   setShouldConfirmOnDelete,
   setShouldEnableInformationalPopovers,
   setShouldEnableModelDescriptions,
+  setShouldShowInvocationProgressDetail,
   shouldAntialiasProgressImageChanged,
   shouldConfirmOnNewSessionToggled,
   shouldUseNSFWCheckerChanged,
@@ -56,13 +58,15 @@ type ConfigOptions = {
   shouldShowResetWebUiText?: boolean;
   shouldShowClearIntermediates?: boolean;
   shouldShowLocalizationToggle?: boolean;
+  shouldShowInvocationProgressDetailToggle?: boolean;
 };
 
 const defaultConfig: ConfigOptions = {
   shouldShowDeveloperSettings: true,
   shouldShowResetWebUiText: true,
   shouldShowClearIntermediates: true,
   shouldShowLocalizationToggle: true,
+  shouldShowInvocationProgressDetailToggle: true,
 };
 
 type SettingsModalProps = {
@@ -103,6 +107,7 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps)
   const shouldEnableInformationalPopovers = useAppSelector(selectSystemShouldEnableInformationalPopovers);
   const shouldEnableModelDescriptions = useAppSelector(selectSystemShouldEnableModelDescriptions);
   const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
+  const shouldShowInvocationProgressDetail = useAppSelector(selectSystemShouldShowInvocationProgressDetail);
   const onToggleConfirmOnNewSession = useCallback(() => {
     dispatch(shouldConfirmOnNewSessionToggled());
   }, [dispatch]);
@@ -170,6 +175,13 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps)
     [dispatch]
   );
 
+  const handleChangeShouldShowInvocationProgressDetail = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      dispatch(setShouldShowInvocationProgressDetail(e.target.checked));
+    },
+    [dispatch]
+  );
+
   return (
     <>
       {cloneElement(children, {
@@ -221,6 +233,15 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps)
                         onChange={handleChangeShouldAntialiasProgressImage}
                       />
                     </FormControl>
+                    {Boolean(config?.shouldShowInvocationProgressDetailToggle) && (
+                      <FormControl>
+                        <FormLabel>{t('settings.showDetailedInvocationProgress')}</FormLabel>
+                        <Switch
+                          isChecked={shouldShowInvocationProgressDetail}
+                          onChange={handleChangeShouldShowInvocationProgressDetail}
+                        />
+                      </FormControl>
+                    )}
                     <FormControl>
                       <InformationalPopover feature="noiseUseCPU" inPortal={false}>
                         <FormLabel>{t('parameters.useCpuNoise')}</FormLabel>

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -21,6 +21,7 @@ const initialSystemState: SystemState = {
   logIsEnabled: true,
   logLevel: 'debug',
   logNamespaces: [...zLogNamespace.options],
+  shouldShowInvocationProgressDetail: false,
 };
 
 export const systemSlice = createSlice({
@@ -64,6 +65,9 @@ export const systemSlice = createSlice({
     shouldConfirmOnNewSessionToggled(state) {
       state.shouldConfirmOnNewSession = !state.shouldConfirmOnNewSession;
     },
+    setShouldShowInvocationProgressDetail(state, action: PayloadAction<boolean>) {
+      state.shouldShowInvocationProgressDetail = action.payload;
+    },
   },
 });
 
@@ -79,6 +83,7 @@ export const {
   setShouldEnableInformationalPopovers,
   setShouldEnableModelDescriptions,
   shouldConfirmOnNewSessionToggled,
+  setShouldShowInvocationProgressDetail,
 } = systemSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -117,3 +122,6 @@ export const selectSystemShouldEnableModelDescriptions = createSystemSelector(
   (system) => system.shouldEnableModelDescriptions
 );
 export const selectSystemShouldConfirmOnNewSession = createSystemSelector((system) => system.shouldConfirmOnNewSession);
+export const selectSystemShouldShowInvocationProgressDetail = createSystemSelector(
+  (system) => system.shouldShowInvocationProgressDetail
+);

invokeai/frontend/web/src/features/system/store/types.ts

@@ -41,4 +41,5 @@ export interface SystemState {
   logIsEnabled: boolean;
   logLevel: LogLevel;
   logNamespaces: LogNamespace[];
+  shouldShowInvocationProgressDetail: boolean;
 }