multigpu support :)

general/gpu.py

@@ -93,13 +93,14 @@ class CGPUInfo:
           deviceHandle = pynvml.nvmlDeviceGetHandleByIndex(deviceIndex)
 
           # GPU Utilization
-          # if self.switchGPU and self.gpusUtilization[deviceIndex]:
-          if self.switchGPU:
+          if self.switchGPU and self.gpusUtilization[deviceIndex]:
+            print('switchGPU', deviceIndex)
             utilization = pynvml.nvmlDeviceGetUtilizationRates(deviceHandle)
             gpuUtilization = utilization.gpu
 
           # VRAM
-          if self.switchVRAM:
+          if self.switchVRAM and self.gpusVRAM[deviceIndex]:
+            print('switchVRAM', deviceIndex)
             # Torch or pynvml?, pynvml is more accurate with the system, torch is more accurate with comfyUI
             memory = pynvml.nvmlDeviceGetMemoryInfo(deviceHandle)
             vramUsed = memory.used

server/monitor.py

@@ -28,13 +28,6 @@ async def newSettings(request):
 
             cmonitor.hardwareInfo.switchCPU = switchCPU
 
-        if 'switchGPU' in settings is not None:
-            switchGPU = settings['switchGPU']
-            if type(switchGPU) is not bool:
-                raise Exception('switchGPU must be an boolean.')
-
-            cmonitor.hardwareInfo.switchGPU = switchGPU
-
         if 'switchHDD' in settings is not None:
             switchHDD = settings['switchHDD']
             if type(switchHDD) is not bool:
@@ -49,13 +42,6 @@ async def newSettings(request):
 
             cmonitor.hardwareInfo.switchRAM = switchRAM
 
-        if 'switchVRAM' in settings is not None:
-            switchVRAM = settings['switchVRAM']
-            if type(switchVRAM) is not bool:
-                raise Exception('switchVRAM must be an boolean.')
-
-            cmonitor.hardwareInfo.switchVRAM = switchVRAM
-
         if 'whichHDD' in settings is not None:
             whichHDD = settings['whichHDD']
             if type(whichHDD) is not str:
@@ -122,6 +108,12 @@ async def getGPUs(request):
 
       cmonitor.hardwareInfo.GPUInfo.gpusUtilization[int(index)] = settings['utilization']
 
+    if 'vram' in settings is not None:
+      if type(settings['vram']) is not bool:
+        raise Exception('vram must be an boolean.')
+
+      cmonitor.hardwareInfo.GPUInfo.gpusVRAM[int(index)] = settings['vram']
+
     return web.Response(status=200)
   except Exception as e:
     logger.error(e)

web/monitor.js

@@ -51,6 +51,18 @@ class CrystoolsMonitor {
             writable: true,
             value: '/'
         });
