Update app.py

app.py

@@ -1,17 +1,483 @@
 """
-app.py  —  Nuremberg Scholar HuggingFace Space entry point
-============================================================
-Thin wrapper that initialises the NurembergScholar pipeline
-and launches the Gradio UI. All logic lives in rag.py.
-
-This is the file referenced by `app_file: app.py` in the
-Space README YAML.
+app.py  —  Nuremberg Scholar UI (HuggingFace Spaces)
+======================================================
+Modern research assistant interface for the Nuremberg Trials corpus.
+Designed for Gradio >=5.9.0. Pipeline logic stays in rag.py.
 """
 
-from rag import NurembergScholar, build_gradio_app
+from rag import NurembergScholar, GROQ_MODEL
+import gradio as gr
+
+# ── Initialise pipeline ───────────────────────────────────────────────────────
 
 scholar = NurembergScholar()
-app = build_gradio_app(scholar)
 
-if __name__ == "__main__":
-    app.launch()
+# ── Theme — override Gradio defaults at the theme level ───────────────────────
+
+theme = gr.themes.Base(
+    primary_hue=gr.themes.colors.red,
+    secondary_hue=gr.themes.colors.gray,
+    neutral_hue=gr.themes.colors.gray,
+    font=[
+        gr.themes.GoogleFont("DM Sans"),
+        "system-ui",
+        "sans-serif",
+    ],
+    font_mono=[
+        gr.themes.GoogleFont("DM Mono"),
+        "Consolas",
+        "monospace",
+    ],
+    radius_size=gr.themes.sizes.radius_md,
+).set(
+    body_background_fill="#fafafa",
+    body_text_color="#1a1a1a",
+    block_background_fill="#ffffff",
+    block_border_width="1px",
+    block_border_color="#ebebeb",
+    block_radius="10px",
+    block_shadow="0 1px 3px rgba(0,0,0,0.04)",
+    input_background_fill="#ffffff",
+    input_border_color="#ddd",
+    input_border_width="1.5px",
+    input_radius="10px",
+    input_shadow="0 1px 2px rgba(0,0,0,0.03)",
+    button_primary_background_fill="#b5321f",
+    button_primary_background_fill_hover="#9a2a18",
+    button_primary_text_color="#ffffff",
+    button_primary_border_color="transparent",
+    button_primary_shadow="0 1px 3px rgba(0,0,0,0.1)",
+    button_border_width="0px",
+    button_large_radius="8px",
+    body_background_fill_dark="#0e0e0e",
+    body_text_color_dark="#e0e0e0",
+    block_background_fill_dark="#171717",
+    block_border_color_dark="#252525",
+    input_background_fill_dark="#171717",
+    input_border_color_dark="#333",
+    button_primary_background_fill_dark="#e05a4a",
+    button_primary_background_fill_hover_dark="#c94a3c",
+)
+
+# ── CSS — only what the theme can't handle ────────────────────────────────────
+# Uses #elem_id selectors (no !important needed) + class selectors for HTML
+
+CUSTOM_CSS = """
+/* ── Global ───────────────────────────────────────────── */
+.gradio-container {
+    max-width: 840px !important;
+    margin: 0 auto !important;
+}
+footer { display: none !important; }
+
+/* ── Hero ─────────────────────────────────────────────── */
+.ns-hero {
+    text-align: center;
+    padding: 2rem 1rem 0.5rem;
+}
+.ns-hero h1 {
+    font-size: 1.65rem;
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    margin: 0 0 0.3rem 0;
+}
+.ns-hero .ns-sub {
+    font-size: 0.92rem;
+    color: #666;
+    margin: 0 0 0.65rem 0;
+}
+.ns-hero .ns-meta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.28rem 0.7rem;
+    background: #f0f0f0;
+    border-radius: 100px;
+    font-size: 0.62rem;
+    font-family: var(--font-mono);
+    color: #999;
+    letter-spacing: 0.015em;
+}
+.ns-hero .ns-dot {
+    width: 3px; height: 3px;
+    background: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+}
+@media (prefers-color-scheme: dark) {
+    .ns-hero .ns-sub { color: #aaa; }
+    .ns-hero .ns-meta { background: #1e1e1e; color: #666; }
+    .ns-hero .ns-dot { background: #555; }
+}
+
+/* ── Query box ────────────────────────────────────────── */
+#ns-query textarea {
+    font-size: 0.95rem !important;
+    padding: 0.85rem 1rem !important;
+    line-height: 1.5 !important;
+}
+#ns-query textarea:focus {
+    border-color: #b5321f !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 0 0 3px rgba(181,50,31,0.06) !important;
+}
+#ns-query label { display: none !important; }
+
+/* ── Search row — input + button side by side ─────────── */
+#ns-search-row {
+    gap: 0.5rem !important;
+    align-items: stretch !important;
+    margin-bottom: 0.4rem !important;
+}
+#ns-search {
+    min-width: 90px !important;
+    max-width: 110px !important;
+    font-weight: 600;
+    height: auto !important;
+    border-radius: 10px !important;
+}
+
+/* ── Example chips — compact grid ─────────────────────── */
+#ns-examples {
+    margin-top: 0 !important;
+    margin-bottom: 0.5rem !important;
+}
+#ns-examples .gallery {
+    gap: 0.3rem !important;
+    padding: 0 !important;
+}
+#ns-examples button {
+    border-radius: 100px !important;
+    font-size: 0.74rem !important;
+    padding: 0.3rem 0.7rem !important;
+    border: 1px solid #e0e0e0 !important;
+    background: #fff !important;
+    color: #666 !important;
+    transition: all 0.15s ease !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    max-width: 340px !important;
+}
+#ns-examples button:hover {
+    border-color: rgba(181,50,31,0.25) !important;
+    background: rgba(181,50,31,0.04) !important;
+    color: #b5321f !important;
+}
+@media (prefers-color-scheme: dark) {
+    #ns-examples button {
+        border-color: #333 !important;
+        background: #1a1a1a !important;
+        color: #aaa !important;
+    }
+    #ns-examples button:hover {
+        border-color: rgba(224,90,74,0.3) !important;
+        background: rgba(224,90,74,0.08) !important;
+        color: #e05a4a !important;
+    }
+}
+
+/* ── Source cards (raw HTML) ───────────────────────────── */
+.ns-sources-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+    padding: 0.25rem 0;
+}
+.ns-src {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.3rem 0.6rem;
+    background: #f5f5f5;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    font-size: 0.76rem;
+    color: #555;
+    line-height: 1.35;
+    transition: all 0.12s ease;
+}
+.ns-src:hover {
+    border-color: rgba(181,50,31,0.2);
+    background: rgba(181,50,31,0.04);
+}
+.ns-sn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 17px; height: 17px;
+    background: #b5321f;
+    color: #fff;
+    border-radius: 4px;
+    font-size: 0.6rem;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+.ns-sm {
+    font-family: var(--font-mono);
+    font-size: 0.66rem;
+    color: #999;
+}
+@media (prefers-color-scheme: dark) {
+    .ns-src { background: #1e1e1e; border-color: #292929; color: #aaa; }
+    .ns-src:hover { border-color: rgba(224,90,74,0.25); background: rgba(224,90,74,0.06); }
+    .ns-sn { background: #e05a4a; }
+    .ns-sm { color: #666; }
+}
+
+/* ── Answer ───────────────────────────────────────────── */
+#ns-answer {
+    min-height: 50px;
+    padding: 1.2rem 1.3rem !important;
+}
+#ns-answer p, #ns-answer li {
+    font-size: 0.93rem !important;
+    line-height: 1.72 !important;
+}
+
+/* ── Citation panel ───────────────────────────────────── */
+#ns-cite {
+    background: #f7f7f7;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    padding: 0.75rem 1rem !important;
+}
+#ns-cite p {
+    font-size: 0.82rem !important;
+    color: #666 !important;
+    line-height: 1.5 !important;
+    margin: 0 !important;
+}
+#ns-cite code {
+    font-size: 0.72rem !important;
+    background: #efefef !important;
+    padding: 0.1rem 0.3rem !important;
+    border-radius: 3px !important;
+}
+#ns-cite strong { color: #333 !important; }
+@media (prefers-color-scheme: dark) {
+    #ns-cite { background: #1a1a1a; border-color: #252525; }
+    #ns-cite p { color: #999 !important; }
+    #ns-cite code { background: #222 !important; }
+    #ns-cite strong { color: #ccc !important; }
+}
+
+/* ── Source detail accordion ──────────────────────────── */
+#ns-detail .label-wrap {
+    font-size: 0.8rem !important;
+    color: #888 !important;
+}
+#ns-detail blockquote {
+    border-left: 2px solid rgba(181,50,31,0.2) !important;
+    background: rgba(181,50,31,0.03) !important;
+    padding: 0.45rem 0.8rem !important;
+    margin: 0.35rem 0 !important;
+    border-radius: 0 6px 6px 0 !important;
+}
+
+/* ── Footer ───────────────────────────────────────────── */
+.ns-footer {
+    text-align: center;
+    padding: 1.2rem 0 0.6rem;
+    margin-top: 0.75rem;
+    border-top: 1px solid #eee;
+}
+.ns-footer p {
+    font-family: var(--font-mono);
+    font-size: 0.64rem;
+    color: #999;
+    letter-spacing: 0.015em;
+    margin: 0;
+}
+.ns-footer a { color: #b5321f; text-decoration: none; }
+.ns-footer a:hover { text-decoration: underline; }
+@media (prefers-color-scheme: dark) {
+    .ns-footer { border-color: #222; }
+    .ns-footer p { color: #555; }
+    .ns-footer a { color: #e05a4a; }
+}
+
+/* ── Mobile ───────────────────────────────────────────── */
+@media (max-width: 640px) {
+    .ns-hero h1 { font-size: 1.3rem; }
+    .ns-hero .ns-meta { font-size: 0.56rem; }
+    #ns-answer { padding: 0.9rem 1rem !important; }
+}
+"""
+
+# ── Formatters ────────────────────────────────────────────────────────────────
+
+def _format_source_cards(results) -> str:
+    """Compact inline source chips shown above the answer."""
+    if not results:
+        return ""
+    cards = []
+    for i, r in enumerate(results, 1):
+        speaker = r.speaker or "—"
+        col = r.collection or ""
+        date = r.date_iso or ""
+        meta_parts = [p for p in [col, date] if p]
+        meta = " · ".join(meta_parts)
+        cards.append(
+            f'<span class="ns-src">'
+            f'<span class="ns-sn">{i}</span>'
+            f'<span>{speaker}</span>'
+            f'<span class="ns-sm">{meta}</span>'
+            f'</span>'
+        )
+    return f'<div class="ns-sources-wrap">{" ".join(cards)}</div>'
+
+
+def _format_sources_detail(results) -> str:
+    """Full passages for the expandable accordion."""
+    if not results:
+        return "No sources retrieved."
+    lines = []
+    for i, r in enumerate(results, 1):
+        rerank = f"{r.rerank_score:.4f}" if r.rerank_score is not None else "n/a"
+        lines.append(
+            f"**[{i}]** `{r.collection}` · {r.date_iso or '?'} · "
+            f"speaker: *{r.speaker or '—'}* · page {r.page_number or '?'} · "
+            f"rerank: `{rerank}`\n\n"
+            f"> {r.body[:400]}{'…' if len(r.body) > 400 else ''}"
+        )
+    return "\n\n---\n\n".join(lines)
+
+
+def _format_citation_report(report: dict, cache_hit: bool = False) -> str:
+    if not report:
+        return ""
+    ok = report.get("clean", False)
+    status = "✓ All citations verified" if ok else "⚠ Issues detected"
+    cache_label = "HIT" if cache_hit else "MISS"
+    lines = [
+        f"**{status}** · Groq `{GROQ_MODEL}` · Cache {cache_label}",
+    ]
+    if report.get("cited"):
+        lines.append(f"**Cited:** [{report['cited']}]")
+    if report.get("hallucinated"):
+        lines.append(f"**Hallucinated (stripped):** {report['hallucinated']}")
+    if report.get("uncited_sources"):
+        lines.append(f"**Unused sources:** [{report['uncited_sources']}]")
+    if report.get("uncited_sentences"):
+        lines.append(f"**Uncited claims:** {len(report['uncited_sentences'])}")
+    stats = scholar.cache_stats
+    lines.append(
+        f"**Cache:** {stats['size']} entries · "
+        f"{stats['hits']}/{stats['hits']+stats['misses']} hit rate "
+        f"({stats['hit_rate']:.0%})"
+    )
+    return "  \n".join(lines)
+
+# ── Query handler ─────────────────────────────────────────────────────────────
+
+def gradio_query(query: str):
+    if not query.strip():
+        return "", "Please enter a question.", "", ""
+    result = scholar.answer(query, top_k=5)
+    answer = result["answer"]
+    sources = result["sources"]
+    source_cards = _format_source_cards(sources)
+    source_detail = _format_sources_detail(sources)
+    citation_md = _format_citation_report(
+        result["citation_report"],
+        result.get("cache_hit", False),
+    )
+    return source_cards, answer, source_detail, citation_md
+
+# ── Build Gradio app ──────────────────────────────────────────────────────────
+
+with gr.Blocks(title="Nuremberg Scholar", theme=theme, css=CUSTOM_CSS) as app:
+
+    # Header
+    gr.HTML("""
+    <div class="ns-hero">
+        <h1>Nuremberg Scholar</h1>
+        <p class="ns-sub">Research assistant for the International Military Tribunal, 1945–1946</p>
+        <div class="ns-meta">
+            <span>46,325 passages</span>
+            <span class="ns-dot"></span>
+            <span>BGE-M3 hybrid retrieval</span>
+            <span class="ns-dot"></span>
+            <span>Llama-3.1-8B via Groq</span>
+        </div>
+    </div>
+    """)
+
+    # Search input + button in one row
+    with gr.Row(elem_id="ns-search-row"):
+        query_box = gr.Textbox(
+            placeholder="Ask about the Nuremberg Trials — e.g. What did Speer claim about slave labour?",
+            lines=1,
+            show_label=False,
+            elem_id="ns-query",
+            scale=6,
+        )
+        submit_btn = gr.Button(
+            "Search",
+            variant="primary",
+            size="lg",
+            elem_id="ns-search",
+            scale=1,
+        )
+
+    # Example chips — trimmed to 4 for compactness
+    gr.Examples(
+        examples=[
+            ["What did Goering say in his defense about the Luftwaffe?"],
+            ["How did the Tribunal define crimes against humanity?"],
+            ["What evidence was presented about the Final Solution?"],
+            ["How were the defendants sentenced on 1 October 1946?"],
+        ],
+        inputs=[query_box],
+        label="",
+        examples_per_page=4,
+        elem_id="ns-examples",
+    )
+
+    # Source cards (inline, visible)
+    source_cards_html = gr.HTML(value="", elem_id="ns-sources")
+
+    # Answer
+    answer_box = gr.Markdown(
+        label="Answer",
+        elem_id="ns-answer",
+        show_label=False,
+    )
+
+    # Citation verification (visible by default)
+    citation_box = gr.Markdown(elem_id="ns-cite")
+
+    # Full sources (accordion — only long content hidden)
+    with gr.Accordion("View full source passages", open=False, elem_id="ns-detail"):
+        sources_detail_box = gr.Markdown()
+
+    # Footer
+    gr.HTML("""
+    <div class="ns-footer">
+        <p>
+            Source: <a href="https://avalon.law.yale.edu/subject_menus/imt.asp" target="_blank">Yale Avalon Project</a>
+            ·
+            Dataset: <a href="https://huggingface.co/datasets/dtufail/nuremberg-trials-corpus" target="_blank">dtufail/nuremberg-trials-corpus</a>
+            ·
+            CC BY 4.0
+        </p>
+    </div>
+    """)
+
+    # Events
+    outputs = [source_cards_html, answer_box, sources_detail_box, citation_box]
+
+    submit_btn.click(
+        fn=gradio_query,
+        inputs=[query_box],
+        outputs=outputs,
+    )
+    query_box.submit(
+        fn=gradio_query,
+        inputs=[query_box],
+        outputs=outputs,
+    )
+
+# ── Launch ────────────────────────────────────────────────────────────────────
+
+app.launch(share=True)