Update app.py

app.py

@@ -1,55 +1,34 @@
-import requests
 import gradio as gr
+import requests
 
 # Set up API URL
 url = "https://75739ca5-2942-4ef4-b25b-705dae6a0946.id.repl.co/connect_to_websocket"
 
-# Define function to send user input to API and get bot response
+# Define function to send message to API and get response
 def get_bot_response(user_input, user_id):
-    # Send user input to API
     response = requests.post(url, data={"inputmsg": user_input, "userid": user_id})
-    # Get bot's response
     bot_response = response.text
     return bot_response
 
-# Define Gradio interface
-def chat_interface(user_id):
+# Set up gradio interface
+def chatbot_interface(user_id):
     chat_history = []
-    chatbot = gr.Chatbot(get_bot_response)
-
-    # Define function to handle user input and bot response
-    def chat(input_text):
-        # Add user input to chat history
-        chat_history.append(("You", input_text))
-        # Get bot response and add to chat history
-        bot_response = chatbot.get_response(input_text, user_id=user_id)
-        chat_history.append(("Bot", bot_response))
-        # Format chat history as string
-        chat_history_str = "\n".join([f"{name}: {msg}" for name, msg in chat_history])
-        return chat_history_str
-
-    # Define interface components
-    user_id_input = gr.TextInput(label="User ID", default=user_id)
-    chat_input = gr.TextInput(label="Chat", placeholder="Type your message here")
-    chat_output = gr.Textbox(label="Chat history", placeholder="Conversation history will appear here", output_readonly=True)
-    submit_button = gr.Button(label="Send")
-
-    # Define function to clear chat history
-    def clear_chat():
-        nonlocal chat_history
-        chat_history = []
-        chat_output.update("")
+    chatbot_output = gr.outputs.Textbox()
+    chat_window = gr.outputs.Textbox(label="Chat History:", type="key_value", key_label="User", value_label="Bot")
 
-    clear_button = gr.Button(label="Clear chat", callback=clear_chat)
+    def update_chatbot_response(message):
+        bot_response = get_bot_response(message, user_id)
+        chat_history.append((message, bot_response))
+        chatbot_output.update(bot_response)
+        chat_window.update(chat_history)
 
-    # Define interface layout
-    inputs = [user_id_input, chat_input, submit_button, clear_button]
-    outputs = [chat_output]
-    interface = gr.Interface(fn=chat, inputs=inputs, outputs=outputs, title="Chatbot", theme="compact")
+    chat_input = gr.inputs.Textbox(label="Enter your message here:", placeholder="Type here...")
+    chat_panel = gr.Interface(update_chatbot_response, inputs=chat_input, outputs=[chatbot_output, chat_window], 
+                              title="Chatbot", theme="compact", layout="vertical", live=True)
 
-    return interface
+    return chat_panel
 
-# Launch interface
-gradio_user_id = "user123"
-interface = chat_interface(gradio_user_id)
-interface.launch()
+# Launch gradio interface
+if __name__ == '__main__':
+    gr.Interface(fn=chatbot_interface, inputs="text", outputs="text", 
+                 title="Chatbot", description="Enter your user ID to start the chat.").launch()