Add project files (exclude local DBs, indexes and secrets)

.gitignore

@@ -0,0 +1,33 @@
+# create/append .gitignore with safe patterns
+@"
+# Local env & secrets
+.env
+token.txt
+
+# Chroma DBs / sqlite / index files
+chroma_db/
+chroma_digital_icfai/
+*.sqlite3
+*.sqlite
+
+# Faiss / index / serialized binaries
+faiss_index/
+*.faiss
+*.pkl
+*.bin
+*.npy
+
+# Large data folders
+data1/
+data/
+datasets/
+
+# Python / venv / caches
+venv/
+__pycache__/
+*.pyc
+
+# OS files
+.DS_Store
+Thumbs.db
+"@ | Out-File -FilePath .gitignore -Encoding utf8 -Append

README.md

@@ -0,0 +1,9 @@
+---
+title: IFHE Chatbot
+emoji: 🧠
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_file: app.py
+pinned: false
+---

digitalicfai

@@ -0,0 +1 @@
+Subproject commit 98aaebe3b19e2b55d9de2d3e8e08d804e654cef4

llama_api.py

@@ -0,0 +1,126 @@
+# import ollama
+
+# # Synchronous ask (kept for caching or non-stream calls)
+# def ask_ollama(prompt: str, model_name: str = "llama3"):
+#     response = ollama.chat(
+#         model=model_name,
+#         messages=[
+#             {"role": "system", "content": "You are a helpful assistant for college queries."},
+#             {"role": "user", "content": prompt}
+#         ]
+#     )
+#     return response.get("message", {}).get("content", "")
+
+# # Streaming generator: yields incremental text chunks
+# def ask_ollama_stream(prompt: str, model_name: str = "llama3"):
+#     stream = ollama.chat(
+#         model=model_name,
+#         messages=[
+#             {"role": "system", "content": "You are a helpful assistant for college queries."},
+#             {"role": "user", "content": prompt}
+#         ],
+#         stream=True
+#     )
+#     buffer = ""
+#     for chunk in stream:
+#         # chunk may contain partial content; combine
+#         text = chunk.get("message", {}).get("content", "")
+#         if text:
+#             # yield incremental text (could be full or partial)
+#             yield text
+
+from dotenv import load_dotenv
+import os
+from openai import OpenAI
+
+# Load environment variables
+load_dotenv()
+
+OPENROUTER_KEY = os.getenv("OPENROUTER_API_KEY")
+
+if not OPENROUTER_KEY:
+    raise ValueError("❌ Missing OPENROUTER_API_KEY in .env")
+
+print("Loaded key prefix:", OPENROUTER_KEY[:15])
+
+# Initialize OpenRouter API client
+client = OpenAI(
+    base_url="https://openrouter.ai/api/v1",
+    api_key=OPENROUTER_KEY,
+)
+
+
+# 🧠 Non-streaming function
+def ask_ollama(prompt: str, model_name: str = "meta-llama/llama-3.3-8b-instruct:free"):
+    """
+    Sends a prompt to OpenRouter (Llama-3.3-8B-Instruct) and returns the response text.
+    Handles missing fields, errors, and empty responses gracefully.
+    """
+    try:
+        print(f"🚀 Sending request to OpenRouter model: {model_name}")
+        completion = client.chat.completions.create(
+            extra_headers={
+                "HTTP-Referer": "https://ifheindia.org",
+                "X-Title": "IFHE Chatbot",
+            },
+            model=model_name,
+            messages=[
+                {"role": "system", "content": "You are a helpful academic assistant for IFHE University. Quote only factual content from context."},
+                {"role": "user", "content": prompt},
+            ],
+        )
+
+        # --- Safe parsing ---
+        if not hasattr(completion, "choices") or not completion.choices:
+            print("⚠️ No choices returned from OpenRouter.")
+            return "⚠️ No valid response received from the model."
+
+        message = getattr(completion.choices[0].message, "content", None)
+        if not message or not message.strip():
+            print("⚠️ Empty message content in completion.")
+            return "⚠️ The model did not return any text."
+
+        print("🧠 Model raw response:", message[:250])
+        return message.strip()
+
+    except Exception as e:
+        print("❌ OpenRouter / Llama API Error:", e)
+        return f"⚠️ Error communicating with the model: {e}"
+
+
+
+def ask_ollama_stream(prompt: str, model_name: str = "meta-llama/llama-3.3-8b-instruct:free"):
+    """
+    Streams response token-by-token for real-time output.
+    Includes detailed logging for debugging.
+    """
+    try:
+        print(f"🚀 Connecting to OpenRouter model: {model_name}")
+        stream = client.chat.completions.create(
+            extra_headers={
+                "HTTP-Referer": "https://ifheindia.org",
+                "X-Title": "IFHE Chatbot",
+            },
+            model=model_name,
+            messages=[
+                {"role": "system", "content": "You are a helpful academic assistant for IFHE University."},
+                {"role": "user", "content": prompt},
+            ],
+            stream=True,
+        )
+
+        for chunk in stream:
+            # Log structure of each chunk
+            print(f"📦 Chunk received: {chunk}")
+            if hasattr(chunk.choices[0].delta, "content"):
+                text = chunk.choices[0].delta.content
+                if text:
+                    print(f"🧩 Token: {text!r}")
+                    yield text
+
+        print("✅ Streaming complete.")
+
+    except Exception as e:
+        print("⚠️ Streaming error (inside llama_api):", e)
+        yield f"⚠️ Error while streaming: {str(e)}"
+

