From 897ed576be587b9eea15edfde0155f5f58cb695f Mon Sep 17 00:00:00 2001
From: mickr777 <115216705+mickr777@users.noreply.github.com>
Date: Fri, 4 Oct 2024 14:07:29 +1000
Subject: [PATCH] Settings Toggle

---
 invokeai/frontend/web/public/locales/en.json  |  1 +
 .../components/HUD/CanvasHUD.tsx              | 19 ++++++++-
 .../HUD/CanvasHUDItemScaledBbox.tsx           | 39 +++--------------
 .../components/HUD/CanvasHUDItemStats.tsx     | 37 ++++++++++++++++
 .../Settings/CanvasSettingsShowHUDSwitch.tsx  | 42 +++++++++++++++----
 .../store/canvasSettingsSlice.ts              |  6 +++
 6 files changed, 101 insertions(+), 43 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemStats.tsx

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 7ad630fc28a..bca80b554bf 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1602,6 +1602,7 @@
         "deletePrompt": "Delete Prompt",
         "deleteReferenceImage": "Delete Reference Image",
         "showHUD": "Show HUD",
+        "showSystemStats": "Show System Stats",
         "rectangle": "Rectangle",
         "maskFill": "Mask Fill",
         "addPositivePrompt": "Add $t(controlLayers.prompt)",
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUD.tsx b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUD.tsx
index 450613d3a5f..0fa4518c92f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUD.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUD.tsx
@@ -1,9 +1,19 @@
-import { Grid } from '@invoke-ai/ui-library';
+import { Divider, Grid } from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasHUDItemBbox } from 'features/controlLayers/components/HUD/CanvasHUDItemBbox';
 import { CanvasHUDItemScaledBbox } from 'features/controlLayers/components/HUD/CanvasHUDItemScaledBbox';
+import { CanvasHUDItemStats } from 'features/controlLayers/components/HUD/CanvasHUDItemStats';
+import { selectCanvasSettingsSlice } from 'features/controlLayers/store/canvasSettingsSlice';
 import { memo } from 'react';
 
