1177 lines
47 KiB
JavaScript
1177 lines
47 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
||
// DOM Elements
|
||
const tabs = document.querySelectorAll('.tab-btn');
|
||
const tabContents = document.querySelectorAll('.tab-content');
|
||
const configForm = document.getElementById('config-form');
|
||
|
||
// Toggles and fields
|
||
const splitEnabled = document.getElementById('split-enabled');
|
||
const splitRatio = document.getElementById('split-ratio');
|
||
const splitClasses = document.getElementById('split-classes');
|
||
|
||
// Dataset selectors
|
||
const datasetSelect = document.getElementById('dataset-select');
|
||
const datasetCustomWrapper = document.getElementById('dataset-custom-wrapper');
|
||
|
||
// Model selectors
|
||
const modelSelect = document.getElementById('model-select');
|
||
const modelCustomWrapper = document.getElementById('model-custom-wrapper');
|
||
|
||
const augmentationEnabled = document.getElementById('augmentation-enabled');
|
||
const augmentationInputs = document.querySelectorAll('.augmentation-fields input, .augmentation-fields select');
|
||
|
||
const mlflowEnabled = document.getElementById('mlflow-enabled');
|
||
const mlflowInputs = document.querySelectorAll('.mlflow-fields input');
|
||
const trackingUriInput = document.getElementById('tracking-uri');
|
||
const mlflowHeaderLink = document.getElementById('mlflow-header-link');
|
||
|
||
// --- Dynamic Model Selection ---
|
||
const standardModels = {
|
||
detect: ['yolo11n.pt', 'yolo11s.pt', 'yolo11m.pt', 'yolo11l.pt', 'yolo11x.pt'],
|
||
segment: ['yolo11n-seg.pt', 'yolo11s-seg.pt', 'yolo11m-seg.pt', 'yolo11l-seg.pt', 'yolo11x-seg.pt'],
|
||
classify: ['yolo11n-cls.pt', 'yolo11s-cls.pt', 'yolo11m-cls.pt', 'yolo11l-cls.pt', 'yolo11x-cls.pt'],
|
||
pose: ['yolo11n-pose.pt', 'yolo11s-pose.pt', 'yolo11m-pose.pt', 'yolo11l-pose.pt', 'yolo11x-pose.pt'],
|
||
obb: ['yolo11n-obb.pt', 'yolo11s-obb.pt', 'yolo11m-obb.pt', 'yolo11l-obb.pt', 'yolo11x-obb.pt']
|
||
};
|
||
let discoveredModels = [];
|
||
|
||
function updateModelOptions() {
|
||
const task = taskSelect.value;
|
||
const stdModels = standardModels[task] || [];
|
||
const currentSelectVal = modelSelect.value;
|
||
|
||
modelSelect.innerHTML = '';
|
||
|
||
// Group 1: Standard Models
|
||
const stdGroup = document.createElement('optgroup');
|
||
stdGroup.label = 'Стандартные модели';
|
||
stdModels.forEach(model => {
|
||
const opt = document.createElement('option');
|
||
opt.value = model;
|
||
opt.textContent = model;
|
||
stdGroup.appendChild(opt);
|
||
});
|
||
modelSelect.appendChild(stdGroup);
|
||
|
||
// Group 2: Discovered Models
|
||
const localModels = discoveredModels.filter(m => !stdModels.includes(m.name));
|
||
if (localModels.length > 0) {
|
||
const localGroup = document.createElement('optgroup');
|
||
localGroup.label = 'Локальные/скачанные модели';
|
||
localModels.forEach(m => {
|
||
const opt = document.createElement('option');
|
||
opt.value = m.name;
|
||
opt.textContent = m.name;
|
||
localGroup.appendChild(opt);
|
||
});
|
||
modelSelect.appendChild(localGroup);
|
||
}
|
||
|
||
// Custom Option
|
||
const customOpt = document.createElement('option');
|
||
customOpt.value = '__custom__';
|
||
customOpt.textContent = 'Указать модель вручную...';
|
||
modelSelect.appendChild(customOpt);
|
||
|
||
// Match selection if valid
|
||
const allAvailable = [...stdModels, ...localModels.map(m => m.name)];
|
||
if (allAvailable.includes(currentSelectVal)) {
|
||
modelSelect.value = currentSelectVal;
|
||
} else {
|
||
modelSelect.value = stdModels[0] || '__custom__';
|
||
}
|
||
|
||
updateModelFieldsState();
|
||
}
|
||
|
||
function updateModelFieldsState() {
|
||
const val = modelSelect.value;
|
||
const modelInput = document.getElementById('model');
|
||
if (val === '__custom__') {
|
||
modelCustomWrapper.style.display = 'block';
|
||
} else {
|
||
modelCustomWrapper.style.display = 'none';
|
||
modelInput.value = val;
|
||
}
|
||
}
|
||
|
||
const taskSelect = document.getElementById('task');
|
||
|
||
// Session Controls
|
||
const sessionSelect = document.getElementById('session-select');
|
||
const sessionNameInput = document.getElementById('session-name');
|
||
const sessionSaveBtn = document.getElementById('session-save-btn');
|
||
const sessionDeleteBtn = document.getElementById('session-delete-btn');
|
||
|
||
// Control elements
|
||
const startBtn = document.getElementById('start-btn');
|
||
const stopBtn = document.getElementById('stop-btn');
|
||
|
||
// Status elements
|
||
const statusCard = document.getElementById('status-card');
|
||
const statusTitle = document.getElementById('status-title');
|
||
const statusText = document.getElementById('status-text');
|
||
const statusTimer = document.getElementById('status-timer');
|
||
const progressBarFill = document.getElementById('progress-bar-fill');
|
||
const progressText = document.getElementById('progress-text');
|
||
const progressEta = document.getElementById('progress-eta');
|
||
|
||
// Logs
|
||
const logContainer = document.getElementById('log-container');
|
||
const autoscrollCheck = document.getElementById('autoscroll');
|
||
const clearLogBtn = document.getElementById('clear-log-btn');
|
||
|
||
// Chart
|
||
const ctx = document.getElementById('metricsChart').getContext('2d');
|
||
let metricsChart = null;
|
||
|
||
// State variables
|
||
let trainingTimer = null;
|
||
let secondsElapsed = 0;
|
||
let socket = null;
|
||
let isTrainingActive = false;
|
||
|
||
// --- View Tab Switching ---
|
||
const viewBtns = document.querySelectorAll('.view-btn');
|
||
const views = document.querySelectorAll('.workspace-view');
|
||
|
||
viewBtns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
viewBtns.forEach(b => b.classList.remove('active'));
|
||
views.forEach(v => {
|
||
v.classList.remove('active');
|
||
});
|
||
|
||
btn.classList.add('active');
|
||
const viewId = btn.dataset.view;
|
||
const view = document.getElementById(viewId);
|
||
view.classList.add('active');
|
||
|
||
localStorage.setItem('active_workspace_view', viewId);
|
||
});
|
||
});
|
||
|
||
const savedView = localStorage.getItem('active_workspace_view');
|
||
if (savedView) {
|
||
const viewBtn = Array.from(viewBtns).find(b => b.dataset.view === savedView);
|
||
if (viewBtn) viewBtn.click();
|
||
}
|
||
|
||
// --- Tab Switching ---
|
||
tabs.forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
tabs.forEach(t => t.classList.remove('active'));
|
||
tabContents.forEach(c => c.classList.remove('active'));
|
||
|
||
tab.classList.add('active');
|
||
// Check if it's a sub-tab (has data-tab)
|
||
if (tab.dataset.tab) {
|
||
const contentId = `tab-${tab.dataset.tab}`;
|
||
const content = document.getElementById(contentId);
|
||
if (content) content.classList.add('active');
|
||
localStorage.setItem('active_tab', tab.dataset.tab);
|
||
}
|
||
});
|
||
});
|
||
|
||
// Restore active tab on load
|
||
const savedTab = localStorage.getItem('active_tab');
|
||
if (savedTab) {
|
||
const tabBtn = Array.from(tabs).find(t => t.dataset.tab === savedTab);
|
||
if (tabBtn) {
|
||
tabBtn.click();
|
||
}
|
||
}
|
||
|
||
// --- Toggles & Constraints ---
|
||
function updateSplitFields() {
|
||
const isClassify = taskSelect.value === 'classify';
|
||
if (isClassify && splitEnabled.checked) {
|
||
splitEnabled.checked = false;
|
||
showNotification('Для classify укажите готовый каталог с train/val по классам.', 'warning');
|
||
}
|
||
splitEnabled.disabled = isClassify;
|
||
|
||
const disabled = !splitEnabled.checked || isClassify;
|
||
splitRatio.disabled = disabled;
|
||
splitClasses.disabled = disabled;
|
||
}
|
||
|
||
function updateAugmentationFields() {
|
||
const disabled = !augmentationEnabled.checked;
|
||
augmentationInputs.forEach(input => {
|
||
input.disabled = disabled;
|
||
});
|
||
}
|
||
|
||
function updateMlflowFields() {
|
||
const disabled = !mlflowEnabled.checked;
|
||
mlflowInputs.forEach(input => {
|
||
input.disabled = disabled;
|
||
});
|
||
updateMlflowHeaderLink();
|
||
}
|
||
|
||
function updateMlflowHeaderLink() {
|
||
const uri = trackingUriInput.value.trim();
|
||
if (uri.startsWith('http://') || uri.startsWith('https://')) {
|
||
mlflowHeaderLink.href = uri;
|
||
mlflowHeaderLink.style.opacity = '1';
|
||
mlflowHeaderLink.style.pointerEvents = 'auto';
|
||
} else {
|
||
mlflowHeaderLink.href = 'http://localhost:5000';
|
||
mlflowHeaderLink.style.opacity = '0.5';
|
||
}
|
||
}
|
||
|
||
trackingUriInput.addEventListener('input', updateMlflowHeaderLink);
|
||
|
||
splitEnabled.addEventListener('change', updateSplitFields);
|
||
taskSelect.addEventListener('change', () => {
|
||
updateSplitFields();
|
||
updateModelOptions();
|
||
});
|
||
augmentationEnabled.addEventListener('change', updateAugmentationFields);
|
||
mlflowEnabled.addEventListener('change', updateMlflowFields);
|
||
|
||
// --- Logger ---
|
||
function addLogLine(message, level = 'info') {
|
||
const line = document.createElement('div');
|
||
line.className = `log-line log-level-${level.toLowerCase()}`;
|
||
line.textContent = message;
|
||
logContainer.appendChild(line);
|
||
|
||
if (autoscrollCheck.checked) {
|
||
logContainer.scrollTop = logContainer.scrollHeight;
|
||
}
|
||
}
|
||
|
||
clearLogBtn.addEventListener('click', () => {
|
||
logContainer.innerHTML = '';
|
||
});
|
||
|
||
// --- Chart.js Integration ---
|
||
function initChart(datasets = []) {
|
||
if (metricsChart) {
|
||
metricsChart.destroy();
|
||
}
|
||
|
||
metricsChart = new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: [],
|
||
datasets: datasets
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
x: {
|
||
title: { display: true, text: 'Эпоха', color: '#a1a1aa' },
|
||
grid: { color: '#27272a' },
|
||
ticks: { color: '#a1a1aa' }
|
||
},
|
||
y: {
|
||
title: { display: true, text: 'Значение', color: '#a1a1aa' },
|
||
grid: { color: '#27272a' },
|
||
ticks: { color: '#a1a1aa' }
|
||
}
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
labels: { color: '#f4f4f5', font: { family: 'Outfit' } }
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function updateChart(epoch, metrics) {
|
||
if (!metricsChart) {
|
||
initChart();
|
||
}
|
||
|
||
let labelIndex = metricsChart.data.labels.indexOf(epoch);
|
||
if (labelIndex === -1) {
|
||
metricsChart.data.labels.push(epoch);
|
||
labelIndex = metricsChart.data.labels.length - 1;
|
||
metricsChart.data.datasets.forEach(dataset => dataset.data.push(null));
|
||
}
|
||
|
||
const colors = ['#f97316', '#10b981', '#3b82f6', '#eab308', '#a855f7'];
|
||
Object.entries(metrics).forEach(([key, value]) => {
|
||
if (key === 'epoch') return;
|
||
|
||
let dataset = metricsChart.data.datasets.find(item => item.label === key);
|
||
if (!dataset) {
|
||
const color = colors[metricsChart.data.datasets.length % colors.length];
|
||
dataset = {
|
||
label: key,
|
||
data: Array(metricsChart.data.labels.length).fill(null),
|
||
borderColor: color,
|
||
backgroundColor: color + '22',
|
||
tension: 0.15,
|
||
fill: false
|
||
};
|
||
metricsChart.data.datasets.push(dataset);
|
||
}
|
||
|
||
dataset.data[labelIndex] = value;
|
||
});
|
||
|
||
metricsChart.update();
|
||
}
|
||
|
||
// --- Timer UI ---
|
||
function startTimer() {
|
||
stopTimer();
|
||
secondsElapsed = 0;
|
||
trainingTimer = setInterval(() => {
|
||
secondsElapsed++;
|
||
const h = String(Math.floor(secondsElapsed / 3600)).padStart(2, '0');
|
||
const m = String(Math.floor((secondsElapsed % 3600) / 60)).padStart(2, '0');
|
||
const s = String(secondsElapsed % 60).padStart(2, '0');
|
||
statusTimer.textContent = `${h}:${m}:${s}`;
|
||
}, 1000);
|
||
}
|
||
|
||
function stopTimer() {
|
||
if (trainingTimer) {
|
||
clearInterval(trainingTimer);
|
||
trainingTimer = null;
|
||
}
|
||
}
|
||
|
||
// --- WebSocket Sync ---
|
||
function connectWebSocket() {
|
||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||
const wsUrl = `${protocol}//${window.location.host}/api/ws`;
|
||
|
||
socket = new WebSocket(wsUrl);
|
||
|
||
socket.onopen = () => {
|
||
addLogLine('Соединение с сервером установлено.', 'info');
|
||
};
|
||
|
||
socket.onclose = () => {
|
||
addLogLine('Соединение потеряно. Повторная попытка через 5 секунд...', 'warning');
|
||
setTimeout(connectWebSocket, 5000);
|
||
};
|
||
|
||
socket.onerror = (err) => {
|
||
console.error('WS Error:', err);
|
||
};
|
||
|
||
socket.onmessage = (event) => {
|
||
const data = JSON.parse(event.data);
|
||
|
||
if (data.type === 'init') {
|
||
updateUIStatus(data.status);
|
||
|
||
// Load logs
|
||
logContainer.innerHTML = '';
|
||
data.logs.forEach(([levelCode, msg]) => {
|
||
const level = levelCode.replace('__LOG_LEVEL_', '').replace('__', '').toLowerCase();
|
||
addLogLine(msg, level);
|
||
});
|
||
|
||
// Draw initial chart points
|
||
initChart();
|
||
if (data.metrics && data.metrics.length > 0) {
|
||
data.metrics.forEach(m => {
|
||
updateChart(m.epoch, m);
|
||
});
|
||
}
|
||
|
||
// Sync progress
|
||
if (data.status === 'training' || data.status === 'stopping') {
|
||
updateProgress(data.epoch, data.total_epochs);
|
||
}
|
||
} else if (data.type === 'status') {
|
||
updateUIStatus(data.status);
|
||
if (data.output_dir) {
|
||
addLogLine(`Результаты сохранены: ${data.output_dir}`, 'success');
|
||
}
|
||
} else if (data.type === 'log') {
|
||
const autoscrollCheck = document.getElementById('autoscroll');
|
||
if (data.level === 'progress') {
|
||
let lastLine = logContainer.lastElementChild;
|
||
if (lastLine && lastLine.classList.contains('log-line-progress')) {
|
||
lastLine.textContent = data.message;
|
||
} else {
|
||
const line = document.createElement('div');
|
||
line.className = 'log-line log-line-progress log-level-info';
|
||
line.textContent = data.message;
|
||
logContainer.appendChild(line);
|
||
}
|
||
} else {
|
||
let lastLine = logContainer.lastElementChild;
|
||
if (lastLine && lastLine.classList.contains('log-line-progress')) {
|
||
lastLine.classList.remove('log-line-progress');
|
||
}
|
||
addLogLine(data.message, data.level);
|
||
}
|
||
if (autoscrollCheck && autoscrollCheck.checked) {
|
||
logContainer.scrollTop = logContainer.scrollHeight;
|
||
}
|
||
} else if (data.type === 'progress') {
|
||
updateProgress(data.epoch, data.total_epochs, data.message);
|
||
if (data.metrics) {
|
||
updateChart(data.epoch, data.metrics);
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
function updateUIStatus(status) {
|
||
statusCard.className = `status-${status}`;
|
||
|
||
switch (status) {
|
||
case 'idle':
|
||
statusTitle.textContent = 'ГОТОВО К ЗАПУСКУ';
|
||
statusText.textContent = 'Проверьте параметры и начните обучение.';
|
||
isTrainingActive = false;
|
||
startBtn.disabled = false;
|
||
stopBtn.disabled = true;
|
||
stopTimer();
|
||
break;
|
||
case 'preparing':
|
||
statusTitle.textContent = 'ПОДГОТОВКА';
|
||
statusText.textContent = 'Загрузка модели, разметки и настройка окружения...';
|
||
isTrainingActive = true;
|
||
startBtn.disabled = true;
|
||
stopBtn.disabled = false;
|
||
startTimer();
|
||
initChart();
|
||
break;
|
||
case 'training':
|
||
statusTitle.textContent = 'ОБУЧЕНИЕ';
|
||
isTrainingActive = true;
|
||
startBtn.disabled = true;
|
||
stopBtn.disabled = false;
|
||
if (!trainingTimer) startTimer();
|
||
break;
|
||
case 'stopping':
|
||
statusTitle.textContent = 'ОСТАНОВКА';
|
||
statusText.textContent = 'Остановка процессов обучения. Дождитесь закрытия...';
|
||
isTrainingActive = true;
|
||
startBtn.disabled = true;
|
||
stopBtn.disabled = true;
|
||
break;
|
||
case 'finished': // Compatibility with sessions created by older versions.
|
||
case 'succeeded':
|
||
statusTitle.textContent = 'ГОТОВО';
|
||
statusText.textContent = 'Обучение успешно завершено.';
|
||
isTrainingActive = false;
|
||
startBtn.disabled = false;
|
||
stopBtn.disabled = true;
|
||
stopTimer();
|
||
break;
|
||
case 'cancelled':
|
||
statusTitle.textContent = 'ОСТАНОВЛЕНО';
|
||
statusText.textContent = 'Обучение остановлено пользователем.';
|
||
isTrainingActive = false;
|
||
startBtn.disabled = false;
|
||
stopBtn.disabled = true;
|
||
stopTimer();
|
||
break;
|
||
case 'failed':
|
||
statusTitle.textContent = 'ОШИБКА';
|
||
statusText.textContent = 'Процесс завершился с ошибкой. Проверьте логи.';
|
||
isTrainingActive = false;
|
||
startBtn.disabled = false;
|
||
stopBtn.disabled = true;
|
||
stopTimer();
|
||
break;
|
||
}
|
||
}
|
||
|
||
function updateProgress(epoch, total, message = '') {
|
||
const percent = total > 0 ? (epoch / total) * 100 : 0;
|
||
progressBarFill.style.width = `${percent}%`;
|
||
progressText.textContent = `Эпохи: ${epoch} / ${total}`;
|
||
|
||
if (message) {
|
||
statusText.textContent = message;
|
||
}
|
||
}
|
||
|
||
// --- Read/Write Configurations ---
|
||
function readNumber(id, fallback, integer = false) {
|
||
const rawValue = document.getElementById(id).value;
|
||
const value = integer
|
||
? Number.parseInt(rawValue, 10)
|
||
: Number.parseFloat(rawValue);
|
||
return Number.isNaN(value) ? fallback : value;
|
||
}
|
||
|
||
function getFormConfig() {
|
||
return {
|
||
dataset: document.getElementById('dataset').value.trim(),
|
||
model: document.getElementById('model').value.trim(),
|
||
task: taskSelect.value,
|
||
epochs: readNumber('epochs', 100, true),
|
||
image_size: readNumber('image-size', 640, true),
|
||
batch_size: readNumber('batch-size', 16, true),
|
||
device: document.getElementById('device').value.trim(),
|
||
workers: readNumber('workers', 8, true),
|
||
patience: readNumber('patience', 100, true),
|
||
project: document.getElementById('project').value.trim() || 'runs/train',
|
||
run_name: document.getElementById('run-name').value.trim(),
|
||
split: {
|
||
enabled: splitEnabled.checked,
|
||
train_ratio: readNumber('split-ratio', 0.8),
|
||
classes_path: splitClasses.value.trim()
|
||
},
|
||
augmentation: {
|
||
enabled: augmentationEnabled.checked,
|
||
hsv_h: readNumber('hsv-h', 0.015),
|
||
hsv_s: readNumber('hsv-s', 0.7),
|
||
hsv_v: readNumber('hsv-v', 0.4),
|
||
degrees: readNumber('degrees', 0),
|
||
translate: readNumber('translate', 0.1),
|
||
scale: readNumber('scale', 0.5),
|
||
shear: readNumber('shear', 0),
|
||
perspective: readNumber('perspective', 0),
|
||
close_mosaic: readNumber('close-mosaic', 10, true),
|
||
flipud: readNumber('flipud', 0),
|
||
fliplr: readNumber('fliplr', 0.5),
|
||
bgr: readNumber('bgr', 0),
|
||
mosaic: readNumber('mosaic', 1),
|
||
mixup: readNumber('mixup', 0),
|
||
cutmix: readNumber('cutmix', 0),
|
||
copy_paste: readNumber('copy-paste', 0),
|
||
erasing: readNumber('erasing', 0.4),
|
||
copy_paste_mode: document.getElementById('copy-paste-mode').value,
|
||
auto_augment: document.getElementById('auto-augment').value
|
||
},
|
||
mlflow: {
|
||
enabled: mlflowEnabled.checked,
|
||
tracking_uri: document.getElementById('tracking-uri').value.trim(),
|
||
experiment_name: document.getElementById('experiment-name').value.trim(),
|
||
run_name: document.getElementById('mlflow-run-name').value.trim()
|
||
}
|
||
};
|
||
}
|
||
|
||
function applyConfig(data) {
|
||
taskSelect.value = data.task || 'detect';
|
||
updateModelOptions();
|
||
|
||
const modelVal = data.model || 'yolo11n.pt';
|
||
const task = data.task || 'detect';
|
||
const stdModels = standardModels[task] || [];
|
||
const allAvailable = [...stdModels, ...discoveredModels.map(m => m.name)];
|
||
if (allAvailable.includes(modelVal)) {
|
||
modelSelect.value = modelVal;
|
||
modelCustomWrapper.style.display = 'none';
|
||
document.getElementById('model').value = modelVal;
|
||
} else {
|
||
modelSelect.value = '__custom__';
|
||
modelCustomWrapper.style.display = 'block';
|
||
document.getElementById('model').value = modelVal;
|
||
}
|
||
|
||
const matchedDataset = discoveredDatasets.find(d => d.path === data.dataset);
|
||
if (matchedDataset) {
|
||
datasetSelect.value = data.dataset;
|
||
datasetCustomWrapper.style.display = 'none';
|
||
document.getElementById('dataset').value = data.dataset;
|
||
} else {
|
||
datasetSelect.value = '__custom__';
|
||
datasetCustomWrapper.style.display = 'block';
|
||
document.getElementById('dataset').value = data.dataset || '';
|
||
}
|
||
|
||
// Split
|
||
splitEnabled.checked = data.split?.enabled ?? false;
|
||
splitRatio.value = data.split?.train_ratio ?? 0.8;
|
||
splitClasses.value = data.split?.classes_path || '';
|
||
|
||
// Training params
|
||
document.getElementById('epochs').value = data.epochs ?? 100;
|
||
document.getElementById('image-size').value = data.image_size ?? 640;
|
||
document.getElementById('batch-size').value = data.batch_size ?? 16;
|
||
document.getElementById('device').value = data.device || '';
|
||
document.getElementById('workers').value = data.workers ?? 8;
|
||
document.getElementById('patience').value = data.patience ?? 100;
|
||
document.getElementById('project').value = data.project || 'runs/train';
|
||
document.getElementById('run-name').value = data.run_name || '';
|
||
|
||
// Augmentation
|
||
augmentationEnabled.checked = data.augmentation?.enabled !== false;
|
||
if (data.augmentation) {
|
||
document.getElementById('hsv-h').value = data.augmentation.hsv_h ?? 0.015;
|
||
document.getElementById('hsv-s').value = data.augmentation.hsv_s ?? 0.7;
|
||
document.getElementById('hsv-v').value = data.augmentation.hsv_v ?? 0.4;
|
||
document.getElementById('degrees').value = data.augmentation.degrees ?? 0.0;
|
||
document.getElementById('translate').value = data.augmentation.translate ?? 0.1;
|
||
document.getElementById('scale').value = data.augmentation.scale ?? 0.5;
|
||
document.getElementById('shear').value = data.augmentation.shear ?? 0.0;
|
||
document.getElementById('perspective').value = data.augmentation.perspective ?? 0.0;
|
||
document.getElementById('close-mosaic').value = data.augmentation.close_mosaic ?? 10;
|
||
document.getElementById('flipud').value = data.augmentation.flipud ?? 0.0;
|
||
document.getElementById('fliplr').value = data.augmentation.fliplr ?? 0.5;
|
||
document.getElementById('bgr').value = data.augmentation.bgr ?? 0.0;
|
||
document.getElementById('mosaic').value = data.augmentation.mosaic ?? 1.0;
|
||
document.getElementById('mixup').value = data.augmentation.mixup ?? 0.0;
|
||
document.getElementById('cutmix').value = data.augmentation.cutmix ?? 0.0;
|
||
document.getElementById('copy-paste').value = data.augmentation.copy_paste ?? 0.0;
|
||
document.getElementById('erasing').value = data.augmentation.erasing ?? 0.4;
|
||
document.getElementById('copy-paste-mode').value = data.augmentation.copy_paste_mode || 'flip';
|
||
document.getElementById('auto-augment').value = data.augmentation.auto_augment || 'randaugment';
|
||
}
|
||
|
||
// MLflow
|
||
mlflowEnabled.checked = data.mlflow?.enabled !== false;
|
||
if (data.mlflow) {
|
||
document.getElementById('tracking-uri').value = data.mlflow.tracking_uri || 'sqlite:///mlflow.db';
|
||
document.getElementById('experiment-name').value = data.mlflow.experiment_name || 'yolo-webui';
|
||
document.getElementById('mlflow-run-name').value = data.mlflow.run_name || '';
|
||
}
|
||
|
||
// Sync disables
|
||
updateSplitFields();
|
||
updateAugmentationFields();
|
||
updateMlflowFields();
|
||
}
|
||
|
||
// --- Load Configuration (Last Run or Defaults) ---
|
||
async function loadInitialConfig() {
|
||
// 1. Try loading draft configuration from localStorage
|
||
const draft = localStorage.getItem('draft_config');
|
||
if (draft) {
|
||
try {
|
||
const data = JSON.parse(draft);
|
||
applyConfig(data);
|
||
addLogLine('Восстановлены последние измененные параметры.', 'info');
|
||
return;
|
||
} catch (e) {
|
||
// Ignore and fall back
|
||
}
|
||
}
|
||
|
||
// 2. First check if last_run exists
|
||
try {
|
||
const lastRes = await fetch('/api/sessions/last_run');
|
||
if (lastRes.ok) {
|
||
const data = await lastRes.json();
|
||
applyConfig(data);
|
||
addLogLine('Загружена конфигурация последнего запуска.', 'info');
|
||
return;
|
||
}
|
||
} catch (e) {
|
||
// Silence fail to fall back to defaults
|
||
}
|
||
|
||
// 3. Fall back to defaults
|
||
try {
|
||
const res = await fetch('/api/config/defaults');
|
||
if (!res.ok) throw new Error('Failed to fetch defaults');
|
||
const data = await res.json();
|
||
applyConfig(data);
|
||
} catch (err) {
|
||
console.error('Error loading defaults:', err);
|
||
showNotification('Ошибка загрузки настроек по умолчанию', 'error');
|
||
}
|
||
}
|
||
|
||
// --- Sessions Management ---
|
||
async function loadSessionsList() {
|
||
try {
|
||
const res = await fetch('/api/sessions');
|
||
if (!res.ok) throw new Error();
|
||
const names = await res.json();
|
||
|
||
// Re-populate select
|
||
const currentValue = sessionSelect.value;
|
||
sessionSelect.innerHTML = '<option value="">По умолчанию (Последний запуск)</option>';
|
||
names.forEach(name => {
|
||
const opt = document.createElement('option');
|
||
opt.value = name;
|
||
opt.textContent = name;
|
||
sessionSelect.appendChild(opt);
|
||
});
|
||
|
||
// Restore selection if still exists
|
||
const savedProfile = localStorage.getItem('selected_profile') || "";
|
||
const finalValue = currentValue || savedProfile;
|
||
if (names.includes(finalValue)) {
|
||
sessionSelect.value = finalValue;
|
||
sessionDeleteBtn.disabled = false;
|
||
} else {
|
||
sessionSelect.value = "";
|
||
sessionDeleteBtn.disabled = true;
|
||
}
|
||
} catch (e) {
|
||
console.error("Failed to load sessions list:", e);
|
||
}
|
||
}
|
||
|
||
// --- Datasets Auto-Discovery ---
|
||
let discoveredDatasets = [];
|
||
|
||
async function loadDatasetsList() {
|
||
try {
|
||
const res = await fetch('/api/datasets');
|
||
if (!res.ok) throw new Error();
|
||
discoveredDatasets = await res.json();
|
||
|
||
// Re-populate select
|
||
datasetSelect.innerHTML = '';
|
||
discoveredDatasets.forEach(item => {
|
||
const opt = document.createElement('option');
|
||
opt.value = item.path;
|
||
opt.textContent = `${item.name} (${item.type === 'directory' ? 'Папка' : 'Конфиг'})`;
|
||
datasetSelect.appendChild(opt);
|
||
});
|
||
|
||
// Add custom path option
|
||
const customOpt = document.createElement('option');
|
||
customOpt.value = '__custom__';
|
||
customOpt.textContent = 'Указать путь вручную...';
|
||
datasetSelect.appendChild(customOpt);
|
||
|
||
updateDatasetFieldsState();
|
||
} catch (e) {
|
||
console.error("Failed to load datasets list:", e);
|
||
datasetSelect.innerHTML = '<option value="__custom__">Указать путь вручную...</option>';
|
||
updateDatasetFieldsState();
|
||
}
|
||
}
|
||
|
||
function updateDatasetFieldsState() {
|
||
const val = datasetSelect.value;
|
||
const datasetInput = document.getElementById('dataset');
|
||
|
||
if (val === '__custom__') {
|
||
datasetCustomWrapper.style.display = 'block';
|
||
} else {
|
||
datasetCustomWrapper.style.display = 'none';
|
||
datasetInput.value = val;
|
||
}
|
||
}
|
||
|
||
datasetSelect.addEventListener('change', updateDatasetFieldsState);
|
||
|
||
async function loadModelsList() {
|
||
try {
|
||
const res = await fetch('/api/models');
|
||
if (!res.ok) throw new Error();
|
||
discoveredModels = await res.json();
|
||
updateExportModelOptions();
|
||
} catch (e) {
|
||
console.error("Failed to load models list:", e);
|
||
}
|
||
}
|
||
|
||
modelSelect.addEventListener('change', updateModelFieldsState);
|
||
|
||
// --- Export Model Selection ---
|
||
const exportModelSelect = document.getElementById('export-model-select');
|
||
const exportModelCustomWrapper = document.getElementById('export-model-custom-wrapper');
|
||
const exportModelInput = document.getElementById('export-model');
|
||
|
||
function updateExportModelOptions() {
|
||
exportModelSelect.innerHTML = '';
|
||
|
||
if (discoveredModels.length > 0) {
|
||
const localGroup = document.createElement('optgroup');
|
||
localGroup.label = 'Локальные/обученные модели';
|
||
discoveredModels.forEach(m => {
|
||
const opt = document.createElement('option');
|
||
opt.value = m.path;
|
||
opt.textContent = m.source === 'runs' ? `[RUNS] ${m.name}` : m.name;
|
||
localGroup.appendChild(opt);
|
||
});
|
||
exportModelSelect.appendChild(localGroup);
|
||
}
|
||
|
||
const customOpt = document.createElement('option');
|
||
customOpt.value = '__custom__';
|
||
customOpt.textContent = 'Указать путь вручную...';
|
||
exportModelSelect.appendChild(customOpt);
|
||
|
||
updateExportModelFieldsState();
|
||
}
|
||
|
||
function updateExportModelFieldsState() {
|
||
const val = exportModelSelect.value;
|
||
if (val === '__custom__') {
|
||
exportModelCustomWrapper.style.display = 'block';
|
||
} else {
|
||
exportModelCustomWrapper.style.display = 'none';
|
||
exportModelInput.value = val;
|
||
}
|
||
}
|
||
|
||
exportModelSelect.addEventListener('change', updateExportModelFieldsState);
|
||
|
||
sessionSelect.addEventListener('change', async () => {
|
||
const name = sessionSelect.value;
|
||
localStorage.setItem('selected_profile', name);
|
||
if (!name) {
|
||
sessionDeleteBtn.disabled = true;
|
||
localStorage.removeItem('draft_config'); // Reset draft
|
||
await loadInitialConfig();
|
||
return;
|
||
}
|
||
|
||
sessionDeleteBtn.disabled = false;
|
||
try {
|
||
const res = await fetch(`/api/sessions/${name}`);
|
||
if (!res.ok) throw new Error();
|
||
const data = await res.json();
|
||
applyConfig(data);
|
||
localStorage.setItem('draft_config', JSON.stringify(data));
|
||
showNotification(`Профиль "${name}" успешно загружен.`, 'success');
|
||
} catch (e) {
|
||
showNotification('Не удалось загрузить выбранный профиль.', 'error');
|
||
}
|
||
});
|
||
|
||
sessionSaveBtn.addEventListener('click', async () => {
|
||
const name = sessionNameInput.value.trim().replace(/[^a-zA-Z0-9_\-]/g, "");
|
||
if (!name) {
|
||
showNotification('Введите корректное имя профиля (латиница, цифры, дефисы).', 'warning');
|
||
return;
|
||
}
|
||
if (name === "last_run") {
|
||
showNotification('Имя "last_run" зарезервировано бэкендом.', 'warning');
|
||
return;
|
||
}
|
||
|
||
const config = getFormConfig();
|
||
try {
|
||
const res = await fetch(`/api/sessions/${name}`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(config)
|
||
});
|
||
if (!res.ok) throw new Error();
|
||
|
||
showNotification(`Профиль "${name}" сохранен.`, 'success');
|
||
sessionNameInput.value = "";
|
||
|
||
localStorage.setItem('selected_profile', name);
|
||
localStorage.setItem('draft_config', JSON.stringify(config));
|
||
await loadSessionsList();
|
||
sessionSelect.value = name;
|
||
sessionDeleteBtn.disabled = false;
|
||
} catch (e) {
|
||
showNotification('Не удалось сохранить профиль.', 'error');
|
||
}
|
||
});
|
||
|
||
sessionDeleteBtn.addEventListener('click', async () => {
|
||
const name = sessionSelect.value;
|
||
if (!name) return;
|
||
|
||
if (!confirm(`Вы действительно хотите удалить профиль "${name}"?`)) return;
|
||
|
||
try {
|
||
const res = await fetch(`/api/sessions/${name}`, { method: 'DELETE' });
|
||
if (!res.ok) throw new Error();
|
||
|
||
showNotification(`Профиль "${name}" удален.`, 'success');
|
||
sessionSelect.value = "";
|
||
sessionDeleteBtn.disabled = true;
|
||
localStorage.removeItem('selected_profile');
|
||
localStorage.removeItem('draft_config');
|
||
await loadSessionsList();
|
||
await loadInitialConfig();
|
||
} catch (e) {
|
||
console.error('Delete profile error:', e);
|
||
showNotification('Не удалось удалить профиль.', 'error');
|
||
}
|
||
});
|
||
|
||
// --- Form submit ---
|
||
async function startTraining() {
|
||
if (isTrainingActive) return;
|
||
const config = getFormConfig();
|
||
|
||
try {
|
||
const res = await fetch('/api/train/start', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(config)
|
||
});
|
||
|
||
const data = await res.json();
|
||
if (!res.ok) {
|
||
throw new Error(data.detail || 'Failed to start training');
|
||
}
|
||
showNotification('Обучение успешно запущено!', 'success');
|
||
} catch (err) {
|
||
console.error('Start error:', err);
|
||
showNotification(err.message, 'error');
|
||
}
|
||
}
|
||
|
||
async function stopTraining() {
|
||
if (!isTrainingActive) return;
|
||
try {
|
||
const res = await fetch('/api/train/stop', { method: 'POST' });
|
||
if (!res.ok) {
|
||
const data = await res.json();
|
||
throw new Error(data.detail || 'Failed to stop training');
|
||
}
|
||
showNotification('Запрос на остановку отправлен.', 'info');
|
||
} catch (err) {
|
||
console.error('Stop error:', err);
|
||
showNotification(err.message, 'error');
|
||
}
|
||
}
|
||
|
||
if (configForm) {
|
||
configForm.addEventListener('input', () => {
|
||
const config = getFormConfig();
|
||
localStorage.setItem('draft_config', JSON.stringify(config));
|
||
});
|
||
configForm.addEventListener('change', () => {
|
||
const config = getFormConfig();
|
||
localStorage.setItem('draft_config', JSON.stringify(config));
|
||
});
|
||
}
|
||
|
||
startBtn.addEventListener('click', startTraining);
|
||
stopBtn.addEventListener('click', stopTraining);
|
||
|
||
// --- Helper Notification System ---
|
||
function showNotification(message, type = 'info') {
|
||
const toast = document.createElement('div');
|
||
toast.style.position = 'fixed';
|
||
toast.style.bottom = '20px';
|
||
toast.style.right = '20px';
|
||
toast.style.padding = '12px 20px';
|
||
toast.style.borderRadius = '8px';
|
||
toast.style.fontFamily = 'Outfit';
|
||
toast.style.fontSize = '0.9rem';
|
||
toast.style.fontWeight = '500';
|
||
toast.style.zIndex = '9999';
|
||
toast.style.boxShadow = '0 10px 25px rgba(0,0,0,0.5)';
|
||
toast.style.animation = 'slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
|
||
toast.style.maxWidth = '350px';
|
||
|
||
if (type === 'success') {
|
||
toast.style.backgroundColor = 'var(--success)';
|
||
toast.style.color = '#000';
|
||
} else if (type === 'error') {
|
||
toast.style.backgroundColor = 'var(--error)';
|
||
toast.style.color = '#fff';
|
||
} else if (type === 'warning') {
|
||
toast.style.backgroundColor = 'var(--warning)';
|
||
toast.style.color = '#000';
|
||
} else {
|
||
toast.style.backgroundColor = 'var(--accent)';
|
||
toast.style.color = '#fff';
|
||
}
|
||
|
||
toast.textContent = message;
|
||
document.body.appendChild(toast);
|
||
|
||
setTimeout(() => {
|
||
toast.style.animation = 'fadeOut 0.5s ease forwards';
|
||
setTimeout(() => toast.remove(), 500);
|
||
}, 4000);
|
||
}
|
||
|
||
// Add keyframes dynamically if not in stylesheet
|
||
const styleSheet = document.createElement("style");
|
||
styleSheet.innerText = `
|
||
@keyframes slideIn {
|
||
from { transform: translateY(100%) scale(0.9); opacity: 0; }
|
||
to { transform: translateY(0) scale(1); opacity: 1; }
|
||
}
|
||
@keyframes fadeOut {
|
||
from { opacity: 1; }
|
||
to { opacity: 0; }
|
||
}
|
||
`;
|
||
document.head.appendChild(styleSheet);
|
||
|
||
// --- Export Logic ---
|
||
const exportStartBtn = document.getElementById('export-start-btn');
|
||
const exportStopBtn = document.getElementById('export-stop-btn');
|
||
const exportStatusCard = document.getElementById('export-status-card');
|
||
const exportStatusTitle = document.getElementById('export-status-title');
|
||
const exportStatusText = document.getElementById('export-status-text');
|
||
const exportLogContainer = document.getElementById('export-log-container');
|
||
const exportClearLogBtn = document.getElementById('export-clear-log-btn');
|
||
const exportAutoscrollCheck = document.getElementById('export-autoscroll');
|
||
|
||
let isExportActive = false;
|
||
let exportSocket = null;
|
||
|
||
function addExportLogLine(message, level = 'info') {
|
||
const line = document.createElement('div');
|
||
line.className = `log-line log-level-${level.toLowerCase()}`;
|
||
line.textContent = message;
|
||
exportLogContainer.appendChild(line);
|
||
|
||
if (exportAutoscrollCheck.checked) {
|
||
exportLogContainer.scrollTop = exportLogContainer.scrollHeight;
|
||
}
|
||
}
|
||
|
||
exportClearLogBtn.addEventListener('click', () => {
|
||
exportLogContainer.innerHTML = '';
|
||
});
|
||
|
||
function connectExportWebSocket() {
|
||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||
const wsUrl = `${protocol}//${window.location.host}/api/export/ws`;
|
||
|
||
exportSocket = new WebSocket(wsUrl);
|
||
|
||
exportSocket.onopen = () => {
|
||
addExportLogLine('Соединение с сервером установлено.', 'info');
|
||
};
|
||
|
||
exportSocket.onclose = () => {
|
||
addExportLogLine('Соединение потеряно. Повторная попытка через 5 секунд...', 'warning');
|
||
setTimeout(connectExportWebSocket, 5000);
|
||
};
|
||
|
||
exportSocket.onerror = (err) => {
|
||
console.error('Export WS Error:', err);
|
||
};
|
||
|
||
exportSocket.onmessage = (event) => {
|
||
const data = JSON.parse(event.data);
|
||
|
||
if (data.type === 'init') {
|
||
updateExportUIStatus(data.status);
|
||
exportLogContainer.innerHTML = '';
|
||
data.logs.forEach(([levelCode, msg]) => {
|
||
const level = levelCode.replace('__LOG_LEVEL_', '').replace('__', '').toLowerCase();
|
||
addExportLogLine(msg, level);
|
||
});
|
||
} else if (data.type === 'status') {
|
||
updateExportUIStatus(data.status);
|
||
if (data.output_dir) {
|
||
addExportLogLine(`Результаты сохранены: ${data.output_dir}`, 'success');
|
||
}
|
||
} else if (data.type === 'log') {
|
||
addExportLogLine(data.message, data.level);
|
||
}
|
||
};
|
||
}
|
||
|
||
function updateExportUIStatus(status) {
|
||
exportStatusCard.className = `status-${status}`;
|
||
|
||
switch (status) {
|
||
case 'idle':
|
||
exportStatusTitle.textContent = 'ГОТОВО К ЭКСПОРТУ';
|
||
exportStatusText.textContent = 'Выберите модель и формат для начала.';
|
||
isExportActive = false;
|
||
exportStartBtn.disabled = false;
|
||
exportStopBtn.disabled = true;
|
||
break;
|
||
case 'preparing':
|
||
case 'exporting':
|
||
exportStatusTitle.textContent = 'ЭКСПОРТ';
|
||
exportStatusText.textContent = 'Выполняется экспорт модели...';
|
||
isExportActive = true;
|
||
exportStartBtn.disabled = true;
|
||
exportStopBtn.disabled = false;
|
||
break;
|
||
case 'stopping':
|
||
exportStatusTitle.textContent = 'ОСТАНОВКА';
|
||
exportStatusText.textContent = 'Остановка процесса экспорта...';
|
||
isExportActive = true;
|
||
exportStartBtn.disabled = true;
|
||
exportStopBtn.disabled = true;
|
||
break;
|
||
case 'succeeded':
|
||
exportStatusTitle.textContent = 'ГОТОВО';
|
||
exportStatusText.textContent = 'Экспорт успешно завершен.';
|
||
isExportActive = false;
|
||
exportStartBtn.disabled = false;
|
||
exportStopBtn.disabled = true;
|
||
break;
|
||
case 'cancelled':
|
||
exportStatusTitle.textContent = 'ОСТАНОВЛЕНО';
|
||
exportStatusText.textContent = 'Экспорт остановлен пользователем.';
|
||
isExportActive = false;
|
||
exportStartBtn.disabled = false;
|
||
exportStopBtn.disabled = true;
|
||
break;
|
||
case 'failed':
|
||
exportStatusTitle.textContent = 'ОШИБКА';
|
||
exportStatusText.textContent = 'Экспорт завершился с ошибкой.';
|
||
isExportActive = false;
|
||
exportStartBtn.disabled = false;
|
||
exportStopBtn.disabled = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
async function startExport() {
|
||
if (isExportActive) return;
|
||
|
||
const modelVal = document.getElementById('export-model').value.trim();
|
||
if (!modelVal) {
|
||
showNotification('Пожалуйста, выберите или укажите модель для экспорта.', 'warning');
|
||
return;
|
||
}
|
||
|
||
const config = {
|
||
model: modelVal,
|
||
format: document.getElementById('export-format').value,
|
||
imgsz: readNumber('export-imgsz', 640, true),
|
||
half: document.getElementById('export-half').checked,
|
||
int8: document.getElementById('export-int8').checked,
|
||
dynamic: document.getElementById('export-dynamic').checked
|
||
};
|
||
|
||
try {
|
||
const res = await fetch('/api/export/start', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(config)
|
||
});
|
||
|
||
const data = await res.json();
|
||
if (!res.ok) {
|
||
throw new Error(data.detail || 'Failed to start export');
|
||
}
|
||
showNotification('Экспорт успешно запущен!', 'success');
|
||
} catch (err) {
|
||
console.error('Export start error:', err);
|
||
showNotification(err.message, 'error');
|
||
}
|
||
}
|
||
|
||
async function stopExport() {
|
||
if (!isExportActive) return;
|
||
try {
|
||
const res = await fetch('/api/export/stop', { method: 'POST' });
|
||
if (!res.ok) {
|
||
const data = await res.json();
|
||
throw new Error(data.detail || 'Failed to stop export');
|
||
}
|
||
showNotification('Запрос на остановку отправлен.', 'info');
|
||
} catch (err) {
|
||
console.error('Export stop error:', err);
|
||
showNotification(err.message, 'error');
|
||
}
|
||
}
|
||
|
||
exportStartBtn.addEventListener('click', startExport);
|
||
exportStopBtn.addEventListener('click', stopExport);
|
||
|
||
// Initial load sequence
|
||
loadDatasetsList().then(() => {
|
||
return loadModelsList();
|
||
}).then(() => {
|
||
return loadInitialConfig();
|
||
}).then(() => {
|
||
loadSessionsList();
|
||
connectWebSocket();
|
||
connectExportWebSocket();
|
||
initChart();
|
||
});
|
||
});
|