Merge pull request #178 from andrewssdd/add_max_vram_usage

Add max vram usage in tooltip

web/monitorUI.d.ts

@@ -10,6 +10,9 @@ export declare class MonitorUI extends ProgressBarUIBase {
     private currentRate;
     lastMonitor: number;
     styleSheet: HTMLStyleElement;
+    maxVRAMUsed: {
+        [key: number]: number;
+    };
     constructor(rootElement: HTMLElement, monitorCPUElement: TMonitorSettings, monitorRAMElement: TMonitorSettings, monitorHDDElement: TMonitorSettings, monitorGPUSettings: TMonitorSettings[], monitorVRAMSettings: TMonitorSettings[], monitorTemperatureSettings: TMonitorSettings[], currentRate: number);
     createDOM: () => void;
     createDOMGPUMonitor: (monitorSettings?: TMonitorSettings) => void;
@@ -21,4 +24,5 @@ export declare class MonitorUI extends ProgressBarUIBase {
     createMonitor: (monitorSettings?: TMonitorSettings) => HTMLDivElement;
     updateMonitorSize: (width: number, height: number) => void;
     showMonitor: (monitorSettings: TMonitorSettings, value: boolean) => void;
+    resetMaxVRAM: () => void;
 }

web/monitorUI.js

@@ -63,6 +63,12 @@ export class MonitorUI extends ProgressBarUIBase {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "maxVRAMUsed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
         Object.defineProperty(this, "createDOM", {
             enumerable: true,
             configurable: true,
@@ -175,7 +181,15 @@ export class MonitorUI extends ProgressBarUIBase {
                 let title = `${Math.floor(percent)}${monitorSettings.symbol}`;
                 let postfix = '';
                 if (used !== undefined && total !== undefined) {
-                    postfix = ` - ${formatBytes(used)} / ${formatBytes(total)} GB`;
+                    const gpuIndex = parseInt(monitorSettings.monitorTitle?.split(':')[0] || '0');
+                    if (!this.maxVRAMUsed[gpuIndex] || this.maxVRAMUsed[gpuIndex] > total) {
+                        this.maxVRAMUsed[gpuIndex] = 0;
+                    }
+                    if (used > this.maxVRAMUsed[gpuIndex]) {
+                        this.maxVRAMUsed[gpuIndex] = used;
+                    }
+                    postfix = ` - ${formatBytes(used)} / ${formatBytes(total)}`;
+                    postfix += ` Max: ${formatBytes(this.maxVRAMUsed[gpuIndex])}`;
                 }
                 title = `${prefix}${title}${postfix}`;
                 if (monitorSettings.htmlMonitorRef) {
@@ -275,6 +289,14 @@ export class MonitorUI extends ProgressBarUIBase {
                 }
             }
         });
+        Object.defineProperty(this, "resetMaxVRAM", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.maxVRAMUsed = {};
+            }
+        });
         this.createDOM();
         this.styleSheet = createStyleSheet('crystools-monitors-size');
     }

web/monitorUI.ts

@@ -4,6 +4,7 @@ import { createStyleSheet, formatBytes } from './utils.js';
 export class MonitorUI extends ProgressBarUIBase {
   lastMonitor = 1; // just for order on monitors section
   styleSheet: HTMLStyleElement;
+  maxVRAMUsed: { [key: number]: number } = {}; // Add this to track max VRAM per GPU
 
   constructor(
     public override rootElement: HTMLElement,
@@ -130,15 +131,30 @@ export class MonitorUI extends ProgressBarUIBase {
       return;
     }
 
-    // console.log('updateMonitor', monitorSettings.id, percent);
-
     const prefix = monitorSettings.monitorTitle ? monitorSettings.monitorTitle + ' - ' : '';
     let title = `${Math.floor(percent)}${monitorSettings.symbol}`;
     let postfix = '';
 
+    // Add max VRAM tracking for VRAM monitors
     if (used !== undefined && total !== undefined) {
-      postfix = ` - ${formatBytes(used)} / ${formatBytes(total)} GB`;
+      // Extract GPU index from monitorTitle (assuming format "X: GPU Name")
+      const gpuIndex = parseInt(monitorSettings.monitorTitle?.split(':')[0] || '0');
+      
+      // Initialize max VRAM if not set or  glitch
+      if (!this.maxVRAMUsed[gpuIndex] || this.maxVRAMUsed[gpuIndex] > total) {
+        this.maxVRAMUsed[gpuIndex] = 0;
+      }
+
+      // Update max VRAM if current usage is higher
+      if ( used > this.maxVRAMUsed[gpuIndex]) {
+        this.maxVRAMUsed[gpuIndex] = used;
+      }
+
+      postfix = ` - ${formatBytes(used)} / ${formatBytes(total)}`;
+      // Add max VRAM to tooltip
+      postfix += ` Max: ${formatBytes(this.maxVRAMUsed[gpuIndex])}`;
     }
+    
     title = `${prefix}${title}${postfix}`;
 
     if (monitorSettings.htmlMonitorRef) {
@@ -226,4 +242,8 @@ export class MonitorUI extends ProgressBarUIBase {
       monitorSettings.htmlMonitorRef.style.display = value ? 'flex' : 'none';
     }
   };
+
+  resetMaxVRAM = (): void => {
+    this.maxVRAMUsed = {};
+  };
 }