Spaces:
Sleeping
Sleeping
File size: 3,668 Bytes
946a8d2 d54731f 946a8d2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<!DOCTYPE html>
<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>
|