Fix UI

README.md

@@ -5,7 +5,7 @@ colorFrom: blue
 colorTo: purple
 sdk: gradio
 app_file: app.py
-pinned: false
+pinned: true
 license: mit
 short_description: AI knowledge hub for groups, powered by Nvidia
 ---

app/ui/gradio_app.py

@@ -10,14 +10,19 @@ from app.utils.zerogpu import gpu
 logger = logging.getLogger(__name__)
 
 THEME = gr.themes.Base(
-    primary_hue="cyan",
-    secondary_hue="lime",
-    neutral_hue="slate",
+    primary_hue="teal",
+    secondary_hue="yellow",
+    neutral_hue="stone",
     radius_size="sm",
     font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
     font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
 )
 
+# Fixed pipeline constants
+CHUNK_SIZE = 1200
+CHUNK_OVERLAP = 200
+RETRIEVE_K = 3
+
 
 def _format_metadata(metadata: dict) -> str:
     if not metadata:
@@ -33,16 +38,14 @@ def _ingest(
     url: str,
     pdf_file: str | None,
     manual_transcript: str,
-    chunk_size: int,
-    chunk_overlap: int,
     collection_name: str,
 ):
     logger.info(
         "Ingest requested url=%s pdf_file=%s chunk_size=%s chunk_overlap=%s collection=%s",
         url,
         pdf_file,
-        chunk_size,
-        chunk_overlap,
+        CHUNK_SIZE,
+        CHUNK_OVERLAP,
         collection_name,
     )
     try:
@@ -51,8 +54,8 @@ def _ingest(
         result = ingest_source(
             url=url,
             pdf_path=pdf_file,
-            chunk_size=chunk_size,
-            chunk_overlap=chunk_overlap,
+            chunk_size=CHUNK_SIZE,
+            chunk_overlap=CHUNK_OVERLAP,
             collection_name=collection_name,
             manual_transcript=manual_transcript,
         )
@@ -90,12 +93,12 @@ def _ingest(
 
 
 @gpu()
-def _search(query: str, limit: int, collection_name: str):
-    logger.info("Search requested query=%s limit=%s collection=%s", query, limit, collection_name)
+def _search(query: str, collection_name: str):
+    logger.info("Search requested query=%s limit=%s collection=%s", query, RETRIEVE_K, collection_name)
     try:
         from app.services.ingestion import search_knowledge_base
 
-        results = search_knowledge_base(query, limit=limit, collection_name=collection_name)
+        results = search_knowledge_base(query, limit=RETRIEVE_K, collection_name=collection_name)
     except Exception as exc:
         if "MPS backend out of memory" in str(exc):
             return (
@@ -127,12 +130,12 @@ def _search(query: str, limit: int, collection_name: str):
 
 
 @gpu()
-def _answer(query: str, limit: int, collection_name: str):
-    logger.info("Answer requested query=%s limit=%s collection=%s", query, limit, collection_name)
+def _answer(query: str, collection_name: str):
+    logger.info("Answer requested query=%s limit=%s collection=%s", query, RETRIEVE_K, collection_name)
     try:
         from app.services.ingestion import answer_from_knowledge_base
 
-        result = answer_from_knowledge_base(query, limit=limit, collection_name=collection_name)
+        result = answer_from_knowledge_base(query, limit=RETRIEVE_K, collection_name=collection_name)
     except Exception as exc:
         if "MPS backend out of memory" in str(exc):
             return (
@@ -211,21 +214,6 @@ Extract text, chunk it cleanly, embed locally, and use NVIDIA chat for grounded
                                 placeholder="If hosted YouTube transcript extraction is blocked, paste the transcript here and keep the YouTube URL above.",
                                 lines=5,
                             )
-                            with gr.Row():
-                                chunk_size = gr.Slider(
-                                    400,
-                                    2500,
-                                    value=settings.CHUNK_SIZE,
-                                    step=50,
-                                    label="Chunk size",
-                                )
-                                chunk_overlap = gr.Slider(
-                                    0,
-                                    600,
-                                    value=settings.CHUNK_OVERLAP,
-                                    step=25,
-                                    label="Chunk overlap",
-                                )
                             collection_name_ingest = gr.Textbox(
                                 label="Collection Name",
                                 value=settings.QDRANT_COLLECTION_NAME,
@@ -276,8 +264,6 @@ Extract text, chunk it cleanly, embed locally, and use NVIDIA chat for grounded
                             source_url,
                             pdf_file,
                             manual_transcript,
-                            chunk_size,
-                            chunk_overlap,
                             collection_name_ingest,
                         ],
                         outputs=[
@@ -296,14 +282,13 @@ Extract text, chunk it cleanly, embed locally, and use NVIDIA chat for grounded
                     with gr.Row(equal_height=True):
                         with gr.Column(scale=3, elem_classes=["kh-panel"]):
                             gr.Markdown(
-                                "### Retrieval Probe\n<div class='kh-subhead'>Run a quick similarity search against the same Qdrant collection after ingestion.</div>"
+                                "### Retrieval Probe\n<div class='kh-subhead'>Run a similarity search against the Qdrant collection. Returns top 3 matches.</div>"
                             )
                             query = gr.Textbox(
                                 label="Search query",
                                 placeholder="Ask a question or enter keywords",
                                 lines=4,
                             )
-                            limit = gr.Slider(1, 10, value=5, step=1, label="Results")
                             collection_name_retrieve = gr.Textbox(
                                 label="Collection Name",
                                 value=settings.QDRANT_COLLECTION_NAME,
@@ -326,12 +311,12 @@ Extract text, chunk it cleanly, embed locally, and use NVIDIA chat for grounded
 
                     search_btn.click(
                         fn=_search,
-                        inputs=[query, limit, collection_name_retrieve],
+                        inputs=[query, collection_name_retrieve],
                         outputs=search_results,
                     )
                     answer_btn.click(
                         fn=_answer,
-                        inputs=[query, limit, collection_name_retrieve],
+                        inputs=[query, collection_name_retrieve],
                         outputs=[answer_output, reasoning_output, search_results],
                     )
 

app/ui/theme.py

@@ -1,7 +1,7 @@
 HEAD = """
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
 """
 
 JS = """
@@ -9,250 +9,445 @@ JS = """
   const root = document.querySelector('.gradio-container');
   if (!root) return;
   root.dataset.ready = 'true';
-  const marker = document.createElement('div');
-  marker.className = 'kh-scanline';
-  root.prepend(marker);
 }
 """
 
 CSS = """
-:root {
-  --kh-bg: #080b0f;
-  --kh-surface: rgba(18, 24, 32, 0.78);
-  --kh-surface-strong: rgba(27, 36, 48, 0.92);
-  --kh-ink: #f7fbff;
-  --kh-muted: #a7b4c2;
-  --kh-soft: #d8e1ea;
-  --kh-line: rgba(255, 255, 255, 0.12);
-  --kh-cyan: #20d6c7;
-  --kh-lime: #b8f45d;
-  --kh-rose: #ff6b8a;
-  --kh-amber: #ffcf5c;
-  --kh-shadow: rgba(0, 0, 0, 0.32);
-}
+/* ═══════════════════════════════════════════════
+   KNOWLEDGEHUB — WARM LIGHT THEME
+   Palette: parchment bg · sage green · warm amber
+   Texture: fine cross-hatch + dot grid overlay
+═══════════════════════════════════════════════ */
 
+:root {
+  --kh-bg:            #ede8db;
+  --kh-bg2:           #e8e2d4;
+  --kh-surface:       #faf7f0;
+  --kh-surface2:      #f5f1e6;
+  --kh-ink:           #1e1b15;
+  --kh-muted:         #6b6254;
+  --kh-soft:          #3d3828;
+  --kh-line:          rgba(80, 65, 35, 0.14);
+  --kh-sage:          #3d7a6a;
+  --kh-sage-dim:      rgba(61, 122, 106, 0.15);
+  --kh-amber:         #b87428;
+  --kh-shadow:        rgba(80, 60, 20, 0.10);
+  --kh-shadow-md:     rgba(80, 60, 20, 0.16);
+}
+
+/* ══ PAGE BACKGROUND — cross-hatch + dot texture ══ */
 .gradio-container {
-  min-height: 100vh;
-  background:
-    radial-gradient(circle at 18% 8%, rgba(32, 214, 199, 0.22), transparent 30%),
-    radial-gradient(circle at 86% 12%, rgba(255, 207, 92, 0.16), transparent 28%),
-    linear-gradient(135deg, #080b0f 0%, #101720 48%, #0b1017 100%) !important;
-  color: var(--kh-ink);
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-}
-
-.kh-scanline {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
-  background-size: 100% 4px;
-  mask-image: linear-gradient(to bottom, transparent, black 18%, black 72%, transparent);
-  opacity: 0.18;
-  z-index: 0;
+  min-height: 100vh !important;
+  background-color: var(--kh-bg) !important;
+  /* Cross-hatch lines */
+  background-image:
+    linear-gradient(rgba(61,122,106,0.07) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(61,122,106,0.07) 1px, transparent 1px),
+    linear-gradient(rgba(184,116,40,0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(184,116,40,0.04) 1px, transparent 1px),
+    radial-gradient(ellipse 65% 45% at 5% 0%,  rgba(61,122,106,0.13) 0%, transparent 60%),
+    radial-gradient(ellipse 55% 40% at 96% 4%, rgba(184,116,40,0.11) 0%, transparent 55%),
+    radial-gradient(ellipse 80% 55% at 50% 105%, rgba(61,122,106,0.08) 0%, transparent 60%) !important;
+  background-size:
+    32px 32px,
+    32px 32px,
+    8px 8px,
+    8px 8px,
+    100% 100%,
+    100% 100%,
+    100% 100% !important;
+  color: var(--kh-ink) !important;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif !important;
+}
+
+/* ══ NUKE ALL DARK BACKGROUNDS from Gradio internals ══ */
+/* Every block, wrap, form, and container Gradio might use */
+.gradio-container *,
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container .wrap,
+.gradio-container .gap,
+.gradio-container .container,
+.gradio-container .svelte-1f354aw,
+.gradio-container .input-wrap,
+.gradio-container .component-wrapper,
+.gradio-container [data-testid],
+.gradio-container .lg,
+.gradio-container .sm,
+.gradio-container .stretch {
+  background-color: transparent !important;
+  color: inherit !important;
+}
+
+/* Force all Gradio block panels to parchment */
+.gradio-container .block.padded,
+.gradio-container .block.padded.hide-container,
+.gradio-container div.block,
+.gradio-container fieldset,
+.gradio-container label.block {
+  background-color: var(--kh-surface) !important;
+  border-color: var(--kh-line) !important;
+  color: var(--kh-ink) !important;
 }
 
+/* ══ SHELL ══ */
 #kh-shell {
   position: relative;
   z-index: 1;
   max-width: 1220px;
   margin: 0 auto;
-  padding: 28px 18px 42px;
+  padding: 32px 20px 52px;
 }
 
+/* ══ TITLE ══ */
 #kh-title {
-  padding: 34px 0 22px;
+  padding: 36px 0 26px;
   border-bottom: 1px solid var(--kh-line);
+  background: transparent !important;
 }
 
 #kh-title h1 {
-  max-width: 920px;
-  color: var(--kh-ink);
-  font-size: clamp(2.6rem, 6vw, 6rem);
-  font-weight: 800;
-  line-height: 0.9;
-  margin: 0 0 14px;
-  letter-spacing: 0;
+  max-width: 960px;
+  color: var(--kh-ink) !important;
+  font-family: "Instrument Serif", Georgia, "Times New Roman", serif !important;
+  font-size: clamp(2.8rem, 6.5vw, 6.2rem);
+  font-weight: 400;
+  font-style: italic;
+  line-height: 0.92;
+  margin: 0 0 16px;
+  letter-spacing: -0.01em;
 }
 
 #kh-title p {
-  max-width: 780px;
-  color: var(--kh-muted);
-  font-size: 1.04rem;
-  line-height: 1.65;
+  max-width: 760px;
+  color: var(--kh-muted) !important;
+  font-size: 1.02rem;
+  line-height: 1.7;
+  margin: 6px 0 0;
 }
 
+/* ══ CODE CHIPS ══ */
 #kh-title code,
 .kh-chip code {
-  color: var(--kh-lime);
-  background: rgba(184, 244, 93, 0.09);
-  border: 1px solid rgba(184, 244, 93, 0.18);
-  border-radius: 6px;
+  color: var(--kh-sage) !important;
+  background: rgba(61, 122, 106, 0.11) !important;
+  border: 1px solid rgba(61, 122, 106, 0.22) !important;
+  border-radius: 5px;
   padding: 2px 6px;
-  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-}
-
-.kh-panel {
-  border: 1px solid var(--kh-line);
-  border-radius: 8px;
-  background: linear-gradient(180deg, var(--kh-surface-strong), var(--kh-surface));
-  box-shadow: 0 24px 70px var(--kh-shadow);
-  backdrop-filter: blur(18px);
-  padding: 18px !important;
-}
-
-.kh-panel label,
-.kh-panel .label-wrap span {
-  color: var(--kh-soft) !important;
-  font-weight: 700 !important;
-}
-
-.kh-subhead {
-  margin: 8px 0 16px;
-  color: var(--kh-muted);
-  font-size: 0.95rem;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.87em;
 }
 
+/* ══ CHIP ROW ══ */
 .kh-chip-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 9px;
   margin-top: 18px;
+  background: transparent !important;
 }
 
 .kh-chip {
   border: 1px solid var(--kh-line);
   border-radius: 999px;
-  padding: 8px 12px;
-  color: var(--kh-soft);
-  background: rgba(255, 255, 255, 0.055);
-  font-size: 0.9rem;
+  padding: 6px 14px;
+  color: var(--kh-soft) !important;
+  background: rgba(250, 247, 240, 0.85) !important;
+  font-size: 0.87rem;
+  font-weight: 500;
+  box-shadow: 0 1px 3px var(--kh-shadow);
+}
+
+/* ══ PANELS — clean lifted paper, no inner texture ══ */
+.kh-panel,
+.kh-panel.block,
+.kh-panel > .block {
+  border: 1px solid rgba(80, 65, 35, 0.13) !important;
+  border-top: 2.5px solid rgba(61, 122, 106, 0.38) !important;
+  border-radius: 14px !important;
+  background: #fdfaf3 !important;
+  box-shadow:
+    0 1px 0 rgba(255,255,255,0.95) inset,
+    0 4px 6px -2px rgba(80,60,20,0.06),
+    0 12px 32px rgba(80,60,20,0.09);
+  padding: 22px !important;
+  color: var(--kh-ink) !important;
 }
 
-.kh-stat {
-  min-height: 92px;
-  border: 1px solid var(--kh-line);
-  border-radius: 8px;
-  padding: 14px 16px;
-  background: rgba(255, 255, 255, 0.055);
+/* Force all children of panels to be light too */
+.kh-panel *,
+.kh-panel .block,
+.kh-panel .wrap,
+.kh-panel .form,
+.kh-panel fieldset {
+  background-color: transparent !important;
+  color: var(--kh-ink) !important;
+  border-color: var(--kh-line) !important;
+  box-shadow: none !important;
+}
+
+/* Labels inside panels */
+.kh-panel label span,
+.kh-panel .label-wrap span,
+.kh-panel span.text-gray-500,
+.kh-panel span.text-sm {
+  color: var(--kh-soft) !important;
+  font-weight: 600 !important;
+  font-size: 0.89rem !important;
+  letter-spacing: 0.01em;
+}
+
+.kh-subhead {
+  margin: 6px 0 16px;
+  color: var(--kh-muted) !important;
+  font-size: 0.93rem;
+  line-height: 1.6;
 }
 
-.kh-stat .wrap,
-.kh-stat input {
+/* ══ STAT BOXES ══ */
+.kh-stat,
+.kh-stat > .block,
+.kh-stat .wrap {
+  min-height: 88px;
+  border: 1px solid rgba(80,65,35,0.11) !important;
+  border-radius: 10px !important;
+  padding: 12px 16px;
+  background: rgba(232, 226, 212, 0.6) !important;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
+}
+
+.kh-stat input,
+.kh-stat textarea {
   background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  color: var(--kh-ink) !important;
 }
 
+/* ══ TABS ══ */
 .tabs {
-  margin-top: 20px;
+  margin-top: 22px;
+  background: transparent !important;
+}
+
+.tab-nav {
+  background: transparent !important;
+  border-bottom: 1px solid var(--kh-line) !important;
+  gap: 4px;
 }
 
 .tab-nav button {
   color: var(--kh-muted) !important;
-  border-radius: 8px !important;
-  font-weight: 700 !important;
+  background: transparent !important;
+  border: 1px solid transparent !important;
+  border-radius: 8px 8px 0 0 !important;
+  font-weight: 600 !important;
+  font-size: 0.95rem !important;
+  padding: 9px 20px !important;
+  transition: all 0.15s ease;
+}
+
+.tab-nav button:hover {
+  color: var(--kh-sage) !important;
+  background: rgba(61,122,106,0.07) !important;
 }
 
 .tab-nav button.selected {
-  color: var(--kh-ink) !important;
-  background: linear-gradient(135deg, rgba(32, 214, 199, 0.22), rgba(184, 244, 93, 0.12)) !important;
-  border: 1px solid rgba(32, 214, 199, 0.34) !important;
+  color: var(--kh-sage) !important;
+  background: var(--kh-surface) !important;
+  border: 1px solid var(--kh-line) !important;
+  border-bottom-color: var(--kh-surface) !important;
 }
 
+/* ══ INPUTS & TEXTAREAS ══ */
 textarea,
-input {
+input[type="text"],
+input[type="number"],
+input[type="search"],
+input[type="email"] {
   color: var(--kh-ink) !important;
-  background: rgba(3, 7, 12, 0.52) !important;
-  border-color: rgba(255, 255, 255, 0.12) !important;
-  font-size: 0.96rem !important;
+  background: rgba(255, 252, 244, 0.92) !important;
+  border: 1px solid rgba(80,65,35,0.18) !important;
+  border-radius: 8px !important;
+  font-size: 0.94rem !important;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
+  box-shadow: 0 1px 2px rgba(80,60,20,0.05) inset !important;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+textarea:focus,
+input[type="text"]:focus {
+  border-color: rgba(61,122,106,0.5) !important;
+  box-shadow: 0 0 0 3px rgba(61,122,106,0.11), 0 1px 3px rgba(80,60,20,0.06) inset !important;
+  outline: none !important;
 }
 
 textarea::placeholder,
 input::placeholder {
-  color: rgba(216, 225, 234, 0.46) !important;
+  color: rgba(107,98,84,0.52) !important;
+}
+
+/* ══ UPLOAD / FILE BLOCK ══ */
+.upload-container,
+.file-preview,
+[data-testid="file"],
+.file-upload {
+  background:
+    repeating-linear-gradient(
+      45deg,
+      rgba(61,122,106,0.04) 0px,
+      rgba(61,122,106,0.04) 1px,
+      transparent 1px,
+      transparent 10px
+    ) !important;
+  border: 1.5px dashed rgba(61,122,106,0.35) !important;
+  border-radius: 10px !important;
+  color: var(--kh-muted) !important;
+}
+
+.upload-container *,
+.file-preview * {
+  background: transparent !important;
+  color: var(--kh-muted) !important;
+}
+
+/* ══ BUTTONS ══ */
+button.primary,
+button[variant="primary"],
+.primary {
+  min-height: 44px;
+  background: linear-gradient(135deg, #3d7a6a 0%, #2e6055 100%) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 9px !important;
+  font-weight: 700 !important;
+  font-size: 0.94rem !important;
+  letter-spacing: 0.01em;
+  box-shadow: 0 4px 14px rgba(61,122,106,0.30) !important;
+  transition: transform 0.12s, box-shadow 0.12s;
+}
+
+button.primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 7px 20px rgba(61,122,106,0.38) !important;
+}
+
+button.secondary,
+button[variant="secondary"],
+.secondary {
+  background: rgba(232,226,212,0.8) !important;
+  color: var(--kh-soft) !important;
+  border: 1px solid rgba(80,65,35,0.18) !important;
+  border-radius: 9px !important;
+  font-weight: 600 !important;
+}
+
+button.secondary:hover {
+  background: rgba(61,122,106,0.10) !important;
+  border-color: rgba(61,122,106,0.32) !important;
+  color: var(--kh-sage) !important;
+}
+
+/* ══ SLIDER ══ */
+input[type="range"] {
+  accent-color: var(--kh-sage) !important;
 }
 
+/* ══ STATUS BOX ══ */
 #kh-status {
   min-height: 130px;
+  color: var(--kh-ink) !important;
 }
 
 #kh-status h3 {
-  color: var(--kh-lime);
+  color: var(--kh-sage) !important;
+  font-family: "Instrument Serif", Georgia, serif !important;
+  font-style: italic;
+  font-weight: 400;
+  font-size: 1.22rem;
   margin-top: 0;
 }
 
+/* ══ TEXT PREVIEW ══ */
 #kh-text-preview textarea {
   min-height: 430px !important;
-  line-height: 1.6 !important;
-  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
-  font-size: 0.9rem !important;
+  line-height: 1.65 !important;
+  font-family: "JetBrains Mono", ui-monospace, monospace !important;
+  font-size: 0.87rem !important;
+  background: rgba(232,226,212,0.45) !important;
 }
 
+/* ══ SEARCH RESULTS / ANSWER / REASONING ══ */
 #kh-search-results {
   min-height: 410px;
+  color: var(--kh-ink) !important;
 }
 
-#kh-answer,
-#kh-reasoning {
-  min-height: 240px;
+#kh-search-results h3 {
+  color: var(--kh-sage) !important;
+  font-family: "Instrument Serif", Georgia, serif !important;
+  font-style: italic;
+  font-weight: 400;
 }
 
 #kh-answer {
