Prepare app for Hugging Face Spaces deployment

.hf/space

@@ -0,0 +1,4 @@
+title: NemaQuant Flask App
+sdk: docker
+app_port: 7860
+models: [] 

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template, request, jsonify, send_from_directory
+from flask import Flask, render_template, request, jsonify, send_from_directory, send_file
 import subprocess
 import os
 from pathlib import Path
@@ -7,6 +7,13 @@ import pandas as pd # Added for CSV parsing
 from werkzeug.utils import secure_filename # Added for security
 import traceback
 import sys
+import re
+from PIL import Image
+import io
+import threading # Add threading
+import time # Add time
+import zipfile # Add zipfile for image export
+from datetime import datetime # Add datetime for timestamps
 
 app = Flask(__name__)
 # Use absolute paths for robustness within Docker/HF Spaces
@@ -22,6 +29,9 @@ app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'tif', 'tiff'}
 UPLOAD_FOLDER.mkdir(parents=True, exist_ok=True)
 RESULT_FOLDER.mkdir(parents=True, exist_ok=True)
 
+# Dictionary to store job status
+job_status = {}
+
 # Global error handler to ensure JSON responses
 @app.errorhandler(Exception)
 def handle_exception(e):
@@ -41,6 +51,7 @@ def index():
 
 @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
@@ -54,9 +65,8 @@ def process_images():
 
         # Create a unique job directory within results
         job_id = str(uuid.uuid4())
-        job_input_dir = RESULT_FOLDER / job_id / 'input' # Save inputs within job dir
-        job_output_dir = RESULT_FOLDER / job_id / 'output' # Save outputs within job dir
-        job_input_dir.mkdir(parents=True, exist_ok=True)
+        # Save inputs directly into job output dir to simplify cleanup/access
+        job_output_dir = RESULT_FOLDER / job_id # Combine input/output
         job_output_dir.mkdir(parents=True, exist_ok=True)
 
         saved_files = []
@@ -65,7 +75,7 @@ def process_images():
         for file in files:
             if file and allowed_file(file.filename):
                 filename = secure_filename(file.filename)
-                save_path = job_input_dir / filename
+                save_path = job_output_dir / filename # Save directly into job dir
                 file.save(str(save_path))
                 saved_files.append(save_path)
             elif file:
@@ -74,186 +84,78 @@ def process_images():
         if not saved_files:
              return jsonify({"error": f"No valid files uploaded. Invalid files: {error_files}"}), 400
 
-        # --- Prepare and Run nemaquant.py ---
+        # --- Prepare and Run nemaquant.py ---\
         # Determine input target for nemaquant.py
-        if input_mode == 'single' and len(saved_files) == 1:
-            input_target = str(saved_files[0])
-            img_mode_arg = 'file' # nemaquant uses file/dir, not single/directory
-        elif input_mode == 'directory' and len(saved_files) >= 1:
-            input_target = str(job_input_dir) # Pass the directory containing the images
-            img_mode_arg = 'dir'
-        else:
-            # Mismatch between mode and number of files
-            return jsonify({"error": f"Input mode '{input_mode}' requires {'1 file' if input_mode == 'single' else '1 or more files'}, but received {len(saved_files)}."}), 400
-
-
-        output_csv = job_output_dir / f"{job_id}_results.csv"
-        annotated_dir = job_output_dir # Save annotated images directly in job output dir
+        if input_mode == 'files' or input_mode == 'folder': # Treat 'files' as 'dir' if multiple files
+            input_target = str(job_output_dir) # Process all files in the job dir
+            img_mode_arg = 'dir' # Always use dir mode now? Check nemaquant.py
+        elif input_mode == 'single':
+             if len(saved_files) == 1:
+                 input_target = str(saved_files[0])
+                 img_mode_arg = 'file' # Use file mode only if explicitly single and one file
+             else:
+                 # Handle case where 'single' is selected but multiple files uploaded
+                 # Option 1: Error out
+                 # return jsonify({"error": "Single file mode selected, but multiple files uploaded."}), 400
+                 # Option 2: Process only the first file
+                 input_target = str(saved_files[0])
+                 img_mode_arg = 'file'
+                 print(f"Warning: Single file mode selected, processing only the first file: {saved_files[0].name}")
+        else: # Should not happen if frontend validates
+             return jsonify({"error": f"Invalid input mode: {input_mode}"}), 400
+
+        # Define output paths within the job directory
+        output_csv = job_output_dir / f"results.csv" # Simplified CSV name
+        annotated_dir = job_output_dir # Annotations saved in the same place
 
         cmd = [
-            'python', str(APP_ROOT / 'nemaquant.py'),
+            sys.executable, # Use the same python interpreter
+            str(APP_ROOT / 'nemaquant.py'),
             '-i', input_target,
-            '-w', str(WEIGHTS_FILE), # Use absolute path
+            '-w', str(WEIGHTS_FILE),
             '-o', str(output_csv),
             '-a', str(annotated_dir),
             '--conf', confidence
         ]
 
-        # We don't need --key or XY mode for this web interface initially
+        print(f"[{job_id}] Prepared command: {' '.join(cmd)}")
 
-        try:
-            print(f"Running command: {' '.join(cmd)}") # Log the command
-            print(f"Input directory contents: {os.listdir(str(job_input_dir))}")
-            print(f"Weights file exists: {os.path.exists(str(WEIGHTS_FILE))}")
-            print(f"Weights file size: {os.path.getsize(str(WEIGHTS_FILE)) if os.path.exists(str(WEIGHTS_FILE)) else 'File not found'} bytes")
-            
-            # Additional debugging before running the command
-            print(f"Current working directory: {os.getcwd()}")
-            print(f"Output directory permissions: {oct(os.stat(str(job_output_dir)).st_mode)[-3:] if os.path.exists(str(job_output_dir)) else 'Directory not found'}")
-            print(f"Executable Python: {sys.executable}")
-            
-            # Run the script, capture output and errors
-            # Timeout might be needed for long processes on shared infrastructure like HF Spaces
-            result = subprocess.run(cmd, capture_output=True, text=True, check=False, timeout=300) # 5 min timeout, don't raise exception
-            
-            # Get script return code and output
-            print(f"NemaQuant script return code: {result.returncode}")
-            print(f"NemaQuant stdout: {result.stdout}")
-            print(f"NemaQuant stderr: {result.stderr}")
-            
-            status_log = f"NemaQuant Output:\n{result.stdout}\nNemaQuant Errors:\n{result.stderr}"
-            print(status_log) # Log script output
-            
-            # Check if the command failed
-            if result.returncode != 0:
-                raise subprocess.CalledProcessError(result.returncode, cmd, output=result.stdout, stderr=result.stderr)
-            
-            # Check output directory after command runs
-            print(f"Output directory exists: {os.path.exists(str(job_output_dir))}")
-            if os.path.exists(str(job_output_dir)):
-                print(f"Output directory contents: {os.listdir(str(job_output_dir))}")
-            
-            # Check output file
-            print(f"Output CSV exists: {os.path.exists(str(output_csv))}")
-            
-            # If CSV doesn't exist, try to check if there are any other CSVs created in the output directory
-            if not output_csv.exists() and os.path.exists(str(job_output_dir)):
-                csv_files = [f for f in os.listdir(str(job_output_dir)) if f.endswith('.csv')]
-                if csv_files:
-                    print(f"Found other CSV files in output directory: {csv_files}")
-                    # Try using the first found CSV instead
-                    output_csv = job_output_dir / csv_files[0]
-                    print(f"Using alternate CSV file: {output_csv}")
-                else:
-                    # No CSV files found - create a fallback CSV file manually
-                    # This is a workaround in case nemaquant.py's to_csv() fails due to permissions
-                    try:
-                        print("No CSV found - trying to create a fallback CSV file")
-                        # Look for annotated images to get filenames and create a basic CSV
-                        annotated_files = [f for f in os.listdir(str(job_output_dir)) if '_annotated' in f]
-                        if annotated_files:
-                            # Create a simple CSV with the filenames found
-                            fallback_csv = job_output_dir / f"{job_id}_fallback_results.csv"
-                            with open(fallback_csv, 'w') as f:
-                                f.write("filename,num_eggs,fallback\n")
-                                for img_file in annotated_files:
-                                    # Extract original filename by removing '_annotated'
-                                    orig_filename = img_file.replace('_annotated', '')
-                                    f.write(f"{orig_filename},0,true\n")
-                            output_csv = fallback_csv
-                            print(f"Created fallback CSV at {fallback_csv}")
-                    except Exception as csv_error:
-                        print(f"Error creating fallback CSV: {csv_error}")
-
-            # --- Parse Results ---
-            if not output_csv.exists():
-                 error_message = f"Output CSV not found at {output_csv}"
-                 print(error_message)
-                 # Check if nemaquant.py exists and try to debug file paths
-                 nemaquant_script = APP_ROOT / 'nemaquant.py'
-                 nemaquant_exists = nemaquant_script.exists()
-                 error_message += f"\nNemaQuant script exists: {nemaquant_exists}"
-                 if nemaquant_exists:
-                     # Try to inspect the nemaquant script to understand its file I/O
-                     try:
-                         with open(nemaquant_script, 'r') as f:
-                             script_content = f.read()
-                             # Look for common file output patterns
-                             if 'to_csv(' in script_content:
-                                 error_message += "\nNemaQuant script contains 'to_csv()' calls for file output"
-                             if 'open(' in script_content and 'w' in script_content:
-                                 error_message += "\nNemaQuant script contains file opening in write mode"
-                     except Exception as e:
-                         error_message += f"\nCould not read nemaquant.py: {str(e)}"
-
-                 # Check if any files were written at all
-                 if os.path.exists(str(job_output_dir)):
-                     files_in_output = os.listdir(str(job_output_dir))
-                     error_message += f"\nFiles in output directory: {files_in_output}"
-                 
-                 raise FileNotFoundError(error_message)
-
-            df = pd.read_csv(output_csv)
-            # Expect columns like 'filename', 'num_eggs' (based on nemaquant.py)
-            # Find corresponding annotated images
-            results_list = []
-            for index, row in df.iterrows():
-                original_filename = row.get('filename', '')
-                num_eggs = row.get('num_eggs', 'N/A')
-                # Construct expected annotated filename (based on nemaquant.py logic)
-                stem = Path(original_filename).stem
-                suffix = Path(original_filename).suffix
-                annotated_filename = f"{stem}_annotated{suffix}"
-                annotated_path = annotated_dir / annotated_filename
-                
-                print(f"Looking for annotated file: {annotated_path}, exists: {annotated_path.exists()}")
-
-                results_list.append({
-                    "filename": original_filename,
-                    "num_eggs": num_eggs,
-                    # Pass relative path within job dir for frontend URL construction
-                    "annotated_filename": annotated_filename if annotated_path.exists() else None,
-                })
-
-            return jsonify({
-                "status": "success",
-                "job_id": job_id,
-                "results": results_list,
-                "log": status_log,
-                "error_files": error_files # Report files that were not processed
-            })
+        # Initialize job status
+        job_status[job_id] = {"status": "starting", "progress": 0, "log": "Job initiated", "results": None, "error": None}
 
