Update app.py

app.py

@@ -1,52 +1,55 @@
-import gradio as gr
 import requests
+import gradio as gr
 
-# Define API URL
+# Set up API URL
 url = "https://75739ca5-2942-4ef4-b25b-705dae6a0946.id.repl.co/connect_to_websocket"
 
-# Define user ID
-user_id = gr.inputs.Textbox(label="User ID")
-
-# Define input message textbox
-input_msg = gr.inputs.Textbox(label="You")
-
-# Define chat window
-chat_window = gr.outputs.HTML(html="")
-
-# Define function to send user input to API
-def send_input(inputmsg, userid):
-    response = requests.post(url, data={"inputmsg": inputmsg, "userid": userid})
-    return response.text
-
-# Define function to update chat window with new message
-def update_chat_window():
-    # Get user input and user ID
-    inputmsg = input_msg.value
-    userid = user_id.value
-    
-    # Send input message to API
-    bot_response = send_input(inputmsg, userid)
-    
-    # Update chat window with bot response
-    chat_window.html += f"<p><strong>You:</strong> {inputmsg}</p>"
-    chat_window.html += f"<p><strong>Bot:</strong> {bot_response}</p>"
-    
-    # Clear input message textbox
-    input_msg.update("")
+# Define function to send user input to API and get bot 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
-iface = gr.Interface(
-    fn=None, 
-    inputs=[user_id, input_msg], 
-    outputs=chat_window,
-    title="Chatbot",
-    live=True,
-    allow_flagging=False,
-    layout="vertical"
-)
-
-# Replace the default interface function with the update_chat_window function
-iface.interface_function = update_chat_window
-
-# Run the interface
-iface.launch()
+def chat_interface(user_id):
+    chat_history = []
+    chatbot = gr.Chatbot(get_bot_response, args=[user_id])
+
+    # 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)
+        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("")
+
+    clear_button = gr.Button(label="Clear chat", callback=clear_chat)
+
+    # 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")
+
+    return interface
+
+# Launch interface
+gradio_user_id = "user123"
+interface = chat_interface(gradio_user_id)
+interface.launch()