implemented locking in training setup

This commit is contained in:
Philipp
2025-11-28 16:09:14 +01:00
parent 5220ffbe46
commit c43545e137
15 changed files with 962 additions and 74 deletions

View File

@@ -65,6 +65,19 @@
border: 1px solid #009eac;
background: #f8f8f8;
}
.setting-row input[type="number"]:disabled,
.setting-row input[type="text"]:disabled,
.setting-row input[type="checkbox"]:disabled {
background: #d3d3d3 !important;
color: #666 !important;
cursor: not-allowed !important;
border: 1px solid #999 !important;
}
.setting-row input[disabled]::placeholder {
color: #888;
}
.setting-row input[type="checkbox"] {
margin-right: 18px;
@@ -267,6 +280,9 @@
<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">
@@ -361,11 +377,19 @@
<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">
<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="select-model-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>
@@ -377,15 +401,6 @@
<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>
@@ -483,6 +498,14 @@ window.addEventListener('DOMContentLoaded', function() { syncSplitSliders('train
<script>
document.getElementById('parameters-form').addEventListener('submit', async function(e) {
e.preventDefault();
// Temporarily enable all disabled fields so they get included
const disabledInputs = [];
document.querySelectorAll('#settings-form input[disabled], #settings-form select[disabled]').forEach(input => {
input.disabled = false;
disabledInputs.push(input);
});
// Collect YOLOX settings from #settings-form
const settingsForm = document.getElementById('settings-form');
const settingsData = {};
@@ -495,6 +518,12 @@ document.getElementById('parameters-form').addEventListener('submit', async func
}
}
});
// Re-disable the inputs
disabledInputs.forEach(input => {
input.disabled = true;
});
// Collect parameters from #parameters-form
const paramsForm = document.getElementById('parameters-form');
Array.from(paramsForm.elements).forEach(el => {