drjones/gpu-program-swapper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visualize VRAM GB and Host RAM Cache GB in real-time tuning graph

Browse Source
This commit is contained in:
drjones
2026-08-23 08:58:36 -07:00
parent 1f198ae10e
commit 02c85d778f
3 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
static/app.js
View File

@@ -35,8 +35,9 @@ function updateDashboard(data) {
// 1. GPU VRAM Stats
const gpu = data.gpu || {};
const ram = data.ram || {};
if (gpu.available) {
pushOverclockSample(gpu);
pushOverclockSample(gpu, ram);
document.getElementById('gpu-chip-name').textContent = gpu.device_name || 'NVIDIA GPU';
document.getElementById('vram-total-used').textContent = gpu.vram_used_gb || '0.0';
document.getElementById('vram-used-pct').textContent = `${gpu.vram_used_pct || 0}% USED`;
@@ -350,6 +351,8 @@ function initOverclockChart() {
{ label: 'Temp °C', data: [], borderColor: '#fb7185', backgroundColor: 'rgba(251,113,133,0.08)', borderWidth: 1.5, pointRadius: 0, tension: 0.35, yAxisID: 'y1', fill: false },
{ label: 'Power W', data: [], borderColor: '#fbbf24', backgroundColor: 'rgba(251,191,36,0.08)', borderWidth: 1.5, pointRadius: 0, tension: 0.35, yAxisID: 'y2', fill: false },
{ label: 'Fan %', data: [], borderColor: '#34d399', backgroundColor: 'rgba(52,211,153,0.08)', borderWidth: 1.5, pointRadius: 0, tension: 0.35, yAxisID: 'y3', fill: false },
{ label: 'VRAM GB', data: [], borderColor: '#818cf8', backgroundColor: 'rgba(129,140,248,0.08)', borderWidth: 1.8, pointRadius: 0, tension: 0.35, yAxisID: 'y4', fill: false },
{ label: 'RAM Cache GB', data: [], borderColor: '#e879f9', backgroundColor: 'rgba(232,121,249,0.08)', borderWidth: 1.5, pointRadius: 0, tension: 0.35, yAxisID: 'y5', fill: false },
]
},
options: {
@@ -363,13 +366,31 @@ function initOverclockChart() {
y1: { position: 'right', title: { display: true, text: '°C', color: '#fb7185', font: { size: 9 } }, ticks: { color: '#64748b', font: { size: 9 } }, grid: { drawOnChartArea: false }, suggestedMin: 0, suggestedMax: 100 },
y2: { position: 'right', offset: true, title: { display: true, text: 'W', color: '#fbbf24', font: { size: 9 } }, ticks: { color: '#64748b', font: { size: 9 } }, grid: { drawOnChartArea: false }, suggestedMin: 0, suggestedMax: 400 },
y3: { position: 'right', offset: true, title: { display: false }, ticks: { display: false }, grid: { drawOnChartArea: false }, suggestedMin: 0, suggestedMax: 100 },
y4: { position: 'right', offset: true, title: { display: true, text: 'VRAM GB', color: '#818cf8', font: { size: 9 } }, ticks: { color: '#818cf8', font: { size: 9 } }, grid: { drawOnChartArea: false }, suggestedMin: 0, suggestedMax: 16 },
y5: { position: 'right', offset: true, title: { display: false }, ticks: { display: false }, grid: { drawOnChartArea: false }, suggestedMin: 0, suggestedMax: 64 },
},
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: function(context) {
const label = context.dataset.label || '';
const val = context.parsed.y;
if (label.includes('MHz')) return `${label}: ${val} MHz`;
if (label.includes('°C')) return `${label}: ${val}°C`;
if (label.includes('Power')) return `${label}: ${val} W`;
if (label.includes('Fan')) return `${label}: ${val}%`;
if (label.includes('GB')) return `${label}: ${val} GB`;
return `${label}: ${val}`;
}
}
}
},
plugins: { legend: { display: false } },
}
});
}
function pushOverclockSample(gpu) {
function pushOverclockSample(gpu, ram) {
if (!ocChart || !gpu || !gpu.available) return;
const label = new Date().toLocaleTimeString([], { hour12: false });
ocChart.data.labels.push(label);
@@ -378,6 +399,8 @@ function pushOverclockSample(gpu) {
ocChart.data.datasets[2].data.push(gpu.temperature_c || 0);
ocChart.data.datasets[3].data.push(gpu.power_w || 0);
ocChart.data.datasets[4].data.push(gpu.fan_pct || 0);
ocChart.data.datasets[5].data.push(parseFloat(gpu.vram_used_gb) || 0);
ocChart.data.datasets[6].data.push(parseFloat(ram?.cached_gb) || 0);
if (ocChart.data.labels.length > OC_MAX_SAMPLES) {
ocChart.data.labels.shift();
ocChart.data.datasets.forEach(d => d.data.shift());

4
static/index.html
View File

@@ -583,12 +583,14 @@
<span class="text-xs font-semibold text-slate-300 uppercase font-mono">
<i class="fa-solid fa-chart-line text-fuchsia-400 mr-1"></i>Live Tuning Graph
</span>
<div class="flex flex-wrap items-center space-x-3 text-[10px] font-mono">
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] font-mono">
<span class="flex items-center space-x-1"><span class="w-2 h-2 rounded-full bg-cyan-400 inline-block"></span>Core MHz</span>
<span class="flex items-center space-x-1"><span class="w-2 h-2 rounded-full bg-purple-400 inline-block"></span>Mem MHz</span>
<span class="flex items-center space-x-1"><span class="w-2 h-2 rounded-full bg-rose-400 inline-block"></span>Temp °C</span>
<span class="flex items-center space-x-1"><span class="w-2 h-2 rounded-full bg-amber-400 inline-block"></span>Power W</span>
<span class="flex items-center space-x-1"><span class="w-2 h-2 rounded-full bg-emerald-400 inline-block"></span>Fan %</span>
<span class="flex items-center space-x-1"><span class="w-2 h-2 rounded-full bg-indigo-400 inline-block"></span>VRAM GB</span>
<span class="flex items-center space-x-1"><span class="w-2 h-2 rounded-full bg-fuchsia-400 inline-block"></span>RAM Cache GB</span>
</div>
</div>
<div class="relative h-64">