feat(ui): Add auto show progress previews setting

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

@@ -527,6 +527,7 @@
         "useCanvasBeta": "Use Canvas Beta Layout",
         "enableImageDebugging": "Enable Image Debugging",
         "useSlidersForAll": "Use Sliders For All Options",
+        "autoShowProgress": "Auto Show Progress Images",
         "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.",

invokeai/frontend/web/src/app/components/App.tsx

@@ -28,9 +28,9 @@ import { configChanged } from 'features/system/store/configSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useLogger } from 'app/logging/useLogger';
 import ProgressImagePreview from 'features/parameters/components/ProgressImagePreview';
-import { DndContext, DragEndEvent } from '@dnd-kit/core';
+// import { DndContext, DragEndEvent } from '@dnd-kit/core';
 import { floatingProgressImageMoved } from 'features/ui/store/uiSlice';
-import { restrictToWindowEdges } from '@dnd-kit/modifiers';
+// import { restrictToWindowEdges } from '@dnd-kit/modifiers';
 
 const DEFAULT_CONFIG = {};
 
@@ -67,17 +67,7 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
     setLoadingOverridden(true);
   }, []);
 
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      dispatch(
-        floatingProgressImageMoved({ x: event.delta.x, y: event.delta.y })
-      );
-    },
-    [dispatch]
-  );
-
   return (
-    <DndContext onDragEnd={handleDragEnd} modifiers={[restrictToWindowEdges]}>
     <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
       {isLightboxEnabled && <Lightbox />}
       <ImageUploader>
@@ -136,7 +126,6 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
       </Portal>
       <ProgressImagePreview />
     </Grid>
-    </DndContext>
   );
 };
 

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -1,11 +1,4 @@
-import React, {
+import React, { lazy, memo, PropsWithChildren, useEffect } from 'react';
-  lazy,
-  memo,
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { store } from 'app/store/store';

invokeai/frontend/web/src/features/parameters/components/ProgressImagePreview.tsx

@@ -2,7 +2,7 @@ import { Flex, Icon, Image, Text } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { FaImage, FaStopwatch } from 'react-icons/fa';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import IAIIconButton from 'common/components/IAIIconButton';
@@ -11,35 +11,49 @@ import { useTranslation } from 'react-i18next';
 import {
   floatingProgressImageMoved,
   floatingProgressImageResized,
-  shouldShowProgressImagesToggled,
+  setShouldShowProgressImages,
 } from 'features/ui/store/uiSlice';
 import { Rnd } from 'react-rnd';
 import { Rect } from 'features/ui/store/uiTypes';
+import { isEqual } from 'lodash';
 
-const selector = createSelector([systemSelector, uiSelector], (system, ui) => {
+const selector = createSelector(
-  const { progressImage } = system;
+  [systemSelector, uiSelector],
-  const { floatingProgressImageRect, shouldShowProgressImages } = ui;
+  (system, ui) => {
+    const { progressImage, isProcessing } = system;
+    const {
+      floatingProgressImageRect,
+      shouldShowProgressImages,
+      shouldAutoShowProgressImages,
+    } = ui;
+
+    const showProgressWindow =
+      shouldAutoShowProgressImages && isProcessing
+        ? true
+        : shouldShowProgressImages;
 
     return {
       progressImage,
       floatingProgressImageRect,
-    shouldShowProgressImages,
+      showProgressWindow,
     };
-});
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: isEqual,
+    },
+  }
+);
 
 const ProgressImagePreview = () => {
   const dispatch = useAppDispatch();
 
-  const { progressImage, floatingProgressImageRect, shouldShowProgressImages } =
+  const { showProgressWindow, progressImage, floatingProgressImageRect } =
     useAppSelector(selector);
 
   const { t } = useTranslation();
 
-  const toggleProgressImages = useCallback(() => {
+  return showProgressWindow ? (
-    dispatch(shouldShowProgressImagesToggled());
-  }, [dispatch]);
-
-  return shouldShowProgressImages ? (
     <Rnd
       bounds="window"
       minHeight={200}
@@ -113,7 +127,7 @@ const ProgressImagePreview = () => {
             </Text>
           </Flex>
           <IAIIconButton
-            onClick={toggleProgressImages}
+            onClick={() => dispatch(setShouldShowProgressImages(false))}
             aria-label={t('ui.hideProgressImages')}
             size="xs"
             icon={<CloseIcon />}
@@ -141,7 +155,6 @@ const ProgressImagePreview = () => {
                 maxWidth: '100%',
                 maxHeight: '100%',
                 height: 'auto',
-                imageRendering: 'pixelated',
                 borderRadius: 'base',
                 p: 2,
               }}
@@ -163,9 +176,13 @@ const ProgressImagePreview = () => {
     </Rnd>
   ) : (
     <IAIIconButton
-      onClick={toggleProgressImages}
+      onClick={() => dispatch(setShouldShowProgressImages(true))}
       tooltip={t('ui.showProgressImages')}
-      sx={{ position: 'absolute', bottom: 4, insetInlineStart: 4 }}
+      sx={{
+        position: 'absolute',
+        bottom: 4,
+        insetInlineStart: 4,
+      }}
       aria-label={t('ui.showProgressImages')}
       icon={<FaStopwatch />}
     />

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

@@ -28,6 +28,7 @@ import {
 } from 'features/system/store/systemSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import {
+  setShouldAutoShowProgressImages,
   setShouldUseCanvasBetaLayout,
   setShouldUseSliders,
 } from 'features/ui/store/uiSlice';
@@ -50,7 +51,11 @@ const selector = createSelector(
       shouldLogToConsole,
     } = system;
 
-    const { shouldUseCanvasBetaLayout, shouldUseSliders } = ui;
+    const {
+      shouldUseCanvasBetaLayout,
+      shouldUseSliders,
+      shouldAutoShowProgressImages,
+    } = ui;
 
     return {
       shouldConfirmOnDelete,
@@ -58,6 +63,7 @@ const selector = createSelector(
       enableImageDebugging,
       shouldUseCanvasBetaLayout,
       shouldUseSliders,
+      shouldAutoShowProgressImages,
       consoleLogLevel,
       shouldLogToConsole,
     };
@@ -108,6 +114,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
     enableImageDebugging,
     shouldUseCanvasBetaLayout,
     shouldUseSliders,
+    shouldAutoShowProgressImages,
     consoleLogLevel,
     shouldLogToConsole,
   } = useAppSelector(selector);
@@ -186,6 +193,13 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
                     dispatch(setShouldUseSliders(e.target.checked))
                   }
                 />
+                <IAISwitch
+                  label={t('settings.autoShowProgress')}
+                  isChecked={shouldAutoShowProgressImages}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    dispatch(setShouldAutoShowProgressImages(e.target.checked))
+                  }
+                />
               </Flex>
 
               <Flex sx={modalSectionStyles}>

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -23,6 +23,7 @@ const initialUIState: UIState = {
   openUnifiedCanvasAccordionItems: [],
   floatingProgressImageRect: { x: 0, y: 0, width: 0, height: 0 },
   shouldShowProgressImages: false,
+  shouldAutoShowProgressImages: false,
 };
 
 const initialState: UIState = initialUIState;
@@ -122,8 +123,14 @@ export const uiSlice = createSlice({
         ...action.payload,
       };
     },
-    shouldShowProgressImagesToggled: (state) => {
+    setShouldShowProgressImages: (state, action: PayloadAction<boolean>) => {
-      state.shouldShowProgressImages = !state.shouldShowProgressImages;
+      state.shouldShowProgressImages = action.payload;
+    },
+    setShouldAutoShowProgressImages: (
+      state,
+      action: PayloadAction<boolean>
+    ) => {
+      state.shouldAutoShowProgressImages = action.payload;
     },
   },
 });
@@ -150,7 +157,8 @@ export const {
   openAccordionItemsChanged,
   floatingProgressImageMoved,
   floatingProgressImageResized,
-  shouldShowProgressImagesToggled,
+  setShouldShowProgressImages,
+  setShouldAutoShowProgressImages,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -31,4 +31,5 @@ export interface UIState {
   openUnifiedCanvasAccordionItems: number[];
   floatingProgressImageRect: Rect;
   shouldShowProgressImages: boolean;
+  shouldAutoShowProgressImages: boolean;
 }