static/chat.js

@@ -0,0 +1,62 @@
+const chatBox = document.getElementById("chat-box");
+const chatForm = document.getElementById("chat-form");
+const chatInput = document.getElementById("chat-input");
+
+// Add message bubbles to chat
+function addMessage(role, text) {
+  const msg = document.createElement("div");
+  msg.className = `chat-message ${role}-message`;
+
+  // Convert Markdown to HTML using marked.js
+  try {
+    msg.innerHTML = marked.parse(text);
+  } catch (err) {
+    console.error("Markdown parse error:", err);
+    msg.textContent = text; // fallback
+  }
+
+  chatBox.appendChild(msg);
+  chatBox.scrollTop = chatBox.scrollHeight;
+}
+
+// Simulated typing animation
+function showTypingIndicator() {
+  const indicator = document.createElement("div");
+  indicator.className = "chat-message bot-message typing";
+  indicator.textContent = "Assistant is typing...";
+  chatBox.appendChild(indicator);
+  chatBox.scrollTop = chatBox.scrollHeight;
+}
+
+function removeTypingIndicator() {
+  const indicator = chatBox.querySelector(".typing");
+  if (indicator) indicator.remove();
+}
+
+// Send message to backend
+chatForm.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  const userMessage = chatInput.value.trim();
+  if (!userMessage) return;
+
+  addMessage("user", userMessage);
+  chatInput.value = "";
+
+  showTypingIndicator();
+
+  try {
+    const res = await fetch("/chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams({ user_message: userMessage }),
+    });
+    const data = await res.json();
+
+    removeTypingIndicator();
+    addMessage("bot", data.answer || "⚠️ No response received.");
+  } catch (err) {
+    removeTypingIndicator();
+    addMessage("bot", "⚠️ Error connecting to server.");
+    console.error(err);
+  }
+});

static/chat_digital.js

@@ -0,0 +1,73 @@
+
+const chatBox = document.getElementById("chat-box");
+const chatForm = document.getElementById("chat-form");
+const chatInput = document.getElementById("chat-input");
+
+
+function addMessage(role, text) {
+  const msg = document.createElement("div");
+  msg.className = `chat-message ${role}-message`;
+
+  try {
+    msg.innerHTML = marked.parse(text); 
+  } catch {
+    msg.textContent = text;
+  }
+
+  chatBox.appendChild(msg);
+  chatBox.scrollTop = chatBox.scrollHeight;
+}
+
+
+function showTyping() {
+  const tip = document.createElement("div");
+  tip.className = "chat-message bot-message typing";
+  tip.textContent = "Assistant is typing";
+  chatBox.appendChild(tip);
+  chatBox.scrollTop = chatBox.scrollHeight;
+}
+
+function removeTyping() {
+  const t = chatBox.querySelector(".typing");
+  if (t) t.remove();
+}
+
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+
+chatInput.addEventListener("keydown", function (e) {
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    chatForm.dispatchEvent(new Event("submit"));
+  }
+});
+
+
+chatForm.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  const userMsg = chatInput.value.trim();
+  if (!userMsg) return;
+
+  addMessage("user", userMsg);
+  chatInput.value = "";
+  showTyping();
+
+  try {
+    const res = await fetch("/digital_icfai_chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams({ user_message: userMsg }),
+    });
+
+    const data = await res.json();
+    await sleep(400); 
+    removeTyping();
+    addMessage("bot", data.answer || "⚠️ No response received.");
+  } catch (err) {
+    removeTyping();
+    addMessage("bot", "⚠️ Error connecting to server.");
+    console.error(err);
+  }
+});

static/courses.js

@@ -0,0 +1,29 @@
+const courseForm = document.getElementById("course-form");
+const courseResults = document.getElementById("course-results");
+
+courseForm.addEventListener("submit", async (e) => {
+  e.preventDefault();
+
+  courseResults.innerHTML = "<p><em>Generating recommendations...</em></p>";
+
+  const formData = new FormData(courseForm);
+
+  try {
+    const res = await fetch("/recommend", { method: "POST", body: formData });
+    const data = await res.json();
+
+    if (data.recommendations && data.recommendations.length > 0) {
+      courseResults.innerHTML = `
+        <h3>Recommended Courses:</h3>
+        <ul>
+          ${data.recommendations.map(c => `<li>${c}</li>`).join("")}
+        </ul>
+      `;
+    } else {
+      courseResults.innerHTML = "<p>No matching courses found.</p>";
+    }
+  } catch (err) {
+    courseResults.innerHTML = "<p>⚠️ Error fetching recommendations.</p>";
+    console.error(err);
+  }
+});

static/employees.js

