Save full-res before image so the before/after slider works from history View

app/main.py

@@ -35,6 +35,7 @@ try:
         for col, col_type in [
             ("zone", "VARCHAR(128) DEFAULT ''"),
             ("village", "VARCHAR(128) DEFAULT ''"),
+            ("before_full_path", "VARCHAR(512) DEFAULT ''"),
             ("before_thumb_path", "VARCHAR(512) DEFAULT ''"),
             ("after_thumb_path", "VARCHAR(512) DEFAULT ''"),
         ]:
@@ -236,7 +237,12 @@ async def detect(
     Image.fromarray(result_image).save(overlay_path)
     relative_overlay = f"overlays/{overlay_filename}"
 
-    # Save before/after thumbnails for history table (efficient small images)
+    # Save full-resolution before image (used by the before/after slider from history)
+    before_full_file = OVERLAYS_DIR / f"{base_name}_before.png"
+    before_pil.save(before_full_file)
+    relative_before_full = f"overlays/{base_name}_before.png"
+
+    # Save small thumbnails for the history table rows
     before_thumb_file = OVERLAYS_DIR / f"{base_name}_before_thumb.png"
     after_thumb_file = OVERLAYS_DIR / f"{base_name}_after_thumb.png"
     before_thumb_pil = before_pil.copy()
@@ -280,6 +286,7 @@ async def detect(
         change_percentage=change_pct,
         regions_count=len(change_regions),
         overlay_path=relative_overlay,
+        before_full_path=relative_before_full,
         before_thumb_path=relative_before_thumb,
         after_thumb_path=relative_after_thumb,
         regions_json=json.dumps(regions_serializable),
@@ -323,6 +330,7 @@ async def detect(
         "regions": regions_serializable,
         "overlayBase64Png": overlay_b64,
         "overlayUrl": f"/api/overlay/{relative_overlay}",
+        "beforeFullUrl": f"/api/overlay/{relative_before_full}",
         "beforeThumbUrl": f"/api/overlay/{relative_before_thumb}",
         "afterThumbUrl": f"/api/overlay/{relative_after_thumb}",
         "notificationSent": notification_sent,
@@ -400,6 +408,7 @@ def get_run(
         },
         "regions": regions,
         "overlayUrl": f"/api/overlay/{run.overlay_path}" if run.overlay_path else None,
+        "beforeFullUrl": f"/api/overlay/{run.before_full_path}" if (getattr(run, "before_full_path", None) or "").strip() else None,
         "beforeThumbUrl": f"/api/overlay/{run.before_thumb_path}" if (getattr(run, "before_thumb_path", None) or "").strip() else None,
         "afterThumbUrl": f"/api/overlay/{run.after_thumb_path}" if (getattr(run, "after_thumb_path", None) or "").strip() else None,
         "createdAt": run.created_at.isoformat(),
@@ -419,7 +428,7 @@ def delete_run(
     if not run:
         raise HTTPException(status_code=404, detail="Run not found")
     # Delete overlay and thumbnail files if they exist
-    for path_attr in ("overlay_path", "before_thumb_path", "after_thumb_path"):
+    for path_attr in ("overlay_path", "before_full_path", "before_thumb_path", "after_thumb_path"):
         path_val = getattr(run, path_attr, None)
         if path_val:
             f = OVERLAYS_DIR.parent / path_val

app/models.py

@@ -29,6 +29,7 @@ class DetectionRun(Base):
     change_percentage = Column(Float, nullable=False)
     regions_count = Column(Integer, default=0)
     overlay_path = Column(String(512), default="")
+    before_full_path = Column(String(512), default="")
     before_thumb_path = Column(String(512), default="")
     after_thumb_path = Column(String(512), default="")
     zone = Column(String(128), default="")

static/js/app.js

@@ -398,48 +398,30 @@ function showResult(data) {
   const beforeImg = document.getElementById('compare-before-img');
   const afterImg = document.getElementById('compare-after-img');
 
-  // "Before" side = original before image, "After" side = result overlay
-  const sliderSection = document.querySelector('.zoom-slider-section');
-  let hasBefore = false;
-
+  // "Before" side = original before image (full-res), "After" side = result overlay
   if (data.overlayBase64Png) {
-    // Fresh detection: result image is base64, before image from file picker
+    // Fresh detection: overlay is base64, before from file picker or saved full-res
     afterImg.src = 'data:image/png;base64,' + data.overlayBase64Png;
     const beforeFile = document.getElementById('file-before').files?.[0];
     if (beforeFile) {
-      hasBefore = true;
       readFileAsDataURL(beforeFile).then((url) => { beforeImg.src = url; });
-    } else if (data.beforeThumbUrl) {
-      hasBefore = true;
-      beforeImg.src = data.beforeThumbUrl;
+    } else {
+      beforeImg.src = data.beforeFullUrl || data.beforeThumbUrl || '';
     }
   } else {
-    // Loading from history: use stored URLs
+    // Loading from history: use full-res before image for slider, overlay for changes
     afterImg.src = data.overlayUrl || '';
-    if (data.beforeThumbUrl) {
-      hasBefore = true;
-      beforeImg.src = data.beforeThumbUrl;
-    }
+    beforeImg.src = data.beforeFullUrl || data.beforeThumbUrl || '';
   }
 
-  // If no before image available, still show the overlay but hide the slider handle
-  if (!hasBefore) {
-    beforeImg.src = afterImg.src;
-  }
-
-  // Wait for images to load before positioning the slider, then reset
+  // Wait for both images to fully load before positioning the slider handle
   let loaded = 0;
   const onReady = () => {
-    loaded++;
-    if (loaded >= 2) {
-      resetCompareSlider();
-      resetZoom();
-    }
+    if (++loaded >= 2) { resetCompareSlider(); resetZoom(); }
   };
   afterImg.onload = onReady;
   beforeImg.onload = onReady;
-  // Fallback for cached images (onload won't fire if already loaded)
-  setTimeout(() => { resetCompareSlider(); resetZoom(); }, 400);
+  setTimeout(() => { resetCompareSlider(); resetZoom(); }, 500);
 
   tbody.innerHTML = '';
   const regions = (data.regions || []).slice(0, 50);

templates/index.html

@@ -345,6 +345,6 @@
     </div>
   </div>
 
-  <script src="/static/js/app.js?v=18"></script>
+  <script src="/static/js/app.js?v=19"></script>
 </body>
 </html>