Upload 8 files

Dockerfile

@@ -1,39 +1,27 @@
-# Use an official Python runtime as a parent image
-FROM python:3.10-slim
-
-# Set the working directory in the container
-WORKDIR /app
-
-# Install system dependencies for OpenCV and other packages
-RUN apt-get update && apt-get install -y \
-    libgl1-mesa-glx \
-    libglib2.0-0 \
-    libsm6 \
-    libxext6 \
-    libxrender-dev \
-    libgomp1 \
-    && rm -rf /var/lib/apt/lists/*
-
-# Copy the requirements file
-COPY requirements.txt requirements.txt
-
-# Install Python packages
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Copy application code
-COPY . /app
-
-# Create a non-root user
-RUN useradd -m -u 1000 user
-
-# Change ownership
-RUN chown -R user:user /app
-
-# Switch to the non-root user
-USER user
-
-# Expose the port Gunicorn will run on (Using 7860 as in CMD)
-EXPOSE 7860
-
-# Command to run the app
-CMD ["python", "app.py", "--host", "0.0.0.0", "--port", "7860"]
+FROM python:3.10-slim
+
+WORKDIR /app
+ENV PYTHONUNBUFFERED=1
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgl1 \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender1 \
+    libgomp1 \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt ./requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . /app
+
+RUN mkdir -p /app/models /app/static/uploads \
+    && useradd -m -u 1000 user \
+    && chown -R user:user /app
+
+USER user
+EXPOSE 7860
+
+CMD ["python", "app.py"]

app.py

@@ -1,143 +1,179 @@
-import os
-import torch
-from flask import Flask, request, jsonify, render_template, Response
-from flask_cors import CORS
-from werkzeug.utils import secure_filename
-from ultralytics import YOLO
-from dotenv import load_dotenv
-import time
-import json
-import traceback
-
-# Import the processing logic
-from processing import process_images
-
-# Load environment variables from .env file
-load_dotenv()
-
-app = Flask(__name__)
-
-# Enable CORS for all routes
-CORS(app)
-
-# --- Configuration ---
-UPLOAD_FOLDER = 'static/uploads'
-MODELS_FOLDER = 'models'
-ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg'}
-
-# --- Load model names from .env file ---
-PARTS_MODEL_NAME = os.getenv('PARTS_MODEL_NAME', 'best_parts_EP336.pt')
-DAMAGE_MODEL_NAME = os.getenv('DAMAGE_MODEL_NAME', 'best_new_EP382.pt')
-
-# --- Model Paths ---
-PARTS_MODEL_PATH = os.path.join(MODELS_FOLDER, PARTS_MODEL_NAME)
-DAMAGE_MODEL_PATH = os.path.join(MODELS_FOLDER, DAMAGE_MODEL_NAME)
-
-app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
-os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
-os.makedirs(MODELS_FOLDER, exist_ok=True)
-os.makedirs('templates', exist_ok=True)
-
-# --- Determine Device ---
-device = "cuda" if torch.cuda.is_available() else "cpu"
-print(f"Using device: {device}")
-
-# --- Load YOLO Models ---
-parts_model, damage_model = None, None
-
-# Load Parts Model
-try:
-    if not os.path.exists(PARTS_MODEL_PATH):
-        print(f"Warning: Parts model file not found at {PARTS_MODEL_PATH}")
-    else:
-        parts_model = YOLO(PARTS_MODEL_PATH)
-        parts_model.to(device)
-        print(f"Successfully loaded parts model '{PARTS_MODEL_NAME}' on {device}.")
-except Exception as e:
-    print(f"Error loading Parts Model ({PARTS_MODEL_NAME}): {e}")
-
-# Load Damage Model
-try:
-    if not os.path.exists(DAMAGE_MODEL_PATH):
-        print(f"Warning: Damage model file not found at {DAMAGE_MODEL_PATH}")
-    else:
-        damage_model = YOLO(DAMAGE_MODEL_PATH)
-        damage_model.to(device)
-        print(f"Successfully loaded damage model '{DAMAGE_MODEL_NAME}' on {device}.")
-except Exception as e:
-    print(f"Error loading Damage Model ({DAMAGE_MODEL_NAME}): {e}")
-
-
-def allowed_file(filename):
-    """Checks if a file's extension is in the ALLOWED_EXTENSIONS set."""
-    return '.' in filename and \
-           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
-
-@app.route('/')
-def home():
-    """Serve the main HTML page."""
-    return render_template('index.html')
-
-@app.route('/predict', methods=['POST'])
-def predict():
-    """
-    Endpoint to receive one or more images, process them immediately,
-    and return the prediction results.
-    """
-    # 1. --- Get Session Key and Validate ---
-    # Session key can be used for logging or grouping, but doesn't control logic.
-    session_key = request.form.get('session_key')
-    if not session_key:
-        return jsonify({"error": "No session_key provided in the payload"}), 400
-
-    # 2. --- File Validation ---
-    if 'file' not in request.files:
-        return jsonify({"error": "No file part in the request"}), 400
-
-    files = request.files.getlist('file')
-    if not files or all(f.filename == '' for f in files):
-        return jsonify({"error": "No selected files"}), 400
-
-    # 3. --- Save Files and Prepare for Processing ---
-    saved_filepaths = []
-    for file in files:
-        if file and allowed_file(file.filename):
-            # Create a unique filename to prevent overwrites
-            unique_filename = f"{session_key}_{int(time.time()*1000)}_{secure_filename(file.filename)}"
-            filepath = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
-            file.save(filepath)
-            saved_filepaths.append(filepath)
-        else:
-            print(f"Skipped invalid file: {file.filename}")
-
-    if not saved_filepaths:
-        return jsonify({"error": "No valid files were uploaded. Allowed types: png, jpg, jpeg"}), 400
-
-    # 4. --- Run Prediction ---
-    try:
-        print(f"Processing {len(saved_filepaths)} file(s) for session '{session_key}'...")
-        
-        # This function processes the images and returns the prediction results.
-        results = process_images(parts_model, damage_model, saved_filepaths)
-        
-        print(f"Processing complete for session '{session_key}'.")
-        
-        # Return the results as a JSON response
-        return Response(json.dumps(results), mimetype='application/json')
-
-    except Exception as e:
-        print(f"An error occurred during processing for session {session_key}: {e}")
-        traceback.print_exc()
-        return jsonify({"error": f"An error occurred during processing: {str(e)}"}), 500
-    finally:
-        # 5. --- Clean up the saved files ---
-        for filepath in saved_filepaths:
-            try:
-                if os.path.exists(filepath):
-                    os.remove(filepath)
-            except Exception as e:
-                print(f"Error cleaning up file {filepath}: {e}")
-
-
-if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860, debug=True)
+import os
+import traceback
+import uuid
+
+import torch
+from dotenv import load_dotenv
+from flask import Flask, jsonify, render_template, request
+from flask_cors import CORS
+from ultralytics import YOLO
+from werkzeug.utils import secure_filename
+
+from processing import process_images
+
+
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+load_dotenv(os.path.join(BASE_DIR, '.env'))
+
+app = Flask(__name__)
+CORS(app)
+
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg'}
+
+
+def resolve_app_path(configured_path, default_relative_path):
+    """Resolve configured relative paths from the application directory."""
+    path = configured_path or default_relative_path
+    if os.path.isabs(path):
+        return path
+    return os.path.join(BASE_DIR, path)
+
+
+UPLOAD_FOLDER = resolve_app_path(os.getenv('UPLOAD_FOLDER'), os.path.join('static', 'uploads'))
+MODELS_FOLDER = resolve_app_path(os.getenv('MODELS_FOLDER'), 'models')
+PARTS_MODEL_NAME = os.getenv('PARTS_MODEL_NAME', 'best_parts_EP336.pt')
+DAMAGE_MODEL_NAME = os.getenv('DAMAGE_MODEL_NAME', 'best_new_EP382.pt')
+
+
+def resolve_model_path(model_name):
+    """Resolve an absolute model path or a filename relative to MODELS_FOLDER."""
+    if os.path.isabs(model_name):
+        return model_name
+    return os.path.join(MODELS_FOLDER, model_name)
+
+
+PARTS_MODEL_PATH = resolve_model_path(PARTS_MODEL_NAME)
+DAMAGE_MODEL_PATH = resolve_model_path(DAMAGE_MODEL_NAME)
+
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+os.makedirs(MODELS_FOLDER, exist_ok=True)
+
+device = 'cuda' if torch.cuda.is_available() else 'cpu'
+print(f'Using device: {device}')
+
+
+def load_model(model_path, label):
+    """Load a YOLO model if its configured file exists."""
+    if not os.path.isfile(model_path):
+        print(f'Warning: {label} model file not found at {model_path}')
+        return None
+
+    try:
+        model = YOLO(model_path)
+        model.to(device)
+        print(f"Successfully loaded {label.lower()} model '{os.path.basename(model_path)}' on {device}.")
+        return model
+    except Exception as exc:
+        print(f'Error loading {label} model ({model_path}): {exc}')
+        traceback.print_exc()
+        return None
+
+
+parts_model = load_model(PARTS_MODEL_PATH, 'Parts')
+damage_model = load_model(DAMAGE_MODEL_PATH, 'Damage')
+
+
+def allowed_file(filename):
+    """Return True when filename has an allowed image extension."""
+    return bool(filename) and '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+
+def model_readiness_error():
+    """Return a useful model readiness payload, or None when both models are loaded."""
+    missing = []
+    if parts_model is None:
+        missing.append({'model': 'parts', 'path': PARTS_MODEL_PATH})
+    if damage_model is None:
+        missing.append({'model': 'damage', 'path': DAMAGE_MODEL_PATH})
+
+    if not missing:
+        return None
+
+    return {
+        'error': 'Prediction models are not ready.',
+        'missing_or_unloaded_models': missing,
+        'hint': 'Place the configured .pt files at the listed paths or update MODELS_FOLDER/model names in .env.'
+    }
+
+
+@app.route('/')
+def home():
+    """Serve the main HTML page."""
+    return render_template('index.html')
+
+
+@app.route('/health', methods=['GET'])
+def health():
+    """Expose basic service/model readiness without running inference."""
+    readiness = model_readiness_error()
+    if readiness:
+        return jsonify({'status': 'degraded', **readiness}), 503
+    return jsonify({'status': 'ok', 'device': device}), 200
+
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    """Receive one or more images and return part/damage predictions."""
+    readiness = model_readiness_error()
+    if readiness:
+        return jsonify(readiness), 503
+
+    raw_session_key = request.form.get('session_key', '').strip()
+    session_key = secure_filename(raw_session_key)[:100] or uuid.uuid4().hex
+
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part in the request'}), 400
+
+    files = request.files.getlist('file')
+    if not files or all(not file.filename for file in files):
+        return jsonify({'error': 'No selected files'}), 400
+
+    saved_images = []
+    skipped_files = []
+
+    try:
+        for index, file in enumerate(files):
+            original_filename = file.filename or ''
+            if not (file and allowed_file(original_filename)):
+                skipped_files.append(original_filename or f'file_{index}')
+                continue
+
+            safe_original = secure_filename(original_filename) or f'image_{index}.jpg'
+            unique_filename = f'{uuid.uuid4().hex}_{safe_original}'
+            filepath = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
+            file.save(filepath)
+            saved_images.append({
+                'path': filepath,
+                'filename': original_filename,
+                'index': index,
+            })
+
+        if not saved_images:
+            return jsonify({
+                'error': 'No valid files were uploaded. Allowed types: png, jpg, jpeg',
+                'skipped_files': skipped_files,
+            }), 400
+
+        print(f"Processing {len(saved_images)} file(s) for session '{session_key}'...")
+        results = process_images(parts_model, damage_model, saved_images)
+        print(f"Processing complete for session '{session_key}'.")
+        return jsonify(results)
+
+    except Exception as exc:
+        print(f'An error occurred during processing for session {session_key}: {exc}')
+        traceback.print_exc()
+        return jsonify({'error': f'An error occurred during processing: {exc}'}), 500
+
+    finally:
+        for image in saved_images:
+            filepath = image['path']
+            try:
+                if os.path.exists(filepath):
+                    os.remove(filepath)
+            except Exception as exc:
+                print(f'Error cleaning up file {filepath}: {exc}')
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=False)

processing.py

@@ -1,83 +1,96 @@
-# processing.py
-
-import os
-from ultralytics import YOLO
-
-# --- Configuration ---
-# These are the specific parts that require a subsequent damage check.
-DAMAGE_CHECK_PARTS = {
-    'driver_front_side',
-    'driver_rear_side',
-    'passenger_front_side',
-    'passenger_rear_side',
-}
-
-def run_single_inference(model, filepath):
-    """
-    Helper function to run inference for a single model and format the result.
-    """
-    if model is None:
-        return None  # Return None if the model isn't loaded
-
-    results = model(filepath, verbose=False) # verbose=False to keep logs clean
-    result = results[0]
-    
-    # Check if it's a classification model with probabilities
-    if result.probs is not None:
-        probs = result.probs
-        top1_index = probs.top1
-        top1_confidence = float(probs.top1conf)
-        class_name = model.names[top1_index]
-    else: # Fallback for detection models or if probs are not available
-        # Assuming the top prediction is what we need
-        top1_index = result.boxes.cls[0].int() if len(result.boxes) > 0 else 0
-        top1_confidence = float(result.boxes.conf[0]) if len(result.boxes) > 0 else 0.0
-        class_name = model.names[top1_index] if len(result.boxes) > 0 else "unknown"
-
-    return {
-        "class": class_name,
-        "confidence": round(top1_confidence, 4)
-    }
-
-def process_images(parts_model, damage_model, image_paths):
-    """
-    Processes a list of images.
-    1. Runs the 'parts_model' on every image.
-    2. If the detected part is in DAMAGE_CHECK_PARTS, it then runs the 'damage_model'.
-    3. Otherwise, the damage status defaults to 'correct'.
-    """
-    if parts_model is None or damage_model is None:
-        raise RuntimeError("One or more models are not loaded. Check server logs.")
-
-    final_results = []
-
-    for filepath in image_paths:
-        filename = os.path.basename(filepath)
-        print(f"Processing {filename}...")
-
-        # 1. First, predict the part
-        part_prediction = run_single_inference(parts_model, filepath)
-        predicted_part = part_prediction.get("class") if part_prediction else "unknown"
-
-        damage_prediction = None
-        # 2. Conditionally predict the damage
-        if predicted_part in DAMAGE_CHECK_PARTS:
-            print(f"  -> Part '{predicted_part}' requires damage check. Running damage model...")
-            damage_prediction = run_single_inference(damage_model, filepath)
-        else:
-            print(f"  -> Part '{predicted_part}' does not require damage check. Defaulting to 'correct'.")
-            # 3. For other parts, default to 'correct'
-            damage_prediction = {
-                "class": "correct",
-                "confidence": 1.0,
-                "note": "Result by default, not by model inference."
-            }
-
-        # Assemble the final result for this image
-        final_results.append({
-            "filename": filename,
-            "part_prediction": part_prediction,
-            "damage_prediction": damage_prediction
-        })
-
-    return final_results
+import os
+
+
+DAMAGE_CHECK_PARTS = {
+    'driver_front_side',
+    'driver_rear_side',
+    'passenger_front_side',
+    'passenger_rear_side',
+}
+
+
+def _class_name(model, class_index):
+    """Read a class label from YOLO names whether it is a dict or a list."""
+    names = model.names
+    if isinstance(names, dict):
+        return names.get(class_index, 'unknown')
+    if 0 <= class_index < len(names):
+        return names[class_index]
+    return 'unknown'
+
+
+def run_single_inference(model, filepath):
+    """Run one YOLO model on one image and normalize the top prediction."""
+    if model is None:
+        raise RuntimeError('Inference model is not loaded.')
+
+    results = model(filepath, verbose=False)
+    if not results:
+        return {'class': 'unknown', 'confidence': 0.0}
+
+    result = results[0]
+
+    if result.probs is not None:
+        class_index = int(result.probs.top1)
+        confidence = float(result.probs.top1conf)
+        class_name = _class_name(model, class_index)
+    elif result.boxes is not None and len(result.boxes) > 0:
+        class_index = int(result.boxes.cls[0].item())
+        confidence = float(result.boxes.conf[0].item())
+        class_name = _class_name(model, class_index)
+    else:
+        class_name = 'unknown'
+        confidence = 0.0
+
+    return {
+        'class': class_name,
+        'confidence': round(confidence, 4),
+    }
+
+
+def process_images(parts_model, damage_model, image_inputs):
+    """
+    Process uploaded images while preserving each browser-visible filename/index.
+
+    image_inputs accepts dictionaries with path, filename, and index. Plain path
+    strings are also accepted for compatibility with older callers.
+    """
+    if parts_model is None or damage_model is None:
+        raise RuntimeError('One or more models are not loaded. Check server logs.')
+
+    final_results = []
+
+    for fallback_index, image_input in enumerate(image_inputs):
+        if isinstance(image_input, dict):
+            filepath = image_input['path']
+            filename = image_input.get('filename') or os.path.basename(filepath)
+            client_index = image_input.get('index', fallback_index)
+        else:
+            filepath = image_input
+            filename = os.path.basename(filepath)
+            client_index = fallback_index
+
+        print(f'Processing {filename}...')
+
+        part_prediction = run_single_inference(parts_model, filepath)
+        predicted_part = part_prediction['class']
+
+        if predicted_part in DAMAGE_CHECK_PARTS:
+            print(f"  -> Part '{predicted_part}' requires damage check. Running damage model...")
+            damage_prediction = run_single_inference(damage_model, filepath)
+        else:
+            print(f"  -> Part '{predicted_part}' does not require damage check. Defaulting to 'correct'.")
+            damage_prediction = {
+                'class': 'correct',
+                'confidence': 1.0,
+                'note': 'Result by default, not by model inference.',
+            }
+
+        final_results.append({
+            'index': client_index,
+            'filename': filename,
+            'part_prediction': part_prediction,
+            'damage_prediction': damage_prediction,
+        })
+
+    return final_results

requirements.txt

@@ -1,8 +1,7 @@
-Flask==3.1.1
-flask_cors==5.0.1
-python-dotenv==1.1.0
-torch
-ultralytics==8.3.151
-Werkzeug==3.1.3
-opencv-python-headless==4.10.0.84
-psycopg2-binary==2.9.10
+Flask==3.1.1
+flask_cors==5.0.1
+python-dotenv==1.1.0
+torch
+ultralytics==8.3.151
+Werkzeug==3.1.3
+opencv-python-headless==4.10.0.84

templates/index.html

@@ -0,0 +1,431 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YOLO Vision AI - Multi-Image Analysis</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+            min-height: 100vh;
+            overflow-x: hidden;
+            position: relative;
+            color: #e0e0e0;
+        }
+
+        .particles {
+            position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 0;
+        }
+        .particle {
+            position: absolute; width: 2px; height: 2px; background: #00d4ff; border-radius: 50%; animation: float 6s ease-in-out infinite; opacity: 0.6;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(180deg); }
+        }
+
+        .container {
+            position: relative; z-index: 1; max-width: 800px; margin: 0 auto; padding: 2rem; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
+        }
+        
+        .header {
+            text-align: center; margin-bottom: 2rem; animation: slideDown 1s ease-out; width: 100%;
+        }
+        .title {
+            font-size: 3.5rem; font-weight: 700; background: linear-gradient(45deg, #00d4ff, #ff00ff, #00ff88); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 3s ease-in-out infinite; margin-bottom: 1rem; text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
+        }
+        .subtitle {
+            font-size: 1.2rem; color: #a0a0a0; font-weight: 300;
+        }
+
+        .upload-area {
+            width: 100%; max-width: 550px; min-height: 300px; border: 2px dashed #00d4ff; border-radius: 20px; background: rgba(0, 212, 255, 0.05); backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; animation: slideUp 1s ease-out 0.3s both;
+        }
+        .upload-area:hover {
+            border-color: #ff00ff; background: rgba(255, 0, 255, 0.05); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
+        }
+        .upload-area.dragover {
+            border-color: #00ff88; background: rgba(0, 255, 136, 0.1); transform: scale(1.02);
+        }
+        .upload-icon {
+            font-size: 4rem; color: #00d4ff; margin-bottom: 1rem; transition: all 0.3s ease;
+        }
+        .upload-area:hover .upload-icon {
+            color: #ff00ff; transform: scale(1.1);
+        }
+        .upload-text {
+            color: #ffffff; font-size: 1.1rem; margin-bottom: 0.5rem; font-weight: 500;
+        }
+        .upload-subtext {
+            color: #a0a0a0; font-size: 0.9rem;
+        }
+        .file-input {
+            display: none;
+        }
+
+        .file-list-container {
+            display: none;
+            width: 100%;
+            max-width: 550px;
+            margin-top: 2rem;
+            animation: fadeIn 0.5s ease;
+        }
+        #fileList {
+            list-style: none;
+            background: rgba(0, 212, 255, 0.05);
+            border-radius: 10px;
+            padding: 1rem;
+            max-height: 200px;
+            overflow-y: auto;
+            border: 1px solid rgba(0, 212, 255, 0.2);
+        }
+        #fileList li {
+            padding: 0.5rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            color: #c0c0c0;
+        }
+        #fileList li:last-child {
+            border-bottom: none;
+        }
+        .analyze-button {
+            display: block;
+            width: 100%;
+            background: linear-gradient(45deg, #00d4ff, #0099cc); border: none; color: white; padding: 15px 40px; font-size: 1.1rem; font-weight: 600; border-radius: 50px; cursor: pointer; margin-top: 1.5rem; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px;
+        }
+        .analyze-button:hover {
+            transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 212, 255, 0.4); background: linear-gradient(45deg, #ff00ff, #cc0099);
+        }
+        .analyze-button:disabled {
+            opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; background: #555;
+        }
+
+        .loading {
+            display: none; margin-top: 2rem; text-align: center;
+        }
+        .spinner {
+            width: 40px; height: 40px; border: 4px solid rgba(0, 212, 255, 0.3); border-top: 4px solid #00d4ff; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto;
+        }
+        
+        #results-container {
+            margin-top: 2rem;
+            width: 100%;
+            max-width: 550px; /* Adjusted max-width */
+        }
+        .result-card {
+            padding: 1.5rem; 
+            background: rgba(255, 255, 255, 0.05); 
+            backdrop-filter: blur(15px); 
+            border: 1px solid rgba(0, 212, 255, 0.3); 
+            animation: slideUp 0.5s ease-out; 
+            margin-bottom: 2rem;
+            border-radius: 15px; /* Unified border radius */
+        }
+        
+        /* --- NEW: Image style within the card --- */
+        .result-image {
+            width: 100%;
+            height: auto;
+            max-height: 400px;
+            object-fit: contain;
+            border-radius: 10px;
+            margin-bottom: 1.5rem;
+            background-color: rgba(0,0,0,0.2);
+        }
+
+        .result-card h3 {
+            font-size: 1.2rem;
+            color: #00d4ff;
+            margin-bottom: 1.5rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+            font-weight: 600;
+            word-wrap: break-word;
+        }
+        .prediction-block {
+            margin-bottom: 1.5rem;
+        }
+        .prediction-block:last-child {
+            margin-bottom: 0;
+        }
+        .prediction-title {
+            font-size: 0.9rem;
+            color: #a0a0a0;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 0.5rem;
+        }
+        .prediction-class {
+            font-size: 1.8rem; /* Made class name larger */
+            font-weight: 700;
+            color: #00ff88;
+            text-transform: capitalize;
+            line-height: 1.2;
+        }
+        .prediction-confidence {
+            font-size: 1rem; /* Slightly larger confidence text */
+            color: #e0e0e0;
+        }
+        .damage-note {
+            font-size: 0.8rem;
+            color: #aaa;
+            font-style: italic;
+            margin-top: 4px;
+        }
+
+        .error {
+            color: #ff4444; background: rgba(255, 68, 68, 0.1); padding: 1rem; border-radius: 10px; border: 1px solid #ff4444; margin-top: 2rem; width: 100%; max-width: 550px;
+        }
+
+        @keyframes slideDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes slideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
+
+        @media (max-width: 768px) {
+            .title { font-size: 2.5rem; } .container { padding: 1rem; } .upload-area { min-height: 250px; }
+        }
+    </style>
+</head>
+<body>
+    <div class="particles" id="particles"></div>
+    
+    <div class="container">
+        <div class="header">
+            <h1 class="title">YOLO Vision AI</h1>
+            <p class="subtitle">Multi-Image Vehicle Part & Damage Analysis</p>
+        </div>
+
+        <div class="upload-area" id="uploadArea">
+            <div class="upload-icon">🔮</div>
+            <div class="upload-text">Drop your images here or click to upload</div>
+            <div class="upload-subtext">Supports PNG, JPG, JPEG formats</div>
+            <input type="file" id="fileInput" class="file-input" accept=".png,.jpg,.jpeg" multiple>
+        </div>
+
+        <div class="file-list-container" id="fileListContainer">
+            <ul id="fileList"></ul>
+            <button class="analyze-button" id="analyzeButton">🚀 Analyze Images</button>
+        </div>
+
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <p style="color: #00d4ff; margin-top: 1rem;">Processing your images...</p>
+        </div>
+
+        <div id="results-container"></div>
+
+        <div class="error" id="errorContainer" style="display: none;"></div>
+    </div>
+
+    <script>
+        // Create animated particles
+        function createParticles() {
+            const container = document.getElementById('particles');
+            if (container.children.length > 0) return;
+            for (let i = 0; i < 50; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.style.left = Math.random() * 100 + '%';
+                particle.style.top = Math.random() * 100 + '%';
+                particle.style.animationDelay = Math.random() * 6 + 's';
+                particle.style.animationDuration = (3 + Math.random() * 3) + 's';
+                container.appendChild(particle);
+            }
+        }
+        createParticles();
+
+        // DOM elements
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInput = document.getElementById('fileInput');
+        const fileListContainer = document.getElementById('fileListContainer');
+        const fileList = document.getElementById('fileList');
+        const analyzeButton = document.getElementById('analyzeButton');
+        const loading = document.getElementById('loading');
+        const errorContainer = document.getElementById('errorContainer');
+        const resultsContainer = document.getElementById('results-container');
+        
+        // Store file objects and their data URLs for preview.
+        let fileDataStore = [];
+        const sessionKey = (window.crypto && crypto.randomUUID)
+            ? crypto.randomUUID()
+            : `session-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+
+        // Event Listeners
+        uploadArea.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', handleFileSelect);
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            uploadArea.addEventListener(eventName, preventDefaults, false);
+        });
+        ['dragenter', 'dragover'].forEach(eventName => {
+            uploadArea.addEventListener(eventName, () => uploadArea.classList.add('dragover'), false);
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+            uploadArea.addEventListener(eventName, () => uploadArea.classList.remove('dragover'), false);
+        });
+        uploadArea.addEventListener('drop', handleDrop, false);
+        analyzeButton.addEventListener('click', analyzeImages);
+
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        function handleDrop(e) {
+            handleFiles(e.dataTransfer.files);
+        }
+
+        function handleFileSelect(e) {
+            handleFiles(e.target.files);
+        }
+        
+        // --- UPDATED: Reads files and generates data URLs for previews ---
+        async function handleFiles(files) {
+            if (files.length === 0) return;
+            
+            // Clear previous selections and results
+            resetUI();
+            fileDataStore = [];
+
+            const filePromises = Array.from(files).map(file => {
+                return new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        fileDataStore.push({ file: file, dataURL: e.target.result });
+                        resolve();
+                    };
+                    reader.onerror = reject;
+                    reader.readAsDataURL(file);
+                });
+            });
+
+            await Promise.all(filePromises);
+            
+            // Update the UI list
+            fileDataStore.forEach(item => {
+                const listItem = document.createElement('li');
+                listItem.textContent = `${item.file.name} (${(item.file.size / 1024).toFixed(1)} KB)`;
+                fileList.appendChild(listItem);
+            });
+            
+            fileListContainer.style.display = 'block';
+            uploadArea.style.display = 'none'; // Hide upload area after selection
+        }
+
+        async function analyzeImages() {
+            if (fileDataStore.length === 0) {
+                showError('Please select one or more images first');
+                return;
+            }
+
+            loading.style.display = 'block';
+            analyzeButton.disabled = true;
+            hideError();
+            resultsContainer.innerHTML = '';
+
+            try {
+                const formData = new FormData();
+                formData.append('session_key', sessionKey);
+                fileDataStore.forEach(item => {
+                    formData.append('file', item.file);
+                });
+
+                const response = await fetch('/predict', { method: 'POST', body: formData });
+                const data = await response.json();
+
+                if (response.ok) {
+                    displayResults(data);
+                } else {
+                    showError(data.error || 'An unknown error occurred during prediction');
+                }
+            } catch (error) {
+                showError('Failed to connect to the server. Please check your connection and try again.');
+                console.error('Error:', error);
+            } finally {
+                loading.style.display = 'none';
+                analyzeButton.disabled = false;
+                fileInput.value = '';
+            }
+        }
+        
+        // --- UPDATED: Displays results with image previews ---
+        function displayResults(results) {
+            if (!Array.isArray(results) || results.length === 0) {
+                resultsContainer.innerHTML = '<p>No results were returned from the server.</p>';
+                return;
+            }
+            
+            results.forEach(result => {
+                const fileData = Number.isInteger(result.index)
+                    ? fileDataStore[result.index]
+                    : fileDataStore.find(item => item.file.name === result.filename);
+                if (!fileData) return;
+
+                const card = document.createElement('div');
+                card.className = 'result-card';
+
+                const partPred = result.part_prediction || { class: 'unknown', confidence: 0 };
+                const damagePred = result.damage_prediction || { class: 'unknown', confidence: 0 };
+                const safeFilename = escapeHtml(result.filename || fileData.file.name);
+                const safePartClass = escapeHtml(String(partPred.class || 'unknown').replace(/_/g, ' '));
+                const safeDamageClass = escapeHtml(String(damagePred.class || 'unknown'));
+                const damageNote = damagePred.note
+                    ? `<div class="damage-note">${escapeHtml(String(damagePred.note))}</div>`
+                    : '';
+                const damageColor = damagePred.class === 'correct' ? '#00ff88' : '#ff4444';
+
+                card.innerHTML = `
+                    <img src="${fileData.dataURL}" alt="${safeFilename}" class="result-image">
+                    <h3>${safeFilename}</h3>
+                    <div class="prediction-block">
+                        <div class="prediction-title">Part Detected</div>
+                        <div class="prediction-class">${safePartClass}</div>
+                        <div class="prediction-confidence">Confidence: ${(Number(partPred.confidence || 0) * 100).toFixed(2)}%</div>
+                    </div>
+                    <div class="prediction-block">
+                        <div class="prediction-title">Damage Status</div>
+                        <div class="prediction-class" style="color: ${damageColor};">${safeDamageClass}</div>
+                        <div class="prediction-confidence">Confidence: ${(Number(damagePred.confidence || 0) * 100).toFixed(2)}%</div>
+                        ${damageNote}
+                    </div>
+                `;
+                resultsContainer.appendChild(card);
+            });
+        }
+        
+        function escapeHtml(value) {
+            return value.replace(/[&<>"']/g, char => ({
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#039;'
+            })[char]);
+        }
+
+        function resetUI() {
+            fileList.innerHTML = '';
+            resultsContainer.innerHTML = '';
+            fileListContainer.style.display = 'none';
+            uploadArea.style.display = 'flex';
+            hideError();
+        }
+
+        function showError(message) {
+            errorContainer.textContent = message;
+            errorContainer.style.display = 'block';
+        }
+
+        function hideError() {
+            errorContainer.style.display = 'none';
+        }
+    </script>
+</body>
+</html>