Update app.py

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
+import time
 
 # Função principal que chama o modelo
 def respond(message, history: list[dict[str, str]], hf_token: gr.OAuthToken):
@@ -25,63 +26,281 @@ Keep a simple, approachable, and friendly tone otherwise."""
 # JS para animações suaves
 fade_js = """
 <script>
-const observer = new MutationObserver(mutations=>{
-    mutations.forEach(m=>{
-        m.addedNodes.forEach(node=>{
-            if(node.classList && node.classList.contains('chat-message')){
-                node.style.opacity = 0;
-                node.style.transform = 'translateY(10px)';
-                node.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
-                requestAnimationFrame(()=>{
-                    node.style.opacity = 1;
-                    node.style.transform = 'translateY(0)';
-                });
-            }
+document.addEventListener("DOMContentLoaded", () => {
+    // Observer for chat messages
+    const observer = new MutationObserver(mutations => {
+        mutations.forEach(m => {
+            m.addedNodes.forEach(node => {
+                if (node.classList && node.classList.contains('chat-message')) {
+                    // Enhanced message animation
+                    node.style.opacity = 0;
+                    node.style.transform = 'translateY(20px) scale(0.95)';
+                    node.style.transition = 'opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease';
+                    
+                    requestAnimationFrame(() => {
+                        node.style.opacity = 1;
+                        node.style.transform = 'translateY(0) scale(1)';
+                        
+                        // Add subtle shadow on appearance
+                        setTimeout(() => {
+                            node.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
+                        }, 500);
+                    });
+                }
+            });
         });
     });
-});
 
-document.addEventListener("DOMContentLoaded", ()=>{
     const chatContainer = document.querySelector(".chat-interface");
-    if(chatContainer) observer.observe(chatContainer, {childList:true, subtree:true});
+    if (chatContainer) observer.observe(chatContainer, {childList: true, subtree: true});
 
-    // Animação sutil ao digitar na textarea
+    // Enhanced typing animation for textarea
     const txt = document.querySelector("textarea");
-    if(txt){
-        txt.addEventListener("input", ()=>{
-            txt.style.transition = "background-color 0.15s ease";
+    if (txt) {
+        txt.addEventListener("focus", () => {
+            txt.style.transition = "all 0.3s ease";
+            txt.style.transform = "translateY(-2px)";
+            txt.style.boxShadow = "0 5px 15px rgba(0,0,0,0.2)";
+        });
+        
+        txt.addEventListener("blur", () => {
+            txt.style.transform = "translateY(0)";
+            txt.style.boxShadow = "0 2px 8px rgba(0,0,0,0.1)";
+        });
+        
+        txt.addEventListener("input", () => {
             txt.style.backgroundColor = "#222";
-            setTimeout(()=> txt.style.backgroundColor="#1a1a1a",150);
+            setTimeout(() => {
+                txt.style.transition = "background-color 0.5s ease";
+                txt.style.backgroundColor = "#1a1a1a";
+            }, 150);
         });
     }
 
-    // Clique no botão anima
+    // Enhanced button animation
     const btn = document.querySelector(".send-btn");
-    if(btn){
-        btn.addEventListener("click", ()=>{
-            btn.style.transform = "scale(0.95)";
-            setTimeout(()=> btn.style.transform="scale(1)",100);
+    if (btn) {
+        btn.addEventListener("mouseenter", () => {
+            btn.style.transform = "scale(1.05) rotate(2deg)";
+            btn.style.boxShadow = "0 5px 15px rgba(0,0,0,0.3)";
+        });
+        
+        btn.addEventListener("mouseleave", () => {
+            btn.style.transform = "scale(1) rotate(0)";
+            btn.style.boxShadow = "0 2px 8px rgba(0,0,0,0.2)";
+        });
+        
+        btn.addEventListener("mousedown", () => {
+            btn.style.transform = "scale(0.95) rotate(-1deg)";
+        });
+        
+        btn.addEventListener("mouseup", () => {
+            btn.style.transform = "scale(1.05) rotate(2deg)";
         });
+        
+        btn.addEventListener("click", () => {
+            // Ripple effect
+            const ripple = document.createElement("span");
+            ripple.classList.add("ripple-effect");
+            btn.appendChild(ripple);
+            
+            setTimeout(() => {
+                ripple.remove();
+            }, 600);
+        });
+    }
+    
+    // Add subtle pulse animation to login button
+    const loginBtn = document.querySelector(".gr-button.gr-login");
+    if (loginBtn) {
+        setInterval(() => {
+            loginBtn.style.boxShadow = "0 0 0 0 rgba(68, 68, 68, 0.7)";
+            setTimeout(() => {
+                loginBtn.style.transition = "box-shadow 0.5s ease";
+                loginBtn.style.boxShadow = "0 0 0 8px rgba(68, 68, 68, 0)";
+            }, 50);
+        }, 3000);
     }
 });
 </script>
 """
 
 with gr.Blocks(css="""
-body { background-color:#000; font-family:'Arial',sans-serif; margin:0; padding:0; }
-.gradio-container { border-radius: 20px; padding: 20px; max-width: 700px; margin: 30px auto; background-color: #121212; box-shadow: 0 6px 25px rgba(0,0,0,0.3); }
-.chat-message { border-radius: 20px; padding: 14px 18px; margin: 8px 0; display: flex; flex-direction: column; opacity: 0; }
-.chat-message.user { background-color: #1f1f1f; color: #fff; align-items: flex-end; border-bottom-right-radius: 5px; }
-.chat-message.bot { background-color: #2b2b2b; color: #fff; align-items: flex-start; border-bottom-left-radius: 5px; }
-textarea { border: none; outline: none; border-radius: 25px; padding: 15px; background-color: #1a1a1a; color: #fff; font-size: 16px; flex: 1; height: 60px; box-sizing: border-box; resize: none; }
-.send-btn { border: none; border-radius: 25px; background-color: #444; color: #fff; width: 60px; height: 60px; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 8px; transition: transform 0.1s ease, background-color 0.2s ease; }
-.send-btn:hover { background-color: #555; }
-.gr-button.gr-login { border-radius: 25px !important; background-color: #222 !important; color: #fff !important; margin-bottom: 15px; padding: 12px 20px; }
-.gr-button.gr-login:hover { background-color: #444 !important; }
-.input-container { display: flex; margin-top: 10px; }
-.gr-chatbot { border-radius: 15px; overflow: hidden; }
-.gr-box { border-radius: 15px; }
-.gr-button-primary { border-radius: 25px !important; }
+body { 
+    background-color: #000; 
+    font-family: 'Arial', sans-serif; 
+    margin: 0; 
+    padding: 0; 
+}
+.gradio-container { 
+    border-radius: 20px; 
+    padding: 20px; 
+    max-width: 700px; 
+    margin: 30px auto; 
+    background: linear-gradient(145deg, #0f0f0f, #1a1a1a); 
+    box-shadow: 0 10px 30px rgba(0,0,0,0.4); 
+    overflow: hidden;
+}
+.chat-message { 
+    border-radius: 20px; 
+    padding: 16px 20px; 
+    margin: 12px 0; 
+    display: flex; 
+    flex-direction: column; 
+    opacity: 0;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+}
+.chat-message.user { 
+    background: linear-gradient(145deg, #252525, #1f1f1f); 
+    color: #fff; 
+    align-items: flex-end; 
+    border-bottom-right-radius: 5px; 
+    margin-left: 40px;
+}
+.chat-message.bot { 
+    background: linear-gradient(145deg, #2e2e2e, #252525); 
+    color: #fff; 
+    align-items: flex-start; 
+    border-bottom-left-radius: 5px; 
+    margin-right: 40px;
+}
+textarea { 
+    border: none; 
+    outline: none; 
+    border-radius: 25px; 
+    padding: 16px 20px; 
+    background-color: #1a1a1a; 
+    color: #fff; 
+    font-size: 16px; 
+    flex: 1; 
+    height: 60px; 
+    box-sizing: border-box; 
+    resize: none; 
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+.send-btn { 
+    border: none; 
+    border-radius: 25px; 
+    background: linear-gradient(145deg, #555, #444); 
+    color: #fff; 
+    width: 60px; 
+    height: 60px; 
+    font-size: 20px; 
+    display: flex; 
+    align-items: center; 
+    justify-content: center; 
+    cursor: pointer; 
+    margin-left: 12px; 
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+    position: relative;
+    overflow: hidden;
+}
+.send-btn:hover { 
+    background: linear-gradient(145deg, #666, #555); 
+    transform: scale(1.05);
+}
+.gr-button.gr-login { 
+    border-radius: 25px !important; 
+    background: linear-gradient(145deg, #333, #222) !important; 
+    color: #fff !important; 
+    margin-bottom: 20px; 
+    padding: 14px 24px; 
+    transition: all 0.3s ease !important;
+    border: none !important;
+}
+.gr-button.gr-login:hover { 
+    background: linear-gradient(145deg, #444, #333) !important; 
+    transform: translateY(-2px);
+}
+.input-container { 
+    display: flex; 
+    margin-top: 15px; 
+}
+.gr-chatbot { 
+    border-radius: 15px; 
+    overflow: hidden; 
+    background: #1a1a1a;
+    padding: 15px;
+    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
+}
+.gr-box { 
+    border-radius: 15px; 
+}
+.gr-button-primary { 
+    border-radius: 25px !important; 
+}
+/* Ripple effect */
+.ripple-effect {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.3);
+    transform: scale(0);
+    animation: ripple 0.6s linear;
+    width: 100px;
+    height: 100px;
+    top: calc(50% - 50px);
+    left: calc(50% - 50px);
+}
+@keyframes ripple {
+    to {
+        transform: scale(2.5);
+        opacity: 0;
+    }
+}
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #1a1a1a;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+    background: #444;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+/* Message typing indicator */
+.typing-indicator {
+    display: inline-block;
+    position: relative;
+    width: 60px;
+    height: 20px;
+}
+.typing-dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #888;
+    position: absolute;
+    animation: typing-animation 1.4s infinite ease-in-out;
+}
+.typing-dot:nth-child(1) {
+    left: 0;
+    animation-delay: 0s;
+}
+.typing-dot:nth-child(2) {
+    left: 15px;
+    animation-delay: 0.2s;
+}
+.typing-dot:nth-child(3) {
+    left: 30px;
+    animation-delay: 0.4s;
+}
+@keyframes typing-animation {
+    0%, 60%, 100% {
+        transform: translateY(0);
+    }
+    30% {
+        transform: translateY(-5px);
+    }
+}
 """) as demo:
 
     # Login direto na página