Piper-TTS-Ollama

Running

App Files Files Community

HirCoir commited on 1 day ago

Commit

a762856

•

1 Parent(s): 374e2c4

Update index.html

Browse files

Files changed (1) hide show

index.html +745 -179

index.html CHANGED Viewed

@@ -1,196 +1,762 @@
 <!DOCTYPE html>
-<html lang="es">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Convertidor de Texto a Audio</title>
     <style>
-      body {
-          background-color: #222;
-          color: #eee;
-          font-family: Arial, sans-serif;
-          text-align: center;
-          margin: 0;
-          padding: 0;
-      }
-      h1 {
-          margin-top: 50px;
-      }
-      form {
-          margin-top: 20px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-      }
-      label, select, textarea {
-          margin: 5px;
-          font-size: 16px;
-          color: #eee;
-      }
-      textarea {
-          background-color: #333;
-          color: #eee;
-          border: 1px solid #666;
-          border-radius: 5px;
-          padding: 10px;
-          width: 90%;
-          height: 100px;
-      }
-      select {
-          background-color: #333;
-          color: #eee;
-          border: 1px solid #666;
-          border-radius: 5px;
-          padding: 5px;
-          width: 80%;
-          height: 30px;
-      }
-      button {
-            background-color: #007bff;
-            color: #eee;
-            border: none;
-            border-radius: 5px;
-            padding: 10px 20px;
             cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-        button:hover {
-            background-color: #0056b3;
-        }
-        #audio-container {
-            margin-top: 20px;
-        }
-.animated-button {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 16px 36px;
-  border: 4px solid;
-  border-color: transparent;
-  font-size: 16px;
-  background-color: inherit;
-  border-radius: 100px;
-  font-weight: 600;
-  color: greenyellow;
-  box-shadow: 0 0 0 2px greenyellow;
-  cursor: pointer;
-  overflow: hidden;
-  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
-}
-.animated-button svg {
-  position: absolute;
-  width: 24px;
-  fill: greenyellow;
-  z-index: 9;
-  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
-}
-.animated-button .arr-1 {
-  right: 16px;
-}
-.animated-button .arr-2 {
-  left: -25%;
-}
-.animated-button .circle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 20px;
-  height: 20px;
-  background-color: rgb(208, 162, 246);
-  border-radius: 50%;
-  opacity: 0;
-  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
-}
-.animated-button .text {
-  position: relative;
-  z-index: 1;
-  transform: translateX(-12px);
-  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
-}
-.animated-button:hover {
-  box-shadow: 0 0 0 12px transparent;
-  color: #212121;
-  border-radius: 12px;
-}
-.animated-button:hover .arr-1 {
-  right: -25%;
-}
-.animated-button:hover .arr-2 {
-  left: 16px;
-}
-.animated-button:hover .text {
-  transform: translateX(12px);
-}
-.animated-button:hover svg {
-  fill: #212121;
-}
-.animated-button:active {
-  scale: 0.95;
-  box-shadow: 0 0 0 4px rgb(47, 196, 255);
-}
-.animated-button:hover .circle {
-  width: 220px;
-  height: 220px;
-  opacity: 1;
-}
-      #audio-container {
-          margin-top: 20px;
-      }
-  </style>
 </head>
