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

模型开始训练界面以及查看日志功能完善

Browse Source
This commit is contained in:
WIN-JHFT4D3SIVT\caoxiaozhu
2026-01-29 10:36:59 +08:00
parent a560d24e2f
commit e9e0e21e47
11 changed files with 2485 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -219,10 +219,21 @@
<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>
<label class="block text-sm text-gray-600 mb-3">
任务名称
<span class="text-gray-400 text-xs ml-1">(英文、数字、下划线)</span>
</label>
<div>
<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>
<p id="nameFormatError" class="text-xs text-red-500 mt-1 hidden">任务名称只能包含英文、数字和下划线</p>
</div>
</div>
<div>
<label class="block text-sm text-gray-600 mb-3">任务描述</label>
<div>
<textarea name="description" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none resize-none" placeholder="请输入任务描述（选填）" maxlength="200" rows="3"></textarea>
<p class="text-xs text-gray-400 mt-1"><span id="descriptionCount">0</span> / 200</p>
</div>
</div>
</div>
@@ -466,16 +477,16 @@
</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-gray-700 font-mono text-sm">save_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">
<input type="number" name="save_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>
<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">
@@ -616,14 +627,7 @@
<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>
<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>
<p class="text-sm text-gray-500 mb-4">训练完成后，模型将保存为: <code class="bg-gray-100 px-2 py-0.5 rounded text-primary" id="modelNamePreview">任务名称</code></p>
<!-- 训练命令预览 -->
<div class="mt-4">
@@ -678,16 +682,38 @@
});
});
// 任务名称字数统计
// 任务名称字数统计和实时预览（只能输入英文、数字、下划线）
const nameInput = document.querySelector('input[name="name"]');
const nameFormatError = document.getElementById('nameFormatError');
const nameRegex = /^[a-zA-Z0-9_]*$/;
nameInput.addEventListener('input', () => {
const value = nameInput.value;
// 验证格式
if (value.length > 0 && !nameRegex.test(value)) {
nameInput.classList.add('border-red-500');
nameInput.classList.remove('border-gray-300');
nameFormatError.classList.remove('hidden');
} else {
nameInput.classList.remove('border-red-500');
nameInput.classList.add('border-gray-300');
nameFormatError.classList.add('hidden');
}
// 过滤非法字符：只允许英文、数字、下划线
const filteredValue = value.replace(/[^a-zA-Z0-9_]/g, '');
if (value !== filteredValue) {
nameInput.value = filteredValue;
}
document.getElementById('nameCount').textContent = nameInput.value.length;
// 更新模型名称预览
document.getElementById('modelNamePreview').textContent = nameInput.value || '任务名称';
updateCommandPreview();
});
// 模型名称字数统计
const modelNameInput = document.querySelector('input[name="output_model_name"]');
modelNameInput.addEventListener('input', () => {
document.getElementById('modelNameCount').textContent = modelNameInput.value.length;
// 任务描述字数统计
const descInput = document.querySelector('textarea[name="description"]');
descInput.addEventListener('input', () => {
document.getElementById('descriptionCount').textContent = descInput.value.length;
});
// 加载数据集列表
@@ -774,7 +800,7 @@
'batch_size': 1,
'learning_rate': 0.0001,
'n_epochs': 1,
'eval_steps': 100,
'save_steps': 100,
'lr_scheduler_type': 'cosine',
'max_length': 512,
'warmup_ratio': 0.05,
@@ -1014,7 +1040,7 @@
batch_size: parseInt(formData.get('batch_size')) || 1,
learning_rate: parseFloat(formData.get('learning_rate')) || 0.0001,
n_epochs: parseFloat(formData.get('n_epochs')) || 1.0,
eval_steps: parseInt(formData.get('eval_steps')) || 100,
save_steps: parseInt(formData.get('save_steps')) || 100,
lr_scheduler_type: formData.get('lr_scheduler_type') || 'cosine',
max_length: parseInt(formData.get('max_length')) || 512,
warmup_ratio: parseFloat(formData.get('warmup_ratio')) || 0.05,
@@ -1024,15 +1050,18 @@
lora_rank: formData.get('lora_rank') || '8'
};
const taskName = formData.get('name');
const data = {
name: formData.get('name'),
name: taskName,
description: formData.get('description'),
base_model: formData.get('base_model'),
template: formData.get('template'),
train_type: formData.get('train_type'),
train_method: formData.get('train_method'),
gpus: selectedGPUs,
train_dataset_id: formData.get('train_dataset_id'),
output_model_name: formData.get('output_model_name'),
output_model_name: taskName, // 使用任务名称作为模型名称
...trainParams,
status: 'pending',
progress: 0
@@ -1042,6 +1071,26 @@
showMessage('提示', '请输入任务名称', 'warning');
return;
}
// 验证任务名称格式
const nameRegex = /^[a-zA-Z0-9_]+$/;
if (!nameRegex.test(data.name)) {
showMessage('提示', '任务名称只能包含英文、数字和下划线', 'warning');
return;
}
// 检查任务名称是否重复
try {
const checkResponse = await fetch(`${API_BASE}/fine-tune/check-name?name=${encodeURIComponent(data.name)}`);
const checkResult = await checkResponse.json();
if (checkResult.code === 0 && checkResult.data.exists) {
showMessage('提示', '任务名称已存在，请使用其他名称', 'warning');
return;
}
} catch (error) {
console.error('检查任务名称失败:', error);
}
if (selectedGPUs.length === 0) {
showMessage('提示', '请选择至少一个GPU硬件', 'warning');
return;
@@ -1060,6 +1109,12 @@
}
try {
// 显示加载中状态
const submitBtn = document.querySelector('button[onclick="submitForm()"]');
const originalText = submitBtn.innerHTML;
submitBtn.disabled = true;
submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>训练任务创建中...';
// 第一步：创建训练任务记录
const createResponse = await fetch(`${API_BASE}/fine-tune`, {
method: 'POST',
@@ -1068,6 +1123,8 @@
});
const createResult = await createResponse.json();
if (createResult.code !== 0) {
submitBtn.disabled = false;
submitBtn.innerHTML = originalText;
showMessage('错误', createResult.message || '创建任务失败', 'error');
return;
}
@@ -1077,12 +1134,13 @@
// 第二步：启动训练
const startData = {
task_id: taskId,
name: data.name, // 任务名称，用于日志文件名和模型名称
base_model: data.base_model,
template: data.template,
train_type: data.train_type,
train_method: data.train_method,
train_dataset_id: data.train_dataset_id,
output_model_name: data.output_model_name,
output_model_name: data.name, // 使用任务名称作为模型名称
...trainParams
};
@@ -1093,9 +1151,12 @@
});
const startResult = await startResponse.json();
// 恢复按钮状态
submitBtn.disabled = false;
submitBtn.innerHTML = originalText;
if (startResult.code === 0) {
const cmd = startResult.data?.command || '';
showMessage('成功', `训练任务已启动！<br><br><code class="text-xs bg-gray-100 p-1 rounded">${cmd}</code>`, 'success', () => {
showMessage('成功', '训练任务已启动！', 'success', () => {
window.location.href = 'main.html';
});
} else {
@@ -1108,6 +1169,12 @@
showMessage('错误', startResult.message || '启动训练失败', 'error');
}
} catch (error) {
// 恢复按钮状态
const submitBtn = document.querySelector('button[onclick="submitForm()"]');
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.innerHTML = '开始训练';
}
showMessage('错误', '操作失败: ' + error.message, 'error');
}
}
@@ -1146,9 +1213,10 @@
const trainMethod = formData.get('train_method') || 'lora';
const methodMap = { 'lora': 'lora', 'full': 'full' };
// 获取输出模型名称
const outputModelName = formData.get('output_model_name') || `${template}/${trainMethod}`;
const outputDir = outputModelName.startsWith('./') ? outputModelName : `./saves/${outputModelName}`;
// 获取输出模型名称（使用任务名称）
const taskName = formData.get('name') || 'task_name';
const outputModelName = taskName;
const outputDir = outputModelName.startsWith('/') ? outputModelName : `/app/base/saves/${outputModelName}`;
// 获取数据集名称
const trainDatasetSelect = form.querySelector('select[name="train_dataset_id"]');
@@ -1167,7 +1235,7 @@
const nEpochs = parseFloat(formData.get('n_epochs')) || 1.0;
const maxLength = parseInt(formData.get('max_length')) || 512;
const warmupSteps = parseInt(formData.get('warmup_steps')) || 20;
const evalSteps = parseInt(formData.get('eval_steps')) || 100;
const saveSteps = parseInt(formData.get('save_steps')) || 100;
const gradientAccumulationSteps = parseInt(formData.get('gradient_accumulation_steps')) || 8;
const lrSchedulerType = formData.get('lr_scheduler_type') || 'cosine';
@@ -1204,10 +1272,10 @@
cmd += ` --lr_scheduler_type ${lrSchedulerType} \\\n`;
cmd += ` --logging_steps 50 \\\n`;
cmd += ` --warmup_steps ${warmupSteps} \\\n`;
cmd += ` --save_steps 100 \\\n`;
cmd += ` --eval_steps ${evalSteps} \\\n`;
cmd += ` --save_steps ${saveSteps} \\\n`;
cmd += ` --learning_rate ${learningRate} \\\n`;
cmd += ` --num_train_epochs ${nEpochs}`;
cmd += ` --num_train_epochs ${nEpochs} \\\n`;
cmd += ` --plot_loss`;
return cmd;
}

