Third UI pass: pipeline flow, primary outputs, animations, empty states

Hero
- "by lmms-lab" chip above the title.
- Larger 2.7rem gradient title with animated background-position
drift (ovc-shift, 9s loop) so the gradient feels alive.
- Subtle 28px grid-pattern background reinforces the patch-grid
metaphor without distracting from text.

Pipeline flow strip
- New dashed card under the hero showing the six pipeline stages:
Sample -> Score -> GOP -> Top-K -> Visualize -> Pack canvas.
Gives first-time visitors a one-glance map of what the demo does.

Cards
- Two tiers: regular ovc-card and accented ovc-card-primary used on
the visualization video and the codec-vs-uniform charts. Primary
cards carry an indigo ring + soft shadow so the eye lands on
outputs first.
- Section headers re-styled as pill chips (uppercase, tinted
background, gradient bullet) for stronger visual hierarchy.
- Card fade-in keyframe so newly rendered components animate in.

Run button
- Idle pulse (2.6s) draws attention before the first run; pauses on
hover so the interaction state stays predictable.
- Background also drifts on the same shift keyframe.

Empty states
- Vis video / chart / canvas now show an "ovc-empty" placeholder
explaining what will appear after a run, so a fresh page does not
look broken.

app.py

@@ -754,19 +754,36 @@ CUSTOM_CSS = """
 :root, .gradio-container, .gradio-container.dark {
     --ovc-grad: linear-gradient(135deg, #4f46e5 0%, #2563eb 50%, #06b6d4 100%);
     --ovc-grad-soft: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(6,182,212,0.10));
+    --ovc-ring: rgba(99,102,241,0.32);
+    --ovc-ring-strong: rgba(99,102,241,0.55);
 }
 .gradio-container { max-width: 1320px !important; margin: 0 auto !important; }
+@keyframes ovc-shift {
+    0%   { background-position: 0% 50%; }
+    50%  { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+@keyframes ovc-pulse {
+    0%, 100% { box-shadow: 0 6px 18px rgba(37, 99, 235, 0.32); }
+    50%      { box-shadow: 0 8px 26px rgba(37, 99, 235, 0.50); }
+}
+@keyframes ovc-fade-in {
+    from { opacity: 0; transform: translateY(4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
 
 /* Hero */
 #ovc-hero {
     text-align: center;
-    padding: 36px 16px 18px;
-    border-radius: 18px;
+    padding: 44px 16px 22px;
+    border-radius: 22px;
     background:
-        radial-gradient(120% 80% at 50% -10%, rgba(79,70,229,0.18), transparent 60%),
-        linear-gradient(180deg, rgba(79,70,229,0.06), rgba(6,182,212,0.03));
-    border: 1px solid rgba(99,102,241,0.18);
-    margin-bottom: 14px;
+        radial-gradient(120% 80% at 50% -10%, rgba(79,70,229,0.20), transparent 60%),
+        linear-gradient(180deg, rgba(79,70,229,0.06), rgba(6,182,212,0.03)),
+        repeating-linear-gradient(0deg, rgba(99,102,241,0.05) 0 1px, transparent 1px 28px),
+        repeating-linear-gradient(90deg, rgba(99,102,241,0.05) 0 1px, transparent 1px 28px);
+    border: 1px solid rgba(99,102,241,0.22);
+    margin-bottom: 18px;
     position: relative;
     overflow: hidden;
 }
@@ -774,24 +791,37 @@ CUSTOM_CSS = """
     content: "";
     position: absolute; inset: auto -20% -40% -20%;
     height: 60%;
-    background: radial-gradient(60% 80% at 50% 0%, rgba(6,182,212,0.18), transparent 70%);
+    background: radial-gradient(60% 80% at 50% 0%, rgba(6,182,212,0.22), transparent 70%);
     pointer-events: none;
 }
 #ovc-hero h1 {
-    font-size: 2.4rem;
+    font-size: 2.7rem;
     font-weight: 800;
     background: var(--ovc-grad);
+    background-size: 200% 200%;
+    animation: ovc-shift 9s ease-in-out infinite;
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
-    margin: 0 0 8px;
-    letter-spacing: -0.025em;
-    line-height: 1.05;
+    margin: 0 0 6px;
+    letter-spacing: -0.028em;
+    line-height: 1.04;
+}
+#ovc-hero .by-line {
+    display: inline-block;
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: #4f46e5;
+    background: rgba(79,70,229,0.10);
+    padding: 3px 10px;
+    border-radius: 999px;
+    margin-bottom: 10px;
+    letter-spacing: 0.04em;
 }
 #ovc-hero p.tagline {
