Bug fixes on plotting and saving

app.py

@@ -18,6 +18,7 @@ import zipfile
 import cv2
 import numpy as np
 import csv
+from threading import Thread
 
 from yolo_utils import load_model, detect_image
 
@@ -70,6 +71,28 @@ def process_image(args):
         f.write(image_bytes)
     return {'filename': filename, 'detections': detections}
 
+def async_process_images(job_id, file_data):
+    try:
+        job_status[job_id] = {'status': 'running', 'progress': 0, 'results': []}
+        total = len(file_data)
+        results = []
+        with Pool(processes=min(cpu_count(), total)) as pool:
+            for idx, result in enumerate(pool.imap(process_image, file_data)):
+                results.append(result)
+                # Update progress (0-100)
+                job_status[job_id]['progress'] = int((idx + 1) / total * 100)
+        # Aggregate results
+        for result in results:
+            all_detections[result['filename']] = result['detections']
+        # Add num_eggs to each result for frontend compatibility
+        for result in results:
+            result['num_eggs'] = sum(1 for d in result['detections'] if d.get('class') == 'egg')
+        job_status[job_id]['status'] = 'success'
+        job_status[job_id]['results'] = results
+        job_status[job_id]['progress'] = 100
+    except Exception as e:
+        job_status[job_id] = {'status': 'error', 'error': str(e), 'progress': 100}
+
 @app.route('/process', methods=['POST'])
 def process_images():
     try:
@@ -77,19 +100,13 @@ def process_images():
         if not files or files[0].filename == '':
             return jsonify({'error': 'No files uploaded'}), 400
 
-        # Read all files into memory as (filename, bytes)
         file_data = [(secure_filename(f.filename), f.read()) for f in files]
-
-        # Use multiprocessing to process images in parallel
-        with Pool(processes=min(cpu_count(), len(file_data))) as pool:
-            results = pool.map(process_image, file_data)
-
-        # Aggregate results in the main process
-        for result in results:
-            all_detections[result['filename']] = result['detections']
-
-        # Return all detections for all images
-        return jsonify({'results': results})
+        job_id = str(uuid.uuid4())
+        job_status[job_id] = {'status': 'starting', 'progress': 0}
+        thread = Thread(target=async_process_images, args=(job_id, file_data))
+        thread.daemon = True
+        thread.start()
+        return jsonify({'jobId': job_id})
     except Exception as e:
         print(f"Error in /process: {e}")
         print(traceback.format_exc())
@@ -107,7 +124,6 @@ def annotate_image():
     # Draw boxes
     for det in filtered:
         x1, y1, x2, y2 = map(int, det['bbox'])
-        print(f"[annotate_image] Drawing box: ({x1}, {y1}), ({x2}, {y2})")
         cv2.rectangle(img, (x1, y1), (x2, y2), (0,0,255), 3)
     temp_path = os.path.join(tempfile.gettempdir(), 'annotated.png')
     cv2.imwrite(temp_path, img)
@@ -116,7 +132,13 @@ def annotate_image():
 @app.route('/progress/<job_id>')
 def get_progress(job_id):
     status = job_status.get(job_id)
-    return jsonify(status) if status else (jsonify({"status": "error", "error": "Job ID not found"}), 404)
+    if not status:
+        return jsonify({"status": "error", "error": "Job ID not found"}), 404
+    # Add a mapping from filename to detections for frontend plotting
+    if 'results' in status:
+        detections_by_filename = {r['filename']: r['detections'] for r in status['results']}
+        status['detections_by_filename'] = detections_by_filename
+    return jsonify(status)
 
 @app.route('/results/<job_id>/<path:filename>')
 def download_file(job_id, filename):

static/script.js

@@ -303,16 +303,12 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         const mode = inputMode.value;
-        // Removed single file warning, as backend now handles it
-        // if (mode === 'single' && files.length > 1) { ... }
-
-        // Start processing
         setLoading(true);
         logStatus('Starting upload and processing...');
         updateProgress(0, 'Uploading files...');
-        resultsTableBody.innerHTML = ''; // Clear previous results
-        clearPreview(); // Clear image preview
-        currentResults = []; // Reset results data
+        resultsTableBody.innerHTML = '';
+        clearPreview();
+        currentResults = [];
         if (progressInterval) {
             clearInterval(progressInterval);
             progressInterval = null;
@@ -337,34 +333,24 @@ document.addEventListener('DOMContentLoaded', () => {
                     errorText += `: ${errorData.error || 'Unknown server error'}`;
                     if (errorData.log) logStatus(`Server Log: ${errorData.log}`);
                 } catch (e) { 
-                    // Response wasn't JSON
                     errorText += ` - ${response.statusText}`;
-                 }
+                }
                 throw new Error(errorText);
             }
             const data = await response.json();
             if (data.error) {
-                 logStatus(`Error starting process: ${data.error}`);
-                 if(data.log) logStatus(`Details: ${data.log}`);
-                 throw new Error(data.error); // Throw to trigger catch block
-            }
-            // Store all detections for frontend filtering
-            allDetections = data.results;
-            allImageData = {};
-            for (const file of files) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    allImageData[file.name] = e.target.result;
-                };
-                reader.readAsDataURL(file);
+                logStatus(`Error starting process: ${data.error}`);
+                if(data.log) logStatus(`Details: ${data.log}`);
+                throw new Error(data.error);
             }
-            setTimeout(() => {
-                updateResultsTable();
+            // --- ASYNC JOB: Start polling for progress ---
+            if (data.jobId) {
+                currentJobId = data.jobId;
+                pollProgress(currentJobId);
+            } else {
+                logStatus('Error: No jobId returned from server.');
                 setLoading(false);
-                updateProgress(100, 'Processing complete');
-                logStatus('Processing finished successfully.');
-                onProcessingComplete();
-            }, 500);
+            }
         } catch (error) {
             logStatus(`Error: ${error.message}`);
             updateProgress(0, 'Error occurred');
@@ -374,13 +360,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 progressInterval = null;
             }
         }
