update app

app.py

@@ -111,8 +111,37 @@ class OrangeRedTheme(Soft):
             block_label_background_fill="*primary_200",
         )
 
+
 orange_red_theme = OrangeRedTheme()
 
+SVG_CUBE = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"/></svg>'
+
+SVG_CHIP = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>'
+
+def html_header():
+    return f"""
+    <div class="app-header">
+        <div class="header-content">
+            <div class="header-icon-wrap">{SVG_CUBE}</div>
+            <div class="header-text">
+                <h1>Map-Anything &mdash; v1</h1>
+                <div class="header-meta">
+                    <span class="meta-badge">{SVG_CHIP} facebook/map-anything-v1</span>
+                    <span class="meta-sep"></span>
+                    <span class="meta-cap">3D Reconstruction</span>
+                    <span class="meta-sep"></span>
+                    <span class="meta-cap">Depth Estimation</span>
+                    <span class="meta-sep"></span>
+                    <span class="meta-cap">Normal Maps</span>
+                    <span class="meta-sep"></span>
+                    <span class="meta-cap">Measurements</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    """
+
+
 high_level_config = {
     "path": "configs/train.yaml",
     "hf_model_name": "facebook/map-anything-v1",
@@ -136,6 +165,289 @@ model = None
 TMP_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'tmp')
 os.makedirs(TMP_DIR, exist_ok=True)
 
