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>