Major overhaul of backend and frontend

app.py

@@ -1,3 +1,5 @@
+
+
 import os
 import uuid
 import traceback
@@ -7,7 +9,6 @@ import zipfile
 import cv2
 import csv
 import pickle
-import json
 import shutil
 from ultralytics import YOLO
 from ultralytics.utils import ThreadingLocked
@@ -15,7 +16,7 @@ import numpy as np
 import pandas as pd
 from torch import cuda
 from flask import Flask, Response, render_template, request, jsonify, send_from_directory, send_file, session, redirect, url_for
-from multiprocessing.pool import ThreadPool
+from multiprocessing.pool import Pool
 from pathlib import Path
 from PIL import Image
 from datetime import datetime
@@ -28,13 +29,19 @@ app.secret_key = os.environ.get('FLASK_SECRET_KEY', str(uuid.uuid4()))  # For se
 APP_ROOT = Path(__file__).parent
 UPLOAD_FOLDER = APP_ROOT / 'uploads'
 RESULTS_FOLDER = APP_ROOT / 'results'
+ANNOT_FOLDER = APP_ROOT / 'annotated'
 WEIGHTS_FILE = APP_ROOT / 'weights.pt'
 app.config['UPLOAD_FOLDER'] = str(UPLOAD_FOLDER)
 app.config['RESULTS_FOLDER'] = str(RESULTS_FOLDER)
+app.config['WEIGHTS_FILE'] = str(WEIGHTS_FILE)
+app.config['ANNOT_FOLDER'] = str(ANNOT_FOLDER)
 app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'tif', 'tiff'}
 
 UPLOAD_FOLDER.mkdir(parents=True, exist_ok=True)
 RESULTS_FOLDER.mkdir(parents=True, exist_ok=True)
+ANNOT_FOLDER.mkdir(parents=True, exist_ok=True)
+
+async_results = {} # this has to be global I think
 
 @app.errorhandler(Exception)
 def handle_exception(e):
@@ -49,7 +56,6 @@ def allowed_file(filename):
 def index():
     return render_template('index.html')
 
-
 # Load model once at startup, use CUDA if available
 MODEL_DEVICE = 'cuda' if cuda.is_available() else 'cpu'
 _model = None
@@ -81,238 +87,273 @@ def upload_files():
     upload_dir.mkdir(parents=True, exist_ok=True)
     # generate new unique filenames via uuid, save the mapping dict of old:new to session
     filename_map = {}
+    uuid_map_to_uuid_imgname = {}
     for f in files:
         orig_name = secure_filename(f.filename)
         ext = Path(orig_name).suffix
-        unique_name = f"{uuid.uuid4().hex}{ext}"
-        file_path = upload_dir / unique_name
+        uuid_base = uuid.uuid4().hex
+        uuid_name = f"{uuid_base}{ext}"
+        file_path = upload_dir / uuid_name
         f.save(str(file_path))
-        filename_map[orig_name] = unique_name
+        filename_map[uuid_base] = orig_name
+        uuid_map_to_uuid_imgname[uuid_base] = uuid_name
     session['filename_map'] = filename_map
+    session['uuid_map_to_uuid_imgname'] = uuid_map_to_uuid_imgname
     return jsonify({'filename_map': filename_map, 'status': 'uploaded'})
 