-        // Removed finally block here, setLoading(false) is handled by pollProgress or catch block
     });
 
     // --- Filtering and Table Update ---
     function updateResultsTable() {
         const threshold = parseFloat(confidenceSlider.value);
-        // Group detections by image
+        // Use allDetections (now an array of {filename, detections})
         const grouped = {};
         allDetections.forEach(imgResult => {
             const filtered = imgResult.detections.filter(det => det.score >= threshold);
@@ -504,7 +489,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 const data = await response.json();
 
                 // Update UI based on status
-                updateProgress(data.progress || 0, data.status);
+                updateProgress(data.progress || 0, data.status.charAt(0).toUpperCase() + data.status.slice(1));
                 
                 // Update image counter based on progress percentage
                 if (data.status === 'Running' || data.status === 'Starting') {
@@ -517,7 +502,8 @@ document.addEventListener('DOMContentLoaded', () => {
                     progressInterval = null;
                     updateProgress(100, 'Processing complete');
                     logStatus("Processing finished successfully.");
-                    displayResults(data.results || []);
+                    displayResults(data.results || [], data.detections_by_filename || null);
+                    renderConfidencePlot();
                     setLoading(false);
                 } else if (data.status === 'error') {
                     clearInterval(progressInterval);
@@ -628,7 +614,18 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     // Results Display
-    function displayResults(results) {
+    function displayResults(results, detectionsByFilename) {
+        // If detectionsByFilename is provided, update allDetections for plot logic
+        if (detectionsByFilename) {
+            allDetections = Object.keys(detectionsByFilename).map(filename => ({
+                filename,
+                detections: detectionsByFilename[filename]
+            }));
+        } else {
+            // Fallback: use results array
+            allDetections = results.map(r => ({ filename: r.filename, detections: r.detections }));
+        }
+        // Now update the table
         currentResults = results;
         resultsTableBody.innerHTML = '';
         currentImageIndex = -1;
@@ -1191,29 +1188,35 @@ document.addEventListener('DOMContentLoaded', () => {
             showlegend: false
         };
 
-        // Vertical line (drawn beneath dots/lines)
+        // Vertical line as a trace (above grid, below data)
+        const vlineTrace = {
+            x: [currentConf, currentConf],
+            y: [0, Math.max(...yVals, 1)],
+            mode: 'lines',
+            line: {color: 'red', width: 2, dash: 'dot'},
+            hoverinfo: 'skip',
+            showlegend: false
+        };
+
+        // Remove the vertical line from layout.shapes
         const layout = {
             margin: {t: 20, r: 20, l: 40, b: 40},
-            xaxis: {title: 'Threshold', dtick: 0.1, range: [0, 1]},
-            yaxis: {title: 'Total Eggs Detected', rangemode: 'tozero'},
+            xaxis: {title: 'Threshold', dtick: 0.1, range: [0, 1], title_standoff: 18},
+            yaxis: {title: 'Total Eggs Detected', rangemode: 'tozero', title_standoff: 18},
             showlegend: false,
-            height: 320,
-            shapes: [
-            {
-                type: 'line',
-                x0: currentConf, x1: currentConf,
-                y0: 0, y1: Math.max(...yVals, 1),
-                line: {color: 'red', width: 2, dash: 'dot'},
-                layer: 'below' // Draw beneath traces
-            }
-            ]
+            height: 320
         };
 
-        Plotly.newPlot('confidence-plot', [greyTrace, blueTrace], layout, {
+        Plotly.newPlot('confidence-plot', [vlineTrace, greyTrace, blueTrace], layout, {
             displayModeBar: false,
             responsive: true,
             staticPlot: true // disables zoom/pan/drag
         });
+
+        // Update total eggs detected text
+        const totalEggs = allDetections.reduce((sum, imgResult) => sum + imgResult.detections.filter(det => det.score >= currentConf).length, 0);
+        const totalEggsElem = document.getElementById('total-eggs-count');
+        if (totalEggsElem) totalEggsElem.textContent = totalEggs;
     }
 
     // Call this after processing completes
@@ -1408,4 +1411,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Hide plot on page load and after clearing files
     document.getElementById('confidence-plot').style.display = 'none';
+
+    // Reset confidence slider to 0.6 and force UI update on page load
+    confidenceSlider.value = 0.6;
+    confidenceSlider.dispatchEvent(new Event('input', { bubbles: true }));
+    confidenceSlider.dispatchEvent(new Event('change', { bubbles: true }));
 });

templates/index.html

@@ -77,7 +77,7 @@
                 <div class="form-group">
                     <div class="range-with-value" style="width:100%; display:flex; flex-direction:row; align-items:center; gap:1em;">
                         <input type="range" id="confidence-threshold" name="confidence-threshold" 
-                            min="0.05" max="0.95" step="0.05" value="0.6" list="confidence-ticks" style="width:100%;">
+                            min="0.05" max="0.95" step="0.05" value="0.6" list="confidence-ticks" style="width:100%;" autocomplete="off">
                         <datalist id="confidence-ticks">
                             <option value="0.05" label="0.05"></option>
                             <option value="0.10"></option>
@@ -102,6 +102,9 @@
                         <span id="confidence-value" style="font-size:1.1em; min-width:2.5em; text-align:right;">0.6</span>
                     </div>
                 </div>
+                <div id="total-eggs-detected" style="margin-top:0.5em; font-size:1.1em; color:var(--text-muted);">
+                    Total Eggs Detected: <span id="total-eggs-count">0</span>
+                </div>
                 <div id="confidence-plot" style="margin-top:1.5rem;"></div>
             </div>