Add GPU fan control, live telemetry, and per-profile fan curves in HyperSwap dashboard
This commit is contained in:
drjones
323
static/app.js
323
static/app.js
@@ -36,6 +36,7 @@ function updateDashboard(data) {
|
||||
// 1. GPU VRAM Stats
|
||||
const gpu = data.gpu || {};
|
||||
if (gpu.available) {
|
||||
pushOverclockSample(gpu);
|
||||
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`;
|
||||
@@ -68,6 +69,45 @@ function updateDashboard(data) {
|
||||
document.getElementById('gpu-power-val').textContent = `${gpu.power_w || 0} W`;
|
||||
document.getElementById('gpu-fan-val').textContent = `${gpu.fan_pct || 0}%`;
|
||||
|
||||
// Per-fan and animations
|
||||
const fan0 = (gpu.fans && gpu.fans.length > 0) ? gpu.fans[0] : (gpu.fan_pct || 0);
|
||||
const fan1 = (gpu.fans && gpu.fans.length > 1) ? gpu.fans[1] : (gpu.fan_pct || 0);
|
||||
const fanSub = document.getElementById('gpu-fan-sub');
|
||||
if (fanSub) fanSub.textContent = `Fan 0: ${fan0}% | Fan 1: ${fan1}%`;
|
||||
|
||||
const fan0Val = document.getElementById('oc-fan0-val');
|
||||
if (fan0Val) fan0Val.textContent = `${fan0}%`;
|
||||
const fan0Bar = document.getElementById('oc-fan0-bar');
|
||||
if (fan0Bar) fan0Bar.style.width = `${fan0}%`;
|
||||
|
||||
const fan1Val = document.getElementById('oc-fan1-val');
|
||||
if (fan1Val) fan1Val.textContent = `${fan1}%`;
|
||||
const fan1Bar = document.getElementById('oc-fan1-bar');
|
||||
if (fan1Bar) fan1Bar.style.width = `${fan1}%`;
|
||||
|
||||
const fanCurrent = document.getElementById('oc-fan-current');
|
||||
if (fanCurrent) fanCurrent.textContent = `${gpu.fan_pct || 0}%`;
|
||||
|
||||
const spinSpeed = Math.max(0.2, (100 - (gpu.fan_pct || 0)) / 100 * 1.6 + 0.3);
|
||||
const fanIcon = document.getElementById('gpu-fan-icon');
|
||||
if (fanIcon) {
|
||||
if ((gpu.fan_pct || 0) > 0) {
|
||||
fanIcon.classList.add('fan-spinning');
|
||||
fanIcon.style.animationDuration = `${spinSpeed.toFixed(2)}s`;
|
||||
} else {
|
||||
fanIcon.classList.remove('fan-spinning');
|
||||
}
|
||||
}
|
||||
const ocFanCardIcon = document.getElementById('oc-fan-card-icon');
|
||||
if (ocFanCardIcon) {
|
||||
if ((gpu.fan_pct || 0) > 0) {
|
||||
ocFanCardIcon.classList.add('fan-spinning');
|
||||
ocFanCardIcon.style.animationDuration = `${spinSpeed.toFixed(2)}s`;
|
||||
} else {
|
||||
ocFanCardIcon.classList.remove('fan-spinning');
|
||||
}
|
||||
}
|
||||
|
||||
// Processes table
|
||||
const tbody = document.getElementById('gpu-proc-table');
|
||||
if (bd.processes && bd.processes.length > 0) {
|
||||
@@ -285,4 +325,287 @@ async function warmAllModels() {
|
||||
// Startup
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initSSE();
|
||||
initOverclockChart();
|
||||
fetchOverclockStatus();
|
||||
setInterval(fetchOverclockStatus, 3000);
|
||||
});
|
||||
|
||||
// ============ OVERCLOCK CONTROL ============
|
||||
let ocProfiles = {};
|
||||
let ocChart = null;
|
||||
const OC_MAX_SAMPLES = 120;
|
||||
|
||||
function initOverclockChart() {
|
||||
const canvas = document.getElementById('oc-chart');
|
||||
if (!canvas || typeof Chart === 'undefined') return;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
ocChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{ label: 'Core MHz', data: [], borderColor: '#22d3ee', backgroundColor: 'rgba(34,211,238,0.08)', borderWidth: 1.5, pointRadius: 0, tension: 0.35, yAxisID: 'y', fill: true },
|
||||
{ label: 'Mem MHz', data: [], borderColor: '#c084fc', backgroundColor: 'rgba(192,132,252,0.08)', borderWidth: 1.5, pointRadius: 0, tension: 0.35, yAxisID: 'y', fill: false },
|
||||
{ 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 },
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: false,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
scales: {
|
||||
x: { ticks: { color: '#64748b', maxTicksLimit: 8, font: { size: 9 } }, grid: { color: 'rgba(51,65,85,0.35)' } },
|
||||
y: { position: 'left', title: { display: true, text: 'MHz', color: '#22d3ee', font: { size: 9 } }, ticks: { color: '#64748b', font: { size: 9 } }, grid: { color: 'rgba(51,65,85,0.35)' } },
|
||||
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 },
|
||||
},
|
||||
plugins: { legend: { display: false } },
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function pushOverclockSample(gpu) {
|
||||
if (!ocChart || !gpu || !gpu.available) return;
|
||||
const label = new Date().toLocaleTimeString([], { hour12: false });
|
||||
ocChart.data.labels.push(label);
|
||||
ocChart.data.datasets[0].data.push(gpu.clock_graphics_mhz || 0);
|
||||
ocChart.data.datasets[1].data.push(gpu.clock_mem_mhz || 0);
|
||||
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);
|
||||
if (ocChart.data.labels.length > OC_MAX_SAMPLES) {
|
||||
ocChart.data.labels.shift();
|
||||
ocChart.data.datasets.forEach(d => d.data.shift());
|
||||
}
|
||||
ocChart.update('none');
|
||||
}
|
||||
|
||||
async function fetchOverclockStatus() {
|
||||
try {
|
||||
const resp = await fetch('/api/overclock');
|
||||
if (!resp.ok) return;
|
||||
const data = await resp.json();
|
||||
ocProfiles = data.profiles || {};
|
||||
renderOverclockStatus(data);
|
||||
} catch (err) {
|
||||
console.warn('Overclock fetch error:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function renderOverclockStatus(data) {
|
||||
const active = data.active_profile || 'balanced';
|
||||
|
||||
const badge = document.getElementById('oc-active-badge');
|
||||
badge.textContent = `Active: ${active}`;
|
||||
if (active === 'ollama') {
|
||||
badge.className = 'px-2.5 py-1 text-xs font-mono rounded-lg bg-purple-950 border border-purple-700 text-purple-300';
|
||||
} else if (active === 'comfy') {
|
||||
badge.className = 'px-2.5 py-1 text-xs font-mono rounded-lg bg-cyan-950 border border-cyan-700 text-cyan-300';
|
||||
} else {
|
||||
badge.className = 'px-2.5 py-1 text-xs font-mono rounded-lg bg-slate-800 border border-slate-700 text-slate-300';
|
||||
}
|
||||
|
||||
const gpu = data.gpu || {};
|
||||
document.getElementById('oc-power-limit').textContent = `${gpu.power_limit_w ?? '--'} W`;
|
||||
document.getElementById('oc-core').textContent = `${gpu.clock_sm_mhz ?? '--'} MHz`;
|
||||
document.getElementById('oc-mem').textContent = `${gpu.clock_mem_mhz ?? '--'} MHz`;
|
||||
document.getElementById('oc-temp-draw').textContent = `${gpu.temp_c ?? '--'}°C / ${gpu.power_draw_w ?? '--'}W`;
|
||||
|
||||
// Specs strip
|
||||
document.getElementById('oc-spec-gpu').textContent = gpu.name || '--';
|
||||
document.getElementById('oc-spec-driver').textContent = gpu.driver_version || '--';
|
||||
const vramGb = (gpu.vram_total_mb || 0) / 1024;
|
||||
document.getElementById('oc-spec-vram').textContent = vramGb > 0 ? vramGb.toFixed(0) + ' GB' : '--';
|
||||
document.getElementById('oc-spec-maxcore').textContent = (gpu.clock_sm_max_mhz ?? '--') + ' MHz';
|
||||
document.getElementById('oc-spec-maxmem').textContent = (gpu.clock_mem_max_mhz ?? '--') + ' MHz';
|
||||
document.getElementById('oc-spec-power').textContent = `${gpu.power_limit_w ?? '--'} / ${gpu.power_max_w ?? '--'} W`;
|
||||
|
||||
// Fan status
|
||||
const fan = data.fan || {};
|
||||
const fanBadge = document.getElementById('oc-fan-badge');
|
||||
if (fanBadge) {
|
||||
if (fan.manual) {
|
||||
fanBadge.textContent = `MANUAL (${fan.target_speed_pct ?? '--'}%)`;
|
||||
fanBadge.className = 'px-2.5 py-1 text-xs font-mono rounded-lg bg-emerald-950 border border-emerald-500 text-emerald-300 font-bold';
|
||||
} else {
|
||||
fanBadge.textContent = 'AUTO (VBIOS)';
|
||||
fanBadge.className = 'px-2.5 py-1 text-xs font-mono rounded-lg bg-slate-800 border border-slate-700 text-slate-400 font-bold';
|
||||
}
|
||||
}
|
||||
|
||||
const xBadge = document.getElementById('oc-x-badge');
|
||||
if (data.headless_x_running) {
|
||||
xBadge.textContent = 'X: ON';
|
||||
xBadge.className = 'px-2.5 py-1 text-xs font-mono rounded-lg bg-emerald-950 border border-emerald-700 text-emerald-300';
|
||||
} else {
|
||||
xBadge.textContent = 'X: OFF';
|
||||
xBadge.className = 'px-2.5 py-1 text-xs font-mono rounded-lg bg-rose-950 border border-rose-700 text-rose-300';
|
||||
}
|
||||
|
||||
const offsets = (data.last_result && data.last_result.offsets) || {};
|
||||
const note = document.getElementById('oc-offset-note');
|
||||
if (offsets.supported) {
|
||||
note.textContent = '✅ Clock offsets active (proprietary driver)';
|
||||
note.className = 'text-[11px] font-mono text-emerald-400';
|
||||
} else {
|
||||
note.textContent = '⚠️ Clock offsets off — nvidia-open lacks offset support (power + clock locks active)';
|
||||
note.className = 'text-[11px] font-mono text-amber-400';
|
||||
}
|
||||
|
||||
// highlight active profile button
|
||||
['ollama', 'comfy', 'balanced'].forEach(p => {
|
||||
const btn = document.getElementById('oc-btn-' + p);
|
||||
if (p === active) {
|
||||
btn.classList.add('ring-2', 'ring-fuchsia-400');
|
||||
} else {
|
||||
btn.classList.remove('ring-2', 'ring-fuchsia-400');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadOverclockForProfile(name) {
|
||||
const p = ocProfiles[name];
|
||||
if (!p) return;
|
||||
document.getElementById('oc-slider-power').value = p.power_limit_w || 370;
|
||||
document.getElementById('oc-val-power').textContent = (p.power_limit_w || 370) + ' W';
|
||||
document.getElementById('oc-slider-core').value = p.core_offset_mhz || 0;
|
||||
document.getElementById('oc-val-core').textContent = '+' + (p.core_offset_mhz || 0) + ' MHz';
|
||||
document.getElementById('oc-slider-mem').value = p.mem_offset_mhz || 0;
|
||||
document.getElementById('oc-val-mem').textContent = '+' + (p.mem_offset_mhz || 0) + ' MHz';
|
||||
document.getElementById('oc-lockcore-toggle').checked = (p.lock_core_max || 0) > 0;
|
||||
document.getElementById('oc-val-lockcore').textContent = (p.lock_core_max || 0) > 0 ? 'On' : 'Off';
|
||||
document.getElementById('oc-lockmem-toggle').checked = (p.lock_mem_mhz || 0) > 0;
|
||||
document.getElementById('oc-val-lockmem').textContent = (p.lock_mem_mhz || 0) > 0 ? 'On' : 'Off';
|
||||
|
||||
const fanMode = p.fan_mode || 'auto';
|
||||
const profFanMode = document.getElementById('oc-prof-fanmode');
|
||||
if (profFanMode) profFanMode.value = fanMode;
|
||||
const profFanSpeed = document.getElementById('oc-slider-prof-fanspeed');
|
||||
if (profFanSpeed) profFanSpeed.value = p.fan_speed_pct || 70;
|
||||
const profFanVal = document.getElementById('oc-val-prof-fanspeed');
|
||||
if (profFanVal) profFanVal.textContent = (p.fan_speed_pct || 70) + '%';
|
||||
toggleProfileFanMode();
|
||||
}
|
||||
|
||||
function toggleProfileFanMode() {
|
||||
const mode = document.getElementById('oc-prof-fanmode').value;
|
||||
const container = document.getElementById('oc-prof-fanspeed-container');
|
||||
const valBadge = document.getElementById('oc-val-prof-fanmode');
|
||||
if (valBadge) valBadge.textContent = (mode === 'manual') ? 'Manual Target' : 'Auto (VBIOS)';
|
||||
if (container) {
|
||||
if (mode === 'manual') {
|
||||
container.classList.remove('opacity-50', 'pointer-events-none');
|
||||
} else {
|
||||
container.classList.add('opacity-50', 'pointer-events-none');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCoreLock() {
|
||||
document.getElementById('oc-val-lockcore').textContent = document.getElementById('oc-lockcore-toggle').checked ? 'On' : 'Off';
|
||||
}
|
||||
|
||||
function toggleMemLock() {
|
||||
document.getElementById('oc-val-lockmem').textContent = document.getElementById('oc-lockmem-toggle').checked ? 'On' : 'Off';
|
||||
}
|
||||
|
||||
async function setFanManual(speed) {
|
||||
let pct = speed;
|
||||
if (pct === undefined || pct === null) {
|
||||
pct = parseInt(document.getElementById('oc-fan-slider').value);
|
||||
} else {
|
||||
pct = parseInt(pct);
|
||||
const slider = document.getElementById('oc-fan-slider');
|
||||
if (slider) slider.value = pct;
|
||||
const label = document.getElementById('oc-fan-slider-label');
|
||||
if (label) label.textContent = pct + '%';
|
||||
}
|
||||
try {
|
||||
const resp = await fetch('/api/overclock/fan', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ mode: 'manual', percent: pct })
|
||||
});
|
||||
const result = await resp.json();
|
||||
if (!resp.ok) alert(`Fan set failed: ${result.detail || 'error'}`);
|
||||
await fetchOverclockStatus();
|
||||
} catch (err) {
|
||||
alert(`Error setting fan speed: ${err}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function setFanAuto() {
|
||||
try {
|
||||
const resp = await fetch('/api/overclock/fan', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ mode: 'auto' })
|
||||
});
|
||||
const result = await resp.json();
|
||||
if (!resp.ok) alert(`Fan auto failed: ${result.detail || 'error'}`);
|
||||
await fetchOverclockStatus();
|
||||
} catch (err) {
|
||||
alert(`Error setting fan to auto: ${err}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function applyOverclock(profile) {
|
||||
try {
|
||||
const resp = await fetch('/api/overclock/apply', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ profile })
|
||||
});
|
||||
const result = await resp.json();
|
||||
if (!resp.ok) {
|
||||
alert(`Apply failed: ${result.detail || 'error'}`);
|
||||
}
|
||||
await fetchOverclockStatus();
|
||||
} catch (err) {
|
||||
alert(`Error: ${err}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function saveOverclockProfile() {
|
||||
const name = document.getElementById('oc-edit-profile').value;
|
||||
const power = parseInt(document.getElementById('oc-slider-power').value);
|
||||
const core = parseInt(document.getElementById('oc-slider-core').value);
|
||||
const mem = parseInt(document.getElementById('oc-slider-mem').value);
|
||||
const lockCore = document.getElementById('oc-lockcore-toggle').checked;
|
||||
const lockMem = document.getElementById('oc-lockmem-toggle').checked;
|
||||
const fanMode = document.getElementById('oc-prof-fanmode') ? document.getElementById('oc-prof-fanmode').value : 'auto';
|
||||
const fanSpeed = document.getElementById('oc-slider-prof-fanspeed') ? parseInt(document.getElementById('oc-slider-prof-fanspeed').value) : 70;
|
||||
|
||||
const config = {
|
||||
power_limit_w: power,
|
||||
core_offset_mhz: core,
|
||||
mem_offset_mhz: mem,
|
||||
lock_core_min: lockCore ? 2900 : 0,
|
||||
lock_core_max: lockCore ? 3105 : 0,
|
||||
lock_mem_mhz: lockMem ? 11501 : 0,
|
||||
fan_mode: fanMode,
|
||||
fan_speed_pct: (fanMode === 'manual') ? fanSpeed : 0,
|
||||
};
|
||||
|
||||
try {
|
||||
const resp = await fetch(`/api/overclock/profiles/${name}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ config })
|
||||
});
|
||||
const result = await resp.json();
|
||||
if (resp.ok) {
|
||||
await fetchOverclockStatus();
|
||||
await applyOverclock(name);
|
||||
} else {
|
||||
alert(`Save failed: ${result.detail || 'error'}`);
|
||||
}
|
||||
} catch (err) {
|
||||
alert(`Error: ${err}`);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user