Spaces:

Shirpi
/

Student-s_AI

Sleeping

App Files Files Community

Shirpi commited on Dec 19, 2025

Commit

e127816

verified ·

1 Parent(s): 7889a7b

Update app.py

Browse files

Files changed (1) hide show

app.py +192 -189

app.py CHANGED Viewed

@@ -33,13 +33,13 @@ 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.
-5. **FILES:** If a file/image is provided, analyze it thoroughly.
 """
 # --- 🧬 MODEL & FILE HANDLING ---
@@ -104,22 +104,13 @@ def generate_with_retry(prompt, image_data=None, file_text=None, history_message
     return "⚠️ System Busy. Please try again."
-# --- PWA MANIFEST (FULL SCREEN CONFIG) ---
 @app.route('/manifest.json')
 def manifest():
     data = {
-        "name": "Student's AI",
-        "short_name": "StudentAI",
-        "start_url": "/",
-        "display": "standalone",  # Idhu dhaan Full Screen-ku mukkiyam
-        "orientation": "portrait",
-        "background_color": "#09090b",
-        "theme_color": "#09090b",
-        "scope": "/",
-        "icons": [
-            {"src": "https://cdn-icons-png.flaticon.com/512/4712/4712035.png", "sizes": "192x192", "type": "image/png"},
-            {"src": "https://cdn-icons-png.flaticon.com/512/4712/4712035.png", "sizes": "512x512", "type": "image/png"}
-        ]
     }
     return Response(json.dumps(data), mimetype='application/json')
@@ -130,126 +121,165 @@ HTML_TEMPLATE = """
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="theme-color" content="#09090b">
     <link rel="manifest" href="/manifest.json">
     <title>Student's AI</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-    <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>
     <script type="module">
       import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-      mermaid.initialize({ startOnLoad: false, theme: 'dark' });
       window.mermaid = mermaid;
     </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; --dim-text: #71717a;
         }
         * { 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; user-select: none; }
         #app-container { display: flex; flex-direction: column; height: 100dvh; position: relative; }
         header {
-            height: 65px; padding: 0 20px;
             background: rgba(9,9,11, 0.98);
             border-bottom: 1px solid var(--border-color);
             display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; z-index: 50;
-            padding-top: env(safe-area-inset-top); /* For iPhone Notch */
         }
-        .app-title { font-size: 22px; font-weight: 700; background: linear-gradient(90deg, #fff, #a1a1aa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
         #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;
-            padding-top: max(20px, env(safe-area-inset-top));
         }
-        #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 {
             display: flex; justify-content: space-between; align-items: center;
-            padding: 12px; border-radius: 8px; cursor: pointer; color: #a1a1aa; font-size: 14px; margin-bottom: 5px;
         }
