Update app.py

app.py

@@ -73,46 +73,47 @@ def show_updates_and_respond(history, system_message, max_tokens, temperature, t
         model_name=model_name,
     )
 
-# Define the Gradio interface with the Blocks context
+# Define the Gradio interface
 with gr.Blocks(css=".gradio-container {border: none;}") as demo:
     chat_history = gr.State([])  # Initialize an empty chat history state
-    chat_interface = gr.ChatInterface(
-        fn=respond,
-        additional_inputs=[
-            gr.Textbox(
-                value="You are a friendly and helpful assistant.",
-                label="System message",
-                lines=2
-            ),
-            gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-            gr.Slider(minimum=0.1, maximum=2.0, value=0.7, step=0.1, label="Temperature"),
-            gr.Slider(
-                minimum=0.1,
-                maximum=1.0,
-                value=0.95,
-                step=0.05,
-                label="Top-p (nucleus sampling)",
-            ),
-            gr.Dropdown(
-                choices=list(available_models.keys()),
-                value="Zephyr 7B Beta",
-                label="Select Model",
-            ),
-        ],
-        title="Multi-Model Chatbot",
-        description="A customizable chatbot interface using Hugging Face's Inference API.",
-        chat_history=chat_history,  # Pass the state to the ChatInterface
+    system_message = gr.Textbox(
+        value="You are a friendly and helpful assistant.",
+        label="System message",
+        lines=2
+    )
+    max_tokens_slider = gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens")
+    temperature_slider = gr.Slider(minimum=0.1, maximum=2.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)")
+    model_dropdown = gr.Dropdown(
+        choices=list(available_models.keys()),
+        value="Zephyr 7B Beta",
+        label="Select Model",
+    )
+
+    chatbot = gr.Chatbot()
+
+    def user_interaction(message, history, system_message, max_tokens, temperature, top_p, model_name):
+        history = history or []
+        history.append(("User", message))
+        bot_response = next(respond(message, history, system_message, max_tokens, temperature, top_p, model_name))
+        history.append(("Assistant", bot_response))
+        return history, history
+
+    message_input = gr.Textbox(label="Your message")
+
+    message_input.submit(
+        fn=user_interaction,
+        inputs=[message_input, chat_history, system_message, max_tokens_slider, temperature_slider, top_p_slider, model_dropdown],
+        outputs=[chatbot, chat_history],
     )
 
     # Add the "Show Updates" button and output area
-    with gr.Row():
-        updates_button = gr.Button("Show Latest Updates")
+    updates_button = gr.Button("Show Latest Updates")
 
-    # Define the button's click event (now inside the Blocks context)
     updates_button.click(
         fn=show_updates_and_respond,
-        inputs=[chat_history, chat_interface.textbox, gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"), gr.Slider(minimum=0.1, maximum=2.0, value=0.7, step=0.1, label="Temperature"), gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)"), chat_interface.dropdown], 
-        outputs=chat_history
+        inputs=[chat_history, system_message, max_tokens_slider, temperature_slider, top_p_slider, model_dropdown],
+        outputs=[chatbot],
     )
 
 # Launch the Gradio interface in full screen