From f0a3f07b4569fd95fec20809c2b24fac5efe9456 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 10 May 2023 14:38:05 +1000 Subject: [PATCH] feat(ui): antialias progress images --- invokeai/frontend/web/public/locales/en.json | 1 + .../gallery/components/CurrentImagePreview.tsx | 5 ++++- .../gallery/components/GalleryProgressImage.tsx | 12 +++++++++--- .../components/SettingsModal/SettingsModal.tsx | 13 +++++++++++++ .../web/src/features/system/store/systemSlice.ts | 9 +++++++++ 5 files changed, 36 insertions(+), 4 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 71461d409a..dccb77c267 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/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.", diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx index c5bcee540a..a0fbd7c5d1 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx +++ b/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', }} /> ) : ( diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryProgressImage.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryProgressImage.tsx index c8797b2d0c..b812849c44 100644 --- a/invokeai/frontend/web/src/features/gallery/components/GalleryProgressImage.tsx +++ b/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 } = - useAppSelector(selector); + const { + 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', }} /> diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx index 0557228020..58e6684b04 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx +++ b/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)) } /> + ) => + dispatch( + shouldAntialiasProgressImageChanged(e.target.checked) + ) + } + /> diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts index 8e0ab1f3aa..1aeb2a1939 100644 --- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts +++ b/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) => { state.shouldLogToConsole = action.payload; }, + shouldAntialiasProgressImageChanged: ( + state, + action: PayloadAction + ) => { + state.shouldAntialiasProgressImage = action.payload; + }, isPersistedChanged: (state, action: PayloadAction) => { state.isPersisted = action.payload; }, @@ -471,6 +479,7 @@ export const { consoleLogLevelChanged, shouldLogToConsoleChanged, isPersistedChanged, + shouldAntialiasProgressImageChanged, } = systemSlice.actions; export default systemSlice.reducer;