Update app.py

app.py

@@ -113,16 +113,16 @@ def clear_memory():
         os.remove(MEMORY_FILE)
     return [], "🧹 Chat memory cleared! Start fresh."
 
-# 🖌 Enhanced Custom CSS for a sleek, modern, and visually appealing UI
+# 🖌 Custom CSS for dark theme and professional look (inspired by previous dark UI prototype)
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap');
 
 body { 
-    font-family: 'Poppins', sans-serif; 
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-    color: #ffffff; 
+    font-family: 'Roboto', sans-serif; 
     margin: 0; 
     padding: 0; 
+    background: #1e1e1e; 
+    color: #e0e0e0; 
     min-height: 100vh; 
 }
 .gradio-container { 
@@ -130,178 +130,150 @@ body {
     box-shadow: none; 
 }
 .header-title { 
-    font-size: 40px; 
+    font-size: 36px; 
     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; 
+    margin-bottom: 20px; 
+    font-weight: 600; 
+    color: #4CAF50; 
+    text-shadow: 0 0 10px rgba(76, 175, 80, 0.5); 
 }
 .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; 
+    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: 22px; 
-    font-weight: 600; 
-    margin-bottom: 20px; 
-    color: #333; 
-    text-align: center; 
+    font-size: 20px; 
+    font-weight: 500; 
+    margin-bottom: 15px; 
+    color: #4CAF50; 
 }
 .accordion { 
-    border-radius: 15px; 
-    margin-bottom: 15px; 
-    overflow: hidden; 
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
+    border-radius: 10px; 
+    margin-bottom: 10px; 
+    box-shadow: 0 2px 6px rgba(0,0,0,0.3); 
 }
 .accordion-header { 
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
-    color: white; 
-    border-radius: 15px; 
-    padding: 15px; 
+    background: #333; 
+    color: #e0e0e0; 
+    border-radius: 10px; 
+    padding: 12px; 
     font-weight: 500; 
     cursor: pointer; 
-    transition: all 0.3s ease; 
-    text-align: center; 
+    transition: background 0.3s; 
 }
 .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); 
+    background: #4CAF50; 
+    color: #1e1e1e; 
 }
 .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); 
+    padding: 20px; 
+    background: #1e1e1e; 
 }
 .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; 
+    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 { 
-    border-radius: 15px; 
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
-    background: #ffffff; 
-    padding: 10px; 
+    border-radius: 10px; 
+    box-shadow: 0 2px 6px rgba(0,0,0,0.3); 
+    background: #252525; 
+    border: 1px solid #333; 
 }
 .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; 
+    background: #4CAF50; 
+    color: #1e1e1e; 
+    border-radius: 12px; 
+    padding: 12px 15px; 
+    margin: 8px 0; 
+    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3); 
 }
 .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); } 
+    background: #333; 
+    color: #e0e0e0; 
+    border-radius: 12px; 
+    padding: 12px 15px; 
+    margin: 8px 0; 
+    box-shadow: 0 2px 6px rgba(0,0,0,0.3); 
 }
 .chat-input { 
-    border-radius: 25px; 
-    padding: 15px 20px; 
+    border-radius: 10px; 
+    padding: 12px; 
     width: 100%; 
-    border: 2px solid #ddd; 
-    transition: all 0.3s ease; 
-    font-size: 16px; 
-    background: #ffffff; 
+    border: 1px solid #555; 
+    background: #2a2a2a; 
+    color: #e0e0e0; 
+    transition: border-color 0.3s; 
 }
 .chat-input:focus { 
+    border-color: #4CAF50; 
     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; 
+    background: #4CAF50; 
+    color: #1e1e1e; 
+    border-radius: 10px; 
+    padding: 12px 20px; 
     border: none; 
-    font-weight: 600; 
-    transition: all 0.3s ease; 
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); 
+    font-weight: 500; 
     cursor: pointer; 
+    transition: background 0.3s; 
 }
 .btn-send:hover { 
-    transform: scale(1.05); 
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); 
+    background: #45a049; 
 }
 .btn-clear { 
-    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); 
+    background: #f44336; 
     color: white; 
-    border-radius: 15px; 
-    padding: 10px 20px; 
+    border-radius: 10px; 
+    padding: 10px 15px; 
     border: none; 
     font-weight: 500; 
-    transition: all 0.3s ease; 
-    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3); 
     cursor: pointer; 
+    transition: background 0.3s; 
 }
 .btn-clear:hover { 
-    transform: scale(1.05); 
-    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4); 
+    background: #d32f2f; 
 }
 .file-upload { 
-    border: 2px dashed #667eea; 
-    border-radius: 15px; 
-    padding: 20px; 
+    border: 2px dashed #4CAF50; 
+    border-radius: 10px; 
+    padding: 15px; 
     text-align: center; 
-    background: rgba(255, 255, 255, 0.8); 
-    transition: all 0.3s ease; 
-    color: #333; 
+    background: #2a2a2a; 
+    color: #e0e0e0; 
+    transition: border-color 0.3s; 
 }
 .file-upload:hover { 
-    background: rgba(102, 126, 234, 0.1); 
-    border-color: #764ba2; 
+    border-color: #45a049; 
 }
 .about-text { 
     font-size: 14px; 
-    color: #555; 
-    line-height: 1.6; 
-    text-align: center; 
+    color: #aaa; 
+    line-height: 1.5; 
 }
 .radio { 
-    margin: 15px 0; 
+    margin: 10px 0; 
 }
 .radio label { 
-    font-weight: 400; 
-    color: #333; 
+    color: #e0e0e0; 
 }
 """
 
-# 🎨 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")
+# 🎨 Gradio Interface with dark theme and professional styling
+with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as iface:  # Using Base theme for full custom control
+    gr.Markdown("# 🎓 **EduAI — Your Professional Study Companion**", elem_classes="header-title")
 
     with gr.Row():
-        # Sidebar (sleek and modern)
-        with gr.Column(scale=1, min_width=300, elem_classes="sidebar"):
+        # Sidebar
+        with gr.Column(scale=1, min_width=250, elem_classes="sidebar"):
             gr.Markdown("### 🧭 **Main Menu**", elem_classes="menu-title")
 
             with gr.Accordion("📚 Subject Tutor", open=False):
@@ -334,7 +306,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue"), 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 (visually appealing and modern)
+        # Main Chat Area
         with gr.Column(scale=4, elem_classes="main-chat"):
             context_display = gr.Markdown(
                 "📘 **You are in General Mode.** Ask EduAI anything about your studies!",
@@ -343,16 +315,16 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue"), css=custom_css) as ifac
 
             chatbot = gr.Chatbot(
                 label="EduAI Chat",
-                height=600,
+                height=500,
                 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="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")
+                msg = gr.Textbox(label="Ask EduAI:", placeholder="Type your question here...", 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")
 
     # Event Handlers
     subj.change(update_context, inputs=subj, outputs=context_display)