feat: live preview toggle, FPS indicator, live counting by object

- Toggle ON/OFF switch to disable preview (faster processing)
- FPS badge showing rolling average processing speed
- Live Loading/Unloading/Net counts updated in real-time
- Pipeline callback pushes stats every 10 frames
- Frontend polls and updates display every 2s
- 62/62 tests pass
This commit is contained in:
jetson committed 2026-09-22 10:36:11 +07:00
1 parent b6379e14c9
commit 09a8829575
7 files changed
+383 -1

No files matched your search

+23 -1
View File
@@ -33,11 +33,33 @@
</div>
<div class="live-preview-section card" id="live-preview-section" style="display: block">
<h3 class="section-title">Live Preview</h3>
<div class="live-preview-header">
<h3 class="section-title">Live Preview</h3>
<label class="toggle-label" for="preview-toggle">
<input type="checkbox" id="preview-toggle" checked>
<span class="toggle-switch"></span>
<span class="toggle-text" id="toggle-text">ON</span>
</label>
<span class="live-fps" id="live-fps">-- FPS</span>
</div>
<div class="live-preview-wrap">
<img id="live-preview-img" class="live-preview-img" src="/api/preview/{{ job.job_id }}" alt="Annotated frame from video processing" />
<div class="preview-placeholder" id="preview-placeholder">Waiting for first frame...</div>
</div>
<div class="live-counts" id="live-counts" style="display:none">
<div class="live-count-item">
<span class="live-count-label">Loading</span>
<span class="live-count-value stat-loading" id="live-loading">0</span>
</div>
<div class="live-count-item">
<span class="live-count-label">Unloading</span>
<span class="live-count-value stat-unloading" id="live-unloading">0</span>
</div>
<div class="live-count-item">
<span class="live-count-label">Net</span>
<span class="live-count-value stat-net" id="live-net">0</span>
</div>
</div>
</div>
<div class="video-thumb-section card" id="video-thumb-section">