+const selectCanvasSettings = createSelector(selectCanvasSettingsSlice, (canvasSettings) => ({
+  showSystemStats: canvasSettings.showSystemStats,
+}));
+
 export const CanvasHUD = memo(() => {
+  const { showSystemStats } = useAppSelector(selectCanvasSettings);
+
   return (
     <Grid
       bg="base.900"
@@ -17,6 +27,13 @@ export const CanvasHUD = memo(() => {
     >
       <CanvasHUDItemBbox />
       <CanvasHUDItemScaledBbox />
+
+      {showSystemStats && (
+        <>
+          <Divider gridColumn="span 2" />
+          <CanvasHUDItemStats />
+        </>
+      )}
     </Grid>
   );
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemScaledBbox.tsx b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemScaledBbox.tsx
index 6390e94f94a..c576636949a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemScaledBbox.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemScaledBbox.tsx
@@ -1,49 +1,20 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import { CanvasHUDItem } from 'features/controlLayers/components/HUD/CanvasHUDItem';
 import { selectScaledSize, selectScaleMethod } from 'features/controlLayers/store/selectors';
-import { Fragment, memo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useGetSystemStatsQuery } from 'services/api/endpoints/appInfo';
 
 export const CanvasHUDItemScaledBbox = memo(() => {
   const { t } = useTranslation();
   const scaleMethod = useAppSelector(selectScaleMethod);
   const scaledSize = useAppSelector(selectScaledSize);
 
-  // Fetch system stats with polling every 1 second
-  const { data: systemStats } = useGetSystemStatsQuery(undefined, {
-    pollingInterval: 1000,
-  });
+  if (scaleMethod === 'none') {
+    return null;
+  }
 
   return (
-    <>
-      {/* Only display scaled bounding box size if the scale method is not 'none' */}
-      {scaleMethod !== 'none' && (
-        <CanvasHUDItem
-          label={t('controlLayers.HUD.scaledBbox')}
-          value={`${scaledSize.width}×${scaledSize.height} px`}
-        />
-      )}
-
-      {/* Display system stats (CPU, RAM, GPU) with temperatures */}
-      {systemStats && (
-        <>
-          <CanvasHUDItem label={t('controlLayers.HUD.cpuUsage')} value={`${systemStats.cpu_usage.toFixed(0)}%`} />
-          <CanvasHUDItem label={t('controlLayers.HUD.ramUsage')} value={`${systemStats.ram_usage.toFixed(0)} MB`} />
-
-          {systemStats.gpu_usage?.map((gpu) => (
-            <Fragment key={gpu.id}>
-              <CanvasHUDItem label={t('controlLayers.HUD.gpuUsage')} value={`${gpu.load.toFixed(0)}%`} />
-              <CanvasHUDItem label={t('controlLayers.HUD.gpuVram')} value={`${gpu.memory} MB`} />
-              <CanvasHUDItem
-                label={t('controlLayers.HUD.gpuTemp')}
-                value={`${gpu.temperature?.toFixed(1) || 'N/A'}°C`}
-              />
-            </Fragment>
-          ))}
-        </>
-      )}
-    </>
+    <CanvasHUDItem label={t('controlLayers.HUD.scaledBbox')} value={`${scaledSize.width}×${scaledSize.height} px`} />
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemStats.tsx b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemStats.tsx
new file mode 100644
index 00000000000..34f776fff26
--- /dev/null
+++ b/invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasHUDItemStats.tsx
@@ -0,0 +1,37 @@
+import { CanvasHUDItem } from 'features/controlLayers/components/HUD/CanvasHUDItem';
+import { Fragment, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useGetSystemStatsQuery } from 'services/api/endpoints/appInfo';
+
+export const CanvasHUDItemStats = memo(() => {
+  const { t } = useTranslation();
+
+  // Fetch system stats with polling every 1 second
+  const { data: systemStats } = useGetSystemStatsQuery(undefined, {
+    pollingInterval: 1000,
+  });
+
+  if (!systemStats) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Display system stats (CPU, RAM, GPU) */}
+      <CanvasHUDItem label={t('controlLayers.HUD.cpuUsage')} value={`${systemStats.cpu_usage.toFixed(0)}%`} />
+      <CanvasHUDItem label={t('controlLayers.HUD.ramUsage')} value={`${systemStats.ram_usage.toFixed(0)} MB`} />
+
+      {systemStats.gpu_usage?.map((gpu) => (
+        <Fragment key={gpu.id}>
+          <CanvasHUDItem label={t('controlLayers.HUD.gpuUsage')} value={`${gpu.load.toFixed(0)}%`} />
+          <CanvasHUDItem label={t('controlLayers.HUD.gpuVram')} value={`${gpu.memory} MB`} />
+          {gpu.temperature !== undefined && (
+            <CanvasHUDItem label={t('controlLayers.HUD.gpuTemp')} value={`${gpu.temperature} °C`} />
+          )}
+        </Fragment>
+      ))}
+    </>
+  );
+});
+
+CanvasHUDItemStats.displayName = 'CanvasHUDItemStats';
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx
index e570e0019e5..bd8c4e306d4 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch.tsx
@@ -1,27 +1,53 @@
 import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { selectCanvasSettingsSlice, settingsShowHUDToggled } from 'features/controlLayers/store/canvasSettingsSlice';
+import {
+  selectCanvasSettingsSlice,
+  settingsShowHUDToggled,
+  settingsShowSystemStatsToggled,
+} from 'features/controlLayers/store/canvasSettingsSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const selectShowHUD = createSelector(selectCanvasSettingsSlice, (canvasSettings) => canvasSettings.showHUD);
+const selectShowSystemStats = createSelector(
+  selectCanvasSettingsSlice,
+  (canvasSettings) => canvasSettings.showSystemStats
+);
 
 export const CanvasSettingsShowHUDSwitch = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const showHUD = useAppSelector(selectShowHUD);
-  const onChange = useCallback(() => {
+  const showSystemStats = useAppSelector(selectShowSystemStats);
+
+  const onToggleHUD = useCallback(() => {
     dispatch(settingsShowHUDToggled());
   }, [dispatch]);
 
+  const onToggleSystemStats = useCallback(() => {
+    dispatch(settingsShowSystemStatsToggled());
+  }, [dispatch]);
+
   return (
-    <FormControl>
-      <FormLabel m={0} flexGrow={1}>
-        {t('controlLayers.showHUD')}
-      </FormLabel>
-      <Switch size="sm" isChecked={showHUD} onChange={onChange} />
-    </FormControl>
+    <div>
+      <FormControl>
+        <FormLabel m={0} flexGrow={1}>
+          {t('controlLayers.showHUD')}
+        </FormLabel>
+        <Switch size="sm" isChecked={showHUD} onChange={onToggleHUD} />
+      </FormControl>
+
+      {/* Show the System Stats toggle only if Show HUD is enabled */}
+      {showHUD && (
+        <FormControl mt={2}>
+          <FormLabel m={0} flexGrow={1}>
+            {t('controlLayers.showSystemStats')}
+          </FormLabel>
+          <Switch size="sm" isChecked={showSystemStats} onChange={onToggleSystemStats} />
+        </FormControl>
+      )}
+    </div>
   );
 });
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts
index fc80f0f8664..07b232170fd 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts
@@ -83,10 +83,12 @@ type CanvasSettingsState = {
    * Whether to use pressure sensitivity for the brush and eraser tool when a pen device is used.
    */
   pressureSensitivity: boolean;
+  showSystemStats: boolean;
 };
 
 const initialState: CanvasSettingsState = {
   showHUD: true,
+  showSystemStats: false,
   clipToBbox: false,
   dynamicGrid: false,
   brushWidth: 50,
@@ -119,6 +121,9 @@ export const canvasSettingsSlice = createSlice({
     settingsShowHUDToggled: (state) => {
       state.showHUD = !state.showHUD;
     },
+    settingsShowSystemStatsToggled: (state) => {
+      state.showSystemStats = !state.showSystemStats;
+    },
     settingsBrushWidthChanged: (state, action: PayloadAction<number>) => {
       state.brushWidth = Math.round(action.payload);
     },
@@ -194,6 +199,7 @@ export const {
   settingsIsolatedFilteringPreviewToggled,
   settingsIsolatedTransformingPreviewToggled,
   settingsPressureSensitivityToggled,
+  settingsShowSystemStatsToggled,
 } = canvasSettingsSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */