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

修改了lora微调和全参微调的表格组件

Browse Source
This commit is contained in:
leokaka1
2026-01-19 14:31:27 +08:00
parent cde34e4919
commit 373f5244e5
3 changed files with 363 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/pages/dataset-create.html
View File

@@ -136,7 +136,7 @@
<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?page=dataset-manage" class="text-gray-500 hover:text-gray-700 flex items-center">
<a href="#" onclick="goBack()" class="text-gray-500 hover:text-gray-700 flex items-center">
<i class="fa fa-arrow-left"></i>
<span class="ml-1">上一步</span>
</a>
@@ -159,7 +159,7 @@
<!-- 页面标题 -->
<div class="bg-white rounded-lg shadow-sm p-4 border-b border-gray-100 mb-4">
<div class="flex items-center text-sm">
<span class="text-primary cursor-pointer hover:underline" onclick="window.location.href='main.html?page=dataset-manage'">数据集管理</span>
<span id="breadcrumbParent" class="text-primary cursor-pointer hover:underline" onclick="goBack()">数据集管理</span>
<span class="mx-2 text-gray-300">/</span>
<span class="text-gray-800 font-medium">上传数据集</span>
</div>
@@ -289,8 +289,21 @@
};
const API_BASE = getApiBase();
// 返回页面
let backUrl = 'main.html?page=dataset-manage';
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
// 根据URL参数设置返回页面
const urlParams = new URLSearchParams(window.location.search);
const from = urlParams.get('from');
const breadcrumbParent = document.getElementById('breadcrumbParent');
if (from === 'fine-tune') {
backUrl = 'fine-tune-create.html';
if (breadcrumbParent) {
breadcrumbParent.textContent = '创建训练任务';
}
}
// 文件上传区域拖拽逻辑
const uploadArea = document.getElementById('upload-area');
const fileUpload = document.getElementById('file-upload');
@@ -417,6 +430,11 @@
alert('创建失败: ' + error.message);
}
}
// 返回上一页
function goBack() {
window.location.href = backUrl;
}
</script>
</body>
</html>

352
web/pages/fine-tune-create.html
View File