-# helper function to simplify args for pool.imap
-@ThreadingLocked()
-def process_single_image(args):
-    orig_name, img_path, pickle_path, model = args
-    img_results = detect_in_image(model, str(img_path))
+# /preview route for serving original uploaded image
+@app.route('/preview', methods=['POST'])
+def preview_image():
+    try:
+        data = request.get_json()
+        uuid = data.get('uuid')
+        session_id = session['id']
+        uuid_map_to_uuid_imgname = session.get('uuid_map_to_uuid_imgname', {})
+        img_name = uuid_map_to_uuid_imgname.get(uuid)
+        if not img_name:
+            print(f"/preview: No img_name found for uuid {uuid}")
+            return jsonify({'error': 'File not found'}), 404
+        img_path = Path(app.config['UPLOAD_FOLDER']) / session_id / img_name
+        if not img_path.exists():
+            print(f"/preview: File does not exist at {img_path}")
+            return jsonify({'error': 'File not found'}), 404
+        # Determine MIME type
+        ext = img_path.suffix.lower()
+        if ext in ['.jpg', '.jpeg']:
+            mimetype = 'image/jpeg'
+        elif ext in ['.png']:
+            mimetype = 'image/png'
+        elif ext in ['.tif', '.tiff']:
+            mimetype = 'image/tiff'
+        else:
+            mimetype = 'application/octet-stream'
+        return send_file(
+            str(img_path),
+            mimetype=mimetype,
+            as_attachment=False,
+            download_name=img_name
+        )
+    except Exception as e:
+        print(f"Error in /preview: {e}")
+        return jsonify({'error': str(e)}), 500
+
+# initializer for Pool to load model in each process
+# each worker will have its own model instance
+def init_worker(model_path):
+    global model
+    model = YOLO(model_path)
+    if MODEL_DEVICE == 'cuda':
+        model.to('cuda')
+
+# not sure if we need this decorator anymore?
+#@ThreadingLocked()
+def process_single_image(img_path, results_dir):
+    global model
+    uuid_base = img_path.stem
+    pickle_path = results_dir / f"{uuid_base}.pkl"
+    results = detect_in_image(model, str(img_path))
     with open(pickle_path, 'wb') as pf:
-        pickle.dump(img_results, pf)
-    return (orig_name, img_results)
+        pickle.dump(results, pf)
+    return uuid_base
 
 @app.route('/process', methods=['POST'])
-def process_images():
-    model = get_model()
+def start_processing():
     session_id = session['id']
+    job_state = {
+        "status": "starting",
+        "progress": 0,
+        "sessionId": session_id
+    }
+    session['job_state'] = job_state
     filename_map = session.get('filename_map', {})
     upload_dir = Path(app.config['UPLOAD_FOLDER']) / session_id
-    state = {}
-    state['status'] = 'starting'
-    state['progress'] = 0
-    state['filename_map'] = filename_map
-    state['jobId'] = session['id']
-    session['job_state'] = state
-
-    # create a results_dir, clean out old one if needed
     results_dir = Path(app.config['RESULTS_FOLDER']) / session_id
+    # clean out old results if needed
     if results_dir.exists():
         shutil.rmtree(results_dir)
     results_dir.mkdir(parents=True)
 
-    # set up args list for imap
-    n_img = len(filename_map)
-    arg_list = [(orig_name,
-                 upload_dir / filename_map[orig_name],
-                 results_dir / f"{Path(orig_name).stem}_results.pkl",
-                 model) for orig_name in filename_map.keys()]
+    # set up iterable of uploaded files to process
+    arg_list = [(x,results_dir) for x in list(upload_dir.iterdir())]
+
     try:
-        all_detections = {}
-        state['status'] = 'processing'
-        session['job_state'] = state
         if MODEL_DEVICE == 'cuda':
-            pool = None
-            for idx, args in enumerate(arg_list):
-                orig_name, img_results = process_single_image(args)
-                all_detections[orig_name] = img_results
-                state['progress'] = int((idx + 1) / n_img * 100)
-                session['job_state'] = state
+            n_proc = 1
         else:
