Ana-2

Runtime error

App Files Files Community

OrbitMC commited on 20 days ago

Commit

0ca87ff

verified ·

1 Parent(s): 0e92a36

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +223 -370

templates/index.html CHANGED Viewed

@@ -3,419 +3,272 @@
 <head>
     <meta charset="UTF-8">
     <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; }
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: #0a0a1a; color: #e0e0e0;
-            height: 100vh; display: flex; flex-direction: column; overflow: hidden;
         }
         .header {
-            background: linear-gradient(135deg, #0d1b2a, #1b2838);
-            border-bottom: 1px solid #00d4ff33;
-            padding: 12px 20px; display: flex; align-items: center;
-            justify-content: space-between; flex-shrink: 0;
-        }
-        .header-left { display: flex; align-items: center; gap: 12px; }
-        .arc-reactor {
-            width: 38px; height: 38px; 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; position: relative;
-        }
-        .arc-reactor::after {
-            content: ''; position: absolute; top: 50%; left: 50%;
-            transform: translate(-50%, -50%); width: 12px; height: 12px;
-            border-radius: 50%; background: #00d4ff; box-shadow: 0 0 8px #00d4ff;
-        }
-        @keyframes pulse {
-            0%, 100% { box-shadow: 0 0 20px #00d4ff88, 0 0 40px #00d4ff44; }
-            50% { box-shadow: 0 0 30px #00d4ffaa, 0 0 60px #00d4ff66; }
         }
-        .header-title h1 { font-size: 1.2rem; color: #00d4ff; letter-spacing: 3px; text-transform: uppercase; }
-        .header-title p { font-size: 0.65rem; color: #5a8a9a; letter-spacing: 1px; }
-        .header-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
-        .ctrl-btn {
-            background: #0d1b2a; border: 1px solid #00d4ff44; color: #00d4ff;
-            padding: 5px 12px; border-radius: 6px; cursor: pointer;
-            font-size: 0.7rem; transition: all 0.3s; letter-spacing: 0.5px;
-        }
-        .ctrl-btn:hover { background: #00d4ff22; border-color: #00d4ff88; }
-        .ctrl-btn.active { background: #00d4ff22; border-color: #00d4ff; box-shadow: 0 0 8px #00d4ff44; }
-        .status-dot {
-            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; }
-        /* Config panel */
-        .config-bar {
-            background: #0d1117; border-bottom: 1px solid #00d4ff15;
-            padding: 8px 20px; display: none; flex-wrap: wrap; gap: 12px;
-            align-items: center; flex-shrink: 0;
         }
-        .config-bar.open { display: flex; }
-        .config-group { display: flex; align-items: center; gap: 6px; }
-        .config-group label { font-size: 0.65rem; color: #5a8a9a; text-transform: uppercase; letter-spacing: 1px; }
-        .config-group select {
-            background: #0f1923; border: 1px solid #00d4ff33; color: #00d4ff;
-            padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; cursor: pointer;
-        }
-        .config-group select:focus { border-color: #00d4ff; outline: none; }
-        .config-tag {
-            font-size: 0.6rem; padding: 3px 8px; border-radius: 10px;
-            background: #00d4ff15; border: 1px solid #00d4ff33; color: #00d4ffaa;
         }
-        /* Chat */
         .chat-container {
-            flex: 1; overflow-y: auto; padding: 16px 20px;
-            display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth;
         }
-        .chat-container::-webkit-scrollbar { width: 3px; }
-        .chat-container::-webkit-scrollbar-thumb { background: #00d4ff33; border-radius: 2px; }
         .message {
-            max-width: 80%; padding: 12px 16px; border-radius: 14px;
-            font-size: 0.9rem; line-height: 1.6; animation: fadeIn 0.3s ease-out;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(8px); }
-            to { opacity: 1; transform: translateY(0); }
         }
         .message.user {
-            align-self: flex-end; background: linear-gradient(135deg, #1a3a5c, #0d2847);
-            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-bottom-left-radius: 4px;
-        }
-        .message .label { font-size: 0.58rem; color: #00d4ff88; letter-spacing: 2px; margin-bottom: 5px; text-transform: uppercase; }
-        .message .text-content { white-space: pre-wrap; word-wrap: break-word; }
-        .message .audio-controls { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
-        .audio-btn {
-            display: inline-flex; align-items: center; gap: 4px;
-            background: #00d4ff15; border: 1px solid #00d4ff33; color: #00d4ff;
-            padding: 3px 10px; border-radius: 10px; cursor: pointer;
-            font-size: 0.65rem; transition: all 0.2s;
         }
-        .audio-btn:hover { background: #00d4ff25; border-color: #00d4ff66; }
-        .audio-btn:disabled { opacity: 0.3; cursor: wait; }
-        .audio-status { font-size: 0.58rem; color: #5a8a9a; }
-        .typing-indicator { align-self: flex-start; display: flex; gap: 5px; padding: 14px 18px; }
-        .typing-indicator span {
-            width: 7px; height: 7px; 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 {
-            display: flex; flex-direction: column; align-items: center;
-            justify-content: center; flex: 1; gap: 10px; opacity: 0.5;
         }
-        .welcome .big-reactor {
-            width: 70px; height: 70px; border-radius: 50%;
-            background: radial-gradient(circle, #00d4ff 0%, #0088aa 35%, #004466 65%, transparent 100%);
-            box-shadow: 0 0 40px #00d4ff66; animation: pulse 2s ease-in-out infinite;
         }
-        .welcome h2 { color: #00d4ff; font-size: 1rem; letter-spacing: 4px; }
-        .welcome p { color: #5a8a9a; font-size: 0.75rem; }
-        .welcome .model-info { font-size: 0.65rem; color: #3a5a6a; margin-top: 4px; }
-        .input-container {
-            padding: 14px 20px; background: linear-gradient(0deg, #0d1b2a, #0a0a1a);
-            border-top: 1px solid #00d4ff22; flex-shrink: 0;
         }
-        .input-wrapper { display: flex; gap: 8px; max-width: 900px; margin: 0 auto; }
-        #messageInput {
-            flex: 1; background: #0f1923; border: 1px solid #00d4ff33; border-radius: 12px;
-            padding: 11px 16px; color: #e0e0e0; font-size: 0.9rem; outline: none;
-            transition: border-color 0.3s; font-family: inherit;
         }
-        #messageInput:focus { border-color: #00d4ff88; box-shadow: 0 0 12px #00d4ff22; }
-        #messageInput::placeholder { color: #3a5a6a; }
-        #sendBtn {
-            background: linear-gradient(135deg, #00d4ff, #0088cc); border: none; border-radius: 12px;
-            padding: 11px 22px; color: #0a0a1a; font-weight: 700; cursor: pointer;
-            font-size: 0.8rem; letter-spacing: 1px; transition: all 0.3s; text-transform: uppercase;
         }
-        #sendBtn:hover { box-shadow: 0 0 18px #00d4ff66; transform: translateY(-1px); }
-        #sendBtn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
-        .input-footer {
-            display: flex; justify-content: space-between; margin-top: 5px;
-            max-width: 900px; margin-left: auto; margin-right: auto;
         }
-        .input-footer span { font-size: 0.6rem; color: #3a5a6a; }
-        @media (max-width: 640px) {
-            .header { padding: 10px 12px; }
-            .header-title h1 { font-size: 1rem; }
-            .message { max-width: 92%; font-size: 0.82rem; }
-            .chat-container { padding: 10px; }
-            .input-container { padding: 10px; }
-            .config-bar { padding: 6px 12px; }
         }
     </style>
 </head>
 <body>
-<div class="header">
-    <div class="header-left">
-        <div class="arc-reactor"></div>
-        <div class="header-title">
-            <h1>J.A.R.V.I.S.</h1>
-            <p>Just A Rather Very Intelligent System</p>
         </div>
     </div>
-    <div class="header-controls">
-        <div class="status-dot" id="statusDot"></div>
-        <button class="ctrl-btn" id="configToggle" onclick="toggleConfig()">⚙ CONFIG</button>
-        <button class="ctrl-btn active" id="ttsToggle" onclick="toggleTTS()">🔊 VOICE</button>
-        <button class="ctrl-btn" onclick="clearChat()">🗑 CLEAR</button>
-    </div>
-</div>
-<!-- Config Panel -->
-<div class="config-bar" id="configPanel">
-    <div class="config-group">
-        <label>LLM:</label>
-        <span class="config-tag" id="llmTag">loading...</span>
-    </div>
-    <div class="config-group">
-        <label>TTS:</label>
-        <span class="config-tag" id="ttsTag">loading...</span>
     </div>
-    <div class="config-group">
-        <label>Voice:</label>
-        <select id="voiceSelect">
-            <option value="Kiki">Kiki</option>
-            <option value="Bella">Bella</option>
-            <option value="Jasper">Jasper</option>
-            <option value="Luna">Luna</option>
-            <option value="Bruno">Bruno</option>
-            <option value="Rosie">Rosie</option>
-            <option value="Hugo">Hugo</option>
-            <option value="Leo">Leo</option>
-        </select>
-    </div>
-    <div class="config-group">
-        <label>Options (set via env vars):</label>
-        <span class="config-tag">LLM_MODE: gemma-3-270m-it | minilm-semantic</span>
-        <span class="config-tag">TTS_MODE: nano-fp32 | nano-int8 | micro | mini</span>
-    </div>
-</div>
-<div class="chat-container" id="chatContainer">
-    <div class="welcome" id="welcome">
-        <div class="big-reactor"></div>
-        <h2>SYSTEMS ONLINE</h2>
-        <p>Type a message below to begin interaction</p>
-        <div class="model-info" id="welcomeInfo">Initializing...</div>
-    </div>
-</div>
-<div class="input-container">
-    <div class="input-wrapper">
-        <input type="text" id="messageInput" placeholder="Talk to J.A.R.V.I.S..." autocomplete="off" />
-        <button id="sendBtn" onclick="sendMessage()">SEND</button>
-    </div>
-    <div class="input-footer">
-        <span id="memoryCount">Memory: 0 turns</span>
-        <span id="modelInfo">Loading...</span>
-    </div>
-</div>
-<script>
-    let sessionId = crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2);
-    let ttsEnabled = true;
-    let isProcessing = false;
-    let msgCounter = 0;
-    let currentVoice = 'Kiki';
-    const chatEl = document.getElementById('chatContainer');
-    const inputEl = document.getElementById('messageInput');
-    const sendBtn = document.getElementById('sendBtn');
-    const welcome = document.getElementById('welcome');
-    inputEl.addEventListener('keydown', e => {
-        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
-    });
-    document.getElementById('voiceSelect').addEventListener('change', function() {
-        currentVoice = this.value;
-    });
-    function toggleTTS() {
-        ttsEnabled = !ttsEnabled;
-        const btn = document.getElementById('ttsToggle');
-        btn.classList.toggle('active', ttsEnabled);
-        btn.textContent = ttsEnabled ? '🔊 VOICE' : '🔇 MUTE';
-    }
-    function toggleConfig() {
-        const panel = document.getElementById('configPanel');
-        const btn = document.getElementById('configToggle');
-        panel.classList.toggle('open');
-        btn.classList.toggle('active');
-    }
-    async function sendMessage() {
-        const text = inputEl.value.trim();
-        if (!text || isProcessing) return;
-        if (welcome) welcome.style.display = 'none';
-        addUserMessage(text);
-        inputEl.value = '';
-        isProcessing = true;
-        sendBtn.disabled = true;
-        const typingEl = showTyping();
-        const msgId = ++msgCounter;
-        try {
-            // Phase 1: Text response
-            const res = await fetch('/chat', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ message: text, session_id: sessionId })
-            });
-            if (!res.ok) throw new Error(`HTTP ${res.status}`);
-            const data = await res.json();
-            typingEl.remove();
-            const msgEl = addAssistantMessage(data.response, msgId);
-            document.getElementById('memoryCount').textContent = `Memory: ${data.memory_length} turns`;
-            // Phase 2: TTS async
-            if (ttsEnabled && data.tts_available) {
-                fetchAndPlayAudio(data.response, msgId, msgEl);
             }
-        } catch (err) {
-            typingEl.remove();
-            addAssistantMessage('System malfunction. Please try again.', msgId);
-            console.error(err);
         }
-        isProcessing = false;
-        sendBtn.disabled = false;
-        inputEl.focus();
-    }
-    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;
-        try {
-            const res = await fetch('/tts', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ text: text, voice: currentVoice })
-            });
-            const data = await res.json();
-            if (data.audio) {
-                if (playBtn) { playBtn.dataset.audio = data.audio; playBtn.disabled = false; playBtn.textContent = '▶ Play'; }
-                if (statusEl) statusEl.textContent = '✅ Ready';
-                playAudioBase64(data.audio);
-            } else {
-                if (statusEl) statusEl.textContent = '⚠️ Voice unavailable';
-                if (playBtn) playBtn.style.display = 'none';
             }
-        } catch (e) {
-            if (statusEl) statusEl.textContent = '⚠️ Voice error';
-            if (playBtn) playBtn.style.display = 'none';
         }
-    }
-    function addUserMessage(text) {
-        const div = document.createElement('div');
-        div.className = 'message user';
-        div.innerHTML = `<div class="text-content">${esc(text)}</div>`;
-        chatEl.appendChild(div);
-        scroll();
-    }
-    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">${esc(text)}</div>
-            ${ttsEnabled ? `
-            <div class="audio-controls">
-                <button class="audio-btn" disabled onclick="replayAudio(this)">⏳</button>
-                <span class="audio-status">Requesting voice...</span>
-            </div>` : ''}`;
-        chatEl.appendChild(div);
-        scroll();
-        return div;
-    }
-    function showTyping() {
-        const div = document.createElement('div');
-        div.className = 'typing-indicator';
-        div.innerHTML = '<span></span><span></span><span></span>';
-        chatEl.appendChild(div);
-        scroll();
-        return div;
-    }
-    function playAudioBase64(b64) {
-        try {
-            const bin = atob(b64);
-            const bytes = new Uint8Array(bin.length);
-            for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
-            const blob = new Blob([bytes], { type: 'audio/wav' });
-            const url = URL.createObjectURL(blob);
-            const audio = new Audio(url);
-            audio.play().catch(e => console.log('Autoplay blocked:', e));
-            audio.onended = () => URL.revokeObjectURL(url);
-        } catch (e) { console.error(e); }
-    }
-    function replayAudio(btn) { if (btn.dataset.audio) playAudioBase64(btn.dataset.audio); }
-    async function clearChat() {
-        await fetch('/clear', {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ session_id: sessionId })
-        });
-        chatEl.innerHTML = `
-            <div class="welcome" id="welcome">
-                <div class="big-reactor"></div>
-                <h2>SYSTEMS ONLINE</h2>
-                <p>Type a message below to begin</p>
-            </div>`;
-        document.getElementById('memoryCount').textContent = 'Memory: 0 turns';
-        sessionId = crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2);
-    }
-    function esc(t) { const d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
-    function scroll() { chatEl.scrollTop = chatEl.scrollHeight; }
-    // Health check & populate config
-    fetch('/health').then(r => r.json()).then(d => {
-        document.getElementById('llmTag').textContent = d.llm_mode;
-        document.getElementById('ttsTag').textContent = d.tts_mode + (d.tts_model === 'DISABLED' ? ' (OFF)' : '');
-        document.getElementById('modelInfo').textContent = `${d.llm_mode} · ${d.tts_mode} · ${d.tts_voice} · CPU`;
-        const wi = document.getElementById('welcomeInfo');
-        if (wi) wi.textContent = `LLM: ${d.llm_mode} | TTS: ${d.tts_mode} | Voice: ${d.tts_voice}`;
-        if (d.tts_model === 'DISABLED') document.getElementById('statusDot').classList.add('error');
-        // Set voice dropdown
-        if (d.tts_voice) { document.getElementById('voiceSelect').value = d.tts_voice; currentVoice = d.tts_voice; }
-    }).catch(() => {});
-    inputEl.focus();
-</script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🦙 LLaMA Chat</title>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
         body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: #0f0f0f;
+            color: #e0e0e0;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
         }
         .header {
+            padding: 16px 24px;
+            background: #1a1a2e;
+            border-bottom: 1px solid #333;
+            text-align: center;
         }
+        .header h1 {
+            font-size: 1.4rem;
+            color: #a78bfa;
         }
+        .header p {
+            font-size: 0.8rem;
+            color: #888;
+            margin-top: 4px;
         }
         .chat-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px 24px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
         }
         .message {
+            max-width: 75%;
+            padding: 12px 16px;
+            border-radius: 16px;
+            line-height: 1.5;
+            font-size: 0.95rem;
+            white-space: pre-wrap;
+            word-wrap: break-word;
         }
         .message.user {
+            align-self: flex-end;
+            background: #4338ca;
+            color: #fff;
+            border-bottom-right-radius: 4px;
         }
         .message.assistant {
+            align-self: flex-start;
+            background: #1e1e2e;
+            color: #d4d4d4;
+            border: 1px solid #333;
+            border-bottom-left-radius: 4px;
         }
+        .message.assistant .typing-cursor {
+            display: inline-block;
+            width: 8px;
+            height: 16px;
+            background: #a78bfa;
+            animation: blink 0.7s infinite;
+            vertical-align: text-bottom;
+            margin-left: 2px;
         }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
         }
+        .input-area {
+            padding: 16px 24px;
+            background: #1a1a2e;
+            border-top: 1px solid #333;
+            display: flex;
+            gap: 12px;
         }
+        .input-area textarea {
+            flex: 1;
+            padding: 12px 16px;
+            border: 1px solid #444;
+            border-radius: 12px;
+            background: #0f0f0f;
+            color: #e0e0e0;
+            font-size: 0.95rem;
+            font-family: inherit;
+            resize: none;
+            outline: none;
+            max-height: 120px;
         }
+        .input-area textarea:focus {
+            border-color: #a78bfa;
         }
+        .input-area button {
+            padding: 12px 24px;
+            background: #7c3aed;
+            color: #fff;
+            border: none;
+            border-radius: 12px;
+            font-size: 0.95rem;
+            cursor: pointer;
+            transition: background 0.2s;
         }
+        .input-area button:hover {
+            background: #6d28d9;
         }
+        .input-area button:disabled {
+            background: #444;
+            cursor: not-allowed;
         }
+        .status {
+            text-align: center;
+            padding: 40px;
+            color: #888;
         }
     </style>
 </head>
 <body>
+    <div class="header">
+        <h1>🦙 LLaMA Chat</h1>
+        <p>SmolLM2 1.7B Instruct • CPU • GGUF</p>
+    </div>
+    <div class="chat-container" id="chatContainer">
+        <div class="status" id="welcome">
+            Type a message below to start chatting!
         </div>
     </div>
+    <div class="input-area">
+        <textarea
+            id="userInput"
+            rows="1"
+            placeholder="Type your message..."
+            onkeydown="handleKey(event)"
+        ></textarea>
+        <button id="sendBtn" onclick="sendMessage()">Send</button>
     </div>
+    <script>
+        const chatContainer = document.getElementById('chatContainer');
+        const userInput = document.getElementById('userInput');
+        const sendBtn = document.getElementById('sendBtn');
+        const welcome = document.getElementById('welcome');
+        let isGenerating = false;
+        // Auto-resize textarea
+        userInput.addEventListener('input', function () {
+            this.style.height = 'auto';
+            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+        });
+        function handleKey(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
             }
         }
+        function addMessage(role, text) {
+            if (welcome) welcome.remove();
+            const div = document.createElement('div');
+            div.className = `message ${role}`;
+            div.textContent = text;
+            chatContainer.appendChild(div);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            return div;
+        }
+        async function sendMessage() {
+            const msg = userInput.value.trim();
+            if (!msg || isGenerating) return;
+            isGenerating = true;
+            sendBtn.disabled = true;
+            userInput.value = '';
+            userInput.style.height = 'auto';
+            addMessage('user', msg);
+            // Create assistant bubble with cursor
+            if (welcome) welcome.remove();
+            const assistantDiv = document.createElement('div');
+            assistantDiv.className = 'message assistant';
+            const cursor = document.createElement('span');
+            cursor.className = 'typing-cursor';
+            assistantDiv.appendChild(cursor);
+            chatContainer.appendChild(assistantDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            try {
+                const response = await fetch('/chat/stream', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message: msg }),
+                });
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let fullText = '';
+                let buffer = '';
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    buffer += decoder.decode(value, { stream: true });
+                    const lines = buffer.split('\n');
+                    buffer = lines.pop(); // keep incomplete line
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            const data = line.slice(6).trim();
+                            if (data === '[DONE]') continue;
+                            try {
+                                const parsed = JSON.parse(data);
+                                if (parsed.content) {
+                                    fullText += parsed.content;
+                                    assistantDiv.textContent = fullText;
+                                    // Re-add cursor
+                                    const newCursor = document.createElement('span');
+                                    newCursor.className = 'typing-cursor';
+                                    assistantDiv.appendChild(newCursor);
+                                    chatContainer.scrollTop = chatContainer.scrollHeight;
+                                }
+                                if (parsed.error) {
+                                    fullText += `\n[Error: ${parsed.error}]`;
+                                    assistantDiv.textContent = fullText;
+                                }
+                            } catch (e) { }
+                        }
+                    }
+                }
+                // Remove cursor when done
+                assistantDiv.textContent = fullText || '(No response)';
+            } catch (err) {
+                assistantDiv.textContent = `Error: ${err.message}`;
             }
+            isGenerating = false;
+            sendBtn.disabled = false;
+            userInput.focus();
         }
+    </script>
 </body>
 </html>