@@ -224,25 +224,16 @@
<!-- 选择模型 -->
<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>
<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>
<div class="flex items-center">
<select name="base_model" id="baseModelSelect" class="form-select flex-1 max-w-md">
<option value="">请选择模型</option>
</select>
<button type="button" class="ml-2 text-primary text-sm flex items-center hover:text-primary/80" onclick="loadModels()">
<i class="fa fa-refresh"></i>
</button>
<button type="button" class="ml-3 bg-white border border-primary text-primary rounded px-3 py-1.5 text-sm hover:bg-primary/5" onclick="window.location.href='model-manage-create.html?from=fine-tune'">
+ 新增模型
</button>
</div>
</div>
@@ -250,26 +241,230 @@
<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">
<label class="flex items-center cursor-pointer">
<input type="radio" name="train_method" value="lora" class="mr-2" onchange="toggleTrainMethod()" checked>
<span class="text-sm">高效训练</span>
</label>
<label class="flex items-center">
<input type="radio" name="train_method" value="full" class="mr-2">
<label class="flex items-center cursor-pointer">
<input type="radio" name="train_method" value="full" class="mr-2" onchange="toggleTrainMethod()">
<span class="text-sm">全参训练</span>
</label>
</div>
</div>
<!-- 训练方法参数配置 -->
<div id="trainMethodParams" class="mb-6">
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
<div class="flex items-center justify-between px-4 py-3 bg-gray-50 border-b border-gray-200">
<div class="flex items-center">
<i class="fa fa-sliders text-primary mr-2"></i>
<label class="block text-sm font-medium text-gray-700">训练参数配置</label>
</div>
<div class="flex items-center space-x-3">
<button type="button" onclick="resetParams()" class="text-gray-500 hover:text-primary text-sm flex items-center transition-colors" title="恢复默认配置">
<i class="fa fa-rotate-left mr-1"></i>
<span>重置</span>
</button>
<button type="button" onclick="toggleParamsCollapse()" class="text-gray-500 hover:text-primary text-sm flex items-center transition-colors">
<span id="paramsToggleText">收起</span>
<i id="paramsToggleIcon" class="fa fa-chevron-up ml-1 text-xs transition-transform"></i>
</button>
</div>
</div>
<div id="paramsContent" class="overflow-x-auto">
<table class="w-full text-sm divide-y divide-gray-100">
<thead class="bg-gradient-to-r from-blue-50 to-indigo-50">
<tr>
<th class="text-left py-3 px-4 font-medium text-gray-600">参数名称</th>
<th class="text-left py-3 px-4 font-medium text-gray-600">参数值</th>
<th class="text-left py-3 px-4 font-medium text-gray-600">取值范围</th>
<th class="text-left py-3 px-4 font-medium text-gray-600">参数说明</th>
</tr>
</thead>
<tbody id="commonParamsBody" class="divide-y divide-gray-100">
<!-- 公共参数 -->
<tr class="hover:bg-blue-50/30 transition-colors">
<td class="py-3 px-4">
<span class="text-gray-700 font-mono text-sm">batch_size</span>
<span class="text-red-500 ml-1">*</span>
</td>
<td class="py-3 px-4">
<input type="number" name="batch_size" value="1" min="1" max="64" class="w-20 px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-center focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
</td>
<td class="py-3 px-4 text-xs text-gray-500">
<span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-mono">[1, 64]</span>
</td>
<td class="py-3 px-4 text-xs text-gray-500 leading-relaxed">单步训练样本数量，数值越大训练速度越快，但显存占用越高</td>
</tr>
<tr class="hover:bg-blue-50/30 transition-colors">
<td class="py-3 px-4">
<span class="text-gray-700 font-mono text-sm">learning_rate</span>
<span class="text-red-500 ml-1">*</span>
</td>
<td class="py-3 px-4">
<input type="number" name="learning_rate" value="0.0001" step="0.00001" min="0.000001" max="1" class="w-24 px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-center focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
</td>
<td class="py-3 px-4 text-xs text-gray-500">
<span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-mono">[0.000001, 1]</span>
</td>
<td class="py-3 px-4 text-xs text-gray-500 leading-relaxed">模型参数更新步长，过大可能导致训练不稳定，过小收敛速度慢</td>
</tr>
<tr class="hover:bg-blue-50/30 transition-colors">
<td class="py-3 px-4">
<span class="text-gray-700 font-mono text-sm">n_epochs</span>
<span class="text-red-500 ml-1">*</span>
</td>
<td class="py-3 px-4">
<input type="number" name="n_epochs" value="1" min="1" max="100" class="w-20 px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-center focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
</td>
<td class="py-3 px-4 text-xs text-gray-500">
<span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-mono">[1, 100]</span>
</td>
<td class="py-3 px-4 text-xs text-gray-500 leading-relaxed">完整遍历训练数据集的次数，建议设置在1-10之间</td>
</tr>
<tr class="hover:bg-blue-50/30 transition-colors">
<td class="py-3 px-4">
<span class="text-gray-700 font-mono text-sm">eval_steps</span>
<span class="text-red-500 ml-1">*</span>
</td>
<td class="py-3 px-4">
<input type="number" name="eval_steps" value="100" min="10" max="10000" class="w-24 px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-center focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
</td>
<td class="py-3 px-4 text-xs text-gray-500">
<span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-mono">[10, 10000]</span>
</td>
<td class="py-3 px-4 text-xs text-gray-500 leading-relaxed">每训练多少步进行一次模型评估，建议设置为100的倍数</td>
</tr>
<tr class="hover:bg-blue-50/30 transition-colors">
<td class="py-3 px-4">
<span class="text-gray-700 font-mono text-sm">lr_scheduler_type</span>
</td>
<td class="py-3 px-4">
<select name="lr_scheduler_type" class="w-28 px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all bg-white">
<option value="cosine">cosine</option>
<option value="linear">linear</option>
<option value="constant">constant</option>
</select>
</td>
<td class="py-3 px-4 text-xs text-gray-500">
<span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-mono">3种可选</span>
</td>
<td class="py-3 px-4 text-xs text-gray-500 leading-relaxed">学习率变化策略，cosine为余弦退火，linear为线性下降，constant为保持不变</td>
</tr>
<tr class="hover:bg-blue-50/30 transition-colors">
<td class="py-3 px-4">
<span class="text-gray-700 font-mono text-sm">max_length</span>
<span class="text-red-500 ml-1">*</span>
</td>
<td class="py-3 px-4">
<input type="number" name="max_length" value="512" min="64" max="4096" class="w-24 px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-center focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
</td>
<td class="py-3 px-4 text-xs text-gray-500">
<span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-mono">[64, 4096]</span>
</td>
<td class="py-3 px-4 text-xs text-gray-500 leading-relaxed">单条训练数据的最大token数，超出部分将被截断</td>
</tr>
<tr class="hover:bg-blue-50/30 transition-colors">
<td class="py-3 px-4">
<span class="text-gray-700 font-mono text-sm">warmup_ratio</span>
</td>
<td class="py-3 px-4">
<input type="number" name="warmup_ratio" value="0.05" step="0.01" min="0" max="1" class="w-20 px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-center focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
</td>
<td class="py-3 px-4 text-xs text-gray-500">
<span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-mono">[0, 1]</span>
</td>
<td class="py-3 px-4 text-xs text-gray-500 leading-relaxed">学习率预热步数占总步数的比例，设置为0则不预热</td>
</tr>
<tr class="hover:bg-blue-50/30 transition-colors">
<td class="py-3 px-4">
<span class="text-gray-700 font-mono text-sm">weight_decay</span>
</td>
<td class="py-3 px-4">
<input type="number" name="weight_decay" value="0.01" step="0.001" min="0" max="1" class="w-20 px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-center focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
</td>
<td class="py-3 px-4 text-xs text-gray-500">
<span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-mono">[0, 1]</span>
</td>
<td class="py-3 px-4 text-xs text-gray-500 leading-relaxed">防止过拟合的正则化技术，值越大对模型参数约束越强</td>
</tr>
</tbody>
<tbody id="loraParamsBody" class="hidden divide-y divide-gray-100">
<!-- LoRA参数 -->
<tr class="bg-blue-50/50 hover:bg-blue-50/70 transition-colors">
<td class="py-3 px-4">
<span class="text-gray-700 font-mono text-sm">lora_alpha</span>
<span class="text-red-500 ml-1">*</span>
</td>
<td class="py-3 px-4">
<select name="lora_alpha" class="w-20 px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all bg-white">
<option value="16" selected>16</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="128">128</option>
</select>
</td>
<td class="py-3 px-4 text-xs text-gray-500">
<span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-mono">4种可选</span>
</td>
<td class="py-3 px-4 text-xs text-gray-500 leading-relaxed">LoRA缩放系数，用于控制低秩适配矩阵的权重，影响模型对微调数据的敏感度</td>
</tr>
<tr class="bg-blue-50/50 hover:bg-blue-50/70 transition-colors">
<td class="py-3 px-4">
<span class="text-gray-700 font-mono text-sm">lora_dropout</span>
</td>
<td class="py-3 px-4">
<input type="number" name="lora_dropout" value="0.1" step="0.01" min="0" max="1" class="w-20 px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-center focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
</td>
<td class="py-3 px-4 text-xs text-gray-500">
<span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-mono">[0, 1]</span>
</td>
<td class="py-3 px-4 text-xs text-gray-500 leading-relaxed">LoRA层 dropout 概率，在低秩适配矩阵中随机丢弃部分神经元以防止过拟合</td>
</tr>
<tr class="bg-blue-50/50 hover:bg-blue-50/70 transition-colors">
<td class="py-3 px-4">
<span class="text-gray-700 font-mono text-sm">lora_rank</span>
<span class="text-red-500 ml-1">*</span>
</td>
<td class="py-3 px-4">
<select name="lora_rank" class="w-20 px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all bg-white">
<option value="8" selected>8</option>
<option value="16">16</option>
<option value="32">32</option>
<option value="64">64</option>
</select>
</td>
<td class="py-3 px-4 text-xs text-gray-500">
<span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-mono">4种可选</span>
</td>
<td class="py-3 px-4 text-xs text-gray-500 leading-relaxed">LoRA低秩矩阵的秩，值越大表示低秩矩阵的维度越高，微调能力越强</td>
</tr>
</tbody>
</table>
</div>
</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 id="trainDatasetList" class="space-y-2">
<!-- 数据集单选选项将通过JS动态加载 -->
<label class="block text-sm text-gray-600 mb-1">
<span class="text-red-500 mr-1">*</span>训练集
</label>
<div class="flex items-center">
<select name="dataset_id" id="trainDatasetSelect" class="form-select flex-1 max-w-md">
<option value="">请选择训练数据集</option>
</select>
<button type="button" class="ml-2 text-primary text-sm flex items-center hover:text-primary/80" onclick="loadDatasets()">
<i class="fa fa-refresh"></i>
</button>
<button type="button" class="ml-3 bg-white border border-primary text-primary rounded px-3 py-1.5 text-sm hover:bg-primary/5" onclick="window.location.href='dataset-create.html?from=fine-tune'">
+ 新增数据集
</button>
</div>
</div>
@@ -292,8 +487,16 @@
<span class="text-sm text-gray-600 ml-2">% 作为验证集</span>
</div>
<div id="customSplitSection" class="hidden">
<div id="validDatasetList" class="space-y-2">
<!-- 验证集单选选项将通过JS动态加载 -->
<div class="flex items-center">
<select name="valid_dataset_id" id="validDatasetSelect" class="form-select flex-1 max-w-md">
<option value="">请选择验证数据集</option>
</select>
<button type="button" class="ml-2 text-primary text-sm flex items-center hover:text-primary/80" onclick="loadDatasets()">
<i class="fa fa-refresh"></i>
</button>
<button type="button" class="ml-3 bg-white border border-primary text-primary rounded px-3 py-1.5 text-sm hover:bg-primary/5" onclick="window.location.href='dataset-create.html?from=fine-tune'">
+ 新增数据集
</button>
</div>
</div>
</div>
@@ -380,6 +583,12 @@
// 加载数据集列表
loadDatasets();
// 加载模型列表
loadModels();
// 初始化训练方法参数显示
toggleTrainMethod();
// 绑定导航点击事件
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', function(e) {
@@ -405,6 +614,64 @@
}
}
// 切换训练方法 - 显示/隐藏LoRA参数
function toggleTrainMethod() {
const trainMethod = document.querySelector('input[name="train_method"]:checked').value;
const loraParamsBody = document.getElementById('loraParamsBody');
if (trainMethod === 'lora') {
loraParamsBody.classList.remove('hidden');
} else {
loraParamsBody.classList.add('hidden');
}
}
// 切换参数配置展开/收起
function toggleParamsCollapse() {
const content = document.getElementById('paramsContent');
const toggleText = document.getElementById('paramsToggleText');
const toggleIcon = document.getElementById('paramsToggleIcon');
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
toggleText.textContent = '收起';
toggleIcon.className = 'fa fa-chevron-up ml-1 text-xs';
} else {
content.classList.add('hidden');
toggleText.textContent = '展开';
toggleIcon.className = 'fa fa-chevron-down ml-1 text-xs';
}
}
// 重置参数为默认值
function resetParams() {
const defaults = {
'batch_size': 1,
'learning_rate': 0.0001,
'n_epochs': 1,
'eval_steps': 100,
'lr_scheduler_type': 'cosine',
'max_length': 512,
'warmup_ratio': 0.05,
'weight_decay': 0.01,
'lora_alpha': '32',
'lora_dropout': 0.1,
'lora_rank': '8'
};
for (const [name, value] of Object.entries(defaults)) {
const input = document.querySelector(`input[name="${name}"]`);
if (input) {
if (input.type === 'number') {
input.value = value;
} else if (input.type === 'select-one') {
input.value = value;
}
}
const select = document.querySelector(`select[name="${name}"]`);
if (select) select.value = value;
}
}
// 渲染数据集单选列表
function renderDatasetRadio(datasets, containerId, name, selectedId) {
const container = document.getElementById(containerId);
@@ -426,14 +693,41 @@
const response = await fetch(`${API_BASE}/dataset-manage`);
const result = await response.json();
if (result.code === 0) {
renderDatasetRadio(result.data, 'trainDatasetList', 'train_dataset_id', null);
renderDatasetRadio(result.data, 'validDatasetList', 'valid_dataset_id', null);
// 更新训练集下拉框
const trainSelect = document.getElementById('trainDatasetSelect');
if (trainSelect) {
trainSelect.innerHTML = '<option value="">请选择训练数据集</option>' +
result.data.map(d => `<option value="${d.id}">${d.name}</option>`).join('');
}
// 更新验证集下拉框
const validSelect = document.getElementById('validDatasetSelect');
if (validSelect) {
validSelect.innerHTML = '<option value="">请选择验证数据集</option>' +
result.data.map(d => `<option value="${d.id}">${d.name}</option>`).join('');
}
}
} catch (e) {
console.error('加载数据集失败:', e);
}
}
// 加载模型列表
async function loadModels() {
try {
const response = await fetch(`${API_BASE}/model-manage`);
const result = await response.json();
if (result.code === 0) {
const modelSelect = document.getElementById('baseModelSelect');
if (modelSelect) {
modelSelect.innerHTML = '<option value="">请选择模型</option>' +
result.data.map(m => `<option value="${m.id}">${m.name}</option>`).join('');
}
}
} catch (e) {
console.error('加载模型失败:', e);
}
}
// 提交表单
async function submitForm() {
const form = document.getElementById('createForm');

22
web/pages/model-manage-create.html
View File

@@ -129,7 +129,7 @@
<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?page=model-manage" class="text-gray-500 hover:text-gray-700 flex items-center">
<a href="#" onclick="goBack()" class="text-gray-500 hover:text-gray-700 flex items-center">
<i class="fa fa-arrow-left"></i>
<span class="ml-1">上一步</span>
</a>
@@ -152,7 +152,7 @@
<!-- 大标题 -->
<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?page=model-manage'">资源管理</span>
<span id="breadcrumbParent" class="text-primary cursor-pointer hover:underline" onclick="goBack()">模型管理</span>
<span class="mx-2 text-gray-300">/</span>
<span class="text-gray-800 font-medium">添加模型</span>
</div>
@@ -288,8 +288,21 @@
};
const API_BASE = getApiBase();
// 返回页面
let backUrl = 'main.html?page=model-manage';
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
// 根据URL参数设置返回页面
const urlParams = new URLSearchParams(window.location.search);
const from = urlParams.get('from');
const breadcrumbParent = document.getElementById('breadcrumbParent');
if (from === 'fine-tune') {
backUrl = 'fine-tune-create.html';
if (breadcrumbParent) {
breadcrumbParent.textContent = '创建训练任务';
}
}
// 描述字数统计
const descInput = document.querySelector('textarea[name="description"]');
if (descInput) {
@@ -430,6 +443,11 @@
if (onConfirm) onConfirm();
};
}
// 返回上一页
function goBack() {
window.location.href = backUrl;
}
</script>
<!-- 自定义消息弹窗 -->