Settings Toggle

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

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>
  );
 });

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`} />
  );
 });
 

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';

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>
  );
 });
 

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 */