Update app.py

app.py

@@ -746,6 +746,11 @@ FAQ = [
      "make a real person appear to express something in order to deceive."),
 ]
 
+PROMO_VIDEOS = [  # YouTube video ID, accessible title
+    ("WYi2y1NOhhc", "DRAMA promo video 1"),
+    ("NngMqkyotx8", "DRAMA promo video 2"),
+]
+
 FEATURES = [
     ("AI smile generator",
      "Add a natural smile to a neutral face, or fix a smile that looks forced. Go from a subtle, "
@@ -933,6 +938,15 @@ CSS = """
   margin: 0 0 6px !important; }
 .gradio-container .dr-item span { font-size: 14px !important; color: var(--dr-muted) !important; line-height: 1.55 !important; }
 
+/* promo videos */
+.gradio-container .dr-center-head { text-align: center !important; max-width: 640px; margin: 0 auto 28px !important; }
+.gradio-container .dr-center-head h2, .gradio-container .dr-center-head .dr-section-sub { text-align: center !important; }
+.gradio-container .dr-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.gradio-container .dr-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
+  border: 1px solid var(--dr-line); background: #000; }
+.gradio-container .dr-video iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important;
+  border: 0 !important; }
+
 /* 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;
@@ -969,6 +983,7 @@ CSS = """
 @media (max-width: 640px) {
   .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-hero { padding: 40px 0 28px; }
   .gradio-container .dr-hero .dr-sub { font-size: 16px !important; }
   .gradio-container .dr-meta { gap: 4px 14px; }
@@ -1037,6 +1052,20 @@ 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>""")
 
+    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" '
+        f'allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowfullscreen>'
+        f'</iframe></div>'
+        for vid, title in PROMO_VIDEOS)
+    gr.HTML(f"""
+    <section class="dr-section">
+      <div class="dr-center-head"><div class="dr-kicker">In action</div>
+        <h2>See DRAMA in action</h2>
+        <div class="dr-section-sub">Watch how DRAMA changes the expression and keeps the rest of the take.</div></div>
+      <div class="dr-videos">{videos}</div>
+    </section>""")
+
     features = "".join(f'<div class="dr-item"><h3>{title}</h3><span>{text}</span></div>'
                        for title, text in FEATURES)
     gr.HTML(f"""
@@ -1094,4 +1123,4 @@ def favicon_file():
 
 startup_check()
 demo.queue(max_size=20).launch(theme=THEME, css=CSS, js=FORCE_DARK, head=HEAD,
-                               favicon_path=favicon_file(), footer_links=[])
+                               favicon_path=favicon_file(), footer_links=[])