Spaces:
Sleeping
Sleeping
| <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: 500px; | |
| width: 1080px; | |
| border: 1px solid black; | |
| overflow: auto; | |
| padding: 10px; | |
| background-color: white; | |
| } | |
| #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> | |
| <br><br> | |
| <input type="text" id="inputbox" placeholder="Type your message here..."> | |
| <br><br> | |
| <button id="sendbtn">Send</button><button id="clearbtn">New Chat (or Clear)</button><button id="testbtn">Test Server</button> | |
| <br><br> | |
| <div id="chatbox"></div> | |
| <br><br> | |
| <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://raufxd-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> |