333 lines
16 KiB
HTML
333 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>模型调优 / 创建训练任务</title>
|
|
<script src="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">
|
|
<div class="bg-white rounded-lg shadow-sm p-4 border-b border-gray-100">
|
|
<div class="flex items-center text-sm">
|
|
<span class="text-primary cursor-pointer hover:underline" onclick="window.location.href='main.html'">模型调优</span>
|
|
<span class="mx-2 text-gray-300">/</span>
|
|
<span class="text-gray-800 font-medium">创建训练任务</span>
|
|
</div>
|
|
</div>
|
|
</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>
|