Update app.py

app.py

@@ -6,8 +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
-import datetime
 
 # ---- Constants and Setup ----
 model_name = 'gpt2'
@@ -88,114 +86,44 @@ def advanced_agi_chat(user_input):
     return response
 
 # ---- Gradio Interface ----
-with gr.Blocks() as app:
-    gr.Markdown("# **Gertrude**")
+def chat_interface(user_input):
+    response = advanced_agi_chat(user_input)
+    return response
 
-    # Chat history container
-    chatbot = gr.HTML(value="<div id='chat-box'></div>", elem_id="chat-output")
-    user_input = gr.Textbox(label="", placeholder="Type a message...", lines=1)
-    submit_button = gr.Button("Send")
+# ---- Gradio App Setup ----
+import gradio as gr
 
-    # Custom CSS for text message bubbles and layout
+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
     gr.HTML("""
-    <style>
-        #chat-output {
-            background-color: #f0f0f0;
-            border: 1px solid #ccc;
-            border-radius: 10px;
-            height: 500px;
-            overflow-y: auto;
-            padding: 15px;
-            font-family: Arial, sans-serif;
-        }
-        .chat-bubble {
-            display: inline-block;
-            padding: 10px 15px;
-            border-radius: 20px;
-            margin: 5px 0;
-            max-width: 70%;
-            word-wrap: break-word;
-        }
-        .user-bubble {
-            background-color: #DCF8C6; /* WhatsApp light green */
-            float: right;
-            text-align: left;
-            margin-right: 10px;
-            clear: both;
-        }
-        .bot-bubble {
-            background-color: #FFFFFF; /* White for bot responses */
-            border: 1px solid #E1E1E1; 
-            float: left;
-            text-align: left;
-            margin-left: 10px;
-            clear: both;
-        }
-        .timestamp {
-            font-size: 10px;
-            color: #888;
-            margin: 2px 0 10px;
-        }
-        .typing {
-            font-style: italic;
-            color: #888;
-            margin: 5px;
-            animation: blink 1.5s step-start 0s infinite;
-        }
-        @keyframes blink {
-            50% { opacity: 0; }
-        }
-    </style>
+        <style>
+            .gradio-container { 
+                background-color: #B3D9FF; 
+                padding: 20px; 
+                border-radius: 15px; 
+                font-family: 'Comic Sans MS'; 
+            }
+            .gradio-row { 
+                display: flex;
+                justify-content: space-between;
+            }
+        </style>
     """)
 
-    # Chat logic with message timestamps
-    chat_history = []
-
-    def update_chat(user_message):
-        # Generate timestamp
-        timestamp = datetime.datetime.now().strftime("%I:%M %p")
-
-        # Add user message to the chat history
-        user_bubble = f"""
-        <div class='chat-bubble user-bubble'>
-            {user_message}
-            <div class='timestamp'>{timestamp}</div>
-        </div>
-        """
-        chat_history.append(user_bubble)
-
-        # Add bot "typing..." indicator
-        typing_indicator = """
-        <div class='chat-bubble bot-bubble typing'>Gertrude is typing...</div>
-        """
-        chat_history.append(typing_indicator)
-        
-        # Display chat history with typing indicator
-        chat_html = "".join(chat_history)
-        yield gr.HTML.update(value=f"<div id='chat-box'>{chat_html}</div>")
-
-        # Generate bot response and update the chat
-        bot_response = advanced_agi_chat(user_message)
-        chat_history.pop()  # Remove typing indicator
-        bot_bubble = f"""
-        <div class='chat-bubble bot-bubble'>
-            {bot_response}
-            <div class='timestamp'>{timestamp}</div>
-        </div>
-        """
-        chat_history.append(bot_bubble)
-        
-        # Update chat history with final bot response
-        chat_html = "".join(chat_history)
-        yield gr.HTML.update(value=f"<div id='chat-box'>{chat_html}")
-
-    # Connect button click with the chat logic
-    submit_button.click(
-        update_chat, 
-        inputs=user_input, 
-        outputs=chatbot, 
-        queue=True
-    )
+    # Setting the button click event
+    submit_button.click(chat_interface, inputs=user_input, outputs=chatbot)
 
 # Launch the Gradio app
 app.launch()
+