Update app.py

app.py

@@ -113,43 +113,195 @@ def clear_memory():
         os.remove(MEMORY_FILE)
     return [], "🧹 Chat memory cleared! Start fresh."
 
-# 🖌 Custom CSS for elegant, modern look (enhanced for sophistication)
+# 🖌 Enhanced Custom CSS for a sleek, modern, and visually appealing UI
 custom_css = """
-@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; }
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+body { 
+    font-family: 'Poppins', sans-serif; 
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+    color: #ffffff; 
+    margin: 0; 
+    padding: 0; 
+    min-height: 100vh; 
+}
+.gradio-container { 
+    background: transparent; 
+    box-shadow: none; 
+}
+.header-title { 
+    font-size: 40px; 
+    text-align: center; 
+    margin-bottom: 30px; 
+    font-weight: 700; 
+    color: #ffffff; 
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3); 
+    letter-spacing: -1px; 
+}
+.sidebar { 
+    background: rgba(255, 255, 255, 0.95); 
+    backdrop-filter: blur(15px); 
+    padding: 25px; 
+    border-radius: 20px; 
+    box-shadow: 0 8px 32px rgba(0,0,0,0.2); 
+    border: 1px solid rgba(255,255,255,0.2); 
+    margin-right: 20px; 
+}
+.menu-title { 
+    font-size: 22px; 
+    font-weight: 600; 
+    margin-bottom: 20px; 
+    color: #333; 
+    text-align: center; 
+}
+.accordion { 
+    border-radius: 15px; 
+    margin-bottom: 15px; 
+    overflow: hidden; 
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
+}
+.accordion-header { 
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
+    color: white; 
+    border-radius: 15px; 
+    padding: 15px; 
+    font-weight: 500; 
+    cursor: pointer; 
+    transition: all 0.3s ease; 
+    text-align: center; 
+}
+.accordion-header:hover { 
+    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%); 
+    transform: translateY(-2px); 
+    box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4); 
+}
+.main-chat { 
+    padding: 25px; 
+    background: rgba(255, 255, 255, 0.9); 
+    backdrop-filter: blur(15px); 
+    border-radius: 20px; 
+    box-shadow: 0 8px 32px rgba(0,0,0,0.2); 
+    border: 1px solid rgba(255,255,255,0.2); 
+}
+.context-box { 
+    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); 
+    padding: 20px; 
+    border-radius: 15px; 
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
+    margin-bottom: 20px; 
+    color: #333; 
+    font-weight: 500; 
+    text-align: center; 
+}
+.chatbox { 
+    border-radius: 15px; 
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
+    background: #ffffff; 
+    padding: 10px; 
+}
+.chatbox .message.user { 
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+    color: white; 
+    border-radius: 18px; 
+    padding: 15px 20px; 
+    margin: 10px 0; 
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); 
+    animation: slideIn 0.5s ease-in; 
+    font-weight: 400; 
+}
+.chatbox .message.bot { 
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
+    color: white; 
+    border-radius: 18px; 
+    padding: 15px 20px; 
+    margin: 10px 0; 
+    box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3); 
+    animation: slideIn 0.5s ease-in; 
+    font-weight: 400; 
+}
+@keyframes slideIn { 
+    from { opacity: 0; transform: translateX(-20px); } 
+    to { opacity: 1; transform: translateX(0); } 
+}
+.chat-input { 
+    border-radius: 25px; 
+    padding: 15px 20px; 
+    width: 100%; 
+    border: 2px solid #ddd; 
+    transition: all 0.3s ease; 
+    font-size: 16px; 
+    background: #ffffff; 
+}
+.chat-input:focus { 
+    outline: none; 
+    border-color: #667eea; 
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); 
+}
+.btn-send { 
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+    color: white; 
+    border-radius: 25px; 
+    padding: 15px 30px; 
+    border: none; 
+    font-weight: 600; 
+    transition: all 0.3s ease; 
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); 
+    cursor: pointer; 
+}
+.btn-send:hover { 
+    transform: scale(1.05); 
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); 
+}
+.btn-clear { 
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); 
+    color: white; 
+    border-radius: 15px; 
+    padding: 10px 20px; 
+    border: none; 
+    font-weight: 500; 
+    transition: all 0.3s ease; 
+    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3); 
+    cursor: pointer; 
+}
+.btn-clear:hover { 
+    transform: scale(1.05); 
+    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4); 
+}
+.file-upload { 
+    border: 2px dashed #667eea; 
+    border-radius: 15px; 
+    padding: 20px; 
+    text-align: center; 
+    background: rgba(255, 255, 255, 0.8); 
+    transition: all 0.3s ease; 
+    color: #333; 
+}
+.file-upload:hover { 
+    background: rgba(102, 126, 234, 0.1); 
+    border-color: #764ba2; 
+}
+.about-text { 
+    font-size: 14px; 
+    color: #555; 
+    line-height: 1.6; 
+    text-align: center; 
+}
+.radio { 
+    margin: 15px 0; 
+}
+.radio label { 
+    font-weight: 400; 
+    color: #333; 
+}
 """
 
-# 🎨 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")
+# 🎨 Gradio Interface with refined UI
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue"), css=custom_css) as iface:
+    gr.Markdown("# 🎓 **EduAI — Your Sleek Study Companion**", elem_classes="header-title")
 
     with gr.Row():
-        # Sidebar (refined for elegance)
-        with gr.Column(scale=1, min_width=280, elem_classes="sidebar"):
+        # Sidebar (sleek and modern)
+        with gr.Column(scale=1, min_width=300, elem_classes="sidebar"):
             gr.Markdown("### 🧭 **Main Menu**", elem_classes="menu-title")
 
             with gr.Accordion("📚 Subject Tutor", open=False):
@@ -182,7 +334,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="teal"), css=custom_css) as ifac
                 Helps learners understand **Science, ICT, English, and more** in a simple, friendly way! 💬
                 """, elem_classes="about-text")
 
-        # Main Chat Area (enhanced for modern look)
+        # Main Chat Area (visually appealing and modern)
         with gr.Column(scale=4, elem_classes="main-chat"):
             context_display = gr.Markdown(
                 "📘 **You are in General Mode.** Ask EduAI anything about your studies!",
@@ -191,16 +343,16 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="teal"), css=custom_css) as ifac
 
             chatbot = gr.Chatbot(
                 label="EduAI Chat",
-                height=550,
+                height=600,
                 render_markdown=True,
                 type="messages",
                 latex_delimiters=[{"left": "$$", "right": "$$", "display": True}, {"left": "\\[", "right": "\\]", "display": True}]
             )
 
             with gr.Row():
-                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")
+                msg = gr.Textbox(label="Ask EduAI:", placeholder="Type your study question here...", elem_classes="chat-input")
+                file_input = gr.File(label="📂 Upload a file", file_types=[".pdf", ".docx", ".png", ".jpg"], elem_classes="file-upload")
+                send = gr.Button("Send 🚀", elem_classes="btn-send")
 
     # Event Handlers
     subj.change(update_context, inputs=subj, outputs=context_display)