First commit

.gitignore

@@ -0,0 +1,11 @@
+.vscode
+.env
+venv
+__pycache__
+.venv
+.env.example
+*.pyc
+*.pyo
+*.pyd
+.Python
+data

Dockerfile

@@ -0,0 +1,31 @@
+# Dockerfile
+
+FROM python:3.11-slim
+
+# System dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements first (layer caching)
+COPY requirements.txt .
+
+# Install Python dependencies (no GPU on HF Spaces)
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Pre-download embedding model during build
+RUN python3 -c "from sentence_transformers import SentenceTransformer; SentenceTransformer('intfloat/multilingual-e5-large')"
+
+# Copy project files
+COPY . .
+
+# HuggingFace Spaces runs on port 7860
+EXPOSE 7860
+
+# Run Flask app
+CMD ["python3", "app.py"]

app.py

@@ -0,0 +1,38 @@
+# app.py
+
+import os
+from flask import Flask, request, jsonify, render_template
+from dotenv import load_dotenv
+from chain.qa_chain import run_chain
+
+load_dotenv()
+
+app = Flask(__name__)
+
+# ── Routes ────────────────────────────────────────────────────────────────────
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/chat", methods=["POST"])
+def chat():
+    data  = request.get_json()
+    query = data.get("query", "").strip()
+    topic = data.get("topic", None) or None   # empty string → None
+
+    if not query:
+        return jsonify({"error": "Query is empty."}), 400
+
+    try:
+        response = run_chain(query, topic=topic)
+        return jsonify({"response": response})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+# ── Run ───────────────────────────────────────────────────────────────────────
+
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=7860)

chain/qa_chain.py

@@ -0,0 +1,102 @@
+# chain/qa_chain.py
+
+import os
+from dotenv import load_dotenv
+from openai import OpenAI
+from rag.retriever import retrieve, format_context
+
+load_dotenv()
+
+# ── Config ───────────────────────────────────────────────────────────────────
+OPENROUTER_API_KEY = os.getenv("OPENROUTER_API_KEY")
+MODEL              = "openai/gpt-oss-120b"
+MAX_TOKENS         = 2048
+
+# ── OpenRouter Client ─────────────────────────────────────────────────────────
+client = OpenAI(
+    api_key  = OPENROUTER_API_KEY,
+    base_url = "https://openrouter.ai/api/v1"
+)
+
+# ── System Prompt ─────────────────────────────────────────────────────────────
+SYSTEM_PROMPT = """You are Study Saathi — a friendly and smart study assistant.
+You help students understand their Operating Systems notes.
+
+Rules you must follow:
+- Answer ONLY from the provided context. Never use outside knowledge.
+- If the answer is not in the context, say: "Yeh topic notes mein nahi mila."
+- Explain in simple Roman Urdu, Urdu, or English — based on what the user uses.
+- If user says that you have to give explaination, try not to use bullet points, use simple language, examples in plain text.
+- Use markdown formatting: headings, bullet points, bold, tables where helpful.
+- Keep explanations clear and student-friendly.
+- For MCQs: generate exactly the number asked, only from the provided context.
+- For MCQ answer keys: always return them in a markdown table.
+"""
+
+# ── Build Prompt ──────────────────────────────────────────────────────────────
+def build_prompt(query: str, context: str) -> str:
+    return f"""Use the following context from the student's notes to answer the question.
+
+--- CONTEXT START ---
+{context}
+--- CONTEXT END ---
+
+Student's Question: {query}
+"""
+
+# ── Detect MCQ Request ────────────────────────────────────────────────────────
+def extract_mcq_count(query: str):
+    """Returns number of MCQs requested, or None if not an MCQ request."""
+    import re
+    match = re.search(r'(\d+)\s*(mcq|question|mcqs|questions)', query.lower())
+    return int(match.group(1)) if match else None
+
+# ── Main Chain ────────────────────────────────────────────────────────────────
+def run_chain(query: str, topic: str = None) -> str:
+    """
+    Full RAG chain:
+    1. Retrieve chunks from Pinecone
+    2. Format context
+    3. Send to gpt-oss-120b via OpenRouter
+    4. Return response
+    """
+    mcq_count = extract_mcq_count(query)
+
+    # fetch more chunks for MCQ generation
+    top_k  = 10 if mcq_count else 5
+    chunks  = retrieve(query, topic=topic, top_k=top_k)
+
+    if not chunks:
+        return "Koi relevant content nahi mila notes mein. Please topic check karein."
+
+    context = format_context(chunks)
+    prompt  = build_prompt(query, context)
+
+    # inject MCQ instruction into prompt if needed
+    if mcq_count:
+        prompt += f"\n\nIMPORTANT: Generate exactly {mcq_count} MCQs from the context above. \
+Format each MCQ as:\n**Q1.** Question\n- A) option\n- B) option\n- C) option\n- D) option\
+\n\nAfter all MCQs, provide the answer key in a markdown table with columns: | Q# | Answer | Explanation |"
+
+    messages = [
+        {"role": "system", "content": SYSTEM_PROMPT},
+        {"role": "user",   "content": prompt}
+    ]
+
+    response = client.chat.completions.create(
+        model      = MODEL,
+        messages   = messages,
+        max_tokens = MAX_TOKENS,
+    )
+
+    return response.choices[0].message.content
+
+
+# ── Quick Test ────────────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    query = "Explain Process Registers in simple words"
+    topic = "ch-01-updated"
+
+    print("[INFO] Running chain...\n")
+    result = run_chain(query, topic=topic)
+    print(result)

rag/ingest.py

@@ -0,0 +1,121 @@
+# rag/ingest.py
+
+import os
+import torch
+from dotenv import load_dotenv
+from pinecone import Pinecone, ServerlessSpec
+from langchain_community.document_loaders import PyPDFLoader, TextLoader
+from langchain.text_splitter import RecursiveCharacterTextSplitter
+from sentence_transformers import SentenceTransformer
+from tqdm import tqdm
+
+load_dotenv()
+
+# ── Config ──────────────────────────────────────────────────────────────────
+PINECONE_API_KEY   = os.getenv("PINECONE_API_KEY")
+PINECONE_INDEX     = os.getenv("PINECONE_INDEX", "study-saathi")
+EMBEDDING_MODEL    = "intfloat/multilingual-e5-large"
+DATA_DIR           = "data/os_notes"
+CHUNK_SIZE         = 512
+CHUNK_OVERLAP      = 64
+BATCH_SIZE         = 32
+DIMENSION          = 1024   # multilingual-e5-large output dim
+
+# ── Device ──────────────────────────────────────────────────────────────────
+device = "cuda" if torch.cuda.is_available() else "cpu"
+print(f"[INFO] Using device: {device}")
+
+# ── Load Embedding Model ─────────────────────────────────────────────────────
+print("[INFO] Loading embedding model...")
+embedder = SentenceTransformer(EMBEDDING_MODEL, device=device)
+
+# ── Pinecone Setup ───────────────────────────────────────────────────────────
+pc = Pinecone(api_key=PINECONE_API_KEY)
+
+if PINECONE_INDEX not in [i.name for i in pc.list_indexes()]:
+    print(f"[INFO] Creating Pinecone index: {PINECONE_INDEX}")
+    pc.create_index(
+        name=PINECONE_INDEX,
+        dimension=DIMENSION,
+        metric="cosine",
+        spec=ServerlessSpec(cloud="aws", region="us-east-1")
+    )
+
+index = pc.Index(PINECONE_INDEX)
+
+# ── Load Documents ───────────────────────────────────────────────────────────
+def load_documents(data_dir: str) -> list:
+    docs = []
+    for filename in os.listdir(data_dir):
+        filepath = os.path.join(data_dir, filename)
+        if filename.endswith(".pdf"):
+            loader = PyPDFLoader(filepath)
+        elif filename.endswith(".txt"):
+            loader = TextLoader(filepath, encoding="utf-8")
+        else:
+            print(f"[SKIP] Unsupported file: {filename}")
+            continue
+        loaded = loader.load()
+        # attach filename as topic metadata
+        topic = os.path.splitext(filename)[0]
+        for doc in loaded:
+            doc.metadata["topic"] = topic
+            doc.metadata["source"] = filename
+        docs.extend(loaded)
+        print(f"[LOADED] {filename} — {len(loaded)} page(s)")
+    return docs
+
+# ── Chunk Documents ──────────────────────────────────────────────────────────
+def chunk_documents(docs: list) -> list:
+    splitter = RecursiveCharacterTextSplitter(
+        chunk_size=CHUNK_SIZE,
+        chunk_overlap=CHUNK_OVERLAP
+    )
+    chunks = splitter.split_documents(docs)
+    print(f"[INFO] Total chunks: {len(chunks)}")
+    return chunks
+
+# ── Embed & Upsert ───────────────────────────────────────────────────────────
+def embed_and_upsert(chunks: list):
+    texts = [
+        f"passage: {chunk.page_content}" for chunk in chunks  # e5 prefix
+    ]
+    print("[INFO] Generating embeddings...")
+    all_vectors = []
+
+    for i in tqdm(range(0, len(texts), BATCH_SIZE)):
+        batch_texts   = texts[i: i + BATCH_SIZE]
+        batch_chunks  = chunks[i: i + BATCH_SIZE]
+        embeddings    = embedder.encode(
+            batch_texts,
+            normalize_embeddings=True,
+            show_progress_bar=False
+        )
+        vectors = []
+        for j, (emb, chunk) in enumerate(zip(embeddings, batch_chunks)):
+            vectors.append({
+                "id":     f"chunk-{i + j}",
+                "values": emb.tolist(),
+                "metadata": {
+                    "text":   chunk.page_content,
+                    "topic":  chunk.metadata.get("topic", "unknown"),
+                    "source": chunk.metadata.get("source", "unknown"),
+                }
+            })
+        all_vectors.extend(vectors)
+
+    # upsert in batches of 100 (Pinecone limit)
+    print("[INFO] Upserting to Pinecone...")
+    for i in tqdm(range(0, len(all_vectors), 100)):
+        index.upsert(vectors=all_vectors[i: i + 100])
+
+    print(f"[DONE] Upserted {len(all_vectors)} chunks to Pinecone.")
+
+# ── Main ─────────────────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    docs   = load_documents(DATA_DIR)
+    if not docs:
+        print("[ERROR] No documents found in data/os_notes/")
+        exit(1)
+    chunks = chunk_documents(docs)
+    embed_and_upsert(chunks)

