Update gradio_app.py

gradio_app.py

@@ -12,32 +12,33 @@ def respond(input_text):
 
 # Step 3: Create a Gradio interface
 # This interface will take text input from the user and display the chatbot's response
-# iface = gr.Interface(
-#     fn=respond,  # The function to call when the user submits input
-#     inputs="text",  # The type of input (text)
-#     outputs="text",  # The type of output (text)
-#     title="HugChat - Your AI Chatbot",  # The title of your chatbot
-#     description="Chat with an AI-powered bot based on a pre-trained model."  # A short description
-# )
+iface = gr.Interface(
+    fn=respond,  # The function to call when the user submits input
+    inputs="text",  # The type of input (text)
+    outputs="text",  # The type of output (text)
+    title="HugChat - Your AI Chatbot",  # The title of your chatbot
+    description="Chat with an AI-powered bot based on a pre-trained model."  # A short description
+)
 
+# Inject custom CSS
 iface.launch(inline=True, share=True, css="""
     body {
-        background-color: orange; /* Change the background color */
+        background-color: orange !important; /* Make sure this is applied */
         border:10px solid white;
     }
     .container {
-        max-width: 800px; /* Limit the width of the container */
+        max-width: 800px !important; /* Limit the width of the container */
         margin: auto;
         padding: 20px;
     }
-    .output_text {
-        color: black; /* Change the color of the output text */
-        font-size: 1.2em;
-    }
-    .input_text {
-        border: 2px solid #007bff; /* Custom border for the input */
+    .gr-input {
+        border: 2px solid #007bff !important; /* Use the correct class for Gradio input */
         border-radius: 4px;
     }
+    .gr-output {
+        color: black !important; /* Ensure this is not overridden */
+        font-size: 1.2em !important;
+    }
 """)
 
 # Step 4: Launch the interface