feat(ui): antialias progress images

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

@@ -532,6 +532,7 @@
         "enableImageDebugging": "Enable Image Debugging",
         "useSlidersForAll": "Use Sliders For All Options",
         "showProgressInViewer": "Show Progress Images in Viewer",
+        "antialiasProgressImages": "Antialias 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/features/gallery/components/CurrentImagePreview.tsx

@@ -22,13 +22,14 @@ export const imagesSelector = createSelector(
       shouldShowProgressInViewer,
     } = ui;
     const { selectedImage } = gallery;
-    const { progressImage } = system;
+    const { progressImage, shouldAntialiasProgressImage } = system;
     return {
       shouldShowImageDetails,
       shouldHidePreview,
       image: selectedImage,
       progressImage,
       shouldShowProgressInViewer,
+      shouldAntialiasProgressImage,
     };
   },
   {
@@ -45,6 +46,7 @@ const CurrentImagePreview = () => {
     shouldHidePreview,
     progressImage,
     shouldShowProgressInViewer,
+    shouldAntialiasProgressImage,
   } = useAppSelector(imagesSelector);
   const { getUrl } = useGetUrl();
 
@@ -84,6 +86,7 @@ const CurrentImagePreview = () => {
             height: 'auto',
             position: 'absolute',
             borderRadius: 'base',
+            imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated',
           }}
         />
       ) : (

invokeai/frontend/web/src/features/gallery/components/GalleryProgressImage.tsx

@@ -10,20 +10,25 @@ const selector = createSelector(
   [systemSelector, gallerySelector],
   (system, gallery) => {
     const { shouldUseSingleGalleryColumn, galleryImageObjectFit } = gallery;
-    const { progressImage } = system;
+    const { progressImage, shouldAntialiasProgressImage } = system;
 
     return {
       progressImage,
       shouldUseSingleGalleryColumn,
       galleryImageObjectFit,
+      shouldAntialiasProgressImage,
     };
   },
   defaultSelectorOptions
 );
 
 const GalleryProgressImage = () => {
-  const { progressImage, shouldUseSingleGalleryColumn, galleryImageObjectFit } =
+  const {
-    useAppSelector(selector);
+    progressImage,
+    shouldUseSingleGalleryColumn,
+    galleryImageObjectFit,
+    shouldAntialiasProgressImage,
+  } = useAppSelector(selector);
 
   if (!progressImage) {
     return null;
@@ -53,6 +58,7 @@ const GalleryProgressImage = () => {
           maxWidth: '100%',
           maxHeight: '100%',
           borderRadius: 'base',
+          imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated',
         }}
       />
     </Flex>

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

@@ -23,6 +23,7 @@ import {
   setEnableImageDebugging,
   setShouldConfirmOnDelete,
   setShouldDisplayGuides,
+  shouldAntialiasProgressImageChanged,
   shouldLogToConsoleChanged,
   SystemState,
 } from 'features/system/store/systemSlice';
@@ -49,6 +50,7 @@ const selector = createSelector(
       enableImageDebugging,
       consoleLogLevel,
       shouldLogToConsole,
+      shouldAntialiasProgressImage,
     } = system;
 
     const {
@@ -66,6 +68,7 @@ const selector = createSelector(
       shouldShowProgressInViewer,
       consoleLogLevel,
       shouldLogToConsole,
+      shouldAntialiasProgressImage,
     };
   },
   {
@@ -117,6 +120,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
     shouldShowProgressInViewer,
     consoleLogLevel,
     shouldLogToConsole,
+    shouldAntialiasProgressImage,
   } = useAppSelector(selector);
 
   const handleClickResetWebUI = useCallback(() => {
@@ -203,6 +207,15 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
                     dispatch(setShouldShowProgressInViewer(e.target.checked))
                   }
                 />
+                <IAISwitch
+                  label={t('settings.antialiasProgressImages')}
+                  isChecked={shouldAntialiasProgressImage}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    dispatch(
+                      shouldAntialiasProgressImageChanged(e.target.checked)
+                    )
+                  }
+                />
               </Flex>
 
               <Flex sx={modalSectionStyles}>

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

@@ -90,6 +90,7 @@ export interface SystemState {
    */
   infillMethods: InfillMethod[];
   isPersisted: boolean;
+  shouldAntialiasProgressImage: boolean;
 }
 
 export const initialSystemState: SystemState = {
@@ -111,6 +112,7 @@ export const initialSystemState: SystemState = {
   foundModels: null,
   openModel: null,
   progressImage: null,
+  shouldAntialiasProgressImage: false,
   sessionId: null,
   cancelType: 'immediate',
   isCancelScheduled: false,
@@ -261,6 +263,12 @@ export const systemSlice = createSlice({
     shouldLogToConsoleChanged: (state, action: PayloadAction<boolean>) => {
       state.shouldLogToConsole = action.payload;
     },
+    shouldAntialiasProgressImageChanged: (
+      state,
+      action: PayloadAction<boolean>
+    ) => {
+      state.shouldAntialiasProgressImage = action.payload;
+    },
     isPersistedChanged: (state, action: PayloadAction<boolean>) => {
       state.isPersisted = action.payload;
     },
@@ -471,6 +479,7 @@ export const {
   consoleLogLevelChanged,
   shouldLogToConsoleChanged,
   isPersistedChanged,
+  shouldAntialiasProgressImageChanged,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;