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("Qwen/QwQ-32B")
 
 
@@ -40,93 +37,7 @@ def respond(
         yield response
 
 
-# Define custom CSS for Metro Design with a white background and red accents
-metro_design_css = """
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-.gradio-container {
-    background-color: #ffffff; /* White background */
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
-}
-
-.gradio-button {
-    background-color: #D32F2F; /* Metro red color */
-    color: white;
-    border: none;
-    border-radius: 5px;
-    padding: 12px 25px;
-    font-size: 16px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.gradio-button:hover {
-    background-color: #C62828; /* Darker red */
-}
-
-.gradio-slider {
-    background-color: #f1f1f1;
-    border-radius: 8px;
-    border: 1px solid #ddd;
-    padding: 10px;
-}
-
-.gradio-textbox {
-    background-color: #ffffff;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 10px;
-    font-size: 14px;
-    width: 100%;
-    transition: border-color 0.3s ease;
-}
-
-.gradio-textbox:focus {
-    border-color: #D32F2F; /* Red color */
-}
-
-.gradio-label {
-    font-size: 14px;
-    font-weight: bold;
-    color: #333;
-}
-
-.gradio-interface .gradio-input-container {
-    margin-bottom: 20px;
-}
-
-.gradio-chat {
-    background-color: #ffffff; /* White background for chat messages */
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 15px;
-}
-
-.gradio-chat .gradio-message {
-    background-color: #f1f1f1; /* Light gray for chat messages */
-    border-radius: 8px;
-    padding: 10px;
-    margin-bottom: 10px;
-}
-
-.gradio-chat .gradio-user-message {
-    background-color: #D32F2F; /* Red color for user messages */
-    color: white;
-}
-
-.gradio-chat .gradio-assistant-message {
-    background-color: #eeeeee; /* Lighter color for assistant's messages */
-}
-"""
-
-# Launch the Gradio app with custom CSS
+# Launch the Gradio app with the external CSS file
 demo = gr.ChatInterface(
     respond,
     additional_inputs=[
@@ -141,7 +52,7 @@ demo = gr.ChatInterface(
             label="Top-p (nucleus sampling)",
         ),
     ],
-    css=metro_design_css,  # Applying the custom CSS
+    css="styles.css",  # Reference to the external CSS file
 )