Minimal B&W UI: restore teaser image, default gradio theme

app.py

@@ -469,168 +469,85 @@ def _build_startup_markdown() -> str:
     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;
+css = """
+#container {
+    max-width: 1200px;
+    margin: 0 auto;
 }
-.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: 1200px;
-  margin: 0 auto;
-  padding: 8px 4px 32px;
-}
-.hero {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 28px 4px 20px;
-  border-bottom: 1px solid var(--lb-border);
-  margin-bottom: 20px;
-}
-.hero .eyebrow {
-  font-size: 11px;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--lb-accent-2);
-  font-weight: 600;
-}
-.hero h1 {
-  margin: 0;
-  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);
+.teaser img {
+    max-height: 260px !important;
+    object-fit: cover !important;
+    border-radius: 8px !important;
 }
+footer {display: none !important;}
 """
 
 
 _eager_load_default_model()
 
 
-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 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>
-        """
-    )
-
-    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,
-            )
+with gr.Blocks(title="LingBot 3D") as demo:
+    with gr.Column(elem_id="container"):
+        gr.Image(
+            value=str(ROOT / "assets" / "teaser.png"),
+            show_label=False,
+            show_download_button=False,
+            show_fullscreen_button=False,
+            interactive=False,
+            container=False,
+            elem_classes=["teaser"],
+        )
+        gr.Markdown("# LingBot 3D")
+        gr.Markdown(
+            "Upload a short video clip and get back a navigable 3D scene. "
+            "Powered by the LingBot-Map checkpoint, exported as a GLB plus a downloadable results bundle."
+        )
 
-            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",
+        startup_md = _build_startup_markdown()
+        if startup_md:
+            gr.Markdown(startup_md)
+
+        with gr.Row():
+            with gr.Column():
+                video_file = gr.Video(
+                    label="Input video",
+                    sources=["upload"],
+                    format="mp4",
+                    height=380,
+                )
+            with gr.Column():
+                model_preview = gr.Model3D(
+                    label="3D preview",
+                    display_mode="point_cloud",
+                    clear_color=[1.0, 1.0, 1.0, 1.0],
+                    height=380,
                 )
 
-            run_button = gr.Button("Build 3D Scene", variant="primary", size="lg")
-            status_markdown = gr.Markdown()
+        run_button = gr.Button("Build 3D Scene", variant="primary")
+        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.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():
-                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)
+                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",
+            )
+
+        with gr.Row():
+            preview_image = gr.Image(label="Frame preview", interactive=False, height=200)
+            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,
@@ -651,10 +568,9 @@ with gr.Blocks(
         ],
         show_progress="full",
     )
-    gr.HTML("</div>")
 
 demo.queue(default_concurrency_limit=1)
 
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(css=css)