Space: download weights from model repo

.gitignore

@@ -0,0 +1 @@
+venv/ pycache/ *.pyc *.log .DS_Store

app.py

@@ -0,0 +1,289 @@
+import gradio as gr
+import numpy as np
+import torch
+from pathlib import Path
+from PIL import Image
+from inference import load_model, predict
+
+# -------- Hub / Weights Configuration --------
+HUB_REPO_ID = "g-loubna/bridge-unetpp"   # Hugging Face model repo (change if you renamed it)
+WEIGHTS_FILENAME = "MILESTONE_090_ACHIEVED_iou_0.9077.pth"
+WEIGHTS_PATH = Path(WEIGHTS_FILENAME)
+
+# Try to fetch weights from Hub if not present locally
+# (Requires 'huggingface-hub' in requirements.txt)
+try:
+    if not WEIGHTS_PATH.exists():
+        print(f"Weights file {WEIGHTS_FILENAME} not found locally. Downloading from {HUB_REPO_ID} ...")
+        from huggingface_hub import hf_hub_download
+        hf_hub_download(
+            repo_id=HUB_REPO_ID,
+            filename=WEIGHTS_FILENAME,
+            local_dir=".",                  # place file in current working directory
+            local_dir_use_symlinks=False    # make a real copy (Spaces friendly)
+        )
+        if WEIGHTS_PATH.exists():
+            print("Download complete.")
+        else:
+            print("Download attempted but file still not found.")
+except Exception as dl_err:
+    print(f"WARNING: Could not download weights automatically: {dl_err}")
+
+# ---------------- Runtime / Device ----------------
+DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+CLASS_INFO = [
+    {"id": 0, "name": "background", "color": (0, 0, 0)},
+    {"id": 1, "name": "beton", "color": (0, 114, 189)},
+    {"id": 2, "name": "steel", "color": (200, 30, 30)},
+]
+COLOR_MAP = np.array([c["color"] for c in CLASS_INFO], dtype=np.uint8)
+
+# ---------------- Load Model (defensive) ----------------
+model_load_error = None
+model = None
+try:
+    if WEIGHTS_PATH.exists():
+        model = load_model(str(WEIGHTS_PATH), DEVICE)
+    else:
+        model_load_error = f"Weight file {WEIGHTS_FILENAME} not found after download attempt."
+except Exception as e:
+    model_load_error = f"Model failed to load: {e}"
+
+# ---------------- Utility Functions ----------------
+def resize_mask_to_original(mask_np_small: np.ndarray, original_shape):
+    H, W = original_shape[:2]
+    if mask_np_small.shape[:2] == (H, W):
+        return mask_np_small
+    pil_small = Image.fromarray(mask_np_small.astype(np.uint8))
+    pil_big = pil_small.resize((W, H), resample=Image.NEAREST)
+    return np.array(pil_big)
+
+def overlay_mask(original_np: np.ndarray, mask_np: np.ndarray, alpha: float = 0.5):
+    color_mask = COLOR_MAP[mask_np]
+    blended = (1 - alpha) * original_np.astype(np.float32) + alpha * color_mask
+    return blended.clip(0, 255).astype(np.uint8)
+
+def compute_class_stats(mask_np: np.ndarray):
+    total = mask_np.size
+    counts = np.bincount(mask_np.flatten(), minlength=len(COLOR_MAP))
+    stats = []
+    for info in CLASS_INFO:
+        cid = info["id"]
+        count = int(counts[cid]) if cid < len(counts) else 0
+        pct = (count / total * 100.0) if total else 0.0
+        stats.append({**info, "count": count, "pct": pct})
+    return stats
+
+def build_legend_html(stats):
+    rows = []
+    for s in stats:
+        r, g, b = s["color"]
+        rows.append(f"""
+        <div class="legend-item" aria-label="Class {s['name']}">
+            <div class="legend-color" style="--c: rgb({r},{g},{b});"></div>
+            <div class="legend-meta">
+                <div class="legend-name">{s['id']}: {s['name']}</div>
+                <div class="legend-stats">
+                    <span class="legend-count">{s['count']} px</span>
+                    <span class="legend-pct">{s['pct']:.2f}%</span>
+                </div>
+            </div>
+        </div>
+        """)
+    return f"""
+    <div class="legend-wrapper" id="legend-wrapper">
+        <div class="legend-header">
+            <span>Segmentation Legend</span>
+            <button onclick="toggleLegend()" class="legend-toggle-btn" aria-label="Collapse legend">⤢</button>
+        </div>
+        <div id="legend-body" class="legend-body expanded">
+            {''.join(rows)}
+        </div>
+    </div>
+    """
+
+def raw_mask_download(mask_np: np.ndarray):
+    from io import BytesIO
+    import base64
+    img = Image.fromarray(mask_np.astype(np.uint8))
+    bio = BytesIO()
+    img.save(bio, format="PNG")
+    bio.seek(0)
+    return "data:image/png;base64," + base64.b64encode(bio.read()).decode()
+
+def make_colored_mask_rgba(mask_np: np.ndarray, bg_opacity: float):
+    """
+    Return an RGBA image where background class (0) has adjustable opacity.
+    bg_opacity in [0,1].
+    """
+    rgb = COLOR_MAP[mask_np]  # (H,W,3)
+    H, W = mask_np.shape
+    alpha_channel = np.full((H, W), 255, dtype=np.uint8)
+    alpha_channel[mask_np == 0] = int(bg_opacity * 255)
+    rgba = np.dstack([rgb, alpha_channel]).astype(np.uint8)
+    return Image.fromarray(rgba, mode="RGBA")
+
+def run_segmentation(image, view_mode, alpha, show_colored, return_small, bg_opacity):
+    if model is None:
+        return (None, None, "<p class='legend-empty'>Model not loaded.</p>",
+                f"<span style='color:#ff8080'>{model_load_error or 'Model error.'}</span>")
+    if image is None:
+        return (None, None, "<p class='legend-empty'>No image yet.</p>",
+                "<span style='opacity:0.6'>No mask.</span>")
+
+    pred_mask = predict(image, model, DEVICE)
+    mask_small = pred_mask.numpy()
+
+    H, W = image.shape[:2]
+    if return_small:
+        mask_np = mask_small
+        if view_mode == "Overlay":
+            pil_orig = Image.fromarray(image.astype(np.uint8))
+            base_img = np.array(pil_orig.resize(mask_small.shape[::-1], resample=Image.BILINEAR))
+        else:
+            base_img = image
+    else:
+        mask_np = resize_mask_to_original(mask_small, (H, W))
+        base_img = image
+
+    if view_mode == "Colored Mask":
+        out_img = make_colored_mask_rgba(mask_np, bg_opacity)
+    elif view_mode == "Overlay":
+        blended = overlay_mask(base_img, mask_np, alpha=alpha)
+        out_img = Image.fromarray(blended)
+    else:  # Raw Class Indices
+        max_id = len(COLOR_MAP) - 1
+        norm = (mask_np / max_id * 255).astype(np.uint8)
+        gray_rgb = np.stack([norm, norm, norm], axis=-1)
+        out_img = Image.fromarray(gray_rgb)
+
+    if show_colored:
+        colored_only = make_colored_mask_rgba(mask_np, bg_opacity)
+    else:
+        colored_only = None
+
+    stats = compute_class_stats(mask_np)
+    legend_html = build_legend_html(stats)
+    download_link = raw_mask_download(mask_np)
+    download_html = f"<a class='download-anchor' href='{download_link}' download='raw_mask.png'>Download Raw Mask (PNG)</a>"
+
+    return out_img, colored_only, legend_html, download_html
+
+def clear_outputs():
+    return None, None, "<p class='legend-empty'>Cleared.</p>", "<div id='download-link'>Cleared.</div>"
+
+# ---------------- Load CSS ----------------
+css_path = Path(__file__).parent / "style.css"
+css_text = css_path.read_text(encoding="utf-8")
+
+# ---------------- Interface Layout ----------------
+with gr.Blocks(css=css_text, title="Hey Inspector • Drone Bridge Image Segmentation") as demo:
+    gr.HTML("""
+    <div class="hero-banner floating">
+        <h1 class="hero-title">Hey Inspector • Drone Bridge Image Segmentation</h1>
+    </div>
+    """)
+    if model_load_error:
+        gr.HTML(f"<div style='color:#ff4d4d; font-weight:600; margin-bottom:10px;'>{model_load_error}</div>")
+
+    gr.HTML("<p class='intro-tagline'>Upload an image and choose how you want to visualize the segmentation.</p>")
+
+    with gr.Row():
+        with gr.Column(scale=5, elem_classes="panel glass left-panel"):
+            input_image = gr.Image(
+                label="Input Image",
+                type="numpy",
+                image_mode="RGB",
+                sources=["upload", "clipboard", "webcam"]
+            )
+            view_mode = gr.Radio(
+                ["Colored Mask", "Overlay", "Raw Class Indices"],
+                value="Colored Mask",
+                label="View Mode",
+                elem_id="view-mode-radio"
+            )
+            alpha = gr.Slider(
+                0.0, 1.0, value=0.5, step=0.05,
+                label="Overlay Opacity",
+                elem_id="alpha-slider"
+            )
+            bg_opacity = gr.Slider(
+                0.0, 1.0, value=1.0, step=0.05,
+                label="Background Opacity (Colored Mask)",
+                elem_id="bg-opacity-slider"
+            )
+            show_colored = gr.Checkbox(value=True, label="Show 'Colored Mask (Always)' panel")
+            return_small = gr.Checkbox(value=False, label="Return downsized (256x256) mask instead of original size")
+            with gr.Row():
+                run_btn = gr.Button("Run Segmentation", elem_id="run-btn", variant="primary")
+                clear_btn = gr.Button("Clear", elem_id="clear-btn")
+
+        with gr.Column(scale=7, elem_classes="panel glass right-panel"):
+            gr.Markdown("#### Results")
+            output_image = gr.Image(label="Result View", type="pil")
+            color_mask_output = gr.Image(label="Colored Mask (Always)", type="pil")
+            legend_html = gr.HTML("<p class='legend-empty'>Legend will appear here after segmentation.</p>")
+            download_html = gr.HTML("<div id='download-link'>No mask yet.</div>")
+
+    gr.Markdown("""
+    **Tips**
+    - Background Opacity affects only Colored Mask outputs (main and the 'always' panel).
+    - Set it to 0 to hide background and emphasize target classes.
+    - Overlay mode ignores the background opacity slider (uses original image + colored mask).
+    - Raw Class Indices is a grayscale class map.
+    """)
+
+    gr.HTML("""
+    <script>
+    function toggleLegend(){
+        const b = document.getElementById('legend-body');
+        if(b){ b.classList.toggle('collapsed'); }
+    }
+    function syncAlphaVisibility(){
+        const radios = document.querySelectorAll("#view-mode-radio input");
+        let mode = "Colored Mask";
+        radios.forEach(r => { if(r.checked) mode = r.value; });
+        const overlayWrap = document.querySelector("#alpha-slider")?.closest(".gr-form");
+        const overlayRange = document.querySelector("#alpha-slider input[type=range]");
+        const bgWrap = document.querySelector("#bg-opacity-slider")?.closest(".gr-form");
+        if(overlayRange){
+            if(mode === "Overlay"){
+                overlayRange.disabled = false;
+                if(overlayWrap) overlayWrap.style.opacity = "1";
+            } else {
+                overlayRange.disabled = true;
+                if(overlayWrap) overlayWrap.style.opacity = "0.35";
+            }
+        }
+        const bgRange = document.querySelector("#bg-opacity-slider input[type=range]");
+        if(bgRange){
+            if(mode === "Colored Mask"){
+                bgRange.disabled = false;
+                if(bgWrap) bgWrap.style.opacity = "1";
+            } else {
+                bgRange.disabled = true;
+                if(bgWrap) bgWrap.style.opacity = "0.35";
+            }
+        }
+    }
+    document.addEventListener("change", e => {
+        if(e.target && e.target.closest("#view-mode-radio")) syncAlphaVisibility();
+    });
+    window.addEventListener("load", syncAlphaVisibility);
+    </script>
+    """)
+
+    run_btn.click(
+        fn=run_segmentation,
+        inputs=[input_image, view_mode, alpha, show_colored, return_small, bg_opacity],
+        outputs=[output_image, color_mask_output, legend_html, download_html]
+    )
+    clear_btn.click(
+        fn=clear_outputs,
+        inputs=None,
+        outputs=[output_image, color_mask_output, legend_html, download_html]
+    )
+
+if __name__ == "__main__":
+    demo.launch()

