-
Notifications
You must be signed in to change notification settings - Fork 10
/
Docsbotport.html
177 lines (164 loc) · 5.68 KB
/
Docsbotport.html
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
175
176
177
<!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 response = await fetch('https://api.docsbot.ai/teams/ZrbLG98bbxZ9EFqiPvyl/bots/oFFiXuQsakcqyEdpLvCB/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
question: question,
full_source: false
})
});
const responseJson = await response.json();
const outputText = responseJson.answer;
// Display the conversation in the chatbox
chatbox.innerHTML += `<p><strong>You:</strong> ${question}</p>`;
chatbox.innerHTML += `<p><strong>DocsBot:</strong> ${outputText}</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: outputText });
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>