Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chat Interface</title> | |
| <style> | |
| #chat-container { | |
| display: flex; | |
| flex-direction: column; | |
| width: 300px; | |
| margin: 0 auto; | |
| } | |
| #chat-box { | |
| border: 1px solid #ccc; | |
| padding: 10px; | |
| height: 200px; | |
| overflow-y: scroll; | |
| margin-bottom: 10px; | |
| } | |
| #console-output { | |
| border: 1px solid #ccc; | |
| padding: 10px; | |
| height: 200px; | |
| overflow-y: scroll; | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Chat Interface</h1> | |
| <div id="chat-container"> | |
| <div id="chat-box"></div> | |
| <input type="text" id="chat-input" placeholder="Type your message here..."> | |
| <button id="send-button">Send</button> | |
| </div> | |
| <h2>Console Output</h2> | |
| <div id="console-output"></div> | |
| <script> | |
| const chatBox = document.getElementById('chat-box'); | |
| const chatInput = document.getElementById('chat-input'); | |
| const sendButton = document.getElementById('send-button'); | |
| const consoleOutput = document.getElementById('console-output'); | |
| sendButton.addEventListener('click', () => { | |
| const message = chatInput.value; | |
| if (message) { | |
| fetch('/api/generate', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ prompt: message }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| const responseMessage = document.createElement('div'); | |
| responseMessage.textContent = `Bot: ${data.response}`; | |
| chatBox.appendChild(responseMessage); | |
| }); | |
| const userMessage = document.createElement('div'); | |
| userMessage.textContent = `You: ${message}`; | |
| chatBox.appendChild(userMessage); | |
| chatInput.value = ''; | |
| } | |
| }); | |
| const eventSource = new EventSource('/logs'); | |
| eventSource.onmessage = function(event) { | |
| const logMessage = document.createElement('div'); | |
| logMessage.textContent = event.data; | |
| consoleOutput.appendChild(logMessage); | |
| }; | |
| eventSource.onmessage = function(event) { | |
| const logMessage = document.createElement('div'); | |
| logMessage.textContent = event.data; | |
| consoleOutput.appendChild(logMessage); | |
| }; | |
| </script> | |
| </body> | |
| </html> | |