Update app.py

app.py

@@ -1,12 +1,12 @@
 """
 app.py — Video Verifier & Sentiment Analyzer
-Professional dark-mode Streamlit application.
+Gradio dark-mode application.
+fetcher.py, analyzer.py, charts.py are UNCHANGED — only this file replaces the Streamlit version.
 """
 
 import os
-import time
-import streamlit as st
 import pandas as pd
+import gradio as gr
 
 from fetcher import (
     extract_video_id,
@@ -32,773 +32,591 @@ from charts import (
 )
 
 # ══════════════════════════════════════════════════════════════════════════════
-#  PAGE CONFIG & GLOBAL STYLES
+#  CSS — same dark palette as the Streamlit version
 # ══════════════════════════════════════════════════════════════════════════════
 
-st.set_page_config(
-    page_title="VideoVerifier — MHMisinfo",
-    page_icon="🔬",
-    layout="wide",
-    initial_sidebar_state="expanded",
-)
-
-st.markdown("""
-<style>
-/* ── Google Fonts ── */
+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');
 
-/* ── Root palette ── */
 :root {
-    --bg:         #0d0f14;
-    --card:       #13161e;
-    --border:     #1e2330;
-    --text:       #e8eaf0;
-    --dim:        #5a6070;
-    --cyan:       #00d4ff;
-    --green:      #00e5a0;
-    --red:        #ff4757;
-    --amber:      #ffb347;
-    --purple:     #b388ff;
-    --blue:       #4a8eff;
-}
-
-/* ── App shell ── */
-html, body, [class*="css"] {
-    background-color: var(--bg) !important;
-    color: var(--text) !important;
-    font-family: 'IBM Plex Sans', sans-serif !important;
-}
-
-.stApp { background: var(--bg) !important; }
-
-/* ── Hide Streamlit chrome ── */
-#MainMenu, footer, header { visibility: hidden; }
-.block-container { padding: 1.5rem 2rem !important; max-width: 1400px; }
-
-/* ── Sidebar ── */
-section[data-testid="stSidebar"] {
-    background: var(--card) !important;
-    border-right: 1px solid var(--border) !important;
-}
-section[data-testid="stSidebar"] * { color: var(--text) !important; }
-
-/* ── Inputs ── */
-input, textarea, select, .stTextInput input {
-    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 {
-    border-color: var(--cyan) !important;
-    box-shadow: 0 0 0 2px rgba(0,212,255,0.15) !important;
-}
-
-/* ── Buttons ── */
-.stButton > button {
-    background: linear-gradient(135deg, #00d4ff22, #4a8eff22) !important;
-    border: 1px solid var(--cyan) !important;
-    color: var(--cyan) !important;
-    border-radius: 8px !important;
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.85rem !important;
-    letter-spacing: 0.05em !important;
-    padding: 0.45rem 1.2rem !important;
-    transition: all 0.2s ease !important;
-}
-.stButton > button:hover {
-    background: linear-gradient(135deg, #00d4ff44, #4a8eff33) !important;
-    box-shadow: 0 0 16px rgba(0,212,255,0.25) !important;
-    transform: translateY(-1px) !important;
-}
-.stButton > button[kind="primary"] {
-    background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
-    border: none !important;
-    color: var(--bg) !important;
-    font-weight: 600 !important;
-}
-
-/* ── Cards ── */
-.vv-card {
-    background: var(--card);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 1.2rem 1.4rem;
-    margin-bottom: 1rem;
-}
-.vv-card-accent {
-    background: var(--card);
-    border-top: 2px solid var(--cyan);
-    border-left: 1px solid var(--border);
-    border-right: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-    border-radius: 0 0 12px 12px;
-    padding: 1.2rem 1.4rem;
-    margin-bottom: 1rem;
-}
-
-/* ── Section headers ── */
-.vv-section-title {
-    font-family: 'Syne', sans-serif;
-    font-size: 0.7rem;
-    font-weight: 700;
-    letter-spacing: 0.18em;
-    text-transform: uppercase;
-    color: var(--dim);
-    margin-bottom: 0.6rem;
-}
-
-/* ── Hero title ── */
-.vv-hero {
-    font-family: 'Syne', sans-serif;
-    font-size: 1.6rem;
-    font-weight: 800;
-    background: linear-gradient(135deg, var(--cyan), var(--blue));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    letter-spacing: -0.02em;
-    line-height: 1.2;
-    margin: 0 0 0.2rem;
-}
-
-/* ── Stat chips ── */
-.vv-stat {
-    display: inline-block;
-    background: #1a1d27;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    padding: 0.25rem 0.7rem;
-    font-family: 'DM Mono', monospace;
-    font-size: 0.78rem;
-    color: var(--cyan);
-    margin: 0.15rem 0.2rem 0.15rem 0;
-}
-
-/* ── Badge ── */
-.vv-badge-green {
-    display: inline-block;
-    background: rgba(0,229,160,0.12);
-    border: 1px solid var(--green);
-    color: var(--green);
-    border-radius: 20px;
-    padding: 0.2rem 0.8rem;
-    font-size: 0.78rem;
-    font-family: 'DM Mono', monospace;
-}
-.vv-badge-red {
-    display: inline-block;
-    background: rgba(255,71,87,0.12);
-    border: 1px solid var(--red);
-    color: var(--red);
-    border-radius: 20px;
-    padding: 0.2rem 0.8rem;
-    font-size: 0.78rem;
-    font-family: 'DM Mono', monospace;
-}
-.vv-badge-amber {
-    display: inline-block;
-    background: rgba(255,179,71,0.12);
-    border: 1px solid var(--amber);
-    color: var(--amber);
-    border-radius: 20px;
-    padding: 0.2rem 0.8rem;
-    font-size: 0.78rem;
-    font-family: 'DM Mono', monospace;
-}
-
-/* ── Reasoning box ── */
-.vv-reasoning {
-    background: #0d1119;
-    border-left: 3px solid var(--amber);
-    padding: 0.7rem 1rem;
-    border-radius: 0 8px 8px 0;
-    font-size: 0.83rem;
-    color: #c0c4cc;
-    line-height: 1.6;
-    font-family: 'IBM Plex Sans', sans-serif;
-    margin-top: 0.6rem;
-}
-
-/* ── Dataframe ── */
-.stDataFrame {
-    background: var(--card) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 8px !important;
-}
-.stDataFrame th {
-    background: #1a1d27 !important;
-    color: var(--cyan) !important;
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.78rem !important;
-}
-.stDataFrame td {
-    color: var(--text) !important;
-    font-size: 0.8rem !important;
-    border-color: var(--border) !important;
-}
-
-/* ── Tabs ── */
-.stTabs [data-baseweb="tab-list"] {
-    background: transparent !important;
-    border-bottom: 1px solid var(--border) !important;
-    gap: 0 !important;
-}
-.stTabs [data-baseweb="tab"] {
-    background: transparent !important;
-    color: var(--dim) !important;
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.82rem !important;
-    letter-spacing: 0.05em !important;
-    border: none !important;
-    padding: 0.5rem 1.2rem !important;
-}
-.stTabs [aria-selected="true"] {
-    color: var(--cyan) !important;
-    border-bottom: 2px solid var(--cyan) !important;
-}
-
-/* ── Spinner ── */
-.stSpinner > div { border-top-color: var(--cyan) !important; }
-
-/* ── Alerts ── */
-.stAlert { border-radius: 8px !important; font-size: 0.85rem !important; }
-
-/* ── Divider ── */
-hr { border-color: var(--border) !important; }
-
-/* ── Select box ── */
-.stSelectbox > div > div {
-    background: #1a1d27 !important;
-    border-color: var(--border) !important;
-    color: var(--text) !important;
-}
-
-/* ── File uploader ── */
-.stFileUploader {
-    background: #1a1d27 !important;
-    border: 1px dashed var(--border) !important;
-    border-radius: 8px !important;
+    --bg:     #0d0f14;
+    --card:   #13161e;
+    --border: #1e2330;
+    --text:   #e8eaf0;
+    --dim:    #5a6070;
+    --cyan:   #00d4ff;
+    --green:  #00e5a0;
+    --red:    #ff4757;
+    --amber:  #ffb347;
+    --blue:   #4a8eff;
 }
 
-/* ── Progress bar ── */
-.stProgress > div > div > div {
-    background: linear-gradient(90deg, var(--cyan), var(--blue)) !important;
-}
-
-/* ── Number input ── */
-.stNumberInput input {
-    background: #1a1d27 !important;
-    border-color: var(--border) !important;
-}
-
-/* ── Expander ── */
-.streamlit-expanderHeader {
-    background: var(--card) !important;
-    border-color: var(--border) !important;
-    color: var(--text) !important;
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.85rem !important;
-}
-</style>
-""", unsafe_allow_html=True)
-
+body, .gradio-container { background: var(--bg) !important; font-family: 'IBM Plex Sans', sans-serif !important; color: var(--text) !important; max-width: 1400px !important; margin: 0 auto; }
+footer { display: none !important; }
+
+/* Panels */
+.gr-group, .gr-box, .gr-panel, div[class*="block"] { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 12px !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.2s; }
+.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"], textarea { 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 { border-color: var(--cyan) !important; box-shadow: 0 0 0 2px rgba(0,212,255,0.15) !important; outline: none !important; }
+label, .gr-label { color: var(--dim) !important; font-family: 'DM Mono', monospace !important; font-size: 0.75rem !important; letter-spacing: 0.08em !important; text-transform: uppercase; }
+
+/* Buttons */
+button.primary, button[variant="primary"] { background: linear-gradient(135deg, var(--cyan), var(--blue)) !important; border: none !important; color: var(--bg) !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; }
+
+/* Dropdown */
+select { background: #1a1d27 !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 8px !important; }
+
+/* Slider */
+input[type="range"] { accent-color: var(--cyan); }
+
+/* Dataframe */
+.gr-dataframe table { background: var(--card) !important; border-collapse: collapse; width: 100%; }
+.gr-dataframe th { background: #1a1d27 !important; color: var(--cyan) !important; font-family: 'DM Mono', monospace !important; font-size: 0.75rem !important; padding: 6px 10px; border-bottom: 1px solid var(--border); }
+.gr-dataframe td { color: var(--text) !important; font-size: 0.78rem !important; padding: 5px 10px; border-bottom: 1px solid var(--border); }
+.gr-dataframe tr:hover td { background: rgba(0,212,255,0.04) !important; }
+
+/* Shared HTML helpers */
+.vv-hero { font-family: 'Syne', sans-serif; font-size: 1.6rem; 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; }
+.vv-card { background: #13161e; border: 1px solid #1e2330; border-radius: 12px; padding: 1.2rem 1.4rem; margin-bottom: 0.8rem; }
+.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.78rem; 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.3rem 1rem; font-size: 0.82rem; font-family: 'DM Mono', monospace; }
+.vv-badge-red { display: inline-block; background: rgba(255,71,87,0.12); border: 1px solid #ff4757; color: #ff4757; border-radius: 20px; padding: 0.3rem 1rem; font-size: 0.82rem; font-family: 'DM Mono', monospace; }
+.vv-badge-amber { display: inline-block; background: rgba(255,179,71,0.12); border: 1px solid #ffb347; color: #ffb347; border-radius: 20px; padding: 0.3rem 1rem; font-size: 0.82rem; font-family: 'DM Mono', monospace; }
+.vv-reasoning { background: #0d1119; border-left: 3px solid #ffb347; padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; font-size: 0.83rem; color: #c0c4cc; line-height: 1.65; font-family: 'IBM Plex Sans', sans-serif; }
+.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; }
+"""
 
 # ══════════════════════════════════════════════════════════════════════════════
-#  SESSION STATE HELPERS
+#  SHARED HELPERS
 # ══════════════════════════════════════════════════════════════════════════════
 
-def init_state():
-    defaults = {
-        "metadata":     None,
-        "transcript":   "",
-        "comments_df":  pd.DataFrame(),
-        "sentiments":   [],
-        "sent_summary": {},
-        "misinfo":      None,
-        "keywords":     [],
-        "pos_kw":       [],
-        "neg_kw":       [],
-        "video_id":     None,
-        "analysed":     False,
-        "status_log":   [],
-    }
-    for k, v in defaults.items():
-        if k not in st.session_state:
-            st.session_state[k] = v
-
-init_state()
+def _empty_plotly():
+    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=200,
+    )
+    fig.add_annotation(text="Run analysis to see data", x=0.5, y=0.5,
+                       showarrow=False, font=dict(size=13, color="#5a6070"))
+    return fig
+
+
+def _blank_outputs(status_msg: str):
+    """18-element tuple matching ALL_OUTPUTS when nothing has run yet."""
+    ep = _empty_plotly()
+    return (
+        f'<p style="color:#ff4757;font-family:DM Mono,monospace;padding:8px">{status_msg}</p>',  # status
+        "<p class='vv-log-line'>—</p>",                                                           # log
+        "<div style='padding:3rem;text-align:center;color:#5a6070'>No data yet.</div>",           # left panel
+        "", "",                                                                                   # badge, reasoning
+        ep, ep, ep, ep, ep, ep,                                                                   # 6 charts
+        "", "", "",                                                                               # 3 stat boxes
+        pd.DataFrame(), pd.DataFrame(), pd.DataFrame(), pd.DataFrame(),                           # 4 dataframes
+    )
 
 
 # ══════════════════════════════════════════════════════════════════════════════
-#  SIDEBAR
+#  PIPELINE  (replaces Streamlit's run_full_pipeline + session_state writes)
 # ══════════════════════════════════════════════════════════════════════════════
 
-with st.sidebar:
-    st.markdown('<p class="vv-hero" style="font-size:1.1rem">🔬 VideoVerifier</p>', unsafe_allow_html=True)
-    st.markdown('<p style="color:#5a6070;font-size:0.78rem;font-family:\'DM Mono\',monospace;margin-top:-8px">Mental Health Misinfo Detector</p>', unsafe_allow_html=True)
-    st.markdown("---")
+def run_pipeline(
+    url_or_id: str,
+    api_key: str,
+    sentiment_method: str,
+    max_comments: int,
+    progress=gr.Progress(track_tqdm=False),
+):
+    """
+    Generator function — yields one final tuple when all work is done.
+    gr.Progress() gives the user an animated progress bar while waiting.
+    All logic is identical to the Streamlit version; we just return values
+    instead of writing to st.session_state.
+    """
+    # ── Input guards ──────────────────────────────────────────────────────────
+    if not (url_or_id or "").strip():
+        yield _blank_outputs("⚠️ Please enter a YouTube URL or video ID.")
+        return
 
-    st.markdown('<p class="vv-section-title">⚙️ Configuration</p>', unsafe_allow_html=True)
+    video_id = extract_video_id(url_or_id.strip())
+    if not video_id:
+        yield _blank_outputs("❌ Could not parse a valid YouTube video ID from that input.")
+        return
 
-    api_key = st.text_input(
-        "YouTube API v3 Key",
-        value=os.environ.get("YT_API_KEY", ""),
-        type="password",
-        placeholder="AIza...",
-        help="Get a free key at console.cloud.google.com",
-    )
+    if not (api_key or "").strip():
+        yield _blank_outputs("⚠️ YouTube API key is required. Set it in the ⚙️ Settings tab.")
+        return
 
-    sentiment_method = st.selectbox(
-        "Sentiment Engine",
-        ["vader", "hf"],
-        format_func=lambda x: "VADER (fast, CPU)" if x == "vader" else "DistilBERT (accurate, ~500MB)",
-        help="VADER is ~100× faster and works offline. DistilBERT downloads ~500MB on first run.",
-    )
+    # 1 ── Metadata ─────────────────────────────────────────────────────────────
+    progress(0.05, desc="Fetching video metadata…")
+    meta, err_msg = fetch_video_metadata(video_id, api_key)
+    if err_msg:
+        yield _blank_outputs(f"❌ {err_msg}")
+        return
 
-    max_comments = st.number_input(
-        "Max comments to fetch",
-        min_value=10, max_value=500, value=150, step=10,
-        help="YouTube API quota: ~1 unit per comment request",
+    # 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 detection ──────────────────────────────────────────────
+    progress(0.50, desc="Running misinformation detection…")
+    misinfo = detect_misinformation(
+        text=f"{meta['title']} {meta['description']}",
+        tags=meta["tags"],
+        audio_transcript=transcript,
+        video_transcript=transcript,
     )
 
-    st.markdown("---")
-    st.markdown('<p class="vv-section-title">📋 About</p>', unsafe_allow_html=True)
-    st.markdown(
-        '<p style="font-size:0.78rem;color:#5a6070;line-height:1.6">'
-        '4-stream SeTa-Attention model for mental health misinformation detection. '
-        'Plug your <code style="background:#1a1d27;padding:1px 4px;border-radius:3px;color:#00d4ff">detect_misinformation()</code> '
-        'function in <b>analyzer.py</b> to connect your trained checkpoint.'
-        '</p>',
-        unsafe_allow_html=True,
+    # 5 ── Keywords ──────────────────────────────────────────────────────────────
+    keywords = extract_keywords(
+        f"{meta['title']} {meta['description']} {transcript}",
+        meta["tags"],
     )
 
-    if st.session_state.status_log:
-        st.markdown("---")
-        st.markdown('<p class="vv-section-title">📜 Log</p>', unsafe_allow_html=True)
-        for msg in st.session_state.status_log[-6:]:
-            st.markdown(f'<p style="font-size:0.72rem;color:#5a6070;font-family:\'DM Mono\',monospace;margin:2px 0">{msg}</p>', unsafe_allow_html=True)
-
+    # 6 ── Sentiment (batched, same logic as Streamlit version) ─────────────────
+    sentiments, sent_sum, pos_kw, neg_kw = [], {}, [], []
 
-# ══════════════════════════════════════════════════════════════════════════════
-#  HEADER
-# ══════════════════════════════════════════════════════════════════════════════
-
-st.markdown(
-    '<h1 class="vv-hero" style="font-size:2rem">Video Verifier & Sentiment Analyzer</h1>'
-    '<p style="color:#5a6070;font-size:0.85rem;margin-top:-4px;font-family:\'DM Mono\',monospace">'
-    'Detect mental health misinformation · Analyze public sentiment · Understand video content at a glance'
-    '</p>',
-    unsafe_allow_html=True,
-)
-st.markdown("---")
+    if not comments_df.empty:
+        texts = comments_df["text"].fillna("").tolist()
+        batch_size = 64
+        for i in range(0, len(texts), batch_size):
+            chunk = texts[i: i + batch_size]
+            sentiments += analyze_sentiment_batch(chunk, method=sentiment_method, batch_size=batch_size)
+            frac = 0.60 + 0.30 * min((i + batch_size) / max(len(texts), 1), 1.0)
+            progress(frac, desc=f"Sentiment: {min(i+batch_size, len(texts))}/{len(texts)}…")
+
+        sent_sum = sentiment_summary(sentiments)
+        pos_kw, neg_kw = sentiment_weighted_keywords(comments_df, sentiments)
+
+    # 7 ── Assemble and yield ────────────────────────────────────────────────────
+    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 ["💬 Skipped (no comments available)"]
+            ),
+        ],
+    )
 
 
 # ══════════════════════════════════════════════════════════════════════════════
-#  INPUT SECTION
+#  OUTPUT BUILDER  (assembles the 18-element tuple from all computed data)
 # ═════════════════════════════════════════════════════���════════════════════════
 
-input_tab1, input_tab2 = st.tabs(["🔗 YouTube URL", "📁 Upload Video File"])
-
-video_id_to_analyze = None
+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>'
+    )
 
-with input_tab1:
-    col_url, col_btn = st.columns([5, 1])
-    with col_url:
-        yt_url = st.text_input(
-            "YouTube URL",
-            placeholder="https://www.youtube.com/watch?v=... or youtu.be/...",
-            label_visibility="collapsed",
-        )
-    with col_btn:
-        analyze_url_btn = st.button("🔍 Analyze", type="primary", use_container_width=True)
+    # ── Log ───────────────────────────────────────────────────────────────────
+    log_html = "".join(f'<p class="vv-log-line">{line}</p>' for line in status_log)
 
-    if analyze_url_btn and yt_url:
-        vid = extract_video_id(yt_url)
-        if vid:
-            video_id_to_analyze = vid
-        else:
-            st.error("❌ Could not extract a valid YouTube video ID. Check the URL format.")
-
-with input_tab2:
-    st.markdown(
-        '<div class="vv-card">'
-        '<p class="vv-section-title">Upload a video file</p>'
-        '<p style="font-size:0.82rem;color:#5a6070;line-height:1.6">'
-        '⚠️ <b>Important:</b> The YouTube Data API cannot search by raw video bytes. '
-        'After uploading, enter the video title or a keyword to find the matching YouTube entry. '
-        'For local-only analysis, the system will run misinformation detection on the filename metadata.'
-        '</p></div>',
-        unsafe_allow_html=True,
-    )
-    uploaded = st.file_uploader(
-        "Drop a video file",
-        type=["mp4", "mov", "avi", "mkv", "webm"],
-        label_visibility="collapsed",
+    # ── Left panel (video info) ────────────────────────────────────────────────
+    thumb_html = (
+        f'<img src="{meta["thumbnail_url"]}" '
+        f'style="width:100%;border-radius:8px;margin-bottom:8px">'
+        if meta.get("thumbnail_url") else ""
     )
-    if uploaded:
-        col_kw, col_search = st.columns([4, 1])
-        with col_kw:
-            kw = st.text_input(
-                "Video title / keyword to search on YouTube",
-                placeholder=f"e.g. {uploaded.name.replace('.mp4','').replace('_',' ')}",
-            )
-        with col_search:
-            search_btn = st.button("🔎 Find on YT", use_container_width=True)
-
-        if search_btn and kw and api_key:
-            with st.spinner("Searching YouTube…"):
-                results = search_videos_by_title(kw, api_key, max_results=5)
-            if results:
-                st.markdown('<p class="vv-section-title">Select the matching video</p>', unsafe_allow_html=True)
-                for r in results:
-                    c1, c2, c3 = st.columns([1, 4, 1])
-                    with c1:
-                        if r["thumbnail_url"]:
-                            st.image(r["thumbnail_url"], width=80)
-                    with c2:
-                        st.markdown(
-                            f'<p style="margin:0;font-size:0.85rem;font-weight:500">{r["title"]}</p>'
-                            f'<p style="margin:0;font-size:0.75rem;color:#5a6070">{r["channel_title"]} · {r["published_at"]}</p>',
-                            unsafe_allow_html=True,
-                        )
-                    with c3:
-                        if st.button("Select", key=f"sel_{r['video_id']}"):
-                            video_id_to_analyze = r["video_id"]
-            else:
-                st.warning("No results found. Try a different keyword or check your API key.")
-        elif search_btn and not api_key:
-            st.error("Please enter your YouTube API key in the sidebar first.")
-
+    tag_html = "".join(f'<span class="vv-tag">#{t}</span>' for t in meta.get("tags", [])[:20])
+    desc_text = meta.get("description", "")
+    desc_short = desc_text[:1200] + ("…" if len(desc_text) > 1200 else "")
+    word_count = len(transcript.split()) if transcript else 0
+    transcript_short = (transcript[:2500] + ("…" if len(transcript) > 2500 else "")) 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.76rem;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 style="cursor:pointer;font-family:'DM Mono',monospace;font-size:0.78rem;color:#5a6070">
+        📄 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 style="cursor:pointer;font-family:'DM Mono',monospace;font-size:0.78rem;color:#5a6070">
+        📝 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 + reasoning ──────────────────────────────────────────────
+    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>'
 
-# ══════════════════════════════════════════════════════════════════════════════
-#  DATA FETCHING & ANALYSIS PIPELINE
-# ══════════════════════════════════════════════════════════════════════════════
+    reasoning_html = (
+        f'<div class="vv-reasoning" style="margin-top:8px">'
+        f'🧠 <b>Reasoning:</b> {misinfo["reasoning"]}'
+        f'</div>'
+    )
 
-def run_full_pipeline(video_id: str):
-    log = []
+    # ── Plotly charts ──────────────────────────────────────────────────────────
+    fig_gauge    = misinfo_gauge(score, "Misinfo Confidence")
+    fig_streams  = stream_trust_bars(misinfo["stream_details"])
+    fig_donut    = sentiment_donut(sent_sum)    if sent_sum else _empty_plotly()
+    fig_timeline = sentiment_timeline(comments_df, sentiments) if (sent_sum and not comments_df.empty) else _empty_plotly()
+    fig_kw       = keyword_bar(keywords, title="Top Video Keywords", color="#00d4ff")
+    fig_kw_comp  = keyword_comparison(pos_kw, neg_kw) if (pos_kw or neg_kw) else _empty_plotly()
 
-    # 1. Metadata
-    with st.spinner("Fetching video metadata…"):
-        meta, err = fetch_video_metadata(video_id, api_key)
-    if err:
-        st.error(f"❌ {err}")
-        return
-    log.append(f"✅ Metadata: {meta['title'][:50]}")
-    st.session_state.metadata = meta
-
-    # 2. Transcript
-    with st.spinner("Fetching transcript…"):
-        transcript, t_status = fetch_transcript(video_id)
-    log.append(t_status)
-    st.session_state.transcript = transcript
-
-    # 3. Comments
-    with st.spinner(f"Fetching up to {max_comments} comments…"):
-        comments_df, c_status = fetch_comments(video_id, api_key, max_comments=int(max_comments))
-    log.append(c_status)
-    st.session_state.comments_df = comments_df
-
-    # 4. Misinformation
-    with st.spinner("Running misinformation detection…"):
-        misinfo = detect_misinformation(
-            text=f"{meta['title']} {meta['description']}",
-            tags=meta["tags"],
-            audio_transcript=transcript,
-            video_transcript=transcript,
-        )
-    log.append(f"🔬 Misinfo score: {misinfo['confidence_pct']}%")
-    st.session_state.misinfo = misinfo
+    # ── Sentiment stat boxes ───────────────────────────────────────────────────
+    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: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: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:0">Neutral</p></div>')
+    else:
+        placeholder = '<div class="vv-card" style="text-align:center;color:#5a6070;font-size:0.8rem">N/A</div>'
+        stat_pos = stat_neg = stat_neu = placeholder
 
-    # 5. Keywords
-    kw = extract_keywords(f"{meta['title']} {meta['description']} {transcript}", meta["tags"])
-    st.session_state.keywords = kw
+    # ── Comment DataFrames for the 4 tabs ─────────────────────────────────────
+    show_cols = ["author", "text", "likes", "published_at"]
+    df_all = df_pos = df_neg = df_top = pd.DataFrame()
 
-    # 6. Sentiment
     if not comments_df.empty:
-        texts = comments_df["text"].fillna("").tolist()
-        with st.spinner(f"Analyzing sentiment of {len(texts)} comments ({sentiment_method.upper()})…"):
-            progress = st.progress(0, text="Sentiment analysis…")
-            batch_size = 64
-            results = []
-            for i in range(0, len(texts), batch_size):
-                chunk = texts[i: i + batch_size]
-                results += analyze_sentiment_batch(chunk, method=sentiment_method, batch_size=batch_size)
-                progress.progress(min((i + batch_size) / len(texts), 1.0),
-                                   text=f"Analyzed {min(i+batch_size, len(texts))}/{len(texts)} comments…")
-            progress.empty()
-        st.session_state.sentiments = results
-        st.session_state.sent_summary = sentiment_summary(results)
-        pos_kw, neg_kw = sentiment_weighted_keywords(comments_df, results)
-        st.session_state.pos_kw = pos_kw
-        st.session_state.neg_kw = neg_kw
-        log.append(f"💬 Sentiment: {st.session_state.sent_summary['pos_pct']}% pos / {st.session_state.sent_summary['neg_pct']}% neg")
-    else:
-        st.session_state.sentiments = []
-        st.session_state.sent_summary = {}
-        log.append("💬 Skipped (no comments)")
-
-    st.session_state.video_id = video_id
-    st.session_state.analysed = True
-    st.session_state.status_log = log
-    st.rerun()
+        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 video_id_to_analyze and api_key:
-    run_full_pipeline(video_id_to_analyze)
-elif video_id_to_analyze and not api_key:
-    st.error("⚠️ Please enter your YouTube API key in the sidebar before analyzing.")
+        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_gauge,        # 5  misinfo_gauge_plot
+        fig_streams,      # 6  stream_bars_plot
+        fig_donut,        # 7  donut_plot
+        fig_timeline,     # 8  timeline_plot
+        fig_kw,           # 9  kw_bar_plot
+        fig_kw_comp,      # 10 kw_comp_plot
+        stat_pos,         # 11 stat_pos_html
+        stat_neg,         # 12 stat_neg_html
+        stat_neu,         # 13 stat_neu_html
+        df_all,           # 14 df_all_out
+        df_pos,           # 15 df_pos_out
+        df_neg,           # 16 df_neg_out
+        df_top,           # 17 df_top_out
+    )
 
 
 # ══════════════════════════════════════════════════════════════════════════════
-#  RESULTS DASHBOARD
+#  UPLOAD TAB — search by keyword helper
 # ══════════════════════════════════════════════════════════════════════════════
 
-if not st.session_state.analysed:
-    # Landing state
-    st.markdown(
-        '<div style="text-align:center;padding:4rem 2rem">'
-        '<p style="font-size:3rem">🔬</p>'
-        '<p style="font-family:\'Syne\',sans-serif;font-size:1.1rem;color:#5a6070">'
-        'Paste a YouTube URL above and click <b style="color:#00d4ff">Analyze</b> to begin</p>'
-        '<p style="font-size:0.8rem;color:#3a3f50;font-family:\'DM Mono\',monospace">'
-        'Misinformation detection · Sentiment analysis · Comment insights</p>'
-        '</div>',
-        unsafe_allow_html=True,
-    )
-    st.stop()
-
-meta       = st.session_state.metadata
-transcript = st.session_state.transcript
-comments_df= st.session_state.comments_df
-misinfo    = st.session_state.misinfo
-keywords   = st.session_state.keywords
-sentiments = st.session_state.sentiments
-sent_sum   = st.session_state.sent_summary
-pos_kw     = st.session_state.pos_kw
-neg_kw     = st.session_state.neg_kw
-video_id   = st.session_state.video_id
-
-
-# ── Layout: left (info) / right (analytics) ───────────────────────────────────
-
-left_col, right_col = st.columns([2, 3], gap="large")
-
-# ╔══════════════════════════════╗
-# ║  LEFT COLUMN — Video Info   ║
-# ╚══════════════════════════════╝
-with left_col:
-
-    # Thumbnail + embed
-    if meta.get("thumbnail_url"):
-        st.image(meta["thumbnail_url"], use_column_width=True)
-
-    st.markdown(
-        f'<a href="https://www.youtube.com/watch?v={video_id}" target="_blank" '
-        f'style="display:block;text-align:center;font-family:\'DM Mono\',monospace;'
-        f'font-size:0.78rem;color:#5a6070;text-decoration:none;margin:4px 0 12px">▶ Open on YouTube</a>',
-        unsafe_allow_html=True,
-    )
-
-    # Title & channel
-    st.markdown(
-        f'<div class="vv-card">'
-        f'<p class="vv-section-title">Video</p>'
-        f'<p style="font-family:\'Syne\',sans-serif;font-size:1.05rem;font-weight:700;margin:0 0 4px">{meta["title"]}</p>'
-        f'<p style="font-size:0.82rem;color:#5a6070;margin:0">by <b style="color:#b0b4c0">{meta["channel_title"]}</b> · {meta["published_at"]}</p>'
-        f'</div>',
-        unsafe_allow_html=True,
-    )
-
-    # Stats
-    st.markdown('<p class="vv-section-title">Metrics</p>', unsafe_allow_html=True)
-    s1, s2 = st.columns(2)
-    with s1:
-        st.markdown(f'<span class="vv-stat">👁 {meta["view_count"]:,}</span>', unsafe_allow_html=True)
-        st.markdown(f'<span class="vv-stat">👍 {meta["like_count"]:,}</span>', unsafe_allow_html=True)
-    with s2:
-        st.markdown(f'<span class="vv-stat">💬 {meta["comment_count"]:,}</span>', unsafe_allow_html=True)
-        st.markdown(f'<span class="vv-stat">⏱ {meta["duration"]}</span>', unsafe_allow_html=True)
-
-    # Tags
-    if meta.get("tags"):
-        st.markdown('<p class="vv-section-title" style="margin-top:1rem">Tags</p>', unsafe_allow_html=True)
-        tag_html = "".join(
-            f'<span style="display:inline-block;background:#1a1d27;border:1px solid #1e2330;border-radius:4px;'
-            f'padding:2px 8px;font-family:\'DM Mono\',monospace;font-size:0.7rem;color:#8090a0;margin:2px">'
-            f'#{t}</span>'
-            for t in meta["tags"][:20]
+def do_search(keyword: str, api_key: str):
+    if not (api_key or "").strip():
+        return (
+            "<p style='color:#ff4757;font-family:DM Mono,monospace'>⚠️ API key required.</p>",
+            gr.update(choices=[], value=None, visible=False),
         )
-        st.markdown(tag_html, unsafe_allow_html=True)
-
-    # Description (collapsed)
-    if meta.get("description"):
-        with st.expander("📄 Description", expanded=False):
-            st.markdown(
-                f'<p style="font-size:0.8rem;color:#8090a0;line-height:1.65;white-space:pre-wrap">'
-                f'{meta["description"][:1200]}{"…" if len(meta["description"])>1200 else ""}</p>',
-                unsafe_allow_html=True,
-            )
-
-    # Transcript (collapsed)
-    with st.expander(f"📝 Transcript ({len(transcript.split()) if transcript else 0} words)", expanded=False):
-        if transcript:
-            st.markdown(
-                f'<p style="font-size:0.78rem;color:#8090a0;line-height:1.65">'
-                f'{transcript[:2500]}{"…" if len(transcript)>2500 else ""}</p>',
-                unsafe_allow_html=True,
-            )
-        else:
-            st.info("No transcript available for this video.")
-
-
-# ╔══════════════════════════════╗
-# ║  RIGHT COLUMN — Analytics   ║
-# ╚══════════════════════════════╝
-with right_col:
-
-    # ── Misinfo verdict ──────────────────────────────────────────────────────
-    st.markdown('<p class="vv-section-title">🔬 Misinformation Analysis</p>', unsafe_allow_html=True)
-
-    score = misinfo["score"]
-    if score < 0.35:
-        badge = '<span class="vv-badge-green">✅ Appears Credible</span>'
-    elif score < 0.65:
-        badge = '<span class="vv-badge-amber">⚠️ Uncertain / Mixed Signals</span>'
-    else:
-        badge = '<span class="vv-badge-red">🚨 Likely Misinformation</span>'
-
-    st.markdown(badge, unsafe_allow_html=True)
-
-    ga_col, detail_col = st.columns([1, 1])
-    with ga_col:
-        st.plotly_chart(
-            misinfo_gauge(score, "Misinfo Confidence"),
-            use_container_width=True,
-            config={"displayModeBar": False},
+    results = search_videos_by_title(keyword, api_key, max_results=5)
+    if not results:
+        return (
+            "<p style='color:#ffb347;font-family:DM Mono,monospace'>No results found. Try a different keyword.</p>",
+            gr.update(choices=[], value=None, visible=False),
         )
-    with detail_col:
-        st.plotly_chart(
-            stream_trust_bars(misinfo["stream_details"]),
-            use_container_width=True,
-            config={"displayModeBar": 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"]}" style="width:72px;height:54px;object-fit:cover;border-radius:6px;flex-shrink:0">'
+            f'<div><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">{r["channel_title"]} · {r["published_at"]} · '
+            f'<code style="color:#00d4ff">v={vid}</code></p></div></div>'
         )
+    return html, gr.update(choices=choices, value=None, visible=True)
 
-    st.markdown(
-        f'<div class="vv-reasoning">🧠 <b>Reasoning:</b> {misinfo["reasoning"]}</div>',
-        unsafe_allow_html=True,
-    )
 
-    st.markdown("---")
+def pick_and_analyze(selected_url, api_key, sentiment_method, max_comments):
+    """When user picks a search result, run the full pipeline on it."""
+    if not selected_url:
+        yield _blank_outputs("Select a video from the search results above.")
+        return
+    yield from run_pipeline(selected_url, api_key, sentiment_method, max_comments)
 
-    # ── Sentiment analytics ──────────────────────────────────────────────────
-    st.markdown('<p class="vv-section-title">💬 Comment Sentiment</p>', unsafe_allow_html=True)
 
-    if sent_sum:
-        s_col1, s_col2, s_col3 = st.columns(3)
-        with s_col1:
-            st.markdown(
-                f'<div class="vv-card" style="text-align:center">'
-                f'<p style="color:#00e5a0;font-family:\'DM Mono\',monospace;font-size:1.6rem;font-weight:700;margin:0">{sent_sum["pos_pct"]}%</p>'
-                f'<p style="color:#5a6070;font-size:0.75rem;margin:0">Positive</p></div>',
-                unsafe_allow_html=True,
-            )
-        with s_col2:
-            st.markdown(
-                f'<div class="vv-card" style="text-align:center">'
-                f'<p style="color:#ff4757;font-family:\'DM Mono\',monospace;font-size:1.6rem;font-weight:700;margin:0">{sent_sum["neg_pct"]}%</p>'
-                f'<p style="color:#5a6070;font-size:0.75rem;margin:0">Negative</p></div>',
-                unsafe_allow_html=True,
-            )
-        with s_col3:
-            st.markdown(
-                f'<div class="vv-card" style="text-align:center">'
-                f'<p style="color:#5a6070;font-family:\'DM Mono\',monospace;font-size:1.6rem;font-weight:700;margin:0">{sent_sum["neu_pct"]}%</p>'
-                f'<p style="color:#5a6070;font-size:0.75rem;margin:0">Neutral</p></div>',
-                unsafe_allow_html=True,
-            )
+# ══════════════════════════════════════════════════════════════════════════════
+#  GRADIO BLOCKS UI
+# ══════════════════════════════════════════════════════════════════════════════
 
-        d_col, t_col = st.columns([1, 1])
-        with d_col:
-            st.plotly_chart(
-                sentiment_donut(sent_sum),
-                use_container_width=True,
-                config={"displayModeBar": False},
+with gr.Blocks(css=CSS, title="VideoVerifier — MHMisinfo", theme=gr.themes.Base()) 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">
+        Detect mental health misinformation · Analyze public sentiment · Understand video content at a glance
+      </p>
+    </div>
+    """)
+
+    # ── Settings row (always visible at top) ──────────────────────────────────
+    with gr.Accordion("⚙️ Settings", open=False):
+        with gr.Row():
+            api_key_input = gr.Textbox(
+                value=os.environ.get("YT_API_KEY", ""),
+                placeholder="AIza…",
+                label="YouTube Data API v3 Key",
+                type="password",
+                scale=3,
+                info="Get a free key at console.cloud.google.com → Enable YouTube Data API v3",
             )
-        with t_col:
-            st.plotly_chart(
-                sentiment_timeline(comments_df, sentiments),
-                use_container_width=True,
-                config={"displayModeBar": False},
+            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=2,
             )
-
-        # Keyword charts
-        kw_col1, kw_col2 = st.columns(2)
-        with kw_col1:
-            st.plotly_chart(
-                keyword_bar(keywords, title="Top Video Keywords", color="#00d4ff"),
-                use_container_width=True,
-                config={"displayModeBar": False},
-            )
-        with kw_col2:
-            st.plotly_chart(
-                keyword_comparison(pos_kw, neg_kw),
-                use_container_width=True,
-                config={"displayModeBar": False},
+            max_comments_slider = gr.Slider(
+                minimum=10, maximum=500, value=150, step=10,
+                label="Max comments to fetch",
+                scale=2,
+                info="YouTube API quota: ~1 unit per comment request",
             )
 
-    else:
-        st.info("⚠️ No comment sentiment data — comments may be disabled or unavailable.")
-        if keywords:
-            st.plotly_chart(
-                keyword_bar(keywords, title="Top Video Keywords", color="#00d4ff"),
-                use_container_width=True,
-                config={"displayModeBar": False},
+    # ── Input tabs ─────────────────────────────────────────────────────────────
+    with gr.Tabs():
+
+        # Tab 1 — URL
+        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)
+
+        # Tab 2 — Upload / search
+        with gr.TabItem("📁 Upload / Search by Title"):
+            gr.HTML("""
+            <div class="vv-card" style="margin-bottom:8px">
+              <p class="vv-section-title">Upload a video file → find matching YouTube metadata</p>
+              <p style="font-size:0.82rem;color:#5a6070;line-height:1.6;margin:0">
+                ⚠️ The YouTube Data API cannot search by raw video bytes.
+                Upload your file, then type the title or a keyword below to find 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,
             )
 
-    # ── Comments table ───────────────────────────────────────────────────────
-    st.markdown("---")
-    st.markdown('<p class="vv-section-title">📊 Comments Deep-Dive</p>', unsafe_allow_html=True)
-
-    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]
-
-        tab_all, tab_pos, tab_neg, tab_top = st.tabs([
-            f"All ({len(display_df)})",
-            f"Positive ({sent_sum.get('POSITIVE',0)})",
-            f"Negative ({sent_sum.get('NEGATIVE',0)})",
-            "Most Liked",
-        ])
+    # ── Status bar ─────────────────────────────────────────────────────────────
+    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>'
+    )
 
-        show_cols = ["author", "text", "likes", "published_at"]
-        if "sentiment" in display_df.columns:
-            show_cols += ["sentiment", "compound"]
+    # ── Main results layout ────────────────────────────────────────────────────
+    with gr.Row(equal_height=False):
 
-        with tab_all:
-            st.dataframe(display_df[show_cols].head(100), use_container_width=True, height=320)
+        # 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>'
+            )
 
-        with tab_pos:
-            pos_df = display_df[display_df.get("sentiment", pd.Series()) == "POSITIVE"] if "sentiment" in display_df else pd.DataFrame()
-            if not pos_df.empty:
-                st.dataframe(pos_df[show_cols].head(50), use_container_width=True, height=320)
-            else:
-                st.info("No positive comments in this dataset.")
+        # RIGHT — analytics
+        with gr.Column(scale=3):
+
+            # Misinfo block
+            gr.HTML('<p class="vv-section-title" style="margin-top:0">🔬 Misinformation Analysis</p>')
+            misinfo_badge_html     = gr.HTML()
+            with gr.Row():
+                misinfo_gauge_plot = gr.Plot(label="", show_label=False)
+                stream_bars_plot   = gr.Plot(label="", show_label=False)
+            misinfo_reasoning_html = gr.HTML()
+
+            gr.HTML('<hr style="border-color:#1e2330;margin:1rem 0">')
+
+            # Sentiment block
+            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 style="border-color:#1e2330;margin:1rem 0">')
+
+            # 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, height=320,
+                    )
+                with gr.TabItem("Positive"):
+                    df_pos_out = gr.Dataframe(wrap=True, height=320)
+                with gr.TabItem("Negative"):
+                    df_neg_out = gr.Dataframe(wrap=True, height=320)
+                with gr.TabItem("Most Liked"):
+                    df_top_out = gr.Dataframe(wrap=True, height=320)
+
+    # ── Activity log ──────────────────────────────────────────────────────────
+    with gr.Accordion("📜 Activity Log", open=False):
+        log_html_out = gr.HTML(
+            '<p class="vv-log-line">—</p>'
+        )
 
-        with tab_neg:
-            neg_df = display_df[display_df.get("sentiment", pd.Series()) == "NEGATIVE"] if "sentiment" in display_df else pd.DataFrame()
-            if not neg_df.empty:
-                st.dataframe(neg_df[show_cols].head(50), use_container_width=True, height=320)
-            else:
-                st.info("No negative comments in this dataset.")
+    # ── 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 ·
+      Plug your checkpoint into
+      <code style="color:#00d4ff">detect_misinformation()</code> in analyzer.py ·
+      Test ROC-AUC 0.967
+    </div>
+    """)
+
+    # ══════════════════════════════════════════════════════════════════════════
+    #  OUTPUT LIST — order must exactly match _build_outputs / _blank_outputs
+    # ══════════════════════════════════════════════════════════════════════════
+    ALL_OUTPUTS = [
+        status_box,            # 0
+        log_html_out,          # 1
+        left_panel_html,       # 2
+        misinfo_badge_html,    # 3
+        misinfo_reasoning_html,# 4
+        misinfo_gauge_plot,    # 5
+        stream_bars_plot,      # 6
+        donut_plot,            # 7
+        timeline_plot,         # 8
+        kw_bar_plot,           # 9
+        kw_comp_plot,          # 10
+        stat_pos_html,         # 11
+        stat_neg_html,         # 12
+        stat_neu_html,         # 13
+        df_all_out,            # 14
+        df_pos_out,            # 15
+        df_neg_out,            # 16
+        df_top_out,            # 17
+    ]
+
+    # ── Events: URL tab ───────────────────────────────────────────────────────
+    _pipeline_inputs = [url_input, api_key_input, sentiment_selector, max_comments_slider]
+
+    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, api_key_input],
+        outputs=[search_results_html, search_radio],
+    )
 
-        with tab_top:
-            top_df = display_df.sort_values("likes", ascending=False).head(20)
-            st.dataframe(top_df[show_cols], use_container_width=True, height=320)
+    search_radio.change(
+        fn=pick_and_analyze,
+        inputs=[search_radio, api_key_input, sentiment_selector, max_comments_slider],
+        outputs=ALL_OUTPUTS,
+    )
 
-    else:
-        st.info("No comments available for this video.")
+# ══════════════════════════════════════════════════════════════════════════════
+if __name__ == "__main__":
+    demo.launch(show_api=False)