Update app.py

app.py

@@ -1,9 +1,6 @@
 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")
 
 
@@ -35,14 +32,78 @@ def respond(
         top_p=top_p,
     ):
         token = message.choices[0].delta.content
-
         response += token
         yield response
 
 
+# Custom CSS for 16k quality black and white transparent RGB colors
+css = """
+    .gradio-container {
+        background: rgba(0, 0, 0, 0.9);  /* Black background with transparency */
+        color: white;
+        font-family: Arial, sans-serif;
+    }
+    
+    .gradio-input, .gradio-output {
+        background: rgba(255, 255, 255, 0.1);  /* Transparent white background */
+        border: 2px solid rgba(255, 255, 255, 0.3);  /* Light white border */
+        border-radius: 10px;
+        color: white;
+    }
+
+    .gradio-input:focus, .gradio-output:focus {
+        border-color: rgba(255, 255, 255, 0.6);  /* Focus effect */
+    }
+    
+    .gradio-textbox {
+        color: rgb(255, 255, 255);  /* Text color */
+        background-color: rgba(0, 0, 0, 0.5);  /* Dark background for the textbox */
+    }
+    
+    .gradio-slider .slider {
+        background: rgba(255, 255, 255, 0.4);  /* Transparent slider background */
+        color: rgb(255, 255, 255);  /* Slider color */
+    }
+
+    .gradio-button {
+        background-color: rgb(0, 0, 0);  /* Black button */
+        color: rgb(255, 255, 255);  /* White text */
+        border-radius: 8px;
+    }
+
+    .gradio-button:hover {
+        background-color: rgb(80, 80, 80);  /* Darker on hover */
+    }
+
+    .gradio-interface {
+        border: 2px solid rgba(255, 255, 255, 0.3);  /* Light border */
+    }
+
+    .gradio-header {
+        color: rgb(255, 255, 255);  /* Header text color */
+        font-size: 24px;
+    }
+
+    .gradio-footer {
+        color: rgba(255, 255, 255, 0.5);  /* Footer text color */
+    }
+
+    /* Chatbox customization */
+    .chatbox .gradio-output {
+        padding: 10px;
+        border-radius: 15px;
+        background: rgba(0, 0, 0, 0.8);  /* Dark chat background */
+        color: rgba(255, 255, 255, 0.9);  /* Light text */
+    }
+
+    .chatbox .gradio-input {
+        padding: 10px;
+        border-radius: 15px;
+        background: rgba(255, 255, 255, 0.1);  /* Transparent input box */
+        color: rgba(255, 255, 255, 0.9);
+    }
 """
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
+
 demo = gr.ChatInterface(
     respond,
     additional_inputs=[
@@ -57,8 +118,8 @@ demo = gr.ChatInterface(
             label="Top-p (nucleus sampling)",
         ),
     ],
+    css=css  # Add custom CSS
 )
 
-
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()