Update app.py

app.py

@@ -1,885 +1,595 @@
 """
-app.py — Video Verifier & Sentiment Analyzer  (Gradio 6.x)
-
+charts.py — Plotly chart builders for Mental Health Information Verification.
+Pure functions, no Streamlit/Gradio imports.
 """
 
-import os
+from typing import Dict, List, Tuple
+import plotly.graph_objects as go
 import pandas as pd
-import gradio as gr
-
-from fetcher import (
-    extract_video_id,
-    fetch_video_metadata,
-    fetch_transcript,
-    fetch_comments,
-    search_videos_by_title,
-)
-from analyzer import (
-    detect_misinformation,
-    analyze_sentiment_batch,
-    sentiment_summary,
-    extract_keywords,
-    sentiment_weighted_keywords,
-)
-from charts import (
-    sentiment_donut,
-    keyword_bar,
-    sentiment_timeline,
-    keyword_comparison,
-    modality_misinfo_distribution,
-    trust_score_by_modality,
-    uncertainty_analysis,
+import numpy as np
+
+
+# ============================================================
+# Medical / Mental Health Information Theme
+# ============================================================
+
+DARK_BG     = "#ffffff"
+CARD_BG     = "#f8fafc"
+BORDER      = "#e2e8f0"
+TEXT_MAIN   = "#1e293b"
+TEXT_DIM    = "#64748b"
+
+# Medical information-verification palette
+CYAN        = "#0891b2"   # clinical cyan
+GREEN       = "#10b981"   # reliable / safe information
+RED         = "#ef4444"   # misinformation risk
+AMBER       = "#f59e0b"   # uncertain / mixed
+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, family="'Inter', sans-serif", size=12),
+    ),
 )
 
 
-#  CSS  — full-viewport dark theme, zero white bleed
-
-
-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; }
-"""
+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,
+    )
 
-#  HELPERS
+    fig.update_yaxes(
+        showspikes=True,
+        spikecolor=CYAN,
+        spikethickness=1,
+        spikedash="dot",
+        showline=True,
+        linecolor=BORDER,
+        gridcolor="#edf2f7",
+        zerolinecolor=BORDER,
+    )
 
+    return fig
 
-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,
+
+# ============================================================
+# 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=msg, x=0.5, y=0.5, xref="paper", yref="paper",
-        showarrow=False, font=dict(size=12, color="#5a6070"),
+        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",
     )
-    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
+    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>",
+    ))
 
-#  PIPELINE
+    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)
 
-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
+# ============================================================
+# Stream Misinformation Bars
+# ============================================================
 
-    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
+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]
 
-    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
-    )
+    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>",
+    ))
 
-    # 5 — Keywords
-    keywords = extract_keywords(
-        f"{meta['title']} {meta['description']} {transcript}",
-        meta["tags"],
+    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,
     )
 
-    # 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"]
-            ),
-        ],
-    )
+    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]
 
-#  OUTPUT BUILDER
+    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>"
+        ),
+    ))
 
-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>"
+    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,
     )
 
-    #  Log
-    log_html = "".join(f'<p class="vv-log-line">{line}</p>' for line in status_log)
+    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),
+        )
 
-    #  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 ""
+    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,
     )
-    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>'
+    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),
     )
 
-    #  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
+    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,
+    )
 
-#  UPLOAD / SEARCH HELPERS
+    return make_interactive(fig, height=280)
 
 
-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),
-        )
+# ============================================================
+# Comment Sentiment Timeline
+# ============================================================
 
-    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),
-        )
+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")
 
-    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"),
+    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),
                 ],
-                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>"
+                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)),
     )
 
-    #  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
-    ]
+    return make_interactive(fig, height=320)
 
-    #  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)
+# ============================================================
+# Keyword Comparison
+# ============================================================
 
-    #  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,
-    )
+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()
 
-#  Launch — css and theme go HERE in Gradio 6.x (NOT in gr.Blocks)
+    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>",
+        ))
 
-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"],
+    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)