Update app.py

app.py

@@ -6,6 +6,7 @@ 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'
@@ -88,35 +89,73 @@ def advanced_agi_chat(user_input):
 # ---- Gradio Interface ----
 def chat_interface(user_input):
     response = advanced_agi_chat(user_input)
-    return response
+    # Return both user input and assistant response for the chat display
+    return [(user_input, "user"), (response, "ai")]
 
 # ---- 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**")
     
-    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
+    # 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
     gr.HTML("""
         <style>
             .gradio-container { 
-                background-color: #B3D9FF; 
+                background-color: #F7F7F7; 
                 padding: 20px; 
-                border-radius: 15px; 
-                font-family: 'Comic Sans MS'; 
+                border-radius: 10px; 
+                font-family: 'Arial', sans-serif; 
+                height: 600px;
             }
-            .gradio-row { 
+            .gr-chatbot { 
+                background-color: white; 
+                border-radius: 10px; 
+                padding: 15px;
+                max-height: 400px;
+                overflow-y: auto;
                 display: flex;
-                justify-content: space-between;
+                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;
             }
         </style>
     """)
@@ -126,4 +165,3 @@ with gr.Blocks() as app:
 
 # Launch the Gradio app
 app.launch()
-