Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Deepseek Chat</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="{{ url_for('static', path='/styles.css') }}"> | |
| </head> | |
| <body class="bg-gray-100 h-screen"> | |
| <div class="container mx-auto px-4 h-screen flex flex-col"> | |
| <header class="py-4"> | |
| <h1 class="text-2xl font-bold text-gray-800">Deepseek Chat</h1> | |
| </header> | |
| <div class="flex-1 bg-white rounded-lg shadow-lg flex flex-col"> | |
| <div id="chat-messages" class="flex-1 p-4 overflow-y-auto space-y-4"> | |
| <!-- Messages will be inserted here --> | |
| </div> | |
| <div class="border-t p-4"> | |
| <form id="chat-form" class="flex space-x-4"> | |
| <input type="text" | |
| id="message-input" | |
| class="flex-1 rounded-lg border border-gray-300 px-4 py-2 focus:outline-none focus:border-blue-500" | |
| placeholder="Type your message..."> | |
| <button type="submit" | |
| id="send-button" | |
| class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 focus:outline-none transition-colors duration-200"> | |
| Send | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const chatForm = document.getElementById('chat-form'); | |
| const messageInput = document.getElementById('message-input'); | |
| const sendButton = document.getElementById('send-button'); | |
| function appendMessage(content, isUser, isLoading = false) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`; | |
| const bubble = document.createElement('div'); | |
| bubble.className = `max-w-[70%] rounded-lg p-3 ${ | |
| isUser ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-800' | |
| } ${isLoading ? 'typing-indicator' : ''}`; | |
| if (isLoading) { | |
| bubble.innerHTML = '<span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>'; | |
| } else { | |
| bubble.textContent = content; | |
| } | |
| messageDiv.appendChild(bubble); | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| return messageDiv; | |
| } | |
| chatForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const message = messageInput.value.trim(); | |
| if (!message) return; | |
| // Disable input and button | |
| messageInput.disabled = true; | |
| sendButton.disabled = true; | |
| sendButton.classList.add('opacity-50'); | |
| // Clear input | |
| messageInput.value = ''; | |
| // Add user message | |
| appendMessage(message, true); | |
| // Add loading message | |
| const loadingDiv = appendMessage('', false, true); | |
| try { | |
| const response = await fetch('/chat', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ message }), | |
| }); | |
| const data = await response.json(); | |
| // Remove loading message | |
| loadingDiv.remove(); | |
| // Add AI response | |
| appendMessage(data.response, false); | |
| } catch (error) { | |
| // Remove loading message | |
| loadingDiv.remove(); | |
| appendMessage('Sorry, something went wrong. Please try again.', false); | |
| console.error('Error:', error); | |
| } finally { | |
| // Re-enable input and button | |
| messageInput.disabled = false; | |
| sendButton.disabled = false; | |
| sendButton.classList.remove('opacity-50'); | |
| messageInput.focus(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |