Adding confidence threshold plotting, fixing image browser issues

app.py

@@ -1,7 +1,8 @@
-from flask import Flask, render_template, request, jsonify, send_from_directory, send_file
-import subprocess
-import os
+from flask import Flask, render_template, request, jsonify, send_from_directory, send_file, Response
+from multiprocessing import Pool, cpu_count
 from pathlib import Path
+import tempfile
+import os
 import uuid
 import pandas as pd
 from werkzeug.utils import secure_filename
@@ -14,6 +15,11 @@ import threading
 import time
 from datetime import datetime
 import zipfile
+import cv2
+import numpy as np
+import csv
+
+from yolo_utils import load_model, detect_image
 
 app = Flask(__name__)
 
@@ -43,118 +49,69 @@ def allowed_file(filename):
 def index():
     return render_template('index.html')
 
+# Global model for each process
+_model = None
+def get_model():
+    global _model
+    if _model is None:
+        _model = load_model(WEIGHTS_FILE)
+    return _model
+
+all_detections = {}
+
+def process_image(args):
+    filename, image_bytes = args
+    model = get_model()
+    detections = detect_image(model, image_bytes, conf=0.05)
+    # Do NOT update all_detections here (worker process)
+    # Save original image to uploads for later annotation
+    img_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+    with open(img_path, 'wb') as f:
+        f.write(image_bytes)
+    return {'filename': filename, 'detections': detections}
+
 @app.route('/process', methods=['POST'])
 def process_images():
-    global job_status
     try:
-        if 'files' not in request.files:
-            return jsonify({"error": "No file part"}), 400
-
         files = request.files.getlist('files')
-        input_mode = request.form.get('input_mode', 'single')
-        confidence = request.form.get('confidence_threshold', '0.6')
-
         if not files or files[0].filename == '':
-            return jsonify({"error": "No selected file"}), 400
-
-        job_id = str(uuid.uuid4())
-        job_output_dir = RESULT_FOLDER / job_id
-        job_output_dir.mkdir(parents=True, exist_ok=True)
-
-        saved_files = []
-        error_files = []
-
-        # For keyence mode, validate XY subdirectory structure but flatten files
-        if input_mode == 'keyence':
-            xy_subdirs = set()
-            # First pass: validate XY subdirectory structure
-            for file in files:
-                if file and file.filename:
-                    relative_path = file.filename
-                    if '/' in relative_path:
-                        first_dir = relative_path.split('/')[0]
-                        if re.match(r'^XY[0-9][0-9]$', first_dir):
-                            xy_subdirs.add(first_dir)
-            
-            # Validate that we found XY subdirectories
-            if not xy_subdirs:
-                return jsonify({
-                    "error": "Keyence mode requires folder structure with XY[0-9][0-9] subdirectories (e.g., XY01/, XY02/). No such subdirectories found in uploaded folder."
-                }), 400
-            
-            # Second pass: save files with flattened structure
-            for file in files:
-                if file and allowed_file(file.filename):
-                    # Extract just the filename, ignoring the folder structure
-                    filename = secure_filename(Path(file.filename).name)
-                    save_path = job_output_dir / filename
-                    file.save(str(save_path))
-                    saved_files.append(save_path)
-                elif file:
-                    error_files.append(file.filename)
-                
-        else:
-            # Original file handling for non-keyence modes
-            for file in files:
-                if file and allowed_file(file.filename):
-                    filename = secure_filename(file.filename)
-                    save_path = job_output_dir / filename
-                    file.save(str(save_path))
-                    saved_files.append(save_path)
-                elif file:
-                    error_files.append(file.filename)
-
-        if not saved_files:
-             return jsonify({"error": f"No valid files uploaded. Invalid files: {error_files}"}), 400
-
-        if input_mode in ['files', 'folder']:
-            input_target = str(job_output_dir)
-            img_mode_arg = 'dir'
-        elif input_mode == 'single':
-            input_target = str(saved_files[0])
-            img_mode_arg = 'file'
-        elif input_mode == 'keyence':
-            input_target = str(job_output_dir)
-            img_mode_arg = 'keyence'
-        else:
-            return jsonify({"error": f"Invalid input mode: {input_mode}"}), 400
-
-        output_csv = job_output_dir / "results.csv"
-        annotated_dir = job_output_dir
-
-        cmd = [
-            sys.executable,
-            str(APP_ROOT / 'nemaquant.py'),
-            '-m', img_mode_arg,
-            '-i', input_target,
-            '-w', str(WEIGHTS_FILE),
-            '-o', str(output_csv),
-            '-a', str(annotated_dir)
-        ]
-
-        print(f"[{job_id}] Prepared command: {' '.join(cmd)}")
-
-        job_status[job_id] = {
-            "status": "starting",
-            "progress": 0,
-            "log": "Job initiated",
-            "results": None,
-            "error": None
-        }
-
-        thread = threading.Thread(target=run_nemaquant_background, args=(job_id, cmd, job_output_dir, output_csv, input_mode))
-        thread.start()
-
-        return jsonify({
-            "status": "processing",
-            "job_id": job_id,
-            "initial_log": f"Job '{job_id}' started. Input mode: {input_mode}. Files saved in results/{job_id}/. Polling for progress..."
-        })
+            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})
     except Exception as e:
