YG-Soft/YG_FT_Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新分支，重新设计UI

Browse Source
This commit is contained in:
leokaka1
2026-01-18 19:51:22 +08:00
parent 6e1b4b58ba
commit b2f19d9583
15 changed files with 2060 additions and 1785 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
web/pages/fine-tune-create.html Normal file
View File

@@ -0,0 +1,326 @@
<!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="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890ff',
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.card-radio {
@apply border border-gray-200 rounded-lg p-4 cursor-pointer transition-all;
}
.card-radio.active {
@apply border-primary bg-blue-50;
}
.card-radio:hover {
@apply border-gray-300;
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- 顶部导航 -->
<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">
<i class="fa fa-arrow-left"></i>
<span class="ml-1">返回</span>
</a>
<span class="text-gray-300">|</span>
<span class="text-gray-800 font-medium">创建训练任务</span>
</div>
</div>
</header>
<!-- 页面标题 -->
<div class="px-8 py-4">
<h1 class="text-xl font-medium text-gray-800">模型调优 / 创建训练任务</h1>
</div>
<!-- 表单内容 -->
<div class="px-8 pb-8">
<form id="createForm" class="bg-white rounded-lg shadow-sm p-6 max-w-4xl">
<!-- 基本信息 -->
<div class="mb-6">
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">基本信息</h3>
<div class="flex items-center mb-4">
<label class="w-24 text-sm text-gray-600">任务名称</label>
<div class="flex-1 max-w-md">
<input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none" placeholder="请输入任务名称" maxlength="50">
<p class="text-xs text-gray-400 mt-1"><span id="nameCount">0</span> / 50</p>
</div>
</div>
</div>
<!-- 训练配置 -->
<div class="mb-6">
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">训练配置</h3>
<!-- 训练方式 -->
<div class="mb-6">
<label class="block text-sm text-gray-600 mb-3">训练方式</label>
<div class="grid grid-cols-3 gap-4">
<div class="card-radio active" data-value="SFT">
<div class="flex items-start">
<input type="radio" name="train_type" value="SFT" checked class="mt-1 mr-2">
<div>
<div class="font-medium text-sm">SFT 微调训练</div>
<div class="text-xs text-gray-400 mt-1">在监督指令下，增强模型指令跟随的能力，提升全参数微调训练方式</div>
</div>
</div>
</div>
<div class="card-radio" data-value="DPO">
<div class="flex items-start">
<input type="radio" name="train_type" value="DPO" class="mt-1 mr-2">
<div>
<div class="font-medium text-sm">DPO 偏好训练</div>
<div class="text-xs text-gray-400 mt-1">引入人类反馈，降低幻觉，使得模型输出更符合人类偏好</div>
</div>
</div>
</div>
<div class="card-radio" data-value="CPT">
<div class="flex items-start">
<input type="radio" name="train_type" value="CPT" class="mt-1 mr-2">
<div>
<div class="font-medium text-sm">CPT 继续预训练</div>
<div class="text-xs text-gray-400 mt-1">通过无标注数据进行无监督继续训练，强化或新增模型特定能力</div>
</div>
</div>
</div>
</div>
</div>
<!-- 选择模型 -->
<div class="mb-6">
<label class="block text-sm text-gray-600 mb-3">选择模型</label>
<div class="flex items-center space-x-6 mb-3">
<label class="flex items-center">
<input type="radio" name="model_source" value="preset" checked class="mr-2">
<span class="text-sm">预置模型</span>
</label>
<label class="flex items-center">
<input type="radio" name="model_source" value="custom" class="mr-2">
<span class="text-sm">自定义模型</span>
</label>
</div>
<div class="pl-24">
<select name="base_model" class="w-64 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none">
<option value="">请选择</option>
<option value="qwen-3-4b-instruct">通义千问3-4B-Instruct</option>
<option value="qwen-7b-instruct">通义千问7B-Instruct</option>
<option value="qwen-14b-instruct">通义千问14B-Instruct</option>
<option value="llama2-7b">Llama2-7B</option>
<option value="llama2-13b">Llama2-13B</option>
</select>
</div>
</div>
<!-- 训练方法 -->
<div class="mb-6">
<label class="block text-sm text-gray-600 mb-3">训练方法</label>
<div class="flex items-center space-x-6">
<label class="flex items-center">
<input type="radio" name="train_method" value="lora" checked class="mr-2">
<span class="text-sm">高效训练</span>
</label>
<label class="flex items-center">
<input type="radio" name="train_method" value="full" class="mr-2">
<span class="text-sm">全参训练</span>
</label>
</div>
</div>
</div>
<!-- 数据配置 -->
<div class="mb-6">
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">数据配置</h3>
<!-- 训练集 -->
<div class="mb-6">
<label class="block text-sm text-gray-600 mb-3">训练集</label>
<div class="pl-24">
<select name="dataset_id" class="w-64 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none">
<option value="">请选择</option>
</select>
</div>
</div>
<!-- 验证集 -->
<div class="mb-6">
<label class="block text-sm text-gray-600 mb-3">验证集 <span class="text-red-500">*</span></label>
<div class="flex items-center space-x-6 mb-3">
<label class="flex items-center">
<input type="radio" name="valid_split" value="auto" checked class="mr-2">
<span class="text-sm">自动切分</span>
</label>
<label class="flex items-center">
<input type="radio" name="valid_split" value="custom" class="mr-2">
<span class="text-sm">选择数据集</span>
</label>
</div>
<div class="pl-24 flex items-center">
<span class="text-sm text-gray-600 mr-2">从当前训练集随机分割</span>
<input type="number" name="valid_ratio" value="10" class="w-16 px-2 py-1 border border-gray-300 rounded text-sm text-center focus:border-primary focus:outline-none">
<span class="text-sm text-gray-600 ml-2">% 作为验证集</span>
</div>
</div>
</div>
<!-- 训练产出 -->
<div class="mb-6">
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">训练产出</h3>
<!-- 模型名称 -->
<div class="mb-4">
<label class="block text-sm text-gray-600 mb-3">模型名称</label>
<div class="pl-24">
<input type="text" name="output_model_name" class="w-64 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none" placeholder="请输入模型名称" maxlength="50">
<p class="text-xs text-gray-400 mt-1"><span id="modelNameCount">0</span> / 50</p>
</div>
</div>
<!-- 模型加密 -->
<div class="mb-4">
<div class="flex items-center">
<span class="text-sm text-gray-600 mr-2">模型加密</span>
<span class="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded">安全升级</span>
</div>
<p class="text-xs text-gray-400 mt-1 ml-24">为保障您的数据安全，平台会为导出的模型文件开启 OSS 服务端加密</p>
</div>
</div>
<!-- 底部按钮 -->
<div class="flex items-center justify-between pt-6 border-t border-gray-100">
<div class="flex items-center space-x-3">
<button type="button" onclick="submitForm()" class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90">
开始训练
</button>
<a href="main.html" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300">
取消
</a>
</div>
<div class="flex items-center text-sm">
<a href="#" class="text-primary hover:underline">训练费用 (预估)</a>
<span class="mx-2 text-gray-300">|</span>
<a href="#" class="text-primary hover:underline">计算详情</a>
</div>
</div>
</form>
</div>
<script>
// API 基础地址
const getApiBase = () => {
const protocol = window.location.protocol;
const hostname = window.location.hostname;
return `${protocol}//${hostname}:8080/api`;
};
const API_BASE = getApiBase();
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
// 卡片式单选框
document.querySelectorAll('.card-radio').forEach(card => {
card.addEventListener('click', () => {
const parent = card.parentElement;
parent.querySelectorAll('.card-radio').forEach(c => c.classList.remove('active'));
card.classList.add('active');
card.querySelector('input').checked = true;
});
});
// 任务名称字数统计
const nameInput = document.querySelector('input[name="name"]');
nameInput.addEventListener('input', () => {
document.getElementById('nameCount').textContent = nameInput.value.length;
});
// 模型名称字数统计
const modelNameInput = document.querySelector('input[name="output_model_name"]');
modelNameInput.addEventListener('input', () => {
document.getElementById('modelNameCount').textContent = modelNameInput.value.length;
});
// 加载数据集列表
loadDatasets();
});
// 加载数据集列表
async function loadDatasets() {
try {
const response = await fetch(`${API_BASE}/dataset-manage`);
const result = await response.json();
if (result.code === 0) {
const select = document.querySelector('select[name="dataset_id"]');
select.innerHTML = '<option value="">请选择</option>' +
result.data.map(d => `<option value="${d.id}">${d.name}</option>`).join('');
}
} catch (e) {
console.error('加载数据集失败:', e);
}
}
// 提交表单
async function submitForm() {
const form = document.getElementById('createForm');
const formData = new FormData(form);
const data = {
name: formData.get('name'),
base_model: formData.get('base_model'),
train_type: formData.get('train_type'),
train_method: formData.get('train_method'),
dataset_id: formData.get('dataset_id'),
valid_split: formData.get('valid_split'),
valid_ratio: parseInt(formData.get('valid_ratio')) || 10,
output_model_name: formData.get('output_model_name'),
status: 'pending',
progress: 0
};
if (!data.name) {
alert('请输入任务名称');
return;
}
if (!data.base_model) {
alert('请选择基础模型');
return;
}
if (!data.dataset_id) {
alert('请选择训练集');
return;
}
try {
const response = await fetch(`${API_BASE}/fine-tune`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
const result = await response.json();
if (result.code === 0) {
alert('创建成功！');
window.location.href = 'main.html';
} else {
alert(result.message || '创建失败');
}
} catch (error) {
alert('创建失败: ' + error.message);
}
}
</script>
</body>
</html>

248
web/pages/login.html
View File

@@ -1,83 +1,187 @@
<!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">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>远光软件微调平台 - 登录</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890ff',
sidebarBg: '#001529',
sidebarText: '#bfcbd9',
danger: '#f5222d',
success: '#52c41a',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.input-focus {
@apply focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none;
}
.login-card-shadow {
@apply shadow-lg shadow-primary/10 hover:shadow-xl hover:shadow-primary/15 transition-shadow;
}
}
</style>
</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>
<body class="antialiased bg-gray-50 min-h-screen flex items-center justify-center p-4">
<!-- 登录主容器 -->
<div class="w-full max-w-md">
<!-- 登录卡片 -->
<div class="bg-white rounded-xl p-8 login-card-shadow">
<!-- 平台LOGO和标题 -->
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-16 h-16 mb-4">
<img src="../assets/logo/logo.png" alt="Logo" class="w-12 h-12 object-contain">
</div>
<h1 class="text-[clamp(1.5rem,3vw,2rem)] font-medium text-gray-800 mb-1">远光软件微调平台</h1>
<p class="text-gray-500">模型管理平台</p>
</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>
<!-- 登录表单 -->
<form id="loginForm" class="space-y-5">
<!-- 账号输入框 -->
<div>
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">
<i class="fa fa-user-o mr-1 text-gray-400"></i>账号
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
<i class="fa fa-user-o"></i>
</span>
<input
type="text"
id="username"
class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg input-focus transition-colors"
placeholder="请输入账号/手机号/邮箱"
value="admin"
required
>
</div>
</div>
<section class="container">
<section class="wrapper">
<header>
<div class="logo">
<img src="../assets/logo/logo.png" alt="Logo">
<!-- 密码输入框 -->
<div>
<div class="flex items-center justify-between mb-1">
<label for="password" class="block text-sm font-medium text-gray-700">
<i class="fa fa-lock-o mr-1 text-gray-400"></i>密码
</label>
<a href="#" class="text-xs text-primary hover:text-primary/80 transition-colors">忘记密码？</a>
</div>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
<i class="fa fa-lock-o"></i>
</span>
<input
type="password"
id="password"
class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg input-focus transition-colors"
placeholder="请输入密码"
value="admin"
required
>
<button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors">
<i class="fa fa-eye-slash"></i>
</button>
</div>
</div>
<!-- 记住密码 & 验证码登录 -->
<div class="flex items-center justify-between">
<label class="flex items-center text-sm text-gray-600 cursor-pointer">
<input type="checkbox" class="w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary">
<span class="ml-2">记住密码</span>
</label>
<a href="#" class="text-xs text-primary hover:text-primary/80 transition-colors">验证码登录</a>
</div>
<!-- 错误提示 -->
<div id="errorMsg" class="hidden text-danger text-sm bg-danger/5 p-2 rounded-lg">
<i class="fa fa-exclamation-circle mr-1"></i>
<span>账号或密码错误，请重新输入</span>
</div>
<!-- 登录按钮 -->
<button
type="submit"
class="w-full bg-primary text-white py-2.5 rounded-lg hover:bg-primary/90 active:bg-primary/95 transition-colors font-medium flex items-center justify-center"
>
<i class="fa fa-sign-in mr-2"></i>登 录
</button>
</form>
</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>
</div>
<script>
function handleLogin(event) {
event.preventDefault();
<!-- 简单的交互脚本 -->
<script>
// 动态获取 API 基础地址（根据当前访问的 IP 自动调整）
const getApiBase = () => {
const protocol = window.location.protocol;
const hostname = window.location.hostname;
return `${protocol}//${hostname}:8080/api`;
};
const API_BASE = getApiBase();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 密码显示/隐藏切换
const togglePassword = document.getElementById('togglePassword');
const password = document.getElementById('password');
// 简单的验证：用户名和密码都不为空
if (username && password) {
// 登录成功，设置登录状态
sessionStorage.setItem('isLoggedIn', 'true');
// 跳转到主页
window.location.href = 'main.html';
} else {
alert('请输入用户名和密码！');
}
}
</script>
togglePassword.addEventListener('click', () => {
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
// 切换图标
togglePassword.innerHTML = type === 'password' ? '<i class="fa fa-eye-slash"></i>' : '<i class="fa fa-eye"></i>';
});
// 表单提交处理
const loginForm = document.getElementById('loginForm');
const errorMsg = document.getElementById('errorMsg');
loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
const username = document.getElementById('username').value;
const passwordVal = document.getElementById('password').value;
if (!username || !passwordVal) {
errorMsg.textContent = '账号和密码不能为空';
errorMsg.classList.remove('hidden');
return;
}
try {
const response = await fetch(`${API_BASE}/login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password: passwordVal })
});
const result = await response.json();
if (result.code === 0) {
errorMsg.classList.add('hidden');
window.location.href = 'main.html';
} else {
errorMsg.textContent = result.message || '账号或密码错误';
errorMsg.classList.remove('hidden');
}
} catch (error) {
errorMsg.textContent = '无法连接到服务器，请确保后端服务已启动';
errorMsg.classList.remove('hidden');
}
});
</script>
</body>
</html>
</html>

1857
web/pages/main.html
View File

File diff suppressed because it is too large Load Diff