-    font-size: 1.04rem;
+    font-size: 1.05rem;
     color: var(--body-text-color-subdued);
-    margin: 0 auto 14px;
+    margin: 0 auto 16px;
     max-width: 760px;
     line-height: 1.6;
 }
@@ -841,50 +871,69 @@ CUSTOM_CSS = """
 /* Cards */
 .ovc-card {
     border-radius: 16px !important;
-    padding: 14px 16px !important;
-    border: 1px solid rgba(148,163,184,0.28) !important;
+    padding: 16px 18px !important;
+    border: 1px solid rgba(148,163,184,0.26) !important;
     background: var(--background-fill-primary) !important;
     box-shadow: 0 1px 3px rgba(15,23,42,0.04);
-    transition: box-shadow 0.18s ease, border-color 0.18s ease;
+    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
+    animation: ovc-fade-in 0.32s ease-out;
 }
 .ovc-card:hover {
     border-color: rgba(99,102,241,0.32) !important;
-    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
+    box-shadow: 0 6px 22px rgba(15,23,42,0.07);
+}
+/* Primary outputs: subtle accent ring + lift */
+.ovc-card-primary {
+    border: 1px solid var(--ovc-ring) !important;
+    background:
+        linear-gradient(180deg, rgba(79,70,229,0.025), rgba(6,182,212,0.012)),
+        var(--background-fill-primary) !important;
+    box-shadow: 0 4px 18px rgba(79,70,229,0.08) !important;
+}
+.ovc-card-primary:hover {
+    border-color: var(--ovc-ring-strong) !important;
+    box-shadow: 0 10px 28px rgba(79,70,229,0.14) !important;
 }
 .ovc-card h3 {
-    font-size: 0.78rem !important;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.74rem !important;
     font-weight: 700 !important;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.10em;
     color: #4f46e5 !important;
-    margin: 0 0 10px !important;
+    background: rgba(79,70,229,0.08);
+    padding: 4px 10px !important;
+    border-radius: 999px;
+    margin: 0 0 12px !important;
 }
 .ovc-card h3::before {
     content: "";
     display: inline-block;
     width: 6px; height: 6px; border-radius: 50%;
     background: var(--ovc-grad);
-    margin-right: 8px; vertical-align: middle;
-    transform: translateY(-1px);
+    transform: translateY(0);
 }
 
 /* Run button */
 #ovc-run button {
     width: 100%;
-    height: 52px !important;
-    font-size: 1.05rem !important;
+    height: 54px !important;
+    font-size: 1.06rem !important;
     font-weight: 700 !important;
     letter-spacing: 0.01em;
     background: var(--ovc-grad) !important;
+    background-size: 200% 200% !important;
+    animation: ovc-shift 6s ease-in-out infinite, ovc-pulse 2.6s ease-in-out infinite;
     border: none !important;
     color: #fff !important;
     border-radius: 14px !important;
-    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.32);
-    transition: transform 0.06s ease, box-shadow 0.2s ease;
+    transition: transform 0.06s ease;
 }
 #ovc-run button:hover {
     transform: translateY(-1px);
-    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.40);
+    animation-play-state: paused;
 }
 #ovc-run button:active { transform: translateY(0); }
 
@@ -920,6 +969,52 @@ CUSTOM_CSS = """
 
 /* Tighter spacing for sliders inside cards */
 .ovc-card .gradio-slider { margin-bottom: 4px !important; }
