Update app.py

app.py

@@ -115,11 +115,7 @@ def clear_memory():
         os.remove(MEMORY_FILE)
     return [], "🧹 Chat memory cleared! Start fresh."
 
-# Toggle sidebar visibility
-def toggle_sidebar():
-    return gr.update(visible=True) if not gr.get_state("sidebar_visible") else gr.update(visible=False)
-
-# 🖌 Custom CSS for full-screen, immersive UI with overlay sidebar
+# 🖌 Custom CSS for light theme, full-screen, responsive, cyan buttons with animations
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 
@@ -127,8 +123,8 @@ body {
     font-family: 'Inter', sans-serif; 
     margin: 0; 
     padding: 0; 
-    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%); 
-    color: #e0e0e0; 
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); 
+    color: #334155; 
     height: 100vh; 
     overflow: hidden; 
 }
@@ -142,33 +138,37 @@ body {
     top: 0; 
     left: 0; 
     right: 0; 
-    background: rgba(15, 15, 15, 0.9); 
+    background: rgba(255, 255, 255, 0.95); 
     backdrop-filter: blur(10px); 
     padding: 15px 20px; 
     display: flex; 
     justify-content: space-between; 
     align-items: center; 
     z-index: 1000; 
-    border-bottom: 1px solid #333; 
+    border-bottom: 1px solid #e2e8f0; 
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
 }
 .header-title { 
     font-size: 24px; 
     font-weight: 600; 
-    color: #007BFF; 
-    text-shadow: 0 0 10px rgba(0, 123, 255, 0.5); 
+    color: #00BCD4; 
+    text-shadow: 0 0 10px rgba(0, 188, 212, 0.3); 
 }
 .toggle-btn { 
-    background: #007BFF; 
+    background: #00BCD4; 
     color: white; 
     border: none; 
     border-radius: 8px; 
     padding: 10px; 
     cursor: pointer; 
     font-size: 18px; 
-    transition: background 0.3s; 
+    transition: all 0.3s ease; 
+    box-shadow: 0 2px 6px rgba(0, 188, 212, 0.3); 
 }
 .toggle-btn:hover { 
-    background: #0056b3; 
+    background: #0097a7; 
+    transform: scale(1.1); 
+    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4); 
 }
 .sidebar { 
     position: fixed; 
@@ -176,12 +176,12 @@ body {
     left: 0; 
     width: 300px; 
     height: calc(100vh - 70px); 
-    background: rgba(26, 26, 26, 0.95); 
+    background: rgba(255, 255, 255, 0.95); 
     backdrop-filter: blur(15px); 
     padding: 20px; 
     border-radius: 0 12px 12px 0; 
-    box-shadow: 4px 0 12px rgba(0,0,0,0.5); 
-    border: 1px solid #333; 
+    box-shadow: 4px 0 12px rgba(0,0,0,0.1); 
+    border: 1px solid #e2e8f0; 
     border-left: none; 
     z-index: 999; 
     transform: translateX(-100%); 
@@ -194,25 +194,27 @@ body {
     font-size: 18px; 
     font-weight: 500; 
     margin-bottom: 15px; 
-    color: #007BFF; 
+    color: #00BCD4; 
 }
 .accordion { 
     border-radius: 10px; 
     margin-bottom: 10px; 
-    box-shadow: 0 2px 6px rgba(0,0,0,0.3); 
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
 }
 .accordion-header { 
-    background: #2a2a2a; 
-    color: #e0e0e0; 
+    background: #f1f5f9; 
+    color: #334155; 
     border-radius: 10px; 
     padding: 12px; 
     font-weight: 500; 
     cursor: pointer; 
-    transition: background 0.3s; 
+    transition: all 0.3s ease; 
 }
 .accordion-header:hover { 
-    background: #007BFF; 
-    color: #0f0f0f; 
+    background: #00BCD4; 
+    color: white; 
+    transform: translateY(-2px); 
+    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3); 
 }
 .main-chat { 
     position: fixed; 
@@ -227,21 +229,21 @@ body {
     z-index: 1; 
 }
 .context-box { 
-    background: rgba(26, 26, 26, 0.9); 
+    background: rgba(255, 255, 255, 0.9); 
     padding: 15px; 
     border-radius: 10px; 
-    box-shadow: 0 2px 6px rgba(0,0,0,0.3); 
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
     margin-bottom: 15px; 
-    border: 1px solid #333; 
-    color: #e0e0e0; 
+    border: 1px solid #e2e8f0; 
+    color: #334155; 
     font-size: 14px; 
 }
 .chatbox { 
     flex: 1; 
     border-radius: 10px; 
-    box-shadow: 0 2px 6px rgba(0,0,0,0.3); 
-    background: rgba(26, 26, 26, 0.9); 
-    border: 1px solid #333; 
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
+    background: rgba(255, 255, 255, 0.9); 
+    border: 1px solid #e2e8f0; 
     padding: 15px; 
     overflow-y: auto; 
 }
@@ -265,7 +267,7 @@ body {
     height: 40px; 
     border-radius: 50%; 
     margin: 0 10px; 
-    background: #007BFF; 
+    background: #00BCD4; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
@@ -274,7 +276,8 @@ body {
     font-size: 16px; 
 }
 .message.ai .avatar { 
-    background: #333; 
+    background: #e2e8f0; 
+    color: #334155; 
 }
 .message .bubble { 
     max-width: 70%; 
@@ -283,13 +286,13 @@ body {
     position: relative; 
 }
 .message.user .bubble { 
-    background: #007BFF; 
+    background: #00BCD4; 
     color: white; 
 }
 .message.ai .bubble { 
-    background: #2a2a2a; 
-    color: #e0e0e0; 
-    border: 1px solid #333; 
+    background: #f8fafc; 
+    color: #334155; 
+    border: 1px solid #e2e8f0; 
 }
 .timestamp { 
     font-size: 10px; 
@@ -300,7 +303,7 @@ body {
 .typing { 
     display: none; 
     font-style: italic; 
-    color: #aaa; 
+    color: #64748b; 
     padding: 10px; 
     animation: pulse 1.5s infinite; 
 }
@@ -315,43 +318,55 @@ body {
     width: 100%; 
     border-radius: 20px; 
     padding: 12px 16px; 
-    border: 1px solid #555; 
-    background: rgba(26, 26, 26, 0.9); 
-    color: #e0e0e0; 
-    transition: border-color 0.3s; 
+    border: 1px solid #cbd5e1; 
+    background: rgba(255, 255, 255, 0.9); 
+    color: #334155; 
+    transition: all 0.3s ease; 
     font-size: 14px; 
 }
 .chat-input:focus { 
-    border-color: #007BFF; 
+    border-color: #00BCD4; 
     outline: none; 
+    box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.2); 
 }
 .btn-clear { 
-    background: #f44336; 
+    background: #00BCD4; 
     color: white; 
     border-radius: 10px; 
     padding: 10px 15px; 
     border: none; 
     font-weight: 500; 
     cursor: pointer; 
-    transition: background 0.3s; 
+    transition: all 0.3s ease; 
+    box-shadow: 0 2px 6px rgba(0, 188, 212, 0.3); 
 }
 .btn-clear:hover { 
-    background: #d32f2f; 
+    background: #0097a7; 
+    transform: scale(1.05); 
+    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4); 
 }
 .about-text { 
     font-size: 14px; 
-    color: #aaa; 
+    color: #64748b; 
     line-height: 1.5; 
 }
 .radio { 
     margin: 10px 0; 
 }
 .radio label { 
-    color: #e0e0e0; 
+    color: #334155; 
+}
+@media (max-width: 768px) { 
+    .sidebar { 
+        width: 250px; 
+    } 
+    .header-title { 
+        font-size: 20px; 
+    } 
 }
 """
 
-# 🎨 Gradio Interface with full-screen, immersive layout
+# 🎨 Gradio Interface with light theme, full-screen, responsive, cyan buttons with animations
 with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as iface:
     with gr.Row(elem_classes="header"):
         gr.Markdown("# 🤖 **EduAI**", elem_classes="header-title")
@@ -411,9 +426,6 @@ with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as iface:
             msg = gr.Textbox(placeholder="Message EduAI...", elem_classes="chat-input", show_label=False)
 
     # Event Handlers
-    def toggle_sidebar_visibility():
-        return gr.update(visible=True) if sidebar.visible else gr.update(visible=False)
-
     toggle_btn.click(lambda: gr.update(visible=not sidebar.visible), outputs=sidebar)
 
     subj.change(update_context, inputs=subj, outputs=context_display)