Sync from GitHub 468b7a2

app.py

@@ -12,9 +12,10 @@ the pre-indexed library and answers questions):
            retrieval is dense cosine over chunks with parent-page lookup.
 
 Both hand the retrieved page images to MiniCPM-V for the grounded answer,
-in one ZeroGPU call per question. The UI is a side-by-side comparison: one
-manual, one question, and each approach answers in its own column (its own
-GPU call) so retrieval quality and latency can be compared directly.
+in one ZeroGPU call per question. The UI is a two-panel assistant: a chat on
+the left, and on the right a viewer of the source PDF with a strip of the
+pages the answer was grounded in. Which approach answers (and how many pages
+it retrieves, k) is chosen in the settings modal.
 
 Module layout:
   models/colembed.py        ColEmbed       — visual: page embeddings + MaxSim
@@ -36,6 +37,7 @@ from huggingface_hub import snapshot_download
 from core.constants import (
     DEFAULT_TOP_K,
     LIBRARY_DATASET_ID,
+    MAX_TOP_K,
     PARSED_SUBDIR,
     PREINDEXED_DIR,
     VISUAL_SUBDIR,
@@ -111,124 +113,256 @@ def refresh_library(doc_id):
     return gr.update(choices=choices, value=doc_id if doc_id in ids else None)
 
 
-def _ask(method: str, question, doc_id):
-    """One approach's column: (timing line, answer markdown, gallery).
-    Soft in-column messages instead of gr.Error so that when both columns run
-    off one click, one failing doesn't kill the other."""
-    if not doc_id:
-        return "", "*Pick a manual first.*", []
-    store, pipeline = LIBRARIES[method]
-    if not store.exists(doc_id):
-        return "", f"*This manual isn't indexed with the {method} approach yet.*", []
-    start = time.monotonic()
-    try:
-        answer, gallery = pipeline.run(store, question, [doc_id], DEFAULT_TOP_K)
-    except ValueError as e:
-        return "", f"*{e}*", []
-    return f"⏱️ answered in {time.monotonic() - start:.1f}s", answer, gallery
+# Labels for the approach picker: value -> (label, one-line description).
+APPROACHES = {
+    "visual": "🖼️ Visual — ColEmbed late interaction (pages stay images)",
+    "parsed": "📄 Parsed — dense chunks over parsed text + figure/table descriptions",
+}
 
+EMPTY_PDF = (
+    "<div class='pdf-empty'>📄<br>The cited manual page will appear here "
+    "once you ask a question.</div>"
+)
 
-def ask_visual(question, doc_id):
-    return _ask("visual", question, doc_id)
 
+def _pdf_path(doc_id: str) -> str | None:
+    """The source PDF for a manual (kept identically in whichever store indexed
+    it — both copy doc.pdf at ingest)."""
+    for store, _ in LIBRARIES.values():
+        if store.exists(doc_id):
+            return store.pdf_path(doc_id)
+    return None
+
+
+def _pdf_viewer(doc_id: str, page: int = 1) -> str:
+    """An <iframe> of the manual's PDF, opened at `page`. Gradio serves files
+    under allowed_paths at /gradio_api/file=<abs path>; the #page/view fragment
+    is honoured by the browser's built-in PDF viewer."""
+    path = _pdf_path(doc_id)
+    if not path:
+        return EMPTY_PDF
+    src = f"/gradio_api/file={path}#page={page}&view=FitH"
+    return f"<iframe class='pdf-frame' src='{src}'></iframe>"
+
+
+def add_user(question, history):
+    """Show the question immediately and clear the input. Returns ('', history)
+    so the textbox empties while the answer is generated by `bot`."""
+    question = (question or "").strip()
+    history = history or []
+    if not question:
+        return "", history
+    return "", history + [{"role": "user", "content": question}]
+
+
+def bot(history, manual, approach, k, pages):
+    """Answer the last user message with the chosen approach, streaming a
+    'searching' state while the single ZeroGPU call runs. `pages` is the
+    current citation state, echoed on intermediate yields so it isn't disturbed.
+
+    Yields (chatbot, pdf_html, pages_gallery, page_state)."""
+    history = history or []
+    hold = (gr.update(), gr.update(), pages)  # pdf, gallery, state: unchanged
+    if not history or history[-1]["role"] != "user":
+        yield history, *hold
+        return
+    question = history[-1]["content"]
 
-def ask_parsed(question, doc_id):
-    return _ask("parsed", question, doc_id)
+    def assistant_says(text):
+        return history + [{"role": "assistant", "content": text}]
 
+    if not manual:
+        yield assistant_says("Pick a manual first ☝️"), *hold
+        return
 
-CSS = """
-.app-header { text-align: center; margin: 0.5em 0 0.2em; }
-.app-header p { color: var(--body-text-color-subdued); margin-top: 0.3em; }
-.approach-card {
-    border-radius: 14px !important;
-    border-top: 4px solid var(--card-accent) !important;
-}
-.visual-card { --card-accent: #e8590c; }
-.parsed-card { --card-accent: #0c8599; }
-.approach-card h3 { margin: 0.1em 0 0; }
-.pipeline-steps {
-    color: var(--body-text-color-subdued);
-    font-size: 0.85em;
-    line-height: 1.7;
-}
-.pipeline-steps code { font-size: 0.95em; }
-.timing { color: var(--body-text-color-subdued); font-size: 0.9em; min-height: 1.2em; }
-"""
+    store, pipeline = LIBRARIES[approach]
+    if not store.exists(manual):
+        other = "parsed" if approach == "visual" else "visual"
+        yield assistant_says(
+            f"This manual isn't indexed with the **{approach}** approach yet — "
+            f"switch to **{other}** in ⚙️ settings, or pick another manual."
+        ), *hold
+        return
 
-VISUAL_CARD = """### 🖼️ Visual
-**ColEmbed late interaction** — pages stay images; nothing is parsed or chunked.
+    history = history + [{"role": "assistant", "content": "_Searching the manual…_"}]
+    yield history, *hold
 
-<div class="pipeline-steps">
+    start = time.monotonic()
+    try:
+        answer, gallery, page_refs = pipeline.run(store, question, [manual], int(k))
+    except ValueError as e:
+        history[-1]["content"] = f"⚠️ {e}"
+        yield history, *hold
+        return
 
-`page image` → `multi-vector embedding` → `MaxSim vs. query` → `top pages` → `MiniCPM‑V answers`
+    new_pages = [p for _, p in page_refs]
+    footer = f"\n\n<sub>⏱️ {time.monotonic() - start:.1f}s · {approach} · k={int(k)}</sub>"
+    history[-1]["content"] = answer + footer
+    pdf_html = _pdf_viewer(manual, new_pages[0] if new_pages else 1)
+    yield history, pdf_html, gallery, new_pages
 
-**Index:** heavy (5–12 MB/page) · **Strengths:** immune to parsing errors, sees layout and diagrams natively
-</div>"""
 
-PARSED_CARD = """### 📄 Parsed
-**Parse + dense chunks** — pages become structured text; figures and tables become descriptions.
+def jump_to_page(evt: gr.SelectData, manual, pages):
+    """Clicking a cited-page thumbnail re-opens the PDF at that page."""
+    if not manual or not pages or evt.index >= len(pages):
+        return gr.update()
+    return _pdf_viewer(manual, pages[evt.index])
 
-<div class="pipeline-steps">
 
-`Nemotron Parse` → `MiniCPM‑V describes figures/tables` → `section chunks` → `dense cosine` → `parent pages` → `MiniCPM‑V answers`
+def reset_pdf_on_manual_change(manual):
+    """Switching manuals opens that manual at page 1 and clears stale citations."""
+    return _pdf_viewer(manual, 1) if manual else EMPTY_PDF, [], []
 
-**Index:** tiny (a few MB/manual) · **Strengths:** inspectable chunks, precise hits on one table or diagram
-</div>"""
+
+CSS = """
+:root { --rg-radius: 16px; }
+.gradio-container { max-width: 1500px !important; }
+
+/* Header ----------------------------------------------------------------- */
+#rg-header { align-items: center; margin: 0.4em 0 0.8em; }
+#rg-title h1 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
+#rg-title p { margin: 0.15em 0 0; color: var(--body-text-color-subdued); font-size: 0.95em; }
+#rg-cog { display: flex; justify-content: flex-end; }
+.icon-btn {
+    max-width: 46px; min-width: 46px !important; height: 46px;
+    border-radius: 50% !important; font-size: 1.25em !important;
+    padding: 0 !important; box-shadow: none !important;
+}
+
+/* Panels ----------------------------------------------------------------- */
+.rg-panel {
+    border-radius: var(--rg-radius) !important;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.05) !important;
+    border: 1px solid var(--border-color-primary) !important;
+    padding: 14px !important;
+}
+.rg-panel .chatbot, #rg-chat .bubble-wrap { border: none !important; }
+
+/* PDF viewer ------------------------------------------------------------- */
+.pdf-frame {
+    width: 100%; height: 620px; border: none;
+    border-radius: 12px; background: var(--background-fill-secondary);
+}
+.pdf-empty {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    height: 620px; gap: 12px; border-radius: 12px; text-align: center;
+    font-size: 1.05em; line-height: 1.5; color: var(--body-text-color-subdued);
+    background: var(--background-fill-secondary);
+}
+.pdf-empty::first-line { font-size: 2.4em; }
+.cited-label { font-size: 0.85em; color: var(--body-text-color-subdued); margin: 10px 2px 4px; }
+
+/* Settings modal (native overlay, no extra deps) ------------------------- */
+#rg-settings {
+    position: fixed; inset: 0; z-index: 1000;
+    background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px);
+    display: flex; align-items: center; justify-content: center;
+}
+#rg-settings .rg-settings-card {
+    width: min(440px, 92vw); background: var(--background-fill-primary);
+    border-radius: var(--rg-radius); padding: 22px 24px;
+    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
+}
+.rg-settings-card h3 { margin-top: 0; }
+"""
 
 
 with gr.Blocks(title="Repair Guy") as demo:
-    gr.Markdown(
-        "# 🔧 Repair Guy\n"
-        "Two local-only ways to search a repair manual, side by side — pick a "
-        "manual, ask once, compare what each approach retrieves and answers.",
-        elem_classes="app-header",
-    )
+    pages_state = gr.State([])  # page numbers of the current citations, gallery-aligned
+
+    with gr.Row(elem_id="rg-header"):
+        with gr.Column(scale=8, elem_id="rg-title"):
+            gr.Markdown(
+                "# 🔧 Repair Guy\n"
+                "Your AI repair assistant — ask about a manual, get a grounded "
+                "answer with the exact pages it came from."
+            )
+        with gr.Column(scale=1, elem_id="rg-cog", min_width=60):
+            cog_btn = gr.Button("⚙️", elem_classes="icon-btn", variant="secondary")
 
     with gr.Row(equal_height=True):
-        with gr.Column(scale=1):
-            manual_in = gr.Dropdown(label="Manual", choices=[])
-            refresh_btn = gr.Button("🔄 Sync library", size="sm")
-        with gr.Column(scale=2):
-            question_in = gr.Textbox(
-                label="Question",
-                lines=2,
-                placeholder="e.g. What is the tightening torque for the universal joint flange bolts?",
+        # Left: chat
+        with gr.Column(scale=5, elem_classes="rg-panel"):
+            manual_in = gr.Dropdown(
+                label="Manual", choices=[], filterable=True, container=True
+            )
+            chatbot = gr.Chatbot(
+                type="messages",
+                height=540,
+                show_label=False,
+                elem_id="rg-chat",
+                avatar_images=(None, None),
+                placeholder="### 🔧 Repair Guy\nPick a manual, then describe the issue "
+                "or ask a question about it.",
             )
             with gr.Row():
-                both_btn = gr.Button("⚡ Ask both", variant="primary")
-
-    with gr.Row(equal_height=False):
-        with gr.Column(variant="panel", elem_classes="approach-card visual-card"):
-            gr.Markdown(VISUAL_CARD)
-            vis_btn = gr.Button("Ask with Visual", size="sm")
-            vis_time = gr.Markdown(elem_classes="timing")
-            vis_answer = gr.Markdown(label="Answer")
-            vis_pages = gr.Gallery(label="Pages used", columns=3, height=300)
-        with gr.Column(variant="panel", elem_classes="approach-card parsed-card"):
-            gr.Markdown(PARSED_CARD)
-            par_btn = gr.Button("Ask with Parsed", size="sm")
-            par_time = gr.Markdown(elem_classes="timing")
-            par_answer = gr.Markdown(label="Answer")
-            par_pages = gr.Gallery(label="Pages used", columns=3, height=300)
-
-    inputs = [question_in, manual_in]
-    vis_outputs = [vis_time, vis_answer, vis_pages]
-    par_outputs = [par_time, par_answer, par_pages]
-
-    vis_btn.click(ask_visual, inputs=inputs, outputs=vis_outputs)
-    par_btn.click(ask_parsed, inputs=inputs, outputs=par_outputs)
-    # Two listeners on one event: both columns run off a single click/submit.
-    both_btn.click(ask_visual, inputs=inputs, outputs=vis_outputs)
-    both_btn.click(ask_parsed, inputs=inputs, outputs=par_outputs)
-    question_in.submit(ask_visual, inputs=inputs, outputs=vis_outputs)
-    question_in.submit(ask_parsed, inputs=inputs, outputs=par_outputs)
+                question_in = gr.Textbox(
+                    show_label=False, scale=8, container=False,
+                    placeholder="Describe the issue you're facing…",
+                )
+                submit_btn = gr.Button("Send", scale=1, variant="primary", min_width=90)
+
+        # Right: source PDF + cited pages
+        with gr.Column(scale=5, elem_classes="rg-panel"):
+            pdf_view = gr.HTML(EMPTY_PDF)
+            gr.Markdown("Cited pages", elem_classes="cited-label")
+            pages_gallery = gr.Gallery(
+                show_label=False, columns=4, height=140, object_fit="contain",
+                preview=False, allow_preview=False,
+            )
 
+    # Settings modal -----------------------------------------------------------
+    with gr.Column(elem_id="rg-settings", visible=False) as settings_modal:
+        with gr.Column(elem_classes="rg-settings-card"):
+            gr.Markdown("### ⚙️ Settings")
+            approach_in = gr.Radio(
+                choices=[(label, key) for key, label in APPROACHES.items()],
+                value="visual",
+                label="Retrieval approach",
+            )
+            k_in = gr.Slider(
+                1, MAX_TOP_K, value=DEFAULT_TOP_K, step=1,
+                label="Pages retrieved per question (k)",
+            )
+            with gr.Row():
+                refresh_btn = gr.Button("🔄 Sync library", size="sm")
+                close_btn = gr.Button("Done", variant="primary", size="sm")
+
+    # Wiring -------------------------------------------------------------------
+    bot_inputs = [chatbot, manual_in, approach_in, k_in, pages_state]
+    chat_outputs = [chatbot, pdf_view, pages_gallery, pages_state]
+
+    for trigger in (question_in.submit, submit_btn.click):
+        trigger(
+            add_user, [question_in, chatbot], [question_in, chatbot], queue=False
+        ).then(bot, bot_inputs, chat_outputs)
+
+    pages_gallery.select(
+        jump_to_page, inputs=[manual_in, pages_state], outputs=pdf_view
+    )
+    manual_in.change(
+        reset_pdf_on_manual_change, inputs=manual_in,
+        outputs=[pdf_view, pages_gallery, pages_state],
+    )
+
+    cog_btn.click(lambda: gr.update(visible=True), outputs=settings_modal)
+    close_btn.click(lambda: gr.update(visible=False), outputs=settings_modal)
     refresh_btn.click(refresh_library, inputs=[manual_in], outputs=[manual_in])
+
     demo.load(lambda: gr.update(choices=_manual_choices()), outputs=[manual_in])
 
 
 # Gradio 6 takes theme/css at launch(), not in the Blocks constructor.
-LAUNCH_KWARGS = dict(theme=gr.themes.Soft(primary_hue="orange"), css=CSS)
+LAUNCH_KWARGS = dict(
+    theme=gr.themes.Soft(
+        primary_hue="orange",
+        neutral_hue="slate",
+        font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
+    ),
+    css=CSS,
+    # PDFs live under the pre-indexed library; allow the file route to serve them.
+    allowed_paths=[PREINDEXED_DIR],
+)
 
 if __name__ == "__main__":
     demo.launch(**LAUNCH_KWARGS)

pipelines/parsed_ask.py

@@ -76,14 +76,16 @@ def _ask_on_gpu(
         (img, f"{label} (cosine {score:.3f})")
         for (label, img), (_, _, score) in zip(pages, refs)
     ]
-    return answer, gallery
+    page_refs = [(doc_id, page) for doc_id, page, _ in refs]
+    return answer, gallery, page_refs
 
 
 class ParsedAskPipeline:
     """Stateless: the store is passed per call."""
 
     def run(self, store: ParsedStore, question: str, doc_ids: list[str] | None, top_k: int):
-        """Return (answer markdown, gallery items [(image, caption)])."""
+        """Return (answer markdown, gallery items [(image, caption)], page_refs
+        [(doc_id, page_num)] for the retrieved pages, in answer order)."""
         question = (question or "").strip()
         if not question:
             raise ValueError("Please enter a question.")

pipelines/visual_ask.py

@@ -32,14 +32,16 @@ def _ask_on_gpu(
     ]
     answer = generate_answer(question, [(label, img) for label, img, _ in pages])
     gallery = [(img, f"{label} (score {score:.1f})") for label, img, score in pages]
-    return answer, gallery
+    page_refs = [(doc_id, page) for doc_id, page, _ in hits]
+    return answer, gallery, page_refs
 
 
 class VisualAskPipeline:
     """Stateless: the store is passed per call."""
 
     def run(self, store: VisualStore, question: str, doc_ids: list[str] | None, top_k: int):
-        """Return (answer markdown, gallery items [(image, caption)])."""
+        """Return (answer markdown, gallery items [(image, caption)], page_refs
+        [(doc_id, page_num)] for the retrieved pages, in answer order)."""
         question = (question or "").strip()
         if not question:
             raise ValueError("Please enter a question.")