Spaces:
Runtime error
Runtime error
| <head> | |
| <title>LLM Chat</title> | |
| <style> | |
| #chat-container { | |
| width: 80%; | |
| margin: 20px auto; | |
| padding: 20px; | |
| } | |
| #chat-messages { | |
| height: 400px; | |
| border: 1px solid #ccc; | |
| overflow-y: auto; | |
| margin-bottom: 20px; | |
| padding: 10px; | |
| } | |
| #message-input { | |
| width: 80%; | |
| padding: 10px; | |
| } | |
| #send-button { | |
| padding: 10px 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chat-container"> | |
| <div id="chat-messages"></div> | |
| <input type="text" id="message-input" placeholder="Type your message..."> | |
| <button id="send-button">Send</button> | |
| </div> | |
| <script> | |
| const messageInput = document.getElementById('message-input'); | |
| const sendButton = document.getElementById('send-button'); | |
| const chatMessages = document.getElementById('chat-messages'); | |
| async function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (!message) return; | |
| // Add user message to chat | |
| appendMessage('User: ' + message); | |
| messageInput.value = ''; | |
| try { | |
| const response = await fetch('/chat', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ message: message }), | |
| }); | |
| const data = await response.json(); | |
| appendMessage('AI: ' + data.response); | |
| } catch (error) { | |
| appendMessage('Error: Failed to get response'); | |
| } | |
| } | |
| function appendMessage(message) { | |
| const messageElement = document.createElement('div'); | |
| messageElement.textContent = message; | |
| chatMessages.appendChild(messageElement); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| sendButton.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |