480 lines
26 KiB
HTML
480 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>平台性能 - 远光软件微调平台</title>
|
||
<script src="../lib/tailwindcss/tailwind.js"></script>
|
||
<script>
|
||
if (typeof console !== 'undefined' && console.warn) {
|
||
const originalWarn = console.warn;
|
||
console.warn = function(...args) {
|
||
if (args[0] && args[0].includes && args[0].includes('cdn.tailwindcss.com')) {
|
||
return;
|
||
}
|
||
originalWarn.apply(console, args);
|
||
};
|
||
}
|
||
</script>
|
||
<link href="../lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||
<style>
|
||
.sidebar-section-title {
|
||
padding: 0.5rem 1rem;
|
||
font-size: 0.75rem;
|
||
color: rgba(191, 203, 217, 0.7);
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.nav-link:hover {
|
||
background-color: rgba(0, 21, 41, 0.2);
|
||
}
|
||
.sidebar-item-active {
|
||
background-color: rgba(24, 144, 255, 0.1);
|
||
color: #1890ff;
|
||
border-left: 4px solid #1890ff;
|
||
}
|
||
:root { --primary: #1890ff; --danger: #f5222d; --success: #52c41a; }
|
||
.bg-primary { background-color: var(--primary); }
|
||
.text-primary { color: var(--primary); }
|
||
.border-primary { border-color: var(--primary); }
|
||
.hover\:bg-primary\/90:hover { background-color: rgba(24, 144, 255, 0.9); }
|
||
</style>
|
||
</head>
|
||
<body class="antialiased bg-gray-50 flex h-screen overflow-hidden">
|
||
<!-- 侧边导航 -->
|
||
<aside class="w-64 text-[#bfcbd9] flex-shrink-0 hidden md:block flex flex-col h-full" style="background-color: #001529;">
|
||
<!-- 平台LOGO区域 -->
|
||
<div class="pt-5 pb-3 border-b border-[#001529]/30 flex items-center justify-center pl-2">
|
||
<img src="../assets/logo/logo.png" alt="Logo" class="w-8 h-8 object-contain mr-2">
|
||
<span class="text-white font-medium text-base">远光软件微调平台</span>
|
||
</div>
|
||
|
||
<!-- 导航主区域 -->
|
||
<nav class="flex-1 overflow-y-auto py-2 relative">
|
||
<div class="sidebar-section-title">模型服务</div>
|
||
<div class="nav-item-wrapper">
|
||
<a href="main.html?page=fine-tune" data-page="fine-tune" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
|
||
<i class="fa fa-cogs w-5 text-center"></i>
|
||
<span class="ml-2">模型调优</span>
|
||
</a>
|
||
</div>
|
||
<div class="nav-item-wrapper hidden">
|
||
<a href="main.html?page=my-models" data-page="my-models" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
|
||
<i class="fa fa-database w-5 text-center"></i>
|
||
<span class="ml-2">我的模型</span>
|
||
</a>
|
||
</div>
|
||
<div class="nav-item-wrapper">
|
||
<a href="main.html?page=model-eval" data-page="model-eval" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
|
||
<i class="fa fa-line-chart w-5 text-center"></i>
|
||
<span class="ml-2">模型评测</span>
|
||
</a>
|
||
</div>
|
||
<div class="nav-item-wrapper">
|
||
<a href="main.html?page=model-compare" data-page="model-compare" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
|
||
<i class="fa fa-server w-5 text-center"></i>
|
||
<span class="ml-2">模型对比</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="sidebar-section-title mt-6">资源管理</div>
|
||
<div class="nav-item-wrapper">
|
||
<a href="main.html?page=model-manage" data-page="model-manage" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
|
||
<i class="fa fa-cube w-5 text-center"></i>
|
||
<span class="ml-2">模型管理</span>
|
||
</a>
|
||
</div>
|
||
<div class="nav-item-wrapper">
|
||
<a href="main.html?page=dataset-manage" data-page="dataset-manage" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
|
||
<i class="fa fa-file-text w-5 text-center"></i>
|
||
<span class="ml-2">数据集管理</span>
|
||
</a>
|
||
</div>
|
||
<div class="nav-item-wrapper">
|
||
<a href="tools.html" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
|
||
<i class="fa fa-database w-5 text-center"></i>
|
||
<span class="ml-2">其他工具</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="sidebar-section-title mt-6">系统设置</div>
|
||
<div class="nav-item-wrapper">
|
||
<a href="config.html" class="nav-link sidebar-item-active flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
|
||
<i class="fa fa-bar-chart w-5 text-center"></i>
|
||
<span class="ml-2">平台性能</span>
|
||
</a>
|
||
</div>
|
||
<div class="nav-item-wrapper">
|
||
<a href="logs.html" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
|
||
<i class="fa fa-file-text w-5 text-center"></i>
|
||
<span class="ml-2">查看日志</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="p-4 border-t border-[#001529]/30 text-xs mt-auto">
|
||
<div class="mb-2 text-[#bfcbd9]/80">默认业务空间</div>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-[#bfcbd9]">版本 v1.0.0</span>
|
||
<i class="fa fa-question-circle-o text-[#bfcbd9]/70"></i>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="flex-1 flex flex-col overflow-hidden">
|
||
<header class="bg-white border-b border-gray-200 shadow-sm">
|
||
<div class="flex items-center justify-between px-6 h-14">
|
||
<div class="flex items-center space-x-4">
|
||
<a href="main.html" class="text-gray-500 hover:text-gray-700 flex items-center">
|
||
<i class="fa fa-arrow-left"></i>
|
||
<span class="ml-1">返回首页</span>
|
||
</a>
|
||
</div>
|
||
<div class="flex items-center space-x-4">
|
||
<div class="relative group">
|
||
<img src="https://picsum.photos/id/1005/32/32" class="w-8 h-8 rounded-full cursor-pointer" alt="用户头像">
|
||
<div class="absolute right-0 top-full mt-2 bg-white rounded shadow-lg py-1 hidden group-hover:block border border-gray-100 min-w-[140px]">
|
||
<a href="login.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 whitespace-nowrap">
|
||
<i class="fa fa-sign-out mr-1"></i>退出登录
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="flex-1 overflow-y-auto p-6 bg-gray-50">
|
||
<!-- 平台性能页面 -->
|
||
<div class="bg-white rounded-lg shadow-sm">
|
||
<div class="flex items-center justify-between p-4 border-b border-gray-100">
|
||
<h2 class="text-lg font-medium">平台性能</h2>
|
||
<div class="flex items-center text-sm text-gray-500">
|
||
<i class="fa fa-refresh mr-2"></i>
|
||
<span class="mr-2">刷新频率:</span>
|
||
<select id="refreshInterval" onchange="changeRefreshRate()" class="px-2 py-1 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none">
|
||
<option value="1000">1秒</option>
|
||
<option value="3000">3秒</option>
|
||
<option value="5000" selected>5秒</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<!-- 第一行：CPU、内存、磁盘 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||
<!-- CPU监控 -->
|
||
<div class="border border-gray-200 rounded-lg p-5">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center">
|
||
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center mr-3">
|
||
<i class="fa fa-microchip text-blue-600 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-800">CPU 使用率</h3>
|
||
<p class="text-xs text-gray-500" id="cpuCores">4 核心</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-2xl font-medium text-gray-800" id="cpuPercent">0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative h-4 bg-gray-100 rounded-full overflow-hidden">
|
||
<div id="cpuBar" class="absolute left-0 top-0 h-full bg-gradient-to-r from-green-400 to-blue-500 transition-all duration-500" style="width: 0%"></div>
|
||
</div>
|
||
<div class="mt-4 grid grid-cols-4 gap-2" id="cpuCoresList">
|
||
<div class="text-center p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">核心1</div>
|
||
<div class="text-sm font-medium text-gray-800" id="core1">0%</div>
|
||
</div>
|
||
<div class="text-center p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">核心2</div>
|
||
<div class="text-sm font-medium text-gray-800" id="core2">0%</div>
|
||
</div>
|
||
<div class="text-center p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">核心3</div>
|
||
<div class="text-sm font-medium text-gray-800" id="core3">0%</div>
|
||
</div>
|
||
<div class="text-center p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">核心4</div>
|
||
<div class="text-sm font-medium text-gray-800" id="core4">0%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内存监控 -->
|
||
<div class="border border-gray-200 rounded-lg p-5">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center">
|
||
<div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center mr-3">
|
||
<i class="fa fa-database text-purple-600 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-800">内存使用</h3>
|
||
<p class="text-xs text-gray-500" id="memoryTotal">总计: 16 GB</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-2xl font-medium text-gray-800" id="memoryPercent">0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative h-4 bg-gray-100 rounded-full overflow-hidden">
|
||
<div id="memoryBar" class="absolute left-0 top-0 h-full bg-gradient-to-r from-yellow-400 to-orange-500 transition-all duration-500" style="width: 0%"></div>
|
||
</div>
|
||
<div class="mt-4 flex justify-between text-sm">
|
||
<div class="text-center">
|
||
<div class="text-xs text-gray-500">已用</div>
|
||
<div class="text-sm font-medium text-gray-800" id="memoryUsed">0 GB</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-xs text-gray-500">可用</div>
|
||
<div class="text-sm font-medium text-gray-800" id="memoryAvailable">0 GB</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-xs text-gray-500">缓存</div>
|
||
<div class="text-sm font-medium text-gray-800" id="memoryCached">0 GB</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 磁盘监控 -->
|
||
<div class="border border-gray-200 rounded-lg p-5">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center">
|
||
<div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center mr-3">
|
||
<i class="fa fa-hdd-o text-green-600 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-800">磁盘使用</h3>
|
||
<p class="text-xs text-gray-500" id="diskTotal">SSD 512 GB</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-2xl font-medium text-gray-800" id="diskPercent">0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative h-4 bg-gray-100 rounded-full overflow-hidden">
|
||
<div id="diskBar" class="absolute left-0 top-0 h-full bg-gradient-to-r from-emerald-400 to-teal-500 transition-all duration-500" style="width: 0%"></div>
|
||
</div>
|
||
<div class="mt-4 grid grid-cols-3 gap-2 text-center">
|
||
<div class="p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">已用空间</div>
|
||
<div class="text-sm font-medium text-gray-800" id="diskUsed">0 GB</div>
|
||
</div>
|
||
<div class="p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">可用空间</div>
|
||
<div class="text-sm font-medium text-gray-800" id="diskAvailable">0 GB</div>
|
||
</div>
|
||
<div class="p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">读写速度</div>
|
||
<div class="text-sm font-medium text-gray-800" id="diskSpeed">0 MB/s</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二行：GPU监控 -->
|
||
<div class="border border-gray-200 rounded-lg p-5 mb-6">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center mr-3">
|
||
<i class="fa fa-microchip text-red-600 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-800">GPU监控</h3>
|
||
<p class="text-xs text-gray-500" id="gpuCount">检测中...</p>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="gpuList" style="max-height: 400px; overflow-y: auto;">
|
||
<!-- GPU卡片动态生成 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统信息 -->
|
||
<div class="border border-gray-200 rounded-lg p-5">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center mr-3">
|
||
<i class="fa fa-info-circle text-indigo-600 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-800">系统信息</h3>
|
||
<p class="text-xs text-gray-500">服务器状态</p>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-3 text-sm">
|
||
<div class="flex justify-between py-2 border-b border-gray-100">
|
||
<span class="text-gray-500">操作系统</span>
|
||
<span class="text-gray-800 font-medium" id="osInfo">Ubuntu 22.04 LTS</span>
|
||
</div>
|
||
<div class="flex justify-between py-2 border-b border-gray-100">
|
||
<span class="text-gray-500">运行时间</span>
|
||
<span class="text-gray-800 font-medium" id="uptime">0 天 0 时 0 分</span>
|
||
</div>
|
||
<div class="flex justify-between py-2 border-b border-gray-100">
|
||
<span class="text-gray-500">进程数</span>
|
||
<span class="text-gray-800 font-medium" id="processCount">0</span>
|
||
</div>
|
||
<div class="flex justify-between py-2">
|
||
<span class="text-gray-500">负载均值</span>
|
||
<span class="text-gray-800 font-medium" id="loadAvg">0.00, 0.00, 0.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
// API 配置
|
||
const API_BASE = (() => {
|
||
const protocol = window.location.protocol;
|
||
const hostname = window.location.hostname;
|
||
return `${protocol}//${hostname}:7861/api`;
|
||
})();
|
||
|
||
let refreshTimer = null;
|
||
let currentRefreshInterval = 5000;
|
||
|
||
// 获取系统信息
|
||
async function fetchSystemInfo() {
|
||
try {
|
||
const response = await fetch(`${API_BASE}/system-info`);
|
||
const result = await response.json();
|
||
if (result.code === 0 && result.data) {
|
||
updateUI(result.data);
|
||
}
|
||
} catch (error) {
|
||
console.error('获取系统信息失败:', error);
|
||
}
|
||
}
|
||
|
||
// 更新界面
|
||
function updateUI(data) {
|
||
// CPU
|
||
const cpu = data.cpu || {};
|
||
const cpuPercent = cpu.percent || 0;
|
||
document.getElementById('cpuPercent').textContent = cpuPercent + '%';
|
||
document.getElementById('cpuBar').style.width = cpuPercent + '%';
|
||
document.getElementById('cpuCores').textContent = (cpu.cores || 0) + ' 核心';
|
||
|
||
// 内存
|
||
const mem = data.memory || {};
|
||
const memUsed = mem.used_gb || 0;
|
||
const memTotal = mem.total_gb || 0;
|
||
const memPercent = mem.percent || 0;
|
||
document.getElementById('memoryPercent').textContent = memPercent + '%';
|
||
document.getElementById('memoryBar').style.width = memPercent + '%';
|
||
document.getElementById('memoryUsed').textContent = memUsed + ' GB';
|
||
document.getElementById('memoryAvailable').textContent = (mem.available_gb || 0) + ' GB';
|
||
document.getElementById('memoryCached').textContent = (mem.cached_gb || 0) + ' GB';
|
||
|
||
// 磁盘
|
||
const disk = data.disk || {};
|
||
const diskUsed = disk.used_gb || 0;
|
||
const diskTotal = disk.total_gb || 0;
|
||
const diskPercent = disk.percent || 0;
|
||
document.getElementById('diskPercent').textContent = diskPercent + '%';
|
||
document.getElementById('diskBar').style.width = diskPercent + '%';
|
||
document.getElementById('diskUsed').textContent = diskUsed + ' GB';
|
||
document.getElementById('diskAvailable').textContent = (diskTotal - diskUsed) + ' GB';
|
||
|
||
// 系统
|
||
const sys = data.system || {};
|
||
const uptime = sys.uptime_seconds || 0;
|
||
const days = Math.floor(uptime / 86400);
|
||
const hours = Math.floor((uptime % 86400) / 3600);
|
||
const mins = Math.floor((uptime % 3600) / 60);
|
||
document.getElementById('uptime').textContent = days + ' 天 ' + hours + ' 时 ' + mins + ' 分';
|
||
document.getElementById('processCount').textContent = sys.process_count || 0;
|
||
|
||
// GPU
|
||
updateGPUInfo(data.gpu || []);
|
||
}
|
||
|
||
// 更新GPU信息
|
||
function updateGPUInfo(gpuData) {
|
||
const gpuList = document.getElementById('gpuList');
|
||
if (!gpuList) return;
|
||
|
||
if (gpuData && gpuData.length > 0) {
|
||
document.getElementById('gpuCount').textContent = `检测到 ${gpuData.length} 块 GPU`;
|
||
let html = '';
|
||
gpuData.forEach((gpu, i) => {
|
||
html += `
|
||
<div class="border border-gray-200 rounded-lg p-2 bg-gradient-to-br from-gray-50 to-gray-100">
|
||
<div class="flex items-center justify-between mb-1">
|
||
<div class="flex items-center min-w-0">
|
||
<div class="w-6 h-6 rounded bg-red-100 flex items-center justify-center mr-2 flex-shrink-0">
|
||
<i class="fa fa-microchip text-red-600 text-xs"></i>
|
||
</div>
|
||
<div class="min-w-0">
|
||
<div class="text-xs font-medium text-gray-800 truncate" title="${gpu.name}">${gpu.name}</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-sm font-bold text-gray-800">${gpu.gpu_percent}%</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative h-1.5 bg-gray-200 rounded-full overflow-hidden">
|
||
<div class="absolute left-0 top-0 h-full bg-gradient-to-r from-green-400 via-yellow-400 to-red-400 transition-all duration-500" style="width: ${gpu.gpu_percent}%"></div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 text-center text-[10px] mt-1">
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">显存</div>
|
||
<div class="font-medium text-gray-700">${gpu.memory_used_gb}/${gpu.memory_total_gb} GB</div>
|
||
</div>
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">温度</div>
|
||
<div class="font-medium ${gpu.temperature >= 80 ? 'text-red-600' : gpu.temperature >= 70 ? 'text-yellow-600' : 'text-gray-700'}">${gpu.temperature}°C</div>
|
||
</div>
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">功耗</div>
|
||
<div class="font-medium text-gray-700">${gpu.power_w} W</div>
|
||
</div>
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">Fan</div>
|
||
<div class="font-medium text-gray-700">${gpu.fan_speed || 0}%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
gpuList.innerHTML = html;
|
||
} else {
|
||
document.getElementById('gpuCount').textContent = '未检测到 GPU';
|
||
gpuList.innerHTML = '<p class="text-gray-400 text-sm p-4">未检测到 GPU 设备</p>';
|
||
}
|
||
}
|
||
|
||
// 改变刷新频率
|
||
function changeRefreshRate() {
|
||
const select = document.getElementById('refreshInterval');
|
||
currentRefreshInterval = parseInt(select.value);
|
||
startRefreshTimer();
|
||
}
|
||
|
||
// 启动定时器
|
||
function startRefreshTimer() {
|
||
if (refreshTimer) {
|
||
clearInterval(refreshTimer);
|
||
}
|
||
refreshTimer = setInterval(fetchSystemInfo, currentRefreshInterval);
|
||
}
|
||
|
||
// 初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
fetchSystemInfo();
|
||
startRefreshTimer();
|
||
});
|
||
|
||
// 页面离开时清理
|
||
window.addEventListener('beforeunload', function() {
|
||
if (refreshTimer) {
|
||
clearInterval(refreshTimer);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|