From 2014a320a11a52d890fe2e109bd6cfa062fff5d8 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Fri, 8 Nov 2024 14:40:31 -0500 Subject: [PATCH] (ui): make detailed progress view a setting that can be hidden --- invokeai/frontend/web/public/locales/en.json | 1 + .../CanvasAlertsInvocationProgress.tsx | 5 ++++- .../components/SettingsModal/SettingsMenu.tsx | 2 +- .../SettingsModal/SettingsModal.tsx | 21 +++++++++++++++++++ .../src/features/system/store/systemSlice.ts | 8 +++++++ .../web/src/features/system/store/types.ts | 1 + 6 files changed, 36 insertions(+), 2 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 16d0e64c5fe..86ff9d5eecc 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/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", diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx index 6a934057663..387f5c2ef31 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx @@ -1,5 +1,7 @@ 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'; @@ -7,8 +9,9 @@ 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; } diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx index 343f937b94e..44effa4144e 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx @@ -77,7 +77,7 @@ const SettingsMenu = () => { {t('common.hotkeysLabel')} - + }> {t('common.settingsLabel')} 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 00e28630065..df90176adf5 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx +++ b/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,6 +58,7 @@ type ConfigOptions = { shouldShowResetWebUiText?: boolean; shouldShowClearIntermediates?: boolean; shouldShowLocalizationToggle?: boolean; + shouldShowInvocationProgressDetailToggle?: boolean; }; const defaultConfig: ConfigOptions = { @@ -63,6 +66,7 @@ const defaultConfig: ConfigOptions = { 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) => { + dispatch(setShouldShowInvocationProgressDetail(e.target.checked)); + }, + [dispatch] + ); + return ( <> {cloneElement(children, { @@ -221,6 +233,15 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps) onChange={handleChangeShouldAntialiasProgressImage} /> + {Boolean(config?.shouldShowInvocationProgressDetailToggle) && ( + + {t('settings.showDetailedInvocationProgress')} + + + )} {t('parameters.useCpuNoise')} diff --git a/invokeai/frontend/web/src/features/system/store/systemSlice.ts b/invokeai/frontend/web/src/features/system/store/systemSlice.ts index e45308bcdaf..dbf23ee88b9 100644 --- a/invokeai/frontend/web/src/features/system/store/systemSlice.ts +++ b/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) { + 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 +); diff --git a/invokeai/frontend/web/src/features/system/store/types.ts b/invokeai/frontend/web/src/features/system/store/types.ts index 1bbe7095367..10207eb3211 100644 --- a/invokeai/frontend/web/src/features/system/store/types.ts +++ b/invokeai/frontend/web/src/features/system/store/types.ts @@ -41,4 +41,5 @@ export interface SystemState { logIsEnabled: boolean; logLevel: LogLevel; logNamespaces: LogNamespace[]; + shouldShowInvocationProgressDetail: boolean; }