549 lines
38 KiB
HTML
549 lines
38 KiB
HTML
<!DOCTYPE html>
|
||
|
||
|
||
|
||
<html>
|
||
|
||
<head>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta charset="utf-8" />
|
||
<link rel="stylesheet" href="globals.css" />
|
||
<link rel="stylesheet" href="styleguide.css" />
|
||
<link rel="stylesheet" href="style.css" />
|
||
<style>
|
||
#projects-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1px;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.dataset-card {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.setting-row {
|
||
margin-bottom: 20px;
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
align-items: start;
|
||
background: rgb(234, 247, 250);
|
||
color: #009eac;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
padding: 10px 18px;
|
||
position: relative;
|
||
}
|
||
|
||
.setting-row-inner {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.setting-label {
|
||
font-weight: bold;
|
||
margin-bottom: 0;
|
||
margin-right: 18px;
|
||
color: #333;
|
||
min-width: 140px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.setting-row input[type="number"],
|
||
.setting-row input[type="text"] {
|
||
width: 200px;
|
||
|
||
min-width: 120px;
|
||
max-width: 230px;
|
||
margin-right: 18px;
|
||
padding: 4px 8px;
|
||
font-size: 1em;
|
||
border-radius: 6px;
|
||
border: 1px solid #009eac;
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
.setting-row input[type="checkbox"] {
|
||
margin-right: 18px;
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.setting-desc {
|
||
font-size: 1em;
|
||
color: #009eac;
|
||
margin-top: 8px;
|
||
margin-bottom: 2px;
|
||
background: #eaf7fa;
|
||
border-radius: 6px;
|
||
padding: 6px 10px;
|
||
width: 100%;
|
||
position: static;
|
||
}
|
||
|
||
.setting-row {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
#exp-setup {
|
||
max-width: 600px;
|
||
margin: 32px auto;
|
||
padding: 24px;
|
||
background: #f5f5f5;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
#parameters-setup{
|
||
max-width: 600px;
|
||
margin: 32px auto;
|
||
padding: 24px;
|
||
background: #f5f5f5;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.config-section {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.config-section h3 {
|
||
color: #009eac;
|
||
margin-bottom: 16px;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
|
||
.config-section-foldable {
|
||
margin-bottom: 32px;
|
||
background: linear-gradient(90deg, #b7f2ff 0%, #eaf7fa 100%);
|
||
border-radius: 10px;
|
||
padding: 10px 16px;
|
||
position: relative;
|
||
}
|
||
|
||
.config-section-foldable h3 {
|
||
color: #009eac;
|
||
margin-bottom: 16px;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.config-section-foldable.nested {
|
||
background: #d2f0f7;
|
||
border-left: 6px solid #009eac;
|
||
margin-left: 16px;
|
||
box-shadow: 0 2px 8px rgba(0, 158, 172, 0.12);
|
||
}
|
||
|
||
.config-section-foldable.nested h3 {
|
||
color: #007080;
|
||
}
|
||
|
||
.config-section-foldable.nested .fold-icon {
|
||
color: #007080;
|
||
}
|
||
|
||
.setting-desc-foldable {
|
||
background: #eaf7fa;
|
||
border-radius: 6px;
|
||
margin-top: 8px;
|
||
margin-bottom: 2px;
|
||
padding: 0;
|
||
width: 100%;
|
||
position: relative;
|
||
grid-column: 1 / -1;
|
||
display: block;
|
||
}
|
||
|
||
.setting-desc-header {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
color: #009eac;
|
||
font-size: 1em;
|
||
font-weight: bold;
|
||
padding: 6px 10px;
|
||
border-bottom: 1px solid #b2e4ef;
|
||
border-radius: 6px 6px 0 0;
|
||
background: #eaf7fa;
|
||
}
|
||
|
||
.setting-desc-content {
|
||
padding: 6px 10px;
|
||
color: #009eac;
|
||
background: #eaf7fa;
|
||
border-radius: 0 0 6px 6px;
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<!-- TODO: Fix Train from Skretch and disable model select if skratch -->
|
||
|
||
<body onload="pollStatus()">
|
||
<div>
|
||
<div id="header">
|
||
<icon class="header-icon" onclick="window.location.href='/index.html'" , onmouseover=""
|
||
style="cursor: pointer;" src="./media/logo.png" alt="Logo"></icon>
|
||
<label id="project-title-label"
|
||
style="display: block; text-align: left; font-weight: bold; font-size: x-large;">title</label>
|
||
<div class="button-row">
|
||
<button id="Add Training Project" onclick="window.location.href='/add-project.html'"
|
||
class="button-red">Add Training Project</button>
|
||
<button id="seed-db-btn" class="button">
|
||
Seed Database
|
||
<div class="loader" id="loader" style="display: none"></div>
|
||
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div id="projects-list">
|
||
|
||
</div>
|
||
<script>
|
||
document.getElementById('seed-db-btn').addEventListener('click', function () {
|
||
const elLoader = document.getElementById("loader")
|
||
elLoader.style.display = "inherit"
|
||
|
||
fetch('/api/seed')
|
||
.finally(() => {
|
||
// Instead of hiding loader immediately, poll /api/update-status until done
|
||
function pollStatus() {
|
||
fetch('/api/update-status')
|
||
.then(res => res.json())
|
||
.then(status => {
|
||
if (status && status.running) {
|
||
// Still running, poll again after short delay
|
||
setTimeout(pollStatus, 5000);
|
||
} else {
|
||
elLoader.style.display = "none";
|
||
}
|
||
})
|
||
.catch(() => {
|
||
elLoader.style.display = "none";
|
||
});
|
||
}
|
||
pollStatus();
|
||
})
|
||
});
|
||
|
||
// Show loader if backend is still processing on page load
|
||
|
||
function pollStatus() {
|
||
const elLoader = document.getElementById("loader");
|
||
fetch('/api/update-status')
|
||
.then(res => res.json())
|
||
|
||
.then(status => {
|
||
if (status && status.running) {
|
||
elLoader.style.display = "inherit";
|
||
setTimeout(pollStatus, 5000);
|
||
} else {
|
||
elLoader.style.display = "none";
|
||
}
|
||
})
|
||
.catch(() => {
|
||
elLoader.style.display = "none";
|
||
});
|
||
}
|
||
|
||
</script>
|
||
<script>
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const projectId = urlParams.get('id');
|
||
fetch('/api/training-projects')
|
||
.then(res => res.json())
|
||
.then(projects => {
|
||
const project = projects.find(p => p.project_id == projectId || p.id == projectId);
|
||
if (project) {
|
||
document.getElementById('project-title-label').textContent = '/' + project.title;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<div style="display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; align-items: flex-start; margin-top:32px;">
|
||
<div id="exp-setup" style="flex: 1 1 420px; min-width: 340px; max-width: 600px; margin:0;">
|
||
<h2 style="margin-bottom:18px;color:#009eac;">YOLOX Training Settings</h2>
|
||
<form id="settings-form">
|
||
<!-- Autogenerated/Keep Variables -->
|
||
<!-- <div class="config-section">
|
||
<h3>Dataset & Class Settings</h3>
|
||
<div class="setting-row"><div class="setting-row-inner"><label class="setting-label" for="num_classes">Num Classes</label><input type="number" id="num_classes" name="num_classes" value="80" min="1" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Number of object classes to detect in your dataset.<br>Example: 1–100 (COCO has 80)</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Train Ann</span><input type="text" name="train_ann" value="instances_train2017.json" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Filenames of annotation files (usually in COCO format) for training, validation, and testing respectively.<br>Examples: instances_train2017.json</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Val Ann</span><input type="text" name="val_ann" value="instances_val2017.json" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Validation annotation file name.</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Test Ann</span><input type="text" name="test_ann" value="instances_test2017.json" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Test annotation file name.</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Data Dir</span><input type="text" name="data_dir" value="" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Path to the directory containing your dataset images and annotations.</div></div></div>
|
||
</div> -->
|
||
|
||
<!-- Main Parameters -->
|
||
<div class="config-section-foldable">
|
||
<h3>Main Parameters</h3>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Exp Name</span><input type="text" name="exp_name" value="custom_exp" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Name to identify this training run/experiment. Used for logging and saving files.</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Max Epoch</span><input type="number" name="max_epoch" value="300" min="1" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Total number of training epochs.<br>Typical: 100–300</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><label class="setting-label" for="depth">Depth</label><input type="number" id="depth" step="any" name="depth" value="1.00" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Controls the depth (number of layers) of the backbone. Higher depth improves accuracy but may slow down training.<br>Typical values: 0.33 (nano), 0.67 (tiny), 1.0 (s, m, l)</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><label class="setting-label" for="width">Width</label><input type="number" id="width" step="any" name="width" value="1.00" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Controls the width (number of channels) in each layer. Wider models capture more detail but use more memory.<br>Typical values: 0.25–1.33</div></div></div>
|
||
|
||
<!-- Details Foldable -->
|
||
<div class="config-section-foldable nested">
|
||
<h3 style="cursor:pointer;display:flex;align-items:center;" onclick="toggleFold(this)"><span>Details</span><span class="fold-icon" style="margin-left:8px;font-size:1.2em;">▼</span></h3>
|
||
<div class="foldable-content">
|
||
<div class="setting-row"><div class="setting-row-inner"><label class="setting-label" for="act">Activation</label><input type="text" id="act" name="act" value="silu" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Activation function used in the network.<br>Options: silu, relu, leaky_relu</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Warmup Epochs</span><input type="number" name="warmup_epochs" value="5" min="0" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Number of epochs at the beginning with a slowly increasing learning rate.<br>Common: 3–5</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Warmup LR</span><input type="number" step="any" name="warmup_lr" value="0" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Starting learning rate during warmup phase. Usually set to 0.</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Scheduler</span><input type="text" name="scheduler" value="yoloxwarmcos" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Learning rate scheduler.<br>Default: yoloxwarmcos</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">No Aug Epochs</span><input type="number" name="no_aug_epochs" value="15" min="0" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Number of final epochs with no data augmentation to improve final accuracy.<br>Typical: 10–20</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Min LR Ratio</span><input type="number" step="any" name="min_lr_ratio" value="0.05" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Minimum ratio between the final and initial learning rate.<br>Default: 0.05</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">EMA</span><input type="checkbox" name="ema" checked /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Enable Exponential Moving Average of model weights for smoother training results.</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Weight Decay</span><input type="number" step="any" name="weight_decay" value="0.0005" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Regularization term to reduce overfitting.<br>Typical: 0.0001–0.001</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Momentum</span><input type="number" step="any" name="momentum" value="0.9" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Momentum for optimizer.<br>Default: 0.9</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Input Size</span><input type="text" name="input_size" value="640,640" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Size of input images during training, formatted as width,height.<br>Common values: 640,640 or 512,512</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Logs Foldable -->
|
||
<div class="config-section-foldable nested">
|
||
<h3 style="cursor:pointer;display:flex;align-items:center;" onclick="toggleFold(this)"><span>Logs</span><span class="fold-icon" style="margin-left:8px;font-size:1.2em;">▼</span></h3>
|
||
<div class="foldable-content">
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Print Interval</span><input type="number" name="print_interval" value="10" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">How often to print training logs (in iterations).<br>Example: 10</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Eval Interval</span><input type="number" name="eval_interval" value="10" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">How often to evaluate on validation set (in epochs).<br>Example: 10</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Save History CKPT</span><input type="checkbox" name="save_history_ckpt" checked /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Save model checkpoints periodically for backup or resuming.</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Test Size</span><input type="text" name="test_size" value="640,640" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Input size for evaluation, formatted as width,height.<br>Example: 640,640</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Test Conf</span><input type="number" step="any" name="test_conf" value="0.01" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Confidence score threshold for predictions during evaluation.<br>Typical: 0.01–0.3</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">NMS Thre</span><input type="number" step="any" name="nmsthre" value="0.65" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">IoU threshold for non-maximum suppression (NMS).<br>Typical: 0.5–0.7</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Transformation Settings Foldable -->
|
||
<div class="config-section-foldable nested">
|
||
<h3 style="cursor:pointer;display:flex;align-items:center;" onclick="toggleFold(this)"><span>Transformation Settings</span><span class="fold-icon" style="margin-left:8px;font-size:1.2em;">▼</span></h3>
|
||
<div class="foldable-content">
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Multiscale Range</span><input type="number" name="multiscale_range" value="5" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Controls how much to vary image sizes during training for robustness.<br>Range: 0–10 (e.g. 5 = ±5 scale levels)</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Enable Mixup</span><input type="checkbox" name="enable_mixup" checked /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Toggle mixup augmentation on or off. Improves generalization.</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Mosaic Prob</span><input type="number" step="any" name="mosaic_prob" value="1.0" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Probability of applying mosaic augmentation, which combines 4 images into 1.<br>Range: 0.0–1.0</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Mixup Prob</span><input type="number" step="any" name="mixup_prob" value="1.0" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Probability of applying mixup augmentation, blending two images and labels.<br>Range: 0.0–1.0</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">HSV Prob</span><input type="number" step="any" name="hsv_prob" value="1.0" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Probability of applying HSV (color) augmentation to images.<br>Range: 0.0–1.0</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Flip Prob</span><input type="number" step="any" name="flip_prob" value="0.5" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Probability of flipping the image horizontally.<br>Default: 0.5</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Degrees</span><input type="number" step="any" name="degrees" value="10.0" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Maximum rotation angle for random rotation.<br>Typical: 0–15°</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Mosaic Scale</span><input type="text" name="mosaic_scale" value="0.1,2" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Scale range for mosaic augmentation, formatted as min,max.<br>Example: 0.1,2.0</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Mixup Scale</span><input type="text" name="mixup_scale" value="0.5,1.5" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Scale range for mixup augmentation.<br>Example: 0.5,1.5</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Translate</span><input type="number" step="any" name="translate" value="0.1" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Maximum translation ratio. A value of 0.1 means 10% shift in image position.<br>Range: 0.0–0.3</div></div></div>
|
||
<div class="setting-row"><div class="setting-row-inner"><span class="setting-label">Shear</span><input type="number" step="any" name="shear" value="2.0" /></div><div class="setting-desc-foldable"><div class="setting-desc-header" onclick="toggleDescFold(this)"><span class="desc-fold-icon" style="margin-right:8px;">►</span>Description</div><div class="setting-desc-content">Maximum shear angle in degrees for geometric distortion.<br>Typical: 0.0–5.0</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div id="parameters-setup" style="flex: 1 1 420px; min-width: 340px; max-width: 600px; margin:0;">
|
||
<!-- Parameters Section -->
|
||
|
||
<h2 style="margin-bottom:18px;color:#009eac;">Parameters</h2>
|
||
<form id="parameters-form">
|
||
<div class="config-section-foldable">
|
||
<h3>Category: Split</h3>
|
||
<div class="setting-row"><div class="setting-row-inner">
|
||
<label class="setting-label" for="seed">Seed</label>
|
||
<input type="number" id="seed" name="seed" value="" />
|
||
</div></div>
|
||
<div class="setting-row"><div class="setting-row-inner">
|
||
<label class="setting-label" for="train-slider">Train</label>
|
||
<input type="range" id="train-slider" name="train" min="0" max="100" value="70" step="1" style="width:120px;">
|
||
<span id="train-value">70%</span>
|
||
</div></div>
|
||
<div class="setting-row"><div class="setting-row-inner">
|
||
<label class="setting-label" for="valid-slider">Valid</label>
|
||
<input type="range" id="valid-slider" name="valid" min="0" max="100" value="20" step="1" style="width:120px;">
|
||
<span id="valid-value">20%</span>
|
||
</div></div>
|
||
<div class="setting-row"><div class="setting-row-inner">
|
||
<label class="setting-label" for="test-slider">Test</label>
|
||
<input type="range" id="test-slider" name="test" min="0" max="100" value="10" step="1" style="width:120px;">
|
||
<span id="test-value">10%</span>s
|
||
</div></div>
|
||
</div>
|
||
<div class="config-section-foldable" style="margin-top:24px;">
|
||
<h3>Model Settings</h3>
|
||
<div class="setting-row"><div class="setting-row-inner">
|
||
<label class="setting-label" for="select-model">Select Model</label>
|
||
<select id="select-model" name="select_model">
|
||
<option value="YOLOX-s">YOLOX-s</option>
|
||
<option value="YOLOX-m">YOLOX-m</option>
|
||
<option value="YOLOX-l">YOLOX-l</option>
|
||
<option value="YOLOX-x">YOLOX-x</option>
|
||
<option value="YOLOX-Darknet53">YOLOX-Darknet53</option>
|
||
<option value="YOLOX-Nano">YOLOX-Nano</option>
|
||
<option value="YOLOX-Tiny">YOLOX-Tiny</option>
|
||
</select>
|
||
</div></div>
|
||
<div class="setting-row">
|
||
<div class="setting-row-inner">
|
||
<label class="setting-label" for="transfer-learning">Transfer Learning</label>
|
||
<select id="transfer-learning" name="transfer_learning" onchange="toggleCkptUpload()">
|
||
<option value="sketch">Train from sketch</option>
|
||
<option value="coco">Train on coco</option>
|
||
<option value="custom">Train on custom</option>
|
||
</select>
|
||
</div></div>
|
||
<div class="setting-row" id="ckpt-upload-row" style="display:none;">
|
||
<div class="setting-row-inner">
|
||
<label class="setting-label" for="ckpt-upload">Upload .pth file</label>
|
||
<input type="file" id="ckpt-upload" name="ckpt_upload" accept=".pth" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="button" style="margin-top:18px;">Save Parameters</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script>
|
||
function toggleFold(header) {
|
||
const section = header.parentElement;
|
||
const content = section.querySelector('.foldable-content');
|
||
const icon = header.querySelector('.fold-icon');
|
||
if (content.style.display === 'none') {
|
||
content.style.display = '';
|
||
icon.textContent = '▼';
|
||
} else {
|
||
content.style.display = 'none';
|
||
icon.textContent = '►';
|
||
}
|
||
}
|
||
window.addEventListener('DOMContentLoaded', function () {
|
||
document.querySelectorAll('.config-section-foldable .foldable-content').forEach(function (content) {
|
||
const icon = content.parentElement.querySelector('.fold-icon');
|
||
if (content.parentElement.classList.contains('nested')) {
|
||
content.style.display = 'none';
|
||
if (icon) icon.textContent = '►';
|
||
} else {
|
||
content.style.display = '';
|
||
if (icon) icon.textContent = '▼';
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
function toggleDescFold(header) {
|
||
const content = header.nextElementSibling;
|
||
const icon = header.querySelector('.desc-fold-icon');
|
||
if (content.style.display === 'none' || content.style.display === '') {
|
||
content.style.display = 'block';
|
||
icon.textContent = '▼';
|
||
} else {
|
||
content.style.display = 'none';
|
||
icon.textContent = '►';
|
||
}
|
||
}
|
||
window.addEventListener('DOMContentLoaded', function () {
|
||
document.querySelectorAll('.setting-desc-content').forEach(function (content) {
|
||
content.style.display = 'none';
|
||
});
|
||
});
|
||
</script>
|
||
<script src="js/start-training.js"></script>
|
||
<script>
|
||
function toggleCkptUpload() {
|
||
var select = document.getElementById('transfer-learning');
|
||
var row = document.getElementById('ckpt-upload-row');
|
||
if (select.value === 'custom') {
|
||
row.style.display = '';
|
||
} else {
|
||
row.style.display = 'none';
|
||
}
|
||
}
|
||
window.addEventListener('DOMContentLoaded', function() {
|
||
toggleCkptUpload();
|
||
});
|
||
</script>
|
||
<script>
|
||
function syncSplitSliders(changed) {
|
||
let train = parseInt(document.getElementById('train-slider').value);
|
||
let valid = parseInt(document.getElementById('valid-slider').value);
|
||
let test = 100 - train - valid;
|
||
// Clamp valid so test is never negative
|
||
if (test < 0) {
|
||
valid = 100 - train;
|
||
document.getElementById('valid-slider').value = valid;
|
||
test = 0;
|
||
}
|
||
document.getElementById('test-slider').value = test;
|
||
document.getElementById('train-value').textContent = train + '%';
|
||
document.getElementById('valid-value').textContent = valid + '%';
|
||
document.getElementById('test-value').textContent = test + '%';
|
||
}
|
||
document.getElementById('train-slider').addEventListener('input', function() { syncSplitSliders('train'); });
|
||
document.getElementById('valid-slider').addEventListener('input', function() { syncSplitSliders('valid'); });
|
||
document.getElementById('test-slider').setAttribute('disabled', 'disabled');
|
||
window.addEventListener('DOMContentLoaded', function() { syncSplitSliders('train'); });
|
||
</script>
|
||
<script>
|
||
document.getElementById('parameters-form').addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
// Collect YOLOX settings from #settings-form
|
||
const settingsForm = document.getElementById('settings-form');
|
||
const settingsData = {};
|
||
Array.from(settingsForm.elements).forEach(el => {
|
||
if (el.name && el.type !== 'submit') {
|
||
if (el.type === 'checkbox') {
|
||
settingsData[el.name] = el.checked;
|
||
} else {
|
||
settingsData[el.name] = el.value;
|
||
}
|
||
}
|
||
});
|
||
// Collect parameters from #parameters-form
|
||
const paramsForm = document.getElementById('parameters-form');
|
||
Array.from(paramsForm.elements).forEach(el => {
|
||
if (el.name && el.type !== 'submit') {
|
||
if (el.type === 'checkbox') {
|
||
settingsData[el.name] = el.checked;
|
||
} else if (el.type === 'file') {
|
||
if (el.files && el.files[0]) {
|
||
settingsData[el.name] = el.files[0]; // Will handle below
|
||
}
|
||
} else {
|
||
settingsData[el.name] = el.value;
|
||
}
|
||
}
|
||
});
|
||
// Always add test value from slider (even if disabled)
|
||
settingsData['test'] = document.getElementById('test-slider').value;
|
||
// Handle file upload (ckpt_upload)
|
||
const formData = new FormData();
|
||
for (const key in settingsData) {
|
||
if (settingsData[key] instanceof File) {
|
||
formData.append(key, settingsData[key]);
|
||
} else {
|
||
formData.append(key, settingsData[key]);
|
||
}
|
||
}
|
||
// Add project id if available
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const projectId = urlParams.get('id');
|
||
if (projectId) formData.append('project_id', projectId);
|
||
// Send to backend
|
||
try {
|
||
const res = await fetch('/api/yolox-settings', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
if (res.ok) {
|
||
const result = await res.json();
|
||
alert('Parameters saved!');
|
||
window.location.href = '/overview-training.html?id=' + projectId;
|
||
} else {
|
||
const err = await res.json();
|
||
alert('Error saving parameters: ' + err.message);
|
||
}
|
||
} catch (error) {
|
||
alert('Error saving parameters: ' + error.message);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |