Update app.py

app.py

@@ -1,8 +1,11 @@
 import os
+import uuid
+import threading
+import time
 import cv2
 import numpy as np
 import base64
-from flask import Flask, render_template_string, request, redirect, flash, url_for
+from flask import Flask, render_template_string, request, redirect, flash, url_for, jsonify
 import roboflow
 import torch
 from collections import Counter
@@ -10,6 +13,9 @@ from collections import Counter
 app = Flask(__name__)
 app.secret_key = 'your_secret_key'  # Replace with a secure secret key
 
+# Global dictionary to hold job progress and results
+jobs = {}  # jobs[job_id] = {"progress": int, "result": {…}}
+
 #########################################
 # 1. Initialize the Models
 #########################################
@@ -69,109 +75,108 @@ def custom_nms(preds, iou_threshold=0.3):
             filtered_preds.append(pred)
     return filtered_preds
 
-def process_image(image_path, object_type):
-    # Load image
-    image = cv2.imread(image_path)
-    if image is None:
-        print("DEBUG: cv2.imread failed to load the image from", image_path)
-        return None, "Could not read the image."
-
-    img_height, img_width = image.shape[:2]
-    detection_info = []  # List to hold detection results for display
-
-    if object_type == "box":
-        # --- Roboflow Box Detection & Measurement ---
-        if box_model is None:
-            print("DEBUG: Roboflow model is not initialized.")
-            return None, "Roboflow model is not available."
-        try:
-            results = box_model.predict(image_path, confidence=50, overlap=30).json()
-            predictions = results.get("predictions", [])
-        except Exception as e:
-            print("DEBUG: Error during Roboflow prediction:", e)
-            return None, "Error during Roboflow prediction."
-
-        processed_preds = []
-        for prediction in predictions:
+def process_image(job_id, image_path, object_type):
+    try:
+        jobs[job_id]['progress'] = 10
+        # Load image
+        image = cv2.imread(image_path)
+        if image is None:
+            jobs[job_id]['progress'] = 100
+            jobs[job_id]['result'] = {"error": "Could not read the image."}
+            return
+
+        jobs[job_id]['progress'] = 20
+        img_height, img_width = image.shape[:2]
+        detection_info = []
+
+        if object_type == "box":
+            if box_model is None:
+                jobs[job_id]['progress'] = 100
+                jobs[job_id]['result'] = {"error": "Roboflow model not available."}
+                return
+            try:
+                results = box_model.predict(image_path, confidence=50, overlap=30).json()
+                predictions = results.get("predictions", [])
+            except Exception as e:
+                jobs[job_id]['progress'] = 100
+                jobs[job_id]['result'] = {"error": "Error during Roboflow prediction."}
+                return
+
+            processed_preds = []
+            for prediction in predictions:
+                try:
+                    x, y, width, height = prediction["x"], prediction["y"], prediction["width"], prediction["height"]
+                    x1 = int(round(x - width / 2))
+                    y1 = int(round(y - height / 2))
+                    x2 = int(round(x + width / 2))
+                    y2 = int(round(y + height / 2))
+                    x1 = max(0, min(x1, img_width - 1))
+                    y1 = max(0, min(y1, img_height - 1))
+                    x2 = max(0, min(x2, img_width - 1))
+                    y2 = max(0, min(y2, img_height - 1))
+                    processed_preds.append({
+                        "box": (x1, y1, x2, y2),
+                        "class": prediction["class"],
+                        "confidence": prediction["confidence"]
+                    })
+                except Exception as e:
+                    continue
+
+            box_detections = custom_nms(processed_preds, iou_threshold=0.3)
+            jobs[job_id]['progress'] = 60
+
+            # (Optional) Detect ArUco marker for measurement
+            marker_real_width_cm = 10.0
             try:
-                x, y, width, height = prediction["x"], prediction["y"], prediction["width"], prediction["height"]
-                x1 = int(round(x - width / 2))
-                y1 = int(round(y - height / 2))
-                x2 = int(round(x + width / 2))
-                y2 = int(round(y + height / 2))
-                # Clamp coordinates to image dimensions
-                x1 = max(0, min(x1, img_width - 1))
-                y1 = max(0, min(y1, img_height - 1))
-                x2 = max(0, min(x2, img_width - 1))
-                y2 = max(0, min(y2, img_height - 1))
-                processed_preds.append({
-                    "box": (x1, y1, x2, y2),
-                    "class": prediction["class"],
-                    "confidence": prediction["confidence"]
-                })
+                gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+                aruco_dict = cv2.aruco.getPredefinedDictionary(cv2.aruco.DICT_6X6_250)
+                aruco_params = cv2.aruco.DetectorParameters()
+                corners, ids, _ = cv2.aruco.detectMarkers(gray, aruco_dict, parameters=aruco_params)
+                if ids is not None and len(corners) > 0:
+                    marker_corners = corners[0].reshape((4, 2))
+                    cv2.aruco.drawDetectedMarkers(image, corners, ids)
+                    marker_width_pixels = np.linalg.norm(marker_corners[0] - marker_corners[1])
+                    marker_height_pixels = np.linalg.norm(marker_corners[1] - marker_corners[2])
+                    marker_pixel_size = (marker_width_pixels + marker_height_pixels) / 2.0
+                    conversion_factor = marker_real_width_cm / marker_pixel_size
+                else:
+                    conversion_factor = None
             except Exception as e:
-                print("DEBUG: Error processing a prediction:", e)
-                continue
-
-        box_detections = custom_nms(processed_preds, iou_threshold=0.3)
-
-        # Detect ArUco marker for measurement (only applicable for boxes)
-        marker_real_width_cm = 10.0  # The marker is 10cm x 10cm
-        try:
-            gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
-            aruco_dict = cv2.aruco.getPredefinedDictionary(cv2.aruco.DICT_6X6_250)
-            aruco_params = cv2.aruco.DetectorParameters()
-            corners, ids, _ = cv2.aruco.detectMarkers(gray, aruco_dict, parameters=aruco_params)
-            if ids is not None and len(corners) > 0:
-                marker_corners = corners[0].reshape((4, 2))
-                cv2.aruco.drawDetectedMarkers(image, corners, ids)
-                marker_width_pixels = np.linalg.norm(marker_corners[0] - marker_corners[1])
-                marker_height_pixels = np.linalg.norm(marker_corners[1] - marker_corners[2])
-                marker_pixel_size = (marker_width_pixels + marker_height_pixels) / 2.0
-                conversion_factor = marker_real_width_cm / marker_pixel_size
-            else:
                 conversion_factor = None
-        except Exception as e:
-            print("DEBUG: Error during ArUco detection:", e)
-            conversion_factor = None
-
-        # Draw box detections and record measurement info
-        for pred in box_detections:
-            x1, y1, x2, y2 = pred["box"]
-            label = pred["class"]
-            confidence = pred["confidence"]
-            cv2.rectangle(image, (x1, y1), (x2, y2), (0, 255, 0), 2)
-            if conversion_factor is not None:
-                box_width_pixels = x2 - x1
-                box_height_pixels = y2 - y1
-                box_width_cm = box_width_pixels * conversion_factor
-                box_height_cm = box_height_pixels * conversion_factor
-                size_text = f"{box_width_cm:.1f}x{box_height_cm:.1f} cm"
-                detection_info.append({
-                    "class": label,
-                    "confidence": f"{confidence:.2f}",
-                    "width_cm": f"{box_width_cm:.1f}",
-                    "height_cm": f"{box_height_cm:.1f}"
-                })
-            else:
-                size_text = ""
-                detection_info.append({
-                    "class": label,
-                    "confidence": f"{confidence:.2f}",
-                    "width_cm": "N/A",
-                    "height_cm": "N/A"
-                })
-            text = f"{label} ({confidence:.2f}) {size_text}"
-            (text_width, text_height), baseline = cv2.getTextSize(text, cv2.FONT_HERSHEY_SIMPLEX, 0.5, 1)
-            cv2.rectangle(image, (x1, y1 - text_height - baseline - 5), (x1 + text_width, y1 - 5), (0, 255, 0), -1)
-            cv2.putText(image, text, (x1, y1 - 5 - baseline), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 0, 0), 1)
-
-    elif object_type in {"person", "car"}:
-        # --- YOLOv5 for Persons or Cars (filtering for the selected type) ---
-        if yolov5_model is None:
-            print("DEBUG: YOLOv5 model is not initialized.")
-            return None, "YOLOv5 model is not available."
-        else:
+
+            for pred in box_detections:
+                x1, y1, x2, y2 = pred["box"]
+                label = pred["class"]
+                confidence = pred["confidence"]
+                cv2.rectangle(image, (x1, y1), (x2, y2), (0, 255, 0), 2)
+                if conversion_factor is not None:
+                    box_width_pixels = x2 - x1
+                    box_height_pixels = y2 - y1
+                    box_width_cm = box_width_pixels * conversion_factor
+                    box_height_cm = box_height_pixels * conversion_factor
+                    size_text = f"{box_width_cm:.1f}x{box_height_cm:.1f} cm"
+                    detection_info.append({
+                        "class": label,
+                        "confidence": f"{confidence:.2f}",
+                        "width_cm": f"{box_width_cm:.1f}",
+                        "height_cm": f"{box_height_cm:.1f}"
+                    })
+                else:
+                    detection_info.append({
+                        "class": label,
+                        "confidence": f"{confidence:.2f}",
+                        "width_cm": "N/A",
+                        "height_cm": "N/A"
+                    })
+                text = f"{label} ({confidence:.2f})"
+                (text_width, text_height), baseline = cv2.getTextSize(text, cv2.FONT_HERSHEY_SIMPLEX, 0.5, 1)
+                cv2.rectangle(image, (x1, y1 - text_height - baseline - 5), (x1 + text_width, y1 - 5), (0, 255, 0), -1)
+                cv2.putText(image, text, (x1, y1 - 5 - baseline), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 0, 0), 1)
+        elif object_type in {"person", "car"}:
+            if yolov5_model is None:
+                jobs[job_id]['progress'] = 100
+                jobs[job_id]['result'] = {"error": "YOLOv5 model not available."}
+                return
             try:
                 img_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
                 yolo_results = yolov5_model(img_rgb)
