add cam dist
This commit is contained in:
parent
8bc7eb9f4b
commit
60ead1ff06
55
dashboard.py
55
dashboard.py
@ -358,7 +358,13 @@ def camera(cam_id):
|
||||
if cam_id not in CAMERAS:
|
||||
return "Camera not found", 404
|
||||
cam_dets = [d for d in reversed(detections) if d["cam"] == cam_id]
|
||||
return render_template_string(CAM_HTML, cam_id=cam_id, cam=CAMERAS[cam_id], dets=cam_dets)
|
||||
return render_template_string(
|
||||
CAM_HTML,
|
||||
cam_id=cam_id,
|
||||
cam=CAMERAS[cam_id],
|
||||
dets=cam_dets,
|
||||
class_names=CLASS_NAMES,
|
||||
)
|
||||
|
||||
|
||||
@app.route("/api/verify/<det_id>", methods=["POST"])
|
||||
@ -1103,6 +1109,18 @@ body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2
|
||||
.card-badge.unverified{background:rgba(148,163,184,.15);color:#64748b}
|
||||
|
||||
.empty{text-align:center;padding:60px 20px;opacity:.4;font-size:14px;line-height:1.6}
|
||||
|
||||
.cam-chart-panel{
|
||||
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
|
||||
border-radius:14px;padding:16px 20px;margin-bottom:24px;
|
||||
}
|
||||
.cam-chart-panel h3{
|
||||
font-size:11px;opacity:.45;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;
|
||||
}
|
||||
.bar-row{display:flex;align-items:center;margin-bottom:5px;font-size:12px;padding:3px 0;border-radius:5px}
|
||||
.bar-label{width:58px;text-align:right;padding-right:8px;opacity:.7}
|
||||
.bar-fill{height:16px;background:#3b82f6;border-radius:3px;transition:width .5s ease;min-width:2px}
|
||||
.bar-num{padding-left:6px;opacity:.45;font-size:11px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -1116,6 +1134,10 @@ body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="cam-chart-panel">
|
||||
<h3>Detections by Species (this camera)</h3>
|
||||
<div id="cam-chart-bars"></div>
|
||||
</div>
|
||||
{% if dets %}
|
||||
<div class="grid">
|
||||
{% for d in dets %}
|
||||
@ -1143,6 +1165,37 @@ body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const CAM_ID={{ cam_id | tojson }};
|
||||
const CN={{ class_names | tojson }};
|
||||
const INITIAL={{ dets | tojson }};
|
||||
function renderCamChart(camDets){
|
||||
const counts={};
|
||||
CN.forEach(c=>{counts[c]=0});
|
||||
camDets.forEach(d=>{
|
||||
const p=d.pred;
|
||||
if(Object.prototype.hasOwnProperty.call(counts,p)) counts[p]++;
|
||||
});
|
||||
const mx=Math.max(...Object.values(counts),1);
|
||||
let h='';
|
||||
for(const sp of CN){
|
||||
const n=counts[sp];
|
||||
const pct=(n/mx)*100;
|
||||
h+=`<div class="bar-row"><div class="bar-label">${sp}</div>
|
||||
<div class="bar-fill" style="width:${pct}%;${n?'':'opacity:.25'}"></div>
|
||||
<div class="bar-num">${n}</div></div>`;
|
||||
}
|
||||
document.getElementById('cam-chart-bars').innerHTML=h;
|
||||
}
|
||||
renderCamChart(INITIAL);
|
||||
setInterval(async()=>{
|
||||
try{
|
||||
const r=await fetch('/api/detections');
|
||||
const all=await r.json();
|
||||
renderCamChart(all.filter(d=>d.cam===CAM_ID));
|
||||
}catch(e){}
|
||||
},3000);
|
||||
</script>
|
||||
</body></html>"""
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user