-        .history-item:hover { background: var(--user-msg-bg); color: #fff; }
-        .h-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
-        .h-actions { display: flex; gap: 8px; opacity: 0; transition: 0.2s; }
-        .history-item:hover .h-actions { opacity: 1; }
-        .h-icon { font-size: 12px; color: #71717a; }
-        .h-icon:hover { color: #fff; }
-        .brand-section { text-align: center; margin-top: auto; padding-top: 15px; border-top: 1px solid #222; padding-bottom: env(safe-area-inset-bottom); }
-        .brand-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 11px; color: #52525b; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; opacity: 0.8; }
-        .logout-btn { color: #ef4444; cursor: pointer; font-size: 14px; font-weight: 500; }
         #chat-box {
             flex: 1; overflow-y: auto; padding: 20px 5%;
-            display: flex; flex-direction: column; gap: 20px;
             -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
         }
-        .msg { width: 100%; line-height: 1.6; font-size: 16px; opacity: 0; animation: fadeInstant 0.3s forwards; }
-        @keyframes fadeInstant { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
         .user-msg { text-align: right; }
-        .user-content { display: inline-block; background: var(--user-msg-bg); padding: 10px 18px; border-radius: 18px 18px 4px 18px; text-align: left; max-width: 85%; user-select: text; }
         .ai-msg { text-align: left; }
-        .ai-content { user-select: text; }
         .ai-content strong { color: #fff; font-weight: 700; }
-        .ai-content h1, .ai-content h2 { margin-top: 15px; color: #fff; font-weight: 700; }
-        .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; }
-        .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-wrapper { background: var(--bg-color); padding: 15px; border-top: 1px solid var(--border-color); flex-shrink: 0; z-index: 60; padding-bottom: max(15px, env(safe-area-inset-bottom)); }
         .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; }
-        #preview-area { max-width: 900px; margin: 0 auto 10px auto; display: none; background: #111; padding: 10px; border-radius: 12px; border: 1px solid #333; }
-        .preview-item { display: flex; align-items: center; gap: 10px; }
-        .preview-thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; border: 1px solid #444; }
-        .preview-file-icon { width: 40px; height: 40px; border-radius: 6px; background: #222; color: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid #444; }
-        .preview-name { font-size: 13px; color: #ccc; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .remove-preview { cursor: pointer; color: #ef4444; padding: 5px; }
         #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; }
     </style>
 </head>
 <body>
@@ -257,46 +287,44 @@ HTML_TEMPLATE = """
     <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="app-container">
-        <div class="overlay" id="overlay" onclick="toggleSidebar()"></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 class="brand-section">
-                <div class="brand-name">Designed by Shirpi</div>
-                <div class="logout-btn" onclick="handleLogout()">Log Out</div>
             </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 id="chat-box"></div>
         <div class="input-wrapper">
             <div id="preview-area">
-                <div class="preview-item">
                     <div id="preview-visual"></div>
-                    <span id="preview-text" class="preview-name"></span>
-                    <i class="fas fa-times remove-preview" onclick="clearAttachment()"></i>
                 </div>
             </div>
             <div class="input-container">
@@ -317,6 +345,7 @@ HTML_TEMPLATE = """
         let currentUser = null;
         let currentChatId = null;
         let currentAttachment = { type: null, data: null, name: null };
         function checkLogin() {
             const stored = localStorage.getItem("student_ai_user");
@@ -330,10 +359,14 @@ HTML_TEMPLATE = """
         function showApp() {
             document.getElementById("login-overlay").style.display = "none";
-            document.getElementById("display-name").innerText = currentUser;
-            document.getElementById("avatar").innerText = currentUser[0].toUpperCase();
             loadHistory();
-            if(!currentChatId) newChat();
         }
         function resizeInput(el) {
@@ -348,17 +381,11 @@ HTML_TEMPLATE = """
                 reader.onload = function(e) {
                     const result = e.target.result;
                     const isImage = file.type.startsWith('image/');
-                    currentAttachment = {
-                        type: isImage ? 'image' : 'file',
-                        data: isImage ? result : atob(result.split(',')[1]),
-                        name: file.name
-                    };
                     const previewArea = document.getElementById('preview-area');
                     const visual = document.getElementById('preview-visual');
-                    const name = document.getElementById('preview-text');
                     previewArea.style.display = 'block';
-                    name.innerText = file.name;
-                    visual.innerHTML = isImage ? `<img src="${result}" class="preview-thumb">` : `<div class="preview-file-icon"><i class="fas fa-file-alt"></i></div>`;
                 }
                 reader.readAsDataURL(file);
             }
@@ -381,23 +408,18 @@ HTML_TEMPLATE = """
             if (!text && !currentAttachment.data) return;
             const chatBox = document.getElementById('chat-box');
             let attachHtml = '';
-            if (currentAttachment.type === 'image') {
-                attachHtml = `<br><img src="${currentAttachment.data}" style="max-height:100px; margin-top:5px; border-radius:5px;">`;
-            } else if (currentAttachment.type === 'file') {
-                attachHtml = `<br><div style="font-size:12px; color:#aaa; margin-top:5px;"><i class="fas fa-file"></i> ${currentAttachment.name}</div>`;
-            }
             const userHtml = `
                 <div class="msg user-msg">
                     <div class="user-content">${text.replace(/</g, "&lt;")}${attachHtml}</div>
                     <div class="msg-actions">
-                         <span class="action-btn" onclick="copyText('${text}')"><i class="fas fa-copy"></i></span>
-                         <span class="action-btn" onclick="editMessage('${text}')"><i class="fas fa-pen"></i></span>
                     </div>
                 </div>`;
             chatBox.insertAdjacentHTML('beforeend', userHtml);
             const promptText = text;
@@ -418,16 +440,9 @@ HTML_TEMPLATE = """
                     const d = await r.json(); currentChatId = d.chat_id;
                     loadHistory();
                 }
                 const res = await fetch('/chat', {
                     method: 'POST', headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({
-                        message: promptText,
-                        image: imgData,
-                        file_text: fileText,
-                        username: currentUser,
-                        chat_id: currentChatId
-                    })
                 });
                 const data = await res.json();
@@ -441,19 +456,17 @@ HTML_TEMPLATE = """
                 aiDiv.insertAdjacentHTML('beforeend', `
                     <div class="msg-actions">
-                        <span class="action-btn" onclick="copyAiResponse(this)"><i class="fas fa-copy"></i> Copy</span>
-                        <span class="action-btn" onclick="shareResponse(this)"><i class="fas fa-share-alt"></i> Share</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) {
-                document.getElementById(msgId).innerHTML = "⚠️ Error: " + e.message;
-            }
         }
         function copyText(text) { navigator.clipboard.writeText(text); }
         function copyAiResponse(btn) {
             const text = btn.closest('.ai-msg').querySelector('.ai-content').innerText;
@@ -461,34 +474,28 @@ HTML_TEMPLATE = """
         }
         function shareResponse(btn) {
             const text = btn.closest('.ai-msg').querySelector('.ai-content').innerText;
-            if (navigator.share) { navigator.share({ title: 'Student AI', text: text }); }
-            else { navigator.clipboard.writeText(text); alert("Copied to clipboard!"); }
-        }
-        function editMessage(oldText) {
-            document.getElementById('input').value = oldText;
-            document.getElementById('input').focus();
         }
-        function regenerate(text) {
-            document.getElementById('input').value = text;
-            send();
         }
         async function renameChat(cid, oldTitle) {
-            const newTitle = prompt("Rename chat:", oldTitle);
-            if(newTitle && newTitle !== oldTitle) {
-                await fetch('/rename_chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser, chat_id:cid, title:newTitle})});
-                loadHistory();
-            }
-            event.stopPropagation();
         }
         async function deleteChat(cid) {
-            if(confirm("Delete this chat?")) {
-                await fetch('/delete_chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser, chat_id:cid})});
-                if(currentChatId === cid) newChat();
-                loadHistory();
-            }
-            event.stopPropagation();
         }
         async function loadHistory() {
             try {
                 const res = await fetch('/get_history', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser})});
@@ -498,11 +505,12 @@ HTML_TEMPLATE = """
                     Object.keys(data.chats).reverse().forEach(cid => {
                         const title = data.chats[cid].title || "New Chat";
                         list.innerHTML += `
-                        <div class="history-item" onclick="loadChat('${cid}')">
                             <span class="h-title">${title}</span>
                             <div class="h-actions">
-                                <i class="fas fa-edit h-icon" onclick="renameChat('${cid}', '${title}')"></i>
-                                <i class="fas fa-trash h-icon" onclick="deleteChat('${cid}')"></i>
                             </div>
                         </div>`;
                     });
@@ -510,41 +518,31 @@ HTML_TEMPLATE = """
             } catch(e) {}
         }
         async function typeWriter(element, markdownText) {
             element.innerHTML = marked.parse(markdownText);
             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'));
             }
-            element.style.opacity = 0;
-            element.style.transition = 'opacity 0.5s';
             setTimeout(() => element.style.opacity = 1, 50);
         }
-        function toggleSidebar() {
-            document.getElementById('sidebar').classList.toggle('open');
-            document.getElementById('overlay').classList.toggle('active');
-        }
-        function filterHistory(q) {
-            const items = document.querySelectorAll('.history-item');
-            items.forEach(i => i.style.display = i.innerText.toLowerCase().includes(q.toLowerCase()) ? 'flex' : 'none');
-        }
         async function newChat() {
-            currentChatId = null;
-            document.getElementById('chat-box').innerHTML = "";
             const r = await fetch('/new_chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser})});
-            const d = await r.json(); currentChatId = d.chat_id;
-            loadHistory();
             document.getElementById('sidebar').classList.remove('open');
-            document.getElementById('overlay').classList.remove('active');
         }
         async function loadChat(cid) {
-            currentChatId = cid;
-            const res = await fetch('/get_chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser, chat_id:cid})});
-            const data = await res.json();
-            const box = document.getElementById('chat-box'); box.innerHTML = "";
             data.messages.forEach(msg => {
                 const isUser = msg.role === 'user';
                 if(isUser) {
@@ -553,17 +551,12 @@ HTML_TEMPLATE = """
                     const div = document.createElement('div'); div.className = 'msg ai-msg';
                     div.innerHTML = `<div class="ai-content">${marked.parse(msg.content)}</div>`;
                     box.appendChild(div);
                     if(window.MathJax) MathJax.typesetPromise([div]);
-                    if(window.mermaid) {
-                         const m = div.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, div.querySelectorAll('.mermaid'));
-                    }
-                    div.insertAdjacentHTML('beforeend', `<div class="msg-actions"><span class="action-btn" onclick="copyAiResponse(this)"><i class="fas fa-copy"></i> Copy</span></div>`);
                 }
             });
             document.getElementById('sidebar').classList.remove('open');
-            document.getElementById('overlay').classList.remove('active');
             box.scrollTop = box.scrollHeight;
         }
@@ -636,5 +629,15 @@ def chat():
     save_db(user_db)
     return jsonify({"response": reply, "new_title": new_title})
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)

 # --- 🧠 SYSTEM INSTRUCTION ---
 SYSTEM_INSTRUCTION = """
+ROLE: You are "Student's AI", a professional academic 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.
+5. **CODE:** Use Python/Java/C++ blocks. Explain logic briefly.
 """
 # --- 🧬 MODEL & FILE HANDLING ---
     return "⚠️ System Busy. Please try again."
+# --- PWA MANIFEST ---
 @app.route('/manifest.json')
 def manifest():
     data = {
+        "name": "Student's AI", "short_name": "StudentAI", "start_url": "/", "display": "standalone",
+        "orientation": "portrait", "background_color": "#09090b", "theme_color": "#09090b",
+        "icons": [{"src": "https://cdn-icons-png.flaticon.com/512/4712/4712035.png", "sizes": "192x192", "type": "image/png"}]
     }
     return Response(json.dumps(data), mimetype='application/json')
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#09090b">
     <link rel="manifest" href="/manifest.json">
     <title>Student's AI</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script>window.MathJax = { tex: { inlineMath: [['$', '$']] }, svg: { fontCache: 'global' } };</script>
+    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <script type="module">
       import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+      mermaid.initialize({ startOnLoad: false, theme: 'dark',securityLevel: 'loose' });
       window.mermaid = mermaid;
     </script>
     <style>
         :root {
+            --bg: #09090b; --card: #18181b; --user-msg: #27272a; --text: #e4e4e7;
+            --accent: #fff; --border: #27272a; --dim: #71717a;
         }
         * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+        body, html { margin: 0; padding: 0; height: 100%; width: 100%; background: var(--bg); color: var(--text); font-family: 'Outfit', sans-serif; overflow: hidden; user-select: none; font-size: 17px; }
         #app-container { display: flex; flex-direction: column; height: 100dvh; position: relative; }
+        /* HEADER (Professional) */
         header {
+            height: 70px; padding: 0 20px;
             background: rgba(9,9,11, 0.98);
             border-bottom: 1px solid var(--border-color);
             display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; z-index: 50;
+            padding-top: env(safe-area-inset-top);
+        }
+        .menu-btn {
+            width: 40px; height: 40px; border-radius: 50%; border: 1px solid #333;
+            display: flex; align-items: center; justify-content: center; cursor: pointer;
+            transition: 0.2s; color: #fff;
         }
+        .menu-btn:active { transform: scale(0.95); background: #222; }
+        .app-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: #fff; }
+        /* SIDEBAR (Top to Bottom Animation) */
         #sidebar {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: var(--bg); z-index: 100;
+            display: flex; flex-direction: column; padding: 25px;
+            padding-top: calc(70px + env(safe-area-inset-top));
+            transform: translateY(-100%); /* Start hidden above */
+            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        #sidebar.open { transform: translateY(0); }
+        /* Sidebar Elements */
+        .user-info { margin-bottom: 30px; font-size: 20px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 15px; }
+        .new-chat-btn {
+            width: 100%; padding: 15px; background: #fff; color: #000; border: none;
+            border-radius: 12px; font-weight: 700; font-size: 16px; cursor: pointer; margin-bottom: 25px;
+            display: flex; justify-content: center; align-items: center;
+        }
+        .new-chat-btn:active { transform: scale(0.98); opacity: 0.9; }
+        .history-label { color: var(--dim); font-size: 13px; font-weight: 600; margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; }
+        #history-list {
+            flex: 1; overflow-y: auto; background: var(--card); border-radius: 16px;
+            padding: 10px; border: 1px solid var(--border);
         }
         .history-item {
             display: flex; justify-content: space-between; align-items: center;
+            padding: 15px; border-bottom: 1px solid #222; cursor: pointer; color: #a1a1aa;
+            font-size: 15px; transition: 0.2s;
         }
+        .history-item:last-child { border-bottom: none; }
+        .history-item:active { background: #222; color: #fff; }
+        .h-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
+        /* Action Logos (Hidden by default, shown on long press/active) */
+        .h-actions { display: none; gap: 15px; }
+        .history-item.active-mode .h-actions { display: flex; }
+        .h-icon { font-size: 16px; color: #fff; padding: 5px; }
+        /* BRANDING */
+        .brand-section { text-align: center; margin-top: 20px; padding-bottom: env(safe-area-inset-bottom); }
+        .brand-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 12px; color: var(--dim); letter-spacing: 2px; margin-bottom: 10px; opacity: 0.6; }
+        .logout-btn { color: #ef4444; cursor: pointer; font-size: 15px; font-weight: 600; padding: 10px; }
+        /* CHAT AREA */
         #chat-box {
             flex: 1; overflow-y: auto; padding: 20px 5%;
+            display: flex; flex-direction: column; gap: 30px;
             -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
         }
+        .msg { width: 100%; line-height: 1.7; font-size: 17px; opacity: 0; animation: fadeInstant 0.3s forwards; }
+        @keyframes fadeInstant { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
         .user-msg { text-align: right; }
+        .user-content { display: inline-block; background: var(--user-msg); padding: 12px 20px; border-radius: 20px 20px 4px 20px; text-align: left; max-width: 85%; user-select: text; color: #fff; }
         .ai-msg { text-align: left; }
+        .ai-content { user-select: text; color: #d4d4d8; }
         .ai-content strong { color: #fff; font-weight: 700; }
+        .ai-content h1, .ai-content h2, .ai-content h3 { margin-top: 20px; color: #fff; font-weight: 700; }
+        /* Code Blocks (Colored) */
+        pre { background: #1e1e1e !important; border-radius: 12px; padding: 15px; overflow-x: auto; margin: 15px 0; border: 1px solid #333; }
+        code { font-family: 'JetBrains Mono', monospace; font-size: 14px; }
+        /* Math & Diagrams */
+        .mjx-chtml { background: #18181b; padding: 10px; border-radius: 8px; border: 1px solid #333; overflow-x: auto; margin: 10px 0; text-align: center; }
         .mermaid { background: #111; padding: 15px; border-radius: 10px; text-align: center; margin: 15px 0; }
+        /* Action LOGOS (Big & Spaced) */
+        .msg-actions { margin-top: 10px; opacity: 0; transition: opacity 0.2s; display: flex; gap: 20px; align-items: center; }
         .user-msg .msg-actions { justify-content: flex-end; }
         .msg:hover .msg-actions { opacity: 1; }
+        .action-icon { cursor: pointer; color: var(--dim); font-size: 18px; transition: 0.2s; }
+        .action-icon:hover { color: #fff; transform: scale(1.1); }
+        /* INPUT AREA */
+        .input-wrapper { background: var(--bg); padding: 15px; border-top: 1px solid var(--border); flex-shrink: 0; z-index: 60; padding-bottom: max(15px, env(safe-area-inset-bottom)); }
         .input-container {
+            max-width: 900px; margin: 0 auto; background: var(--card);
+            border: 1px solid var(--border); border-radius: 24px; padding: 8px 12px;
+            display: flex; align-items: flex-end; gap: 12px;
         }
+        textarea { flex: 1; background: transparent; border: none; color: #fff; font-size: 17px; max-height: 120px; padding: 10px 5px; resize: none; outline: none; font-family: 'Outfit', sans-serif; }
+        .icon-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: transparent; color: #a1a1aa; cursor: pointer; font-size: 18px; }
         .icon-btn:hover { background: #333; color: #fff; }
+        .send-btn { background: #fff; color: #000; width: 38px; height: 38px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; }
+        /* SMALL CURVED PREVIEW */
+        #preview-area {
+            position: absolute; bottom: 85px; left: 20px;
+            display: none; z-index: 70;
+        }
+        .preview-box {
+            width: 60px; height: 60px; border-radius: 12px; border: 2px solid #fff;
+            background: #222; overflow: hidden; position: relative;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+        }
+        .preview-img { width: 100%; height: 100%; object-fit: cover; }
+        .preview-file-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; }
+        .remove-preview {
+            position: absolute; top: -8px; right: -8px; background: red; color: white;
+            border-radius: 50%; width: 20px; height: 20px; 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: 350px; text-align: center; padding: 40px; border: 1px solid var(--border); border-radius: 20px; background: #0a0a0a; }
     </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:15px; border-radius:12px; border:1px solid #333; background:#111; color:#fff; text-align:center; outline:none; margin-bottom:20px; font-size: 16px;">
+            <button onclick="handleLogin()" style="width:100%; padding:15px; border-radius:12px; border:none; background:#fff; font-weight:800; cursor:pointer; font-size: 16px;">Start Learning</button>
         </div>
     </div>
+    <div id="sidebar">
+        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
+            <div class="user-info">
+                <span id="display-name">User</span>
             </div>
+            <div class="menu-btn" onclick="toggleSidebar()"><i class="fas fa-times"></i></div>
+        </div>
+        <button class="new-chat-btn" onclick="newChat()">New Chat</button>
+        <div class="history-label">Chat History</div>
+        <div id="history-list"></div>
+        <div class="brand-section">
+            <div class="brand-name">Designed by Shirpi</div>
+            <div class="logout-btn" onclick="handleLogout()">Log Out</div>
         </div>
+    </div>
+    <div id="app-container">
         <header>
+            <div class="menu-btn" onclick="toggleSidebar()"><i class="fas fa-bars"></i></div>
+            <span class="app-title">Student's AI</span>
+            <div style="width:40px;"></div> </header>
         <div id="chat-box"></div>
         <div class="input-wrapper">
             <div id="preview-area">
+                <div class="preview-box">
                     <div id="preview-visual"></div>
                 </div>
+                <button class="remove-preview" onclick="clearAttachment()">×</button>
             </div>
             <div class="input-container">
         let currentUser = null;
         let currentChatId = null;
         let currentAttachment = { type: null, data: null, name: null };
+        let longPressTimer;
         function checkLogin() {
             const stored = localStorage.getItem("student_ai_user");
         function showApp() {
             document.getElementById("login-overlay").style.display = "none";
+            document.getElementById("display-name").innerText = "Hi " + currentUser;
             loadHistory();
+            if(!currentChatId) {
+                const box = document.getElementById("chat-box");
+                if(box.innerHTML === "") {
+                    box.innerHTML = `<div class="msg ai-msg"><div class="ai-content"><h1>Hi ${currentUser},</h1><p>How can I help you with your <strong>Studies</strong> today?</p></div></div>`;
+                }
+            }
         }
         function resizeInput(el) {
                 reader.onload = function(e) {
                     const result = e.target.result;
                     const isImage = file.type.startsWith('image/');
+                    currentAttachment = { type: isImage ? 'image' : 'file', data: isImage ? result : atob(result.split(',')[1]), name: file.name };
                     const previewArea = document.getElementById('preview-area');
                     const visual = document.getElementById('preview-visual');
                     previewArea.style.display = 'block';
+                    visual.innerHTML = isImage ? `<img src="${result}" class="preview-img">` : `<div class="preview-file-icon"><i class="fas fa-file-alt"></i></div>`;
                 }
                 reader.readAsDataURL(file);
             }
             if (!text && !currentAttachment.data) return;
             const chatBox = document.getElementById('chat-box');
             let attachHtml = '';
+            if (currentAttachment.type === 'image') attachHtml = `<br><img src="${currentAttachment.data}" style="max-height:100px; margin-top:10px; border-radius:8px;">`;
+            if (currentAttachment.type === 'file') attachHtml = `<br><small>📄 ${currentAttachment.name}</small>`;
             const userHtml = `
                 <div class="msg user-msg">
                     <div class="user-content">${text.replace(/</g, "&lt;")}${attachHtml}</div>
                     <div class="msg-actions">
+                         <i class="fas fa-copy action-icon" onclick="copyText('${text}')"></i>
+                         <i class="fas fa-pen action-icon" onclick="editMessage('${text}')"></i>
                     </div>
                 </div>`;
             chatBox.insertAdjacentHTML('beforeend', userHtml);
             const promptText = text;
                     const d = await r.json(); currentChatId = d.chat_id;
                     loadHistory();
                 }
                 const res = await fetch('/chat', {
                     method: 'POST', headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({ message: promptText, image: imgData, file_text: fileText, username: currentUser, chat_id: currentChatId })
                 });
                 const data = await res.json();
                 aiDiv.insertAdjacentHTML('beforeend', `
                     <div class="msg-actions">
+                        <i class="fas fa-copy action-icon" onclick="copyAiResponse(this)"></i>
+                        <i class="fas fa-share-alt action-icon" onclick="shareResponse(this)"></i>
+                        <i class="fas fa-redo action-icon" onclick="regenerate('${promptText}')"></i>
                     </div>`);
                 scrollToBottom();
                 if(data.new_title) loadHistory();
+            } catch (e) { document.getElementById(msgId).innerHTML = "⚠️ Error: " + e.message; }
         }
+        // --- ACTIONS ---
         function copyText(text) { navigator.clipboard.writeText(text); }
         function copyAiResponse(btn) {
             const text = btn.closest('.ai-msg').querySelector('.ai-content').innerText;
         }
         function shareResponse(btn) {
             const text = btn.closest('.ai-msg').querySelector('.ai-content').innerText;
+            if (navigator.share) navigator.share({ title: 'Student AI', text: text });
+            else navigator.clipboard.writeText(text);
         }
+        function editMessage(oldText) { document.getElementById('input').value = oldText; document.getElementById('input').focus(); }
+        function regenerate(text) { document.getElementById('input').value = text; send(); }
+        // --- HISTORY (LONG PRESS) ---
+        function handleHistoryTouchStart(e, cid, title) {
+            longPressTimer = setTimeout(() => {
+                e.target.closest('.history-item').classList.add('active-mode');
+            }, 600); // 0.6s hold
         }
+        function handleHistoryTouchEnd(e) { clearTimeout(longPressTimer); }
         async function renameChat(cid, oldTitle) {
+            const newTitle = prompt("Rename:", oldTitle);
+            if(newTitle) { await fetch('/rename_chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser, chat_id:cid, title:newTitle})}); loadHistory(); }
         }
         async function deleteChat(cid) {
+            if(confirm("Delete?")) { await fetch('/delete_chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser, chat_id:cid})}); if(currentChatId === cid) newChat(); loadHistory(); }
         }
         async function loadHistory() {
             try {
                 const res = await fetch('/get_history', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser})});
                     Object.keys(data.chats).reverse().forEach(cid => {
                         const title = data.chats[cid].title || "New Chat";
                         list.innerHTML += `
+                        <div class="history-item" onclick="loadChat('${cid}')" oncontextmenu="return false;"
+                             ontouchstart="handleHistoryTouchStart(event, '${cid}', '${title}')" ontouchend="handleHistoryTouchEnd(event)">
                             <span class="h-title">${title}</span>
                             <div class="h-actions">
+                                <i class="fas fa-pen h-icon" onclick="event.stopPropagation(); renameChat('${cid}', '${title}')"></i>
+                                <i class="fas fa-trash h-icon" onclick="event.stopPropagation(); deleteChat('${cid}')"></i>
                             </div>
                         </div>`;
                     });
             } catch(e) {}
         }
+        // --- ANIMATION & HIGHLIGHT ---
         async function typeWriter(element, markdownText) {
             element.innerHTML = marked.parse(markdownText);
+            hljs.highlightAll(); // Highlight Code
             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'));
             }
+            element.style.opacity = 0; element.style.transition = 'opacity 0.4s';
             setTimeout(() => element.style.opacity = 1, 50);
         }
+        function toggleSidebar() { document.getElementById('sidebar').classList.toggle('open'); }
         async function newChat() {
+            currentChatId = null; document.getElementById('chat-box').innerHTML = "";
             const r = await fetch('/new_chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser})});
+            const d = await r.json(); currentChatId = d.chat_id; loadHistory();
             document.getElementById('sidebar').classList.remove('open');
+            showApp(); // Reset Intro
         }
         async function loadChat(cid) {
+            currentChatId = cid; const res = await fetch('/get_chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser, chat_id:cid})});
+            const data = await res.json(); const box = document.getElementById('chat-box'); box.innerHTML = "";
             data.messages.forEach(msg => {
                 const isUser = msg.role === 'user';
                 if(isUser) {
                     const div = document.createElement('div'); div.className = 'msg ai-msg';
                     div.innerHTML = `<div class="ai-content">${marked.parse(msg.content)}</div>`;
                     box.appendChild(div);
+                    hljs.highlightAll();
                     if(window.MathJax) MathJax.typesetPromise([div]);
+                    div.insertAdjacentHTML('beforeend', `<div class="msg-actions"><i class="fas fa-copy action-icon" onclick="copyAiResponse(this)"></i></div>`);
                 }
             });
             document.getElementById('sidebar').classList.remove('open');
             box.scrollTop = box.scrollHeight;
         }
     save_db(user_db)
     return jsonify({"response": reply, "new_title": new_title})
+@app.route('/manifest.json')
+def manifest():
+    data = {
+        "name": "Student's AI", "short_name": "StudentAI", "start_url": "/", "display": "standalone",
+        "orientation": "portrait", "background_color": "#09090b", "theme_color": "#09090b",
+        "icons": [{"src": "https://cdn-icons-png.flaticon.com/512/4712/4712035.png", "sizes": "192x192", "type": "image/png"}]
+    }
+    return Response(json.dumps(data), mimetype='application/json')
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)