Final Commit | Done With the RAG APP

.env.example

@@ -0,0 +1,15 @@
+MODEL_NAME=
+OLLAMA_BASE_URL=
+CHROMA_DB_PATH=
+UPLOAD_FOLDER=uploads
+
+OAUTHLIB_INSECURE_TRANSPORT=
+OAUTHLIB_RELAX_TOKEN_SCOPE=
+TUNNEL_URL=
+
+SECRET_KEY=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+
+GROQ_API_KEY=

app.py

@@ -33,19 +33,18 @@ from flask_login import LoginManager, login_user, logout_user, login_required, c
 from flask_dance.contrib.google import make_google_blueprint, google
 from flask_dance.consumer import oauth_authorized
 from dotenv import load_dotenv
-from models import db, User
+from models import User
 from rag.chunker import load_and_chunk
 from rag.embeddings import store_embeddings
 from rag.retriever import retrieve_chunks
 from rag.generator import generate_answer
-from config import SECRET_KEY, SQLALCHEMY_DATABASE_URI, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET
+from config import SECRET_KEY, MONGO_URI, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET
 
 # ── Init ─────────────────────────────────────────────
 load_dotenv()
 app = Flask(__name__)
 
 app.config["SECRET_KEY"] = SECRET_KEY
-app.config["SQLALCHEMY_DATABASE_URI"] = SQLALCHEMY_DATABASE_URI
 app.config["UPLOAD_FOLDER"] = "uploads"
 
 META_PATH = os.path.join("vectorstore", "metadata.pkl")
