Update app.py

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 import os
 from huggingface_hub import InferenceClient
+import time
 
 hf_token = os.getenv("hf_token")
 
@@ -24,11 +25,20 @@ def get_response(user_input):
     response = ""
     for chunk in stream:
         response += chunk.choices[0].delta.content
-    return response
+        yield response  # Yielding progressively as the model generates output
+        time.sleep(0.05)  # Optional: Adjust speed of the stream (in seconds)
 
 def chat_interface():
     with gr.Blocks() as demo:
         with gr.Row():
+            with gr.Column(scale=1):
+                chat_output = gr.Chatbot(
+                    elem_id="chat-box",
+                    label="Xylaria 1.4 Senoa Chatbot",
+                    show_label=False
+                )
+
+        with gr.Row(elem_id="input-row", scale=0.2):
             with gr.Column(scale=0.8):
                 input_textbox = gr.Textbox(
                     label="Type your message", 
@@ -42,20 +52,38 @@ def chat_interface():
             with gr.Column(scale=0.2):
                 send_button = gr.Button("Send", elem_id="send-btn")
 
-        chat_output = gr.Chatbot(
-            elem_id="chat-box",
-            label="Xylaria 1.4 Senoa Chatbot",
-            show_label=False
-        )
-        
         def submit_input(user_input, chat_history):
-            response = get_response(user_input)
-            chat_history.append((user_input, response))
-            return "", chat_history
+            chat_history.append((user_input, ""))
+            return "", chat_history  # Clear input field
 
         input_textbox.submit(submit_input, [input_textbox, chat_output], [input_textbox, chat_output])
         send_button.click(submit_input, [input_textbox, chat_output], [input_textbox, chat_output])
-        
+
+        def handle_response(user_input, chat_history):
+            chat_history[-1] = (user_input, "")  # Update the last chat with user input
+            response_stream = get_response(user_input)
+            for partial_response in response_stream:
+                chat_history[-1] = (user_input, partial_response)
+                yield "", chat_history  # Return the updated chat history progressively
+
+        input_textbox.submit(handle_response, [input_textbox, chat_output], [input_textbox, chat_output])
+        send_button.click(handle_response, [input_textbox, chat_output], [input_textbox, chat_output])
+
+    demo.css = """
+    #input-row {
+        position: absolute;
+        bottom: 10px;
+        width: 100%;
+        padding: 10px;
+        background-color: #f5f5f5;
+        border-top: 1px solid #ddd;
+    }
+    #chat-box {
+        height: calc(100vh - 100px); /* Adjust the height of chat history */
+        overflow-y: scroll;
+    }
+    """
+
     return demo
 
 demo = chat_interface()