mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat(ui): antialias progress images
This commit is contained in:
parent
b42b630583
commit
f0a3f07b45
invokeai/frontend/web
public/locales
src/features
gallery/components
system
@ -532,6 +532,7 @@
|
|||||||
"enableImageDebugging": "Enable Image Debugging",
|
"enableImageDebugging": "Enable Image Debugging",
|
||||||
"useSlidersForAll": "Use Sliders For All Options",
|
"useSlidersForAll": "Use Sliders For All Options",
|
||||||
"showProgressInViewer": "Show Progress Images in Viewer",
|
"showProgressInViewer": "Show Progress Images in Viewer",
|
||||||
|
"antialiasProgressImages": "Antialias Progress Images",
|
||||||
"resetWebUI": "Reset Web UI",
|
"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.",
|
"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.",
|
"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.",
|
||||||
|
@ -22,13 +22,14 @@ export const imagesSelector = createSelector(
|
|||||||
shouldShowProgressInViewer,
|
shouldShowProgressInViewer,
|
||||||
} = ui;
|
} = ui;
|
||||||
const { selectedImage } = gallery;
|
const { selectedImage } = gallery;
|
||||||
const { progressImage } = system;
|
const { progressImage, shouldAntialiasProgressImage } = system;
|
||||||
return {
|
return {
|
||||||
shouldShowImageDetails,
|
shouldShowImageDetails,
|
||||||
shouldHidePreview,
|
shouldHidePreview,
|
||||||
image: selectedImage,
|
image: selectedImage,
|
||||||
progressImage,
|
progressImage,
|
||||||
shouldShowProgressInViewer,
|
shouldShowProgressInViewer,
|
||||||
|
shouldAntialiasProgressImage,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -45,6 +46,7 @@ const CurrentImagePreview = () => {
|
|||||||
shouldHidePreview,
|
shouldHidePreview,
|
||||||
progressImage,
|
progressImage,
|
||||||
shouldShowProgressInViewer,
|
shouldShowProgressInViewer,
|
||||||
|
shouldAntialiasProgressImage,
|
||||||
} = useAppSelector(imagesSelector);
|
} = useAppSelector(imagesSelector);
|
||||||
const { getUrl } = useGetUrl();
|
const { getUrl } = useGetUrl();
|
||||||
|
|
||||||
@ -84,6 +86,7 @@ const CurrentImagePreview = () => {
|
|||||||
height: 'auto',
|
height: 'auto',
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
borderRadius: 'base',
|
borderRadius: 'base',
|
||||||
|
imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
@ -10,20 +10,25 @@ const selector = createSelector(
|
|||||||
[systemSelector, gallerySelector],
|
[systemSelector, gallerySelector],
|
||||||
(system, gallery) => {
|
(system, gallery) => {
|
||||||
const { shouldUseSingleGalleryColumn, galleryImageObjectFit } = gallery;
|
const { shouldUseSingleGalleryColumn, galleryImageObjectFit } = gallery;
|
||||||
const { progressImage } = system;
|
const { progressImage, shouldAntialiasProgressImage } = system;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
progressImage,
|
progressImage,
|
||||||
shouldUseSingleGalleryColumn,
|
shouldUseSingleGalleryColumn,
|
||||||
galleryImageObjectFit,
|
galleryImageObjectFit,
|
||||||
|
shouldAntialiasProgressImage,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
defaultSelectorOptions
|
defaultSelectorOptions
|
||||||
);
|
);
|
||||||
|
|
||||||
const GalleryProgressImage = () => {
|
const GalleryProgressImage = () => {
|
||||||
const { progressImage, shouldUseSingleGalleryColumn, galleryImageObjectFit } =
|
const {
|
||||||
useAppSelector(selector);
|
progressImage,
|
||||||
|
shouldUseSingleGalleryColumn,
|
||||||
|
galleryImageObjectFit,
|
||||||
|
shouldAntialiasProgressImage,
|
||||||
|
} = useAppSelector(selector);
|
||||||
|
|
||||||
if (!progressImage) {
|
if (!progressImage) {
|
||||||
return null;
|
return null;
|
||||||
@ -53,6 +58,7 @@ const GalleryProgressImage = () => {
|
|||||||
maxWidth: '100%',
|
maxWidth: '100%',
|
||||||
maxHeight: '100%',
|
maxHeight: '100%',
|
||||||
borderRadius: 'base',
|
borderRadius: 'base',
|
||||||
|
imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
@ -23,6 +23,7 @@ import {
|
|||||||
setEnableImageDebugging,
|
setEnableImageDebugging,
|
||||||
setShouldConfirmOnDelete,
|
setShouldConfirmOnDelete,
|
||||||
setShouldDisplayGuides,
|
setShouldDisplayGuides,
|
||||||
|
shouldAntialiasProgressImageChanged,
|
||||||
shouldLogToConsoleChanged,
|
shouldLogToConsoleChanged,
|
||||||
SystemState,
|
SystemState,
|
||||||
} from 'features/system/store/systemSlice';
|
} from 'features/system/store/systemSlice';
|
||||||
@ -49,6 +50,7 @@ const selector = createSelector(
|
|||||||
enableImageDebugging,
|
enableImageDebugging,
|
||||||
consoleLogLevel,
|
consoleLogLevel,
|
||||||
shouldLogToConsole,
|
shouldLogToConsole,
|
||||||
|
shouldAntialiasProgressImage,
|
||||||
} = system;
|
} = system;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -66,6 +68,7 @@ const selector = createSelector(
|
|||||||
shouldShowProgressInViewer,
|
shouldShowProgressInViewer,
|
||||||
consoleLogLevel,
|
consoleLogLevel,
|
||||||
shouldLogToConsole,
|
shouldLogToConsole,
|
||||||
|
shouldAntialiasProgressImage,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -117,6 +120,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
|
|||||||
shouldShowProgressInViewer,
|
shouldShowProgressInViewer,
|
||||||
consoleLogLevel,
|
consoleLogLevel,
|
||||||
shouldLogToConsole,
|
shouldLogToConsole,
|
||||||
|
shouldAntialiasProgressImage,
|
||||||
} = useAppSelector(selector);
|
} = useAppSelector(selector);
|
||||||
|
|
||||||
const handleClickResetWebUI = useCallback(() => {
|
const handleClickResetWebUI = useCallback(() => {
|
||||||
@ -203,6 +207,15 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
|
|||||||
dispatch(setShouldShowProgressInViewer(e.target.checked))
|
dispatch(setShouldShowProgressInViewer(e.target.checked))
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<IAISwitch
|
||||||
|
label={t('settings.antialiasProgressImages')}
|
||||||
|
isChecked={shouldAntialiasProgressImage}
|
||||||
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||||
|
dispatch(
|
||||||
|
shouldAntialiasProgressImageChanged(e.target.checked)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|
||||||
<Flex sx={modalSectionStyles}>
|
<Flex sx={modalSectionStyles}>
|
||||||
|
@ -90,6 +90,7 @@ export interface SystemState {
|
|||||||
*/
|
*/
|
||||||
infillMethods: InfillMethod[];
|
infillMethods: InfillMethod[];
|
||||||
isPersisted: boolean;
|
isPersisted: boolean;
|
||||||
|
shouldAntialiasProgressImage: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const initialSystemState: SystemState = {
|
export const initialSystemState: SystemState = {
|
||||||
@ -111,6 +112,7 @@ export const initialSystemState: SystemState = {
|
|||||||
foundModels: null,
|
foundModels: null,
|
||||||
openModel: null,
|
openModel: null,
|
||||||
progressImage: null,
|
progressImage: null,
|
||||||
|
shouldAntialiasProgressImage: false,
|
||||||
sessionId: null,
|
sessionId: null,
|
||||||
cancelType: 'immediate',
|
cancelType: 'immediate',
|
||||||
isCancelScheduled: false,
|
isCancelScheduled: false,
|
||||||
@ -261,6 +263,12 @@ export const systemSlice = createSlice({
|
|||||||
shouldLogToConsoleChanged: (state, action: PayloadAction<boolean>) => {
|
shouldLogToConsoleChanged: (state, action: PayloadAction<boolean>) => {
|
||||||
state.shouldLogToConsole = action.payload;
|
state.shouldLogToConsole = action.payload;
|
||||||
},
|
},
|
||||||
|
shouldAntialiasProgressImageChanged: (
|
||||||
|
state,
|
||||||
|
action: PayloadAction<boolean>
|
||||||
|
) => {
|
||||||
|
state.shouldAntialiasProgressImage = action.payload;
|
||||||
|
},
|
||||||
isPersistedChanged: (state, action: PayloadAction<boolean>) => {
|
isPersistedChanged: (state, action: PayloadAction<boolean>) => {
|
||||||
state.isPersisted = action.payload;
|
state.isPersisted = action.payload;
|
||||||
},
|
},
|
||||||
@ -471,6 +479,7 @@ export const {
|
|||||||
consoleLogLevelChanged,
|
consoleLogLevelChanged,
|
||||||
shouldLogToConsoleChanged,
|
shouldLogToConsoleChanged,
|
||||||
isPersistedChanged,
|
isPersistedChanged,
|
||||||
|
shouldAntialiasProgressImageChanged,
|
||||||
} = systemSlice.actions;
|
} = systemSlice.actions;
|
||||||
|
|
||||||
export default systemSlice.reducer;
|
export default systemSlice.reducer;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user