1. main.html 页面修改，拆解功能
This commit is contained in:
479
web/pages/hardware.html
Normal file
479
web/pages/hardware.html
Normal file
@@ -0,0 +1,479 @@
|
||||
<!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>
|
||||
434
web/pages/logs.html
Normal file
434
web/pages/logs.html
Normal file
@@ -0,0 +1,434 @@
|
||||
<!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="hardware.html" class="nav-link 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 sidebar-item-active 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 space-x-2">
|
||||
<button onclick="refreshLogs()" class="px-3 py-1.5 text-sm bg-primary text-white rounded hover:bg-primary/90 transition-colors">
|
||||
<i class="fa fa-refresh mr-1"></i>刷新
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<!-- 日志选项 -->
|
||||
<div class="flex items-center flex-wrap gap-4 mb-4">
|
||||
<div class="flex items-center">
|
||||
<label class="text-sm text-gray-600 mr-3">选择日期:</label>
|
||||
<input type="date" id="logDatePicker" class="px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none">
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label class="text-sm text-gray-600 mr-3">自动刷新:</label>
|
||||
<select id="logRefreshInterval" onchange="setRefreshInterval()" class="px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none">
|
||||
<option value="0">关闭</option>
|
||||
<option value="5">5秒</option>
|
||||
<option value="10" selected>10秒</option>
|
||||
<option value="30">30秒</option>
|
||||
<option value="60">60秒</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="logRefreshCountdown" class="text-sm text-gray-500 hidden">
|
||||
<i class="fa fa-clock-o mr-1"></i><span>下次刷新: <span id="countdownNumber">10</span>秒</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mb-4">
|
||||
<label class="text-sm text-gray-600 mr-3">日志类型:</label>
|
||||
<select id="logTypeSelect" onchange="loadSelectedLog()" class="px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none">
|
||||
<option value="">请选择日志文件</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 日志内容显示 -->
|
||||
<div class="border border-gray-200 rounded-lg">
|
||||
<div class="flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-200">
|
||||
<span class="text-sm text-gray-600" id="logFileInfo">请选择日志文件</span>
|
||||
<div class="flex items-center space-x-3">
|
||||
<input type="text" id="logSearchInput" placeholder="搜索日志..." oninput="filterLogContent()" class="px-2 py-1 text-xs border border-gray-300 rounded focus:border-primary focus:outline-none">
|
||||
<span id="logMatchCount" class="text-xs text-gray-500"></span>
|
||||
<button onclick="clearLogContent()" class="text-xs text-gray-500 hover:text-primary">清空</button>
|
||||
</div>
|
||||
</div>
|
||||
<pre id="logContent" class="p-4 text-xs font-mono bg-gray-900 text-gray-100 overflow-auto max-h-[600px]" style="white-space: pre-wrap; word-wrap: break-word;">日志内容将在这里显示...</pre>
|
||||
</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 logRefreshTimer = null;
|
||||
let logCountdownTimer = null;
|
||||
let logCurrentInterval = 10;
|
||||
let logFullContent = '';
|
||||
|
||||
// 设置自动刷新间隔
|
||||
function setRefreshInterval() {
|
||||
const select = document.getElementById('logRefreshInterval');
|
||||
const countdownEl = document.getElementById('logRefreshCountdown');
|
||||
const secondsEl = document.getElementById('countdownNumber');
|
||||
|
||||
if (!select) return;
|
||||
|
||||
logCurrentInterval = parseInt(select.value) || 10;
|
||||
|
||||
if (logRefreshTimer) {
|
||||
clearInterval(logRefreshTimer);
|
||||
logRefreshTimer = null;
|
||||
}
|
||||
if (logCountdownTimer) {
|
||||
clearInterval(logCountdownTimer);
|
||||
logCountdownTimer = null;
|
||||
}
|
||||
|
||||
if (select.value === '0') {
|
||||
countdownEl.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
countdownEl.classList.remove('hidden');
|
||||
secondsEl.textContent = logCurrentInterval;
|
||||
|
||||
let countdown = logCurrentInterval;
|
||||
logCountdownTimer = setInterval(() => {
|
||||
countdown--;
|
||||
if (countdown <= 0) {
|
||||
countdown = logCurrentInterval;
|
||||
}
|
||||
secondsEl.textContent = countdown;
|
||||
}, 1000);
|
||||
|
||||
logRefreshTimer = setInterval(() => {
|
||||
refreshLogs();
|
||||
}, logCurrentInterval * 1000);
|
||||
}
|
||||
|
||||
// 刷新日志
|
||||
function refreshLogs() {
|
||||
if (document.getElementById('logTypeSelect')?.value) {
|
||||
loadSelectedLog();
|
||||
} else {
|
||||
loadLogFiles();
|
||||
}
|
||||
const secondsEl = document.getElementById('countdownNumber');
|
||||
if (secondsEl && logCurrentInterval) {
|
||||
secondsEl.textContent = logCurrentInterval;
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动到日志底部
|
||||
function scrollToLogBottom() {
|
||||
const logContent = document.getElementById('logContent');
|
||||
if (logContent) {
|
||||
logContent.scrollTop = logContent.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化日志查看器
|
||||
function initLogViewer() {
|
||||
const datePicker = document.getElementById('logDatePicker');
|
||||
if (datePicker) {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
datePicker.value = today;
|
||||
}
|
||||
loadLogFiles();
|
||||
setRefreshInterval();
|
||||
}
|
||||
|
||||
// 加载日志文件列表
|
||||
async function loadLogFiles() {
|
||||
const datePicker = document.getElementById('logDatePicker');
|
||||
const logTypeSelect = document.getElementById('logTypeSelect');
|
||||
const selectedDate = datePicker ? datePicker.value : new Date().toISOString().split('T')[0];
|
||||
|
||||
if (!logTypeSelect) return;
|
||||
logTypeSelect.innerHTML = '<option value="">加载中...</option>';
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/log-files?date=${selectedDate}`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 0 && result.data) {
|
||||
logTypeSelect.innerHTML = '<option value="">请选择日志文件</option>';
|
||||
result.data.forEach(log => {
|
||||
const option = document.createElement('option');
|
||||
option.value = log.file;
|
||||
option.textContent = log.name + ' (' + log.size + ')';
|
||||
logTypeSelect.appendChild(option);
|
||||
});
|
||||
if (result.data.length > 0) {
|
||||
logTypeSelect.value = result.data[0].file;
|
||||
loadSelectedLog();
|
||||
} else {
|
||||
logTypeSelect.innerHTML = '<option value="">暂无日志文件</option>';
|
||||
document.getElementById('logContent').textContent = '该日期暂无日志文件';
|
||||
document.getElementById('logFileInfo').textContent = '无日志文件';
|
||||
}
|
||||
} else {
|
||||
logTypeSelect.innerHTML = '<option value="">暂无日志文件</option>';
|
||||
document.getElementById('logContent').textContent = '该日期暂无日志文件';
|
||||
document.getElementById('logFileInfo').textContent = '无日志文件';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载日志文件列表失败:', error);
|
||||
logTypeSelect.innerHTML = '<option value="">加载失败</option>';
|
||||
document.getElementById('logContent').textContent = '加载日志文件列表失败: ' + error.message;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载选中的日志
|
||||
async function loadSelectedLog() {
|
||||
const logTypeSelect = document.getElementById('logTypeSelect');
|
||||
const logFile = logTypeSelect.value;
|
||||
const logContent = document.getElementById('logContent');
|
||||
const logFileInfo = document.getElementById('logFileInfo');
|
||||
|
||||
if (!logFile) {
|
||||
logContent.textContent = '请选择日志文件';
|
||||
logFileInfo.textContent = '无日志文件';
|
||||
return;
|
||||
}
|
||||
|
||||
logContent.textContent = '加载中...';
|
||||
logFileInfo.textContent = '加载中...';
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/log-content?file=${encodeURIComponent(logFile)}`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 0) {
|
||||
logFullContent = result.data.content || '';
|
||||
logContent.textContent = logFullContent || '(空日志)';
|
||||
logFileInfo.textContent = result.data.file + ' (' + result.data.size + ')';
|
||||
document.getElementById('logSearchInput').value = '';
|
||||
document.getElementById('logMatchCount').textContent = '';
|
||||
scrollToLogBottom();
|
||||
} else {
|
||||
logContent.textContent = '加载失败: ' + (result.message || '未知错误');
|
||||
logFileInfo.textContent = '加载失败';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载日志内容失败:', error);
|
||||
logContent.textContent = '加载日志内容失败: ' + error.message;
|
||||
logFileInfo.textContent = '加载失败';
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤日志内容
|
||||
function filterLogContent() {
|
||||
const searchInput = document.getElementById('logSearchInput');
|
||||
const matchCount = document.getElementById('logMatchCount');
|
||||
const logContent = document.getElementById('logContent');
|
||||
|
||||
if (!searchInput || !matchCount || !logContent) return;
|
||||
|
||||
const keyword = searchInput.value.trim();
|
||||
|
||||
if (!keyword) {
|
||||
logContent.textContent = logFullContent || '(空日志)';
|
||||
matchCount.textContent = '';
|
||||
scrollToLogBottom();
|
||||
return;
|
||||
}
|
||||
|
||||
const lines = logFullContent.split('\n');
|
||||
const matchingLines = lines.filter(line => line.toLowerCase().includes(keyword.toLowerCase()));
|
||||
|
||||
if (matchingLines.length > 0) {
|
||||
logContent.textContent = matchingLines.join('\n');
|
||||
matchCount.textContent = `(${matchingLines.length}条匹配)`;
|
||||
scrollToLogBottom();
|
||||
} else {
|
||||
logContent.textContent = '未找到匹配的日志';
|
||||
matchCount.textContent = '(0条匹配)';
|
||||
}
|
||||
}
|
||||
|
||||
// 清空日志内容显示
|
||||
function clearLogContent() {
|
||||
document.getElementById('logContent').textContent = '日志内容将在这里显示...';
|
||||
document.getElementById('logFileInfo').textContent = '请选择日志文件';
|
||||
const logTypeSelect = document.getElementById('logTypeSelect');
|
||||
if (logTypeSelect) logTypeSelect.value = '';
|
||||
document.getElementById('logSearchInput').value = '';
|
||||
document.getElementById('logMatchCount').textContent = '';
|
||||
logFullContent = '';
|
||||
}
|
||||
|
||||
// 停止日志自动刷新（离开页面时调用）
|
||||
function stopLogAutoRefresh() {
|
||||
if (logRefreshTimer) {
|
||||
clearInterval(logRefreshTimer);
|
||||
logRefreshTimer = null;
|
||||
}
|
||||
if (logCountdownTimer) {
|
||||
clearInterval(logCountdownTimer);
|
||||
logCountdownTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initLogViewer();
|
||||
});
|
||||
|
||||
// 页面离开时停止刷新
|
||||
window.addEventListener('beforeunload', function() {
|
||||
stopLogAutoRefresh();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1898
web/pages/main.html
1898
web/pages/main.html
File diff suppressed because it is too large
Load Diff
@@ -345,7 +345,9 @@
|
||||
type: 'LLM',
|
||||
source: 'trained',
|
||||
model_path: model.path,
|
||||
train_method: method.name
|
||||
train_method: method.name,
|
||||
merged: model.merged, // 是否已合并
|
||||
merging: model.merging // 是否正在合并
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -402,10 +404,15 @@
|
||||
|
||||
// 已训练模型区域
|
||||
if (trainedModels.length > 0) {
|
||||
// 统计已合并和未合并的数量
|
||||
const mergedCount = trainedModels.filter(m => m.merged).length;
|
||||
html += `
|
||||
<div class="border-b border-gray-200">
|
||||
<div class="px-4 py-2 bg-green-50 text-xs font-medium text-green-700 flex items-center">
|
||||
<i class="fa fa-check-circle mr-1"></i> 已训练模型 (${trainedModels.length})
|
||||
<div class="px-4 py-2 bg-green-50 text-xs font-medium text-green-700 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<i class="fa fa-check-circle mr-1"></i> 已训练模型 (${trainedModels.length})
|
||||
</div>
|
||||
<span class="text-orange-600">${mergedCount > 0 ? `${mergedCount}个已合并可选择` : '需合并后才可选择'}</span>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100">
|
||||
`;
|
||||
@@ -420,7 +427,9 @@
|
||||
// 渲染单个模型卡片
|
||||
function renderModelCard(model) {
|
||||
const isSelected = selectedModels.has(model.id);
|
||||
const isDisabled = !isSelected && selectedModels.size >= 4;
|
||||
// 未合并的已训练模型不可选择
|
||||
const isTrainedNotMerged = model.source === 'trained' && !model.merged;
|
||||
const isDisabled = !isSelected && (selectedModels.size >= 4 || isTrainedNotMerged);
|
||||
const typeText = {
|
||||
'LLM': '大语言模型',
|
||||
'CV': '计算机视觉',
|
||||
@@ -430,19 +439,24 @@
|
||||
}[model.type] || model.type || '其他';
|
||||
// 处理字符串类型的ID
|
||||
const modelId = typeof model.id === 'string' ? `'${model.id.replace(/'/g, "\\'")}'` : model.id;
|
||||
// 未合并提示文字
|
||||
const unmergedTip = isTrainedNotMerged ? '请先合并权重后再选择' : '';
|
||||
|
||||
return `
|
||||
<div class="model-card border-b border-gray-100 last:border-b-0 p-4 cursor-pointer ${isSelected ? 'selected bg-blue-50/50' : ''} ${isDisabled ? 'disabled opacity-50' : ''} hover:bg-gray-50 transition-colors"
|
||||
onclick="toggleModel(${modelId})">
|
||||
onclick="${isTrainedNotMerged ? `showMessage('提示', '该模型未合并权重，无法参与对比。请先在模型管理中合并权重。', 'warning')` : `toggleModel(${modelId})`}"
|
||||
title="${unmergedTip}">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center flex-1 min-w-0">
|
||||
<div class="w-5 h-5 rounded-full border-2 ${isSelected ? 'border-primary bg-primary' : 'border-gray-300'} flex items-center justify-center mr-3 flex-shrink-0">
|
||||
<div class="w-5 h-5 rounded-full border-2 ${isSelected ? 'border-primary bg-primary' : isTrainedNotMerged ? 'border-gray-300 bg-gray-200' : 'border-gray-300'} flex items-center justify-center mr-3 flex-shrink-0">
|
||||
${isSelected ? '<i class="fa fa-check text-white text-xs"></i>' : ''}
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center mb-1">
|
||||
<span class="font-medium text-gray-800 truncate">${model.name}</span>
|
||||
<span class="ml-2 px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded flex-shrink-0">${typeText}</span>
|
||||
${isTrainedNotMerged ? '<span class="ml-2 px-2 py-0.5 bg-orange-100 text-orange-700 text-xs rounded flex-shrink-0"><i class="fa fa-lock mr-1"></i>未合并</span>' : ''}
|
||||
${model.source === 'trained' && model.merged ? '<span class="ml-2 px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded flex-shrink-0"><i class="fa fa-check-circle mr-1"></i>已合并</span>' : ''}
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 truncate">${model.description || '暂无描述'}</p>
|
||||
</div>
|
||||
@@ -519,10 +533,15 @@
|
||||
|
||||
// 已训练模型区域
|
||||
if (trainedModels.length > 0) {
|
||||
// 统计已合并和未合并的数量
|
||||
const mergedCount = trainedModels.filter(m => m.merged).length;
|
||||
html += `
|
||||
<div class="border-b border-gray-200">
|
||||
<div class="px-4 py-2 bg-green-50 text-xs font-medium text-green-700 flex items-center">
|
||||
<i class="fa fa-check-circle mr-1"></i> 已训练模型 (${trainedModels.length})
|
||||
<div class="px-4 py-2 bg-green-50 text-xs font-medium text-green-700 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<i class="fa fa-check-circle mr-1"></i> 已训练模型 (${trainedModels.length})
|
||||
</div>
|
||||
<span class="text-orange-600">${mergedCount > 0 ? `${mergedCount}个已合并可选择` : '需合并后才可选择'}</span>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-100">
|
||||
`;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
373
web/pages/tools.html
Normal file
373
web/pages/tools.html
Normal file
@@ -0,0 +1,373 @@
|
||||
<!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" data-page="data-generate" class="nav-link sidebar-item-active 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="main.html?page=config" data-page="config" class="nav-link 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" data-page="logs" 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" id="page-content">
|
||||
<!-- 工具卡片内容由JS渲染 -->
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 消息弹窗 -->
|
||||
<div id="customModal" class="fixed inset-0 bg-gray-900/50 hidden flex items-center justify-center z-50">
|
||||
<div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 overflow-hidden">
|
||||
<div class="p-6 text-center">
|
||||
<div id="modalIcon"></div>
|
||||
<h3 id="modalTitle" class="text-lg font-medium text-gray-800 mb-2"></h3>
|
||||
<p id="modalMessage" class="text-gray-500 text-sm mb-6"></p>
|
||||
<div id="modalBtnGroup" class="flex justify-center space-x-3 hidden">
|
||||
<button id="modalCancelBtn" class="px-6 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">取消</button>
|
||||
<button id="modalConfirmBtn" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">确定</button>
|
||||
</div>
|
||||
<div id="modalSingleBtnGroup" class="flex justify-center">
|
||||
<button id="modalConfirmBtn2" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// API 配置
|
||||
const API_BASE = (() => {
|
||||
const protocol = window.location.protocol;
|
||||
const hostname = window.location.hostname;
|
||||
return `${protocol}//${hostname}:7861/api`;
|
||||
})();
|
||||
|
||||
// 默认工具配置
|
||||
const defaultTools = [
|
||||
{ id: 'data-generate', name: '数据生成', icon: 'fa-database', description: '基于LLM生成微调数据集' },
|
||||
{ id: 'json2jsonl', name: 'JSON转JSONL', icon: 'fa-code', description: '将JSON文件转换为JSONL格式' },
|
||||
{ id: 'md-convert', name: '转换Markdown', icon: 'fa-file-text', description: '将Markdown文件转换为训练数据' }
|
||||
];
|
||||
|
||||
// 获取自定义工具
|
||||
function getCustomTools() {
|
||||
const saved = localStorage.getItem('customTools');
|
||||
return saved ? JSON.parse(saved) : [];
|
||||
}
|
||||
|
||||
// 保存自定义工具
|
||||
function saveCustomTools(tools) {
|
||||
localStorage.setItem('customTools', JSON.stringify(tools));
|
||||
}
|
||||
|
||||
// 渲染单个工具卡片
|
||||
function renderToolCard(tool, canDelete = false, isCustom = false) {
|
||||
return `
|
||||
<div class="relative group border border-gray-200 rounded-lg p-6 cursor-pointer hover:border-primary hover:shadow-md transition-all" onclick="navigateToTool('${tool.id}', '${tool.url || ''}', ${isCustom})">
|
||||
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
|
||||
<i class="fa ${tool.icon} text-xl text-primary"></i>
|
||||
</div>
|
||||
<h3 class="text-base font-medium text-gray-800 mb-2">${tool.name}</h3>
|
||||
<p class="text-sm text-gray-500">${tool.description}</p>
|
||||
${canDelete ? `
|
||||
<button onclick="event.stopPropagation(); editCustomTool('${tool.id}')" class="absolute top-2 right-10 w-6 h-6 rounded-full bg-gray-100 hover:bg-blue-100 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10" title="修改">
|
||||
<i class="fa fa-pencil text-gray-400 hover:text-blue-500 text-xs"></i>
|
||||
</button>
|
||||
<button onclick="event.stopPropagation(); deleteCustomTool('${tool.id}')" class="absolute top-2 right-2 w-6 h-6 rounded-full bg-gray-100 hover:bg-red-100 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10" title="删除">
|
||||
<i class="fa fa-times text-gray-400 hover:text-red-500 text-xs"></i>
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 渲染页面
|
||||
function renderPage() {
|
||||
const customTools = getCustomTools();
|
||||
const defaultCards = defaultTools.map(t => renderToolCard(t, false, false)).join('');
|
||||
const customCards = customTools.map(t => renderToolCard(t, true, true)).join('');
|
||||
|
||||
document.getElementById('page-content').innerHTML = `
|
||||
<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>
|
||||
<button onclick="showCreateToolModal()" class="bg-primary text-white px-3 py-1.5 rounded text-sm hover:bg-primary/90 transition-colors">
|
||||
<i class="fa fa-plus mr-1"></i>添加自定义工具
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">默认工具</h3>
|
||||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||
${defaultCards || '<p class="text-gray-400 text-sm col-span-3">暂无默认工具</p>'}
|
||||
</div>
|
||||
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">自定义工具</h3>
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
${customCards || '<p class="text-gray-400 text-sm col-span-3">暂无自定义工具，点击右上角添加</p>'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 删除自定义工具
|
||||
function deleteCustomTool(toolId) {
|
||||
showConfirm('确认删除', '确定要删除这个自定义工具吗？', () => {
|
||||
const tools = getCustomTools().filter(t => t.id !== toolId);
|
||||
saveCustomTools(tools);
|
||||
renderPage();
|
||||
});
|
||||
}
|
||||
|
||||
// 修改自定义工具
|
||||
function editCustomTool(toolId) {
|
||||
const tool = getCustomTools().find(t => t.id === toolId);
|
||||
if (tool) {
|
||||
localStorage.setItem('editTool', JSON.stringify(tool));
|
||||
window.location.href = 'custom-tool-create.html?edit=true';
|
||||
}
|
||||
}
|
||||
|
||||
// 显示创建工具弹窗
|
||||
function showCreateToolModal() {
|
||||
window.location.href = 'custom-tool-create.html';
|
||||
}
|
||||
|
||||
// 跳转到工具页面
|
||||
function navigateToTool(toolId, url, isCustom = false) {
|
||||
if (isCustom && url) {
|
||||
if (url.startsWith('http')) {
|
||||
window.open(url, '_blank');
|
||||
} else {
|
||||
window.location.href = url;
|
||||
}
|
||||
} else if (toolId === 'data-generate') {
|
||||
window.location.href = 'data-generate.html';
|
||||
} else if (toolId === 'json2jsonl') {
|
||||
showMessage('提示', 'JSON转JSONL 工具开发中...', 'info');
|
||||
} else if (toolId === 'md-convert') {
|
||||
showMessage('提示', '转换Markdown 工具开发中...', 'info');
|
||||
} else {
|
||||
showMessage('提示', `${toolId} 功能开发中...`, 'info');
|
||||
}
|
||||
}
|
||||
|
||||
// ============ 消息弹窗 ============
|
||||
function showMessage(title, message, type = 'info', onConfirm) {
|
||||
const modal = document.getElementById('customModal');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalMessage = document.getElementById('modalMessage');
|
||||
const modalIcon = document.getElementById('modalIcon');
|
||||
const modalConfirmBtn = document.getElementById('modalConfirmBtn2');
|
||||
const modalSingleBtnGroup = document.getElementById('modalSingleBtnGroup');
|
||||
|
||||
modalTitle.textContent = title;
|
||||
modalMessage.innerHTML = message;
|
||||
|
||||
if (type === 'success') {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center"><i class="fa fa-check text-xl text-green-600"></i></div>';
|
||||
} else if (type === 'error') {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-red-100 flex items-center justify-center"><i class="fa fa-times text-xl text-red-600"></i></div>';
|
||||
} else if (type === 'warning') {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-yellow-100 flex items-center justify-center"><i class="fa fa-exclamation text-xl text-yellow-600"></i></div>';
|
||||
} else {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-blue-100 flex items-center justify-center"><i class="fa fa-info text-xl text-blue-600"></i></div>';
|
||||
}
|
||||
|
||||
modalSingleBtnGroup.classList.remove('hidden');
|
||||
modalSingleBtnGroup.querySelector('#modalConfirmBtn2').className = type === 'error' ? 'px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors' : 'px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors';
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
modalSingleBtnGroup.onclick = function() {
|
||||
closeModal();
|
||||
if (typeof onConfirm === 'function') onConfirm();
|
||||
};
|
||||
}
|
||||
|
||||
function showConfirm(title, message, onConfirm, onCancel) {
|
||||
const modal = document.getElementById('customModal');
|
||||
const modalTitle = document.getElementById('modalTitle');
|
||||
const modalMessage = document.getElementById('modalMessage');
|
||||
const modalIcon = document.getElementById('modalIcon');
|
||||
const modalConfirmBtn = document.getElementById('modalConfirmBtn');
|
||||
const modalCancelBtn = document.getElementById('modalCancelBtn');
|
||||
const modalBtnGroup = document.getElementById('modalBtnGroup');
|
||||
const modalSingleBtnGroup = document.getElementById('modalSingleBtnGroup');
|
||||
|
||||
modalTitle.textContent = title;
|
||||
modalMessage.innerHTML = message;
|
||||
|
||||
if (type === 'warning') {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-yellow-100 flex items-center justify-center"><i class="fa fa-exclamation text-xl text-yellow-600"></i></div>';
|
||||
} else {
|
||||
modalIcon.innerHTML = '<div class="w-12 h-12 mx-auto mb-4 rounded-full bg-blue-100 flex items-center justify-center"><i class="fa fa-question text-xl text-blue-600"></i></div>';
|
||||
}
|
||||
|
||||
modalBtnGroup.classList.remove('hidden');
|
||||
modalSingleBtnGroup.classList.add('hidden');
|
||||
modalConfirmBtn.textContent = '确定';
|
||||
modalConfirmBtn.className = 'px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors';
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
modalConfirmBtn.onclick = function() {
|
||||
closeModal();
|
||||
if (typeof onConfirm === 'function') onConfirm();
|
||||
};
|
||||
|
||||
modalCancelBtn.onclick = function() {
|
||||
closeModal();
|
||||
if (typeof onCancel === 'function') onCancel();
|
||||
};
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
const modal = document.getElementById('customModal');
|
||||
modal.classList.add('hidden');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderPage();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user