zakaria/chicken-counting-sukawarna-det
1
0 Fork 1
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity
Files
010f6e1493c2fa6e2136efe0d997fd6ac6b4665e
chicken-counting-sukawarna-det/templates/index.html
T
proitlab 010f6e1493 feat: add engine auto-recompilation, mortality detection, multi-execution batching, and dashboard updates 
- Add engine_utils for TensorRT compatibility verification, auto-recompilation from .pt models, and YAML auto-updates
- Add mortality detection pipeline (mortality.py, test_run_mortality.sh, mortality_config.yaml)
- Add multi-execution batch modes (parallel_processes, tensor_batching, hybrid) in batch_runner.py
- Add daily test run automation scripts and video processing runners
- Add dashboard REST API, live stream endpoints, and web UI templates
- Clean up git tracking by ignoring __pycache__, .pyc, and build artifacts
2026-08-19 10:17:17 +07:00

295 lines
14 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Chicken Counter — Live</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,monospace;background:#0f0f14;color:#e0e0e0;overflow:hidden;height:100vh;display:flex;flex-direction:column}
#top-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#16161e;font-size:12px;flex-shrink:0}
#top-bar h1{font-size:16px;color:#80dc5a}
#top-bar .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 6px}
#top-bar .dot.online{background:#80dc5a;box-shadow:0 0 4px #80dc5a}
#top-bar .dot.offline{background:#555}
#main{flex:1;display:flex;overflow:hidden}
#frame-area{flex:1;background:#000;display:flex;align-items:center;justify-content:center;position:relative}
#frame-area img{max-width:100%;max-height:100%;object-fit:contain}
#frame-area .overlay{position:absolute;top:12px;left:12px;pointer-events:none}
#frame-area .overlay .tag{display:inline-block;padding:4px 12px;border-radius:6px;font-size:12px;font-weight:700;margin-bottom:4px}
#frame-area .overlay .tag.live{background:#1a3a2a;color:#80dc5a}
#frame-area .overlay .tag.off{background:#333;color:#888}
#frame-area .overlay .count{font-size:36px;font-weight:900;color:#fff;text-shadow:0 0 16px rgba(0,0,0,.8)}
#sidebar{width:290px;background:#12121a;padding:16px;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;gap:12px}
#sidebar .stat{padding:12px;background:#16161e;border-radius:8px}
#sidebar .stat label{display:block;font-size:9px;color:#555;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
#sidebar .stat .val{font-size:22px;font-weight:700}
#sidebar .stat .val.good{color:#80dc5a}
#sidebar .stat .val.warn{color:#ff9f43}
#sidebar .cam-list{}
#sidebar .cam-list .cam-row{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;margin:2px 0;border-radius:6px;font-size:12px;cursor:pointer;transition:background .15s}
#sidebar .cam-list .cam-row:hover{background:#1a1a24}
#sidebar .cam-list .cam-row.act{background:#1a3a2a;color:#80dc5a;font-weight:700}
#sidebar .cam-list .cam-row .cam-total{font-size:11px;color:#666}
#sidebar .cam-list .cam-row.act .cam-total{color:#5a9a4a}
#db-panel, #mort-panel{padding:12px;background:#16161e;border-radius:8px;font-size:11px}
#db-panel h3, #mort-panel h3{font-size:10px;color:#555;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
#db-panel .db-row{display:flex;justify-content:space-between;padding:2px 0;color:#888}
#db-panel .db-row .db-total{color:#aaa;font-weight:600}
/* Mortality UI */
.mort-badge{background:#2a1518;color:#ff6b81;border:1px solid #ff4757;font-weight:700;padding:2px 6px;border-radius:4px;font-size:10px}
.mort-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.mort-card{background:#0e0e14;border-radius:6px;overflow:hidden;cursor:pointer;border:1px solid #222;transition:all .15s;text-align:left}
.mort-card:hover{border-color:#ff4757;transform:translateY(-1px)}
.mort-card img{width:100%;height:65px;object-fit:cover;display:block;background:#000}
.mort-card .info{padding:4px 6px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#888}
.mort-card .info .cnt{color:#ff9f43;font-weight:700}
/* Fullscreen Image Modal */
#mort-modal{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.88);z-index:999;align-items:center;justify-content:center;flex-direction:column;backdrop-filter:blur(4px)}
#mort-modal.active{display:flex}
#mort-modal img{max-width:90vw;max-height:85vh;border-radius:8px;border:1px solid #333;box-shadow:0 0 32px rgba(0,0,0,.9);object-fit:contain}
#mort-modal .close-btn{position:absolute;top:20px;right:28px;font-size:32px;color:#aaa;cursor:pointer;background:none;border:none;line-height:1;transition:color .15s}
#mort-modal .close-btn:hover{color:#fff}
#mort-modal .caption{margin-top:12px;font-size:13px;color:#eee;background:#16161e;padding:6px 14px;border-radius:6px;border:1px solid #333}
</style>
</head>
<body>
<div id="top-bar">
<h1>&#x1f414; Chicken Counter</h1>
<span style="color:#888"><span id="stat-date">{{ date }}</span> &nbsp;|&nbsp; <span id="clock"></span></span>
</div>
<div id="main">
<div id="frame-area">
<canvas id="frame-canvas" style="display:none"></canvas>
<img id="frame-img" src="" alt="live stream" style="display:none">
<div id="waiting-msg" style="color:#555;font-size:16px;text-align:center">waiting for pipeline...</div>
<div class="overlay" id="frame-overlay" style="display:none">
<div class="tag live" id="cam-tag"></div>
<div class="count" id="cam-count"></div>
</div>
</div>
<div id="sidebar">
<div class="stat"><label>Total Entered</label><div class="val good" id="s-total">--</div></div>
<div class="stat"><label>Inside Box</label><div class="val" id="s-inside">--</div></div>
<div class="stat"><label>Tracks</label><div class="val" id="s-tracks">--</div></div>
<div class="stat"><label>Frame</label><div class="val" id="s-frame">--</div></div>
<div class="stat"><label>Motion</label><div class="val" id="s-speed">--</div></div>
<div class="cam-list" id="cam-list"></div>
<!-- Mortality / Carcass Detection Panel -->
<div class="mort-panel" id="mort-panel" style="display:none">
<h3>
<span>&#x2620;&#xfe0f; Mortality Scans</span>
<span class="mort-badge" id="mort-header-badge">0</span>
</h3>
<div id="mort-summary-text" style="color:#777;font-size:10px;margin-bottom:4px"></div>
<div class="mort-grid" id="mort-grid"></div>
</div>
<div class="db-panel" id="db-panel">
<h3>&#x1f4ca; History</h3>
</div>
</div>
</div>
<!-- Modal for high-res mortality preview -->
<div id="mort-modal" onclick="closeMortModal(event)">
<button class="close-btn" onclick="closeMortModal(event)">&times;</button>
<img id="mort-modal-img" src="" alt="Mortality detection preview" onclick="event.stopPropagation()">
<div class="caption" id="mort-modal-caption" onclick="event.stopPropagation()"></div>
</div>
<script>
var POLL_MS = {{ poll_ms }};
var SHM = "{{ shm_dir }}";
var DB_PATH = "{{ db_path }}";
var RUN_DATE = "{{ date }}";
var cameras = [], activeCam = null, lastUpdate = 0;
var perCam = {}, lastFramePerCam = {};
function boot() {
loadCameras();
setInterval(loadCameras, 3000);
setInterval(poll, POLL_MS);
setInterval(updateClock, 1000);
loadHistory();
setInterval(loadHistory, 60000);
loadMortality();
setInterval(loadMortality, 30000);
updateClock();
}
function loadCameras() {
fetch("/api/cameras").then(r => r.json()).then(data => {
cameras = data.cameras || [];
renderCamList();
if (cameras.length && !activeCam) selectCam(cameras[0]);
detectActive();
if (!cameras.length) showWaiting("no cameras detected");
}).catch(function() {});
updateSidebar();
}
function detectActive() {
var pending = cameras.length;
cameras.forEach(function(cam) {
fetch("/shm/" + cam + "/stats.json?t=" + Date.now()).then(r => r.ok ? r.json() : null).then(s => {
pending--;
if (!s) return;
var prev = lastFramePerCam[cam] || 0;
perCam[cam] = { total: s.total_entered_count, inside: s.inside_box_count, frame: s.frame_index, tracks: s.track_count, speed: s.smoothed_speed };
if (s.frame_index > prev) {
lastFramePerCam[cam] = s.frame_index;
if (activeCam !== cam) selectCam(cam);
}
}).catch(function() {}).finally(function() { if (pending === 0) renderCamList(); });
});
}
function selectCam(id) {
activeCam = id;
document.getElementById("waiting-msg").style.display = "none";
document.getElementById("frame-overlay").style.display = "block";
document.getElementById("frame-img").style.display = "block";
document.getElementById("frame-img").src = "/stream/" + id;
renderCamList();
refreshNow();
}
function poll() {
if (!activeCam) return;
var t = Date.now();
fetch("/shm/" + activeCam + "/stats.json?t=" + t).then(r => r.ok ? r.json() : null).then(s => {
if (!s) { setOffline(); return; }
lastUpdate = Date.now();
lastFramePerCam[activeCam] = s.frame_index;
perCam[activeCam] = { total: s.total_entered_count, inside: s.inside_box_count, frame: s.frame_index, tracks: s.track_count, speed: s.smoothed_speed };
document.getElementById("s-total").textContent = s.total_entered_count;
document.getElementById("s-inside").textContent = s.inside_box_count;
document.getElementById("s-tracks").textContent = s.track_count;
document.getElementById("s-frame").textContent = s.frame_index;
document.getElementById("s-speed").textContent = Number(s.smoothed_speed).toFixed(1);
var tag = document.getElementById("cam-tag");
var status = s.backward_active ? "BACKWARD STOP" : "RUNNING";
tag.textContent = activeCam + " \u2022 " + status;
tag.className = "tag " + (s.backward_active ? "off" : "live");
document.getElementById("cam-count").textContent = s.total_entered_count;
}).catch(function() { setOffline(); });
}
function refreshNow() {
poll();
}
function showWaiting(msg) {
document.getElementById("waiting-msg").textContent = msg;
document.getElementById("waiting-msg").style.display = "block";
document.getElementById("frame-overlay").style.display = "none";
document.getElementById("frame-img").style.display = "none";
}
function setOffline() {
var tag = document.getElementById("cam-tag");
if (tag && activeCam) {
tag.textContent = activeCam + " \u2022 OFFLINE";
tag.className = "tag off";
}
}
function updateSidebar() {}
function renderCamList() {
var ul = document.getElementById("cam-list");
ul.innerHTML = cameras.map(function(c) {
var info = perCam[c] || {};
var cls = c === activeCam ? " act" : "";
return '<div class="cam-row' + cls + '" onclick="selectCam(\'' + c + '\')">' +
'<span>' + c + '</span>' +
'<span class="cam-total">' + (info.total || 0) + '</span></div>';
}).join("");
}
function updateClock() {
document.getElementById("clock").textContent = new Date().toLocaleTimeString();
}
function loadHistory() {
if (!DB_PATH) return;
var panel = document.getElementById("db-panel");
panel.style.display = "block";
fetch("/api/db/history").then(r => r.json()).then(rows => {
var html = "<h3>&#x1f4ca; History</h3>";
if (rows && rows.length) {
html += rows.map(function(r) {
return '<div class="db-row"><span>' + r.date + ' ' + (r.location || '') + '</span>' +
'<span class="db-total">' + Number(r.total || 0).toLocaleString() + '</span></div>';
}).join("");
}
panel.innerHTML = html;
}).catch(function() {});
if (RUN_DATE && RUN_DATE !== "today") {
fetch("/api/db/date/" + RUN_DATE).then(r => r.json()).then(data => {
if (!data.cameras || !data.cameras.length) return;
var html = panel.innerHTML;
html += '<h3 style="margin-top:12px">&#x1f4f9; ' + RUN_DATE + ' (' + (data.total.total || 0).toLocaleString() + ')</h3>';
data.cameras.forEach(function(c) {
html += '<div class="db-row"><span>' + c.camera_id + '</span>' +
'<span class="db-total">' + Number(c.total_entered || 0).toLocaleString() + '</span></div>';
});
panel.innerHTML = html;
}).catch(function() {});
}
}
function loadMortality() {
fetch("/api/mortality/latest").then(r => r.ok ? r.json() : null).then(data => {
var panel = document.getElementById("mort-panel");
if (!data || data.error || !data.results || !data.results.length) {
panel.style.display = "none";
return;
}
panel.style.display = "block";
var totalCarcasses = data.total_mortality_count !== undefined ? data.total_mortality_count : data.results.reduce((acc, x) => acc + (x.count || 0), 0);
document.getElementById("mort-header-badge").textContent = totalCarcasses + " detected";
document.getElementById("mort-summary-text").textContent = (data.date ? data.date + " \u2022 " : "") + data.results.length + " photo(s) scanned";
var grid = document.getElementById("mort-grid");
grid.innerHTML = data.results.map(function(item) {
var imgSrc = "/api/mortality/image/" + encodeURIComponent(item.output_image || item.input_image);
var title = (item.output_image || item.input_image || "scan").replace(/^output_/, "");
var count = item.count !== undefined ? item.count : (item.detections ? item.detections.length : 0);
return '<div class="mort-card" onclick="openMortModal(\'' + imgSrc + '\', \'' + title + ' (' + count + ' carcasses)\')">' +
'<img src="' + imgSrc + '" alt="' + title + '" loading="lazy" onerror="this.style.opacity=0.3">' +
'<div class="info">' +
'<span style="max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + title + '">' + title + '</span>' +
'<span class="cnt">' + count + ' 💀</span>' +
'</div></div>';
}).join("");
}).catch(function() {});
}
function openMortModal(src, caption) {
var modal = document.getElementById("mort-modal");
document.getElementById("mort-modal-img").src = src;
document.getElementById("mort-modal-caption").textContent = caption || "";
modal.classList.add("active");
}
function closeMortModal(event) {
document.getElementById("mort-modal").classList.remove("active");
}
document.addEventListener("keydown", function(e) {
if (e.key === "Escape") closeMortModal();
});
setTimeout(function() { if (activeCam) refreshNow(); }, 500);
boot();
</script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink