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,25 +35,62 @@ def respond(
         response += token
         yield response
 
+css = """
+/* Customize the background color and text color */
+body {
+    background-color: #f0f0f0;
+    color: #333333;
+}
+
+/* Customize the chat window */
+.gradio-chatbox {
+    border: 1px solid #dddddd;
+    background-color: #ffffff;
+    border-radius: 10px;
+}
+
+/* Customize the user input and response */
+.gradio-chat-message-user {
+    background-color: #e1f5fe;
+    color: #01579b;
+}
+
+.gradio-chat-message-assistant {
+    background-color: #fff3e0;
+    color: #ef6c00;
+}
+
+/* Customize the sliders and text boxes */
+.gradio-input {
+    background-color: #ffffff;
+    border: 1px solid #dddddd;
+    border-radius: 5px;
+    padding: 5px;
+    color: #333333;
+}
+
+.gradio-slider {
+    color: #01579b;
+}
 """
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
-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)",
-        ),
-    ],
-)
 
+with gr.Blocks(css=css) as demo:
+    chat_interface = 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)",
+            ),
+        ],
+        theme="default",
+    )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()