Update app.py

app.py

@@ -43,7 +43,7 @@ def save_memory(memory):
 
 memory = load_memory()
 
-# 💬 Chat function (removed file_input handling)
+# 💬 Chat function (unchanged)
 def chat_with_model(message, history, context):
     if not isinstance(history, list):
         history = []
@@ -115,7 +115,11 @@ def clear_memory():
         os.remove(MEMORY_FILE)
     return [], "🧹 Chat memory cleared! Start fresh."
 
-# 🖌 Custom CSS (unchanged, but input-row simplified)
+# 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 = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 
@@ -123,29 +127,68 @@ body {
     font-family: 'Inter', sans-serif; 
     margin: 0; 
     padding: 0; 
-    background: #0f0f0f; 
+    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%); 
     color: #e0e0e0; 
-    min-height: 100vh; 
+    height: 100vh; 
+    overflow: hidden; 
 }
 .gradio-container { 
     background: transparent; 
     box-shadow: none; 
+    height: 100vh; 
+}
+.header { 
+    position: fixed; 
+    top: 0; 
+    left: 0; 
+    right: 0; 
+    background: rgba(15, 15, 15, 0.9); 
+    backdrop-filter: blur(10px); 
+    padding: 15px 20px; 
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center; 
+    z-index: 1000; 
+    border-bottom: 1px solid #333; 
 }
 .header-title { 
-    font-size: 28px; 
-    text-align: center; 
-    margin-bottom: 20px; 
+    font-size: 24px; 
     font-weight: 600; 
     color: #007BFF; 
     text-shadow: 0 0 10px rgba(0, 123, 255, 0.5); 
 }
