Spaces:

Freefall
/

tts-lmstudio

Running

App Files Files Community

Freefall commited on 11 days ago

Commit

4c3ec3a

verified ·

1 Parent(s): 2b50267

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +854 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Tts Lmstudio
-emoji: 🔥
-colorFrom: purple
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: tts-lmstudio
+emoji: 🐳
+colorFrom: blue
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,854 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LM Studio Chat Interface</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* Pulse animation for streaming indicator */
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.5;
+            }
+        }
+        .animate-pulse {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        /* Smooth transitions */
+        .transition-all {
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 150ms;
+        }
+        /* Chat bubble styling */
+        .user-bubble {
+            background-color: #3b82f6;
+            color: white;
+            border-radius: 18px 18px 4px 18px;
+        }
+        .assistant-bubble {
+            background-color: #f3f4f6;
+            color: #111827;
+            border-radius: 18px 18px 18px 4px;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 h-screen flex overflow-hidden">
+    <!-- Sidebar -->
+    <div class="w-64 bg-white border-r border-gray-200 flex flex-col h-full">
+        <div class="p-4 border-b border-gray-200">
+            <h1 class="text-xl font-bold text-gray-800">LM Studio Chat</h1>
+            <button id="new-chat-btn" class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center">
+                <i class="fas fa-plus mr-2"></i> New Chat
+            </button>
+        </div>
+        <div class="flex-1 overflow-y-auto" id="conversation-list">
+            <!-- Conversations will be loaded here -->
+        </div>
+        <div class="p-4 border-t border-gray-200">
+            <div class="flex items-center space-x-2">
+                <img src="https://ui-avatars.com/api/?name=User&background=3b82f6&color=fff" alt="User" class="w-8 h-8 rounded-full">
+                <span class="font-medium text-gray-700">User</span>
+            </div>
+        </div>
+    </div>
+    <!-- Main Chat Area -->
+    <div class="flex-1 flex flex-col h-full">
+        <!-- Connection and Model Selection Bar -->
+        <div class="bg-white border-b border-gray-200 p-3 flex items-center justify-between">
+            <div class="flex items-center space-x-4">
+                <div class="flex items-center space-x-2">
+                    <span class="text-sm font-medium text-gray-600">Server:</span>
+                    <input id="server-url" type="text" value="http://localhost:1234" class="px-3 py-1 border border-gray-300 rounded-md text-sm w-48">
+                    <button id="connect-btn" class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-md text-sm">
+                        <i class="fas fa-plug mr-1"></i> Connect
+                    </button>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <span class="text-sm font-medium text-gray-600">Model:</span>
+                    <select id="model-select" class="px-3 py-1 border border-gray-300 rounded-md text-sm w-48" disabled>
+                        <option value="">Not connected</option>
+                    </select>
+                </div>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="flex items-center space-x-2">
+                    <span class="text-sm font-medium text-gray-600">TTS Voice:</span>
+                    <select id="voice-select" class="px-3 py-1 border border-gray-300 rounded-md text-sm w-48">
+                        <option value="">Select Voice</option>
+                    </select>
+                </div>
+                <button id="tts-toggle" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md text-sm">
+                    <i class="fas fa-volume-up mr-1"></i> Enable TTS
+                </button>
+            </div>
+        </div>
+        <!-- System Prompt Area -->
+        <div class="bg-gray-100 border-b border-gray-200 p-3">
+            <div class="flex items-center justify-between">
+                <span class="text-sm font-medium text-gray-600">System Prompt:</span>
+                <button id="edit-system-prompt" class="text-blue-600 hover:text-blue-800 text-sm">
+                    <i class="fas fa-edit mr-1"></i> Edit
+                </button>
+            </div>
+            <div id="system-prompt-display" class="mt-1 text-sm text-gray-700 bg-white p-2 rounded border border-gray-200">
+                You are a helpful AI assistant. Be concise and helpful.
+            </div>
+            <div id="system-prompt-edit" class="hidden mt-1">
+                <textarea id="system-prompt-input" class="w-full p-2 border border-gray-300 rounded-md text-sm h-20">You are a helpful AI assistant. Be concise and helpful.</textarea>
+                <div class="flex justify-end space-x-2 mt-2">
+                    <button id="cancel-system-prompt" class="px-3 py-1 border border-gray-300 rounded-md text-sm">Cancel</button>
+                    <button id="save-system-prompt" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md text-sm">Save</button>
+                </div>
+            </div>
+        </div>
+        <!-- Chat Messages -->
+        <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4">
+            <div class="flex justify-center items-center h-full text-gray-400" id="empty-state">
+                <div class="text-center">
+                    <i class="fas fa-comments text-4xl mb-2"></i>
+                    <p>Start a new conversation</p>
+                </div>
+            </div>
+        </div>
+        <!-- Input Area -->
+        <div class="p-4 border-t border-gray-200 bg-white">
+            <div class="relative">
+                <textarea id="message-input" rows="2" class="w-full p-3 pr-16 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none" placeholder="Type your message..."></textarea>
+                <div class="absolute right-3 bottom-3 flex space-x-2">
+                    <button id="send-btn" class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                    <button id="stop-btn" class="bg-red-600 hover:bg-red-700 text-white p-2 rounded-full hidden">
+                        <i class="fas fa-stop"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="flex items-center justify-between mt-2 text-xs text-gray-500">
+                <div>
+                    <span id="connection-status" class="flex items-center">
+                        <span class="w-2 h-2 rounded-full bg-red-500 mr-1"></span>
+                        Disconnected
+                    </span>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <span id="streaming-indicator" class="hidden items-center">
+                        <span class="w-2 h-2 rounded-full bg-green-500 mr-1 animate-pulse"></span>
+                        Streaming
+                    </span>
+                    <span id="tts-indicator" class="hidden items-center">
+                        <span class="w-2 h-2 rounded-full bg-purple-500 mr-1 animate-pulse"></span>
+                        Speaking
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Conversation Settings Modal -->
+    <div id="conversation-settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+        <div class="bg-white rounded-lg p-6 w-96">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-medium">Conversation Settings</h3>
+                <button id="close-settings-modal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
+                    <input type="text" id="conversation-title" class="w-full p-2 border border-gray-300 rounded-md">
+                </div>
+                <div class="flex justify-end space-x-2">
+                    <button id="delete-conversation" class="text-red-600 hover:text-red-800">Delete</button>
+                    <button id="save-conversation-settings" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">Save</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // State management
+        const state = {
+            currentConversationId: null,
+            conversations: [],
+            isConnected: false,
+            models: [],
+            currentModel: null,
+            voices: [],
+            ttsEnabled: false,
+            currentVoice: null,
+            systemPrompt: "You are a helpful AI assistant. Be concise and helpful.",
+            abortController: null,
+            isStreaming: false,
+            isSpeaking: false
+        };
+        // DOM elements
+        const elements = {
+            chatMessages: document.getElementById('chat-messages'),
+            messageInput: document.getElementById('message-input'),
+            sendBtn: document.getElementById('send-btn'),
+            stopBtn: document.getElementById('stop-btn'),
+            serverUrl: document.getElementById('server-url'),
+            connectBtn: document.getElementById('connect-btn'),
+            modelSelect: document.getElementById('model-select'),
+            voiceSelect: document.getElementById('voice-select'),
+            ttsToggle: document.getElementById('tts-toggle'),
+            conversationList: document.getElementById('conversation-list'),
+            newChatBtn: document.getElementById('new-chat-btn'),
+            connectionStatus: document.getElementById('connection-status'),
+            streamingIndicator: document.getElementById('streaming-indicator'),
+            ttsIndicator: document.getElementById('tts-indicator'),
+            emptyState: document.getElementById('empty-state'),
+            systemPromptDisplay: document.getElementById('system-prompt-display'),
+            systemPromptEdit: document.getElementById('system-prompt-edit'),
+            systemPromptInput: document.getElementById('system-prompt-input'),
+            editSystemPrompt: document.getElementById('edit-system-prompt'),
+            cancelSystemPrompt: document.getElementById('cancel-system-prompt'),
+            saveSystemPrompt: document.getElementById('save-system-prompt'),
+            conversationSettingsModal: document.getElementById('conversation-settings-modal'),
+            closeSettingsModal: document.getElementById('close-settings-modal'),
+            conversationTitle: document.getElementById('conversation-title'),
+            deleteConversation: document.getElementById('delete-conversation'),
+            saveConversationSettings: document.getElementById('save-conversation-settings')
+        };
+        // Speech synthesis
+        const synth = window.speechSynthesis;
+        let utterance = null;
+        // Initialize the app
+        function init() {
+            loadVoices();
+            loadConversations();
+            setupEventListeners();
+            // Check if voices are already loaded (sometimes they are)
+            if (synth.getVoices().length > 0) {
+                populateVoiceList();
+            }
+            // Listen for voices changed event
+            synth.onvoiceschanged = populateVoiceList;
+        }
+        // Load available voices for TTS
+        function loadVoices() {
+            state.voices = synth.getVoices();
+            populateVoiceList();
+        }
+        // Populate the voice select dropdown
+        function populateVoiceList() {
+            state.voices = synth.getVoices();
+            elements.voiceSelect.innerHTML = '<option value="">Select Voice</option>';
+            state.voices.forEach(voice => {
+                const option = document.createElement('option');
+                option.textContent = `${voice.name} (${voice.lang})${voice.default ? ' - DEFAULT' : ''}`;
+                option.setAttribute('data-name', voice.name);
+                option.setAttribute('data-lang', voice.lang);
+                elements.voiceSelect.appendChild(option);
+            });
+        }
+        // Load conversations from localStorage
+        function loadConversations() {
+            const savedConversations = localStorage.getItem('lmStudioConversations');
+            if (savedConversations) {
+                state.conversations = JSON.parse(savedConversations);
+                renderConversationList();
+                // If there are conversations, select the first one
+                if (state.conversations.length > 0) {
+                    loadConversation(state.conversations[0].id);
+                }
+            } else {
+                // Create a default conversation if none exist
+                createNewConversation();
+            }
+        }
+        // Save conversations to localStorage
+        function saveConversations() {
+            localStorage.setItem('lmStudioConversations', JSON.stringify(state.conversations));
+        }
+        // Create a new conversation
+        function createNewConversation() {
+            const newConversation = {
+                id: Date.now().toString(),
+                title: `New Conversation ${state.conversations.length + 1}`,
+                messages: [],
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString()
+            };
+            state.conversations.unshift(newConversation);
+            saveConversations();
+            renderConversationList();
+            loadConversation(newConversation.id);
+            // Clear the chat messages and hide empty state
+            elements.chatMessages.innerHTML = '';
+            elements.emptyState.classList.add('hidden');
+        }
+        // Load a conversation by ID
+        function loadConversation(conversationId) {
+            const conversation = state.conversations.find(c => c.id === conversationId);
+            if (!conversation) return;
+            state.currentConversationId = conversationId;
+            renderConversationMessages(conversation.messages);
+            // Update active conversation in the list
+            document.querySelectorAll('.conversation-item').forEach(item => {
+                item.classList.remove('bg-blue-50', 'border-blue-200');
+                if (item.dataset.id === conversationId) {
+                    item.classList.add('bg-blue-50', 'border-blue-200');
+                }
+            });
+            // Hide empty state if there are messages
+            if (conversation.messages.length > 0) {
+                elements.emptyState.classList.add('hidden');
+            } else {
+                elements.emptyState.classList.remove('hidden');
+            }
+        }
+        // Render conversation list in sidebar
+        function renderConversationList() {
+            elements.conversationList.innerHTML = '';
+            state.conversations.forEach(conversation => {
+                const conversationElement = document.createElement('div');
+                conversationElement.className = `p-3 border-b border-gray-200 cursor-pointer hover:bg-gray-50 conversation-item ${state.currentConversationId === conversation.id ? 'bg-blue-50 border-blue-200' : ''}`;
+                conversationElement.dataset.id = conversation.id;
+                conversationElement.innerHTML = `
+                    <div class="flex justify-between items-start">
+                        <div class="flex-1 min-w-0">
+                            <p class="text-sm font-medium text-gray-800 truncate">${conversation.title}</p>
+                            <p class="text-xs text-gray-500">${new Date(conversation.updatedAt).toLocaleString()}</p>
+                        </div>
+                        <button class="text-gray-400 hover:text-gray-600 conversation-settings-btn" data-id="${conversation.id}">
+                            <i class="fas fa-ellipsis-v"></i>
+                        </button>
+                    </div>
+                `;
+                conversationElement.addEventListener('click', () => loadConversation(conversation.id));
+                elements.conversationList.appendChild(conversationElement);
+            });
+            // Add event listeners for settings buttons
+            document.querySelectorAll('.conversation-settings-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    openConversationSettingsModal(btn.dataset.id);
+                });
+            });
+        }
+        // Render messages in the chat area
+        function renderConversationMessages(messages) {
+            elements.chatMessages.innerHTML = '';
+            if (messages.length === 0) {
+                elements.emptyState.classList.remove('hidden');
+                return;
+            }
+            messages.forEach(message => {
+                const messageElement = document.createElement('div');
+                messageElement.className = `flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`;
+                const bubbleClass = message.role === 'user' ? 'user-bubble' : 'assistant-bubble';
+                messageElement.innerHTML = `
+                    <div class="max-w-3/4 ${message.role === 'user' ? 'ml-16' : 'mr-16'}">
+                        <div class="${bubbleClass} p-3 inline-block">
+                            <div class="whitespace-pre-wrap">${message.content}</div>
+                        </div>
+                        <div class="text-xs text-gray-500 mt-1 ${message.role === 'user' ? 'text-right' : 'text-left'}">
+                            ${new Date(message.timestamp).toLocaleTimeString()}
+                            ${message.role === 'assistant' ? `
+                                <button class="ml-2 text-blue-500 hover:text-blue-700 tts-play-btn" data-content="${encodeURIComponent(message.content)}">
+                                    <i class="fas fa-volume-up"></i>
+                                </button>
+                            ` : ''}
+                        </div>
+                    </div>
+                `;
+                elements.chatMessages.appendChild(messageElement);
+            });
+            // Scroll to bottom
+            elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
+            // Add event listeners for TTS buttons
+            document.querySelectorAll('.tts-play-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    const content = decodeURIComponent(btn.dataset.content);
+                    speak(content);
+                });
+            });
+        }
+        // Connect to LM Studio server
+        async function connectToServer() {
+            const serverUrl = elements.serverUrl.value;
+            if (!serverUrl) {
+                showAlert('Please enter a server URL', 'error');
+                return;
+            }
+            try {
+                elements.connectBtn.disabled = true;
+                elements.connectBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Connecting...';
+                // Test connection
+                const response = await fetch(`${serverUrl}/v1/models`, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                });
+                if (!response.ok) {
+                    throw new Error('Failed to connect to server');
+                }
+                const data = await response.json();
+                state.models = data.data;
+                state.isConnected = true;
+                // Update UI
+                elements.modelSelect.disabled = false;
+                elements.modelSelect.innerHTML = '<option value="">Select a model</option>';
+                state.models.forEach(model => {
+                    const option = document.createElement('option');
+                    option.value = model.id;
+                    option.textContent = model.id;
+                    elements.modelSelect.appendChild(option);
+                });
+                elements.connectBtn.innerHTML = '<i class="fas fa-plug mr-1"></i> Connected';
+                elements.connectBtn.className = 'bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-md text-sm';
+                elements.connectionStatus.innerHTML = '<span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span> Connected';
+                showAlert('Successfully connected to server', 'success');
+            } catch (error) {
+                console.error('Connection error:', error);
+                showAlert(`Connection failed: ${error.message}`, 'error');
+                elements.connectBtn.disabled = false;
+                elements.connectBtn.innerHTML = '<i class="fas fa-plug mr-1"></i> Connect';
+            }
+        }
+        // Send message to LM Studio
+        async function sendMessage() {
+            const message = elements.messageInput.value.trim();
+            if (!message || !state.isConnected || !state.currentModel) return;
+            // Add user message to conversation
+            const userMessage = {
+                role: 'user',
+                content: message,
+                timestamp: new Date().toISOString()
+            };
+            addMessageToCurrentConversation(userMessage);
+            elements.messageInput.value = '';
+            // Create assistant message placeholder
+            const assistantMessage = {
+                role: 'assistant',
+                content: '',
+                timestamp: new Date().toISOString()
+            };
+            const messageId = addMessageToCurrentConversation(assistantMessage);
+            // Prepare the request
+            const messages = [
+                { role: 'system', content: state.systemPrompt },
+                ...getCurrentConversation().messages
+                    .filter(m => m.role !== 'system')
+                    .map(m => ({ role: m.role, content: m.content }))
+            ];
+            state.abortController = new AbortController();
+            state.isStreaming = true;
+            elements.streamingIndicator.classList.remove('hidden');
+            elements.stopBtn.classList.remove('hidden');
+            elements.sendBtn.classList.add('hidden');
+            try {
+                const response = await fetch(`${elements.serverUrl.value}/v1/chat/completions`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        model: state.currentModel,
+                        messages: messages,
+                        stream: true,
+                        temperature: 0.7,
+                        max_tokens: 1000
+                    }),
+                    signal: state.abortController.signal
+                });
+                if (!response.ok) {
+                    throw new Error(`Server responded with ${response.status}`);
+                }
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let assistantMessageContent = '';
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n').filter(line => line.trim() !== '');
+                    for (const line of lines) {
+                        if (line.startsWith('data: ') && !line.includes('[DONE]')) {
+                            try {
+                                const data = JSON.parse(line.substring(6));
+                                if (data.choices && data.choices[0].delta && data.choices[0].delta.content) {
+                                    assistantMessageContent += data.choices[0].delta.content;
+                                    updateMessageContent(messageId, assistantMessageContent);
+                                }
+                            } catch (e) {
+                                console.error('Error parsing stream data:', e);
+                            }
+                        }
+                    }
+                }
+                // If TTS is enabled, speak the response
+                if (state.ttsEnabled && state.currentVoice) {
+                    speak(assistantMessageContent);
+                }
+            } catch (error) {
+                if (error.name !== 'AbortError') {
+                    console.error('Error streaming response:', error);
+                    showAlert(`Error: ${error.message}`, 'error');
+                }
+            } finally {
+                state.isStreaming = false;
+                elements.streamingIndicator.classList.add('hidden');
+                elements.stopBtn.classList.add('hidden');
+                elements.sendBtn.classList.remove('hidden');
+                state.abortController = null;
+            }
+        }
+        // Stop streaming
+        function stopStreaming() {
+            if (state.abortController) {
+                state.abortController.abort();
+                state.isStreaming = false;
+                elements.streamingIndicator.classList.add('hidden');
+                elements.stopBtn.classList.add('hidden');
+                elements.sendBtn.classList.remove('hidden');
+            }
+            if (state.isSpeaking) {
+                synth.cancel();
+                state.isSpeaking = false;
+                elements.ttsIndicator.classList.add('hidden');
+            }
+        }
+        // Add message to current conversation
+        function addMessageToCurrentConversation(message) {
+            const conversation = getCurrentConversation();
+            if (!conversation) return null;
+            const messageId = Date.now().toString();
+            conversation.messages.push({
+                ...message,
+                id: messageId
+            });
+            conversation.updatedAt = new Date().toISOString();
+            saveConversations();
+            renderConversationMessages(conversation.messages);
+            return messageId;
+        }
+        // Update message content
+        function updateMessageContent(messageId, content) {
+            const conversation = getCurrentConversation();
+            if (!conversation) return;
+            const message = conversation.messages.find(m => m.id === messageId);
+            if (message) {
+                message.content = content;
+                message.timestamp = new Date().toISOString();
+                conversation.updatedAt = new Date().toISOString();
+                // Update the UI
+                const messageElement = document.querySelector(`[data-id="${messageId}"]`);
+                if (messageElement) {
+                    messageElement.querySelector('.whitespace-pre-wrap').textContent = content;
+                }
+                // Scroll to bottom
+                elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
+            }
+        }
+        // Get current conversation
+        function getCurrentConversation() {
+            return state.conversations.find(c => c.id === state.currentConversationId);
+        }
+        // Speak text using TTS
+        function speak(text) {
+            if (synth.speaking) {
+                synth.cancel();
+            }
+            if (!state.currentVoice) {
+                showAlert('Please select a voice first', 'error');
+                return;
+            }
+            utterance = new SpeechSynthesisUtterance(text);
+            utterance.voice = state.currentVoice;
+            utterance.rate = 1.0;
+            utterance.pitch = 1.0;
+            utterance.onstart = () => {
+                state.isSpeaking = true;
+                elements.ttsIndicator.classList.remove('hidden');
+            };
+            utterance.onend = () => {
+                state.isSpeaking = false;
+                elements.ttsIndicator.classList.add('hidden');
+            };
+            utterance.onerror = (event) => {
+                console.error('Speech synthesis error:', event);
+                state.isSpeaking = false;
+                elements.ttsIndicator.classList.add('hidden');
+                showAlert('Error with speech synthesis', 'error');
+            };
+            synth.speak(utterance);
+        }
+        // Toggle TTS
+        function toggleTTS() {
+            state.ttsEnabled = !state.ttsEnabled;
+            if (state.ttsEnabled) {
+                elements.ttsToggle.innerHTML = '<i class="fas fa-volume-up mr-1"></i> Disable TTS';
+                elements.ttsToggle.className = 'bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md text-sm';
+                showAlert('Text-to-speech enabled', 'success');
+            } else {
+                elements.ttsToggle.innerHTML = '<i class="fas fa-volume-up mr-1"></i> Enable TTS';
+                elements.ttsToggle.className = 'bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md text-sm';
+                // Stop any ongoing speech
+                if (synth.speaking) {
+                    synth.cancel();
+                }
+            }
+        }
+        // Open conversation settings modal
+        function openConversationSettingsModal(conversationId) {
+            const conversation = state.conversations.find(c => c.id === conversationId);
+            if (!conversation) return;
+            elements.conversationTitle.value = conversation.title;
+            elements.conversationSettingsModal.dataset.id = conversationId;
+            elements.conversationSettingsModal.classList.remove('hidden');
+        }
+        // Save conversation settings
+        function saveConversationSettings() {
+            const conversationId = elements.conversationSettingsModal.dataset.id;
+            const conversation = state.conversations.find(c => c.id === conversationId);
+            if (!conversation) return;
+            conversation.title = elements.conversationTitle.value.trim() || conversation.title;
+            conversation.updatedAt = new Date().toISOString();
+            saveConversations();
+            renderConversationList();
+            elements.conversationSettingsModal.classList.add('hidden');
+        }
+        // Delete conversation
+        function deleteConversation() {
+            const conversationId = elements.conversationSettingsModal.dataset.id;
+            // Confirm deletion
+            if (!confirm('Are you sure you want to delete this conversation?')) {
+                return;
+            }
+            // Remove the conversation
+            state.conversations = state.conversations.filter(c => c.id !== conversationId);
+            // If we deleted the current conversation, select another one or create a new one
+            if (state.currentConversationId === conversationId) {
+                if (state.conversations.length > 0) {
+                    loadConversation(state.conversations[0].id);
+                } else {
+                    createNewConversation();
+                }
+            }
+            saveConversations();
+            renderConversationList();
+            elements.conversationSettingsModal.classList.add('hidden');
+        }
+        // Show alert message
+        function showAlert(message, type) {
+            const alert = document.createElement('div');
+            alert.className = `fixed top-4 right-4 p-4 rounded-md shadow-md text-white ${
+                type === 'error' ? 'bg-red-500' :
+                type === 'success' ? 'bg-green-500' : 'bg-blue-500'
+            }`;
+            alert.textContent = message;
+            document.body.appendChild(alert);
+            setTimeout(() => {
+                alert.classList.add('opacity-0', 'transition-opacity', 'duration-300');
+                setTimeout(() => alert.remove(), 300);
+            }, 3000);
+        }
+        // Setup event listeners
+        function setupEventListeners() {
+            // Send message on Enter (Shift+Enter for new line)
+            elements.messageInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+            // Send button
+            elements.sendBtn.addEventListener('click', sendMessage);
+            // Stop button
+            elements.stopBtn.addEventListener('click', stopStreaming);
+            // Connect button
+            elements.connectBtn.addEventListener('click', connectToServer);
+            // Model selection
+            elements.modelSelect.addEventListener('change', (e) => {
+                state.currentModel = e.target.value;
+            });
+            // Voice selection
+            elements.voiceSelect.addEventListener('change', (e) => {
+                const selectedOption = e.target.selectedOptions[0];
+                if (selectedOption.value === '') {
+                    state.currentVoice = null;
+                } else {
+                    const voiceName = selectedOption.dataset.name;
+                    state.currentVoice = state.voices.find(v => v.name === voiceName);
+                }
+            });
+            // TTS toggle
+            elements.ttsToggle.addEventListener('click', toggleTTS);
+            // New conversation button
+            elements.newChatBtn.addEventListener('click', createNewConversation);
+            // System prompt edit
+            elements.editSystemPrompt.addEventListener('click', () => {
+                elements.systemPromptDisplay.classList.add('hidden');
+                elements.systemPromptEdit.classList.remove('hidden');
+            });
+            // Cancel system prompt edit
+            elements.cancelSystemPrompt.addEventListener('click', () => {
+                elements.systemPromptInput.value = state.systemPrompt;
+                elements.systemPromptEdit.classList.add('hidden');
+                elements.systemPromptDisplay.classList.remove('hidden');
+            });
+            // Save system prompt
+            elements.saveSystemPrompt.addEventListener('click', () => {
+                state.systemPrompt = elements.systemPromptInput.value.trim() || state.systemPrompt;
+                elements.systemPromptDisplay.textContent = state.systemPrompt;
+                elements.systemPromptEdit.classList.add('hidden');
+                elements.systemPromptDisplay.classList.remove('hidden');
+                showAlert('System prompt updated', 'success');
+            });
+            // Conversation settings modal
+            elements.closeSettingsModal.addEventListener('click', () => {
+                elements.conversationSettingsModal.classList.add('hidden');
+            });
+            // Save conversation settings
+            elements.saveConversationSettings.addEventListener('click', saveConversationSettings);
+            // Delete conversation
+            elements.deleteConversation.addEventListener('click', deleteConversation);
+            // Close modal when clicking outside
+            elements.conversationSettingsModal.addEventListener('click', (e) => {
+                if (e.target === elements.conversationSettingsModal) {
+                    elements.conversationSettingsModal.classList.add('hidden');
+                }
+            });
+        }
+        // Initialize the app when DOM is loaded
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Freefall/tts-lmstudio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ I need a front end chat interface that will use LMstudio server running on the backend and this beautiful frontend chat interface needs to have great sounding TTS text-to-speech. You should be able to connect to LMSTUDIO, select a model from there unless its already running then its a drop down. The repsonse from the server should be streaming so you see the text at is generates it and not one big blob at the end. You should be able to set a system prompt from the interface as well. Edit conversations, delete and create conversations and they should be stored off to the side. Like any chat interface for LLM except the main part is it has to have some kind of TTS there are plenty of options out there. lets try one of the many free options.