Chat-center/flowise ulitmatum.html

<!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: 500px;
      width: 1280px;
      border: 1px solid black;
      overflow: auto;
      padding: 10px;
    }
    #inputbox {
      height: 50px;
      width: 1280px;
      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>HugginFace 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">
  <button id="connector">CONNECT TO SERVER</button>
  <div id="chatbox"></div>
  <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>
  <input type="text" id="flowise" placeholder="paste your flow here">
  <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>