+        Object.defineProperty(this, "monitorGPUSettings", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "monitorVRAMSettings", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
         Object.defineProperty(this, "monitorCPUElement", {
             enumerable: true,
             configurable: true,
@@ -104,7 +116,7 @@ class CrystoolsMonitor {
                 name: this.menuPrefix + '[menu] Display partition disk monitor (HDD)',
                 type: 'boolean',
                 label: 'HDD',
-                tooltip: `Drive: ${app.ui.settings.getSettingValue(this.idWhichHDD, this.defaultWhichHDD)}`,
+                title: `Drive: ${app.ui.settings.getSettingValue(this.idWhichHDD, this.defaultWhichHDD)}`,
                 defaultValue: true,
                 htmlMonitorRef: undefined,
                 htmlMonitorSliderRef: undefined,
@@ -118,50 +130,6 @@ class CrystoolsMonitor {
                 },
             }
         });
-        Object.defineProperty(this, "monitorGPUElement", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                id: 'Crystools.switchGPU',
-                name: this.menuPrefix + '[menu] Display GPU monitor',
-                type: 'boolean',
-                label: 'GPU',
-                defaultValue: true,
-                htmlMonitorRef: undefined,
-                htmlMonitorSliderRef: undefined,
-                htmlMonitorLabelRef: undefined,
-                cssColor: '#0C86F4',
-                onChange: async (value) => {
-                    this.updateWidget(this.monitorGPUElement);
-                    await this.updateServer({
-                        switchGPU: value,
-                    });
-                },
-            }
-        });
-        Object.defineProperty(this, "monitorVRAMElement", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                id: 'Crystools.switchVRAM',
-                name: this.menuPrefix + '[menu] Display Video RAM monitor',
-                type: 'boolean',
-                label: 'VRAM',
-                defaultValue: true,
-                htmlMonitorRef: undefined,
-                htmlMonitorSliderRef: undefined,
-                htmlMonitorLabelRef: undefined,
-                cssColor: '#176EC7',
-                onChange: async (value) => {
-                    this.updateWidget(this.monitorVRAMElement);
-                    await this.updateServer({
-                        switchVRAM: value,
-                    });
-                },
-            }
-        });
         Object.defineProperty(this, "createSettings", {
             enumerable: true,
             configurable: true,
@@ -169,8 +137,6 @@ class CrystoolsMonitor {
             value: () => {
                 app.ui.settings.addSetting(this.monitorCPUElement);
                 app.ui.settings.addSetting(this.monitorRAMElement);
-                app.ui.settings.addSetting(this.monitorGPUElement);
-                app.ui.settings.addSetting(this.monitorVRAMElement);
                 app.ui.settings.addSetting(this.monitorHDDElement);
                 app.ui.settings.addSetting({
                     id: this.idInputRate,
@@ -246,6 +212,65 @@ class CrystoolsMonitor {
                         },
                     });
                 });
+                void this.getGPUsFromServer().then((gpus) => {
+                    console.log(gpus);
+                    let moreThanOneGPU = false;
+                    if (gpus.length > 1) {
+                        moreThanOneGPU = true;
+                    }
+                    gpus?.forEach(({ name, index }) => {
+                        if (name === undefined || index === undefined) {
+                            console.warn('getGPUsFromServer: name or index undefined', name, index);
+                            return;
+                        }
+                        let label = 'GPU';
+                        let labelVRAM = 'VRAM';
+                        if (moreThanOneGPU) {
+                            label = 'GPU ' + index;
+                            labelVRAM = 'VRAM' + index;
+                        }
+                        const monitorGPUNElement = {
+                            id: 'Crystools.switchGPU' + index,
+                            name: this.menuPrefix + `[menu] Display GPU monitor\r\n[${index}] ${name}`,
+                            type: 'boolean',
+                            label,
+                            title: `${index}: ${name}`,
+                            defaultValue: true,
+                            htmlMonitorRef: undefined,
+                            htmlMonitorSliderRef: undefined,
+                            htmlMonitorLabelRef: undefined,
+                            cssColor: '#0C86F4',
+                            onChange: async (value) => {
+                                this.updateWidget(monitorGPUNElement);
+                                void await this.updateServerGPU(index, {
+                                    utilization: value
+                                });
+                            },
+                        };
+                        const monitorVRAMNElement = {
+                            id: 'Crystools.switchVRAM' + index,
+                            name: this.menuPrefix + `[menu] Display GPU VRAM monitor\r\n[${index}] ${name}`,
+                            type: 'boolean',
+                            label: labelVRAM,
+                            title: `${index}: ${name}`,
+                            defaultValue: true,
+                            htmlMonitorRef: undefined,
+                            htmlMonitorSliderRef: undefined,
+                            htmlMonitorLabelRef: undefined,
+                            cssColor: '#176EC7',
+                            onChange: async (value) => {
+                                this.updateWidget(monitorVRAMNElement);
+                                void await this.updateServerGPU(index, {
+                                    vram: value
+                                });
+                            },
+                        };
+                        this.monitorGPUSettings[index] = monitorGPUNElement;
+                        this.monitorVRAMSettings[index] = monitorVRAMNElement;
+                        app.ui.settings.addSetting(this.monitorGPUSettings[index]);
+                        app.ui.settings.addSetting(this.monitorVRAMSettings[index]);
+                    });
+                });
             }
         });
         Object.defineProperty(this, "updateServer", {
@@ -264,6 +289,23 @@ class CrystoolsMonitor {
                 throw new Error(resp.statusText);
             }
         });
