Spaces:
Running
Running
File size: 4,363 Bytes
7b4f5dd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | /* ═══════════════════════════════════════════════════════════════
AMDMetricsCard — Live AMD MI300X Performance Metrics
Displays real-time GPU stats streamed via SSE during scans
═══════════════════════════════════════════════════════════════ */
import './AMDMetricsCard.css';
export default function AMDMetricsCard({ amdMetrics, isComplete, scanDuration }) {
if (!amdMetrics) {
return (
<div className="amd-metrics-card">
<div className="amd-header">
<div className="amd-header-left">
<span className="amd-header-icon">⚡</span>
<span className="amd-header-title">AMD MI300X — Live Performance</span>
</div>
<span className="amd-status-dot inactive" />
</div>
<div className="amd-connecting">
<div className="amd-connecting-spinner" />
<span>Connecting to AMD GPU...</span>
</div>
<div className="amd-footer">
Powered by AMD ROCm + HBM3 Architecture
</div>
</div>
);
}
const {
gpu_utilization_percent = 0,
vram_used_gb = 0,
vram_total_gb = 192,
memory_bandwidth_tbs = 0,
temperature_c = 0,
power_draw_w = 0,
tokens_per_sec = 0,
} = amdMetrics;
const vramPercent = vram_total_gb > 0
? Math.round((vram_used_gb / vram_total_gb) * 100)
: 0;
const tempClass = temperature_c >= 75 ? 'temp-hot' : temperature_c >= 60 ? 'temp-warm' : '';
return (
<div className="amd-metrics-card">
{/* Header */}
<div className="amd-header">
<div className="amd-header-left">
<span className="amd-header-icon">⚡</span>
<span className="amd-header-title">AMD MI300X — Live Performance</span>
</div>
<span className={`amd-status-dot ${isComplete ? 'inactive' : ''}`} />
</div>
{/* Completion message */}
{isComplete && scanDuration && (
<div className="amd-complete-msg">
<span>✅</span>
<span>Scan completed in {scanDuration}s on AMD MI300X</span>
</div>
)}
{/* Stats Grid */}
<div className="amd-stats-grid">
{/* GPU Utilization */}
<div className="amd-stat">
<span className="amd-stat-label">GPU Utilization</span>
<span className="amd-stat-value amd-accent">{gpu_utilization_percent}%</span>
</div>
{/* VRAM Used */}
<div className="amd-stat">
<span className="amd-stat-label">VRAM Used</span>
<span className="amd-stat-value">{vram_used_gb} <small style={{ fontSize: '0.65rem', color: 'var(--text-tertiary)' }}>/ {vram_total_gb} GB</small></span>
<div className="amd-vram-bar-track">
<div className="amd-vram-bar-fill" style={{ width: `${vramPercent}%` }} />
</div>
</div>
{/* Memory Bandwidth */}
<div className="amd-stat">
<span className="amd-stat-label">Memory Bandwidth</span>
<span className="amd-stat-value">{memory_bandwidth_tbs} <small style={{ fontSize: '0.65rem', color: 'var(--text-tertiary)' }}>TB/s</small></span>
</div>
{/* Temperature */}
<div className="amd-stat">
<span className="amd-stat-label">Temperature</span>
<span className={`amd-stat-value ${tempClass}`}>{temperature_c}°C</span>
</div>
{/* Power Draw */}
<div className="amd-stat">
<span className="amd-stat-label">Power Draw</span>
<span className="amd-stat-value">{power_draw_w}<small style={{ fontSize: '0.65rem', color: 'var(--text-tertiary)' }}>W</small></span>
</div>
{/* Inference Speed */}
<div className="amd-stat">
<span className="amd-stat-label">Inference Speed</span>
<span className="amd-stat-value speed-fast">{tokens_per_sec} <small style={{ fontSize: '0.65rem', color: 'var(--text-tertiary)' }}>tok/s</small></span>
</div>
</div>
{/* Footer */}
<div className="amd-footer">
Powered by AMD ROCm + HBM3 Architecture
</div>
</div>
);
}
|