inference.py

@@ -0,0 +1,42 @@
+import torch
+from collections import OrderedDict
+import numpy as np
+from PIL import Image
+import torchvision.transforms as transforms
+from model import get_model
+
+_preprocess = transforms.Compose([
+    transforms.Resize((256, 256)),
+    transforms.ToTensor(),
+    transforms.Normalize(
+        mean=[0.485, 0.456, 0.406],
+        std=[0.229, 0.224, 0.225]
+    )
+])
+
+def load_model(weights_path: str, device: torch.device):
+    checkpoint = torch.load(weights_path, map_location=device, weights_only=False)
+    if "model_state_dict" not in checkpoint:
+        raise KeyError("model_state_dict not found in checkpoint")
+    state_dict = checkpoint["model_state_dict"]
+    new_state_dict = OrderedDict()
+    for k, v in state_dict.items():
+        new_state_dict[k.replace("module.", "")] = v
+    model = get_model()
+    model.load_state_dict(new_state_dict)
+    model.to(device)
+    model.eval()
+    return model
+
+def preprocess(image):
+    if isinstance(image, np.ndarray):
+        image = Image.fromarray(image)
+    return _preprocess(image).unsqueeze(0)
+
+def predict(image, model, device):
+    model.eval()
+    with torch.no_grad():
+        tensor = preprocess(image).to(device)
+        output = model(tensor)
+        pred = torch.argmax(output, dim=1).squeeze(0).cpu()
+    return pred

