Redesign Gradio UI: dark indigo theme, cleaner input/output layout

app.py

@@ -465,31 +465,98 @@ def reconstruct_scene(
 
 def _build_startup_markdown() -> str:
     if not STARTUP_NOTES:
-        return (
-            "Build a 3D scene from a short video. "
-            "This app uses the upstream LingBot-Map checkpoint and exports a navigable GLB scene plus a downloadable results bundle."
-        )
+        return ""
     return "\n".join([f"- {note}" for note in STARTUP_NOTES])
 
 
 CSS = """
+:root {
+  --lb-bg: #0b0d12;
+  --lb-panel: #12151c;
+  --lb-panel-2: #161a23;
+  --lb-border: #232836;
+  --lb-text: #e6e8ee;
+  --lb-muted: #8a93a6;
+  --lb-accent: #6366f1;
+  --lb-accent-2: #22d3ee;
+}
+.gradio-container {
+  background: var(--lb-bg) !important;
+  color: var(--lb-text) !important;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
 .shell {
-  max-width: 1180px;
+  max-width: 1200px;
   margin: 0 auto;
+  padding: 8px 4px 32px;
 }
-.headline {
-  background: linear-gradient(135deg, #f3ead7 0%, #d6e6d4 100%);
-  border: 1px solid #d9ccb3;
-  border-radius: 20px;
-  padding: 20px 24px;
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 28px 4px 20px;
+  border-bottom: 1px solid var(--lb-border);
+  margin-bottom: 20px;
 }
-.headline h1 {
-  margin: 0 0 8px 0;
-  color: #14231a;
+.hero .eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--lb-accent-2);
+  font-weight: 600;
 }
-.headline p {
+.hero h1 {
   margin: 0;
-  color: #304437;
+  font-size: 34px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  background: linear-gradient(90deg, #ffffff 0%, #a5b4fc 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.hero p {
+  margin: 4px 0 0;
+  color: var(--lb-muted);
+  font-size: 15px;
+  max-width: 640px;
+  line-height: 1.5;
+}
+.panel, .gr-panel, .gradio-container .gr-box {
+  background: var(--lb-panel) !important;
+  border: 1px solid var(--lb-border) !important;
+  border-radius: 14px !important;
+}
+.section-title {
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--lb-muted);
+  font-weight: 600;
+  margin: 4px 0 8px 2px;
+}
+button.primary, .gradio-container button.primary {
+  background: linear-gradient(135deg, var(--lb-accent) 0%, #8b5cf6 100%) !important;
+  border: none !important;
+  color: #fff !important;
+  font-weight: 600 !important;
+  font-size: 15px !important;
+  padding: 12px 20px !important;
+  border-radius: 10px !important;
+  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
+  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
+}
+button.primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5) !important;
+}
+.startup-notes {
+  font-size: 12px;
+  color: var(--lb-muted);
+  padding: 8px 12px;
+  background: var(--lb-panel-2);
+  border-radius: 8px;
+  border: 1px solid var(--lb-border);
 }
 """
 
@@ -497,48 +564,74 @@ CSS = """
 _eager_load_default_model()
 
 
-with gr.Blocks(css=CSS, theme=gr.themes.Soft(primary_hue="green", secondary_hue="amber"), title="LingBot 3D") as demo:
-    gr.Markdown("<div class='shell'>")
-    with gr.Row():
-        gr.Image(value=str(ROOT / "assets" / "teaser.png"), show_label=False, interactive=False, min_width=320)
-        gr.Markdown(
-            """
-<div class="headline">
+with gr.Blocks(
+    css=CSS,
+    theme=gr.themes.Base(
+        primary_hue="indigo",
+        secondary_hue="cyan",
+        neutral_hue="slate",
+        font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
+    ),
+    title="LingBot 3D",
+) as demo:
+    gr.HTML("<div class='shell'>")
+    gr.HTML(
+        """
+<div class="hero">
+  <span class="eyebrow">Video → 3D Reconstruction</span>
   <h1>LingBot 3D</h1>
-  <p>Upload one short video, sample a compact clip, and export a 3D scene you can inspect or download.</p>
+  <p>Upload a short clip and get back a navigable 3D scene. Powered by the LingBot-Map checkpoint, exported as GLB plus a downloadable results bundle.</p>
 </div>
-            """
-        )
-
-    gr.Markdown(_build_startup_markdown())
+        """
+    )
 
-    with gr.Row():
-        with gr.Column(scale=1):
-            video_file = gr.File(
-                label="Upload one short video",
-                file_types=["video"],
-                type="filepath",
-            )
-            fps = gr.Slider(minimum=1, maximum=12, step=1, value=DEFAULT_FPS, label="Video sampling FPS")
-            max_frames = gr.Slider(minimum=2, maximum=MAX_FRAMES_HARD_LIMIT, step=1, value=DEFAULT_MAX_FRAMES, label="Max frames")
-            num_scale_frames = gr.Slider(minimum=1, maximum=8, step=1, value=DEFAULT_SCALE_FRAMES, label="Scale frames")
-            keyframe_interval = gr.Slider(minimum=1, maximum=8, step=1, value=DEFAULT_KEYFRAME_INTERVAL, label="Keyframe interval")
-            conf_percentile = gr.Slider(
-                minimum=0,
-                maximum=90,
-                step=5,
-                value=DEFAULT_CONF_PERCENTILE,
-                label="GLB confidence percentile",
+    startup_md = _build_startup_markdown()
+    if startup_md:
+        gr.Markdown(startup_md, elem_classes=["startup-notes"])
+
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=5, min_width=360):
+            gr.HTML("<div class='section-title'>1. Input</div>")
+            video_file = gr.Video(
+                label="Short video clip",
+                sources=["upload"],
+                format="mp4",
+                height=260,
             )
-            run_button = gr.Button("Build 3D Scene", variant="primary")
 
-        with gr.Column(scale=1):
-            model_preview = gr.Model3D(label="3D preview", clear_color=[0.97, 0.94, 0.88, 1.0])
-            preview_image = gr.Image(label="Preview strip", interactive=False)
-            artifact_file = gr.File(label="Download bundle")
-            summary_json = gr.JSON(label="Run summary")
+            with gr.Accordion("Sampling & reconstruction settings", open=False):
+                with gr.Row():
+                    fps = gr.Slider(minimum=1, maximum=12, step=1, value=DEFAULT_FPS, label="Sampling FPS")
+                    max_frames = gr.Slider(minimum=2, maximum=MAX_FRAMES_HARD_LIMIT, step=1, value=DEFAULT_MAX_FRAMES, label="Max frames")
+                with gr.Row():
+                    num_scale_frames = gr.Slider(minimum=1, maximum=8, step=1, value=DEFAULT_SCALE_FRAMES, label="Scale frames")
+                    keyframe_interval = gr.Slider(minimum=1, maximum=8, step=1, value=DEFAULT_KEYFRAME_INTERVAL, label="Keyframe interval")
+                conf_percentile = gr.Slider(
+                    minimum=0,
+                    maximum=90,
+                    step=5,
+                    value=DEFAULT_CONF_PERCENTILE,
+                    label="GLB confidence percentile",
+                    info="Higher = fewer, more confident points",
+                )
+
+            run_button = gr.Button("Build 3D Scene", variant="primary", size="lg")
             status_markdown = gr.Markdown()
 
+        with gr.Column(scale=7, min_width=420):
+            gr.HTML("<div class='section-title'>2. Output</div>")
+            model_preview = gr.Model3D(
+                label="3D preview",
+                display_mode="point_cloud",
+                clear_color=[0.04, 0.05, 0.07, 1.0],
+                height=420,
+            )
+            with gr.Row():
+                preview_image = gr.Image(label="Frame preview", interactive=False, height=180)
+                artifact_file = gr.File(label="Download results bundle")
+            with gr.Accordion("Run summary", open=False):
+                summary_json = gr.JSON(label=None)
+
     run_button.click(
         fn=reconstruct_scene,
         inputs=[
@@ -558,7 +651,7 @@ with gr.Blocks(css=CSS, theme=gr.themes.Soft(primary_hue="green", secondary_hue=
         ],
         show_progress="full",
     )
-    gr.Markdown("</div>")
+    gr.HTML("</div>")
 
 demo.queue(default_concurrency_limit=1)