Update app.py

app.py

@@ -1,16 +1,31 @@
+Perfect, Cherry! 😄 Here’s a **complete, ready-to-run Gradio AI agent** with:
+
+* ✅ `type="messages"` properly implemented (no more incompatible data errors)
+* ✅ Modern **dark theme** UI with rounded chat bubbles
+* ✅ **Sidebar** with subjects, planner, languages, settings, and About section
+* ✅ **Floating send button + file upload**
+* ✅ **Context box** showing current mode
+
+---
+
+```python
 import os
 import gradio as gr
 import requests
 import json
 
+# =======================
 # Hugging Face Token
+# =======================
 HF_TOKEN = os.getenv("HF_TOKEN")
 if not HF_TOKEN:
     print("Error: HF_TOKEN not set.")
 else:
     print("HF_TOKEN loaded successfully.")
 
-# Memory file
+# =======================
+# Memory
+# =======================
 MEMORY_FILE = "memory.json"
 
 def load_memory():
@@ -23,7 +38,9 @@ def save_memory(memory):
     with open(MEMORY_FILE, "w") as f:
         json.dump(memory, f)
 
-# Web search
+# =======================
+# Web search function
+# =======================
 def search_web(query):
     try:
         url = "https://api.duckduckgo.com/"
@@ -33,14 +50,16 @@ def search_web(query):
         if data.get("AbstractText"):
             return data["AbstractText"]
         elif data.get("RelatedTopics"):
-            topics = [t.get("Text", "") for t in data["RelatedTopics"] if "Text" in t]
+            topics = [t.get("Text", "") for t in data.get("RelatedTopics", []) if "Text" in t]
             return " ".join(topics[:3])
         else:
             return "No useful information found."
     except Exception as e:
         return f"Search error: {e}"
 
-# Chat function with messages format
+# =======================
+# Chat function
+# =======================
 def chat_with_model(message, history, context, file_input=None):
     if history is None:
         history = []
@@ -69,13 +88,15 @@ def chat_with_model(message, history, context, file_input=None):
                 "Authorization": f"Bearer {HF_TOKEN}",
                 "Content-Type": "application/json"
             },
-            json={"model": "deepseek-ai/DeepSeek-V3.2-Exp:novita", "messages": conversation}
+            json={
+                "model": "deepseek-ai/DeepSeek-V3.2-Exp:novita",
+                "messages": conversation
+            }
         )
         if response.status_code != 200:
             raise Exception(f"API Error: {response.status_code} - {response.text}")
 
         reply = response.json()["choices"][0]["message"]["content"]
-
         # Format math nicely
         reply = reply.replace("Step", "\n\n**Step").replace(":", ":**").replace("\\[", "\n\n\\[").replace("\\]", "\\]\n\n")
 
@@ -90,22 +111,28 @@ def chat_with_model(message, history, context, file_input=None):
         history.append({"role": "assistant", "content": error_msg})
         return history, history
 
+# =======================
 # Sidebar context update
+# =======================
 def update_context(choice):
-    if not choice:
+    if choice is None:
         return "📘 **You are in General Mode.** Ask EduAI anything about your studies!"
     return f"📘 **You selected {choice} mode.** Ask anything related to this topic!"
 
+# =======================
 # Clear memory
+# =======================
 def clear_memory():
     if os.path.exists(MEMORY_FILE):
         os.remove(MEMORY_FILE)
     return [], "🧹 Chat memory cleared! Start fresh."
 
-# Custom CSS for professional look
+# =======================
+# Custom CSS
+# =======================
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
-body { font-family: 'Roboto', sans-serif; background:#1e1e1e; color:#e0e0e0; min-height:100vh; }
+body { font-family:'Roboto', sans-serif; background:#1e1e1e; color:#e0e0e0; min-height:100vh; }
 .header-title { font-size:36px; text-align:center; margin-bottom:20px; color:#007BFF; font-weight:700; text-shadow:0 0 10px rgba(0,123,255,0.5); }
 .sidebar { background:#2a2a2a; padding:20px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.5); border:1px solid #333; }
 .menu-title { font-size:20px; font-weight:500; margin-bottom:15px; color:#007BFF; }
@@ -116,7 +143,7 @@ body { font-family: 'Roboto', sans-serif; background:#1e1e1e; color:#e0e0e0; min
 .context-box { background:#2a2a2a; padding:15px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.3); margin-bottom:15px; border:1px solid #333; color:#e0e0e0; }
 .chatbox .message.user { background:#007BFF; color:#fff; border-radius:20px; padding:12px 18px; margin:8px 0; }
 .chatbox .message.bot { background:#333; color:#e0e0e0; border-radius:20px; padding:12px 18px; margin:8px 0; }
-.input-row { display:flex; gap:10px; }
+.input-row { display:flex; gap:10px; margin-top:10px; }
 .chat-input { flex:1; border-radius:12px; padding:12px; border:1px solid #555; background:#2a2a2a; color:#e0e0e0; }
 .chat-input:focus { border-color:#007BFF; outline:none; }
 .btn-send { background:#7c3aed; color:#fff; border-radius:12px; padding:12px 18px; border:none; cursor:pointer; transition:0.3s; }
@@ -129,7 +156,9 @@ body { font-family: 'Roboto', sans-serif; background:#1e1e1e; color:#e0e0e0; min
 .radio label { color:#e0e0e0; margin:8px 0; }
 """
 
-# Launch Gradio UI
+# =======================
+# Gradio UI
+# =======================
 with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as iface:
     gr.Markdown("# 🎓 **EduAI — Professional Study Companion**", elem_classes="header-title")
 
@@ -139,20 +168,65 @@ with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as iface:
             gr.Markdown("### 🧭 **Main Menu**", elem_classes="menu-title")
 
             with gr.Accordion("📚 Subject Tutor", open=False):
-                subj = gr.Radio(["Science 🧪", "ICT 💻", "English 📘", "Mathematics ➗"], label="Choose a subject", type="index")
+                subj = gr.Radio(
+                    ["Science 🧪", "ICT 💻", "English 📘", "Mathematics ➗"], 
+                    label="Choose a subject", type="index"
+                )
 
             with gr.Accordion("🗓 Study Planner", open=False):
-                planner = gr.Radio(["View Plan 📅", "Add Task ✏️", "Study Tips 💡"], label="Planner Options", type="index")
+                planner = gr.Radio(
+                    ["View Plan 📅", "Add Task ✏️", "Study Tips 💡"], 
+                    label="Planner Options", type="index"
+                )
 
             with gr.Accordion("🌐 Languages", open=False):
-                lang = gr.Radio(["Learn Sinhala 🇱🇰","Learn Tamil 🇮🇳","Learn English 🇬🇧","Learn Spanish 🇪🇸"], label="Language Options", type="index")
+                lang = gr.Radio(
+                    ["Learn Sinhala 🇱🇰","Learn Tamil 🇮🇳","Learn English 🇬🇧","Learn Spanish 🇪🇸"], 
+                    label="Language Options", type="index"
+                )
 
             with gr.Accordion("⚙️ Settings", open=False):
                 clear_btn = gr.Button("🧹 Clear Memory", elem_classes="btn-clear")
 
             with gr.Accordion("👩‍🎓 About", open=False):
-                gr.Markdown("EduAI – developed by **Wafa Fazly** using a pre-trained AI model. Helps learners understand **Science, ICT, English, and more**.", elem_classes="about-text")
+                gr.Markdown(
+                    "EduAI – developed by **Wafa Fazly** using a pre-trained AI model. Helps learners understand **Science, ICT, English, and more**.",
+                    elem_classes="about-text"
+                )
 
-        # Main chat
+        # Main Chat Area
         with gr.Column(scale=4, elem_classes="main-chat"):
-            context_display = gr.Markdown("📘 **You are in General Mode.** Ask EduAI anything
+            context_display = gr.Markdown(
+                "📘 **You are in General Mode.** Ask EduAI anything about your studies!",
+                elem_classes="context-box"
+            )
+
+            chatbot = gr.Chatbot(
+                label="EduAI Chat",
+                height=500,
+                               render_markdown=True,
+                type="messages",
+                latex_delimiters=[{"left": "$$", "right": "$$", "display": True},
+                                  {"left": "\\[", "right": "\\]", "display": True}]
+            )
+
+            # Input row
+            with gr.Row(elem_classes="input-row"):
+                msg = gr.Textbox(label="Ask EduAI:", placeholder="Type your question here...", elem_classes="chat-input", show_label=False)
+                file_input = gr.File(label="📎", file_types=[".pdf", ".docx", ".png", ".jpg"], elem_classes="file-upload", show_label=False)
+                send_btn = gr.Button("✈️", elem_classes="btn-send")
+
+    # =======================
+    # Event handlers
+    # =======================
+    subj.change(update_context, inputs=subj, outputs=context_display)
+    planner.change(update_context, inputs=planner, outputs=context_display)
+    lang.change(update_context, inputs=lang, outputs=context_display)
+    send_btn.click(chat_with_model, inputs=[msg, chatbot, context_display, file_input], outputs=[chatbot, chatbot])
+    msg.submit(chat_with_model, inputs=[msg, chatbot, context_display, file_input], outputs=[chatbot, chatbot])
+    clear_btn.click(clear_memory, outputs=[chatbot, context_display])
+
+# Launch the app
+iface.launch()
+
+```