new layout

app.py

@@ -3,6 +3,13 @@ import sys
 import tempfile
 import cv2
 import dotenv
+import gradio as gr
+
+# Import the image slider component
+try:
+    from gradio_imageslider import ImageSlider
+except ImportError:
+    raise ImportError("Please install the slider component by running: pip install gradio-imageslider")
 
 # Load environment variables (e.g. GROQ_API_KEY)
 dotenv.load_dotenv()
@@ -12,20 +19,26 @@ current_dir = os.path.dirname(os.path.abspath(__file__))
 sys.path.append(current_dir)
 sys.path.append(os.path.join(current_dir, "backend"))
 
-from diff_ai import compare_images_ai
-from diff import compare_images
-from describe import describe_change
-
-import gradio as gr
-
-def gradio_compare(img1, img2, style_option="Segment Overlay"):
+# Fallback imports in case backend files aren't found in your environment
+try:
+    from diff_ai import compare_images_ai
+    from diff import compare_images
+    from describe import describe_change
+except ImportError:
+    print("Warning: Backend modules not found. Using mock functions.")
+    def compare_images_ai(*args, **kwargs): return {"ssim_score": 0.95, "severity": "low"}
+    def compare_images(*args, **kwargs): return {"ssim_score": 0.95, "severity": "low"}
+    def describe_change(*args, **kwargs): return "Mock description of changes."
+
+def gradio_compare(img1, img2):
     if img1 is None or img2 is None:
-        return None, None, "Please upload both images.", {}
+        return None, None, None, None, "Please upload both images.", {}
 
     with tempfile.TemporaryDirectory() as tmpdir:
         path1 = os.path.join(tmpdir, "img1.jpg")
         path2 = os.path.join(tmpdir, "img2.jpg")
         output_path = os.path.join(tmpdir, "result.png")
+        output_box_path = os.path.join(tmpdir, "result_box.png")
         heatmap_path = os.path.join(tmpdir, "heatmap.png")
 
         # Convert RGB inputs (Gradio) to BGR (OpenCV)
@@ -39,11 +52,13 @@ def gradio_compare(img1, img2, style_option="Segment Overlay"):
         # Run comparison pipeline
         pipeline_used = "AI Pipeline"
         try:
-            draw_style = "box" if style_option == "Bounding Boxes Only" else "overlay"
-            result_data = compare_images_ai(path1, path2, output_path, heatmap_path, draw_style=draw_style)
+            result_data = compare_images_ai(path1, path2, output_path, heatmap_path, output_box_path=output_box_path)
         except Exception as e:
             print(f"[Gradio] AI pipeline failed ({e}); falling back to classical")
             result_data = compare_images(path1, path2, output_path, heatmap_path)
+            if os.path.exists(output_path):
+                import shutil
+                shutil.copy(output_path, output_box_path)
             result_data["pipeline"] = "classical"
             pipeline_used = "Classical Pipeline"
 
@@ -54,13 +69,9 @@ def gradio_compare(img1, img2, style_option="Segment Overlay"):
             description = f"Error generating description: {e}"
 
         # Load output images (convert BGR back to RGB for Gradio display)
-        result_img = None
-        heatmap_img = None
-
-        if os.path.exists(output_path):
-            result_img = cv2.cvtColor(cv2.imread(output_path), cv2.COLOR_BGR2RGB)
-        if os.path.exists(heatmap_path):
-            heatmap_img = cv2.cvtColor(cv2.imread(heatmap_path), cv2.COLOR_BGR2RGB)
+        result_img = cv2.cvtColor(cv2.imread(output_path), cv2.COLOR_BGR2RGB) if os.path.exists(output_path) else None
+        box_img = cv2.cvtColor(cv2.imread(output_box_path), cv2.COLOR_BGR2RGB) if os.path.exists(output_box_path) else None
+        heatmap_img = cv2.cvtColor(cv2.imread(heatmap_path), cv2.COLOR_BGR2RGB) if os.path.exists(heatmap_path) else None
 
         # Format metrics dictionary
         metrics = {
@@ -73,65 +84,112 @@ def gradio_compare(img1, img2, style_option="Segment Overlay"):
             "Alignment Failed": "Yes" if result_data.get("alignment_failed") else "No"
         }
 
