Update app.py

app.py

@@ -58,28 +58,25 @@ def respond(
     except Exception as e:
         yield f"An error occurred: {str(e)}"
 
-# Define the UI layout with a more user-friendly design
-with gr.Blocks() as demo:
-    gr.Markdown("# 🧠 AI Chatbot Interface")
-    gr.Markdown("### Customize your AI Chatbot's behavior and responses.")
-    
-    with gr.Row():
-        chatbot = gr.Chatbot()
-        with gr.Column():
-            system_message = gr.Textbox(value="You are a friendly Chatbot.", label="System message", lines=2)
-            max_tokens = gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens")
-            temperature = gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature")
-            top_p = gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)")
-    
-    with gr.Row():
-        message = gr.Textbox(label="Your message:", lines=1)
-        submit_btn = gr.Button("Send")
-    
-    # Update the chatbot with the new message and response
-    submit_btn.click(respond, 
-                     inputs=[message, chatbot, system_message, max_tokens, temperature, top_p], 
-                     outputs=[chatbot],
-                     show_progress=True)
+
+# Define the ChatInterface with additional input components for user customization
+demo = gr.ChatInterface(
+    fn=respond,
+    additional_inputs=[
+        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
+        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
+        gr.Slider(minimum=0.1, maximum=4.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)",
+        ),
+    ],
+    title="Chatbot Interface",
+    description="A customizable chatbot interface using Hugging Face's Inference API.",
+)
 
 # Launch the Gradio interface
 if __name__ == "__main__":