MHMisinfo

Sleeping

App Files Files Community

rocky250 commited on Apr 27

Commit

a78e55d

verified ·

1 Parent(s): 3d4063f

Update app.py

Browse files

Files changed (1) hide show

app.py +802 -531

app.py CHANGED Viewed

@@ -33,583 +33,854 @@ from charts import (
     uncertainty_analysis,
 )
-DARK_BG     = "#ffffff"   # FIXED: white background
-CARD_BG     = "#ffffff"   # FIXED: white cards
-BORDER      = "#e2e8f0"
-TEXT_MAIN   = "#1e293b"
-TEXT_DIM    = "#64748b"
-CYAN        = "#0891b2"
-GREEN       = "#10b981"
-RED         = "#ef4444"
-AMBER       = "#f59e0b"
-PURPLE      = "#8b5cf6"
-BLUE        = "#2563eb"
-PLOTLY_LAYOUT = dict(
-    paper_bgcolor="#ffffff",
-    plot_bgcolor="#ffffff",
-    font=dict(family="'Inter', 'IBM Plex Sans', sans-serif", color=TEXT_MAIN, size=12),
-    margin=dict(l=20, r=20, t=45, b=25),
-    hoverlabel=dict(
-        bgcolor="#ffffff",
-        bordercolor=CYAN,
-        font=dict(color=TEXT_MAIN, size=12),
-    ),
 )
-def make_interactive(fig: go.Figure, height: int = 300) -> go.Figure:
-    """Apply shared interactive behaviour to every chart."""
     fig.update_layout(
-        height=height,
-        hovermode="closest",
-        dragmode="zoom",
-        transition=dict(duration=400, easing="cubic-in-out"),
-        legend=dict(
-            itemclick="toggle",
-            itemdoubleclick="toggleothers",
-            bgcolor="rgba(255,255,255,0)",
-            font=dict(size=11, color=TEXT_MAIN),
-        ),
-        modebar=dict(
-            bgcolor="rgba(255,255,255,0)",
-            color=TEXT_DIM,
-            activecolor=CYAN,
-        ),
     )
-    fig.update_xaxes(
-        showspikes=True,
-        spikecolor=CYAN,
-        spikethickness=1,
-        spikedash="dot",
-        showline=True,
-        linecolor=BORDER,
-        gridcolor="#edf2f7",
-        zerolinecolor=BORDER,
-    )
-    fig.update_yaxes(
-        showspikes=True,
-        spikecolor=CYAN,
-        spikethickness=1,
-        spikedash="dot",
-        showline=True,
-        linecolor=BORDER,
-        gridcolor="#edf2f7",
-        zerolinecolor=BORDER,
     )
     return fig
-# ============================================================
-# Overall Misinformation Gauge
-# ============================================================
-def misinfo_gauge(score: float, label: str) -> go.Figure:
-    """Gauge chart for mental-health misinformation confidence score (0–1)."""
-    pct = score * 100
-    if score < 0.35:
-        bar_color = GREEN
-        risk_text = "Likely Reliable Health Information"
-    elif score < 0.65:
-        bar_color = AMBER
-        risk_text = "Uncertain / Mixed Health Claims"
-    else:
-        bar_color = RED
-        risk_text = "Likely Mental Health Misinformation"
-    fig = go.Figure(go.Indicator(
-        mode="gauge+number+delta",
-        value=pct,
-        number={
-            "suffix": "%",
-            "font": {
-                "size": 34,
-                "color": bar_color,
-                "family": "'Inter', sans-serif",
-            },
-        },
-        delta={
-            "reference": 50,
-            "increasing": {"color": RED},
-            "decreasing": {"color": GREEN},
-        },
-        title={
-            "text": f"{label}<br><span style='font-size:11px;color:{TEXT_DIM}'>{risk_text}</span>",
-            "font": {"size": 13, "color": TEXT_DIM},
-        },
-        gauge={
-            "axis": {
-                "range": [0, 100],
-                "tickwidth": 1,
-                "tickcolor": BORDER,
-                "tickfont": {"color": TEXT_DIM, "size": 10},
-            },
-            "bar": {"color": bar_color, "thickness": 0.32},
-            "bgcolor": CARD_BG,
-            "borderwidth": 0,
-            "steps": [
-                {"range": [0, 35], "color": "#ecfdf5"},
-                {"range": [35, 65], "color": "#fffbeb"},
-                {"range": [65, 100], "color": "#fef2f2"},
-            ],
-            "threshold": {
-                "line": {"color": TEXT_MAIN, "width": 2},
-                "thickness": 0.75,
-                "value": pct,
-            },
-        },
-    ))
-    fig.update_layout(**PLOTLY_LAYOUT)
-    return make_interactive(fig, height=260)
-# ============================================================
-# Sentiment Donut
-# ============================================================
-def sentiment_donut(summary: Dict) -> go.Figure:
-    """Donut chart: Positive / Negative / Neutral audience sentiment."""
-    labels = ["Supportive / Positive", "Neutral / Informational", "Concerned / Negative"]
-    values = [summary["POSITIVE"], summary["NEUTRAL"], summary["NEGATIVE"]]
-    colors = [GREEN, "#cbd5e1", RED]
-    fig = go.Figure(go.Pie(
-        labels=labels,
-        values=values,
-        hole=0.62,
-        pull=[0.04, 0.02, 0.04],
-        marker=dict(colors=colors, line=dict(color="#ffffff", width=3)),
-        textinfo="label+percent",
-        hoverinfo="label+value+percent",
-        insidetextorientation="radial",
-        textfont=dict(size=11, color=TEXT_MAIN),
-        hovertemplate="<b>%{label}</b><br>%{value} comments<br>%{percent}<extra></extra>",
-        rotation=90,
-    ))
-    avg = summary.get("avg_compound", 0)
-    overall = "Supportive Discussion" if avg > 0.05 else (
-        "Concerned Discussion" if avg < -0.05 else "Mixed Discussion"
     )
