Fix deployment logo rendering and add CPU heads-up toast

app.py

@@ -95,8 +95,12 @@ async def root():
 
 @app.get("/logo.png")
 async def logo():
-    # Serve logo.png at root (frontend expects it here)
-    return FileResponse(os.path.join(STATIC_DIR, "logo.png"))
+    # Backward-compatible route: serve SVG logo even when clients request /logo.png.
+    return FileResponse(os.path.join(STATIC_DIR, "logo.svg"), media_type="image/svg+xml")
+
+@app.get("/logo.svg")
+async def logo_svg():
+    return FileResponse(os.path.join(STATIC_DIR, "logo.svg"), media_type="image/svg+xml")
 
 @app.post("/chat")
 async def chat(request: ChatRequest):

static/index.html

@@ -1140,6 +1140,114 @@
         ::-webkit-scrollbar-thumb:hover {
             background: var(--text-muted);
         }
+
+        /* CPU heads-up toast */
+        .notification-toast {
+            position: fixed;
+            bottom: 24px;
+            left: 24px;
+            background: var(--bg-primary);
+            border-radius: 16px;
+            padding: 16px 20px;
+            max-width: 380px;
+            z-index: 9999;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(20px) scale(0.95);
+            transition: all 0.35s ease;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(64, 201, 201, 0.28);
+        }
+
+        .notification-toast.show {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0) scale(1);
+        }
+
+        .toast-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px;
+        }
+
+        .toast-title {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 15px;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .toast-icon {
+            width: 18px;
+            height: 18px;
+            color: #2d8cbe;
+        }
+
+        .toast-close {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            cursor: pointer;
+            padding: 3px;
+            border-radius: 6px;
+        }
+
+        .toast-close:hover {
+            background: var(--bg-hover);
+            color: var(--text-primary);
+        }
+
+        .toast-message {
+            font-size: 13px;
+            color: var(--text-primary);
+            line-height: 1.5;
+            margin-bottom: 12px;
+        }
+
+        .toast-btn {
+            background: var(--accent-gradient);
+            color: white;
+            border: none;
+            padding: 10px 14px;
+            border-radius: 10px;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            width: 100%;
+        }
+
+        .toast-progress {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            height: 3px;
+            width: 100%;
+            border-radius: 0 0 16px 16px;
+            background: linear-gradient(90deg, #00d4aa, #00bcd4);
+            animation: toast-progress-shrink 10s linear forwards;
+        }
+
+        @keyframes toast-progress-shrink {
+            from {
+                width: 100%;
+            }
+
+            to {
+                width: 0;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .notification-toast {
+                left: 12px;
+                right: 12px;
+                bottom: 12px;
+                max-width: none;
+            }
+        }
     </style>
 </head>
 
@@ -1178,7 +1286,7 @@
                         <line x1="3" y1="18" x2="21" y2="18"></line>
                     </svg>
                 </button>
-                <div class="logo-text">Krish Mind</div>
+                <img src="/static/logo.svg" alt="Krish Mind" class="logo-img">
             </div>
             <div class="header-actions">
                 <button class="icon-btn" onclick="toggleTheme()" title="Toggle theme">
@@ -1199,7 +1307,7 @@
         <div class="chat-container" id="chatContainer">
             <!-- Welcome Screen -->
             <div class="welcome-screen" id="welcomeScreen">
-                <div class="welcome-logo-text">Krish Mind</div>
+                <img src="/static/logo.svg" alt="Krish Mind" class="welcome-logo">
                 <h1 class="welcome-title">Hello! I'm Krish Mind</h1>
                 <p class="welcome-subtitle">Your AI assistant, developed by Krish CS</p>
                 <div class="suggestions-grid">
@@ -1278,6 +1386,30 @@
         </div>
     </div>
 
+    <div class="notification-toast" id="notificationToast">
+        <div class="toast-header">
+            <div class="toast-title">
+                <svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="12" y1="8" x2="12" y2="12"></line>
+                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                </svg>
+                Heads Up
+            </div>
+            <button class="toast-close" onclick="closeToast()">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
+        </div>
+        <p class="toast-message">
+            CPU resources are limited here, so responses may be slow. Please wait for your response.
+        </p>
+        <button class="toast-btn" onclick="closeToast()">OK, got it</button>
+        <div class="toast-progress"></div>
+    </div>
+
     <script>
         // State
         let serverUrl = ''; // Empty = relative URL (works on HF Spaces or any host)
@@ -1289,6 +1421,7 @@
         let chatHistory = JSON.parse(sessionStorage.getItem('krishMindChatHistory') || '[]');
         let chatConversations = JSON.parse(sessionStorage.getItem('krishMindConversations') || '{}');
         let currentChatId = null;
+        let toastTimeout = null;
 
         // Icons
         const SEND_ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" /></svg>';
@@ -1318,6 +1451,11 @@
             // Auto-check connection (optional)
             checkConnection();
 
+            if (sessionStorage.getItem('cpuHeadsUpShown') !== 'true') {
+                showToast();
+                sessionStorage.setItem('cpuHeadsUpShown', 'true');
+            }
+
             // Enable send button on input (only if not generating)
             document.getElementById('messageInput').addEventListener('input', (e) => {
                 if (!isGenerating) {
@@ -1340,6 +1478,27 @@
             document.getElementById('themeIcon').innerHTML = theme === 'dark' ? '&#9728;' : '&#127769;';
         }
 
+        function showToast() {
+            const toast = document.getElementById('notificationToast');
+            if (!toast) return;
+            setTimeout(() => {
+                toast.classList.add('show');
+                toastTimeout = setTimeout(() => {
+                    closeToast();
+                }, 10000);
+            }, 400);
+        }
+
+        function closeToast() {
+            const toast = document.getElementById('notificationToast');
+            if (!toast) return;
+            toast.classList.remove('show');
+            if (toastTimeout) {
+                clearTimeout(toastTimeout);
+                toastTimeout = null;
+            }
+        }
+
         // Sidebar toggle
         function toggleSidebar() {
             document.getElementById('sidebar').classList.toggle('open');