rag/retriever.py

@@ -0,0 +1,80 @@
+# rag/retriever.py
+
+import os
+import torch
+from dotenv import load_dotenv
+from pinecone import Pinecone
+from sentence_transformers import SentenceTransformer
+
+load_dotenv()
+
+# ── Config ───────────────────────────────────────────────────────────────────
+PINECONE_API_KEY = os.getenv("PINECONE_API_KEY")
+PINECONE_INDEX   = os.getenv("PINECONE_INDEX", "study-saathi")
+EMBEDDING_MODEL  = "intfloat/multilingual-e5-large"
+TOP_K            = 5
+
+# ── Device ───────────────────────────────────────────────────────────────────
+device = "cuda" if torch.cuda.is_available() else "cpu"
+
+# ── Load Embedding Model ──────────────────────────────────────────────────────
+print("[INFO] Loading embedding model...")
+embedder = SentenceTransformer(EMBEDDING_MODEL, device=device)
+
+# ── Pinecone Setup ────────────────────────────────────────────────────────────
+pc    = Pinecone(api_key=PINECONE_API_KEY)
+index = pc.Index(PINECONE_INDEX)
+
+# ── Retrieve ──────────────────────────────────────────────────────────────────
+def retrieve(query: str, topic: str = None, top_k: int = TOP_K) -> list:
+    """
+    Retrieve relevant chunks from Pinecone.
+    - query : user's question or topic
+    - topic : filename-based topic filter (e.g. "deadlocks")
+    - top_k : number of chunks to return
+    """
+    # e5 requires "query: " prefix for questions
+    query_embedding = embedder.encode(
+        f"query: {query}",
+        normalize_embeddings=True
+    ).tolist()
+
+    # build filter only if topic is provided
+    filter_dict = {"topic": {"$eq": topic}} if topic else None
+
+    results = index.query(
+        vector=query_embedding,
+        top_k=top_k,
+        include_metadata=True,
+        filter=filter_dict
+    )
+
+    chunks = []
+    for match in results["matches"]:
+        chunks.append({
+            "text":  match["metadata"]["text"],
+            "topic": match["metadata"].get("topic", "unknown"),
+            "score": round(match["score"], 4)
+        })
+
+    return chunks
+
+
+# ── Format for LLM ────────────────────────────────────────────────────────────
+def format_context(chunks: list) -> str:
+    """Joins retrieved chunks into a single context string for the LLM."""
+    return "\n\n".join(
+        f"[Chunk {i+1} | Topic: {c['topic']} | Score: {c['score']}]\n{c['text']}"
+        for i, c in enumerate(chunks)
+    )
+
+
+# ── Quick Test ────────────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    query  = "Explain Process Registers?"
+    topic  = "ch-01-updated"   # change to match your filename
+
+    chunks  = retrieve(query, topic=topic)
+    context = format_context(chunks)
+
+    print(context)

requirements.txt

@@ -0,0 +1,26 @@
+# LLM & LangChain
+langchain==0.3.25
+langchain-community==0.3.24
+langchain-openai==0.3.16
+openai==1.84.0
+
+# Vector Database
+pinecone-client==5.0.1
+
+# Embeddings (local GPU)
+sentence-transformers==3.4.1
+torch==2.5.1
+transformers==4.51.3
+
+# Document Loading
+pypdf==5.4.0
+unstructured==0.17.2
+
+# Backend
+flask==3.1.1
+flask-cors==5.0.1
+python-dotenv==1.1.0
+
+# Utilities
+tqdm==4.67.1
+numpy==1.26.4

static/css/style.css

@@ -0,0 +1,606 @@
+/* ── Variables ──────────────────────────────────────────────────────────────── */
+:root {
+  --bg:           #0a0f1a;
+  --bg-2:         #0f1624;
+  --bg-3:         #151e30;
+  --surface:      #1a2540;
+  --surface-2:    #1f2d4a;
+  --border:       #243354;
+  --border-light: #2e3f63;
+
+  --accent:       #38bdf8;
+  --accent-dim:   #0ea5e915;
+  --accent-glow:  #38bdf830;
+  --accent-dark:  #0369a1;
+
+  --text:         #e2eaf5;
+  --text-2:       #94a3b8;
+  --text-3:       #64748b;
+
+  --user-bubble:  #0c2d4a;
+  --ai-bubble:    #111827;
+
+  --radius:       14px;
+  --radius-sm:    8px;
+  --sidebar-w:    270px;
+
+  --font-display: 'Syne', sans-serif;
+  --font-mono:    'DM Mono', monospace;
+
+  --shadow:       0 4px 24px #00000050;
+  --shadow-accent:0 0 24px #38bdf820;
+}
+
+/* ── Reset ──────────────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-display);
+  font-size: 15px;
+  overflow: hidden;
+}
+
+/* ── Background Effects ─────────────────────────────────────────────────────── */
+.bg-grid {
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(var(--border) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border) 1px, transparent 1px);
+  background-size: 40px 40px;
+  opacity: 0.18;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.bg-glow {
+  position: fixed;
+  top: -200px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 700px;
+  height: 500px;
+  background: radial-gradient(ellipse, #38bdf812 0%, transparent 70%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ── Layout ─────────────────────────────────────────────────────────────────── */
+body { display: flex; position: relative; z-index: 1; }
+
+/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
+.sidebar {
+  width: var(--sidebar-w);
+  min-width: var(--sidebar-w);
+  height: 100vh;
+  background: var(--bg-2);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  z-index: 100;
+  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
+  overflow-y: auto;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 18px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1.2rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.logo-icon { font-size: 1.4rem; }
+
+.sidebar-close {
+  display: none;
+  background: none;
+  border: none;
+  color: var(--text-2);
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  transition: color 0.2s, background 0.2s;
+}
+
+.sidebar-close:hover { color: var(--text); background: var(--surface); }
+
+.sidebar-section {
+  padding: 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sidebar-label {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  margin-bottom: 10px;
+}
+
+.topic-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.topic-input-wrap:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.topic-icon { font-size: 0.9rem; }
+
+.topic-input {
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  width: 100%;
+}
+
+.topic-input::placeholder { color: var(--text-3); }
+
+.sidebar-hint {
+  font-size: 0.72rem;
+  color: var(--text-3);
+  margin-top: 7px;
+}
+
+.quick-prompts {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.quick-btn {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text-2);
+  font-family: var(--font-display);
+  font-size: 0.8rem;
+  padding: 9px 12px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.2s;
+}
+
+.quick-btn:hover {
+  background: var(--accent-dim);
+  border-color: var(--accent);
+  color: var(--accent);
+  transform: translateX(3px);
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding: 16px 18px;
+  font-size: 0.72rem;
+  color: var(--text-3);
+  line-height: 1.7;
+  font-family: var(--font-mono);
+  border-top: 1px solid var(--border);
+}
+
+/* ── Main ────────────────────────────────────────────────────────────────────── */
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* ── Topbar ──────────────────────────────────────────────────────────────────── */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-2);
+  z-index: 10;
+  flex-shrink: 0;
+}
+
+.menu-btn {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: var(--radius-sm);
+  transition: background 0.2s;
+}
+
+.menu-btn:hover { background: var(--surface); }
+
+.menu-btn span {
+  display: block;
+  width: 20px;
+  height: 2px;
+  background: var(--text-2);
+  border-radius: 2px;
+}
+
+.topbar-title {
+  flex: 1;
+  font-size: 1.05rem;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.clear-btn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-3);
+  font-size: 1rem;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.clear-btn:hover {
+  border-color: #ef444455;
+  color: #ef4444;
+  background: #ef444410;
+}
+
+/* ── Chat Window ─────────────────────────────────────────────────────────────── */
+.chat-window {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  scroll-behavior: smooth;
+}
+
+.chat-window::-webkit-scrollbar { width: 5px; }
+.chat-window::-webkit-scrollbar-track { background: transparent; }
+.chat-window::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
+.chat-window::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
+
+/* ── Messages ────────────────────────────────────────────────────────────────── */
+.message {
+  display: flex;
+  gap: 12px;
+  max-width: 820px;
+  width: 100%;
+  animation: fadeUp 0.35s ease forwards;
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.message.user { flex-direction: row-reverse; align-self: flex-end; }
+.message.assistant { align-self: flex-start; }
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
+  color: #fff;
+  font-size: 0.65rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  letter-spacing: 0.05em;
+  box-shadow: var(--shadow-accent);
+}
+
+.message.user .avatar {
+  background: linear-gradient(135deg, #1e3a5f, #2563eb);
+}
+
+.bubble {
+  background: var(--ai-bubble);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 18px;
+  line-height: 1.7;
+  font-size: 0.92rem;
+  max-width: calc(100% - 50px);
+  word-break: break-word;
+}
+
+.message.user .bubble {
+  background: var(--user-bubble);
+  border-color: var(--accent-dark);
+  color: var(--text);
+}
+
+/* ── Markdown Styles inside bubble ──────────────────────────────────────────── */
+.bubble h1, .bubble h2, .bubble h3, .bubble h4 {
+  font-family: var(--font-display);
+  font-weight: 700;
+  color: var(--accent);
+  margin: 16px 0 8px;
+  line-height: 1.3;
+}
+
+.bubble h1 { font-size: 1.2rem; }
+.bubble h2 { font-size: 1.05rem; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
+.bubble h3 { font-size: 0.95rem; }
+.bubble h4 { font-size: 0.88rem; color: var(--text-2); }
+
+.bubble p { margin: 8px 0; }
+
+.bubble ul, .bubble ol {
+  padding-left: 20px;
+  margin: 8px 0;
+}
+
+.bubble li { margin: 4px 0; }
+
+.bubble strong { color: var(--accent); font-weight: 600; }
+.bubble em { color: var(--text-2); font-style: italic; }
+
+.bubble code {
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: #7dd3fc;
+}
+
+.bubble pre {
+  background: #0d1117;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 14px;
+  overflow-x: auto;
+  margin: 12px 0;
+}
+
+.bubble pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.82rem;
+  color: var(--text);
+}
+
+/* ── Tables ──────────────────────────────────────────────────────────────────── */
+.bubble table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 14px 0;
+  font-size: 0.85rem;
+  overflow-x: auto;
+  display: block;
+}
+
+.bubble thead tr {
+  background: var(--surface-2);
+  border-bottom: 2px solid var(--accent);
+}
+
+.bubble th {
+  padding: 10px 14px;
+  text-align: left;
+  font-weight: 700;
+  color: var(--accent);
+  font-size: 0.8rem;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.bubble td {
+  padding: 9px 14px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-2);
+  vertical-align: top;
+}
+
+.bubble tbody tr:hover { background: var(--accent-dim); }
+
+.bubble blockquote {
+  border-left: 3px solid var(--accent);
+  padding: 8px 16px;
+  margin: 10px 0;
+  background: var(--accent-dim);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  color: var(--text-2);
+  font-style: italic;
+}
+
+.bubble hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 14px 0;
+}
+
+/* ── Typing Indicator ────────────────────────────────────────────────────────── */
+.typing-indicator {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  padding: 10px 14px;
+}
+
+.typing-indicator span {
+  width: 7px;
+  height: 7px;
+  background: var(--accent);
+  border-radius: 50%;
+  animation: bounce 1.2s infinite;
+}
+
+.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
+  40%           { transform: translateY(-6px); opacity: 1; }
+}
+
+/* ── Input Area ──────────────────────────────────────────────────────────────── */
+.input-area {
+  padding: 14px 20px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-2);
+  flex-shrink: 0;
+}
+
+.input-wrap {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 10px 10px 16px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.input-wrap:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.query-input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--text);
+  font-family: var(--font-display);
+  font-size: 0.92rem;
+  line-height: 1.6;
+  resize: none;
+  max-height: 140px;
+  overflow-y: auto;
+}
+
+.query-input::placeholder { color: var(--text-3); }
+
+.send-btn {
+  background: var(--accent);
+  border: none;
+  color: var(--bg);
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s;
+}
+
+.send-btn svg { width: 17px; height: 17px; }
+
+.send-btn:hover {
+  background: #7dd3fc;
+  transform: scale(1.05);
+  box-shadow: 0 0 14px var(--accent-glow);
+}
+
+.send-btn:disabled {
+  background: var(--surface-2);
+  color: var(--text-3);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.input-hint {
+  font-size: 0.7rem;
+  color: var(--text-3);
+  margin-top: 7px;
+  font-family: var(--font-mono);
+}
+
+/* ── Accent ──────────────────────────────────────────────────────────────────── */
+.accent { color: var(--accent); }
+
+/* ── Overlay ─────────────────────────────────────────────────────────────────── */
+.overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: #00000070;
+  z-index: 90;
+  backdrop-filter: blur(2px);
+}
+
+/* ── Mobile Responsive ───────────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    transform: translateX(-100%);
+    box-shadow: var(--shadow);
+  }
+
+  .sidebar.open { transform: translateX(0); }
+
+  .sidebar-close { display: flex; }
+
+  .overlay.show { display: block; }
+
+  .menu-btn { display: flex; }
+
+  .topbar-title { font-size: 0.95rem; }
+
+  .chat-window { padding: 16px 12px; gap: 16px; }
+
+  .bubble { font-size: 0.88rem; padding: 12px 14px; }
+
+  .input-area { padding: 10px 12px 12px; }
+
+  .input-hint { display: none; }
+
+  .bubble table { font-size: 0.78rem; }
+
+  .bubble th, .bubble td { padding: 7px 10px; }
+}
+
+@media (max-width: 420px) {
+  .message { gap: 8px; }
+  .avatar { width: 30px; height: 30px; font-size: 0.6rem; border-radius: 8px; }
+  .bubble { padding: 10px 12px; font-size: 0.85rem; }
+}

static/js/design.js

@@ -0,0 +1,178 @@
+// static/js/design.js
+
+// ── Marked.js config ──────────────────────────────────────────────────────────
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+  highlight: (code, lang) => {
+    if (lang && hljs.getLanguage(lang)) {
+      return hljs.highlight(code, { language: lang }).value;
+    }
+    return hljs.highlightAuto(code).value;
+  }
+});
+
+// ── DOM refs ──────────────────────────────────────────────────────────────────
+const chatWindow  = document.getElementById("chatWindow");
+const queryInput  = document.getElementById("queryInput");
+const sendBtn     = document.getElementById("sendBtn");
+const topicInput  = document.getElementById("topicInput");
+const clearBtn    = document.getElementById("clearBtn");
+const menuBtn     = document.getElementById("menuBtn");
+const sidebar     = document.getElementById("sidebar");
+const overlay     = document.getElementById("overlay");
+const sidebarClose= document.getElementById("sidebarClose");
+const quickBtns   = document.querySelectorAll(".quick-btn");
+
+// ── Sidebar toggle ────────────────────────────────────────────────────────────
+function openSidebar() {
+  sidebar.classList.add("open");
+  overlay.classList.add("show");
+}
+
+function closeSidebar() {
+  sidebar.classList.remove("open");
+  overlay.classList.remove("show");
+}
+
+menuBtn.addEventListener("click", openSidebar);
+sidebarClose.addEventListener("click", closeSidebar);
+overlay.addEventListener("click", closeSidebar);
+
+// ── Auto-resize textarea ──────────────────────────────────────────────────────
+queryInput.addEventListener("input", () => {
+  queryInput.style.height = "auto";
+  queryInput.style.height = Math.min(queryInput.scrollHeight, 140) + "px";
+});
+
+// ── Quick prompt buttons ──────────────────────────────────────────────────────
+quickBtns.forEach(btn => {
+  btn.addEventListener("click", () => {
+    queryInput.value = btn.dataset.prompt;
+    queryInput.dispatchEvent(new Event("input"));
+    queryInput.focus();
+    closeSidebar();
+  });
+});
+
+// ── Clear chat ────────────────────────────────────────────────────────────────
+clearBtn.addEventListener("click", () => {
+  // keep only the welcome message
+  const welcome = document.getElementById("welcomeMsg");
+  chatWindow.innerHTML = "";
+  if (welcome) chatWindow.appendChild(welcome);
+});
+
+// ── Scroll to bottom ──────────────────────────────────────────────────────────
+function scrollToBottom() {
+  chatWindow.scrollTo({ top: chatWindow.scrollHeight, behavior: "smooth" });
+}
+
+// ── Add message bubble ────────────────────────────────────────────────────────
+function addMessage(role, content) {
+  const msg    = document.createElement("div");
+  msg.className = `message ${role}`;
+
+  const avatar = document.createElement("div");
+  avatar.className = "avatar";
+  avatar.textContent = role === "user" ? "YOU" : "SS";
+
+  const bubble = document.createElement("div");
+  bubble.className = "bubble";
+
+  if (role === "assistant") {
+    bubble.innerHTML = marked.parse(content);
+    // syntax highlight all code blocks
+    bubble.querySelectorAll("pre code").forEach(el => hljs.highlightElement(el));
+  } else {
+    // user message: plain text, escape HTML
+    bubble.textContent = content;
+  }
+
+  msg.appendChild(avatar);
+  msg.appendChild(bubble);
+  chatWindow.appendChild(msg);
+  scrollToBottom();
+  return msg;
+}
+
+// ── Typing indicator ──────────────────────────────────────────────────────────
+function showTyping() {
+  const msg    = document.createElement("div");
+  msg.className = "message assistant";
+  msg.id        = "typingIndicator";
+
+  const avatar = document.createElement("div");
+  avatar.className = "avatar";
+  avatar.textContent = "SS";
+
+  const bubble = document.createElement("div");
+  bubble.className = "bubble";
+  bubble.innerHTML = `
+    <div class="typing-indicator">
+      <span></span><span></span><span></span>
+    </div>`;
+
+  msg.appendChild(avatar);
+  msg.appendChild(bubble);
+  chatWindow.appendChild(msg);
+  scrollToBottom();
+}
+
+function hideTyping() {
+  const indicator = document.getElementById("typingIndicator");
+  if (indicator) indicator.remove();
+}
+
+// ── Send message ──────────────────────────────────────────────────────────────
+async function sendMessage() {
+  const query = queryInput.value.trim();
+  if (!query) return;
+
+  const topic = topicInput.value.trim() || null;
+
+  // show user message
+  addMessage("user", query);
+
+  // reset input
+  queryInput.value = "";
+  queryInput.style.height = "auto";
+  sendBtn.disabled = true;
+
+  // show typing
+  showTyping();
+
+  try {
+    const res = await fetch("/chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ query, topic })
+    });
+
+    const data = await res.json();
+    hideTyping();
+
+    if (data.error) {
+      addMessage("assistant", `⚠️ **Error:** ${data.error}`);
+    } else {
+      addMessage("assistant", data.response);
+    }
+  } catch (err) {
+    hideTyping();
+    addMessage("assistant", "⚠️ **Network error.** Flask server se connect nahi ho saka. Please check karein.");
+  } finally {
+    sendBtn.disabled = false;
+    queryInput.focus();
+  }
+}
+
+// ── Send on button click ──────────────────────────────────────────────────────
+sendBtn.addEventListener("click", sendMessage);
+
+// ── Send on Enter (Shift+Enter = new line) ────────────────────────────────────
+queryInput.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    sendMessage();
+  }
+});

templates/index.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Study Saathi</title>
+  <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=Syne:wght@400;600;700;800&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="/static/css/style.css" />
+  <!-- Marked.js for markdown rendering -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
+  <!-- highlight.js for code blocks -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+</head>
+<body>
+
+  <!-- Background grid -->
+  <div class="bg-grid"></div>
+  <div class="bg-glow"></div>
+
+  <!-- ── Sidebar ── -->
+  <aside class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+      <div class="logo">
+        <span class="logo-icon">📚</span>
+        <span class="logo-text">Study<span class="accent">Saathi</span></span>
+      </div>
+      <button class="sidebar-close" id="sidebarClose" aria-label="Close sidebar">✕</button>
+    </div>
+
+    <div class="sidebar-section">
+      <label class="sidebar-label">Filter by Topic</label>
+      <div class="topic-input-wrap">
+        <span class="topic-icon">🗂</span>
+        <input
+          type="text"
+          id="topicInput"
+          class="topic-input"
+          placeholder="e.g. ch-01-updated"
+        />
+      </div>
+      <p class="sidebar-hint">Leave empty to search all notes</p>
+    </div>
+
+    <div class="sidebar-section">
+      <label class="sidebar-label">Quick Prompts</label>
+      <div class="quick-prompts">
+        <button class="quick-btn" data-prompt="Explain this topic in simple Roman Urdu">📖 Explain Topic</button>
+        <button class="quick-btn" data-prompt="Generate 5 MCQs from this topic">📝 5 MCQs</button>
+        <button class="quick-btn" data-prompt="Generate 10 MCQs from this topic">📝 10 MCQs</button>
+        <button class="quick-btn" data-prompt="Summarize the key points of this topic">🔑 Key Points</button>
+      </div>
+    </div>
+
+    <div class="sidebar-footer">
+      <p>Powered by <span class="accent">gpt-oss-120b</span></p>
+      <p>RAG · Pinecone · LangChain</p>
+    </div>
+  </aside>
+
+  <!-- Overlay for mobile sidebar -->
+  <div class="overlay" id="overlay"></div>
+
+  <!-- ── Main ── -->
+  <main class="main">
+
+    <!-- Top bar -->
+    <header class="topbar">
+      <button class="menu-btn" id="menuBtn" aria-label="Open sidebar">
+        <span></span><span></span><span></span>
+      </button>
+      <div class="topbar-title">
+        <span class="logo-icon">📚</span>
+        Study<span class="accent">Saathi</span>
+      </div>
+      <button class="clear-btn" id="clearBtn" title="Clear chat">🗑</button>
+    </header>
+
+    <!-- Chat window -->
+    <section class="chat-window" id="chatWindow">
+      <!-- Welcome message -->
+      <div class="message assistant" id="welcomeMsg">
+        <div class="avatar">SS</div>
+        <div class="bubble">
+          <p>Assalam-o-Alaikum! 👋 Main hoon <strong>Study Saathi</strong> — tumhara OS notes ka study partner.</p>
+          <ul>
+            <li>Koi bhi topic <strong>explain</strong> kara sakte ho</li>
+            <li><strong>MCQs generate</strong> karo kisi bhi topic se</li>
+            <li>Left sidebar se <strong>topic filter</strong> lagao</li>
+          </ul>
+          <p>Shuru karo! 🚀</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Input area -->
+    <footer class="input-area">
+      <div class="input-wrap">
+        <textarea
+          id="queryInput"
+          class="query-input"
+          placeholder="Koi sawaal poochho... (e.g. Explain deadlocks, Generate 5 MCQs)"
+          rows="1"
+        ></textarea>
+        <button class="send-btn" id="sendBtn" aria-label="Send">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="22" y1="2" x2="11" y2="13"></line>
+            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+          </svg>
+        </button>
+      </div>
+      <p class="input-hint">Enter to send · Shift+Enter for new line</p>
+    </footer>
+
+  </main>
+
+  <script src="/static/js/design.js"></script>
+</body>
+</html>