Spaces:
Runtime error
Runtime error
| """ | |
| app.py — BERTopic Agentic Thematic Analysis — Gradio UI | |
| THEMIS: Thematic Engine for Mining and Identifying Scholarly Topics | |
| Implements Braun & Clarke (2006) 6-Phase Framework | |
| """ | |
| import gradio as gr | |
| import json | |
| import os | |
| import pandas as pd | |
| from agent import invoke_agent, reset_agent | |
| CHECKPOINT_DIR = "checkpoints" | |
| os.makedirs(CHECKPOINT_DIR, exist_ok=True) | |
| # ── Phase Checkpoint Detection ───────────────────────────────────────────────── | |
| def get_phase_status(): | |
| files = { | |
| "summaries.json": False, | |
| "labels.json": False, | |
| "themes.json": False, | |
| "taxonomy_map.json": False, | |
| "comparison.csv": False, | |
| "narrative.txt": False, | |
| } | |
| for fname in files: | |
| files[fname] = os.path.exists(os.path.join(CHECKPOINT_DIR, fname)) | |
| return files | |
| def render_phase_bar(): | |
| status = get_phase_status() | |
| phases = [ | |
| ("①", "Load", status["summaries.json"]), | |
| ("②", "Codes", status["labels.json"]), | |
| ("③", "Themes", status["themes.json"]), | |
| ("④⑤", "Review & Name", status["themes.json"]), | |
| ("⑤½", "PAJAIS Map", status["taxonomy_map.json"]), | |
| ("⑥", "Report", status["comparison.csv"] and status["narrative.txt"]), | |
| ] | |
| items = "" | |
| for num, name, done in phases: | |
| icon = "✅" if done else "⬜" | |
| cls = "phase-done" if done else "phase-pending" | |
| items += f'<div class="phase-item {cls}"><span class="phase-num">{num}</span><span class="phase-name">{icon} {name}</span></div>' | |
| return f'<div class="phase-bar">{items}</div>' | |
| # ── Review Table Loader ──────────────────────────────────────────────────────── | |
| def load_review_table(): | |
| """Load highest-priority checkpoint for the review table.""" | |
| checkpoint_priority = [ | |
| ("taxonomy_map.json", "themes"), | |
| ("themes.json", "themes"), | |
| ("labels.json", "topics"), | |
| ("summaries.json", "topics"), | |
| ] | |
| for fname, key in checkpoint_priority: | |
| fpath = os.path.join(CHECKPOINT_DIR, fname) | |
| if os.path.exists(fpath): | |
| with open(fpath) as f: | |
| data = json.load(f) | |
| items = data.get(key, []) | |
| if not items: | |
| continue | |
| rows = [] | |
| for item in items: | |
| is_taxonomy = fname == "taxonomy_map.json" | |
| top_evidence = item.get("top_sentences", [""])[0] if item.get("top_sentences") else "" | |
| rows.append({ | |
| "ID": item.get("topic_id", item.get("theme_name", "")), | |
| "Label / Theme": item.get("label") or item.get("theme_name", ""), | |
| "Category": item.get("category") or item.get("pajais_match", ""), | |
| "Sentences": item.get("count") or item.get("sentence_count", 0), | |
| "Confidence": round(float(item.get("confidence") or item.get("match_confidence", 0)), 2), | |
| "Top Evidence": top_evidence[:120] + "..." if len(top_evidence) > 120 else top_evidence, | |
| "Approve": item.get("approve", ""), | |
| "Rename To": item.get("rename_to", ""), | |
| "Reasoning": item.get("user_reasoning", ""), | |
| }) | |
| return pd.DataFrame(rows) | |
| return pd.DataFrame(columns=["ID", "Label / Theme", "Category", "Sentences", | |
| "Confidence", "Top Evidence", "Approve", "Rename To", "Reasoning"]) | |
| # ── Charts Loader ────────────────────────────────────────────────────────────── | |
| def get_chart_options(): | |
| options = [] | |
| for run_key in ["abstract", "title"]: | |
| fpath = os.path.join(CHECKPOINT_DIR, f"{run_key}_charts.json") | |
| if os.path.exists(fpath): | |
| options.extend([ | |
| f"{run_key.title()} — Intertopic Map", | |
| f"{run_key.title()} — Topic Sizes", | |
| f"{run_key.title()} — Similarity Heatmap", | |
| f"{run_key.title()} — Size Distribution", | |
| ]) | |
| return options if options else ["No charts yet — run analysis first"] | |
| def load_chart(selection: str) -> str: | |
| if not selection or "No charts" in selection: | |
| return "<p style='color:#888; text-align:center; padding:40px'>Run analysis to generate charts</p>" | |
| parts = selection.lower().split(" — ") | |
| if len(parts) < 2: | |
| return "" | |
| run_key = parts[0].strip() | |
| chart_key_map = { | |
| "intertopic map": "intertopic", | |
| "topic sizes": "bars", | |
| "similarity heatmap": "heatmap", | |
| "size distribution": "distribution", | |
| } | |
| chart_key = chart_key_map.get(parts[1].strip(), "intertopic") | |
| fpath = os.path.join(CHECKPOINT_DIR, f"{run_key}_charts.json") | |
| if not os.path.exists(fpath): | |
| return f"<p style='color:#888'>No charts for {run_key} run yet.</p>" | |
| with open(fpath) as f: | |
| charts = json.load(f) | |
| html = charts.get(chart_key, "<p>Chart not found</p>") | |
| return f'<div style="width:100%;overflow:auto">{html}</div>' | |
| # ── Download Links ───────────────────────────────────────────────────────────── | |
| def render_download_links(): | |
| downloads = [ | |
| ("summaries.json", "① Load Summary", "phase-1"), | |
| ("labels.json", "② Topic Labels", "phase-2"), | |
| ("themes.json", "③ Consolidated Themes", "phase-3"), | |
| ("taxonomy_map.json", "⑤½ PAJAIS Taxonomy Map", "phase-5"), | |
| ("comparison.csv", "⑥ Abstract vs Title Comparison", "phase-6"), | |
| ("narrative.txt", "⑥ Section 7 Narrative", "phase-6"), | |
| ] | |
| html = '<div class="download-grid">' | |
| for fname, label, phase_cls in downloads: | |
| fpath = os.path.join(CHECKPOINT_DIR, fname) | |
| if os.path.exists(fpath): | |
| size = os.path.getsize(fpath) | |
| size_str = f"{size/1024:.1f} KB" if size > 1024 else f"{size} B" | |
| html += f''' | |
| <div class="download-card available"> | |
| <div class="dl-icon">📄</div> | |
| <div class="dl-info"> | |
| <div class="dl-label">{label}</div> | |
| <div class="dl-meta">{fname} · {size_str}</div> | |
| </div> | |
| <a href="/file={fpath}" class="dl-btn" download="{fname}">↓ Download</a> | |
| </div>''' | |
| else: | |
| html += f''' | |
| <div class="download-card pending"> | |
| <div class="dl-icon">⏳</div> | |
| <div class="dl-info"> | |
| <div class="dl-label">{label}</div> | |
| <div class="dl-meta">{fname} · not yet generated</div> | |
| </div> | |
| <span class="dl-btn-disabled">Pending</span> | |
| </div>''' | |
| html += '</div>' | |
| return html | |
| # ── Submit Review Handler ────────────────────────────────────────────────────── | |
| def submit_review(table_data: pd.DataFrame, chat_history: list): | |
| """Convert table decisions to agent message and send.""" | |
| if table_data is None or len(table_data) == 0: | |
| return chat_history, chat_history | |
| # Serialize table decisions | |
| decisions = [] | |
| for _, row in table_data.iterrows(): | |
| approve = str(row.get("Approve", "")).strip().upper() | |
| if approve: | |
| decisions.append( | |
| f"- {row.get('Label / Theme', row.get('ID', ''))}: " | |
| f"Approve={approve}, Rename To={row.get('Rename To', '')}, " | |
| f"Reasoning={row.get('Reasoning', '')}" | |
| ) | |
| if not decisions: | |
| msg = "Researcher submitted review table with no changes — all topics accepted as-is." | |
| else: | |
| msg = "Researcher submitted review table:\n" + "\n".join(decisions) | |
| # Send to agent | |
| response = invoke_agent(msg, chat_history) | |
| chat_history = chat_history + [["📋 [Review Table Submitted]", response]] | |
| return chat_history, chat_history | |
| # ── CSS ──────────────────────────────────────────────────────────────────────── | |
| CUSTOM_CSS = """ | |
| @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&family=Inter:wght@300;400;500&display=swap'); | |
| :root { | |
| --bg-deep: #09090f; | |
| --bg-panel: #0f0f1a; | |
| --bg-card: #141422; | |
| --bg-hover: #1a1a2e; | |
| --border: rgba(108, 82, 255, 0.18); | |
| --border-glow: rgba(108, 82, 255, 0.45); | |
| --accent: #6c52ff; | |
| --accent-2: #c084fc; | |
| --accent-3: #38bdf8; | |
| --accent-ok: #4ade80; | |
| --accent-warn: #facc15; | |
| --text-primary: #f0eeff; | |
| --text-secondary: #9b8fd4; | |
| --text-muted: #5a5380; | |
| --font-display: 'Syne', sans-serif; | |
| --font-body: 'Inter', sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| --radius: 12px; | |
| --glow: 0 0 40px rgba(108, 82, 255, 0.15); | |
| --glow-lg: 0 0 80px rgba(108, 82, 255, 0.2); | |
| } | |
| /* ── Base ── */ | |
| *, *::before, *::after { box-sizing: border-box; } | |
| body, .gradio-container { | |
| background: var(--bg-deep) !important; | |
| color: var(--text-primary) !important; | |
| font-family: var(--font-body) !important; | |
| } | |
| .gradio-container { | |
| max-width: 1400px !important; | |
| margin: 0 auto !important; | |
| padding: 0 !important; | |
| } | |
| /* ── App Header ── */ | |
| .app-header { | |
| background: linear-gradient(135deg, #0d0d1f 0%, #110f2a 50%, #0d0d1f 100%); | |
| border-bottom: 1px solid var(--border); | |
| padding: 28px 40px 22px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .app-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: -60px; right: -60px; | |
| width: 300px; height: 300px; | |
| background: radial-gradient(circle, rgba(108,82,255,0.12) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .app-header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -40px; left: 10%; | |
| width: 200px; height: 200px; | |
| background: radial-gradient(circle, rgba(192,132,252,0.08) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .header-logo { | |
| font-family: var(--font-display); | |
| font-size: 32px; | |
| font-weight: 800; | |
| letter-spacing: -1px; | |
| background: linear-gradient(135deg, #a78bfa, #6c52ff, #38bdf8); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| line-height: 1; | |
| margin-bottom: 4px; | |
| } | |
| .header-subtitle { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| } | |
| .header-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(108,82,255,0.12); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 4px 12px; | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: var(--accent-2); | |
| margin-top: 8px; | |
| } | |
| /* ── Phase Progress Bar ── */ | |
| .phase-bar { | |
| display: flex; | |
| gap: 0; | |
| background: var(--bg-panel); | |
| border-bottom: 1px solid var(--border); | |
| padding: 0; | |
| overflow-x: auto; | |
| } | |
| .phase-item { | |
| flex: 1; | |
| min-width: 100px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 10px 8px; | |
| border-right: 1px solid var(--border); | |
| transition: background 0.2s; | |
| position: relative; | |
| } | |
| .phase-item:last-child { border-right: none; } | |
| .phase-num { | |
| font-family: var(--font-display); | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| line-height: 1; | |
| } | |
| .phase-name { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| margin-top: 3px; | |
| text-align: center; | |
| letter-spacing: 0.5px; | |
| } | |
| .phase-done { | |
| background: rgba(108,82,255,0.08); | |
| } | |
| .phase-done .phase-num { color: var(--accent-2); } | |
| .phase-done .phase-name { color: var(--accent-ok); } | |
| .phase-done::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-2)); | |
| } | |
| /* ── Section containers ── */ | |
| .section-block { | |
| background: var(--bg-panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| margin: 16px; | |
| overflow: hidden; | |
| box-shadow: var(--glow); | |
| } | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 14px 20px; | |
| background: linear-gradient(90deg, rgba(108,82,255,0.08), transparent); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .section-num { | |
| width: 28px; height: 28px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| border-radius: 8px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-family: var(--font-display); | |
| font-size: 13px; | |
| font-weight: 700; | |
| color: white; | |
| flex-shrink: 0; | |
| } | |
| .section-title { | |
| font-family: var(--font-display); | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| letter-spacing: 0.3px; | |
| } | |
| .section-desc { | |
| font-family: var(--font-body); | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| margin-left: auto; | |
| } | |
| /* ── File upload ── */ | |
| .upload-zone { | |
| border: 2px dashed var(--border) !important; | |
| border-radius: var(--radius) !important; | |
| background: rgba(108,82,255,0.03) !important; | |
| transition: all 0.3s !important; | |
| margin: 16px !important; | |
| } | |
| .upload-zone:hover { | |
| border-color: var(--border-glow) !important; | |
| background: rgba(108,82,255,0.07) !important; | |
| } | |
| /* ── Chat ── */ | |
| .chat-wrap { padding: 0 16px 16px; } | |
| .gradio-chatbot { | |
| background: var(--bg-card) !important; | |
| border: 1px solid var(--border) !important; | |
| border-radius: var(--radius) !important; | |
| font-family: var(--font-body) !important; | |
| font-size: 14px !important; | |
| min-height: 380px !important; | |
| } | |
| .gradio-chatbot .message.user { | |
| background: linear-gradient(135deg, rgba(108,82,255,0.25), rgba(192,132,252,0.15)) !important; | |
| border: 1px solid rgba(108,82,255,0.3) !important; | |
| border-radius: 12px 12px 2px 12px !important; | |
| color: var(--text-primary) !important; | |
| font-family: var(--font-body) !important; | |
| } | |
| .gradio-chatbot .message.bot { | |
| background: var(--bg-hover) !important; | |
| border: 1px solid var(--border) !important; | |
| border-radius: 12px 12px 12px 2px !important; | |
| color: var(--text-primary) !important; | |
| font-family: var(--font-body) !important; | |
| } | |
| /* Textbox */ | |
| .msg-input textarea { | |
| background: var(--bg-card) !important; | |
| border: 1px solid var(--border) !important; | |
| border-radius: 10px !important; | |
| color: var(--text-primary) !important; | |
| font-family: var(--font-body) !important; | |
| font-size: 14px !important; | |
| padding: 12px 16px !important; | |
| transition: border-color 0.2s !important; | |
| } | |
| .msg-input textarea:focus { | |
| border-color: var(--border-glow) !important; | |
| box-shadow: 0 0 0 3px rgba(108,82,255,0.1) !important; | |
| outline: none !important; | |
| } | |
| .msg-input textarea::placeholder { color: var(--text-muted) !important; } | |
| /* ── Buttons ── */ | |
| .btn-send, .btn-review, .btn-reset { | |
| border-radius: 10px !important; | |
| font-family: var(--font-display) !important; | |
| font-weight: 600 !important; | |
| font-size: 14px !important; | |
| letter-spacing: 0.3px !important; | |
| transition: all 0.2s !important; | |
| border: none !important; | |
| cursor: pointer !important; | |
| } | |
| .btn-send { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; | |
| color: white !important; | |
| padding: 12px 24px !important; | |
| box-shadow: 0 4px 20px rgba(108,82,255,0.35) !important; | |
| } | |
| .btn-send:hover { | |
| transform: translateY(-1px) !important; | |
| box-shadow: 0 6px 28px rgba(108,82,255,0.5) !important; | |
| } | |
| .btn-review { | |
| background: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(74,222,128,0.08)) !important; | |
| color: var(--accent-ok) !important; | |
| border: 1px solid rgba(74,222,128,0.3) !important; | |
| padding: 12px 24px !important; | |
| } | |
| .btn-review:hover { | |
| background: rgba(74,222,128,0.2) !important; | |
| border-color: rgba(74,222,128,0.5) !important; | |
| transform: translateY(-1px) !important; | |
| } | |
| .btn-reset { | |
| background: transparent !important; | |
| color: var(--text-muted) !important; | |
| border: 1px solid var(--border) !important; | |
| padding: 10px 18px !important; | |
| font-size: 12px !important; | |
| } | |
| .btn-reset:hover { | |
| color: var(--text-secondary) !important; | |
| border-color: var(--border-glow) !important; | |
| } | |
| /* ── Tabs ── */ | |
| .gradio-tabs .tab-nav { | |
| background: var(--bg-panel) !important; | |
| border-bottom: 1px solid var(--border) !important; | |
| padding: 0 8px !important; | |
| gap: 4px !important; | |
| } | |
| .gradio-tabs .tab-nav button { | |
| font-family: var(--font-display) !important; | |
| font-size: 13px !important; | |
| font-weight: 600 !important; | |
| color: var(--text-muted) !important; | |
| background: transparent !important; | |
| border: none !important; | |
| border-bottom: 2px solid transparent !important; | |
| padding: 12px 20px !important; | |
| border-radius: 0 !important; | |
| transition: all 0.2s !important; | |
| } | |
| .gradio-tabs .tab-nav button.selected { | |
| color: var(--accent-2) !important; | |
| border-bottom-color: var(--accent) !important; | |
| } | |
| .gradio-tabs .tab-nav button:hover:not(.selected) { | |
| color: var(--text-secondary) !important; | |
| } | |
| /* ── Dataframe / Table ── */ | |
| .gradio-dataframe { | |
| background: var(--bg-card) !important; | |
| border: 1px solid var(--border) !important; | |
| border-radius: var(--radius) !important; | |
| overflow: hidden !important; | |
| } | |
| .gradio-dataframe table { | |
| font-family: var(--font-mono) !important; | |
| font-size: 12px !important; | |
| } | |
| .gradio-dataframe thead th { | |
| background: linear-gradient(90deg, rgba(108,82,255,0.15), rgba(108,82,255,0.05)) !important; | |
| color: var(--accent-2) !important; | |
| font-family: var(--font-display) !important; | |
| font-size: 11px !important; | |
| font-weight: 700 !important; | |
| letter-spacing: 0.8px !important; | |
| text-transform: uppercase !important; | |
| padding: 10px 14px !important; | |
| border-bottom: 1px solid var(--border) !important; | |
| } | |
| .gradio-dataframe tbody tr { | |
| border-bottom: 1px solid rgba(108,82,255,0.07) !important; | |
| transition: background 0.15s !important; | |
| } | |
| .gradio-dataframe tbody tr:hover { | |
| background: var(--bg-hover) !important; | |
| } | |
| .gradio-dataframe tbody td { | |
| color: var(--text-primary) !important; | |
| padding: 9px 14px !important; | |
| } | |
| /* ── Dropdown ── */ | |
| .gradio-dropdown { | |
| background: var(--bg-card) !important; | |
| border: 1px solid var(--border) !important; | |
| border-radius: 10px !important; | |
| } | |
| .gradio-dropdown select, .gradio-dropdown input { | |
| background: var(--bg-card) !important; | |
| color: var(--text-primary) !important; | |
| font-family: var(--font-body) !important; | |
| border: none !important; | |
| } | |
| /* ── HTML outputs ── */ | |
| .phase-bar-wrap { background: transparent; } | |
| /* ── Download cards ── */ | |
| .download-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| padding: 16px; | |
| } | |
| .download-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 14px 16px; | |
| border-radius: 10px; | |
| border: 1px solid var(--border); | |
| background: var(--bg-card); | |
| transition: all 0.2s; | |
| } | |
| .download-card.available { | |
| border-color: rgba(74,222,128,0.2); | |
| background: rgba(74,222,128,0.04); | |
| } | |
| .download-card.available:hover { | |
| border-color: rgba(74,222,128,0.4); | |
| background: rgba(74,222,128,0.08); | |
| transform: translateY(-1px); | |
| } | |
| .download-card.pending { opacity: 0.5; } | |
| .dl-icon { font-size: 20px; flex-shrink: 0; } | |
| .dl-info { flex: 1; min-width: 0; } | |
| .dl-label { | |
| font-family: var(--font-display); | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .dl-meta { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| margin-top: 2px; | |
| } | |
| .dl-btn { | |
| background: linear-gradient(135deg, rgba(74,222,128,0.2), rgba(74,222,128,0.1)); | |
| color: var(--accent-ok); | |
| border: 1px solid rgba(74,222,128,0.3); | |
| border-radius: 7px; | |
| padding: 6px 14px; | |
| font-family: var(--font-display); | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| transition: all 0.2s; | |
| flex-shrink: 0; | |
| } | |
| .dl-btn:hover { | |
| background: rgba(74,222,128,0.3); | |
| border-color: rgba(74,222,128,0.5); | |
| } | |
| .dl-btn-disabled { | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| flex-shrink: 0; | |
| padding: 6px 14px; | |
| border: 1px solid var(--border); | |
| border-radius: 7px; | |
| } | |
| /* ── Status indicators ── */ | |
| .status-dot { | |
| width: 7px; height: 7px; | |
| border-radius: 50%; | |
| background: var(--accent-ok); | |
| display: inline-block; | |
| box-shadow: 0 0 8px var(--accent-ok); | |
| animation: pulse-dot 2s ease-in-out infinite; | |
| margin-right: 6px; | |
| } | |
| @keyframes pulse-dot { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.6; transform: scale(0.85); } | |
| } | |
| /* ── Scrollbars ── */ | |
| ::-webkit-scrollbar { width: 5px; height: 5px; } | |
| ::-webkit-scrollbar-track { background: var(--bg-deep); } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--border-glow); } | |
| /* ── Responsive ── */ | |
| @media (max-width: 768px) { | |
| .download-grid { grid-template-columns: 1fr; } | |
| .app-header { padding: 20px; } | |
| .section-block { margin: 10px; } | |
| } | |
| """ | |
| # ── Header HTML ──────────────────────────────────────────────────────────────── | |
| HEADER_HTML = """ | |
| <div class="app-header"> | |
| <div style="display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px"> | |
| <div> | |
| <div class="header-logo">THEMIS</div> | |
| <div class="header-subtitle">Thematic Engine for Mining & Identifying Scholarly Topics</div> | |
| <div class="header-badge"> | |
| <span class="status-dot"></span> | |
| Braun & Clarke (2006) · BERTopic · PAJAIS Taxonomy · Mistral LLM | |
| </div> | |
| </div> | |
| <div style="text-align:right"> | |
| <div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#5a5380; line-height:1.8"> | |
| <div>EMBEDDING · all-MiniLM-L6-v2 · 384d</div> | |
| <div>CLUSTERING · AgglomerativeClustering · cosine</div> | |
| <div>THRESHOLD · 0.7 → ~100 topics</div> | |
| <div>TAXONOMY · PAJAIS · 25 categories</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| """ | |
| # ── Section header helper ────────────────────────────────────────────────────── | |
| def section_header(num: str, title: str, desc: str = "") -> str: | |
| return f""" | |
| <div class="section-header"> | |
| <div class="section-num">{num}</div> | |
| <div class="section-title">{title}</div> | |
| {"<div class='section-desc'>" + desc + "</div>" if desc else ""} | |
| </div> | |
| """ | |
| # ── Build Gradio app ─────────────────────────────────────────────────────────── | |
| with gr.Blocks( | |
| css=CUSTOM_CSS, | |
| title="THEMIS — BERTopic Thematic Analysis", | |
| theme=gr.themes.Base( | |
| primary_hue="violet", | |
| neutral_hue="slate", | |
| font=[gr.themes.GoogleFont("Inter"), "sans-serif"], | |
| ), | |
| ) as demo: | |
| # ── App Header ────────────────────────────────────────────────────────────── | |
| gr.HTML(HEADER_HTML) | |
| # ── Phase Progress Bar ────────────────────────────────────────────────────── | |
| with gr.Row(): | |
| phase_bar = gr.HTML(render_phase_bar(), elem_classes=["phase-bar-wrap"]) | |
| # ── Section ①: Data Input ────────────────────────────────────────────────── | |
| with gr.Group(elem_classes=["section-block"]): | |
| gr.HTML(section_header("①", "Data Input", "Upload your Scopus CSV export")) | |
| with gr.Row(): | |
| with gr.Column(scale=3): | |
| file_input = gr.File( | |
| label="Scopus CSV Export", | |
| file_types=[".csv"], | |
| elem_classes=["upload-zone"], | |
| ) | |
| with gr.Column(scale=2): | |
| gr.HTML(""" | |
| <div style="padding:16px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#5a5380; line-height:2"> | |
| <div style="color:#9b8fd4; font-weight:600; margin-bottom:8px">Required CSV columns:</div> | |
| <div>· Authors</div> | |
| <div>· Title</div> | |
| <div>· Abstract</div> | |
| <div>· Author Keywords</div> | |
| <div>· Cited by</div> | |
| <div>· Source title</div> | |
| <div>· Year</div> | |
| </div> | |
| """) | |
| # ── Section ②: Agent Chat ────────────────────────────────────────────────── | |
| with gr.Group(elem_classes=["section-block"]): | |
| gr.HTML(section_header("②", "THEMIS Agent", "6-phase Braun & Clarke analysis pipeline")) | |
| with gr.Column(elem_classes=["chat-wrap"]): | |
| chatbot = gr.Chatbot( | |
| label="", | |
| height=420, | |
| show_label=False, | |
| elem_classes=["gradio-chatbot"], | |
| ) | |
| with gr.Row(): | |
| msg_input = gr.Textbox( | |
| placeholder="Type a message... (e.g. 'run abstract', 'run title', or ask a question)", | |
| show_label=False, | |
| scale=5, | |
| elem_classes=["msg-input"], | |
| container=False, | |
| ) | |
| send_btn = gr.Button("Send ↗", scale=1, elem_classes=["btn-send"]) | |
| with gr.Row(): | |
| reset_btn = gr.Button("⟳ Reset Session", elem_classes=["btn-reset"], scale=1) | |
| gr.HTML('<div style="flex:4"></div>') | |
| # ── Section ③: Results ───────────────────────────────────────────────────── | |
| with gr.Group(elem_classes=["section-block"]): | |
| gr.HTML(section_header("③", "Results", "Review table · Charts · Downloads")) | |
| with gr.Tabs(): | |
| # Tab A: Review Table | |
| with gr.Tab("📋 Review Table"): | |
| review_table = gr.Dataframe( | |
| value=load_review_table(), | |
| interactive=True, | |
| wrap=False, | |
| height=400, | |
| elem_classes=["gradio-dataframe"], | |
| column_widths=["60px","160px","120px","80px","80px","200px","80px","120px","160px"], | |
| ) | |
| with gr.Row(): | |
| refresh_table_btn = gr.Button("↻ Refresh Table", elem_classes=["btn-reset"], scale=1) | |
| submit_review_btn = gr.Button("✓ Submit Review →", elem_classes=["btn-review"], scale=2) | |
| gr.HTML('<div style="flex:3"></div>') | |
| # Tab B: Charts | |
| with gr.Tab("📊 Charts"): | |
| with gr.Row(): | |
| chart_dropdown = gr.Dropdown( | |
| choices=get_chart_options(), | |
| label="Select Chart", | |
| value=None, | |
| scale=2, | |
| ) | |
| refresh_charts_btn = gr.Button("↻ Refresh", elem_classes=["btn-reset"], scale=1) | |
| chart_output = gr.HTML( | |
| '<div style="text-align:center;color:#5a5380;padding:60px;font-family:\'JetBrains Mono\',monospace;font-size:12px">' | |
| 'Run analysis to generate interactive charts</div>' | |
| ) | |
| # Tab C: Downloads | |
| with gr.Tab("⬇ Downloads"): | |
| download_html = gr.HTML(render_download_links()) | |
| refresh_dl_btn = gr.Button("↻ Refresh Downloads", elem_classes=["btn-reset"]) | |
| # ── Event Handlers ────────────────────────────────────────────────────────── | |
| # Send message | |
| def handle_send(message: str, history: list): | |
| if not message.strip(): | |
| return history, "", load_review_table(), render_phase_bar() | |
| response = invoke_agent(message, history) | |
| history = history + [[message, response]] | |
| return history, "", load_review_table(), render_phase_bar() | |
| send_btn.click( | |
| fn=handle_send, | |
| inputs=[msg_input, chatbot], | |
| outputs=[chatbot, msg_input, review_table, phase_bar], | |
| ) | |
| msg_input.submit( | |
| fn=handle_send, | |
| inputs=[msg_input, chatbot], | |
| outputs=[chatbot, msg_input, review_table, phase_bar], | |
| ) | |
| # CSV upload — auto-trigger agent | |
| def handle_upload(file, history: list): | |
| if file is None: | |
| return history, load_review_table(), render_phase_bar() | |
| response = invoke_agent(f"Analyze my Scopus CSV: {file.name}", history) | |
| history = history + [[f"📂 Uploaded CSV: {os.path.basename(file.name)}", response]] | |
| return history, load_review_table(), render_phase_bar() | |
| file_input.change( | |
| fn=handle_upload, | |
| inputs=[file_input, chatbot], | |
| outputs=[chatbot, review_table, phase_bar], | |
| ) | |
| # Submit review | |
| def handle_submit_review(table_data, history): | |
| new_history, _ = submit_review(table_data, history) | |
| return new_history, load_review_table(), render_phase_bar() | |
| submit_review_btn.click( | |
| fn=handle_submit_review, | |
| inputs=[review_table, chatbot], | |
| outputs=[chatbot, review_table, phase_bar], | |
| ) | |
| # Refresh table | |
| refresh_table_btn.click( | |
| fn=lambda: (load_review_table(), render_phase_bar()), | |
| outputs=[review_table, phase_bar], | |
| ) | |
| # Chart dropdown | |
| chart_dropdown.change( | |
| fn=load_chart, | |
| inputs=[chart_dropdown], | |
| outputs=[chart_output], | |
| ) | |
| # Refresh charts | |
| def refresh_charts(): | |
| opts = get_chart_options() | |
| return gr.update(choices=opts, value=opts[0] if opts else None) | |
| refresh_charts_btn.click(fn=refresh_charts, outputs=[chart_dropdown]) | |
| # Downloads refresh | |
| refresh_dl_btn.click(fn=render_download_links, outputs=[download_html]) | |
| # Reset | |
| def handle_reset(): | |
| msg = reset_agent() | |
| return [], render_phase_bar() | |
| reset_btn.click( | |
| fn=handle_reset, | |
| outputs=[chatbot, phase_bar], | |
| ) | |
| # ── Launch ────────────────────────────────────────────────────────────────────── | |
| if __name__ == "__main__": | |
| demo.launch( | |
| server_name="0.0.0.0", | |
| server_port=7860, | |
| show_error=True, | |
| ) |