Update app.py

app.py

@@ -2,135 +2,124 @@ import gradio as gr
 import time
 
 # ========================================
-# 💬 Your AI function (replace with your logic)
+# 💬 AI Response Function (Replace this with your real AI)
 # ========================================
 def ai_response(message, history):
-    # Here you can call your real AI model or API (e.g., DeepSeek or Hugging Face)
-    time.sleep(1)  # simulate a delay
-    return "🤖 AI: I received — " + message
+    # Example: Simulate AI typing delay
+    time.sleep(0.8)
+    # You can connect this to any API (e.g., DeepSeek, Hugging Face, OpenAI)
+    return f"🤖 AI: I understood your question — '{message}'. Let’s explore that together!"
+
+# ========================================
+# ⚙️ Chat Logic
+# ========================================
+def respond(message, history):
+    history = history or []
+    bot_message = ai_response(message, history)
+    history.append((message, bot_message))
+    return "", history
 
 
 # ========================================
-# 🌙 Dark Themed Gradio Interface
+# 🎨 Gradio Interface
 # ========================================
-with gr.Blocks(theme=gr.themes.Base()) as demo:
-    gr.HTML("""
-    <style>
-        body {
-            background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
-            color: #f0f0f0;
-            margin: 0;
-            font-family: 'Roboto', sans-serif;
-            height: 100vh;
-            overflow: hidden;
-        }
-        .container {
-            display: flex;
-            height: 100vh;
-        }
-        .sidebar {
-            width: 260px;
-            background-color: #2a2a2a;
-            border-right: 2px solid #444;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            box-shadow: inset -5px 0 10px rgba(0,0,0,0.5);
-        }
-        .sidebar h2 {
-            color: #03dac6;
-            font-weight: 400;
-            text-align: center;
-            margin-bottom: 25px;
-        }
-        .sidebar button {
-            background-color: transparent;
-            border: none;
-            color: #f0f0f0;
-            text-align: left;
-            padding: 12px;
-            margin-bottom: 8px;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: 0.3s;
-            font-size: 15px;
-        }
-        .sidebar button:hover {
-            background-color: #444;
-            transform: translateX(4px);
-        }
-        .main {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            background-color: transparent;
-        }
-        .chatbox {
-            flex: 1;
-            background-color: transparent;
-            padding: 20px;
-            overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-        }
-        .input-area {
-            background-color: #2a2a2a;
-            padding: 20px;
-            border-top: 2px solid #444;
-            display: flex;
-            align-items: center;
-        }
-        input[type='text'] {
-            flex: 1;
-            background-color: #444;
-            color: #f0f0f0;
-            border: none;
-            border-radius: 25px;
-            padding: 12px 20px;
-            font-size: 15px;
-            outline: none;
-        }
-        button.send-btn {
-            margin-left: 10px;
-            background: linear-gradient(135deg, #03dac6 0%, #00bfa5 100%);
-            border: none;
-            color: #0d0d0d;
-            font-weight: bold;
-            border-radius: 25px;
-            padding: 12px 20px;
-            cursor: pointer;
-            transition: 0.3s;
-        }
-        button.send-btn:hover {
-            transform: scale(1.05);
-            box-shadow: 0 0 10px rgba(3, 218, 198, 0.5);
-        }
-    </style>
-    """)
+with gr.Blocks(css="""
+body {
+    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
+    color: #f0f0f0;
+    font-family: 'Roboto', sans-serif;
+}
+#chatbot {
+    background-color: transparent !important;
+    border: none !important;
+}
+.send-btn {
+    background: linear-gradient(135deg, #03dac6 0%, #00bfa5 100%) !important;
+    color: #0d0d0d !important;
+    border: none !important;
+    font-weight: bold;
+    border-radius: 25px !important;
+    padding: 10px 20px !important;
+    transition: 0.3s;
+}
+.send-btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 12px rgba(3, 218, 198, 0.6);
+}
+.sidebar {
+    background-color: #2a2a2a;
+    padding: 25px;
+    border-right: 2px solid #444;
+    box-shadow: inset -5px 0 10px rgba(0,0,0,0.4);
+    height: 100vh;
+}
+.sidebar h2 {
+    color: #03dac6;
+    text-align: center;
+    font-weight: 400;
+    margin-bottom: 25px;
+}
+.sidebar-btn {
+    display: block;
+    width: 100%;
+    background: transparent;
+    color: #f0f0f0;
+    border: none;
+    text-align: left;
+    padding: 12px 15px;
+    border-radius: 8px;
+    font-size: 15px;
+    margin-bottom: 5px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+.sidebar-btn:hover {
+    background-color: #444;
+    transform: translateX(5px);
+}
+.footer {
+    font-size: 12px;
+    text-align: center;
+    margin-top: auto;
+    color: #aaa;
+}
+""") as demo:
 
-    # Sidebar
-    with gr.Row(elem_classes="container"):
-        with gr.Column(elem_classes="sidebar"):
-            gr.HTML("<h2>AI Agent</h2>")
-            study_tutor = gr.Button("📘 Study Tutor")
-            study_planner = gr.Button("🗓️ Study Planner")
-            study_advisor = gr.Button("🧠 Study Advisor")
-            gr.Markdown("---")
-            gr.Markdown("✨ <small>By Cherry</small>")
+    # ========== Layout ==========
+    with gr.Row():
+        # Sidebar Section
+        with gr.Column(scale=1, elem_classes="sidebar"):
+            gr.HTML("<h2>AI Study Agent</h2>")
+            tutor_btn = gr.Button("📘 Study Tutor", elem_classes="sidebar-btn")
+            planner_btn = gr.Button("🗓️ Study Planner", elem_classes="sidebar-btn")
+            advisor_btn = gr.Button("🧠 Study Advisor", elem_classes="sidebar-btn")
+            gr.Markdown("<hr>")
+            gr.Markdown("✨ <small>Designed by Cherry</small>", elem_classes="footer")
 
         # Main Chat Section
-        with gr.Column(elem_classes="main"):
-            chatbot = gr.Chatbot(height=500, show_label=False, elem_classes="chatbox")
-            msg = gr.Textbox(placeholder="Type your query here...", show_label=False)
-            send = gr.Button("Send", elem_classes="send-btn")
-
-            def respond(message, history):
-                history = history or []
-                reply = ai_response(message, history)
-                history.append((message, reply))
-                return "", history
+        with gr.Column(scale=4):
+            chatbot = gr.Chatbot(label="", elem_id="chatbot", height=550)
+            with gr.Row():
+                msg = gr.Textbox(placeholder="Type your question here...", show_label=False, scale=5)
+                send = gr.Button("Send", elem_classes="send-btn", scale=1)
 
+            # Chat connections
             msg.submit(respond, [msg, chatbot], [msg, chatbot])
             send.click(respond, [msg, chatbot], [msg, chatbot])
 
+            # Sidebar button responses
+            def sidebar_action(choice, history):
+                response = f"✨ You selected **{choice}** — How can I assist with that?"
+                history = history or []
+                history.append((f"{choice}", response))
+                return history
+
+            tutor_btn.click(sidebar_action, ["Study Tutor", chatbot], chatbot)
+            planner_btn.click(sidebar_action, ["Study Planner", chatbot], chatbot)
+            advisor_btn.click(sidebar_action, ["Study Advisor", chatbot], chatbot)
+
+
+# ========================================
+# 🚀 Launch App
+# ========================================
 demo.launch()