Add GPU VRAM widget to row mode

joshuatowner · joshuatowner · commit 82d70f2b0cfd · 2025-05-03T18:17:31.000-07:00
diff --git a/src/ts/backend/config/default.ts b/src/ts/backend/config/default.ts
@@ -59,6 +59,12 @@ const DEFAULT_CONFIG: Config = {
       updateInterval: 3000,
     }
   },
+  gpu: {
+    enabled: false,
+    timing: {
+      updateInterval: 4000,
+    },
+  },
   color: {
     background: "#242424",
     featureBackground: "#333333",
diff --git a/src/ts/backend/config/index.ts b/src/ts/backend/config/index.ts
@@ -3,6 +3,7 @@ import {Config} from "./interface";
 import * as electron from "electron";
 import * as path from "path";
 import * as fs from "fs";
+import {gpuPresent} from "../gpu";
 
 const CONFIG_FILE_NAME = "config.json";
 let config: Config | undefined = undefined;
@@ -20,6 +21,13 @@ export async function loadConfig() {
     console.log("Unable to find or parse config file, using default");
     config = DEFAULT_CONFIG;
   }
+
+  if (config) {
+    config.gpu = {
+      ...config.gpu,
+      enabled: await gpuPresent(),
+    }
+  }
 }
 
 export function getConfig(): Config {
diff --git a/src/ts/backend/config/interface.ts b/src/ts/backend/config/interface.ts
@@ -52,6 +52,12 @@ export interface Config {
       }
     }
   },
+  gpu: {
+    enabled: boolean,
+    timing: {
+      updateInterval: number,
+    },
+  }
   process: {
     timing: {
       updateInterval: number,
diff --git a/src/ts/backend/gpu.ts b/src/ts/backend/gpu.ts
@@ -0,0 +1,29 @@
+import * as si from "systeminformation";
+import {GpuUsageUpdate} from "../data/gpu";
+import {ONE_MEBIBYTE} from "../ui/constants/data";
+
+export async function gpuUsageUpdate(): Promise<GpuUsageUpdate> {
+  const siGpuUsage = await si.graphics();
+  const nvidiaGpus = siGpuUsage.controllers
+    .filter(controller => controller.memoryUsed !== undefined);
+  if (nvidiaGpus.length === 0) {
+    return {
+      vramUsageBytes: 0,
+      vramCapacityBytes: 1,
+      gpuUsage: 0,
+    }
+  }
+  const gpu = nvidiaGpus[0];
+  return {
+    vramUsageBytes: (gpu.memoryUsed ?? 0) * ONE_MEBIBYTE,
+    vramCapacityBytes: (gpu.memoryTotal ?? 1) * ONE_MEBIBYTE,
+    gpuUsage: gpu.utilizationGpu ?? 0,
+  }
+}
+
+export async function gpuPresent(): Promise<boolean> {
+  const siGpuUsage = await si.graphics();
+  const nvidiaGpus = siGpuUsage.controllers
+    .filter(controller => controller.memoryUsed !== undefined);
+  return nvidiaGpus.length > 0;
+}
diff --git a/src/ts/backend/index.ts b/src/ts/backend/index.ts
@@ -5,6 +5,7 @@ import {networkAdapter, networkTransferUpdate, pingUpdate, webUpdate} from "./ne
 import {partitionInfo} from "./disk";
 import {getConfig, updateConfig} from "./config";
 import {getAllProcessInfo} from "./process/process";
+import {gpuUsageUpdate} from "./gpu";
 
 export default class NodeBackend implements Backend {
 
@@ -25,6 +26,8 @@ export default class NodeBackend implements Backend {
 
   processInfo = getAllProcessInfo;
 
+  gpuUsageUpdate = gpuUsageUpdate;
+
   getConfig = async () => getConfig();
   updateConfig = updateConfig;
 }
diff --git a/src/ts/backend/server/index.ts b/src/ts/backend/server/index.ts
@@ -27,4 +27,6 @@ export default function registerBackend(
 
   addRoute(ROUTES.DISK_PARTITION_INFO, backend.partitionInfo);
 
+  addRoute(ROUTES.GPU_USAGE, backend.gpuUsageUpdate);
+
 }
diff --git a/src/ts/data/backend.ts b/src/ts/data/backend.ts
@@ -4,6 +4,7 @@ import {NetworkTransferUpdate, PingUpdate, WebUpdate} from "./network";
 import {MemoryInfo, MemoryUsageUpdate} from "./memory";
 import {Config} from "../backend/config/interface";
 import {ProcessUsageInfo} from "./process";
+import {GpuUsageUpdate} from "./gpu";
 
 export interface Backend {
 
@@ -24,6 +25,8 @@ export interface Backend {
 
   partitionInfo(): Promise<PartitionInfo[]>;
 
+  gpuUsageUpdate(): Promise<GpuUsageUpdate>;
+
   getConfig(): Promise<Config>;
   updateConfig(config: Config): Promise<void>;
 
diff --git a/src/ts/data/gpu.ts b/src/ts/data/gpu.ts
@@ -0,0 +1,5 @@
+export interface GpuUsageUpdate {
+  vramUsageBytes: number;
+  vramCapacityBytes: number;
+  gpuUsage: number;
+}
diff --git a/src/ts/data/routes.ts b/src/ts/data/routes.ts
@@ -12,7 +12,8 @@ const ROUTES = {
   NETWORK_PING: "/network/ping",
   NETWORK_WEB: "/network/web",
   PROCESS_INFO: "/process/info",
-  DISK_PARTITION_INFO: "/disk/partition/info"
+  DISK_PARTITION_INFO: "/disk/partition/info",
+  GPU_USAGE: "/gpu/usage",
 }
 
 export default ROUTES;
diff --git a/src/ts/ui/gpu/index.tsx b/src/ts/ui/gpu/index.tsx
@@ -0,0 +1,22 @@
+import Widget from "../layout/widget";
+import {Size} from "../../util/vec2";
+import * as React from "react";
+import {GpuVRamBars} from "./vrambars";
+import {GpuGraphLabel} from "./label";
+
+export class GpuUsageWidget extends Widget {
+  renderContent(pixelSize: Size): React.ReactNode {
+    return (
+      <div className={"memory-usage"}>
+        <GpuGraphLabel />
+        <svg
+          viewBox={`0 0 ${pixelSize.width} ${pixelSize.height}`}
+          className={'memory-usage-graph full'}
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <GpuVRamBars position={{x: 0, y: 10}} size={{width: pixelSize.width, height: pixelSize.height - 20}} barSize={2} barSpacing={10} />
+        </svg>
+      </div>
+    );
+  }
+}
diff --git a/src/ts/ui/gpu/label.tsx b/src/ts/ui/gpu/label.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import {MemoryUsageUpdate} from "../../data/memory";
+import {memoryUsage} from "../observer/memory";
+import {BackendContext} from "../backendContext";
+import {formatBinaryBytes} from "../util/data";
+import {GpuUsageUpdate} from "../../data/gpu";
+import {gpuUsage} from "../observer/gpu";
+import {ONE_BYTE} from "../constants/data";
+
+interface StateType {
+  maxVram?: number;
+  currentVram?: number;
+}
+
+export class GpuGraphLabel extends React.Component<{}, StateType> {
+
+  static contextType = BackendContext;
+  context!: React.ContextType<typeof BackendContext>;
+
+
+  update = (update: GpuUsageUpdate) => {
+    this.setState({
+      maxVram: update.vramCapacityBytes,
+      currentVram: update.vramUsageBytes
+    })
+  }
+  componentDidMount() {
+    gpuUsage(this.context).watch(this.update);
+  }
+
+  componentWillUnmount() {
+    gpuUsage(this.context).remove(this.update);
+  }
+  render() {
+    if (!this.state || !this.state.maxVram || !this.state.currentVram) {
+      return;
+    }
+    return <div className={"memory-info"}>
+      <div className={"memory-title"}>GPU</div>
+      <div style={{flexGrow: 1}} />
+      <div>{formatBinaryBytes(this.state.currentVram / ONE_BYTE)} / {formatBinaryBytes(this.state.maxVram / ONE_BYTE)}</div>
+    </div>
+  }
+
+}
diff --git a/src/ts/ui/gpu/vrambars/bar.tsx b/src/ts/ui/gpu/vrambars/bar.tsx
@@ -0,0 +1,27 @@
+import React, {Component} from "react";
+import {Size, Vec2} from "../../../util/vec2";
+import {getColorForPercentage, GREY_WHITE_GRADIENT} from "../../util/gradient";
+
+interface PropType {
+  usage: number;
+  position: Vec2;
+  size: Size;
+}
+
+export class GpuVramBar extends Component<PropType, {}> {
+  constructor(props: PropType) {
+    super(props);
+  }
+
+  render() {
+    return <>
+      <rect
+        fill={getColorForPercentage(this.props.usage, GREY_WHITE_GRADIENT)}
+        className={"usage-grid-item"}
+        {...this.props.size}
+        {...this.props.position}
+      />
+    </>
+  }
+
+}
diff --git a/src/ts/ui/gpu/vrambars/index.tsx b/src/ts/ui/gpu/vrambars/index.tsx
@@ -0,0 +1,77 @@
+import {Observable} from "../../../data/observable/observable";
+import {Size, Vec2} from "../../../util/vec2";
+import {GpuVramBar} from "./bar";
+import React from "react";
+import {PingUpdate} from "../../../data/network";
+import {ping} from "../../observer/network";
+import {gpuUsage} from "../../observer/gpu";
+import {GpuUsageUpdate} from "../../../data/gpu";
+import {BackendContext} from "../../backendContext";
+
+interface PropType {
+  observable?: Observable<number>;
+  position: Vec2;
+  size: Size;
+  barSize: number;
+  barSpacing: number;
+}
+
+interface StateType {
+  usage: number;
+}
+
+export class GpuVRamBars extends React.Component<PropType, StateType>{
+
+  static contextType = BackendContext;
+  context!: React.ContextType<typeof BackendContext>;
+
+  constructor(props: PropType) {
+    super(props);
+
+
+  }
+
+  onUpdate = (update: GpuUsageUpdate) => {
+    this.setState({
+      usage: update.vramUsageBytes / update.vramCapacityBytes,
+    })
+  }
+
+  componentDidMount() {
+    gpuUsage(this.context).watch(this.onUpdate);
+  }
+
+  componentWillUnmount() {
+    gpuUsage(this.context).remove(this.onUpdate);
+  }
+
+
+  render() {
+
+    const {size, position, barSize, barSpacing} = this.props;
+
+    const numBars = Math.floor(size.width / barSpacing);
+
+    const divisions = numBars + 1;
+    const spacing = size.width / divisions;
+
+    const bars = [];
+    const usage = this.state?.usage || 0;
+    let totalBarUsage = usage * numBars;
+
+    for (let i = 0; i < numBars; i++) {
+      const leftPadding = spacing * (i + 1);
+      const barUsage = Math.min(Math.max(0, totalBarUsage), 1);
+      totalBarUsage -= barUsage;
+      bars.push(<GpuVramBar
+        usage={barUsage}
+        key={i}
+        position={{x: position.x + leftPadding - (barSize / 2), y: position.y}}
+        size={{width: barSize, height: size.height}}
+      />);
+    }
+
+    return bars;
+  }
+
+}
diff --git a/src/ts/ui/layout/engine/row.tsx b/src/ts/ui/layout/engine/row.tsx
@@ -5,6 +5,7 @@ import CpuUsageWidget from "../../cpu";
 import {ProcessesInfoWidget} from "../../process";
 import MemoryUsageWidget from "../../memory";
 import {NetworkStatusWidget, NetworkUsageWidget} from "../../network";
+import {GpuUsageWidget} from "../../gpu";
 
 interface PropType {
   windowSize: Size;
@@ -19,6 +20,9 @@ export default class RowLayoutEngine extends React.Component<PropType, {}> {
     let cpuSize = totalHeight;
     const fullCpuSize = cpuSize + padding;
 
+    const gpuEnabled = window.config.gpu?.enabled ?? false;
+    let memoryHeight = gpuEnabled ? totalHeight - padding * 3 : totalHeight;
+
     let networkFlowWidth = 10;
     const networkFlowTotalWidth = networkFlowWidth + padding;
 
@@ -36,9 +40,14 @@ export default class RowLayoutEngine extends React.Component<PropType, {}> {
         />
         {memoryWidth > 0 && <MemoryUsageWidget
             topLeft={{x: fullCpuSize, y: 0}}
-            size={{width: memoryWidth, height: cpuSize}}
+            size={{width: memoryWidth, height: memoryHeight}}
             windowSize={this.props.windowSize}
         />}
+        {gpuEnabled && <GpuUsageWidget
+          topLeft={{x: fullCpuSize, y: totalHeight - padding * 2}}
+          size={{width: memoryWidth, height: padding * 2}}
+          windowSize={this.props.windowSize}
+        />}
         <NetworkUsageWidget
             topLeft={{x: fullCpuSize + memoryWidth + padding, y: 0}}
             size={{width: networkFlowWidth, height: totalHeight - padding * 4}}
diff --git a/src/ts/ui/network/request/index.tsx b/src/ts/ui/network/request/index.tsx
@@ -3,6 +3,7 @@ import HexagonBadge from "../../common/hexagonStatus";
 import {WebUpdate} from "../../../data/network";
 import {webRequest} from "../../observer/network";
 import {BackendContext} from "../../backendContext";
+import * as https from "node:https";
 
 
 export default class WebHexagonBadge extends React.Component<{}, {}> {
diff --git a/src/ts/ui/observer/gpu.ts b/src/ts/ui/observer/gpu.ts
@@ -0,0 +1,7 @@
+import IntervalObservable from "../../data/observable/intervalObservable";
+import {Backend} from "../../data/backend";
+import {memoObservable} from "./memo";
+import DEFAULT_CONFIG from "../../backend/config/default";
+
+export const gpuUsage = memoObservable((backend: Backend) =>
+  new IntervalObservable(backend.gpuUsageUpdate, window.config.gpu?.timing?.updateInterval || DEFAULT_CONFIG.gpu.timing.updateInterval));
diff --git a/src/ts/ui/serverBackend.ts b/src/ts/ui/serverBackend.ts
@@ -27,6 +27,9 @@ export class ServerBackend implements Backend {
   processInfo = async () => JSON.parse(await this.connection(ROUTES.PROCESS_INFO));
 
   partitionInfo = async () => JSON.parse(await this.connection(ROUTES.DISK_PARTITION_INFO));
+
+  gpuUsageUpdate = async () => JSON.parse(await this.connection(ROUTES.GPU_USAGE));
+
   getConfig = async () => JSON.parse(await this.connection(ROUTES.CONFIG));
   updateConfig = async (config: Config) => {
     await this.connection(ROUTES.UPDATE_CONFIG, JSON.stringify(config));

Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,12 @@ export interface Config {`
`52`	`52`	`}`
`53`	`53`	`}`
`54`	`54`	`},`
	`55`	`+ gpu: {`
	`56`	`+ enabled: boolean,`
	`57`	`+ timing: {`
	`58`	`+ updateInterval: number,`
	`59`	`+ },`
	`60`	`+ }`
`55`	`61`	`process: {`
`56`	`62`	`timing: {`
`57`	`63`	`updateInterval: number,`
Original file line number	Diff line number	Diff line change
`@@ -27,4 +27,6 @@ export default function registerBackend(`
`27`	`27`
`28`	`28`	`addRoute(ROUTES.DISK_PARTITION_INFO, backend.partitionInfo);`
`29`	`29`
	`30`	`+ addRoute(ROUTES.GPU_USAGE, backend.gpuUsageUpdate);`
	`31`	`+`
`30`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,8 @@ const ROUTES = {`
`12`	`12`	`NETWORK_PING: "/network/ping",`
`13`	`13`	`NETWORK_WEB: "/network/web",`
`14`	`14`	`PROCESS_INFO: "/process/info",`
`15`		`- DISK_PARTITION_INFO: "/disk/partition/info"`
	`15`	`+ DISK_PARTITION_INFO: "/disk/partition/info",`
	`16`	`+ GPU_USAGE: "/gpu/usage",`
`16`	`17`	`}`
`17`	`18`
`18`	`19`	`export default ROUTES;`