-<body>
-    <h1>Convertidor de Texto a Audio</h1>
-    <form action="/convert" method="post">
-        <label for="model">Selecciona el modelo ONNX:</label><br>
-<div> <p>Prueba nuevos modelos avanzados en HirLab:</p> <a href="https://tts.hircoir.eu.org" style="color: #ADD8E6;" target="_blank"> Modelos disponibles: Sora Español México, Voz HirCoir, Kamora Español México </a> <p>Try new advanced models at HirLab:</p> <a href="https://tts.hircoir.eu.org" style="color: #ADD8E6;" target="_blank"> Available models: Sora Spanish Mexico, Voz HirCoir, Kamora Spanish Mexico </a> </div>
-        <select id="model" name="model">
-            {% for model in model_options %}
-            <option value="{{ model }}">{{ model }}</option>
-            {% endfor %}
-        </select><br>
-        <label for="text">Texto:</label><br>
-              <textarea placeholder="Escribe tu texto aquí, solo se tomará los primeros 500 carácteres." id="text" name="text" rows="4"></textarea>
-        <button class="animated-button">
-            <svg viewBox="0 0 24 24" class="arr-2" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
-              ></path>
-            </svg>
-            <span class="text">Generar audio</span>
-            <span class="circle"></span>
-            <svg viewBox="0 0 24 24" class="arr-1" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
-              ></path>
-            </svg>
-          </button>
-    </form>
-    <div id="audio-container"></div>
-    <!-- Video de YouTube -->
-    <div style="margin-top: 20px;">
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/pLJTvJ9nJEY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </div>
     <script>