+  min-height: 240px;
   font-size: 1.02rem;
-  line-height: 1.7;
-}
-
-#kh-search-results h3 {
-  color: var(--kh-cyan);
+  line-height: 1.75;
+  color: var(--kh-ink) !important;
 }
 
 #kh-reasoning {
-  color: var(--kh-muted);
-  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.86rem;
-  line-height: 1.6;
+  min-height: 240px;
+  color: var(--kh-muted) !important;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.85rem;
+  line-height: 1.65;
 }
 
-.prose,
-.markdown {
+/* ══ MARKDOWN / PROSE ══ */
+.prose, .markdown,
+.prose *, .markdown * {
   color: var(--kh-soft) !important;
+  background: transparent !important;
 }
 
-.prose strong,
-.markdown strong {
+.prose strong, .markdown strong,
+.prose h1, .markdown h1,
+.prose h2, .markdown h2,
+.prose h3, .markdown h3 {
   color: var(--kh-ink) !important;
 }
 
-button.primary {
-  min-height: 46px;
-  background: linear-gradient(135deg, var(--kh-cyan), var(--kh-lime)) !important;
-  color: #061015 !important;
-  border: 0 !important;
-  border-radius: 8px !important;
-  font-weight: 800 !important;
-  box-shadow: 0 16px 34px rgba(32, 214, 199, 0.2);
-}
-
-button.secondary {
-  border-radius: 8px !important;
+.prose h3, .markdown h3 {
+  font-family: "Instrument Serif", Georgia, serif !important;
+  font-style: italic;
+  font-weight: 400;
+  font-size: 1.13rem;
 }
 
-.file-preview,
-.upload-container {
-  border-color: rgba(32, 214, 199, 0.26) !important;
-  background: rgba(32, 214, 199, 0.055) !important;
+code {
+  color: var(--kh-sage) !important;
+  background: rgba(61,122,106,0.09) !important;
+  border: 1px solid rgba(61,122,106,0.18) !important;
+  border-radius: 4px;
+  padding: 1px 5px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
 }
 
-@media (max-width: 760px) {
-  #kh-shell {
-    padding: 18px 10px 32px;
-  }
+/* ══ SCROLLBAR ══ */
+::-webkit-scrollbar { width: 7px; height: 7px; }
+::-webkit-scrollbar-track { background: rgba(232,226,212,0.4); }
+::-webkit-scrollbar-thumb { background: rgba(61,122,106,0.32); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(61,122,106,0.52); }
 
-  #kh-title h1 {
-    font-size: clamp(2.25rem, 15vw, 4.2rem);
-  }
+/* ══ DIVIDERS / MISC ══ */
+hr { border-color: var(--kh-line) !important; }
 
-  .kh-panel {
-    padding: 14px !important;
-  }
+/* ══ RESPONSIVE ══ */
+@media (max-width: 760px) {
+  #kh-shell { padding: 18px 12px 36px; }
+  #kh-title h1 { font-size: clamp(2.2rem, 13vw, 3.8rem); }
+  .kh-panel { padding: 16px !important; }
 }
 """

uv.lock

@@ -1208,6 +1208,7 @@ dependencies = [
     { name = "qdrant-client" },
     { name = "requests" },
     { name = "sentence-transformers" },
+    { name = "spaces" },
     { name = "torchvision" },
     { name = "youtube-transcript-api" },
 ]
@@ -1232,6 +1233,7 @@ requires-dist = [
     { name = "requests", specifier = ">=2.32.3" },
     { name = "ruff", marker = "extra == 'dev'", specifier = ">=0.6.0" },
     { name = "sentence-transformers", specifier = ">=3.0.1" },
+    { name = "spaces" },
     { name = "torchvision", specifier = ">=0.27.0" },
     { name = "youtube-transcript-api", specifier = ">=0.6.2" },
 ]
@@ -3420,6 +3422,23 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e9/44/75a9c9421471a6c4805dbf2356f7c181a29c1879239abab1ea2cc8f38b40/sniffio-1.3.1-py3-none-any.whl", hash = "sha256:2f6da418d1f1e0fddd844478f41680e794e6051915791a034ff65e5f100525a2", size = 10235, upload-time = "2024-02-25T23:20:01.196Z" },
 ]
 
+[[package]]
+name = "spaces"
+version = "0.50.4"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "gradio" },
+    { name = "httpx" },
+    { name = "packaging" },
+    { name = "pydantic" },
+    { name = "requests" },
+    { name = "typing-extensions" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/7f/9d/9a06c91f01ed57ac4749e00f8eaf591ed5e3c6ec7c4499ce5c6f59fbc1dc/spaces-0.50.4.tar.gz", hash = "sha256:0aaed1d041d21c35c14b5a5cee5be677ad0ea26a26a5f09c488264ab1c031753", size = 88304, upload-time = "2026-06-04T15:41:13.17Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/c5/01/e02d0352836c68bd9e307c369c62800c9437d6243e64e1d8660543e50617/spaces-0.50.4-py3-none-any.whl", hash = "sha256:ad4383748b7a4219940d9ba786bb3eebbbd9cc946d21334bee1557bb20469355", size = 111340, upload-time = "2026-06-04T15:41:11.732Z" },
+]
+
 [[package]]
 name = "starlette"
 version = "1.2.1"