Arcypojeb commited on
Commit
2940650
1 Parent(s): ac4d302

Upload 4 files

Browse files
Files changed (3) hide show
  1. Docsbotport.html +176 -0
  2. comp.html +177 -0
  3. flowise.html +174 -0
Docsbotport.html ADDED
@@ -0,0 +1,176 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>HuggingFace Chat Interface</title>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <style>
8
+ #chatbox {
9
+ height: 300px;
10
+ width: 1080px;
11
+ border: 1px solid black;
12
+ overflow: auto;
13
+ padding: 10px;
14
+ }
15
+ #inputbox {
16
+ height: 50px;
17
+ width: 1080px;
18
+ border: 1px solid black;
19
+ padding: 10px;
20
+ }
21
+ .led {
22
+ height: 10px;
23
+ width: 10px;
24
+ border-radius: 50%;
25
+ display: inline-block;
26
+ margin-right: 5px;
27
+ }
28
+ .led-on {
29
+ background-color: green;
30
+ }
31
+ .led-off {
32
+ background-color: red;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body>
37
+ <h1>DocsBot Agents Interface</h1>
38
+ <div id="status">
39
+ <span>Module Running:</span>
40
+ <span class="led led-off" id="module-led"></span>
41
+ <br>
42
+ <span>Chathub Connected:</span>
43
+ <span class="led led-off" id="chathub-led"></span>
44
+ <br>
45
+ <div id="status-msg"></div>
46
+ </div>
47
+ <input type="text" id="port" placeholder="websocket port">
48
+ <button id="connector">CONNECT TO SERVER</button>
49
+ <input type="text" id="inputbox" placeholder="Type your message here...">
50
+ <button id="sendbtn">Send</button>
51
+ <div id="chatbox"></div>
52
+ <br><br>
53
+ <button id="clearbtn">New Chat (or Clear)</button>
54
+ <button id="testbtn">Test Server</button>
55
+ <p id="result"></p>
56
+ <script>
57
+ const mled = document.getElementById("module-led");
58
+ const sled = document.getElementById("chathub-led");
59
+ const testbtn = document.getElementById("testbtn");
60
+ const result = document.getElementById("result");
61
+ const chatbox = document.getElementById("chatbox");
62
+ const port = document.getElementById("port");
63
+ const connector = document.getElementById("connector");
64
+ const inputbox = document.getElementById("inputbox");
65
+ const sendbtn = document.getElementById("sendbtn");
66
+ const clearbtn = document.getElementById("clearbtn");
67
+
68
+ let ws; // WebSocket object
69
+
70
+ // Add a click event listener to the 'test server' button
71
+ testbtn.addEventListener("click", async () => {
72
+ try {
73
+ const response = await fetch("http://127.0.0.1:5000");
74
+
75
+ if (response.ok) {
76
+ result.textContent = "Port 5000 is free";
77
+ } else {
78
+ result.textContent = "Port 5000 is occupied";
79
+ }
80
+ } catch (error) {
81
+ result.textContent = "Cannot connect to port 5000";
82
+ }
83
+ });
84
+
85
+ // Send a question to the chatbot and display the response
86
+ async function askQuestion(question) {
87
+ try {
88
+ const response = await fetch('https://api.docsbot.ai/teams/ZrbLG98bbxZ9EFqiPvyl/bots/oFFiXuQsakcqyEdpLvCB/chat', {
89
+ method: 'POST',
90
+ headers: {
91
+ 'Content-Type': 'application/json'
92
+ },
93
+ body: JSON.stringify({
94
+ question: question,
95
+ full_source: false
96
+ })
97
+ });
98
+ const responseJson = await response.json();
99
+ const outputText = responseJson.answer;
100
+
101
+ // Display the conversation in the chatbox
102
+ chatbox.innerHTML += `<p><strong>You:</strong> ${question}</p>`;
103
+ chatbox.innerHTML += `<p><strong>DocsBot:</strong> ${outputText}</p>`;
104
+ chatbox.scrollTop = chatbox.scrollHeight;
105
+ // Check if WebSocket connection is open before sending message to the server
106
+ if (ws.readyState === WebSocket.OPEN) {
107
+ const message = JSON.stringify({ text: outputText });
108
+ ws.send(message);
109
+ }
110
+ } catch (error) {
111
+ console.error(error);
112
+ }
113
+ }
114
+
115
+ // Use the received text as the question input for the chatbot and display the conversation
116
+ function handleServerMessage(event) {
117
+ // Extract the received text message from the event object
118
+ const receivedText = event.data;
119
+ // Ask the chatbot the received question
120
+ askQuestion(receivedText);
121
+ }
122
+ // Add a click event listener to the 'connect to server' button
123
+ connector.addEventListener("click", async () => {
124
+ try {
125
+ const websocketPort = port.value;
126
+ const localPort = `ws://localhost:${websocketPort}`;
127
+ // Establish a WebSocket connection to the server
128
+ ws = new WebSocket(localPort);
129
+
130
+ // Change the LED status to 'on'
131
+ sled.classList.remove("led-off");
132
+ sled.classList.add("led-on");
133
+
134
+ // Display a success message
135
+ const statusMsg = document.getElementById("status-msg");
136
+ statusMsg.textContent = "Connected successfully to port:", websocketPort;
137
+
138
+ // Listen for incoming messages from the server
139
+ ws.onmessage = handleServerMessage;
140
+
141
+ // Listen for the WebSocket connection to close
142
+ ws.onclose = () => {
143
+ // Change the LED status to 'off'
144
+ sled.classList.remove("led-on");
145
+ sled.classList.add("led-off");
146
+
147
+ // Display a disconnected message
148
+ const statusMsg = document.getElementById("status-msg");
149
+ statusMsg.textContent = "Disconnected from server.";
150
+ };
151
+ } catch (error) {
152
+ console.error(error);
153
+ }
154
+ });
155
+
156
+ // Add a click event listener to the 'send' button
157
+ sendbtn.addEventListener("click", async () => {
158
+ const inputText = inputbox.value;
159
+ chatbox.innerHTML += `<p><strong>User:</strong> ${inputText}</p>`;
160
+ chatbox.scrollTop = chatbox.scrollHeight;
161
+ if (inputText.trim() !== "") {
162
+ // Send message to the server
163
+ const message = JSON.stringify({ text: 'userB: ' + inputText });
164
+ askQuestion(message);
165
+ ws.send(message);
166
+ }
167
+ });
168
+
169
+ // Listen for messages from the server
170
+ ws.onmessage = (event) => {
171
+ const receivedMessage = event.data;
172
+ displayMessage(receivedMessage, "server");
173
+ };
174
+ </script>
175
+ </body>
176
+ </html>
comp.html ADDED
@@ -0,0 +1,177 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>HuggingFace Chat Interface</title>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <style>
8
+ #chatbox {
9
+ height: 300px;
10
+ width: 1080px;
11
+ border: 1px solid black;
12
+ overflow: auto;
13
+ padding: 10px;
14
+ }
15
+ #inputbox {
16
+ height: 20px;
17
+ width: 1080px;
18
+ border: 1px solid black;
19
+ padding: 10px;
20
+ }
21
+ .led {
22
+ height: 10px;
23
+ width: 10px;
24
+ border-radius: 50%;
25
+ display: inline-block;
26
+ margin-right: 5px;
27
+ }
28
+ .led-on {
29
+ background-color: green;
30
+ }
31
+ .led-off {
32
+ background-color: red;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body>
37
+ <h1>Chaindesk Chat Interface</h1>
38
+ <div id="status">
39
+ <span>Module Running:</span>
40
+ <span class="led led-off" id="module-led"></span>
41
+ <br>
42
+ <span>Chathub Connected:</span>
43
+ <span class="led led-off" id="chathub-led"></span>
44
+ <br>
45
+ <div id="status-msg"></div>
46
+ </div>
47
+ <input type="text" id="port" placeholder="websocket port">
48
+ <input type="text" id="flowise" placeholder="paste your agent id here">
49
+ <button id="connector">CONNECT TO SERVER</button>
50
+ <input type="text" id="inputbox" placeholder="Type your message here...">
51
+ <button id="sendbtn">Send</button>
52
+ <div id="chatbox"></div>
53
+ <br><br>
54
+ <button id="clearbtn">New Chat (or Clear)</button>
55
+ <button id="testbtn">Test Server</button>
56
+ <p id="result"></p>
57
+ <script>
58
+ const mled = document.getElementById("module-led");
59
+ const sled = document.getElementById("chathub-led");
60
+ const testbtn = document.getElementById("testbtn");
61
+ const result = document.getElementById("result");
62
+ const chatbox = document.getElementById("chatbox");
63
+ const port = document.getElementById("port");
64
+ const connector = document.getElementById("connector");
65
+ const inputbox = document.getElementById("inputbox");
66
+ const sendbtn = document.getElementById("sendbtn");
67
+ const clearbtn = document.getElementById("clearbtn");
68
+
69
+ let ws; // WebSocket object
70
+
71
+ // Add a click event listener to the 'test server' button
72
+ testbtn.addEventListener("click", async () => {
73
+ try {
74
+ const response = await fetch("http://127.0.0.1:1111");
75
+
76
+ if (response.ok) {
77
+ result.textContent = "Port 1111 is free";
78
+ } else {
79
+ result.textContent = "Port 1111 is occupied";
80
+ }
81
+ } catch (error) {
82
+ result.textContent = "Cannot connect to port 1111";
83
+ }
84
+ });
85
+
86
+ // Send a question to the chatbot and display the response
87
+ async function askQuestion(question) {
88
+ try {
89
+ const id = flowise.value
90
+ const url = `https://api.chaindesk.ai/agents/query/${id}`;
91
+ const response = await fetch(url, {
92
+ method: 'POST',
93
+ headers: {
94
+ 'Content-Type': 'application/json',
95
+ 'Authorization': 'Bearer 5315cd7b-bb79-49bc-bca2-8bcc7b243504'
96
+ },
97
+ body: JSON.stringify({ query: question }),
98
+ });
99
+ const responseJson = await response.json();
100
+ const outputText = responseJson.answer;
101
+ // Display the conversation in the chatbox
102
+ chatbox.innerHTML += `<p><strong>You:</strong> ${question}</p>`;
103
+ chatbox.innerHTML += `<p><strong>DataberryBot:</strong> ${outputText}</p>`;
104
+ chatbox.scrollTop = chatbox.scrollHeight;
105
+
106
+ // Check if WebSocket connection is open before sending message to the server
107
+ if (ws.readyState === WebSocket.OPEN) {
108
+ const message = JSON.stringify({ text: outputText });
109
+ ws.send(message);
110
+ }
111
+ } catch (error) {
112
+ console.error(error);
113
+ }
114
+ }
115
+
116
+ // Use the received text as the question input for the chatbot and display the conversation
117
+ function handleServerMessage(event) {
118
+ // Extract the received text message from the event object
119
+ const receivedText = event.data;
120
+ // Ask the chatbot the received question
121
+ askQuestion(receivedText);
122
+ }
123
+ // Add a click event listener to the 'connect to server' button
124
+ connector.addEventListener("click", async () => {
125
+ try {
126
+ const websocketPort = port.value;
127
+ const localPort = `ws://localhost:${websocketPort}`;
128
+ // Establish a WebSocket connection to the server
129
+ ws = new WebSocket(localPort);
130
+
131
+ // Change the LED status to 'on'
132
+ sled.classList.remove("led-off");
133
+ sled.classList.add("led-on");
134
+
135
+ // Display a success message
136
+ const statusMsg = document.getElementById("status-msg");
137
+ statusMsg.textContent = "Connected successfully to port:", websocketPort;
138
+
139
+ // Listen for incoming messages from the server
140
+ ws.onmessage = handleServerMessage;
141
+
142
+ // Listen for the WebSocket connection to close
143
+ ws.onclose = () => {
144
+ // Change the LED status to 'off'
145
+ sled.classList.remove("led-on");
146
+ sled.classList.add("led-off");
147
+
148
+ // Display a disconnected message
149
+ const statusMsg = document.getElementById("status-msg");
150
+ statusMsg.textContent = "Disconnected from server.";
151
+ };
152
+ } catch (error) {
153
+ console.error(error);
154
+ }
155
+ });
156
+
157
+ // Add a click event listener to the 'send' button
158
+ sendbtn.addEventListener("click", async () => {
159
+ const inputText = inputbox.value;
160
+ chatbox.innerHTML += `<p><strong>User:</strong> ${inputText}</p>`;
161
+ chatbox.scrollTop = chatbox.scrollHeight;
162
+ if (inputText.trim() !== "") {
163
+ // Send message to the server
164
+ const message = JSON.stringify({ text: 'userB: ' + inputText });
165
+ askQuestion(message);
166
+ ws.send(message);
167
+ }
168
+ });
169
+
170
+ // Listen for messages from the server
171
+ ws.onmessage = (event) => {
172
+ const receivedMessage = event.data;
173
+ displayMessage(receivedMessage, "server");
174
+ };
175
+ </script>
176
+ </body>
177
+ </html>
flowise.html ADDED
@@ -0,0 +1,174 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>HuggingFace Chat Interface</title>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <style>
8
+ #chatbox {
9
+ height: 300px;
10
+ width: 1080px;
11
+ border: 1px solid black;
12
+ overflow: auto;
13
+ padding: 10px;
14
+ }
15
+ #inputbox {
16
+ height: 20px;
17
+ width: 1080px;
18
+ border: 1px solid black;
19
+ padding: 10px;
20
+ }
21
+ .led {
22
+ height: 10px;
23
+ width: 10px;
24
+ border-radius: 50%;
25
+ display: inline-block;
26
+ margin-right: 5px;
27
+ }
28
+ .led-on {
29
+ background-color: green;
30
+ }
31
+ .led-off {
32
+ background-color: red;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body>
37
+ <h1>Chaindesk Chat Interface</h1>
38
+ <div id="status">
39
+ <span>Module Running:</span>
40
+ <span class="led led-off" id="module-led"></span>
41
+ <br>
42
+ <span>Chathub Connected:</span>
43
+ <span class="led led-off" id="chathub-led"></span>
44
+ <br>
45
+ <div id="status-msg"></div>
46
+ </div>
47
+ <input type="text" id="port" placeholder="websocket port">
48
+ <input type="text" id="flowise" placeholder="paste your agent id here">
49
+ <button id="connector">CONNECT TO SERVER</button>
50
+ <input type="text" id="inputbox" placeholder="Type your message here...">
51
+ <button id="sendbtn">Send</button>
52
+ <div id="chatbox"></div>
53
+ <br><br>
54
+ <button id="clearbtn">New Chat (or Clear)</button>
55
+ <button id="testbtn">Test Server</button>
56
+ <p id="result"></p>
57
+ <script>
58
+ const mled = document.getElementById("module-led");
59
+ const sled = document.getElementById("chathub-led");
60
+ const testbtn = document.getElementById("testbtn");
61
+ const result = document.getElementById("result");
62
+ const chatbox = document.getElementById("chatbox");
63
+ const port = document.getElementById("port");
64
+ const connector = document.getElementById("connector");
65
+ const inputbox = document.getElementById("inputbox");
66
+ const sendbtn = document.getElementById("sendbtn");
67
+ const clearbtn = document.getElementById("clearbtn");
68
+
69
+ let ws; // WebSocket object
70
+
71
+ // Add a click event listener to the 'test server' button
72
+ testbtn.addEventListener("click", async () => {
73
+ try {
74
+ const response = await fetch("http://127.0.0.1:5000");
75
+
76
+ if (response.ok) {
77
+ result.textContent = "Port 5000 is free";
78
+ } else {
79
+ result.textContent = "Port 5000 is occupied";
80
+ }
81
+ } catch (error) {
82
+ result.textContent = "Cannot connect to port 5000";
83
+ }
84
+ });
85
+
86
+ // Send a question to the chatbot and display the response
87
+ async function askQuestion(question) {
88
+ try {
89
+ const flow = flowise.value
90
+ const url = `https://flowiseai-flowise.hf.space/api/v1/prediction/${flow}`;
91
+ const response = await fetch(url, {
92
+ method: 'POST',
93
+ headers: {'Content-Type': 'application/json',},
94
+ body: JSON.stringify({ "question": question }),
95
+ });
96
+ const responseJson = await response.json();
97
+ // Convert the JSON object into a formatted string
98
+ const responseString = JSON.stringify(responseJson, null, 2);
99
+
100
+ // Display the conversation in the chatbox
101
+ chatbox.innerHTML += `<p><strong>Server:</strong> ${question}</p>`;
102
+ chatbox.innerHTML += `<p><strong>Chatbot:</strong> ${responseString}</p>`;
103
+ chatbox.scrollTop = chatbox.scrollHeight;
104
+ // Check if WebSocket connection is open before sending message to the server
105
+ if (ws.readyState === WebSocket.OPEN) {
106
+ const message = JSON.stringify({ text: 'Flowise-client: ' + responseString });
107
+ ws.send(message);
108
+ }
109
+ } catch (error) {
110
+ console.error(error);
111
+ }
112
+ }
113
+ // Use the received text as the question input for the chatbot and display the conversation
114
+ function handleServerMessage(event) {
115
+ // Extract the received text message from the event object
116
+ const receivedText = event.data;
117
+ // Ask the chatbot the received question
118
+ askQuestion(receivedText);
119
+ }
120
+ // Add a click event listener to the 'connect to server' button
121
+ connector.addEventListener("click", async () => {
122
+ try {
123
+ const websocketPort = port.value;
124
+ const localPort = `ws://localhost:${websocketPort}`;
125
+ // Establish a WebSocket connection to the server
126
+ ws = new WebSocket(localPort);
127
+
128
+ // Change the LED status to 'on'
129
+ sled.classList.remove("led-off");
130
+ sled.classList.add("led-on");
131
+
132
+ // Display a success message
133
+ const statusMsg = document.getElementById("status-msg");
134
+ statusMsg.textContent = "Connected successfully to port:", websocketPort;
135
+
136
+ // Listen for incoming messages from the server
137
+ ws.onmessage = handleServerMessage;
138
+
139
+ // Listen for the WebSocket connection to close
140
+ ws.onclose = () => {
141
+ // Change the LED status to 'off'
142
+ sled.classList.remove("led-on");
143
+ sled.classList.add("led-off");
144
+
145
+ // Display a disconnected message
146
+ const statusMsg = document.getElementById("status-msg");
147
+ statusMsg.textContent = "Disconnected from server.";
148
+ };
149
+ } catch (error) {
150
+ console.error(error);
151
+ }
152
+ });
153
+
154
+ // Add a click event listener to the 'send' button
155
+ sendbtn.addEventListener("click", async () => {
156
+ const inputText = inputbox.value;
157
+ chatbox.innerHTML += `<p><strong>User:</strong> ${inputText}</p>`;
158
+ chatbox.scrollTop = chatbox.scrollHeight;
159
+ if (inputText.trim() !== "") {
160
+ // Send message to the server
161
+ const message = JSON.stringify({ text: 'userB: ' + inputText });
162
+ askQuestion(message);
163
+ ws.send(message);
164
+ }
165
+ });
166
+
167
+ // Listen for messages from the server
168
+ ws.onmessage = (event) => {
169
+ const receivedMessage = event.data;
170
+ displayMessage(receivedMessage, "server");
171
+ };
172
+ </script>
173
+ </body>
174
+ </html>