@@ -0,0 +1,62 @@
+document.getElementById("employee-form").addEventListener("submit", async (e) => {
+  e.preventDefault();
+  const formData = new FormData(e.target);
+  const resultsDiv = document.getElementById("employee-results");
+
+  resultsDiv.innerHTML = "⏳ Searching employee data...";
+
+  try {
+    const response = await fetch("/employees/search", {
+      method: "POST",
+      body: formData,
+    });
+
+    const data = await response.json();
+    resultsDiv.innerHTML = "";
+
+    if (data.error) {
+      resultsDiv.innerHTML = `<p style="color:red;">⚠️ ${data.error}</p>`;
+      return;
+    }
+
+    if (!data.results || data.results.length === 0) {
+      resultsDiv.innerHTML = "<p style='color:red;'>No data found.</p>";
+      return;
+    }
+
+    // Build a clean table for results
+    const table = document.createElement("table");
+    table.classList.add("results-table");
+
+    // Table header
+    const headers = Object.keys(data.results[0]);
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    headers.forEach((key) => {
+      const th = document.createElement("th");
+      th.textContent = key;
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    // Table body
+    const tbody = document.createElement("tbody");
+    data.results.forEach((row) => {
+      const tr = document.createElement("tr");
+      headers.forEach((key) => {
+        const td = document.createElement("td");
+        td.textContent = row[key];
+        tr.appendChild(td);
+      });
+      tbody.appendChild(tr);
+    });
+    table.appendChild(tbody);
+
+    resultsDiv.appendChild(table);
+
+  } catch (err) {
+    console.error(err);
+    resultsDiv.innerHTML = "⚠️ Error fetching employee data.";
+  }
+});

static/style.css

@@ -0,0 +1,698 @@
+/* ==========================
+   IFHE Assistant UI Styling
+========================== */
+
+/* --- Google Fonts --- */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Poppins:wght@400;500;600&display=swap');
+
+/* --- Global Variables --- */
+:root {
+  --primary: #1b3a7a;     /* Deep IFHE blue */
+  --accent: #274b9f;      /* Bright blue */
+  --highlight: #ffcc00;   /* Gold accent */
+  --card-bg: #ffffff;
+  --light-bg: #f4f8fc;
+  --text-dark: #0c1c3a;
+  --radius: 12px;
+  --shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
+}
+
+/* --- Global Reset --- */
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  overflow-x: hidden;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
+  background: var(--light-bg);
+  color: var(--text-dark);
+  line-height: 1.6;
+}
+
+/* ==========================
+   HEADER (Centered IFHE Assistant)
+========================== */
+header {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: none;
+  background-color: transparent;
+  color: #fff;
+  padding: 0.2rem 1rem;
+  box-shadow: none;
+  backdrop-filter: blur(6px);
+  z-index: 1000;
+  box-sizing: border-box;
+}
+
+/* Centered Title */
+.brand-title {
+  flex: 1;
+  text-align: center;
+  font-family: "Montserrat", "Poppins", sans-serif;
+  font-weight: 700;
+  font-size: 1.4rem;
+  letter-spacing: 0.5px;
+  color: #ffffff;
+  margin: 0;
+  text-transform: uppercase;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+}
+
+/* Left & Right Containers for layout balance */
+.nav-left {
+  flex: 0.2;
+}
+
+.nav-right {
+  flex: 0.2;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+/* ==========================
+   HAMBURGER DROPDOWN MENU
+========================== */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropbtn {
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.3s ease;
+}
+
+.dropbtn:hover {
+  color: var(--highlight);
+}
+
+.menu-icon {
+  font-size: 26px;
+  line-height: 1;
+}
+
+/* Dropdown content styling */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 48px; /* perfectly below icon */
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  z-index: 1000;
+  min-width: 220px;
+}
+
+/* Show dropdown on hover */
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+/* Dropdown links */
+.dropdown-content a {
+  display: block;
+  color: var(--primary);
+  text-decoration: none;
+  font-weight: 500;
+  padding: 12px 16px;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.dropdown-content a:hover {
+  background-color: #f1f5ff;
+  color: var(--accent);
+}
+
+/* ==========================
+   MAIN LAYOUT
+========================== */
+main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 30px 20px;
+}
+
+section {
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+
+/* ==========================
+   CHATBOT SECTION
+========================== */
+.chat-section {
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.chat-container {
+  width: 100%;
+  max-width: 900px;
+  height: calc(100vh - 160px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: #f9fbff;
+  border-radius: var(--radius);
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.08);
+  padding: 20px 22px;
+  margin: 0 auto;
+}
+
+.chat-box {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 10px;
+  text-align: left;
+  scroll-behavior: smooth;
+  margin-bottom: 10px;
+}
+
+.user-message {
+  align-self: flex-end;
+  background: var(--accent);
+  color: white;
+  border-radius: 12px 12px 0 12px;
+  padding: 10px 14px;
+  max-width: 75%;
+  text-align: left;
+  line-height: 1.6;
+}
+
+.bot-message {
+  align-self: flex-start;
+  background: #e7eefb;
+  color: var(--primary);
+  border-radius: 12px 12px 12px 0;
+  padding: 10px 14px;
+  max-width: 75%;
+  text-align: left;
+  line-height: 1.6;
+}
+
+/* Input Form */
+.chat-form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  background: #f8f9fb;
+  border-radius: 10px;
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.05);
+  padding: 10px 12px;
+}
+
+.chat-form textarea {
+  flex: 1;
+  width: 70%;
+  max-width: 700px;
+  min-height: 45px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 15px;
+  resize: none;
+  text-align: left;
+  background: #fff;
+}
+
+.chat-form textarea:focus {
+  border-color: var(--accent);
+  outline: none;
+  box-shadow: 0 0 4px rgba(27, 58, 122, 0.3);
+}
+
+.chat-form button {
+  height: 45px;
+  padding: 0 20px;
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 15px;
+  white-space: nowrap;
+  transition: all 0.25s ease;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+}
+
+.chat-form button:hover {
+  background: var(--accent);
+  transform: translateY(-2px);
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+}
+
+/* ==========================
+   COURSE & EMPLOYEE FORMS
+========================== */
+.form-section {
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 2rem;
+  max-width: 850px;
+  margin: 0 auto;
+}
+
+.form-section form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.form-section label {
+  font-weight: 600;
+  color: var(--primary);
+}
+
+form input,
+form select {
+  padding: 0.6rem 0.8rem;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  font-size: 1rem;
+}
+
+form input:focus,
+form select:focus {
+  border-color: var(--accent);
+  outline: none;
+  box-shadow: 0 0 4px rgba(27, 58, 122, 0.3);
+}
+
+form button {
+  background-color: var(--accent);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+form button:hover {
+  background-color: var(--primary);
+  transform: translateY(-2px);
+}
+
+/* ==========================
+   RESULTS BOX
+========================== */
+.results {
+  margin-top: 1.5rem;
+  background: #f1f5ff;
+  border-radius: var(--radius);
+  padding: 1rem;
+  box-shadow: var(--shadow);
+}
+
+/* ==========================
+   FOOTER
+========================== */
+footer {
+  text-align: center;
+  padding: 0.35rem 0;
+  font-size: 0.8rem;
+  color: var(--text-dark);
+  background: transparent;
+  margin-top: 5px;
+  box-shadow: none;
+}
+
+/* ==========================
+   RESPONSIVE
+========================== */
+@media (max-width: 768px) {
+  header {
+    flex-direction: column;
+    padding: 1rem;
+  }
+
+  .brand-title {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+  }
+
+  .chat-form {
+    flex-direction: column;
+  }
+
+  .chat-form button {
+    width: 100%;
+  }
+}
+
+/* === Dynamic height adjustment for smaller screens === */
+@media (max-height: 800px) {
+  .chat-container {
+    height: 82vh;
+  }
+  section {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+}
+
+/* ==========================
+   EMPLOYEE LOOKUP TABLE STYLING
+========================== */
+.results {
+  background: #f9fbff;
+  padding: 15px;
+  margin-top: 25px;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  overflow-x: auto;
+}
+
+/* Table structure */
+.results table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+  background: #fff;
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+/* Header row */
+.results th {
+  background: var(--accent);
+  color: #fff;
+  text-align: left;
+  padding: 10px 12px;
+  font-weight: 600;
+  text-transform: capitalize;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+/* Table rows */
+.results td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #eaeaea;
+  color: var(--text-dark);
+}
+
+/* Hover effect */
+.results tr:hover {
+  background: #f4f8ff;
+  transition: 0.2s ease;
+}
+
+/* Table scroll fix for small screens */
+@media (max-width: 768px) {
+  .results table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+}
+
+/* ==========================
+   FINAL — Perfect Page Fit (Header, Chat, Footer Visible)
+========================== */
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden; /* prevent page scroll */
+  display: flex;
+  flex-direction: column;
+}
+
+/* Keep header and footer in natural flow */
+header {
+  flex-shrink: 0;
+}
+
+footer {
+  flex-shrink: 0;
+}
+
+/* Main fills the space between header and footer */
+main.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+}
+
+/* Center chat section properly */
+.chat-section {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+
+/* Keep the same size and styling */
+.chat-container {
+  width: 100%;
+  max-width: 900px;
+  height: calc(100vh - 140px); /* fits exactly with header+footer */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: #f9fbff;
+  border-radius: var(--radius);
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.08);
+  padding: 20px 22px;
+  margin: 0 auto;
+}
+
+/* Only the chat box scrolls */
+.chat-box {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 10px;
+  text-align: left;
+  scroll-behavior: smooth;
+  margin-bottom: 10px;
+}
+
+/* ==========================
+   FINAL — Keep Header/Footer Same, Center Chat Perfectly
+========================== */
+
+main.content {
+  flex: 1;
+  display: flex;
+  align-items: center;       /* ✅ vertically center */
+  justify-content: center;   /* ✅ horizontally center */
+  padding: 10px 0;
+  margin: 0 auto;
+  overflow: hidden;
+  width: 100%;
+}
+
+/* Chat section centered within main */
+.chat-section {
+  width: 100%;
+  max-width: 1200px;
+  display: flex;
+  justify-content: center;   /* ✅ horizontally center */
+  align-items: center;       /* ✅ vertically center */
+  margin: 10px 0;
+  padding: 0;
+}
+
+/* Chat container remains same style but centered perfectly */
+.chat-container {
+  width: 100%;
+  max-width: 900px;
+  height: calc(100vh - 180px); /* fits between header & footer */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: #f9fbff;
+  border-radius: var(--radius);
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.08);
+  padding: 20px 22px;
+  margin: 0 auto; /* ✅ ensures it's perfectly centered horizontally */
+}
+.form-section {
+  max-height: calc(100vh - 180px); /* fits between header & footer */
+  overflow-y: auto;                /* enable scroll inside box */
+  scrollbar-width: thin;           /* Firefox */
+  scrollbar-color: var(--accent) #f1f5ff;
+}
+
+/* Employee results box scroll */
+.results {
+  max-height: calc(100vh - 180px); /* fits between header & footer */
+  overflow-y: auto;                /* enable scroll inside box */
+  scrollbar-width: thin;
+  scrollbar-color: var(--accent) #f1f5ff;
+}
+
+.apply-btn {
+  margin-top: 1rem;
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 18px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+}
+
+.apply-btn:hover {
+  background: var(--accent);
+  transform: translateY(-2px);
+}
+.brand-container {
+  display: flex;
+  align-items: center;
+  gap: 10px; /* space between logo and title */
+}
+
+.brand-logo {
+  height: 50px;  /* adjust size as needed */
+  width: auto;
+}
+
+.brand-title {
+  font-size: 1.8rem;
+  font-weight: bold;
+  color: #003366;
+  margin: 0;
+}
+
+.brand-highlight {
+  color: #00509e;
+}
+.menu-icon {
+  color: #003366; /* IFHE blue shade */
+}
+/* ==========================
+   CHAT UI ANIMATIONS & EFFECTS
+========================== */
+
+/* Smooth fade-in for new messages */
+.chat-message {
+  animation: fadeIn 0.3s ease-in-out;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Subtle pop effect on hover */
+.chat-message:hover {
+  transform: scale(1.02);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+/* Soft gradient background for user & bot */
+.user-message {
+  background: linear-gradient(135deg, #1b3a7a, #274b9f);
+  color: #fff;
+  border-radius: 16px 16px 0 16px;
+  box-shadow: 0 2px 8px rgba(27, 58, 122, 0.25);
+}
+
+.bot-message {
+  background: linear-gradient(135deg, #eaf0ff, #f8faff);
+  color: #1b3a7a;
+  border-radius: 16px 16px 16px 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+/* Typing indicator animation */
+.typing::after {
+  content: " ";
+  display: inline-block;
+  width: 0.7em;
+  text-align: left;
+  animation: dots 1s steps(3, end) infinite;
+}
+
+@keyframes dots {
+  0%, 20% { content: ""; }
+  40% { content: "."; }
+  60% { content: ".."; }
+  80%, 100% { content: "..."; }
+}
+
+/* Chat input glow when focused */
+.chat-form textarea:focus {
+  border-color: #0074d9;
+  box-shadow: 0 0 8px rgba(0, 116, 217, 0.4);
+  transition: all 0.3s ease;
+}
+
+/* Button hover animation */
+.chat-form button {
+  position: relative;
+  overflow: hidden;
+  transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.chat-form button::after {
+  content: "";
+  position: absolute;
+  left: 0; top: 0;
+  width: 100%; height: 100%;
+  background: rgba(255, 255, 255, 0.15);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.chat-form button:hover::after {
+  opacity: 1;
+}
+.chat-section {
+  background: linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%);
+}

templates/base.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>IFHE Assistant</title>
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+  <header>
+  <div class="nav-left"></div>
+
+  <div class="brand-container">
+  <img src="/static/image.jpeg" alt="IFHE Logo" class="brand-logo">
+  <h1 class="brand-title">
+    <span class="brand-highlight">DIGITAL </span> ICFAI
+  </h1>
+</div>
+
+
+  <nav class="nav-right">
+    <ul>
+      <div class="dropdown">
+  <button class="dropbtn"><span class="menu-icon">☰</span></button>
+  <div class="dropdown-content">
+    <a href="/chat">Chatbot</a>
+    <a href="/courses">Course Recommender</a>
+    <a href="/employees">Employee Lookup</a>
+  </div>
+</div>
+
+    </ul>
+  </nav>
+</header>
+
+
+  <main class="content">
+    {% block content %}{% endblock %}
+  </main>
+
+  <footer class="footer">
+    <p>© 2025 ICFAI University | Powered by CIT</p>
+  </footer>
+</body>
+</html>

templates/base_digital.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Digital ICFAI Assistant</title>
+  <link rel="stylesheet" href="/static/style.css">
+  <style>
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 24px;
+    background: linear-gradient(to right, #0074d9, #003366); 
+    border: none;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+  }
+
+  .brand-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .brand-logo {
+    height: 40px;
+    width: auto;
+    border-radius: 50%;
+    box-shadow: 0 0 6px rgba(0,0,0,0.15);
+  }
+
+  .brand-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: #ffffff; 
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    font-family: "Montserrat", "Poppins", sans-serif;
+  }
+
+  .brand-highlight {
+    color: #ffffff; 
+    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
+  }
+
+  footer.footer {
+    text-align: center;
+    font-size: 0.78rem;
+    color: rgba(0, 0, 0, 0.55);
+    padding: 3px 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.04);
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(6px);
+  }
+</style>
+
+</head>
+
+<body>
+
+  <header>
+    <div class="brand-container">
+      <img src="/static/image.jpeg" alt="Digital ICFAI Logo" class="brand-logo">
+      <h1 class="brand-title">
+        <span class="brand-highlight">Digital</span> ICFAI Assistant
+      </h1>
+    </div>
+  </header>
+
+  
+  <main class="content">
+    {% block content %}{% endblock %}
+  </main>
+
+
+  <footer class="footer">
+    <p>© 2025 ICFAI University | Powered by CIT</p>
+  </footer>
+</body>
+</html>

templates/chat.html

@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+{% block content %}
+<section class="chat-section">
+  <div class="chat-container">
+    <div id="chat-box" class="chat-box"></div>
+
+    <form id="chat-form" class="chat-form">
+      <textarea id="chat-input" placeholder="Ask your question..." rows="1"></textarea>
+      <button type="submit">Send</button>
+    </form>
+  </div>
+</section>
+
+<!-- ✅ Markdown Parser (for rendering ##, **, lists, and links properly) -->
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+<!-- ✅ Your custom chat logic -->
+<script src="/static/chat.js"></script>
+{% endblock %}

templates/courses.html

@@ -0,0 +1,108 @@
+{% extends "base.html" %}
+{% block content %}
+<section class="form-section">
+  <h2>🎓 Course Recommender</h2>
+
+  <form id="course-form">
+    <!-- Stream Selection -->
+    <label for="stream">Stream:</label>
+    <select id="stream" name="stream" required>
+      <option value="">-- Select Stream --</option>
+      <option value="Science">Science</option>
+      <option value="Commerce">Commerce</option>
+      <option value="Arts">Arts</option>
+    </select>
+
+    <!-- Area of Interest (hidden initially) -->
+    <div id="interest-container" style="display: none;">
+      <label for="interest">Area of Interest:</label>
+      <select id="interest" name="interest" required>
+        <option value="">-- Select Area --</option>
+        <option value="Tech">Technology</option>
+        <option value="Law">Law</option>
+        <option value="Management">Management</option>
+        <option value="Economics">Economics</option>
+        <option value="Media">Media</option>
+      </select>
+    </div>
+
+    <!-- English Proficiency -->
+    <label for="english">Comfortable in English:</label>
+    <select id="english" name="english" required>
+      <option value="">-- Select --</option>
+      <option value="Yes">Yes</option>
+      <option value="No">No</option>
+    </select>
+
+    <!-- Academic Details -->
+    <label for="tenth">10th Percentage:</label>
+    <input type="number" id="tenth" name="tenth" min="0" max="100" step="0.1" required>
+
+    <label for="twelfth">12th Percentage:</label>
+    <input type="number" id="twelfth" name="twelfth" min="0" max="100" step="0.1" required>
+
+    <!-- Submit -->
+    <button type="submit">Recommend Courses</button>
+  </form>
+
+  <!-- Results Section -->
+  <div id="course-results" class="results"></div>
+</section>
+
+<script>
+  // === Show "Area of Interest" only after Stream selection ===
+  document.addEventListener("DOMContentLoaded", () => {
+    const streamSelect = document.getElementById("stream");
+    const interestContainer = document.getElementById("interest-container");
+
+    streamSelect.addEventListener("change", () => {
+      interestContainer.style.display = streamSelect.value.trim() !== "" ? "block" : "none";
+    });
+  });
+
+  // === Handle Course Recommendation Request ===
+  document.getElementById("course-form").addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.target);
+    const resultsDiv = document.getElementById("course-results");
+    resultsDiv.innerHTML = "<p>⏳ Fetching recommendations...</p>";
+
+    try {
+      const response = await fetch("/recommend_courses", {
+        method: "POST",
+        body: formData,
+      });
+
+      const data = await response.json();
+
+      if (!data.eligible) {
+        resultsDiv.innerHTML = `<div class="error-box">⚠️ ${data.message}</div>`;
+        return;
+      }
+
+      if (data.recommendations && data.recommendations.length > 0) {
+        const courseList = data.recommendations.map(c => `<li>🎓 ${c}</li>`).join("");
+        const applyButton = `<a href="https://ifheindia.org/online-registration" target="_blank">
+  <button class="apply-btn">Apply Now</button>
+</a>`;
+
+        resultsDiv.innerHTML = `
+          <div class="result-card">
+            <h3>Recommended Courses</h3>
+            <ul>${courseList}</ul>
+            <p class="success-msg">${data.message}</p>
+            ${applyButton}
+          </div>
+        `;
+      } else {
+        resultsDiv.innerHTML = `<div class="info-box">ℹ️ No matching courses found.</div>`;
+      }
+
+    } catch (error) {
+      console.error(error);
+      resultsDiv.innerHTML = `<div class="error-box">⚠️ Error fetching recommendations.</div>`;
+    }
+  });
+</script>
+{% endblock %}

templates/digital_icfai_chat.html

@@ -0,0 +1,18 @@
+{% extends "base_digital.html" %}
+{% block content %}
+<section class="chat-section">
+  
+
+  <div class="chat-container">
+    <div id="chat-box" class="chat-box"></div>
+
+    <form id="chat-form" class="chat-form">
+      <textarea id="chat-input" placeholder="Ask about Digital ICFAI ERP System..." rows="1"></textarea>
+      <button type="submit">Send</button>
+    </form>
+  </div>
+</section>
+
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="/static/chat_digital.js"></script>
+{% endblock %}

templates/employees.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+{% block content %}
+<section class="form-section">
+  <h2>👨‍💼 Employee Lookup</h2>
+
+  <form id="employee-form">
+    <label>Search by:</label>
+    <select name="search_type" required>
+      <option value="id">Employee ID</option>
+      <option value="salary">Salary (Above)</option>
+      <option value="experience">Experience (Above)</option>
+    </select>
+
+    <label>Value:</label>
+    <input type="text" name="value" required>
+    <button type="submit">Search</button>
+  </form>
+
+  <!-- ✅ Results container (scrolls internally) -->
+  <div id="employee-results" class="results">
+    <!-- Table will be dynamically inserted here by employees.js -->
+  </div>
+</section>
+
+<script src="/static/employees.js"></script>
+{% endblock %}