+ 暂无日志文件
'; + return; + } + data.sort((a, b) => new Date(b.modified_time) - new Date(a.modified_time)); + const groups = {}; + data.forEach((f) => { + let type = '自定义训练'; + const n = f.filename; + if (n.includes('train_pretrain_')) type = 'pretrain'; + else if (n.includes('train_sft_')) type = 'sft'; + else if (n.includes('train_lora_')) type = 'lora'; + else if (n.includes('train_dpo_')) type = 'dpo'; + else if (n.includes('train_ppo_')) type = 'ppo'; + else if (n.includes('train_grpo_')) type = 'grpo'; + else if (n.includes('train_spo_')) type = 'spo'; + f.train_type = type; + if (!groups[type]) groups[type] = []; + groups[type].push(f); + }); + const order = ['pretrain', 'sft', 'lora', 'dpo', 'ppo', 'grpo', 'spo', '未知']; + [...order.filter((t) => groups[t]), ...Object.keys(groups).filter((t) => !order.includes(t))].forEach((t) => { + list.appendChild(createTypeGroupWithToggle(t, groups[t])); + }); + }); +} + +function createTypeGroupWithToggle(trainType, files) { + const group = el('div', { class: 'process-type-group' }); + const header = el('div', { class: 'process-type-header' }); + header.dataset.expanded = 'true'; + const title = el('h3', { class: 'process-type-title', text: getTrainTypeDisplayName(trainType) }); + const toggle = el('button', { class: 'toggle-btn' }); + toggle.innerHTML = '▼'; + toggle.onclick = (e) => { + e.stopPropagation(); + toggleGroup(header); + }; + header.appendChild(title); + header.appendChild(toggle); + header.onclick = () => toggleGroup(header); + const content = el('div', { class: 'process-type-content' }); + files.forEach((f) => addLogFileItemToGroup(content, f)); + group.appendChild(header); + group.appendChild(content); + return group; +} + +function toggleGroup(header) { + const expanded = header.dataset.expanded === 'true'; + const content = header.nextElementSibling; + const toggle = header.querySelector('.toggle-btn'); + if (expanded) { + header.dataset.expanded = 'false'; + content.style.maxHeight = '0'; + content.style.overflow = 'hidden'; + toggle.innerHTML = '▶'; + } else { + content.style.overflow = 'hidden'; + content.style.maxHeight = 'none'; + const h = content.scrollHeight; + content.style.maxHeight = '0'; + content.offsetHeight; + header.dataset.expanded = 'true'; + content.style.maxHeight = h + 'px'; + setTimeout(() => { + content.style.maxHeight = 'none'; + content.style.overflow = 'visible'; + }, 300); + toggle.innerHTML = '▼'; + } +} + +function getTrainTypeDisplayName(trainType) { + const names = { + pretrain: '预训练 (Pretrain)', + sft: '全参数监督微调 (SFT - Full)', + lora: 'LoRA监督微调 (SFT - Lora)', + dpo: '直接偏好优化 (RL - DPO)', + ppo: 'PPO', + grpo: 'GRPO', + spo: 'SPO', + }; + return names[trainType] || trainType; +} + +function addLogFileItemToGroup(parent, logfile) { + const item = el('div', { class: 'process-item' }); + item.innerHTML = ` +暂无训练进程
'; + return; + } + data.sort((a, b) => new Date(b.start_time) - new Date(a.start_time)); + const groups = {}; + data.forEach((p) => { + if (!groups[p.train_type]) groups[p.train_type] = []; + groups[p.train_type].push(p); + }); + const order = ['pretrain', 'sft', 'lora', 'dpo']; + const types = [...order.filter((t) => groups[t]), ...Object.keys(groups).filter((t) => !order.includes(t))]; + types.forEach((t) => { + const g = createTypeGroupWithToggle(t, groups[t]); + list.appendChild(g); + }); + }); +} + +function createTypeGroupWithToggle(trainType, processes) { + const group = el('div', { class: 'process-type-group' }); + const header = el('div', { class: 'process-type-header' }); + header.dataset.expanded = 'true'; + const title = el('h3', { class: 'process-type-title', text: getTrainTypeDisplayName(trainType) }); + const toggle = el('button', { class: 'toggle-btn' }); + toggle.innerHTML = '▼'; + toggle.onclick = (e) => { + e.stopPropagation(); + toggleGroup(header); + }; + header.appendChild(title); + header.appendChild(toggle); + header.onclick = () => toggleGroup(header); + const content = el('div', { class: 'process-type-content' }); + processes.forEach((p) => addProcessItemToGroup(content, p)); + group.appendChild(header); + group.appendChild(content); + return group; +} + +function toggleGroup(header) { + const expanded = header.dataset.expanded === 'true'; + const content = header.nextElementSibling; + const toggle = header.querySelector('.toggle-btn'); + if (expanded) { + header.dataset.expanded = 'false'; + content.style.maxHeight = '0'; + content.style.overflow = 'hidden'; + toggle.innerHTML = '▶'; + } else { + content.style.overflow = 'hidden'; + content.style.maxHeight = 'none'; + const h = content.scrollHeight; + content.style.maxHeight = '0'; + content.offsetHeight; + header.dataset.expanded = 'true'; + content.style.maxHeight = h + 'px'; + setTimeout(() => { + content.style.maxHeight = 'none'; + content.style.overflow = 'visible'; + }, 300); + toggle.innerHTML = '▼'; + } +} + +function getTrainTypeDisplayName(trainType) { + const names = { + pretrain: '预训练 (Pretrain)', + sft: '全参数监督微调 (SFT - Full)', + lora: 'LoRA监督微调 (SFT - Lora)', + dpo: '直接偏好优化 (RL - DPO)', + ppo: 'PPO', + grpo: 'GRPO', + spo: 'SPO', + }; + return names[trainType] || trainType; +} + +export function addProcessItemToGroup(parent, process) { + const item = el('div', { class: 'process-item' }); + let statusClass = 'status-completed'; + if (process.status === '运行中') statusClass = 'status-running'; + else if (process.status === '手动停止') statusClass = 'status-manual-stop'; + else if (process.status === '出错') statusClass = 'status-error'; + item.dataset.processId = process.id; + item.dataset.processStatus = process.status; + item.dataset.trainMonitor = process.train_monitor || 'none'; + item.dataset.swanlabUrl = process.swanlab_url || ''; + const showDelete = !process.running; + const showSwanlab = process.train_monitor !== 'none'; + const swanBtn = showSwanlab ? `` : ''; + + // 计算进度信息 + const progressInfo = calculateProgress(process); + const progressBar = process.running ? ` +暂无训练进程
'; + } + }, 300); + }, 100); + } else { + const header = content.previousElementSibling; + if (header && header.dataset.expanded === 'true') content.style.maxHeight = content.scrollHeight + 'px'; + const left = document.querySelectorAll('.process-item'); + if (left.length === 0) { + const list = document.getElementById('process-list'); + list.innerHTML = '暂无训练进程
'; + } + } + } + }, 300); + } + clearLogTimerFor(processId); + showNotification('训练进程已删除', 'success'); + }) + .catch(() => { + showNotification('删除进程失败，请刷新页面重试', 'error'); + }); + }); +} + +export function stopProcess(processId) { + showConfirmDialog('确定要停止这个训练进程吗？', () => { + apiStop(processId) + .then(() => { + const item = document.querySelector(`[data-process-id="${processId}"]`); + if (item) { + item.dataset.processStatus = '手动停止'; + const statusEl = item.querySelector('.process-status'); + if (statusEl) { + statusEl.classList.remove('status-running', 'status-error', 'status-completed'); + statusEl.classList.add('status-manual-stop'); + statusEl.textContent = '手动停止'; + } + const stopBtn = item.querySelector('.btn-stop'); + if (stopBtn) stopBtn.remove(); + clearLogTimerFor(processId); + } + showNotification('训练进程已停止', 'info'); + getProcesses() + .then((data) => { + const updated = data.find((p) => p.id === processId); + if (updated && item) updateProcessItem(item, updated); + }) + .catch(() => {}); + }) + .catch(() => { + showNotification('停止进程失败', 'error'); + }); + }, () => { + showNotification('已取消停止操作', 'info'); + }); +} + +export function checkAndOpenSwanlab(processId) { + const item = document.querySelector(`[data-process-id="${processId}"]`); + const monitor = item ? item.dataset.trainMonitor : 'none'; + if (monitor === 'none') { + showNotification('此训练未启用监控功能', 'info'); + return; + } + let url = item ? item.dataset.swanlabUrl : ''; + if (!url || url.trim() === '') { + getProcesses() + .then((data) => { + const p = data.find((x) => x.id === processId); + if (p && p.swanlab_url) { + url = p.swanlab_url; + if (item) item.dataset.swanlabUrl = url; + openSwanlab(url); + } else { + showNotification('SwanLab链接尚未生成，请稍后再试', 'info'); + } + }) + .catch(() => { + showNotification('获取SwanLab链接失败，请稍后再试', 'error'); + }); + } else openSwanlab(url); +} + +function openSwanlab(url) { + if (!isValidUrl(url)) { + showNotification('SwanLab链接无效或尚未生成', 'info'); + return; + } + const w = window.open(url, '_blank'); + if (w) showNotification('正在打开SwanLab页面', 'info'); + else showNotification('无法打开新窗口，请检查浏览器设置', 'error'); +} + +function isValidUrl(url) { + try { + new URL(url); + return true; + } catch { + const u = String(url).toLowerCase(); + return u.startsWith('http://') || u.startsWith('https://'); + } +} + diff --git a/trainer_web/static/js/processes/logs.js b/trainer_web/static/js/processes/logs.js new file mode 100644 index 0000000..3c63c0c --- /dev/null +++ b/trainer_web/static/js/processes/logs.js @@ -0,0 +1,73 @@ +import { getLogs } from '../services/apiClient.js'; +import { setHidden } from '../utils/dom.js'; + +const logTimers = new Map(); + +export function showLogs(processId) { + const container = document.getElementById(`logs-${processId}`); + if (!container) return; + const wasHidden = container.classList.contains('hidden'); + setHidden(container, false); + if (wasHidden) { + loadLogContent(processId, container); + resetTimer(processId, container); + } else { + setHidden(container, true); + clearTimer(processId); + } +} + +export function refreshLog(processId) { + const container = document.getElementById(`logs-${processId}`); + if (!container || container.classList.contains('hidden')) return; + loadLogContent(processId, container); + resetTimer(processId, container); +} + +export function clearLogTimerFor(processId) { + clearTimer(processId); +} + +export function isLogTimerActive(processId) { + return logTimers.has(processId); +} + +function resetTimer(processId, container) { + clearTimer(processId); + const item = document.querySelector(`[data-process-id="${processId}"]`); + const running = item && item.dataset.processStatus === '运行中'; + if (!running) return; + const id = setInterval(() => { + if (container.classList.contains('hidden')) { + clearTimer(processId); + return; + } + const current = document.querySelector(`[data-process-id="${processId}"]`); + const stillRunning = current && current.dataset.processStatus === '运行中'; + if (stillRunning) loadLogContent(processId, container); + else clearTimer(processId); + }, 1000); + logTimers.set(processId, id); +} + +function clearTimer(processId) { + const id = logTimers.get(processId); + if (id) { + clearInterval(id); + logTimers.delete(processId); + } +} + +function loadLogContent(processId, container) { + const old = container.textContent; + const stickBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 10; + return getLogs(processId) + .then((logs) => { + container.textContent = logs; + if (stickBottom || old === container.textContent) container.scrollTop = container.scrollHeight; + }) + .catch((err) => { + if (!container.textContent.includes('加载失败')) container.textContent = `加载日志失败: ${err.message}`; + }); +} + diff --git a/trainer_web/static/js/services/apiClient.js b/trainer_web/static/js/services/apiClient.js new file mode 100644 index 0000000..9652661 --- /dev/null +++ b/trainer_web/static/js/services/apiClient.js @@ -0,0 +1,75 @@ +const defaultTimeout = 10000; + +export function fetchWithTimeoutAndRetry(url, options = {}, timeout = defaultTimeout, retries = 3) { + const controller = new AbortController(); + const timeoutId = setTimeout(() => controller.abort(), timeout); + const fetchOptions = { + ...options, + headers: { + ...options.headers, + 'Cache-Control': 'no-cache, no-store, must-revalidate', + Pragma: 'no-cache', + Expires: '0', + }, + signal: controller.signal, + }; + + return fetch(url, fetchOptions) + .then((response) => { + clearTimeout(timeoutId); + if (!response.ok) throw new Error(`HTTP ${response.status}`); + return response; + }) + .catch((error) => { + clearTimeout(timeoutId); + if (error.name === 'AbortError') throw new Error('请求超时'); + if (retries > 0) { + return new Promise((resolve) => { + setTimeout(() => { + resolve(fetchWithTimeoutAndRetry(url, options, timeout, retries - 1)); + }, timeout / 2); + }); + } + throw error; + }); +} + +export function getProcesses() { + return fetchWithTimeoutAndRetry('/processes').then((r) => r.json()); +} + +export function getLogs(processId) { + return fetchWithTimeoutAndRetry(`/logs/${processId}`).then((r) => r.text()); +} + +export function startTrain(payload) { + return fetchWithTimeoutAndRetry('/train', { + method: 'POST', + headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-cache' }, + body: JSON.stringify(payload), + }).then((r) => r.json()); +} + +export function stopProcess(processId) { + return fetchWithTimeoutAndRetry(`/stop/${processId}`, { method: 'POST' }).then((r) => r.json().catch(() => ({}))); +} + +export function deleteProcess(processId) { + return fetchWithTimeoutAndRetry(`/delete/${processId}`, { method: 'POST' }).then((r) => r.json().catch(() => ({}))); +} + +export function getLogFiles() { + return fetchWithTimeoutAndRetry('/logfiles').then((r) => r.json()); +} + +export function getLogFileContent(filename) { + return fetchWithTimeoutAndRetry(`/logfile-content/${encodeURIComponent(filename)}`).then((r) => r.text()); +} + +export function deleteLogFile(filename) { + return fetchWithTimeoutAndRetry(`/delete-logfile/${encodeURIComponent(filename)}`, { + method: 'DELETE', + headers: { 'Cache-Control': 'no-cache' }, + }).then((r) => r.json()); +} + diff --git a/trainer_web/static/js/services/authClient.js b/trainer_web/static/js/services/authClient.js new file mode 100644 index 0000000..18470c5 --- /dev/null +++ b/trainer_web/static/js/services/authClient.js @@ -0,0 +1,29 @@ +const KEY = 'minimind_api_key'; + +export function getApiKey() { + try { + return localStorage.getItem(KEY) || ''; + } catch (_) { + return ''; + } +} + +export function setApiKey(k) { + try { + localStorage.setItem(KEY, k || ''); + } catch (_) {} +} + +export function registerClient(payload) { + return fetch('/api/register', { + method: 'POST', + headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-cache' }, + body: JSON.stringify(payload || {}), + }).then((r) => { + if (!r.ok) throw new Error('register_failed'); + return r.json(); + }).then((res) => { + if (res && res.api_key) setApiKey(res.api_key); + return res; + }); +} \ No newline at end of file diff --git a/trainer_web/static/js/train/form.js b/trainer_web/static/js/train/form.js new file mode 100644 index 0000000..6e9f893 --- /dev/null +++ b/trainer_web/static/js/train/form.js @@ -0,0 +1,128 @@ +import { startTrain } from '../services/apiClient.js'; +import { showNotification } from '../ui/notify.js'; + +export function initTrainForm() { + const typeSel = document.getElementById('train_type'); + if (typeSel) { + typeSel.addEventListener('change', onTrainTypeChange); + typeSel.dispatchEvent(new Event('change')); + } + initGpuSelectors(); + const form = document.getElementById('train-form'); + if (form) form.addEventListener('submit', onSubmit); +} + +function onTrainTypeChange() { + const v = this.value; + const pretrainSft = document.querySelectorAll('.pretrain-sft'); + const fromWeightFields = document.querySelectorAll('.from-weight'); + const loraFields = document.querySelectorAll('.lora'); + const dpoFields = document.querySelectorAll('.dpo'); + const dpoCard = document.querySelector('.parameter-card.dpo'); + const ppoFields = document.querySelectorAll('.ppo'); + const ppoCard = document.querySelector('.parameter-card.ppo'); + const grpoFields = document.querySelectorAll('.grpo'); + const grpoCard = document.querySelector('.parameter-card.grpo'); + const spoFields = document.querySelectorAll('.spo'); + const spoCard = document.querySelector('.parameter-card.spo'); + pretrainSft.forEach((f) => (f.style.display = v === 'pretrain' || v === 'sft' || v === 'dpo' || v === 'ppo' || v === 'grpo' || v === 'spo' ? 'block' : 'none')); + fromWeightFields.forEach((f) => (f.style.display = v !== 'ppo' && v !== 'grpo' && v !== 'spo' ? 'block' : 'none')); + loraFields.forEach((f) => (f.style.display = v === 'lora' ? 'block' : 'none')); + dpoFields.forEach((f) => (f.style.display = v === 'dpo' ? 'block' : 'none')); + ppoFields.forEach((f) => (f.style.display = v === 'ppo' ? 'block' : 'none')); + if (dpoCard) dpoCard.style.display = v === 'dpo' ? 'block' : 'none'; + if (ppoCard) ppoCard.style.display = v === 'ppo' ? 'block' : 'none'; + grpoFields.forEach((f) => (f.style.display = v === 'grpo' ? 'block' : 'none')); + spoFields.forEach((f) => (f.style.display = v === 'spo' ? 'block' : 'none')); + if (grpoCard) grpoCard.style.display = v === 'grpo' ? 'block' : 'none'; + if (spoCard) spoCard.style.display = v === 'spo' ? 'block' : 'none'; + if (v === 'pretrain') setDefaults({ save_dir: '../out', save_weight: 'pretrain', epochs: '1', batch_size: '32', learning_rate: '5e-4', data_path: '../dataset/pretrain_hq.jsonl', from_weight: 'none', log_interval: '100', save_interval: '100', hidden_size: '512', num_hidden_layers: '8', max_seq_len: '512', use_moe: '0' }); + else if (v === 'sft') setDefaults({ save_dir: '../out', save_weight: 'full_sft', epochs: '2', batch_size: '16', learning_rate: '5e-7', data_path: '../dataset/sft_mini_512.jsonl', from_weight: 'pretrain', log_interval: '100', save_interval: '100', hidden_size: '512', num_hidden_layers: '8', max_seq_len: '512', use_moe: '0' }); + else if (v === 'lora') setDefaults({ save_dir: '../out/lora', lora_name: 'lora_identity', epochs: '50', batch_size: '32', learning_rate: '1e-4', data_path: '../dataset/lora_identity.jsonl', from_weight: 'full_sft', log_interval: '10', save_interval: '1', hidden_size: '512', num_hidden_layers: '8', max_seq_len: '512', use_moe: '0' }); + else if (v === 'dpo') setDefaults({ save_dir: '../out', save_weight: 'dpo', epochs: '1', batch_size: '4', learning_rate: '4e-8', data_path: '../dataset/dpo.jsonl', from_weight: 'full_sft', log_interval: '100', save_interval: '100', beta: '0.1', hidden_size: '512', num_hidden_layers: '8', max_seq_len: '1024', use_moe: '0' }); + else if (v === 'ppo') setDefaults({ save_dir: '../out', save_weight: 'ppo_actor', epochs: '1', batch_size: '2', learning_rate: '8e-8', data_path: '../dataset/rlaif-mini.jsonl', log_interval: '1', save_interval: '10', clip_epsilon: '0.1', vf_coef: '0.5', kl_coef: '0.02', reasoning: '1', update_old_actor_freq: '4', reward_model_path: '../../internlm2-1_8b-reward', hidden_size: '512', num_hidden_layers: '8', max_seq_len: '66', use_moe: '0' }); + else if (v === 'grpo') setDefaults({ save_dir: '../out', save_weight: 'grpo', epochs: '1', batch_size: '2', learning_rate: '8e-8', data_path: '../dataset/rlaif-mini.jsonl', log_interval: '1', save_interval: '10', beta: '0.02', num_generations: '8', reasoning: '1', reward_model_path: '../../internlm2-1_8b-reward', hidden_size: '512', num_hidden_layers: '8', max_seq_len: '66', use_moe: '0' }); + else if (v === 'spo') setDefaults({ save_dir: '../out', save_weight: 'spo', epochs: '1', batch_size: '2', learning_rate: '1e-7', data_path: '../dataset/rlaif-mini.jsonl', log_interval: '1', save_interval: '10', beta: '0.02', reasoning: '1', reward_model_path: '../../internlm2-1_8b-reward', hidden_size: '512', num_hidden_layers: '8', max_seq_len: '66', use_moe: '0' }); +} + +function setDefaults(map) { + Object.entries(map).forEach(([name, val]) => { + const nodes = document.querySelectorAll(`[name="${name}"]`); + nodes.forEach((node) => { + const card = node.closest('.parameter-card'); + const visible = !card || card.style.display !== 'none'; + if (visible) node.value = val; + }); + }); +} + +function initGpuSelectors() { + const hasGpu = window.hasGpu === true; + const gpuCount = Number(window.gpuCount || 0); + const modeSel = document.getElementById('training_mode'); + const single = document.getElementById('single-gpu-selection'); + const multi = document.getElementById('multi-gpu-selection'); + if (!modeSel) return; + function updateVisibility() { + const mode = modeSel.value; + if (single) single.style.display = mode === 'single_gpu' ? 'block' : 'none'; + if (multi) multi.style.display = mode === 'multi_gpu' ? 'block' : 'none'; + } + if (!hasGpu) { + modeSel.value = 'cpu'; + if (single) single.style.display = 'none'; + if (multi) multi.style.display = 'none'; + } else { + const gpuNumInput = document.getElementById('gpu_num'); + if (gpuNumInput && gpuCount > 0) gpuNumInput.value = gpuCount; + } + updateVisibility(); + modeSel.addEventListener('change', updateVisibility); +} + +function onSubmit(e) { + e.preventDefault(); + const form = e.currentTarget; + const data = {}; + const trainingModeSel = form.querySelector('#training_mode'); + const trainingMode = trainingModeSel ? trainingModeSel.value : 'cpu'; + const inputs = form.querySelectorAll('input, select, textarea'); + inputs.forEach((el) => { + const name = el.name; + if (!name || name === 'training_mode') return; + const card = el.closest('.parameter-card'); + const visible = !card || card.style.display !== 'none'; + if (!visible) return; + let value = el.value; + if (el.type === 'checkbox') { + if (!el.checked) return; + } + if (name === 'gpu_num') { + const multi = document.getElementById('multi-gpu-selection'); + if (!(multi && multi.style.display !== 'none')) return; + } + if (name === 'device') { + if (trainingMode === 'single_gpu') value = `cuda:${value}`; + else if (trainingMode === 'cpu') value = 'cpu'; + else return; + } + data[name] = value; + }); + showNotification('正在启动训练...', 'info'); + setTimeout(() => { + startTrain(data) + .then((result) => { + if (result.success) { + showNotification('训练已开始！', 'success'); + setTimeout(() => { + const processTab = document.querySelector('.tab[onclick*="processes"]'); + if (processTab) processTab.click(); + }, 1000); + } else showNotification('训练启动失败：' + result.error, 'error'); + }) + .catch(() => { + showNotification('启动训练中，请耐心等待...', 'info'); + }); + }, 1000); +} + diff --git a/trainer_web/static/js/ui/dialog.js b/trainer_web/static/js/ui/dialog.js new file mode 100644 index 0000000..f9ebca5 --- /dev/null +++ b/trainer_web/static/js/ui/dialog.js @@ -0,0 +1,51 @@ +export function showConfirmDialog(message, onConfirm, onCancel = null) { + const existing = document.querySelector('.custom-dialog'); + if (existing && existing.parentNode && existing.parentNode.classList.contains('dialog-overlay')) { + document.body.removeChild(existing.parentNode); + } + const overlay = document.createElement('div'); + overlay.className = 'dialog-overlay'; + const container = document.createElement('div'); + container.className = 'custom-dialog'; + container.innerHTML = ` +
+