-    fig.add_annotation(
-        text=f"<b>{overall}</b><br><span style='font-size:11px;color:{TEXT_DIM}'>{summary['total']} comments</span>",
-        x=0.5,
-        y=0.5,
-        showarrow=False,
-        font=dict(size=13, color=TEXT_MAIN),
-        align="center",
-    )
-    fig.update_layout(
-        **PLOTLY_LAYOUT,
-        title=dict(text="Audience Sentiment Around Health Information", font=dict(size=13, color=TEXT_DIM), x=0),
-        legend=dict(orientation="h", y=-0.10, font=dict(size=10)),
-    )
-    return make_interactive(fig, height=310)
-# ============================================================
-# Keyword Bar
-# ============================================================
-def keyword_bar(
-    keywords: List[Tuple[str, float]],
-    title: str = "Key Mental Health Information Signals",
-    color: str = CYAN,
-) -> go.Figure:
-    if not keywords:
-        return _empty_fig(title)
-    words, weights = zip(*keywords[:15])
-    max_w = max(weights) or 1
-    norm = [w / max_w * 100 for w in weights]
-    fig = go.Figure(go.Bar(
-        x=norm,
-        y=words,
-        orientation="h",
-        marker=dict(
-            color=norm,
-            colorscale=[[0, "#e0f2fe"], [1, color]],
-            line=dict(color="#ffffff", width=1),
-        ),
-        text=[f"{w:.0f}" for w in weights],
-        textposition="inside",
-        textfont=dict(size=10, color="#ffffff"),
-        hovertemplate="<b>%{y}</b><br>Signal weight: %{text}<br>Normalised: %{x:.1f}%<extra></extra>",
-    ))
-    fig.update_layout(
-        **PLOTLY_LAYOUT,
-        title=dict(text=title, font=dict(size=13, color=TEXT_DIM), x=0),
-        yaxis=dict(autorange="reversed", tickfont=dict(size=11), gridcolor="#edf2f7"),
-        xaxis=dict(showticklabels=False, gridcolor="#edf2f7"),
-        bargap=0.35,
-    )
-    return make_interactive(fig, height=380)
-# ============================================================
-# Stream Misinformation Bars
-# ============================================================
-def stream_trust_bars(stream_details: Dict) -> go.Figure:
-    """Horizontal bar chart for per-stream misinformation scores."""
-    labels = list(stream_details.keys())
-    values = [round(v * 100, 1) for v in stream_details.values()]
-    colors = [RED if v > 50 else (AMBER if v > 30 else GREEN) for v in values]
-    fig = go.Figure(go.Bar(
-        x=values,
-        y=[l.replace("_", " ").title() for l in labels],
-        orientation="h",
-        marker=dict(color=colors, line=dict(color="#ffffff", width=1)),
-        text=[f"{v}%" for v in values],
-        textposition="outside",
-        textfont=dict(size=11, color=TEXT_MAIN),
-        hovertemplate="<b>%{y}</b><br>Misinformation signal: %{x:.1f}%<extra></extra>",
-    ))
-    fig.update_layout(
-        **PLOTLY_LAYOUT,
-        title=dict(text="Per-Stream Health Information Risk", font=dict(size=13, color=TEXT_DIM), x=0),
-        xaxis=dict(range=[0, 110], showticklabels=False, gridcolor="#edf2f7"),
-        yaxis=dict(tickfont=dict(size=11)),
-        bargap=0.4,
     )
-    return make_interactive(fig, height=220)
-# ============================================================
-# Modality Distribution
-# ============================================================
-def modality_misinfo_distribution(modality_analysis: Dict) -> go.Figure:
-    """Grouped bar chart — Misinformation vs Reliable Health Information per modality."""
-    MODALITIES = ["Text", "Audio", "Video"]
-    KEYS = ["text", "audio", "video"]
-    misinfo_pcts = [modality_analysis.get(k, {}).get("misinfo_pct", 50.0) for k in KEYS]
-    credible_pcts = [modality_analysis.get(k, {}).get("credible_pct", 50.0) for k in KEYS]
-    logit_tips = [
-        (
-            f"logit_m={modality_analysis.get(k, {}).get('misinfo_logit', 0.0):+.4f} | "
-            f"logit_r={modality_analysis.get(k, {}).get('credible_logit', 0.0):+.4f}"
-        )
-        for k in KEYS
-    ]
-    fig = go.Figure()
-    fig.add_trace(go.Bar(
-        name="Misinformation Signal",
-        x=MODALITIES,
-        y=misinfo_pcts,
-        marker=dict(color=[RED, RED, RED], opacity=0.88, line=dict(color="#ffffff", width=1)),
-        text=[f"{v:.1f}%" for v in misinfo_pcts],
-        textposition="outside",
-        textfont=dict(size=11, color=RED),
-        customdata=logit_tips,
-        hovertemplate=(
-            "<b>%{x} — Misinformation Signal</b><br>"
-            "Softmax score: %{y:.2f}%<br>"
-            "%{customdata}<extra></extra>"
-        ),
-    ))
-    fig.add_trace(go.Bar(
-        name="Reliable Health Information",
-        x=MODALITIES,
-        y=credible_pcts,
-        marker=dict(color=[GREEN, GREEN, GREEN], opacity=0.88, line=dict(color="#ffffff", width=1)),
-        text=[f"{v:.1f}%" for v in credible_pcts],
-        textposition="outside",
-        textfont=dict(size=11, color=GREEN),
-        customdata=logit_tips,
-        hovertemplate=(
-            "<b>%{x} — Reliable Health Information</b><br>"
-            "Softmax score: %{y:.2f}%<br>"
-            "%{customdata}<extra></extra>"
-        ),
-    ))
-    fig.update_layout(
-        **PLOTLY_LAYOUT,
-        title=dict(text="Modality-Level Health Information Assessment", font=dict(size=13, color=TEXT_DIM), x=0),
-        barmode="group",
-        xaxis=dict(title="Modality", tickfont=dict(size=12), gridcolor="#edf2f7"),
-        yaxis=dict(title="Model Score (%)", range=[0, 115], gridcolor="#edf2f7", ticksuffix="%"),
-        legend=dict(orientation="h", y=1.12, font=dict(size=11), bgcolor="rgba(255,255,255,0)"),
-        bargap=0.22,
-        bargroupgap=0.06,
     )