-        error_message = f"Error starting process: {str(e)}\\n{traceback.format_exc()}"
-        print(error_message)
-        return jsonify({"error": "Failed to start processing", "log": error_message}), 500
+        print(f"Error in /process: {e}")
+        print(traceback.format_exc())
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/annotate', methods=['POST'])
+def annotate_image():
+    data = request.json
+    filename = secure_filename(data['filename'])
+    threshold = float(data['confidence'])
+    img_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+    img = cv2.imread(img_path, cv2.IMREAD_UNCHANGED)
+    detections = all_detections.get(filename, [])
+    filtered = [d for d in detections if d['score'] >= threshold]
+    # 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)
+    return send_file(temp_path, mimetype='image/png')
 
 @app.route('/progress/<job_id>')
 def get_progress(job_id):
@@ -248,7 +205,7 @@ def export_images(job_id):
                 zf.write(file_path, file_path.name)
         
         memory_file.seek(0)
-        timestamp = datetime.now().strftime('%Y%m%d_%H%M%S')
+        timestamp = datetime.now().strftime('%Y%m%d-%H%M%S')
         
         return send_file(
             memory_file,
@@ -262,119 +219,66 @@ def export_images(job_id):
         print(error_message)
         return jsonify({"error": "Server error", "log": error_message}), 500
 
-def run_nemaquant_background(job_id, cmd, job_output_dir, output_csv, input_mode):
-    global job_status
+@app.route('/export_csv', methods=['POST'])
+def export_csv():
     try:
-        print(f"[{job_id}] Starting NemaQuant process...")
-        job_status[job_id] = {
-            "status": "running",
-            "progress": 5,
-            "log": "Starting NemaQuant...",
-            "results": None,
-            "error": None
-        }
-
-        process = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True, bufsize=1, universal_newlines=True)
-
-        stdout_log = []
-        stderr_log = []
-        total_lines_estimate = 50
-        lines_processed = 0
-        last_reported_progress = 5
-
-        if process.stdout:
-            for line in iter(process.stdout.readline, ''):
-                line_strip = line.strip()
-                lines_processed += 1
-                stdout_log.append(line_strip)
-                print(f"[{job_id}] STDOUT: {line_strip}")
-
-                if line_strip.startswith("PROGRESS:"):
-                    try:
-                        progress_val = int(line_strip.split(":")[1].strip())
-                        last_reported_progress = max(last_reported_progress, min(progress_val, 95))
-                        job_status[job_id]["progress"] = last_reported_progress
-                    except (IndexError, ValueError):
-                        progress_percent = min(90, 5 + int((lines_processed / total_lines_estimate) * 85))
-                        job_status[job_id]["progress"] = max(last_reported_progress, progress_percent)
-                        last_reported_progress = job_status[job_id]["progress"]
-                else:
-                    progress_percent = min(90, 5 + int((lines_processed / total_lines_estimate) * 85))
-                    job_status[job_id]["progress"] = max(last_reported_progress, progress_percent)
-                    last_reported_progress = job_status[job_id]["progress"]
-
-                job_status[job_id]["log"] = "\n".join(stdout_log[-5:])
-
-        if process.stderr:
-            for line in iter(process.stderr.readline, ''):
-                stderr_log.append(line.strip())
-                print(f"[{job_id}] STDERR: {line.strip()}")
-
-        process.stdout.close()
-        if process.stderr:
-            process.stderr.close()
-        return_code = process.wait()
-
-        stdout_str = "\n".join(stdout_log)
-        stderr_str = "\n".join(stderr_log)
-        full_log = f"NemaQuant Output:\n{stdout_str}\nNemaQuant Errors:\n{stderr_str}"
-        job_status[job_id]["log"] = full_log
-
-        if return_code != 0:
-            raise subprocess.CalledProcessError(return_code, cmd, output=stdout_str, stderr=stderr_str)
-
-        job_status[job_id]["progress"] = 95
-
-        if not output_csv.exists():
-            csv_files = list(job_output_dir.glob('*.csv'))
-            if csv_files:
-                output_csv = csv_files[0]
-            else:
-                raise FileNotFoundError(f"Output CSV not found at {output_csv} and no alternatives found.")
+        data = request.json
+        threshold = float(data.get('confidence', 0.5))
+        # all_detections: {filename: [detections]}
+        rows = []
+        for filename, detections in all_detections.items():
+            count = sum(1 for d in detections if d['score'] >= threshold)
+            rows.append({'Filename': filename, 'EggsDetected': count})
+        timestamp = datetime.now().strftime('%Y%m%d_%H%M%S')
+        output = io.StringIO()
+        writer = csv.DictWriter(output, fieldnames=['Filename', 'EggsDetected'])
+        writer.writeheader()
+        writer.writerows(rows)
+        output.seek(0)
+        return Response(
+            output.getvalue(),
+            mimetype='text/csv',
+            headers={
+                'Content-Disposition': f'attachment; filename=nemaquant_results_{timestamp}.csv'
+            }
+        )
+    except Exception as e:
+        error_message = f"Error exporting CSV: {str(e)}"
+        print(error_message)
+        return jsonify({"error": "Server error", "log": error_message}), 500
 
-        df = pd.read_csv(output_csv)
-        results_list = []
-        
-        egg_count = None
-        if input_mode == 'single':
-            egg_count_match = re.search(r'n eggs:\\s*(\\d+)', full_log)
-            if egg_count_match:
-                egg_count = int(egg_count_match.group(1))
-
-        for index, row in df.iterrows():
-            original_filename = row.get('filename', '')
-            num_eggs = egg_count if egg_count is not None else row.get('num_eggs', 'N/A')
-            stem = Path(original_filename).stem
-            suffix = Path(original_filename).suffix
-            annotated_filename = f"{stem}_annotated{suffix}"
-            annotated_path = job_output_dir / annotated_filename
-
-            results_list.append({
-                "filename": original_filename,
-                "num_eggs": num_eggs,
-                "annotated_filename": annotated_filename if annotated_path.exists() else None,
-            })
-
-        job_status[job_id] = {
-            "status": "success",
-            "progress": 100,
-            "log": full_log,
-            "results": results_list,
-            "error": None
-        }
-
-    except subprocess.CalledProcessError as e:
-        stdout_err = e.output if e.output else ""
-        stderr_err = e.stderr if e.stderr else ""
-        error_message = f"Error running NemaQuant:\nExit Code: {e.returncode}\nSTDOUT:\n{stdout_err}\nSTDERR:\n{stderr_err}"
-        current_log = job_status[job_id].get("log", "")
-        job_status[job_id] = {"status": "error", "progress": 100, "log": current_log, "results": None, "error": error_message}
-    except FileNotFoundError as e:
-        error_message = f"Error processing results: {e}"
-        job_status[job_id] = {"status": "error", "progress": 100, "log": job_status[job_id].get("log", ""), "results": None, "error": error_message}
+@app.route('/export_images', methods=['POST'])
+def export_images_post():
+    try:
+        data = request.json
+        threshold = float(data.get('confidence', 0.5))
+        # all_detections: {filename: [detections]}
+        memory_file = io.BytesIO()
+        with zipfile.ZipFile(memory_file, 'w', zipfile.ZIP_DEFLATED) as zf:
+            for filename, detections in all_detections.items():
+                filtered = [d for d in detections if d['score'] >= threshold]
+                img_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+                img = cv2.imread(img_path, cv2.IMREAD_UNCHANGED)
+                for det in filtered:
+                    x1, y1, x2, y2 = map(int, det['bbox'])
+                    cv2.rectangle(img, (x1, y1), (x2, y2), (0,0,255), 3)
+                # Save annotated image to memory
+                is_tiff = filename.lower().endswith(('.tif', '.tiff'))
+                out_name = f"{Path(filename).stem}.png"
+                _, img_bytes = cv2.imencode('.png', img)
+                zf.writestr(out_name, img_bytes.tobytes())
+        memory_file.seek(0)
+        timestamp = datetime.now().strftime('%Y%m%d_%H%M%S')
+        return send_file(
+            memory_file,
+            mimetype='application/zip',
+            as_attachment=True,
+            download_name=f'nemaquant_annotated_{timestamp}.zip'
+        )
     except Exception as e:
-        error_message = f"An unexpected error occurred: {str(e)}\\n{traceback.format_exc()}"
-        job_status[job_id] = {"status": "error", "progress": 100, "log": job_status[job_id].get("log", ""), "results": None, "error": error_message}
+        error_message = f"Error exporting images: {str(e)}"
+        print(error_message)
+        return jsonify({"error": "Server error", "log": error_message}), 500
 
 def print_startup_info():
     print("----- NemaQuant Flask App Starting -----")
@@ -422,4 +326,4 @@ def print_startup_info():
 
 if __name__ == '__main__':
     print_startup_info()
-    app.run(host='0.0.0.0', port=7860, debug=True) 
+    app.run(host='0.0.0.0', port=7860, debug=True)

nemaquant.py

@@ -1,7 +1,6 @@
 #!/usr/bin/env python
 # coding: utf-8
 
-import argparse
 import numpy as np
 import pandas as pd 
 import cv2
@@ -11,7 +10,9 @@ from pathlib import Path
 from ultralytics import YOLO
 from glob import glob
 import re
-import sys
+
+# YOLO model logic for backend inference
+from yolo_utils import load_model, detect_image
 
 def options():
     parser = argparse.ArgumentParser(description="Nematode egg image processing with YOLO11 model.")
@@ -127,9 +128,8 @@ def parse_key_file(keypath):
     key["keycol"] = key["keycol"].apply(lambda x: "_%s%s" % (re.findall("[A-H]",x)[0], re.findall("[0-9]+", x)[0].zfill(2)))
     return key
         
-def main():
-    args = check_args()
-    if args.key:
+def detect_eggs(args, key=None):
+    if key:
         key = parse_key_file(str(args.keypath))
     model = YOLO(args.weights)
     if cuda.is_available():
@@ -249,7 +249,4 @@ def main():
         outdf.to_csv(str(args.outpath), index=False)
         print('Saving output to %s...' % str(args.outpath))
         if args.annotated:
-            print('Saving annotated images to %s...' % str(args.annotpath))
-        
-if __name__ == '__main__':
-    main()
+            print('Saving annotated images to %s...' % str(args.annotpath))

static/script.js

@@ -50,6 +50,10 @@ document.addEventListener('DOMContentLoaded', () => {
     let currentSortField = null;
     let currentSortDirection = 'asc';
 
+    // --- Store all detections for frontend filtering ---
+    let allDetections = [];
+    let allImageData = {};
+
     // Input mode change
     inputMode.addEventListener('change', () => {
         const mode = inputMode.value;
@@ -326,8 +330,6 @@ document.addEventListener('DOMContentLoaded', () => {
                 method: 'POST',
                 body: formData,
             });
-
-            // Handle non-JSON initial response or network errors
             if (!response.ok) {
                 let errorText = `HTTP error! status: ${response.status}`;
                 try {
@@ -340,27 +342,29 @@ document.addEventListener('DOMContentLoaded', () => {
                  }
                 throw new Error(errorText);
             }
-
             const data = await response.json();
-            
-            // Check for errors returned immediately by /process
             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
             }
-
-            // If processing started successfully, begin polling
-            if (data.status === 'processing' && data.job_id) {
-                currentJobId = data.job_id;
-                logStatus(data.initial_log || `Processing started with Job ID: ${currentJobId}. Polling for progress...`);
-                updateProgress(1, 'Processing started...'); // Small initial progress
-                pollProgress(currentJobId);
-            } else {
-                // Should not happen if backend is correct, but handle defensively
-                throw new Error('Unexpected response from server after starting process.');
+            // 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);
             }
-
+            setTimeout(() => {
+                updateResultsTable();
+                setLoading(false);
+                updateProgress(100, 'Processing complete');
+                logStatus('Processing finished successfully.');
+                onProcessingComplete();
+            }, 500);
         } catch (error) {
             logStatus(`Error: ${error.message}`);
             updateProgress(0, 'Error occurred');
@@ -373,6 +377,101 @@ document.addEventListener('DOMContentLoaded', () => {
         // 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
+        const grouped = {};
+        allDetections.forEach(imgResult => {
+            const filtered = imgResult.detections.filter(det => det.score >= threshold);
+            grouped[imgResult.filename] = filtered;
+        });
+        // Build results for table
+        const prevFilename = (currentImageIndex >= 0 && currentResults[currentImageIndex]) ? currentResults[currentImageIndex].filename : null;
+        currentResults = Object.keys(grouped).map(filename => ({
+            filename,
+            num_eggs: grouped[filename].length,
+            detections: grouped[filename]
+        }));
+        resultsTableBody.innerHTML = '';
+        currentSortField = null;
+        currentSortDirection = 'asc';
+        totalPages = Math.ceil(currentResults.length / RESULTS_PER_PAGE);
+        currentPage = 1;
+        displayResultsPage(currentPage);
+        exportCsvBtn.disabled = true;
+        exportImagesBtn.disabled = true;
+        // Try to restore previous image if it still exists
+        let newIndex = 0;
+        if (prevFilename) {
+            newIndex = currentResults.findIndex(r => r.filename === prevFilename);
+            if (newIndex === -1) newIndex = 0;
+        }
+        currentImageIndex = newIndex;
+        if (currentResults.length > 0) displayImage(currentImageIndex);
+
+        // Enable/disable export buttons based on results
+        if (currentResults.length > 0) {
+            exportCsvBtn.disabled = false;
+            exportImagesBtn.disabled = false;
+        } else {
+            exportCsvBtn.disabled = true;
+            exportImagesBtn.disabled = true;
+        }
+    }
+
+    confidenceSlider.addEventListener('input', () => {
+        confidenceValue.textContent = confidenceSlider.value;
+        updateResultsTable();
+        renderConfidencePlot();
+        if (currentImageIndex >= 0) displayImage(currentImageIndex);
+    });
+
+    // --- Replace displayImage to use backend-annotated PNG ---
+    async function displayImage(index) {
+        if (!currentResults[index]) return;
+        currentImageIndex = index;
+        const result = currentResults[index];
+        const filename = result.filename;
+        const confidence = parseFloat(confidenceSlider.value);
+        try {
+            const response = await fetch('/annotate', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ filename, confidence })
+            });
+            if (response.ok) {
+                const blob = await response.blob();
+                previewImage.onload = function() {
+                    updateImageInfo();
+                    zoomInBtn.disabled = false;
+                    zoomOutBtn.disabled = false;
+                    // Calculate which page this image should be on
+                    const targetPage = Math.floor(index / RESULTS_PER_PAGE) + 1;
+                    if (currentPage !== targetPage) {
+                        currentPage = targetPage;
+                        displayResultsPage(currentPage);
+                    }
+                    document.querySelectorAll('.results-table tr').forEach(r => r.classList.remove('selected'));
+                    const rows = Array.from(resultsTableBody.querySelectorAll('tr'));
+                    const targetRow = rows.find(row => parseInt(row.dataset.originalIndex, 10) === index);
+                    if (targetRow) {
+                        targetRow.classList.add('selected');
+                    }
+                    resetPanZoom();
+                };
+                previewImage.src = URL.createObjectURL(blob);
+                previewImage.alt = filename;
+            } else {
+                clearPreview();
+            }
+        } catch (e) {
+            clearPreview();
+        }
+        prevBtn.disabled = index <= 0;
+        nextBtn.disabled = index >= currentResults.length - 1;
+    }
+
     // --- New Polling Function ---
     function pollProgress(jobId) {
         if (progressInterval) {
@@ -700,67 +799,6 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     // Image Preview
-    function displayImage(index) {
-        if (!currentResults[index]) return;
-        
-        currentImageIndex = index;
-        const result = currentResults[index];
-        
-        if (result.annotated_filename) {
-            const imageUrl = `/results/${currentJobId}/${result.annotated_filename}`;
-            
-            // Create a new image object to handle loading
-            const tempImage = new Image();
-            tempImage.onload = function() {
-                previewImage.src = imageUrl;
-                previewImage.alt = result.filename;
-                
-                // Update image info with the new function
-                updateImageInfo();
-                
-                // Enable zoom controls
-                zoomInBtn.disabled = false;
-                zoomOutBtn.disabled = false;
-
-                // Calculate which page this image should be on
-                const targetPage = Math.floor(index / RESULTS_PER_PAGE) + 1;
-                
-                // If we're not on the correct page, switch to it
-                if (currentPage !== targetPage) {
-                    currentPage = targetPage;
-                    displayResultsPage(currentPage);
-                }
-
-                // Remove selection from all rows
-                document.querySelectorAll('.results-table tr').forEach(r => r.classList.remove('selected'));
-                
-                // Find and highlight the corresponding row
-                const rows = Array.from(resultsTableBody.querySelectorAll('tr'));
-                const targetRow = rows.find(row => parseInt(row.dataset.originalIndex, 10) === index);
-                if (targetRow) {
-                    targetRow.classList.add('selected');
-                }
-                
-                // Reset panning when a new image is displayed
-                resetPanZoom();
-            };
-            
-            tempImage.onerror = function() {
-                console.error('Failed to load image:', imageUrl);
-                clearPreview();
-            };
-            
-            // Start loading the image
-            tempImage.src = imageUrl;
-        } else {
-            clearPreview();
-        }
-
-        // Update navigation
-        prevBtn.disabled = index <= 0;
-        nextBtn.disabled = index >= currentResults.length - 1;
-    }
-
     function clearPreview() {
         previewImage.src = '';
         previewImage.alt = 'No image selected';
@@ -947,16 +985,76 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-    // Export Handlers
-    exportCsvBtn.addEventListener('click', () => {
-        if (!currentJobId) return;
-        window.location.href = `/results/${currentJobId}/results.csv`;
+    // --- Export Handlers (updated for new workflow) ---
+    exportCsvBtn.addEventListener('click', async () => {
+        const threshold = parseFloat(confidenceSlider.value);
+        const timestamp = new Date().toISOString().replace(/[-:T.]/g, '').slice(0, 15);
+        const defaultName = `nemaquant_results_${timestamp}.csv`;
+        try {
+            const resp = await fetch('/export_csv', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ confidence: threshold })
+            });
+            if (!resp.ok) throw new Error('Failed to export CSV');
+            const blob = await resp.blob();
+            if ('showSaveFilePicker' in window) {
+                // File System Access API
+                const handle = await window.showSaveFilePicker({
+                    suggestedName: defaultName,
+                    types: [{ description: 'CSV', accept: { 'text/csv': ['.csv'] } }]
+                });
+                const writable = await handle.createWritable();
+                await writable.write(blob);
+                await writable.close();
+            } else {
+                // Fallback: download link
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = defaultName;
+                document.body.appendChild(a);
+                a.click();
+                setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 1000);
+            }
+        } catch (err) {
+            logStatus('Failed to export CSV: ' + err.message, true);
+        }
     });
 
-    exportImagesBtn.addEventListener('click', () => {
-        if (!currentJobId) return;
-        logStatus('Downloading annotated images...');
-        window.location.href = `/export_images/${currentJobId}`;
+    exportImagesBtn.addEventListener('click', async () => {
+        const threshold = parseFloat(confidenceSlider.value);
+        const timestamp = new Date().toISOString().replace(/[-:T.]/g, '').slice(0, 15);
+        const defaultName = `nemaquant_annotated_${timestamp}.zip`;
+        try {
+            logStatus('Preparing annotated images for download...');
+            const resp = await fetch('/export_images', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ confidence: threshold })
+            });
+            if (!resp.ok) throw new Error('Failed to export images');
+            const blob = await resp.blob();
+            if ('showSaveFilePicker' in window) {
+                const handle = await window.showSaveFilePicker({
+                    suggestedName: defaultName,
+                    types: [{ description: 'ZIP', accept: { 'application/zip': ['.zip'] } }]
+                });
+                const writable = await handle.createWritable();
+                await writable.write(blob);
+                await writable.close();
+            } else {
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = defaultName;
+                document.body.appendChild(a);
+                a.click();
+                setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 1000);
+            }
+        } catch (err) {
+            logStatus('Failed to export images: ' + err.message, true);
+        }
     });
 
     // Add keyboard controls for panning (arrow keys)
@@ -1019,6 +1117,110 @@ document.addEventListener('DOMContentLoaded', () => {
         imageInfo.innerHTML = infoText;
     }
 
+    // --- Plotly Dot Plot for Confidence Threshold ---
+    function renderConfidencePlot() {
+        const plotDiv = document.getElementById('confidence-plot');
+        if (!allDetections || allDetections.length === 0) {
+            Plotly.purge(plotDiv);
+            plotDiv.style.display = 'none';
+            return;
+        }
+        plotDiv.style.display = '';
+        // Aggregate all detections for all images
+        const bins = [];
+        for (let x = 0.05; x <= 0.951; x += 0.05) {
+            const conf = x;
+            let count = 0;
+            allDetections.forEach(imgResult => {
+                count += imgResult.detections.filter(det => det.score >= conf).length;
+            });
+            bins.push({conf, count});
+        }
+        const xVals = bins.map(b => b.conf);
+        const yVals = bins.map(b => b.count);
+        const currentConf = parseFloat(confidenceSlider.value);
+
+        // Split points and lines by cutoff
+        const leftX = [], leftY = [];
+        const rightX = [], rightY = [];
+        for (let i = 0; i < xVals.length; i++) {
+            if (xVals[i] <= currentConf) {
+                leftX.push(xVals[i]);
+                leftY.push(yVals[i]);
+            } else {
+                rightX.push(xVals[i]);
+                rightY.push(yVals[i]);
+            }
+        }
+
+        // For line segments, we need to split at the cutoff if necessary
+        let splitIndex = xVals.findIndex(x => x > currentConf);
+        if (splitIndex === -1) splitIndex = xVals.length;
+
+        // If the cutoff is between two points, interpolate a point at the cutoff for smooth color transition
+        let interpX = null, interpY = null;
+        if (splitIndex > 0 && splitIndex < xVals.length) {
+            const x0 = xVals[splitIndex - 1], x1 = xVals[splitIndex];
+            const y0 = yVals[splitIndex - 1], y1 = yVals[splitIndex];
+            const t = (currentConf - x0) / (x1 - x0);
+            interpX = currentConf;
+            interpY = y0 + t * (y1 - y0);
+        }
+
+        // Blue trace (left of or on cutoff)
+        const blueTrace = {
+            x: interpX !== null ? [...leftX, interpX] : leftX,
+            y: interpY !== null ? [...leftY, interpY] : leftY,
+            mode: 'markers+lines',
+            marker: {size: 8, color: '#2563eb'},
+            line: {shape: 'linear', color: '#2563eb'},
+            type: 'scatter',
+            hoverinfo: 'x+y',
+            showlegend: false
+        };
+
+        // Grey trace (right of cutoff)
+        const greyTrace = {
+            x: interpX !== null ? [interpX, ...rightX] : rightX,
+            y: interpY !== null ? [interpY, ...rightY] : rightY,
+            mode: 'markers+lines',
+            marker: {size: 8, color: '#bbb'},
+            line: {shape: 'linear', color: '#bbb'},
+            type: 'scatter',
+            hoverinfo: 'x+y',
+            showlegend: false
+        };
+
+        // Vertical line (drawn beneath dots/lines)
+        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'},
+            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
+            }
+            ]
+        };
+
+        Plotly.newPlot('confidence-plot', [greyTrace, blueTrace], layout, {
+            displayModeBar: false,
+            responsive: true,
+            staticPlot: true // disables zoom/pan/drag
+        });
+    }
+
+    // Call this after processing completes
+    function onProcessingComplete() {
+        renderConfidencePlot();
+    }
+
     // Custom dialog for selecting among multiple CSV files
     function showCsvSelectionDialog(csvFiles) {
         // Create overlay
@@ -1200,6 +1402,10 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     // Initialize
+    inputMode.selectedIndex = 0; // Reset inputMode to default (first option)
     updateUploadState();
     logStatus('Application ready');
+
+    // Hide plot on page load and after clearing files
+    document.getElementById('confidence-plot').style.display = 'none';
 });

static/style.css

@@ -659,4 +659,20 @@ body.processing progress::-moz-progress-bar {
 
 .results-table th.sort-asc .sort-icon {
     transform: translateY(-50%) rotate(180deg);
-} 
+}
+
+.range-with-value {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1em;
+}
+
+#confidence-value {
+    font-size: 1.1em;
+    min-width: 2.5em;
+    text-align: right;
+    margin-top: 0;
+    align-self: auto;
+}

templates/index.html

@@ -6,6 +6,7 @@
     <title>NemaQuant - Nematode Egg Detection</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
+    <script src="https://cdn.plot.ly/plotly-2.26.0.min.js"></script>
 </head>
 <body>
     <h1>
@@ -48,18 +49,6 @@
             <!-- Processing -->
             <div class="card compact">
                 <h2><i class="ri-settings-4-line"></i> Processing</h2>
-                <div class="form-group">
-                    <label for="confidence-threshold">
-                        Confidence Threshold
-                        <i class="ri-information-line" data-tooltip="Recommended range: 0.4 - 0.7. Higher values produce fewer false positives but more false negatives, while lower values produce fewer false negatives but more false positives."></i>
-                    </label>
-                    <div class="range-with-value">
-                        <input type="range" id="confidence-threshold" name="confidence-threshold" 
-                               min="0.05" max="0.95" step="0.05" value="0.6">
-                        <span id="confidence-value">0.6</span>
-                    </div>
-                </div>
-
                 <div class="progress-container">
                     <div class="progress-info">
                         <span id="progress-text">Ready to process</span>
