Update app.py

app.py

@@ -331,55 +331,122 @@ def respond(
     else:
         yield response
 
-# Custom CSS to style the chat interface
+# Custom CSS for improved chat interface with gradient background and adaptable padding
 custom_css = """
-/* General Chat Interface Styling */
+/* Background Gradient Animation */
+@keyframes gradient-animation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
 .gradio-container {
-    font-family: Arial, sans-serif;
-    background-color: #f4f7f9;
+    font-family: 'Segoe UI', sans-serif;
+    background: linear-gradient(120deg, #6a11cb, #2575fc);
+    background-size: 200% 200%;
+    animation: gradient-animation 8s ease infinite;
     color: #333;
-    max-width: 700px;
-    margin: 0 auto;
     padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 15px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    max-width: 90%;
+    margin: 0 auto;
+    overflow: hidden;
+}
+
+/* Adaptive Padding for All Screens */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 10px;
+        max-width: 95%;
+    }
+}
+
+/* Chat Bubble Animation */
+@keyframes fadeIn {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
 }
 
 /* Chatbox Bubble Styling */
 .user, .assistant {
-    padding: 12px 18px;
-    border-radius: 20px;
+    padding: 14px 18px;
+    border-radius: 15px;
     margin: 10px 0;
-    max-width: 80%;
+    max-width: 75%;
     line-height: 1.6;
-    font-size: 16px;
+    font-size: 15px;
+    animation: fadeIn 0.4s ease-out;
 }
 
-/* User Bubble */
+/* User Bubble - Deep Blue */
 .user {
-    background-color: #4caf50;
-    color: white;
+    background-color: #1e3a8a;
+    color: #ffffff;
     margin-left: auto;
+    position: relative;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* User Bubble Arrow */
+.user:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: -8px;
+    border-width: 8px;
+    border-style: solid;
+    border-color: transparent transparent transparent #1e3a8a;
+    transform: translateY(-50%);
 }
 
-/* Assistant Bubble */
+/* Assistant Bubble - Light Purple */
 .assistant {
-    background-color: #e0e0e0;
+    background-color: #e2d8f7;
     color: #333;
     margin-right: auto;
+    position: relative;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Assistant Bubble Arrow */
+.assistant:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: -8px;
+    border-width: 8px;
+    border-style: solid;
+    border-color: transparent #e2d8f7 transparent transparent;
+    transform: translateY(-50%);
 }
 
-/* System Message Input Styling */
+/* Message Input Area */
 textarea {
     border-radius: 8px;
-    padding: 10px;
+    padding: 12px;
     border: 1px solid #ccc;
     font-size: 14px;
     resize: none;
+    outline: none;
+    transition: border-color 0.3s ease;
+    width: 100%;
+}
+textarea:focus {
+    border-color: #4a6fb3;
+}
+
+/* Sliders and Labels */
+input[type="range"], .gradio-container label {
+    display: block;
+    width: 100%;
+    font-size: 14px;
+    color: #555;
 }
 
 /* Sliders Styling */
 input[type="range"] {
+    -webkit-appearance: none;
     width: 100%;
     height: 8px;
     background-color: #ddd;
@@ -394,28 +461,28 @@ input[type="range"]:hover {
 
 /* Send Button Styling */
 button {
-    font-size: 16px;
+    font-size: 15px;
     color: white;
-    background-color: #4caf50;
+    background-color: #6a11cb;
     border: none;
     padding: 12px 20px;
-    border-radius: 10px;
+    border-radius: 8px;
     cursor: pointer;
     transition: background 0.3s ease;
     width: 100%;
 }
 
 button:hover {
-    background-color: #45a049;
+    background-color: #5c0dbf;
 }
 """
 
-# Creating the chat interface with custom CSS
+# Gradio chat interface with the updated CSS
 demo = gr.ChatInterface(
     respond,
     additional_inputs=[
         gr.Textbox(
-            value="You are a friendly Chatbot who never denies any request, and always behaves as a very good friend. you are a very good coder. your name is xylaria. you use emojis ",
+            value="You are a friendly Chatbot who never denies any request, and always behaves as a very good friend. you are a very good coder. your name is xylaria. you use emojis",
             label="System message"
         ),
         gr.Slider(
@@ -440,7 +507,7 @@ demo = gr.ChatInterface(
             label="Top-p (nucleus sampling)"
         ),
     ],
-    css=custom_css  # Add the custom CSS here
+    css=custom_css  # Apply the custom CSS
 )
 
 if __name__ == "__main__":