model.py

@@ -0,0 +1,11 @@
+import segmentation_models_pytorch as smp
+
+def get_model():
+    model = smp.UnetPlusPlus(
+        encoder_name="resnext101_32x4d",
+        encoder_weights=None,  # using your own trained weights
+        in_channels=3,
+        classes=3,
+        activation=None
+    )
+    return model

requirements.txt

@@ -0,0 +1,8 @@
+torch
+torchvision
+timm
+segmentation-models-pytorch
+gradio
+Pillow
+numpy
+huggingface-hub

style.css

@@ -0,0 +1,391 @@
+/* Light mauve / blue gentle theme */
+
+/* Core variables */
+:root {
+  --bg-gradient: linear-gradient(135deg, #e3e9ff 0%, #d4dafc 35%, #c7d3fa 65%, #c0cef5 100%);
+  --panel-bg: rgba(255,255,255,0.55);
+  --panel-border: rgba(160,170,200,0.55);
+  --text-color: #1d2b3a;
+  --accent: #1d6fd4;
+  --accent-hover: #3d8af0;
+  --legend-bg: rgba(255,255,255,0.70);
+  --legend-border: rgba(140,160,190,0.55);
+  --scrollbar-bg: #d0d9f2;
+  --scrollbar-thumb: #9ab4e6;
+  --scrollbar-thumb-hover: #799dd9;
+  --radius: 18px;
+  --transition: 0.28s cubic-bezier(.4,.14,.3,1);
+  --font-stack: 'Inter','Segoe UI',system-ui,sans-serif;
+}
+
+body, .gradio-container {
+  background: var(--bg-gradient) !important;
+  font-family: var(--font-stack);
+  color: var(--text-color);
+  min-height: 100vh;
+  margin: 0;
+  padding-bottom: 40px;
+  transition: background 0.6s ease, color 0.4s ease;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Floating hero */
+.hero-banner {
+  position: relative;
+  width: 100%;
+  border-radius: 24px;
+  margin: 18px 0 30px 0;
+  background: linear-gradient(125deg, #6289ff, #7d9dff 40%, #8bb1ff 75%);
+  box-shadow: 0 14px 40px -10px rgba(60,85,140,0.45), 0 4px 18px -6px rgba(60,85,140,0.35);
+  padding: 34px 30px;
+  overflow: hidden;
+}
+
+.hero-banner:before,
+.hero-banner:after {
+  content:"";
+  position:absolute;
+  width:240px;
+  height:240px;
+  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 70%);
+  top:-60px;
+  left:-60px;
+  filter: blur(10px);
+  opacity: 0.55;
+  pointer-events:none;
+}
+.hero-banner:after {
+  top:auto;
+  left:auto;
+  bottom:-70px;
+  right:-40px;
+  background: radial-gradient(circle at 70% 70%, rgba(255,255,255,0.45), transparent 65%);
+  opacity:0.45;
+}
+
+.floating {
+  animation: floatY 6.5s ease-in-out infinite;
+}
+
+@keyframes floatY {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
+}
+
+.hero-title {
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: 1px;
+  color: #ffffff;
+  margin: 0;
+  line-height: 1.15;
+  text-shadow: 0 4px 18px rgba(0,0,0,0.35);
+  position: relative;
+  z-index: 2;
+}
+
+/* Tagline forced white */
+.intro-tagline {
+  font-size: 1rem;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  margin: 0 6px 24px 6px;
+  color: #ffffff !important;
+  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
+  background: rgba(255,255,255,0.10);
+  padding: 10px 16px;
+  border-radius: 14px;
+  display: inline-block;
+  backdrop-filter: blur(6px);
+  box-shadow: 0 6px 24px -10px rgba(60,85,140,0.50);
+}
+
+/* Panels */
+.panel.glass {
+  background: var(--panel-bg) !important;
+  border: 1px solid var(--panel-border) !important;
+  backdrop-filter: blur(14px) saturate(160%);
+  border-radius: var(--radius) !important;
+  padding: 20px !important;
+  box-shadow: 0 10px 30px -12px rgba(70,80,120,0.45);
+  position: relative;
+  overflow: hidden;
+}
+
+.panel.glass:before {
+  content:"";
+  position:absolute;
+  inset:0;
+  background:
+    radial-gradient(circle at 80% 10%, rgba(255,255,255,0.35), transparent 55%),
+    radial-gradient(circle at 15% 85%, rgba(255,255,255,0.25), transparent 60%);
+  pointer-events:none;
+  opacity:0.55;
+}
+
+#view-mode-radio label {
+  background: rgba(255,255,255,0.55);
+  border: 1px solid rgba(140,160,190,0.6);
+  border-radius: 12px;
+  padding: 7px 12px;
+  cursor: pointer;
+  transition: var(--transition);
+  font-weight: 500;
+  font-size: 0.85rem;
+  color: #2d3f55;
+  box-shadow: 0 2px 8px -4px rgba(80,100,140,0.35);
+}
+#view-mode-radio label:hover {
+  background: rgba(255,255,255,0.75);
+}
+#view-mode-radio input:checked + label {
+  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+  border-color: rgba(255,255,255,0.8);
+  color: #fff;
+  box-shadow: 0 4px 15px -6px rgba(30,70,130,0.65);
+}
+
+#alpha-slider input[type=range] {
+  accent-color: var(--accent);
+}
+
+#run-btn, #clear-btn {
+  font-weight: 600;
+  border-radius: 16px !important;
+  padding: 12px 20px !important;
+  letter-spacing: 0.6px;
+  transition: var(--transition);
+  border: none !important;
+  font-size: 0.9rem;
+}
+
+#run-btn {
+  background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
+  color: #fff !important;
+  box-shadow: 0 8px 24px -10px rgba(30,70,130,0.65);
+}
+#run-btn:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 30px -10px rgba(30,70,130,0.75);
+}
+
+#clear-btn {
+  background: rgba(200,60,60,0.15) !important;
+  color: #9d2e2e !important;
+  border: 1px solid rgba(200,60,60,0.35) !important;
+  box-shadow: 0 4px 16px -10px rgba(200,60,60,0.55);
+}
+#clear-btn:hover {
+  background: rgba(200,60,60,0.30) !important;
+  color: #6a1212 !important;
+  transform: translateY(-2px);
+}
+
+.download-anchor {
+  font-size: 0.95rem;
+  font-weight: 600;
+  text-decoration: none;
+  color: var(--accent);
+  display: inline-block;
+  margin-top: 10px;
+  transition: var(--transition);
+  letter-spacing: 0.5px;
+}
+.download-anchor:hover {
+  color: var(--accent-hover);
+  text-shadow: 0 0 6px rgba(120,170,255,0.55);
+}
+
+/* Legend */
+.legend-wrapper {
+  margin-top: 14px;
+  background: var(--legend-bg);
+  border: 1px solid var(--legend-border);
+  border-radius: 16px;
+  padding: 14px 16px 12px;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(12px);
+  animation: fadeIn 0.5s ease;
+  box-shadow: 0 10px 28px -14px rgba(70,80,120,0.55);
+}
+
+.legend-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+  letter-spacing: 0.6px;
+  color: var(--text-color);
+  margin-bottom: 6px;
+}
+
+.legend-toggle-btn {
+  background: rgba(255,255,255,0.55);
+  border: 1px solid rgba(130,150,180,0.55);
+  padding: 4px 11px;
+  cursor: pointer;
+  border-radius: 10px;
+  font-size: 0.78rem;
+  color: #2d3f55;
+  transition: var(--transition);
+  box-shadow: 0 3px 12px -6px rgba(60,80,120,0.35);
+}
+.legend-toggle-btn:hover {
+  background: rgba(255,255,255,0.8);
+  transform: translateY(-2px);
+}
+
+.legend-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding-right: 4px;
+  transition: max-height 0.5s ease;
+}
+
+.legend-body.collapsed {
+  max-height: 0;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+}
+
+.legend-item {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  background: rgba(255,255,255,0.55);
+  padding: 8px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(130,150,180,0.45);
+  position: relative;
+  backdrop-filter: blur(6px);
+  transition: var(--transition);
+  box-shadow: 0 4px 16px -10px rgba(60,80,120,0.4);
+}
+
+.legend-item:hover {
+  background: rgba(255,255,255,0.75);
+  transform: translateY(-3px);
+}
+
+.legend-color {
+  width: 42px;
+  height: 42px;
+  border-radius: 11px;
+  background: var(--c);
+  box-shadow: 0 4px 18px -8px var(--c);
+  border: 2px solid rgba(255,255,255,0.7);
+  position: relative;
+}
+
+.legend-color:after {
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius: 9px;
+  background: linear-gradient(140deg, rgba(255,255,255,0.40), transparent 70%);
+  mix-blend-mode: overlay;
+}
+
+.legend-meta {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.78rem;
+  line-height: 1.1rem;
+  letter-spacing: 0.4px;
+}
+
+.legend-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  color:#2e3f58;
+}
+
+.legend-stats {
+  display: flex;
+  gap: 12px;
+  font-size: 0.68rem;
+  opacity: 0.85;
+  color:#415671;
+}
+
+.legend-count { color: #9b6c10; }
+.legend-pct { color: #115f9d; }
+
+.legend-empty {
+  opacity: 0.65;
+  font-style: italic;
+  font-size: 0.9rem;
+  padding: 4px;
+  color:#2d3f55;
+}
+
+/* Scrollbars */
+.legend-body::-webkit-scrollbar {
+  width: 9px;
+}
+.legend-body::-webkit-scrollbar-track {
+  background: var(--scrollbar-bg);
+  border-radius: 10px;
+}
+.legend-body::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 10px;
+  border: 1px solid rgba(255,255,255,0.4);
+}
+.legend-body::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* Images */
+.gradio-image img, .gradio-image canvas {
+  border-radius: 16px !important;
+  box-shadow: 0 10px 32px -14px rgba(70,80,120,0.55);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Disabled slider style */
+#alpha-slider input[disabled] {
+  filter: grayscale(75%);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Markdown headings */
+.markdown-body h4, .markdown-body h3, .markdown-body h2 {
+  color: #2d3f55;
+}
+
+/* Links */
+a { color: var(--accent); }
+a:hover { color: var(--accent-hover); text-decoration: underline; }
+
+/* Responsive */
+@media (max-width: 980px) {
+  .hero-banner { padding: 28px 22px; }
+  .hero-title { font-size: 1.55rem; }
+  #run-btn, #clear-btn { width: 100%; }
+  .legend-body { max-height: 200px; }
+}
+
+#bg-opacity-slider input[type=range] {
+  accent-color: var(--accent);
+}
+
+/* Disabled range (already present for alpha; ensure both look consistent) */
+#bg-opacity-slider input[disabled] {
+  filter: grayscale(75%);
+  cursor: not-allowed;
+  opacity: 0.55;
+}