Update app.py

app.py

@@ -31,32 +31,31 @@ def save_db(db):
     except: pass
 user_db = load_db()
 
-# --- 🧠 SYSTEM INSTRUCTION ---
+# --- 🧠 SYSTEM INSTRUCTION (UPDATED FOR ENGLISH DEFAULT) ---
 SYSTEM_INSTRUCTION = """
 ROLE: You are "Student's AI", a coding tutor.
-RULES: Format code in Markdown (```python). Explain in Tanglish.
+
+RULES:
+1. **DEFAULT LANGUAGE:** Always explain in **ENGLISH** unless the user explicitly asks for Tamil or Tanglish.
+2. **CODE FORMAT:** Always format code inside Markdown blocks (```python ... ```).
+3. **CLARITY:** Keep explanations simple, short, and beginner-friendly.
+4. **NO HINDI:** Do not use Hindi. Use only English or Tamil/Tanglish when requested.
 """
 
-# --- 🧬 DYNAMIC MODEL FINDER ---
+# --- 🧬 DYNAMIC MODEL FINDER (The Magic Fix) ---
 def get_working_model(key):
     """
     Asks Google: 'What models are available for this key?'
-    Returns the best available model name.
+    Returns the best available model name to avoid 404 errors.
     """
     genai.configure(api_key=key)
     try:
-        # Get list of all models
         models = list(genai.list_models())
         
-        # Priority list (Try to find these first)
-        preferred_order = [
-            "generateContent", # We need models that support this method
-        ]
-        
-        # Filter models that support chat
+        # Filter models that support chat generation
         chat_models = [m for m in models if 'generateContent' in m.supported_generation_methods]
         
-        # Look for Flash first, then Pro, then anything else
+        # Priority Logic: Try to find Flash -> Pro 1.5 -> Pro 1.0
         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:
@@ -64,7 +63,7 @@ def get_working_model(key):
         for m in chat_models:
             if "pro" in m.name.lower() and "1.0" in m.name: return m.name
             
-        # If no specific preference found, just take the first working one
+        # Fallback: Take the first available chat model
         if chat_models:
             return chat_models[0].name
             
@@ -76,7 +75,7 @@ def get_working_model(key):
 def generate_with_retry(prompt, history_messages=[]):
     global current_key_index
     
-    if not API_KEYS: return "🚨 API Keys Missing."
+    if not API_KEYS: return "🚨 API Keys Missing. Please check Secrets."
 
     # History Format
     formatted_history = []
@@ -86,7 +85,7 @@ def generate_with_retry(prompt, history_messages=[]):
 
     log_messages = []
 
-    # RETRY LOGIC
+    # RETRY LOGIC (Keys + Dynamic Model)
     for i in range(len(API_KEYS)):
         key = API_KEYS[current_key_index]
         