@@ -196,28 +201,30 @@ def process_image(image_path, object_type):
                             "height_cm": "N/A"
                         })
             except Exception as e:
-                print("DEBUG: Error during YOLOv5 inference:", e)
-                return None, "Error during YOLOv5 inference."
-    else:
-        err_msg = f"Unrecognized object type: {object_type}"
-        print("DEBUG:", err_msg)
-        return None, err_msg
-
-    # --- Build Top Summary Text ---
-    detection_counts = Counter(det["class"] for det in detection_info)
-    if detection_counts:
-        top_text = ", ".join(f"{cls}: {count}" for cls, count in detection_counts.items())
-        (info_width, info_height), info_baseline = cv2.getTextSize(top_text, cv2.FONT_HERSHEY_SIMPLEX, 1, 2)
-        cv2.rectangle(image, (5, 5), (5 + info_width, 5 + info_height + info_baseline), (0, 255, 0), -1)
-        cv2.putText(image, top_text, (5, 5 + info_height), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 0), 2)
-
-    return image, detection_info
+                jobs[job_id]['progress'] = 100
+                jobs[job_id]['result'] = {"error": "Error during YOLOv5 inference."}
+                return
+
+        # Build summary text (drawn on image)
+        detection_counts = Counter(det["class"] for det in detection_info)
+        if detection_counts:
+            top_text = ", ".join(f"{cls}: {count}" for cls, count in detection_counts.items())
+            (info_width, info_height), info_baseline = cv2.getTextSize(top_text, cv2.FONT_HERSHEY_SIMPLEX, 1, 2)
+            cv2.rectangle(image, (5, 5), (5 + info_width, 5 + info_height + info_baseline), (0, 255, 0), -1)
+            cv2.putText(image, top_text, (5, 5 + info_height), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 0), 2)
+
+        jobs[job_id]['progress'] = 100
+        retval, buffer = cv2.imencode('.jpg', image)
+        image_data = base64.b64encode(buffer).decode('utf-8')
+        jobs[job_id]['result'] = {"image_data": image_data, "detection_info": detection_info}
+    except Exception as e:
+        jobs[job_id]['progress'] = 100
+        jobs[job_id]['result'] = {"error": "Unexpected error during processing."}
 
 #########################################
 # 3. HTML Templates
 #########################################
 
