Add example thumbnails and version label to Space UI

app.py

@@ -13,7 +13,8 @@ import yaml
 from bat_tracker.pipeline import run_pipeline
 
 
-APP_TITLE = "Bat Tracker"
+APP_VERSION = "v1.1.4"
+APP_TITLE = f"Bat Tracker {APP_VERSION}"
 APP_DESCRIPTION = (
     "Sube un video IR monocromo para ejecutar el pipeline, revisar la region valida "
     "detectada y consultar `events.csv` en forma de tabla."
@@ -44,20 +45,69 @@ def _format_duration_hms(seconds: float) -> str:
 
 
 # Pesos según la ficha del bucket HF; duraciones comprobadas con ffprobe sobre la URL resolve.
-EXAMPLE_VIDEO_ROWS: list[tuple[str, str, str]] = [
-    (
-        EXAMPLE_VIDEO_RABELLA,
-        "39,3 MB",
-        _format_duration_hms(60.095667),
-    ),
-    (
-        EXAMPLE_VIDEO_PROVAGRAN2,
-        "862 MB",
-        _format_duration_hms(600.0),
-    ),
+EXAMPLE_VIDEOS = [
+    {
+        "name": "Rabella",
+        "url": EXAMPLE_VIDEO_RABELLA,
+        "size": "39,3 MB",
+        "duration": _format_duration_hms(60.095667),
+    },
+    {
+        "name": "Provagran2",
+        "url": EXAMPLE_VIDEO_PROVAGRAN2,
+        "size": "862 MB",
+        "duration": _format_duration_hms(600.0),
+    },
 ]
 
 
+def _build_examples_table_html() -> str:
+    rows: list[str] = []
+    for idx, example in enumerate(EXAMPLE_VIDEOS, start=1):
+        rows.append(
+            f"""
+            <tr>
+              <td>{idx}</td>
+              <td>
+                <div class="example-thumb-wrap">
+                  <video class="example-thumb" src="{example["url"]}" preload="metadata" muted playsinline></video>
+                </div>
+              </td>
+              <td>{example["name"]}</td>
+              <td>{example["size"]}</td>
+              <td>{example["duration"]}</td>
+            </tr>
+            """
+        )
+    return (
+        """
+        <div class="examples-table-shell">
+          <table class="examples-table">
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Miniatura</th>
+                <th>Vídeo</th>
+                <th>Peso</th>
+                <th>Duración</th>
+              </tr>
+            </thead>
+            <tbody>
+        """
+        + "".join(rows)
+        + """
+            </tbody>
+          </table>
+        </div>
+        """
+    )
+
+
+def load_example(example_idx: int) -> tuple[str, str, str]:
+    example = EXAMPLE_VIDEOS[example_idx]
+    return example["url"], example["size"], example["duration"]
+
+
 def _prepare_config(config_file: str | None, work_dir: Path) -> Path:
     source_path = Path(config_file) if config_file else DEFAULT_CONFIG_PATH
     if not source_path.exists():
@@ -284,6 +334,60 @@ APP_CSS = """
       max-width: 220px;
     }
 
+    .examples-table-shell {
+      overflow-x: auto;
+      border: 1px solid #d7d0c3;
+      border-radius: 12px;
+      background: #fffdf8;
+      margin: 10px 0 14px;
+    }
+
+    .examples-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.95rem;
+      color: #2a231c;
+    }
+
+    .examples-table th,
+    .examples-table td {
+      text-align: left;
+      padding: 10px 12px;
+      border-bottom: 1px solid #e2d8c9;
+      vertical-align: middle;
+    }
+
+    .examples-table th {
+      background: #ebe3d4;
+      color: #3d352b;
+      font-weight: 700;
+    }
+
+    .examples-table tr:last-child td {
+      border-bottom: none;
+    }
+
+    .example-thumb-wrap {
+      width: 112px;
+      height: 64px;
+      overflow: hidden;
+      border-radius: 10px;
+      background: #1b1510;
+      border: 1px solid #c5bcab;
+    }
+
+    .example-thumb {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+      background: #1b1510;
+    }
+
+    .example-buttons {
+      gap: 10px;
+    }
+
     .config-note,
     .config-note * {
       color: #4a4238 !important;
@@ -303,9 +407,9 @@ APP_CSS = """
 with gr.Blocks(title=APP_TITLE) as demo:
     with gr.Column(elem_classes=["app-shell"]):
         gr.HTML(
-            """
+            f"""
             <section class="hero">
-              <h1>Bat Tracker Space</h1>
+              <h1>Bat Tracker Space {APP_VERSION}</h1>
               <p>
                 Interfaz minima para ejecutar el tracker sobre un video, inspeccionar la
                 region valida detectada y revisar los eventos agregados en forma de tabla.
@@ -382,17 +486,23 @@ with gr.Blocks(title=APP_TITLE) as demo:
         with gr.Column(elem_classes=["examples-footer"]):
             gr.Markdown(
                 "### Ejemplos de vídeo\n"
-                "Pulsa una fila de la tabla para cargar ese vídeo en **Video de entrada** (arriba). "
+                "Consulta la tabla con miniaturas y usa un botón para cargar ese vídeo en **Video de entrada**. "
                 "**Peso** y **duración** corresponden al archivo original en el bucket. "
                 "El segundo ejemplo es muy grande y puede tardar en descargarse."
             )
-            gr.Examples(
-                examples=[list(row) for row in EXAMPLE_VIDEO_ROWS],
-                inputs=[video_input, example_file_size, example_duration],
-                label="Vídeos de ejemplo",
-                cache_examples=False,
-                examples_per_page=6,
-            )
+            gr.HTML(_build_examples_table_html())
+            with gr.Row(elem_classes=["example-buttons"]):
+                example_rabella_button = gr.Button("Cargar Rabella")
+                example_provagran2_button = gr.Button("Cargar Provagran2")
+
+        example_rabella_button.click(
+            fn=lambda: load_example(0),
+            outputs=[video_input, example_file_size, example_duration],
+        )
+        example_provagran2_button.click(
+            fn=lambda: load_example(1),
+            outputs=[video_input, example_file_size, example_duration],
+        )
 
         run_button.click(
             fn=process_video,