Update app.py

app.py

@@ -331,8 +331,11 @@ def respond(
     else:
         yield response
 
-# Custom CSS for improved chat interface with gradient background and adaptable padding
+# Custom CSS for a sleeker, more modern chat interface
 custom_css = """
+/* Import Inter font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
 /* Background Gradient Animation */
 @keyframes gradient-animation {
     0% { background-position: 0% 50%; }
@@ -341,14 +344,13 @@ custom_css = """
 }
 
 .gradio-container {
-    font-family: 'Segoe UI', sans-serif;
+    font-family: 'Inter', sans-serif;
     background: linear-gradient(120deg, #6a11cb, #2575fc);
     background-size: 200% 200%;
-    animation: gradient-animation 8s ease infinite;
+    animation: gradient-animation 12s ease infinite;
     color: #333;
-    padding: 20px;
-    border-radius: 15px;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    border-radius: 10px;
     max-width: 90%;
     margin: 0 auto;
     overflow: hidden;
@@ -362,74 +364,42 @@ custom_css = """
     }
 }
 
-/* Chat Bubble Animation */
-@keyframes fadeIn {
-    0% { opacity: 0; transform: translateY(20px); }
-    100% { opacity: 1; transform: translateY(0); }
-}
-
-/* Chatbox Bubble Styling */
+/* Chat Bubble Styling */
 .user, .assistant {
-    padding: 14px 18px;
-    border-radius: 15px;
-    margin: 10px 0;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin: 8px 0;
     max-width: 75%;
-    line-height: 1.6;
+    line-height: 1.5;
     font-size: 15px;
-    animation: fadeIn 0.4s ease-out;
 }
 
-/* User Bubble - Deep Blue */
+/* User Bubble - Sleek Dark Blue */
 .user {
-    background-color: #1e3a8a;
+    background-color: #1e40af;
     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%);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-/* Assistant Bubble - Light Purple */
+/* Assistant Bubble - Light Gray */
 .assistant {
-    background-color: #e2d8f7;
+    background-color: #f3f4f6;
     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%);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 /* Message Input Area */
 textarea {
-    border-radius: 8px;
-    padding: 12px;
-    border: 1px solid #ccc;
+    border-radius: 6px;
+    padding: 10px;
+    border: 1px solid #ddd;
     font-size: 14px;
     resize: none;
     outline: none;
-    transition: border-color 0.3s ease;
     width: 100%;
 }
 textarea:focus {
@@ -448,7 +418,7 @@ input[type="range"], .gradio-container label {
 input[type="range"] {
     -webkit-appearance: none;
     width: 100%;
-    height: 8px;
+    height: 6px;
     background-color: #ddd;
     outline: none;
     border-radius: 5px;
@@ -463,17 +433,17 @@ input[type="range"]:hover {
 button {
     font-size: 15px;
     color: white;
-    background-color: #6a11cb;
+    background-color: #4f46e5;
     border: none;
-    padding: 12px 20px;
-    border-radius: 8px;
+    padding: 10px 16px;
+    border-radius: 6px;
     cursor: pointer;
     transition: background 0.3s ease;
     width: 100%;
 }
 
 button:hover {
-    background-color: #5c0dbf;
+    background-color: #4338ca;
 }
 """
 
@@ -482,7 +452,7 @@ 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 and you only reply big when you are asked to do so.",
             label="System message"
         ),
         gr.Slider(