Spaces:
Sleeping
Sleeping
File size: 5,834 Bytes
2940650 |
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 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
<!DOCTYPE html>
<html>
<head>
<title>HuggingFace Chat Interface</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#chatbox {
height: 300px;
width: 1080px;
border: 1px solid black;
overflow: auto;
padding: 10px;
}
#inputbox {
height: 20px;
width: 1080px;
border: 1px solid black;
padding: 10px;
}
.led {
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.led-on {
background-color: green;
}
.led-off {
background-color: red;
}
</style>
</head>
<body>
<h1>Chaindesk Chat Interface</h1>
<div id="status">
<span>Module Running:</span>
<span class="led led-off" id="module-led"></span>
<br>
<span>Chathub Connected:</span>
<span class="led led-off" id="chathub-led"></span>
<br>
<div id="status-msg"></div>
</div>
<input type="text" id="port" placeholder="websocket port">
<input type="text" id="flowise" placeholder="paste your agent id here">
<button id="connector">CONNECT TO SERVER</button>
<input type="text" id="inputbox" placeholder="Type your message here...">
<button id="sendbtn">Send</button>
<div id="chatbox"></div>
<br><br>
<button id="clearbtn">New Chat (or Clear)</button>
<button id="testbtn">Test Server</button>
<p id="result"></p>
<script>
const mled = document.getElementById("module-led");
const sled = document.getElementById("chathub-led");
const testbtn = document.getElementById("testbtn");
const result = document.getElementById("result");
const chatbox = document.getElementById("chatbox");
const port = document.getElementById("port");
const connector = document.getElementById("connector");
const inputbox = document.getElementById("inputbox");
const sendbtn = document.getElementById("sendbtn");
const clearbtn = document.getElementById("clearbtn");
let ws; // WebSocket object
// Add a click event listener to the 'test server' button
testbtn.addEventListener("click", async () => {
try {
const response = await fetch("http://127.0.0.1:5000");
if (response.ok) {
result.textContent = "Port 5000 is free";
} else {
result.textContent = "Port 5000 is occupied";
}
} catch (error) {
result.textContent = "Cannot connect to port 5000";
}
});
// Send a question to the chatbot and display the response
async function askQuestion(question) {
try {
const flow = flowise.value
const url = `https://flowiseai-flowise.hf.space/api/v1/prediction/${flow}`;
const response = await fetch(url, {
method: 'POST',
headers: {'Content-Type': 'application/json',},
body: JSON.stringify({ "question": question }),
});
const responseJson = await response.json();
// Convert the JSON object into a formatted string
const responseString = JSON.stringify(responseJson, null, 2);
// Display the conversation in the chatbox
chatbox.innerHTML += `<p><strong>Server:</strong> ${question}</p>`;
chatbox.innerHTML += `<p><strong>Chatbot:</strong> ${responseString}</p>`;
chatbox.scrollTop = chatbox.scrollHeight;
// Check if WebSocket connection is open before sending message to the server
if (ws.readyState === WebSocket.OPEN) {
const message = JSON.stringify({ text: 'Flowise-client: ' + responseString });
ws.send(message);
}
} catch (error) {
console.error(error);
}
}
// Use the received text as the question input for the chatbot and display the conversation
function handleServerMessage(event) {
// Extract the received text message from the event object
const receivedText = event.data;
// Ask the chatbot the received question
askQuestion(receivedText);
}
// Add a click event listener to the 'connect to server' button
connector.addEventListener("click", async () => {
try {
const websocketPort = port.value;
const localPort = `ws://localhost:${websocketPort}`;
// Establish a WebSocket connection to the server
ws = new WebSocket(localPort);
// Change the LED status to 'on'
sled.classList.remove("led-off");
sled.classList.add("led-on");
// Display a success message
const statusMsg = document.getElementById("status-msg");
statusMsg.textContent = "Connected successfully to port:", websocketPort;
// Listen for incoming messages from the server
ws.onmessage = handleServerMessage;
// Listen for the WebSocket connection to close
ws.onclose = () => {
// Change the LED status to 'off'
sled.classList.remove("led-on");
sled.classList.add("led-off");
// Display a disconnected message
const statusMsg = document.getElementById("status-msg");
statusMsg.textContent = "Disconnected from server.";
};
} catch (error) {
console.error(error);
}
});
// Add a click event listener to the 'send' button
sendbtn.addEventListener("click", async () => {
const inputText = inputbox.value;
chatbox.innerHTML += `<p><strong>User:</strong> ${inputText}</p>`;
chatbox.scrollTop = chatbox.scrollHeight;
if (inputText.trim() !== "") {
// Send message to the server
const message = JSON.stringify({ text: 'userB: ' + inputText });
askQuestion(message);
ws.send(message);
}
});
// Listen for messages from the server
ws.onmessage = (event) => {
const receivedMessage = event.data;
displayMessage(receivedMessage, "server");
};
</script>
</body>
</html> |