+
+/* Pipeline mini-flow strip */
+#ovc-flow {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    align-items: center; justify-content: center;
+    padding: 14px 16px; margin-bottom: 18px;
+    border-radius: 14px;
+    border: 1px dashed rgba(99,102,241,0.28);
+    background: linear-gradient(180deg, rgba(99,102,241,0.04), transparent);
+}
+#ovc-flow .step {
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: 0.83rem; font-weight: 600;
+    color: #475569;
+    padding: 6px 12px;
+    background: var(--background-fill-primary);
+    border: 1px solid rgba(148,163,184,0.30);
+    border-radius: 999px;
+    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
+}
+#ovc-flow .step .dot {
+    width: 7px; height: 7px; border-radius: 50%;
+    background: var(--ovc-grad);
+}
+#ovc-flow .arrow { color: #94a3b8; font-size: 0.95rem; user-select: none; }
+
+/* Empty-state placeholder for outputs */
+.ovc-empty {
+    text-align: center;
+    color: #94a3b8;
+    font-size: 0.88rem;
+    padding: 26px 18px;
+    border: 1px dashed rgba(148,163,184,0.45);
+    border-radius: 12px;
+    background: rgba(148,163,184,0.04);
+}
+.ovc-empty b { color: #64748b; font-weight: 600; }
+.ovc-empty kbd {
+    background: var(--ovc-grad);
+    color: #fff;
+    padding: 1px 7px;
+    border-radius: 6px;
+    font-size: 0.78rem;
+    font-family: inherit;
+    font-weight: 600;
+}
 """
 
 THEME = gr.themes.Soft(
@@ -936,6 +1031,7 @@ THEME = gr.themes.Soft(
 
 HERO_HTML = """
 <div id="ovc-hero">
+  <span class="by-line">by lmms-lab</span>
   <h1>OneVision Encoder</h1>
   <p class="tagline">
     Codec-style patch saliency for video understanding &mdash; see which
@@ -984,8 +1080,44 @@ SIGNAL_CHOICES = [
 ]
 
 
+FLOW_HTML = """
+<div id="ovc-flow">
+  <span class="step"><span class="dot"></span>Sample</span>
+  <span class="arrow">›</span>
+  <span class="step"><span class="dot"></span>Score patches</span>
+  <span class="arrow">›</span>
+  <span class="step"><span class="dot"></span>GOP grouping</span>
+  <span class="arrow">›</span>
+  <span class="step"><span class="dot"></span>Top-K select</span>
+  <span class="arrow">›</span>
+  <span class="step"><span class="dot"></span>Visualize</span>
+  <span class="arrow">›</span>
+  <span class="step"><span class="dot"></span>Pack canvas</span>
+</div>
+"""
+
+EMPTY_VIS = (
+    '<div class="ovc-empty">'
+    'Upload a video on the left, hit <kbd>Run pipeline</kbd> '
+    '— or click any row in <b>Demo video</b> below to try the bundled clip. '
+    'The selected patches will animate here.'
+    '</div>'
+)
+EMPTY_CHART = (
+    '<div class="ovc-empty">'
+    'Codec-vs-uniform timeline charts will appear here after a run.'
+    '</div>'
+)
+EMPTY_CANVAS = (
+    '<div class="ovc-empty">'
+    'The packed canvas (LLaVA-OneVision input) will appear here.'
+    '</div>'
+)
+
+
 with gr.Blocks(**_BLOCK_KW) as demo:
     gr.HTML(HERO_HTML)
+    gr.HTML(FLOW_HTML)
 
     with gr.Row(equal_height=False):
         # ─── Controls (narrow column) ────────────────────────────────────
@@ -1085,13 +1217,14 @@ with gr.Blocks(**_BLOCK_KW) as demo:
 
         # ─── Outputs (wide column) ───────────────────────────────────────
         with gr.Column(scale=6, min_width=420):
-            with gr.Group(elem_classes="ovc-card"):
+            with gr.Group(elem_classes="ovc-card ovc-card-primary"):
                 gr.Markdown("### Patch selection visualization")
+                gr.HTML(EMPTY_VIS)
                 vis_out = gr.Video(
                     label="", show_label=False, autoplay=True, height=420,
                 )
 
-            with gr.Group(elem_classes="ovc-card"):
+            with gr.Group(elem_classes="ovc-card ovc-card-primary"):
                 gr.Markdown("### Codec selection vs uniform baseline")
                 gr.Markdown(
                     "<small>Same total patch budget on both sides. "
@@ -1101,12 +1234,14 @@ with gr.Blocks(**_BLOCK_KW) as demo:
                     "spend the same budget — spread evenly in time, every "
                     "patch in the chosen frames kept.</small>"
                 )
+                gr.HTML(EMPTY_CHART)
                 chart_out = gr.Plot(label="", show_label=False)
 
             with gr.Row():
                 with gr.Column(scale=1):
                     with gr.Group(elem_classes="ovc-card"):
                         gr.Markdown("### Packed canvas")
+                        gr.HTML(EMPTY_CANVAS)
                         canvas_out = gr.Image(
                             label="", show_label=False, height=320,
                         )