Update app.py

app.py

@@ -8,16 +8,33 @@ client = InferenceClient(
 CSS = """
     body {
         background-color: black;
-        color: #FFFFFF; /* Default text color */
+        color: #FFFFFF; /* Default text color for the entire app */
     }
 
     .gradio-container {
         background-color: black;
-        color: #FFFFFF; /* Default text color */
+        color: #FFFFFF; /* Ensure the entire container is black with white text */
     }
 
-    h1, h2, h3 {
+    h1 {
         color: #00FF00; /* Green header text */
+        text-align: center;
+    }
+
+    .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-chat-message {
+        background-color: #1A1A1A; /* Dark background for chat messages */
+        color: #00FFFF !important; /* Cyan text for bot responses */
+        border-radius: 10px;
+        padding: 10px;
+    }
+
+    .gr-chat-message.user {
+        color: #00FF00 !important; /* Green text for user messages */
     }
 
     .gr-button {
@@ -30,57 +47,31 @@ CSS = """
         background-color: #555555; /* Darker button on hover */
     }
 
-    .gr-input {
-        background-color: #111111; /* Input field dark background */
-        color: #00FF00; /* Input text color */
-    }
-
-    .gr-output {
-        background-color: #111111; /* Output field dark background */
-        color: #00FFFF; /* Output text color */
+    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;
     }
 
     .gr-slider {
-        background-color: #222222; /* Slider background */
+        background-color: #222222; /* Dark slider background */
     }
 
     .gr-slider .range-slider {
-        background-color: #00FF00; /* Slider active color */
+        background-color: #00FF00 !important; /* Green slider track */
     }
 
     .gr-slider .range-slider__thumb {
-        background-color: #00FFFF; /* Slider thumb color */
+        background-color: #00FFFF !important; /* Cyan slider thumb */
     }
 
     .gr-examples {
-        color: #00FF00; /* Examples text color */
-    }
-
-    .gr-chatbox {
-        background-color: black; /* Chatbox dark background */
-        color: #FFFFFF; /* Chatbox text color */
-    }
-
-    .gr-chat-message {
-        background-color: #222222; /* Chat message dark background */
-        border-radius: 10px; /* Chat message rounded corners */
-        padding: 10px;
-    }
-
-    .gr-chat-message.user {
-        color: #00FF00; /* User message text color */
-    }
-
-    .gr-chat-message.bot {
-        color: #00FFFF; /* Bot message text color */
-    }
-
-    .gr-block {
-        background-color: black;
+        color: #00FF00; /* Green text for examples */
     }
 """
 
 
+
 def format_prompt(message, history):
     prompt = "<s>"
     for user_prompt, bot_response in history:
@@ -157,17 +148,18 @@ additional_inputs=[
 ]
 
 # Create a Chatbot object with the desired height
-chatbot = gr.Chatbot(height=450,
-                     layout="bubble")
+
+chatbot = gr.Chatbot(height=450, label="Chatbot", container=True)
 
 with gr.Blocks(css=CSS) as demo:
-    gr.HTML("<h1><center>🤖 Mistral-7B-Chat 💬<h1><center>")
+    gr.HTML("<h1>🤖 Mistral-7B-Chat 💬</h1>")
     gr.ChatInterface(
         generate,
-        chatbot=chatbot,  # Use the created Chatbot object
+        chatbot=chatbot,
         additional_inputs=additional_inputs,
-        examples=[["Give me the code for Binary Search in C++"], ["Explain the chapter of The Grand Inquistor from The Brothers Karmazov."], ["Explain Newton's second law."]],
-
+        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."]],
     )
-
 demo.queue().launch(debug=True)
+