@@ -70,18 +59,57 @@
                     </div>
                     <progress id="progress" value="0" max="100"></progress>
                 </div>
-
                 <button id="start-processing" class="btn-primary">
                     <i class="ri-play-line"></i>
                     Start Processing
                 </button>
             </div>
 
+            <!-- Confidence Threshold -->
+            <div class="card compact">
+                <h2><i class="ri-equalizer-line"></i> Confidence Threshold
+                    <i class="ri-information-line" 
+                        data-tooltip="Cutoff value used to filter egg detections. 
+                        Recommended range: 0.4 - 0.7. 
+                    Higher values reduce the number of false positives but produce more false negatives."
+                        style="margin-left: 0.5rem;"></i>
+                </h2>
+                <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%;">
+                        <datalist id="confidence-ticks">
+                            <option value="0.05" label="0.05"></option>
+                            <option value="0.10"></option>
+                            <option value="0.15"></option>
+                            <option value="0.20"></option>
+                            <option value="0.25"></option>
+                            <option value="0.30"></option>
+                            <option value="0.35"></option>
+                            <option value="0.40"></option>
+                            <option value="0.45"></option>
+                            <option value="0.50" label="0.50"></option>
+                            <option value="0.55"></option>
+                            <option value="0.60"></option>
+                            <option value="0.65"></option>
+                            <option value="0.70"></option>
+                            <option value="0.75"></option>
+                            <option value="0.80"></option>
+                            <option value="0.85"></option>
+                            <option value="0.90"></option>
+                            <option value="0.95" label="0.95"></option>
+                        </datalist>
+                        <span id="confidence-value" style="font-size:1.1em; min-width:2.5em; text-align:right;">0.6</span>
+                    </div>
+                </div>
+                <div id="confidence-plot" style="margin-top:1.5rem;"></div>
+            </div>
+
             <!-- Status Log -->
             <div class="card compact">
                 <h2>
                     <i class="ri-terminal-box-line"></i>
