update app

app.py

@@ -0,0 +1,1264 @@
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+# All rights reserved.
+#
+# This source code is licensed under the license found in the
+# LICENSE file in the root directory of this source tree.
+
+import gc
+import os
+import shutil
+import sys
+import time
+from datetime import datetime
+
+os.environ["PYTORCH_CUDA_ALLOC_CONF"] = "expandable_segments:True"
+
+import cv2
+import gradio as gr
+import numpy as np
+import spaces
+import torch
+from PIL import Image
+from pillow_heif import register_heif_opener
+
+register_heif_opener()
+
+import rerun as rr
+try:
+    import rerun.blueprint as rrb
+except ImportError:
+    rrb = None
+from gradio_rerun import Rerun
+
+sys.path.append("mapanything/")
+
+from mapanything.utils.geometry import depthmap_to_world_frame, points_to_normals
+from mapanything.utils.image import load_images, rgb
+
+MAX_SEED = np.iinfo(np.int32).max
+
+# ── MapAnything Configuration ──
+high_level_config = {
+    "path": "configs/train.yaml",
+    "hf_model_name": "facebook/map-anything",
+    "model_str": "mapanything",
+    "config_overrides": [
+        "machine=aws", "model=mapanything", "model/task=images_only",
+        "model.encoder.uses_torch_hub=false",
+    ],
+    "checkpoint_name": "model.safetensors",
+    "config_name": "config.json",
+    "trained_with_amp": True,
+    "trained_with_amp_dtype": "bf16",
+    "data_norm_type": "dinov2",
+    "patch_size": 14,
+    "resolution": 518,
+}
+
+model = None
+
+
+# ═══════════════════════════════════════════════════════════════════
+# BACKEND FUNCTIONS
+# ═══════════════════════════════════════════════════════════════════
+
+def initialize_mapanything_model_fn(config, device):
+    from mapanything.utils.hf_utils.hf_helpers import initialize_mapanything_model
+    return initialize_mapanything_model(config, device)
+
+
+@spaces.GPU(duration=120)
+def run_model(target_dir, apply_mask=True, mask_edges=True,
+              filter_black_bg=False, filter_white_bg=False):
+    global model
+    import torch
+    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+    if model is None:
+        model = initialize_mapanything_model_fn(high_level_config, device)
+    else:
+        model = model.to(device)
+    model.eval()
+
+    image_folder_path = os.path.join(target_dir, "images")
+    views = load_images(image_folder_path)
+    if len(views) == 0:
+        raise ValueError("No images found. Check your upload.")
+
+    outputs = model.infer(views, apply_mask=apply_mask, mask_edges=True,
+                          memory_efficient_inference=False)
+
+    predictions = {}
+    extrinsic_list, intrinsic_list, world_points_list = [], [], []
+    depth_maps_list, images_list, final_mask_list = [], [], []
+
+    for pred in outputs:
+        depthmap_torch = pred["depth_z"][0].squeeze(-1)
+        intrinsics_torch = pred["intrinsics"][0]
+        camera_pose_torch = pred["camera_poses"][0]
+        pts3d_computed, valid_mask = depthmap_to_world_frame(
+            depthmap_torch, intrinsics_torch, camera_pose_torch)
+        mask = pred.get("mask")
+        if mask is not None:
+            mask = mask[0].squeeze(-1).cpu().numpy().astype(bool)
+        else:
+            mask = np.ones_like(depthmap_torch.cpu().numpy(), dtype=bool)
+        mask = mask & valid_mask.cpu().numpy()
+        image = pred["img_no_norm"][0].cpu().numpy()
+        extrinsic_list.append(camera_pose_torch.cpu().numpy())
+        intrinsic_list.append(intrinsics_torch.cpu().numpy())
+        world_points_list.append(pts3d_computed.cpu().numpy())
+        depth_maps_list.append(depthmap_torch.cpu().numpy())
+        images_list.append(image)
+        final_mask_list.append(mask)
+
+    predictions["extrinsic"] = np.stack(extrinsic_list, axis=0)
+    predictions["intrinsic"] = np.stack(intrinsic_list, axis=0)
+    predictions["world_points"] = np.stack(world_points_list, axis=0)
+    depth_maps = np.stack(depth_maps_list, axis=0)
+    if len(depth_maps.shape) == 3:
+        depth_maps = depth_maps[..., np.newaxis]
+    predictions["depth"] = depth_maps
+    predictions["images"] = np.stack(images_list, axis=0)
+    predictions["final_mask"] = np.stack(final_mask_list, axis=0)
+
+    processed_data = process_predictions_for_visualization(
+        predictions, views, high_level_config, filter_black_bg, filter_white_bg)
+    torch.cuda.empty_cache()
+    return predictions, processed_data
+
+
+def process_predictions_for_visualization(predictions, views, config,
+                                          filter_black_bg=False, filter_white_bg=False):
+    processed_data = {}
+    for view_idx, view in enumerate(views):
+        image = rgb(view["img"], norm_type=config["data_norm_type"])
+        pred_pts3d = predictions["world_points"][view_idx]
+        view_data = {"image": image[0], "points3d": pred_pts3d,
+                     "depth": None, "normal": None, "mask": None}
+        mask = predictions["final_mask"][view_idx].copy()
+        if filter_black_bg:
+            vc = image[0] * 255 if image[0].max() <= 1.0 else image[0]
+            mask = mask & (vc.sum(axis=2) >= 16)
+        if filter_white_bg:
+            vc = image[0] * 255 if image[0].max() <= 1.0 else image[0]
+            mask = mask & ~((vc[:,:,0]>240)&(vc[:,:,1]>240)&(vc[:,:,2]>240))
+        view_data["mask"] = mask
+        view_data["depth"] = predictions["depth"][view_idx].squeeze()
+        normals, _ = points_to_normals(pred_pts3d, mask=view_data["mask"])
+        view_data["normal"] = normals
+        processed_data[view_idx] = view_data
+    return processed_data
+
+
+def colorize_depth(depth_map, mask=None):
+    if depth_map is None:
+        return None
+    import matplotlib.pyplot as plt
+    d = depth_map.copy()
+    valid = d > 0
+    if mask is not None:
+        valid = valid & mask
+    if valid.sum() > 0:
+        vd = d[valid]
+        p5, p95 = np.percentile(vd, 5), np.percentile(vd, 95)
+        d[valid] = (d[valid] - p5) / (p95 - p5)
+    colored = (plt.cm.turbo_r(d)[:, :, :3] * 255).astype(np.uint8)
+    colored[~valid] = [255, 255, 255]
+    return colored
+
+
+def colorize_normal(normal_map, mask=None):
+    if normal_map is None:
+        return None
+    nv = normal_map.copy()
+    if mask is not None:
+        nv[~mask] = [0, 0, 0]
+    nv = ((nv + 1.0) / 2.0 * 255).astype(np.uint8)
+    return nv
+
+
+def get_view_data_by_index(processed_data, view_index):
+    if processed_data is None or len(processed_data) == 0:
+        return None
+    keys = list(processed_data.keys())
+    if view_index < 0 or view_index >= len(keys):
+        view_index = 0
+    return processed_data[keys[view_index]]
+
+
+def update_depth_view(processed_data, view_index):
+    vd = get_view_data_by_index(processed_data, view_index)
+    if vd is None or vd["depth"] is None:
+        return None
+    return colorize_depth(vd["depth"], mask=vd.get("mask"))
+
+
+def update_normal_view(processed_data, view_index):
+    vd = get_view_data_by_index(processed_data, view_index)
+    if vd is None or vd["normal"] is None:
+        return None
+    return colorize_normal(vd["normal"], mask=vd.get("mask"))
+
+
+def update_measure_view(processed_data, view_index):
+    vd = get_view_data_by_index(processed_data, view_index)
+    if vd is None:
+        return None, []
+    image = vd["image"].copy()
+    if image.dtype != np.uint8:
+        image = (image * 255).astype(np.uint8) if image.max() <= 1.0 else image.astype(np.uint8)
+    if vd["mask"] is not None:
+        inv = ~vd["mask"]
+        if inv.any():
+            oc = np.array([255, 220, 220], dtype=np.uint8)
+            for c in range(3):
+                image[:,:,c] = np.where(inv, (0.5*image[:,:,c]+0.5*oc[c]), image[:,:,c]).astype(np.uint8)
+    return image, []
+
+
+def navigate_depth_view(processed_data, current_sel, direction):
+    if processed_data is None or len(processed_data) == 0:
+        return "View 1", None
+    try: cur = int(current_sel.split()[1]) - 1
+    except: cur = 0
+    nv = (cur + direction) % len(processed_data)
+    return f"View {nv+1}", update_depth_view(processed_data, nv)
+
+
+def navigate_normal_view(processed_data, current_sel, direction):
+    if processed_data is None or len(processed_data) == 0:
+        return "View 1", None
+    try: cur = int(current_sel.split()[1]) - 1
+    except: cur = 0
+    nv = (cur + direction) % len(processed_data)
+    return f"View {nv+1}", update_normal_view(processed_data, nv)
+
+
+def navigate_measure_view(processed_data, current_sel, direction):
+    if processed_data is None or len(processed_data) == 0:
+        return "View 1", None, []
+    try: cur = int(current_sel.split()[1]) - 1
+    except: cur = 0
+    nv = (cur + direction) % len(processed_data)
+    img, pts = update_measure_view(processed_data, nv)
+    return f"View {nv+1}", img, pts
+
+
+def update_view_selectors(processed_data):
+    if processed_data is None or len(processed_data) == 0:
+        choices = ["View 1"]
+    else:
+        choices = [f"View {i+1}" for i in range(len(processed_data))]
+    return (gr.Dropdown(choices=choices, value=choices[0]),
+            gr.Dropdown(choices=choices, value=choices[0]),
+            gr.Dropdown(choices=choices, value=choices[0]))
+
+
+def populate_visualization_tabs(processed_data):
+    if processed_data is None or len(processed_data) == 0:
+        return None, None, None, []
+    return (update_depth_view(processed_data, 0),
+            update_normal_view(processed_data, 0),
+            update_measure_view(processed_data, 0)[0], [])
+
+
+def handle_uploads(unified_upload, s_time_interval=1.0):
+    gc.collect()
+    torch.cuda.empty_cache()
+    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S_%f")
+    target_dir = f"input_images_{timestamp}"
+    target_dir_images = os.path.join(target_dir, "images")
+    if os.path.exists(target_dir):
+        shutil.rmtree(target_dir)
+    os.makedirs(target_dir_images)
+    image_paths = []
+    if unified_upload is not None:
+        for file_data in unified_upload:
+            file_path = file_data["name"] if isinstance(file_data, dict) and "name" in file_data else str(file_data)
+            file_ext = os.path.splitext(file_path)[1].lower()
+            video_exts = [".mp4",".avi",".mov",".mkv",".wmv",".flv",".webm",".m4v",".3gp"]
+            if file_ext in video_exts:
+                vs = cv2.VideoCapture(file_path)
+                fps = vs.get(cv2.CAP_PROP_FPS)
+                frame_interval = int(fps * s_time_interval)
+                count, vfn = 0, 0
+                while True:
+                    gotit, frame = vs.read()
+                    if not gotit: break
+                    count += 1
+                    if count % frame_interval == 0:
+                        bn = os.path.splitext(os.path.basename(file_path))[0]
+                        ip = os.path.join(target_dir_images, f"{bn}_{vfn:06}.png")
+                        cv2.imwrite(ip, frame)
+                        image_paths.append(ip)
+                        vfn += 1
+                vs.release()
+            elif file_ext in [".heic", ".heif"]:
+                try:
+                    with Image.open(file_path) as img:
+                        if img.mode not in ("RGB", "L"): img = img.convert("RGB")
+                        bn = os.path.splitext(os.path.basename(file_path))[0]
+                        dp = os.path.join(target_dir_images, f"{bn}.jpg")
+                        img.save(dp, "JPEG", quality=95)
+                        image_paths.append(dp)
+                except:
+                    dp = os.path.join(target_dir_images, os.path.basename(file_path))
+                    shutil.copy(file_path, dp)
+                    image_paths.append(dp)
+            else:
+                dp = os.path.join(target_dir_images, os.path.basename(file_path))
+                shutil.copy(file_path, dp)
+                image_paths.append(dp)
+    return target_dir, sorted(image_paths)
+
+
+def log_3d_to_rerun(predictions, frame_filter="All", show_cam=True,
+                     filter_black_bg=False, filter_white_bg=False):
+    """Convert predictions to Rerun RRD stream."""
+    rr.init("mapanything_scene")
+    rec = rr.memory_recording()
+
+    num_views = predictions["world_points"].shape[0]
+    all_indices = list(range(num_views))
+
+    if frame_filter != "All":
+        try:
+            idx = int(frame_filter.split(":")[0])
+            all_indices = [idx]
+        except:
+            pass
+
+    for i in all_indices:
+        pts = predictions["world_points"][i]
+        mask = predictions["final_mask"][i]
+        imgs = predictions["images"][i]
+
+        if filter_black_bg:
+            vc = imgs * 255 if imgs.max() <= 1.0 else imgs
+            mask = mask & (vc.sum(axis=2) >= 16)
+        if filter_white_bg:
+            vc = imgs * 255 if imgs.max() <= 1.0 else imgs
+            mask = mask & ~((vc[:,:,0]>240)&(vc[:,:,1]>240)&(vc[:,:,2]>240))
+
+        valid_pts = pts[mask]
+        valid_colors = imgs[mask]
+        if valid_colors.max() <= 1.0:
+            valid_colors = (valid_colors * 255).astype(np.uint8)
+        else:
+            valid_colors = valid_colors.astype(np.uint8)
+
+        rr.log(f"world/points/view_{i}",
+               rr.Points3D(valid_pts, colors=valid_colors, radii=0.005))
+
+        if show_cam:
+            ext = predictions["extrinsic"][i]
+            pos = ext[:3, 3]
+            rr.log(f"world/cameras/view_{i}",
+                   rr.Points3D([pos], colors=[[0, 255, 0]], radii=0.03))
+
+    return rec.storage
+
+
+def get_scene_info(examples_dir):
+    import glob
+    scenes = []
+    if not os.path.exists(examples_dir):
+        return scenes
+    for sf in sorted(os.listdir(examples_dir)):
+        sp = os.path.join(examples_dir, sf)
+        if os.path.isdir(sp):
+            exts = ["*.jpg","*.jpeg","*.png","*.bmp","*.tiff","*.tif"]
+            ifs = []
+            for ext in exts:
+                ifs.extend(glob.glob(os.path.join(sp, ext)))
+                ifs.extend(glob.glob(os.path.join(sp, ext.upper())))
+            if ifs:
+                ifs = sorted(ifs)
+                scenes.append({"name": sf, "path": sp, "thumbnail": ifs[0],
+                               "num_images": len(ifs), "image_files": ifs})
+    return scenes
+
+
+def load_example_scene(scene_name, examples_dir="examples"):
+    scenes = get_scene_info(examples_dir)
+    sel = next((s for s in scenes if s["name"] == scene_name), None)
+    if sel is None:
+        return None, None, None, "Scene not found"
+    target_dir, image_paths = handle_uploads(sel["image_files"], 1.0)
+    return None, target_dir, image_paths, f"Loaded scene '{scene_name}' with {sel['num_images']} images. Click Reconstruct to begin."
+
+
+@spaces.GPU(duration=120)
+def gradio_demo(target_dir, frame_filter="All", show_cam=True,
+                filter_black_bg=False, filter_white_bg=False,
+                apply_mask=True, show_mesh=True):
+    if not target_dir or not os.path.isdir(target_dir) or target_dir == "None":
+        return None, "No valid directory. Please upload first.", None, None, None, None, None, "", \
+               gr.Dropdown(choices=["View 1"], value="View 1"), \
+               gr.Dropdown(choices=["View 1"], value="View 1"), \
+               gr.Dropdown(choices=["View 1"], value="View 1")
+
+    gc.collect()
+    torch.cuda.empty_cache()
+    target_dir_images = os.path.join(target_dir, "images")
+    all_files = sorted(os.listdir(target_dir_images)) if os.path.isdir(target_dir_images) else []
+    all_files_labeled = [f"{i}: {fn}" for i, fn in enumerate(all_files)]
+    frame_filter_choices = ["All"] + all_files_labeled
+
+    with torch.no_grad():
+        predictions, processed_data = run_model(target_dir, apply_mask)
+
+    np.savez(os.path.join(target_dir, "predictions.npz"), **predictions)
+    if frame_filter is None:
+        frame_filter = "All"
+
+    # Build Rerun data
+    rerun_data = log_3d_to_rerun(predictions, frame_filter, show_cam,
+                                  filter_black_bg, filter_white_bg)
+
+    del predictions
+    gc.collect()
+    torch.cuda.empty_cache()
+
+    log_msg = f"Reconstruction Success ({len(all_files)} frames)."
+    depth_vis, normal_vis, measure_img, measure_pts = populate_visualization_tabs(processed_data)
+    ds, ns, ms = update_view_selectors(processed_data)
+
+    return (rerun_data, log_msg,
+            gr.Dropdown(choices=frame_filter_choices, value=frame_filter, interactive=True),
+            processed_data, depth_vis, normal_vis, measure_img, "", ds, ns, ms)
+
+
+def update_visualization(target_dir, frame_filter, show_cam, is_example,
+                         filter_black_bg=False, filter_white_bg=False, show_mesh=True):
+    if is_example == "True":
+        return gr.update(), "No reconstruction available."
+    if not target_dir or target_dir == "None" or not os.path.isdir(target_dir):
+        return gr.update(), "No reconstruction available."
+    pp = os.path.join(target_dir, "predictions.npz")
+    if not os.path.exists(pp):
+        return gr.update(), "No reconstruction available. Run Reconstruct first."
+    loaded = np.load(pp, allow_pickle=True)
+    predictions = {k: loaded[k] for k in loaded.keys()}
+    rerun_data = log_3d_to_rerun(predictions, frame_filter, show_cam,
+                                  filter_black_bg, filter_white_bg)
+    return rerun_data, "Visualization updated."
+
+
+def update_all_views_on_filter_change(target_dir, filter_black_bg, filter_white_bg,
+                                       processed_data, ds, ns, ms):
+    if not target_dir or target_dir == "None" or not os.path.isdir(target_dir):
+        return processed_data, None, None, None, []
+    pp = os.path.join(target_dir, "predictions.npz")
+    if not os.path.exists(pp):
+        return processed_data, None, None, None, []
+    try:
+        loaded = np.load(pp, allow_pickle=True)
+        predictions = {k: loaded[k] for k in loaded.keys()}
+        views = load_images(os.path.join(target_dir, "images"))
+        new_pd = process_predictions_for_visualization(
+            predictions, views, high_level_config, filter_black_bg, filter_white_bg)
+        di = int(ds.split()[1])-1 if ds else 0
+        ni = int(ns.split()[1])-1 if ns else 0
+        mi = int(ms.split()[1])-1 if ms else 0
+        return (new_pd, update_depth_view(new_pd, di),
+                update_normal_view(new_pd, ni),
+                update_measure_view(new_pd, mi)[0], [])
+    except:
+        return processed_data, None, None, None, []
+
+
+def measure(processed_data, measure_points, current_view_selector, event: gr.SelectData):
+    try:
+        if processed_data is None or len(processed_data) == 0:
+            return None, [], "No data available"
+        try: cvi = int(current_view_selector.split()[1]) - 1
+        except: cvi = 0
+        if cvi < 0 or cvi >= len(processed_data): cvi = 0
+        vkeys = list(processed_data.keys())
+        cv = processed_data[vkeys[cvi]]
+        if cv is None:
+            return None, [], "No view data"
+        pt = event.index[0], event.index[1]
+        if cv["mask"] is not None and 0<=pt[1]<cv["mask"].shape[0] and 0<=pt[0]<cv["mask"].shape[1]:
+            if not cv["mask"][pt[1], pt[0]]:
+                mi, _ = update_measure_view(processed_data, cvi)
+                return mi, measure_points, 'Cannot measure on masked areas (grey regions)'
+        measure_points.append(pt)
+        image, _ = update_measure_view(processed_data, cvi)
+        if image is None:
+            return None, [], "No image"
+        image = image.copy()
+        pts3d = cv["points3d"]
+        if image.dtype != np.uint8:
+            image = (image*255).astype(np.uint8) if image.max()<=1.0 else image.astype(np.uint8)
+        for p in measure_points:
+            if 0<=p[0]<image.shape[1] and 0<=p[1]<image.shape[0]:
+                image = cv2.circle(image, p, radius=5, color=(255,0,0), thickness=2)
+        depth_text = ""
+        for i, p in enumerate(measure_points):
+            if cv["depth"] is not None and 0<=p[1]<cv["depth"].shape[0] and 0<=p[0]<cv["depth"].shape[1]:
+                depth_text += f"P{i+1} depth: {cv['depth'][p[1],p[0]]:.2f}m. "
+        if len(measure_points) == 2:
+            p1, p2 = measure_points
+            if all(0<=v<s for v,s in [(p1[0],image.shape[1]),(p1[1],image.shape[0]),
+                                       (p2[0],image.shape[1]),(p2[1],image.shape[0])]):
+                image = cv2.line(image, p1, p2, color=(255,0,0), thickness=2)
+            dist_text = "Distance: N/A"
+            if pts3d is not None:
+                try:
+                    d = np.linalg.norm(pts3d[p1[1],p1[0]] - pts3d[p2[1],p2[0]])
+                    dist_text = f"Distance: {d:.2f}m"
+                except: pass
+            return [image, [], depth_text + dist_text]
+        return [image, measure_points, depth_text]
+    except Exception as e:
+        return None, [], f"Error: {e}"
+
+
+def reset_measure(processed_data):
+    if processed_data is None or len(processed_data) == 0:
+        return None, [], ""
+    return list(processed_data.values())[0]["image"], [], ""
+
+
+def clear_fields():
+    return None
+
+
+def update_log():
+    return "Loading and Reconstructing..."
+
+
+def update_gallery_on_unified_upload(files, interval):
+    if not files:
+        return None, None, None
+    target_dir, image_paths = handle_uploads(files, interval)
+    return target_dir, image_paths, "Upload complete. Click Reconstruct to begin 3D processing."
+
+
+def show_resample_button(files):
+    if not files:
+        return gr.update(visible=False)
+    video_exts = [".mp4",".avi",".mov",".mkv",".wmv",".flv",".webm",".m4v",".3gp"]
+    for fd in files:
+        fp = fd["name"] if isinstance(fd, dict) and "name" in fd else str(fd)
+        if os.path.splitext(fp)[1].lower() in video_exts:
+            return gr.update(visible=True)
+    return gr.update(visible=False)
+
+
+def resample_video(files, new_interval, current_target_dir):
+    if not files:
+        return current_target_dir, None, "No files.", gr.update(visible=False)
+    if current_target_dir and current_target_dir != "None" and os.path.exists(current_target_dir):
+        shutil.rmtree(current_target_dir)
+    td, ip = handle_uploads(files, new_interval)
+    return td, ip, f"Resampled at {new_interval}s interval.", gr.update(visible=False)
+
+
+# ═══════════════════════════════════════════════════════════════════
+# PLACEHOLDER -- CSS, HTML, JS, and Gradio Blocks below
+# ═══════════════════════════════════════════════════════════════════
+
+css = r"""
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+*{box-sizing:border-box;margin:0;padding:0}
+body,.gradio-container{background:#0f0f13!important;font-family:'Inter',system-ui,sans-serif!important;font-size:14px!important;color:#e4e4e7!important;min-height:100vh}
+.dark body,.dark .gradio-container{background:#0f0f13!important;color:#e4e4e7!important}
+footer{display:none!important}
+.hidden-input{display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}
+.app-shell{background:#18181b;border:1px solid #27272a;border-radius:16px;margin:12px auto;max-width:1500px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03)}
+.app-header{background:linear-gradient(135deg,#18181b 0%,#1e1e24 100%);border-bottom:1px solid #27272a;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
+.app-header-left{display:flex;align-items:center;gap:12px}
+.app-logo{width:36px;height:36px;background:linear-gradient(135deg,#6366f1,#8b5cf6,#a78bfa);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.35)}
+.app-title{font-size:18px;font-weight:700;background:linear-gradient(135deg,#e4e4e7,#a1a1aa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.3px}
+.app-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:rgba(99,102,241,.15);color:#818cf8;border:1px solid rgba(99,102,241,.25);letter-spacing:.3px}
+.app-toolbar{background:#18181b;border-bottom:1px solid #27272a;padding:8px 16px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
+.tb-sep{width:1px;height:28px;background:#27272a;margin:0 8px}
+.modern-tb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:34px;background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;padding:0 12px;font-family:'Inter',sans-serif;color:#fff!important;transition:all .15s ease}
+.modern-tb-btn:hover{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.3)}
+.modern-tb-btn:active,.modern-tb-btn.active{background:rgba(99,102,241,.25);border-color:rgba(99,102,241,.45)}
+.modern-tb-btn .tb-icon{font-size:15px;line-height:1;color:#fff!important}
+.modern-tb-btn .tb-label{font-size:13px;color:#fff!important;font-weight:600}
+.btn-primary-tb{background:linear-gradient(135deg,#6366f1,#7c3aed)!important;border:none!important;box-shadow:0 2px 8px rgba(99,102,241,.3);color:#fff!important}
+.btn-primary-tb:hover{background:linear-gradient(135deg,#7c7cf5,#8b5cf6)!important;box-shadow:0 4px 16px rgba(99,102,241,.45)}
+.app-main-row{display:flex;gap:0;flex:1;overflow:hidden}
+.app-main-left{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid #27272a}
+.app-main-right{width:460px;display:flex;flex-direction:column;flex-shrink:0;background:#18181b;overflow-y:auto;max-height:calc(100vh - 120px)}
+.upload-zone{position:relative;background:#09090b;min-height:200px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #27272a}
+.upload-click-area{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:36px 44px;border:2px dashed #3f3f46;border-radius:16px;background:rgba(99,102,241,.03);transition:all .2s ease}
+.upload-click-area:hover{background:rgba(99,102,241,.08);border-color:#6366f1;transform:scale(1.02)}
+.upload-click-area svg{width:64px;height:64px}
+.upload-click-area span{margin-top:12px;font-size:13px;color:#71717a}
+.gallery-zone{background:#09090b;border-bottom:1px solid #27272a;padding:12px;min-height:100px;display:none}
+.gallery-zone.has-images{display:block}
+.gallery-grid{display:flex;flex-wrap:wrap;gap:8px}
+.gallery-grid img{width:80px;height:80px;object-fit:cover;border-radius:8px;border:1px solid #27272a;cursor:pointer;transition:border-color .15s}
+.gallery-grid img:hover{border-color:#6366f1}
+.gallery-info{margin-top:8px;font-size:12px;color:#71717a;font-family:'JetBrains Mono',monospace}
+.tab-bar{display:flex;background:#18181b;border-bottom:1px solid #27272a;padding:0}
+.tab-btn{padding:10px 20px;font-size:13px;font-weight:600;font-family:'Inter',sans-serif;color:#71717a;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s}
+.tab-btn:hover{color:#a1a1aa;background:rgba(99,102,241,.05)}
+.tab-btn.active{color:#c7d2fe;border-bottom-color:#6366f1;background:rgba(99,102,241,.08)}
+.tab-content{display:none;flex:1;flex-direction:column;min-height:0}
+.tab-content.active{display:flex}
+.view-nav{display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(24,24,27,.5);border-bottom:1px solid #27272a}
+.nav-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;background:transparent;border:1px solid #27272a;border-radius:6px;color:#a1a1aa;font-size:12px;font-weight:500;font-family:'Inter',sans-serif;cursor:pointer;transition:all .15s}
+.nav-btn:hover{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.3);color:#c7d2fe}
+.view-label{flex:1;text-align:center;font-size:12px;font-weight:600;color:#818cf8;font-family:'JetBrains Mono',monospace}
+.view-body{flex:1;background:#09090b;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:300px;position:relative}
+.view-body img{max-width:100%;max-height:500px;image-rendering:auto}
+.view-placeholder{color:#3f3f46;font-size:13px;text-align:center;padding:20px}
+.rerun-container{flex:1;min-height:450px;background:#09090b}
+.measure-info{padding:12px 16px;background:#18181b;border-top:1px solid #27272a;font-size:13px;color:#a1a1aa;min-height:40px}
+.panel-card{border-bottom:1px solid #27272a}
+.panel-card-title{padding:10px 20px;font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid rgba(39,39,42,.6)}
+.panel-card-body{padding:14px 20px;display:flex;flex-direction:column;gap:10px}
+.settings-group{border:1px solid #27272a;border-radius:10px;margin:12px 16px;padding:0;overflow:hidden}
+.settings-group-title{font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.8px;padding:10px 16px;border-bottom:1px solid #27272a;background:rgba(24,24,27,.5)}
+.settings-group-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
+.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#a1a1aa}
+.checkbox-row input[type="checkbox"]{accent-color:#6366f1;width:16px;height:16px;cursor:pointer}
+.checkbox-row label{color:#a1a1aa;font-size:13px;cursor:pointer}
+.slider-row{display:flex;align-items:center;gap:10px;min-height:28px}
+.slider-row label{font-size:13px;font-weight:500;color:#a1a1aa;min-width:100px;flex-shrink:0}
+.slider-row input[type="range"]{flex:1;-webkit-appearance:none;appearance:none;height:6px;background:#27272a;border-radius:3px;outline:none}
+.slider-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#6366f1,#7c3aed);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(99,102,241,.4)}
+.slider-row .slider-val{min-width:44px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;padding:3px 8px;background:#09090b;border:1px solid #27272a;border-radius:6px;color:#a1a1aa}
+.modern-select{width:100%;background:#09090b;border:1px solid #27272a;border-radius:8px;padding:8px 12px;font-family:'Inter',sans-serif;font-size:13px;color:#e4e4e7;outline:none;cursor:pointer}
+.modern-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
+.modern-select option{background:#18181b;color:#e4e4e7}
+.modern-loader{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(9,9,11,.92);z-index:15;flex-direction:column;align-items:center;justify-content:center;gap:16px;backdrop-filter:blur(4px)}
+.modern-loader.active{display:flex}
+.modern-loader .loader-spinner{width:36px;height:36px;border:3px solid #27272a;border-top-color:#6366f1;border-radius:50%;animation:spin .8s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+.modern-loader .loader-text{font-size:13px;color:#a1a1aa;font-weight:500}
+.loader-bar-track{width:200px;height:4px;background:#27272a;border-radius:2px;overflow:hidden}
+.loader-bar-fill{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6,#6366f1);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:2px}
+@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+.app-statusbar{background:#18181b;border-top:1px solid #27272a;padding:6px 20px;display:flex;gap:12px;height:34px;align-items:center;font-size:12px}
+.app-statusbar .sb-section{padding:0 12px;flex:1;display:flex;align-items:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:#52525b;overflow:hidden;white-space:nowrap}
+.app-statusbar .sb-section.sb-fixed{flex:0 0 auto;min-width:90px;text-align:center;justify-content:center;padding:3px 12px;background:rgba(99,102,241,.08);border-radius:6px;color:#818cf8;font-weight:500}
+.log-panel{padding:10px 20px;font-size:13px;color:#a1a1aa;border-bottom:1px solid #27272a;min-height:36px;font-family:'JetBrains Mono',monospace;background:rgba(9,9,11,.5)}
+.examples-grid{display:flex;flex-wrap:wrap;gap:12px;padding:16px}
+.example-card{width:140px;cursor:pointer;border:1px solid #27272a;border-radius:10px;overflow:hidden;background:#18181b;transition:all .2s}
+.example-card:hover{border-color:#6366f1;transform:translateY(-2px);box-shadow:0 4px 12px rgba(99,102,241,.2)}
+.example-card img{width:100%;height:100px;object-fit:cover}
+.example-card .example-label{padding:6px 10px;font-size:11px;font-weight:600;color:#a1a1aa;text-align:center}
+.out-download-btn{display:none;align-items:center;justify-content:center;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);border-radius:6px;cursor:pointer;padding:3px 10px;font-size:11px;font-weight:500;color:#c7d2fe!important;gap:4px;height:24px;transition:all .15s}
+.out-download-btn:hover{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.35);color:#fff!important}
+.out-download-btn.visible{display:inline-flex}
+.out-download-btn svg{width:12px;height:12px;fill:#c7d2fe}
+.toast-notification{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-120%);z-index:9999;padding:10px 24px;border-radius:10px;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;opacity:0;pointer-events:none}
+.toast-notification.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
+.toast-notification.error{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:1px solid rgba(255,255,255,.15)}
+.toast-notification.info{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:1px solid rgba(255,255,255,.15)}
+#gradio-run-btn{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:.01;pointer-events:none;overflow:hidden}
+::-webkit-scrollbar{width:8px;height:8px}
+::-webkit-scrollbar-track{background:#09090b}
+::-webkit-scrollbar-thumb{background:#27272a;border-radius:4px}
+::-webkit-scrollbar-thumb:hover{background:#3f3f46}
+@media(max-width:900px){.app-main-row{flex-direction:column}.app-main-right{width:100%}.app-main-left{border-right:none;border-bottom:1px solid #27272a}}
+"""
+
+DOWNLOAD_SVG = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 16l-5-5h3V4h4v7h3l-5 5z"/><path d="M20 18H4v2h16v-2z"/></svg>'
+
+main_js = r"""
+() => {
+function init() {
+    if (window.__maInitDone) return;
+    const fileInput = document.getElementById('ma-file-input');
+    const uploadZone = document.getElementById('ma-upload-zone');
+    const uploadArea = document.getElementById('ma-upload-click');
+    const galleryZone = document.getElementById('ma-gallery-zone');
+    const galleryGrid = document.getElementById('ma-gallery-grid');
+    const galleryInfo = document.getElementById('ma-gallery-info');
+    const tabBtns = document.querySelectorAll('.tab-btn');
+    const tabContents = document.querySelectorAll('.tab-content');
+    const logPanel = document.getElementById('ma-log');
+    const statusFixed = document.getElementById('ma-status-fixed');
+    const statusInfo = document.getElementById('ma-status-info');
+
+    if (!fileInput || !uploadZone) { setTimeout(init, 300); return; }
+    window.__maInitDone = true;
+
+    let imageFiles = [];
+    let toastTimer = null;
+
+    function showToast(msg, type) {
+        let t = document.getElementById('app-toast');
+        if (!t) { t=document.createElement('div'); t.id='app-toast'; t.className='toast-notification';
+            t.innerHTML='<span class="toast-icon"></span><span class="toast-text"></span>'; document.body.appendChild(t); }
+        t.className='toast-notification '+(type||'error');
+        t.querySelector('.toast-icon').textContent = type==='info'?'\u2139':'\u2717';
+        t.querySelector('.toast-text').textContent = msg;
+        if(toastTimer) clearTimeout(toastTimer);
+        void t.offsetWidth; t.classList.add('visible');
+        toastTimer = setTimeout(()=>t.classList.remove('visible'), 3500);
+    }
+
+    function setGradioValue(cid, val) {
+        const c = document.getElementById(cid);
+        if (!c) return;
+        c.querySelectorAll('input,textarea').forEach(el => {
+            if(el.type==='file'||el.type==='range'||el.type==='checkbox') return;
+            const p = el.tagName==='TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+            const ns = Object.getOwnPropertyDescriptor(p,'value');
+            if(ns&&ns.set){ns.set.call(el,val);el.dispatchEvent(new Event('input',{bubbles:true}));el.dispatchEvent(new Event('change',{bubbles:true}));}
+        });
+    }
+
+    // Tab switching
+    tabBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            tabBtns.forEach(b=>b.classList.remove('active'));
+            tabContents.forEach(c=>c.classList.remove('active'));
+            btn.classList.add('active');
+            const target = document.getElementById('tab-'+btn.dataset.tab);
+            if(target) target.classList.add('active');
+        });
+    });
+
+    // Upload handling
+    uploadArea.addEventListener('click', ()=>fileInput.click());
+    document.getElementById('tb-upload-btn').addEventListener('click', ()=>fileInput.click());
+
+    fileInput.addEventListener('change', (e) => {
+        if(e.target.files.length) handleFiles(e.target.files);
+        e.target.value = '';
+    });
+
+    uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.style.outline='2px solid #6366f1'; });
+    uploadZone.addEventListener('dragleave', (e) => { e.preventDefault(); uploadZone.style.outline=''; });
+    uploadZone.addEventListener('drop', (e) => { e.preventDefault(); uploadZone.style.outline='';
+        if(e.dataTransfer.files.length) handleFiles(e.dataTransfer.files); });
+
+    function handleFiles(files) {
+        // Pass files to hidden Gradio file input
+        const gradioUpload = document.getElementById('gradio-upload');
+        if (!gradioUpload) return;
+        const gInput = gradioUpload.querySelector('input[type="file"]');
+        if (gInput) {
+            const dt = new DataTransfer();
+            for(let f of files) dt.items.add(f);
+            gInput.files = dt.files;
+            gInput.dispatchEvent(new Event('change', {bubbles:true}));
+        }
+        // Show preview
+        imageFiles = [];
+        galleryGrid.innerHTML = '';
+        for(let f of files) {
+            if(f.type.startsWith('image/')) {
+                imageFiles.push(f);
+                const url = URL.createObjectURL(f);
+                const img = document.createElement('img');
+                img.src = url;
+                galleryGrid.appendChild(img);
+            }
+        }
+        if(imageFiles.length > 0) {
+            galleryZone.classList.add('has-images');
+            galleryInfo.textContent = imageFiles.length + ' file(s) loaded';
+            uploadArea.parentElement.style.display = 'none';
+        }
+        statusInfo.textContent = files.length + ' file(s) uploaded';
+    }
+
+    // Reconstruct button
+    document.getElementById('tb-reconstruct-btn').addEventListener('click', () => {
+        const gradioBtn = document.getElementById('gradio-run-btn');
+        if(!gradioBtn) return;
+        statusFixed.textContent = 'Processing...';
+        showLoaders();
+        const btn = gradioBtn.querySelector('button');
+        if(btn) btn.click(); else gradioBtn.click();
+    });
+
+    // Clear button
+    document.getElementById('tb-clear-btn').addEventListener('click', () => {
+        galleryGrid.innerHTML = '';
+        galleryZone.classList.remove('has-images');
+        uploadArea.parentElement.style.display = '';
+        imageFiles = [];
+        statusInfo.textContent = 'Cleared';
+        statusFixed.textContent = 'Ready';
+    });
+
+    // Settings checkboxes sync
+    function syncCheckbox(customId, gradioId) {
+        const cb = document.getElementById(customId);
+        if(!cb) return;
+        cb.addEventListener('change', () => {
+            const gc = document.getElementById(gradioId);
+            if(!gc) return;
+            const gcb = gc.querySelector('input[type="checkbox"]');
+            if(gcb && gcb.checked !== cb.checked) gcb.click();
+        });
+    }
+    syncCheckbox('custom-show-cam', 'gradio-show-cam');
+    syncCheckbox('custom-show-mesh', 'gradio-show-mesh');
+    syncCheckbox('custom-filter-black', 'gradio-filter-black');
+    syncCheckbox('custom-filter-white', 'gradio-filter-white');
+    syncCheckbox('custom-apply-mask', 'gradio-apply-mask');
+
+    // Slider sync
+    function syncSlider(customId, gradioId) {
+        const s = document.getElementById(customId);
+        const v = document.getElementById(customId+'-val');
+        if(!s) return;
+        s.addEventListener('input', () => {
+            if(v) v.textContent = s.value;
+            const gc = document.getElementById(gradioId);
+            if(!gc) return;
+            gc.querySelectorAll('input[type="range"],input[type="number"]').forEach(el => {
+                const ns = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value');
+                if(ns&&ns.set){ns.set.call(el,s.value);el.dispatchEvent(new Event('input',{bubbles:true}));el.dispatchEvent(new Event('change',{bubbles:true}));}
+            });
+        });
+    }
+    syncSlider('custom-interval', 'gradio-interval');
+
+    // Frame filter select sync
+    const frameSelect = document.getElementById('custom-frame-filter');
+    if(frameSelect) {
+        frameSelect.addEventListener('change', () => {
+            setGradioValue('gradio-frame-filter', frameSelect.value);
+        });
+    }
+
+    // Navigation buttons
+    function navBtn(btnId, gradioId) {
+        const b = document.getElementById(btnId);
+        if(!b) return;
+        b.addEventListener('click', () => {
+            const gb = document.getElementById(gradioId);
+            if(!gb) { const btn = gb.querySelector('button'); if(btn) btn.click(); }
+        });
+    }
+
+    // Loader helpers
+    function showLoaders() {
+        document.querySelectorAll('.modern-loader').forEach(l=>l.classList.add('active'));
+    }
+    function hideLoaders() {
+        document.querySelectorAll('.modern-loader').forEach(l=>l.classList.remove('active'));
+        statusFixed.textContent = 'Done';
+    }
+    window.__showLoaders = showLoaders;
+    window.__hideLoaders = hideLoaders;
+
+    // Watch outputs for images
+    function watchOutputs() {
+        const containers = {
+            'gradio-depth-out': 'depth-view-body',
+            'gradio-normal-out': 'normal-view-body',
+            'gradio-measure-out': 'measure-view-body'
+        };
+        for(const [gid, vid] of Object.entries(containers)) {
+            const gc = document.getElementById(gid);
+            const vb = document.getElementById(vid);
+            if(!gc||!vb) continue;
+            const gimg = gc.querySelector('img');
+            if(gimg && gimg.src) {
+                let existing = vb.querySelector('img.view-img');
+                if(!existing) { existing=document.createElement('img'); existing.className='view-img'; vb.appendChild(existing); }
+                if(existing.src !== gimg.src) {
+                    existing.src = gimg.src;
+                    const ph = vb.querySelector('.view-placeholder');
+                    if(ph) ph.style.display='none';
+                }
+            }
+        }
+        // Watch log
+        const logGradio = document.getElementById('gradio-log');
+        if(logGradio && logPanel) {
+            const md = logGradio.querySelector('.prose, p, span');
+            if(md && md.textContent.trim()) {
+                logPanel.textContent = md.textContent.trim();
+                if(md.textContent.includes('Success')) { hideLoaders(); statusFixed.textContent='Done'; }
+            }
+        }
+        // Watch view selectors
+        ['depth','normal','measure'].forEach(t => {
+            const gc = document.getElementById('gradio-'+t+'-selector');
+            const lbl = document.getElementById(t+'-view-label');
+            if(!gc||!lbl) return;
+            const sel = gc.querySelector('input');
+            if(sel && sel.value) lbl.textContent = sel.value;
+        });
+        // Watch frame filter
+        const ff = document.getElementById('gradio-frame-filter');
+        if(ff && frameSelect) {
+            const opts = ff.querySelectorAll('option');
+            if(opts.length > 1 && frameSelect.options.length <= 1) {
+                frameSelect.innerHTML = '';
+                opts.forEach(o => {
+                    const no = document.createElement('option');
+                    no.value = o.value; no.textContent = o.textContent;
+                    frameSelect.appendChild(no);
+                });
+            }
+        }
+    }
+    setInterval(watchOutputs, 800);
+
+    // Watch measure text
+    function watchMeasure() {
+        const gc = document.getElementById('gradio-measure-text');
+        const mt = document.getElementById('measure-text-display');
+        if(!gc||!mt) return;
+        const md = gc.querySelector('.prose, p, span');
+        if(md) mt.innerHTML = md.innerHTML || md.textContent;
+    }
+    setInterval(watchMeasure, 500);
+
+    statusFixed.textContent = 'Ready';
+}
+init();
+}
+"""
+
+# Build HTML layout
+def build_html():
+    return f"""
+    <div class="app-shell">
+        <div class="app-header">
+            <div class="app-header-left">
+                <div class="app-logo">M</div>
+                <span class="app-title">MapAnything</span>
+                <span class="app-badge">3D Reconstruction</span>
+            </div>
+        </div>
+
+        <div class="app-toolbar">
+            <button id="tb-upload-btn" class="modern-tb-btn" title="Upload files">
+                <span class="tb-label">Upload</span>
+            </button>
+            <button id="tb-reconstruct-btn" class="modern-tb-btn btn-primary-tb" title="Run reconstruction">
+                <span class="tb-label">Reconstruct</span>
+            </button>
+            <button id="tb-clear-btn" class="modern-tb-btn" title="Clear all">
+                <span class="tb-label">Clear</span>
+            </button>
+            <div class="tb-sep"></div>
+            <button id="tb-resample-btn" class="modern-tb-btn" title="Resample video" style="display:none">
+                <span class="tb-label">Resample</span>
+            </button>
+        </div>
+
+        <div class="log-panel" id="ma-log">Upload images or video, then click Reconstruct.</div>
+
+        <div class="app-main-row">
+            <div class="app-main-left">
+                <div id="ma-upload-zone" class="upload-zone">
+                    <div id="ma-upload-click" class="upload-click-area">
+                        <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <rect x="8" y="14" width="64" height="52" rx="6" fill="none" stroke="#6366f1" stroke-width="2" stroke-dasharray="4 3"/>
+                            <polygon points="12,62 30,40 42,50 54,34 68,62" fill="rgba(99,102,241,0.15)" stroke="#6366f1" stroke-width="1.5"/>
+                            <circle cx="28" cy="30" r="6" fill="rgba(99,102,241,0.2)" stroke="#6366f1" stroke-width="1.5"/>
+                        </svg>
+                        <span>Drop images or video here, or click to browse</span>
+                    </div>
+                    <input id="ma-file-input" type="file" accept="image/*,video/*" multiple style="display:none;" />
+                </div>
+
+                <div id="ma-gallery-zone" class="gallery-zone">
+                    <div id="ma-gallery-grid" class="gallery-grid"></div>
+                    <div id="ma-gallery-info" class="gallery-info"></div>
+                </div>
+
+                <div class="tab-bar">
+                    <button class="tab-btn active" data-tab="3dview">3D View</button>
+                    <button class="tab-btn" data-tab="depth">Depth</button>
+                    <button class="tab-btn" data-tab="normal">Normal</button>
+                    <button class="tab-btn" data-tab="measure">Measure</button>
+                </div>
+
+                <div id="tab-3dview" class="tab-content active">
+                    <div class="rerun-container" id="rerun-mount"></div>
+                </div>
+
+                <div id="tab-depth" class="tab-content">
+                    <div class="view-nav">
+                        <button class="nav-btn" id="depth-prev-btn">Prev</button>
+                        <span class="view-label" id="depth-view-label">View 1</span>
+                        <button class="nav-btn" id="depth-next-btn">Next</button>
+                    </div>
+                    <div class="view-body" id="depth-view-body">
+                        <div class="modern-loader" id="depth-loader">
+                            <div class="loader-spinner"></div><div class="loader-text">Loading depth...</div>
+                            <div class="loader-bar-track"><div class="loader-bar-fill"></div></div>
+                        </div>
+                        <div class="view-placeholder">Depth map will appear after reconstruction</div>
+                    </div>
+                </div>
+
+                <div id="tab-normal" class="tab-content">
+                    <div class="view-nav">
+                        <button class="nav-btn" id="normal-prev-btn">Prev</button>
+                        <span class="view-label" id="normal-view-label">View 1</span>
+                        <button class="nav-btn" id="normal-next-btn">Next</button>
+                    </div>
+                    <div class="view-body" id="normal-view-body">
+                        <div class="modern-loader" id="normal-loader">
+                            <div class="loader-spinner"></div><div class="loader-text">Loading normals...</div>
+                            <div class="loader-bar-track"><div class="loader-bar-fill"></div></div>
+                        </div>
+                        <div class="view-placeholder">Normal map will appear after reconstruction</div>
+                    </div>
+                </div>
+
+                <div id="tab-measure" class="tab-content">
+                    <div class="view-nav">
+                        <button class="nav-btn" id="measure-prev-btn">Prev</button>
+                        <span class="view-label" id="measure-view-label">View 1</span>
+                        <button class="nav-btn" id="measure-next-btn">Next</button>
+                    </div>
+                    <div class="view-body" id="measure-view-body">
+                        <div class="modern-loader" id="measure-loader">
+                            <div class="loader-spinner"></div><div class="loader-text">Loading...</div>
+                            <div class="loader-bar-track"><div class="loader-bar-fill"></div></div>
+                        </div>
+                        <div class="view-placeholder">Measure view will appear after reconstruction</div>
+                    </div>
+                    <div class="measure-info">
+                        <div style="font-size:12px;color:#71717a;margin-bottom:4px">Click two points to measure distance. Grey areas have no depth data.</div>
+                        <div id="measure-text-display"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="app-main-right">
+                <div class="panel-card">
+                    <div class="panel-card-title">Frame Filter</div>
+                    <div class="panel-card-body">
+                        <select id="custom-frame-filter" class="modern-select">
+                            <option value="All">All</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="settings-group">
+                    <div class="settings-group-title">Pointcloud Options</div>
+                    <div class="settings-group-body">
+                        <div class="checkbox-row">
+                            <input type="checkbox" id="custom-show-cam" checked>
+                            <label for="custom-show-cam">Show Camera</label>
+                        </div>
+                        <div class="checkbox-row">
+                            <input type="checkbox" id="custom-show-mesh" checked>
+                            <label for="custom-show-mesh">Show Mesh</label>
+                        </div>
+                        <div class="checkbox-row">
+                            <input type="checkbox" id="custom-filter-black">
+                            <label for="custom-filter-black">Filter Black Background</label>
+                        </div>
+                        <div class="checkbox-row">
+                            <input type="checkbox" id="custom-filter-white">
+                            <label for="custom-filter-white">Filter White Background</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="settings-group">
+                    <div class="settings-group-title">Reconstruction Options</div>
+                    <div class="settings-group-body">
+                        <div class="checkbox-row">
+                            <input type="checkbox" id="custom-apply-mask" checked>
+                            <label for="custom-apply-mask">Apply mask for ambiguous depth and edges</label>
+                        </div>
+                        <div class="slider-row">
+                            <label>Video Interval</label>
+                            <input type="range" id="custom-interval" min="0.1" max="5.0" step="0.1" value="1.0">
+                            <span class="slider-val" id="custom-interval-val">1.0</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="app-statusbar">
+            <div class="sb-section" id="ma-status-info">No files uploaded</div>
+            <div class="sb-section sb-fixed" id="ma-status-fixed">Ready</div>
+        </div>
+    </div>
+    """
+
+
+# ═══════════════════════════════════════════════════════════════════
+# GRADIO BLOCKS
+# ═══════════════════════════════════════════════════════════════════
+
+with gr.Blocks() as demo:
+    # Hidden state
+    is_example = gr.Textbox(label="is_example", visible=False, value="None")
+    processed_data_state = gr.State(value=None)
+    measure_points_state = gr.State(value=[])
+    target_dir_output = gr.Textbox(label="Target Dir", visible=False, value="None",
+                                    elem_id="gradio-target-dir")
+
+    # Hidden Gradio inputs
+    unified_upload = gr.File(file_count="multiple", label="Upload",
+                              interactive=True, file_types=["image","video"],
+                              elem_id="gradio-upload", elem_classes="hidden-input")
+    s_time_interval = gr.Slider(minimum=0.1, maximum=5.0, value=1.0, step=0.1,
+                                 elem_id="gradio-interval", elem_classes="hidden-input")
+    image_gallery = gr.Gallery(label="Preview", elem_classes="hidden-input",
+                                elem_id="gradio-gallery")
+    frame_filter = gr.Dropdown(choices=["All"], value="All",
+                                elem_id="gradio-frame-filter", elem_classes="hidden-input")
+    show_cam = gr.Checkbox(value=True, elem_id="gradio-show-cam", elem_classes="hidden-input")
+    show_mesh = gr.Checkbox(value=True, elem_id="gradio-show-mesh", elem_classes="hidden-input")
+    filter_black_bg = gr.Checkbox(value=False, elem_id="gradio-filter-black", elem_classes="hidden-input")
+    filter_white_bg = gr.Checkbox(value=False, elem_id="gradio-filter-white", elem_classes="hidden-input")
+    apply_mask_checkbox = gr.Checkbox(value=True, elem_id="gradio-apply-mask", elem_classes="hidden-input")
+    log_output = gr.Markdown("Ready", elem_id="gradio-log", elem_classes="hidden-input")
+
+    # Hidden outputs for depth/normal/measure
+    depth_map = gr.Image(type="numpy", format="png", interactive=False,
+                          elem_id="gradio-depth-out", elem_classes="hidden-input")
+    normal_map = gr.Image(type="numpy", format="png", interactive=False,
+                           elem_id="gradio-normal-out", elem_classes="hidden-input")
+    measure_image = gr.Image(type="numpy", format="webp", interactive=False,
+                              sources=[], elem_id="gradio-measure-out", elem_classes="hidden-input")
+    measure_text = gr.Markdown("", elem_id="gradio-measure-text", elem_classes="hidden-input")
+
+    # Hidden view selectors
+    depth_view_selector = gr.Dropdown(choices=["View 1"], value="View 1",
+                                       elem_id="gradio-depth-selector", elem_classes="hidden-input")
+    normal_view_selector = gr.Dropdown(choices=["View 1"], value="View 1",
+                                        elem_id="gradio-normal-selector", elem_classes="hidden-input")
+    measure_view_selector = gr.Dropdown(choices=["View 1"], value="View 1",
+                                         elem_id="gradio-measure-selector", elem_classes="hidden-input")
+
+    # Hidden navigation buttons
+    prev_depth_btn = gr.Button("prev", elem_id="gradio-depth-prev", elem_classes="hidden-input")
+    next_depth_btn = gr.Button("next", elem_id="gradio-depth-next", elem_classes="hidden-input")
+    prev_normal_btn = gr.Button("prev", elem_id="gradio-normal-prev", elem_classes="hidden-input")
+    next_normal_btn = gr.Button("next", elem_id="gradio-normal-next", elem_classes="hidden-input")
+    prev_measure_btn = gr.Button("prev", elem_id="gradio-measure-prev", elem_classes="hidden-input")
+    next_measure_btn = gr.Button("next", elem_id="gradio-measure-next", elem_classes="hidden-input")
+
+    # Rerun viewer (visible, placed inside tab via JS)
+    rerun_output = Rerun(label="Rerun 3D Viewer", elem_id="gradio-rerun")
+
+    # Main HTML layout
+    gr.HTML(build_html())
+
+    # Hidden run button
+    run_btn = gr.Button("Run", elem_id="gradio-run-btn")
+
+    # Load JS
+    demo.load(fn=None, js=main_js)
+
+    # ── Event Wiring ──
+
+    # Reconstruct pipeline
+    run_btn.click(fn=clear_fields, inputs=[], outputs=[rerun_output]).then(
+        fn=update_log, inputs=[], outputs=[log_output]
+    ).then(
+        fn=gradio_demo,
+        inputs=[target_dir_output, frame_filter, show_cam, filter_black_bg,
+                filter_white_bg, apply_mask_checkbox, show_mesh],
+        outputs=[rerun_output, log_output, frame_filter, processed_data_state,
+                 depth_map, normal_map, measure_image, measure_text,
+                 depth_view_selector, normal_view_selector, measure_view_selector],
+    ).then(fn=lambda: "False", inputs=[], outputs=[is_example])
+
+    # Upload handling
+    unified_upload.change(
+        fn=update_gallery_on_unified_upload,
+        inputs=[unified_upload, s_time_interval],
+        outputs=[target_dir_output, image_gallery, log_output],
+    )
+
+    # Visualization updates
+    frame_filter.change(
+        update_visualization,
+        [target_dir_output, frame_filter, show_cam, is_example,
+         filter_black_bg, filter_white_bg, show_mesh],
+        [rerun_output, log_output])
+
+    show_cam.change(update_visualization,
+        [target_dir_output, frame_filter, show_cam, is_example],
+        [rerun_output, log_output])
+
+    show_mesh.change(update_visualization,
+        [target_dir_output, frame_filter, show_cam, is_example,
+         filter_black_bg, filter_white_bg, show_mesh],
+        [rerun_output, log_output])
+
+    filter_black_bg.change(update_visualization,
+        [target_dir_output, frame_filter, show_cam, is_example,
+         filter_black_bg, filter_white_bg, show_mesh],
+        [rerun_output, log_output]).then(
+        fn=update_all_views_on_filter_change,
+        inputs=[target_dir_output, filter_black_bg, filter_white_bg,
+                processed_data_state, depth_view_selector,
+                normal_view_selector, measure_view_selector],
+        outputs=[processed_data_state, depth_map, normal_map,
+                 measure_image, measure_points_state])
+
+    filter_white_bg.change(update_visualization,
+        [target_dir_output, frame_filter, show_cam, is_example,
+         filter_black_bg, filter_white_bg, show_mesh],
+        [rerun_output, log_output]).then(
+        fn=update_all_views_on_filter_change,
+        inputs=[target_dir_output, filter_black_bg, filter_white_bg,
+                processed_data_state, depth_view_selector,
+                normal_view_selector, measure_view_selector],
+        outputs=[processed_data_state, depth_map, normal_map,
+                 measure_image, measure_points_state])
+
+    # Navigation: Depth
+    prev_depth_btn.click(
+        fn=lambda pd, cs: navigate_depth_view(pd, cs, -1),
+        inputs=[processed_data_state, depth_view_selector],
+        outputs=[depth_view_selector, depth_map])
+    next_depth_btn.click(
+        fn=lambda pd, cs: navigate_depth_view(pd, cs, 1),
+        inputs=[processed_data_state, depth_view_selector],
+        outputs=[depth_view_selector, depth_map])
+    depth_view_selector.change(
+        fn=lambda pd, sv: update_depth_view(pd, int(sv.split()[1])-1) if sv else None,
+        inputs=[processed_data_state, depth_view_selector],
+        outputs=[depth_map])
+
+    # Navigation: Normal
+    prev_normal_btn.click(
+        fn=lambda pd, cs: navigate_normal_view(pd, cs, -1),
+        inputs=[processed_data_state, normal_view_selector],
+        outputs=[normal_view_selector, normal_map])
+    next_normal_btn.click(
+        fn=lambda pd, cs: navigate_normal_view(pd, cs, 1),
+        inputs=[processed_data_state, normal_view_selector],
+        outputs=[normal_view_selector, normal_map])
+    normal_view_selector.change(
+        fn=lambda pd, sv: update_normal_view(pd, int(sv.split()[1])-1) if sv else None,
+        inputs=[processed_data_state, normal_view_selector],
+        outputs=[normal_map])
+
+    # Navigation: Measure
+    prev_measure_btn.click(
+        fn=lambda pd, cs: navigate_measure_view(pd, cs, -1),
+        inputs=[processed_data_state, measure_view_selector],
+        outputs=[measure_view_selector, measure_image, measure_points_state])
+    next_measure_btn.click(
+        fn=lambda pd, cs: navigate_measure_view(pd, cs, 1),
+        inputs=[processed_data_state, measure_view_selector],
+        outputs=[measure_view_selector, measure_image, measure_points_state])
+    measure_view_selector.change(
+        fn=lambda pd, sv: update_measure_view(pd, int(sv.split()[1])-1) if sv else (None,[]),
+        inputs=[processed_data_state, measure_view_selector],
+        outputs=[measure_image, measure_points_state])
+
+    # Measure click
+    measure_image.select(
+        fn=measure,
+        inputs=[processed_data_state, measure_points_state, measure_view_selector],
+        outputs=[measure_image, measure_points_state, measure_text])
+
+
+if __name__ == "__main__":
+    demo.queue(max_size=50).launch(css=css, show_error=True, share=True, ssr_mode=False)