Update app.py

app.py

@@ -1037,6 +1037,15 @@ FAQ = [  # order follows the review: what it is, free access, how to, API, then
 EXAMPLES_REPO = os.environ.get("EXAMPLES_REPO", "trydrama-neuralgarage/DRAMA")
 EXAMPLES_FOLDERS = ["drama-examples", "drama_examples"]  # either spelling works
 EXAMPLES_VISIBLE = 3                                  # rows shown before "Show more examples"
+EXAMPLE_TITLES = {  # folder number -> what the example shows (folders without a title fall back to "Example NN")
+    "1": "High precision",
+    "2": "Studio shot, lip movement preserved",
+    "3": "Side angle",
+    "4": "Lighting variation",
+    "5": "Multiple faces",
+    "6": "Webcam footage",
+    "7": "Moving camera",
+}
 EX_DOWNLOAD = os.path.abspath("example_cache")        # copy of the repo folder
 EX_WEB = os.path.abspath("example_web")               # browser-ready MP4s and still frames
 
@@ -1127,9 +1136,11 @@ def examples_html(rows):
                 f'<video src="{_file_url(video)}"{poster_attr} controls muted playsinline preload="none"></video>'
                 f'<figcaption>{cap}</figcaption></figure>')
     def row(folder, clips):
-        return (f'<div class="dr-ex-row dr-sync"><div class="dr-ex-num">Example {int(folder):02d}</div>'
-                if folder.isdigit() else f'<div class="dr-ex-row dr-sync"><div class="dr-ex-num">{folder}</div>') + \
-               f'<div class="dr-ex-grid">{"".join(figure(*c) for c in clips)}</div></div>'
+        num = f"{int(folder):02d}" if folder.isdigit() else folder
+        title = EXAMPLE_TITLES.get(folder.lstrip("0") or folder, f"Example {num}")
+        return (f'<div class="dr-ex-row dr-sync"><div class="dr-ex-head"><span class="dr-ex-num">{num}</span>'
+                f'<h3>{title}</h3></div>'
+                f'<div class="dr-ex-grid">{"".join(figure(*c) for c in clips)}</div></div>')
     shown = "".join(row(*r) for r in rows[:EXAMPLES_VISIBLE])
     more = rows[EXAMPLES_VISIBLE:]
     more_html = (f'<details class="dr-ex-more"><summary>Show {len(more)} more example{"s" if len(more) != 1 else ""}'
@@ -1221,6 +1232,9 @@ CSS = """
 :root { --dr-red: #e3141c; --dr-red-soft: rgba(227,20,28,.12); --dr-line: #2a2a32; --dr-card: #121216;
   --dr-text: #ededf0; --dr-muted: #9a9aa6; --dr-faint: #6b6b76; }
 .gradio-container { max-width: 1120px !important; margin: 0 auto !important; padding: 0 24px 48px !important; }
+/* let the example grid extend wider than the page column; the page itself clips any sideways overflow */
+.gradio-container { overflow: visible !important; }
+html, body { overflow-x: clip !important; }
 .gradio-container .main.app { padding: 8px 0 !important; }
 .gradio-container .html-container { padding: 0 !important; }
 .gradio-container .prose { max-width: none !important; }
@@ -1412,11 +1426,15 @@ body.dr-sliding, body.dr-sliding * { cursor: grabbing !important; user-select: n
 .gradio-container .dr-video-fig figcaption b { display: block; color: #fff !important; font-weight: 600 !important; font-size: 14px !important; }
 
 /* example grid */
-.gradio-container .dr-ex { max-width: 1100px; margin: 0 auto; display: grid; gap: 28px; min-width: 0; }
-.gradio-container .dr-ex-row { min-width: 0; }
-.gradio-container .dr-ex-num { font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace !important; letter-spacing: .08em;
-  color: var(--dr-faint) !important; text-transform: uppercase; margin: 0 0 10px !important; }
-.gradio-container .dr-ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+.gradio-container .dr-ex { width: min(1440px, calc(100vw - 64px)); position: relative; left: 50%;
+  transform: translateX(-50%); min-width: 0; }
+.gradio-container .dr-ex-row { min-width: 0; margin: 0 0 56px !important; }
+.gradio-container .dr-ex-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px !important; }
+.gradio-container .dr-ex-num { font: 600 12px/1 ui-monospace, "SF Mono", Menlo, monospace !important;
+  color: var(--dr-red) !important; }
+.gradio-container .dr-ex-head h3 { font-size: 18px !important; font-weight: 600 !important; color: #fff !important;
+  margin: 0 !important; letter-spacing: -0.01em; }
+.gradio-container .dr-ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
 .gradio-container .dr-ex-grid figure { margin: 0 !important; min-width: 0; }
 .gradio-container .dr-ex-grid video { display: block; width: 100% !important; aspect-ratio: 16 / 9; object-fit: contain;
   background: #000; border-radius: 10px; border: 1px solid var(--dr-line); }
@@ -1425,14 +1443,14 @@ body.dr-sliding, body.dr-sliding * { cursor: grabbing !important; user-select: n
   font-size: 13px !important; color: var(--dr-muted) !important; }
 .gradio-container .dr-ex-grid figcaption b { color: #fff !important; font-weight: 600 !important; }
 .gradio-container .dr-ex-grid figcaption span::before { content: "·"; margin-right: 8px; color: var(--dr-faint); }
-.gradio-container .dr-ex-more { display: grid; gap: 28px; }
-.gradio-container .dr-ex-more > summary { list-style: none; cursor: pointer; justify-self: center; font-size: 14px !important;
+.gradio-container .dr-ex-more { display: block; }
+.gradio-container .dr-ex-more > summary { list-style: none; cursor: pointer; width: max-content; margin: 0 auto !important; font-size: 14px !important;
   font-weight: 600 !important; color: #fff !important; padding: 9px 18px !important; border-radius: 999px;
   border: 1px solid var(--dr-line); }
 .gradio-container .dr-ex-more > summary::-webkit-details-marker { display: none; }
 .gradio-container .dr-ex-more > summary:hover { border-color: #4a4a55; }
 .gradio-container .dr-ex-more[open] > summary { display: none; }
-.gradio-container .dr-ex-more[open] { display: grid; }
+.gradio-container .dr-ex-more[open] { display: block; }
 
 /* FAQ */
 .gradio-container .dr-faq { display: grid; border-top: 1px solid var(--dr-line); }
@@ -1474,6 +1492,9 @@ body.dr-sliding, body.dr-sliding * { cursor: grabbing !important; user-select: n
   .gradio-container .dr-ex-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
     overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
   .gradio-container .dr-ex-grid figure { scroll-snap-align: start; }
+  .gradio-container .dr-ex { width: calc(100vw - 48px); }
+  .gradio-container .dr-ex-row { margin-bottom: 40px !important; }
+  .gradio-container .dr-ex-head h3 { font-size: 16px !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; }