-        except subprocess.CalledProcessError as e:
-            error_message = f"Error running NemaQuant:\nExit Code: {e.returncode}\nSTDOUT:\n{e.stdout}\nSTDERR:\n{e.stderr}"
-            print(error_message)
-            return jsonify({"error": "Processing failed", "log": error_message}), 500
-        except subprocess.TimeoutExpired as e:
-            error_message = f"Error running NemaQuant: Process timed out after {e.timeout} seconds.\nSTDOUT:\n{e.stdout}\nSTDERR:\n{e.stderr}"
-            print(error_message)
-            return jsonify({"error": "Processing timed out", "log": error_message}), 500
-        except FileNotFoundError as e:
-            error_message = f"Error processing results: {e}"
-            print(error_message)
-            return jsonify({"error": "Could not find output file", "log": error_message}), 500
-        except Exception as e:
-            error_message = f"An unexpected error occurred: {str(e)}\n"
-            error_message += traceback.format_exc()
-            print(error_message)
-            return jsonify({"error": "An unexpected error occurred", "log": error_message}), 500
-    except Exception as e:
-        # High-level exception handler for the entire route
-        error_message = f"Global process error: {str(e)}\n{traceback.format_exc()}"
+        # Run in background thread
+        thread = threading.Thread(target=run_nemaquant_background, args=(job_id, cmd, job_output_dir, output_csv, input_mode))
+        thread.start()
+
+        # Return immediately with job ID
+        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..."
+        })
+
+    except Exception as e: # Catch setup errors before thread starts
+        error_message = f"Error starting process: {str(e)}\\n{traceback.format_exc()}"
         print(error_message)
-        return jsonify({"error": "Server error", "log": error_message}), 500
+        # Ensure a job_id isn't lingering if setup failed badly
+        # if 'job_id' in locals() and job_id in job_status: del job_status[job_id] # Might be too aggressive
+        return jsonify({"error": "Failed to start processing", "log": error_message}), 500
+
+
+# --- New Progress Endpoint ---
+@app.route('/progress/<job_id>')
+def get_progress(job_id):
+    global job_status
+    status = job_status.get(job_id)
+    if status:
+        return jsonify(status)
+    else:
+        return jsonify({"status": "error", "error": "Job ID not found"}), 404
 
 
 @app.route('/results/<job_id>/<path:filename>')
 def download_file(job_id, filename):
     try:
-        # Construct the full path to the file within the job's output directory
-        # Use secure_filename on the incoming filename part for safety? Maybe not needed if we trust our generated paths.
-        # Crucially, validate job_id and filename to prevent directory traversal.
-        # A simple check: ensure job_id is a valid UUID format and filename doesn't contain '..'
         try:
             uuid.UUID(job_id, version=4) # Validate UUID format
         except ValueError:
@@ -262,59 +164,337 @@ def download_file(job_id, filename):
         if '..' in filename or filename.startswith('/'):
             return jsonify({"error": "Invalid filename"}), 400
 
-        file_dir = RESULT_FOLDER / job_id / 'output'
-        # Use send_from_directory for security (handles path joining and prevents traversal above the specified directory)
-        print(f"Attempting to send file: {filename} from directory: {file_dir}")
+        # Construct the absolute path to the file within the specific job's output directory
+        safe_filename = secure_filename(filename)
+        try:
+            uuid.UUID(job_id, version=4)
+        except ValueError:
+            print(f"Invalid job ID format requested: {job_id}")
+            return jsonify({"error": "Invalid job ID"}), 400
+
+        file_dir = Path(app.config['RESULT_FOLDER']) / job_id
+
+        # Prevent path traversal
+        file_path = (file_dir / safe_filename).resolve()
+        if not str(file_path).startswith(str(file_dir.resolve())):
+             print(f"Attempted path traversal: {job_id}/{filename}")
+             return jsonify({"error": "Invalid file path"}), 400
+
+        print(f"Serving file: {file_path}")
+
+        if not file_path.is_file():
+            print(f"File not found: {file_path}")
+            if not file_dir.exists():
+                print(f"Job directory not found: {file_dir}")
+                return jsonify({"error": f"Job directory {job_id} not found"}), 404
+            files_in_dir = list(file_dir.iterdir())
+            print(f"Files in job directory {file_dir}: {files_in_dir}")
+            return jsonify({"error": f"File '{filename}' not found in job '{job_id}'. Available: {[f.name for f in files_in_dir]}"}), 404
+
+        # Handle TIF/TIFF files by converting to PNG
+        if filename.lower().endswith(('.tif', '.tiff')):
+            try:
+                # Open the TIF image
+                with Image.open(file_path) as img:
+                    # Convert to RGB if necessary
+                    if img.mode in ('RGBA', 'LA') or (img.mode == 'P' and 'transparency' in img.info):
+                        img = img.convert('RGBA')
+                    else:
+                        img = img.convert('RGB')
+                    
+                    # Create a BytesIO object to hold the PNG data
+                    img_byte_arr = io.BytesIO()
+                    # Save as PNG to the BytesIO object
+                    img.save(img_byte_arr, format='PNG')
+                    # Seek to the beginning of the BytesIO object
+                    img_byte_arr.seek(0)
+                    
+                    # Return the PNG image
+                    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
+
+        # For non-TIF files, serve as normal
+        mime_type = None
+        if safe_filename.lower().endswith(('.png', '.jpg', '.jpeg')):
+            try:
+                with Image.open(file_path) as img:
+                    format = img.format
+                    if format == 'JPEG': mime_type = 'image/jpeg'
+                    elif format == 'PNG': mime_type = 'image/png'
+                print(f"Detected MIME type: {mime_type} for {safe_filename}")
+            except Exception as img_err:
+                print(f"Could not determine MIME type for {safe_filename} using PIL: {img_err}")
+                pass
+
+        if safe_filename.lower() == "results.csv":
+            mime_type = 'text/csv'
+
         try:
-            return send_from_directory(str(file_dir), filename, as_attachment=False) # Display images inline
-        except FileNotFoundError:
-            print(f"File not found: {file_dir / filename}")
-            return jsonify({"error": "File not found"}), 404
+            return send_file(str(file_path), mimetype=mime_type)
+        except Exception as send_err:
+            print(f"Error sending file {file_path}: {send_err}")
+            return jsonify({"error": "Could not send file"}), 500
     except Exception as e:
-        # Catch-all exception handler
         error_message = f"File serving error: {str(e)}"
         print(error_message)
         return jsonify({"error": "Server error", "log": error_message}), 500
 
 
-if __name__ == '__main__':
-    # Ensure weights file exists before starting
-    if not WEIGHTS_FILE.exists():
-        print(f"ERROR: Weights file not found at {WEIGHTS_FILE}")
-        print("Please ensure 'weights.pt' is in the application root directory.")
-        exit(1) # Exit if weights are missing
+@app.route('/export_images/<job_id>')
+def export_images(job_id):
+    try:
+        try:
+            uuid.UUID(job_id, version=4) # Validate UUID format
+        except ValueError:
+            return jsonify({"error": "Invalid job ID format"}), 400
+
+        # Get the job directory
+        job_dir = Path(app.config['RESULT_FOLDER']) / job_id
+        if not job_dir.exists():
+            return jsonify({"error": f"Job directory {job_id} not found"}), 404
+
+        # Find all annotated images
+        annotated_files = list(job_dir.glob('*_annotated.*'))
+        if not annotated_files:
+            return jsonify({"error": "No annotated images found"}), 404
+
+        # Create a BytesIO object to store the ZIP file
+        memory_file = io.BytesIO()
+        
+        # Create the ZIP file
+        with zipfile.ZipFile(memory_file, 'w', zipfile.ZIP_DEFLATED) as zf:
+            for file_path in annotated_files:
+                # Add file to the ZIP with just its name as the archive path
+                zf.write(file_path, file_path.name)
+        
+        # Seek to the beginning of the BytesIO object
+        memory_file.seek(0)
+        
+        # Generate timestamp for the filename
+        timestamp = datetime.now().strftime('%Y%m%d_%H%M%S')
+        
+        # Send the ZIP file with timestamp in name
+        return send_file(
+            memory_file,
+            mimetype='application/zip',
+            as_attachment=True,
+            download_name=f'nemaquant_annotated_{timestamp}.zip'
+        )
 
