Update app.py

app.py

@@ -5,20 +5,16 @@ import matplotlib.pyplot as plt
 import warnings
 warnings.filterwarnings("ignore")
 
-# Monkey-patch matplotlib.use so that graph_cut_segmentation.py's
-# module-level `matplotlib.use("TkAgg")` call becomes a no-op on import.
-# We cannot modify that file, so we intercept here instead.
+# Monkey-patch matplotlib.use so graph_cut_segmentation.py's TkAgg call is a no-op
 _real_use = matplotlib.use
 matplotlib.use = lambda *a, **kw: None
 
-# ── Standard imports ───────────────────────────────────────────────────
 import gradio as gr
 import numpy as np
 import cv2
 import io
 from PIL import Image
 
-# ── Pipeline imports (TkAgg call inside module is now intercepted) ─────
 from graph_cut_segmentation import (
     iterative_graph_cut,
     refine_segmentation,
@@ -29,8 +25,7 @@ from graph_cut_segmentation import (
     generate_auto_annotations,
 )
 
-# Restore real matplotlib.use now that the problematic import is done
-matplotlib.use = _real_use
+matplotlib.use = _real_use  # restore after import
 
 
 # ══════════════════════════════════════════════════════════════════════
@@ -46,20 +41,13 @@ def to_numpy(img):
 
 
 def extract_mask(editor_out, target_hw):
-    """
-    Pull a binary mask from a Gradio ImageEditor output dict.
-    Any drawn pixel (alpha > 10) becomes foreground in the mask.
-    """
     h, w = target_hw
     blank = np.zeros((h, w), dtype=np.uint8)
-
     if editor_out is None:
         return blank
-
     layers = editor_out.get("layers", []) if isinstance(editor_out, dict) else [editor_out]
     if not layers:
         return blank
-
     combined = blank.copy()
     for layer in layers:
         if layer is None:
@@ -67,7 +55,6 @@ def extract_mask(editor_out, target_hw):
         arr = to_numpy(layer)
         if arr is None:
             continue
-        # RGBA: use alpha; RGB: use any non-black pixel
         if arr.ndim == 3 and arr.shape[2] == 4:
             alpha = arr[:, :, 3]
         elif arr.ndim == 3:
@@ -78,20 +65,18 @@ def extract_mask(editor_out, target_hw):
         if alpha.shape != (h, w):
             alpha = cv2.resize(alpha, (w, h), interpolation=cv2.INTER_NEAREST)
         combined = np.maximum(combined, (alpha > 10).astype(np.uint8))
-
     return combined
 
 
 def make_energy_plot(energies):
     fig, ax = plt.subplots(figsize=(7, 4), facecolor="#FFF8F3")
     ax.set_facecolor("#FFF8F3")
-    iters = range(1, len(energies) + 1)
-    ax.plot(list(iters), energies, "o-",
-            color="#E8845A", linewidth=2.5, markersize=9,
+    iters = list(range(1, len(energies) + 1))
+    ax.plot(iters, energies, "o-", color="#E8845A", linewidth=2.5, markersize=9,
             markerfacecolor="#C85E35", markeredgecolor="white", markeredgewidth=1.5)
     best_i = int(np.argmin(energies))
-    ax.axvline(best_i + 1, color="#A0522D", linestyle="--",
-               alpha=0.65, label=f"Best iteration: {best_i + 1}")
+    ax.axvline(best_i + 1, color="#A0522D", linestyle="--", alpha=0.65,
+               label=f"Best iteration: {best_i + 1}")
     ax.legend(fontsize=10, framealpha=0.7, edgecolor="#D4B896")
     ax.set_xlabel("Iteration", fontsize=12, color="#3D2B1F")
     ax.set_ylabel("Total Energy", fontsize=12, color="#3D2B1F")
@@ -119,8 +104,7 @@ def make_iterations_plot(all_masks, refined_mask):
         axes[i].set_title(f"Iteration {i + 1}", fontsize=11, color="#3D2B1F")
         axes[i].axis("off")
     axes[n].imshow(refined_mask, cmap="gray")
-    axes[n].set_title("Post-Processed", fontsize=11,
-                       color="#C85E35", fontweight="bold")
+    axes[n].set_title("Post-Processed", fontsize=11, color="#C85E35", fontweight="bold")
     axes[n].axis("off")
     plt.tight_layout()
     buf = io.BytesIO()
@@ -131,22 +115,18 @@ def make_iterations_plot(all_masks, refined_mask):
 
 
 # ══════════════════════════════════════════════════════════════════════
-# Core segmentation function
+# Core segmentation
 # ══════════════════════════════════════════════════════════════════════
 
 def run_segmentation(fg_editor, bg_editor, uploaded_image,
                      max_dim, iterations, gamma, n_components, use_auto):
-
     if uploaded_image is None:
         raise gr.Error("Please upload an image first.")
-
     img_arr = to_numpy(uploaded_image)
     if img_arr.ndim == 2:
         img_arr = cv2.cvtColor(img_arr, cv2.COLOR_GRAY2RGB)
-
     image_bgr = cv2.cvtColor(img_arr, cv2.COLOR_RGB2BGR)
 
-    # Resize
     h, w = image_bgr.shape[:2]
     max_dim = int(max_dim)
     if max(h, w) > max_dim:
@@ -155,7 +135,6 @@ def run_segmentation(fg_editor, bg_editor, uploaded_image,
                                 interpolation=cv2.INTER_AREA)
     h, w = image_bgr.shape[:2]
 
-    # Annotations
     if use_auto:
         fg_mask, bg_mask = generate_auto_annotations(image_bgr)
     else:
@@ -163,12 +142,10 @@ def run_segmentation(fg_editor, bg_editor, uploaded_image,
         bg_mask = extract_mask(bg_editor, (h, w))
         if fg_mask.sum() == 0 or bg_mask.sum() == 0:
             raise gr.Error(
-                "Both foreground and background scribbles are required. "
-                "Draw on the object (left canvas) and the background (right canvas), "
-                "or tick 'Auto Annotation'."
+                "Both foreground (green) and background (red) scribbles are required. "
+                "Draw on each canvas, or enable Auto Annotation."
             )
 
-    # Run graph cut pipeline
     raw_mask, all_masks, energies = iterative_graph_cut(
         image_bgr, fg_mask, bg_mask,
         n_iterations=int(iterations),
@@ -177,50 +154,33 @@ def run_segmentation(fg_editor, bg_editor, uploaded_image,
     )
     refined_mask = refine_segmentation(raw_mask, image_bgr)
 
-    # Naive baselines (aligned to graph-cut label convention)
-    naive_otsu = naive_thresholding_segmentation(image_bgr)
-    naive_km   = naive_kmeans_segmentation(image_bgr)
-    naive_otsu = align_naive_to_graphcut(naive_otsu, refined_mask)
-    naive_km   = align_naive_to_graphcut(naive_km,   refined_mask)
+    naive_otsu = align_naive_to_graphcut(naive_thresholding_segmentation(image_bgr), refined_mask)
+    naive_km   = align_naive_to_graphcut(naive_kmeans_segmentation(image_bgr),        refined_mask)
 
-    # ── Build output visuals ──────────────────────────────────────────
-
-    # Annotation visualisation
     annot = image_bgr.copy()
     annot[fg_mask == 1] = [0, 255, 0]
     annot[bg_mask == 1] = [0, 0, 255]
-    annot_rgb = cv2.cvtColor(annot, cv2.COLOR_BGR2RGB)
 
-    # Masks → 3-channel for display
     def gray3(m):
         return cv2.cvtColor((m * 255).astype(np.uint8), cv2.COLOR_GRAY2RGB)
 
-    raw_rgb     = gray3(raw_mask)
-    refined_rgb = gray3(refined_mask)
-    otsu_rgb    = gray3(naive_otsu)
-    km_rgb      = gray3(naive_km)
-
-    # Overlay
-    overlay_rgb = cv2.cvtColor(
-        create_overlay(image_bgr, refined_mask), cv2.COLOR_BGR2RGB)
-
-    # Extracted foreground (white background)
     ext = image_bgr.copy()
     ext[refined_mask == 0] = [255, 255, 255]
-    ext_rgb = cv2.cvtColor(ext, cv2.COLOR_BGR2RGB)
-
-    # Plots
-    energy_img = make_energy_plot(energies)
-    iter_img   = make_iterations_plot(all_masks, refined_mask)
 
-    return (annot_rgb, raw_rgb, refined_rgb,
-            overlay_rgb, ext_rgb,
-            otsu_rgb, km_rgb,
-            energy_img, iter_img)
+    return (
+        cv2.cvtColor(annot, cv2.COLOR_BGR2RGB),
+        gray3(raw_mask),
+        gray3(refined_mask),
+        cv2.cvtColor(create_overlay(image_bgr, refined_mask), cv2.COLOR_BGR2RGB),
+        cv2.cvtColor(ext, cv2.COLOR_BGR2RGB),
+        gray3(naive_otsu),
+        gray3(naive_km),
+        make_energy_plot(energies),
+        make_iterations_plot(all_masks, refined_mask),
+    )
 
 
 def update_editors(img):
-    """Push uploaded image as background into both annotation editors."""
     if img is None:
         return gr.update(value=None), gr.update(value=None)
     pil = Image.fromarray(img.astype(np.uint8))
@@ -228,343 +188,497 @@ def update_editors(img):
 
 
 # ══════════════════════════════════════════════════════════════════════
-# UI — warm aesthetic
+# CSS  —  forces light warm theme over every Gradio 6.x element
 # ══════════════════════════════════════════════════════════════════════
 
 CSS = """
-/* ── Base ── */
-body, .gradio-container {
-    background-color: #FFF8F3 !important;
-    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
+/* ─── Google Font ─── */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
+/* ─── Root tokens ─── */
+:root {
+    --warm-bg:      #FFF8F3;
+    --warm-card:    #FFFFFF;
+    --warm-border:  #EDD9C8;
+    --warm-text:    #3D2B1F;
+    --warm-muted:   #7A4F3A;
+    --warm-accent:  #E8845A;
+    --warm-accent2: #C85E35;
+    --warm-light:   #FFF3EC;
 }
 
-/* ── Cards ── */
-.card {
-    background: #FFFFFF;
-    border-radius: 16px;
-    border: 1px solid #EDD9C8;
-    box-shadow: 0 4px 18px rgba(180, 110, 60, 0.08);
-    padding: 22px 24px;
-    margin-bottom: 18px;
+/* ─── Base ─── */
+*, *::before, *::after { box-sizing: border-box; }
+
+body,
+.gradio-container,
+.gradio-container > .main,
+.gradio-container > .main > .wrap,
+.gap,
+footer {
+    background-color: var(--warm-bg) !important;
+    font-family: 'Inter', sans-serif !important;
+    color: var(--warm-text) !important;
 }
 
-/* ── Section title ── */
-.sec-title {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 17px;
-    font-weight: 700;
-    color: #3D2B1F;
-    margin: 0 0 16px 0;
+/* ─── Remove dark panel backgrounds ─── */
+.block,
+.block.padded,
+.panel,
+.form,
+.box,
+.contain,
+.wrap,
+.inner-wrap,
+.input-wrapper,
+.output-class,
+.image-container,
+.preview {
+    background: var(--warm-card) !important;
+    border-color: var(--warm-border) !important;
+    color: var(--warm-text) !important;
 }
-.step-badge {
-    background: linear-gradient(135deg, #E8845A, #C85E35);
-    color: white;
-    border-radius: 50%;
-    width: 30px; height: 30px;
-    display: inline-flex;
-    align-items: center; justify-content: center;
-    font-size: 13px; font-weight: 800;
-    flex-shrink: 0;
+
+/* ─── All text nodes ─── */
+p, span, div, h1, h2, h3, h4, label, legend, li {
+    color: var(--warm-text) !important;
+    font-family: 'Inter', sans-serif !important;
 }
 
-/* ── Run button ── */
-#run-btn {
-    background: linear-gradient(135deg, #E8845A 0%, #C85E35 100%) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 14px !important;
-    font-size: 17px !important;
+/* ─── Labels above components ─── */
+.label-wrap > span,
+label > span,
+.block > label > span {
+    font-size: 13.5px !important;
     font-weight: 700 !important;
-    padding: 15px 0 !important;
-    letter-spacing: 0.4px !important;
-    box-shadow: 0 6px 22px rgba(200, 94, 53, 0.38) !important;
-    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
-    width: 100% !important;
+    color: var(--warm-text) !important;
+    letter-spacing: 0.15px !important;
 }
-#run-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 10px 28px rgba(200, 94, 53, 0.48) !important;
+
+/* ─── Info/description text below sliders ─── */
+.info, .description, [class*="description"] {
+    font-size: 12px !important;
+    color: var(--warm-muted) !important;
 }
 
-/* ── Labels ── */
-label > span, .label-wrap span {
-    color: #5C3D2E !important;
+/* ─── Inputs / numbers ─── */
+input[type="number"],
+input[type="text"],
+textarea {
+    background: var(--warm-light) !important;
+    border: 1.5px solid var(--warm-border) !important;
+    color: var(--warm-text) !important;
+    border-radius: 8px !important;
+}
+input[type="number"]:focus,
+input[type="text"]:focus,
+textarea:focus {
+    border-color: var(--warm-accent) !important;
+    outline: none !important;
+    box-shadow: 0 0 0 3px rgba(232,132,90,0.15) !important;
+}
+
+/* ─── Sliders ─── */
+input[type="range"] {
+    accent-color: var(--warm-accent) !important;
+    cursor: pointer !important;
+}
+
+/* ─── Checkbox ─── */
+input[type="checkbox"] {
+    accent-color: var(--warm-accent) !important;
+    width: 16px !important;
+    height: 16px !important;
+}
+.checkbox-wrap label span,
+.checkbox-label {
+    color: var(--warm-text) !important;
     font-weight: 600 !important;
 }
-input[type=range] { accent-color: #E8845A; }
-input[type=checkbox] { accent-color: #E8845A; }
-
-/* ── Output image labels ── */
-.out-lbl {
-    font-size: 11.5px;
-    font-weight: 700;
-    color: #A07060;
-    text-align: center;
-    text-transform: uppercase;
-    letter-spacing: 0.6px;
-    margin-bottom: 5px;
+
+/* ─── Image upload area ─── */
+.upload-container,
+.upload-btn,
+[data-testid="image"] {
+    background: var(--warm-light) !important;
+    border: 2px dashed var(--warm-border) !important;
+    border-radius: 12px !important;
 }
-.out-lbl.gc { color: #C85E35; }
-.out-lbl.naive { color: #888; }
-
-/* ── Hint text ── */
-.hint {
-    font-size: 12.5px;
-    color: #A07060;
-    margin-top: 8px;
-    line-height: 1.55;
+.upload-container:hover { border-color: var(--warm-accent) !important; }
+
+/* ─── ImageEditor dark canvas area ─── */
+.image-editor,
+.image-editor > *,
+[data-testid="image-editor"],
+[data-testid="image-editor"] > * {
+    background: #F5EDE4 !important;
 }
 
-/* ── Hero ── */
-.hero {
+/* ─── Row/Column spacers ─── */
+.row, .column { background: transparent !important; }
+
+/* ─── Hero section ─── */
+.hero-wrap {
     text-align: center;
-    padding: 36px 20px 24px;
+    padding: 40px 24px 28px;
+    background: linear-gradient(160deg, #FFF8F3 0%, #FDECD8 100%);
+    border-radius: 20px;
+    border: 1px solid var(--warm-border);
+    margin-bottom: 20px;
 }
 .hero-badge {
     display: inline-block;
-    background: #F2C4A0;
+    background: linear-gradient(135deg, #F2C4A0, #EDA882);
     color: #7A3B1E;
-    border-radius: 20px;
-    padding: 5px 16px;
-    font-size: 11.5px;
-    font-weight: 700;
-    margin-bottom: 16px;
-    letter-spacing: 1px;
+    border-radius: 30px;
+    padding: 6px 20px;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 1.2px;
     text-transform: uppercase;
+    margin-bottom: 18px;
 }
-.hero h1 {
-    font-size: 34px;
-    font-weight: 800;
-    color: #3D2B1F;
-    margin: 0 0 10px;
-    line-height: 1.15;
+.hero-title {
+    font-size: 38px !important;
+    font-weight: 800 !important;
+    color: #3D2B1F !important;
+    margin: 0 0 12px !important;
+    line-height: 1.1 !important;
 }
-.hero p {
-    font-size: 15px;
-    color: #7A4F3A;
-    max-width: 640px;
-    margin: 0 auto;
-    line-height: 1.65;
+.hero-sub {
+    font-size: 15.5px !important;
+    color: #7A4F3A !important;
+    max-width: 600px;
+    margin: 0 auto !important;
+    line-height: 1.7 !important;
 }
 
-/* ── Divider ── */
-.warm-hr {
-    border: none;
-    border-top: 1px solid #EDD9C8;
-    margin: 4px 0 22px;
+/* ─── Section header ─── */
+.sec-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 18px 0 14px;
+    border-bottom: 2px solid var(--warm-border);
+    margin-bottom: 18px;
+}
+.step-num {
+    width: 32px; height: 32px;
+    background: linear-gradient(135deg, var(--warm-accent), var(--warm-accent2));
+    color: white;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center; justify-content: center;
+    font-size: 14px; font-weight: 800;
+    flex-shrink: 0;
+    box-shadow: 0 3px 10px rgba(200,94,53,0.35);
+}
+.sec-title-text {
+    font-size: 18px !important;
+    font-weight: 800 !important;
+    color: #3D2B1F !important;
+    margin: 0 !important;
+}
+.sec-sub {
+    font-size: 13px !important;
+    color: var(--warm-muted) !important;
+    margin: 0 !important;
+    font-weight: 400 !important;
 }
 
-/* ── Tips box ── */
+/* ─── Tips box ─── */
 .tips-box {
-    background: #FFF3EC;
-    border-left: 4px solid #E8845A;
-    border-radius: 0 10px 10px 0;
-    padding: 14px 16px;
-    font-size: 13.5px;
-    color: #5C3D2E;
-    line-height: 1.7;
+    background: var(--warm-light);
+    border-left: 4px solid var(--warm-accent);
+    border-radius: 0 12px 12px 0;
+    padding: 16px 18px;
+    font-size: 13.5px !important;
+    color: #5C3D2E !important;
+    line-height: 1.75;
+    height: 100%;
 }
+.tips-box b { color: var(--warm-accent2) !important; }
 
-/* ── Annotation color labels ── */
-.fg-label {
-    font-size: 13px; font-weight: 700;
-    color: #1A7A1A;
-    text-align: center; margin-bottom: 6px;
+/* ─── Annotation labels ─── */
+.anno-label {
+    text-align: center;
+    font-size: 13.5px !important;
+    font-weight: 800 !important;
+    padding: 10px 0 8px;
+    border-radius: 8px;
+    margin-bottom: 8px;
 }
-.bg-label {
-    font-size: 13px; font-weight: 700;
-    color: #B52020;
-    text-align: center; margin-bottom: 6px;
+.anno-fg { background: #E8F5E9; color: #1B5E20 !important; border: 1.5px solid #A5D6A7; }
+.anno-bg { background: #FFEBEE; color: #B71C1C !important; border: 1.5px solid #EF9A9A; }
+
+/* ─── Hint text ─── */
+.hint-text {
+    font-size: 12.5px !important;
+    color: var(--warm-muted) !important;
+    line-height: 1.6;
+    padding: 10px 4px 0;
 }
-"""
 
-HERO = """
-<div class="hero">
-  <div class="hero-badge">Graph Cut · GMM · PyMaxflow · Energy Minimisation</div>
-  <h1>🍂 Graph Cut Image Segmentation</h1>
-  <p>
-    Upload an image, paint foreground and background scribbles, then let
-    energy-minimisation-based Graph Cut precisely isolate your object —
-    guided by Gaussian Mixture Models and iterative refinement.
-  </p>
-</div>
+/* ─── Divider ─── */
+.warm-divider {
+    border: none;
+    border-top: 1.5px solid var(--warm-border);
+    margin: 6px 0 24px;
+}
+
+/* ─── RUN BUTTON ─── */
+#run-btn {
+    background: linear-gradient(135deg, #E8845A 0%, #C85E35 100%) !important;
+    color: #FFFFFF !important;
+    border: none !important;
+    border-radius: 14px !important;
+    font-size: 18px !important;
+    font-weight: 800 !important;
+    padding: 18px 0 !important;
+    letter-spacing: 0.5px !important;
+    box-shadow: 0 8px 28px rgba(200,94,53,0.42) !important;
+    transition: all 0.2s ease !important;
+    width: 100% !important;
+    cursor: pointer !important;
+}
+#run-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 12px 36px rgba(200,94,53,0.55) !important;
+}
+#run-btn:active { transform: translateY(0) !important; }
+
+/* ─── Output image panels ─── */
+.output-panel {
+    background: var(--warm-card) !important;
+    border-radius: 14px !important;
+    border: 1px solid var(--warm-border) !important;
+    overflow: hidden !important;
+    box-shadow: 0 2px 12px rgba(180,110,60,0.07) !important;
+}
+
+/* ─── Progress bar ─── */
+.progress-bar { background: var(--warm-accent) !important; }
+
+/* ─── Footer ─── */
+.footer-wrap {
+    text-align: center;
+    padding: 28px 0 12px;
+    font-size: 13px !important;
+    color: #B09080 !important;
+    border-top: 1px solid var(--warm-border);
+    margin-top: 12px;
+}
 """
 
+# ══════════════════════════════════════════════════════════════════════
+# UI
+# ══════════════════════════════════════════════════════════════════════
+
 with gr.Blocks(
-    theme=gr.themes.Soft(
+    css=CSS,
+    title="Graph Cut Segmentation",
+    theme=gr.themes.Base(
         primary_hue=gr.themes.colors.orange,
         secondary_hue=gr.themes.colors.amber,
         neutral_hue=gr.themes.colors.stone,
         font=gr.themes.GoogleFont("Inter"),
     ).set(
         body_background_fill="#FFF8F3",
+        body_text_color="#3D2B1F",
         block_background_fill="#FFFFFF",
         block_border_color="#EDD9C8",
+        block_label_background_fill="#FFF3EC",
+        block_label_text_color="#3D2B1F",
+        block_label_text_weight="700",
+        block_title_text_color="#3D2B1F",
+        block_title_text_weight="700",
+        input_background_fill="#FFF3EC",
+        input_border_color="#EDD9C8",
+        input_border_color_focus="#E8845A",
+        input_placeholder_color="#B09080",
+        checkbox_background_color="#FFF3EC",
+        checkbox_background_color_selected="#E8845A",
+        checkbox_border_color="#EDD9C8",
+        checkbox_label_text_color="#3D2B1F",
+        slider_color="#E8845A",
         button_primary_background_fill="#E8845A",
         button_primary_background_fill_hover="#C85E35",
-        button_primary_text_color="white",
+        button_primary_text_color="#FFFFFF",
+        button_primary_border_color="transparent",
+        button_secondary_background_fill="#FFF3EC",
+        button_secondary_text_color="#3D2B1F",
+        border_color_primary="#EDD9C8",
+        border_color_accent="#E8845A",
+        shadow_drop="0 2px 12px rgba(180,110,60,0.08)",
+        color_accent="#E8845A",
+        color_accent_soft="#FFF3EC",
+        link_text_color="#E8845A",
     ),
-    css=CSS,
-    title="Graph Cut Segmentation",
 ) as demo:
 
-    # ── Hero ───────────────────────────────────────────────────────────
-    gr.HTML(HERO)
-    gr.HTML('<hr class="warm-hr">')
-
-    # ── Step 1: Upload ─────────────────────────────────────────────────
+    # ── Hero ──────────────────────────────────────────────────────────
     gr.HTML("""
-    <div class="card">
-      <div class="sec-title">
-        <span class="step-badge">1</span> Upload Image
+    <div class="hero-wrap">
+      <div class="hero-badge">Graph Cut &nbsp;·&nbsp; GMM &nbsp;·&nbsp; PyMaxflow &nbsp;·&nbsp; Energy Minimisation</div>
+      <div class="hero-title">🍂 Graph Cut Image Segmentation</div>
+      <div class="hero-sub">
+        Upload an image, paint foreground &amp; background scribbles, and let
+        energy-minimisation Graph Cut isolate your object — powered by
+        Gaussian Mixture Models and iterative refinement.
       </div>
+    </div>
     """)
-    with gr.Row():
+
+    # ── STEP 1: Upload ────────────────────────────────────────────────
+    gr.HTML("""
+    <div class="sec-header">
+      <span class="step-num">1</span>
+      <span class="sec-title-text">Upload Image</span>
+    </div>
+    """)
+    with gr.Row(equal_height=True):
         with gr.Column(scale=3):
             img_upload = gr.Image(
                 label="Input Image",
                 type="numpy",
                 sources=["upload", "clipboard"],
-                height=300,
+                height=280,
             )
         with gr.Column(scale=1):
             gr.HTML("""
             <div class="tips-box">
-              <b>Tips for best results</b><br>
-              • Object with clear boundary from background<br>
-              • Natural photos, portraits, products work great<br>
-              • Higher contrast = cleaner segmentation<br>
-              • Any resolution — we resize automatically<br>
-              • JPEG or PNG
+              <b>Tips for best results</b><br><br>
+              ✅ Clear object boundary from background<br>
+              ✅ Natural photos, portraits, products<br>
+              ✅ Any resolution — resized automatically<br>
+              ✅ JPEG or PNG<br><br>
+              ⚡ Higher contrast = cleaner segmentation<br>
+              ⚡ Draw scribbles in diverse colour areas
             </div>
             """)
-    gr.HTML("</div>")
 
-    # ── Step 2: Parameters ─────────��───────────────────────────────────
+    gr.HTML('<hr class="warm-divider">')
+
+    # ── STEP 2: Parameters ────────────────────────────────────────────
     gr.HTML("""
-    <div class="card">
-      <div class="sec-title">
-        <span class="step-badge">2</span> Configure Parameters
-      </div>
+    <div class="sec-header">
+      <span class="step-num">2</span>
+      <span class="sec-title-text">Configure Parameters</span>
+    </div>
     """)
     with gr.Row():
-        max_dim    = gr.Slider(200, 800, value=400, step=50,  label="Max Dimension (px)",
-                               info="Larger = more detail, slower. 400 is a good default.")
-        iterations = gr.Slider(1,  10,  value=3,   step=1,   label="Iterations",
-                               info="How many GMM re-estimation rounds. 3–5 recommended.")
+        max_dim    = gr.Slider(200, 800, value=400, step=50, label="Max Dimension (px)",
+                               info="Larger = more detail but slower. 400 recommended.")
+        iterations = gr.Slider(1,   10, value=3,   step=1,  label="Iterations",
+                               info="GMM re-estimation rounds. 3–5 is optimal.")
     with gr.Row():
-        gamma      = gr.Slider(10, 200, value=50,  step=5,   label="Smoothness γ",
-                               info="Higher = smoother boundary. 50 is a good default.")
-        n_comp     = gr.Slider(2,  10,  value=5,   step=1,   label="GMM Components K",
-                               info="Colour clusters per region. 5 fits most images.")
+        gamma  = gr.Slider(10, 200, value=50, step=5, label="Smoothness γ",
+                           info="Higher = smoother boundary. Default 50.")
+        n_comp = gr.Slider(2,   10, value=5,  step=1, label="GMM Components K",
+                           info="Colour clusters per region. 5 fits most images.")
     use_auto = gr.Checkbox(
-        label="Auto Annotation — skip drawing (uses centre/border heuristic)",
+        label="⚡  Auto Annotation — skip drawing (uses centre/border heuristic)",
         value=False,
     )
-    gr.HTML("</div>")
 
-    # ── Step 3: Annotate ───────────────────────────────────────────────
+    gr.HTML('<hr class="warm-divider">')
+
+    # ── STEP 3: Annotate ──────────────────────────────────────────────
     gr.HTML("""
-    <div class="card">
-      <div class="sec-title">
-        <span class="step-badge">3</span> Annotate &nbsp;
-        <span style="font-size:13px; font-weight:400; color:#A07060;">
-          (skip if Auto Annotation is enabled above)
-        </span>
-      </div>
+    <div class="sec-header">
+      <span class="step-num">3</span>
+      <span class="sec-title-text">Annotate</span>
+      <span class="sec-sub">— skip this step if Auto Annotation is enabled above</span>
+    </div>
     """)
     with gr.Row():
         with gr.Column():
-            gr.HTML('<div class="fg-label">🟢 FOREGROUND — Paint over the object to keep</div>')
+            gr.HTML('<div class="anno-label anno-fg">🟢 FOREGROUND &nbsp;— paint over the object to keep</div>')
             fg_editor = gr.ImageEditor(
-                label="Foreground",
+                label="Foreground Canvas",
                 show_label=False,
                 height=380,
                 brush=gr.Brush(
-                    default_size=12,
+                    default_size=14,
                     default_color="#00CC44",
                     colors=["#00CC44", "#00FF00", "#22AA55"],
                     color_mode="defaults",
                 ),
             )
             gr.HTML("""
-            <div class="hint">
-              ✏️ Draw <b>green strokes</b> across the foreground object.
-              Cover several different regions — ears, body, edges — for a
-              richer GMM colour model.
+            <div class="hint-text">
+              ✏️ Draw <strong>green strokes</strong> across different parts of the object
+              (body, edges, texture areas) for a richer GMM colour model.
             </div>
             """)
         with gr.Column():
-            gr.HTML('<div class="bg-label">🔴 BACKGROUND — Paint over the background area</div>')
+            gr.HTML('<div class="anno-label anno-bg">🔴 BACKGROUND &nbsp;— paint over background areas</div>')
             bg_editor = gr.ImageEditor(
-                label="Background",
+                label="Background Canvas",
                 show_label=False,
                 height=380,
                 brush=gr.Brush(
-                    default_size=12,
+                    default_size=14,
                     default_color="#FF3333",
                     colors=["#FF3333", "#CC0000", "#FF6666"],
                     color_mode="defaults",
                 ),
             )
             gr.HTML("""
-            <div class="hint">
-              ✏️ Draw <b>red strokes</b> on background areas.
-              Cover different background textures (sky, floor, wall…)
-              to give the GMM diverse samples.
+            <div class="hint-text">
+              ✏️ Draw <strong>red strokes</strong> on background regions.
+              Cover varied textures (sky, floor, wall…) for better discrimination.
             </div>
             """)
-    gr.HTML("</div>")
 
-    # Sync upload → both editors
     img_upload.change(
         fn=update_editors,
         inputs=img_upload,
         outputs=[fg_editor, bg_editor],
     )
 
-    # ── Run ────────────────────────────────────────────────────────────
-    gr.HTML('<div style="padding: 4px 0 20px;">')
+    gr.HTML('<hr class="warm-divider">')
+
+    # ── RUN ───────────────────────────────────────────────────────────
     run_btn = gr.Button(
-        "▶  Run Graph Cut Segmentation",
+        "▶   Run Graph Cut Segmentation",
         elem_id="run-btn",
         variant="primary",
     )
-    gr.HTML("</div>")
 
-    # ── Step 4: Results ────────────────────────────────────────────────
+    gr.HTML('<hr class="warm-divider">')
+
+    # ── STEP 4: Results ───────────────────────────────────────────────
     gr.HTML("""
-    <div class="card">
-      <div class="sec-title">
-        <span class="step-badge">4</span> Segmentation Results
-      </div>
+    <div class="sec-header">
+      <span class="step-num">4</span>
+      <span class="sec-title-text">Segmentation Results</span>
+    </div>
     """)
     with gr.Row():
-        out_annot   = gr.Image(label="Input + Annotations",  height=260)
-        out_raw     = gr.Image(label="Raw Graph Cut",         height=260)
-        out_refined = gr.Image(label="Refined Graph Cut",     height=260)
+        out_annot   = gr.Image(label="📌 Input + Annotations", height=260)
+        out_raw     = gr.Image(label="✂️ Raw Graph Cut",        height=260)
+        out_refined = gr.Image(label="✨ Refined Graph Cut",    height=260)
     with gr.Row():
-        out_overlay = gr.Image(label="Overlay on Original",  height=260)
-        out_extract = gr.Image(label="Extracted Foreground", height=260)
-        out_otsu    = gr.Image(label="Naive: Otsu",          height=260)
-        out_km      = gr.Image(label="Naive: K-Means (k=2)", height=260)
-    gr.HTML("</div>")
+        out_overlay = gr.Image(label="🎨 Overlay on Original",  height=260)
+        out_extract = gr.Image(label="🖼️ Extracted Foreground", height=260)
+        out_otsu    = gr.Image(label="📊 Naive: Otsu",          height=260)
+        out_km      = gr.Image(label="📊 Naive: K-Means (k=2)", height=260)
 
-    # ── Step 5: Analysis ───────────────────────────────────────────────
+    gr.HTML('<hr class="warm-divider">')
+
+    # ── STEP 5: Analysis ──────────────────────────────────────────────
     gr.HTML("""
-    <div class="card">
-      <div class="sec-title">
-        <span class="step-badge">5</span> Convergence &amp; Iteration Analysis
-      </div>
+    <div class="sec-header">
+      <span class="step-num">5</span>
+      <span class="sec-title-text">Convergence &amp; Iteration Analysis</span>
+    </div>
     """)
     with gr.Row():
-        out_energy = gr.Image(label="Energy Convergence",      height=340)
-        out_iters  = gr.Image(label="Iterative Mask Progression", height=340)
-    gr.HTML("</div>")
+        out_energy = gr.Image(label="📈 Energy Convergence",         height=360)
+        out_iters  = gr.Image(label="🔄 Iterative Mask Progression", height=360)
 
-    # ── Wire up ────────────────────────────────────────────────────────
+    # ── Wire ──────────────────────────────────────────────────────────
     run_btn.click(
         fn=run_segmentation,
         inputs=[fg_editor, bg_editor, img_upload,
@@ -576,11 +690,10 @@ with gr.Blocks(
         show_progress="full",
     )
 
-    # ── Footer ─────────────────────────────────────────────────────────
+    # ��─ Footer ────────────────────────────────────────────────────────
     gr.HTML("""
-    <div style="text-align:center; padding: 24px 0 10px;
-                font-size: 13px; color: #B09080;">
-      CSL7360: Computer Vision · Assignment 2 ·
+    <div class="footer-wrap">
+      CSL7360: Computer Vision &nbsp;·&nbsp; Assignment 2 &nbsp;·&nbsp;
       Graph Cut Segmentation via PyMaxflow &amp; GMMs
     </div>
     """)