Upload folder using huggingface_hub

Dockerfile

@@ -0,0 +1,10 @@
+FROM python:3.10-slim
+WORKDIR /app
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libglib2.0-0 libsm6 libxext6 libxrender1 libgl1 git \
+    && rm -rf /var/lib/apt/lists/*
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+EXPOSE 7860
+CMD ["python", "app.py"]

README.md

@@ -1,10 +1,28 @@
 ---
 title: Cortex
-emoji: 🐢
-colorFrom: blue
-colorTo: purple
+emoji: 🧠
+colorFrom: yellow
+colorTo: red
 sdk: docker
+app_port: 7860
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Cortex — Multimodal Knowledge Intelligence
+
+Upload PDFs, images, videos, and text files — ask questions across all of them.
+
+## Features
+- **Multimodal ingestion** — PDF, images, video frames, plain text
+- **Semantic search** — sentence-transformers + FAISS vector index
+- **Q&A with citations** — Claude API answers with source + page references
+- **Auto summaries** — per-file summaries and entity extraction on upload
+- **Cross-document connections** — Claude finds relationships between files
+
+## Stack
+- Backend: FastAPI + sentence-transformers + FAISS + PyMuPDF + OpenCV
+- LLM: Claude API (claude-sonnet-4-6)
+- Frontend: Custom HTML/CSS/JS (earthy professional design)
+- Deployment: Docker Space on Hugging Face
+
+Built by Yashika Saxena · B.Tech AI & ML · ITM Gwalior · 2023–2027

app.py

@@ -0,0 +1,466 @@
+import os, io, base64, time, json, re
+from pathlib import Path
+from typing import List, Optional
+import numpy as np
+
+from fastapi import FastAPI, UploadFile, File, Form, HTTPException
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, JSONResponse
+from groq import Groq
+
+# ── Optional heavy deps (graceful fallback) ───────────────────────
+try:
+    import fitz  # PyMuPDF
+    HAS_FITZ = True
+except ImportError:
+    HAS_FITZ = False
+
+try:
+    from sentence_transformers import SentenceTransformer
+    import faiss
+    embedder = SentenceTransformer("all-MiniLM-L6-v2")
+    HAS_EMBEDDER = True
+except ImportError:
+    HAS_EMBEDDER = False
+
+try:
+    import cv2
+    HAS_CV2 = True
+except ImportError:
+    HAS_CV2 = False
+
+from PIL import Image
+
+# ── In-memory knowledge base ──────────────────────────────────────
+KB = {
+    "files": {},       # filename -> {type, summary, entities, chunks, thumb_b64}
+    "chunks": [],      # [{text, source, page, embedding}]
+    "index": None,     # FAISS index
+}
+
+CHUNK_SIZE = 600  # words per chunk
+CHUNK_OVERLAP = 80
+
+# ── Helpers ───────────────────────────────────────────────────────
+def chunk_text(text: str, source: str, page: int = 0) -> List[dict]:
+    words = text.split()
+    chunks = []
+    for i in range(0, len(words), CHUNK_SIZE - CHUNK_OVERLAP):
+        chunk = " ".join(words[i:i + CHUNK_SIZE])
+        if chunk.strip():
+            chunks.append({"text": chunk, "source": source, "page": page})
+    return chunks
+
+def embed_chunks(chunks: List[dict]) -> np.ndarray:
+    if not HAS_EMBEDDER:
+        return np.random.rand(len(chunks), 384).astype("float32")
+    texts = [c["text"] for c in chunks]
+    return embedder.encode(texts, convert_to_numpy=True).astype("float32")
+
+def rebuild_index():
+    if not KB["chunks"]:
+        KB["index"] = None
+        return
+    vecs = np.array([c["embedding"] for c in KB["chunks"]], dtype="float32")
+    dim = vecs.shape[1]
+    if HAS_EMBEDDER:
+        index = faiss.IndexFlatIP(dim)
+        faiss.normalize_L2(vecs)
+        index.add(vecs)
+        KB["index"] = index
+    else:
+        KB["index"] = None
+
+def retrieve(query: str, top_k: int = 8) -> List[dict]:
+    if not KB["chunks"]:
+        return []
+    
+    # Vector search if available
+    vector_results = []
+    if KB["index"] is not None and HAS_EMBEDDER:
+        q_vec = embedder.encode([query], convert_to_numpy=True).astype("float32")
+        faiss.normalize_L2(q_vec)
+        _, indices = KB["index"].search(q_vec, min(top_k, len(KB["chunks"])))
+        vector_results = [KB["chunks"][i] for i in indices[0] if i < len(KB["chunks"])]
+
+    # Keyword fallback — always run to catch what vector search misses
+    query_words = set(query.lower().split())
+    keyword_results = []
+    for chunk in KB["chunks"]:
+        chunk_lower = chunk["text"].lower()
+        # score by how many query words appear in chunk
+        score = sum(1 for w in query_words if len(w) > 3 and w in chunk_lower)
+        if score > 0:
+            keyword_results.append((score, chunk))
+    keyword_results.sort(key=lambda x: x[0], reverse=True)
+    keyword_chunks = [c for _, c in keyword_results[:top_k]]
+
+    # Merge — deduplicate by text, prioritize vector results
+    seen = set()
+    merged = []
+    for chunk in vector_results + keyword_chunks:
+        key = chunk["text"][:100]
+        if key not in seen:
+            seen.add(key)
+            merged.append(chunk)
+    
+    return merged[:top_k + 4]  # return a few extra for better coverage
+
+def pil_to_b64(pil_img, max_size=1024) -> str:
+    img = pil_img.copy()
+    img.thumbnail((max_size, max_size), Image.LANCZOS)
+    buf = io.BytesIO()
+    img.save(buf, format="JPEG", quality=85)
+    return base64.b64encode(buf.getvalue()).decode()
+
+def claude_client(api_key: str):
+    return Groq(api_key=api_key)
+
+def claude_vision(client, b64_img: str, prompt: str) -> str:
+    msg = client.chat.completions.create(
+        model="meta-llama/llama-4-scout-17b-16e-instruct",
+        max_tokens=1000,
+        messages=[{"role": "user", "content": [
+            {"type": "image_url", "image_url": {"url": f"data:image/jpeg;base64,{b64_img}"}},
+            {"type": "text", "text": prompt}
+        ]}]
+    )
+    return msg.choices[0].message.content
+
+def claude_text(client, prompt: str) -> str:
+    msg = client.chat.completions.create(
+        model="llama-3.3-70b-versatile",
+        max_tokens=1500,
+        messages=[{"role": "user", "content": prompt}]
+    )
+    return msg.choices[0].message.content
+
+# ── File processors ───────────────────────────────────────────────
+def process_pdf(raw: bytes, filename: str, client) -> dict:
+    chunks = []
+    thumb_b64 = None
+    if not HAS_FITZ:
+        return {"chunks": [{"text": "PDF processing unavailable (PyMuPDF not installed)", "source": filename, "page": 0}], "thumb_b64": None, "raw_text": ""}
+    doc = fitz.open(stream=raw, filetype="pdf")
+    full_text = ""
+    for page_num, page in enumerate(doc):
+        # extract text with better layout preservation
+        text = page.get_text("text")
+        if not text.strip():
+            # try blocks mode for scanned/structured PDFs
+            text = page.get_text("blocks")
+            if isinstance(text, list):
+                text = "\n".join([b[4] for b in text if len(b) > 4 and isinstance(b[4], str)])
+        full_text += f"\n[Page {page_num + 1}]\n{text}"
+        page_chunks = chunk_text(text, filename, page_num + 1)
+        chunks.extend(page_chunks)
+        if page_num == 0:
+            pix = page.get_pixmap(matrix=fitz.Matrix(2.0, 2.0))
+            img = Image.frombytes("RGB", [pix.width, pix.height], pix.samples)
+            thumb_b64 = pil_to_b64(img, 300)
+    # store up to 80000 chars for large multi-section documents
+    return {"chunks": chunks, "thumb_b64": thumb_b64, "raw_text": full_text[:80000]}
+
+def process_image(raw: bytes, filename: str, client) -> dict:
+    pil_img = Image.open(io.BytesIO(raw)).convert("RGB")
+    b64 = pil_to_b64(pil_img)
+    thumb_b64 = pil_to_b64(pil_img, 300)
+    description = claude_vision(client, b64, "Describe this image in detail. Extract any text visible. Note objects, people, scenes, data, charts, or diagrams present.")
+    chunks = chunk_text(description, filename, 0)
+    return {"chunks": chunks, "thumb_b64": thumb_b64, "raw_text": description[:5000]}
+
+def process_video(raw: bytes, filename: str, client) -> dict:
+    if not HAS_CV2:
+        return {"chunks": [{"text": "Video processing unavailable", "source": filename, "page": 0}], "thumb_b64": None, "raw_text": ""}
+    import tempfile
+    suffix = Path(filename).suffix or ".mp4"
+    with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as tmp:
+        tmp.write(raw)
+        tmp_path = tmp.name
+    try:
+        cap = cv2.VideoCapture(tmp_path)
+        total = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+        sample_at = np.linspace(0, max(total - 1, 0), min(6, total), dtype=int)
+        descriptions = []
+        thumb_b64 = None
+        for i, idx in enumerate(sample_at):
+            cap.set(cv2.CAP_PROP_POS_FRAMES, idx)
+            ret, frame = cap.read()
+            if not ret:
+                continue
+            pil_img = Image.fromarray(cv2.cvtColor(frame, cv2.COLOR_BGR2RGB))
+            b64 = pil_to_b64(pil_img)
+            if i == 0:
+                thumb_b64 = pil_to_b64(pil_img, 300)
+            desc = claude_vision(client, b64, f"Frame {i+1} of a video. Describe what's happening. Note any text, people, objects, or key events.")
+            descriptions.append(f"[Frame {i+1}] {desc}")
+        cap.release()
+        os.unlink(tmp_path)
+        full_text = "\n\n".join(descriptions)
+        chunks = chunk_text(full_text, filename, 0)
+        return {"chunks": chunks, "thumb_b64": thumb_b64, "raw_text": full_text[:5000]}
+    except Exception as e:
+        os.unlink(tmp_path)
+        raise e
+
+def process_text(raw: bytes, filename: str) -> dict:
+    text = raw.decode("utf-8", errors="ignore")
+    chunks = chunk_text(text, filename, 0)
+    return {"chunks": chunks, "thumb_b64": None, "raw_text": text[:5000]}
+
+def summarize_section(client, section_text: str, section_label: str) -> str:
+    """Summarize a single section/batch of text."""
+    prompt = f"""Summarize this section of a document ({section_label}) in 3-4 sentences. 
+Capture all distinct topics, subjects, or subsections mentioned. Be specific, not generic.
+
+Text:
+{section_text}"""
+    try:
+        return claude_text(client, prompt)
+    except Exception as e:
+        return f"[Could not summarize this section: {e}]"
+
+def generate_summary_and_entities(client, raw_text: str, filename: str) -> dict:
+    BATCH_SIZE = 15000  # chars per batch, safely under token limits
+
+    if len(raw_text) <= BATCH_SIZE:
+        # Short document — single pass
+        content = raw_text
+        combined_summary_input = content
+    else:
+        # Long document — map-reduce: summarize each batch, then combine
+        batches = [raw_text[i:i + BATCH_SIZE] for i in range(0, len(raw_text), BATCH_SIZE)]
+        section_summaries = []
+        for idx, batch in enumerate(batches):
+            label = f"part {idx + 1} of {len(batches)}"
+            s = summarize_section(client, batch, label)
+            section_summaries.append(f"[{label}]: {s}")
+        combined_summary_input = "\n\n".join(section_summaries)
+
+    prompt = f"""Based on the following content (or section summaries) from "{filename}", produce a complete analysis.
+This document may cover MULTIPLE topics/sections/subjects — make sure your output covers ALL of them, not just the first part.
+
+Respond in JSON only (no markdown):
+{{
+  "summary": "Detailed 5-8 sentence summary that covers ALL major sections/subjects/topics found in the document",
+  "key_entities": ["entity1", "entity2", ...up to 20 entities, covering the whole document],
+  "topics": ["topic1", "topic2", ...up to 10 topics covering the full scope],
+  "file_type_detected": "what kind of document this is",
+  "key_sections": ["list ALL section/chapter/subject titles found in the document"],
+  "important_facts": ["fact1", "fact2", ...up to 10 specific facts, drawn from across the ENTIRE document"]
+}}
+
+Content:
+{combined_summary_input[:14000]}"""
+    try:
+        result = claude_text(client, prompt)
+        clean = result.strip()
+        if clean.startswith("```"):
+            clean = re.sub(r"```(?:json)?", "", clean).strip().rstrip("`").strip()
+        return json.loads(clean)
+    except Exception:
+        return {"summary": "Could not generate summary.", "key_entities": [], "topics": [], "file_type_detected": "unknown"}
+
+def find_connections(client) -> List[dict]:
+    if len(KB["files"]) < 2:
+        return []
+    summaries = "\n".join([f"- {name}: {info.get('summary','')}" for name, info in KB["files"].items()])
+    prompt = f"""Given these documents in a knowledge base, find meaningful connections between them.
+Respond in JSON only (no markdown):
+[{{"doc1": "filename1", "doc2": "filename2", "connection": "brief description of how they relate"}}]
+
+Documents:
+{summaries}"""
+    try:
+        result = claude_text(client, prompt)
+        clean = result.strip()
+        if clean.startswith("```"):
+            clean = re.sub(r"```(?:json)?", "", clean).strip().rstrip("`").strip()
+        return json.loads(clean)
+    except Exception:
+        return []
+
+# ── FastAPI ───────────────────────────────────────────────────────
+app = FastAPI(title="Cortex API")
+
+@app.post("/api/upload")
+async def upload(
+    file: UploadFile = File(...),
+    api_key: str = Form(...)
+):
+    if not api_key.strip():
+        raise HTTPException(400, "API key required")
+    raw = await file.read()
+    filename = file.filename or "upload"
+    ext = Path(filename).suffix.lower()
+    client = claude_client(api_key)
+
+    try:
+        if ext == ".pdf":
+            result = process_pdf(raw, filename, client)
+            ftype = "pdf"
+        elif ext in {".jpg", ".jpeg", ".png", ".webp", ".gif"}:
+            result = process_image(raw, filename, client)
+            ftype = "image"
+        elif ext in {".mp4", ".mov", ".avi", ".mkv", ".webm"}:
+            result = process_video(raw, filename, client)
+            ftype = "video"
+        else:
+            result = process_text(raw, filename)
+            ftype = "text"
+
+        meta = generate_summary_and_entities(client, result["raw_text"], filename)
+        chunks = result["chunks"]
+        if chunks and HAS_EMBEDDER:
+            vecs = embed_chunks(chunks)
+            for i, c in enumerate(chunks):
+                c["embedding"] = vecs[i].tolist()
+        else:
+            for c in chunks:
+                c["embedding"] = [0.0] * 384
+
+        KB["files"][filename] = {
+            "type": ftype,
+            "summary": meta.get("summary", ""),
+            "entities": meta.get("key_entities", []),
+            "topics": meta.get("topics", []),
+            "key_sections": meta.get("key_sections", []),
+            "important_facts": meta.get("important_facts", []),
+            "file_type_detected": meta.get("file_type_detected", ""),
+            "chunk_count": len(chunks),
+            "thumb_b64": result.get("thumb_b64"),
+            "preview": result.get("raw_text", "")[:5000],
+        }
+        old_chunks = [c for c in KB["chunks"] if c["source"] != filename]
+        for c in chunks:
+            c["embedding"] = np.array(c["embedding"], dtype="float32")
+        KB["chunks"] = old_chunks + chunks
+        rebuild_index()
+
+        connections = find_connections(client)
+
+        return JSONResponse({
+            "filename": filename,
+            "type": ftype,
+            "summary": meta.get("summary", ""),
+            "entities": meta.get("key_entities", []),
+            "topics": meta.get("topics", []),
+            "key_sections": meta.get("key_sections", []),
+            "important_facts": meta.get("important_facts", []),
+            "chunk_count": len(chunks),
+            "total_chunks": len(KB["chunks"]),
+            "connections": connections,
+            "thumb_b64": result.get("thumb_b64"),
+            "preview": result.get("raw_text", "")[:5000],
+        })
+    except Exception as e:
+        err = str(e)
+        if "401" in err or "invalid_api_key" in err or "auth" in err.lower():
+            raise HTTPException(401, "Invalid API key")
+        raise HTTPException(500, err)
+
+
+@app.post("/api/ask")
+async def ask(query: str = Form(...), api_key: str = Form(...)):
+    if not api_key.strip():
+        raise HTTPException(400, "API key required")
+    if not KB["chunks"]:
+        raise HTTPException(400, "No documents indexed yet")
+    client = claude_client(api_key)
+
+    # Detect broad "list all / summarize everything" queries
+    broad_keywords = ["list all", "all subjects", "all topics", "all courses", "all codes",
+                      "all units", "every subject", "complete list", "full list", "what are all",
+                      "how many", "entire", "overview", "syllabus contains", "subjects in"]
+    query_lower = query.lower()
+    is_broad = any(kw in query_lower for kw in broad_keywords)
+
+    if is_broad:
+        # For broad queries: use file summaries + first chunk of each page
+        # This gives a document-wide view without blowing token limits
+        summary_context = []
+        for fname, finfo in KB["files"].items():
+            summary_context.append(
+                f"[FILE: {fname}]\n"
+                f"Summary: {finfo.get('summary','')}\n"
+                f"Key Sections: {', '.join(finfo.get('key_sections', []))}\n"
+                f"Topics: {', '.join(finfo.get('topics', []))}\n"
+                f"Entities: {', '.join(finfo.get('key_entities', finfo.get('entities', [])))}"
+            )
+        # Also grab first chunk from every unique page for full coverage
+        seen_pages = set()
+        page_chunks = []
+        for c in KB["chunks"]:
+            key = (c["source"], c.get("page", 0))
+            if key not in seen_pages:
+                seen_pages.add(key)
+                page_chunks.append(f"[{c['source']} p.{c.get('page',0)}] {c['text'][:300]}")
+        context = "\n\n".join(summary_context) + "\n\nPER-PAGE EXCERPTS:\n" + "\n".join(page_chunks[:30])
+        source_file = list(KB["files"].keys())[0] if KB["files"] else "document"
+        source_hint = [{"file": source_file, "page": 0}]
+    else:
+        # For specific queries: use hybrid vector + keyword retrieval
+        relevant = retrieve(query, top_k=10)
+        context_parts = []
+        for c in relevant[:10]:
+            text = c["text"][:800]
+            context_parts.append(f"[Source: {c['source']}, Page: {c.get('page',0)}]\n{text}")
+        context = "\n\n".join(context_parts)
+        source_hint = [{"file": c["source"], "page": c.get("page", 0)} for c in relevant[:3]]
+
+    prompt = f"""You are Cortex, an intelligent document assistant. Answer the question using the provided context.
+Be specific, complete and detailed. If the question asks to "list all" something, make sure you include EVERY item found across ALL pages.
+Extract exact names, codes, titles from the context — do not summarize or omit items.
+Only say "not found" if truly absent after checking all context.
+
+Context:
+{context[:6000]}
+
+Question: {query}
+
+Respond in JSON only (no markdown backticks):
+{{"answer": "complete detailed answer here", "sources": [{{"file": "filename", "page": 0}}], "confidence": "high/medium/low"}}"""
+    try:
+        result = claude_text(client, prompt)
+        clean = result.strip()
+        if clean.startswith("```"):
+            clean = re.sub(r"```(?:json)?", "", clean).strip().rstrip("`").strip()
+        data = json.loads(clean)
+        return JSONResponse(data)
+    except Exception as e:
+        return JSONResponse({"answer": f"Error: {str(e)}", "sources": [], "confidence": "low"})
+
+@app.get("/api/status")
+async def status():
+    return JSONResponse({
+        "files": {k: {**v, "thumb_b64": None} for k, v in KB["files"].items()},
+        "total_chunks": len(KB["chunks"]),
+        "file_count": len(KB["files"]),
+    })
+
+@app.post("/api/connections")
+async def connections(api_key: str = Form(...)):
+    if not api_key.strip():
+        raise HTTPException(400, "API key required")
+    client = claude_client(api_key)
+    result = find_connections(client)
+    return JSONResponse({"connections": result})
+
+@app.delete("/api/file/{filename}")
+async def delete_file(filename: str):
+    if filename in KB["files"]:
+        del KB["files"][filename]
+        KB["chunks"] = [c for c in KB["chunks"] if c["source"] != filename]
+        rebuild_index()
+    return JSONResponse({"ok": True})
+
+STATIC_DIR = Path(__file__).parent / "static"
+app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
+
+@app.get("/")
+async def root():
+    return FileResponse(str(STATIC_DIR / "index.html"))
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,10 @@
+fastapi
+uvicorn[standard]
+python-multipart
+groq
+sentence-transformers
+faiss-cpu
+pymupdf
+opencv-python-headless
+numpy
+pillow

static/index.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+<title>Cortex — Multimodal Knowledge Intelligence</title>
+<link rel="stylesheet" href="/static/style.css"/>
+</head>
+<body>
+<div class="app">
+
+<aside class="sidebar">
+  <div class="logo">Cor<span>tex</span></div>
+
+  <div class="nav-label">Workspace</div>
+  <div class="nav-item active" data-page="knowledge"><i class="ti ti-brain" aria-hidden="true"></i>Knowledge Base</div>
+  <div class="nav-item" data-page="ask"><i class="ti ti-message-question" aria-hidden="true"></i>Ask Anything</div>
+  <div class="nav-item" data-page="summaries"><i class="ti ti-file-text" aria-hidden="true"></i>Summaries</div>
+  <div class="nav-item" data-page="connections"><i class="ti ti-topology-star" aria-hidden="true"></i>Connections</div>
+
+  <div class="nav-label">Files</div>
+  <div id="sidebar-files"></div>
+
+  <div class="sidebar-footer">
+    <div class="api-key-box">
+      <div class="api-key-label">Groq API Key</div>
+      <input class="api-key-input" type="password" id="apiKeyInput" placeholder="gsk_..."/>
+    </div>
+  </div>
+</aside>
+
+<main class="main">
+
+  <!-- KNOWLEDGE BASE -->
+  <div class="page active" id="page-knowledge">
+    <div class="page-header">
+      <h1>Knowledge Base</h1>
+      <p>Upload files across any format — Cortex reads, indexes and connects them intelligently</p>
+    </div>
+
+    <div class="stats-row">
+      <div class="stat-card">
+        <div class="stat-label">Documents</div>
+        <div class="stat-value" id="stat-docs">0</div>
+        <div class="stat-sub">indexed & ready</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Chunks</div>
+        <div class="stat-value" id="stat-chunks">0</div>
+        <div class="stat-sub">vector embeddings</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">File Types</div>
+        <div class="stat-value" id="stat-types">—</div>
+        <div class="stat-sub">in knowledge base</div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="upload-zone" id="uploadZone">
+        <div class="upload-icon"><i class="ti ti-cloud-upload" aria-hidden="true"></i></div>
+        <h3>Drop files to expand your knowledge base</h3>
+        <div class="hint">Cortex understands all of these natively</div>
+        <div class="file-types">
+          <span class="badge">PDF</span>
+          <span class="badge">Images</span>
+          <span class="badge">Video</span>
+          <span class="badge">TXT</span>
+          <span class="badge">MD</span>
+        </div>
+        <input type="file" id="fileInput" accept=".pdf,.jpg,.jpeg,.png,.webp,.gif,.mp4,.mov,.avi,.mkv,.webm,.txt,.md"/>
+      </div>
+      <div class="status-bar" id="uploadStatus"></div>
+    </div>
+
+    <div id="files-grid-wrap">
+      <div class="card-label" style="margin-bottom:10px;">Indexed Files</div>
+      <div class="files-grid" id="filesGrid">
+        <div class="empty-state" style="grid-column:1/-1;">
+          <i class="ti ti-inbox" aria-hidden="true"></i>
+          <p>No files yet — upload something to get started</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ASK ANYTHING -->
+  <div class="page" id="page-ask">
+    <div class="page-header">
+      <h1>Ask Anything</h1>
+      <p>Ask questions across all your documents — Cortex finds the answer and cites its sources</p>
+    </div>
+
+    <div class="card">
+      <div class="card-label">Question</div>
+      <div class="query-row">
+        <input class="query-input" type="text" id="queryInput" placeholder="What are the key findings? Summarize the main argument. Compare the two documents..."/>
+        <button class="btn btn-dark" id="askBtn" disabled><i class="ti ti-arrow-right" aria-hidden="true"></i>Ask</button>
+      </div>
+      <div class="chat-history" id="chatHistory" style="margin-top:16px;display:none;"></div>
+    </div>
+
+    <div class="card" id="suggestionsCard">
+      <div class="card-label">Try asking</div>
+      <div style="display:flex;flex-wrap:wrap;gap:7px;">
+        <button class="btn btn-outline btn-sm" onclick="setQuery(this)">What are the main topics covered?</button>
+        <button class="btn btn-outline btn-sm" onclick="setQuery(this)">Summarize the key findings</button>
+        <button class="btn btn-outline btn-sm" onclick="setQuery(this)">What entities are mentioned most?</button>
+        <button class="btn btn-outline btn-sm" onclick="setQuery(this)">What connections exist between documents?</button>
+        <button class="btn btn-outline btn-sm" onclick="setQuery(this)">What are the action items?</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- SUMMARIES -->
+  <div class="page" id="page-summaries">
+    <div class="page-header">
+      <h1>Summaries</h1>
+      <p>Auto-generated intelligence for each file in your knowledge base</p>
+    </div>
+    <div class="summary-list" id="summaryList">
+      <div class="empty-state">
+        <i class="ti ti-file-text" aria-hidden="true"></i>
+        <p>Upload files to see auto-generated summaries and entities</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- CONNECTIONS -->
+  <div class="page" id="page-connections">
+    <div class="page-header">
+      <h1>Connections</h1>
+      <p>Cross-document links and relationships discovered by Cortex</p>
+    </div>
+    <div class="conn-list" id="connList">
+      <div class="empty-state">
+        <i class="ti ti-topology-star" aria-hidden="true"></i>
+        <p>Upload at least two files to discover cross-document connections</p>
+      </div>
+    </div>
+  </div>
+
+</main>
+</div>
+
+<footer>CORTEX · MULTIMODAL KNOWLEDGE INTELLIGENCE · BUILT BY YASHIKA SAXENA</footer>
+
+<!-- FILE DETAIL MODAL -->
+<div id="fileModal" style="display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.4); backdrop-filter:blur(4px); padding:24px; overflow-y:auto;">
+  <div style="max-width:720px; margin:0 auto; background:#f5f0e8; border-radius:18px; border:0.5px solid #ddd0be; overflow:hidden;">
+    <div style="padding:20px 24px; border-bottom:0.5px solid #ecdecb; display:flex; align-items:center; justify-content:space-between;">
+      <div>
+        <div id="modal-type" style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#c17a4a; text-transform:uppercase; margin-bottom:4px;"></div>
+        <div id="modal-filename" style="font-family:'Playfair Display',serif; font-size:20px; font-weight:500; color:#1a1209;"></div>
+      </div>
+      <button onclick="closeModal()" style="background:none; border:0.5px solid #ddd0be; border-radius:8px; padding:8px 14px; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; color:#5a4a38;">Close</button>
+    </div>
+
+    <div id="modal-thumb-wrap" style="display:none;">
+      <img id="modal-thumb" style="width:100%; max-height:220px; object-fit:cover; display:block;"/>
+    </div>
+
+    <div style="padding:20px 24px; display:flex; flex-direction:column; gap:18px;">
+      <div>
+        <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Summary</div>
+        <div id="modal-summary" style="font-family:'DM Sans',sans-serif; font-size:14px; color:#3d2e1f; line-height:1.8;"></div>
+      </div>
+
+      <div id="modal-facts-wrap">
+        <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Key Facts</div>
+        <div id="modal-facts" style="display:flex; flex-direction:column; gap:6px;"></div>
+      </div>
+
+      <div id="modal-sections-wrap">
+        <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Sections</div>
+        <div id="modal-sections" style="display:flex; flex-wrap:wrap; gap:6px;"></div>
+      </div>
+
+      <div>
+        <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Entities</div>
+        <div id="modal-entities" style="display:flex; flex-wrap:wrap; gap:5px;"></div>
+      </div>
+
+      <div>
+        <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Topics</div>
+        <div id="modal-topics" style="display:flex; flex-wrap:wrap; gap:5px;"></div>
+      </div>
+
+      <div>
+        <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Content Preview</div>
+        <div id="modal-preview" style="font-family:'JetBrains Mono',monospace; font-size:11px; color:#7a6a58; line-height:1.7; background:#fff; border:0.5px solid #ddd0be; border-radius:8px; padding:14px; max-height:200px; overflow-y:auto; white-space:pre-wrap;"></div>
+      </div>
+
+      <div style="display:flex; gap:8px;">
+        <button class="btn btn-dark" onclick="askAboutFile(currentModalFile)"><i class="ti ti-message-question" aria-hidden="true"></i> Ask about this file</button>
+        <button class="btn btn-outline" onclick="closeModal()">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="/static/script.js"></script>
+</body>
+</html>

static/script.js

@@ -0,0 +1,292 @@
+// ── State ─────────────────────────────────────────────────────────
+const state = { files: {}, connections: [], chatHistory: [] };
+
+// ── Navigation ────────────────────────────────────────────────────
+function showPage(name) {
+  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+  document.querySelectorAll('.nav-item[data-page]').forEach(n => n.classList.remove('active'));
+  document.getElementById('page-' + name).classList.add('active');
+  document.querySelector(`.nav-item[data-page="${name}"]`)?.classList.add('active');
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+document.querySelectorAll('.nav-item[data-page]').forEach(item => {
+  item.addEventListener('click', () => showPage(item.dataset.page));
+});
+
+// ── API key ───────────────────────────────────────────────────────
+function getKey() { return document.getElementById('apiKeyInput').value.trim(); }
+
+// ── Upload ────────────────────────────────────────────────────────
+const uploadZone = document.getElementById('uploadZone');
+const fileInput = document.getElementById('fileInput');
+const uploadStatus = document.getElementById('uploadStatus');
+
+uploadZone.addEventListener('click', () => fileInput.click());
+uploadZone.addEventListener('dragover', e => { e.preventDefault(); uploadZone.classList.add('dragover'); });
+uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('dragover'));
+uploadZone.addEventListener('drop', e => {
+  e.preventDefault(); uploadZone.classList.remove('dragover');
+  if (e.dataTransfer.files[0]) handleUpload(e.dataTransfer.files[0]);
+});
+fileInput.addEventListener('change', () => { if (fileInput.files[0]) handleUpload(fileInput.files[0]); });
+
+function showStatus(msg, show = true) {
+  uploadStatus.style.display = show ? 'block' : 'none';
+  uploadStatus.textContent = msg;
+}
+
+async function handleUpload(file) {
+  const key = getKey();
+  if (!key) { alert('Please enter your Claude API key in the sidebar first.'); return; }
+  showStatus(`⏳ Processing ${file.name} — this may take 20-60 seconds...`);
+  const fd = new FormData();
+  fd.append('file', file);
+  fd.append('api_key', key);
+  try {
+    const res = await fetch('/api/upload', { method: 'POST', body: fd });
+    const data = await res.json();
+    if (!res.ok) { showStatus(`Error: ${data.detail || 'Upload failed'}`); return; }
+    state.files[data.filename] = data;
+    if (data.connections) state.connections = data.connections;
+    showStatus(`✓ ${data.filename} indexed — ${data.chunk_count} chunks, summary generated`);
+    updateAll();
+    document.getElementById('askBtn').disabled = false;
+  } catch (e) {
+    showStatus('Upload failed: ' + e.message);
+  } finally {
+    fileInput.value = '';
+  }
+}
+
+// ── Update UI ─────────────────────────────────────────────────────
+function updateAll() {
+  updateStats();
+  updateSidebarFiles();
+  updateFilesGrid();
+  updateSummaries();
+  updateConnections();
+}
+
+function updateStats() {
+  const files = Object.values(state.files);
+  document.getElementById('stat-docs').textContent = files.length;
+  const totalChunks = files.reduce((s, f) => s + (f.chunk_count || 0), 0);
+  document.getElementById('stat-chunks').textContent = totalChunks;
+  const types = [...new Set(files.map(f => f.type?.toUpperCase()))];
+  document.getElementById('stat-types').textContent = types.length ? types.join(', ') : '—';
+}
+
+function fileIcon(type) {
+  const icons = { pdf: 'ti-file-type-pdf', image: 'ti-photo', video: 'ti-video', text: 'ti-file-text' };
+  return icons[type] || 'ti-file';
+}
+
+function updateSidebarFiles() {
+  const container = document.getElementById('sidebar-files');
+  const files = Object.entries(state.files);
+  if (!files.length) { container.innerHTML = ''; return; }
+  container.innerHTML = files.map(([name, f]) => `
+    <div class="nav-item" onclick="showPage('summaries')">
+      <i class="ti ${fileIcon(f.type)}" aria-hidden="true"></i>
+      <span class="file-name">${name}</span>
+      <button class="del-btn" onclick="event.stopPropagation();deleteFile('${name}')" title="Remove">✕</button>
+    </div>
+  `).join('');
+}
+
+function updateFilesGrid() {
+  const grid = document.getElementById('filesGrid');
+  const files = Object.entries(state.files);
+  if (!files.length) {
+    grid.innerHTML = `<div class="empty-state" style="grid-column:1/-1;"><i class="ti ti-inbox" aria-hidden="true"></i><p>No files yet — upload something to get started</p></div>`;
+    return;
+  }
+  grid.innerHTML = files.map(([name, f]) => `
+    <div class="file-card" onclick="openModal('${name.replace(/'/g, "\\'")}')" style="cursor:pointer;">
+      <div class="file-thumb">
+        ${f.thumb_b64 ? `<img src="data:image/jpeg;base64,${f.thumb_b64}" alt="${name}"/>` : `<i class="ti ${fileIcon(f.type)}" aria-hidden="true"></i>`}
+      </div>
+      <div class="file-info">
+        <div class="file-name">${name}</div>
+        <div class="file-type">${f.type || 'file'}</div>
+        <div class="file-meta">${f.chunk_count || 0} chunks · click to explore</div>
+      </div>
+    </div>
+  `).join('');
+}
+
+function updateSummaries() {
+  const list = document.getElementById('summaryList');
+  const files = Object.entries(state.files);
+  if (!files.length) {
+    list.innerHTML = `<div class="empty-state"><i class="ti ti-file-text" aria-hidden="true"></i><p>Upload files to see auto-generated summaries and entities</p></div>`;
+    return;
+  }
+  list.innerHTML = files.map(([name, f]) => `
+    <div class="summary-item">
+      <div class="summary-filename"><i class="ti ${fileIcon(f.type)}" aria-hidden="true"></i>${name}</div>
+      <div class="summary-text">${f.summary || 'No summary available.'}</div>
+      ${f.entities?.length ? `<div class="entity-row">${f.entities.map(e => `<span class="entity-chip">${e}</span>`).join('')}</div>` : ''}
+      ${f.topics?.length ? `<div class="entity-row" style="margin-top:6px;">${f.topics.map(t => `<span class="entity-chip" style="background:#eef4f0;border-color:#c4d8ca;color:#4a7a5a;">${t}</span>`).join('')}</div>` : ''}
+    </div>
+  `).join('');
+}
+
+function updateConnections() {
+  const list = document.getElementById('connList');
+  if (!state.connections.length) {
+    list.innerHTML = `<div class="empty-state"><i class="ti ti-topology-star" aria-hidden="true"></i><p>Upload at least two files to discover cross-document connections</p></div>`;
+    return;
+  }
+  list.innerHTML = state.connections.map(c => `
+    <div class="conn-item">
+      <div class="conn-icon"><i class="ti ti-link" aria-hidden="true"></i></div>
+      <div>
+        <div class="conn-docs">${c.doc1} ↔ ${c.doc2}</div>
+        <div class="conn-text">${c.connection}</div>
+      </div>
+    </div>
+  `).join('');
+}
+
+// ── Ask ───────────────────────────────────────────────────────────
+const askBtn = document.getElementById('askBtn');
+const queryInput = document.getElementById('queryInput');
+const chatHistory = document.getElementById('chatHistory');
+
+askBtn.addEventListener('click', runAsk);
+queryInput.addEventListener('keydown', e => { if (e.key === 'Enter' && !askBtn.disabled) runAsk(); });
+
+async function runAsk() {
+  const query = queryInput.value.trim();
+  if (!query) return;
+  const key = getKey();
+  if (!key) { alert('Please enter your Claude API key first.'); return; }
+  askBtn.disabled = true;
+  askBtn.innerHTML = '<i class="ti ti-loader" aria-hidden="true"></i> Thinking...';
+  chatHistory.style.display = 'flex';
+  document.getElementById('suggestionsCard').style.display = 'none';
+  chatHistory.innerHTML += `<div class="chat-q">${query}</div>`;
+  chatHistory.scrollTop = chatHistory.scrollHeight;
+
+  const fd = new FormData();
+  fd.append('query', query);
+  fd.append('api_key', key);
+
+  try {
+    const res = await fetch('/api/ask', { method: 'POST', body: fd });
+    const data = await res.json();
+    const confClass = { high: 'conf-high', medium: 'conf-medium', low: 'conf-low' }[data.confidence] || 'conf-medium';
+    const sources = (data.sources || []).map(s => `<span class="source-chip"><i class="ti ${fileIcon(s.file?.split('.').pop())} " aria-hidden="true"></i>${s.file}${s.page ? ` p.${s.page}` : ''}</span>`).join('');
+    chatHistory.innerHTML += `
+      <div class="chat-a">
+        <span class="confidence-badge ${confClass}">${data.confidence || 'medium'}</span>
+        <div style="margin-top:8px;">${data.answer || 'No answer found.'}</div>
+        ${sources ? `<div class="src">${sources}</div>` : ''}
+      </div>`;
+    chatHistory.scrollTop = chatHistory.scrollHeight;
+    queryInput.value = '';
+  } catch (e) {
+    chatHistory.innerHTML += `<div class="chat-a" style="color:var(--danger);">Error: ${e.message}</div>`;
+  } finally {
+    askBtn.disabled = false;
+    askBtn.innerHTML = '<i class="ti ti-arrow-right" aria-hidden="true"></i>Ask';
+  }
+}
+
+function setQuery(el) { queryInput.value = el.textContent; queryInput.focus(); }
+
+// ── Delete file ───────────────────────────────────────────────────
+async function deleteFile(name) {
+  await fetch(`/api/file/${encodeURIComponent(name)}`, { method: 'DELETE' });
+  delete state.files[name];
+  updateAll();
+  if (!Object.keys(state.files).length) document.getElementById('askBtn').disabled = true;
+}
+
+// ── File detail modal ──��──────────────────────────────────────────
+let currentModalFile = null;
+
+function openModal(name) {
+  const f = state.files[name];
+  if (!f) return;
+  currentModalFile = name;
+
+  document.getElementById('modal-filename').textContent = name;
+  document.getElementById('modal-type').textContent = (f.type || 'file').toUpperCase() + ' · ' + (f.file_type_detected || '');
+  document.getElementById('modal-summary').textContent = f.summary || 'No summary available.';
+
+  // thumb
+  const thumbWrap = document.getElementById('modal-thumb-wrap');
+  const thumbImg = document.getElementById('modal-thumb');
+  if (f.thumb_b64) {
+    thumbImg.src = `data:image/jpeg;base64,${f.thumb_b64}`;
+    thumbWrap.style.display = 'block';
+  } else {
+    thumbWrap.style.display = 'none';
+  }
+
+  // facts
+  const facts = f.important_facts || [];
+  const factsWrap = document.getElementById('modal-facts-wrap');
+  const factsEl = document.getElementById('modal-facts');
+  if (facts.length) {
+    factsEl.innerHTML = facts.map(fact => `<div style="display:flex;gap:8px;align-items:flex-start;"><span style="color:#c17a4a;flex-shrink:0;">→</span><span style="font-family:'DM Sans',sans-serif;font-size:13px;color:#3d2e1f;line-height:1.6;">${fact}</span></div>`).join('');
+    factsWrap.style.display = 'block';
+  } else {
+    factsWrap.style.display = 'none';
+  }
+
+  // sections
+  const sections = f.key_sections || [];
+  const sectionsWrap = document.getElementById('modal-sections-wrap');
+  const sectionsEl = document.getElementById('modal-sections');
+  if (sections.length) {
+    sectionsEl.innerHTML = sections.map(s => `<span class="badge" style="font-size:11px;">${s}</span>`).join('');
+    sectionsWrap.style.display = 'block';
+  } else {
+    sectionsWrap.style.display = 'none';
+  }
+
+  // entities
+  document.getElementById('modal-entities').innerHTML = (f.entities || []).map(e => `<span class="entity-chip">${e}</span>`).join('') || '<span style="font-size:12px;color:#a89a88;">None extracted</span>';
+
+  // topics
+  document.getElementById('modal-topics').innerHTML = (f.topics || []).map(t => `<span class="entity-chip" style="background:#eef4f0;border-color:#c4d8ca;color:#4a7a5a;">${t}</span>`).join('') || '<span style="font-size:12px;color:#a89a88;">None extracted</span>';
+
+  // preview
+  document.getElementById('modal-preview').textContent = f.preview || 'No content preview available.';
+
+  document.getElementById('fileModal').style.display = 'block';
+  document.body.style.overflow = 'hidden';
+}
+
+function closeModal() {
+  document.getElementById('fileModal').style.display = 'none';
+  document.body.style.overflow = '';
+  currentModalFile = null;
+}
+
+function askAboutFile(name) {
+  closeModal();
+  showPage('ask');
+  document.getElementById('queryInput').value = `Tell me everything important about ${name}`;
+  document.getElementById('queryInput').focus();
+}
+
+// close modal on backdrop click
+document.getElementById('fileModal')?.addEventListener('click', function(e) {
+  if (e.target === this) closeModal();
+});
+async function loadStatus() {
+  try {
+    const res = await fetch('/api/status');
+    const data = await res.json();
+    for (const [name, info] of Object.entries(data.files || {})) {
+      if (!state.files[name]) state.files[name] = info;
+    }
+    updateAll();
+    if (Object.keys(state.files).length) document.getElementById('askBtn').disabled = false;
+  } catch (e) {}
+}
+loadStatus();

static/style.css

@@ -0,0 +1,164 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=DM+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');
+
+*{margin:0;padding:0;box-sizing:border-box;}
+
+:root{
+  --bg:#f5f0e8;
+  --sidebar:#2c1f14;
+  --sidebar-hover:rgba(255,255,255,0.05);
+  --sidebar-active:rgba(193,122,74,0.15);
+  --sidebar-active-border:rgba(193,122,74,0.3);
+  --sidebar-text:#a89a88;
+  --sidebar-text-active:#e8c9a8;
+  --sidebar-label:#7a6a58;
+  --accent:#c17a4a;
+  --accent-light:#f0e8d8;
+  --card:#ffffff;
+  --card-border:#ddd0be;
+  --text:#1a1209;
+  --text-2:#5a4a38;
+  --text-3:#a89a88;
+  --input-bg:#f5f0e8;
+  --tag-bg:#f0e8d8;
+  --tag-border:#d4c4ae;
+  --tag-text:#7a6a58;
+  --divider:#ecdecb;
+  --danger:#c0392b;
+  --danger-bg:#fdf0ee;
+}
+
+body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
+
+.app{display:flex;min-height:100vh;}
+
+/* SIDEBAR */
+.sidebar{width:230px;flex-shrink:0;background:var(--sidebar);padding:24px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto;}
+.logo{font-family:'Playfair Display',serif;font-size:22px;color:#f5f0e8;letter-spacing:0.02em;margin-bottom:32px;padding-left:8px;}
+.logo span{color:var(--accent);}
+.nav-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.2em;color:var(--sidebar-label);text-transform:uppercase;padding:0 8px;margin:18px 0 6px;}
+.nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--sidebar-text);cursor:pointer;border:0.5px solid transparent;transition:all 0.15s;margin-bottom:1px;}
+.nav-item i{font-size:15px;width:16px;flex-shrink:0;}
+.nav-item:hover{background:var(--sidebar-hover);color:#d4c4b0;}
+.nav-item.active{background:var(--sidebar-active);border-color:var(--sidebar-active-border);color:var(--sidebar-text-active);}
+.nav-item .file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
+.nav-item .del-btn{opacity:0;font-size:12px;color:var(--sidebar-label);background:none;border:none;cursor:pointer;padding:0 2px;line-height:1;}
+.nav-item:hover .del-btn{opacity:1;}
+.nav-item .del-btn:hover{color:#e87a6a;}
+
+.sidebar-footer{margin-top:auto;padding-top:16px;border-top:0.5px solid rgba(255,255,255,0.08);}
+.api-key-box{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.1);border-radius:10px;padding:12px 14px;}
+.api-key-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.18em;color:var(--sidebar-label);text-transform:uppercase;margin-bottom:6px;}
+.api-key-input{width:100%;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.12);border-radius:6px;padding:7px 9px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#d4c4b0;outline:none;transition:border-color 0.15s;}
+.api-key-input:focus{border-color:rgba(193,122,74,0.5);}
+.api-key-input::placeholder{color:var(--sidebar-label);}
+
+/* MAIN */
+.main{flex:1;padding:36px 32px;min-width:0;display:flex;flex-direction:column;}
+.page{display:none;flex-direction:column;gap:20px;}
+.page.active{display:flex;}
+
+.page-header{margin-bottom:4px;}
+.page-header h1{font-family:'Playfair Display',serif;font-size:26px;font-weight:500;color:var(--text);letter-spacing:-0.01em;margin-bottom:6px;}
+.page-header p{font-size:13px;color:var(--text-3);}
+
+/* CARDS */
+.card{background:var(--card);border:0.5px solid var(--card-border);border-radius:14px;padding:20px 22px;}
+.card-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.2em;color:var(--text-3);text-transform:uppercase;margin-bottom:12px;}
+
+/* STATS */
+.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
+.stat-card{background:var(--card);border:0.5px solid var(--card-border);border-radius:12px;padding:18px 20px;}
+.stat-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.2em;color:var(--text-3);text-transform:uppercase;margin-bottom:10px;}
+.stat-value{font-family:'Playfair Display',serif;font-size:28px;color:var(--text);line-height:1;}
+.stat-sub{font-size:11px;color:var(--text-3);margin-top:5px;}
+
+/* UPLOAD */
+.upload-zone{border:1.5px dashed var(--card-border);border-radius:12px;padding:32px;text-align:center;cursor:pointer;background:rgba(255,255,255,0.5);transition:all 0.2s;margin-bottom:14px;}
+.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent);background:#fffcf8;}
+.upload-zone input{display:none;}
+.upload-icon{font-size:28px;color:var(--text-3);margin-bottom:12px;}
+.upload-zone h3{font-family:'Playfair Display',serif;font-size:16px;font-weight:500;color:var(--text);margin-bottom:4px;}
+.upload-zone .hint{font-size:12px;color:var(--text-3);margin-bottom:14px;}
+.file-types{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
+.badge{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--tag-bg);border:0.5px solid var(--tag-border);border-radius:5px;padding:3px 9px;color:var(--tag-text);}
+
+/* STATUS BAR */
+.status-bar{display:none;padding:10px 14px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--accent-light);border:0.5px solid var(--tag-border);color:var(--text-2);margin-top:10px;}
+
+/* BUTTONS */
+.btn{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;padding:10px 18px;border-radius:9px;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:7px;border:none;}
+.btn-dark{background:var(--sidebar);color:#f5f0e8;}
+.btn-dark:hover{background:#3d2e1f;}
+.btn-dark:disabled{opacity:0.4;cursor:not-allowed;}
+.btn-outline{background:transparent;color:var(--text-2);border:0.5px solid var(--card-border);}
+.btn-outline:hover{background:var(--accent-light);}
+.btn-full{width:100%;justify-content:center;}
+.btn-sm{padding:6px 12px;font-size:12px;}
+
+/* SEARCH/QUERY */
+.query-row{display:flex;gap:8px;align-items:stretch;}
+.query-input{flex:1;background:var(--input-bg);border:0.5px solid var(--card-border);border-radius:9px;padding:10px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text);outline:none;transition:border-color 0.15s;}
+.query-input:focus{border-color:var(--accent);}
+.query-input::placeholder{color:var(--text-3);}
+
+/* ANSWER */
+.answer-block{margin-top:16px;padding-top:16px;border-top:0.5px solid var(--divider);}
+.answer-text{font-size:14px;color:var(--text-2);line-height:1.8;margin-bottom:12px;}
+.sources-row{display:flex;flex-wrap:wrap;gap:6px;}
+.source-chip{display:inline-flex;align-items:center;gap:5px;background:var(--tag-bg);border:0.5px solid var(--tag-border);border-radius:6px;padding:4px 10px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--tag-text);}
+.source-chip i{font-size:12px;}
+.confidence-badge{font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 8px;border-radius:4px;margin-left:8px;}
+.conf-high{background:#eaf6ee;color:#2a7a4a;}
+.conf-medium{background:#fef6e4;color:#8a6010;}
+.conf-low{background:#fdf0ee;color:#c0392b;}
+
+/* FILE CARDS */
+.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
+.file-card{background:var(--card);border:0.5px solid var(--card-border);border-radius:12px;overflow:hidden;transition:border-color 0.15s;}
+.file-card:hover{border-color:var(--accent);}
+.file-thumb{width:100%;height:100px;object-fit:cover;background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--text-3);}
+.file-thumb img{width:100%;height:100%;object-fit:cover;}
+.file-info{padding:12px 14px;}
+.file-name{font-size:12px;font-weight:500;color:var(--text);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.file-type{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.1em;}
+.file-meta{font-size:11px;color:var(--text-3);margin-top:6px;}
+
+/* SUMMARY */
+.summary-list{display:flex;flex-direction:column;gap:14px;}
+.summary-item{background:var(--card);border:0.5px solid var(--card-border);border-radius:12px;padding:18px 20px;}
+.summary-filename{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;color:var(--accent);text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
+.summary-text{font-size:13px;color:var(--text-2);line-height:1.75;margin-bottom:12px;}
+.entity-row{display:flex;flex-wrap:wrap;gap:5px;}
+.entity-chip{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--tag-bg);border:0.5px solid var(--tag-border);border-radius:4px;padding:2px 8px;color:var(--tag-text);}
+
+/* CONNECTIONS */
+.conn-list{display:flex;flex-direction:column;gap:12px;}
+.conn-item{background:var(--card);border:0.5px solid var(--card-border);border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;}
+.conn-icon{width:36px;height:36px;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);font-size:16px;}
+.conn-docs{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent);margin-bottom:5px;}
+.conn-text{font-size:13px;color:var(--text-2);line-height:1.6;}
+
+/* EMPTY STATE */
+.empty-state{text-align:center;padding:48px 20px;color:var(--text-3);}
+.empty-state i{font-size:36px;display:block;margin-bottom:12px;opacity:0.4;}
+.empty-state p{font-size:13px;}
+
+/* CHAT HISTORY */
+.chat-history{display:flex;flex-direction:column;gap:12px;max-height:420px;overflow-y:auto;margin-bottom:14px;padding-right:4px;}
+.chat-q{background:var(--accent-light);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--text-2);align-self:flex-end;max-width:80%;border:0.5px solid var(--tag-border);}
+.chat-a{background:var(--card);border:0.5px solid var(--card-border);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--text-2);line-height:1.75;}
+.chat-a .src{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px;}
+
+/* DIVIDER */
+.or-divider{text-align:center;position:relative;margin:12px 0;}
+.or-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:0.5px;background:var(--card-border);}
+.or-divider span{background:var(--bg);position:relative;padding:0 10px;font-size:11px;color:var(--text-3);font-family:'JetBrains Mono',monospace;}
+
+footer{text-align:center;padding:20px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-3);letter-spacing:0.12em;border-top:0.5px solid var(--card-border);margin-top:auto;}
+
+@media(max-width:768px){
+  .sidebar{display:none;}
+  .main{padding:16px;}
+  .stats-row{grid-template-columns:1fr 1fr;}
+  .files-grid{grid-template-columns:1fr 1fr;}
+}