-                    Processing Log
+                    Status Log
                     <button id="clear-log" class="btn-secondary" style="margin-left: auto; padding: 0.25rem 0.5rem;">
                         <i class="ri-delete-bin-line"></i>
                     </button>
@@ -172,4 +200,4 @@
 
     <script src="{{ url_for('static', filename='script.js') }}"></script>
 </body>
-</html> 
+</html>

templates/plotly_cdn.html

@@ -0,0 +1,2 @@
+<!-- Plotly.js CDN -->
+<script src="https://cdn.plot.ly/plotly-2.26.0.min.js"></script>

yolo_utils.py

@@ -0,0 +1,25 @@
+from ultralytics import YOLO
+import cv2
+import numpy as np
+
+def load_model(weights_path):
+    return YOLO(weights_path)
+
+def detect_image(model, image_bytes, conf=0.05):
+    # image_bytes: bytes-like object (from Flask upload)
+    arr = np.frombuffer(image_bytes, np.uint8)
+    img = cv2.imdecode(arr, cv2.IMREAD_COLOR)
+    results = model.predict(img, imgsz=1440, max_det=1000, verbose=False, conf=conf)
+    result = results[0]
+    detections = []
+    for i, xyxy in enumerate(result.boxes.xyxy):
+        score = float(result.boxes.conf[i])
+        class_id = int(result.boxes.cls[i])
+        class_name = result.names[class_id]
+        if class_name == 'egg':
+            detections.append({
+                'bbox': [float(x) for x in xyxy.cpu().numpy()],
+                'score': score,
+                'class': class_name
+            })
+    return detections