@@ -123,32 +122,87 @@ HTML_TEMPLATE = """
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Student's AI</title>
-    <link href="[https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css)" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <style>
         :root { --bg: #000; --sidebar: #0a0a0a; --header: rgba(0,0,0,0.9); --user-bg: #222; --text: #ececec; }
         body, html { margin: 0; padding: 0; height: 100%; width: 100%; background: var(--bg); color: var(--text); font-family: sans-serif; overflow: hidden; }
-        pre { background: #161616; border: 1px solid #333; padding: 15px; overflow-x: auto; color: #e6edf3; }
+        pre { background: #161616; border: 1px solid #333; padding: 15px; overflow-x: auto; color: #e6edf3; border-radius: 8px; }
         #app-container { display: flex; flex-direction: column; height: 100%; }
+        header { height: 60px; padding: 0 20px; background: var(--header); border-bottom: 1px solid #222; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; z-index: 50; }
+        #sidebar { position: fixed; inset: 0; width: 280px; background: var(--sidebar); border-right: 1px solid #222; transform: translateX(-100%); transition: 0.3s; z-index: 100; padding: 20px; display: flex; flex-direction: column; }
+        #sidebar.open { transform: translateX(0); }
+        .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 90; display: none; }
+        .overlay.active { display: block; }
         #chat-box { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
-        .msg { padding: 10px 15px; border-radius: 10px; max-width: 85%; line-height: 1.5; }
-        .user-msg { align-self: flex-end; background: #222; }
-        .ai-msg { align-self: flex-start; }
-        .input-wrap { padding: 15px; background: #000; border-top: 1px solid #333; display: flex; gap: 10px; }
-        input { flex: 1; padding: 10px; border-radius: 20px; border: 1px solid #333; background: #111; color: #fff; }
-        button { padding: 10px 20px; border-radius: 20px; border: none; background: #fff; cursor: pointer; }
+        .msg { padding: 12px 18px; border-radius: 10px; max-width: 85%; line-height: 1.6; }
+        .user-msg { align-self: flex-end; background: #222; color: #fff; }
+        .ai-msg { align-self: flex-start; color: #ececec; }
+        .input-wrap { padding: 15px; background: #000; border-top: 1px solid #333; display: flex; gap: 10px; z-index: 60; }
+        input { flex: 1; padding: 12px; border-radius: 25px; border: 1px solid #333; background: #111; color: #fff; outline: none; }
+        button { padding: 10px 20px; border-radius: 25px; border: none; background: #fff; font-weight: bold; cursor: pointer; }
+        
+        /* Login Styles */
+        #login-overlay { position: fixed; inset: 0; z-index: 2000; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+        .login-box { width: 90%; max-width: 350px; padding: 30px; background: #111; border: 1px solid #333; border-radius: 15px; text-align: center; }
+        .login-input { width: 100%; padding: 12px; background: #000; border: 1px solid #333; color: #fff; border-radius: 8px; margin-bottom: 15px; text-align: center; }
+        .login-btn { width: 100%; padding: 12px; background: #fff; color: #000; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
     </style>
 </head>
 <body>
+    <div id="login-overlay">
+        <div class="login-box">
+            <h2 style="color:#fff;">Student's AI</h2>
+            <input type="text" id="username-input" class="login-input" placeholder="Enter Name" autocomplete="off">
+            <button onclick="handleLogin()" class="login-btn">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 #222; margin-bottom:20px; font-weight:bold; display:flex; gap:10px; align-items:center;">
+                <div id="avatar" style="width:35px; height:35px; background:#333; border-radius:50%; display:flex; align-items:center; justify-content:center;">U</div>
+                <span id="display-name">User</span>
+            </div>
+            <div style="background:#fff; color:#000; padding:12px; border-radius:8px; text-align:center; font-weight:bold; cursor:pointer;" onclick="newChat()">+ New Chat</div>
+            <div style="flex:1; overflow-y:auto; margin-top:20px;" id="history-list"></div>
+            <div style="margin-top:20px; color:#ff5555; cursor:pointer; text-align:center;" onclick="handleLogout()">Log Out</div>
+        </div>
+        <header>
+            <i class="fas fa-bars" style="color:#fff; font-size:20px; cursor:pointer;" onclick="toggleSidebar()"></i>
+            <div style="font-weight:bold; font-size:18px; color:#fff;">Student's AI</div>
+            <div style="width:20px;"></div>
+        </header>
         <div id="chat-box"></div>
         <div class="input-wrap">
-            <input id="input" placeholder="Type here..." onkeydown="if(event.key==='Enter') send()">
+            <input id="input" placeholder="Ask a coding question..." onkeydown="if(event.key==='Enter') send()">
             <button onclick="send()">Send</button>
         </div>
     </div>
     <script>
         let currentChatId = null;
-        let currentUser = localStorage.getItem("user") || "User";
+        let currentUser = null;
+        
+        function checkLogin() {
+            const stored = localStorage.getItem("student_ai_user");
+            if (stored) { currentUser = stored; showApp(); } else { document.getElementById("login-overlay").style.display = "flex"; }
+        }
+        function handleLogin() {
+            const name = document.getElementById("username-input").value.trim();
+            if(name) { localStorage.setItem("student_ai_user", name); currentUser = name; showApp(); }
+        }
+        function handleLogout() { localStorage.removeItem("student_ai_user"); location.reload(); }
+        
+        function showApp() {
+            document.getElementById("login-overlay").style.display = "none";
+            document.getElementById("app-container").style.display = "flex";
+            document.getElementById("display-name").innerText = currentUser;
+            document.getElementById("avatar").innerText = currentUser[0].toUpperCase();
+            loadHistory();
+            if(!currentChatId) {
+                 const box = document.getElementById("chat-box");
+                 if(box.innerHTML.trim() === "") { box.innerHTML = `<div class="msg ai-msg"><strong>Welcome ${currentUser}!</strong><br>I am ready. Ask me any code.</div>`; }
+            }
+        }
         
         async function send() {
             const input = document.getElementById('input');
@@ -161,7 +215,7 @@ HTML_TEMPLATE = """
             
             // Loading
             const loadId = "load-"+Date.now();
