feat(ui): add switch for logging

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",

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(() => {

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<HTMLInputElement>) => {
+      dispatch(shouldLogToConsoleChanged(e.target.checked));
+    },
+    [dispatch]
+  );
+
   return (
     <>
       {cloneElement(children, {
@@ -224,7 +236,13 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
                 <Heading size="sm" style={{ fontWeight: 'bold' }}>
                   Developer
                 </Heading>
+                <IAISwitch
+                  label={t('settings.shouldLogToConsole')}
+                  isChecked={shouldLogToConsole}
+                  onChange={handleLogToConsoleChanged}
+                />
                 <IAISelect
+                  isDisabled={!shouldLogToConsole}
                   label={t('settings.consoleLogLevel')}
                   onChange={handleLogLevelChanged}
                   value={consoleLogLevel}

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

@@ -101,6 +101,7 @@ export interface SystemState
    * The console output logging level
    */
   consoleLogLevel: InvokeLogLevel;
+  shouldLogToConsole: boolean;
 }
 
 const initialSystemState: SystemState = {
@@ -149,7 +150,8 @@ const initialSystemState: SystemState = {
   subscribedNodeIds: [],
   wereModelsReceived: false,
   wasSchemaParsed: false,
-  consoleLogLevel: 'info',
+  consoleLogLevel: 'error',
+  shouldLogToConsole: true,
 };
 
 export const systemSlice = createSlice({
@@ -331,6 +333,9 @@ export const systemSlice = createSlice({
     consoleLogLevelChanged: (state, action: PayloadAction<LogLevelName>) => {
       state.consoleLogLevel = action.payload;
     },
+    shouldLogToConsoleChanged: (state, action: PayloadAction<boolean>) => {
+      state.shouldLogToConsole = action.payload;
+    },
   },
   extraReducers(builder) {
     /**
@@ -509,6 +514,7 @@ export const {
   cancelTypeChanged,
   subscribedNodeIdsSet,
   consoleLogLevelChanged,
+  shouldLogToConsoleChanged,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;