changes to examples

app.py

@@ -846,71 +846,50 @@ with gr.Blocks(title=APP_TITLE, theme=_theme, css=LEADERBOARD_CSS) as demo:
 
         with gr.TabItem(tab_label("examples", "Examples"), elem_id="examples-tab", id=4):
             examples_renderer.ensure_assets()
-            gr.Markdown(
-                "## Condition examples\n\n"
-                "Pre-rendered clips illustrate three leaderboard conditions. "
-                "See the **About** tab for metric definitions."
-            )
-            gr.HTML(value=examples_renderer.status_html())
             _dry = examples_renderer.sample_paths("dry")
             _hi = examples_renderer.sample_paths("high_snr")
             _lo = examples_renderer.sample_paths("low_snr")
             _scene = examples_renderer.scene_image_path()
 
-            gr.Image(
-                value=_scene,
-                label="Treble scene (screenshot)",
-                interactive=False,
-                show_label=True,
-            )
-
-            gr.Markdown(
-                "### Dry Speech\n"
-                "Close-mic anechoic speech — no room impulse response, no background noise."
-            )
-            with gr.Row():
-                gr.Audio(
-                    value=_dry[0],
-                    label="Dry Speech — example 1",
+            def _example_audio(path: str | None, label: str):
+                return gr.Audio(
+                    value=path,
+                    type="filepath",
+                    label=label,
                     interactive=False,
+                    editable=False,
+                    show_download_button=False,
+                    show_share_button=False,
+                    elem_classes="examples-audio",
                 )
-                gr.Audio(
-                    value=_dry[1],
-                    label="Dry Speech — example 2",
+
+            with gr.Column(elem_classes="examples-scene-wrap"):
+                gr.Image(
+                    value=_scene,
+                    type="filepath",
+                    label="Treble scene",
                     interactive=False,
+                    show_label=False,
+                    show_download_button=False,
+                    show_fullscreen_button=False,
+                    height=300,
+                    container=False,
                 )
 
-            gr.Markdown(
-                "### High SNR (~25 dB)\n"
-                "Speech with target IR and a quiet non-stationary interferer."
-            )
+            gr.Markdown("### Dry Speech")
             with gr.Row():
-                gr.Audio(
-                    value=_hi[0],
-                    label="High SNR — example 1",
-                    interactive=False,
-                )
-                gr.Audio(
-                    value=_hi[1],
-                    label="High SNR — example 2",
-                    interactive=False,
-                )
+                _example_audio(_dry[0], "Example 1")
+                _example_audio(_dry[1], "Example 2")
 
-            gr.Markdown(
-                "### Low SNR (~2 dB)\n"
-                "Same layout as High SNR with a much louder interferer."
-            )
+            gr.Markdown("### High SNR")
             with gr.Row():
-                gr.Audio(
-                    value=_lo[0],
-                    label="Low SNR — example 1",
-                    interactive=False,
-                )
-                gr.Audio(
-                    value=_lo[1],
-                    label="Low SNR — example 2",
-                    interactive=False,
-                )
+                _example_audio(_hi[0], "Example 1")
+                _example_audio(_hi[1], "Example 2")
+
+            gr.Markdown("### Low SNR")
+            with gr.Row():
+                _example_audio(_lo[0], "Example 1")
+                _example_audio(_lo[1], "Example 2")
 
         with gr.TabItem(tab_label("about", "About"), elem_id="about-tab", id=5):
             gr.Markdown(ABOUT_TEXT, elem_classes="markdown-text")

constants.py

@@ -384,6 +384,31 @@ footer { display: none !important; }
 button.primary, .primary button {
     font-weight: 600 !important;
 }
+
+/* ---- Examples tab ---- */
+#examples-tab .examples-scene-wrap .image-container,
+#examples-tab .examples-scene-wrap .wrap {
+    max-height: 300px;
+    justify-content: center;
+}
+#examples-tab .examples-scene-wrap img {
+    object-fit: contain !important;
+    max-height: 300px;
+    width: auto !important;
+    max-width: 100%;
+    margin: 0 auto;
+    display: block;
+}
+#examples-tab .examples-scene-wrap {
+    max-width: 720px;
+    margin: 0 auto 0.5rem auto;
+}
+#examples-tab button.playback.icon {
+    display: none !important;
+}
+#examples-tab .examples-audio .icon-button-wrapper:has(button.playback) {
+    display: none !important;
+}
 """.replace("__TREBLE_TEAL__", TREBLE_TEAL).replace(
     "__TREBLE_CYAN__", TREBLE_CYAN
 ).replace("__TREBLE_MINT__", TREBLE_MINT).replace(