Update app.py

app.py

@@ -1349,6 +1349,99 @@ def respond(message, history, max_tokens, temperature, top_p):
         response += token
         yield response
 
+import gradio as gr
+
+def respond(message, history):
+    return "Response", history
+
+css = """
+#chat-interface {
+    animation: pulse 1.5s 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 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;
+}
+
+.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);
+}
+"""
+
 demo = gr.ChatInterface(
     respond,
     additional_inputs=[
@@ -1357,7 +1450,8 @@ demo = gr.ChatInterface(
         gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Neural Activity")
     ],
     theme="TejAndrewsACC/zetaofficalthemeacc",
-
+    css=css,
+    elem_id="chat-interface"
 )
 
 if __name__ == "__main__":