-# --- Landing Page Template (New) ---
 landing_template = '''
 <!DOCTYPE html>
 <html lang="en">
@@ -228,42 +235,15 @@ landing_template = '''
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
-    body {
-      background-color: #fff;
-      color: #000;
-      font-family: "Share Tech Mono", monospace;
-      text-align: center;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      padding: 20px;
-      overflow: auto;
-    }
-    h1 {
-      font-size: 2.5rem;
-      margin-bottom: 20px;
-    }
-    p {
-      font-size: 1.5rem;
-      margin-bottom: 40px;
-    }
-    .btn {
-      display: inline-block;
-      margin: 10px;
-      padding: 15px 30px;
-      font-size: 1.2rem;
-      text-decoration: none;
-      border: 2px solid #000;
-      color: #000;
-      cursor: pointer;
-      transition: background-color 0.3s, color 0.3s;
-    }
-    .btn:hover {
-      background-color: #000;
-      color: #fff;
-    }
+    body { background-color: #fff; color: #000; font-family: "Share Tech Mono", monospace;
+         text-align: center; display: flex; flex-direction: column; justify-content: center;
+         align-items: center; min-height: 100vh; padding: 20px; }
+    h1 { font-size: 2.5rem; margin-bottom: 20px; }
+    p { font-size: 1.5rem; margin-bottom: 40px; }
+    .btn { display: inline-block; margin: 10px; padding: 15px 30px;
+           font-size: 1.2rem; text-decoration: none; border: 2px solid #000;
+           color: #000; transition: background-color 0.3s, color 0.3s; }
+    .btn:hover { background-color: #000; color: #fff; }
   </style>
 </head>
 <body>
@@ -278,267 +258,211 @@ landing_template = '''
 </html>
 '''
 
-# --- Upload & Result Page Template (Original Design with Home Button and Progress Bar Overlay) ---
 upload_template = '''
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MathLens - AI Detection & Measurement</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
-        body {
-            background-color: #fff;
-            color: #000;
-            font-family: "Share Tech Mono", monospace;
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            padding: 20px;
-            overflow: auto;
-        }
-        .typing-effect {
-            font-size: 2rem;
-            font-weight: bold;
-            margin-bottom: 20px;
-            height: 50px;
-            white-space: nowrap;
-        }
-        form {
-            margin-bottom: 20px;
-        }
-        input[type="file"], button {
-            display: block;
-            margin: 10px auto;
-            padding: 10px;
-            background: none;
-            border: 2px solid #000;
-            color: #000;
-            font-size: 1rem;
-            font-family: "Share Tech Mono", monospace;
-            cursor: pointer;
-        }
-        input[type="file"]::file-selector-button {
-            background: none;
-            border: none;
-            color: #000;
-            font-family: "Share Tech Mono", monospace;
-        }
-        .home-btn {
-            display: inline-block;
-            margin: 10px auto 20px;
-            padding: 10px 20px;
-            border: 2px solid #000;
-            color: #000;
-            text-decoration: none;
-            font-family: "Share Tech Mono", monospace;
-            cursor: pointer;
-            transition: background-color 0.3s, color 0.3s;
-        }
-        .home-btn:hover {
-            background-color: #000;
-            color: #fff;
-        }
-        /* Progress overlay styles */
-        #progressOverlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(255,255,255,0.9);
-            display: none;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            z-index: 9999;
-        }
-        #progressContainer {
-            width: 80%;
-            max-width: 400px;
-        }
-        #progressBar {
-            height: 20px;
-            width: 0;
-            background-color: #000;
-            border-radius: 10px;
-            -webkit-transition: width 0.05s linear;
-            transition: width 0.05s linear;
-        }
-        #progressText {
-            margin-top: 10px;
-            font-size: 1.2rem;
-            font-family: "Share Tech Mono", monospace;
-        }
-        .content-wrapper {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-evenly;
-            width: 100%;
-            max-width: 1200px;
-            flex-wrap: wrap;
-            gap: 20px;
-        }
-        .result-img {
-            max-width: 100%;
-            border: 2px solid #000;
-        }
-        table {
-            width: 100%;
-            max-width: 600px;
-            border-collapse: collapse;
-        }
-        th, td {
-            border: 1px solid #000;
-            padding: 5px;
-            text-align: center;
-        }
-        .footer {
-            margin-top: 20px;
-            font-size: 0.9em;
-            color: #000;
-        }
-        @media (max-width: 768px) {
-            .typing-effect {
-                font-size: 1.5rem;
-            }
-            .content-wrapper {
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-            }
-            .result-img {
-                max-width: 90%;
-            }
-            table {
-                max-width: 100%;
-            }
-        }
-    </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MathLens - AI Detection & Measurement</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
+    body { background-color: #fff; color: #000; font-family: "Share Tech Mono", monospace;
+           text-align: center; display: flex; flex-direction: column; justify-content: center;
+           align-items: center; min-height: 100vh; padding: 20px; }
+    .typing-effect { font-size: 2rem; font-weight: bold; margin-bottom: 20px;
+                     height: 50px; white-space: nowrap; }
+    form { margin-bottom: 20px; }
+    input[type="file"], button { display: block; margin: 10px auto; padding: 10px;
+                                 background: none; border: 2px solid #000; color: #000;
+                                 font-size: 1rem; font-family: "Share Tech Mono", monospace;
+                                 cursor: pointer; }
+    input[type="file"]::file-selector-button { background: none; border: none; color: #000; }
+    .home-btn { display: inline-block; margin: 10px auto 20px; padding: 10px 20px;
+                border: 2px solid #000; color: #000; text-decoration: none;
+                font-family: "Share Tech Mono", monospace; transition: background-color 0.3s, color 0.3s; }
+    .home-btn:hover { background-color: #000; color: #fff; }
+    /* Progress overlay styles */
+    #progressOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+                       background: rgba(255,255,255,0.9); display: none;
+                       align-items: center; justify-content: center; flex-direction: column;
+                       z-index: 9999; }
+    #progressContainer { width: 80%; max-width: 400px; }
+    #progressBar { height: 20px; width: 0; background-color: #000; border-radius: 10px;
+                   transition: width 0.2s linear; }
+    #progressText { margin-top: 10px; font-size: 1.2rem; }
+    .content-wrapper { display: flex; flex-direction: row; align-items: center;
+                       justify-content: space-evenly; width: 100%; max-width: 1200px;
+                       flex-wrap: wrap; gap: 20px; }
+    .result-img { max-width: 100%; border: 2px solid #000; }
+    table { width: 100%; max-width: 600px; border-collapse: collapse; }
+    th, td { border: 1px solid #000; padding: 5px; text-align: center; }
+    .footer { margin-top: 20px; font-size: 0.9em; color: #000; }
+    @media (max-width: 768px) {
+      .typing-effect { font-size: 1.5rem; }
+      .content-wrapper { flex-direction: column; align-items: center; }
+      .result-img { max-width: 90%; }
+      table { max-width: 100%; }
+    }
+  </style>
 </head>
 <body>
-    <!-- Home button -->
-    <a href="{{ url_for('landing') }}" class="home-btn">Home</a>
-    <!-- Progress overlay with progress bar and dynamic text -->
-    <div id="progressOverlay">
-       <div id="progressContainer">
-           <div id="progressBar"></div>
-           <div id="progressText">Starting up... 🛠️</div>
-       </div>
+  <!-- Home button -->
+  <a href="{{ url_for('landing') }}" class="home-btn">Home</a>
+  <!-- Progress overlay -->
+  <div id="progressOverlay">
+    <div id="progressContainer">
+      <div id="progressBar"></div>
+      <div id="progressText">Starting up... 🛠️</div>
     </div>
-    <div class="typing-effect" id="typing"></div>
-    <!-- The form now has an id and an onsubmit handler -->
-    <form id="uploadForm" method="post" enctype="multipart/form-data" onsubmit="handleFormSubmit(event)">
-        <input type="file" name="file" accept="image/*" required>
-        <!-- Hidden field to pass the selected object type -->
-        <input type="hidden" name="object_type" value="{{ object_type }}">
-        <button type="submit">Analyze Image</button>
-    </form>
+  </div>
+  <div class="typing-effect" id="typing"></div>
+  <!-- The file upload form (submission handled via AJAX) -->
+  <form id="uploadForm">
+    <input type="file" name="file" accept="image/*" required>
+    <!-- Hidden field to pass the selected object type -->
+    <input type="hidden" name="object_type" value="{{ object_type }}">
+    <button type="submit">Analyze Image</button>
+  </form>
+  <div id="resultContainer">
     {% if image_data or detection_info %}
-    <div class="content-wrapper">
+      <div class="content-wrapper">
         <img src="data:image/jpeg;base64,{{ image_data }}" alt="Processed Image" class="result-img">
         <table>
-            <thead>
-                <tr>
-                    <th>#</th>
-                    <th>Class</th>
-                    <th>Confidence</th>
-                    <th>Width (cm)</th>
-                    <th>Height (cm)</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for det in detection_info %}
-                <tr>
-                    <td>{{ loop.index }}</td>
-                    <td>{{ det.class }}</td>
-                    <td>{{ det.confidence }}</td>
-                    <td>{{ det.width_cm }}</td>
-                    <td>{{ det.height_cm }}</td>
-                </tr>
-                {% endfor %}
-            </tbody>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Class</th>
+              <th>Confidence</th>
+              <th>Width (cm)</th>
+              <th>Height (cm)</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for det in detection_info %}
+            <tr>
+              <td>{{ loop.index }}</td>
+              <td>{{ det.class }}</td>
+              <td>{{ det.confidence }}</td>
+              <td>{{ det.width_cm }}</td>
+              <td>{{ det.height_cm }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
         </table>
-    </div>
+      </div>
     {% endif %}
-    <div class="footer">&copy; 2024 MathLens AI Detection App. All rights reserved.</div>
-    <script>
-        // Intercept form submission and simulate a progress bar animation
-        function handleFormSubmit(e) {
-            e.preventDefault();
-            // Determine if the visitor is on mobile (adjust delay accordingly)
-            var isMobile = /Mobi|Android/i.test(navigator.userAgent);
-            var totalDelay = isMobile ? 5000 : 2000; // 5 seconds on mobile, 2 seconds on desktop
-            startProgressAndSubmit(totalDelay);
-        }
-
-        // Animate the progress overlay and then submit the form after the simulated delay
-        function startProgressAndSubmit(totalTime) {
-            var progressOverlay = document.getElementById("progressOverlay");
-            progressOverlay.style.display = "flex";
-            var progressBar = document.getElementById("progressBar");
-            var progressText = document.getElementById("progressText");
-            var progress = 0;
-            var updateInterval = totalTime / 100; // time (ms) per 1% increment
-            var phrases = [
-                { threshold: 0, text: "Starting up... 🛠️" },
-                { threshold: 10, text: "Writing scripts... 🤖" },
-                { threshold: 30, text: "Calculating formulas... 🧮" },
-                { threshold: 50, text: "Crunching numbers... 🔢" },
-                { threshold: 70, text: "Almost there... 🚀" },
-                { threshold: 90, text: "Finalizing... 🏁" },
-                { threshold: 100, text: "Done! ✅" }
-            ];
-            var interval = setInterval(function() {
-                progress++;
-                if (progress > 100) progress = 100;
-                progressBar.style.width = progress + "%";
-                for (var i = phrases.length - 1; i >= 0; i--) {
-                    if (progress >= phrases[i].threshold) {
-                        progressText.textContent = phrases[i].text;
-                        break;
-                    }
-                }
-                if (progress === 100) {
-                    clearInterval(interval);
-                    document.getElementById("uploadForm").submit();
-                }
-            }, updateInterval);
-        }
-
-        // Existing typing effect code
-        const textArray = ["MathLens", "Smart Counting with Maths"];
-        let textIndex = 0;
-        let charIndex = 0;
-        let isDeleting = false;
-        const typingElement = document.getElementById("typing");
-        function typeEffect() {
-            let currentText = textArray[textIndex];
-            if (isDeleting) {
-                typingElement.textContent = currentText.substring(0, charIndex--);
+  </div>
+  <div class="footer">&copy; 2024 MathLens AI Detection App. All rights reserved.</div>
+  <script>
+    // Handle typing effect (unchanged)
+    const textArray = ["MathLens", "Smart Counting with Maths"];
+    let textIndex = 0, charIndex = 0, isDeleting = false;
+    const typingElement = document.getElementById("typing");
+    function typeEffect() {
+      let currentText = textArray[textIndex];
+      if (isDeleting) {
+        typingElement.textContent = currentText.substring(0, charIndex--);
+      } else {
+        typingElement.textContent = currentText.substring(0, charIndex++);
+      }
+      if (!isDeleting && charIndex === currentText.length) {
+        setTimeout(() => { isDeleting = true; typeEffect(); }, 3000);
+      } else if (isDeleting && charIndex === 0) {
+        isDeleting = false;
+        textIndex = (textIndex + 1) % textArray.length;
+        setTimeout(typeEffect, 500);
+      } else {
+        setTimeout(typeEffect, isDeleting ? 50 : 100);
+      }
+    }
+    document.addEventListener("DOMContentLoaded", () => {
+      setTimeout(typeEffect, 500);
+    });
+
+    // AJAX-based submission and progress polling
+    const uploadForm = document.getElementById("uploadForm");
+    uploadForm.addEventListener("submit", function(e) {
+      e.preventDefault();
+      const formData = new FormData(uploadForm);
+      // Show progress overlay
+      document.getElementById("progressOverlay").style.display = "flex";
+      // Start the analysis job
+      fetch("{{ url_for('analyze') }}", {
+        method: "POST",
+        body: formData
+      })
+      .then(response => response.json())
+      .then(data => {
+        const jobId = data.job_id;
+        // Start polling progress every 500ms
+        const progressInterval = setInterval(() => {
+          fetch("{{ url_for('progress') }}?job_id=" + jobId)
+          .then(response => response.json())
+          .then(progData => {
+            const progress = progData.progress;
+            document.getElementById("progressBar").style.width = progress + "%";
+            // Update dynamic phrases based on progress
+            if (progress < 10) {
+              document.getElementById("progressText").textContent = "Starting up... 🛠️";
+            } else if (progress < 30) {
+              document.getElementById("progressText").textContent = "Writing scripts... 🤖";
+            } else if (progress < 50) {
+              document.getElementById("progressText").textContent = "Calculating formulas... 🧮";
+            } else if (progress < 70) {
+              document.getElementById("progressText").textContent = "Crunching numbers... 🔢";
+            } else if (progress < 90) {
+              document.getElementById("progressText").textContent = "Almost there... 🚀";
             } else {
-                typingElement.textContent = currentText.substring(0, charIndex++);
+              document.getElementById("progressText").textContent = "Finalizing... 🏁";
             }
-            if (!isDeleting && charIndex === currentText.length) {
-                setTimeout(() => { isDeleting = true; typeEffect(); }, 3000);
-            } else if (isDeleting && charIndex === 0) {
-                isDeleting = false;
-                textIndex = (textIndex + 1) % textArray.length;
-                setTimeout(typeEffect, 500);
-            } else {
-                setTimeout(typeEffect, isDeleting ? 50 : 100);
+            if (progress >= 100) {
+              clearInterval(progressInterval);
+              // Once done, fetch the result and update the page
+              fetch("{{ url_for('result') }}?job_id=" + jobId)
+              .then(response => response.json())
+              .then(resultData => {
+                document.getElementById("progressOverlay").style.display = "none";
+                // Replace the result container with the new result
+                document.getElementById("resultContainer").innerHTML = `
+                  <div class="content-wrapper">
+                    <img src="data:image/jpeg;base64,${resultData.image_data}" alt="Processed Image" class="result-img">
+                    ${buildTableHTML(resultData.detection_info)}
+                  </div>`;
+              });
             }
-        }
-        document.addEventListener("DOMContentLoaded", () => {
-            setTimeout(typeEffect, 500);
-        });
-    </script>
+          });
+        }, 500);
+      });
+    });
+
+    function buildTableHTML(detectionInfo) {
+      if (!detectionInfo || detectionInfo.length === 0) return "";
+      let tableHTML = `<table>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Class</th>
+              <th>Confidence</th>
+              <th>Width (cm)</th>
+              <th>Height (cm)</th>
+            </tr>
+          </thead>
+          <tbody>`;
+      detectionInfo.forEach((det, index) => {
+        tableHTML += `<tr>
+          <td>${index+1}</td>
+          <td>${det.class}</td>
+          <td>${det.confidence}</td>
+          <td>${det.width_cm}</td>
+          <td>${det.height_cm}</td>
+        </tr>`;
+      });
+      tableHTML += `</tbody></table>`;
+      return tableHTML;
+    }
+  </script>
 </body>
 </html>
 '''
@@ -547,59 +471,72 @@ upload_template = '''
 # 4. Flask Routes
 #########################################
 
-# Landing page: displays only the title and three buttons
+# Landing page (unchanged)
 @app.route('/')
 def landing():
     return render_template_string(landing_template)
 
-# Upload page: uses the original upload page design and processes the image.
-@app.route('/upload', methods=['GET', 'POST'])
+# Traditional upload page (in case you want to support non-AJAX)
+@app.route('/upload', methods=['GET'])
 def upload():
-    if request.method == 'GET':
-        # Get the selected object type from the query parameter
-        object_type = request.args.get('object_type', '').lower()
-        if object_type not in {"person", "car", "box"}:
-            flash("Please select a valid object type.")
-            return redirect(url_for('landing'))
-        return render_template_string(upload_template, object_type=object_type)
-    else:
-        # POST: process the uploaded image
-        if 'file' not in request.files:
-            flash('No file part')
-            return redirect(request.url)
-        file = request.files['file']
-        if file.filename == '':
-            flash('No selected file')
-            return redirect(request.url)
-        object_type = request.form.get('object_type', '').lower()
-        if object_type not in {"person", "car", "box"}:
-            flash("Invalid object type selected.")
-            return redirect(url_for('landing'))
-        upload_path = "uploaded.jpg"
-        try:
-            file.save(upload_path)
-        except Exception as e:
-            print("DEBUG: Error saving uploaded file:", e)
-            flash("Error saving uploaded file.")
-            return redirect(request.url)
-        processed_image, detection_info = process_image(upload_path, object_type)
-        if processed_image is None:
-            flash("Error Processing Image: " + detection_info)
-            return redirect(request.url)
-        else:
-            retval, buffer = cv2.imencode('.jpg', processed_image)
-            image_data = base64.b64encode(buffer).decode('utf-8')
-        try:
-            os.remove(upload_path)
-        except Exception as e:
-            print("DEBUG: Error removing uploaded file:", e)
-        return render_template_string(upload_template, object_type=object_type,
-                                      image_data=image_data, detection_info=detection_info)
+    object_type = request.args.get('object_type', '').lower()
+    if object_type not in {"person", "car", "box"}:
+        flash("Please select a valid object type.")
+        return redirect(url_for('landing'))
+    # In this version the AJAX version is preferred.
+    return render_template_string(upload_template, object_type=object_type)
+
+# Endpoint to start analysis (called via AJAX)
+@app.route('/analyze', methods=['POST'])
+def analyze():
+    # Save uploaded file
+    if 'file' not in request.files:
+        return jsonify({"error": "No file provided."}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({"error": "No selected file."}), 400
+    object_type = request.form.get('object_type', '').lower()
+    if object_type not in {"person", "car", "box"}:
+        return jsonify({"error": "Invalid object type."}), 400
+    upload_path = "uploaded.jpg"
+    try:
+        file.save(upload_path)
+    except Exception as e:
+        return jsonify({"error": "Error saving file."}), 500
+
+    # Create a unique job id and initialize job progress
+    job_id = str(uuid.uuid4())
+    jobs[job_id] = {"progress": 0, "result": None}
+    # Start background thread to process image
+    thread = threading.Thread(target=process_image, args=(job_id, upload_path, object_type))
+    thread.start()
+    # Optionally remove the uploaded file after starting the thread
+    # (In a real system, you might want to keep it until processing is done.)
+    return jsonify({"job_id": job_id})
+
+# Endpoint for client to poll progress
+@app.route('/progress', methods=['GET'])
+def progress():
+    job_id = request.args.get('job_id', '')
+    if job_id not in jobs:
+        return jsonify({"progress": 0})
+    return jsonify({"progress": jobs[job_id].get("progress", 0)})
+
+# Endpoint for client to fetch final result
+@app.route('/result', methods=['GET'])
+def result():
+    job_id = request.args.get('job_id', '')
+    if job_id not in jobs or jobs[job_id].get("result") is None:
+        return jsonify({"error": "Result not available."}), 404
+    result = jobs[job_id]["result"]
+    # Clean up job if desired
+    del jobs[job_id]
+    return jsonify(result)
 
 #########################################
 # 5. Run the App
 #########################################
 
 if __name__ == '__main__':
-    # Runs on host 0.0.0.0 and port 7860 (adjust as needed)
-    app.run(host="0.0.0.0", port=7860)
+    # Run in threaded mode so background threads can work
+    app.run(host="0.0.0.0", port=7860, threaded=True)