Update app.py

app.py

@@ -9,21 +9,23 @@ model_list = {
 }
 
 def respond(message, history, system_message, max_tokens, temperature, top_p, selected_model):
-    # Look up the model ID from our list based on the dropdown selection
-    model_id = model_list.get(selected_model, "HuggingFaceH4/zephyr-7b-beta")
-    # Create an InferenceClient for the selected model
-    client = InferenceClient(model_id)
+    # Ensure history is a list
+    history = history or []
     
-    # Build the conversation history into the message list
+    # Build conversation messages for the client
     messages = [{"role": "system", "content": system_message}]
-    for user_msg, assistant_msg in history or []:
-        if user_msg:
-            messages.append({"role": "user", "content": user_msg})
-        if assistant_msg:
-            messages.append({"role": "assistant", "content": assistant_msg})
+    for user_msg, assistant_msg in history:
+        messages.append({"role": "user", "content": user_msg})
+        messages.append({"role": "assistant", "content": assistant_msg})
     messages.append({"role": "user", "content": message})
     
+    # Append new user message to history with an empty assistant response
+    history = history + [(message, "")]
     response = ""
+    
+    # Create an InferenceClient for the selected model
+    client = InferenceClient(model_list.get(selected_model, "HuggingFaceH4/zephyr-7b-beta"))
+    
     # Stream the response from the client
     for token_message in client.chat_completion(
         messages,
@@ -34,9 +36,12 @@ def respond(message, history, system_message, max_tokens, temperature, top_p, se
     ):
         token = token_message.choices[0].delta.content
         response += token
-        yield response
+        # Update the assistant's message in the history
+        history[-1] = (message, response)
+        # Yield two outputs: clear the input and update the chat history
+        yield "", history
 
-# CSS styling: pastel backgrounds, gentle light colors, and rounded corners for a safe vibe
+# Custom CSS for pastel colors, gentle backgrounds, and rounded corners
 css = """
 body { background-color: #FAF3E0; }
 .gradio-container { background-color: #FFFFFF; border-radius: 16px; padding: 20px; }
@@ -57,7 +62,7 @@ with gr.Blocks(css=css) as demo:
         # Main area: Chat interface and settings
         with gr.Column(scale=3):
             gr.Markdown("## Chat Interface")
-            chatbot = gr.Chatbot(label="Chat with your Model")
+            chatbot = gr.Chatbot(label="Chat with your Model", type="messages")
             user_input = gr.Textbox(placeholder="Enter your message...", label="Your Message")
             with gr.Row():
                 send_button = gr.Button("Send")
@@ -68,14 +73,14 @@ with gr.Blocks(css=css) as demo:
             temperature_slider = gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature")
             top_p_slider = gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)")
     
-    # When "Send" is clicked, run the respond() function and update the chat interface.
+    # Wire the Send button to call the respond() function and update outputs
     send_button.click(
         fn=respond,
         inputs=[user_input, chatbot, system_message, max_tokens_slider, temperature_slider, top_p_slider, model_dropdown],
         outputs=[user_input, chatbot],
     )
     
-    # Clear the chat history when "Clear Chat" is clicked.
+    # Clear the chat history when Clear Chat is clicked
     clear_button.click(lambda: None, None, chatbot, queue=False)
 
 if __name__ == "__main__":