UPDATE

app.py

@@ -2,7 +2,7 @@ import gradio as gr
 from huggingface_hub import InferenceClient
 
 """
-For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
+For more information on huggingface_hub Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
 """
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
@@ -43,73 +43,22 @@ def respond(
 """
 For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
 """
-
-# Improved Gradio interface design with customized inputs and appearance
-demo = gr.Interface(
-    fn=respond,
-    inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message", placeholder="Enter your system message here...", lines=2, elem_id="system-message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens", elem_id="max-tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature", elem_id="temperature"),
-        gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)", elem_id="top-p"),
+demo = gr.ChatInterface(
+    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)",
+        ),
     ],
-    outputs=gr.Chatbot(),
-    layout="vertical",
-    title="Zephyr Chatbot",
-    description="A friendly AI-powered chatbot powered by HuggingFace's Zephyr-7B.",
-    theme="huggingface",
 )
 
-# Adding custom CSS for style improvements
-demo.launch(
-    server_name="0.0.0.0",
-    server_port=7860,
-    inline=False,
-    css="""
-    .gradio-container {
-        font-family: 'Arial', sans-serif;
-        background-color: #f5f5f5;
-        padding: 20px;
-    }
-
-    #system-message {
-        background-color: #e0f7fa;
-        border-radius: 8px;
-        border: 1px solid #00796b;
-    }
-
-    .gradio-slider {
-        margin-bottom: 10px;
-    }
-
-    .gradio-button {
-        background-color: #00796b;
-        color: white;
-        font-weight: bold;
-        border-radius: 5px;
-        transition: background-color 0.3s ease;
-    }
 
-    .gradio-button:hover {
-        background-color: #004d40;
-    }
-
-    .gradio-chat-message {
-        font-size: 16px;
-        border-radius: 5px;
-        background-color: #ffffff;
-        padding: 10px;
-        margin-bottom: 5px;
-    }
-
-    .gradio-chat-message-user {
-        background-color: #00796b;
-        color: white;
-    }
-
-    .gradio-chat-message-assistant {
-        background-color: #e0f7fa;
-        color: black;
-    }
-    """
-)
+if __name__ == "__main__":
+    demo.launch()