Update app.py

app.py

@@ -113,29 +113,43 @@ def clear_memory():
         os.remove(MEMORY_FILE)
     return [], "🧹 Chat memory cleared! Start fresh."
 
-# 🖌 Custom CSS for professional look
+# 🖌 Custom CSS for elegant, modern look (enhanced for sophistication)
 custom_css = """
-.header-title { font-size: 36px; text-align:center; margin-bottom:20px; }
-.sidebar { background-color:#f5f3ff; padding:15px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
-.menu-title { font-size:20px; font-weight:bold; margin-bottom:10px; }
-.main-chat { padding:10px; }
-.context-box { background-color:#ffffff; padding:10px; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.1); margin-bottom:10px; }
-.chatbox .message.user { background-color:#e0d7ff; border-radius:10px; padding:8px; margin:5px 0; }
-.chatbox .message.bot { background-color:#ffffff; border-radius:10px; padding:8px; margin:5px 0; box-shadow:0 1px 2px rgba(0,0,0,0.05);}
-.chat-input { border-radius:10px; padding:8px; width:100%; }
-.btn-send { background-color:#7c3aed; color:white; border-radius:10px; padding:8px 16px; }
-.btn-clear { background-color:#ef4444; color:white; border-radius:10px; padding:6px 12px; }
-.file-upload { border:2px dashed #d4b5ff; border-radius:10px; padding:10px; text-align:center; }
-.about-text { font-size:14px; color:#4b5563; }
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f8fafc, #e2e8f0); color: #334155; }
+.header-title { font-size: 32px; text-align: center; margin-bottom: 20px; font-weight: 700; color: #0f172a; letter-spacing: -0.5px; }
+.sidebar { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 20px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; }
+.menu-title { font-size: 20px; font-weight: 600; margin-bottom: 15px; color: #0f172a; }
+.accordion { border-radius: 12px; margin-bottom: 10px; }
+.accordion-header { background: #f1f5f9; border-radius: 12px; padding: 12px; font-weight: 500; transition: all 0.3s ease; }
+.accordion-header:hover { background: #e2e8f0; }
+.main-chat { padding: 20px; background: transparent; }
+.context-box { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 15px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 15px; border: 1px solid #e2e8f0; font-size: 14px; }
+.chatbox { border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); background: #ffffff; }
+.chatbox .message.user { background: linear-gradient(135deg, #14b8a6, #06b6d4); color: white; border-radius: 16px; padding: 12px 16px; margin: 8px 0; box-shadow: 0 2px 6px rgba(20, 184, 166, 0.3); animation: fadeIn 0.5s ease-in; }
+.chatbox .message.bot { background: #f8fafc; color: #334155; border-radius: 16px; padding: 12px 16px; margin: 8px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; animation: fadeIn 0.5s ease-in; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+.chat-input { border-radius: 20px; padding: 12px 16px; width: 100%; border: 1px solid #d1d5db; transition: all 0.3s ease; }
+.chat-input:focus { outline: none; border-color: #14b8a6; box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2); }
+.btn-send { background: linear-gradient(135deg, #14b8a6, #06b6d4); color: white; border-radius: 20px; padding: 12px 24px; border: none; font-weight: 500; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3); }
+.btn-send:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(20, 184, 166, 0.4); }
+.btn-clear { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; border-radius: 12px; padding: 8px 16px; border: none; font-weight: 500; transition: all 0.3s ease; }
+.btn-clear:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); }
+.file-upload { border: 2px dashed #14b8a6; border-radius: 12px; padding: 15px; text-align: center; background: #f8fafc; transition: all 0.3s ease; }
+.file-upload:hover { background: #e2e8f0; border-color: #06b6d4; }
+.about-text { font-size: 14px; color: #64748b; line-height: 1.5; }
+.radio { margin: 10px 0; }
+.radio label { font-weight: 400; }
 """
 
-# 🎨 Gradio Interface with CSS included
-with gr.Blocks(theme=gr.themes.Soft(primary_hue="violet"), css=custom_css) as iface:
-    gr.Markdown("# 🎓 **EduAI — Your Smart Study Companion**", elem_classes="header-title")
+# 🎨 Gradio Interface with enhanced CSS and layout
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="teal"), css=custom_css) as iface:
+    gr.Markdown("# 🎓 **EduAI — Your Elegant Study Companion**", elem_classes="header-title")
 
     with gr.Row():
-        # Sidebar
-        with gr.Column(scale=1, min_width=250, elem_classes="sidebar"):
+        # Sidebar (refined for elegance)
+        with gr.Column(scale=1, min_width=280, elem_classes="sidebar"):
             gr.Markdown("### 🧭 **Main Menu**", elem_classes="menu-title")
 
             with gr.Accordion("📚 Subject Tutor", open=False):
@@ -168,7 +182,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="violet"), css=custom_css) as if
                 Helps learners understand **Science, ICT, English, and more** in a simple, friendly way! 💬
                 """, elem_classes="about-text")
 
-        # Main Chat Area
+        # Main Chat Area (enhanced for modern look)
         with gr.Column(scale=4, elem_classes="main-chat"):
             context_display = gr.Markdown(
                 "📘 **You are in General Mode.** Ask EduAI anything about your studies!",
@@ -177,14 +191,14 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="violet"), css=custom_css) as if
 
             chatbot = gr.Chatbot(
                 label="EduAI Chat",
-                height=500,
+                height=550,
                 render_markdown=True,
-                type="messages",  # ✅ Fixed deprecation warning
+                type="messages",
                 latex_delimiters=[{"left": "$$", "right": "$$", "display": True}, {"left": "\\[", "right": "\\]", "display": True}]
             )
 
             with gr.Row():
-                msg = gr.Textbox(label="Ask EduAI:", placeholder="Type your question here...", elem_classes="chat-input")
+                msg = gr.Textbox(label="Ask EduAI:", placeholder="Share your study query...", elem_classes="chat-input")
                 file_input = gr.File(label="📂 Upload a study file", file_types=[".pdf", ".docx", ".png", ".jpg"], elem_classes="file-upload")
                 send = gr.Button("Send ✈️", elem_classes="btn-send")