diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index d52f3c38c7..f98d864c55 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -531,7 +531,8 @@ "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.", "resetComplete": "Web UI has been reset. Refresh the page to reload.", - "consoleLogLevel": "Console Log Level" + "consoleLogLevel": "Log Level", + "shouldLogToConsole": "Console Logging" }, "toast": { "serverError": "Server Error", diff --git a/invokeai/frontend/web/src/app/logging/useLogger.ts b/invokeai/frontend/web/src/app/logging/useLogger.ts index ef1b27ad6b..c69b13dc72 100644 --- a/invokeai/frontend/web/src/app/logging/useLogger.ts +++ b/invokeai/frontend/web/src/app/logging/useLogger.ts @@ -32,7 +32,6 @@ export const VALID_LOG_LEVELS = [ 'warn', 'error', 'fatal', - 'none', ] as const; export type InvokeLogLevel = (typeof VALID_LOG_LEVELS)[number]; @@ -40,11 +39,12 @@ export type InvokeLogLevel = (typeof VALID_LOG_LEVELS)[number]; const selector = createSelector( systemSelector, (system) => { - const { app_version, consoleLogLevel } = system; + const { app_version, consoleLogLevel, shouldLogToConsole } = system; return { version: app_version, consoleLogLevel, + shouldLogToConsole, }; }, { @@ -55,14 +55,12 @@ const selector = createSelector( ); export const useLogger = () => { - const { version, consoleLogLevel } = useAppSelector(selector); + const { version, consoleLogLevel, shouldLogToConsole } = + useAppSelector(selector); // The provided Roarr browser log writer uses localStorage to config logging to console useEffect(() => { - if (consoleLogLevel === 'none') { - // Disable console log output - localStorage.setItem('ROARR_LOG', 'false'); - } else { + if (shouldLogToConsole) { // Enable console log output localStorage.setItem('ROARR_LOG', 'true'); @@ -71,9 +69,12 @@ export const useLogger = () => { 'ROARR_FILTER', `context.logLevel:>=${LOG_LEVEL_MAP[consoleLogLevel]}` ); + } else { + // Disable console log output + localStorage.setItem('ROARR_LOG', 'false'); } ROARR.write = createLogWriter(); - }, [consoleLogLevel]); + }, [consoleLogLevel, shouldLogToConsole]); // Update the module-scoped logger context as needed useEffect(() => { 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 da4dbe2572..be6e0c27a3 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx @@ -30,6 +30,7 @@ import { setShouldConfirmOnDelete, setShouldDisplayGuides, setShouldDisplayInProgressType, + shouldLogToConsoleChanged, SystemState, } from 'features/system/store/systemSlice'; import { uiSelector } from 'features/ui/store/uiSelectors'; @@ -44,6 +45,7 @@ import { ChangeEvent, cloneElement, ReactElement, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { InvokeLogLevel, VALID_LOG_LEVELS } from 'app/logging/useLogger'; import { LogLevelName } from 'roarr'; +import { F } from 'ts-toolbelt'; const selector = createSelector( [systemSelector, uiSelector], @@ -56,6 +58,7 @@ const selector = createSelector( saveIntermediatesInterval, enableImageDebugging, consoleLogLevel, + shouldLogToConsole, } = system; const { shouldUseCanvasBetaLayout, shouldUseSliders } = ui; @@ -70,6 +73,7 @@ const selector = createSelector( shouldUseCanvasBetaLayout, shouldUseSliders, consoleLogLevel, + shouldLogToConsole, }; }, { @@ -122,6 +126,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => { shouldUseCanvasBetaLayout, shouldUseSliders, consoleLogLevel, + shouldLogToConsole, } = useAppSelector(selector); /** @@ -148,6 +153,13 @@ const SettingsModal = ({ children }: SettingsModalProps) => { [dispatch] ); + const handleLogToConsoleChanged = useCallback( + (e: ChangeEvent) => { + dispatch(shouldLogToConsoleChanged(e.target.checked)); + }, + [dispatch] + ); + return ( <> {cloneElement(children, { @@ -224,7 +236,13 @@ const SettingsModal = ({ children }: SettingsModalProps) => { Developer + ) => { state.consoleLogLevel = action.payload; }, + shouldLogToConsoleChanged: (state, action: PayloadAction) => { + state.shouldLogToConsole = action.payload; + }, }, extraReducers(builder) { /** @@ -509,6 +514,7 @@ export const { cancelTypeChanged, subscribedNodeIdsSet, consoleLogLevelChanged, + shouldLogToConsoleChanged, } = systemSlice.actions; export default systemSlice.reducer;