-            chatBox.innerHTML += `<div id="${loadId}" class="msg ai-msg">Checking Models...</div>`;
+            chatBox.innerHTML += `<div id="${loadId}" class="msg ai-msg">Thinking...</div>`;
             chatBox.scrollTop = chatBox.scrollHeight;
 
             try {
@@ -180,6 +234,44 @@ HTML_TEMPLATE = """
             }
             chatBox.scrollTop = chatBox.scrollHeight;
         }
+        
+        async function loadHistory() {
+            try {
+                const res = await fetch('/get_history', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ username: currentUser }) });
+                const data = await res.json();
+                const list = document.getElementById("history-list"); list.innerHTML = "";
+                if(data.chats) Object.keys(data.chats).reverse().forEach(cid => { list.innerHTML += `<div style="padding:10px; color:#888; cursor:pointer;" onclick="loadChat('${cid}')"><i class="fas fa-comment"></i> ${data.chats[cid].title}</div>`; });
+            } catch(e) {}
+        }
+        async function newChat() {
+             try {
+                const res = await fetch('/new_chat', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ username: currentUser }) });
+                const data = await res.json(); currentChatId = data.chat_id;
+                document.getElementById('chat-box').innerHTML = ''; 
+                loadHistory(); 
+                document.getElementById('sidebar').classList.remove('open');
+                document.getElementById('overlay').classList.remove('active');
+            } catch(e) {}
+        }
+        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 cls = msg.role === 'user' ? 'user-msg' : 'ai-msg';
+                box.innerHTML += `<div class="msg ${cls}">${msg.content}</div>`;
+            });
+            document.getElementById('sidebar').classList.remove('open');
+            document.getElementById('overlay').classList.remove('active');
+            box.scrollTop = box.scrollHeight;
+        }
+        function toggleSidebar() { 
+            document.getElementById('sidebar').classList.toggle('open'); 
+            document.getElementById('overlay').classList.toggle('active'); 
+        }
+        
+        checkLogin();
     </script>
 </body>
 </html>
@@ -194,7 +286,7 @@ def new_chat():
     user = request.json.get("username")
     if user not in user_db: user_db[user] = {}
     nid = str(uuid.uuid4())
-    user_db[user][nid] = {"title": "New", "messages": []}
+    user_db[user][nid] = {"title": "New Chat", "messages": []}
     save_db(user_db)
     return jsonify({"chat_id": nid})
 
@@ -211,7 +303,8 @@ def chat():
     # CALL DYNAMIC GENERATOR
     reply = generate_with_retry(msg, user_db[u][cid]["messages"][:-1])
     
-    if "FAILED" in reply:
+    # Error Handling for Display
+    if "FAILED" in reply or "Missing" in reply:
         formatted_html = reply
     else:
         formatted_html = markdown.markdown(reply, extensions=['fenced_code'])