Update app.py

app.py

@@ -5,7 +5,7 @@ from huggingface_hub import InferenceClient
 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". 
-You respond politely, refuse inapropriate requests, and keep a friendly tone."""
+You respond politely, refuse inappropriate requests, and keep a friendly tone."""
     
     messages = [{"role": "system", "content": system_message}]
     messages.extend(history)
@@ -17,21 +17,42 @@ You respond politely, refuse inapropriate requests, and keep a friendly tone."""
         response += token
         yield response
 
-# JS para animações e ajustes visuais
+# JS + HTML para título animado e botão de fechar
 fade_js = """
 <script>
 document.addEventListener("DOMContentLoaded", () => {
-    // Título animado
     const grContainer = document.querySelector(".gradio-container");
+
     if(grContainer && !document.querySelector(".chat-title")) {
         const titleContainer = document.createElement("div");
         titleContainer.className = "title-container";
         titleContainer.innerHTML = `
-            <h1 class="chat-title">Talk with BitAI (W.I.P)</h1>
-            <p class="chat-subtitle">Still updating, might not know everything, filter slightly broken</p>
+            <div class="title-inner">
+                <h1 class="chat-title">Talk with BitAI (W.I.P)</h1>
+                <p class="chat-subtitle">Still updating, might not know everything, filter slightly broken</p>
+                <button class="close-title-btn">
+                    <svg width="24" height="24" viewBox="0 0 24 24">
+                        <path fill="#fff" d="M12 16l-6-6h12z"/>
+                    </svg>
+                </button>
+            </div>
         `;
         grContainer.insertBefore(titleContainer, grContainer.firstChild);
-        setTimeout(()=>{titleContainer.style.opacity="1"; titleContainer.style.transform="translateY(0)";},100);
+
+        // animação de aparecer
+        setTimeout(() => {
+            titleContainer.style.opacity = "1";
+            titleContainer.style.transform = "translateY(0)";
+        }, 100);
+
+        // botão de fechar
+        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);
+        });
     }
 
     // Startup message
@@ -74,26 +95,32 @@ document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll("button, .chat-message, textarea, .gr-button.gr-login, .chat-title, .chat-subtitle, .startup-message, .gr-chatbot").forEach(bounce);
 });
 </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; cursor:pointer; }
+.chat-subtitle { font-size:14px; color:#aaa; margin-bottom:10px; }
+.close-title-btn { position:absolute; right:-10px; top:-10px; background:transparent; border:none; cursor:pointer; padding:5px; transition: transform 0.2s; }
+.close-title-btn:hover { transform:scale(1.2); }
+.startup-message { opacity:0; transform:translateY(20px); transition:0.5s; margin:20px 0; display:flex; justify-content:center; cursor:pointer; }
+.startup-content { display:flex; align-items:center; background:linear-gradient(145deg,#2e2e2e,#252525); padding:20px; border-radius:20px; box-shadow:0 4px 15px rgba(0,0,0,0.2); }
+.startup-icon { font-size:32px; margin-right:15px; }
+.startup-title { font-weight:600; font-size:18px; color:#fff; }
+.startup-subtitle { font-size:16px; color:#eee; }
+.startup-note { font-size:12px; color:#aaa; font-style:italic; }
+</style>
 """
 
-# Gradio interface
+# Gradio interface completa
 with gr.Blocks(css="""
 body{background:#000;margin:0;padding:0;font-family:'Inter','Manrope','Outfit',sans-serif;}
 .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);transition:transform 0.3s;}
-.title-container{opacity:0;transform:translateY(-20px);transition:0.5s;}
-.chat-title{font-size:32px;color:#fff;margin-bottom:10px;cursor:pointer;transition:0.3s;}
-.chat-subtitle{font-size:14px;color:#aaa;cursor:pointer;transition:0.3s;}
 textarea{border:none;border-radius:25px;padding:14px 20px 14px 20px;background:#1a1a1a;color:#fff;font-size:16px;width:100%;height:56px;transition:0.3s;}
 .send-btn{border:none;border-radius:20px;background:linear-gradient(145deg,#555,#444);color:#fff;width:40px;height:40px;position:absolute;right:8px;top:8px;cursor:pointer;transition:0.3s;}
 .chat-message{border-radius:20px;padding:16px;margin:12px 0;opacity:0;transition:0.5s;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;margin-left:40px;}
 .chat-message.bot{background:linear-gradient(145deg,#2e2e2e,#252525);color:#fff;align-items:flex-start;margin-right:40px;}
-.startup-message{opacity:0;transform:translateY(20px);transition:0.5s;margin:20px 0;display:flex;justify-content:center;cursor:pointer;}
-.startup-content{display:flex;align-items:center;background:linear-gradient(145deg,#2e2e2e,#252525);padding:20px;border-radius:20px;box-shadow:0 4px 15px rgba(0,0,0,0.2);}
-.startup-icon{font-size:32px;margin-right:15px;}
-.startup-title{font-weight:600;font-size:18px;color:#fff;}
-.startup-subtitle{font-size:16px;color:#eee;}
-.startup-note{font-size:12px;color:#aaa;font-style:italic;}
 """) as demo:
 
     gr.LoginButton()