541
web/pages/main.html
View File

@@ -260,6 +260,11 @@
<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-6">
<!-- 返回按钮（仅外部页面显示） -->
<button id="pageBackBtn" class="hidden text-gray-500 hover:text-gray-700 flex items-center transition-colors" onclick="goBackToList()">
<i class="fa fa-arrow-left mr-1"></i>
<span>返回</span>
</button>
<button class="md:hidden text-gray-500 hover:text-gray-700">
<i class="fa fa-bars"></i>
</button>
@@ -304,28 +309,6 @@
</div>
<script>
// 会话超时检查（5分钟）
const SESSION_TIMEOUT = 5 * 60 * 1000; // 5分钟
function checkSession() {
const loginTime = localStorage.getItem('loginTime');
if (!loginTime || (Date.now() - parseInt(loginTime)) > SESSION_TIMEOUT) {
// 会话过期，清除并跳转到登录页
localStorage.removeItem('loginTime');
localStorage.removeItem('username');
window.location.href = 'login.html';
return false;
}
// 更新登录时间（用户有活动时续期）
localStorage.setItem('loginTime', Date.now());
return true;
}
// 页面加载时检查会话
if (!checkSession()) {
// 阻止页面渲染
document.body.innerHTML = '';
}
// API 基础地址 - 使用 config.yaml 中的 app.port (7861)
const getApiBase = () => {
const protocol = window.location.protocol;
@@ -430,9 +413,8 @@
createText: '创建训练任务',
columns: [
{ title: '任务名称', key: 'name' },
{ title: '基础模型', key: 'base_model' },
{ title: '基础模型', key: 'base_model', render: (val, row) => `<span class="model-name-cell" data-model-id="${val}">加载中...</span>` },
{ title: '状态', key: 'status', render: (val) => `<span class="px-2 py-1 rounded text-xs ${val === 'running' ? 'bg-green-100 text-green-700' : val === 'failed' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700'}">${val}</span>` },
{ title: '进度', key: 'progress', render: (val) => `${val || 0}%` },
{ title: '创建时间', key: 'create_time', render: (val) => val ? new Date(val).toLocaleString('zh-CN') : '-' }
],
actions: ['stop', 'logs', 'delete']
@@ -586,6 +568,12 @@
skipFetch: true,
hasCreate: false,
isExternalPage: true
},
'training-log': {
title: '训练日志',
skipFetch: true,
hasCreate: false,
isExternalPage: true
}
};
@@ -606,6 +594,124 @@
'chat': '对话'
};
// 训练进度缓存
let trainingProgressCache = {};
let progressRefreshTimer = null;
// 渲染训练进度
function renderTrainingProgress(val, row) {
const progressData = trainingProgressCache[row.id];
if (progressData && progressData.status === 'running') {
if (progressData.progress > 0) {
return `
<div class="flex flex-col">
<span class="text-sm font-medium text-primary">${progressData.progress}%</span>
<span class="text-xs text-gray-500">${progressData.step || ''} ${progressData.speed || ''}</span>
<span class="text-xs text-gray-400">ETA: ${progressData.eta || '--:--'}</span>
</div>
`;
}
}
return `${val || 0}%`;
}
// 刷新训练进度
async function refreshTrainingProgress() {
if (currentPage !== 'fine-tune') return;
try {
const response = await fetch(`${API_BASE}/fine-tune`);
const result = await response.json();
if (result.code === 0 && result.data) {
// 刷新运行中或已完成的任务（有进度信息）
const activeTasks = result.data.filter(task =>
task.status === 'running' || task.status === 'pending'
);
for (const task of activeTasks) {
try {
// 并行获取进度和PID状态
const [progressResponse, statusResponse] = await Promise.all([
fetch(`${API_BASE}/fine-tune/progress/${task.id}`),
fetch(`${API_BASE}/fine-tune/${task.id}`)
]);
const progressResult = await progressResponse.json();
const statusResult = await statusResponse.json();
if (progressResult.code === 0 && progressResult.data) {
trainingProgressCache[task.id] = progressResult.data;
}
// 如果状态已改变（PID已结束），更新表格中的状态显示
if (statusResult.code === 0 && statusResult.data) {
const actualStatus = statusResult.data.status;
if (task.status !== actualStatus) {
// 找到对应的行并更新状态
const row = document.querySelector(`tr[data-id="${task.id}"]`);
if (row) {
const statusCell = row.querySelector('td:nth-child(3)');
if (statusCell) {
statusCell.innerHTML = `<span class="px-2 py-1 rounded text-xs ${actualStatus === 'running' ? 'bg-green-100 text-green-700' : actualStatus === 'failed' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}">${actualStatus}</span>`;
}
}
}
}
} catch (e) {
console.warn(`获取任务 ${task.id} 信息失败:`, e);
}
}
}
} catch (error) {
console.warn('刷新训练进度失败:', error);
}
}
// 检查并更新任务状态（用于 fine-tune 页面）
async function checkAndUpdateTaskStatus() {
if (currentPage !== 'fine-tune') return;
try {
const response = await fetch(`${API_BASE}/fine-tune`);
const result = await response.json();
if (result.code === 0 && result.data) {
// 获取所有 running 状态的任务
const runningTasks = result.data.filter(task => task.status === 'running');
for (const task of runningTasks) {
try {
// 调用 status API 获取实际状态（会检查 PID）
const statusResponse = await fetch(`${API_BASE}/fine-tune/${task.id}`);
const statusResult = await statusResponse.json();
if (statusResult.code === 0 && statusResult.data) {
const actualStatus = statusResult.data.status;
// 如果实际状态不是 running，更新表格显示
if (actualStatus !== 'running') {
const row = document.querySelector(`tr[data-id="${task.id}"]`);
if (row) {
const statusCell = row.querySelector('td:nth-child(3)');
if (statusCell) {
const statusClass = actualStatus === 'failed'
? 'bg-red-100 text-red-700'
: 'bg-blue-100 text-blue-700';
statusCell.innerHTML = `<span class="px-2 py-1 rounded text-xs ${statusClass}">${actualStatus}</span>`;
console.log(`[Status] 任务 ${task.id} 状态已更新: running -> ${actualStatus}`);
}
}
}
}
} catch (e) {
console.warn(`检查任务 ${task.id} 状态失败:`, e);
}
}
}
} catch (error) {
console.warn('检查任务状态失败:', error);
}
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
// 从 localStorage 加载自定义工具
@@ -645,6 +751,12 @@
loadPage(defaultPage);
// 启动训练进度自动刷新（每5秒）
progressRefreshTimer = setInterval(() => {
refreshTrainingProgress();
checkAndUpdateTaskStatus();
}, 5000);
// 更新侧边栏高亮状态
document.querySelectorAll('.nav-link').forEach(link => {
if (link.dataset.page === defaultPage) {
@@ -727,6 +839,14 @@
// 离开日志页面时停止自动刷新
stopLogAutoRefresh();
// 离开模型调优页面时停止进度刷新
if (currentPage === 'fine-tune' && pageName !== 'fine-tune') {
if (progressRefreshTimer) {
clearInterval(progressRefreshTimer);
progressRefreshTimer = null;
}
}
const container = document.getElementById('page-content');
const config = tableConfigs[pageName];
@@ -740,6 +860,14 @@
</div>
`;
// 显示/隐藏返回按钮（外部页面显示，普通页面隐藏）
const backBtn = document.getElementById('pageBackBtn');
if (config.isExternalPage) {
backBtn.classList.remove('hidden');
} else {
backBtn.classList.add('hidden');
}
try {
// 渲染页面
if (config.isExternalPage) {
@@ -747,9 +875,14 @@
const response = await fetch(`${pageName}.html?t=${Date.now()}`);
if (response.ok) {
const html = await response.text();
// 只提取内联脚本内容（没有src属性的script标签）
const scriptMatch = html.match(/<script\b(?![^>]*\bsrc)[^>]*>([\s\S]*?)<\/script>/);
const scriptContent = scriptMatch ? scriptMatch[1] : '';
// 提取所有内联脚本内容（没有src属性的script标签）
const scriptRegex = /<script\b(?![^>]*\bsrc)[^>]*>([\s\S]*?)<\/script>/g;
const scriptContents = [];
let match;
while ((match = scriptRegex.exec(html)) !== null) {
scriptContents.push(match[1]);
}
const scriptContent = scriptContents.join('\n');
// 移除所有script标签后插入HTML
const htmlWithoutScript = html.replace(/<script\b[^>]*>[\s\S]*?<\/script>/g, '');
@@ -785,10 +918,18 @@
}
container.innerHTML = headerHtml + htmlWithoutScript;
// 执行脚本
// 执行脚本 - 使用 script 元素注入，使函数在全局作用域可用
if (scriptContent && scriptContent.trim()) {
try {
eval(scriptContent);
// 移除可能存在的旧脚本容器
const oldScript = document.getElementById('externalPageScript');
if (oldScript) oldScript.remove();
// 创建新的 script 元素
const scriptEl = document.createElement('script');
scriptEl.id = 'externalPageScript';
scriptEl.textContent = scriptContent;
document.body.appendChild(scriptEl);
} catch (e) {
console.error('执行脚本失败:', e);
}
@@ -812,6 +953,17 @@
const data = await fetchData(`${API_BASE}/${config.api}`);
currentPageData = data; // 保存当前页面数据
container.innerHTML = renderTablePage(config, data);
// 异步更新模型名称单元格
setTimeout(() => {
const modelCells = container.querySelectorAll('.model-name-cell');
modelCells.forEach(cell => {
const modelId = cell.getAttribute('data-model-id');
if (modelId) {
fetchAndUpdateModelName(modelId, cell);
}
});
}, 0);
}
} catch (error) {
console.error('加载数据失败:', error);
@@ -859,6 +1011,44 @@
});
}
// 停止训练任务
async function stopItem(taskId) {
showConfirm('确认停止', '确定要停止这个训练任务吗？进程将被终止。', async () => {
try {
const response = await fetch(`${API_BASE}/fine-tune/stop/${taskId}`, {
method: 'POST'
});
const result = await response.json();
if (result.code === 0) {
showMessage('成功', '训练任务已停止', 'success');
// 刷新当前页面
const activeLink = document.querySelector('.nav-link.sidebar-item-active');
if (activeLink) {
loadPage(activeLink.dataset.page);
}
} else {
showMessage('错误', result.message || '停止失败', 'error');
}
} catch (error) {
showMessage('错误', '停止失败: ' + error.message, 'error');
}
});
}
// 跳转到训练日志二级页面
function navigateToTrainingLog(taskId) {
// 设置 sessionStorage 传递 taskId
sessionStorage.setItem('trainingLogTaskId', taskId.toString());
// 跳转到日志页面
navigateToPage('training-log');
}
// 查看训练日志 - 跳转到日志页面
async function viewTrainingLog(taskId, taskName) {
// 跳转到日志页面
loadPage('logs');
}
// 更新模型用途
async function updateModelPurpose(id, purpose) {
try {
@@ -1133,7 +1323,7 @@
` : ''}
${columns.map(col => `
<td class="px-4 py-4 text-sm text-center">
${col.render ? col.render(item[col.key]) : (item[col.key] || '-')}
${col.render ? col.render(item[col.key], item) : (item[col.key] || '-')}
</td>
`).join('')}
<td class="px-4 py-4 text-sm text-center">
@@ -1141,7 +1331,16 @@
${config.actions.map(action => {
let onclick = '';
let btnClass = 'text-primary hover:text-primary/80';
if (action === 'delete') {
// 对于 fine-tune 的停止按钮，检查状态
if (action === 'stop' && config.api === 'fine-tune') {
// 状态为 completed 或 failed 时隐藏停止按钮
if (item.status === 'completed' || item.status === 'failed') {
return '';
}
onclick = `stopItem(${item.id})`;
btnClass = 'text-orange-500 hover:text-orange-600';
} else if (action === 'delete') {
onclick = `deleteItem('${config.api}', ${item.id})`;
btnClass = 'text-danger hover:text-danger/80';
} else if (action === 'edit') {
@@ -1152,6 +1351,8 @@
onclick = `downloadDataset('${item.id}')`;
} else if (action === 'compare' && config.api === 'model-compare') {
onclick = `startCompare(${item.id})`;
} else if (action === 'logs' && config.api === 'fine-tune') {
onclick = `navigateToTrainingLog(${item.id})`;
} else {
onclick = `showMessage('提示', '${actionLabels[action] || action}功能开发中...', 'info')`;
}
@@ -1189,33 +1390,59 @@
</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" onchange="loadLogFiles()">
<!-- 日志类型切换 -->
<div class="flex items-center mb-4">
<div class="flex bg-gray-100 rounded-lg p-1">
<button id="logTabSystem" onclick="switchLogTab('system')" class="px-4 py-1.5 text-sm rounded-md transition-colors bg-white shadow-sm text-primary">
系统日志
</button>
<button id="logTabTraining" onclick="switchLogTab('training')" class="px-4 py-1.5 text-sm rounded-md transition-colors text-gray-600 hover:text-gray-800">
训练日志
</button>
</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>
</div>
<!-- 系统日志选项 -->
<div id="systemLogOptions">
<!-- 日期选择 -->
<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" onchange="loadLogFiles()">
</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 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 id="trainingLogOptions" class="hidden">
<div class="flex items-center mb-4">
<label class="text-sm text-gray-600 mr-3">训练日志:</label>
<select id="trainingLogSelect" onchange="loadSelectedTrainingLog()" class="px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none flex-1">
<option value="">请选择训练日志</option>
</select>
</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">
@@ -1233,24 +1460,131 @@
`;
}
// 当前日志类型：system 或 training
let currentLogTab = 'system';
// 切换日志类型标签
function switchLogTab(tab) {
currentLogTab = tab;
const systemTab = document.getElementById('logTabSystem');
const trainingTab = document.getElementById('logTabTraining');
const systemOptions = document.getElementById('systemLogOptions');
const trainingOptions = document.getElementById('trainingLogOptions');
if (tab === 'system') {
systemTab.className = 'px-4 py-1.5 text-sm rounded-md transition-colors bg-white shadow-sm text-primary';
trainingTab.className = 'px-4 py-1.5 text-sm rounded-md transition-colors text-gray-600 hover:text-gray-800';
systemOptions.classList.remove('hidden');
trainingOptions.classList.add('hidden');
loadLogFiles();
} else {
trainingTab.className = 'px-4 py-1.5 text-sm rounded-md transition-colors bg-white shadow-sm text-primary';
systemTab.className = 'px-4 py-1.5 text-sm rounded-md transition-colors text-gray-600 hover:text-gray-800';
trainingOptions.classList.remove('hidden');
systemOptions.classList.add('hidden');
loadTrainingLogFiles();
}
}
// 初始化日志查看器
function initLogViewer() {
const datePicker = document.getElementById('logDatePicker');
if (datePicker) {
const today = new Date().toISOString().split('T')[0];
datePicker.value = today;
loadLogFiles();
}
// 加载默认日志类型
loadLogFiles();
// 启动自动刷新
setRefreshInterval();
}
// 加载训练日志文件列表
async function loadTrainingLogFiles() {
const logSelect = document.getElementById('trainingLogSelect');
if (!logSelect) return;
logSelect.innerHTML = '<option value="">加载中...</option>';
try {
const response = await fetch(`${API_BASE}/training-log-files`);
const result = await response.json();
if (result.code === 0 && result.data) {
logSelect.innerHTML = '<option value="">请选择训练日志</option>';
result.data.forEach(log => {
const option = document.createElement('option');
option.value = log.file;
option.textContent = `${log.name} (PID: ${log.pid}, ${log.date}, ${log.size})`;
logSelect.appendChild(option);
});
// 如果有日志文件，自动加载第一个
if (result.data.length > 0) {
logSelect.value = result.data[0].file;
loadSelectedTrainingLog();
} else {
document.getElementById('logContent').textContent = '暂无训练日志';
document.getElementById('logFileInfo').textContent = '无训练日志';
}
} else {
logSelect.innerHTML = '<option value="">暂无训练日志</option>';
document.getElementById('logContent').textContent = '暂无训练日志';
document.getElementById('logFileInfo').textContent = '无训练日志';
}
} catch (error) {
console.error('加载训练日志列表失败:', error);
logSelect.innerHTML = '<option value="">加载失败</option>';
document.getElementById('logContent').textContent = '加载训练日志列表失败: ' + error.message;
}
}
// 加载选中的训练日志
async function loadSelectedTrainingLog() {
const logSelect = document.getElementById('trainingLogSelect');
const logFile = logSelect.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}/training-log-content?file=${encodeURIComponent(logFile)}`);
const result = await response.json();
if (result.code === 0 && result.data) {
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 = '加载失败';
}
}
// 加载日志文件列表
async function loadLogFiles() {
const datePicker = document.getElementById('logDatePicker');
const logTypeSelect = document.getElementById('logTypeSelect');
const selectedDate = datePicker.value;
const selectedDate = datePicker ? datePicker.value : new Date().toISOString().split('T')[0];
if (!logTypeSelect) return;
logTypeSelect.innerHTML = '<option value="">加载中...</option>';
try {
@@ -1269,6 +1603,10 @@
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>';
@@ -1324,9 +1662,13 @@
// 刷新日志
function refreshLogs() {
loadLogFiles();
if (document.getElementById('logTypeSelect').value) {
loadSelectedLog();
if (currentLogTab === 'system') {
loadLogFiles();
if (document.getElementById('logTypeSelect').value) {
loadSelectedLog();
}
} else {
loadTrainingLogFiles();
}
// 重置倒计时
const select = document.getElementById('logRefreshInterval');
@@ -2057,10 +2399,63 @@
}
}
// 根据模型ID获取模型名称
// 根据模型ID获取模型名称（同步版本，用于表格渲染）
function getModelName(modelId) {
const model = modelListCache.find(m => m.id === modelId);
return model ? model.name : `模型${modelId}`;
if (!modelId) return '-';
// 尝试多种方式匹配（处理类型不一致的情况）
const model = modelListCache.find(m =>
m.id == modelId ||
m.id === String(modelId) ||
m.id === Number(modelId)
);
if (model) {
return model.name;
}
// 如果缓存中没有找到，尝试直接通过 API 获取单个模型
// 这是一个备用方案，不会阻塞渲染
return `模型${modelId}`;
}
// 异步获取模型名称并更新 DOM（用于表格渲染后的更新）
async function fetchAndUpdateModelName(modelId, cellElement) {
if (!modelId) {
cellElement.textContent = '-';
return;
}
// 先尝试从缓存中找
let model = modelListCache.find(m =>
m.id == modelId ||
m.id === String(modelId) ||
m.id === Number(modelId)
);
// 如果缓存中没有，尝试直接获取
if (!model) {
try {
const response = await fetch(`${API_BASE}/model-manage`);
const result = await response.json();
if (result.code === 0) {
modelListCache = result.data || [];
model = modelListCache.find(m =>
m.id == modelId ||
m.id === String(modelId) ||
m.id === Number(modelId)
);
}
} catch (e) {
console.error('获取模型列表失败:', e);
}
}
if (model) {
cellElement.textContent = model.name;
} else {
cellElement.textContent = `模型${modelId}`;
}
}
// 根据模型ID列表获取模型名称列表
@@ -2255,12 +2650,12 @@
<td class="p-3 border border-gray-200 text-gray-500 text-sm">循环次数，代表模型训练过程中模型学习数据集的次数，可理解为看几遍数据，一般建议的范围是1-3遍即可</td>
</tr>
<tr>
<td class="p-3 border border-gray-200 text-gray-700">eval_steps</td>
<td class="p-3 border border-gray-200 text-gray-700">save_steps</td>
<td class="p-3 border border-gray-200">
<input type="number" name="eval_steps_lora" value="50" class="w-24 px-2 py-1 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none">
<input type="number" name="save_steps_lora" value="50" class="w-24 px-2 py-1 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none">
<span class="text-xs text-gray-400 ml-2">[1,2147483647]</span>
</td>
<td class="p-3 border border-gray-200 text-gray-500 text-sm">验证步数，训练阶段针模型的验证间隔步长，用于阶段性评估模型训练准确率、训练损失</td>
<td class="p-3 border border-gray-200 text-gray-500 text-sm">保存步数，训练阶段模型的保存间隔步长，用于阶段性保存模型权重</td>
</tr>
<tr>
<td class="p-3 border border-gray-200 text-gray-700">lora_alpha</td>
@@ -2375,12 +2770,12 @@
<td class="p-3 border border-gray-200 text-gray-500 text-sm">循环次数，代表模型训练过程中模型学习数据集的次数，可理解为看几遍数据，一般建议的范围是1-3遍即可，可依据需求进行调整</td>
</tr>
<tr>
<td class="p-3 border border-gray-200 text-gray-700">eval_steps</td>
<td class="p-3 border border-gray-200 text-gray-700">save_steps</td>
<td class="p-3 border border-gray-200">
<input type="number" name="eval_steps_full" value="50" class="w-24 px-2 py-1 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none">
<input type="number" name="save_steps_full" value="50" class="w-24 px-2 py-1 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none">
<span class="text-xs text-gray-400 ml-2">[1,2147483647]</span>
</td>
<td class="p-3 border border-gray-200 text-gray-500 text-sm">验证步数，训练阶段针模型的验证间隔步长，用于阶段性评估模型训练准确率、训练损失</td>
<td class="p-3 border border-gray-200 text-gray-500 text-sm">保存步数，训练阶段模型的保存间隔步长，用于阶段性保存模型权重</td>
</tr>
<tr>
<td class="p-3 border border-gray-200 text-gray-700">lr_scheduler_type</td>
@@ -2629,7 +3024,7 @@
'batch_size_lora': '16',
'learning_rate_lora': '3e-4',
'n_epochs_lora': '3',
'eval_steps_lora': '50',
'save_steps_lora': '50',
'lora_alpha': '32',
'lora_dropout': '0.1',
'lora_rank': '8',
@@ -2649,7 +3044,7 @@
'batch_size_full': '16',
'learning_rate_full': '1e-5',
'n_epochs_full': '3',
'eval_steps_full': '50',
'save_steps_full': '50',
'lr_scheduler_type_full': 'linear',
'max_length_full': '8192',
'warmup_ratio_full': '0.05',
@@ -2755,6 +3150,7 @@
const modalConfirmBtn = document.getElementById('modalConfirmBtn');
const modalCancelBtn = document.getElementById('modalCancelBtn');
const modalBtnGroup = document.getElementById('modalBtnGroup');
const modalSingleBtnGroup = document.getElementById('modalSingleBtnGroup');
if (!modalConfirmBtn) {
console.error('modalConfirmBtn not found');
@@ -2771,7 +3167,9 @@
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';
@@ -2863,6 +3261,11 @@
}
}
// 返回到列表页（外部页面用）
function goBackToList() {
navigateToPage('fine-tune');
}
// 添加评测维度
function addDimension() {
window.location.href = 'model-dimension-create.html';

134
web/pages/model-manage.html
View File

@@ -219,6 +219,9 @@
<button onclick="switchTab('evaluation')" id="tab-evaluation" class="tab-btn" style="display: inline-flex; align-items: center; justify-content: center;">
评测模型
</button>
<button onclick="switchTab('trained')" id="tab-trained" class="tab-btn" style="display: inline-flex; align-items: center; justify-content: center;">
已训练模型
</button>
</div>
</div>
@@ -235,7 +238,7 @@
</div>
<!-- 模型表格 -->
<div class="bg-white rounded-lg shadow-sm">
<div id="modelsTableContainer" class="bg-white rounded-lg shadow-sm">
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
@@ -260,6 +263,33 @@
<p class="text-gray-500">暂无模型数据</p>
</div>
</div>
<!-- 已训练模型表格 -->
<div id="trainedModelsContainer" class="hidden bg-white rounded-lg shadow-sm">
<div class="p-4 border-b border-gray-200">
<p class="text-sm text-gray-500">已训练模型存储在 /app/base/saves 目录下</p>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">基座模型</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">训练方法</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模型路径</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody id="trainedModelsBody" class="bg-white divide-y divide-gray-200">
<!-- 动态加载 -->
</tbody>
</table>
</div>
<!-- 空状态 -->
<div id="trainedEmptyState" class="hidden px-6 py-12 text-center">
<i class="fa fa-inbox text-4xl text-gray-300 mb-3"></i>
<p class="text-gray-500">暂无已训练模型</p>
</div>
</div>
</div>
<script>
@@ -272,6 +302,7 @@
const API_BASE = getApiBase();
let allModels = [];
let trainedModels = [];
let currentTab = 'all';
// Tab 切换
@@ -284,7 +315,25 @@
const activeTab = document.getElementById(`tab-${tab}`);
activeTab.classList.add('tab-active');
renderModels();
// 显示/隐藏搜索框和添加按钮
const toolbar = document.querySelector('div[style*="justify-content: space-between"]');
if (toolbar) {
toolbar.style.display = tab === 'trained' ? 'none' : 'flex';
}
// 显示/隐藏表格容器
const modelsTable = document.getElementById('modelsTableContainer');
const trainedModelsContainer = document.getElementById('trainedModelsContainer');
if (tab === 'trained') {
modelsTable.classList.add('hidden');
trainedModelsContainer.classList.remove('hidden');
loadTrainedModels();
} else {
modelsTable.classList.remove('hidden');
trainedModelsContainer.classList.add('hidden');
renderModels();
}
}
// 加载模型数据
@@ -302,6 +351,23 @@
}
}
// 加载已训练模型数据
async function loadTrainedModels() {
try {
const response = await fetch(`${API_BASE}/model-manage/trained-models`);
const result = await response.json();
console.log('[DEBUG] 已训练模型:', result);
if (result.code === 0) {
trainedModels = result.data?.models || [];
renderTrainedModels();
}
} catch (error) {
console.error('加载已训练模型失败:', error);
}
}
// 筛选模型
function filterModels() {
renderModels();
@@ -396,6 +462,70 @@
}).join('');
}
// 渲染已训练模型列表
function renderTrainedModels() {
const tbody = document.getElementById('trainedModelsBody');
const emptyState = document.getElementById('trainedEmptyState');
// 收集所有训练方法
let allTrainMethods = [];
trainedModels.forEach(model => {
if (model.train_methods && model.train_methods.length > 0) {
model.train_methods.forEach(method => {
allTrainMethods.push({
baseModel: model.name,
trainMethod: method.name,
path: method.path
});
});
}
});
if (allTrainMethods.length === 0) {
tbody.innerHTML = '';
emptyState.classList.remove('hidden');
return;
}
emptyState.classList.add('hidden');
tbody.innerHTML = allTrainMethods.map(item => {
// 训练方法显示
const methodMap = {
'lora': 'LoRA',
'qlora': 'QLoRA',
'full': '全量微调',
'prefix': 'Prefix Tuning',
'adapter': 'Adapter'
};
const methodDisplay = methodMap[item.trainMethod] || item.trainMethod;
return `
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">${item.baseModel}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium rounded bg-green-100 text-green-700">${methodDisplay}</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-500 max-w-xs truncate" title="${item.path}">${item.path}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<button onclick="viewTrainedModel('${item.path.replace(/\\/g, '\\\\')}')" class="text-primary hover:text-primary/80 mr-3">
<i class="fa fa-folder-open"></i> 查看
</button>
</td>
</tr>
`;
}).join('');
}
// 查看已训练模型
function viewTrainedModel(path) {
alert(`模型路径: ${path}\n\n您可以从此路径加载模型进行推理或评测。`);
}
// 编辑模型
function editModel(id) {
window.location.href = `model-manage-create.html?id=${id}`;

740
web/pages/training-log.html Normal file
View File

@@ -0,0 +1,740 @@
<!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>
<link href="../lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<script src="../lib/chart.js/chart.min.js"></script>
<script>
// 确保 Chart.js 已加载
if (typeof Chart === 'undefined') {
console.error('Chart.js 未加载，尝试动态加载...');
// 备用：尝试动态加载
const script = document.createElement('script');
script.src = '../lib/chart.js/chart.umd.min.js';
script.onload = function() {
console.log('Chart.js 动态加载成功');
window.chartJsLoaded = true;
};
script.onerror = function() {
console.error('Chart.js 加载失败');
};
document.head.appendChild(script);
} else {
console.log('Chart.js 已加载');
window.chartJsLoaded = true;
}
</script>
<style>
.bg-primary { background-color: #1890ff; }
.text-primary { color: #1890ff; }
.border-primary { border-color: #1890ff; }
:root { --primary: #1890ff; --danger: #f5222d; --success: #52c41a; }
/* 日志样式 */
.log-content {
font-family: 'Consolas', 'Monaco', monospace;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
word-wrap: break-word;
}
.log-content .error { color: #dc3545; }
.log-content .warning { color: #d97706; }
.log-content .info { color: #0891b2; }
.log-content .success { color: #16a34a; }
.log-content .progress { color: #7c3aed; font-weight: bold; }
.log-line { padding: 1px 8px; }
.log-line:hover { background-color: rgba(24, 144, 255, 0.1); }
</style>
</head>
<body class="bg-gray-50 p-6">
<!-- 页面标题 -->
<div class="bg-white rounded-lg shadow-sm w-full p-4 border-b border-gray-100 mb-4">
<div class="flex items-center justify-between">
<div class="flex items-center text-sm">
<span class="text-gray-800 font-medium">训练日志</span>
</div>
<div class="flex items-center space-x-3">
<button onclick="toggleTB()" id="tbBtn" class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 transition-colors text-sm">
<i class="fa fa-bar-chart mr-1"></i>TensorBoard
</button>
</div>
</div>
</div>
<!-- 任务信息 -->
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-800" id="taskName">加载中...</h2>
<span id="taskStatus" class="px-3 py-1 rounded-full text-sm bg-gray-100 text-gray-600">加载中</span>
</div>
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-sm">
<div>
<div class="text-gray-500 text-xs">基础模型</div>
<div id="baseModel" class="font-medium text-gray-800">-</div>
</div>
<div>
<div class="text-gray-500 text-xs">数据集</div>
<div id="dataset" class="font-medium text-gray-800">-</div>
</div>
<div>
<div class="text-gray-500 text-xs">创建时间</div>
<div id="createTime" class="font-medium text-gray-800">-</div>
</div>
<div>
<div class="text-gray-500 text-xs">进程ID</div>
<div id="processId" class="font-medium text-gray-800">-</div>
</div>
<div>
<div class="text-gray-500 text-xs">最后更新</div>
<div id="lastUpdate" class="font-medium text-gray-800">-</div>
</div>
</div>
</div>
<!-- 训练曲线图表 -->
<div id="chartsContainer" class="bg-white rounded-lg shadow-sm p-6 mb-6">
<h3 class="text-base font-medium text-gray-800 mb-4">训练曲线</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<canvas id="lossChart" class="w-full h-48"></canvas>
</div>
<div>
<canvas id="gradNormChart" class="w-full h-48"></canvas>
</div>
<div>
<canvas id="learningRateChart" class="w-full h-48"></canvas>
</div>
</div>
</div>
<!-- 日志内容 -->
<div class="bg-white rounded-lg shadow-sm">
<div class="flex items-center justify-between p-4 border-b border-gray-100">
<h3 class="text-base font-medium text-gray-800">实时日志</h3>
<div class="flex items-center space-x-4">
<input type="text" id="logSearchInput" placeholder="搜索日志..."
class="px-3 py-1.5 border border-gray-300 rounded text-sm focus:outline-none focus:border-primary w-48"
oninput="searchLog()">
</div>
</div>
<div class="p-4">
<div id="logMatchCount" class="text-xs text-gray-500 mb-2"></div>
<div id="logContent" class="log-content bg-gray-50 rounded p-4 max-h-[400px] overflow-y-auto text-xs">
加载日志中...
</div>
</div>
</div>
<script>
let taskId = null;
let taskInfo = null;
let trainingLogFullContent = '';
// 训练曲线数据
const lossData = { labels: [], values: [] };
const gradNormData = { labels: [], values: [] };
const learningRateData = { labels: [], values: [] };
// 图表实例
let lossChart, gradNormChart, learningRateChart;
// 初始化图表
function initCharts() {
if (typeof Chart === 'undefined') {
console.error('[Charts] Chart 未定义，无法初始化图表');
document.getElementById('chartsContainer').innerHTML = '<div class="text-center p-4 text-red-500"><i class="fa fa-exclamation-triangle mr-2"></i>图表库加载失败，请刷新页面重试</div>';
return;
}
console.log('[Charts] 开始初始化图表...');
const commonOptions = {
responsive: true,
maintainAspectRatio: false,
animation: false,
scales: {
x: {
title: { display: true, text: 'Step' },
grid: { color: 'rgba(0,0,0,0.05)' }
},
y: {
title: { display: true, text: 'Value' },
grid: { color: 'rgba(0,0,0,0.05)' }
}
},
plugins: {
legend: { display: false }
}
};
// Loss 图表
const lossCtx = document.getElementById('lossChart').getContext('2d');
lossChart = new Chart(lossCtx, {
type: 'line',
data: {
labels: lossData.labels,
datasets: [{
label: 'Loss',
data: lossData.values,
borderColor: '#ef4444',
backgroundColor: 'rgba(239, 68, 68, 0.1)',
fill: true,
tension: 0.3,
pointRadius: 3
}]
},
options: {
...commonOptions,
plugins: { ...commonOptions.plugins, title: { display: true, text: 'Loss', color: '#ef4444', font: { size: 14 } } }
}
});
// Grad Norm 图表
const gradNormCtx = document.getElementById('gradNormChart').getContext('2d');
gradNormChart = new Chart(gradNormCtx, {
type: 'line',
data: {
labels: gradNormData.labels,
datasets: [{
label: 'Grad Norm',
data: gradNormData.values,
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
fill: true,
tension: 0.3,
pointRadius: 3
}]
},
options: {
...commonOptions,
plugins: { ...commonOptions.plugins, title: { display: true, text: 'Grad Norm', color: '#3b82f6', font: { size: 14 } } }
}
});
// Learning Rate 图表
const lrCtx = document.getElementById('learningRateChart').getContext('2d');
learningRateChart = new Chart(lrCtx, {
type: 'line',
data: {
labels: learningRateData.labels,
datasets: [{
label: 'Learning Rate',
data: learningRateData.values,
borderColor: '#22c55e',
backgroundColor: 'rgba(34, 197, 94, 0.1)',
fill: true,
tension: 0.3,
pointRadius: 3
}]
},
options: {
...commonOptions,
scales: {
...commonOptions.scales,
y: {
...commonOptions.scales.y,
type: 'logarithmic',
title: { display: true, text: 'Learning Rate (log)' }
}
},
plugins: { ...commonOptions.plugins, title: { display: true, text: 'Learning Rate', color: '#22c55e', font: { size: 14 } } }
}
});
}
// 解析日志中的指标数据
function parseMetricsFromLog(logContent) {
// 匹配 {'loss': x.xxxx, 'grad_norm': x.xxxx, 'learning_rate': x.xxxx, 'epoch': x.xx}
const metricRegex = /\{'loss':\s*([\d.]+),\s*'grad_norm':\s*([\d.]+),\s*'learning_rate':\s*([\d.e+-]+),\s*'epoch':\s*([\d.]+)\}/g;
let match;
let step = 0;
while ((match = metricRegex.exec(logContent)) !== null) {
const loss = parseFloat(match[1]);
const gradNorm = parseFloat(match[2]);
const learningRate = parseFloat(match[3]);
const epoch = parseFloat(match[4]);
// 更新数据
if (!lossData.values.includes(loss)) {
step++;
lossData.labels.push(step);
lossData.values.push(loss);
gradNormData.labels.push(step);
gradNormData.values.push(gradNorm);
learningRateData.labels.push(step);
learningRateData.values.push(learningRate);
}
}
// 更新图表
if (lossChart) {
lossChart.data.labels = lossData.labels;
lossChart.data.datasets[0].data = lossData.values;
lossChart.update('none');
}
if (gradNormChart) {
gradNormChart.data.labels = gradNormData.labels;
gradNormChart.data.datasets[0].data = gradNormData.values;
gradNormChart.update('none');
}
if (learningRateChart) {
learningRateChart.data.labels = learningRateData.labels;
learningRateChart.data.datasets[0].data = learningRateData.values;
learningRateChart.update('none');
}
}
// 带超时的 fetch
async function fetchWithTimeout(url, options = {}, timeout = 10000) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
try {
const response = await fetch(url, {
...options,
signal: controller.signal
});
clearTimeout(id);
return response;
} catch (error) {
clearTimeout(id);
throw new Error(`请求超时或失败: ${error.message}`);
}
}
// 获取URL参数
function getQueryParam(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}
// 获取任务ID（优先从URL参数，其次从sessionStorage）
function getTaskId() {
let id = getQueryParam('id');
if (!id) {
try {
id = sessionStorage.getItem('trainingLogTaskId');
} catch (e) {}
}
return id;
}
// 返回模型调优列表
function goBack() {
if (window.parent && window.parent.navigateToPage) {
window.parent.navigateToPage('fine-tune');
} else {
window.location.href = 'main.html?page=fine-tune';
}
}
// 初始化
async function init() {
console.log('[Init] 开始初始化...');
taskId = getTaskId();
console.log('[Init] taskId:', taskId);
if (!taskId) {
document.getElementById('taskName').textContent = '未指定任务ID';
document.getElementById('logContent').innerHTML = '<span class="text-gray-400">请先从模型调优列表点击查看日志</span>';
return;
}
console.log('[Init] 加载任务信息...');
await loadTaskInfo();
console.log('[Init] 加载日志内容...');
await loadLogContent();
// 自动刷新（每5秒）
setInterval(async () => {
await loadTaskInfo();
await loadLogContent();
}, 5000);
}
// 加载任务信息
async function loadTaskInfo() {
try {
console.log('[Task] Fetching task info from:', `${API_BASE}/fine-tune/${taskId}`);
const response = await fetchWithTimeout(`${API_BASE}/fine-tune/${taskId}`);
console.log('[Task] Response status:', response.status);
const result = await response.json();
console.log('[Task] API result:', result);
if (result.code === 0 && result.data) {
taskInfo = result.data;
console.log('[Task] taskInfo:', taskInfo);
console.log('[Task] process_id:', taskInfo.process_id);
await updateTaskInfo();
} else {
console.error('[Task] API返回错误:', result.message);
}
} catch (error) {
console.error('[Task] 获取任务信息失败:', error);
document.getElementById('taskStatus').textContent = '获取失败';
document.getElementById('taskStatus').className = 'px-3 py-1 rounded-full text-sm bg-red-100 text-red-700';
}
}
// 更新任务信息显示
async function updateTaskInfo() {
if (!taskInfo) return;
document.getElementById('taskName').textContent = taskInfo.name || '未知任务';
// 更新状态
const statusElement = document.getElementById('taskStatus');
const actualStatus = taskInfo.status ? taskInfo.status.toLowerCase() : 'unknown';
const statusMap = {
'pending': { text: '等待中', class: 'bg-gray-100 text-gray-600' },
'running': { text: '训练中', class: 'bg-blue-100 text-blue-600' },
'completed': { text: '已完成', class: 'bg-green-100 text-green-600' },
'failed': { text: '失败', class: 'bg-red-100 text-red-700' },
'stopped': { text: '已停止', class: 'bg-orange-100 text-orange-600' }
};
const statusConfig = statusMap[actualStatus] || { text: actualStatus, class: 'bg-gray-100 text-gray-600' };
statusElement.textContent = statusConfig.text;
statusElement.className = `px-3 py-1 rounded-full text-sm ${statusConfig.class}`;
// 更新进度
const progressElement = document.getElementById('taskProgress');
if (progressElement && taskInfo.progress !== undefined) {
progressElement.textContent = `${taskInfo.progress}%`;
}
// 获取并显示GPU信息（如果有）
try {
const gpuResponse = await fetchWithTimeout(`${API_BASE}/fine-tune/progress/${taskId}`);
const gpuResult = await gpuResponse.json();
if (gpuResult.code === 0 && gpuResult.data) {
const gpuElement = document.getElementById('taskGPU');
if (gpuElement && gpuResult.data.gpu_info) {
gpuElement.textContent = gpuResult.data.gpu_info;
}
}
} catch (e) {
console.log('[Task] 获取GPU信息失败:', e);
}
// 更新数据集信息
const datasetElement = document.getElementById('dataset');
if (datasetElement && taskInfo.train_dataset_id) {
try {
const datasetResponse = await fetchWithTimeout(`${API_BASE}/dataset-manage/${taskInfo.train_dataset_id}`);
const datasetResult = await datasetResponse.json();
if (datasetResult.code === 0 && datasetResult.data) {
datasetElement.textContent = datasetResult.data.name;
} else {
datasetElement.textContent = `数据集${taskInfo.train_dataset_id}`;
}
} catch (e) {
datasetElement.textContent = `数据集${taskInfo.train_dataset_id}`;
}
} else if (datasetElement) {
datasetElement.textContent = '-';
}
// 更新最后更新时间
const lastUpdateElement = document.getElementById('lastUpdate');
if (lastUpdateElement && taskInfo.update_time) {
try {
const updateTime = new Date(taskInfo.update_time);
lastUpdateElement.textContent = updateTime.toLocaleString('zh-CN');
} catch (e) {
lastUpdateElement.textContent = taskInfo.update_time || '-';
}
}
// 其他信息
document.getElementById('processId').textContent = taskInfo.process_id || '-';
document.getElementById('createTime').textContent = taskInfo.create_time ?
new Date(taskInfo.create_time).toLocaleString('zh-CN') : '-';
// 获取模型名称
if (taskInfo.base_model) {
loadModelName(taskInfo.base_model);
}
}
// 加载模型名称
async function loadModelName(modelId) {
try {
const response = await fetchWithTimeout(`${API_BASE}/model-manage`);
const result = await response.json();
if (result.code === 0 && result.data) {
const model = result.data.find(m => m.id == modelId);
document.getElementById('baseModel').textContent = model ? model.name : `模型${modelId}`;
}
} catch (e) {
document.getElementById('baseModel').textContent = `模型${modelId}`;
}
}
// 加载日志内容
async function loadLogContent() {
console.log('[Log] loadLogContent called');
console.log('[Log] taskInfo:', taskInfo);
console.log('[Log] taskInfo.process_id:', taskInfo ? taskInfo.process_id : 'taskInfo is null');
// 检查 taskInfo 是否存在
if (!taskInfo) {
console.log('[Log] taskInfo 为空，等待任务信息加载...');
// 尝试重新加载任务信息
await loadTaskInfo();
if (!taskInfo) {
document.getElementById('logContent').innerHTML = '<span class="text-gray-400">无法获取任务信息</span>';
return;
}
}
// 检查 process_id 和 task_name
const processId = taskInfo.process_id;
const taskName = taskInfo.name || '';
if (!processId && !taskName) {
const msg = '<span class="text-gray-400">暂无日志文件 (任务未开始或无进程ID)</span>';
document.getElementById('logContent').innerHTML = msg;
return;
}
try {
console.log('[Log] Fetching training log files...');
const response = await fetchWithTimeout(`${API_BASE}/training-log-files`);
const result = await response.json();
if (result.code === 0 && result.data) {
console.log('[Log] Training log files:', result.data);
// 优先使用进程ID匹配文件名
let selectedFile = null;
if (processId) {
const pidStr = processId.toString();
for (const file of result.data) {
console.log(`[Log] Checking file: ${file.file}, PID: ${file.pid}, Match: ${file.file.startsWith(pidStr + '_') || file.file.includes(pidStr)}`);
if (file.file.startsWith(pidStr + '_') || file.file.includes(`_${pidStr}_`) || file.file.endsWith(`_${pidStr}.log`)) {
selectedFile = file.file;
break;
}
}
}
// 如果没找到，尝试使用任务名称匹配
if (!selectedFile && taskName) {
for (const file of result.data) {
if (file.file.includes(taskName)) {
selectedFile = file.file;
break;
}
}
}
// 如果仍然没有找到，使用第一个文件
if (!selectedFile && result.data.length > 0) {
selectedFile = result.data[0].file;
console.log('[Log] No matching file found, using first available file:', selectedFile);
}
if (selectedFile) {
console.log('[Log] Selected log file:', selectedFile);
await loadLogFileContent(selectedFile);
} else {
document.getElementById('logContent').innerHTML = '<span class="text-gray-400">未找到匹配的日志文件</span>';
}
} else {
document.getElementById('logContent').innerHTML = '<span class="text-gray-400">获取日志列表失败: ' + (result.message || '未知错误') + '</span>';
}
} catch (error) {
console.error('[Log] 获取日志列表失败:', error);
document.getElementById('logContent').innerHTML = '<span class="text-red-500">加载日志失败: ' + error.message + '</span>';
}
}
// 加载日志文件内容
async function loadLogFileContent(fileName) {
console.log('[Log] Loading log file:', fileName);
try {
const response = await fetchWithTimeout(`${API_BASE}/training-log-content?file=${encodeURIComponent(fileName)}`);
const result = await response.json();
console.log('[Log] Log content API response:', result);
if (result.code === 0 && result.data) {
trainingLogFullContent = result.data.content || '';
console.log('[Log] Log content length:', trainingLogFullContent.length);
renderLogContent();
// 解析并更新图表
parseMetricsFromLog(trainingLogFullContent);
} else if (result.code === 2) {
// 文件被锁定，正在训练中
document.getElementById('logContent').innerHTML = `
<div class="text-orange-500 p-4 text-center">
<i class="fa fa-spinner fa-spin fa-2x mb-2"></i>
<p class="text-lg">日志文件正在被训练进程占用</p>
<p class="text-sm text-gray-500 mt-1">${result.message || '训练结束后可查看完整内容'}</p>
<p class="text-xs text-gray-400 mt-2">页面将自动刷新...</p>
</div>
`;
} else {
document.getElementById('logContent').innerHTML = '<span class="text-red-500">加载日志失败: ' + (result.message || '未知错误') + '</span>';
}
} catch (error) {
console.error('[Log] 获取日志内容失败:', error);
document.getElementById('logContent').innerHTML = '<span class="text-red-500">加载日志失败: ' + error.message + '</span>';
}
}
// 渲染日志内容
function renderLogContent() {
const logContent = document.getElementById('logContent');
const searchInput = document.getElementById('logSearchInput');
const searchText = searchInput ? searchInput.value.toLowerCase() : '';
if (!trainingLogFullContent) {
logContent.innerHTML = '<span class="text-gray-400">暂无日志内容</span>';
return;
}
const lines = trainingLogFullContent.split('\n');
let html = '';
let matchCount = 0;
// 只显示最后500行以提高性能
const displayLines = lines.slice(-500);
for (const line of displayLines) {
if (!line.trim()) continue;
// 搜索过滤
if (searchText && !line.toLowerCase().includes(searchText)) {
continue;
}
// 级别过滤（不再使用）
let cssClass = '';
if (line.includes('[ERROR') || line.includes('error:') || line.includes('Error:')) {
cssClass = 'error';
} else if (line.includes('[WARNING') || line.includes('warning:') || line.includes('Warning:')) {
cssClass = 'warning';
} else if (line.includes('[INFO') || line.includes('info:') || line.includes('Info:')) {
cssClass = 'info';
}
// 进度条格式高亮
if (/\d+%/.test(line)) {
cssClass = cssClass ? cssClass + ' progress' : 'progress';
}
html += `<div class="log-line ${cssClass}">${escapeHtml(line)}</div>`;
matchCount++;
}
if (matchCount === 0) {
html = '<div class="text-gray-400 p-4">没有匹配的日志</div>';
}
logContent.innerHTML = html;
logContent.scrollTop = logContent.scrollHeight;
// 更新匹配数量
document.getElementById('logMatchCount').textContent =
searchText ? `找到 ${matchCount} 条` : '';
}
// 搜索日志
function searchLog() {
console.log('[Search] 搜索触发，trainingLogFullContent:', trainingLogFullContent ? '已加载' : '未加载');
const searchInput = document.getElementById('logSearchInput');
console.log('[Search] 搜索文本:', searchInput ? searchInput.value : '输入框未找到');
renderLogContent();
}
// HTML转义
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// 页面加载完成后初始化
function startApp() {
console.log('[App] startApp called');
console.log('[App] Chart available:', typeof Chart !== 'undefined');
// 等待 Chart.js 加载完成（最多等待5秒）
let waitCount = 0;
const maxWait = 50; // 50 * 100ms = 5秒
function waitForChart() {
if (typeof Chart !== 'undefined') {
console.log('[App] Chart.js 已加载，开始初始化');
initCharts();
init();
} else if (waitCount < maxWait) {
waitCount++;
console.log('[App] 等待 Chart.js 加载... (' + waitCount + ')');
setTimeout(waitForChart, 100);
} else {
console.error('[App] Chart.js 加载超时');
document.getElementById('chartsContainer').innerHTML = '<div class="text-center p-4 text-red-500"><i class="fa fa-exclamation-triangle mr-2"></i>图表库加载失败，请检查网络或刷新页面</div>';
// 仍然初始化其他功能
init();
}
}
// 如果已加载，直接初始化；否则等待
if (typeof Chart !== 'undefined') {
initCharts();
init();
} else {
console.log('[App] Chart.js 尚未加载，开始等待...');
setTimeout(waitForChart, 100);
}
}
// TensorBoard 控制
const TB_URL = 'http://10.10.10.177:6006';
function toggleTB() {
const btn = document.getElementById('tbBtn');
btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i>启动中...';
btn.className = 'bg-gray-500 text-white px-4 py-2 rounded transition-colors text-sm cursor-wait';
// 调用API启动TensorBoard服务
fetch(`${API_BASE}/fine-tune/tensorboard/start`, { method: 'POST' })
.then(res => res.json())
.then(result => {
console.log('TensorBoard启动结果:', result);
if (result.code === 0) {
// 跳转到TensorBoard页面
window.open(TB_URL, '_blank');
btn.innerHTML = '<i class="fa fa-bar-chart mr-1"></i>打开TensorBoard';
btn.className = 'bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 transition-colors text-sm';
} else {
alert('提示: ' + (result.message || '启动失败'));
btn.innerHTML = '<i class="fa fa-bar-chart mr-1"></i>TensorBoard';
btn.className = 'bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 transition-colors text-sm';
}
})
.catch(err => {
console.error('启动TensorBoard失败:', err);
alert('提示: 启动失败 - ' + err.message);
btn.innerHTML = '<i class="fa fa-bar-chart mr-1"></i>TensorBoard';
btn.className = 'bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 transition-colors text-sm';
});
}
// 立即尝试初始化（处理 iframe 情况）
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', startApp);
} else {
startApp();
}
</script>
</body>
</html>