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:
1 parent
b6379e14c9
commit
09a8829575
7 files changed
+383
-1
No files matched your search
+23
-1
@@ -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">
|
||||
|
||||
Reference in new issue
Block a user