-    # Log startup information
+    except Exception as e:
+        error_message = f"Error exporting images: {str(e)}"
+        print(error_message)
+        return jsonify({"error": "Server error", "log": error_message}), 500
+
+
+# --- Helper function to run NemaQuant in background ---
+def run_nemaquant_background(job_id, cmd, job_output_dir, output_csv, input_mode):
+    global job_status
+    try:
+        print(f"[{job_id}] Starting NemaQuant process...")
+        job_status[job_id] = {"status": "running", "progress": 5, "log": "Starting NemaQuant...", "results": None, "error": None}
+
+        # Use Popen for non-blocking execution
+        process = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True, bufsize=1, universal_newlines=True)
+
+        # --- Monitor stdout for progress (Example: simple line counting) ---
+        stdout_log = []
+        stderr_log = []
+        total_lines_estimate = 50 # Heuristic: estimate total lines for progress
+        lines_processed = 0
+        last_reported_progress = 5 # Start after initial 5%
+
+        # Monitor stdout
+        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}") # Log in real-time
+
+                # Check for PROGRESS marker
+                if line_strip.startswith("PROGRESS:"):
+                    try:
+                        progress_val = int(line_strip.split(":")[1].strip())
+                        # Ensure progress only increases and stays within bounds (5-95)
+                        last_reported_progress = max(last_reported_progress, min(progress_val, 95))
+                        job_status[job_id]["progress"] = last_reported_progress
+                        print(f"[{job_id}] Parsed progress: {last_reported_progress}%")
+                    except (IndexError, ValueError):
+                        print(f"[{job_id}] Warning: Could not parse progress line: {line_strip}")
+                        # Fallback to line counting if parsing fails
+                        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:
+                    # Fallback: Update progress based on line count if no marker
+                    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"]
+
+                # Update log snippet (always)
+                job_status[job_id]["log"] = "\n".join(stdout_log[-5:]) # Keep last 5 lines for status
+
+        # Monitor stderr
+        if process.stderr:
+             for line in iter(process.stderr.readline, ''):
+                 stderr_log.append(line.strip())
+                 print(f"[{job_id}] STDERR: {line.strip()}") # Log errors in real-time
+
+        process.stdout.close()
+        if process.stderr:
+            process.stderr.close()
+        return_code = process.wait()
+
+        # Join logs first to avoid f-string syntax error
+        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 # Store full log at the end
+
+        print(f"[{job_id}] NemaQuant script return code: {return_code}")
+
+        if return_code != 0:
+             raise subprocess.CalledProcessError(return_code, cmd, output=stdout_str, stderr=stderr_str)
+
+        job_status[job_id]["progress"] = 95 # Mark as almost done before parsing results
+
+        # --- Check for and Parse Results ---
+        print(f"[{job_id}] Checking output directory: {job_output_dir}")
+        if os.path.exists(job_output_dir):
+            print(f"[{job_id}] Output directory contents: {os.listdir(job_output_dir)}")
+        print(f"[{job_id}] Checking for output CSV: {output_csv}")
+
+        # Simplified fallback check
+        if not output_csv.exists():
+             csv_files = list(job_output_dir.glob('*.csv'))
+             if csv_files:
+                 print(f"[{job_id}] Original CSV not found, using alternate: {csv_files[0]}")
+                 output_csv = csv_files[0]
+             else:
+                 raise FileNotFoundError(f"Output CSV not found at {output_csv} and no alternatives found.")
+
+        # --- Parse Results ---
+        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
+        }
+        print(f"[{job_id}] Processing successful.")
+
+    except subprocess.CalledProcessError as e:
+        # Construct error message carefully, avoiding f-string backslash issue again
+        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}"
+        print(f"[{job_id}] {error_message}")
+        # Ensure log is updated even on error, using the potentially partial log from job_status
+        current_log = job_status[job_id].get("log", "") # Get log captured so far
+        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}"
+        print(f"[{job_id}] {error_message}")
+        job_status[job_id] = {"status": "error", "progress": 100, "log": job_status[job_id].get("log", ""), "results": None, "error": error_message}
+    except Exception as e: # Catch any other unexpected errors
+        error_message = f"An unexpected error occurred: {str(e)}\\n{traceback.format_exc()}"
+        print(f"[{job_id}] {error_message}")
+        job_status[job_id] = {"status": "error", "progress": 100, "log": job_status[job_id].get("log", ""), "results": None, "error": error_message}
+
+
+# --- Add startup diagnostics ---
+def print_startup_info():
     print("----- NemaQuant Flask App Starting -----")
     print(f"Working directory: {os.getcwd()}")
-    print(f"Python version: {sys.version}")
+    # Fix: Perform replace before the f-string
+    python_version_single_line = sys.version.replace('\n', ' ')
+    print(f"Python version: {python_version_single_line}")
     print(f"Weights file: {WEIGHTS_FILE}")
-    print(f"Weights file exists: {os.path.exists(str(WEIGHTS_FILE))}")
-    if os.path.exists(str(WEIGHTS_FILE)):
-        print(f"Weights file size: {os.path.getsize(str(WEIGHTS_FILE))} bytes")
-    
-    # Check if running in Docker or Hugging Face Space container
-    in_container = os.path.exists('/.dockerenv') or os.environ.get('SPACE_ID')
-    print(f"Running in container: {in_container}")
-    if in_container:
-        print("Container environment detected:")
-        print(f"User running process: {os.getuid()}:{os.getgid()}")
+    print(f"Weights file exists: {WEIGHTS_FILE.exists()}")
+    if WEIGHTS_FILE.exists():
         try:
-            # Check permissions for key directories
-            for path in [UPLOAD_FOLDER, RESULT_FOLDER]:
-                stat_info = os.stat(path)
-                print(f"Permissions for {path}: {oct(stat_info.st_mode)[-3:]}")
-                print(f"Owner for {path}: {stat_info.st_uid}:{stat_info.st_gid}")
+            print(f"Weights file size: {WEIGHTS_FILE.stat().st_size} bytes")
         except Exception as e:
-            print(f"Error checking permissions: {e}")
-    
-    print("---------------------------------------")
+            print(f"Could not get weights file size: {e}")
+    else:
+         print("Weights file size: N/A")
+
+    # Check if running inside a container (basic check)
+    is_container = os.path.exists('/.dockerenv') or 'DOCKER_HOST' in os.environ
+    print(f"Running in container: {is_container}")
+    if is_container:
+        print("Container environment detected:")
+        try:
+            user_info = f"{os.getuid()}:{os.getgid()}"
+            print(f"User running process: {user_info}")
+        except AttributeError: # os.getuid/gid not available on Windows
+            print("User running process: UID/GID not available on this OS")
+        
+        # Check permissions (use absolute paths inside container context)
+        container_upload_path = "/app/uploads"
+        container_results_path = "/app/results"
+        for path_str in [container_upload_path, container_results_path]:
+            path_obj = Path(path_str)
+            if path_obj.exists():
+                 stat_info = path_obj.stat()
+                 permissions = oct(stat_info.st_mode)[-3:]
+                 owner = f"{stat_info.st_uid}:{stat_info.st_gid}"
+                 print(f"Permissions for {path_str}: {permissions}")
+                 print(f"Owner for {path_str}: {owner}")
+            else:
+                 print(f"Directory {path_str} does not exist.")
 
-    # Check for nemaquant.py script
+    print("---------------------------------------")
+    # Check NemaQuant script details
     nemaquant_script = APP_ROOT / 'nemaquant.py'
     print(f"NemaQuant script exists: {nemaquant_script.exists()}")
     if nemaquant_script.exists():
-        print(f"NemaQuant script permissions: {oct(os.stat(nemaquant_script).st_mode)[-3:]}")
+         try:
+            permissions = oct(nemaquant_script.stat().st_mode)[-3:]
+            print(f"NemaQuant script permissions: {permissions}")
+            # Check if executable
+            # is_executable = os.access(str(nemaquant_script), os.X_OK)
+            # print(f"NemaQuant script is executable: {is_executable}") # This might be unreliable depending on FS/user
+         except Exception as e:
+            print(f"Could not get NemaQuant script details: {e}")
+
     print("---------------------------------------")
 
-    app.run(debug=True, host='0.0.0.0', port=7860) # Port 7860 is common for HF Spaces 
+
+if __name__ == '__main__':
+    print_startup_info() # Print info before starting server
+    # Use 0.0.0.0 to be accessible within Docker network
+    # Use a port other than 5000 if needed, e.g., 7860 for HF Spaces compatibility
+    # Turn off debug mode for production or use a WSGI server like gunicorn
+    app.run(host='0.0.0.0', port=7860, debug=True) # Keep debug for now 

nemaquant.py

@@ -10,6 +10,7 @@ from pathlib import Path
 from ultralytics import YOLO
 from glob import glob
 import re
+import sys # Import sys module
 
 def options():
     parser = argparse.ArgumentParser(description="Nematode egg image processing with YOLOv8 model.")
@@ -166,7 +167,13 @@ def main():
     # multi-image mode, runs differently depending on whether you have /XY00/ subdirectories
     elif args.img_mode == 'dir':
         if args.xy_mode:
-            for subdir in args.subdir_paths:
+            total_subdirs = len(args.subdir_paths)
+            for i, subdir in enumerate(args.subdir_paths):
+                # Report progress
+                progress_percent = int(((i + 1) / total_subdirs) * 90) # Scale to 0-90% range
+                print(f"PROGRESS: {progress_percent}")
+                sys.stdout.flush() # Flush output buffer
+                
                 # check that the empty file with well name is present
                 well = [x.name for x in subdir.iterdir() if re.match("_[A-H][0-9]{1,2}", x.name)][0]
                 if len(well) == 0:
@@ -216,7 +223,13 @@ def main():
             # running model() on the target dir instead of image-by-image would be cleaner
             # but makes saving annotated images more complicated
             # can maybe revisit later
-            for impath in sorted(args.subimage_paths):
+            total_images = len(args.subimage_paths)
+            for i, impath in enumerate(sorted(args.subimage_paths)):
+                # Report progress
+                progress_percent = int(((i + 1) / total_images) * 90) # Scale to 0-90% range
+                print(f"PROGRESS: {progress_percent}")
+                sys.stdout.flush() # Flush output buffer
+                
                 img = cv2.imread(str(impath))
                 results = model.predict(img, imgsz = 1440, verbose=False, conf= args.conf)
                 result = results[0]
@@ -232,7 +245,6 @@ def main():
                     annot_path = args.annotpath / ('%s_annotated%s' % (impath.stem, impath.suffix))
                     cv2.imwrite(str(annot_path), annot)
             outdf = pd.DataFrame({
-                'folder': args.imgpath,
                 "filename": tmp_filenames,
                 "num_eggs": tmp_numeggs})
         # save final pandas df, print some updates for user

requirements.txt

@@ -1,4 +1,3 @@
-PyQt6>=6.4.0
 pandas>=1.5.0
 opencv-python>=4.7.0
 numpy>=1.21.0

static/script.js

