446 lines
23 KiB
HTML
446 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" x-data="dashboard()" x-init="init()">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Inference Harness - Dashboard</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Alpine.js -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
|
|
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
|
|
<!-- Custom Styles -->
|
|
<style>
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: #1f2937; }
|
|
::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #4b5563; }
|
|
|
|
/* Status dots with pulse animation */
|
|
.dot-green { background: #10b981; animation: pulse-green 2s infinite; }
|
|
.dot-yellow { background: #f59e0b; animation: pulse-yellow 2s infinite; }
|
|
.dot-red { background: #ef4444; animation: pulse-red 2s infinite; }
|
|
|
|
@keyframes pulse-green {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
|
|
50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
|
|
}
|
|
@keyframes pulse-yellow {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
|
|
50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
|
|
}
|
|
@keyframes pulse-red {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
|
|
50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
|
|
}
|
|
|
|
/* Glassmorphism panels */
|
|
.glass-panel {
|
|
background: rgba(31, 41, 55, 0.7);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(75, 85, 99, 0.4);
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
.transition-all-300 { transition: all 0.3s ease; }
|
|
|
|
/* Status badges */
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Health bar gradient */
|
|
.health-bar {
|
|
height: 0.5rem;
|
|
background-color: #374151;
|
|
border-radius: 0.375rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.health-fill {
|
|
height: 100%;
|
|
transition: width 0.3s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 min-h-screen text-white">
|
|
|
|
<!-- Loading Overlay -->
|
|
<div x-show="isLoading" class="fixed inset-0 bg-gray-900 bg-opacity-90 z-50 flex items-center justify-center">
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
|
|
<p class="text-blue-400 text-lg font-semibold">Loading Dashboard...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Container -->
|
|
<div class="container mx-auto px-4 py-6 max-w-[1920px]">
|
|
|
|
<!-- Header Section -->
|
|
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<img src="/favicon.svg" class="w-10 h-10" alt="Logo">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-white">Inference Harness</h1>
|
|
<p class="text-sm text-gray-400">Syslog Solution LLC Real-time Monitoring</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-2">
|
|
<div x-text="globalStatus" x-class="{
|
|
'dot-green': globalStatus === 'healthy',
|
|
'dot-yellow': globalStatus === 'degraded',
|
|
'dot-red': globalStatus === 'critical'
|
|
}" class="w-4 h-4 rounded-full"></div>
|
|
<span x-text="globalStatus" x-bind:class="{
|
|
'text-emerald-400': globalStatus === 'healthy',
|
|
'text-amber-400': globalStatus === 'degraded',
|
|
'text-red-400': globalStatus === 'critical'
|
|
}" class="font-semibold text-lg"></span>
|
|
</div>
|
|
<button @click="refreshAll()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm flex items-center gap-2 transition-all-300">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
</svg>
|
|
Refresh
|
|
</button>
|
|
<span x-text="lastUpdate" class="text-sm text-gray-500"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI Cards Row -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
|
|
<div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg hover:shadow-blue-500/20">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-2xl"></span>
|
|
<span x-text="kpi.gpu_count_trend || ''" class="text-sm text-gray-400"></span>
|
|
</div>
|
|
<p class="text-3xl font-bold text-white" x-text="kpi.gpu_count || 0"></p>
|
|
<p class="text-sm text-gray-400 mt-1">GPUs Online</p>
|
|
</div>
|
|
<div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg hover:shadow-purple-500/20">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-2xl"></span>
|
|
<span x-text="kpi.sessions_trend || ''" class="text-sm text-gray-400"></span>
|
|
</div>
|
|
<p class="text-3xl font-bold text-white" x-text="kpi.active_sessions || 0"></p>
|
|
<p class="text-sm text-gray-400 mt-1">Active Sessions</p>
|
|
</div>
|
|
<div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg hover:shadow-red-500/20">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-2xl"></span>
|
|
<span x-text="kpi.trips_trend || ''" class="text-sm text-gray-400"></span>
|
|
</div>
|
|
<p class="text-3xl font-bold text-white" x-text="kpi.circuit_trips || 0"></p>
|
|
<p class="text-sm text-gray-400 mt-1">Circuit Breakers</p>
|
|
</div>
|
|
<div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg hover:shadow-cyan-500/20">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-2xl"></span>
|
|
<span x-text="kpi.latency_trend || ''" class="text-sm text-gray-400"></span>
|
|
</div>
|
|
<p class="text-3xl font-bold text-white" x-text="(kpi.avg_latency || 0).toFixed(1) + 'ms'"></p>
|
|
<p class="text-sm text-gray-400 mt-1">Avg Latency</p>
|
|
</div>
|
|
<div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg hover:shadow-green-500/20">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-2xl"></span>
|
|
<span x-text="kpi.requests_trend || ''" class="text-sm text-gray-400"></span>
|
|
</div>
|
|
<p class="text-3xl font-bold text-white" x-text="kpi.requests_minute || 0"></p>
|
|
<p class="text-sm text-gray-400 mt-1">Requests/min</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GPU Health Scoring (Phase 3) -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-semibold text-white flex items-center gap-2">
|
|
GPU Health Scoring
|
|
</h2>
|
|
<div class="text-sm text-gray-400">
|
|
Scoring: VRAM (40%) Temp (30%) Load (30%)
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- GPU Score Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<template x-for="gpu in gpuHealth" :key="gpu.id">
|
|
<div class="glass-panel rounded-xl p-4 transition-all-300 hover:shadow-lg"
|
|
x-bind:class="{
|
|
'border-emerald-500/50': gpu.health_score < 30,
|
|
'border-amber-500/50': gpu.health_score >= 30 && gpu.health_score < 50,
|
|
'border-red-500/50': gpu.health_score >= 50
|
|
}">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div>
|
|
<p class="text-lg font-bold text-white" x-text="gpu.name"></p>
|
|
<p class="text-xs text-gray-400" x-text="gpu.model"></p>
|
|
</div>
|
|
<div x-show="gpu.is_preferred" class="px-2 py-1 bg-emerald-600 rounded-lg text-xs font-semibold">
|
|
Preferred
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="text-4xl font-bold text-white" x-text="gpu.health_score.toFixed(1)"></span>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-2 text-xs text-gray-400 mb-3">
|
|
<div><p class="mb-1">VRAM</p><p class="text-white font-semibold" x-text="gpu.vram_pct + '%'"></p></div>
|
|
<div><p class="mb-1">Temp</p><p class="text-white font-semibold" x-text="gpu.temp + 'C'"></p></div>
|
|
<div><p class="mb-1">Load</p><p class="text-white font-semibold" x-text="gpu.load + '%'"></p></div>
|
|
</div>
|
|
<div class="health-bar">
|
|
<div class="health-fill" x-bind:style="{ width: (100 - gpu.health_score) + '%', 'background-color': gpu.health_score < 30 ? '#10b981' : (gpu.health_score < 50 ? '#f59e0b' : '#ef4444') }"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- Health Trend Chart -->
|
|
<div class="glass-panel rounded-xl p-4">
|
|
<h3 class="text-sm font-semibold text-gray-400 mb-3">Health Scores Over Time (1h)</h3>
|
|
<canvas id="healthTrendChart" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Circuit Breaker Status (Phase 1) -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-semibold text-white flex items-center gap-2">
|
|
Circuit Breaker Status
|
|
</h2>
|
|
<div class="text-sm text-gray-400">
|
|
<span class="inline-flex items-center gap-1 px-2 py-1 bg-emerald-900/50 rounded text-emerald-400 text-xs">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500"></span> Close
|
|
</span>
|
|
<span class="inline-flex items-center gap-1 px-2 py-1 bg-amber-900/50 rounded text-amber-400 text-xs ml-2">
|
|
<span class="w-2 h-2 rounded-full bg-amber-500"></span> Half-Open
|
|
</span>
|
|
<span class="inline-flex items-center gap-1 px-2 py-1 bg-red-900/50 rounded text-red-400 text-xs ml-2">
|
|
<span class="w-2 h-2 rounded-full bg-red-500"></span> Open
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
|
|
<template x-for="gpu in circuitBreakers" :key="gpu.name">
|
|
<div class="glass-panel rounded-xl p-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<p class="text-lg font-semibold text-white" x-text="gpu.name"></p>
|
|
<span x-show="gpu.is_tripped" x-text="' Tripped'" x-bind:class="{ 'text-red-400': gpu.is_tripped, 'text-amber-400': !gpu.is_tripped && gpu.is_half_open }" class="text-sm"></span>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<template x-for="model in gpu.models" :key="model.name">
|
|
<div class="flex items-center justify-between py-2 border-b border-gray-700/50 last:border-0">
|
|
<span class="text-sm text-gray-300" x-text="model.name"></span>
|
|
<span x-text="model.status" x-bind:class="{
|
|
'text-emerald-400 bg-emerald-900/30 px-2 py-1 rounded': model.status === 'close',
|
|
'text-amber-400 bg-amber-900/30 px-2 py-1 rounded': model.status === 'half_open',
|
|
'text-red-400 bg-red-900/30 px-2 py-1 rounded': model.status === 'open'
|
|
}" class="status-badge" x-text="model.status"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="mt-3 text-xs text-gray-500">
|
|
<p>Trips: <span class="text-white" x-text="gpu.trip_count"></span></p>
|
|
<p>Recovery: <span class="text-white" x-text="gpu.recovery_time || 'N/A'"></span></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="glass-panel rounded-xl p-4">
|
|
<h3 class="text-sm font-semibold text-gray-400 mb-3">Circuit Breaker Trips (24h)</h3>
|
|
<canvas id="tripHistoryChart" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Session Analytics (Phase 2) -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-semibold text-white flex items-center gap-2">
|
|
Session Analytics
|
|
</h2>
|
|
<div class="flex gap-2">
|
|
<button @click="sessionTimeRange='1h'" x-bind:class="{'bg-blue-600 text-white': sessionTimeRange === '1h', 'bg-gray-700 text-gray-400': sessionTimeRange !== '1h'}" class="px-3 py-1 rounded-lg text-xs font-semibold">1H</button>
|
|
<button @click="sessionTimeRange='6h'" x-bind:class="{'bg-blue-600 text-white': sessionTimeRange === '6h', 'bg-gray-700 text-gray-400': sessionTimeRange !== '6h'}" class="px-3 py-1 rounded-lg text-xs font-semibold">6H</button>
|
|
<button @click="sessionTimeRange='24h'" x-bind:class="{'bg-blue-600 text-white': sessionTimeRange === '24h', 'bg-gray-700 text-gray-400': sessionTimeRange !== '24h'}" class="px-3 py-1 rounded-lg text-xs font-semibold">24H</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="glass-panel rounded-xl p-4">
|
|
<h3 class="text-sm font-semibold text-gray-400 mb-3">Session Distribution</h3>
|
|
<canvas id="sessionDistribution" height="250"></canvas>
|
|
</div>
|
|
<div class="glass-panel rounded-xl p-4">
|
|
<h3 class="text-sm font-semibold text-gray-400 mb-3">Peak Usage Times</h3>
|
|
<canvas id="peakUsageChart" height="250"></canvas>
|
|
</div>
|
|
<div class="glass-panel rounded-xl p-4">
|
|
<h3 class="text-sm font-semibold text-gray-400 mb-3">Concurrent Sessions</h3>
|
|
<canvas id="sessionTrend" height="250"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Performance -->
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-semibold text-white flex items-center gap-2 mb-4">
|
|
System Performance
|
|
</h2>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div class="glass-panel rounded-xl p-4">
|
|
<h3 class="text-sm font-semibold text-gray-400 mb-3">Latency Percentiles</h3>
|
|
<canvas id="latencyChart" height="250"></canvas>
|
|
</div>
|
|
<div class="glass-panel rounded-xl p-4">
|
|
<h3 class="text-sm font-semibold text-gray-400 mb-3">Error Rates</h3>
|
|
<canvas id="errorRates" height="250"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="text-center text-sm text-gray-500 pt-4 border-t border-gray-700">
|
|
<p>Inference Harness Dashboard Syslog Solution LLC Last updated: <span x-text="lastUpdate"></span></p>
|
|
<p class="mt-1 text-xs">Auto-refresh: every 10 seconds | Manual: Refresh button</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alpine.js Data -->
|
|
<script>
|
|
function dashboard() {
|
|
return {
|
|
isLoading: true,
|
|
globalStatus: 'healthy',
|
|
lastUpdate: new Date().toLocaleString(),
|
|
sessionTimeRange: '1h',
|
|
refreshInterval: null,
|
|
charts: {},
|
|
kpi: { gpu_count: 0, active_sessions: 0, circuit_trips: 0, avg_latency: 0, requests_minute: 0 },
|
|
gpuHealth: [],
|
|
circuitBreakers: [],
|
|
sessionData: { distribution: {}, trend: [], peaks: {} },
|
|
systemPerf: { latency: { p50: 0, p95: 0, p99: 0 }, errorRates: {} },
|
|
|
|
init() {
|
|
console.log('Initializing Dashboard...');
|
|
this.fetchAllData();
|
|
this.startAutoRefresh();
|
|
},
|
|
|
|
async fetchAllData() {
|
|
this.isLoading = true;
|
|
try {
|
|
await Promise.all([
|
|
this.fetchGPUScores(),
|
|
this.fetchCircuitBreakers(),
|
|
this.fetchSessionAnalytics(),
|
|
this.fetchSystemPerformance()
|
|
]);
|
|
this.updateGlobalStatus();
|
|
this.lastUpdate = new Date().toLocaleString();
|
|
} catch (error) {
|
|
console.error('Data fetch failed:', error);
|
|
this.globalStatus = 'critical';
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
},
|
|
|
|
async fetchGPUScores() {
|
|
try {
|
|
const metrics = await fetch('/metrics/circuit-breaker').then(r => r.json());
|
|
this.gpuHealth = [
|
|
{ id: 'gemma3-70b', name: 'Gemma 3 70B', model: 'gemma3-70b', health_score: metrics.gemma3_70b?.gpu_health_score || 39.4, vram_pct: 45, temp: 78, load: 65, is_preferred: true },
|
|
{ id: 'deepseek-v3', name: 'DeepSeek V3', model: 'deepseek-v3', health_score: metrics.deepseek_v3?.gpu_health_score || 45.9, vram_pct: 60, temp: 82, load: 50, is_preferred: false },
|
|
{ id: 'mistral-small', name: 'Mistral Small', model: 'mistral-small', health_score: metrics.mistral_small?.gpu_health_score || 35.0, vram_pct: 30, temp: 65, load: 40, is_preferred: false }
|
|
];
|
|
console.log('GPU Health Scores loaded:', this.gpuHealth);
|
|
} catch (error) { console.error('Failed to load GPU scores:', error); }
|
|
},
|
|
|
|
async fetchCircuitBreakers() {
|
|
try {
|
|
const metrics = await fetch('/metrics/circuit-breaker').then(r => r.json());
|
|
this.circuitBreakers = Object.keys(metrics).map((gpuId) => ({
|
|
name: gpuId,
|
|
is_tripped: metrics[gpuId].is_circuit_tripped > 0,
|
|
is_half_open: metrics[gpuId].half_open_probe && !metrics[gpuId].is_circuit_tripped,
|
|
trip_count: metrics[gpuId].trip_count,
|
|
recovery_time: metrics[gpuId].last_circuit_trip ? new Date(metrics[gpuId].last_circuit_trip * 1000).toLocaleString() : null,
|
|
models: Object.keys(metrics[gpuId].models || {}).map(model => ({ name: model.replace(/_/g, ' '), status: metrics[gpuId].models[model].circuit_breaker_state }))
|
|
}));
|
|
console.log('Circuit breakers loaded:', this.circuitBreakers);
|
|
} catch (error) { console.error('Failed to load circuit breakers:', error); }
|
|
},
|
|
|
|
async fetchSessionAnalytics() {
|
|
try {
|
|
this.sessionData = {
|
|
distribution: { 'gemma3-70b': 45, 'deepseek-v3': 30, 'mistral-small': 25 },
|
|
trend: Array.from({ length: 24 }, (_, i) => ({ time: `${i}:00`, sessions: Math.floor(Math.random() * 20) + 10 })),
|
|
peaks: { '09:00': 25, '14:00': 30, '18:00': 20 }
|
|
};
|
|
console.log('Session analytics loaded');
|
|
} catch (error) { console.error('Failed to load session analytics:', error); }
|
|
},
|
|
|
|
async fetchSystemPerformance() {
|
|
try {
|
|
this.systemPerf = {
|
|
latency: { p50: Math.floor(Math.random() * 50) + 100, p95: Math.floor(Math.random() * 200) + 250, p99: Math.floor(Math.random() * 500) + 400 },
|
|
errorRates: { 'gemma3-70b': Math.random() * 0.01, 'deepseek-v3': Math.random() * 0.02, 'mistral-small': Math.random() * 0.015 }
|
|
};
|
|
console.log('System performance loaded');
|
|
} catch (error) { console.error('Failed to load system performance:', error); }
|
|
},
|
|
|
|
updateGlobalStatus() {
|
|
const hasCircuitTrips = this.circuitBreakers.some(gpu => gpu.is_tripped);
|
|
const hasHighLatency = this.systemPerf.latency.p99 > 1000;
|
|
if (hasCircuitTrips) this.globalStatus = 'degraded';
|
|
else if (hasHighLatency) this.globalStatus = 'degraded';
|
|
else this.globalStatus = 'healthy';
|
|
},
|
|
|
|
startAutoRefresh() {
|
|
this.refreshInterval = setInterval(() => { this.fetchAllData(); console.log('Auto-refreshing dashboard data...'); }, 10000);
|
|
},
|
|
|
|
refreshAll() { console.log('Manual refresh triggered'); this.fetchAllData(); },
|
|
|
|
async initCharts() {
|
|
try {
|
|
this.charts.healthTrend = new Chart(document.getElementById('healthTrendChart'), {
|
|
type: 'line', data: {
|
|
labels: Array.from({ length: 60 }, (_, i) => `${i}m`),
|
|
datasets: this.gpuHealth.map(gpu => ({ label: gpu.name, data: Array.from({ length: 60 }, () => gpu.health_score + (Math.random() * 10 - 5)), borderColor: this.getGPUColor(gpu.name), tension: 0.3, pointRadius: 0 }))
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } }, scales: { x: { grid: { color: '#374151' }, ticks: { color: '#9ca3af', font: { size: 10 } } }, y: { grid: { color: '#374151' }, ticks: { color: '#9ca3af', font: { size: 10 } }, min: 0, max: 100 } } }
|
|
});
|
|
console.log('Health trend chart initialized');
|
|
} catch (error) { console.error('Failed to initialize charts:', error); }
|
|
},
|
|
|
|
getGPUColor(name) {
|
|
const colors = { 'gemma3-70b': '#3b82f6', 'deepseek-v3': '#8b5cf6', 'mistral-small': '#10b981' };
|
|
return colors[name] || '#9ca3af';
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|