Update app.py

app.py

@@ -27,6 +27,42 @@ Keep a simple, approachable, and friendly tone otherwise."""
 fade_js = """
 <script>
 document.addEventListener("DOMContentLoaded", () => {
+    // Add title and subtitle
+    setTimeout(() => {
+        const chatContainer = document.querySelector(".chat-interface");
+        const gradioContainer = document.querySelector(".gradio-container");
+        
+        if (gradioContainer && !document.querySelector(".chat-title")) {
+            const titleContainer = document.createElement("div");
+            titleContainer.className = "title-container";
+            
+            const title = document.createElement("h1");
+            title.className = "chat-title";
+            title.textContent = "Talk with BitAI (W.I.P)";
+            
+            const subtitle = document.createElement("p");
+            subtitle.className = "chat-subtitle";
+            subtitle.innerHTML = "Me, Sal is still updating this AI, he cannot search on internet, he might not know how to answer you, filter is a little broken";
+            
+            titleContainer.appendChild(title);
+            titleContainer.appendChild(subtitle);
+            
+            // Insert before the login button
+            const loginButton = document.querySelector(".gr-button.gr-login");
+            if (loginButton) {
+                gradioContainer.insertBefore(titleContainer, loginButton);
+            } else {
+                gradioContainer.insertBefore(titleContainer, gradioContainer.firstChild);
+            }
+            
+            // Animate in
+            setTimeout(() => {
+                titleContainer.style.opacity = "1";
+                titleContainer.style.transform = "translateY(0)";
+            }, 100);
+        }
+    }, 100);
+
     // Add startup message
     setTimeout(() => {
         const chatContainer = document.querySelector(".chat-interface");
@@ -231,6 +267,36 @@ document.addEventListener("DOMContentLoaded", () => {
             });
         }
         
+        // Title and subtitle
+        const title = document.querySelector(".chat-title");
+        const subtitle = document.querySelector(".chat-subtitle");
+        
+        if (title && !title.hasAttribute("data-bounce-added")) {
+            title.setAttribute("data-bounce-added", "true");
+            
+            title.addEventListener("click", function() {
+                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
+                this.style.transform = "scale(0.98)";
+                
+                setTimeout(() => {
+                    this.style.transform = "scale(1)";
+                }, 500);
+            });
+        }
+        
+        if (subtitle && !subtitle.hasAttribute("data-bounce-added")) {
+            subtitle.setAttribute("data-bounce-added", "true");
+            
+            subtitle.addEventListener("click", function() {
+                this.style.transition = "transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)";
+                this.style.transform = "scale(0.98)";
+                
+                setTimeout(() => {
+                    this.style.transform = "scale(1)";
+                }, 500);
+            });
+        }
+        
         // Startup message
         const startupMsg = document.querySelector(".startup-message");
         if (startupMsg && !startupMsg.hasAttribute("data-bounce-added")) {
@@ -306,6 +372,36 @@ body {
 .gradio-container:active {
     transform: scale(0.995);
 }
+/* Title container */
+.title-container {
+    text-align: center;
+    margin-bottom: 25px;
+    opacity: 0;
+    transform: translateY(-20px);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+}
+.chat-title {
+    font-family: 'Inter', 'Manrope', 'Outfit', sans-serif;
+    font-weight: 700;
+    font-size: 32px;
+    color: #fff;
+    margin-bottom: 10px;
+    letter-spacing: -0.02em;
+    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
+    cursor: pointer;
+    transition: transform 0.3s ease;
+}
+.chat-subtitle {
+    font-family: 'Manrope', 'Outfit', 'Inter', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    color: #aaa;
+    line-height: 1.5;
+    max-width: 600px;
+    margin: 0 auto;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+}
 .chat-message { 
     border-radius: 20px; 
     padding: 16px 20px;