feat: add flexible multi-coop discovery, virtual floor synthesis, and stationary camera capture

2026-08-20 10:41:43 +07:00
1 parent c3b9c70221
commit 29384e5871
@@ -39,6 +39,10 @@ body{font-family:system-ui,monospace;background:#0f0f14;color:#e0e0e0;overflow:h

 /* 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-filter-btn{background:#0e0e14;border:1px solid #333;color:#888;border-radius:4px;padding:2px 6px;font-size:9px;cursor:pointer;font-weight:600;transition:all .15s}
+.mort-filter-btn:hover{color:#fff;border-color:#555}
+.mort-filter-btn.active{background:#ff4757;color:#fff;border-color:#ff4757}
+.mort-coop-tag{display:inline-block;background:#33141a;color:#ff6b81;padding:1px 4px;border-radius:3px;font-size:9px;font-weight:700;margin-right:3px}
 .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)}
@@ -46,6 +50,42 @@ body{font-family:system-ui,monospace;background:#0f0f14;color:#e0e0e0;overflow:h
 .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}

+.mort-upload-btn{background:#2a1518;color:#ff6b81;border:1px solid #ff4757;font-weight:700;padding:2px 8px;border-radius:4px;font-size:10px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:3px}
+.mort-upload-btn:hover{background:#ff4757;color:#fff}
+
+/* Upload & Capture Modal */
+#mort-upload-modal{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.85);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
+#mort-upload-modal.active{display:flex}
+.mort-upload-box{background:#16161e;border:1px solid #333;border-radius:10px;width:90%;max-width:480px;padding:18px;box-shadow:0 8px 32px rgba(0,0,0,.8);position:relative;color:#ddd}
+.mort-upload-box h2{font-size:15px;margin:0 0 10px 0;color:#fff;display:flex;align-items:center;gap:6px}
+.mort-tab-row{display:flex;gap:6px;margin-bottom:12px;border-bottom:1px solid #282834;padding-bottom:8px}
+.mort-tab-btn{background:none;border:none;color:#888;font-size:11px;font-weight:600;cursor:pointer;padding:4px 10px;border-radius:4px;transition:all .15s}
+.mort-tab-btn:hover{color:#fff}
+.mort-tab-btn.active{background:#2a1518;color:#ff6b81;border:1px solid #ff4757}
+.mort-cam-preview-box{background:#0e0e14;border:1px solid #333;border-radius:6px;overflow:hidden;position:relative;height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
+.mort-cam-preview-box img{width:100%;height:100%;object-fit:contain;background:#000}
+.mort-cam-preview-overlay{position:absolute;bottom:6px;right:8px;background:rgba(0,0,0,.75);padding:2px 8px;border-radius:4px;font-size:10px;color:#2ed573;border:1px solid #333}
+.mort-capture-btn{width:100%;padding:10px;background:#ff4757;color:#fff;border:none;border-radius:6px;font-weight:700;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s}
+.mort-capture-btn:hover{background:#ff6b81}
+.mort-capture-btn:disabled{background:#333;color:#777;cursor:not-allowed}
+.mort-upload-row{display:flex;gap:10px;margin-bottom:12px}
+.mort-upload-field{flex:1}
+.mort-upload-field label{display:block;font-size:10px;color:#888;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
+.mort-upload-field select, .mort-upload-field input[type="date"]{width:100%;padding:6px 8px;background:#0e0e14;border:1px solid #333;border-radius:6px;color:#fff;font-size:11px;outline:none;box-sizing:border-box}
+.mort-dropzone{border:2px dashed #444;border-radius:8px;padding:18px 12px;text-align:center;background:#0e0e14;cursor:pointer;transition:border-color .15s, background .15s}
+.mort-dropzone:hover, .mort-dropzone.dragover{border-color:#ff4757;background:#1b1419}
+.mort-dropzone-icon{font-size:26px;margin-bottom:4px;display:block}
+.mort-dropzone-txt{font-size:12px;color:#aaa}
+.mort-dropzone-sub{font-size:10px;color:#666;margin-top:2px}
+.mort-preview-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(70px, 1fr));gap:6px;margin-top:10px;max-height:140px;overflow-y:auto}
+.mort-preview-item{position:relative;border-radius:4px;overflow:hidden;border:1px solid #333;height:65px}
+.mort-preview-item img{width:100%;height:100%;object-fit:cover}
+.mort-preview-item .rm-btn{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.7);color:#ff4757;border:none;border-radius:50%;width:16px;height:16px;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
+.mort-submit-btn{width:100%;padding:9px;background:#ff4757;color:#fff;border:none;border-radius:6px;font-weight:700;font-size:12px;cursor:pointer;margin-top:12px;transition:background .15s}
+.mort-submit-btn:hover{background:#ff6b81}
+.mort-submit-btn:disabled{background:#333;color:#777;cursor:not-allowed}
+.mort-upload-status{margin-top:10px;font-size:11px;text-align:center;display:none}
+
 /* 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}
@@ -79,11 +119,15 @@ body{font-family:system-ui,monospace;background:#0f0f14;color:#e0e0e0;overflow:h
 <div class="cam-list" id="cam-list"></div>

 <!-- Mortality / Carcass Detection Panel -->
-<div class="mort-panel" id="mort-panel" style="display:none">
+<div class="mort-panel" id="mort-panel">
 <h3>
 <span>&#x2620;&#xfe0f; Mortality Scans</span>
+<span style="display:flex;gap:5px;align-items:center">
+<button class="mort-upload-btn" onclick="openMortUploadModal()">&#x1f4f7; Upload / Capture</button>
 <span class="mort-badge" id="mort-header-badge">0</span>
+</span>
 </h3>
+<div id="mort-coop-filters" style="display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 6px 0"></div>
 <div id="mort-summary-text" style="color:#777;font-size:10px;margin-bottom:4px"></div>
 <div class="mort-grid" id="mort-grid"></div>
 </div>
@@ -94,6 +138,71 @@ body{font-family:system-ui,monospace;background:#0f0f14;color:#e0e0e0;overflow:h
 </div>
 </div>

+<!-- Modal for Capturing Mortality Photos from Stationary Camera or Uploading -->
+<div id="mort-upload-modal" onclick="closeMortUploadModal(event)">
+  <div class="mort-upload-box" onclick="event.stopPropagation()">
+    <button class="close-btn" onclick="closeMortUploadModal(event)" style="top:10px;right:14px;font-size:24px">&times;</button>
+    <h2>&#x1f4f8; Mortality Inspection Camera</h2>
+    
+    <div class="mort-tab-row">
+      <button class="mort-tab-btn active" id="tab-btn-cam" onclick="switchMortModalTab('cam')">&#x1f4f7; Stationary Camera</button>
+      <button class="mort-tab-btn" id="tab-btn-file" onclick="switchMortModalTab('file')">&#x1f4c1; File Upload</button>
+    </div>
+
+    <div class="mort-upload-row">
+      <div class="mort-upload-field">
+        <label for="mort-upload-coop">Target Coop / Cage</label>
+        <select id="mort-upload-coop" onchange="onMortCoopChanged()">
+          <option value="K1">K1 (L1, L2, L3)</option>
+          <option value="K2">K2 (L1, L2, L3)</option>
+          <option value="K3">K3 (L1, L2, L3)</option>
+          <option value="K4">K4 (L1, L2)</option>
+          <option value="K5">K5 (L1, L2)</option>
+          <option value="kandang-atas">kandang-atas</option>
+        </select>
+      </div>
+      <div class="mort-upload-field">
+        <label for="mort-upload-date">Date</label>
+        <input type="date" id="mort-upload-date">
+      </div>
+    </div>
+
+    <!-- Tab 1: Stationary Camera Capture (Default) -->
+    <div id="mort-cam-tab-content">
+      <div class="mort-cam-preview-box" id="mort-cam-preview-box">
+        <img id="mort-cam-live-img" src="" alt="Stationary Camera View" onerror="this.style.display='none';document.getElementById('mort-cam-offline-msg').style.display='block'">
+        <div id="mort-cam-offline-msg" style="display:none;color:#777;font-size:11px;text-align:center;padding:12px">
+          &#x1f4f7; Stationary Camera Preview<br><span style="color:#555;font-size:9px">Click Capture to snap high-res photo</span>
+        </div>
+        <div class="mort-cam-preview-overlay" id="mort-cam-status-overlay">&#x1f534; Camera Ready</div>
+      </div>
+      
+      <button class="mort-capture-btn" id="mort-capture-btn" onclick="captureFromStationaryCamera()">
+        &#x1f4f8; Snap &amp; Count Batch from Camera
+      </button>
+      <div style="font-size:10px;color:#666;text-align:center;margin-top:6px">
+        Place batch of chickens on table &rarr; click Snap &rarr; clear table &rarr; repeat if needed
+      </div>
+    </div>
+
+    <!-- Tab 2: Manual File Upload -->
+    <div id="mort-file-tab-content" style="display:none">
+      <input type="file" id="mort-file-input" accept="image/*" multiple style="display:none" onchange="handleMortFilesSelected(event)">
+      <div class="mort-dropzone" id="mort-dropzone" onclick="document.getElementById('mort-file-input').click()">
+        <span class="mort-dropzone-icon">&#x1f4f8;</span>
+        <div class="mort-dropzone-txt">Browse or Drop Photos</div>
+        <div class="mort-dropzone-sub">Select multiple photos for this coop</div>
+      </div>
+      <div class="mort-preview-grid" id="mort-preview-grid"></div>
+      <button class="mort-submit-btn" id="mort-submit-btn" onclick="submitMortalityUpload()" disabled>
+        Count Mortalities (0 photos selected)
+      </button>
+    </div>
+
+    <div class="mort-upload-status" id="mort-upload-status"></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>
@@ -245,33 +354,101 @@ function loadHistory() {
    }
 }

+var allMortalityData = [];
+var selectedMortCoop = "ALL";
+
 function loadMortality() {
-    fetch("/api/mortality/latest").then(r => r.ok ? r.json() : null).then(data => {
+    fetch("/api/mortality/history").then(r => r.ok ? r.json() : []).then(reports => {
        var panel = document.getElementById("mort-panel");
-        if (!data || data.error || !data.results || !data.results.length) {
-            panel.style.display = "none";
+        if (!reports || !reports.length) {
+            fetch("/api/mortality/latest").then(r => r.ok ? r.json() : null).then(latest => {
+                if (!latest || latest.error || !latest.results || !latest.results.length) {
+                    panel.style.display = "none";
+                    return;
+                }
+                allMortalityData = [latest];
+                renderMortalityUI();
+            }).catch(function() { 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("");
+        allMortalityData = reports;
+        renderMortalityUI();
    }).catch(function() {});
 }

+function renderMortalityUI() {
+    var panel = document.getElementById("mort-panel");
+    if (!allMortalityData || !allMortalityData.length) {
+        panel.style.display = "none";
+        return;
+    }
+    panel.style.display = "block";
+
+    var coopsSet = {};
+    allMortalityData.forEach(function(rep) {
+        var c = rep.coop || rep.location || "kandang-atas";
+        coopsSet[c] = (coopsSet[c] || 0) + (rep.total_mortality_count || 0);
+    });
+    var coopsList = Object.keys(coopsSet).sort();
+
+    var filterDiv = document.getElementById("mort-coop-filters");
+    if (coopsList.length > 1) {
+        var fHtml = '<button class="mort-filter-btn' + (selectedMortCoop === 'ALL' ? ' active' : '') + '" onclick="setMortCoopFilter(\'ALL\')">ALL</button>';
+        coopsList.forEach(function(c) {
+            fHtml += '<button class="mort-filter-btn' + (selectedMortCoop === c ? ' active' : '') + '" onclick="setMortCoopFilter(\'' + c + '\')">' + c + '</button>';
+        });
+        filterDiv.innerHTML = fHtml;
+        filterDiv.style.display = "flex";
+    } else {
+        filterDiv.style.display = "none";
+    }
+
+    var filteredReports = selectedMortCoop === "ALL" 
+        ? allMortalityData 
+        : allMortalityData.filter(function(r) { return (r.coop || r.location || "").toUpperCase() === selectedMortCoop.toUpperCase(); });
+
+    var totalCarcasses = 0;
+    var allItems = [];
+    filteredReports.forEach(function(rep) {
+        totalCarcasses += (rep.total_mortality_count || 0);
+        var cName = rep.coop || rep.location || "kandang-atas";
+        var cFloors = rep.covered_floors ? rep.covered_floors.join(", ") : "";
+        (rep.results || []).forEach(function(res) {
+            allItems.push({
+                item: res,
+                coop: cName,
+                floors: cFloors,
+                date: rep.date || ""
+            });
+        });
+    });
+
+    document.getElementById("mort-header-badge").textContent = totalCarcasses + " detected";
+    var summaryTxt = (selectedMortCoop === "ALL" ? "All Coops" : selectedMortCoop) + " \u2022 " + allItems.length + " scan(s)";
+    document.getElementById("mort-summary-text").textContent = summaryTxt;
+
+    var grid = document.getElementById("mort-grid");
+    grid.innerHTML = allItems.map(function(obj) {
+        var item = obj.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);
+        var captionText = '[' + obj.coop + (obj.floors ? ' (Floors: ' + obj.floors + ')' : '') + '] ' + title + ' (' + count + ' carcasses)';
+        return '<div class="mort-card" onclick="openMortModal(\'' + imgSrc + '\', \'' + captionText.replace(/'/g, "\\'") + '\')">' +
+            '<img src="' + imgSrc + '" alt="' + title + '" loading="lazy" onerror="this.style.opacity=0.3">' +
+            '<div class="info">' +
+            '<span style="max-width:85px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + title + '">' +
+            '<span class="mort-coop-tag">' + obj.coop + '</span>' + title + '</span>' +
+            '<span class="cnt">' + count + ' 💀</span>' +
+            '</div></div>';
+    }).join("");
+}
+
+function setMortCoopFilter(coop) {
+    selectedMortCoop = coop;
+    renderMortalityUI();
+}
+
 function openMortModal(src, caption) {
    var modal = document.getElementById("mort-modal");
    document.getElementById("mort-modal-img").src = src;
@@ -283,8 +460,227 @@ function closeMortModal(event) {
    document.getElementById("mort-modal").classList.remove("active");
 }

+/* Mortality Inspection Camera & Upload Logic */
+var selectedUploadFiles = [];
+var mortModalTab = "cam";
+
+function switchMortModalTab(tab) {
+    mortModalTab = tab;
+    var btnCam = document.getElementById("tab-btn-cam");
+    var btnFile = document.getElementById("tab-btn-file");
+    var contentCam = document.getElementById("mort-cam-tab-content");
+    var contentFile = document.getElementById("mort-file-tab-content");
+
+    if (tab === "cam") {
+        if (btnCam) btnCam.classList.add("active");
+        if (btnFile) btnFile.classList.remove("active");
+        if (contentCam) contentCam.style.display = "block";
+        if (contentFile) contentFile.style.display = "none";
+        refreshMortCamPreview();
+    } else {
+        if (btnFile) btnFile.classList.add("active");
+        if (btnCam) btnCam.classList.remove("active");
+        if (contentFile) contentFile.style.display = "block";
+        if (contentCam) contentCam.style.display = "none";
+    }
+}
+
+function onMortCoopChanged() {
+    if (mortModalTab === "cam") {
+        refreshMortCamPreview();
+    }
+}
+
+function refreshMortCamPreview() {
+    var coop = document.getElementById("mort-upload-coop").value || "K1";
+    var img = document.getElementById("mort-cam-live-img");
+    var offlineMsg = document.getElementById("mort-cam-offline-msg");
+    var overlay = document.getElementById("mort-cam-status-overlay");
+    if (!img) return;
+
+    overlay.textContent = "Connecting to " + coop + " camera...";
+    overlay.style.color = "#ff9f43";
+
+    img.onload = function() {
+        img.style.display = "block";
+        offlineMsg.style.display = "none";
+        overlay.textContent = "🟢 " + coop + " Camera Live";
+        overlay.style.color = "#2ed573";
+    };
+    img.onerror = function() {
+        img.style.display = "none";
+        offlineMsg.style.display = "block";
+        overlay.textContent = "⚪ Stationary Camera Ready";
+        overlay.style.color = "#aaa";
+    };
+    img.src = "/api/mortality/camera/preview?coop=" + encodeURIComponent(coop) + "&_t=" + Date.now();
+}
+
+function captureFromStationaryCamera() {
+    var coop = document.getElementById("mort-upload-coop").value || "K1";
+    var date = document.getElementById("mort-upload-date").value || new Date().toISOString().split("T")[0];
+    var btn = document.getElementById("mort-capture-btn");
+    var statusDiv = document.getElementById("mort-upload-status");
+
+    btn.disabled = true;
+    btn.innerHTML = "⏳ Snapping &amp; Counting with YOLO...";
+    statusDiv.style.display = "block";
+    statusDiv.style.color = "#ff9f43";
+    statusDiv.textContent = "Capturing frame from " + coop + " stationary camera and counting carcasses...";
+
+    fetch("/api/mortality/capture", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ coop: coop, date: date })
+    }).then(function(r) { return r.json(); })
+    .then(function(data) {
+        if (data.status === "success") {
+            statusDiv.style.color = "#2ed573";
+            statusDiv.innerHTML = "✅ <b>Batch #" + data.total_images + ": " + data.batch_count + " carcass(es)</b> detected!<br>" +
+                "<span style='color:#ff9f43'>Total for " + coop + " Today: <b>" + data.total_mortality_count + " carcasses</b> across " + data.total_images + " batch(es)</span>";
+            btn.disabled = false;
+            btn.innerHTML = "📸 Snap &amp; Count Next Batch";
+
+            loadMortality();
+            setTimeout(refreshMortCamPreview, 600);
+        } else {
+            statusDiv.style.color = "#ff4757";
+            statusDiv.textContent = "❌ Capture error: " + (data.message || "Failed to capture frame");
+            btn.disabled = false;
+            btn.innerHTML = "📸 Retry Capture";
+        }
+    }).catch(function(err) {
+        statusDiv.style.color = "#ff4757";
+        statusDiv.textContent = "❌ Network error: " + err.message;
+        btn.disabled = false;
+        btn.innerHTML = "📸 Retry Capture";
+    });
+}
+
+function openMortUploadModal() {
+    var modal = document.getElementById("mort-upload-modal");
+    var today = new Date().toISOString().split("T")[0];
+    document.getElementById("mort-upload-date").value = today;
+
+    var coopSelect = document.getElementById("mort-upload-coop");
+    if (allMortalityData && allMortalityData.length) {
+        var coopsSet = {};
+        allMortalityData.forEach(function(r) {
+            var c = r.coop || r.location;
+            if (c) coopsSet[c] = true;
+        });
+        ["K1", "K2", "K3", "K4", "K5", "kandang-atas"].forEach(function(c) { coopsSet[c] = true; });
+        var list = Object.keys(coopsSet).sort();
+        if (list.length > 0) {
+            coopSelect.innerHTML = list.map(function(c) {
+                return '<option value="' + c + '">' + c + '</option>';
+            }).join("");
+        }
+    }
+
+    selectedUploadFiles = [];
+    renderUploadPreviews();
+    document.getElementById("mort-upload-status").style.display = "none";
+    modal.classList.add("active");
+    switchMortModalTab("cam");
+}
+
+function closeMortUploadModal(event) {
+    var modal = document.getElementById("mort-upload-modal");
+    modal.classList.remove("active");
+}
+
+function handleMortFilesSelected(event) {
+    var files = event.target.files;
+    if (!files || !files.length) return;
+    for (var i = 0; i < files.length; i++) {
+        selectedUploadFiles.push(files[i]);
+    }
+    renderUploadPreviews();
+}
+
+function removeUploadFile(idx) {
+    selectedUploadFiles.splice(idx, 1);
+    renderUploadPreviews();
+}
+
+function renderUploadPreviews() {
+    var grid = document.getElementById("mort-preview-grid");
+    var btn = document.getElementById("mort-submit-btn");
+
+    if (!selectedUploadFiles.length) {
+        grid.innerHTML = "";
+        btn.disabled = true;
+        btn.textContent = "Count Mortalities (0 photos selected)";
+        return;
+    }
+
+    btn.disabled = false;
+    btn.textContent = "Scan & Count Chickens (" + selectedUploadFiles.length + " photo" + (selectedUploadFiles.length > 1 ? "s" : "") + ")";
+
+    grid.innerHTML = selectedUploadFiles.map(function(file, idx) {
+        var url = URL.createObjectURL(file);
+        return '<div class="mort-preview-item">' +
+            '<img src="' + url + '" alt="preview">' +
+            '<button class="rm-btn" onclick="removeUploadFile(' + idx + ')">&times;</button>' +
+            '</div>';
+    }).join("");
+}
+
+function submitMortalityUpload() {
+    if (!selectedUploadFiles.length) return;
+    var coop = document.getElementById("mort-upload-coop").value || "K1";
+    var date = document.getElementById("mort-upload-date").value || new Date().toISOString().split("T")[0];
+    var btn = document.getElementById("mort-submit-btn");
+    var statusDiv = document.getElementById("mort-upload-status");
+
+    btn.disabled = true;
+    btn.textContent = "⏳ Running YOLO Detection...";
+    statusDiv.style.display = "block";
+    statusDiv.style.color = "#ff9f43";
+    statusDiv.textContent = "Uploading " + selectedUploadFiles.length + " photo(s) and counting carcasses...";
+
+    var formData = new FormData();
+    formData.append("coop", coop);
+    formData.append("date", date);
+    for (var i = 0; i < selectedUploadFiles.length; i++) {
+        formData.append("images", selectedUploadFiles[i]);
+    }
+
+    fetch("/api/mortality/upload", {
+        method: "POST",
+        body: formData
+    }).then(function(r) { return r.json(); })
+    .then(function(data) {
+        if (data.status === "success") {
+            statusDiv.style.color = "#2ed573";
+            statusDiv.innerHTML = "✅ <b>" + data.total_mortality_count + " carcasses</b> detected across " + data.total_images + " photo(s) for <b>" + coop + "</b> (" + date + ")!";
+            btn.textContent = "✅ Scan Completed";
+
+            loadMortality();
+
+            setTimeout(function() {
+                closeMortUploadModal();
+            }, 2500);
+        } else {
+            statusDiv.style.color = "#ff4757";
+            statusDiv.textContent = "❌ Error: " + (data.message || "Failed to process photos");
+            btn.disabled = false;
+            btn.textContent = "Retry Scan";
+        }
+    }).catch(function(err) {
+        statusDiv.style.color = "#ff4757";
+        statusDiv.textContent = "❌ Network error: " + err.message;
+        btn.disabled = false;
+        btn.textContent = "Retry Scan";
+    });
+}
+
 document.addEventListener("keydown", function(e) {
-    if (e.key === "Escape") closeMortModal();
+    if (e.key === "Escape") {
+        closeMortModal();
+        closeMortUploadModal();
+    }
 });

 setTimeout(function() { if (activeCam) refreshNow(); }, 500);