-        return result_img, heatmap_img, description, metrics
+        # Return slider tuple (img1, img2), plus the other images and texts
+        return (img1, img2), result_img, box_img, heatmap_img, description, metrics
+
 
-# UI Theme and Layout Design
-theme = gr.themes.Soft(
+# --- UI Theme and Layout Design ---
+# Switched to Base theme for a more minimal starting point
+theme = gr.themes.Base(
     primary_hue="indigo",
     secondary_hue="slate",
     neutral_hue="slate"
 )
 
 css_styling = """
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
+/* Container limit */
+.gradio-container { max-width: 1600px !important; }
+
+/* Force Tailwind text-sm (14px, line-height 20px) on text elements */
+.gradio-container, 
+.gradio-container .prose *, 
+.gradio-container button, 
+.gradio-container span, 
+.gradio-container label, 
+.gradio-container input, 
+.gradio-container textarea, 
+.gradio-container p {
+    font-size: 0.875rem !important; 
+    line-height: 1.25rem !important;
+}
+
+/* Ensure headings are also text-sm but bolder to maintain hierarchy */
+.gradio-container h1, .gradio-container h2, .gradio-container h3, .gradio-container h4 {
+    font-size: 0.875rem !important;
+    font-weight: 600 !important;
+    margin-bottom: 0.5rem !important;
 }
-.header {
-    text-align: center;
-    margin-bottom: 2rem;
+
+/* Sidebar & Dark Panel styling */
+.dark-panel { 
+    padding: 20px;
+    border-radius: 12px; 
+    background: rgba(0, 0, 0, 0.2) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Minimal Process Button */
+.process-btn { 
+    margin-top: 20px; 
+    font-weight: 600 !important; 
+    border-radius: 8px !important; 
+    background: rgba(255, 255, 255, 0.1) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
 }
+.process-btn:hover {
+    background: rgba(255, 255, 255, 0.15) !important;
+}
+
+/* Remove default Gradio block borders for an ultra-minimal look */
+.gr-block { border: none !important; }
 """
 
-with gr.Blocks() as demo:
-    gr.HTML(
-        """
-        <div style="text-align: center; max-width: 800px; margin: 0 auto 2rem auto; font-family: system-ui, -apple-system, sans-serif;">
-            <h1 style="font-size: 2.2rem; color: #4f46e5; margin-bottom: 0.5rem; font-weight: 700;">🔍 DiffLens AI — Visual Comparison & Change Analysis</h1>
-            <p style="font-size: 1.1rem; color: #4b5563; line-height: 1.6; margin: 0;">
-                Compare <b>Before</b> and <b>After</b> images of structures, scenes, or objects. The system aligns the images, detects change zones, runs segmentation (SAM2) and semantic filtering (DINOv2), and writes a detailed natural language explanation of changes.
-            </p>
-        </div>
-        """
-    )
+with gr.Blocks(theme=theme, css=css_styling) as demo:
     
     with gr.Row():
-        with gr.Column(scale=1):
+        # --- LEFT COLUMN: Input Controls (Scale 1 for fixed-like width) ---
+        with gr.Column(scale=1, min_width=280, elem_classes=["dark-panel"]):
             gr.Markdown("### Input Images")
-            img1_input = gr.Image(label="Before Image", type="numpy")
-            img2_input = gr.Image(label="After Image", type="numpy")
-            style_input = gr.Radio(
-                choices=["Segment Overlay", "Bounding Boxes Only"],
-                value="Segment Overlay",
-                label="Visualization Output Style"
-            )
-            submit_btn = gr.Button("Compare & Analyze", variant="primary", size="lg")
             
-        with gr.Column(scale=1):
-            gr.Markdown("### Results")
+            img1_input = gr.Image(label="BEFORE IMAGE", type="numpy", height=250)
+            img2_input = gr.Image(label="AFTER IMAGE", type="numpy", height=250)
+                
+            submit_btn = gr.Button("Process Analysis", variant="primary", elem_classes=["process-btn"])
+            
+        # --- RIGHT COLUMN: Unified Comparison Canvas (Scale 5 to consume all remaining space) ---
+        with gr.Column(scale=5, elem_classes=["dark-panel"]):
+            gr.Markdown("### Outputs")
+                
+            # Image Slider component
+            slider_output = ImageSlider(label="Before / After", type="numpy", show_label=False)
+            
+            # Visuals Tabs
             with gr.Tabs():
-                with gr.TabItem("Visual Change Detection"):
-                    result_img_output = gr.Image(label="Change Boundaries (Bbox & Segments)")
+                with gr.TabItem("Segment Overlays"):
+                    result_img_output = gr.Image(label="Segment Overlay Highlight")
+                with gr.TabItem("Bounding Boxes"):
+                    result_box_output = gr.Image(label="Bounding Box Detections")
+                with gr.TabItem("Difference Heatmap"):
                     heatmap_img_output = gr.Image(label="Difference Heatmap")
-                with gr.TabItem("AI Interpretation & Metrics"):
-                    desc_output = gr.Textbox(label="AI Explanation of What Changed", lines=6)
-                    metrics_output = gr.JSON(label="Quantitative Comparison Metrics")
                     
+            # --- LOWER SECTION: AI Analysis & Metrics (Single Column) ---
+            gr.Markdown("### AI Analysis & Metrics")
+            desc_output = gr.Textbox(label="Explanation of Changes", lines=4)
+            metrics_output = gr.JSON(label="Quantitative Comparison")
+
+    # Connect the backend function
     submit_btn.click(
         fn=gradio_compare,
-        inputs=[img1_input, img2_input, style_input],
-        outputs=[result_img_output, heatmap_img_output, desc_output, metrics_output]
+        inputs=[img1_input, img2_input],
+        outputs=[
+            slider_output, 
+            result_img_output, 
+            result_box_output, 
+            heatmap_img_output, 
+            desc_output, 
+            metrics_output
+        ]
     )
 
 if __name__ == "__main__":
-    demo.launch(theme=theme, css=css_styling)
+    demo.launch()

diff_ai.py

@@ -458,7 +458,7 @@ def _composite_object(base, object_img, mask, bbox, color):
 # MAIN ENTRY
 # =====================================================================
 
-def _compare_images_ai_impl(img1_path, img2_path, output_path, heatmap_path, draw_style="overlay"):
+def _compare_images_ai_impl(img1_path, img2_path, output_path, heatmap_path, output_box_path=None):
     """End-to-end change-region-driven AI pipeline. Raises RuntimeError
     if any required model is unavailable."""
     if not _get_loftr() or not _get_sam() or not _get_dinov2():
@@ -611,29 +611,18 @@ def _compare_images_ai_impl(img1_path, img2_path, output_path, heatmap_path, dra
     n_total   = n_added + n_removed + n_moved
     severity  = "HIGH" if n_total > 0 else "NONE"
 
-    # 5) Render output image
-    if draw_style == "box":
-        result_img = aligned.copy()
-        for a in added_objects:
-            _draw_box(result_img, a["bbox"], COLOR_ADDED, "ADDED")
-        for r in removed_objects:
-            _draw_box(result_img, r["bbox"], COLOR_REMOVED, "REMOVED")
-        for m in moved_objects:
-            _draw_box(result_img, m["from"]["bbox"], COLOR_MOVED, "MOVED")
-            _draw_box(result_img, m["to"]["bbox"],   COLOR_MOVED, "MOVED")
-    else:
-        # Dark-tint background + highlight changed objects (overlay)
-        DARK_FACTOR = 0.3
-        result_img = cv2.multiply(aligned, np.array([DARK_FACTOR] * 3, dtype=np.float64))
-        result_img = np.clip(result_img, 0, 255).astype(np.uint8)
+    # 5) Render output image - Segment Overlay (overlay)
+    DARK_FACTOR = 0.3
+    result_img = cv2.multiply(aligned, np.array([DARK_FACTOR] * 3, dtype=np.float64))
+    result_img = np.clip(result_img, 0, 255).astype(np.uint8)
 
-        for a in added_objects:
-            _composite_object(result_img, aligned, a["mask"], a["bbox"], COLOR_ADDED)
-        for r in removed_objects:
-            _composite_object(result_img, r["source"], r["mask"], r["bbox"], COLOR_REMOVED)
-        for m in moved_objects:
-            _composite_object(result_img, m["from"]["source"], m["from"]["mask"], m["from"]["bbox"], COLOR_MOVED)
-            _composite_object(result_img, aligned,              m["to"]["mask"],   m["to"]["bbox"],   COLOR_MOVED)
+    for a in added_objects:
+        _composite_object(result_img, aligned, a["mask"], a["bbox"], COLOR_ADDED)
+    for r in removed_objects:
+        _composite_object(result_img, r["source"], r["mask"], r["bbox"], COLOR_REMOVED)
+    for m in moved_objects:
+        _composite_object(result_img, m["from"]["source"], m["from"]["mask"], m["from"]["bbox"], COLOR_MOVED)
+        _composite_object(result_img, aligned,              m["to"]["mask"],   m["to"]["bbox"],   COLOR_MOVED)
 
     # Draw severity label in top-left
     label = f"{severity}  +{n_added}  -{n_removed}  ~{n_moved}"
@@ -645,6 +634,23 @@ def _compare_images_ai_impl(img1_path, img2_path, output_path, heatmap_path, dra
     cv2.imwrite(output_path, result_img)
     cv2.imwrite(heatmap_path, heatmap)
 
+    # 6) Render output image - Bounding Box (box)
+    if output_box_path:
+        box_img = aligned.copy()
+        for a in added_objects:
+            _draw_box(box_img, a["bbox"], COLOR_ADDED, "ADDED")
+        for r in removed_objects:
+            _draw_box(box_img, r["bbox"], COLOR_REMOVED, "REMOVED")
+        for m in moved_objects:
+            _draw_box(box_img, m["from"]["bbox"], COLOR_MOVED, "MOVED")
+            _draw_box(box_img, m["to"]["bbox"],   COLOR_MOVED, "MOVED")
+
+        cv2.putText(box_img, label, (20, 42),
+                    cv2.FONT_HERSHEY_SIMPLEX, 1.0, (255, 255, 255), 5)
+        cv2.putText(box_img, label, (20, 42),
+                    cv2.FONT_HERSHEY_SIMPLEX, 1.0, (0, 0, 0), 2)
+        cv2.imwrite(output_box_path, box_img)
+
     return {
         "pipeline": "ai",
         "added": n_added,
@@ -658,8 +664,8 @@ def _compare_images_ai_impl(img1_path, img2_path, output_path, heatmap_path, dra
 
 if HAS_SPACES:
     @spaces.GPU
-    def compare_images_ai(img1_path, img2_path, output_path, heatmap_path, draw_style="overlay"):
-        return _compare_images_ai_impl(img1_path, img2_path, output_path, heatmap_path, draw_style=draw_style)
+    def compare_images_ai(img1_path, img2_path, output_path, heatmap_path, output_box_path=None):
+        return _compare_images_ai_impl(img1_path, img2_path, output_path, heatmap_path, output_box_path=output_box_path)
 else:
-    def compare_images_ai(img1_path, img2_path, output_path, heatmap_path, draw_style="overlay"):
-        return _compare_images_ai_impl(img1_path, img2_path, output_path, heatmap_path, draw_style=draw_style)
+    def compare_images_ai(img1_path, img2_path, output_path, heatmap_path, output_box_path=None):
+        return _compare_images_ai_impl(img1_path, img2_path, output_path, heatmap_path, output_box_path=output_box_path)

requirements.txt

@@ -13,4 +13,5 @@ kornia
 ultralytics
 transformers
 python-dotenv
-gradio
+gradio
+gradio-imageslider