@@ -1,66 +1,221 @@
 // Basic front-end logic
 
 document.addEventListener('DOMContentLoaded', () => {
-    const inputMode = document.getElementById('input-mode');
+    // UI Elements
+    const dropZone = document.getElementById('drop-zone');
     const fileInput = document.getElementById('file-input');
+    const fileList = document.getElementById('file-list');
+    const uploadText = document.getElementById('upload-text');
+    const inputMode = document.getElementById('input-mode');
     const startProcessingBtn = document.getElementById('start-processing');
     const confidenceSlider = document.getElementById('confidence-threshold');
     const confidenceValue = document.getElementById('confidence-value');
     const progress = document.getElementById('progress');
     const progressText = document.getElementById('progress-text');
-    const processingStatus = document.getElementById('processing-status');
+    const progressPercentage = document.getElementById('progress-percentage');
     const statusOutput = document.getElementById('status-output');
-    const resultsTableBody = document.querySelector('#results-table tbody');
+    const clearLogBtn = document.getElementById('clear-log');
+    const resultsTableBody = document.querySelector('.results-table tbody');
     const previewImage = document.getElementById('preview-image');
     const imageInfo = document.getElementById('image-info');
     const prevBtn = document.getElementById('prev-image');
     const nextBtn = document.getElementById('next-image');
-    const exportCsvBtn = document.getElementById('export-csv');
-    const exportImagesBtn = document.getElementById('export-images');
     const zoomInBtn = document.getElementById('zoom-in');
     const zoomOutBtn = document.getElementById('zoom-out');
+    const exportCsvBtn = document.getElementById('export-csv');
+    const exportImagesBtn = document.getElementById('export-images');
+    const inputModeHelp = document.getElementById('input-mode-help');
 
     let currentResults = [];
     let currentImageIndex = -1;
     let currentJobId = null;
+    let currentZoomLevel = 1;
+    const MAX_ZOOM = 3;
+    const MIN_ZOOM = 0.5;
+    let progressInterval = null; // Interval timer for polling
+    
+    // Pagination and sorting variables
+    const RESULTS_PER_PAGE = 10;
+    let currentPage = 1;
+    let totalPages = 1;
+    let currentSortField = null;
+    let currentSortDirection = 'asc';
+
+    // Input mode change
+    inputMode.addEventListener('change', () => {
+        const mode = inputMode.value;
+        if (mode === 'files') {
+            fileInput.removeAttribute('webkitdirectory');
+            fileInput.removeAttribute('directory');
+            fileInput.setAttribute('multiple', '');
+            inputModeHelp.textContent = 'Choose one or more image files for processing';
+            uploadText.textContent = 'Drag and drop images here or click to browse';
+        } else {
+            fileInput.setAttribute('webkitdirectory', '');
+            fileInput.setAttribute('directory', '');
+            fileInput.removeAttribute('multiple');
+            inputModeHelp.textContent = 'Select a folder containing images to process';
+            uploadText.textContent = 'Click to select a folder containing images';
+        }
+        // Clear any existing files
+        fileInput.value = '';
+        fileList.innerHTML = '';
+        updateUploadState();
+    });
 
-    // Update confidence value display
-    confidenceSlider.addEventListener('input', () => {
-        confidenceValue.textContent = confidenceSlider.value;
+    // File Upload Handling
+    function handleFiles(files) {
+        // Log the selected files
+        // logStatus(`Selected ${files.length} file(s):`);
+        // Array.from(files).forEach(file => {
+        //     logStatus(`- ${file.name} (${formatFileSize(file.size)})`);
+        // });
+        const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/tiff', 'image/tif'];
+        const validFiles = Array.from(files).filter(file => {
+            // For folder mode, check if file is in a subdirectory
+            if (inputMode.value === 'folder') {
+                // Only include files with valid types and exclude any hidden files
+                return allowedTypes.includes(file.type) && 
+                       file.webkitRelativePath && 
+                       !file.webkitRelativePath.startsWith('.');
+            }
+            return allowedTypes.includes(file.type);
+        });
+        const invalidFiles = Array.from(files).filter(file => !allowedTypes.includes(file.type));
+
+        if (invalidFiles.length > 0) {
+            logStatus(`Warning: Skipped ${invalidFiles.length} invalid files. Only PNG, JPG, and TIFF are supported.`);
+            // Log each invalid file
+            invalidFiles.forEach(file => {
+                logStatus(`- Skipped: ${file.name} (invalid type: ${file.type || 'unknown'})`);
+            });
+        }
+
+        if (validFiles.length === 0) {
+            logStatus('Error: No valid image files selected.');
+            return;
+        }
+
+        fileList.innerHTML = '';
+        
+        // Just show an icon to indicate files are selected
+        const summaryDiv = document.createElement('div');
+        summaryDiv.className = 'file-summary';
+        summaryDiv.innerHTML = `
+            <div class="summary-header">
+                <i class="ri-file-list-3-line"></i>
+                <span>Images ready for processing</span>
+            </div>
+        `;
+        fileList.appendChild(summaryDiv);
+
+        fileInput.files = files;
+        updateUploadState(validFiles.length);
+    }
+
+    function formatFileSize(bytes) {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    }
+
+    // Drag and Drop
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, preventDefaults, false);
+        document.body.addEventListener(eventName, preventDefaults, false);
+    });
+
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropZone.addEventListener(eventName, highlight, false);
     });
 