-        document.querySelector('form').addEventListener('submit', async function (e) {
             e.preventDefault();
-            const formData = new FormData(e.target);
-            const response = await fetch('/convert', {
                 method: 'POST',
-                body: formData
             });
-            const data = await response.json();
-            const audioContent = data.audio_base64;
-            const audioElement = document.createElement('audio');
-            audioElement.src = 'data:audio/wav;base64,' + audioContent;
-            audioElement.controls = true;
-            audioElement.autoplay = true; // Autoreproducción del audio
-            document.getElementById('audio-container').innerHTML = '';
-            document.getElementById('audio-container').appendChild(audioElement);
         });
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chat Interface</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
+        :root {
+            --primary-color: #2563eb;
+            --secondary-color: #3b82f6;
+            --background-dark: #111827;
+            --sidebar-dark: #1f2937;
+            --chat-area-dark: #1a1f2b;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: var(--background-dark);
+        }
+        ::-webkit-scrollbar-thumb {
+            background-color: #4b5563;
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background-color: #6b7280;
+        }
+        /* Chat styles */
+        .chat-message {
+            max-width: 85%;
+            word-wrap: break-word;
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        .user-message {
+            background-color: var(--primary-color);
+            color: white;
+            margin-left: auto;
+        }
+        .assistant-message {
+            background-color: var(--chat-area-dark);
+            color: #e5e7eb;
+            margin-right: auto;
+            border: 1px solid #374151;
+        }
+        /* Code blocks */
+        .markdown-content pre {
+            background-color: #1a1f2b;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            overflow-x: auto;
+            margin: 1rem 0;
+            border: 1px solid #374151;
+        }
+        .markdown-content code {
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.9em;
+            padding: 0.2rem 0.4rem;
+            border-radius: 0.25rem;
+            background-color: rgba(45, 55, 72, 0.5);
+        }
+        /* Context Menu Styles */
+        .context-menu {
+            position: fixed;
+            background: var(--sidebar-dark);
+            border: 1px solid #374151;
+            border-radius: 0.5rem;
+            padding: 0.5rem 0;
+            min-width: 160px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            z-index: 1000;
+            display: none;
+        }
+        .context-menu-item {
+            padding: 0.5rem 1rem;
             cursor: pointer;
+            display: flex;
+            align-items: center;
+            transition: background-color 0.2s;
+        }
+        .context-menu-item:hover {
+            background-color: var(--primary-color);
+        }
+        .context-menu-item i {
+            margin-right: 0.5rem;
+            width: 20px;
+        }
+        /* Edit Modal Styles */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 1001;
+        }
+        .modal-content {
+            position: relative;
+            background-color: var(--sidebar-dark);
+            margin: 0;
+            padding: 1.5rem;
+            border-radius: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        .close-modal {
+            position: absolute;
+            right: 1rem;
+            top: 1rem;
+            cursor: pointer;
+            font-size: 1.5rem;
+            color: #9ca3af;
+            transition: color 0.2s;
+        }
+        .close-modal:hover {
+            color: #f3f4f6;
+        }
+        .modal-textarea {
+            flex-grow: 1;
+            margin-bottom: 1rem;
+        }
+        /* Animations */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .sidebar-collapsed {
+            width: 4rem !important;
+        }
+        .sidebar-expanded {
+            width: 18rem;
+        }
+        .transition-width {
+            transition: width 0.3s ease-in-out;
+        }
+        /* Glass effect */
+        .glass-effect {
+            background: rgba(31, 41, 55, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        /* Button effects */
+        .hover-shadow {
+            transition: all 0.3s ease;
+        }
+        .hover-shadow:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        }
+        /* Input focus effects */
+        .input-focus {
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .input-focus:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+            outline: none;
+        }
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .chat-message {
+                max-width: 95%;
+            }
+        }
+        /* Hide sidebar content when collapsed */
+        .sidebar-collapsed .sidebar-content {
+            display: none;
+        }
+        .sidebar-collapsed .sidebar-icon {
+            display: block;
+        }
+        /* Disabled UI styles */
+        .disabled {
+            pointer-events: none;
+            opacity: 0.6;
+        }
+        /* Stop button styles */
+        .stop-button {
+            display: none;
+            animation: pulse 1s infinite;
+        }
+    </style>
 </head>
+<body class="bg-gradient-to-br from-gray-900 to-gray-800 text-gray-100 min-h-screen">
+    <!-- Context Menu -->
+    <div id="contextMenu" class="context-menu">
+        <div class="context-menu-item" id="editMenuItem">
+            <i class="fas fa-edit"></i>
+            <span>Edit</span>
+        </div>
+    </div>
+    <!-- Edit Modal -->
+    <div id="editModal" class="modal">
+        <div class="modal-content">
+            <span class="close-modal">&times;</span>
+            <h2 class="text-xl font-bold mb-4">Edit Message</h2>
+            <textarea id="editMessageInput" class="modal-textarea w-full bg-gray-700 input-focus rounded-lg px-3 py-2 text-sm"></textarea>
+            <div class="flex justify-end space-x-2">
+                <button id="cancelEditBtn" class="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded-lg transition">Cancel</button>
+                <button id="saveEditBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">Save</button>
+            </div>
+        </div>
+    </div>
+    <div class="flex h-screen">
+        <!-- Collapsible Sidebar -->
+        <div id="sidebar" class="transition-width sidebar-expanded bg-gray-800 glass-effect flex flex-col h-full">
+            <div class="p-4 flex items-center justify-between sidebar-icon">
+                <button id="toggleSidebar" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+                <span id="sidebarTitle" class="font-semibold text-lg ml-2 sidebar-content">AI Chat</span>
+            </div>
+            <button id="newChatBtn" class="flex items-center m-4 bg-gradient-to-r from-blue-600 to-blue-500 text-white px-4 py-2 rounded-lg hover-shadow sidebar-content">
+                <i class="fas fa-plus mr-2"></i>
+                <span>New Chat</span>
+            </button>
+            <div class="p-4 sidebar-content">
+                <div class="space-y-3">
+                    <input type="text" id="baseHost" placeholder="Ollama Base Host" value="http://localhost:11434"
+                        class="w-full bg-gray-700 input-focus rounded-lg px-3 py-2 text-sm">
+                    <select id="ollamaModel" class="w-full bg-gray-700 input-focus rounded-lg px-3 py-2 text-sm">
+                        <option value="">Select Model</option>
+                    </select>
+                    <button id="listModelsBtn" class="w-full bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded-lg text-sm transition">
+                        <i class="fas fa-sync-alt mr-2"></i>List Models
+                    </button>
+                </div>
+            </div>
+            <div class="flex-grow overflow-y-auto px-4 sidebar-content">
+                <h3 class="text-sm font-semibold text-gray-400 mb-2">Saved Chats</h3>
+                <div id="chatsList" class="space-y-2">
+                    {% for chat in chat_files %}
+                    <div class="chat-file hover:bg-gray-700 p-2 rounded-lg cursor-pointer transition" data-file="{{ chat }}">
+                        <i class="fas fa-comment-alt mr-2"></i>{{ chat }}
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        <!-- Main Content -->
+        <div class="flex-grow flex flex-col bg-gray-900">
+            <!-- Chat Area -->
+            <div id="chatArea" class="flex-grow overflow-y-auto p-4 space-y-4">
+                <!-- Messages will be inserted here -->
+            </div>
+            <!-- Input Area -->
+            <div class="border-t border-gray-700 p-4 space-y-4">
+                <div class="flex space-x-2">
+                    <textarea id="messageInput" rows="3" placeholder="Type your message here..."
+                        class="flex-grow bg-gray-800 input-focus rounded-lg px-4 py-2 resize-none"></textarea>
+                    <div class="flex flex-col space-y-2">
+                        <button id="sendBtn" class="bg-gradient-to-r from-blue-600 to-blue-500 px-6 py-2 rounded-lg hover-shadow">
+                            <i class="fas fa-paper-plane mr-2"></i>Send
+                        </button>
+                        <button id="stopBtn" class="stop-button bg-red-600 hover:bg-red-700 px-6 py-2 rounded-lg transition">
+                            <i class="fas fa-stop mr-2"></i>Stop
+                        </button>
+                    </div>
+                </div>
+                <!-- TTS Controls -->
+                <div class="flex items-center space-x-4 bg-gray-800 p-4 rounded-lg glass-effect">
+                    <select id="ttsModel" class="bg-gray-700 input-focus rounded-lg px-3 py-2 text-sm">
+                        <option value="">Select TTS Model</option>
+                        {% for model in tts_models %}
+                        <option value="{{ model }}">{{ model }}</option>
+                        {% endfor %}
+                    </select>
+                    <button id="playBtn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg transition">
+                        <i class="fas fa-play mr-2"></i>Play
+                    </button>
+                    <button id="pauseBtn" class="bg-yellow-600 hover:bg-yellow-700 px-4 py-2 rounded-lg transition">
+                        <i class="fas fa-pause mr-2"></i>Pause
+                    </button>
+                    <div class="flex items-center space-x-2">
+                        <i class="fas fa-volume-up text-gray-400"></i>
+                        <input type="range" id="volumeSlider" min="0" max="100" value="100"
+                            class="w-24 accent-blue-500">
+                    </div>
+                    <label class="flex items-center space-x-2 text-sm">
+                        <input type="checkbox" id="removeMarkdown" class="form-checkbox text-blue-500">
+                        <span>Remove Markdown</span>
+                    </label>
+                </div>
+            </div>
+        </div>
     </div>
     <script>
+        let currentChatFile = null;
+        let conversationHistory = [];
+        let currentAudio = null;
+        let currentEventSource = null;
+        let lastAssistantMessage = null;
+        let abortController = null;
+        let selectedOllamaModel = '';
+        let selectedTtsModel = '';
+        let editingMessageIndex = null;
+        function escapeHtml(html) {
+            const div = document.createElement('div');
+            div.textContent = html;
+            return div.innerHTML;
+        }
+        function renderMarkdown(text) {
+            let html = text
+                .replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code class="language-$1">$2</code></pre>')
+                .replace(/`([^`]+)`/g, '<code>$1</code>')
+                .replace(/^### (.*$)/gm, '<h3>$1</h3>')
+                .replace(/^## (.*$)/gm, '<h2>$1</h2>')
+                .replace(/^# (.*$)/gm, '<h1>$1</h1>')
+                .replace(/^\* (.*$)/gm, '<li>$1</li>')
+                .replace(/^\d\. (.*$)/gm, '<li>$1</li>')
+                .replace(/\n\n/g, '</p><p>')
+                .replace(/\n/g, '<br>');
+            return `<p>${html}</p>`;
+        }
+        function addMessage(text, isUser = true, messageIndex = null) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `chat-message ${isUser ? 'user-message' : 'assistant-message'} p-4 rounded-lg`;
+            messageDiv.dataset.index = messageIndex !== null ? messageIndex : conversationHistory.length;
+            const contentDiv = document.createElement('div');
+            contentDiv.className = 'markdown-content';
+            contentDiv.innerHTML = renderMarkdown(text);
+            messageDiv.appendChild(contentDiv);
+            document.getElementById('chatArea').appendChild(messageDiv);
+            scrollToBottom();
+            // Add context menu event listener
+            messageDiv.addEventListener('contextmenu', showContextMenu);
+            return messageDiv;
+        }
+        function scrollToBottom() {
+            const chatArea = document.getElementById('chatArea');
+            chatArea.scrollTop = chatArea.scrollHeight;
+        }
+        function loadChat(chatFile) {
+            fetch(`/api/load_chat/${chatFile}`)
+                .then(response => response.json())
+                .then(data => {
+                    currentChatFile = chatFile;
+                    conversationHistory = data.messages;
+                    document.getElementById('chatArea').innerHTML = '';
+                    conversationHistory.forEach((message, index) => {
+                        addMessage(message.content, message.role === 'user', index);
+                    });
+                });
+        }
+        function showContextMenu(e) {
             e.preventDefault();
+            const contextMenu = document.getElementById('contextMenu');
+            const messageDiv = e.currentTarget;
+            // Store the message index for editing
+            editingMessageIndex = parseInt(messageDiv.dataset.index);
+            // Position the context menu
+            contextMenu.style.left = `${e.pageX}px`;
+            contextMenu.style.top = `${e.pageY}px`;
+            contextMenu.style.display = 'block';
+        }
+        function hideContextMenu() {
+            document.getElementById('contextMenu').style.display = 'none';
+        }
+        function showEditModal(content) {
+            const modal = document.getElementById('editModal');
+            const input = document.getElementById('editMessageInput');
+            input.value = content;
+            modal.style.display = 'block';
+        }
+        function hideEditModal() {
+            document.getElementById('editModal').style.display = 'none';
+            editingMessageIndex = null;
+        }
+        async function saveEditedMessage() {
+            const newContent = document.getElementById('editMessageInput').value;
+            const isUserMessage = conversationHistory[editingMessageIndex].role === 'user';
+            try {
+                const response = await fetch('/api/update_message', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        chat_file: currentChatFile,
+                        message_index: editingMessageIndex,
+                        content: newContent,
+                        is_user: isUserMessage
+                    })
+                });
+                const data = await response.json();
+                if (data.success) {
+                    // Update conversation history and UI
+                    conversationHistory = data.messages;
+                    document.getElementById('chatArea').innerHTML = '';
+                    conversationHistory.forEach((message, index) => {
+                        addMessage(message.content, message.role === 'user', index);
+                    });
+                    // If it was a user message, regenerate the response
+                    if (isUserMessage) {
+                        await sendMessage(false);
+                    }
+                }
+            } catch (error) {
+                console.error('Error saving edited message:', error);
+                alert('Failed to save the edited message');
+            }
+            hideEditModal();
+        }
+        function disableUI() {
+            document.getElementById('sendBtn').disabled = true;
+            document.getElementById('newChatBtn').disabled = true;
+            document.getElementById('listModelsBtn').disabled = true;
+            document.getElementById('messageInput').disabled = true;
+            document.getElementById('sidebar').classList.add('disabled');
+            document.getElementById('chatsList').classList.add('disabled');
+            document.getElementById('stopBtn').style.display = 'block';
+        }
+        function enableUI() {
+            document.getElementById('sendBtn').disabled = false;
+            document.getElementById('newChatBtn').disabled = false;
+            document.getElementById('listModelsBtn').disabled = false;
+            document.getElementById('messageInput').disabled = false;
+            document.getElementById('sidebar').classList.remove('disabled');
+            document.getElementById('chatsList').classList.remove('disabled');
+            document.getElementById('stopBtn').style.display = 'none';
+        }
+        async function sendMessage(addUserMessage = true) {
+            const messageInput = document.getElementById('messageInput');
+            const text = messageInput.value.trim();
+            if (!text && addUserMessage) return;
+            const model = document.getElementById('ollamaModel').value;
+            if (!model) {
+                alert('Please select a model first');
+                return;
+            }
+            if (addUserMessage) {
+                // Add user message
+                addMessage(text, true);
+                messageInput.value = '';
+                // Add to conversation history
+                conversationHistory.push({ role: 'user', content: text });
+            }
+            // Stop any existing EventSource
+            if (currentEventSource) {
+                currentEventSource.close();
+            }
+            const baseHost = document.getElementById('baseHost').value;
+            // Create a new AbortController
+            abortController = new AbortController();
+            // Disable UI
+            disableUI();
+            try {
+                const response = await fetch('/api/chat', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        base_host: baseHost,
+                        model: model,
+                        messages: conversationHistory,
+                        chat_file: currentChatFile || ''
+                    }),
+                    signal: abortController.signal
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let assistantMessage = addMessage('', false);
+                let completeResponse = '';
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done) break;
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n');
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const data = JSON.parse(line.slice(6));
+                                if (data.error) {
+                                    alert(data.error);
+                                    break;
+                                } else if (data.chunk) {
+                                    completeResponse = data.chunk;
+                                    assistantMessage.querySelector('.markdown-content').innerHTML = renderMarkdown(completeResponse);
+                                    scrollToBottom();
+                                } else if (data.done) {
+                                    lastAssistantMessage = completeResponse;
+                                    conversationHistory.push({ role: 'assistant', content: completeResponse });
+                                    // Convert to speech
+                                    const ttsModel = document.getElementById('ttsModel').value;
+                                    if (ttsModel) {
+                                        convertToSpeech(completeResponse, ttsModel);
+                                    }
+                                }
+                            } catch (e) {
+                                console.error('Error parsing SSE data:', e);
+                            }
+                        }
+                    }
+                }
+            } catch (error) {
+                if (error.name === 'AbortError') {
+                    console.log('Fetch aborted');
+                } else {
+                    console.error('Error:', error);
+                    alert('Error sending message: ' + error.message);
+                }
+            } finally {
+                // Enable UI
+                enableUI();
+            }
+        }
+        function convertToSpeech(text, model) {
+            const removeMarkdown = document.getElementById('removeMarkdown').checked;
+            fetch('/api/tts', {
                 method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ text, model, remove_markdown: removeMarkdown })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    alert(data.error);
+                } else {
+                    if (currentAudio) {
+                        currentAudio.pause();
+                    }
+                    currentAudio = new Audio(`/audio/${data.audio_file}`);
+                    currentAudio.volume = document.getElementById('volumeSlider').value / 100;
+                    currentAudio.play();
+                }
             });
+        }
+        // Event Listeners
+        document.getElementById('sendBtn').addEventListener('click', () => sendMessage(true));
+        document.getElementById('messageInput').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage(true);
+            }
+        });
+        document.getElementById('stopBtn').addEventListener('click', () => {
+            if (abortController) {
+                abortController.abort();
+            }
+        });
+        document.getElementById('newChatBtn').addEventListener('click', () => {
+            currentChatFile = null;
+            conversationHistory = [];
+            document.getElementById('chatArea').innerHTML = '';
+            // Restore selected models
+            document.getElementById('ollamaModel').value = selectedOllamaModel;
+            document.getElementById('ttsModel').value = selectedTtsModel;
+        });
+        document.getElementById('listModelsBtn').addEventListener('click', () => {
+            const baseHost = document.getElementById('baseHost').value;
+            fetch(`/api/list_ollama_models?base_host=${encodeURIComponent(baseHost)}`)
+                .then(response => response.json())
+                .then(data => {
+                    const select = document.getElementById('ollamaModel');
+                    select.innerHTML = '<option value="">Select Ollama Model</option>';
+                    data.models.forEach(model => {
+                        const option = document.createElement('option');
+                        option.value = model;
+                        option.textContent = model;
+                        select.appendChild(option);
+                    });
+                });
+        });
+        document.getElementById('playBtn').addEventListener('click', () => {
+            if (currentAudio) {
+                currentAudio.play();
+            } else if (lastAssistantMessage) {
+                const ttsModel = document.getElementById('ttsModel').value;
+                if (ttsModel) {
+                    convertToSpeech(lastAssistantMessage, ttsModel);
+                }
+            }
         });
+        document.getElementById('pauseBtn').addEventListener('click', () => {
+            if (currentAudio) {
+                currentAudio.pause();
+            }
+        });
+        document.getElementById('volumeSlider').addEventListener('input', (e) => {
+            if (currentAudio) {
+                currentAudio.volume = e.target.value / 100;
+            }
+        });
+        document.getElementById('chatsList').addEventListener('click', (e) => {
+            const chatFile = e.target.dataset.file;
+            if (chatFile) {
+                loadChat(chatFile);
+            }
+        });
+        // Store selected models
+        document.getElementById('ollamaModel').addEventListener('change', (e) => {
+            selectedOllamaModel = e.target.value;
+        });
+        document.getElementById('ttsModel').addEventListener('change', (e) => {
+            selectedTtsModel = e.target.value;
+        });
+        // Context Menu Event Listeners
+        document.addEventListener('click', hideContextMenu);
+        document.getElementById('editMenuItem').addEventListener('click', () => {
+            if (editingMessageIndex !== null) {
+                const content = conversationHistory[editingMessageIndex].content;
+                showEditModal(content);
+            }
+            hideContextMenu();
+        });
+        // Edit Modal Event Listeners
+        document.querySelector('.close-modal').addEventListener('click', hideEditModal);
+        document.getElementById('cancelEditBtn').addEventListener('click', hideEditModal);
+        document.getElementById('saveEditBtn').addEventListener('click', saveEditedMessage);
+        // Initial load of Ollama models
+        document.getElementById('listModelsBtn').click();
+        // Add sidebar toggle functionality
+        document.getElementById('toggleSidebar').addEventListener('click', () => {
+            const sidebar = document.getElementById('sidebar');
+            const sidebarTitle = document.getElementById('sidebarTitle');
+            if (sidebar.classList.contains('sidebar-expanded')) {
+                sidebar.classList.remove('sidebar-expanded');
+                sidebar.classList.add('sidebar-collapsed');
+                sidebarTitle.style.display = 'none';
+                document.querySelectorAll('.chat-file span').forEach(span => span.style.display = 'none');
+            } else {
+                sidebar.classList.remove('sidebar-collapsed');
+                sidebar.classList.add('sidebar-expanded');
+                sidebarTitle.style.display = 'block';
+                document.querySelectorAll('.chat-file span').forEach(span => span.style.display = 'inline');
+            }
+        });
+        // Add responsive sidebar behavior
+        function handleResize() {
+            const sidebar = document.getElementById('sidebar');
+            if (window.innerWidth < 768 && !sidebar.classList.contains('sidebar-collapsed')) {
+                sidebar.classList.remove('sidebar-expanded');
+                sidebar.classList.add('sidebar-collapsed');
+                document.getElementById('sidebarTitle').style.display = 'none';
+                document.querySelectorAll('.chat-file span').forEach(span => span.style.display = 'none');
+            }
+        }
+        window.addEventListener('resize', handleResize);
+        handleResize(); // Initial check
     </script>
 </body>
 </html>