Update app.py

app.py

@@ -175,37 +175,153 @@ def ga_optimization(population, generations, mutation_rate):
 
     return population[0]  # Return the best individual
 
+# ---- Gradio App Setup ----
+import gradio as gr
+
 # ---- Gradio App Setup ----
 auth = ("Tej", "186281mps", "ACC", "HIPE")
 
 with gr.Blocks() as app:
+    # Header section
     gr.Markdown("# **Autistic Assistant vß Edition 2024 Ultra: Gertrude's Autistic Experience**")
     
+    # User input and response UI layout
+    with gr.Row():
+        with gr.Column(scale=1):
+            user_input = gr.Textbox(
+                label="What will you say to Gertrude?", 
+                placeholder="Type something here...",
+                lines=3,  # Multiline input box for more comfortable typing
+                elem_id="user_input_box"  # Custom ID for styling
+            )
+            submit_button = gr.Button("Send", elem_id="send_button")
+
+        with gr.Column(scale=1):
+            chatbot = gr.Textbox(
+                label="Gertrude's Response", 
+                interactive=False,
+                elem_id="chatbot_output",  # Custom ID for styling
+                lines=8  # Display more text for longer responses
+            )
+
+    # Buttons for "Pain" and "Pleasure" with cool animations
     with gr.Row():
         with gr.Column(scale=1):
-            user_input = gr.Textbox(label="What will you say to Gertrude?", placeholder="Type something here...")
-            submit_button = gr.Button("Send")
+            pain_button = gr.Button("Pain", elem_id="pain_button", variant="stop", size="lg")
         with gr.Column(scale=1):
-            chatbot = gr.Textbox(label="Gertrude's Response", interactive=False)  # This is now a Textbox for output
+            pleasure_button = gr.Button("Pleasure", elem_id="pleasure_button", variant="primary", size="lg")
 
-    # Adding custom styling for the UI
+    # Custom Styling for Buttons, Background, and Text
     gr.HTML("""
         <style>
+            /* Main Container Styling */
             .gradio-container { 
-                background-color: #B3D9FF; 
-                padding: 20px; 
-                border-radius: 15px; 
+                background-color: #F0F8FF; 
+                padding: 20px;
+                border-radius: 20px; 
                 font-family: 'Comic Sans MS'; 
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            }
+
+            /* Header Styling */
+            .gradio-markdown {
+                font-size: 28px;
+                font-weight: bold;
+                color: #3366CC;
+                text-align: center;
+                padding-bottom: 20px;
+            }
+
+            /* User Input Box Styling */
+            #user_input_box {
+                background-color: #E8F7FF;
+                border: 2px solid #A3C9F1;
+                border-radius: 10px;
+                padding: 10px;
+            }
+
+            /* Send Button Styling */
+            #send_button {
+                background-color: #4CAF50;
+                color: white;
+                font-size: 18px;
+                border-radius: 10px;
+                width: 100%;
+                padding: 15px;
+            }
+
+            /* Chatbot Output Styling */
+            #chatbot_output {
+                background-color: #FFFFFF;
+                border: 2px solid #A3C9F1;
+                border-radius: 10px;
+                padding: 10px;
+                font-size: 16px;
+                color: #333333;
+                overflow-y: scroll;
+            }
+
+            /* Pain and Pleasure Buttons Styling */
+            #pain_button {
+                background-color: #FF5733;
+                color: white;
+                width: 100%;
+                height: 50px;
+                font-size: 24px;
+                border-radius: 12px;
+                transition: transform 0.3s ease;
+            }
+
+            #pain_button:active {
+                transform: scale(0.95);
+            }
+
+            #pleasure_button {
+                background-color: #4CAF50;
+                color: white;
+                width: 100%;
+                height: 50px;
+                font-size: 24px;
+                border-radius: 12px;
+                transition: transform 0.3s ease;
             }
-            .gradio-row { 
-                display: flex;
-                justify-content: space-between;
+
+            #pleasure_button:active {
+                transform: scale(0.95);
+            }
+
+            /* Custom Animation for Button Clicks */
+            @keyframes pulse {
+                0% {
+                    transform: scale(1);
+                }
+                50% {
+                    transform: scale(1.1);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+
+            .animate__pulse {
+                animation: pulse 0.5s ease;
             }
         </style>
     """)
 
-    # Setting the button click event
+    # Interaction Logic
+    def chat_interface(user_input):
+        response = advanced_agi_chat(user_input)
+        return response
+
+    def simulate_button_click(button_type):
+        # Just simulate the click animation and do nothing else
+        return gr.update(interactive=True, elem_id="chatbot_output")
+
+    # Set the button click events with animations
     submit_button.click(chat_interface, inputs=user_input, outputs=chatbot)
+    pain_button.click(simulate_button_click, inputs="Pain", outputs=chatbot)
+    pleasure_button.click(simulate_button_click, inputs="Pleasure", outputs=chatbot)
 
 # Launch the Gradio app
 app.launch()