Update templates/index.html

templates/index.html

@@ -5,11 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>J.A.R.V.I.S. AI</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
 
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -21,9 +17,8 @@
             overflow: hidden;
         }
 
-        /* ── HEADER ── */
         .header {
-            background: linear-gradient(135deg, #0d1b2a 0%, #1b2838 100%);
+            background: linear-gradient(135deg, #0d1b2a, #1b2838);
             border-bottom: 1px solid #00d4ff33;
             padding: 14px 24px;
             display: flex;
@@ -32,16 +27,10 @@
             flex-shrink: 0;
         }
 
-        .header-left {
-            display: flex;
-            align-items: center;
-            gap: 14px;
-        }
+        .header-left { display: flex; align-items: center; gap: 14px; }
 
         .arc-reactor {
-            width: 42px;
-            height: 42px;
-            border-radius: 50%;
+            width: 42px; height: 42px; border-radius: 50%;
             background: radial-gradient(circle, #00d4ff 0%, #0088aa 40%, #004466 70%, transparent 100%);
             box-shadow: 0 0 20px #00d4ff88, 0 0 40px #00d4ff44, inset 0 0 10px #00d4ff66;
             animation: pulse 2s ease-in-out infinite;
@@ -49,16 +38,10 @@
         }
 
         .arc-reactor::after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
+            content: ''; position: absolute; top: 50%; left: 50%;
             transform: translate(-50%, -50%);
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            background: #00d4ff;
-            box-shadow: 0 0 8px #00d4ff;
+            width: 14px; height: 14px; border-radius: 50%;
+            background: #00d4ff; box-shadow: 0 0 8px #00d4ff;
         }
 
         @keyframes pulse {
@@ -67,94 +50,38 @@
         }
 
         .header-title h1 {
-            font-size: 1.3rem;
-            font-weight: 600;
-            color: #00d4ff;
-            letter-spacing: 3px;
-            text-transform: uppercase;
-        }
-
-        .header-title p {
-            font-size: 0.7rem;
-            color: #5a8a9a;
-            letter-spacing: 1px;
+            font-size: 1.3rem; font-weight: 600;
+            color: #00d4ff; letter-spacing: 3px; text-transform: uppercase;
         }
+        .header-title p { font-size: 0.7rem; color: #5a8a9a; letter-spacing: 1px; }
 
-        .header-controls {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-        }
+        .header-controls { display: flex; gap: 10px; align-items: center; }
 
         .toggle-btn {
-            background: #0d1b2a;
-            border: 1px solid #00d4ff44;
-            color: #00d4ff;
-            padding: 6px 14px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.75rem;
-            transition: all 0.3s;
-            letter-spacing: 1px;
-        }
-
-        .toggle-btn:hover {
-            background: #00d4ff22;
-            border-color: #00d4ff88;
-        }
-
-        .toggle-btn.active {
-            background: #00d4ff22;
-            border-color: #00d4ff;
-            box-shadow: 0 0 10px #00d4ff44;
+            background: #0d1b2a; border: 1px solid #00d4ff44; color: #00d4ff;
+            padding: 6px 14px; border-radius: 6px; cursor: pointer;
+            font-size: 0.75rem; transition: all 0.3s; letter-spacing: 1px;
         }
+        .toggle-btn:hover { background: #00d4ff22; border-color: #00d4ff88; }
+        .toggle-btn.active { background: #00d4ff22; border-color: #00d4ff; box-shadow: 0 0 10px #00d4ff44; }
 
         .status-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #00ff88;
-            box-shadow: 0 0 6px #00ff88;
-            animation: blink 3s infinite;
-        }
-
-        @keyframes blink {
-            0%, 90%, 100% { opacity: 1; }
-            95% { opacity: 0.3; }
+            width: 8px; height: 8px; border-radius: 50%;
+            background: #00ff88; box-shadow: 0 0 6px #00ff88;
         }
+        .status-dot.error { background: #ff4444; box-shadow: 0 0 6px #ff4444; }
 
-        /* ── CHAT AREA ── */
         .chat-container {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px 24px;
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            scroll-behavior: smooth;
-        }
-
-        .chat-container::-webkit-scrollbar {
-            width: 4px;
-        }
-
-        .chat-container::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        .chat-container::-webkit-scrollbar-thumb {
-            background: #00d4ff33;
-            border-radius: 2px;
+            flex: 1; overflow-y: auto; padding: 20px 24px;
+            display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth;
         }
+        .chat-container::-webkit-scrollbar { width: 4px; }
+        .chat-container::-webkit-scrollbar-track { background: transparent; }
+        .chat-container::-webkit-scrollbar-thumb { background: #00d4ff33; border-radius: 2px; }
 
         .message {
-            max-width: 78%;
-            padding: 12px 18px;
-            border-radius: 16px;
-            font-size: 0.92rem;
-            line-height: 1.6;
-            animation: fadeIn 0.3s ease-out;
-            position: relative;
+            max-width: 78%; padding: 12px 18px; border-radius: 16px;
+            font-size: 0.92rem; line-height: 1.6; animation: fadeIn 0.3s ease-out;
         }
 
         @keyframes fadeIn {
@@ -165,180 +92,102 @@
         .message.user {
             align-self: flex-end;
             background: linear-gradient(135deg, #1a3a5c, #0d2847);
-            border: 1px solid #00d4ff33;
-            color: #c8e6ff;
+            border: 1px solid #00d4ff33; color: #c8e6ff;
             border-bottom-right-radius: 4px;
         }
 
         .message.assistant {
             align-self: flex-start;
             background: linear-gradient(135deg, #141e30, #0f1923);
-            border: 1px solid #00d4ff22;
-            color: #e0e0e0;
+            border: 1px solid #00d4ff22; color: #e0e0e0;
             border-bottom-left-radius: 4px;
         }
 
-        .message.assistant::before {
-            content: '⟐ JARVIS';
-            display: block;
-            font-size: 0.6rem;
-            color: #00d4ff88;
-            letter-spacing: 2px;
-            margin-bottom: 6px;
-            text-transform: uppercase;
+        .message.assistant .label {
+            font-size: 0.6rem; color: #00d4ff88;
+            letter-spacing: 2px; margin-bottom: 6px; text-transform: uppercase;
         }
 
-        .message .audio-btn {
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
-            margin-top: 8px;
-            background: #00d4ff15;
-            border: 1px solid #00d4ff33;
-            color: #00d4ff;
-            padding: 4px 10px;
-            border-radius: 12px;
-            cursor: pointer;
-            font-size: 0.7rem;
-            transition: all 0.2s;
+        .message .text-content { white-space: pre-wrap; }
+
+        .message .audio-controls {
+            margin-top: 8px; display: flex; align-items: center; gap: 8px;
         }
 
-        .message .audio-btn:hover {
-            background: #00d4ff25;
-            border-color: #00d4ff66;
+        .audio-btn {
+            display: inline-flex; align-items: center; gap: 4px;
+            background: #00d4ff15; border: 1px solid #00d4ff33; color: #00d4ff;
+            padding: 4px 10px; border-radius: 12px; cursor: pointer;
+            font-size: 0.7rem; transition: all 0.2s;
         }
+        .audio-btn:hover { background: #00d4ff25; border-color: #00d4ff66; }
+        .audio-btn:disabled { opacity: 0.3; cursor: wait; }
 
-        .typing-indicator {
-            align-self: flex-start;
-            display: flex;
-            gap: 5px;
-            padding: 16px 20px;
+        .audio-status {
+            font-size: 0.6rem; color: #5a8a9a; font-style: italic;
         }
 
+        .typing-indicator {
+            align-self: flex-start; display: flex; gap: 5px; padding: 16px 20px;
+        }
         .typing-indicator span {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #00d4ff;
-            animation: typing 1.4s infinite;
+            width: 8px; height: 8px; border-radius: 50%;
+            background: #00d4ff; animation: typing 1.4s infinite;
         }
-
         .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
         .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
-
         @keyframes typing {
             0%, 60%, 100% { opacity: 0.2; transform: scale(0.8); }
             30% { opacity: 1; transform: scale(1.1); }
         }
 
-        /* ── WELCOME ── */
         .welcome {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            flex: 1;
-            gap: 12px;
-            opacity: 0.6;
+            display: flex; flex-direction: column;
+            align-items: center; justify-content: center;
+            flex: 1; gap: 12px; opacity: 0.6;
         }
-
         .welcome .big-reactor {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
+            width: 80px; height: 80px; border-radius: 50%;
             background: radial-gradient(circle, #00d4ff 0%, #0088aa 35%, #004466 65%, transparent 100%);
             box-shadow: 0 0 40px #00d4ff66, 0 0 80px #00d4ff22;
             animation: pulse 2s ease-in-out infinite;
         }
+        .welcome h2 { color: #00d4ff; font-size: 1.1rem; letter-spacing: 4px; }
+        .welcome p { color: #5a8a9a; font-size: 0.8rem; }
 
-        .welcome h2 {
-            color: #00d4ff;
-            font-size: 1.1rem;
-            letter-spacing: 4px;
-        }
-
-        .welcome p {
-            color: #5a8a9a;
-            font-size: 0.8rem;
-        }
-
-        /* ── INPUT ── */
         .input-container {
             padding: 16px 24px;
-            background: linear-gradient(0deg, #0d1b2a 0%, #0a0a1a 100%);
-            border-top: 1px solid #00d4ff22;
-            flex-shrink: 0;
+            background: linear-gradient(0deg, #0d1b2a, #0a0a1a);
+            border-top: 1px solid #00d4ff22; flex-shrink: 0;
         }
-
         .input-wrapper {
-            display: flex;
-            gap: 10px;
-            max-width: 900px;
-            margin: 0 auto;
+            display: flex; gap: 10px; max-width: 900px; margin: 0 auto;
         }
-
         #messageInput {
-            flex: 1;
-            background: #0f1923;
-            border: 1px solid #00d4ff33;
-            border-radius: 12px;
-            padding: 12px 18px;
-            color: #e0e0e0;
-            font-size: 0.92rem;
-            outline: none;
-            transition: border-color 0.3s;
+            flex: 1; background: #0f1923; border: 1px solid #00d4ff33;
+            border-radius: 12px; padding: 12px 18px; color: #e0e0e0;
+            font-size: 0.92rem; outline: none; transition: border-color 0.3s;
             font-family: inherit;
         }
-
-        #messageInput:focus {
-            border-color: #00d4ff88;
-            box-shadow: 0 0 15px #00d4ff22;
-        }
-
-        #messageInput::placeholder {
-            color: #3a5a6a;
-        }
+        #messageInput:focus { border-color: #00d4ff88; box-shadow: 0 0 15px #00d4ff22; }
+        #messageInput::placeholder { color: #3a5a6a; }
 
         #sendBtn {
             background: linear-gradient(135deg, #00d4ff, #0088cc);
-            border: none;
-            border-radius: 12px;
-            padding: 12px 24px;
-            color: #0a0a1a;
-            font-weight: 700;
-            cursor: pointer;
-            font-size: 0.85rem;
-            letter-spacing: 1px;
-            transition: all 0.3s;
+            border: none; border-radius: 12px; padding: 12px 24px;
+            color: #0a0a1a; font-weight: 700; cursor: pointer;
+            font-size: 0.85rem; letter-spacing: 1px; transition: all 0.3s;
             text-transform: uppercase;
         }
-
-        #sendBtn:hover {
-            box-shadow: 0 0 20px #00d4ff66;
-            transform: translateY(-1px);
-        }
-
-        #sendBtn:disabled {
-            opacity: 0.4;
-            cursor: not-allowed;
-            transform: none;
-        }
+        #sendBtn:hover { box-shadow: 0 0 20px #00d4ff66; transform: translateY(-1px); }
+        #sendBtn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
 
         .input-footer {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 6px;
-            max-width: 900px;
-            margin-left: auto;
-            margin-right: auto;
-        }
-
-        .input-footer span {
-            font-size: 0.65rem;
-            color: #3a5a6a;
+            display: flex; justify-content: space-between;
+            margin-top: 6px; max-width: 900px; margin-left: auto; margin-right: auto;
         }
+        .input-footer span { font-size: 0.65rem; color: #3a5a6a; }
 
-        /* ── RESPONSIVE ── */
         @media (max-width: 640px) {
             .header { padding: 10px 14px; }
             .header-title h1 { font-size: 1rem; }
@@ -350,7 +199,6 @@
 </head>
 <body>
 
-<!-- HEADER -->
 <div class="header">
     <div class="header-left">
         <div class="arc-reactor"></div>
@@ -360,13 +208,12 @@
         </div>
     </div>
     <div class="header-controls">
-        <div class="status-dot"></div>
+        <div class="status-dot" id="statusDot"></div>
         <button class="toggle-btn active" id="ttsToggle" onclick="toggleTTS()">🔊 VOICE</button>
         <button class="toggle-btn" onclick="clearChat()">🗑 CLEAR</button>
     </div>
 </div>
 
-<!-- CHAT -->
 <div class="chat-container" id="chatContainer">
     <div class="welcome" id="welcome">
         <div class="big-reactor"></div>
@@ -375,7 +222,6 @@
     </div>
 </div>
 
-<!-- INPUT -->
 <div class="input-container">
     <div class="input-wrapper">
         <input type="text" id="messageInput" placeholder="Talk to J.A.R.V.I.S..." autocomplete="off" />
@@ -383,7 +229,7 @@
     </div>
     <div class="input-footer">
         <span id="memoryCount">Memory: 0 turns</span>
-        <span>KittenTTS · Kiki · CPU Inference</span>
+        <span id="ttsStatus">KittenTTS · Kiki · CPU</span>
     </div>
 </div>
 
@@ -392,21 +238,17 @@
     let sessionId = crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2);
     let ttsEnabled = true;
     let isProcessing = false;
+    let messageCounter = 0;
 
     const chatContainer = document.getElementById('chatContainer');
     const messageInput = document.getElementById('messageInput');
     const sendBtn = document.getElementById('sendBtn');
     const welcome = document.getElementById('welcome');
 
-    // ── ENTER KEY ──
     messageInput.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            sendMessage();
-        }
+        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
     });
 
-    // ── TTS TOGGLE ──
     function toggleTTS() {
         ttsEnabled = !ttsEnabled;
         const btn = document.getElementById('ttsToggle');
@@ -414,52 +256,48 @@
         btn.textContent = ttsEnabled ? '🔊 VOICE' : '🔇 MUTE';
     }
 
-    // ── SEND MESSAGE ──
+    // ── SEND MESSAGE (TWO-PHASE: text first, audio second) ──
     async function sendMessage() {
         const text = messageInput.value.trim();
         if (!text || isProcessing) return;
 
         if (welcome) welcome.style.display = 'none';
 
-        // Add user message
-        addMessage(text, 'user');
+        addUserMessage(text);
         messageInput.value = '';
         isProcessing = true;
         sendBtn.disabled = true;
 
-        // Show typing indicator
         const typingEl = showTyping();
+        const msgId = ++messageCounter;
 
         try {
+            // ✅ PHASE 1: Get text response (fast!)
             const res = await fetch('/chat', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    message: text,
-                    session_id: sessionId,
-                    tts: ttsEnabled
-                })
+                body: JSON.stringify({ message: text, session_id: sessionId })
             });
 
-            const data = await res.json();
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
-            // Remove typing indicator
+            const data = await res.json();
             typingEl.remove();
 
-            // Add assistant message
-            addMessage(data.response, 'assistant', data.audio);
+            // Show text immediately
+            const msgEl = addAssistantMessage(data.response, msgId);
 
-            // Update memory count
             document.getElementById('memoryCount').textContent = `Memory: ${data.memory_length} turns`;
 
-            // Auto-play audio
-            if (data.audio && ttsEnabled) {
-                playAudio(data.audio);
+            // ✅ PHASE 2: Fetch TTS audio in background (non-blocking)
+            if (ttsEnabled && data.tts_available) {
+                fetchAndPlayAudio(data.response, msgId, msgEl);
             }
 
         } catch (err) {
             typingEl.remove();
-            addMessage('System malfunction. Unable to process request. Please try again.', 'assistant');
+            addAssistantMessage('System malfunction. Unable to process request. Please try again.', msgId);
+            console.error('Chat error:', err);
         }
 
         isProcessing = false;
@@ -467,72 +305,137 @@
         messageInput.focus();
     }
 
-    // ── ADD MESSAGE ──
-    function addMessage(text, role, audioData) {
-        const div = document.createElement('div');
-        div.className = `message ${role}`;
+    // ── FETCH AUDIO SEPARATELY (non-blocking) ──
+    async function fetchAndPlayAudio(text, msgId, msgEl) {
+        const statusEl = msgEl.querySelector('.audio-status');
+        const playBtn = msgEl.querySelector('.audio-btn');
+
+        if (statusEl) statusEl.textContent = '⏳ Generating voice...';
+        if (playBtn) playBtn.disabled = true;
 
-        let html = text;
+        try {
+            const res = await fetch('/tts', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ text: text })
+            });
+
+            const data = await res.json();
 
-        if (role === 'assistant' && audioData) {
-            html += `<br><button class="audio-btn" onclick="playAudio('${audioData}')">▶ Play Audio</button>`;
+            if (data.audio) {
+                // Store audio data on the button
+                if (playBtn) {
+                    playBtn.dataset.audio = data.audio;
+                    playBtn.disabled = false;
+                    playBtn.textContent = '▶ Play';
+                }
+                if (statusEl) statusEl.textContent = '✅ Ready';
+
+                // Auto-play
+                playAudioBase64(data.audio);
+            } else {
+                if (statusEl) statusEl.textContent = '⚠️ Voice unavailable';
+                if (playBtn) playBtn.style.display = 'none';
+            }
+        } catch (err) {
+            console.error('TTS error:', err);
+            if (statusEl) statusEl.textContent = '⚠️ Voice error';
+            if (playBtn) playBtn.style.display = 'none';
         }
+    }
 
-        div.innerHTML = html;
+    // ── ADD MESSAGES ──
+    function addUserMessage(text) {
+        const div = document.createElement('div');
+        div.className = 'message user';
+        div.innerHTML = `<div class="text-content">${escapeHtml(text)}</div>`;
         chatContainer.appendChild(div);
-        chatContainer.scrollTop = chatContainer.scrollHeight;
+        scrollToBottom();
+    }
+
+    function addAssistantMessage(text, msgId) {
+        const div = document.createElement('div');
+        div.className = 'message assistant';
+        div.id = `msg-${msgId}`;
+        div.innerHTML = `
+            <div class="label">⟐ JARVIS</div>
+            <div class="text-content">${escapeHtml(text)}</div>
+            ${ttsEnabled ? `
+            <div class="audio-controls">
+                <button class="audio-btn" disabled onclick="replayAudio(this)">⏳</button>
+                <span class="audio-status">Requesting voice...</span>
+            </div>` : ''}
+        `;
+        chatContainer.appendChild(div);
+        scrollToBottom();
+        return div;
     }
 
-    // ── TYPING INDICATOR ──
     function showTyping() {
         const div = document.createElement('div');
         div.className = 'typing-indicator';
         div.innerHTML = '<span></span><span></span><span></span>';
         chatContainer.appendChild(div);
-        chatContainer.scrollTop = chatContainer.scrollHeight;
+        scrollToBottom();
         return div;
     }
 
-    // ── PLAY AUDIO ──
-    function playAudio(b64) {
+    // ── AUDIO PLAYBACK ──
+    function playAudioBase64(b64) {
         try {
             const binary = atob(b64);
             const bytes = new Uint8Array(binary.length);
-            for (let i = 0; i < binary.length; i++) {
-                bytes[i] = binary.charCodeAt(i);
-            }
+            for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
             const blob = new Blob([bytes], { type: 'audio/wav' });
             const url = URL.createObjectURL(blob);
             const audio = new Audio(url);
-            audio.play();
+            audio.play().catch(e => console.log('Autoplay blocked:', e));
             audio.onended = () => URL.revokeObjectURL(url);
-        } catch (e) {
-            console.error('Audio playback error:', e);
-        }
+        } catch (e) { console.error('Audio error:', e); }
+    }
+
+    function replayAudio(btn) {
+        if (btn.dataset.audio) playAudioBase64(btn.dataset.audio);
     }
 
-    // ── CLEAR CHAT ──
+    // ── CLEAR ──
     async function clearChat() {
         await fetch('/clear', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ session_id: sessionId })
         });
-
         chatContainer.innerHTML = `
             <div class="welcome" id="welcome">
                 <div class="big-reactor"></div>
                 <h2>SYSTEMS ONLINE</h2>
                 <p>Type a message below to begin interaction</p>
             </div>`;
-
         document.getElementById('memoryCount').textContent = 'Memory: 0 turns';
         sessionId = crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2);
     }
 
-    // ── FOCUS INPUT ON LOAD ──
+    // ── UTILS ──
+    function escapeHtml(t) {
+        const d = document.createElement('div');
+        d.textContent = t;
+        return d.innerHTML;
+    }
+    function scrollToBottom() {
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+
+    // ── HEALTH CHECK ──
+    fetch('/health').then(r => r.json()).then(d => {
+        const dot = document.getElementById('statusDot');
+        const status = document.getElementById('ttsStatus');
+        if (d.tts_model === 'DISABLED') {
+            dot.classList.add('error');
+            status.textContent = 'TTS Disabled · Text Only';
+        }
+    }).catch(() => {});
+
     messageInput.focus();
 </script>
-
 </body>
 </html>