+CUSTOM_CSS = (GRADIO_CSS or "") + r"""
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+
+body, .gradio-container { font-family: 'Outfit', sans-serif !important; }
+footer { display: none !important; }
+
+/* ── App Header ── */
+.app-header {
+    background: linear-gradient(135deg, #4A1800 0%, #802200 30%, #CC3700 70%, #FF4500 100%);
+    border-radius: 16px;
+    padding: 32px 40px;
+    margin-bottom: 24px;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(74, 24, 0, 0.25);
+}
+.app-header::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -20%;
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
+    border-radius: 50%;
+}
+.app-header::after {
+    content: '';
+    position: absolute;
+    bottom: -30%;
+    left: -10%;
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgba(255, 69, 0, 0.15) 0%, transparent 70%);
+    border-radius: 50%;
+}
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    position: relative;
+    z-index: 1;
+}
+.header-icon-wrap {
+    width: 64px;
+    height: 64px;
+    background: rgba(255, 255, 255, 0.12);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+.header-icon-wrap svg {
+    width: 36px;
+    height: 36px;
+    color: rgba(255, 255, 255, 0.9);
+}
+.header-text h1 {
+    font-family: 'Outfit', sans-serif;
+    font-size: 2rem;
+    font-weight: 700;
+    color: #fff;
+    margin: 0 0 8px 0;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+}
+.header-meta {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+.meta-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.9);
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.8rem;
+    font-weight: 500;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(4px);
+}
+.meta-badge svg {
+    width: 14px;
+    height: 14px;
+}
+.meta-sep {
+    width: 4px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.35);
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+.meta-cap {
+    color: rgba(255, 255, 255, 0.65);
+    font-size: 0.85rem;
+    font-weight: 400;
+}
+
+/* ── Page shell ── */
+#app-shell {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 16px 40px;
+}
+
+/* ── Two-panel layout ── */
+#left-panel  { min-width: 320px; max-width: 380px; }
+#right-panel { flex: 1; min-width: 0; }
+
+/* ── Section labels ── */
+.section-label {
+    font-size: 0.7rem !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.08em !important;
+    text-transform: uppercase !important;
+    opacity: 0.5 !important;
+    margin-bottom: 6px !important;
+    margin-top: 16px !important;
+    display: block !important;
+}
+
+/* ── Upload zone ── */
+#upload-zone .wrap {
+    border-radius: 10px !important;
+    min-height: 110px !important;
+}
+
+/* ── Gallery ── */
+#preview-gallery { border-radius: 10px; overflow: hidden; }
+
+/* ── Action buttons ── */
+#btn-reconstruct {
+    width: 100% !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    padding: 12px !important;
+    border-radius: 8px !important;
+}
+
+/* ── Buttons ── */
+.primary {
+    border-radius: 10px !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.02em !important;
+    transition: all 0.25s ease !important;
+    font-family: 'Outfit', sans-serif !important;
+}
+.primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(255, 69, 0, 0.3) !important;
+}
+.primary:active { transform: translateY(0) !important; }
+
+/* ── Log strip ── */
+#log-strip {
+    font-size: 0.82rem !important;
+    padding: 8px 12px !important;
+    border-radius: 6px !important;
+    border: 1px solid var(--border-color-primary) !important;
+    background: var(--background-fill-secondary) !important;
+    min-height: 36px !important;
+}
+
+/* ── Viewer tabs ── */
+#viewer-tabs .tab-nav button {
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    padding: 6px 14px !important;
+}
+#viewer-tabs > .tabitem { padding: 0 !important; }
+
+/* ── Tab transitions ── */
+.gradio-tabitem { animation: tabFadeIn 0.35s ease-out; }
+@keyframes tabFadeIn {
+    from { opacity: 0; transform: translateY(6px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Navigation rows inside tabs ── */
+.nav-row { align-items: center !important; gap: 6px !important; margin-bottom: 8px !important; }
+.nav-row button { min-width: 80px !important; }
+
+/* ── Options panel ── */
+#options-panel {
+    border: 1px solid var(--border-color-primary);
+    border-radius: 10px;
+    padding: 16px;
+    margin-top: 12px;
+}
+#options-panel .gr-markdown h3 {
+    font-size: 0.72rem !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.07em !important;
+    text-transform: uppercase !important;
+    opacity: 0.5 !important;
+    margin: 14px 0 6px !important;
+}
+#options-panel .gr-markdown h3:first-child { margin-top: 0 !important; }
+
+/* ── Frame filter ── */
+#frame-filter { margin-top: 12px; }
+
+/* ── Examples section ── */
+#examples-section {
+    margin-top: 36px;
+    padding-top: 24px;
+    border-top: 1px solid var(--border-color-primary);
+}
+#examples-section h2 {
+    font-size: 1.1rem !important;
+    font-weight: 600 !important;
+    margin-bottom: 4px !important;
+}
+#examples-section .scene-caption {
+    font-size: 0.75rem !important;
+    text-align: center !important;
+    opacity: 0.65 !important;
+    margin-top: 4px !important;
+}
+.scene-thumb img { border-radius: 8px; transition: opacity .15s; }
+.scene-thumb img:hover { opacity: .85; }
+
+/* ── Measure note ── */
+.measure-note {
+    font-size: 0.78rem !important;
+    opacity: 0.6 !important;
+    margin-top: 6px !important;
+}
+
+#col-container {
+    margin: 0 auto;
+    max-width: 960px;
+}
+
+/* ── Accordion ── */
+.gradio-accordion {
+    border-radius: 10px !important;
+    border: 1px solid rgba(255, 69, 0, 0.15) !important;
+}
+.gradio-accordion > .label-wrap { border-radius: 10px !important; }
+
+/* ── Labels ── */
+label {
+    font-weight: 600 !important;
+    font-family: 'Outfit', sans-serif !important;
+}
+
+/* ── Slider ── */
+.gradio-slider input[type="range"] { accent-color: #FF4500 !important; }
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: rgba(255, 69, 0, 0.04); border-radius: 4px; }
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #FF4500, #CC3700);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #CC3700, #992900);
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+    .app-header { padding: 20px 24px; }
+    .header-text h1 { font-size: 1.5rem; }
+    .header-content {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+    }
+    .header-meta { gap: 8px; }
+}
+"""
+
+
 def predictions_to_rrd(predictions, glbfile, target_dir, frame_filter="All", show_cam=True):
     run_id = str(uuid.uuid4())
     timestamp = datetime.now().strftime("%Y-%m-%dT%H%M%S")
