Update app.py

app.py

@@ -6,7 +6,6 @@ import pickle
 import numpy as np
 import torch.nn.functional as F
 from accelerate import init_empty_weights, infer_auto_device_map, load_checkpoint_and_dispatch
-import gradio as gr
 
 # ---- Constants and Setup ----
 model_name = 'gpt2'
@@ -89,73 +88,35 @@ def advanced_agi_chat(user_input):
 # ---- Gradio Interface ----
 def chat_interface(user_input):
     response = advanced_agi_chat(user_input)
-    # Return both user input and assistant response for the chat display
-    return [(user_input, "user"), (response, "ai")]
+    return response
 
 # ---- Gradio App Setup ----
+import gradio as gr
+
 auth = ("Tej", "186281mps", "ACC", "HIPE")
 
 with gr.Blocks() as app:
     gr.Markdown("# **Autistic Assistant vß Edition 2024 Ultra: Gertrude's Autistic Experience**")
     
-    # Define the chat layout with a chatbot component
-    chatbot = gr.Chatbot()  # Use Chatbot instead of Textbox for message display
-    user_input = gr.Textbox(label="What will you say to Gertrude?", placeholder="Type something here...")
-    submit_button = gr.Button("Send")
-
-    # Custom styling for iPhone-like text message look
+    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")
+        with gr.Column(scale=1):
+            chatbot = gr.Textbox(label="Gertrude's Response", interactive=False)  # This is now a Textbox for output
+
+    # Adding custom styling for the UI
     gr.HTML("""
         <style>
             .gradio-container { 
-                background-color: #F7F7F7; 
+                background-color: #B3D9FF; 
                 padding: 20px; 
-                border-radius: 10px; 
-                font-family: 'Arial', sans-serif; 
-                height: 600px;
+                border-radius: 15px; 
+                font-family: 'Comic Sans MS'; 
             }
-            .gr-chatbot { 
-                background-color: white; 
-                border-radius: 10px; 
-                padding: 15px;
-                max-height: 400px;
-                overflow-y: auto;
+            .gradio-row { 
                 display: flex;
-                flex-direction: column;
-                gap: 15px;
-            }
-            .gr-chatbot .message {
-                border-radius: 20px;
-                padding: 12px;
-                max-width: 75%;
-                word-wrap: break-word;
-                font-size: 16px;
-                line-height: 1.4;
-            }
-            .gr-chatbot .message.user {
-                background-color: #007AFF; /* iPhone blue */
-                color: white;
-                align-self: flex-start;
-                margin-left: 15px;
-                border-top-right-radius: 0px; /* Make top right corner flat */
-                font-weight: 500;
-            }
-            .gr-chatbot .message.ai {
-                background-color: #F0F0F5; /* Light gray for assistant */
-                align-self: flex-end;
-                margin-right: 15px;
-                border-top-left-radius: 0px; /* Make top left corner flat */
-                font-weight: 400;
-            }
-            /* Scroll styling */
-            .gr-chatbot::-webkit-scrollbar {
-                width: 8px;
-            }
-            .gr-chatbot::-webkit-scrollbar-thumb {
-                background-color: #888;
-                border-radius: 10px;
-            }
-            .gr-chatbot::-webkit-scrollbar-thumb:hover {
-                background-color: #555;
+                justify-content: space-between;
             }
         </style>
     """)
@@ -165,3 +126,4 @@ with gr.Blocks() as app:
 
 # Launch the Gradio app
 app.launch()
+