Spaces:

Shirpi
/

Student-s_AI

Sleeping

App Files Files Community

Shirpi commited on Dec 19, 2025

Commit

922f0ea

verified ·

1 Parent(s): 1298015

Update app.py

Browse files

Files changed (1) hide show

app.py +116 -314

app.py CHANGED Viewed

@@ -31,19 +31,14 @@ user_db = load_db()
 current_key_index = 0
 app = Flask(__name__)
-# --- 🧠 SYSTEM INSTRUCTION (UPDATED) ---
 SYSTEM_INSTRUCTION = """
-ROLE: You are "Student's AI", an advanced tutor.
 RULES:
-1. **MATH:** If the topic is Math, output formulas inside LaTeX block (e.g., $$ E = mc^2 $$). NEVER use plain text for formulas.
-2. **DIAGRAMS:** If a diagram/flowchart is needed, use Mermaid.js syntax inside a code block (```mermaid ... ```).
-3. **LANGUAGE:**
-   - If user asks in **Tanglish** (Tamil in English letters), reply in **Tanglish** (e.g., "Idhu romba easy").
-   - If user asks in **Tamil script**, reply in **Tamil script** (e.g., "இது மிகவும் எளிதானது").
-   - Default is **English**.
-4. **FORMAT:** Use Markdown. Bold key terms.
-5. **CODE:** Put code in strictly formatted blocks.
 """
 # --- 🧬 MODEL & IMAGE HANDLING ---
@@ -52,7 +47,6 @@ def get_working_model(key):
     try:
         models = list(genai.list_models())
         chat_models = [m for m in models if 'generateContent' in m.supported_generation_methods]
-        # Priority: Flash -> Pro
         for m in chat_models:
             if "flash" in m.name.lower() and "1.5" in m.name: return m.name
         for m in chat_models:
@@ -62,7 +56,6 @@ def get_working_model(key):
     return None
 def process_image(image_data):
-    """Decodes Base64 image to PIL Image"""
     try:
         if "base64," in image_data:
             image_data = image_data.split("base64,")[1]
@@ -74,15 +67,11 @@ def generate_with_retry(prompt, image_data=None, history_messages=[]):
     global current_key_index
     if not API_KEYS: return "🚨 API Keys Missing."
-    # Prepare Context
     formatted_history = []
     for m in history_messages[-6:]:
-        # Images cannot be easily passed in history in this simple setup,
-        # so we mostly rely on text history + current image.
         role = "user" if m["role"] == "user" else "model"
         formatted_history.append({"role": role, "parts": [m["content"]]})
-    # Prepare Current Input
     current_parts = [prompt]
     if image_data:
         img = process_image(image_data)
@@ -100,8 +89,6 @@ def generate_with_retry(prompt, image_data=None, history_messages=[]):
             genai.configure(api_key=key)
             model = genai.GenerativeModel(model_name=model_name, system_instruction=SYSTEM_INSTRUCTION)
-            # Note: start_chat history + images can be tricky in some versions.
-            # We will use generate_content for image requests (stateless) or chat for text.
             if image_data:
                 response = model.generate_content(current_parts)
             else:
@@ -110,13 +97,12 @@ def generate_with_retry(prompt, image_data=None, history_messages=[]):
             return response.text
         except Exception as e:
-            print(f"Error: {e}")
             current_key_index = (current_key_index + 1) % len(API_KEYS)
             time.sleep(1)
     return "⚠️ System Busy. Please try again."
-# --- UI TEMPLATE (CORRECTED & ENHANCED) ---
 HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
@@ -130,10 +116,7 @@ HTML_TEMPLATE = """
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script>
-    window.MathJax = {
-      tex: { inlineMath: [['$', '$'], ['\\\\(', '\\\\)']], displayMath: [['$$', '$$'], ['\\\\[', '\\\\]']] },
-      svg: { fontCache: 'global' }
-    };
     </script>
     <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
@@ -145,245 +128,99 @@ HTML_TEMPLATE = """
     <style>
         :root {
-            --bg-color: #09090b;
-            --sidebar-bg: #000000;
-            --card-bg: #18181b;
-            --user-msg-bg: #27272a;
-            --ai-msg-bg: transparent;
-            --text-color: #e4e4e7;
-            --accent-color: #fff;
-            --code-bg: #0f0f11;
             --border-color: #27272a;
         }
         * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
-        body, html {
-            margin: 0; padding: 0;
-            height: 100%; width: 100%;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            font-family: 'Outfit', sans-serif;
-            overflow: hidden;
-        }
-        /* --- LAYOUT --- */
         #app-container { display: flex; flex-direction: column; height: 100dvh; position: relative; }
-        /* --- HEADER (IMPROVED) --- */
         header {
-            height: 70px;
-            padding: 0 25px;
-            background: rgba(9, 9, 11, 0.95);
-            backdrop-filter: blur(10px);
             border-bottom: 1px solid var(--border-color);
-            display: flex; align-items: center; justify-content: space-between;
-            flex-shrink: 0; z-index: 50;
-        }
-        .app-title {
-            font-size: 24px;
-            font-weight: 700;
-            background: linear-gradient(90deg, #fff, #a1a1aa);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.5px;
         }
-        /* --- SIDEBAR --- */
         #sidebar {
-            position: fixed; top: 0; left: 0; bottom: 0;
-            width: 300px;
-            background: var(--sidebar-bg);
-            border-right: 1px solid var(--border-color);
-            transform: translateX(-100%);
-            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            z-index: 100;
-            display: flex; flex-direction: column; padding: 20px;
         }
         #sidebar.open { transform: translateX(0); }
-        .overlay {
-            position: fixed; inset: 0; background: rgba(0,0,0,0.7);
-            z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s;
-        }
         .overlay.active { opacity: 1; pointer-events: auto; }
-        /* Search & History */
-        .search-box {
-            background: var(--card-bg); border: 1px solid var(--border-color);
-            padding: 12px; border-radius: 10px; color: #fff; width: 100%;
-            margin-bottom: 15px; font-family: 'Outfit', sans-serif; outline: none;
-        }
         #history-list { flex: 1; overflow-y: auto; }
-        .history-item {
-            padding: 14px; border-radius: 10px; cursor: pointer;
-            color: #a1a1aa; font-size: 15px; transition: 0.2s;
-            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-            margin-bottom: 5px;
-        }
         .history-item:hover { background: var(--user-msg-bg); color: #fff; }
-        /* --- CHAT AREA --- */
         #chat-box {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px 5%; /* Better spacing */
-            display: flex;
-            flex-direction: column;
-            gap: 30px;
-            scroll-behavior: smooth;
-        }
-        /* Message Styles */
-        .msg {
-            width: 100%; /* FIX 1: Use full width */
-            line-height: 1.7;
-            font-size: 16px;
-            position: relative;
-            animation: fadeIn 0.3s ease;
-        }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        /* User Message */
-        .user-msg { align-self: flex-end; text-align: right; }
-        .user-bubble {
-            display: inline-block;
-            background: var(--user-msg-bg);
-            color: #fff;
-            padding: 12px 20px;
-            border-radius: 20px 20px 4px 20px;
-            max-width: 90%;
-            text-align: left;
-            position: relative;
         }
-        /* AI Message */
-        .ai-msg { align-self: flex-start; }
-        .ai-content { width: 100%; }
-        /* Styling for AI Content */
-        .ai-msg strong { color: #fff; font-weight: 700; }
-        .ai-msg h1, .ai-msg h2 { margin-top: 20px; color: #fff; font-weight: 700; }
-        /* FIX 3: Math Box */
-        .mjx-chtml {
-            background: #1e1e22;
-            padding: 15px;
-            border-radius: 8px;
-            border: 1px solid #333;
-            overflow-x: auto;
-            margin: 15px 0;
-            display: block;
-            text-align: center;
-        }
-        /* Code Block */
-        pre {
-            background: var(--code-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 10px;
-            padding: 15px;
-            overflow-x: auto;
-            margin: 15px 0;
-            font-family: 'JetBrains Mono', monospace;
-        }
         code { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: #a5d6ff; }
-        /* Diagram Container */
-        .mermaid { background: #111; padding: 20px; border-radius: 10px; text-align: center; margin: 15px 0; }
-        /* Action Buttons (Copy/Edit/Regen) */
-        .msg-actions {
-            margin-top: 5px;
-            opacity: 0;
-            transition: opacity 0.2s;
-            font-size: 12px;
-            display: flex; gap: 10px;
-            justify-content: flex-end; /* Right align for user */
-        }
-        .ai-msg .msg-actions { justify-content: flex-start; }
         .msg:hover .msg-actions { opacity: 1; }
         .action-btn { cursor: pointer; color: #71717a; display: flex; align-items: center; gap: 4px; }
         .action-btn:hover { color: #fff; }
-        /* --- INPUT AREA (FIXED) --- */
-        .input-wrapper {
-            background: var(--bg-color);
-            padding: 20px;
-            border-top: 1px solid var(--border-color);
-            flex-shrink: 0; z-index: 60;
-        }
         .input-container {
-            max-width: 900px;
-            margin: 0 auto;
-            background: var(--card-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 24px;
-            padding: 10px 15px;
-            display: flex; align-items: flex-end; gap: 10px;
-            transition: border 0.2s;
-        }
-        .input-container:focus-within { border-color: #666; }
-        textarea {
-            flex: 1;
-            background: transparent; border: none;
-            color: #fff; font-size: 16px;
-            max-height: 150px; padding: 10px 0;
-            resize: none; outline: none;
-            font-family: 'Outfit', sans-serif;
-            line-height: 1.5;
         }
-        /* Upload & Send Buttons */
         .icon-btn {
-            width: 40px; height: 40px;
-            display: flex; align-items: center; justify-content: center;
-            border-radius: 50%; border: none;
-            background: transparent; color: #a1a1aa;
-            cursor: pointer; transition: 0.2s;
-            font-size: 18px;
         }
         .icon-btn:hover { background: #333; color: #fff; }
         .send-btn {
-            background: #fff; color: #000;
-            width: 40px; height: 40px;
-            border-radius: 50%; border: none;
-            display: flex; align-items: center; justify-content: center;
-            cursor: pointer; font-size: 18px;
-            transition: transform 0.2s;
-        }
-        .send-btn:hover { transform: scale(1.1); }
-        /* Image Preview */
-        #image-preview-area {
-            max-width: 900px; margin: 0 auto 10px auto;
-            display: none; padding: 0 10px;
-        }
-        .preview-img-container {
-            position: relative; display: inline-block;
-        }
-        .preview-img {
-            height: 60px; border-radius: 8px; border: 1px solid #333;
-        }
-        .remove-img {
-            position: absolute; top: -5px; right: -5px;
-            background: red; color: white; border-radius: 50%;
-            width: 18px; height: 18px; font-size: 12px;
-            cursor: pointer; border: none; display: flex; align-items: center; justify-content: center;
         }
-        /* --- LOGIN --- */
-        #login-overlay {
-            position: fixed; inset: 0; background: #000; z-index: 2000;
-            display: flex; align-items: center; justify-content: center;
-        }
-        .login-box {
-            width: 90%; max-width: 380px; text-align: center;
-            padding: 40px; border: 1px solid var(--border-color);
-            border-radius: 20px; background: #0a0a0a;
-        }
     </style>
 </head>
 <body>
@@ -391,10 +228,8 @@ HTML_TEMPLATE = """
     <div id="login-overlay">
         <div class="login-box">
             <h1 class="app-title" style="margin-bottom:10px;">Student's AI</h1>
-            <p style="color:#666; font-size:14px; margin-bottom:25px;">The Ultimate Learning Companion</p>
-            <input type="text" id="username-input" placeholder="What's your name?"
-                   style="width:100%; padding:15px; border-radius:10px; border:1px solid #333; background:#111; color:#fff; text-align:center; outline:none; margin-bottom:15px;">
-            <button onclick="handleLogin()" style="width:100%; padding:15px; border-radius:10px; border:none; background:#fff; font-weight:700; cursor:pointer;">Start Learning</button>
         </div>
     </div>
@@ -403,25 +238,18 @@ HTML_TEMPLATE = """
         <div id="sidebar">
             <div style="padding-bottom:20px; border-bottom:1px solid #333; margin-bottom:20px; display:flex; align-items:center; gap:12px;">
-                <div style="width:40px; height:40px; background:#fff; color:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:18px;" id="avatar">U</div>
-                <div style="display:flex; flex-direction:column;">
-                    <span id="display-name" style="font-weight:700; font-size:16px;">User</span>
-                    <span style="font-size:12px; color:#666;">Student</span>
-                </div>
             </div>
-            <button onclick="newChat()" style="width:100%; padding:12px; background:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:700; margin-bottom:20px; display:flex; align-items:center; justify-content:center; gap:8px;">
-                <i class="fas fa-plus"></i> New Chat
-            </button>
-            <input type="text" class="search-box" placeholder="Search chats..." onkeyup="filterHistory(this.value)">
             <div id="history-list"></div>
             <div style="margin-top:auto; padding-top:20px; border-top:1px solid #333; text-align:center; color:#ef4444; cursor:pointer;" onclick="handleLogout()">Log Out</div>
         </div>
         <header>
             <div style="display:flex; align-items:center; gap:15px;">
-                <i class="fas fa-bars" style="cursor:pointer; font-size:20px; color:#ccc;" onclick="toggleSidebar()"></i>
                 <span class="app-title">Student's AI</span>
             </div>
         </header>
@@ -430,19 +258,24 @@ HTML_TEMPLATE = """
         <div class="input-wrapper">
             <div id="image-preview-area">
-                <div class="preview-img-container">
                     <img id="preview-img-tag" class="preview-img">
                     <button class="remove-img" onclick="removeImage()">×</button>
                 </div>
             </div>
             <div class="input-container">
-                <button class="icon-btn" onclick="document.getElementById('img-upload').click()">
                     <i class="fas fa-paperclip"></i>
                 </button>
-                <input type="file" id="img-upload" accept="image/*" hidden onchange="handleImageSelect(this)">
-                <textarea id="input" placeholder="Ask about Diagrams, Math, or Code..." rows="1" oninput="resizeInput(this)"></textarea>
                 <button class="send-btn" onclick="send()">
                     <i class="fas fa-arrow-up"></i>
@@ -456,7 +289,6 @@ HTML_TEMPLATE = """
         let currentChatId = null;
         let currentImageBase64 = null;
-        // --- AUTH ---
         function checkLogin() {
             const stored = localStorage.getItem("student_ai_user");
             if (stored) { currentUser = stored; showApp(); }
@@ -475,13 +307,11 @@ HTML_TEMPLATE = """
             if(!currentChatId) newChat();
         }
-        // --- UI LOGIC ---
         function resizeInput(el) {
             el.style.height = 'auto';
             el.style.height = Math.min(el.scrollHeight, 150) + 'px';
         }
-        // --- IMAGE HANDLING ---
         function handleImageSelect(input) {
             if (input.files && input.files[0]) {
                 const reader = new FileReader();
@@ -495,21 +325,17 @@ HTML_TEMPLATE = """
         }
         function removeImage() {
             currentImageBase64 = null;
-            document.getElementById('img-upload').value = "";
             document.getElementById('image-preview-area').style.display = 'none';
         }
-        // --- SCROLL LOGIC (FIX 2) ---
-        function scrollToBottom(force=false) {
             const box = document.getElementById('chat-box');
-            // Smart scroll: Only scroll if user is already near bottom, or if forced
-            const isNearBottom = box.scrollHeight - box.scrollTop - box.clientHeight < 100;
-            if (isNearBottom || force) {
-                box.scrollTo({ top: box.scrollHeight, behavior: 'smooth' });
-            }
         }
-        // --- CHAT LOGIC ---
         async function send() {
             const input = document.getElementById('input');
             const text = input.value.trim();
@@ -517,7 +343,6 @@ HTML_TEMPLATE = """
             const chatBox = document.getElementById('chat-box');
-            // 1. User Bubble (With Edit)
             const userHtml = `
                 <div class="msg user-msg">
                     <div class="user-bubble">${text.replace(/</g, "&lt;")}
@@ -532,16 +357,13 @@ HTML_TEMPLATE = """
             const promptText = text;
             const imgData = currentImageBase64;
-            // Clear Inputs
             input.value = ''; input.style.height = 'auto';
             removeImage();
-            scrollToBottom(true);
-            // 2. AI Spinner
             const msgId = "ai-" + Date.now();
             chatBox.insertAdjacentHTML('beforeend', `<div id="${msgId}" class="msg ai-msg"><i class="fas fa-circle-notch fa-spin"></i></div>`);
-            scrollToBottom(true);
             try {
                 if (!currentChatId) {
@@ -561,26 +383,23 @@ HTML_TEMPLATE = """
                 });
                 const data = await res.json();
-                // 3. Render AI Response
                 const aiDiv = document.getElementById(msgId);
-                aiDiv.innerHTML = ""; // Clear spinner
-                // Content Wrapper
                 const contentDiv = document.createElement('div');
                 contentDiv.className = 'ai-content';
                 aiDiv.appendChild(contentDiv);
-                // Typewriter Effect
                 await typeWriter(contentDiv, data.response);
-                // Add Actions (Regenerate/Copy)
-                const actionsHtml = `
                     <div class="msg-actions">
                         <span class="action-btn" onclick="navigator.clipboard.writeText(this.closest('.ai-msg').innerText)"><i class="fas fa-copy"></i> Copy</span>
                         <span class="action-btn" onclick="regenerate('${promptText}')"><i class="fas fa-redo"></i> Regen</span>
-                    </div>`;
-                aiDiv.insertAdjacentHTML('beforeend', actionsHtml);
                 if(data.new_title) loadHistory();
             } catch (e) {
@@ -588,55 +407,46 @@ HTML_TEMPLATE = """
             }
         }
-        // --- REGENERATE & EDIT ---
-        function editMessage(oldText) {
-            document.getElementById('input').value = oldText;
-            document.getElementById('input').focus();
-        }
-        function regenerate(text) {
-            document.getElementById('input').value = text;
-            send();
-        }
-        // --- TYPEWRITER & RENDERING ---
         async function typeWriter(element, markdownText) {
-            // 1. Parse Markdown
             element.innerHTML = marked.parse(markdownText);
-            // 2. Render Math (MathJax)
-            if (window.MathJax) {
-                await MathJax.typesetPromise([element]);
-            }
-            // 3. Render Diagrams (Mermaid)
-            const mermaids = element.querySelectorAll('code.language-mermaid');
-            for (let i = 0; i < mermaids.length; i++) {
-                const code = mermaids[i].innerText;
-                const parentPre = mermaids[i].parentElement;
-                // Create clean container
-                const div = document.createElement('div');
-                div.className = 'mermaid';
-                div.innerHTML = code;
-                parentPre.replaceWith(div);
             }
-            if(window.mermaid) window.mermaid.init(undefined, document.querySelectorAll('.mermaid'));
-            // 4. Fade In Animation (Line by Line simulation)
             const children = Array.from(element.children);
             children.forEach((child, index) => {
                 child.style.opacity = '0';
                 child.style.transform = 'translateY(10px)';
-                child.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                 setTimeout(() => {
                     child.style.opacity = '1';
                     child.style.transform = 'translateY(0)';
                     scrollToBottom();
-                }, index * 100);
             });
         }
-        // --- HISTORY & SIDEBAR ---
         function toggleSidebar() {
             document.getElementById('sidebar').classList.toggle('open');
             document.getElementById('overlay').classList.toggle('active');
@@ -680,7 +490,6 @@ HTML_TEMPLATE = """
             data.messages.forEach(msg => {
                 const isUser = msg.role === 'user';
                 let content = msg.content;
                 if(isUser) {
                     box.insertAdjacentHTML('beforeend', `<div class="msg user-msg"><div class="user-bubble">${content.replace(/</g, "&lt;")}</div></div>`);
                 } else {
@@ -688,7 +497,6 @@ HTML_TEMPLATE = """
                     div.className = 'msg ai-msg';
                     div.innerHTML = `<div class="ai-content">${marked.parse(content)}</div>`;
                     box.appendChild(div);
-                    // Rerender Math/Mermaid for history
                     if(window.MathJax) MathJax.typesetPromise([div]);
                     if(window.mermaid) {
                          const m = div.querySelectorAll('code.language-mermaid');
@@ -742,16 +550,10 @@ def chat():
     if u not in user_db: user_db[u] = {}
     if cid not in user_db[u]: user_db[u][cid] = {"messages": []}
-    # Save User Msg (Note: Image not saved in DB to keep it simple, only text)
     user_db[u][cid]["messages"].append({"role": "user", "content": msg})
-    # Generate
     reply = generate_with_retry(msg, img_data, user_db[u][cid]["messages"][:-1])
-    # Save AI Msg
     user_db[u][cid]["messages"].append({"role": "model", "content": reply})
-    # Title Update
     new_title = False
     if len(user_db[u][cid]["messages"]) <= 2:
         user_db[u][cid]["title"] = " ".join(msg.split()[:4])
@@ -762,4 +564,4 @@ def chat():
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)

 current_key_index = 0
 app = Flask(__name__)
+# --- 🧠 SYSTEM INSTRUCTION ---
 SYSTEM_INSTRUCTION = """
+ROLE: You are "Student's AI", a helpful tutor.
 RULES:
+1. **MATH:** Use LaTeX for formulas ($$ ... $$).
+2. **DIAGRAMS:** Use Mermaid.js (```mermaid ... ```).
+3. **LANGUAGE:** English by default. Use Tamil/Tanglish ONLY if requested.
+4. **FORMAT:** Markdown. Bold key terms.
 """
 # --- 🧬 MODEL & IMAGE HANDLING ---
     try:
         models = list(genai.list_models())
         chat_models = [m for m in models if 'generateContent' in m.supported_generation_methods]
         for m in chat_models:
             if "flash" in m.name.lower() and "1.5" in m.name: return m.name
         for m in chat_models:
     return None
 def process_image(image_data):
     try:
         if "base64," in image_data:
             image_data = image_data.split("base64,")[1]
     global current_key_index
     if not API_KEYS: return "🚨 API Keys Missing."
     formatted_history = []
     for m in history_messages[-6:]:
         role = "user" if m["role"] == "user" else "model"
         formatted_history.append({"role": role, "parts": [m["content"]]})
     current_parts = [prompt]
     if image_data:
         img = process_image(image_data)
             genai.configure(api_key=key)
             model = genai.GenerativeModel(model_name=model_name, system_instruction=SYSTEM_INSTRUCTION)
             if image_data:
                 response = model.generate_content(current_parts)
             else:
             return response.text
         except Exception as e:
             current_key_index = (current_key_index + 1) % len(API_KEYS)
             time.sleep(1)
     return "⚠️ System Busy. Please try again."
+# --- UI TEMPLATE (PERFORMANCE OPTIMIZED) ---
 HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script>
+    window.MathJax = { tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] }, svg: { fontCache: 'global' } };
     </script>
     <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <style>
         :root {
+            --bg-color: #09090b; --sidebar-bg: #000000; --card-bg: #18181b;
+            --user-msg-bg: #27272a; --text-color: #e4e4e7; --code-bg: #0f0f11;
             --border-color: #27272a;
         }
         * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+        body, html { margin: 0; padding: 0; height: 100%; width: 100%; background: var(--bg-color); color: var(--text-color); font-family: 'Outfit', sans-serif; overflow: hidden; }
         #app-container { display: flex; flex-direction: column; height: 100dvh; position: relative; }
+        /* HEADER */
         header {
+            height: 65px; padding: 0 20px;
+            background: rgba(9,9,11, 0.98); /* Less transparency = Less Lag */
             border-bottom: 1px solid var(--border-color);
+            display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; z-index: 50;
         }
+        .app-title { font-size: 22px; font-weight: 700; background: linear-gradient(90deg, #fff, #a1a1aa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+        /* SIDEBAR */
         #sidebar {
+            position: fixed; inset: 0; width: 280px; background: var(--sidebar-bg);
+            border-right: 1px solid var(--border-color); transform: translateX(-100%);
+            transition: transform 0.3s; z-index: 100; display: flex; flex-direction: column; padding: 20px;
         }
         #sidebar.open { transform: translateX(0); }
+        .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
         .overlay.active { opacity: 1; pointer-events: auto; }
+        .search-box { background: var(--card-bg); border: 1px solid var(--border-color); padding: 12px; border-radius: 10px; color: #fff; width: 100%; margin-bottom: 15px; outline: none; }
         #history-list { flex: 1; overflow-y: auto; }
+        .history-item { padding: 12px; border-radius: 8px; cursor: pointer; color: #a1a1aa; font-size: 14px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .history-item:hover { background: var(--user-msg-bg); color: #fff; }
+        /* CHAT AREA - FIX FOR LAG */
         #chat-box {
+            flex: 1; overflow-y: auto; padding: 20px 5%;
+            display: flex; flex-direction: column; gap: 20px;
+            /* CRITICAL FIX FOR MOBILE SCROLLING */
+            -webkit-overflow-scrolling: touch;
+            overscroll-behavior-y: contain;
         }
+        /* Message Styles */
+        .msg { width: 100%; line-height: 1.6; font-size: 16px; }
+        .user-msg { text-align: right; animation: fadeInstant 0.3s forwards; }
+        .user-bubble { display: inline-block; background: var(--user-msg-bg); padding: 10px 18px; border-radius: 18px 18px 4px 18px; text-align: left; max-width: 85%; }
+        .ai-msg { text-align: left; }
+        .ai-content strong { color: #fff; font-weight: 700; }
+        .ai-content h1, .ai-content h2 { margin-top: 15px; color: #fff; font-weight: 700; }
+        /* Boxes */
+        .mjx-chtml { background: #1e1e22; padding: 10px; border-radius: 8px; border: 1px solid #333; overflow-x: auto; margin: 10px 0; text-align: center; }
+        pre { background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 15px; overflow-x: auto; margin: 15px 0; font-family: 'JetBrains Mono', monospace; }
         code { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: #a5d6ff; }
+        .mermaid { background: #111; padding: 15px; border-radius: 10px; text-align: center; margin: 15px 0; }
+        /* Actions */
+        .msg-actions { margin-top: 5px; opacity: 0; transition: opacity 0.2s; font-size: 12px; display: flex; gap: 10px; }
+        .user-msg .msg-actions { justify-content: flex-end; }
         .msg:hover .msg-actions { opacity: 1; }
         .action-btn { cursor: pointer; color: #71717a; display: flex; align-items: center; gap: 4px; }
         .action-btn:hover { color: #fff; }
+        /* INPUT AREA */
+        .input-wrapper { background: var(--bg-color); padding: 15px; border-top: 1px solid var(--border-color); flex-shrink: 0; z-index: 60; }
         .input-container {
+            max-width: 900px; margin: 0 auto; background: var(--card-bg);
+            border: 1px solid var(--border-color); border-radius: 24px; padding: 8px 10px;
+            display: flex; align-items: flex-end; gap: 8px;
         }
+        textarea { flex: 1; background: transparent; border: none; color: #fff; font-size: 16px; max-height: 120px; padding: 10px 5px; resize: none; outline: none; font-family: 'Outfit', sans-serif; }
         .icon-btn {
+            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
+            border-radius: 50%; border: none; background: transparent; color: #a1a1aa; cursor: pointer; font-size: 16px;
         }
         .icon-btn:hover { background: #333; color: #fff; }
         .send-btn {
+            background: #fff; color: #000; width: 36px; height: 36px; border-radius: 50%; border: none;
+            display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px;
         }
+        #image-preview-area { max-width: 900px; margin: 0 auto 10px auto; display: none; padding: 0 10px; }
+        .preview-img { height: 60px; border-radius: 8px; border: 1px solid #333; }
+        .remove-img { position: absolute; top: -5px; right: -5px; background: red; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 12px; cursor: pointer; border: none; }
+        /* LOGIN */
+        #login-overlay { position: fixed; inset: 0; background: #000; z-index: 2000; display: flex; align-items: center; justify-content: center; }
+        .login-box { width: 90%; max-width: 350px; text-align: center; padding: 30px; border: 1px solid var(--border-color); border-radius: 20px; background: #0a0a0a; }
+        @keyframes fadeInstant { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
     </style>
 </head>
 <body>
     <div id="login-overlay">
         <div class="login-box">
             <h1 class="app-title" style="margin-bottom:10px;">Student's AI</h1>
+            <input type="text" id="username-input" placeholder="Your Name" style="width:100%; padding:12px; border-radius:10px; border:1px solid #333; background:#111; color:#fff; text-align:center; outline:none; margin-bottom:15px;">
+            <button onclick="handleLogin()" style="width:100%; padding:12px; border-radius:10px; border:none; background:#fff; font-weight:700; cursor:pointer;">Start</button>
         </div>
     </div>
         <div id="sidebar">
             <div style="padding-bottom:20px; border-bottom:1px solid #333; margin-bottom:20px; display:flex; align-items:center; gap:12px;">
+                <div style="width:35px; height:35px; background:#fff; color:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold;" id="avatar">U</div>
+                <span id="display-name" style="font-weight:700;">User</span>
             </div>
+            <button onclick="newChat()" style="width:100%; padding:10px; background:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:700; margin-bottom:15px;">+ New Chat</button>
+            <input type="text" class="search-box" placeholder="Search..." onkeyup="filterHistory(this.value)">
             <div id="history-list"></div>
             <div style="margin-top:auto; padding-top:20px; border-top:1px solid #333; text-align:center; color:#ef4444; cursor:pointer;" onclick="handleLogout()">Log Out</div>
         </div>
         <header>
             <div style="display:flex; align-items:center; gap:15px;">
+                <i class="fas fa-bars" style="cursor:pointer; color:#ccc;" onclick="toggleSidebar()"></i>
                 <span class="app-title">Student's AI</span>
             </div>
         </header>
         <div class="input-wrapper">
             <div id="image-preview-area">
+                <div style="position:relative; display:inline-block;">
                     <img id="preview-img-tag" class="preview-img">
                     <button class="remove-img" onclick="removeImage()">×</button>
                 </div>
             </div>
             <div class="input-container">
+                <button class="icon-btn" onclick="document.getElementById('file-upload').click()">
                     <i class="fas fa-paperclip"></i>
                 </button>
+                <input type="file" id="file-upload" accept="image/*" hidden onchange="handleImageSelect(this)">
+                <button class="icon-btn" onclick="document.getElementById('camera-upload').click()">
+                    <i class="fas fa-camera"></i>
+                </button>
+                <input type="file" id="camera-upload" accept="image/*" capture="environment" hidden onchange="handleImageSelect(this)">
+                <textarea id="input" placeholder="Type a message..." rows="1" oninput="resizeInput(this)"></textarea>
                 <button class="send-btn" onclick="send()">
                     <i class="fas fa-arrow-up"></i>
         let currentChatId = null;
         let currentImageBase64 = null;
         function checkLogin() {
             const stored = localStorage.getItem("student_ai_user");
             if (stored) { currentUser = stored; showApp(); }
             if(!currentChatId) newChat();
         }
         function resizeInput(el) {
             el.style.height = 'auto';
             el.style.height = Math.min(el.scrollHeight, 150) + 'px';
         }
         function handleImageSelect(input) {
             if (input.files && input.files[0]) {
                 const reader = new FileReader();
         }
         function removeImage() {
             currentImageBase64 = null;
+            document.getElementById('file-upload').value = "";
+            document.getElementById('camera-upload').value = "";
             document.getElementById('image-preview-area').style.display = 'none';
         }
+        // --- SCROLL OPTIMIZATION ---
+        function scrollToBottom() {
             const box = document.getElementById('chat-box');
+            box.scrollTo({ top: box.scrollHeight, behavior: 'smooth' });
         }
         async function send() {
             const input = document.getElementById('input');
             const text = input.value.trim();
             const chatBox = document.getElementById('chat-box');
             const userHtml = `
                 <div class="msg user-msg">
                     <div class="user-bubble">${text.replace(/</g, "&lt;")}
             const promptText = text;
             const imgData = currentImageBase64;
             input.value = ''; input.style.height = 'auto';
             removeImage();
+            scrollToBottom();
             const msgId = "ai-" + Date.now();
             chatBox.insertAdjacentHTML('beforeend', `<div id="${msgId}" class="msg ai-msg"><i class="fas fa-circle-notch fa-spin"></i></div>`);
+            scrollToBottom();
             try {
                 if (!currentChatId) {
                 });
                 const data = await res.json();
                 const aiDiv = document.getElementById(msgId);
+                aiDiv.innerHTML = "";
                 const contentDiv = document.createElement('div');
                 contentDiv.className = 'ai-content';
                 aiDiv.appendChild(contentDiv);
+                // --- RESTORED TYPEWRITER ANIMATION (Optimized) ---
                 await typeWriter(contentDiv, data.response);
+                aiDiv.insertAdjacentHTML('beforeend', `
                     <div class="msg-actions">
                         <span class="action-btn" onclick="navigator.clipboard.writeText(this.closest('.ai-msg').innerText)"><i class="fas fa-copy"></i> Copy</span>
                         <span class="action-btn" onclick="regenerate('${promptText}')"><i class="fas fa-redo"></i> Regen</span>
+                    </div>`);
+                scrollToBottom();
                 if(data.new_title) loadHistory();
             } catch (e) {
             }
         }
+        // --- ANIMATION LOGIC ---
         async function typeWriter(element, markdownText) {
+            // 1. Render markdown
             element.innerHTML = marked.parse(markdownText);
+            // 2. Math & Diagrams
+            if (window.MathJax) await MathJax.typesetPromise([element]);
+            if (window.mermaid) {
+                 const m = element.querySelectorAll('code.language-mermaid');
+                 m.forEach(c => {
+                     const d = document.createElement('div'); d.className='mermaid'; d.innerHTML=c.innerText; c.parentElement.replaceWith(d);
+                 });
+                 window.mermaid.init(undefined, element.querySelectorAll('.mermaid'));
             }
+            // 3. FADE IN ANIMATION (Not Typewriter char-by-char) for Smoothness
+            // This is "ChatGPT-style" line reveal without the lag.
             const children = Array.from(element.children);
             children.forEach((child, index) => {
                 child.style.opacity = '0';
                 child.style.transform = 'translateY(10px)';
+                child.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
                 setTimeout(() => {
                     child.style.opacity = '1';
                     child.style.transform = 'translateY(0)';
                     scrollToBottom();
+                }, index * 120);
             });
         }
+        function editMessage(oldText) {
+            document.getElementById('input').value = oldText;
+            document.getElementById('input').focus();
+        }
+        function regenerate(text) {
+            document.getElementById('input').value = text;
+            send();
+        }
         function toggleSidebar() {
             document.getElementById('sidebar').classList.toggle('open');
             document.getElementById('overlay').classList.toggle('active');
             data.messages.forEach(msg => {
                 const isUser = msg.role === 'user';
                 let content = msg.content;
                 if(isUser) {
                     box.insertAdjacentHTML('beforeend', `<div class="msg user-msg"><div class="user-bubble">${content.replace(/</g, "&lt;")}</div></div>`);
                 } else {
                     div.className = 'msg ai-msg';
                     div.innerHTML = `<div class="ai-content">${marked.parse(content)}</div>`;
                     box.appendChild(div);
                     if(window.MathJax) MathJax.typesetPromise([div]);
                     if(window.mermaid) {
                          const m = div.querySelectorAll('code.language-mermaid');
     if u not in user_db: user_db[u] = {}
     if cid not in user_db[u]: user_db[u][cid] = {"messages": []}
     user_db[u][cid]["messages"].append({"role": "user", "content": msg})
     reply = generate_with_retry(msg, img_data, user_db[u][cid]["messages"][:-1])
     user_db[u][cid]["messages"].append({"role": "model", "content": reply})
     new_title = False
     if len(user_db[u][cid]["messages"]) <= 2:
         user_db[u][cid]["title"] = " ".join(msg.split()[:4])
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)