Update app.py

app.py

@@ -6,71 +6,90 @@ client = InferenceClient(
 )
 
 CSS = """
-    body {
-        background-color: black;
-        color: #FFFFFF; /* Default text color for the entire app */
+    body, .gradio-container {
+        background-color: #0F1117;
+        color: #FFFFFF;
     }
 
     .gradio-container {
-        background-color: black;
-        color: #FFFFFF; /* Ensure the entire container is black with white text */
+        max-width: 100% !important;
+        padding: 0 !important;
     }
 
     h1 {
-        color: #00FF00; /* Green header text */
+        color: #00FF00;
         text-align: center;
+        font-size: 2.5em;
+        margin-bottom: 20px;
     }
 
-    .gr-block, .gr-block > div, .gr-chatbox, .gr-box {
-        background-color: black !important; /* Ensure the background of all block elements is black */
-        color: #FFFFFF !important; /* White text for block elements */
+    .gr-block, .gr-box {
+        border-color: #2F3336 !important;
+    }
+
+    .gr-chatbot {
+        height: 450px;
+        overflow-y: auto;
+        border: 1px solid #2F3336;
+        border-radius: 8px;
+        background-color: #0F1117;
     }
 
     .gr-chat-message {
-        background-color: #1A1A1A; /* Dark background for chat messages */
-        color: #00FFFF !important; /* Cyan text for bot responses */
-        border-radius: 10px;
+        background-color: #1A1B26;
+        border: 1px solid #2F3336;
+        border-radius: 8px;
         padding: 10px;
+        margin-bottom: 10px;
     }
 
     .gr-chat-message.user {
-        color: #00FF00 !important; /* Green text for user messages */
+        background-color: #2F3336;
     }
 
     .gr-button {
-        background-color: #333333; /* Dark button background */
-        color: #FFFFFF; /* White button text */
-        border: 1px solid #FFFFFF; /* Button border */
+        background-color: #2F3336 !important;
+        color: #FFFFFF !important;
+        border: 1px solid #4F5356 !important;
     }
 
     .gr-button:hover {
-        background-color: #555555; /* Darker button on hover */
+        background-color: #3F4346 !important;
     }
 
-    input[type="text"], textarea, .gr-input, .gr-textbox {
-        background-color: #111111 !important; /* Ensure input fields are dark */
-        color: #00FF00 !important; /* Green input text */
-        border: 1px solid #FFFFFF;
+    input[type="text"], textarea {
+        background-color: #1A1B26 !important;
+        color: #FFFFFF !important;
+        border: 1px solid #2F3336 !important;
     }
 
-    .gr-slider {
-        background-color: #222222; /* Dark slider background */
+    .gr-form {
+        background-color: #0F1117 !important;
+        border: 1px solid #2F3336;
+        border-radius: 8px;
     }
 
-    .gr-slider .range-slider {
-        background-color: #00FF00 !important; /* Green slider track */
+    .gr-accordion {
+        border: 1px solid #2F3336 !important;
     }
 
-    .gr-slider .range-slider__thumb {
-        background-color: #00FFFF !important; /* Cyan slider thumb */
+    .gr-accordion-header {
+        background-color: #1A1B26 !important;
     }
 
-    .gr-examples {
-        color: #00FF00; /* Green text for examples */
+    .gr-accordion-body {
+        background-color: #0F1117 !important;
     }
-"""
 
+    .gr-examples {
+        border-top: 1px solid #2F3336 !important;
+        padding-top: 10px !important;
+    }
 
+    .gr-examples-text {
+        color: #AAAAAA !important;
+    }
+"""
 
 def format_prompt(message, history):
     prompt = "<s>"
@@ -107,7 +126,6 @@ def generate(
         yield output
     return output
 
-
 additional_inputs=[
     gr.Slider(
         label="Temperature",
@@ -147,8 +165,6 @@ additional_inputs=[
     )
 ]
 
-# Create a Chatbot object with the desired height
-
 chatbot = gr.Chatbot(height=450, label="Chatbot", container=True)
 
 with gr.Blocks(css=CSS) as demo:
@@ -159,7 +175,6 @@ with gr.Blocks(css=CSS) as demo:
         additional_inputs=additional_inputs,
         examples=[["Give me the code for Binary Search in C++"], 
                   ["Explain the chapter of The Grand Inquistor from The Brothers Karamazov."], 
-                  ["Explain Newton's second law."]],
+                  ["Explain Newton's second law of motion."]],
     )
-demo.queue().launch(debug=True)
-
+demo.queue().launch(debug=True)