@@ -292,7 +604,6 @@ def run_model(target_dir, apply_mask=True, mask_edges=True, filter_black_bg=Fals
     torch.cuda.empty_cache()
     return predictions, processed_data
 
-
 def update_view_selectors(processed_data):
     choices = [f"View {i + 1}" for i in range(len(processed_data))] if processed_data else ["View 1"]
     return (
@@ -337,7 +648,11 @@ def update_measure_view(processed_data, view_index):
             overlay_color = np.array([255, 220, 220], dtype=np.uint8)
             alpha = 0.5
             for c in range(3):
-                image[:, :, c] = np.where(invalid_mask, (1 - alpha) * image[:, :, c] + alpha * overlay_color[c], image[:, :, c]).astype(np.uint8)
+                image[:, :, c] = np.where(
+                    invalid_mask,
+                    (1 - alpha) * image[:, :, c] + alpha * overlay_color[c],
+                    image[:, :, c],
+                ).astype(np.uint8)
     return image, []
 
 
@@ -346,7 +661,7 @@ def navigate_depth_view(processed_data, current_selector_value, direction):
         return "View 1", None
     try:
         current_view = int(current_selector_value.split()[1]) - 1
-    except:
+    except Exception:
         current_view = 0
     new_view = (current_view + direction) % len(processed_data)
     return f"View {new_view + 1}", update_depth_view(processed_data, new_view)
@@ -357,7 +672,7 @@ def navigate_normal_view(processed_data, current_selector_value, direction):
         return "View 1", None
     try:
         current_view = int(current_selector_value.split()[1]) - 1
-    except:
+    except Exception:
         current_view = 0
     new_view = (current_view + direction) % len(processed_data)
     return f"View {new_view + 1}", update_normal_view(processed_data, new_view)
@@ -368,7 +683,7 @@ def navigate_measure_view(processed_data, current_selector_value, direction):
         return "View 1", None, []
     try:
         current_view = int(current_selector_value.split()[1]) - 1
-    except:
+    except Exception:
         current_view = 0
     new_view = (current_view + direction) % len(processed_data)
     measure_image, measure_points = update_measure_view(processed_data, new_view)
@@ -378,7 +693,13 @@ def navigate_measure_view(processed_data, current_selector_value, direction):
 def populate_visualization_tabs(processed_data):
     if not processed_data:
         return None, None, None, []
-    return update_depth_view(processed_data, 0), update_normal_view(processed_data, 0), update_measure_view(processed_data, 0)[0], []
+    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):
     start_time = time.time()
@@ -469,7 +790,14 @@ def gradio_demo(target_dir, frame_filter="All", show_cam=True, filter_black_bg=F
         target_dir,
         f"glbscene_{frame_filter.replace('.', '_').replace(':', '').replace(' ', '_')}_cam{show_cam}_mesh{show_mesh}_black{filter_black_bg}_white{filter_white_bg}.glb",
     )
-    glbscene = predictions_to_glb(predictions, filter_by_frames=frame_filter, show_cam=show_cam, mask_black_bg=filter_black_bg, mask_white_bg=filter_white_bg, as_mesh=show_mesh)
+    glbscene = predictions_to_glb(
+        predictions,
+        filter_by_frames=frame_filter,
+        show_cam=show_cam,
+        mask_black_bg=filter_black_bg,
+        mask_white_bg=filter_white_bg,
+        as_mesh=show_mesh,
+    )
     glbscene.export(file_obj=glbfile)
 
     rrd_path = predictions_to_rrd(predictions, glbfile, target_dir, frame_filter, show_cam)
@@ -529,7 +857,11 @@ def process_predictions_for_visualization(predictions, views, high_level_config,
             mask = mask & (view_colors.sum(axis=2) >= 16)
         if filter_white_bg:
             view_colors = image[0] * 255 if image[0].max() <= 1.0 else image[0]
-            mask = mask & ~((view_colors[:, :, 0] > 240) & (view_colors[:, :, 1] > 240) & (view_colors[:, :, 2] > 240))
+            mask = mask & ~(
+                (view_colors[:, :, 0] > 240)
+                & (view_colors[:, :, 1] > 240)
+                & (view_colors[:, :, 2] > 240)
+            )
         normals, _ = points_to_normals(pred_pts3d, mask=mask)
         processed_data[view_idx] = {
             "image": image[0],
@@ -547,7 +879,7 @@ def measure(processed_data, measure_points, current_view_selector, event: gr.Sel
             return None, [], "No data available"
         try:
             current_view_index = int(current_view_selector.split()[1]) - 1
-        except:
+        except Exception:
             current_view_index = 0
         current_view_index = max(0, min(current_view_index, len(processed_data) - 1))
         current_view = processed_data[list(processed_data.keys())[current_view_index]]
@@ -555,7 +887,11 @@ def measure(processed_data, measure_points, current_view_selector, event: gr.Sel
             return None, [], "No view data available"
 
         point2d = event.index[0], event.index[1]
-        if current_view["mask"] is not None and 0 <= point2d[1] < current_view["mask"].shape[0] and 0 <= point2d[0] < current_view["mask"].shape[1]:
+        if (
+            current_view["mask"] is not None
+            and 0 <= point2d[1] < current_view["mask"].shape[0]
+            and 0 <= point2d[0] < current_view["mask"].shape[1]
+        ):
             if not current_view["mask"][point2d[1], point2d[0]]:
                 masked_image, _ = update_measure_view(processed_data, current_view_index)
                 return masked_image, measure_points, '<span style="color: red; font-weight: bold;">Cannot measure on masked areas</span>'
@@ -575,19 +911,38 @@ def measure(processed_data, measure_points, current_view_selector, event: gr.Sel
 
         depth_text = ""
         for i, p in enumerate(measure_points):
-            if current_view["depth"] is not None and 0 <= p[1] < current_view["depth"].shape[0] and 0 <= p[0] < current_view["depth"].shape[1]:
+            if (
+                current_view["depth"] is not None
+                and 0 <= p[1] < current_view["depth"].shape[0]
+                and 0 <= p[0] < current_view["depth"].shape[1]
+            ):
                 depth_text += f"- **P{i + 1} depth: {current_view['depth'][p[1], p[0]]:.2f}m**\n"
-            elif points3d is not None and 0 <= p[1] < points3d.shape[0] and 0 <= p[0] < points3d.shape[1]:
+            elif (
+                points3d is not None
+                and 0 <= p[1] < points3d.shape[0]
+                and 0 <= p[0] < points3d.shape[1]
+            ):
                 depth_text += f"- **P{i + 1} Z-coord: {points3d[p[1], p[0], 2]:.2f}m**\n"
 
         if len(measure_points) == 2:
             point1, point2 = measure_points
-            if all(0 <= point1[0] < image.shape[1] and 0 <= point1[1] < image.shape[0] and 0 <= point2[0] < image.shape[1] and 0 <= point2[1] < image.shape[0] for _ in [1]):
+            if all(
+                0 <= point1[0] < image.shape[1]
+                and 0 <= point1[1] < image.shape[0]
+                and 0 <= point2[0] < image.shape[1]
+                and 0 <= point2[1] < image.shape[0]
+                for _ in [1]
+            ):
                 image = cv2.line(image, point1, point2, color=(255, 0, 0), thickness=2)
             distance_text = "- **Distance: Unable to compute**"
-            if points3d is not None and all(0 <= p[1] < points3d.shape[0] and 0 <= p[0] < points3d.shape[1] for p in [point1, point2]):
+            if points3d is not None and all(
+                0 <= p[1] < points3d.shape[0] and 0 <= p[0] < points3d.shape[1]
+                for p in [point1, point2]
+            ):
                 try:
-                    distance = np.linalg.norm(points3d[point1[1], point1[0]] - points3d[point2[1], point2[0]])
+                    distance = np.linalg.norm(
+                        points3d[point1[1], point1[0]] - points3d[point2[1], point2[0]]
+                    )
                     distance_text = f"- **Distance: {distance:.2f}m**"
                 except Exception as e:
                     distance_text = f"- **Distance error: {e}**"
@@ -606,7 +961,10 @@ def update_log():
     return "⏳ Loading and reconstructing…"
 
 
-def update_visualization(target_dir, frame_filter, show_cam, is_example, filter_black_bg=False, filter_white_bg=False, show_mesh=True):
+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. Please click Reconstruct first."
     if not target_dir or target_dir == "None" or not os.path.isdir(target_dir):
@@ -623,14 +981,24 @@ def update_visualization(target_dir, frame_filter, show_cam, is_example, filter_
         f"glbscene_{frame_filter.replace('.', '_').replace(':', '').replace(' ', '_')}_cam{show_cam}_mesh{show_mesh}_black{filter_black_bg}_white{filter_white_bg}.glb",
     )
     if not os.path.exists(glbfile):
-        glbscene = predictions_to_glb(predictions, filter_by_frames=frame_filter, show_cam=show_cam, mask_black_bg=filter_black_bg, mask_white_bg=filter_white_bg, as_mesh=show_mesh)
+        glbscene = predictions_to_glb(
+            predictions,
+            filter_by_frames=frame_filter,
+            show_cam=show_cam,
+            mask_black_bg=filter_black_bg,
+            mask_white_bg=filter_white_bg,
+            as_mesh=show_mesh,
+        )
         glbscene.export(file_obj=glbfile)
 
     rrd_path = predictions_to_rrd(predictions, glbfile, target_dir, frame_filter, show_cam)
     return rrd_path, "Visualization updated."
 
 
-def update_all_views_on_filter_change(target_dir, filter_black_bg, filter_white_bg, processed_data, depth_view_selector, normal_view_selector, measure_view_selector):
+def update_all_views_on_filter_change(
+    target_dir, filter_black_bg, filter_white_bg, processed_data,
+    depth_view_selector, normal_view_selector, measure_view_selector,
+):
     if not target_dir or target_dir == "None" or not os.path.isdir(target_dir):
         return processed_data, None, None, None, []
     predictions_path = os.path.join(target_dir, "predictions.npz")
@@ -640,12 +1008,16 @@ def update_all_views_on_filter_change(target_dir, filter_black_bg, filter_white_
         loaded = np.load(predictions_path, allow_pickle=True)
         predictions = {key: loaded[key] for key in loaded.keys()}
         views = load_images(os.path.join(target_dir, "images"))
-        new_processed_data = process_predictions_for_visualization(predictions, views, high_level_config, filter_black_bg, filter_white_bg)
+        new_processed_data = process_predictions_for_visualization(
+            predictions, views, high_level_config, filter_black_bg, filter_white_bg,
+        )
+
         def safe_idx(sel):
             try:
                 return int(sel.split()[1]) - 1
-            except:
+            except Exception:
                 return 0
+
         depth_vis = update_depth_view(new_processed_data, safe_idx(depth_view_selector))
         normal_vis = update_normal_view(new_processed_data, safe_idx(normal_view_selector))
         measure_img, _ = update_measure_view(new_processed_data, safe_idx(measure_view_selector))
@@ -654,7 +1026,6 @@ def update_all_views_on_filter_change(target_dir, filter_black_bg, filter_white_
         print(f"Filter change error: {e}")
         return processed_data, None, None, None, []
 
-
 def get_scene_info(examples_dir):
     import glob
     scenes = []
@@ -669,7 +1040,13 @@ def get_scene_info(examples_dir):
                 image_files.extend(glob.glob(os.path.join(scene_path, ext.upper())))
             if image_files:
                 image_files = sorted(image_files)
-                scenes.append({"name": scene_folder, "path": scene_path, "thumbnail": image_files[0], "num_images": len(image_files), "image_files": image_files})
+                scenes.append({
+                    "name": scene_folder,
+                    "path": scene_path,
+                    "thumbnail": image_files[0],
+                    "num_images": len(image_files),
+                    "image_files": image_files,
+                })
     return scenes
 
 
@@ -682,132 +1059,6 @@ def load_example_scene(scene_name, examples_dir="examples"):
     return None, target_dir, image_paths, f"Loaded '{scene_name}' — {selected_scene['num_images']} images. Click Reconstruct."
 
 
-CUSTOM_CSS = (GRADIO_CSS or "") + """
-/* ── Page shell ── */
-#app-shell {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 0 16px 40px;
-}
-
-/* ── Header ── */
-#app-header {
-    padding: 28px 0 20px;
-    border-bottom: 1px solid var(--border-color-primary);
-    margin-bottom: 24px;
-}
-#app-header h1 {
-    font-size: 2rem !important;
-    font-weight: 700 !important;
-    margin: 0 0 4px !important;
-    line-height: 1.2 !important;
-}
-#app-header p {
-    margin: 0 !important;
-    opacity: 0.65;
-    font-size: 0.95rem !important;
-}
-
-/* ── Two-panel layout ── */
-#left-panel  { min-width: 320px; max-width: 380px; }
-#right-panel { flex: 1; min-width: 0; }
-
-/* ── Section labels ── */
-.section-label {
-    font-size: 0.7rem !important;
-    font-weight: 600 !important;
-    letter-spacing: 0.08em !important;
-    text-transform: uppercase !important;
-    opacity: 0.5 !important;
-    margin-bottom: 6px !important;
-    margin-top: 16px !important;
-    display: block !important;
-}
-
-/* ── Upload zone ── */
-#upload-zone .wrap {
-    border-radius: 10px !important;
-    min-height: 110px !important;
-}
-
-/* ── Gallery ── */
-#preview-gallery { border-radius: 10px; overflow: hidden; }
-
-/* ── Action buttons ── */
-#btn-reconstruct {
-    width: 100% !important;
-    font-size: 0.95rem !important;
-    font-weight: 600 !important;
-    padding: 12px !important;
-    border-radius: 8px !important;
-}
-
-/* ── Log strip ── */
-#log-strip {
-    font-size: 0.82rem !important;
-    padding: 8px 12px !important;
-    border-radius: 6px !important;
-    border: 1px solid var(--border-color-primary) !important;
-    background: var(--background-fill-secondary) !important;
-    min-height: 36px !important;
-}
-
-/* ── Viewer tabs ── */
-#viewer-tabs .tab-nav button {
-    font-size: 0.8rem !important;
-    font-weight: 500 !important;
-    padding: 6px 14px !important;
-}
-#viewer-tabs > .tabitem { padding: 0 !important; }
-
-/* ── Navigation rows inside tabs ── */
-.nav-row { align-items: center !important; gap: 6px !important; margin-bottom: 8px !important; }
-.nav-row button { min-width: 80px !important; }
-
-/* ── Options panel ── */
-#options-panel {
-    border: 1px solid var(--border-color-primary);
-    border-radius: 10px;
-    padding: 16px;
-    margin-top: 12px;
-}
-#options-panel .gr-markdown h3 {
-    font-size: 0.72rem !important;
-    font-weight: 600 !important;
-    letter-spacing: 0.07em !important;
-    text-transform: uppercase !important;
-    opacity: 0.5 !important;
-    margin: 14px 0 6px !important;
-}
-#options-panel .gr-markdown h3:first-child { margin-top: 0 !important; }
-
-/* ── Frame filter ── */
-#frame-filter { margin-top: 12px; }
-
-/* ── Examples section ── */
-#examples-section { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border-color-primary); }
-#examples-section h2 { font-size: 1.1rem !important; font-weight: 600 !important; margin-bottom: 4px !important; }
-#examples-section .scene-caption {
-    font-size: 0.75rem !important;
-    text-align: center !important;
-    opacity: 0.65 !important;
-    margin-top: 4px !important;
-}
-.scene-thumb img { border-radius: 8px; transition: opacity .15s; }
-.scene-thumb img:hover { opacity: .85; }
-
-/* ── Measure note ── */
-.measure-note { font-size: 0.78rem !important; opacity: 0.6 !important; margin-top: 6px !important; }
-
-#col-container {
-    margin: 0 auto;
-    max-width: 960px;
-}
-#main-title h1 {font-size: 2.3em !important;}
-
-
-"""
-
 with gr.Blocks() as demo:
 
     is_example            = gr.Textbox(visible=False, value="None")
@@ -817,19 +1068,20 @@ with gr.Blocks() as demo:
     target_dir_output     = gr.Textbox(visible=False, value="None")
 
     with gr.Column(elem_id="app-shell"):
-        with gr.Column(elem_id="app-header"):
-            gr.Markdown("# **Map-Anything-v1**", elem_id="main-title")
-            gr.Markdown("Universal Feed-Forward Metric 3D Reconstruction (Point Cloud and Camera Poses)")
+
+        # ── New styled header ──
+        gr.HTML(html_header())
 
         with gr.Row(equal_height=False):
 
+            # ── Left Panel ──
             with gr.Column(elem_id="left-panel", scale=0):
 
                 unified_upload = gr.File(
                     file_count="multiple",
                     label="Upload Images/Videos",
                     file_types=["image", "video"],
-                    height="150"
+                    height="150",
                 )
 
                 with gr.Row():
@@ -843,7 +1095,6 @@ with gr.Blocks() as demo:
                 image_gallery = gr.Gallery(
                     columns=2,
                     height="150",
-
                 )
 
                 gr.ClearButton(
@@ -857,15 +1108,16 @@ with gr.Blocks() as demo:
 
                 with gr.Accordion("Options", open=False):
                     gr.Markdown("### Point Cloud")
-                    show_cam      = gr.Checkbox(label="Show cameras", value=True)
-                    show_mesh     = gr.Checkbox(label="Show mesh", value=True)
-                    filter_black_bg = gr.Checkbox(label="Filter black background", value=False)
-                    filter_white_bg = gr.Checkbox(label="Filter white background", value=False)
+                    show_cam          = gr.Checkbox(label="Show cameras", value=True)
+                    show_mesh         = gr.Checkbox(label="Show mesh", value=True)
+                    filter_black_bg   = gr.Checkbox(label="Filter black background", value=False)
+                    filter_white_bg   = gr.Checkbox(label="Filter white background", value=False)
                     gr.Markdown("### Reconstruction (next run)")
                     apply_mask_checkbox = gr.Checkbox(
-                        label="Apply ambiguous-depth mask & edges", value=True
+                        label="Apply ambiguous-depth mask & edges", value=True,
                     )
 
+            # ── Right Panel ──
             with gr.Column(elem_id="right-panel", scale=1):
 
                 log_output = gr.Markdown(
@@ -878,7 +1130,7 @@ with gr.Blocks() as demo:
                     with gr.Tab("3D View"):
                         reconstruction_output = Rerun(
                             label="Rerun 3D Viewer",
-                            height=680,
+                            height=675,
                         )
 
                     with gr.Tab("Depth"):
@@ -934,7 +1186,7 @@ with gr.Blocks() as demo:
                 choices=["All"], value="All", label="Filter by Frame",
                 show_label=True,
             )
-        
+
         with gr.Column(elem_id="examples-section"):
             gr.Markdown("## Example Scenes")
             gr.Markdown("Click a thumbnail to load the scene, then press **Reconstruct**.")
@@ -967,10 +1219,11 @@ with gr.Blocks() as demo:
                                 with gr.Column(scale=1, min_width=140):
                                     pass
 
+
     submit_btn.click(
-        fn=clear_fields, inputs=[], outputs=[reconstruction_output]
+        fn=clear_fields, inputs=[], outputs=[reconstruction_output],
     ).then(
-        fn=update_log, inputs=[], outputs=[log_output]
+        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],
@@ -997,6 +1250,7 @@ with gr.Blocks() as demo:
         [target_dir_output, filter_black_bg, filter_white_bg, processed_data_state, depth_view_selector, normal_view_selector, measure_view_selector],
         [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],
@@ -1017,14 +1271,20 @@ with gr.Blocks() as demo:
         if not files:
             return gr.update(visible=False)
         video_exts = [".mp4", ".avi", ".mov", ".mkv", ".wmv", ".flv", ".webm", ".m4v", ".3gp"]
-        has_video = any(os.path.splitext(str(f["name"] if isinstance(f, dict) else f))[1].lower() in video_exts for f in files)
+        has_video = any(
+            os.path.splitext(str(f["name"] if isinstance(f, dict) else f))[1].lower() in video_exts
+            for f in files
+        )
         return gr.update(visible=has_video)
 
     def resample_video_with_new_interval(files, new_interval, current_target_dir):
         if not files:
             return current_target_dir, None, "No files to resample.", gr.update(visible=False)
         video_exts = [".mp4", ".avi", ".mov", ".mkv", ".wmv", ".flv", ".webm", ".m4v", ".3gp"]
-        if not any(os.path.splitext(str(f["name"] if isinstance(f, dict) else f))[1].lower() in video_exts for f in files):
+        if not any(
+            os.path.splitext(str(f["name"] if isinstance(f, dict) else f))[1].lower() in video_exts
+            for f in files
+        ):
             return current_target_dir, None, "No videos found.", 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)
@@ -1052,28 +1312,34 @@ with gr.Blocks() as demo:
 
     prev_depth_btn.click(
         fn=lambda pd, sel: navigate_depth_view(pd, sel, -1),
-        inputs=[processed_data_state, depth_view_selector], outputs=[depth_view_selector, depth_map],
+        inputs=[processed_data_state, depth_view_selector],
+        outputs=[depth_view_selector, depth_map],
     )
     next_depth_btn.click(
         fn=lambda pd, sel: navigate_depth_view(pd, sel, 1),
-        inputs=[processed_data_state, depth_view_selector], outputs=[depth_view_selector, depth_map],
+        inputs=[processed_data_state, depth_view_selector],
+        outputs=[depth_view_selector, depth_map],
     )
     depth_view_selector.change(
         fn=lambda pd, sel: update_depth_view(pd, int(sel.split()[1]) - 1) if sel else None,
-        inputs=[processed_data_state, depth_view_selector], outputs=[depth_map],
+        inputs=[processed_data_state, depth_view_selector],
+        outputs=[depth_map],
     )
 
     prev_normal_btn.click(
         fn=lambda pd, sel: navigate_normal_view(pd, sel, -1),
-        inputs=[processed_data_state, normal_view_selector], outputs=[normal_view_selector, normal_map],
+        inputs=[processed_data_state, normal_view_selector],
+        outputs=[normal_view_selector, normal_map],
     )
     next_normal_btn.click(
         fn=lambda pd, sel: navigate_normal_view(pd, sel, 1),
-        inputs=[processed_data_state, normal_view_selector], outputs=[normal_view_selector, normal_map],
+        inputs=[processed_data_state, normal_view_selector],
+        outputs=[normal_view_selector, normal_map],
     )
     normal_view_selector.change(
         fn=lambda pd, sel: update_normal_view(pd, int(sel.split()[1]) - 1) if sel else None,
-        inputs=[processed_data_state, normal_view_selector], outputs=[normal_map],
+        inputs=[processed_data_state, normal_view_selector],
+        outputs=[normal_map],
     )
 
     prev_measure_btn.click(
@@ -1092,4 +1358,4 @@ with gr.Blocks() as demo:
         outputs=[measure_image, measure_points_state],
     )
 
-    demo.queue(max_size=50).launch(theme=orange_red_theme, css=CUSTOM_CSS, show_error=True, share=True, ssr_mode=False)
+    demo.queue(max_size=50).launch(css=CUSTOM_CSS, theme=orange_red_theme, show_error=True, share=True, ssr_mode=False)