-    // Handle input mode change (single file vs multiple)
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, unhighlight, false);
+    });
+
+    function highlight() {
+        dropZone.classList.add('drag-over');
+    }
+
+    function unhighlight() {
+        dropZone.classList.remove('drag-over');
+    }
+
+    dropZone.addEventListener('drop', (e) => {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        handleFiles(files);
+    });
+
+    // Click to upload
+    dropZone.addEventListener('click', () => {
+        fileInput.click();
+    });
+
+    fileInput.addEventListener('change', () => {
+        handleFiles(fileInput.files);
+    });
+
+    // Input mode change
     inputMode.addEventListener('change', () => {
-        if (inputMode.value === 'single') {
-            fileInput.removeAttribute('multiple');
+        updateUploadState();
+    });
+
+    function updateUploadState(validFileCount) {
+        const files = fileInput.files;
+        if (!files || files.length === 0) {
+            uploadText.textContent = inputMode.value === 'folder' 
+                ? 'Click to select a folder containing images' 
+                : 'Drag and drop images here or click to browse';
+            startProcessingBtn.disabled = true;
         } else {
-            fileInput.setAttribute('multiple', '');
+            // Show the count here
+            uploadText.textContent = `${validFileCount} image${validFileCount === 1 ? '' : 's'} selected`;
+            startProcessingBtn.disabled = validFileCount === 0;
         }
+    }
+
+    // Confidence threshold
+    confidenceSlider.addEventListener('input', () => {
+        confidenceValue.textContent = confidenceSlider.value;
     });
 
-    // --- Updated Start Processing Logic ---
+    // Clear log
+    clearLogBtn.addEventListener('click', () => {
+        statusOutput.textContent = '';
+        logStatus('Log cleared');
+    });
+
+    // Processing
     startProcessingBtn.addEventListener('click', async () => {
         const files = fileInput.files;
         if (!files || files.length === 0) {
             logStatus('Error: No files selected.');
-            alert('Please select one or more image files.');
             return;
         }
 
         const mode = inputMode.value;
-        if (mode === 'single' && files.length > 1) {
-            logStatus('Error: Single File mode selected, but multiple files chosen.');
-            alert('Single File mode allows only one file. Please select one file or switch to Directory mode.');
-            return;
-        }
+        // Removed single file warning, as backend now handles it
+        // if (mode === 'single' && files.length > 1) { ... }
 
+        // Start processing
+        setLoading(true);
         logStatus('Starting upload and processing...');
-        processingStatus.textContent = 'Uploading...';
-        startProcessingBtn.disabled = true;
-        progress.value = 0;
-        progressText.textContent = '0%';
+        updateProgress(0, 'Uploading files...');
         resultsTableBody.innerHTML = ''; // Clear previous results
         clearPreview(); // Clear image preview
+        currentResults = []; // Reset results data
+        if (progressInterval) {
+            clearInterval(progressInterval);
+            progressInterval = null;
+        }
 
         const formData = new FormData();
         for (const file of files) {
@@ -69,158 +224,424 @@ document.addEventListener('DOMContentLoaded', () => {
         formData.append('input_mode', mode);
         formData.append('confidence_threshold', confidenceSlider.value);
 
-        // Basic progress simulation for upload (replace with XHR progress if needed)
-        progress.value = 50;
-        progressText.textContent = '50%';
-        processingStatus.textContent = 'Processing...';
-
         try {
             const response = await fetch('/process', {
                 method: 'POST',
                 body: formData,
             });
 
-            progress.value = 100;
-            progressText.textContent = '100%';
-
-            // First check if the response is valid
-            const contentType = response.headers.get('content-type');
-            if (!contentType || !contentType.includes('application/json')) {
-                // Handle non-JSON response
-                const textResponse = await response.text();
-                logStatus(`Error: Server returned non-JSON response: ${textResponse.substring(0, 200)}...`);
-                processingStatus.textContent = 'Error: Server returned invalid format';
-                throw new Error('Server returned non-JSON response');
+            // Handle non-JSON initial response or network errors
+            if (!response.ok) {
+                let errorText = `HTTP error! status: ${response.status}`;
+                try {
+                    const errorData = await response.json();
+                    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);
             }
 
-            // Now we can safely parse JSON
             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 (response.ok) {
-                logStatus('Processing successful.');
-                processingStatus.textContent = 'Processing finished.';
-                currentJobId = data.job_id; // Store the job ID
-                logStatus(`Job ID: ${currentJobId}`);
-                if (data.log) {
-                    logStatus("--- Server Log ---");
-                    logStatus(data.log);
-                    logStatus("--- End Log ---");
-                }
-                if (data.error_files && data.error_files.length > 0) {
-                    logStatus(`Warning: Skipped invalid files: ${data.error_files.join(', ')}`);
-                }
-                displayResults(data.results || []);
+            // 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 {
-                logStatus(`Error: ${data.error || 'Unknown processing error.'}`);
-                if (data.log) {
-                    logStatus("--- Server Log ---");
-                    logStatus(data.log);
-                    logStatus("--- End Log ---");
-                }
-                processingStatus.textContent = 'Error during processing.';
-                alert(`Processing failed: ${data.error || 'Unknown error'}`);
+                // Should not happen if backend is correct, but handle defensively
+                throw new Error('Unexpected response from server after starting process.');
             }
 
         } catch (error) {
-            console.error('Fetch Error:', error);
-            logStatus(`Network or Server Error: ${error.message}`);
-            processingStatus.textContent = 'Network Error.';
-            progress.value = 0;
-            progressText.textContent = 'Error';
-            alert(`An error occurred while communicating with the server: ${error.message}`);
-        } finally {
-            startProcessingBtn.disabled = false; // Re-enable button
+            logStatus(`Error: ${error.message}`);
+            updateProgress(0, 'Error occurred');
+            setLoading(false);
+            if (progressInterval) {
+                clearInterval(progressInterval);
+                progressInterval = null;
+            }
         }
+        // Removed finally block here, setLoading(false) is handled by pollProgress or catch block
     });
 
+    // --- New Polling Function ---
+    function pollProgress(jobId) {
+        if (progressInterval) {
+            clearInterval(progressInterval); // Clear any existing timer
+        }
+
+        progressInterval = setInterval(async () => {
+            try {
+                const response = await fetch(`/progress/${jobId}`);
+                if (!response.ok) {
+                     // Handle cases where the progress endpoint itself fails
+                     let errorText = `Progress check failed: ${response.status}`;
+                     try {
+                         const errorData = await response.json();
+                         errorText += `: ${errorData.error || 'Unknown progress error'}`;
+                     } catch(e) { errorText += ` - ${response.statusText}`; }
+                    throw new Error(errorText);
+                }
+
+                const data = await response.json();
+
+                // Update UI based on status
+                updateProgress(data.progress || 0, data.status);
+                // Optionally update log with snippets from data.log if desired during processing
+                // logStatus(`[Progress ${data.progress}%] ${data.log || data.status}`);
+
+                if (data.status === 'success') {
+                    clearInterval(progressInterval);
+                    progressInterval = null;
+                    updateProgress(100, 'Processing complete');
+                    logStatus("Processing finished successfully.");
+                    displayResults(data.results || []);
+                    setLoading(false);
+                } else if (data.status === 'error') {
+                    clearInterval(progressInterval);
+                    progressInterval = null;
+                    logStatus(`Error during processing: ${data.error || 'Unknown error'}`);
+                    updateProgress(data.progress || 100, 'Error'); // Show error state on progress bar
+                    setLoading(false);
+                } else if (data.status === 'running' || data.status === 'starting') {
+                    // Continue polling
+                     // logStatus(`Processing status: ${data.status} (${data.progress}%)`); // Removed for cleaner log
+                     // You could add snippets from data.log here if the backend provides useful intermediate logs
+                } else {
+                     // Unknown status - stop polling to prevent infinite loops
+                     clearInterval(progressInterval);
+                     progressInterval = null;
+                     logStatus(`Warning: Unknown job status received: ${data.status}. Stopping progress updates.`);
+                     updateProgress(data.progress || 0, `Unknown (${data.status})`);
+                     setLoading(false); 
+                }
+
+            } catch (error) {
+                clearInterval(progressInterval);
+                progressInterval = null;
+                logStatus(`Error polling progress: ${error.message}`);
+                updateProgress(0, 'Polling Error');
+                setLoading(false);
+            }
+        }, 2000); // Poll every 2 seconds
+    }
+
+    // --- UI Update Functions ---
+    function setLoading(isLoading) {
+        startProcessingBtn.disabled = isLoading;
+        if (isLoading) {
+            startProcessingBtn.innerHTML = '<i class="ri-loader-4-line"></i> Processing...';
+            document.body.classList.add('processing');
+        } else {
+            startProcessingBtn.innerHTML = '<i class="ri-play-line"></i> Start Processing';
+            document.body.classList.remove('processing');
+        }
+    }
+
+    function updateProgress(value, message) {
+        progress.value = value;
+        progressPercentage.textContent = `${value}%`;
+        progressText.textContent = message;
+    }
+
     function logStatus(message) {
-        statusOutput.value += message + '\n';
-        statusOutput.scrollTop = statusOutput.scrollHeight; // Auto-scroll
+        const timestamp = new Date().toLocaleTimeString();
+        statusOutput.innerHTML += `[${timestamp}] ${message}\n`;
+        statusOutput.scrollTop = statusOutput.scrollHeight;
+    }
+
+    // Add click handlers for sortable columns
+    document.querySelectorAll('.results-table th[data-sort]').forEach(header => {
+        header.addEventListener('click', () => {
+            const field = header.dataset.sort;
+            if (currentSortField === field) {
+                currentSortDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
+            } else {
+                currentSortField = field;
+                currentSortDirection = 'asc';
+            }
+            
+            // Update sort indicators
+            document.querySelectorAll('.results-table th[data-sort]').forEach(h => {
+                h.classList.remove('sort-asc', 'sort-desc');
+            });
+            header.classList.add(`sort-${currentSortDirection}`);
+            
+            // Sort and redisplay results
+            sortResults();
+            displayResultsPage(currentPage);
+        });
+    });
+    
+    function sortResults() {
+        if (!currentSortField) return;
+        
+        currentResults.sort((a, b) => {
+            let aVal = a[currentSortField];
+            let bVal = b[currentSortField];
+            
+            // Handle numeric sorting for num_eggs
+            if (currentSortField === 'num_eggs') {
+                aVal = parseInt(aVal) || 0;
+                bVal = parseInt(bVal) || 0;
+            }
+            
+            if (aVal < bVal) return currentSortDirection === 'asc' ? -1 : 1;
+            if (aVal > bVal) return currentSortDirection === 'asc' ? 1 : -1;
+            return 0;
+        });
     }
 
+    // Results Display
     function displayResults(results) {
-        currentResults = results; // Store results
-        resultsTableBody.innerHTML = ''; // Clear existing results
-        currentImageIndex = -1; // Reset index
-        currentJobId = currentJobId; // Ensure job ID is current
+        currentResults = results;
+        resultsTableBody.innerHTML = '';
+        currentImageIndex = -1;
+        currentSortField = null;
+        currentSortDirection = 'asc';
 
         if (!results || results.length === 0) {
-            logStatus("No results returned from processing.");
+            logStatus("No results to display");
             clearPreview();
-            exportCsvBtn.disabled = true;
-            exportImagesBtn.disabled = true;
-            updateNavButtons(); // Ensure nav buttons are disabled
-            return; // Exit early
+            return;
         }
 
-        results.forEach((result, index) => {
-            const row = resultsTableBody.insertRow();
-            row.classList.add('result-row'); // Add class for styling/selection
-            row.innerHTML = `<td>${result.filename}</td><td>${result.num_eggs}</td>`;
-            // Add data attributes for easy access
-            row.dataset.index = index;
-            row.dataset.filename = result.filename;
-            row.dataset.annotatedFilename = result.annotated_filename;
+        // Reset sort indicators
+        document.querySelectorAll('.results-table th[data-sort]').forEach(h => {
+            h.classList.remove('sort-asc', 'sort-desc');
+        });
+
+        // Calculate pagination
+        totalPages = Math.ceil(results.length / RESULTS_PER_PAGE);
+        currentPage = 1;
+        
+        // Display current page
+        displayResultsPage(currentPage);
 
+        // Enable export buttons
+        exportCsvBtn.disabled = false;
+        exportImagesBtn.disabled = false;
+
+        // Show first image
+        displayImage(0);
+        logStatus(`Displayed ${results.length} results`);
+    }
+    
+    // Display a specific page of results
+    function displayResultsPage(page) {
+        resultsTableBody.innerHTML = '';
+        
+        // Calculate start and end indices for current page
+        const startIndex = (page - 1) * RESULTS_PER_PAGE;
+        const endIndex = Math.min(startIndex + RESULTS_PER_PAGE, currentResults.length);
+        
+        // Display results for current page
+        for (let i = startIndex; i < endIndex; i++) {
+            const result = currentResults[i];
+            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" 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 = currentResults.indexOf(result);
+            
             row.addEventListener('click', () => {
-                displayImage(index);
+                const originalIndex = parseInt(row.dataset.originalIndex);
+                displayImage(originalIndex);
+                document.querySelectorAll('.results-table tr').forEach(r => r.classList.remove('selected'));
+                row.classList.add('selected');
             });
+        }
+        
+        // Update pagination UI
+        updatePaginationControls();
+    }
+    
+    // Update pagination controls with enhanced display
+    function updatePaginationControls() {
+        const paginationContainer = document.getElementById('pagination-controls');
+        if (!paginationContainer) return;
+        
+        paginationContainer.innerHTML = '';
+        
+        if (totalPages <= 1) return;
+        
+        const controls = document.createElement('div');
+        controls.className = 'pagination-controls';
+        
+        // Previous button
+        const prevButton = document.createElement('button');
+        prevButton.innerHTML = '<i class="ri-arrow-left-s-line"></i>';
+        prevButton.className = 'pagination-btn';
+        prevButton.disabled = currentPage === 1;
+        prevButton.addEventListener('click', () => {
+            if (currentPage > 1) {
+                currentPage--;
+                displayResultsPage(currentPage);
+            }
         });
-
-        displayImage(0); // Show the first image initially
-        // Enable export buttons IF there are results
-        exportCsvBtn.disabled = !results.some(r => r.filename); // Enable if at least one result has a filename
-        exportImagesBtn.disabled = !results.some(r => r.annotated_filename); // Enable if at least one result has an annotated image
+        controls.appendChild(prevButton);
+        
+        // Page numbers with ellipsis
+        const addPageButton = (pageNum) => {
+            const button = document.createElement('button');
+            button.textContent = pageNum;
+            button.className = 'pagination-btn' + (pageNum === currentPage ? ' active' : '');
+            button.addEventListener('click', () => {
+                currentPage = pageNum;
+                displayResultsPage(currentPage);
+            });
+            controls.appendChild(button);
+        };
+        
+        const addEllipsis = () => {
+            const span = document.createElement('span');
+            span.className = 'pagination-ellipsis';
+            span.textContent = '...';
+            controls.appendChild(span);
+        };
+        
+        // First page
+        addPageButton(1);
+        
+        // Calculate visible page range
+        if (totalPages > 7) {
+            if (currentPage > 3) {
+                addEllipsis();
+            }
+            
+            for (let i = Math.max(2, currentPage - 1); i <= Math.min(currentPage + 1, totalPages - 1); i++) {
+                addPageButton(i);
+            }
+            
+            if (currentPage < totalPages - 2) {
+                addEllipsis();
+            }
+        } else {
+            // Show all pages if total pages is small
+            for (let i = 2; i < totalPages; i++) {
+                addPageButton(i);
+            }
+        }
+        
+        // Last page if not already added
+        if (totalPages > 1) {
+            addPageButton(totalPages);
+        }
+        
+        // Next button
+        const nextButton = document.createElement('button');
+        nextButton.innerHTML = '<i class="ri-arrow-right-s-line"></i>';
+        nextButton.className = 'pagination-btn';
+        nextButton.disabled = currentPage === totalPages;
+        nextButton.addEventListener('click', () => {
+            if (currentPage < totalPages) {
+                currentPage++;
+                displayResultsPage(currentPage);
+            }
+        });
+        controls.appendChild(nextButton);
+        
+        // Add page info
+        const pageInfo = document.createElement('div');
+        pageInfo.className = 'pagination-info';
+        pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
+        
+        // Add both controls and info to container
+        paginationContainer.appendChild(controls);
+        paginationContainer.appendChild(pageInfo);
     }
 
+    // Image Preview
     function displayImage(index) {
-        if (index < 0 || index >= currentResults.length || !currentJobId) {
-            clearPreview();
-            return;
-        }
-
+        if (!currentResults[index]) return;
+        
         currentImageIndex = index;
         const result = currentResults[index];
-
+        
         if (result.annotated_filename) {
             const imageUrl = `/results/${currentJobId}/${result.annotated_filename}`;
             previewImage.src = imageUrl;
-            previewImage.alt = `Annotated ${result.filename}`;
-            imageInfo.textContent = `Filename: ${result.filename} - Eggs detected: ${result.num_eggs}`;
-            logStatus(`Displaying image: ${result.annotated_filename}`);
+            previewImage.alt = result.filename;
+            imageInfo.innerHTML = `
+                <i class="ri-image-line"></i> ${result.filename}
+                <br>
+                <i class="ri-egg-line"></i> ${result.num_eggs} eggs detected
+            `;
+            
+            // 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 = resultsTableBody.querySelectorAll('tr');
+            rows.forEach(row => {
+                if (parseInt(row.dataset.originalIndex) === index) {
+                    row.classList.add('selected');
+                    // Scroll the row into view if needed
+                    row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                }
+            });
         } else {
-            // Handle cases where annotation failed or wasn't produced
-            previewImage.src = ''; // Clear image
-            previewImage.alt = 'Annotated image not available';
-            imageInfo.textContent = `Filename: ${result.filename} - Eggs detected: ${result.num_eggs} (Annotation N/A)`;
-            logStatus(`Annotated image not available for: ${result.filename}`);
+            clearPreview();
         }
 
-        updateNavButtons();
-
-        // Highlight selected row
-        document.querySelectorAll('.result-row').forEach(row => {
-            row.classList.remove('selected');
-        });
-        const selectedRow = resultsTableBody.querySelector(`tr[data-index="${index}"]`);
-        if (selectedRow) {
-            selectedRow.classList.add('selected');
-        }
+        // Update navigation
+        prevBtn.disabled = index <= 0;
+        nextBtn.disabled = index >= currentResults.length - 1;
     }
 
     function clearPreview() {
         previewImage.src = '';
-        previewImage.alt = 'Annotated image preview';
-        imageInfo.textContent = 'Filename: - Eggs detected: -';
+        previewImage.alt = 'No image selected';
+        imageInfo.textContent = 'Select an image from the results to view';
         currentImageIndex = -1;
-        updateNavButtons();
-    }
-
-    function updateNavButtons() {
-        prevBtn.disabled = currentImageIndex <= 0;
-        nextBtn.disabled = currentImageIndex < 0 || currentImageIndex >= currentResults.length - 1;
+        currentZoomLevel = 1;
+        updateZoom();
+        
+        // Disable controls
+        prevBtn.disabled = true;
+        nextBtn.disabled = true;
+        zoomInBtn.disabled = true;
+        zoomOutBtn.disabled = true;
     }
 
+    // Image Navigation
     prevBtn.addEventListener('click', () => {
         if (currentImageIndex > 0) {
             displayImage(currentImageIndex - 1);
@@ -233,66 +654,40 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // --- Export Logic (Placeholders - requires backend implementation) ---
-    exportCsvBtn.addEventListener('click', () => {
-        if (!currentJobId) {
-            alert("No job processed yet.");
-            return;
+    // Zoom Controls
+    function updateZoom() {
+        if (previewImage.src) {
+            previewImage.style.transform = `scale(${currentZoomLevel})`;
         }
-        // Construct the CSV download URL
-        const csvFilename = `${currentJobId}_results.csv`;
-        const downloadUrl = `/results/${currentJobId}/${csvFilename}`;
-        logStatus(`Triggering CSV download: ${csvFilename}`);
-        // Create a temporary link and click it
-        const link = document.createElement('a');
-        link.href = downloadUrl;
-        link.download = csvFilename; // Suggest filename to browser
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    });
+    }
 
-    exportImagesBtn.addEventListener('click', () => {
-        if (!currentJobId) {
-            alert("No job processed yet.");
-            return;
+    zoomInBtn.addEventListener('click', () => {
+        if (currentZoomLevel < MAX_ZOOM) {
+            currentZoomLevel += 0.25;
+            updateZoom();
         }
-        // This is more complex. Ideally, the backend would provide a zip file.
-        // For now, just log and maybe open the first image?
-        logStatus('Image export clicked. Downloading individual images or a zip file is needed.');
-        alert('Image export functionality requires backend support to create a downloadable archive (zip file).');
-        // Example: trigger download of the currently viewed image
-        if (currentImageIndex !== -1 && currentResults[currentImageIndex].annotated_filename) {
-            const imgFilename = currentResults[currentImageIndex].annotated_filename;
-            const downloadUrl = `/results/${currentJobId}/${imgFilename}`;
-            const link = document.createElement('a');
-            link.href = downloadUrl;
-            link.download = imgFilename;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
+    });
+
+    zoomOutBtn.addEventListener('click', () => {
+        if (currentZoomLevel > MIN_ZOOM) {
+            currentZoomLevel -= 0.25;
+            updateZoom();
         }
     });
 
-    // --- Zoom Logic (Placeholder - requires a library or complex CSS/JS) ---
-    zoomInBtn.addEventListener('click', () => {
-        console.log('Zoom In clicked');
-        logStatus('Zoom functionality not yet implemented.');
-        alert('Zoom functionality is not yet implemented.');
+    // Export Handlers
+    exportCsvBtn.addEventListener('click', () => {
+        if (!currentJobId) return;
+        window.location.href = `/results/${currentJobId}/results.csv`;
     });
 
-    zoomOutBtn.addEventListener('click', () => {
-        console.log('Zoom Out clicked');
-        logStatus('Zoom functionality not yet implemented.');
-        alert('Zoom functionality is not yet implemented.');
+    exportImagesBtn.addEventListener('click', () => {
+        if (!currentJobId) return;
+        logStatus('Downloading annotated images...');
+        window.location.href = `/export_images/${currentJobId}`;
     });
 
-    // Initial setup
-    if (inputMode.value === 'single') {
-        fileInput.removeAttribute('multiple');
-    }
-    logStatus('Application initialized. Ready for file selection.');
-    exportCsvBtn.disabled = true;
-    exportImagesBtn.disabled = true;
-    clearPreview(); // Ensure preview is cleared on load
+    // Initialize
+    updateUploadState();
+    logStatus('Application ready');
 }); 

static/style.css

@@ -1,116 +1,326 @@
-/* Refined styling to better match screenshot */
+/* Modern, consistent styling for NemaQuant */
 
 :root {
-    --primary-color: #0d6efd; /* Bootstrap blue */
-    --secondary-color: #6c757d; /* Bootstrap secondary grey */
-    --light-grey: #f8f9fa; /* Light background */
-    --border-color: #dee2e6; /* Standard border */
+    --primary-color: #2563eb; /* Modern blue */
+    --primary-hover: #1d4ed8;
+    --secondary-color: #64748b;
+    --secondary-hover: #475569;
+    --success-color: #22c55e;
+    --danger-color: #ef4444;
+    --background: #f8fafc;
     --card-bg: #ffffff;
-    --text-color: #212529;
-    --selected-row-bg: #e9ecef;
+    --border-color: #e2e8f0;
+    --text-color: #1e293b;
+    --text-muted: #64748b;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 }
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    margin: 20px;
-    background-color: var(--light-grey);
+    margin: 0;
+    padding: 20px;
+    background-color: var(--background);
     color: var(--text-color);
-    font-size: 0.95rem;
+    line-height: 1.5;
+    min-height: 100vh;
 }
 
 h1 {
     text-align: center;
-    color: #333;
-    margin-bottom: 25px;
+    color: var(--text-color);
+    font-size: 1.875rem;
+    font-weight: 600;
+    margin: 1rem 0;
 }
 
 .container {
-    display: flex;
-    gap: 25px;
+    max-width: 1600px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: minmax(300px, 1fr) minmax(600px, 2fr);
+    gap: 1.5rem;
+    padding: 0 1rem;
 }
 
-.left-panel,
-.right-panel {
-    flex: 1;
+.left-panel, .right-panel {
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 1rem;
+}
+
+@media (max-width: 1024px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
 }
 
 .card {
     background-color: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    padding: 20px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    border-radius: 0.5rem;
+    box-shadow: var(--shadow);
+    padding: 1.25rem;
+}
+
+.card.compact {
+    padding: 1rem;
 }
 
 .card h2 {
-    margin-top: 0;
-    margin-bottom: 15px;
-    border-bottom: 1px solid var(--border-color);
-    padding-bottom: 10px;
-    font-size: 1.1rem;
-    font-weight: 500;
+    margin: 0 0 1rem 0;
+    color: var(--text-color);
+    font-size: 1.25rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.card.compact h2 {
+    font-size: 1rem;
+    margin-bottom: 0.75rem;
+}
+
+/* Form Elements */
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group:last-child {
+    margin-bottom: 0;
 }
 
-/* --- General Form Elements --- */
 label {
     display: block;
-    margin-bottom: 5px;
+    margin-bottom: 0.5rem;
     font-weight: 500;
+    color: var(--text-color);
+    font-size: 0.875rem;
 }
 
 select,
 input[type="text"],
 input[type="number"],
-input[type="file"]::file-selector-button, /* Style the button part */
 textarea {
-    display: block;
-    width: calc(100% - 16px); /* Account for padding */
-    padding: 8px;
-    margin-bottom: 15px;
+    width: 100%;
+    padding: 0.5rem;
     border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 0.9rem;
+    border-radius: 0.375rem;
+    background-color: white;
+    color: var(--text-color);
+    font-size: 0.875rem;
+    transition: border-color 0.15s ease;
 }
 
-select {
-     width: 100%; /* Select takes full width */
-     cursor: pointer;
+select:focus,
+input[type="text"]:focus,
+input[type="number"]:focus,
+textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 }
 
-/* Style the actual file input button */
-input[type="file"] {
-    padding: 0;
-    border: none;
+/* File Upload */
+.file-upload {
+    border: 2px dashed var(--border-color);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.15s ease;
 }
-input[type="file"]::file-selector-button {
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    padding: 8px 12px;
-    border-radius: 4px;
+
+.file-upload:hover,
+.file-upload.drag-over {
+    border-color: var(--primary-color);
+    background-color: rgba(37, 99, 235, 0.05);
+}
+
+.file-upload input[type="file"] {
+    display: none;
+}
+
+.file-upload-text {
+    color: var(--text-muted);
+    margin: 0.5rem 0;
+    font-size: 0.875rem;
+}
+
+.file-list {
+    margin-top: 0.75rem;
+    text-align: left;
+}
+
+.file-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem;
+    font-size: 0.875rem;
+    border-radius: 0.25rem;
+}
+
+.file-item:hover {
+    background-color: var(--background);
+}
+
+/* Image Preview Section */
+.preview-section {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 1rem;
+}
+
+.image-preview {
+    position: relative;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background-color: var(--background);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 400px;
+}
+
+.image-preview img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    transition: transform 0.2s ease;
+}
+
+.image-controls {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1rem;
+    justify-content: center;
+}
+
+.image-info {
+    margin: 1rem 0;
+    padding: 0.75rem;
+    background-color: var(--background);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+}
+
+/* Results Section */
+.results-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    min-height: 200px;
+    max-height: 400px;
+}
+
+.results-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
+.export-buttons {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.table-container {
+    flex: 1;
+    overflow-y: auto;
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    background: white;
+}
+
+.results-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+}
+
+.results-table th {
+    background-color: var(--background);
+    font-weight: 600;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    border-bottom: 2px solid var(--border-color);
+}
+
+.results-table th,
+.results-table td {
+    padding: 0.75rem;
+    text-align: left;
+}
+
+.results-table tbody tr {
+    border-bottom: 1px solid var(--border-color);
     cursor: pointer;
-    transition: background-color 0.2s ease;
-    margin-right: 10px; /* Space between button and text */
-    font-size: 0.9rem;
-    width: auto; /* Override width */
+    transition: all 0.15s ease;
 }
 
-input[type="file"]::file-selector-button:hover {
-    background-color: #0b5ed7; /* Darker blue on hover */
+.results-table tbody tr:hover {
+    background-color: rgba(37, 99, 235, 0.05);
 }
 
-/* --- Buttons --- */
+.results-table tbody tr.selected {
+    background-color: rgba(37, 99, 235, 0.1);
+}
+
+.text-right {
+    text-align: right !important;
+}
+
+.view-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    color: var(--primary-color);
+    background-color: rgba(37, 99, 235, 0.1);
+    border-radius: 0.375rem;
+    transition: all 0.15s ease;
+}
+
+.view-button:hover {
+    background-color: rgba(37, 99, 235, 0.2);
+}
+
+.view-button i {
+    font-size: 1rem;
+}
+
+/* Status Log */
+.status-log {
+    background-color: var(--background);
+    border-radius: 0.375rem;
+    padding: 0.75rem;
+    font-family: ui-monospace, monospace;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    height: 120px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+}
+
+/* Buttons */
 button {
-    padding: 8px 15px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    padding: 0.5rem 1rem;
     border: none;
-    border-radius: 4px;
+    border-radius: 0.375rem;
+    font-weight: 500;
+    font-size: 0.875rem;
     cursor: pointer;
-    font-size: 0.9rem;
-    transition: background-color 0.2s ease, box-shadow 0.2s ease;
-    text-align: center;
+    transition: all 0.15s ease;
 }
 
 button:disabled {
@@ -118,218 +328,259 @@ button:disabled {
     cursor: not-allowed;
 }
 
-/* Primary Button Style (e.g., Start Processing) */
-#start-processing,
-#export-csv,
-#export-images {
+.btn-primary {
     background-color: var(--primary-color);
     color: white;
 }
 
-#start-processing:not(:disabled):hover,
-#export-csv:not(:disabled):hover,
-#export-images:not(:disabled):hover {
-    background-color: #0b5ed7; /* Darker blue */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+.btn-primary:hover:not(:disabled) {
+    background-color: var(--primary-hover);
 }
 
-/* Secondary/Control Button Style (e.g., Zoom, Prev/Next) */
-#zoom-in, #zoom-out, #prev-image, #next-image {
+.btn-secondary {
     background-color: var(--secondary-color);
     color: white;
 }
 
-#zoom-in:not(:disabled):hover, #zoom-out:not(:disabled):hover, #prev-image:not(:disabled):hover, #next-image:not(:disabled):hover {
-    background-color: #5c636a; /* Darker grey */
+.btn-secondary:hover:not(:disabled) {
+    background-color: var(--secondary-hover);
 }
 
-/* --- Specific Sections --- */
+/* Progress Bar */
+.progress-container {
+    margin: 1rem 0;
+}
 
-/* Parameters */
-#parameters {
+.progress-info {
     display: flex;
-    align-items: center; /* Align items vertically */
-    flex-wrap: wrap; /* Allow wrapping if needed */
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
 }
 
-#parameters label {
-    margin-right: 10px;
-    margin-bottom: 0; /* Remove bottom margin for inline */
-    display: inline-block; /* Make label inline */
+progress {
+    width: 100%;
+    height: 0.5rem;
+    border-radius: 1rem;
+    overflow: hidden;
+    background-color: var(--border-color);
 }
 
-#parameters input[type="range"] {
-    flex-grow: 1; /* Allow slider to take up space */
-    width: auto; /* Override default width */
-    height: 5px; /* Make slider thinner */
-    cursor: pointer;
-    margin: 0 10px; /* Add some margin */
-    vertical-align: middle;
-    padding: 0; /* Remove padding */
-    margin-bottom: 0;
+progress::-webkit-progress-bar {
+    background-color: var(--border-color);
+}
+
+progress::-webkit-progress-value {
+    background-color: var(--primary-color);
+    transition: width 0.3s ease;
 }
 
-/* Basic range slider styling (will vary by browser) */
-input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  background: var(--primary-color);
-  cursor: pointer;
-  border-radius: 50%;
+progress::-moz-progress-bar {
+    background-color: var(--primary-color);
 }
 
-input[type=range]::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  background: var(--primary-color);
-  cursor: pointer;
-  border-radius: 50%;
-  border: none;
+/* Loading States */
+.loading {
+    position: relative;
+    pointer-events: none;
 }
 
-#parameters #confidence-value {
-    font-weight: bold;
-    min-width: 30px; /* Ensure space for value */
-    text-align: right;
-    margin-left: 5px;
+.loading::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: rgba(255, 255, 255, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-/* Processing */
-#processing progress {
-    width: calc(100% - 50px); /* Adjust width to fit text */
-    height: 10px;
-    vertical-align: middle;
-    margin-right: 5px;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    overflow: hidden; /* Ensure border radius clips the progress */
+/* Tooltips */
+[data-tooltip] {
+    position: relative;
+    cursor: help;
 }
 
-/* Basic progress bar styling */
-progress::-webkit-progress-bar {
-    background-color: #e9ecef;
-    border-radius: 4px;
+[data-tooltip]::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.5rem;
+    background-color: var(--text-color);
+    color: white;
+    font-size: 0.75rem;
+    border-radius: 0.25rem;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
 }
 
-progress::-webkit-progress-value {
-    background-color: var(--primary-color);
-    border-radius: 4px;
-    transition: width 0.3s ease;
+[data-tooltip]:hover::after {
+    opacity: 1;
 }
 
-progress::-moz-progress-bar {
-    background-color: var(--primary-color);
-    border-radius: 4px;
-    transition: width 0.3s ease;
+/* File Upload Styles */
+.file-summary {
+    background: var(--bg-secondary);
+    border-radius: 6px;
+    padding: 0.75rem;
+    margin-bottom: 0.75rem;
 }
 
-#processing #progress-text {
-    vertical-align: middle;
-    font-weight: bold;
+.summary-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-primary);
+    font-weight: 500;
 }
 
-#processing button {
-    margin-top: 15px;
-    display: block; /* Make button block level */
-    width: auto;
+.summary-header i {
+    color: var(--primary-color);
 }
 
-#processing #processing-status {
-    margin-top: 10px;
+.total-size {
+    color: var(--text-muted);
     font-size: 0.9em;
-    color: var(--secondary-color);
 }
 
-/* Status Log */
-#status-log textarea {
-    width: calc(100% - 16px); /* Account for padding */
-    height: 180px; /* Slightly taller */
-    font-family: monospace;
-    font-size: 0.85em;
-    border: 1px solid var(--border-color);
-    padding: 8px;
-    resize: vertical; /* Allow vertical resize */
+.more-files {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    color: var(--text-muted);
+    font-style: italic;
+    border-top: 1px dashed var(--border-color);
+    margin-top: 0.5rem;
 }
 
-/* Results Summary */
-#export-options {
-    margin-bottom: 10px;
+.more-files i {
+    color: var(--text-muted);
 }
-#export-options label {
-    display: inline-block;
-    margin-right: 10px;
+
+.file-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 4px;
+    background: var(--bg-primary);
+    margin: 0.25rem 0;
 }
 
-#export-options button {
-    margin-left: 5px;
+.file-item:hover {
+    background: var(--bg-secondary);
 }
 
-#results-summary table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 15px;
+.file-item i {
+    color: var(--primary-color);
+}
+
+.file-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.file-size {
+    color: var(--text-muted);
     font-size: 0.9em;
 }
 
-#results-summary th,
-#results-summary td {
-    border: 1px solid var(--border-color);
-    padding: 10px;
-    text-align: left;
-    vertical-align: middle;
+/* Pagination */
+.pagination-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
 }
 
-#results-summary th {
-    background-color: #e9ecef; /* Lighter grey header */
-    font-weight: 600;
+.pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
 }
 
-#results-summary tbody tr {
+.pagination-btn {
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border-color);
+    border-radius: 0.375rem;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    font-size: 0.875rem;
     cursor: pointer;
-    transition: background-color 0.15s ease;
+    transition: all 0.2s ease-in-out;
 }
 
-#results-summary tbody tr:hover {
-    background-color: #f8f9fa; /* Very light grey on hover */
+.pagination-btn:hover:not(:disabled) {
+    background-color: var(--background);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
 }
 
-#results-summary tbody tr.selected {
-    background-color: var(--selected-row-bg); /* Use variable for selected */
-    font-weight: 500;
+.pagination-btn.active {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    color: white;
 }
 
-/* Image Preview */
-#image-preview #image-container {
-    border: 1px solid var(--border-color);
-    height: 350px; /* Adjust as needed */
-    overflow: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 10px;
-    background-color: #e9ecef; /* Light background for container */
+.pagination-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    border-color: var(--border-color);
 }
 
-#image-preview img {
-    max-width: 100%;
-    max-height: 100%;
-    display: block;
-    object-fit: contain; /* Ensure image fits well */
+.pagination-ellipsis {
+    color: var(--text-muted);
+    padding: 0 0.25rem;
+    user-select: none;
 }
 
-#image-preview #image-info {
-    font-size: 0.9em;
-    color: var(--secondary-color);
-    text-align: center;
-    margin-bottom: 10px;
+.pagination-info {
+    color: var(--text-muted);
+    font-size: 0.875rem;
 }
 
-#image-preview .image-controls {
-    text-align: center;
+/* Sortable Table Headers */
+.results-table th[data-sort] {
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    padding-right: 1.5rem;
+}
+
+.results-table th[data-sort] .sort-icon {
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0.3;
+    transition: opacity 0.2s ease;
+}
+
+.results-table th[data-sort]:hover .sort-icon {
+    opacity: 1;
+}
+
+.results-table th.sort-asc .sort-icon,
+.results-table th.sort-desc .sort-icon {
+    opacity: 1;
+    color: var(--primary-color);
 }
 
-#image-preview .image-controls button {
-    margin: 0 5px;
+.results-table th.sort-asc .sort-icon {
+    transform: translateY(-50%) rotate(180deg);
 } 

templates/index.html

@@ -5,92 +5,163 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NemaQuant - Nematode Egg Detection</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-    <!-- Consider adding a CSS framework like Bootstrap -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css">
 </head>
 <body>
-    <h1>NemaQuant - Nematode Egg Detection</h1>
+    <h1>
+        <i class="ri-microscope-line"></i>
+        NemaQuant
+        <small style="display: block; font-size: 1rem; font-weight: normal; color: var(--text-muted);">
+            Automated Nematode Egg Detection
+        </small>
+    </h1>
 
     <div class="container">
         <div class="left-panel">
             <!-- Input Selection -->
-            <div class="card" id="input-selection">
-                <h2>Input Selection</h2>
-                <label for="input-mode">Input Mode:</label>
-                <select id="input-mode" name="input-mode">
-                    <option value="single">Single File</option>
-                    <option value="directory">Directory (Multiple Files)</option>
-                </select>
-                <br>
-                <label for="file-input">Input:</label>
-                <input type="file" id="file-input" name="files" multiple>
-                <!-- We'll hide/show this or use different elements based on mode -->
-                <br>
-                <!-- Output directory is handled by the server -->
+            <div class="card compact">
+                <h2><i class="ri-upload-cloud-line"></i> Input Selection</h2>
+                <div class="form-group">
+                    <label for="input-mode">Input Mode</label>
+                    <select id="input-mode" name="input-mode" class="form-control">
+                        <option value="files">Select Image(s)</option>
+                        <option value="folder">Select Folder</option>
+                    </select>
+                    <small class="input-help" style="color: var(--text-muted); margin-top: 0.25rem; display: block;">
+                        <span id="input-mode-help">Choose one or more image files for processing</span>
+                    </small>
+                </div>
+
+                <div class="file-upload" id="drop-zone">
+                    <input type="file" id="file-input" name="files" accept="image/*" multiple hidden>
+                    <i class="ri-upload-cloud-2-line" style="font-size: 2rem; color: var(--primary-color);"></i>
+                    <p class="file-upload-text">
+                        <span id="upload-text">Drag and drop images here or click to browse</span>
+                        <br>
+                        <small style="color: var(--text-muted);">Supported formats: PNG, JPG, TIFF</small>
+                    </p>
+                    <div id="file-list" class="file-list"></div>
+                </div>
             </div>
 
             <!-- Processing -->
-            <div class="card" id="processing">
-                <h2>Processing</h2>
-                <label for="progress">Progress:</label>
-                <progress id="progress" value="0" max="100"></progress>
-                <span id="progress-text">0%</span>
-                <br>
-                <button id="start-processing">Start Processing</button>
-                <p id="processing-status"></p>
-            </div>
+            <div class="card compact">
+                <h2><i class="ri-settings-4-line"></i> Processing</h2>
+                <div class="form-group">
+                    <label for="confidence-threshold" data-tooltip="Higher values mean more confident detections">
+                        Confidence Threshold
+                        <i class="ri-information-line"></i>
+                    </label>
+                    <div class="range-with-value">
+                        <input type="range" id="confidence-threshold" name="confidence-threshold" 
+                               min="0" max="1" step="0.05" value="0.6">
+                        <span id="confidence-value">0.6</span>
+                    </div>
+                </div>
 
-            <!-- Results -->
-            <div class="card" id="results-summary">
-                <h2>Results</h2>
-                <div id="export-options">
-                     <label>Export:</label>
-                    <button id="export-csv">CSV</button>
-                    <button id="export-images">Images</button> 
+                <div class="progress-container">
+                    <div class="progress-info">
+                        <span id="progress-text">Ready to process</span>
+                        <span id="progress-percentage">0%</span>
+                    </div>
+                    <progress id="progress" value="0" max="100"></progress>
                 </div>
-                <p>Click on a row to view the annotated image</p>
-                <table id="results-table">
-                    <thead>
-                        <tr>
-                            <th>filename</th>
-                            <th>num_eggs</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <!-- Results will be populated here by JavaScript -->
-                    </tbody>
-                </table>
+
+                <button id="start-processing" class="btn-primary">
+                    <i class="ri-play-line"></i>
+                    Start Processing
+                </button>
+            </div>
+
+            <!-- Status Log -->
+            <div class="card compact">
+                <h2>
+                    <i class="ri-terminal-box-line"></i>
+                    Processing 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>
+                </h2>
+                <div id="status-output" class="status-log"></div>
             </div>
         </div>
 
         <div class="right-panel">
-            <!-- Parameters -->
-            <div class="card" id="parameters">
-                <h2>Parameters</h2>
-                <label for="confidence-threshold">Confidence Threshold:</label>
-                <input type="range" id="confidence-threshold" name="confidence-threshold" min="0" max="1" step="0.05" value="0.6">
-                <span id="confidence-value">0.6</span>
-                <!-- Add tooltip/help icon if needed -->
+            <!-- Image Preview -->
+            <div class="card preview-section">
+                <h2>
+                    <i class="ri-image-edit-line"></i>
+                    Image Preview
+                    <div class="export-buttons">
+                        <button id="export-csv" class="btn-secondary" disabled>
+                            <i class="ri-file-excel-line"></i>
+                            Export CSV
+                        </button>
+                        <button id="export-images" class="btn-secondary" disabled>
+                            <i class="ri-image-line"></i>
+                            Export Images
+                        </button>
+                    </div>
+                </h2>
+                
+                <div class="image-preview" id="image-container">
+                    <img id="preview-image" src="" alt="Preview will appear here">
+                </div>
+                
+                <div class="image-info" id="image-info">
+                    Select an image from the results to view
+                </div>
+                
+                <div class="image-controls">
+                    <button id="prev-image" class="btn-secondary" disabled>
+                        <i class="ri-arrow-left-s-line"></i>
+                        Previous
+                    </button>
+                    <button id="zoom-out" class="btn-secondary" disabled>
+                        <i class="ri-zoom-out-line"></i>
+                    </button>
+                    <button id="zoom-in" class="btn-secondary" disabled>
+                        <i class="ri-zoom-in-line"></i>
+                    </button>
+                    <button id="next-image" class="btn-secondary" disabled>
+                        Next
+                        <i class="ri-arrow-right-s-line"></i>
+                    </button>
+                </div>
             </div>
 
-            <!-- Status -->
-            <div class="card" id="status-log">
-                <h2>Status</h2>
-                <textarea id="status-output" rows="10" readonly></textarea>
-            </div>
+            <!-- Results -->
+            <div class="card">
+                <h2>
+                    <i class="ri-file-list-3-line"></i>
+                    Results
+                </h2>
 
-            <!-- Image Preview -->
-            <div class="card" id="image-preview">
-                <h2>Image Preview</h2>
-                <div id="image-container">
-                     <img id="preview-image" src="" alt="Annotated image preview">
-                 </div>
-                 <p id="image-info">Filename: - Eggs detected: -</p>
-                 <div class="image-controls">
-                     <button id="zoom-out">Zoom -</button>
-                     <button id="zoom-in">Zoom +</button>
-                     <button id="prev-image" disabled>Prev</button>
-                     <button id="next-image" disabled>Next</button>
-                 </div>
+                <div class="table-container">
+                    <table class="results-table">
+                        <thead>
+                            <tr>
+                                <th data-sort="filename">
+                                    Filename
+                                    <i class="ri-arrow-up-down-line sort-icon"></i>
+                                </th>
+                                <th data-sort="num_eggs">
+                                    Eggs Detected
+                                    <i class="ri-arrow-up-down-line sort-icon"></i>
+                                </th>
+                                <th class="text-right">Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <!-- Results will be populated here -->
+                        </tbody>
+                    </table>
+                    
+                    <!-- Pagination controls -->
+                    <div id="pagination-controls" class="pagination-container">
+                        <!-- Pagination buttons will be generated here -->
+                    </div>
+                </div>
             </div>
         </div>
     </div>