update to gradio 2

app.py

@@ -1,10 +1,9 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-# Connect to Hugging Face model
+# Set up the InferenceClient for the chatbot
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
-# Define the chat response function
 def respond(
     message,
     history: list[tuple[str, str]],
@@ -33,19 +32,82 @@ def respond(
         top_p=top_p,
     ):
         token = message.choices[0].delta.content
+
         response += token
         yield response
 
-# Gradio interface layout
+# Define the interface with styling and customization
 demo = gr.ChatInterface(
     respond,
     additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
+        gr.Textbox(value="You are a friendly Chatbot.", label="System message", lines=1),
+        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)"),
     ],
-    css=".gradio-container {background-color: #ffeef8;} .gr-button {background-color: #ff88cc; color: white; border-radius: 12px;} .gr-input {border: 2px solid #ff66b2; border-radius: 10px;} .gr-output {border: 2px solid #ff66b2; border-radius: 10px; padding: 10px;} .gr-button:hover {background-color: #ff66b2;} .gr-textbox {background-color: #fff1f5;}",
-    theme="huggingface",  # Hugging Face's default theme
-    title="Cuddly Chatbot 🐾",  # Title for the app
-    description="Welcome to the most adorable chatbot! 💖",
+    css="""
+        /* Custom CSS to style the interface */
+        .gradio-container {
+            background-color: #222222; /* Dark background */
+            color: #f4f4f4; /* Light text */
+            font-family: 'Arial', sans-serif;
+            border-radius: 12px;
+            padding: 20px;
+        }
+
+        .gradio-button {
+            background-color: #ff4081; /* Pink buttons */
+            color: white;
+            border-radius: 10px;
+            font-size: 16px;
+            padding: 12px 24px;
+        }
+
+        .gradio-button:hover {
+            background-color: #e91e63; /* Darker pink on hover */
+        }
+
+        .gradio-textbox {
+            background-color: #333333; /* Dark background for textboxes */
+            border-radius: 12px;
+            color: #f4f4f4; /* Light text inside the textboxes */
+            padding: 12px;
+        }
+
+        .gradio-chat {
+            background-color: #333333;
+            border-radius: 12px;
+            padding: 16px;
+        }
+
+        .gradio-chat .gradio-message-user {
+            background-color: #ff4081; /* Pink background for user messages */
+            border-radius: 12px;
+            color: #f4f4f4;
+        }
+
+        .gradio-chat .gradio-message-assistant {
+            background-color: #555555; /* Darker background for assistant messages */
+            border-radius: 12px;
+            color: #f4f4f4;
+        }
+
+        .gradio-container h1 {
+            color: #ff4081; /* Title in pink */
+            font-size: 36px;
+            text-align: center;
+        }
+
+        .gradio-container .gradio-textbox input {
+            font-size: 16px;
+        }
+
+        .gradio-container p {
+            color: #bdbdbd; /* Light grey description text */
+            text-align: center;
+            font-size: 14px;
+        }
+    """
 )
 
 if __name__ == "__main__":