编写登录页面和主页面
This commit is contained in:
11
.claude/settings.local.json
Normal file
11
.claude/settings.local.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(npm init -y)",
|
||||||
|
"Bash(npm install:*)",
|
||||||
|
"Bash(tree:*)",
|
||||||
|
"Bash(npm run)",
|
||||||
|
"Bash(npm run dev)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
web/src/assets/logo/logo.png
Normal file
BIN
web/src/assets/logo/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
143
web/src/css/login.css
Normal file
143
web/src/css/login.css
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #DBE0F9;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .svg-top {
|
||||||
|
position: absolute;
|
||||||
|
top: -900px;
|
||||||
|
right: -300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .svg-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -500px;
|
||||||
|
left: -200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper {
|
||||||
|
padding: 40px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 350px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper header {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper header .logo {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper header .logo img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper header .logo span {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper header h1 {
|
||||||
|
color: #6065D9;
|
||||||
|
font-size: 35px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper header p {
|
||||||
|
color: #6065D9;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 300;
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper .main-content input {
|
||||||
|
border: none;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
margin: 15px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper .main-content input::placeholder {
|
||||||
|
color: #999;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper .main-content input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper .main-content .line {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #99999955;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper .main-content button {
|
||||||
|
background: linear-gradient(to right, #6065D9, #17D7FA);
|
||||||
|
border: none;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #fff;
|
||||||
|
display: block;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 auto;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper footer p {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .wrapper footer p a {
|
||||||
|
color: #6065D9;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 320px) and (max-width: 768px) {
|
||||||
|
.wrapper {
|
||||||
|
margin: 0 10px !important;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper header h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
82
web/src/pages/login.html
Normal file
82
web/src/pages/login.html
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Login Page</title>
|
||||||
|
<link rel="stylesheet" href="../css/login.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="svg-top">
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1337" width="1337">
|
||||||
|
<defs>
|
||||||
|
<path id="path-1" opacity="1" fill-rule="evenodd" d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z"/>
|
||||||
|
<linearGradient id="linearGradient-2" x1="0.79" y1="0.62" x2="0.21" y2="0.86">
|
||||||
|
<stop offset="0" stop-color="rgb(88,62,213)" stop-opacity="1"/>
|
||||||
|
<stop offset="1" stop-color="rgb(23,215,250)" stop-opacity="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g opacity="1">
|
||||||
|
<use xlink:href="#path-1" fill="url(#linearGradient-2)" fill-opacity="1"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="svg-bottom">
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="896" width="967.8852157128662">
|
||||||
|
<defs>
|
||||||
|
<path id="path-2" opacity="1" fill-rule="evenodd" d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z"/>
|
||||||
|
<linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
|
||||||
|
<stop offset="0" stop-color="rgb(40,175,240)" stop-opacity="1"/>
|
||||||
|
<stop offset="1" stop-color="rgb(18,15,196)" stop-opacity="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g opacity="1">
|
||||||
|
<use xlink:href="#path-2" fill="url(#linearGradient-3)" fill-opacity="1"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="container">
|
||||||
|
<section class="wrapper">
|
||||||
|
<header>
|
||||||
|
<div class="logo">
|
||||||
|
<img src="../assets/logo/logo.png" alt="Logo">
|
||||||
|
</div>
|
||||||
|
<h1>欢迎回来！</h1>
|
||||||
|
<p>用户登录</p>
|
||||||
|
</header>
|
||||||
|
<section class="main-content">
|
||||||
|
<form id="loginForm" onsubmit="handleLogin(event)">
|
||||||
|
<input type="text" placeholder="用户名" id="username">
|
||||||
|
<div class="line"></div>
|
||||||
|
<input type="password" placeholder="密码" id="password">
|
||||||
|
<button type="submit">登录</button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
<p><a href="" title="忘记密码">忘记密码？</a></p>
|
||||||
|
<p><a href="" title="注册">注册</a></p>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function handleLogin(event) {
|
||||||
|
event.preventDefault(); // 阻止表单默认提交
|
||||||
|
|
||||||
|
const username = document.getElementById('username').value;
|
||||||
|
const password = document.getElementById('password').value;
|
||||||
|
|
||||||
|
// 验证用户名是否为admin
|
||||||
|
if (username === 'admin') {
|
||||||
|
// 登录成功，跳转到main.html
|
||||||
|
window.location.href = 'main.html';
|
||||||
|
} else {
|
||||||
|
// 登录失败，显示错误信息
|
||||||
|
alert('用户名必须是admin！');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
434
web/src/pages/main.html
Normal file
434
web/src/pages/main.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>
|
||||||
|
<!-- Tailwind CSS CDN -->
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<!-- Chart.js CDN -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
||||||
|
<!-- 自定义Tailwind配置（匹配浅色主题） -->
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
dashboard: {
|
||||||
|
bg: '#DBE0F9', // 主背景色（与login一致）
|
||||||
|
card: '#FFFFFF', // 卡片背景
|
||||||
|
primary: '#6065D9', // 主蓝色
|
||||||
|
secondary: '#764BA2', // 深蓝紫色
|
||||||
|
accent: '#17D7FA', // 浅蓝高亮
|
||||||
|
text: '#333333', // 文字色
|
||||||
|
textLight: '#666666' // 浅文字色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
inter: ['Inter', 'sans-serif'],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style type="text/tailwindcss">
|
||||||
|
@layer utilities {
|
||||||
|
.gradient-blue {
|
||||||
|
background: linear-gradient(135deg, #6065D9 0%, #17D7FA 100%);
|
||||||
|
}
|
||||||
|
.card-shadow {
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.progress-bar {
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.radial-progress {
|
||||||
|
position: relative;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.radial-progress::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body class="bg-dashboard-bg text-dashboard-text font-inter min-h-screen">
|
||||||
|
<div class="flex">
|
||||||
|
<!-- 侧边栏 -->
|
||||||
|
<aside class="w-16 md:w-64 bg-white h-screen p-4 flex flex-col shadow-lg">
|
||||||
|
<div class="flex items-center mb-8">
|
||||||
|
<div class="w-10 h-10 rounded-lg gradient-blue flex items-center justify-center">
|
||||||
|
<span class="text-white font-bold">AI</span>
|
||||||
|
</div>
|
||||||
|
<span class="ml-2 text-lg font-semibold hidden md:block text-dashboard-primary">大模型平台</span>
|
||||||
|
</div>
|
||||||
|
<nav class="flex-1">
|
||||||
|
<ul class="space-y-4">
|
||||||
|
<li><a href="#" class="flex items-center p-2 rounded-lg gradient-blue text-white">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
|
||||||
|
<span class="hidden md:block">仪表盘</span>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="#" class="flex items-center p-2 rounded-lg hover:bg-dashboard-primary/10 text-dashboard-textLight">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
|
||||||
|
<span class="hidden md:block">模型列表</span>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="#" class="flex items-center p-2 rounded-lg hover:bg-dashboard-primary/10 text-dashboard-textLight">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
||||||
|
<span class="hidden md:block">数据分析</span>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="#" class="flex items-center p-2 rounded-lg hover:bg-dashboard-primary/10 text-dashboard-textLight">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||||
|
<span class="hidden md:block">设置</span>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="#" class="flex items-center p-2 rounded-lg hover:bg-red-100 text-dashboard-textLight hover:text-red-600">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
|
||||||
|
<span class="hidden md:block">退出登录</span>
|
||||||
|
</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- 主内容区 -->
|
||||||
|
<main class="flex-1 p-6">
|
||||||
|
<!-- 顶部数据卡片 -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
|
||||||
|
<div class="bg-white rounded-xl p-4 card-shadow">
|
||||||
|
<p class="text-dashboard-textLight text-sm">活跃模型</p>
|
||||||
|
<p class="text-2xl font-bold mt-1 text-dashboard-text">12</p>
|
||||||
|
<div class="flex items-center mt-2 text-green-500 text-sm">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
|
||||||
|
<span>+3个</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-xl p-4 card-shadow">
|
||||||
|
<p class="text-dashboard-textLight text-sm">训练中项目</p>
|
||||||
|
<p class="text-2xl font-bold mt-1 text-dashboard-text">5</p>
|
||||||
|
<div class="flex items-center mt-2 text-blue-500 text-sm">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||||
|
<span>运行中</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-xl p-4 card-shadow">
|
||||||
|
<p class="text-dashboard-textLight text-sm">完成任务</p>
|
||||||
|
<p class="text-2xl font-bold mt-1 text-dashboard-text">158</p>
|
||||||
|
<div class="flex items-center mt-2 text-green-500 text-sm">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||||
|
<span>全部成功</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-xl p-4 card-shadow">
|
||||||
|
<p class="text-dashboard-textLight text-sm">成功率</p>
|
||||||
|
<p class="text-2xl font-bold mt-1 text-dashboard-text">98.5%</p>
|
||||||
|
<div class="flex items-center mt-2 text-green-500 text-sm">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||||
|
<span>优秀</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 中部核心卡片 -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||||
|
<!-- 用户卡片 -->
|
||||||
|
<div class="bg-white rounded-xl p-6 card-shadow">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-xl font-semibold text-dashboard-text">管理员</p>
|
||||||
|
<p class="text-dashboard-textLight text-sm">欢迎使用大模型微调平台！</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-10 h-10 rounded-full gradient-blue flex items-center justify-center text-white font-bold">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full h-40 rounded-lg overflow-hidden bg-gradient-to-br from-dashboard-primary/20 to-dashboard-accent/20 flex items-center justify-center">
|
||||||
|
<svg class="w-24 h-24 text-dashboard-primary/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="mt-4 text-dashboard-textLight text-sm">今日训练任务：8个</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 模型性能 -->
|
||||||
|
<div class="bg-white rounded-xl p-6 card-shadow flex flex-col items-center justify-center">
|
||||||
|
<p class="text-lg font-semibold mb-4 text-dashboard-text">模型准确率</p>
|
||||||
|
<div class="radial-progress">
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 36 36">
|
||||||
|
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||||
|
fill="none"
|
||||||
|
stroke="#DBE0F9"
|
||||||
|
stroke-width="3"></path>
|
||||||
|
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
||||||
|
fill="none"
|
||||||
|
stroke="#6065D9"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-dasharray="95, 100"
|
||||||
|
transform="rotate(-90 18 18)"></path>
|
||||||
|
<text x="18" y="20" text-anchor="middle" fill="#6065D9" font-size="8" font-weight="bold">95%</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 系统状态 -->
|
||||||
|
<div class="bg-white rounded-xl p-6 card-shadow flex flex-col items-center justify-center">
|
||||||
|
<p class="text-lg font-semibold mb-4 text-dashboard-text">系统状态</p>
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
|
||||||
|
<p class="text-dashboard-text">运行正常</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center text-dashboard-textLight text-sm">
|
||||||
|
<p>CPU: 45%</p>
|
||||||
|
<p class="mt-1">GPU: 67%</p>
|
||||||
|
<p class="mt-1">内存: 52%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图表区域 -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||||
|
<!-- 训练进度折线图 -->
|
||||||
|
<div class="bg-white rounded-xl p-6 card-shadow">
|
||||||
|
<p class="text-lg font-semibold mb-4 text-dashboard-text">训练进度</p>
|
||||||
|
<div class="w-full h-60">
|
||||||
|
<canvas id="trainingChart"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 模型分布柱状图 -->
|
||||||
|
<div class="bg-white rounded-xl p-6 card-shadow">
|
||||||
|
<div class="flex justify-between items-center mb-4">
|
||||||
|
<p class="text-lg font-semibold text-dashboard-text">模型类型分布</p>
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<div class="px-3 py-1 bg-dashboard-primary/10 rounded text-xs text-dashboard-primary">全部</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full h-40 mb-4">
|
||||||
|
<canvas id="modelChart"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 gap-2 text-center">
|
||||||
|
<div>
|
||||||
|
<p class="text-lg font-bold text-dashboard-text">GPT</p>
|
||||||
|
<p class="text-xs text-dashboard-textLight">8个</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-lg font-bold text-dashboard-text">BERT</p>
|
||||||
|
<p class="text-xs text-dashboard-textLight">5个</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-lg font-bold text-dashboard-text">LLaMA</p>
|
||||||
|
<p class="text-xs text-dashboard-textLight">3个</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部项目和订单 -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<!-- 当前任务 -->
|
||||||
|
<div class="bg-white rounded-xl p-6 card-shadow">
|
||||||
|
<p class="text-lg font-semibold mb-4 text-dashboard-text">当前训练任务</p>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="border-b border-dashboard-bg pb-4">
|
||||||
|
<div class="flex justify-between mb-2">
|
||||||
|
<p class="font-medium text-dashboard-text">GPT-4微调</p>
|
||||||
|
<p class="text-dashboard-textLight text-sm">进行中</p>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar bg-dashboard-bg">
|
||||||
|
<div class="w-[75%] gradient-blue"></div>
|
||||||
|
</div>
|
||||||
|
<p class="text-right text-xs text-dashboard-textLight mt-1">75%</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-b border-dashboard-bg pb-4">
|
||||||
|
<div class="flex justify-between mb-2">
|
||||||
|
<p class="font-medium text-dashboard-text">BERT情感分析</p>
|
||||||
|
<p class="text-dashboard-textLight text-sm">队列中</p>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar bg-dashboard-bg">
|
||||||
|
<div class="w-[0%] gradient-blue"></div>
|
||||||
|
</div>
|
||||||
|
<p class="text-right text-xs text-dashboard-textLight mt-1">0%</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-b border-dashboard-bg pb-4">
|
||||||
|
<div class="flex justify-between mb-2">
|
||||||
|
<p class="font-medium text-dashboard-text">LLaMA对话模型</p>
|
||||||
|
<p class="text-dashboard-textLight text-sm">已完成</p>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar bg-dashboard-bg">
|
||||||
|
<div class="w-[100%] gradient-blue"></div>
|
||||||
|
</div>
|
||||||
|
<p class="text-right text-xs text-dashboard-textLight mt-1">100%</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-b border-dashboard-bg pb-4">
|
||||||
|
<div class="flex justify-between mb-2">
|
||||||
|
<p class="font-medium text-dashboard-text">图像分类模型</p>
|
||||||
|
<p class="text-dashboard-textLight text-sm">已完成</p>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar bg-dashboard-bg">
|
||||||
|
<div class="w-[100%] gradient-blue"></div>
|
||||||
|
</div>
|
||||||
|
<p class="text-right text-xs text-dashboard-textLight mt-1">100%</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between mb-2">
|
||||||
|
<p class="font-medium text-dashboard-text">推荐系统优化</p>
|
||||||
|
<p class="text-dashboard-textLight text-sm">已完成</p>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar bg-dashboard-bg">
|
||||||
|
<div class="w-[100%] gradient-blue"></div>
|
||||||
|
</div>
|
||||||
|
<p class="text-right text-xs text-dashboard-textLight mt-1">100%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 最近活动 -->
|
||||||
|
<div class="bg-white rounded-xl p-6 card-shadow">
|
||||||
|
<p class="text-lg font-semibold mb-4 text-dashboard-text">最近活动</p>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="border-b border-dashboard-bg pb-4">
|
||||||
|
<div class="flex justify-between mb-1">
|
||||||
|
<p class="font-medium text-dashboard-text">模型训练完成</p>
|
||||||
|
<p class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">成功</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-dashboard-textLight text-sm">GPT-4微调任务已完成</p>
|
||||||
|
<p class="text-xs text-dashboard-textLight mt-1">2分钟前</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-b border-dashboard-bg pb-4">
|
||||||
|
<div class="flex justify-between mb-1">
|
||||||
|
<p class="font-medium text-dashboard-text">新任务开始</p>
|
||||||
|
<p class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">进行中</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-dashboard-textLight text-sm">BERT情感分析模型开始训练</p>
|
||||||
|
<p class="text-xs text-dashboard-textLight mt-1">5分钟前</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-b border-dashboard-bg pb-4">
|
||||||
|
<div class="flex justify-between mb-1">
|
||||||
|
<p class="font-medium text-dashboard-text">模型部署</p>
|
||||||
|
<p class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">成功</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-dashboard-textLight text-sm">LLaMA对话模型已部署到云端</p>
|
||||||
|
<p class="text-xs text-dashboard-textLight mt-1">10分钟前</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-b border-dashboard-bg pb-4">
|
||||||
|
<div class="flex justify-between mb-1">
|
||||||
|
<p class="font-medium text-dashboard-text">数据集更新</p>
|
||||||
|
<p class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded">已完成</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-dashboard-textLight text-sm">训练数据集已更新</p>
|
||||||
|
<p class="text-xs text-dashboard-textLight mt-1">30分钟前</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 图表初始化脚本 -->
|
||||||
|
<script>
|
||||||
|
// 训练进度折线图
|
||||||
|
const trainingCtx = document.getElementById('trainingChart').getContext('2d');
|
||||||
|
new Chart(trainingCtx, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: ['第1天', '第2天', '第3天', '第4天', '第5天', '第6天', '第7天'],
|
||||||
|
datasets: [{
|
||||||
|
label: '准确率',
|
||||||
|
data: [65, 72, 78, 85, 88, 92, 95],
|
||||||
|
borderColor: '#6065D9',
|
||||||
|
backgroundColor: 'rgba(96, 101, 217, 0.1)',
|
||||||
|
fill: true,
|
||||||
|
tension: 0.4,
|
||||||
|
pointBackgroundColor: '#FFFFFF',
|
||||||
|
pointBorderColor: '#6065D9'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
grid: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
color: '#666666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
grid: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.05)'
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
color: '#666666'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 模型类型分布柱状图
|
||||||
|
const modelCtx = document.getElementById('modelChart').getContext('2d');
|
||||||
|
new Chart(modelCtx, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ['GPT', 'BERT', 'LLaMA', 'T5', 'Others'],
|
||||||
|
datasets: [{
|
||||||
|
label: '模型数量',
|
||||||
|
data: [8, 5, 3, 2, 4],
|
||||||
|
backgroundColor: [
|
||||||
|
'rgba(96, 101, 217, 0.8)',
|
||||||
|
'rgba(118, 75, 162, 0.8)',
|
||||||
|
'rgba(23, 215, 250, 0.8)',
|
||||||
|
'rgba(96, 101, 217, 0.6)',
|
||||||
|
'rgba(118, 75, 162, 0.6)'
|
||||||
|
],
|
||||||
|
borderRadius: 4
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
grid: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
color: '#666666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
grid: {
|
||||||
|
color: 'rgba(0, 0, 0, 0.05)'
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
color: '#666666'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user