+.toggle-btn { 
+    background: #007BFF; 
+    color: white; 
+    border: none; 
+    border-radius: 8px; 
+    padding: 10px; 
+    cursor: pointer; 
+    font-size: 18px; 
+    transition: background 0.3s; 
+}
+.toggle-btn:hover { 
+    background: #0056b3; 
+}
 .sidebar { 
-    background: #1a1a1a; 
+    position: fixed; 
+    top: 70px; 
+    left: 0; 
+    width: 300px; 
+    height: calc(100vh - 70px); 
+    background: rgba(26, 26, 26, 0.95); 
+    backdrop-filter: blur(15px); 
     padding: 20px; 
-    border-radius: 12px; 
-    box-shadow: 0 4px 12px rgba(0,0,0,0.5); 
+    border-radius: 0 12px 12px 0; 
+    box-shadow: 4px 0 12px rgba(0,0,0,0.5); 
     border: 1px solid #333; 
-    width: 280px; 
+    border-left: none; 
+    z-index: 999; 
+    transform: translateX(-100%); 
+    transition: transform 0.3s ease; 
+}
+.sidebar.visible { 
+    transform: translateX(0); 
 }
 .menu-title { 
     font-size: 18px; 
@@ -172,14 +215,19 @@ body {
     color: #0f0f0f; 
 }
 .main-chat { 
+    position: fixed; 
+    top: 70px; 
+    left: 0; 
+    right: 0; 
+    bottom: 0; 
     padding: 20px; 
-    background: #0f0f0f; 
+    background: transparent; 
     display: flex; 
     flex-direction: column; 
-    height: calc(100vh - 100px); 
+    z-index: 1; 
 }
 .context-box { 
-    background: #1a1a1a; 
+    background: rgba(26, 26, 26, 0.9); 
     padding: 15px; 
     border-radius: 10px; 
     box-shadow: 0 2px 6px rgba(0,0,0,0.3); 
@@ -192,7 +240,7 @@ body {
     flex: 1; 
     border-radius: 10px; 
     box-shadow: 0 2px 6px rgba(0,0,0,0.3); 
-    background: #1a1a1a; 
+    background: rgba(26, 26, 26, 0.9); 
     border: 1px solid #333; 
     padding: 15px; 
     overflow-y: auto; 
@@ -268,7 +316,7 @@ body {
     border-radius: 20px; 
     padding: 12px 16px; 
     border: 1px solid #555; 
-    background: #1a1a1a; 
+    background: rgba(26, 26, 26, 0.9); 
     color: #e0e0e0; 
     transition: border-color 0.3s; 
     font-size: 14px; 
@@ -303,76 +351,77 @@ body {
 }
 """
 
-# 🎨 Gradio Interface without file uploader
+# 🎨 Gradio Interface with full-screen, immersive layout
 with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as iface:
-    gr.Markdown("# 🤖 **EduAI**", elem_classes="header-title")
-
-    with gr.Row():
-        with gr.Column(scale=1, elem_classes="sidebar"):
-            gr.Markdown("### 🧭 **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"
-                )
-
-            with gr.Accordion("🗓 Study Planner", open=False):
-                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"
-                )
-
-            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** in a simple, friendly way! 💬
-                """, elem_classes="about-text")
-
-        with gr.Column(scale=4, elem_classes="main-chat"):
-            context_display = gr.Markdown(
-                "📘 **You are in General Mode.** Ask EduAI anything about your studies!",
-                elem_classes="context-box"
+    with gr.Row(elem_classes="header"):
+        gr.Markdown("# 🤖 **EduAI**", elem_classes="header-title")
+        toggle_btn = gr.Button("☰", elem_classes="toggle-btn")
+
+    sidebar = gr.Column(scale=1, elem_classes="sidebar", visible=False)
+    with sidebar:
+        gr.Markdown("### 🧭 **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"
             )
 
-            chatbot = gr.Chatbot(
-                label="",
-                height=500,
-                render_markdown=True,
-                type="messages",
-                latex_delimiters=[{"left": "$$", "right": "$$", "display": True}, {"left": "\\[", "right": "\\]", "display": True}]
+        with gr.Accordion("🗓 Study Planner", open=False):
+            planner = gr.Radio(
+                ["View Plan 📅", "Add Task ✏️", "Study Tips 💡"],
+                label="Planner Options",
+                type="index"
             )
 
-            typing_indicator = gr.Markdown("", elem_classes="typing")
+        with gr.Accordion("🌐 Languages", open=False):
+            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** in a simple, friendly way! 💬
+            """, elem_classes="about-text")
+
+    with gr.Column(scale=4, elem_classes="main-chat"):
+        context_display = gr.Markdown(
+            "📘 **You are in General Mode.** Ask EduAI anything about your studies!",
+            elem_classes="context-box"
+        )
+
+        chatbot = gr.Chatbot(
+            label="",
+            height=500,
+            render_markdown=True,
+            type="messages",
+            latex_delimiters=[{"left": "$$", "right": "$$", "display": True}, {"left": "\\[", "right": "\\]", "display": True}]
+        )
+
+        typing_indicator = gr.Markdown("", elem_classes="typing")
 
-            with gr.Row(elem_classes="input-row"):
-                msg = gr.Textbox(placeholder="Message EduAI...", elem_classes="chat-input", show_label=False)
+        with gr.Row(elem_classes="input-row"):
+            msg = gr.Textbox(placeholder="Message EduAI...", elem_classes="chat-input", show_label=False)
 
-    # Event Handlers with typing indicator
-    def start_typing():
-        return "EduAI is typing..."
+    # Event Handlers
+    def toggle_sidebar_visibility():
+        return gr.update(visible=True) if sidebar.visible else gr.update(visible=False)
 
-    def stop_typing():
-        return ""
+    toggle_btn.click(lambda: gr.update(visible=not sidebar.visible), outputs=sidebar)
 
     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)
-    msg.submit(start_typing, outputs=typing_indicator).then(
+    msg.submit(lambda: "EduAI is typing...", outputs=typing_indicator).then(
         chat_with_model, inputs=[msg, chatbot, context_display], outputs=[chatbot, chatbot]
-    ).then(stop_typing, outputs=typing_indicator)
+    ).then(lambda: "", outputs=typing_indicator)
     clear_btn.click(clear_memory, outputs=[chatbot, context_display])
 
 iface.launch()