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

overclock_profiles.json

@@ -3,7 +3,7 @@
     "label": "Ollama \u2014 LLM decode (memory-bandwidth bound)",
     "power_limit_w": 370,
     "core_offset_mhz": 100,
-    "mem_offset_mhz": 700,
+    "mem_offset_mhz": 500,
     "lock_core_min": 0,
     "lock_core_max": 0,
     "lock_mem_mhz": 0,

static/app.js

@@ -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());

static/index.html

@@ -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">