Update app.py

app.py

@@ -1,12 +1,8 @@
 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
-"""
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 
-
 def respond(
     message,
     history: list[tuple[str, str]],
@@ -39,12 +35,42 @@ def respond(
         response += token
         yield response
 
+# Define custom CSS
+custom_css = """
+/* Add your custom CSS styles here */
+body {
+    font-family: Arial, sans-serif;
+    background-color: black;
+}
+.gradio-container {
+    border: 10px solid #4CAF50;
+    border-radius: 10px;
+    padding: 20px;
+    background-color: #ffffff;
+}
+.gradio-input {
+    border-radius: 5px;
+    border: 1px solid #ddd;
+    padding: 10px;
+}
+.gradio-button {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+}
+.gradio-output {
+    border: 1px solid #ddd;
+    padding: 10px;
+    border-radius: 5px;
+}
 """
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
+
+# Create a Gradio interface with custom CSS
+demo = gr.Interface(
+    fn=respond,
+    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"),
@@ -56,8 +82,8 @@ demo = gr.ChatInterface(
             label="Top-p (nucleus sampling)",
         ),
     ],
+    css=custom_css
 )
 
-
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()