-    return make_interactive(fig, height=290)
-# ============================================================
-# Trust Score
-# ============================================================
-def trust_score_by_modality(modality_analysis: Dict) -> go.Figure:
-    """Vertical bar chart — reliability/trustworthiness coefficient per modality."""
-    MODALITIES = ["Text", "Audio", "Video"]
-    KEYS = ["text", "audio", "video"]
-    trust_vals = [modality_analysis.get(k, {}).get("trust_score", 0.0) for k in KEYS]
-    bar_colors = [GREEN if v >= 60 else (AMBER if v >= 35 else RED) for v in trust_vals]
-    fig = go.Figure(go.Bar(
-        x=MODALITIES,
-        y=trust_vals,
-        marker=dict(color=bar_colors, opacity=0.88, line=dict(color="#ffffff", width=1)),
-        text=[f"{v:.1f}%" for v in trust_vals],
-        textposition="outside",
-        textfont=dict(size=11, color=TEXT_MAIN),
-        hovertemplate=(
-            "<b>%{x}</b><br>"
-            "Reliability level: %{y:.2f}%<br>"
-            "<i>Higher score means the modality provides stronger health-information evidence.</i>"
-            "<extra></extra>"
-        ),
-    ))
-    for level, label, color in [(80, "High Reliability", GREEN), (50, "Moderate Reliability", AMBER)]:
-        fig.add_hline(
-            y=level,
-            line=dict(color=color, width=1, dash="dot"),
-            annotation_text=label,
-            annotation_position="right",
-            annotation_font=dict(size=9, color=color),
-        )
-    fig.update_layout(
-        **PLOTLY_LAYOUT,
-        title=dict(text="Reliability Score by Modality", font=dict(size=13, color=TEXT_DIM), x=0),
-        xaxis=dict(title="Modality", tickfont=dict(size=12), gridcolor="#edf2f7"),
-        yaxis=dict(title="Reliability Level (%)", range=[0, 115], gridcolor="#edf2f7", ticksuffix="%"),
-        bargap=0.38,
-    )
-    return make_interactive(fig, height=280)
-# ============================================================
-# Uncertainty Analysis
-# ============================================================
-def uncertainty_analysis(modality_analysis: Dict) -> go.Figure:
-    """Vertical bar chart — Shannon entropy uncertainty per modality."""
-    MODALITIES = ["Text", "Audio", "Video"]
-    KEYS = ["text", "audio", "video"]
-    uncertainty_vals = [modality_analysis.get(k, {}).get("uncertainty", 100.0) for k in KEYS]
-    misinfo_pcts = [modality_analysis.get(k, {}).get("misinfo_pct", 50.0) for k in KEYS]
-    bar_colors = [GREEN if v <= 35 else (AMBER if v <= 65 else RED) for v in uncertainty_vals]
-    fig = go.Figure(go.Bar(
-        x=MODALITIES,
-        y=uncertainty_vals,
-        marker=dict(color=bar_colors, opacity=0.88, line=dict(color="#ffffff", width=1)),
-        text=[f"{v:.1f}%" for v in uncertainty_vals],
-        textposition="outside",
-        textfont=dict(size=11, color=TEXT_MAIN),
-        customdata=[[f"p_misinformation={m:.1f}%"] for m in misinfo_pcts],
-        hovertemplate=(
-            "<b>%{x}</b><br>"
-            "Uncertainty: %{y:.2f}%<br>"
-            "%{customdata[0]}<br>"
-            "<i>Higher uncertainty means the model is less confident about the health claim.</i>"
-            "<extra></extra>"
-        ),
-    ))
-    fig.add_hline(
-        y=100,
-        line=dict(color=RED, width=1, dash="dot"),
-        annotation_text="Maximum Uncertainty",
-        annotation_position="right",
-        annotation_font=dict(size=9, color=RED),
     )
-    fig.add_hline(
-        y=50,
-        line=dict(color=AMBER, width=1, dash="dot"),
-        annotation_text="Moderate Uncertainty",
-        annotation_position="right",
-        annotation_font=dict(size=9, color=AMBER),
     )
-    fig.update_layout(
-        **PLOTLY_LAYOUT,
-        title=dict(text="Model Uncertainty in Health Information Assessment", font=dict(size=13, color=TEXT_DIM), x=0),
-        xaxis=dict(title="Modality", tickfont=dict(size=12), gridcolor="#edf2f7"),
-        yaxis=dict(title="Uncertainty (%)", range=[0, 120], gridcolor="#edf2f7", ticksuffix="%"),
-        bargap=0.38,
     )
-    return make_interactive(fig, height=280)
-# ============================================================
-# Comment Sentiment Timeline
-# ============================================================
-def sentiment_timeline(comments_df: pd.DataFrame, sentiments: List[Dict]) -> go.Figure:
-    """Scatter plot: comment index vs sentiment compound score."""
-    if comments_df.empty:
-        return _empty_fig("Audience Response Distribution")
-    df = comments_df.copy()
-    df["compound"] = [s.get("compound", 0) for s in sentiments]
-    df["label"] = [s.get("label", "NEUTRAL") for s in sentiments]
-    df["color"] = df["label"].map({"POSITIVE": GREEN, "NEGATIVE": RED, "NEUTRAL": AMBER})
-    df["text_short"] = df["text"].str[:80] + "…"
-    fig = go.Figure()
-    for lbl, clr, display_name in [
-        ("POSITIVE", GREEN, "Supportive / Positive"),
-        ("NEGATIVE", RED, "Concerned / Negative"),
-        ("NEUTRAL", AMBER, "Neutral / Informational"),
-    ]:
-        sub = df[df["label"] == lbl]
-        if sub.empty:
-            continue
-        fig.add_trace(go.Scatter(
-            x=sub.index,
-            y=sub["compound"],
-            mode="markers",
-            name=display_name,
-            marker=dict(
-                size=np.clip(np.log1p(sub["likes"].fillna(0)) * 4 + 4, 4, 20),
-                color=clr,
-                opacity=0.78,
-                line=dict(width=1, color="#ffffff"),
-            ),
-            text=sub["text_short"],
-            customdata=np.stack(
-                [
-                    sub["likes"].fillna(0).astype(str),
-                    sub["label"].astype(str),
                 ],
-                axis=-1,
-            ),
-            hovertemplate=(
-                "<b>%{text}</b><br>"
-                "Audience response: %{customdata[1]}<br>"
-                "Compound score: %{y:.2f}<br>"
-                "Likes: %{customdata[0]}<extra></extra>"
-            ),
-        ))
-    fig.add_hline(y=0, line=dict(color=BORDER, width=1, dash="dot"))
-    fig.update_layout(
-        **PLOTLY_LAYOUT,
-        title=dict(text="Audience Response to Mental Health Information", font=dict(size=13, color=TEXT_DIM), x=0),
-        xaxis=dict(title="Comment Index", gridcolor="#edf2f7", showgrid=False),
-        yaxis=dict(title="Sentiment Score", gridcolor="#edf2f7", range=[-1.1, 1.1]),
-        legend=dict(orientation="h", y=1.12, font=dict(size=10)),
     )
-    return make_interactive(fig, height=320)
-# ============================================================
-# Keyword Comparison
-# ============================================================
-def keyword_comparison(
-    pos_kw: List[Tuple[str, float]],
-    neg_kw: List[Tuple[str, float]],
-) -> go.Figure:
-    """Diverging bar chart: supportive vs concerned health-information keywords."""
-    if not pos_kw and not neg_kw:
-        return _empty_fig("Audience Keyword Signals")
-    top = 10
-    pos_kw = pos_kw[:top]
-    neg_kw = neg_kw[:top]
-    fig = go.Figure()
-    if pos_kw:
-        pw, pv = zip(*pos_kw)
-        max_p = max(pv) or 1
-        fig.add_trace(go.Bar(
-            name="Supportive / Reliable Signals",
-            y=list(pw),
-            x=[v / max_p * 100 for v in pv],
-            orientation="h",
-            marker=dict(color=GREEN, line=dict(color="#ffffff", width=1)),
-            hovertemplate="<b>%{y}</b><br>Supportive keyword score: %{x:.1f}<extra></extra>",
-        ))
-    if neg_kw:
-        nw, nv = zip(*neg_kw)
-        max_n = max(nv) or 1
-        fig.add_trace(go.Bar(
-            name="Concern / Misinformation Signals",
-            y=list(nw),
-            x=[-v / max_n * 100 for v in nv],
-            orientation="h",
-            marker=dict(color=RED, line=dict(color="#ffffff", width=1)),
-            hovertemplate="<b>%{y}</b><br>Concern keyword score: %{x:.1f}<extra></extra>",
-        ))
-    fig.update_layout(
-        **PLOTLY_LAYOUT,
-        title=dict(text="Audience Keyword Signals", font=dict(size=13, color=TEXT_DIM), x=0),
-        barmode="overlay",
-        xaxis=dict(
-            title="← Concern / Misinformation Signals  |  Supportive / Reliable Signals →",
-            gridcolor="#edf2f7",
-            zeroline=True,
-            zerolinecolor=BORDER,
-            zerolinewidth=2,
-        ),
-        yaxis=dict(tickfont=dict(size=10)),
-        legend=dict(orientation="h", y=1.1),
     )
-    return make_interactive(fig, height=360)
-# ============================================================
-# Empty Figure Helper
-# ============================================================
-def _empty_fig(title: str) -> go.Figure:
-    fig = go.Figure()
-    fig.add_annotation(
-        text="No health-information data available",
-        x=0.5,
-        y=0.5,
-        showarrow=False,
-        font=dict(size=14, color=TEXT_DIM),
-    )
-    fig.update_layout(
-        **PLOTLY_LAYOUT,
-        title=dict(text=title, x=0, font=dict(size=13, color=TEXT_DIM)),
     )
-    return make_interactive(fig, height=250)

     uncertainty_analysis,
 )
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;600;700;800&family=IBM+Plex+Sans:wght@300;400;500&display=swap');
+/*  Variables*/
+:root {
+    --bg:     #0d0f14;
+    --card:   #13161e;
+    --border: #1e2330;
+    --text:   #e8eaf0;
+    --dim:    #5a6070;
+    --cyan:   #00d4ff;
+    --green:  #00e5a0;
+    --red:    #ff4757;
+    --amber:  #ffb347;
+    --blue:   #4a8eff;
+}
+/*  Force dark everywhere — prevent white bleed  */
+html, body {
+    background: var(--bg) !important;
+    color:      var(--text) !important;
+    margin: 0; padding: 0;
+}
+.gradio-container, #root, #app, main, .main, .wrap, .svelte-1kyws56 {
+    background: var(--bg) !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    margin: 0 auto !important;
+    padding: 0 1.5rem !important;
+    box-sizing: border-box !important;
+}
+/* kill Gradio's default white blocks */
+.block, .wrap, .panel, .padded, div.form,
+div[class*="block"], div[class*="wrap"],
+div[class*="panel"], div[class*="gap"],
+.gap { background: transparent !important; border: none !important; }
+/*  Cards / Groups ─ */
+.gr-group, .gr-box, .vv-section {
+    background: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 12px !important;
+    padding: 1rem 1.25rem !important;
+}
+/*  Tabs  */
+.tab-nav button {
+    background: transparent !important;
+    border: none !important;
+    color: var(--dim) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.82rem !important;
+    letter-spacing: 0.05em !important;
+    border-bottom: 2px solid transparent !important;
+    padding: 0.5rem 1.2rem !important;
+    transition: color 0.18s;
+}
+.tab-nav button.selected {
+    color: var(--cyan) !important;
+    border-bottom-color: var(--cyan) !important;
+}
+.tab-nav { border-bottom: 1px solid var(--border) !important; }
+/*  Inputs  */
+input[type="text"], input[type="password"], input[type="number"], textarea, select {
+    background: #1a1d27 !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+    border-radius: 8px !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.88rem !important;
+}
+input:focus, textarea:focus, select:focus {
+    border-color: var(--cyan) !important;
+    box-shadow: 0 0 0 2px rgba(0,212,255,0.15) !important;
+    outline: none !important;
+}
+label, .gr-label, span.svelte-1b6s6s {
+    color: var(--dim) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.75rem !important;
+    letter-spacing: 0.08em !important;
+    text-transform: uppercase;
+}
+/*  Slider  */
+input[type="range"] { accent-color: var(--cyan); }
+/*  Buttons ─ */
+button.primary, button[variant="primary"], .primary {
+    background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
+    border: none !important;
+    color: #0d0f14 !important;
+    font-weight: 700 !important;
+    font-family: 'DM Mono', monospace !important;
+    border-radius: 8px !important;
+    letter-spacing: 0.06em !important;
+}
+button.secondary {
+    background: rgba(0,212,255,0.08) !important;
+    border: 1px solid var(--cyan) !important;
+    color: var(--cyan) !important;
+    border-radius: 8px !important;
+    font-family: 'DM Mono', monospace !important;
+}
+button:hover { opacity: 0.88; transform: translateY(-1px); transition: all 0.15s; }
+/*  Dropdowns ─ */
+.dropdown, ul[role="listbox"], li[role="option"] {
+    background: #1a1d27 !important;
+    border-color: var(--border) !important;
+    color: var(--text) !important;
+}
+li[role="option"]:hover { background: #242736 !important; }
+/*  Dataframe ─ */
+.gr-dataframe, table { background: var(--card) !important; }
+.gr-dataframe th {
+    background: #1a1d27 !important;
+    color: var(--cyan) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.72rem !important;
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--border);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+.gr-dataframe td {
+    color: var(--text) !important;
+    font-size: 0.77rem !important;
+    padding: 5px 10px;
+    border-bottom: 1px solid var(--border);
+}
+.gr-dataframe tr:hover td { background: rgba(0,212,255,0.04) !important; }
+/*  Accordion ─ */
+details > summary {
+    color: var(--dim) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.82rem !important;
+    cursor: pointer;
+    list-style: none;
+}
+details[open] > summary { color: var(--cyan) !important; }
+/*  Plot containers ─ */
+.js-plotly-plot, .plotly { background: transparent !important; }
+.modebar { display: none !important; }
+/*  Scrollbar ─ */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--dim); }
+/*  Shared HTML component classes */
+.vv-hero {
+    font-family: 'Syne', sans-serif;
+    font-size: 1.65rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, #00d4ff, #4a8eff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+}
+.vv-section-title {
+    font-family: 'Syne', sans-serif;
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: #5a6070;
+    margin-bottom: 0.5rem;
+    margin-top: 0;
+}
+.vv-card {
+    background: #13161e;
+    border: 1px solid #1e2330;
+    border-radius: 12px;
+    padding: 1.1rem 1.3rem;
+    margin-bottom: 0.7rem;
+}
+.vv-stat {
+    display: inline-block;
+    background: #1a1d27;
+    border: 1px solid #1e2330;
+    border-radius: 6px;
+    padding: 0.25rem 0.75rem;
+    font-family: 'DM Mono', monospace;
+    font-size: 0.77rem;
+    color: #00d4ff;
+    margin: 0.15rem 0.2rem;
+}
+.vv-badge-green {
+    display: inline-block;
+    background: rgba(0,229,160,0.12);
+    border: 1px solid #00e5a0;
+    color: #00e5a0;
+    border-radius: 20px;
+    padding: 0.32rem 1.1rem;
+    font-size: 0.85rem;
+    font-family: 'DM Mono', monospace;
+    font-weight: 600;
+}
+.vv-badge-red {
+    display: inline-block;
+    background: rgba(255,71,87,0.12);
+    border: 1px solid #ff4757;
+    color: #ff4757;
+    border-radius: 20px;
+    padding: 0.32rem 1.1rem;
+    font-size: 0.85rem;
+    font-family: 'DM Mono', monospace;
+    font-weight: 600;
+}
+.vv-badge-amber {
+    display: inline-block;
+    background: rgba(255,179,71,0.12);
+    border: 1px solid #ffb347;
+    color: #ffb347;
+    border-radius: 20px;
+    padding: 0.32rem 1.1rem;
+    font-size: 0.85rem;
+    font-family: 'DM Mono', monospace;
+    font-weight: 600;
+}
+.vv-reasoning {
+    background: #0d1119;
+    border-left: 3px solid #ffb347;
+    padding: 0.8rem 1rem;
+    border-radius: 0 8px 8px 0;
+    font-size: 0.83rem;
+    color: #c0c4cc;
+    line-height: 1.65;
+    font-family: 'IBM Plex Sans', sans-serif;
+    margin-top: 8px;
+}
+.vv-tag {
+    display: inline-block;
+    background: #1a1d27;
+    border: 1px solid #1e2330;
+    border-radius: 4px;
+    padding: 2px 8px;
+    font-family: 'DM Mono', monospace;
+    font-size: 0.7rem;
+    color: #8090a0;
+    margin: 2px;
+}
+.vv-stat-big-green { font-family: 'DM Mono', monospace; font-size: 1.6rem; font-weight: 700; color: #00e5a0; margin: 0; }
+.vv-stat-big-red   { font-family: 'DM Mono', monospace; font-size: 1.6rem; font-weight: 700; color: #ff4757; margin: 0; }
+.vv-stat-big-dim   { font-family: 'DM Mono', monospace; font-size: 1.6rem; font-weight: 700; color: #5a6070; margin: 0; }
+.vv-log-line       { font-size: 0.72rem; color: #5a6070; font-family: 'DM Mono', monospace; margin: 2px 0; }
+.vv-hr             { border: none; border-top: 1px solid #1e2330; margin: 1.1rem 0; }
+"""
+THEME = gr.Themes.Base(
+    primary_hue=gr.themes.colors.cyan,
+    neutral_hue=gr.themes.colors.gray,
+    front=[gr.themes.GoogleFront("IBM Plex Sans"),"sans-serif"],
 )
+def _empty_plotly(msg: str = "Run analysis to see data", h: int = 230):
+    import plotly.graph_objects as go
+    fig = go.Figure()
     fig.update_layout(
+        paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)",
+        font=dict(color="#5a6070"), margin=dict(l=10, r=10, t=10, b=10), height=h,
     )
+    fig.add_annotation(
+        text=msg, x=0.5, y=0.5, xref="paper", yref="paper",
+        showarrow=False, font=dict(size=12, color="#5a6070"),
     )
     return fig
+def _blank_outputs(status_msg: str):
+    """19-tuple for ALL_OUTPUTS when nothing has run."""
+    ep = _empty_plotly()
+    return (
+        f'<p style="color:#ff4757;font-family:DM Mono,monospace;padding:8px">{status_msg}</p>',  # 0  status
+        "<p class='vv-log-line'>—</p>",                                                           # 1  log
+        "<div style='padding:3rem;text-align:center;color:#5a6070;font-family:DM Mono,monospace'>No data yet.</div>",  # 2  left panel
+        "", "",                                                                                    # 3  badge, 4 reasoning
+        ep, ep, ep,                                                                               # 5  modality_dist, 6 trust, 7 uncertainty
+        ep, ep, ep, ep,                                                                           # 8  donut, 9 timeline, 10 kw_bar, 11 kw_comp
+        "", "", "",                                                                               # 12 stat_pos, 13 stat_neg, 14 stat_neu
+        pd.DataFrame(), pd.DataFrame(), pd.DataFrame(), pd.DataFrame(),                           # 15 df_all, 16 df_pos, 17 df_neg, 18 df_top
     )
+#  PIPELINE
+def run_pipeline(
+    url_or_id: str,
+    sentiment_method: str,
+    max_comments: int,
+    progress=gr.Progress(track_tqdm=False),
+):
+    #  Read API key from environment (NEVER from UI)
+    api_key = os.environ.get("YT_API_KEY", "").strip()
+    #  Guards
+    if not (url_or_id or "").strip():
+        yield _blank_outputs("⚠️ Please enter a YouTube URL or video ID.")
+        return
+    video_id = extract_video_id(url_or_id.strip())
+    if not video_id:
+        yield _blank_outputs("❌ Could not parse a valid YouTube video ID.")
+        return
+    if not api_key:
+        yield _blank_outputs(
+            "⚠️ YouTube API key not found. "
+            "Set the <code>YT_API_KEY</code> environment variable / Space secret."
+        )
+        return
+    # 1 — Metadata
+    progress(0.05, desc="Fetching video metadata…")
+    meta, err = fetch_video_metadata(video_id, api_key)
+    if err:
+        yield _blank_outputs(f"❌ {err}")
+        return
+    # 2 — Transcript
+    progress(0.20, desc="Fetching transcript…")
+    transcript, t_status = fetch_transcript(video_id)
+    # 3 — Comments
+    progress(0.35, desc=f"Fetching up to {max_comments} comments…")
+    comments_df, c_status = fetch_comments(video_id, api_key, max_comments=int(max_comments))
+    # 4 — Misinformation
+    # BUG FIX: previously both audio_transcript and video_transcript were set
+    # to the same `transcript` variable.  When the transcript was empty (no
+    # captions), ALL three modalities hit the empty-string fallback inside
+    # _compute_modality_analysis and returned a fixed 50/50 split with
+    # logit_m = logit_c = 0, trust = 0 %, uncertainty = 100 % — values that
+    # never changed across videos.
+    # The fix keeps audio_transcript = spoken transcript (speech stream) and
+    # video_transcript = spoken transcript too, but detect_misinformation()
+    # now internally builds the video segment as transcript + title + tags,
+    # giving all three modalities distinct content and therefore distinct scores.
+    progress(0.50, desc="Running misinformation detection…")
+    misinfo = detect_misinformation(
+        text=f"{meta['title']} {meta['description']}",
+        tags=meta["tags"],
+        audio_transcript=transcript,           # speech/audio stream
+        video_transcript=transcript,           # enriched inside analyzer with title+tags
     )
+    # 5 — Keywords
+    keywords = extract_keywords(
+        f"{meta['title']} {meta['description']} {transcript}",
+        meta["tags"],
+    )
+    # 6 — Sentiment
+    sentiments, sent_sum, pos_kw, neg_kw = [], {}, [], []
+    if not comments_df.empty:
+        texts = comments_df["text"].fillna("").tolist()
+        batch = 64
+        for i in range(0, len(texts), batch):
+            chunk = texts[i: i + batch]
+            sentiments += analyze_sentiment_batch(chunk, method=sentiment_method, batch_size=batch)
+            frac = 0.60 + 0.30 * min((i + batch) / max(len(texts), 1), 1.0)
+            progress(frac, desc=f"Sentiment {min(i+batch, len(texts))}/{len(texts)}…")
+        sent_sum = sentiment_summary(sentiments)
+        pos_kw, neg_kw = sentiment_weighted_keywords(comments_df, sentiments)
+    # 7 — Build outputs
+    progress(0.97, desc="Building charts…")
+    yield _build_outputs(
+        meta=meta, video_id=video_id, transcript=transcript,
+        comments_df=comments_df, misinfo=misinfo, keywords=keywords,
+        sentiments=sentiments, sent_sum=sent_sum,
+        pos_kw=pos_kw, neg_kw=neg_kw,
+        status_log=[
+            f"✅ Metadata: {meta['title'][:55]}",
+            t_status,
+            c_status,
+            f"🔬 Misinfo score: {misinfo['confidence_pct']}%",
+            *(
+                [f"💬 Sentiment: {sent_sum['pos_pct']}% pos / {sent_sum['neg_pct']}% neg"]
+                if sent_sum
+                else ["💬 No comments — sentiment skipped"]
+            ),
+        ],
+    )
+#  OUTPUT BUILDER
+def _build_outputs(
+    meta, video_id, transcript, comments_df,
+    misinfo, keywords, sentiments, sent_sum, pos_kw, neg_kw, status_log,
+):
+    #  Status
+    status_html = (
+        '<p style="color:#00e5a0;font-family:DM Mono,monospace;font-size:0.82rem;padding:6px 0">'
+        "✅ Analysis complete</p>"
     )
+    #  Log
+    log_html = "".join(f'<p class="vv-log-line">{line}</p>' for line in status_log)
+    #  Left panel
+    thumb_html = (
+        f'<img src="{meta["thumbnail_url"]}" '
+        'style="width:100%;border-radius:8px;margin-bottom:8px;display:block">'
+        if meta.get("thumbnail_url") else ""
     )
+    tag_html = "".join(f'<span class="vv-tag">#{t}</span>' for t in meta.get("tags", [])[:20])
+    desc_short = meta.get("description", "")[:1200]
+    word_count = len(transcript.split()) if transcript else 0
+    transcript_short = (transcript[:2500] + "…" if len(transcript) > 2500 else transcript) if transcript else "(not available)"
+    left_html = f"""
+    {thumb_html}
+    <a href="https://www.youtube.com/watch?v={video_id}" target="_blank"
+       style="display:block;text-align:center;font-family:'DM Mono',monospace;
+              font-size:0.75rem;color:#5a6070;text-decoration:none;margin:4px 0 10px">
+      ▶ Open on YouTube
+    </a>
+    <div class="vv-card">
+      <p class="vv-section-title">Video</p>
+      <p style="font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;margin:0 0 4px;color:#e8eaf0">
+        {meta['title']}
+      </p>
+      <p style="font-size:0.82rem;color:#5a6070;margin:0">
+        by <b style="color:#b0b4c0">{meta['channel_title']}</b> · {meta['published_at']}
+      </p>
+    </div>
+    <p class="vv-section-title">Metrics</p>
+    <span class="vv-stat">👁 {meta['view_count']:,}</span>
+    <span class="vv-stat">👍 {meta['like_count']:,}</span>
+    <span class="vv-stat">💬 {meta['comment_count']:,}</span>
+    <span class="vv-stat">⏱ {meta['duration']}</span>
+    <p class="vv-section-title" style="margin-top:1rem">Tags</p>
+    {tag_html or '<span style="color:#5a6070;font-size:0.78rem">(none)</span>'}
+    <details style="margin-top:1rem">
+      <summary>📄 Description</summary>
+      <p style="font-size:0.78rem;color:#8090a0;line-height:1.65;white-space:pre-wrap;margin-top:6px">{desc_short}</p>
+    </details>
+    <details style="margin-top:0.5rem">
+      <summary>📝 Transcript ({word_count} words)</summary>
+      <p style="font-size:0.75rem;color:#8090a0;line-height:1.65;margin-top:6px">{transcript_short}</p>
+    </details>
+    """
+    #  Misinfo badge
+    score = misinfo["score"]
+    if score < 0.35:
+        badge_html = '<span class="vv-badge-green">✅ Appears Credible</span>'
+    elif score < 0.65:
+        badge_html = '<span class="vv-badge-amber">⚠️ Uncertain / Mixed Signals</span>'
+    else:
+        badge_html = '<span class="vv-badge-red">🚨 Likely Misinformation</span>'
+    reasoning_html = (
+        f'<div class="vv-reasoning">🧠 <b>Reasoning:</b> {misinfo["reasoning"]}</div>'
     )
+    #  Three new modality charts — derived from model logit/softmax/entropy
+    mod_analysis = misinfo.get("modality_analysis", {})
+    try:
+        fig_mod_dist = modality_misinfo_distribution(mod_analysis)
+    except Exception:
+        fig_mod_dist = _empty_plotly("Modality distribution unavailable")
+    try:
+        fig_trust = trust_score_by_modality(mod_analysis)
+    except Exception:
+        fig_trust = _empty_plotly("Trust score unavailable")
+    try:
+        fig_uncert = uncertainty_analysis(mod_analysis)
+    except Exception:
+        fig_uncert = _empty_plotly("Uncertainty analysis unavailable")
+    #  Sentiment charts (unchanged)
+    try:
+        fig_donut = sentiment_donut(sent_sum) if sent_sum else _empty_plotly("No comments analysed")
+    except Exception:
+        fig_donut = _empty_plotly()
+    try:
+        fig_timeline = (
+            sentiment_timeline(comments_df, sentiments)
+            if (sent_sum and not comments_df.empty)
+            else _empty_plotly("No comments analysed")
+        )
+    except Exception:
+        fig_timeline = _empty_plotly()
+    try:
+        fig_kw = keyword_bar(keywords, title="Top Video Keywords", color="#00d4ff")
+    except Exception:
+        fig_kw = _empty_plotly()
+    try:
+        fig_kw_comp = (
+            keyword_comparison(pos_kw, neg_kw)
+            if (pos_kw or neg_kw)
+            else _empty_plotly("No keyword comparison — no comments")
+        )
+    except Exception:
+        fig_kw_comp = _empty_plotly()
+    #  Sentiment stat boxes (unchanged)
+    if sent_sum:
+        stat_pos = (
+            f'<div class="vv-card" style="text-align:center">'
+            f'<p class="vv-stat-big-green">{sent_sum["pos_pct"]}%</p>'
+            f'<p style="color:#5a6070;font-size:0.75rem;margin:4px 0 0">Positive</p></div>'
+        )
+        stat_neg = (
+            f'<div class="vv-card" style="text-align:center">'
+            f'<p class="vv-stat-big-red">{sent_sum["neg_pct"]}%</p>'
+            f'<p style="color:#5a6070;font-size:0.75rem;margin:4px 0 0">Negative</p></div>'
+        )
+        stat_neu = (
+            f'<div class="vv-card" style="text-align:center">'
+            f'<p class="vv-stat-big-dim">{sent_sum["neu_pct"]}%</p>'
+            f'<p style="color:#5a6070;font-size:0.75rem;margin:4px 0 0">Neutral</p></div>'
+        )
+    else:
+        placeholder = (
+            '<div class="vv-card" style="text-align:center;color:#5a6070;'
+            'font-family:DM Mono,monospace;font-size:0.8rem;padding:1.2rem">N/A</div>'
+        )
+        stat_pos = stat_neg = stat_neu = placeholder
+    #  Comment DataFrames (unchanged)
+    show_cols = ["author", "text", "likes", "published_at"]
+    df_all = df_pos = df_neg = df_top = pd.DataFrame()
+    if not comments_df.empty:
+        display_df = comments_df.copy()
+        if sentiments:
+            display_df["sentiment"] = [s["label"]                       for s in sentiments]
+            display_df["compound"]  = [round(s.get("compound", 0), 3)   for s in sentiments]
+            cols = show_cols + ["sentiment", "compound"]
+        else:
+            cols = show_cols
+        df_all = display_df[cols].head(100).reset_index(drop=True)
+        df_top = (
+            display_df.sort_values("likes", ascending=False)
+            .head(20)[cols]
+            .reset_index(drop=True)
+        )
+        if "sentiment" in display_df.columns:
+            df_pos = display_df[display_df["sentiment"] == "POSITIVE"][cols].head(50).reset_index(drop=True)
+            df_neg = display_df[display_df["sentiment"] == "NEGATIVE"][cols].head(50).reset_index(drop=True)
+    return (
+        status_html,    # 0   status_box
+        log_html,       # 1   log_html_out
+        left_html,      # 2   left_panel_html
+        badge_html,     # 3   misinfo_badge_html
+        reasoning_html, # 4   misinfo_reasoning_html
+        fig_mod_dist,   # 5   modality_dist_plot
+        fig_trust,      # 6   trust_score_plot
+        fig_uncert,     # 7   uncertainty_plot
+        fig_donut,      # 8   donut_plot
+        fig_timeline,   # 9   timeline_plot
+        fig_kw,         # 10  kw_bar_plot
+        fig_kw_comp,    # 11  kw_comp_plot
+        stat_pos,       # 12  stat_pos_html
+        stat_neg,       # 13  stat_neg_html
+        stat_neu,       # 14  stat_neu_html
+        df_all,         # 15  df_all_out
+        df_pos,         # 16  df_pos_out
+        df_neg,         # 17  df_neg_out
+        df_top,         # 18  df_top_out
     )
+#  UPLOAD / SEARCH HELPERS
+def do_search(keyword: str):
+    api_key = os.environ.get("YT_API_KEY", "").strip()
+    if not api_key:
+        return (
+            "<p style='color:#ff4757;font-family:DM Mono,monospace'>⚠️ YT_API_KEY secret not set.</p>",
+            gr.update(choices=[], value=None, visible=False),
+        )
+    if not (keyword or "").strip():
+        return (
+            "<p style='color:#ffb347;font-family:DM Mono,monospace'>Enter a keyword to search.</p>",
+            gr.update(choices=[], value=None, visible=False),
+        )
+    results = search_videos_by_title(keyword.strip(), api_key, max_results=5)
+    if not results:
+        return (
+            "<p style='color:#ffb347;font-family:DM Mono,monospace'>No results found.</p>",
+            gr.update(choices=[], value=None, visible=False),
+        )
+    html = ""
+    choices = []
+    for r in results:
+        vid = r["video_id"]
+        url = f"https://www.youtube.com/watch?v={vid}"
+        choices.append((r["title"][:70], url))
+        html += (
+            f'<div class="vv-card" style="display:flex;align-items:center;gap:12px;margin-bottom:6px">'
+            f'<img src="{r["thumbnail_url"]}" '
+            f'     style="width:72px;height:54px;object-fit:cover;border-radius:6px;flex-shrink:0">'
+            f'<div>'
+            f'<p style="margin:0;font-size:0.85rem;font-weight:600;color:#e8eaf0">{r["title"][:80]}</p>'
+            f'<p style="margin:0;font-size:0.75rem;color:#5a6070">'
+            f'{r["channel_title"]} · {r["published_at"]} · '
+            f'<code style="color:#00d4ff">v={vid}</code></p>'
+            f'</div></div>'
+        )
+    return html, gr.update(choices=choices, value=None, visible=True)
+def pick_and_analyze(selected_url, sentiment_method, max_comments):
+    if not selected_url:
+        yield _blank_outputs("Select a video from the search results above.")
+        return
+    yield from run_pipeline(selected_url, sentiment_method, max_comments)
+#  GRADIO BLOCKS UI
+with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
+    #  Header
+    gr.HTML("""
+    <div style="padding:1.5rem 0 0.8rem;border-bottom:1px solid #1e2330;margin-bottom:1.2rem">
+      <h1 class="vv-hero">🔬 Video Verifier & Sentiment Analyzer</h1>
+      <p style="color:#5a6070;font-size:0.85rem;margin-top:4px;font-family:'DM Mono',monospace">
+        mental health misinformation detection
+      </p>
+    </div>
+    """)
+    #  Settings — NO API key field
+    with gr.Accordion("⚙️ Settings", open=False):
+        gr.HTML("""
+        <div style="background:#0d1119;border:1px solid #1e2330;border-radius:8px;
+                    padding:0.7rem 1rem;margin-bottom:0.8rem;font-family:'DM Mono',monospace;
+                    font-size:0.78rem;color:#5a6070">
+          🔑 YouTube API key is read from the <code style="color:#00d4ff">YT_API_KEY</code>
+          Space secret — it is never exposed in the UI.
+        </div>
+        """)
+        with gr.Row():
+            sentiment_selector = gr.Dropdown(
+                choices=[
+                    ("VADER — fast, CPU-only (~5 000 comments/sec)", "vader"),
+                    ("DistilBERT — accurate, downloads ~500 MB on first run", "hf"),
                 ],
+                value="vader",
+                label="Sentiment Engine",
+                scale=3,
+            )
+            max_comments_slider = gr.Slider(
+                minimum=10, maximum=500, value=150, step=10,
+                label="Max comments to fetch",
+                scale=3,
+                info="YouTube API quota: ~1 unit per comment request",
+            )
+    #  Input tabs
+    with gr.Tabs():
+        with gr.TabItem("🔗 YouTube URL"):
+            with gr.Row():
+                url_input   = gr.Textbox(
+                    placeholder="https://www.youtube.com/watch?v=...  or  youtu.be/...  or raw 11-char ID",
+                    label="YouTube URL / Video ID",
+                    scale=5,
+                )
+                analyze_btn = gr.Button("🔍 Analyze", variant="primary", scale=1, min_width=130)
+        with gr.TabItem("📁 Upload / Search by Title"):
+            gr.HTML("""
+            <div class="vv-card" style="margin-bottom:8px">
+              <p class="vv-section-title">Search by video title or keyword</p>
+              <p style="font-size:0.82rem;color:#5a6070;line-height:1.6;margin:0">
+                Upload your file, then type the title or keyword below to locate the matching YouTube entry.
+              </p>
+            </div>
+            """)
+            upload_file = gr.File(
+                label="Drop a video file (mp4, mov, avi, mkv, webm)",
+                file_types=[".mp4", ".mov", ".avi", ".mkv", ".webm"],
+            )
+            with gr.Row():
+                kw_input   = gr.Textbox(placeholder="Enter video title or keyword…", label="Search keyword", scale=4)
+                search_btn = gr.Button("🔎 Find on YouTube", scale=1)
+            search_results_html = gr.HTML()
+            search_radio        = gr.Radio(label="Select a video to analyze", choices=[], visible=False)
+    #  Status
+    status_box = gr.HTML(
+        '<p style="color:#5a6070;font-family:DM Mono,monospace;font-size:0.8rem;padding:6px 0">'
+        "Enter a URL above and click Analyze.</p>"
     )
+    #  Main results layout
+    with gr.Row(equal_height=False):
+        # LEFT — video info
+        with gr.Column(scale=2):
+            left_panel_html = gr.HTML(
+                "<div style='padding:3rem;text-align:center;color:#5a6070;"
+                "font-family:DM Mono,monospace'>No data yet.</div>"
+            )
+        # RIGHT — analytics
+        with gr.Column(scale=3):
+            # ── Misinformation Analysis ───────────────────────────────────────
+            gr.HTML('<p class="vv-section-title" style="margin-top:0">🔬 Misinformation Analysis</p>')
+            misinfo_badge_html = gr.HTML()
+            # Row 1 — Modality Misinformation Distribution (full width)
+            with gr.Row():
+                modality_dist_plot = gr.Plot(label="", show_label=False)
+            # Row 2 — Trust Score | Uncertainty Analysis (side by side)
+            with gr.Row():
+                trust_score_plot = gr.Plot(label="", show_label=False)
+                uncertainty_plot = gr.Plot(label="", show_label=False)
+            misinfo_reasoning_html = gr.HTML()
+            gr.HTML('<hr class="vv-hr">')
+            # ── Comment Sentiment ─────────────────────────────────────────────
+            gr.HTML('<p class="vv-section-title">💬 Comment Sentiment</p>')
+            with gr.Row():
+                stat_pos_html = gr.HTML()
+                stat_neg_html = gr.HTML()
+                stat_neu_html = gr.HTML()
+            with gr.Row():
+                donut_plot    = gr.Plot(label="", show_label=False)
+                timeline_plot = gr.Plot(label="", show_label=False)
+            with gr.Row():
+                kw_bar_plot   = gr.Plot(label="", show_label=False)
+                kw_comp_plot  = gr.Plot(label="", show_label=False)
+            gr.HTML('<hr class="vv-hr">')
+            # ── Comments Deep-Dive ────────────────────────────────────────────
+            gr.HTML('<p class="vv-section-title">📊 Comments Deep-Dive</p>')
+            with gr.Tabs():
+                with gr.TabItem("All"):
+                    df_all_out = gr.Dataframe(
+                        headers=["author", "text", "likes", "published_at", "sentiment", "compound"],
+                        datatype=["str", "str", "number", "str", "str", "number"],
+                        wrap=True,
+                        max_height=320,
+                    )
+                with gr.TabItem("Positive"):
+                    df_pos_out = gr.Dataframe(wrap=True, max_height=320)
+                with gr.TabItem("Negative"):
+                    df_neg_out = gr.Dataframe(wrap=True, max_height=320)
+                with gr.TabItem("Most Liked"):
+                    df_top_out = gr.Dataframe(wrap=True, max_height=320)
+    #  Activity log
+    with gr.Accordion("📜 Activity Log", open=False):
+        log_html_out = gr.HTML('<p class="vv-log-line">—</p>')
+    #  Footer
+    gr.HTML("""
+    <div style="margin-top:2rem;padding-top:1rem;border-top:1px solid #1e2330;
+                text-align:center;font-family:'DM Mono',monospace;font-size:0.72rem;color:#3a3f50">
+      4-stream SeTa-Attention BiGRU · CCM / DMTE / Uncertainty Fusion ·
+      Test ROC-AUC 0.967
+    </div>
+    """)
+    # ── Output list — order must match _build_outputs / _blank_outputs exactly ─
+    ALL_OUTPUTS = [
+        status_box,             # 0
+        log_html_out,           # 1
+        left_panel_html,        # 2
+        misinfo_badge_html,     # 3
+        misinfo_reasoning_html, # 4
+        modality_dist_plot,     # 5
+        trust_score_plot,       # 6
+        uncertainty_plot,       # 7
+        donut_plot,             # 8
+        timeline_plot,          # 9
+        kw_bar_plot,            # 10
+        kw_comp_plot,           # 11
+        stat_pos_html,          # 12
+        stat_neg_html,          # 13
+        stat_neu_html,          # 14
+        df_all_out,             # 15
+        df_pos_out,             # 16
+        df_neg_out,             # 17
+        df_top_out,             # 18
+    ]
+    #  Pipeline inputs (no api_key_input — read from env)
+    _pipeline_inputs = [url_input, sentiment_selector, max_comments_slider]
+    #  Events: URL tab
+    analyze_btn.click(fn=run_pipeline, inputs=_pipeline_inputs, outputs=ALL_OUTPUTS)
+    url_input.submit(fn=run_pipeline,  inputs=_pipeline_inputs, outputs=ALL_OUTPUTS)
+    #  Events: Upload/Search tab
+    search_btn.click(
+        fn=do_search,
+        inputs=[kw_input],
+        outputs=[search_results_html, search_radio],
+    )
+    search_radio.change(
+        fn=pick_and_analyze,
+        inputs=[search_radio, sentiment_selector, max_comments_slider],
+        outputs=ALL_OUTPUTS,
     )
+#  Launch — css and theme go HERE in Gradio 6.x (NOT in gr.Blocks)
+if __name__ == "__main__":
+    demo.launch(
+        css=CSS,
+        theme=gr.themes.Base(
+            primary_hue=gr.themes.colors.cyan,
+            neutral_hue=gr.themes.colors.gray,
+            font=[gr.themes.GoogleFont("IBM Plex Sans"), "sans-serif"],
+        ),
     )