Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Real Estate Chatbot Test UI</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| padding: 20px; | |
| } | |
| #messages { | |
| border: 1px solid #ccc; | |
| padding: 10px; | |
| height: 300px; | |
| overflow-y: auto; | |
| background-color: #f9f9f9; | |
| } | |
| .message { | |
| margin-bottom: 10px; | |
| } | |
| .user { | |
| color: blue; | |
| } | |
| .assistant { | |
| color: green; | |
| } | |
| .system { | |
| color: gray; | |
| } | |
| #inputBox { | |
| width: 80%; | |
| padding: 10px; | |
| font-size: 1em; | |
| } | |
| #sendButton { | |
| padding: 10px 20px; | |
| font-size: 1em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>Real Estate Chatbot</h2> | |
| <div id="messages"></div> | |
| <br> | |
| <input type="text" id="inputBox" placeholder="Type your query here" /> | |
| <button id="sendButton">Send</button> | |
| <script> | |
| // Create a WebSocket connection to your backend | |
| const ws = new WebSocket("ws://localhost:8000/ws"); | |
| // const ws = new WebSocket("wss://pathakdev10-estateguru.hf.space/ws"); | |
| // This variable holds the current assistant message element for live updating. | |
| let currentAssistantMessageEl = null; | |
| // When the connection is opened | |
| ws.onopen = () => { | |
| console.log("WebSocket connection established."); | |
| addMessage("Connected to server.", "system"); | |
| }; | |
| // When a message (token/chunk) is received from the server | |
| ws.onmessage = (event) => { | |
| // If there's no current assistant message element, create one. | |
| if (!currentAssistantMessageEl) { | |
| currentAssistantMessageEl = document.createElement("div"); | |
| currentAssistantMessageEl.classList.add("message", "assistant"); | |
| currentAssistantMessageEl.textContent = "Assistant: "; | |
| document.getElementById("messages").appendChild(currentAssistantMessageEl); | |
| } | |
| // Append the received token/chunk to the existing assistant message. | |
| currentAssistantMessageEl.textContent += event.data; | |
| scrollToBottom(); | |
| }; | |
| // Handle any WebSocket error. | |
| ws.onerror = (error) => { | |
| console.error("WebSocket error:", error); | |
| addMessage("WebSocket error. Please check the console for details.", "system"); | |
| }; | |
| // Utility to add a new message element. | |
| function addMessage(message, type="user") { | |
| const messagesDiv = document.getElementById("messages"); | |
| const newMessage = document.createElement("div"); | |
| newMessage.classList.add("message", type); | |
| newMessage.textContent = message; | |
| messagesDiv.appendChild(newMessage); | |
| scrollToBottom(); | |
| } | |
| // Ensure the messages container scrolls to the bottom. | |
| function scrollToBottom(){ | |
| const messagesDiv = document.getElementById("messages"); | |
| messagesDiv.scrollTop = messagesDiv.scrollHeight; | |
| } | |
| // Send query on button click. | |
| document.getElementById("sendButton").addEventListener("click", () => { | |
| const inputBox = document.getElementById("inputBox"); | |
| const query = inputBox.value.trim(); | |
| if (query) { | |
| // Add user's query. | |
| addMessage("You: " + query, "user"); | |
| // Reset the assistant message element for a new response. | |
| currentAssistantMessageEl = null; | |
| ws.send(query); | |
| inputBox.value = ""; | |
| } | |
| }); | |
| // Also send query when the Enter key is pressed. | |
| document.getElementById("inputBox").addEventListener("keyup", (event) => { | |
| if (event.key === "Enter") { | |
| document.getElementById("sendButton").click(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |