Update app.py

app.py

@@ -426,8 +426,9 @@ def length_note(seconds, after_trim=False):
             f'{int(MAX_SECONDS)} seconds before uploading.</div>'))
     return gr.update(visible=True, value=(
         f'<div class="dr-trim-note"><b>Your clip is {clock(seconds)} long.</b> The demo takes up to '
-        f'{int(MAX_SECONDS)} seconds. Click the scissors icon at the top right of the video, drag the handles to '
-        f'choose up to {int(MAX_SECONDS)} seconds, then press <b>Trim</b>.</div>'))
+        f'{int(MAX_SECONDS)} seconds. Click the scissors icon at the top right of the video: the first '
+        f'{int(MAX_SECONDS)} seconds are selected for you. Press <b>Trim</b>, or move the handles to pick '
+        f'a different part first.</div>'))
 
 
 def prepare_upload(video):
@@ -922,6 +923,59 @@ FAQ = [
      "make a real person appear to express something in order to deceive."),
 ]
 
+# Before/after samples. Files are N_before.<ext> / N_after.<ext>.
+# Served from a local "samples/" folder in the Space if it exists, otherwise from SAMPLES_BASE
+# (the model repo's assets folder; that only works for visitors once the model repo is public).
+SAMPLES_DIR = "samples"
+SAMPLES_BASE = os.environ.get(
+    "SAMPLES_BASE", "https://huggingface.co/trydrama-neuralgarage/DRAMA/resolve/main/assets").rstrip("/")
+SAMPLES = [  # number, scene, what DRAMA changed, file extension
+    (1, "Outdoor interview", "Neutral to a warm smile", "mp4"),
+    (2, "Talking head", "Serious to friendly", "mp4"),
+    (3, "Studio presenter", "Neutral to smiling", "mov"),
+    (4, "Home vlog", "Neutral to smiling", "mp4"),
+    (5, "Street portrait", "Serious to a subtle smile", "mp4"),
+    (6, "Outdoor portrait", "Smile to a big smile", "mp4"),
+    (7, "Webinar host", "Neutral to smiling", "mp4"),
+    (8, "Explainer to camera", "Neutral to smiling", "mp4"),
+]
+
+
+def sample_url(n, kind, ext):
+    local = sorted(glob.glob(os.path.join(SAMPLES_DIR, f"{n}_{kind}.*")))
+    if local:
+        return f"/gradio_api/file={os.path.abspath(local[0])}#t=0.1"
+    return f"{SAMPLES_BASE}/{n}_{kind}.{ext}#t=0.1"
+
+
+def samples_html():
+    chips, first = [], None
+    for i, (n, scene, change, ext) in enumerate(SAMPLES):
+        before, after = sample_url(n, "before", ext), sample_url(n, "after", ext)
+        first = first or (before, after, scene, change)
+        chips.append(f'<button type="button" class="dr-ba-chip{" is-on" if i == 0 else ""}" '
+                     f'data-before="{before}" data-after="{after}" data-scene="{scene}" '
+                     f'data-change="{change}"><b>{n:02d}</b>{scene}</button>')
+    before, after, scene, change = first
+    return f"""
+    <section class="dr-section" id="examples">
+      <div class="dr-center-head"><div class="dr-kicker">Before and after</div>
+        <h2>Same take. New expression.</h2>
+        <div class="dr-section-sub">Real footage edited with DRAMA. Pick an example and press play;
+          both videos play in sync.</div></div>
+      <div class="dr-ba">
+        <div class="dr-ba-chips" role="tablist">{''.join(chips)}</div>
+        <div class="dr-ba-stage">
+          <figure><figcaption>Original</figcaption>
+            <video class="dr-ba-before" src="{before}" muted playsinline controls preload="metadata"></video></figure>
+          <figure><figcaption class="dr-ba-red">With DRAMA</figcaption>
+            <video class="dr-ba-after" src="{after}" muted playsinline controls preload="metadata"></video></figure>
+        </div>
+        <div class="dr-ba-cap"><b>{scene}</b><span>{change}</span></div>
+      </div>
+    </section>"""
+
+
 PROMO_VIDEOS = [  # YouTube video ID, accessible title
     ("WYi2y1NOhhc", "Introducing trydrama.io"),
     ("NngMqkyotx8", "Acting is Solved!"),
@@ -1140,6 +1194,31 @@ CSS = """
 .gradio-container .dr-video iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important;
   border: 0 !important; }
 
+/* before / after samples */
+.gradio-container .dr-ba { max-width: 1100px; min-width: 0; margin: 0 auto; }
+.gradio-container .dr-ba-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: thin;
+  justify-content: center; flex-wrap: wrap; }
+.gradio-container .dr-ba-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
+  padding: 8px 14px !important; border-radius: 999px !important; border: 1px solid var(--dr-line) !important;
+  background: transparent !important; color: var(--dr-muted) !important; font-size: 13px !important; font-weight: 500 !important;
+  line-height: 1.2 !important; transition: border-color .15s, color .15s; }
+.gradio-container .dr-ba-chip b { font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace !important; color: var(--dr-faint) !important; }
+.gradio-container .dr-ba-chip:hover { color: #fff !important; border-color: #4a4a55 !important; }
+.gradio-container .dr-ba-chip.is-on { color: #fff !important; border-color: var(--dr-red) !important; background: var(--dr-red-soft) !important; }
+.gradio-container .dr-ba-chip.is-on b { color: var(--dr-red) !important; }
+.gradio-container .dr-ba-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.gradio-container .dr-ba-stage figure { margin: 0 !important; position: relative; }
+.gradio-container .dr-ba-stage figcaption { position: absolute; top: 10px; left: 10px; z-index: 2; pointer-events: none;
+  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .02em; color: #fff !important;
+  background: rgba(0,0,0,.55); padding: 4px 9px; border-radius: 6px; }
+.gradio-container .dr-ba-stage figcaption.dr-ba-red { background: var(--dr-red); }
+.gradio-container .dr-ba-stage video { display: block; width: 100% !important; aspect-ratio: 16 / 9; object-fit: contain;
+  background: #000; border-radius: 12px; border: 1px solid var(--dr-line); }
+.gradio-container .dr-ba-cap { display: flex; gap: 10px; justify-content: center; align-items: baseline; flex-wrap: wrap;
+  margin-top: 14px; font-size: 14px !important; color: var(--dr-muted) !important; }
+.gradio-container .dr-ba-cap b { color: #fff !important; font-weight: 600 !important; }
+.gradio-container .dr-ba-cap span::before { content: "·"; margin-right: 10px; color: var(--dr-faint); }
+
 /* FAQ */
 .gradio-container .dr-faq { display: grid; border-top: 1px solid var(--dr-line); }
 .gradio-container .dr-faq details { border-bottom: 1px solid var(--dr-line); padding: 0 !important; margin: 0 !important;
@@ -1177,6 +1256,8 @@ CSS = """
   .gradio-container { padding: 0 16px 32px !important; }
   .gradio-container .dr-list { grid-template-columns: 1fr; }
   .gradio-container .dr-videos { grid-template-columns: 1fr; }
+  .gradio-container .dr-ba-stage { grid-template-columns: 1fr; }
+  .gradio-container .dr-ba-chip { padding: 7px 12px !important; font-size: 12px !important; }
   .gradio-container .dr-hero { padding: 40px 0 28px; }
   .gradio-container .dr-hero .dr-sub { font-size: 16px !important; }
   .gradio-container .dr-meta { gap: 4px 14px; }
@@ -1187,13 +1268,80 @@ CSS = """
   .gradio-container .dr-cta-btns { width: 100%; } .gradio-container a.dr-btn { flex: 1; text-align: center; }
   .gradio-container .dr-section { padding-top: 64px !important; }
   .gradio-container .dr-foot { grid-template-columns: 1fr; margin-top: 64px; }
-  .gradio-container .dr-foot nav { justify-self: start; } .gradio-container .dr-foot nav a { margin: 0 16px 0 0; }
+  .gradio-container .dr-foot nav { justify-self: start; display: flex; flex-wrap: wrap; gap: 4px 18px; }
+  .gradio-container .dr-foot nav a { margin: 0 !important; padding: 0 !important; white-space: nowrap; }
 }
 """
 
+
+def _fix_media_rules(css):
+    """Gradio rewrites selectors inside @media blocks to
+    ".gradio-container.gradio-container-X .contain <selector>", so a selector that itself
+    starts with ".gradio-container" never matches. Inside @media, drop that leading part
+    so the rewritten selector lands on our elements."""
+    import re
+    out, i = [], 0
+    for m in re.finditer(r"@media[^{]+\{", css):
+        start = m.end()
+        depth, j = 1, start
+        while depth:
+            depth += {"{": 1, "}": -1}.get(css[j], 0)
+            j += 1
+        body = re.sub(r"(^|[,{}])(\s*)\.gradio-container\s+(?=[.#a-zA-Z])", r"\1\2", css[start:j - 1],
+                      flags=re.M)
+        out.append(css[i:start] + body + "}")
+        i = j
+    out.append(css[i:])
+    return "".join(out)
+
+
+CSS = _fix_media_rules(CSS)
+
 FORCE_DARK = """
-() => { document.documentElement.classList.add('dark'); document.body.classList.add('dark'); }
-"""
+() => {
+  document.documentElement.classList.add('dark'); document.body.classList.add('dark');
+  if (window.__drBA) return; window.__drBA = true;
+  // Before/after: switch examples
+  document.addEventListener('click', (e) => {
+    const chip = e.target.closest && e.target.closest('.dr-ba-chip'); if (!chip) return;
+    const root = chip.closest('.dr-ba');
+    root.querySelectorAll('.dr-ba-chip').forEach((c) => c.classList.toggle('is-on', c === chip));
+    const b = root.querySelector('.dr-ba-before'), a = root.querySelector('.dr-ba-after');
+    [b, a].forEach((v) => v.pause());
+    b.src = chip.dataset.before; a.src = chip.dataset.after; b.load(); a.load();
+    const cap = root.querySelector('.dr-ba-cap');
+    cap.innerHTML = '<b></b><span></span>';
+    cap.querySelector('b').textContent = chip.dataset.scene; cap.querySelector('span').textContent = chip.dataset.change;
+  });
+  // 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__;
+  const autoTrim = () => {
+    const root = document.getElementById('dr-in'); if (!root) return;
+    const right = root.querySelector('.handle.right'), tl = root.querySelector('#timeline'), v = root.querySelector('video');
+    if (!right || !tl || !v || right.dataset.drAuto) return;
+    const d = v.duration, r = tl.getBoundingClientRect();
+    if (!(d > 0) || !r.width) return;
+    right.dataset.drAuto = '1';
+    if (d <= MAXS + 0.5) return;
+    const y = r.top + r.height / 2;
+    right.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: r.right, clientY: y }));
+    window.dispatchEvent(new MouseEvent('mousemove', { clientX: r.left + r.width * (MAXS / d), clientY: y }));
+    window.dispatchEvent(new MouseEvent('mouseup', {}));
+    v.currentTime = 0;
+  };
+  new MutationObserver(autoTrim).observe(document.body, { childList: true, subtree: true });
+  // Before/after: keep the two videos playing together
+  const partner = (v) => { const r = v.closest && v.closest('.dr-ba'); if (!r) return null;
+    return v.classList.contains('dr-ba-before') ? r.querySelector('.dr-ba-after') : r.querySelector('.dr-ba-before'); };
+  document.addEventListener('play', (e) => { const o = partner(e.target); if (!o) return;
+    if (Math.abs(o.currentTime - e.target.currentTime) > 0.15) o.currentTime = e.target.currentTime;
+    if (o.paused) o.play().catch(() => {}); }, true);
+  document.addEventListener('pause', (e) => { const o = partner(e.target); if (o && !o.paused && !e.target.ended) o.pause(); }, true);
+  document.addEventListener('seeked', (e) => { const o = partner(e.target);
+    if (o && Math.abs(o.currentTime - e.target.currentTime) > 0.15) o.currentTime = e.target.currentTime; }, true);
+}
+""".replace("__MAXSEC__", str(MAX_SECONDS))
 
 with gr.Blocks(title=PAGE_TITLE) as demo:
     gr.HTML('<div class="dr-glow"></div>')
@@ -1251,6 +1399,8 @@ with gr.Blocks(title=PAGE_TITLE) as demo:
               <div class="dr-cta-btns"><a class="dr-btn" href="{DOCS}" target="_blank">API docs</a>
               <a class="dr-btn dr-btn-primary" href="{SITE}" target="_blank">Try DRAMA Studio</a></div></div>""")
 
+    gr.HTML(samples_html())
+
     videos = "".join(
         f'<div class="dr-video"><iframe src="https://www.youtube-nocookie.com/embed/{vid}?rel=0&modestbranding=1" '
         f'title="{title}" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" '
@@ -1325,4 +1475,5 @@ def favicon_file():
 
 startup_check()
 demo.queue(max_size=20).launch(theme=THEME, css=CSS, js=FORCE_DARK, head=HEAD,
+                               allowed_paths=[os.path.abspath(SAMPLES_DIR)],
                                favicon_path=favicon_file(), footer_links=[])