@@ -62,7 +61,6 @@ google_bp = make_google_blueprint(
 app.register_blueprint(google_bp, url_prefix="/login")
 
 # ── Database & Login Manager ──────────────────────────
-db.init_app(app)
 login_manager = LoginManager()
 login_manager.init_app(app)
 login_manager.login_view = "login"
@@ -71,10 +69,7 @@ chat_history = {}
 
 @login_manager.user_loader
 def load_user(user_id):
-    return db.session.get(User, int(user_id))
-
-with app.app_context():
-    db.create_all()
+    return User.get(user_id)
 
 # ── Google OAuth Signal Handler ───────────────────────
 @oauth_authorized.connect_via(google_bp)
@@ -90,22 +85,30 @@ def google_logged_in(blueprint, token):
         google_info = resp.json()
         email = google_info.get("email")
         name = google_info.get("name", "")
+        picture = google_info.get("picture","")
         username = name.replace(" ", "_").lower() if name else email.split("@")[0]
 
         if not email:
             return False
 
         with app.app_context():
-            user = User.query.filter_by(email=email).first()
+            user = User.find_by_email(email)
 
             if not user:
-                if User.query.filter_by(username=username).first():
+                if User.find_by_username(username):
                     username = username + "_g"
 
-                user = User(username=username, email=email)
+                user = User(
+                    username=username,
+                    email=email,
+                    profile_pic=picture
+                )
                 user.set_password(os.urandom(24).hex())
-                db.session.add(user)
-                db.session.commit()
+                user.save()
+            else:
+                if picture and user.profile_pic != picture:
+                    user.profile_pic = picture
+                    user.save()
 
             login_user(user)
 
@@ -114,6 +117,52 @@ def google_logged_in(blueprint, token):
 
     return False
 
+@app.route("/upload_profile_pic", methods=["POST"])
+@login_required
+def upload_profile_pic():
+    try:
+        if "profile_pic" not in request.files:
+            return jsonify({"error": "No file found"}), 400
+
+        file = request.files["profile_pic"]
+
+        if file.filename == "":
+            return jsonify({"error": "No file selected"}), 400
+
+        # ── Check file type ──
+        allowed = {"png", "jpg", "jpeg", "gif", "webp"}
+        ext = file.filename.rsplit(".", 1)[1].lower()
+        if ext not in allowed:
+            return jsonify({"error": "Only image files allowed"}), 400
+
+        # ── Save profile pic ──
+        pic_folder = os.path.join("static", "profile_pics")
+        os.makedirs(pic_folder, exist_ok=True)
+
+        filename = f"{current_user.username}.{ext}"
+        filepath = os.path.join(pic_folder, filename)
+        file.save(filepath)
+
+        current_user.profile_pic = f"/static/profile_pics/{filename}"
+        current_user.save()
+
+        return jsonify({
+            "message": "Profile picture updated!",
+            "profile_pic": current_user.profile_pic
+        }), 200
+    
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+    
+
+@app.route("/get_profile", methods=["GET"])
+@login_required
+def get_profile():
+    return jsonify({
+        "username": current_user.username,
+        "profile_pic": current_user.profile_pic or ""
+    }), 200
+
 # ── Helper Functions ──────────────────────────────────
 def allowed_file(filename):
     return "." in filename and filename.rsplit(".", 1)[1].lower() in {"pdf", "docx", "txt"}
@@ -143,16 +192,15 @@ def register():
         email = data.get("email")
         password = data.get("password")
 
-        if User.query.filter_by(username=username).first():
+        if User.find_by_username(username):
             return render_template("register.html", error="Username already exists!")
 
-        if User.query.filter_by(email=email).first():
+        if User.find_by_email(email):
             return render_template("register.html", error="Email already exists!")
 
         user = User(username=username, email=email)
         user.set_password(password)
-        db.session.add(user)
-        db.session.commit()
+        user.save()
         return redirect(url_for("login"))
 
     return render_template("register.html")
@@ -164,7 +212,7 @@ def login():
         username = data.get("username")
         password = data.get("password")
 
-        user = User.query.filter_by(username=username).first()
+        user = User.find_by_username(username)
 
         if not user or not user.check_password(password):
             return render_template("login.html", error="Invalid username or password!")
@@ -187,6 +235,68 @@ def logout():
 def chat():
     return render_template("chat.html", username=current_user.username)
 
+@app.route("/admin", methods=["GET"])
+@login_required
+def admin_dashboard():
+    if not current_user.is_admin:
+        return "Unauthorized", 403
+    users = User.get_all()
+    user_files = {}
+    for user in users:
+        folder = get_user_upload_folder(user.username)
+        if os.path.exists(folder):
+            user_files[user.username] = [f for f in os.listdir(folder) if f.endswith((".pdf", ".docx", ".txt"))]
+        else:
+            user_files[user.username] = []
+    
+    return render_template("admin.html", users=users, user_files=user_files)
+
+@app.route("/download/<username>/<filename>")
+@login_required
+def download_file(username, filename):
+    # Only the owner or an admin can download
+    if current_user.username != username and not current_user.is_admin:
+        return "Unauthorized", 403
+        
+    folder = get_user_upload_folder(username)
+    filepath = os.path.join(folder, filename)
+    if not os.path.exists(filepath):
+        return "File not found", 404
+        
+    from flask import send_file
+    return send_file(filepath, as_attachment=True)
+
+@app.route("/profile", methods=["GET"])
+@login_required
+def profile():
+    return render_template("profile.html", current_user=current_user)
+
+@app.route("/update_settings", methods=["POST"])
+@login_required
+def update_settings():
+    try:
+        data = request.get_json()
+        current_user.preferred_model = data.get("preferred_model", "groq")
+        
+        # Determine if we are deleting keys or setting new ones
+        groq_req = data.get("groq_key", "").strip()
+        gemini_req = data.get("gemini_key", "").strip()
+        
+        if groq_req == "DELETE":
+            current_user.set_groq_key(None)
+        elif groq_req:
+            current_user.set_groq_key(groq_req)
+            
+        if gemini_req == "DELETE":
+            current_user.set_gemini_key(None)
+        elif gemini_req:
+            current_user.set_gemini_key(gemini_req)
+        
+        current_user.save()
+        return jsonify({"message": "Settings updated successfully!"}), 200
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
 @app.route("/files", methods=["GET"])
 @login_required
 def get_files():
@@ -201,6 +311,9 @@ def get_files():
 @login_required
 def upload():
     try:
+        if not current_user.get_groq_key() and not current_user.get_gemini_key():
+            return jsonify({"error": "⚠️ Please add your Groq or Gemini API key in the Profile page to upload and chat."}), 400
+
         if "pdf" not in request.files:
             return jsonify({"error": "No file found"}), 400
 
@@ -229,6 +342,9 @@ def upload():
 @login_required
 def ask():
     try:
+        if not current_user.get_groq_key() and not current_user.get_gemini_key():
+            return jsonify({"error": "⚠️ Please add your Groq or Gemini API key in the Profile page to upload and chat."}), 400
+
         data = request.get_json()
         question = data.get("question", "").strip()
         filename = data.get("filename", "").strip()
@@ -238,7 +354,7 @@ def ask():
 
         meta_path = get_user_meta_path(current_user.username)
         context_chunks = retrieve_chunks(question, filename, meta_path)
-        answer = generate_answer(question, context_chunks)
+        answer = generate_answer(question, context_chunks, current_user)
 
         username = current_user.username
         if username not in chat_history:

config.py

@@ -1,23 +1,27 @@
-import os 
+import os
 from dotenv import load_dotenv
 
 load_dotenv()
 
-OLLAMA_BASE_URL = os.getenv("OLLAMA_BASE_URL", "http://localhost:11434")
-MODEL_NAME = os.getenv("MODEL_NAME", "llama3:latest")
+# ── App Config ───────────────────────────────────────
+SECRET_KEY = os.getenv("SECRET_KEY", "your_secret_key_here")
+ENCRYPTION_KEY = os.getenv("ENCRYPTION_KEY", b"T4tQj_3jK7z_gBqxZ1j_aGj8sFpXv_f4jZ8Rj9sPqG0=")
+MONGO_URI = os.getenv("MONGO_URI", "mongodb://localhost:27017/rag_app")
 
-EMBEDDING_MODEL = "all-MiniLM-L6-V2"
-
-SECRET_KEY = "your_secret_key_here"
-SQLALCHEMY_DATABASE_URI = "sqlite:///users.db"
+# ── Upload Config ────────────────────────────────────
+UPLOAD_FOLDER = "uploads"
+ALLOWED_EXTENSIONS = {"pdf", "docx", "txt"}
 
+# ── Embedding Config ─────────────────────────────────
+EMBEDDING_MODEL = "all-MiniLM-L6-v2"
+CHROMA_DB_PATH = "vectorstore"
+TOP_K = 50
 CHUNK_SIZE = 500
 CHUNK_OVERLAP = 50
 
-UPLOAD_FOLDER = "uploads"
-CHROMA_DB_PATH = "vectorstore"
-
-TOP_K = 10
+# ── Groq Config ──────────────────────────────────────
+GROQ_MODEL = "llama-3.3-70b-versatile"  
 
+# ── Google OAuth Config ──────────────────────────────
 GOOGLE_CLIENT_ID = os.getenv("GOOGLE_CLIENT_ID")
-GOOGLE_CLIENT_SECRET = os.getenv("GOOGLE_CLIENT_SECRET")
+GOOGLE_CLIENT_SECRET = os.getenv("GOOGLE_CLIENT_SECRET")

make_admin.py

@@ -0,0 +1,15 @@
+import os
+from dotenv import load_dotenv
+load_dotenv()
+
+from models import User
+
+username = input("Enter the username to make admin: ")
+user = User.find_by_username(username)
+
+if user:
+    user.is_admin = True
+    user.save()
+    print(f"Success! '{username}' is now an admin. You can access the Admin Dashboard at /admin via the profile links.")
+else:
+    print(f"User '{username}' not found. Please make sure you have registered/logged in first!")

models.py

@@ -1,20 +1,115 @@
-from flask_sqlalchemy import SQLAlchemy
 from flask_login import UserMixin
 from werkzeug.security import generate_password_hash, check_password_hash
+from cryptography.fernet import Fernet
+import pymongo
+from bson.objectid import ObjectId
+from config import ENCRYPTION_KEY, MONGO_URI
 
-db = SQLAlchemy()
+# Connect to MongoDB
+mongo_client = pymongo.MongoClient(MONGO_URI)
+db = mongo_client.get_default_database()
+if not db.name:
+    db = mongo_client["rag_app"]
 
-class User(UserMixin, db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    username = db.Column(db.String(80), unique=True, nullable=False)
-    email = db.Column(db.String(120), unique=True, nullable=False)
-    password = db.Column(db.String(200), nullable=False)
-    # ── Google OAuth ──
-    google_id = db.Column(db.String(200), nullable=True)
-    profile_pic = db.Column(db.String(200), nullable=True)
+users_collection = db["users"]
+cipher_suite = Fernet(ENCRYPTION_KEY)
 
+class User(UserMixin):
+    def __init__(self, username, email, password=None, _id=None, google_id=None, profile_pic=None, groq_api_key=None, gemini_api_key=None, preferred_model="groq", is_admin=False):
+        self.username = username
+        self.email = email
+        self.password = password
+        self.google_id = google_id
+        self.profile_pic = profile_pic
+        self.groq_api_key = groq_api_key
+        self.gemini_api_key = gemini_api_key
+        self.preferred_model = preferred_model
+        self.is_admin = is_admin
+        if _id:
+            self.id = str(_id)
+        else:
+            self.id = None
+
+    def get_id(self):
+        return self.id or self.username  # fallback to username if id is not yet set
+
+    def save(self):
+        user_data = {
+            "username": self.username,
+            "email": self.email,
+            "password": self.password,
+            "google_id": self.google_id,
+            "profile_pic": self.profile_pic,
+            "groq_api_key": self.groq_api_key,
+            "gemini_api_key": self.gemini_api_key,
+            "preferred_model": self.preferred_model,
+            "is_admin": self.is_admin
+        }
+        
+        if self.id:
+            users_collection.update_one({"_id": ObjectId(self.id)}, {"$set": user_data})
+        else:
+            result = users_collection.insert_one(user_data)
+            self.id = str(result.inserted_id)
+            
     def set_password(self, password):
         self.password = generate_password_hash(password)
 
     def check_password(self, password):
-        return check_password_hash(self.password, password)
+        return check_password_hash(self.password, password)
+
+    def set_groq_key(self, api_key):
+        if api_key:
+            self.groq_api_key = cipher_suite.encrypt(api_key.encode('utf-8')).decode('utf-8')
+        else:
+            self.groq_api_key = None
+
+    def get_groq_key(self):
+        if self.groq_api_key:
+            try:
+                return cipher_suite.decrypt(self.groq_api_key.encode('utf-8')).decode('utf-8')
+            except Exception:
+                return None
+        return None
+
+    def set_gemini_key(self, api_key):
+        if api_key:
+            self.gemini_api_key = cipher_suite.encrypt(api_key.encode('utf-8')).decode('utf-8')
+        else:
+            self.gemini_api_key = None
+
+    def get_gemini_key(self):
+        if self.gemini_api_key:
+            try:
+                return cipher_suite.decrypt(self.gemini_api_key.encode('utf-8')).decode('utf-8')
+            except Exception:
+                return None
+        return None
+
+    @classmethod
+    def get(cls, user_id):
+        try:
+            data = users_collection.find_one({"_id": ObjectId(user_id)})
+            if data:
+                return cls(**data)
+            return None
+        except Exception:
+            return None
+
+    @classmethod
+    def find_by_username(cls, username):
+        data = users_collection.find_one({"username": username})
+        if data:
+            return cls(**data)
+        return None
+
+    @classmethod
+    def find_by_email(cls, email):
+        data = users_collection.find_one({"email": email})
+        if data:
+            return cls(**data)
+        return None
+
+    @classmethod
+    def get_all(cls):
+        return [cls(**data) for data in users_collection.find()]

rag/generator.py

@@ -1,51 +1,72 @@
-import ollama
-from config import MODEL_NAME
+import os
+import google.generativeai as genai
+from dotenv import load_dotenv
 
-def build_prompt(question, chunks):
-    context = ""
+load_dotenv()  # ← Load .env file first
 
-    for i, chunk in enumerate(chunks):
-        context += f"\nchunk {i+1} (From: {chunk['filename']} Page: {chunk['page']}):\n"
-        context += chunk["text"]
-        context += "\n"
+from groq import Groq
+from config import GROQ_MODEL
 
+def get_groq_client(user_key):
+    if not user_key:
+        raise ValueError("No Groq API Key available. Please add it to your profile.")
+    return Groq(api_key=user_key)
 
-        prompt = f"""
-        You are a helpful assistant. 
-        Use the following context to answer the question.
-        If you don't know the answer, say "I don't know".
-        Do not make up answers.
+def generate_answer(question, context_chunks, user=None):
+    try:
+        if not context_chunks:
+            context = "No specific document context found for this query."
+        else:
+            context = "\n\n".join([
+                f"📄 File: {chunk['filename']} | Page: {chunk['page']}\n{chunk['text']}"
+                for chunk in context_chunks
+            ])
 
-        Context:
-        {context}
+        prompt = f"""You are a helpful AI assistant. Answer the user's question based on the provided document context.
 
-        Question:
-        {question}
+Document Context:
+{context}
 
-        Answer:
-        """
+User Question: {question}
 
-        return prompt
-    
+Instructions:
+- If the question is a greeting or general chat (like "hi" or "how are you"), just reply naturally and explain you are here to help with their PDF documents.
+- If the question is about the document, use the provided context to answer.
+- If the context doesn't contain the answer, just say you couldn't find it in the document.
+- Try to be clear, helpful, and concise.
 
-def call_llm(prompt):
-    response = ollama.chat(
-        model=MODEL_NAME,
-        messages=[
-            {
-                "role": "user",
-                "content": prompt
-            }
-        ]
-    )
+Answer:"""
 
-    return response["message"]["content"]
+        pref_model = user.preferred_model if user else "groq"
+        
+        if pref_model == "gemini":
+            key = user.get_gemini_key() if user else None
+            if not key:
+                return "❌ No Gemini API key available. Please add it in your Profile settings."
+            
+            genai.configure(api_key=key)
+            model = genai.GenerativeModel("gemini-1.5-flash") # Fast & Free Gemini Model
+            response = model.generate_content(prompt)
+            return response.text
+        else:
+            key = user.get_groq_key() if user else None
+            client = get_groq_client(key)
+            response = client.chat.completions.create(
+                model=GROQ_MODEL,
+                messages=[
+                    {
+                        "role": "system",
+                        "content": "You are a helpful document assistant."
+                    },
+                    {
+                        "role": "user",
+                        "content": prompt
+                    }
+                ],
+                temperature=0.3,
+                max_tokens=1024,
+            )
+            return response.choices[0].message.content
 
-def generate_answer(question, chunks):
-    if not chunks:
-        return "no context found in the document."
-    
-    prompt = build_prompt(question, chunks)
-    answer = call_llm(prompt)
-
-    return answer
+    except Exception as e:
+        return f"❌ Error generating answer: {str(e)}"

rag/retriever.py

@@ -26,13 +26,13 @@ def retrieve_chunks(query, filename=None, meta_path=None):
     with open(meta_path, "rb") as f:
         metadata = pickle.load(f)
 
-    # ── Fix: use min to avoid out of range ──
-    n_results = min(TOP_K, len(metadata))
+    # ── Fix: search a larger pool to allow filtering by filename ──
+    n_search = min(100, len(metadata))
 
-    if n_results == 0:
+    if n_search == 0:
         return []
 
-    distances, indices = index.search(query_embedding, n_results)
+    distances, indices = index.search(query_embedding, n_search)
 
     # ── Fix: check distances is not empty ──
     if len(distances) == 0 or len(distances[0]) == 0:
@@ -63,4 +63,18 @@ def retrieve_chunks(query, filename=None, meta_path=None):
         if len(chunks) == TOP_K:
             break
 
+    # fallback: if no specific good match, and the user asks a very generic question 
+    # and we have chunks for this file, just return the first chunk of the file
+    if not chunks and filename:
+        for idx in range(len(metadata)):
+            if metadata[idx]["filename"] == filename:
+                chunks.append({
+                    "text": metadata[idx]["text"],
+                    "filename": metadata[idx]["filename"],
+                    "page": metadata[idx]["page"],
+                    "score": 0.0,
+                    "confidence": 0.0
+                })
+                break
+
     return chunks 

requirements.txt

@@ -3,9 +3,11 @@ python-dotenv
 pymupdf
 faiss-cpu
 sentence-transformers
-ollama
 flask-login
-flask-sqlalchemy
+pymongo
 werkzeug
+flask-dance
 python-docx
-flask-dance
+groq
+requests
+requests-oauthlib

static/script.js

@@ -0,0 +1,17 @@
+// Check for saved user preference, if any, on load of the website
+document.addEventListener("DOMContentLoaded", () => {
+    const currentTheme = localStorage.getItem("theme");
+    if (currentTheme === "light") {
+        document.body.classList.add("light-mode");
+    }
+});
+
+// Expose toggle function to global scope
+function toggleLightMode() {
+    document.body.classList.toggle("light-mode");
+    let theme = "dark";
+    if (document.body.classList.contains("light-mode")) {
+        theme = "light";
+    }
+    localStorage.setItem("theme", theme);
+}

static/style.css

@@ -1,402 +1,564 @@
-/* ── Global ─────────────────────────────────────────── */
+/* ── Google Fonts ───────────────────────────────────── */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
+
+/* ── Global Variables ───────────────────────────────── */
+:root {
+    --bg-gradient: #09090b;
+    --glass-bg: rgba(255, 255, 255, 0.02);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+
+    --primary-color: #fafafa;
+    --primary-hover: #e4e4e7;
+    --primary-text: #09090b;
+    --accent-color: #3b82f6;
+    --danger-color: #ef4444;
+    --danger-hover: #dc2626;
+    --success-color: #10b981;
+
+    --text-main: #fafafa;
+    --text-muted: #a1a1aa;
+
+    --transition-speed: 0.25s;
+
+    --header-bg: rgba(9, 9, 11, 0.85);
+    --input-bg: rgba(255, 255, 255, 0.03);
+    --item-hover-bg: rgba(255, 255, 255, 0.05);
+}
+
+body.light-mode {
+    --bg-gradient: #ffffff;
+    --glass-bg: #ffffff;
+    --glass-border: rgba(0, 0, 0, 0.1);
+    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
+
+    --primary-color: #18181b;
+    --primary-hover: #27272a;
+    --primary-text: #fafafa;
+
+    --text-main: #18181b;
+    --text-muted: #71717a;
+
+    --header-bg: rgba(255, 255, 255, 0.85);
+    --input-bg: #fdfdfd;
+    --item-hover-bg: #f4f4f5;
+}
+
+/* ── Global Styles ──────────────────────────────────── */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: Arial, sans-serif;
+    font-family: 'Outfit', sans-serif;
 }
 
 body {
-    background-color: #f5f5f5;
-    color: #333;
+    background: var(--bg-gradient);
+    color: var(--text-main);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
+/* ── Header ─────────────────────────────────────────── */
 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20px;
-    background-color: #2c3e50;
-    color: white;
+    padding: 15px 40px;
+    background: var(--header-bg);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--glass-border);
+    box-shadow: var(--glass-shadow);
+    position: sticky;
+    top: 0;
+    z-index: 100;
 }
 
-.header-right {
+header h1 {
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0;
+    background: linear-gradient(to right, #8b5cf6, #0ea5e9);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
     display: flex;
     align-items: center;
-    gap: 15px;
-    font-size: 14px;
+    gap: 8px;
 }
 
-.logout-btn {
-    background-color: #e74c3c;
-    padding: 6px 14px;
-    font-size: 13px;
+header a {
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: 15px;
+    font-weight: 500;
+    transition: color var(--transition-speed) ease;
 }
 
-.logout-btn:hover {
-    background-color: #c0392b;
+header a:hover {
+    color: var(--text-main);
 }
 
-header h1 {
-    font-size: 28px;
-    margin-bottom: 5px;
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
 }
 
-header p {
-    font-size: 14px;
-    color: #ccc;
+/* ── Container ──────────────────────────────────────── */
+.container {
+    max-width: 850px;
+    width: 100%;
+    margin: 40px auto;
+    padding: 0 20px;
+    flex-grow: 1;
+    animation: fadeIn 0.6s ease-out;
 }
 
-header a {
-    color: #ccc;
-    text-decoration: none;
-    font-size: 14px;
-}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
 
-header a:hover {
-    color: white;
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-/* ── Container ──────────────────────────────────────── */
-.container {
-    max-width: 800px;
-    margin: 30px auto;
-    padding: 20px;
+/* ── Glassmorphism Cards ────────────────────────────── */
+.upload-box,
+.files-box,
+.clear-box,
+.auth-box,
+.chat-box {
+    background: var(--glass-bg);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 30px;
+    box-shadow: var(--glass-shadow);
+    margin-bottom: 25px;
+    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
 }
 
-/* ── Upload Box ─────────────────────────────────────── */
-.upload-box {
-    background-color: white;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    text-align: center;
+.upload-box:hover,
+.files-box:hover,
+.clear-box:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
 }
 
-.upload-box h2 {
+.upload-box h2,
+.files-box h2,
+.clear-box h2,
+.auth-box h2 {
     margin-bottom: 20px;
-    color: #2c3e50;
+    color: var(--text-main);
+    font-weight: 600;
+    font-size: 20px;
 }
 
-.upload-box input[type="file"] {
+/* ── Form Inputs & Uploads ──────────────────────────── */
+input[type="file"] {
     display: block;
-    margin: 0 auto 15px auto;
-    padding: 10px;
-}
-
-/* ── Buttons ────────────────────────────────────────── */
-button {
-    background-color: #2c3e50;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
+    width: 100%;
+    margin: 0 auto 20px auto;
+    padding: 12px;
+    background: var(--input-bg);
+    border: 1px dashed var(--glass-border);
+    border-radius: 8px;
+    color: var(--text-muted);
     cursor: pointer;
-    font-size: 14px;
-    margin: 5px;
+    transition: all var(--transition-speed);
 }
 
-button:hover {
-    background-color: #1a252f;
+input[type="file"]:hover {
+    border-color: var(--primary-color);
+    background: var(--item-hover-bg);
 }
 
-/* ── Nav Button ─────────────────────────────────────── */
-.nav-btn {
-    text-align: center;
-    margin-top: 20px;
+input[type="text"],
+input[type="password"],
+input[type="email"] {
+    width: 100%;
+    padding: 14px 16px;
+    margin-bottom: 16px;
+    background: var(--input-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 10px;
+    color: var(--text-main);
+    font-size: 15px;
+    outline: none;
+    transition: all var(--transition-speed) ease;
 }
 
-.nav-btn a {
-    text-decoration: none;
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--glass-border);
 }
 
-/* ── Upload Status ──────────────────────────────────── */
-#uploadStatus {
-    margin-top: 15px;
+/* ── Buttons ────────────────────────────────────────── */
+button {
+    background: var(--primary-color);
+    color: var(--primary-text);
+    border: 1px solid var(--glass-border);
+    padding: 12px 24px;
+    border-radius: 8px;
+    cursor: pointer;
     font-size: 14px;
-    font-weight: bold;
+    font-weight: 500;
+    transition: all var(--transition-speed) ease;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
-/* ── Chat Box ───────────────────────────────────────── */
-.chat-box {
-    background-color: white;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    padding: 20px;
-    height: 450px;
-    overflow-y: auto;
-    margin-bottom: 15px;
+button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+    background: var(--primary-hover);
 }
 
-/* ── Messages ───────────────────────────────────────── */
-.message {
-    padding: 10px 15px;
+#askBtn {
     border-radius: 8px;
-    margin-bottom: 10px;
-    line-height: 1.5;
+    padding: 12px 20px;
 }
 
-.message.user {
-    background-color: #d6eaf8;
-    text-align: right;
+#clearBtn {
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: none;
+    color: var(--text-muted);
 }
 
-.message.bot {
-    background-color: #eafaf1;
-    text-align: left;
+#clearBtn:hover {
+    background: rgba(255, 255, 255, 0.15);
+    color: var(--text-main);
 }
 
-.message.error {
-    background-color: #fadbd8;
-    text-align: left;
+.logout-btn {
+    background: var(--danger-color);
+    color: white;
+    border-color: transparent;
+    box-shadow: none;
+    padding: 8px 16px;
+    font-size: 14px;
 }
 
-/* ── Sources ────────────────────────────────────────── */
-.sources {
-    background-color: #fef9e7;
-    border-left: 4px solid #f39c12;
-    padding: 10px 15px;
-    border-radius: 5px;
-    margin-bottom: 10px;
-    font-size: 13px;
+.logout-btn:hover {
+    background: var(--danger-hover);
+    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
 }
 
-.sources ul {
-    margin-top: 5px;
-    padding-left: 20px;
+.delete-btn {
+    background: transparent;
+    color: var(--danger-color);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 13px;
+    box-shadow: none;
 }
 
-.sources ul li {
-    margin-top: 3px;
+.delete-btn:hover {
+    background: var(--danger-color);
+    color: white;
+    transform: none;
 }
-/* ...existing code... */
 
-.confidence {
-    font-size: 12px;
-    font-weight: bold;
-    margin-left: 10px;
+.clear-vector-btn {
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--danger-color);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    box-shadow: none;
+    margin-top: 10px;
 }
 
-.sources li {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px 0;
-    border-bottom: 1px solid #f0e0b0;
+.clear-vector-btn:hover {
+    background: var(--danger-color);
+    color: white;
 }
 
-.sources li:last-child {
-    border-bottom: none;
-}
-.input-area {
+.google-btn {
+    background: white;
+    color: #333;
+    width: 100%;
     display: flex;
-    gap: 10px;
-}
-
-.input-area input {
-    flex: 1;
-    padding: 10px 15px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    font-size: 14px;
-    outline: none;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
-.input-area input:focus {
-    border-color: #2c3e50;
+.google-btn:hover {
+    background: #f1f5f9;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
 }
 
-#loader {
+/* ── Nav Button ─────────────────────────────────────── */
+.nav-btn {
     text-align: center;
-    font-size: 14px;
-    color: #888;
-    margin-top: 10px;
+    margin-top: 30px;
 }
 
-/* ...existing code... */
-
-/* ── Files Box ──────────────────────────────────────── */
-.files-box {
-    background-color: white;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    margin-top: 20px;
+.nav-btn button {
+    padding: 14px 32px;
+    font-size: 16px;
+    border-radius: 30px;
 }
 
-.files-box h2 {
-    margin-bottom: 15px;
-    color: #2c3e50;
+/* ── Status Texts ───────────────────────────────────── */
+#uploadStatus,
+#clearStatus {
+    margin-top: 15px;
+    font-size: 14px;
+    font-weight: 500;
 }
 
+/* ── Files List ─────────────────────────────────────── */
 .files-box ul {
     list-style: none;
-    padding: 0;
 }
 
-
 .file-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 15px;
-    border-bottom: 1px solid #eee;
-    font-size: 14px;
-    color: #333;
+    padding: 14px 18px;
+    background: var(--input-bg);
+    border: 1px solid var(--glass-border);
+    margin-bottom: 10px;
+    border-radius: 10px;
+    font-size: 15px;
+    transition: all var(--transition-speed) ease;
+}
+
+.file-item.active-file {
+    background: rgba(139, 92, 246, 0.25);
+    border-color: var(--primary-color);
 }
 
 .file-item:last-child {
-    border-bottom: none;
+    margin-bottom: 0;
 }
 
 .file-item:hover {
-    background-color: #f5f5f5;
-    border-radius: 5px;
+    background: var(--item-hover-bg);
+    border-color: rgba(139, 92, 246, 0.3);
 }
 
-.delete-btn {
-    background-color: #e74c3c;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 12px;
+.file-item span {
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
-.delete-btn:hover {
-    background-color: #c0392b;
+/* ── Chat Box ───────────────────────────────────────── */
+.chat-box {
+    height: 500px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 20px 25px;
+    gap: 16px;
+    margin-bottom: 20px;
 }
 
+/* Custom Scrollbar for Chat */
+.chat-box::-webkit-scrollbar {
+    width: 6px;
+}
 
-/* ── Clear Box ───────────────────────────────────────── */
-.clear-box {
-    background-color: white;
-    padding: 20px;
+.chat-box::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
     border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    margin-top: 20px;
-    text-align: center;
 }
 
-.clear-box h2 {
-    margin-bottom: 10px;
-    color: #2c3e50;
+.chat-box::-webkit-scrollbar-thumb {
+    background: var(--text-muted);
+    border-radius: 10px;
 }
 
-.clear-box p {
-    font-size: 13px;
-    color: #888;
-    margin-bottom: 15px;
+.chat-box::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-color);
 }
 
-/* ── Clear Vector Button ─────────────────────────────── */
-.clear-vector-btn {
-    background-color: #e67e22;
-    color: white;
+/* ── Messages ───────────────────────────────────────── */
+.message {
+    padding: 14px 18px;
+    border-radius: 14px;
+    line-height: 1.6;
+    max-width: 85%;
+    font-size: 15px;
+    animation: messagePop 0.3s ease-out;
+}
+
+@keyframes messagePop {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.message.user {
+    background: var(--primary-color);
+    color: var(--primary-text);
+    border: 1px solid var(--glass-border);
+    align-self: flex-end;
+    border-bottom-right-radius: 4px;
+}
+
+.message.bot {
+    background: var(--input-bg);
+    border: 1px solid var(--glass-border);
+    align-self: flex-start;
+    border-bottom-left-radius: 4px;
+}
+
+.message.error {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    color: var(--danger-color);
+    align-self: flex-start;
+}
+
+/* ── Input Area ─────────────────────────────────────── */
+.input-area {
+    display: flex;
+    gap: 12px;
+    background: var(--glass-bg);
+    padding: 15px;
+    border-radius: 16px;
+    border: 1px solid var(--glass-border);
+    backdrop-filter: blur(16px);
+}
+
+.input-area input {
+    flex: 1;
+    margin-bottom: 0;
     border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
+    background: var(--input-bg);
+}
+
+#loader {
+    text-align: center;
     font-size: 14px;
+    color: var(--primary-color);
+    margin-top: -10px;
+    margin-bottom: 10px;
+    font-weight: 500;
+    animation: pulse 1.5s infinite;
 }
 
-.clear-vector-btn:hover {
-    background-color: #d35400;
+@keyframes pulse {
+    0% {
+        opacity: 0.6;
+    }
+
+    50% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0.6;
+    }
 }
 
-#clearStatus {
+/* ── Sources & Badge ────────────────────────────────── */
+.sources {
     margin-top: 10px;
-    font-size: 14px;
-    font-weight: bold;
+    background: var(--input-bg);
+    border-left: 3px solid var(--accent-color);
+    padding: 12px 16px;
+    border-radius: 6px;
+    font-size: 13px;
+    color: var(--text-muted);
 }
 
-/* ...existing code... */
+.sources ul {
+    margin-top: 8px;
+    padding-left: 0;
+    list-style: none;
+}
 
-/* ── Auth Box ────────────────────────────────────────── */
-.auth-box {
-    background-color: white;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    max-width: 400px;
-    margin: 40px auto;
-    text-align: center;
+.sources li {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 0;
+    border-bottom: 1px solid var(--glass-border);
 }
 
-.auth-box h2 {
-    margin-bottom: 20px;
-    color: #2c3e50;
+.sources li:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
 }
 
-.auth-box input {
-    width: 100%;
-    padding: 10px 15px;
-    margin-bottom: 15px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    font-size: 14px;
-    outline: none;
-    box-sizing: border-box;
+.confidence {
+    color: var(--success-color);
+    font-weight: 600;
 }
 
-.auth-box input:focus {
-    border-color: #2c3e50;
+.file-badge {
+    text-align: center;
+    padding: 10px 15px;
+    border-radius: 20px;
+    display: inline-block;
+    margin: 0 auto 20px;
+    font-size: 14px;
+    font-weight: 500;
+    background: rgba(16, 185, 129, 0.2);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+    color: var(--success-color);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }
 
-.auth-box button {
-    width: 100%;
-    padding: 10px;
-    font-size: 15px;
+/* ── Auth Box ───────────────────────────────────────── */
+.auth-box {
+    max-width: 420px;
+    margin: 60px auto;
+    text-align: center;
 }
 
 .auth-box p {
-    margin-top: 15px;
-    font-size: 13px;
-    color: #888;
+    margin-top: 20px;
+    font-size: 14px;
+    color: var(--text-muted);
 }
 
 .auth-box a {
-    color: #2c3e50;
-    font-weight: bold;
+    color: var(--primary-color);
+    font-weight: 600;
     text-decoration: none;
+    transition: color var(--transition-speed);
 }
 
 .auth-box a:hover {
+    color: var(--primary-hover);
     text-decoration: underline;
 }
 
 .error-msg {
-    background-color: #fadbd8;
-    color: #e74c3c;
-    padding: 10px;
-    border-radius: 5px;
-    margin-bottom: 15px;
-    font-size: 13px;
-}
-
-.google-btn {
-    background-color: #4285f4;
-    color: white;
-    width: 100%;
-    padding: 10px;
-    font-size: 15px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 5px;
-}
-
-.google-btn:hover {
-    background-color: #357abd;
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--danger-color);
+    padding: 12px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 14px;
+    border: 1px solid rgba(239, 68, 68, 0.3);
 }
 
-/* ── Divider ─────────────────────────────────────────── */
 .divider {
     display: flex;
     align-items: center;
-    margin: 15px 0;
-    color: #888;
+    margin: 20px 0;
+    color: var(--text-muted);
     font-size: 13px;
 }
 
@@ -404,6 +566,49 @@ button:hover {
 .divider::after {
     content: "";
     flex: 1;
-    border-bottom: 1px solid #ccc;
-    margin: 0 10px;
+    border-bottom: 1px solid var(--glass-border);
+    margin: 0 15px;
+}
+
+/* ── Profile Pic ────────────────────────────────────── */
+.profile-container {
+    position: relative;
+    display: inline-block;
+}
+
+.profile-pic {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--primary-color);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.profile-pic:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    filter: brightness(0.8);
+}
+
+.profile-pic:hover::after {
+    content: "Edit";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background: var(--input-bg);
+    color: var(--text-main);
+    font-size: 11px;
+    width: 100%;
+    text-align: center;
+    border-radius: 0 0 50% 50%;
+    pointer-events: none;
+}
+
+.username-text {
+    font-size: 16px;
+    color: var(--text-main);
+    font-weight: 500;
 }

templates/admin.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Dashboard</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+    <style>
+        .admin-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+            color: var(--text-main);
+        }
+
+        .admin-table th,
+        .admin-table td {
+            padding: 12px;
+            border: 1px solid var(--glass-border);
+            text-align: left;
+        }
+
+        .admin-table th {
+            background: rgba(139, 92, 246, 0.2);
+        }
+
+        .admin-table td {
+            background: var(--input-bg);
+        }
+
+        .file-list {
+            margin: 0;
+            padding-left: 20px;
+        }
+
+        .file-link {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        .file-link:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+
+<body>
+    <header>
+        <h1>🛡️ Admin Dashboard</h1>
+        <div class="header-right">
+            <button class="logout-btn" style="background-color: var(--primary-color);"
+                onclick="toggleLightMode()">🌗</button>
+            <a href="/">← Dashboard</a>
+            <a href="/logout"><button class="logout-btn">Logout</button></a>
+        </div>
+    </header>
+
+    <div class="container" style="max-width: 1000px;">
+        <div class="upload-box" style="text-align: left;">
+            <h2>👥 Registered Users & Files</h2>
+            <table class="admin-table">
+                <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>User</th>
+                        <th>Email</th>
+                        <th>Preferred Model</th>
+                        <th>Files (Click to Download)</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for user in users %}
+                    <tr>
+                        <td>{{ user.id }}</td>
+                        <td>
+                            {% if user.is_admin %}⭐{% endif %}
+                            {{ user.username }}
+                        </td>
+                        <td>{{ user.email }}</td>
+                        <td>{{ user.preferred_model }}</td>
+                        <td>
+                            {% if user_files[user.username] %}
+                            <ul class="file-list">
+                                {% for f in user_files[user.username] %}
+                                <li>
+                                    📄 <a href="/download/{{ user.username }}/{{ f }}" class="file-link"
+                                        title="Download {{ f }}">{{ f }}</a>
+                                </li>
+                                {% endfor %}
+                            </ul>
+                            {% else %}
+                            <span style="color: var(--text-muted);">No files</span>
+                            {% endif %}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</body>
+
+</html>

templates/chat.html

@@ -1,17 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RAG Chat</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
 </head>
+
 <body>
 
     <!-- ── Header ── -->
     <header>
         <h1>💬 RAG PDF Assistant</h1>
-        <a href="/">← Upload New PDF</a>
+        <div class="header-right">
+            <button class="logout-btn" style="background-color: var(--primary-color);"
+                onclick="toggleLightMode()">🌗</button>
+            <a href="/profile">👤 Profile</a>
+            <a href="/">← Dashboard</a>
+        </div>
     </header>
 
     <!-- ── Chat Box ── -->
@@ -28,18 +36,14 @@
 
         <!-- ── Input Area ── -->
         <div class="input-area">
-            <input 
-                type="text" 
-                id="questionInput" 
-                placeholder="Ask a question..." 
-            />
+            <input type="text" id="questionInput" placeholder="Ask a question..." />
             <button id="askBtn">Ask</button>
             <button id="clearBtn">Clear History</button>
         </div>
 
         <!-- ── Loading Spinner ── -->
         <div id="loader" style="display:none;">
-            ⏳ Thinking...
+            Generating response...
         </div>
     </div>
 
@@ -71,7 +75,13 @@
             }
 
             if (!currentFile) {
-                alert("Please upload a PDF first!")
+                chatBox.innerHTML += `
+                    <div class="message error">
+                        ❌ Please go back and upload a PDF first!
+                    </div>
+                `
+                document.getElementById("questionInput").value = ""
+                chatBox.scrollTop = chatBox.scrollHeight
                 return
             }
 
@@ -90,7 +100,7 @@
                 const response = await fetch("/ask", {
                     method: "POST",
                     headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ 
+                    body: JSON.stringify({
                         question: question,
                         filename: currentFile
                     })
@@ -106,35 +116,13 @@
                             <strong>Assistant:</strong> ${data.answer}
                         </div>
                     `
-
-                    // ── Show sources with confidence score ──
-                    if (data.sources && data.sources.length > 0) {
-                        let sourcesHtml = `<div class="sources"><strong>📌 Sources:</strong><ul>`
-                        data.sources.forEach(src => {
-                            let confidenceColor = src.confidence >= 70 ? "green"
-                                               : src.confidence >= 40 ? "orange"
-                                               : "red"
-                            sourcesHtml += `
-                                <li>
-                                    📄 ${src.filename} - Page ${src.page}
-                                    <span class="confidence" style="color:${confidenceColor}">
-                                        ● ${src.confidence}% match
-                                    </span>
-                                </li>
-                            `
-                        })
-                        sourcesHtml += `</ul></div>`
-                        chatBox.innerHTML += sourcesHtml
-                    }
-
                 } else {
                     chatBox.innerHTML += `
                         <div class="message error">
-                            ❌ ${data.error}
+                            ❌ Error: ${data.error || "Unknown error"}
                         </div>
                     `
                 }
-
             } catch (error) {
                 loader.style.display = "none"
                 chatBox.innerHTML += `
@@ -166,4 +154,5 @@
     </script>
 
 </body>
+
 </html>

templates/index.html

@@ -1,20 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RAG Application</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
 </head>
+
 <body>
 
     <!-- ── Header ── -->
     <header>
-    <h1>📄 RAG PDF Assistant</h1>
-    <div class="header-right">
-        <span>👤 {{ username }}</span>
-        <a href="/logout"><button class="logout-btn">Logout</button></a>
-    </div>
+        <h1>📄 RAG Assistant</h1>
+        <div class="header-right">
+
+            <!-- ── Profile Pic ── -->
+            <div class="profile-container">
+                <img id="profilePic"
+                    src="{{ current_user.profile_pic or url_for('static', filename='default_avatar.png') }}"
+                    alt="Profile" class="profile-pic" onclick="document.getElementById('picInput').click()"
+                    title="Click to change profile picture" />
+                <input type="file" id="picInput" accept="image/*" style="display:none"
+                    onchange="uploadProfilePic(this)" />
+            </div>
+
+            <!-- ── Username ── -->
+            <a href="/profile" style="text-decoration: none; display: flex; align-items: center;">
+                <span class="username-text" style="cursor: pointer;" title="Go to Profile">{{ current_user.username
+                    }}</span>
+            </a>
+
+            <!-- ── Admin Button ── -->
+            {% if current_user.is_admin %}
+            <a href="/admin">
+                <button class="logout-btn" style="background-color: var(--danger-color); margin-right: 10px;">🛡️ Admin
+                    Node</button>
+            </a>
+            {% endif %}
+
+            <!-- ── Light Mode Toggle ── -->
+            <button class="logout-btn" style="background-color: var(--primary-color);"
+                onclick="toggleLightMode()">🌗</button>
+
+            <!-- ── Logout ── -->
+            <a href="/logout">
+                <button class="logout-btn">Logout</button>
+            </a>
+
+        </div>
     </header>
 
     <div class="container">
@@ -36,6 +71,7 @@
             </ul>
         </div>
 
+
         <div class="clear-box">
             <h2>🔄 Reset Vector Store</h2>
             <p>This will delete all stored embeddings</p>
@@ -71,13 +107,19 @@
                 let icon = "📄"
                 if (file.endsWith(".docx")) icon = "📝"
                 if (file.endsWith(".txt")) icon = "📃"
-                
+
+                const isSelected = localStorage.getItem("currentFile") === file ? "checked" : ""
+                const activeClass = localStorage.getItem("currentFile") === file ? "active-file" : ""
+
                 filesList.innerHTML += `
-                    <li class="file-item">
-                    <span>📄 ${file}</span>
+                    <li class="file-item ${activeClass}" style="cursor: pointer;" onclick="selectFile('${file}')">
+                    <span>
+                        <input type="radio" name="selectedFile" value="${file}" ${isSelected} class="file-radio" onclick="event.stopPropagation(); selectFile('${file}')">
+                        ${icon} ${file}
+                    </span>
                     <button 
                         class="delete-btn" 
-                        onclick="deleteFile('${file}')">
+                        onclick="event.stopPropagation(); deleteFile('${file}')">
                         🗑️ Delete
                     </button>
                 </li>
@@ -85,6 +127,33 @@
             })
         }
 
+        function selectFile(filename) {
+            localStorage.setItem("currentFile", filename)
+            loadFiles() // Refresh list to show active selection
+        }
+
+        async function uploadProfilePic(input) {
+            const file = input.files[0]
+            if (!file) return
+
+            const formData = new FormData()
+            formData.append("profile_pic", file)
+
+            const response = await fetch("/upload_profile_pic", {
+                method: "POST",
+                body: formData
+            })
+
+            const data = await response.json()
+
+            if (response.ok) {
+                // ── Update pic instantly ──
+                document.getElementById("profilePic").src = data.profile_pic + "?t=" + Date.now()
+            } else {
+                alert("❌ " + data.error)
+            }
+        }
+
         // ── Upload PDF ────────────────────────────────────
         document.getElementById("uploadForm").addEventListener("submit", async (e) => {
             e.preventDefault()
@@ -115,55 +184,56 @@
         })
 
         document.getElementById("clearVectorBtn").addEventListener("click", async () => {
-        if (!confirm("Are you sure? This will delete ALL embeddings!")) return
+            if (!confirm("Are you sure? This will delete ALL embeddings!")) return
 
-        const clearStatus = document.getElementById("clearStatus")
-        clearStatus.innerText = "Clearing..."
+            const clearStatus = document.getElementById("clearStatus")
+            clearStatus.innerText = "Clearing..."
 
-        const response = await fetch("/clear_vectorstore", {
-            method: "POST"
-        })
+            const response = await fetch("/clear_vectorstore", {
+                method: "POST"
+            })
 
-        const data = await response.json()
+            const data = await response.json()
 
-        if (response.ok) {
-            clearStatus.innerText = "✅ " + data.message
-            clearStatus.style.color = "green"
-            localStorage.removeItem("currentFile")
-            loadFiles()
-        } else {
-            clearStatus.innerText = "❌ " + data.error
-            clearStatus.style.color = "red"
-        }
-    })
+            if (response.ok) {
+                clearStatus.innerText = "✅ " + data.message
+                clearStatus.style.color = "green"
+                localStorage.removeItem("currentFile")
+                loadFiles()
+            } else {
+                clearStatus.innerText = "❌ " + data.error
+                clearStatus.style.color = "red"
+            }
+        })
 
         // ── Load Files on Page Load ───────────────────────
         async function deleteFile(filename) {
-        if (!confirm(`Are you sure you want to delete ${filename}?`)) return
+            if (!confirm(`Are you sure you want to delete ${filename}?`)) return
 
-        const response = await fetch("/delete", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ filename: filename })
-        })
+            const response = await fetch("/delete", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ filename: filename })
+            })
+
+            const data = await response.json()
 
-        const data = await response.json()
+            if (response.ok) {
+                alert("✅ " + data.message)
 
-        if (response.ok) {
-            alert("✅ " + data.message)
+                // Clear localStorage if deleted file was selected
+                if (localStorage.getItem("currentFile") === filename) {
+                    localStorage.removeItem("currentFile")
+                }
 
-            // Clear localStorage if deleted file was selected
-            if (localStorage.getItem("currentFile") === filename) {
-                localStorage.removeItem("currentFile")
+                loadFiles() // Refresh list
+            } else {
+                alert("❌ " + data.error)
             }
-
-            loadFiles() // Refresh list
-        } else {
-            alert("❌ " + data.error)
         }
-    }
         loadFiles()
     </script>
 
 </body>
+
 </html>

templates/login.html

@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
+
 <body>
     <header>
-        <h1>🔑 Login</h1>
+        <h1>📄 PDF Assistant RAG</h1>
     </header>
 
     <div class="container">
@@ -31,7 +33,7 @@
                 </span>
             </div>
 
-             <a href="{{ url_for('google.login') }}">
+            <a href="{{ url_for('google.login') }}">
                 <button class="google-btn">
                     🌐 Login with Google
                 </button>
@@ -40,5 +42,11 @@
             <p>Don't have an account? <a href="/register">Register</a></p>
         </div>
     </div>
+
+    <!-- ── Footer ── -->
+    <footer style="text-align: center; padding: 20px; color: var(--text-muted); margin-top: 40px; font-size: 14px;">
+        <p>&copy; 2026 RAG Assistant. Param20h</p>
+    </footer>
 </body>
+
 </html>

templates/profile.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User Profile</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+</head>
+
+<body>
+
+    <!-- ── Header ── -->
+    <header>
+        <h1>👤 My Profile</h1>
+        <div class="header-right">
+            <button class="logout-btn" style="background-color: var(--primary-color);"
+                onclick="toggleLightMode()">🌗</button>
+            <a href="/">← Back to Dashboard</a>
+            <a href="/logout"><button class="logout-btn">Logout</button></a>
+        </div>
+    </header>
+
+    <div class="container">
+
+        <!-- ── User Profile ── -->
+        <div class="upload-box" style="display: flex; align-items: center; gap: 20px; text-align: left;">
+            <div class="profile-container" style="display:inline-block;">
+                <img id="profilePic"
+                    src="{{ current_user.profile_pic or url_for('static', filename='default_avatar.png') }}"
+                    alt="Profile" class="profile-pic" style="width: 80px; height: 80px;"
+                    onclick="document.getElementById('picInput').click()" title="Click to change profile picture" />
+                <input type="file" id="picInput" accept="image/*" style="display:none"
+                    onchange="uploadProfilePic(this)" />
+            </div>
+            <div>
+                <h2 style="margin-bottom: 5px;">{{ current_user.username }}</h2>
+                <p style="color: var(--text-muted);">{{ current_user.email }}</p>
+            </div>
+        </div>
+
+        <!-- ── Settings / Custom APIs ── -->
+        <div class="upload-box" style="text-align: left;">
+            <h2>⚙️ API Settings</h2>
+            <form id="settingsForm">
+                <label style="color: var(--text-main); font-weight: 500; font-size: 14px;">Select Preferred
+                    Model</label>
+                <select id="preferredModel" name="preferred_model"
+                    style="width: 100%; padding: 12px; margin: 10px 0 20px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-main); outline: none;">
+                    <option value="groq" {% if current_user.preferred_model=='groq' %}selected{% endif %}>Groq (Llama 3)
+                    </option>
+                    <option value="gemini" {% if current_user.preferred_model=='gemini' %}selected{% endif %}>Gemini
+                        (Google)</option>
+                </select>
+
+                <label style="color: var(--text-main); font-weight: 500; font-size: 14px;">Groq API Key
+                    (Optional)</label>
+                <input type="password" id="groqKey" name="groq_key" placeholder="Enter your Groq API Key..."
+                    value="{{ current_user.groq_api_key or '' }}" style="margin-top: 10px;">
+
+                <label style="color: var(--text-main); font-weight: 500; font-size: 14px;">Gemini API Key
+                    (Optional)</label>
+                <input type="password" id="geminiKey" name="gemini_key" placeholder="Enter your Gemini API Key..."
+                    value="{{ current_user.gemini_api_key or '' }}" style="margin-top: 10px;">
+
+                <button type="submit" style="width: 100%; margin-top: 15px;">Save Settings</button>
+            </form>
+            <div id="settingsStatus" style="margin-top: 15px; font-weight: 500;"></div>
+        </div>
+
+        <!-- ── Uploaded Files List ── -->
+        <div class="files-box">
+            <h2>📋 My Uploaded Files</h2>
+            <ul id="filesList">
+                <!-- Files appear here -->
+            </ul>
+        </div>
+    </div>
+
+    <script>
+        async function uploadProfilePic(input) {
+            const file = input.files[0]
+            if (!file) return
+
+            const formData = new FormData()
+            formData.append("profile_pic", file)
+
+            const response = await fetch("/upload_profile_pic", {
+                method: "POST",
+                body: formData
+            })
+
+            const data = await response.json()
+
+            if (response.ok) {
+                document.getElementById("profilePic").src = data.profile_pic + "?t=" + Date.now()
+            } else {
+                alert("❌ " + data.error)
+            }
+        }
+
+        document.getElementById("settingsForm").addEventListener("submit", async (e) => {
+            e.preventDefault()
+            const statusDiv = document.getElementById("settingsStatus")
+            statusDiv.innerText = "Saving..."
+            statusDiv.style.color = "var(--primary-color)"
+
+            const preferredModel = document.getElementById("preferredModel").value
+            const groqKey = document.getElementById("groqKey").value
+            const geminiKey = document.getElementById("geminiKey").value
+
+            const response = await fetch("/update_settings", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ preferred_model: preferredModel, groq_key: groqKey, gemini_key: geminiKey })
+            })
+
+            const data = await response.json()
+            if (response.ok) {
+                statusDiv.innerText = "✅ " + data.message
+                statusDiv.style.color = "var(--success-color)"
+            } else {
+                statusDiv.innerText = "❌ " + data.error
+                statusDiv.style.color = "var(--danger-color)"
+            }
+        })
+
+        async function loadFiles() {
+            const response = await fetch("/files")
+            const data = await response.json()
+            const filesList = document.getElementById("filesList")
+            filesList.innerHTML = ""
+
+            if (data.files.length === 0) {
+                filesList.innerHTML = "<li>No files uploaded yet</li>"
+                return
+            }
+
+            data.files.forEach(file => {
+                let icon = "📄"
+                if (file.endsWith(".docx")) icon = "📝"
+                if (file.endsWith(".txt")) icon = "📃"
+
+                filesList.innerHTML += `
+                    <li class="file-item">
+                    <span>${icon} ${file}</span>
+                    <button class="delete-btn" onclick="deleteFile('${file}')">🗑️ Delete</button>
+                </li>
+                `
+            })
+        }
+
+        async function deleteFile(filename) {
+            if (!confirm(`Are you sure you want to delete ${filename}?`)) return
+            const response = await fetch("/delete", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ filename: filename })
+            })
+            const data = await response.json()
+            if (response.ok) {
+                if (localStorage.getItem("currentFile") === filename) {
+                    localStorage.removeItem("currentFile")
+                }
+                loadFiles()
+            } else {
+                alert("❌ " + data.error)
+            }
+        }
+
+        loadFiles()
+    </script>
+</body>
+
+</html>

templates/register.html

@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Register</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
+
 <body>
     <header>
-        <h1>📝 Register</h1>
+        <h1>📄 PDF Assistant RAG</h1>
     </header>
 
     <div class="container">
@@ -29,5 +31,11 @@
             <p>Already have an account? <a href="/login">Login</a></p>
         </div>
     </div>
+
+    <!-- ── Footer ── -->
+    <footer style="text-align: center; padding: 20px; color: var(--text-muted); margin-top: 40px; font-size: 14px;">
+        <p>&copy; 2026 RAG Assistant. Param20h</p>
+    </footer>
 </body>
+
 </html>