que and training status
This commit is contained in:
Philipp
@@ -30,6 +30,14 @@
|
||||
<label id="project-title-label"
|
||||
style="display: block; text-align: left; font-weight: bold; font-size: x-large;">Project</label>
|
||||
<div class="button-row">
|
||||
<!-- Training Notification Bell -->
|
||||
<button id="training-bell" onclick="toggleTrainingModal()" class="button" title="Training Status"
|
||||
style="padding: 8px 16px; margin-right: 10px; position: relative; background: #999;">
|
||||
🔔
|
||||
<span id="bell-badge" style="display: none; position: absolute; top: -5px; right: -5px; background: #ff4d4f;
|
||||
color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; line-height: 20px;
|
||||
text-align: center; font-weight: bold;">0</span>
|
||||
</button>
|
||||
<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">
|
||||
@@ -317,7 +325,133 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Training Status Modal -->
|
||||
<div id="training-status-modal" class="modal" style="display: none;">
|
||||
<div class="modal-content" style="max-width: 700px; max-height: 90vh; overflow-y: auto;">
|
||||
<div class="modal-header">
|
||||
<h2>Training Status</h2>
|
||||
<button class="close-btn" onclick="toggleTrainingModal()">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<!-- Current Training -->
|
||||
<div class="settings-section" id="current-training-section" style="display: none;">
|
||||
<h3 style="color: #009eac;">Current Training</h3>
|
||||
<div id="current-training-info" style="background: #eaf7fa; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
|
||||
<!-- Populated by JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Queued Trainings -->
|
||||
<div class="settings-section" id="queue-section" style="display: none;">
|
||||
<h3 style="color: #666;">Queue (<span id="queue-count">0</span>)</h3>
|
||||
<div id="queue-list" style="display: flex; flex-direction: column; gap: 12px;">
|
||||
<!-- Populated by JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No trainings message -->
|
||||
<div id="no-trainings-msg" style="text-align: center; padding: 32px; color: #666;">
|
||||
No trainings running or queued.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/settings.js"></script>
|
||||
<script>
|
||||
// Training status polling
|
||||
let trainingStatusPoller = null;
|
||||
|
||||
function toggleTrainingModal() {
|
||||
const modal = document.getElementById('training-status-modal');
|
||||
if (modal.style.display === 'none') {
|
||||
modal.style.display = 'flex';
|
||||
updateTrainingStatus(); // Immediate update
|
||||
} else {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function updateTrainingStatus() {
|
||||
fetch('/api/training-status')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const bell = document.getElementById('training-bell');
|
||||
const badge = document.getElementById('bell-badge');
|
||||
const currentSection = document.getElementById('current-training-section');
|
||||
const queueSection = document.getElementById('queue-section');
|
||||
const noTrainingsMsg = document.getElementById('no-trainings-msg');
|
||||
|
||||
const totalCount = (data.current ? 1 : 0) + data.queue.length;
|
||||
|
||||
// Update bell appearance
|
||||
if (totalCount > 0) {
|
||||
bell.style.background = '#009eac';
|
||||
badge.style.display = 'block';
|
||||
badge.textContent = totalCount;
|
||||
} else {
|
||||
bell.style.background = '#999';
|
||||
badge.style.display = 'none';
|
||||
}
|
||||
|
||||
// Update modal content
|
||||
if (data.current) {
|
||||
currentSection.style.display = 'block';
|
||||
noTrainingsMsg.style.display = 'none';
|
||||
|
||||
const percentage = Math.round((data.current.iteration / data.current.max_epoch) * 100);
|
||||
document.getElementById('current-training-info').innerHTML = `
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
||||
<strong>${data.current.name || 'Training'}</strong>
|
||||
<span style="font-weight: bold; color: #009eac;">${percentage}%</span>
|
||||
</div>
|
||||
<div style="background: #ddd; border-radius: 4px; height: 24px; overflow: hidden; margin-bottom: 8px;">
|
||||
<div style="background: #009eac; height: 100%; width: ${percentage}%; transition: width 0.3s;"></div>
|
||||
</div>
|
||||
<div style="font-size: 14px; color: #666;">
|
||||
Epoch ${data.current.iteration} / ${data.current.max_epoch}
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
currentSection.style.display = 'none';
|
||||
}
|
||||
|
||||
if (data.queue.length > 0) {
|
||||
queueSection.style.display = 'block';
|
||||
noTrainingsMsg.style.display = 'none';
|
||||
document.getElementById('queue-count').textContent = data.queue.length;
|
||||
|
||||
document.getElementById('queue-list').innerHTML = data.queue.map((t, idx) => `
|
||||
<div style="background: #f5f5f5; padding: 12px; border-radius: 8px; border-left: 4px solid #009eac;">
|
||||
<strong>#${idx + 1}: ${t.name || 'Training'}</strong>
|
||||
<div style="font-size: 13px; color: #666; margin-top: 4px;">
|
||||
${t.max_epoch} epochs • Waiting...
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
} else {
|
||||
queueSection.style.display = 'none';
|
||||
}
|
||||
|
||||
if (totalCount === 0) {
|
||||
noTrainingsMsg.style.display = 'block';
|
||||
}
|
||||
})
|
||||
.catch(err => console.error('Failed to fetch training status:', err));
|
||||
}
|
||||
|
||||
// Poll every 5 seconds
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
updateTrainingStatus();
|
||||
trainingStatusPoller = setInterval(updateTrainingStatus, 5000);
|
||||
});
|
||||
|
||||
// Stop polling when page unloads
|
||||
window.addEventListener('beforeunload', function() {
|
||||
if (trainingStatusPoller) clearInterval(trainingStatusPoller);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user