Update app.py

app.py

@@ -1127,6 +1127,51 @@ def load_examples():
     return rows
 
 
+# ---------- sample input clips ("Try a sample clip") ----------
+# Before-clips from the model repo's examples/ folder, offered under the upload box for people without a
+# clip of their own. All are under 15 seconds, so they never need trimming.
+SAMPLE_INPUTS = [  # file number in examples/, caption
+    (1, "Outdoor interview"),
+    (2, "Talking head"),
+    (5, "Street portrait"),
+    (7, "Webinar host"),
+    (8, "Explainer to camera"),
+]
+SAMPLE_WEB = os.path.abspath("sample_inputs")
+
+
+def load_sample_inputs():
+    """Returns [(video_path, poster_path, caption), ...] for the sample strip."""
+    wanted = [n for n, _ in SAMPLE_INPUTS]
+    local = lambda n: sorted(glob.glob(os.path.join("examples", f"{n}_before.*")) +
+                             glob.glob(os.path.join(EX_DOWNLOAD, "examples", f"{n}_before.*")))
+    if not all(local(n) for n in wanted):
+        try:
+            from huggingface_hub import snapshot_download
+            snapshot_download(EXAMPLES_REPO, repo_type="model", token=HF_TOKEN or None, local_dir=EX_DOWNLOAD,
+                              allow_patterns=[f"examples/{n}_before.*" for n in wanted])
+        except Exception as e:
+            log.warning(f"[samples] couldn't copy sample clips from {EXAMPLES_REPO}/examples "
+                        f"({type(e).__name__}: {short(str(e), 200)})")
+    os.makedirs(SAMPLE_WEB, exist_ok=True)
+    out = []
+    for n, caption in SAMPLE_INPUTS:
+        found = local(n)
+        if not found:
+            continue
+        src = found[0]
+        if video_seconds(src) > ACCEPT_SECONDS:
+            log.warning(f"[samples] {os.path.basename(src)} is longer than {ACCEPT_SECONDS:g}s, skipped")
+            continue
+        poster = os.path.join(SAMPLE_WEB, f"{n}_before.jpg")
+        if not os.path.exists(poster):
+            subprocess.run(["ffmpeg", "-y", "-ss", "1", "-i", src, "-frames:v", "1", "-vf", "scale=480:-2",
+                            "-q:v", "4", poster], capture_output=True, text=True)
+        out.append((src, poster if os.path.exists(poster) else None, caption))
+    log.info(f"[samples] {len(out)} sample clips ready")
+    return out
+
+
 def _file_url(path):
     return f"/gradio_api/file={path}"
 
@@ -1433,6 +1478,21 @@ body.dr-sliding, body.dr-sliding * { cursor: grabbing !important; user-select: n
   line-height: 1.5 !important; text-align: left !important; }
 .gradio-container .dr-video-fig figcaption b { display: block; color: #fff !important; font-weight: 600 !important; font-size: 14px !important; }
 
+/* sample clip strip under the upload box */
+.gradio-container .dr-samples-label { font-size: 13px !important; color: var(--dr-muted) !important; margin: 4px 0 8px !important; }
+.gradio-container .dr-samples-label b { color: var(--dr-text) !important; font-weight: 600 !important; }
+.gradio-container .dr-samples { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
+.gradio-container .dr-sample { display: block; padding: 0 !important; margin: 0 !important; cursor: pointer; text-align: left;
+  background: transparent !important; border: 0 !important; min-width: 0; }
+.gradio-container .dr-sample img, .gradio-container .dr-sample .dr-sample-ph { display: block; width: 100%;
+  aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; border: 1px solid var(--dr-line); background: #000;
+  transition: border-color .15s; }
+.gradio-container .dr-sample span:not(.dr-sample-ph) { display: block; margin-top: 5px; font-size: 11px !important;
+  line-height: 1.3 !important; color: var(--dr-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.gradio-container .dr-sample:hover img { border-color: #6a6a75; }
+.gradio-container .dr-sample.is-on img { border-color: var(--dr-red); box-shadow: 0 0 0 1px var(--dr-red); }
+.gradio-container .dr-sample.is-on span:not(.dr-sample-ph) { color: #fff !important; }
+
 /* example grid */
 .gradio-container .dr-ex { width: min(1440px, calc(100vw - 64px)); position: relative; left: 50%;
   transform: translateX(-50%); min-width: 0; }
@@ -1509,6 +1569,7 @@ body.dr-sliding, body.dr-sliding * { cursor: grabbing !important; user-select: n
   .gradio-container .dr-meta span + span::before { content: none; }
   .gradio-container .dr-hero-actions a.dr-btn { flex: 1 1 100%; text-align: center; }
   .gradio-container .dr-head { min-height: 0; }
+  .gradio-container .dr-samples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .gradio-container #dr-login-cta, .gradio-container #dr-login-cta button { font-size: 15px !important; }
   .gradio-container .dr-card { padding: 16px !important; }
   .gradio-container .dr-mark { height: 28px !important; } .dr-word { height: 17px !important; }
@@ -1570,6 +1631,13 @@ FORCE_DARK = """
     b.classList.toggle('dr-signed-in', /^\\s*sign out/i.test(b.textContent || ''));
   };
   new MutationObserver(markSignedIn).observe(document.body, { childList: true, subtree: true, characterData: true });
+  // Sample clips: tell the app which one was picked
+  document.addEventListener('click', (e) => {
+    const card = e.target.closest && e.target.closest('.dr-sample'); if (!card) return;
+    document.querySelectorAll('.dr-sample').forEach((c) => c.classList.toggle('is-on', c === card));
+    const btn = document.getElementById('dr-sample-' + card.dataset.i);
+    if (btn) (btn.tagName === 'BUTTON' ? btn : btn.querySelector('button') || btn).click();
+  });
   // Trim timeline: preselect the first MAX seconds so the person only has to press Trim.
   // Gradio has no option for this, so we move the end handle the way a mouse drag would.
   const MAXS = __MAXSEC__, MINS = __MINSEC__, ACCEPT = __ACCEPT__;
@@ -1683,6 +1751,7 @@ FORCE_DARK = """
 """.replace("__MAXSEC__", str(MAX_SECONDS)).replace("__MINSEC__", str(MIN_SECONDS)).replace("__ACCEPT__", str(ACCEPT_SECONDS))
 
 EXAMPLE_ROWS = load_examples()
+SAMPLE_CLIPS = load_sample_inputs()
 
 def remaining_html(profile: gr.OAuthProfile | None = None):
     """Free allowance line next to the Generate button, with the live balance for signed-in users."""
@@ -1702,6 +1771,23 @@ def remaining_html(profile: gr.OAuthProfile | None = None):
 HIDE_DL = gr.update(visible=False, value=None)
 
 
+def samples_strip_html():
+    items = "".join(
+        f'<button type="button" class="dr-sample" data-i="{i}" title="Use the {caption} sample">'
+        + (f'<img src="{_file_url(poster)}" alt="" loading="lazy">' if poster else '<span class="dr-sample-ph"></span>')
+        + f'<span>{caption}</span></button>'
+        for i, (_, poster, caption) in enumerate(SAMPLE_CLIPS))
+    return (f'<div class="dr-samples-label">No clip handy? <b>Try a sample clip</b></div>'
+            f'<div class="dr-samples">{items}</div>')
+
+
+def pick_sample(index):
+    """Loads the chosen sample into the upload box (converted like an upload) and clears the old result."""
+    video, _, caption = SAMPLE_CLIPS[index]
+    log.info(f"[samples] picked {caption}")
+    return prepare_upload(video), None, IDLE, HIDE_DL
+
+
 def signin_state(profile: gr.OAuthProfile | None = None):
     """Signed out: the big sign-in button sits where Generate goes. Signed in: show Generate."""
     signed_in = profile is not None
@@ -1756,9 +1842,11 @@ with gr.Blocks(title=PAGE_TITLE) as demo:
             video_in = gr.Video(show_label=False, sources=["upload"], height=PLAYER_H, elem_classes="dr-media",
                                 elem_id="dr-in")
             trim_info = gr.HTML(visible=False, elem_classes="dr-trim")
-            samples = [[p] for p in sorted(glob.glob("examples/*.mp4")) if "_after." not in p]
-            if samples:
-                gr.Examples(samples, inputs=[video_in], label="No clip handy? Try one of these")
+            if SAMPLE_CLIPS:
+                gr.HTML(samples_strip_html())
+                # one hidden button per sample; the thumbnails click these (see the page script)
+                sample_btns = [gr.Button(f"Sample {i + 1}", visible="hidden", elem_id=f"dr-sample-{i}")
+                               for i in range(len(SAMPLE_CLIPS))]
 
             gr.HTML('<div class="dr-label"><b>02</b>Choose an expression</div>')
             preset = gr.Radio(list(PRESETS), value=DEFAULT_PRESET, show_label=False,
@@ -1865,6 +1953,10 @@ with gr.Blocks(title=PAGE_TITLE) as demo:
         slider.release(lambda: CUSTOM, outputs=[preset],
                        api_visibility="private", show_progress="hidden")
     video_in.upload(prepare_upload, inputs=[video_in], outputs=[video_in], api_visibility="private")
+    if SAMPLE_CLIPS:
+        for i, btn in enumerate(sample_btns):
+            btn.click(lambda i=i: pick_sample(i), inputs=None, outputs=[video_in, video_out, status_out, dl_btn],
+                      api_visibility="private", show_progress="minimal")
     video_in.change(check_length, inputs=[video_in], outputs=[trim_info], api_visibility="private",
                     show_progress="hidden", trigger_mode="always_last")
     video_in.clear(lambda: (None, IDLE, HIDE_DL), outputs=[video_out, status_out, dl_btn],
@@ -1894,5 +1986,5 @@ def favicon_file():
 
 startup_check()
 demo.queue(max_size=20).launch(theme=THEME, css=CSS, js=FORCE_DARK, head=HEAD,
-                               allowed_paths=[EX_WEB, EX_DOWNLOAD, *(os.path.abspath(f) for f in EXAMPLES_FOLDERS)],
+                               allowed_paths=[EX_WEB, EX_DOWNLOAD, SAMPLE_WEB, os.path.abspath("examples"), *(os.path.abspath(f) for f in EXAMPLES_FOLDERS)],
                                favicon_path=favicon_file(), footer_links=[])