Restore examples table behavior with thumbnail column

app.py

@@ -45,62 +45,20 @@ def _format_duration_hms(seconds: float) -> str:
 
 
 # Pesos según la ficha del bucket HF; duraciones comprobadas con ffprobe sobre la URL resolve.
-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),
-    },
+EXAMPLE_VIDEO_ROWS: list[tuple[str, str, str, str]] = [
+    (
+        EXAMPLE_VIDEO_RABELLA,
+        EXAMPLE_VIDEO_RABELLA,
+        "39,3 MB",
+        _format_duration_hms(60.095667),
+    ),
+    (
+        EXAMPLE_VIDEO_PROVAGRAN2,
+        EXAMPLE_VIDEO_PROVAGRAN2,
+        "862 MB",
+        _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 _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():
@@ -324,50 +282,19 @@ APP_CSS = """
     }
 
     .examples-footer .gr-examples tbody td:first-child {
-      max-width: 220px;
-    }
-
-    .examples-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.95rem;
-      color: #2a231c;
-      margin-top: 10px;
-    }
-
-    .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;
+      width: 136px;
+      min-width: 136px;
+      max-width: 136px;
     }
 
-    .examples-table tr:last-child td {
-      border-bottom: none;
-    }
-
-    .example-thumb-wrap {
+    .examples-footer .gr-examples tbody td:first-child video {
       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;
+      border-radius: 10px;
       background: #1b1510;
+      border: 1px solid #c5bcab;
     }
 
     .config-note,
@@ -418,6 +345,21 @@ with gr.Blocks(title=APP_TITLE) as demo:
                     "Si no subes configuración, se usará `config.out3_clean.yaml`.",
                     elem_classes=["config-note"],
                 )
+                example_thumbnail = gr.Video(
+                    label="Miniatura",
+                    interactive=False,
+                    visible=False,
+                )
+                example_file_size = gr.Textbox(
+                    label="Peso (original)",
+                    interactive=False,
+                    visible=False,
+                )
+                example_duration = gr.Textbox(
+                    label="Duración",
+                    interactive=False,
+                    visible=False,
+                )
             with gr.Column(scale=1, elem_classes=["panel"]):
                 gr.HTML('<div class="section-kicker">Resumen</div>')
                 summary_output = gr.Textbox(
@@ -457,11 +399,17 @@ with gr.Blocks(title=APP_TITLE) as demo:
         with gr.Column(elem_classes=["examples-footer"]):
             gr.Markdown(
                 "### Ejemplos de vídeo\n"
-                "La tabla muestra una miniatura de cada vídeo. "
+                "Pulsa una fila de la tabla para cargar ese vídeo en **Video de entrada** (arriba). "
                 "**Peso** y **duración** corresponden al archivo original en el bucket. "
                 "El segundo ejemplo es muy grande y puede tardar en descargarse."
             )
-            gr.HTML(_build_examples_table_html())
+            gr.Examples(
+                examples=[list(row) for row in EXAMPLE_VIDEO_ROWS],
+                inputs=[example_thumbnail, video_input, example_file_size, example_duration],
+                label="Vídeos de ejemplo",
+                cache_examples=False,
+                examples_per_page=6,
+            )
 
         run_button.click(
             fn=process_video,