+        Object.defineProperty(this, "updateServerGPU", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: async (index, data) => {
+                console.log('updateServerGPU', index, data);
+                const resp = await api.fetchApi(`/crystools/monitor/GPU/${index}`, {
+                    method: 'PATCH',
+                    body: JSON.stringify(data),
+                    cache: 'no-store',
+                });
+                if (resp.status === 200) {
+                    return await resp.text();
+                }
+                throw new Error(resp.statusText);
+            }
+        });
         Object.defineProperty(this, "getHDDsFromServer", {
             enumerable: true,
             configurable: true,
@@ -272,6 +314,14 @@ class CrystoolsMonitor {
                 return this.getDataFromServer('HDD');
             }
         });
+        Object.defineProperty(this, "getGPUsFromServer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: async () => {
+                return this.getDataFromServer('GPU');
+            }
+        });
         Object.defineProperty(this, "getDataFromServer", {
             enumerable: true,
             configurable: true,
@@ -294,9 +344,13 @@ class CrystoolsMonitor {
             value: () => {
                 this.updateWidget(this.monitorCPUElement);
                 this.updateWidget(this.monitorRAMElement);
-                this.updateWidget(this.monitorGPUElement);
-                this.updateWidget(this.monitorVRAMElement);
                 this.updateWidget(this.monitorHDDElement);
+                this.monitorGPUSettings.forEach((monitorSettings) => {
+                    monitorSettings && this.updateWidget(monitorSettings);
+                });
+                this.monitorVRAMSettings.forEach((monitorSettings) => {
+                    monitorSettings && this.updateWidget(monitorSettings);
+                });
             }
         });
         Object.defineProperty(this, "updateWidget", {
@@ -315,6 +369,7 @@ class CrystoolsMonitor {
             configurable: true,
             writable: true,
             value: (data) => {
+                console.log('updateAllMonitors', data);
                 this.updateMonitor(this.monitorCPUElement, data.cpu_utilization);
                 this.updateMonitor(this.monitorRAMElement, data.ram_used_percent);
                 this.updateMonitor(this.monitorHDDElement, data.hdd_used_percent);
@@ -322,13 +377,32 @@ class CrystoolsMonitor {
                     console.warn('UpdateAllMonitors: no GPU data');
                     return;
                 }
-                const gpu = data.gpus[0] ? data.gpus[0] : {
-                    gpu_utilization: 0, vram_used_percent: 0,
-                };
-                const gpu_utilization = gpu.gpu_utilization;
-                const vram_used_percent = gpu.vram_used_percent;
-                this.updateMonitor(this.monitorGPUElement, gpu_utilization);
-                this.updateMonitor(this.monitorVRAMElement, vram_used_percent);
+                this.monitorGPUSettings.forEach((monitorSettings, index) => {
+                    if (data.gpus[index]) {
+                        const gpu = data.gpus[index];
+                        if (gpu === undefined) {
+                            console.error('UpdateAllMonitors: no GPU data for index', index);
+                            return;
+                        }
+                        this.updateMonitor(monitorSettings, gpu.gpu_utilization);
+                    }
+                    else {
+                        console.error('UpdateAllMonitors: no GPU data for index', index);
+                    }
+                });
+                this.monitorVRAMSettings.forEach((monitorSettings, index) => {
+                    if (data.gpus[index]) {
+                        const gpu = data.gpus[index];
+                        if (gpu === undefined) {
+                            console.error('UpdateAllMonitors: no GPU VRAM data for index', index);
+                            return;
+                        }
+                        this.updateMonitor(monitorSettings, gpu.vram_used_percent);
+                    }
+                    else {
+                        console.error('UpdateAllMonitors: no GPU VRAM data for index', index);
+                    }
+                });
             }
         });
         Object.defineProperty(this, "updateMonitor", {
@@ -341,9 +415,6 @@ class CrystoolsMonitor {
                 }
                 monitorSettings.htmlMonitorLabelRef.innerHTML = `${Math.floor(percent)}%`;
                 monitorSettings.htmlMonitorSliderRef.style.width = monitorSettings.htmlMonitorLabelRef.innerHTML;
-                if (monitorSettings.tooltip) {
-                    monitorSettings.htmlMonitorLabelRef.title = monitorSettings.tooltip;
-                }
             }
         });
         Object.defineProperty(this, "updateAllAnimationDuration", {
@@ -353,9 +424,13 @@ class CrystoolsMonitor {
             value: (value) => {
                 this.updatedAnimationDuration(this.monitorCPUElement, value);
                 this.updatedAnimationDuration(this.monitorRAMElement, value);
-                this.updatedAnimationDuration(this.monitorGPUElement, value);
-                this.updatedAnimationDuration(this.monitorVRAMElement, value);
                 this.updatedAnimationDuration(this.monitorHDDElement, value);
+                this.monitorGPUSettings.forEach((monitorSettings) => {
+                    monitorSettings && this.updatedAnimationDuration(monitorSettings, value);
+                });
+                this.monitorVRAMSettings.forEach((monitorSettings) => {
+                    monitorSettings && this.updatedAnimationDuration(monitorSettings, value);
+                });
             }
         });
         Object.defineProperty(this, "updatedAnimationDuration", {
@@ -384,6 +459,9 @@ class CrystoolsMonitor {
                 htmlMain.style.alignItems = 'center';
                 htmlMain.style.flexDirection = 'row';
                 monitorSettings.htmlMonitorRef = htmlMain;
+                if (monitorSettings.title) {
+                    htmlMain.title = monitorSettings.title;
+                }
                 const htmlMonitorText = document.createElement('div');
                 htmlMonitorText.style.width = '35px';
                 htmlMonitorText.style.fontSize = '10px';
@@ -448,8 +526,12 @@ class CrystoolsMonitor {
         ctoolsRoot.append(htmlContainer);
         htmlContainer.append(this.createMonitor(this.monitorCPUElement));
         htmlContainer.append(this.createMonitor(this.monitorRAMElement));
-        htmlContainer.append(this.createMonitor(this.monitorGPUElement));
-        htmlContainer.append(this.createMonitor(this.monitorVRAMElement));
+        this.monitorGPUSettings.forEach((monitorSettings) => {
+            monitorSettings && htmlContainer.append(this.createMonitor(monitorSettings));
+        });
+        this.monitorVRAMSettings.forEach((monitorSettings) => {
+            monitorSettings && htmlContainer.append(this.createMonitor(monitorSettings));
+        });
         htmlContainer.append(this.createMonitor(this.monitorHDDElement));
         const currentRate = parseFloat(app.ui.settings.getSettingValue(this.idInputRate, this.defaultRate));
         this.updateAllAnimationDuration(currentRate);

web/monitor.ts

@@ -12,6 +12,8 @@ class CrystoolsMonitor {
   defaultRate = .5;
   idWhichHDD = 'Crystools.whichHDD';
   defaultWhichHDD = '/';
+  monitorGPUSettings: TMonitorSettings[] = [];
+  monitorVRAMSettings: TMonitorSettings[] = [];
 
   // CPU Variables
   monitorCPUElement: TMonitorSettings = {
@@ -57,7 +59,7 @@ class CrystoolsMonitor {
     name: this.menuPrefix + '[menu] Display partition disk monitor (HDD)',
     type: 'boolean',
     label: 'HDD',
-    tooltip: `Drive: ${app.ui.settings.getSettingValue(this.idWhichHDD, this.defaultWhichHDD)}`,
+    title: `Drive: ${app.ui.settings.getSettingValue(this.idWhichHDD, this.defaultWhichHDD)}`,
     defaultValue: true,
     htmlMonitorRef: undefined,
     htmlMonitorSliderRef: undefined,
@@ -71,44 +73,6 @@ class CrystoolsMonitor {
     },
   };
 
-  // GPU Variables
-  monitorGPUElement: TMonitorSettings = {
-    id: 'Crystools.switchGPU',
-    name: this.menuPrefix + '[menu] Display GPU monitor',
-    type: 'boolean',
-    label: 'GPU',
-    defaultValue: true,
-    htmlMonitorRef: undefined,
-    htmlMonitorSliderRef: undefined,
-    htmlMonitorLabelRef: undefined,
-    cssColor: '#0C86F4',
-    onChange: async(value: boolean) => {
-      this.updateWidget(this.monitorGPUElement);
-      await this.updateServer({
-        switchGPU: value,
-      });
-    },
-  };
-
-  // VRAM Variables
-  monitorVRAMElement: TMonitorSettings = {
-    id: 'Crystools.switchVRAM',
-    name: this.menuPrefix + '[menu] Display Video RAM monitor',
-    type: 'boolean',
-    label: 'VRAM',
-    defaultValue: true,
-    htmlMonitorRef: undefined,
-    htmlMonitorSliderRef: undefined,
-    htmlMonitorLabelRef: undefined,
-    cssColor: '#176EC7',
-    onChange: async(value: boolean) => {
-      this.updateWidget(this.monitorVRAMElement);
-      await this.updateServer({
-        switchVRAM: value,
-      });
-    },
-  };
-
   constructor() {
     this.createSettings();
   }
@@ -116,8 +80,6 @@ class CrystoolsMonitor {
   createSettings = (): void => {
     app.ui.settings.addSetting(this.monitorCPUElement);
     app.ui.settings.addSetting(this.monitorRAMElement);
-    app.ui.settings.addSetting(this.monitorGPUElement);
-    app.ui.settings.addSetting(this.monitorVRAMElement);
     app.ui.settings.addSetting(this.monitorHDDElement);
 
     app.ui.settings.addSetting({
@@ -199,27 +161,77 @@ class CrystoolsMonitor {
       });
     });
 
+    void this.getGPUsFromServer().then((gpus: TGpuName[]): void => {
+      console.log(gpus);
+      let moreThanOneGPU = false;
+      if (gpus.length > 1) {
+        moreThanOneGPU = true;
+      }
 
-    // void this.getGPUsFromServer().then((gpus: TGpuName[]): void => {
-    //   console.log(gpus);
-    //   gpus?.forEach(({
-    //     name, index
-    //   }) => {
-    //     const id = this.idSwitchGPU + index;
-    //     app.ui.settings.addSetting({
-    //       id,
-    //       name: this.menuPrefix + `[menu] Display GPU monitor\r\n[${index}] ${name}`,
-    //       type: 'boolean',
-    //       defaultValue: this.defaultSwitchGPU,
-    //       onChange: async(value: boolean)=> {
-    //         // this.updateWidget(value, this.htmlMonitorGPURef);
-    //         void await this.updateServerGPU(index,{
-    //           utilization: value
-    //         });
-    //       },
-    //     });
-    //   });
-    // });
+      gpus?.forEach(({
+        name, index
+      }) => {
+
+        if(name === undefined || index === undefined) {
+          console.warn('getGPUsFromServer: name or index undefined', name, index);
+          return;
+        }
+
+        let label = 'GPU';
+        let labelVRAM = 'VRAM';
+        if (moreThanOneGPU) {
+          label = 'GPU '+index;
+          labelVRAM = 'VRAM'+index;
+        }
+
+        // GPU Utilization Variables
+        const monitorGPUNElement: TMonitorSettings = {
+          id: 'Crystools.switchGPU' + index,
+          name: this.menuPrefix + `[menu] Display GPU monitor\r\n[${index}] ${name}`,
+          type: 'boolean',
+          label,
+          title: `${index}: ${name}`,
+          defaultValue: true,
+          htmlMonitorRef: undefined,
+          htmlMonitorSliderRef: undefined,
+          htmlMonitorLabelRef: undefined,
+          cssColor: '#0C86F4',
+          onChange: async(value: boolean) => {
+            this.updateWidget(monitorGPUNElement);
+            void await this.updateServerGPU(index,{
+              utilization: value
+            });
+          },
+        };
+
+        // GPU VRAM Variables
+        const monitorVRAMNElement: TMonitorSettings = {
+          id: 'Crystools.switchVRAM' + index,
+          name: this.menuPrefix + `[menu] Display GPU VRAM monitor\r\n[${index}] ${name}`,
+          type: 'boolean',
+          label: labelVRAM,
+          title: `${index}: ${name}`,
+          defaultValue: true,
+          htmlMonitorRef: undefined,
+          htmlMonitorSliderRef: undefined,
+          htmlMonitorLabelRef: undefined,
+          cssColor: '#176EC7',
+          onChange: async(value: boolean) => {
+            this.updateWidget(monitorVRAMNElement);
+            void await this.updateServerGPU(index,{
+              vram: value
+            });
+          },
+        };
+
+        this.monitorGPUSettings[index] = monitorGPUNElement;
+        this.monitorVRAMSettings[index] = monitorVRAMNElement;
+        // @ts-ignore
+        app.ui.settings.addSetting(this.monitorGPUSettings[index]);
+        // @ts-ignore
+        app.ui.settings.addSetting(this.monitorVRAMSettings[index]);
+      });
+    });
   };
 
 
@@ -235,26 +247,26 @@ class CrystoolsMonitor {
     throw new Error(resp.statusText);
   };
 
-  // updateServerGPU = async(index: number, data: TGpuSettings): Promise<string> => {
-  //   console.log('updateServerGPU', index, data);
-  //   const resp = await api.fetchApi(`/crystools/monitor/GPU/${index}`, {
-  //     method: 'PATCH',
-  //     body: JSON.stringify(data),
-  //     cache: 'no-store',
-  //   });
-  //   if (resp.status === 200) {
-  //     return await resp.text();
-  //   }
-  //   throw new Error(resp.statusText);
-  // };
+  updateServerGPU = async(index: number, data: TGpuSettings): Promise<string> => {
+    console.log('updateServerGPU', index, data);
+    const resp = await api.fetchApi(`/crystools/monitor/GPU/${index}`, {
+      method: 'PATCH',
+      body: JSON.stringify(data),
+      cache: 'no-store',
+    });
+    if (resp.status === 200) {
+      return await resp.text();
+    }
+    throw new Error(resp.statusText);
+  };
 
   getHDDsFromServer = async(): Promise<string[]> => {
     return this.getDataFromServer('HDD');
   };
 
-  // getGPUsFromServer = async(): Promise<TGpuName[]> => {
-  //   return this.getDataFromServer<TGpuName>('GPU');
-  // };
+  getGPUsFromServer = async(): Promise<TGpuName[]> => {
+    return this.getDataFromServer<TGpuName>('GPU');
+  };
 
   getDataFromServer = async<T>(what: string): Promise<T[]> => {
     const resp = await api.fetchApi(`/crystools/monitor/${what}`, {
@@ -270,9 +282,14 @@ class CrystoolsMonitor {
   updateAllWidget = (): void => {
     this.updateWidget(this.monitorCPUElement);
     this.updateWidget(this.monitorRAMElement);
-    this.updateWidget(this.monitorGPUElement);
-    this.updateWidget(this.monitorVRAMElement);
     this.updateWidget(this.monitorHDDElement);
+
+    this.monitorGPUSettings.forEach((monitorSettings) => {
+      monitorSettings && this.updateWidget(monitorSettings);
+    });
+    this.monitorVRAMSettings.forEach((monitorSettings) => {
+      monitorSettings && this.updateWidget(monitorSettings);
+    });
   };
 
   updateWidget = (monitorSettings: TMonitorSettings): void => {
@@ -283,7 +300,7 @@ class CrystoolsMonitor {
   };
 
   updateAllMonitors = (data: TStatsData): void => {
-    // console.log('updateAllMonitors', data);
+    console.log('updateAllMonitors', data);
     this.updateMonitor(this.monitorCPUElement, data.cpu_utilization);
     this.updateMonitor(this.monitorRAMElement, data.ram_used_percent);
     this.updateMonitor(this.monitorHDDElement, data.hdd_used_percent);
@@ -293,15 +310,45 @@ class CrystoolsMonitor {
       return;
     }
 
-    const gpu = data.gpus[0] ? data.gpus[0] : {
-      gpu_utilization: 0, vram_used_percent: 0,
-    };
 
-    const gpu_utilization = gpu.gpu_utilization;
-    const vram_used_percent = gpu.vram_used_percent;
+    this.monitorGPUSettings.forEach((monitorSettings, index) => {
+      if (data.gpus[index]) {
+        const gpu = data.gpus[index];
+        if (gpu === undefined) {
+          console.error('UpdateAllMonitors: no GPU data for index', index);
+          return;
+        }
 
-    this.updateMonitor(this.monitorGPUElement, gpu_utilization);
-    this.updateMonitor(this.monitorVRAMElement, vram_used_percent);
+        this.updateMonitor(monitorSettings, gpu.gpu_utilization);
+      } else {
+        console.error('UpdateAllMonitors: no GPU data for index', index);
+      }
+    });
+
+    this.monitorVRAMSettings.forEach((monitorSettings, index) => {
+      if (data.gpus[index]) {
+        const gpu = data.gpus[index];
+        if (gpu === undefined) {
+          console.error('UpdateAllMonitors: no GPU VRAM data for index', index);
+          return;
+        }
+
+        this.updateMonitor(monitorSettings, gpu.vram_used_percent);
+      } else {
+        console.error('UpdateAllMonitors: no GPU VRAM data for index', index);
+      }
+    });
+
+
+    // const gpu2 = data.gpus[0] ? data.gpus[0] : {
+    //   gpu_utilization: 0, vram_used_percent: 0,
+    // };
+
+    // const gpu_utilization = gpu.gpu_utilization;
+    // const vram_used_percent = gpu2.vram_used_percent;
+
+    // this.updateMonitor(this.monitorGPUElement, gpu_utilization);
+    // this.updateMonitor(this.monitorVRAMElement, vram_used_percent);
   };
 
   updateMonitor = (monitorSettings: TMonitorSettings, percent: number): void => {
@@ -311,17 +358,18 @@ class CrystoolsMonitor {
 
     monitorSettings.htmlMonitorLabelRef.innerHTML = `${Math.floor(percent)}%`;
     monitorSettings.htmlMonitorSliderRef.style.width = monitorSettings.htmlMonitorLabelRef.innerHTML;
-    if (monitorSettings.tooltip) {
-      monitorSettings.htmlMonitorLabelRef.title = monitorSettings.tooltip;
-    }
   };
 
   updateAllAnimationDuration = (value: number): void => {
     this.updatedAnimationDuration(this.monitorCPUElement, value);
     this.updatedAnimationDuration(this.monitorRAMElement, value);
-    this.updatedAnimationDuration(this.monitorGPUElement, value);
-    this.updatedAnimationDuration(this.monitorVRAMElement, value);
     this.updatedAnimationDuration(this.monitorHDDElement, value);
+    this.monitorGPUSettings.forEach((monitorSettings) => {
+      monitorSettings && this.updatedAnimationDuration(monitorSettings, value);
+    });
+    this.monitorVRAMSettings.forEach((monitorSettings) => {
+      monitorSettings && this.updatedAnimationDuration(monitorSettings, value);
+    });
   };
 
   updatedAnimationDuration = (monitorSettings: TMonitorSettings, value: number): void => {
@@ -356,8 +404,12 @@ class CrystoolsMonitor {
 
     htmlContainer.append(this.createMonitor(this.monitorCPUElement));
     htmlContainer.append(this.createMonitor(this.monitorRAMElement));
-    htmlContainer.append(this.createMonitor(this.monitorGPUElement));
-    htmlContainer.append(this.createMonitor(this.monitorVRAMElement));
+    this.monitorGPUSettings.forEach((monitorSettings) => {
+      monitorSettings && htmlContainer.append(this.createMonitor(monitorSettings));
+    });
+    this.monitorVRAMSettings.forEach((monitorSettings) => {
+      monitorSettings && htmlContainer.append(this.createMonitor(monitorSettings));
+    });
     htmlContainer.append(this.createMonitor(this.monitorHDDElement));
 
     const currentRate = parseFloat(app.ui.settings.getSettingValue(this.idInputRate, this.defaultRate));
@@ -377,6 +429,10 @@ class CrystoolsMonitor {
     htmlMain.style.flexDirection = 'row';
     monitorSettings.htmlMonitorRef = htmlMain;
 
+    if (monitorSettings.title) {
+      htmlMain.title = monitorSettings.title;
+    }
+
     const htmlMonitorText = document.createElement('div');
     htmlMonitorText.style.width = '35px';
     htmlMonitorText.style.fontSize = '10px';
@@ -395,7 +451,6 @@ class CrystoolsMonitor {
     htmlMonitorSlider.style.height = '100%';
     htmlMonitorSlider.style.width = '0';
     htmlMonitorSlider.style.backgroundColor = monitorSettings.cssColor;
-    // htmlMonitorSlider.style.transition = 'width 0.5s';
     monitorSettings.htmlMonitorSliderRef = htmlMonitorSlider;
     htmlMonitorContent.append(htmlMonitorSlider);
 

web/monitor.types.d.ts

@@ -41,7 +41,8 @@ type TMonitorSettings = {
   id: string,
   name: string,
   label: string, // on monitor
-  tooltip?: string,
+  title?: string, // on monitor
+  tooltip?: string, // on settings
   type: 'boolean' | 'number' | 'string',
   defaultValue: boolean,
   onChange: (value: boolean) => Promise<void>,