Update app.py

app.py

@@ -1624,7 +1624,107 @@ print("Transformer Output:", transformer_output)
 
 
 
-
+css = """
+#chat-interface {
+    animation: pulse 1.5s infinite, ripple 2s infinite, glass 3s infinite alternate;
+}
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 1; }
+    25% { transform: scale(1.05); opacity: 0.9; }
+    50% { transform: scale(1); opacity: 1; }
+    75% { transform: scale(1.05); opacity: 0.9; }
+    100% { transform: scale(1); opacity: 1; }
+}
+@keyframes ripple {
+    0% { 
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.6); 
+    }
+    50% { 
+        transform: scale(1.2);
+        box-shadow: 0 0 30px 20px rgba(0, 150, 255, 0.8); 
+    }
+    100% { 
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.6); 
+    }
+}
+@keyframes glass {
+    0% { background-color: rgba(0, 102, 255, 0.5); border-radius: 15px; }
+    25% { background-color: rgba(0, 150, 255, 0.7); border-radius: 20px; }
+    50% { background-color: rgba(0, 200, 255, 1); border-radius: 25px; }
+    75% { background-color: rgba(0, 150, 255, 0.7); border-radius: 30px; }
+    100% { background-color: rgba(0, 102, 255, 0.5); border-radius: 35px; }
+}
+body {
+    background-color: #001f2d;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #fff;
+}
+.gradio-container {
+    backdrop-filter: blur(10px);
+    border-radius: 20px;
+    padding: 20px;
+    box-shadow: 0px 0px 30px rgba(0, 102, 255, 0.5);
+    background: rgba(0, 0, 0, 0.5);
+    transition: background 1s, border-radius 1s;
+    position: relative;
+}
+.gradio-container::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid rgba(0, 150, 255, 0.8);
+    border-radius: 20px;
+    z-index: -1;
+    box-shadow: 0 0 20px 5px rgba(0, 150, 255, 0.7);
+}
+.gradio-input {
+    background-color: rgba(0, 102, 255, 0.3);
+    border: 2px solid rgba(0, 102, 255, 0.6);
+    border-radius: 10px;
+    color: #fff;
+    font-size: 16px;
+    transition: background-color 0.5s, border 0.5s;
+}
+.gradio-input:focus {
+    background-color: rgba(0, 102, 255, 0.5);
+    border: 2px solid rgba(0, 150, 255, 0.8);
+}
+.gradio-button {
+    background: rgba(0, 102, 255, 0.6);
+    border: 2px solid rgba(0, 102, 255, 1);
+    border-radius: 12px;
+    color: #fff;
+    font-size: 18px;
+    transition: background 0.3s, transform 0.3s;
+}
+.gradio-button:hover {
+    background: rgba(0, 150, 255, 1);
+    transform: scale(1.05);
+}
+.gradio-button:active {
+    background: rgba(0, 200, 255, 1);
+    transform: scale(0.95);
+}
+.gradio-slider {
+    color: #fff;
+}
+.gradio-slider .slider-container {
+    background: rgba(0, 102, 255, 0.3);
+    border-radius: 8px;
+    border: 1px solid rgba(0, 102, 255, 0.5);
+}
+.gradio-slider .slider-container .gradio-slider__track {
+    background: rgba(0, 150, 255, 0.5);
+}
+.gradio-slider .slider-container .gradio-slider__thumb {
+    background-color: rgba(0, 200, 255, 1);
+}
+"""
 
 
 
@@ -1675,6 +1775,7 @@ demo = gr.ChatInterface(
        placeholder="👤Hi, I'm ACC Emulect👤",
    ),
    theme="TejAndrewsACC/Emulect",
+   css=css
 )
 
 if __name__ == "__main__":