-            with ThreadPool() as pool:
-                for idx, result in enumerate(pool.imap(process_single_image, arg_list)):
-                    state['progress'] = int((idx + 1) / n_img * 100)
-                    orig_name, img_results = result
-                    all_detections[orig_name] = img_results
-                    session['job_state'] = state
-        # Save all detections to a pickled file
-        detections_path = results_dir / 'all_detections.pkl'
-        with open(detections_path, 'wb') as f:
-            pickle.dump(all_detections, f)
-        state['status'] = 'completed'
-        state['progress'] = 100
-        session['job_state'] = state
-    except Exception as e:
-        print(f"Error in /process: {e}")
-        print(traceback.format_exc())
-        state['status'] = 'error'
-        state['error'] = str(e)
-        state['progress'] = 100
-        session['job_state'] = state
-    resp = {
-        'status': state.get('status', 'unknown'),
-        'progress': state.get('progress', 0),
-        'jobId': state.get('jobId'),
-        'error': state.get('error'),
-    }
-    return jsonify(resp)
-
-# Support /progress/<jobId> for frontend polling
-@app.route('/progress/<jobId>')
-def get_progress_with_id(jobId):
-    try:
-        job_state = session.get('job_state')
-        if not job_state:
-            print(f"/progress/{jobId}: No job_state found in session.")
-            return jsonify({"status": "error", "error": "No job state"}), 404
-        resp = {
-            'status': job_state.get('status', 'unknown'),
-            'progress': job_state.get('progress', 0),
-            'jobId': session.get('id'),
-            'error': job_state.get('error'),
+            n_proc = os.cpu_count()
+            # Initialize job state
+        job_state = {
+            "status": "starting",
+            "progress": 0,
+            "started": True
         }
-        # If completed, load and return all_detections.pkl as JSON
-        if job_state.get('status') == 'completed':
-            session_id = session['id']
-            detections_path = Path(app.config['RESULTS_FOLDER']) / session_id / 'all_detections.pkl'
-            if detections_path.exists():
-                with open(detections_path, 'rb') as f:
-                    all_detections = pickle.load(f)
-                resp['results'] = all_detections
-        return jsonify(resp)
+        session['job_state'] = job_state
+        pool = Pool(processes=n_proc,
+                  initializer=init_worker,
+                  initargs=(str(WEIGHTS_FILE),))
+        async_results[session_id] = pool.starmap_async(process_single_image, arg_list)
+        pool.close()
+
+        # Update job state after process launch
+        job_state["status"] = "processing"
+        session['job_state'] = job_state
+        return jsonify({'status': 'processing',
+                        'sessionId': session_id
+                        })
     except Exception as e:
-        print(f"Error in /progress/{jobId}: {e}")
+        print(f"Error in /process: {e}")
         print(traceback.format_exc())
-        return jsonify({"status": "error", "error": str(e)}), 500
+        return jsonify({'error': str(e),
+                        'status': 'unknown',
+                        'sessionId': session_id}), 500
+    
+@app.route('/progress')
+def get_progress():
+        session_id = session['id']
+        try:
+            job_state = session.get('job_state')
+            if not job_state:
+                print("/progress: No job_state found in session.")
+                return jsonify({"status": "error", "error": "No job state"}), 404
+
+            results_dir = Path(app.config['RESULTS_FOLDER']) / session_id
+            uploads_dir = Path(app.config['UPLOAD_FOLDER']) / session_id
+            n_results = len(list(results_dir.glob('*.pkl')))
+            n_uploads = len(list(uploads_dir.iterdir()))
+
+            # If async_result is ready, verify completion and update job state
+            async_result = async_results.get(session_id)
+            if async_result and async_result.ready():
+                if n_results == n_uploads:
+                    job_state['status'] = 'completed'
+                    job_state['progress'] = 100
+                    session['job_state'] = job_state
+                    resp = {
+                        'status': 'completed',
+                        'progress': 100,
+                        'filename_map': session.get('filename_map', {}),
+                        'session_id': job_state.get('sessionId'),
+                        'error': job_state.get('error'),
+                    }
+                    # Aggregate results into a single response object
+                    all_results = {}
+                    for pkl_file in results_dir.glob('*.pkl'):
+                        uuid_base = pkl_file.stem
+                        with open(pkl_file, 'rb') as pf:
+                            all_results[uuid_base] = pickle.load(pf)
+                    resp['results'] = all_results
+                    return jsonify(resp)
+                
+            # If still processing, update progress
+            if job_state.get('status') == 'processing':
+                progress = int((n_results / n_uploads) * 100) if n_uploads > 0 else 0
+                job_state['progress'] = progress
+                session['job_state'] = job_state
+                resp = {
+                    'status': 'processing',
+                    'progress': progress,
+                    'sessionId': session_id,
+                }
+                return jsonify(resp)
+            # Default response as a catchall
+            resp = {
+                'status': job_state.get('status', 'unknown'),
+                'progress': job_state.get('progress', 0),
+                'sessionId': job_state.get('session_id'),
+                'error': job_state.get('error'),
+            }
+            return jsonify(resp)
+        except Exception as e:
+            print(f"Error in /progress: {e}")
+            print(traceback.format_exc())
+            return jsonify({"status": "error", "error": str(e)}), 500
+
+def read_img_and_draw(img_path, detections, confidence):
+    img = cv2.imread(str(img_path), cv2.IMREAD_UNCHANGED)
+    filtered = [d for d in detections if d.get('score', 0) >= confidence]
+    for det in filtered:
+        x1, y1, x2, y2 = map(int, det['bbox'])
+        cv2.rectangle(img, (x1, y1), (x2, y2), (0,0,255), 3)
+    return img
 
 # /annotate route for dynamic annotation
 @app.route('/annotate', methods=['POST'])
 def annotate_image():
     try:
         data = request.get_json()
-        filename = data.get('filename')
+        uuid = data.get('uuid')
         confidence = float(data.get('confidence', 0.5))
         session_id = session['id']
-        filename_map = session.get('filename_map', {})
-        unique_name = filename_map.get(filename)
-        if not unique_name:
+        uuid_map_to_uuid_imgname = session.get('uuid_map_to_uuid_imgname', {})
+        img_name = uuid_map_to_uuid_imgname.get(uuid)
+        orig_img_name = session['filename_map'].get(uuid)
+
+        if not img_name:
             return jsonify({'error': 'File not found'}), 404
+
         # Load detections from pickle
-        result_path = Path(app.config['RESULTS_FOLDER']) / session_id / f"{Path(filename).stem}_results.pkl"
+        result_path = Path(app.config['RESULTS_FOLDER']) / session_id / f"{uuid}.pkl"
         if not result_path.exists():
             return jsonify({'error': 'Results not found'}), 404
         with open(result_path, 'rb') as pf:
             detections = pickle.load(pf)
-        # Load image
-        img_path = Path(app.config['UPLOAD_FOLDER']) / session_id / unique_name
-        img = cv2.imread(str(img_path), cv2.IMREAD_UNCHANGED)
-        # Filter detections
-        filtered = [d for d in detections if d.get('score', 0) >= confidence]
-        # Draw boxes
-        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 temp
-        annotated_path = Path(app.config['RESULTS_FOLDER']) / 'annotated'
-        annotated_path.mkdir(parents=True, exist_ok=True)
-        out_name = f"{Path(filename).stem}_annotated.png"
-        out_file = annotated_path / out_name
-        cv2.imwrite(str(out_file), img)
-        # Serve image
-        with open(out_file, 'rb') as f:
-            return send_file(
-                io.BytesIO(f.read()),
-                mimetype='image/png',
-                as_attachment=False,
-                download_name=out_name
-            )
+
+        img_path = Path(app.config['UPLOAD_FOLDER']) / session_id / img_name
+        img = read_img_and_draw(img_path, detections, confidence)
+        # Save annotated image out
+        annot_dir = Path(app.config['ANNOT_FOLDER']) / session_id
+        annot_dir.mkdir(parents=True, exist_ok=True)
+        annot_imgname = f"{uuid}_annotated.png"
+        annot_imgpath = str(annot_dir / annot_imgname)
+        cv2.imwrite(annot_imgpath, img)
+
+        # Serve image directly from disk
+        return send_file(
+            annot_imgpath,
+            mimetype='image/png',
+            as_attachment=False,
+            download_name=annot_imgname
+        )
     except Exception as e:
         print(f"Error in /annotate: {e}")
         return jsonify({'error': str(e)}), 500
 
-@app.route('/results/<path:filename>')
-def download_file(filename):
-    try:
-        session_id = session['id']
-        if '..' in filename or filename.startswith('/'):
-            return jsonify({"error": "Invalid filename"}), 400
-        safe_filename = secure_filename(filename)
-        file_dir = Path(app.config['RESULTS_FOLDER']) / session_id
-        file_path = (file_dir / safe_filename).resolve()
-        if not str(file_path).startswith(str(file_dir.resolve())):
-            print(f"Attempted path traversal: {session_id}/{filename}")
-            return jsonify({"error": "Invalid file path"}), 400
-        if not file_path.is_file():
-            if not file_dir.exists():
-                return jsonify({"error": f"Session directory {session_id} not found"}), 404
-            files_in_dir = list(file_dir.iterdir())
-            return jsonify({"error": f"File '{filename}' not found in session '{session_id}'. Available: {[f.name for f in files_in_dir]}"}), 404
-
-        if filename.lower().endswith(('.tif', '.tiff')):
-            try:
-                with Image.open(file_path) as img:
-                    img = img.convert('RGBA') if img.mode in ('RGBA', 'LA') or (img.mode == 'P' and 'transparency' in img.info) else img.convert('RGB')
-                    img_byte_arr = io.BytesIO()
-                    img.save(img_byte_arr, format='PNG')
-                    img_byte_arr.seek(0)
-                    return send_file(
-                        img_byte_arr,
-                        mimetype='image/png',
-                        as_attachment=False,
-                        download_name=f"{Path(filename).stem}.png"
-                    )
-            except Exception as e:
-                print(f"Error converting TIF to PNG: {e}")
-                return jsonify({"error": "Could not convert TIF image"}), 500
-
-        mime_type = None
-        if safe_filename.lower().endswith(('.png', '.jpg', '.jpeg')):
-            try:
-                with Image.open(file_path) as img:
-                    mime_type = 'image/jpeg' if img.format == 'JPEG' else 'image/png'
-            except Exception as img_err:
-                print(f"Could not determine MIME type for {safe_filename}: {img_err}")
-
-        if safe_filename.lower() == "results.csv":
-            mime_type = 'text/csv'
-            return send_file(
-                str(file_path),
-                mimetype=mime_type,
-                as_attachment=True,
-                download_name=safe_filename
-            )
-
-        return send_file(str(file_path), mimetype=mime_type)
-    except Exception as e:
-        error_message = f"File serving error: {str(e)}"
-        print(error_message)
-        return jsonify({"error": "Server error", "log": error_message}), 500
-
-@app.route('/export_images')
+@app.route('/export_images', methods=['POST'])
 def export_images():
     try:
+        data = request.get_json()
+        confidence = float(data.get('confidence', 0.5))
         session_id = session['id']
-        job_dir = Path(app.config['RESULTS_FOLDER']) / session_id
-        if not job_dir.exists():
-            return jsonify({"error": f"Session directory {session_id} not found"}), 404
-
-        annotated_files = list(job_dir.glob('*_annotated.*'))
-        if not annotated_files:
-            return jsonify({"error": "No annotated images found"}), 404
+        filename_map = session.get('filename_map', {})
+        uuid_map_to_uuid_imgname = session.get('uuid_map_to_uuid_imgname', {})
+        # ensure there's a landing spot
+        annot_dir = Path(app.config['ANNOT_FOLDER']) / session_id
+        annot_dir.mkdir(parents=True, exist_ok=True)
 
+        # add all annotated files to zip
         memory_file = io.BytesIO()
         with zipfile.ZipFile(memory_file, 'w', zipfile.ZIP_DEFLATED) as zf:
-            for file_path in annotated_files:
-                zf.write(file_path, file_path.name)
-        
+            # iterate through all uuids
+            for uuid in filename_map.keys():
+                img_name = uuid_map_to_uuid_imgname.get(uuid)
+                if not img_name:
+                    continue
+                img_path = Path(app.config['UPLOAD_FOLDER']) / session_id / img_name
+                result_path = Path(app.config['RESULTS_FOLDER']) / session_id / f"{uuid}.pkl"
+                if not result_path.exists():
+                    return jsonify({'error': 'Results not found'}), 404
+                if not img_path.exists():
+                    return jsonify({'error': 'Image not found'}), 404
+                with open(result_path, 'rb') as pf:
+                    detections = pickle.load(pf)
+                img = read_img_and_draw(img_path, detections, confidence)
+                # clean the name
+                orig_name = filename_map.get(uuid)
+                annot_imgname = f"{str(Path(orig_name).stem)}_annotated.png"
+                annot_imgpath = str(annot_dir / annot_imgname)
+                cv2.imwrite(annot_imgpath, img)
+                zf.write(annot_imgpath, annot_imgname)
+        # timestamp for filename
         memory_file.seek(0)
         timestamp = datetime.now().strftime('%Y%m%d-%H%M%S')
         
@@ -359,42 +400,6 @@ def export_csv():
         print(error_message)
         return jsonify({"error": "Server error", "log": error_message}), 500
 
-@app.route('/export_images', methods=['POST'])
-def export_images_post():
-    try:
-        data = request.json
-        session_id = session['id']
-        threshold = float(data.get('confidence', 0.5))
-        job_state = session.get('job_state')
-        if not job_state:
-            return jsonify({'error': 'Job not found'}), 404
-        memory_file = io.BytesIO()
-        with zipfile.ZipFile(memory_file, 'w', zipfile.ZIP_DEFLATED) as zf:
-            for orig_name, detections in job_state['detections'].items():
-                unique_name = job_state['filename_map'][orig_name]
-                img_path = Path(app.config['UPLOAD_FOLDER']) / session_id / unique_name
-                img = cv2.imread(str(img_path), cv2.IMREAD_UNCHANGED)
-                filtered = [d for d in detections if d['score'] >= threshold]
-                for det in filtered:
-                    x1, y1, x2, y2 = map(int, det['bbox'])
-                    cv2.rectangle(img, (x1, y1), (x2, y2), (0,0,255), 3)
-                out_name = f"{Path(orig_name).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"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 -----")

static/script.js

@@ -32,6 +32,7 @@ document.addEventListener('DOMContentLoaded', () => {
     let currentImageIndex = -1;
     let currentJobId = null;
     let currentZoomLevel = 1;
+    let filenameMap = {};
     const MAX_ZOOM = 3;
     const MIN_ZOOM = 0.5;
     let progressInterval = null; // Interval timer for polling
@@ -271,12 +272,25 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (response.ok) {
                     const data = await response.json();
                     logStatus('Files uploaded successfully.');
-                    // Update results table with filenames
+                    filenameMap = data.filename_map || {};
+                    
+                    // Update results table with filenames and View buttons
                     resultsTableBody.innerHTML = '';
-                    Object.keys(data.filename_map).forEach((filename, idx) => {
+                    Object.entries(filenameMap).forEach(([uuid, originalFilename], idx) => {
                         const row = resultsTableBody.insertRow();
                         row.dataset.originalIndex = idx;
-                        row.innerHTML = `<td>${filename}</td><td>Pending</td>`;
+                        row.innerHTML = `
+                            <td>${originalFilename}</td>
+                            <td style="color:#bbb;">NA</td>
+                            <td><button class="view-button" data-index="${idx}">View</button></td>
+                        `;
+                    });
+                    // Add click event for View buttons
+                    resultsTableBody.querySelectorAll('.view-button').forEach(btn => {
+                        btn.addEventListener('click', (e) => {
+                            const idx = parseInt(btn.dataset.index, 10);
+                            displayImage(idx);
+                        });
                     });
                 } else {
                     logStatus('File upload failed.');
@@ -306,22 +320,22 @@ document.addEventListener('DOMContentLoaded', () => {
         } else {
             uploadText.textContent = `${validFileCount} image${validFileCount === 1 ? '' : 's'} selected`;
             startProcessingBtn.disabled = validFileCount === 0;
-            // Populate results table with filenames after upload
+            // Populate results table with uuid/filename pairs from filenameMap after upload
             resultsTableBody.innerHTML = '';
-            filteredValidFiles.forEach((file, idx) => {
+            Object.entries(filenameMap).forEach(([uuid, originalFilename], idx) => {
                 const row = resultsTableBody.insertRow();
                 row.dataset.originalIndex = idx;
                 row.innerHTML = `
-                    <td>${file.name}</td>
-                    <td>Pending</td>
-                    <td><button class="view-button" data-index="${idx}">View</button></td>
+                    <td>${originalFilename}</td>
+                    <td style="color:#bbb;">NA</td>
+                    <td><button class="view-button" data-uuid="${uuid}" data-index="${idx}">View</button></td>
                 `;
             });
             // Add click event for View buttons
             resultsTableBody.querySelectorAll('.view-button').forEach(btn => {
                 btn.addEventListener('click', (e) => {
-                    const idx = parseInt(btn.dataset.index, 10);
-                    displayImage(idx);
+                    const uuid = btn.getAttribute('data-uuid');
+                    displayImage(uuid);
                 });
             });
         }
@@ -351,8 +365,7 @@ document.addEventListener('DOMContentLoaded', () => {
         setLoading(true);
         logStatus('Starting upload and processing...');
         updateProgress(0, 'Uploading files...');
-        resultsTableBody.innerHTML = '';
-        clearPreview();
+        // Do not clear resultsTableBody or preview image so users can browse existing results during processing
         currentResults = [];
         if (progressInterval) {
             clearInterval(progressInterval);
@@ -389,12 +402,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 throw new Error(data.error);
             }
             // --- ASYNC JOB: Start polling for progress ---
-            if (data.jobId) {
-                logStatus(`Processing started. Job ID: ${data.jobId}`);
-                currentJobId = data.jobId;
+            if (data.sessionId) {
+                // logStatus(`Processing started. Job ID: ${data.sessionId}`);
+                currentJobId = data.sessionId;
                 pollProgress(currentJobId);
             } else {
-                logStatus('Error: No jobId returned from server.');
+                logStatus('Error: No sessionId returned from server.');
                 setLoading(false);
             }
         } catch (error) {
@@ -411,12 +424,15 @@ document.addEventListener('DOMContentLoaded', () => {
     // --- Filtering and Table Update ---
     function updateResultsTable() {
         const threshold = parseFloat(confidenceSlider.value);
-        // Use allDetections (array of {filename, detections}) for filtering
-        const prevFilename = (currentImageIndex >= 0 && currentResults[currentImageIndex]) ? currentResults[currentImageIndex].filename : null;
+        // Use allDetections (array of {uuid, detections}) for filtering
+        const prevUuid = (currentImageIndex >= 0 && currentResults[currentImageIndex]) ? currentResults[currentImageIndex].uuid : null;
         currentResults = allDetections.map(imgResult => {
             const filtered = imgResult.detections.filter(det => det.score >= threshold);
+            // Use filenameMap to convert uuid to original filename for display
+            const originalFilename = filenameMap[imgResult.uuid] || imgResult.uuid;
             return {
-                filename: imgResult.filename,
+                uuid: imgResult.uuid,
+                filename: originalFilename,
                 num_eggs: filtered.length,
                 detections: filtered
             };
@@ -429,8 +445,8 @@ document.addEventListener('DOMContentLoaded', () => {
         displayResultsPage(currentPage);
         // Try to restore previous image if it still exists
         let newIndex = 0;
-        if (prevFilename) {
-            newIndex = currentResults.findIndex(r => r.filename === prevFilename);
+        if (prevUuid) {
+            newIndex = currentResults.findIndex(r => r.uuid === prevUuid);
             if (newIndex === -1) newIndex = 0;
         }
         currentImageIndex = newIndex;
@@ -470,30 +486,44 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // --- Replace displayImage to use backend-annotated PNG ---
     async function displayImage(index) {
-        // Use either currentResults or filteredValidFiles for filename
-        let filename;
-        if (currentResults && currentResults[index] && currentResults[index].filename) {
-            filename = currentResults[index].filename;
-        } else if (filteredValidFiles && filteredValidFiles[index]) {
-            filename = filteredValidFiles[index].name;
+        // Always use uuid, not filename, for backend requests
+        let uuid = index;
+        // If index is a number, get uuid from filenameMap
+        if (typeof index === 'number') {
+            uuid = Object.keys(filenameMap)[index];
+            currentImageIndex = index;
         } else {
-            return;
+            // If index is a uuid string, find its index for navigation
+            currentImageIndex = Object.keys(filenameMap).indexOf(index);
         }
-        currentImageIndex = index;
+        let isCompleted = allDetections && allDetections.length > 0;
         const confidence = parseFloat(confidenceSlider.value);
         try {
-            const response = await fetch('/annotate', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ filename, confidence })
-            });
+            let response;
+            if (isCompleted) {
+                response = await fetch('/annotate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ uuid: uuid, confidence })
+                });
+            } else {
+                response = await fetch('/preview', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ uuid: uuid })
+                });
+            }
             if (response.ok) {
                 const blob = await response.blob();
+                console.log((isCompleted ? 'Annotate' : 'Preview') + ' image blob type:', blob.type, 'uuid:', uuid);
+                if (previewImage.src && previewImage.src.startsWith('blob:')) {
+                    URL.revokeObjectURL(previewImage.src);
+                }
+                const objectUrl = URL.createObjectURL(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;
@@ -507,9 +537,10 @@ document.addEventListener('DOMContentLoaded', () => {
                     }
                     resetPanZoom();
                 };
-                previewImage.src = URL.createObjectURL(blob);
-                previewImage.alt = filename;
+                previewImage.src = objectUrl;
+                previewImage.alt = uuid;
             } else {
+                console.error((isCompleted ? 'Annotate' : 'Preview') + ' image fetch failed:', response.status);
                 clearPreview();
             }
         } catch (e) {
@@ -520,14 +551,14 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     // --- New Polling Function ---
-    function pollProgress(jobId) {
+    function pollProgress(sessionId) {
         if (progressInterval) {
             clearInterval(progressInterval); // Clear any existing timer
         }
 
         progressInterval = setInterval(async () => {
             try {
-                const response = await fetch(`/progress/${jobId}`);
+                const response = await fetch(`/progress`);
                 if (!response.ok) {
                     let errorText = `Progress check failed: ${response.status}`;
                     try {
@@ -547,10 +578,9 @@ document.addEventListener('DOMContentLoaded', () => {
                         break;
                     case 'processing':
                         updateProgress(data.progress || 0, `Processing (${data.progress || 0}%)`);
-                        logStatus(`Processing images... (${data.progress || 0}%)`);
                         // If results are present, update detections and table
                         if (data.results) {
-                            allDetections = Object.entries(data.results).map(([filename, detections]) => ({ filename, detections }));
+                            allDetections = Object.entries(data.results).map(([uuid, detections]) => ({ uuid, detections }));
                             updateResultsTable();
                         }
                         break;
@@ -560,7 +590,7 @@ document.addEventListener('DOMContentLoaded', () => {
                         updateProgress(100, 'Processing complete');
                         logStatus('Processing finished successfully.');
                         if (data.results) {
-                            allDetections = Object.entries(data.results).map(([filename, detections]) => ({ filename, detections }));
+                            allDetections = Object.entries(data.results).map(([uuid, detections]) => ({ uuid, detections }));
                             updateResultsTable();
                         }
                         renderConfidencePlot();
@@ -684,9 +714,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
         // If job is not completed, show filenames only
         if (jobStatus !== 'completed') {
-            Object.keys(filenameMap).forEach((filename, idx) => {
+            Object.entries(filenameMap).forEach(([uuid, originalFilename], idx) => {
                 const row = resultsTableBody.insertRow();
-                row.innerHTML = `<td>${filename}</td><td>Pending</td>`;
+                row.innerHTML = `<td>${originalFilename}</td><td style="color:#bbb;">NA</td>`;
             });
             exportCsvBtn.disabled = true;
             exportImagesBtn.disabled = true;
@@ -696,13 +726,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
         // If job is completed, show filtered detection counts
         if (resultsObj) {
-            Object.keys(resultsObj).forEach((filename, idx) => {
-                const detections = resultsObj[filename] || [];
+            Object.entries(resultsObj).forEach(([uuid, detections], idx) => {
                 // Filter by confidence threshold
                 const threshold = parseFloat(confidenceSlider.value);
                 const filtered = detections.filter(d => d.score >= threshold);
+                const originalFilename = filenameMap[uuid] || uuid;
                 const row = resultsTableBody.insertRow();
-                row.innerHTML = `<td>${filename}</td><td>${filtered.length}</td>`;
+                row.innerHTML = `<td>${originalFilename}</td><td>${filtered.length}</td>`;
             });
             exportCsvBtn.disabled = false;
             exportImagesBtn.disabled = false;
@@ -723,23 +753,24 @@ document.addEventListener('DOMContentLoaded', () => {
         // Display results for current page
         for (let i = startIndex; i < endIndex; i++) {
             const result = currentResults[i];
+            const originalFilename = filenameMap[result.uuid] || result.uuid;
             const row = resultsTableBody.insertRow();
-                row.innerHTML = `
-                    <td>
-                        <i class="ri-image-line"></i>
-                        ${result.filename}
-                    </td>
-                    <td>${result.num_eggs}</td>
-                    <td class="text-right">
-                        <button class="view-button" data-index="${i}" title="Click to view image">
-                            <i class="ri-eye-line"></i>
-                            View
-                        </button>
-                    </td>
-                `;
-                // Store the original index to maintain image preview relationship
-                row.dataset.originalIndex = i;
-            }
+            row.innerHTML = `
+                <td>
+                    <i class="ri-image-line"></i>
+                    ${originalFilename}
+                </td>
+                <td>${result.num_eggs}</td>
+                <td class="text-right">
+                    <button class="view-button" data-index="${i}" title="Click to view image">
+                        <i class="ri-eye-line"></i>
+                        View
+                    </button>
+                </td>
+            `;
+            // Store the original index to maintain image preview relationship
+            row.dataset.originalIndex = i;
+        }
         // Wire up View buttons after rows are created
         resultsTableBody.querySelectorAll('.view-button').forEach(btn => {
             btn.addEventListener('click', (e) => {