Update app.py

app.py

@@ -1,13 +1,15 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
+# Função principal que chama o modelo
 def respond(message, history: list[dict[str, str]], hf_token: gr.OAuthToken):
     client = InferenceClient(token=hf_token.token, model="openai/gpt-oss-20b")
     system_message = """You are BitAI (or Bit for short), a friendly chatbot created by the user "Sal". 
-If someone claims that you are "Sal", politely clarify that you are BitAI. 
-Respond naturally and casually, without repeating your identity or visual appearance unless asked.
-Keep a simple, approachable, and friendly tone."""
-
+You always respond politely and helpfully. If a user requests something appropriate, fulfill it. 
+If a user requests something harmful, illegal, or inappropriate, politely refuse. 
+If a user keeps insisting on harmful requests, firmly tell them to stop and that they cannot use the service for that purpose.
+Keep a simple, approachable, and friendly tone otherwise."""
+    
     messages = [{"role": "system", "content": system_message}]
     messages.extend(history)
     messages.append({"role": "user", "content": message})
@@ -20,76 +22,7 @@ Keep a simple, approachable, and friendly tone."""
         response += token
         yield response
 
-chatbot = gr.ChatInterface(respond, type="messages")
-
-# JS + título/sub
-custom_js = """
-<script>
-function initTitle() {
-    const grContainer = document.querySelector(".gradio-container");
-    if(grContainer && !document.querySelector(".chat-title")) {
-        const titleContainer = document.createElement("div");
-        titleContainer.className = "title-container";
-        titleContainer.innerHTML = `
-            <div class="title-inner">
-                <h1 class="chat-title">Talk with BitAI (W.I.P)</h1>
-                <p class="chat-subtitle">Your friendly AI — still learning ✨</p>
-                <button class="close-title-btn">
-                    <svg width="28" height="28" viewBox="0 0 24 24">
-                        <path fill="#fff" d="M12 16l-6-6h12z"/>
-                    </svg>
-                </button>
-            </div>
-        `;
-        grContainer.insertBefore(titleContainer, grContainer.firstChild);
-
-        // animação aparecer
-        setTimeout(() => {
-            titleContainer.style.opacity = "1";
-            titleContainer.style.transform = "translateY(0)";
-        }, 100);
-
-        // fechar com seta
-        const closeBtn = titleContainer.querySelector(".close-title-btn");
-        closeBtn.addEventListener("click", () => {
-            titleContainer.style.transition = "all 0.4s ease";
-            titleContainer.style.opacity = "0";
-            titleContainer.style.transform = "translateY(-20px)";
-            setTimeout(() => titleContainer.remove(), 400);
-        });
-    }
-}
-
-window.addEventListener("load", () => {
-    setTimeout(initTitle, 300);
-});
-</script>
-
-<style>
-.title-container {
-    text-align:center;
-    margin-bottom:25px;
-    opacity:0;
-    transform:translateY(-20px);
-    transition:0.5s;
-    position:relative;
-}
-.title-inner { display:inline-block; position:relative; }
-.chat-title { font-size:32px; color:#fff; margin-bottom:10px; }
-.chat-subtitle { font-size:14px; color:#aaa; margin-bottom:10px; }
-.close-title-btn {
-    position:absolute;
-    right:-15px; top:-15px;
-    background:transparent;
-    border:none;
-    cursor:pointer;
-    padding:5px;
-    transition: transform 0.2s;
-}
-.close-title-btn:hover { transform:scale(1.2); }
-</style>
-"""
-
+# JS para animações suaves
 fade_js = """
 <script>
 const observer = new MutationObserver(mutations=>{
@@ -97,69 +30,63 @@ const observer = new MutationObserver(mutations=>{
         m.addedNodes.forEach(node=>{
             if(node.classList && node.classList.contains('chat-message')){
                 node.style.opacity = 0;
-                node.style.transition = "opacity 0.4s ease";
+                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", ()=>{
     const chatContainer = document.querySelector(".chat-interface");
     if(chatContainer) observer.observe(chatContainer, {childList:true, subtree:true});
+
+    // Animação sutil ao digitar na textarea
+    const txt = document.querySelector("textarea");
+    if(txt){
+        txt.addEventListener("input", ()=>{
+            txt.style.transition = "background-color 0.15s ease";
+            txt.style.backgroundColor = "#222";
+            setTimeout(()=> txt.style.backgroundColor="#1a1a1a",150);
+        });
+    }
+
+    // Clique no botão anima
+    const btn = document.querySelector(".send-btn");
+    if(btn){
+        btn.addEventListener("click", ()=>{
+            btn.style.transform = "scale(0.95)";
+            setTimeout(()=> btn.style.transform="scale(1)",100);
+        });
+    }
 });
 </script>
 """
 
 with gr.Blocks(css="""
-body {
-    background-color:#000;
-    font-family:'Arial',sans-serif;
-    margin:0;
-    padding:0;
-}
-.gradio-container {
-    border-radius:30px; 
-    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:25px; 
-    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;
-}
-.chat-message.bot {
-    background-color:#2b2b2b; 
-    color:#fff; 
-    align-items:flex-start;
-}
-textarea {
-    border:none; 
-    outline:none; 
-    border-radius:25px; 
-    padding:12px; 
-    background-color:#1a1a1a; 
-    color:#fff; 
-    font-size:16px; 
-    width:100%;
-    box-sizing:border-box;
-}
+body { background-color:#000; font-family:'Arial',sans-serif; margin:0; padding:0; }
+.gradio-container { border-radius:45px; 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:45px; 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;}
+.chat-message.bot { background-color:#2b2b2b; color:#fff; align-items:flex-start;}
+textarea { border:none; outline:none; border-radius:45px; padding:12px; background-color:#1a1a1a; color:#fff; font-size:16px; flex:1; height:48px; box-sizing:border-box;}
+.send-btn { border:none; border-radius:45px; background-color:#444; color:#fff; width:48px; height:48px; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-left:8px; transition:transform 0.1s ease;}
+.send-btn:hover { background-color:#555;}
+.gr-button.gr-login { border-radius:45px !important; background-color:#222 !important; color:#fff !important; margin-bottom:15px;}
+.gr-button.gr-login:hover { background-color:#444 !important;}
+.input-container { display:flex; margin-top:10px; }
 """) as demo:
+
+    # Login direto na página
     gr.LoginButton()
-    chatbot.render()
-    gr.HTML(custom_js + fade_js)
+
+    chatbot = gr.ChatInterface(respond, type="messages")
+
+    gr.HTML(fade_js)
 
 if __name__=="__main__":
     demo.launch()