-
Notifications
You must be signed in to change notification settings - Fork 10
/
Code-Santa.html
204 lines (185 loc) · 6.23 KB
/
Code-Santa.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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!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>
<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>
<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 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 responseasync function askQuestion(question) {
async function askQuestion(question) {
try {
const chatboxText = Array.from(chatbox.children)
.map((child) => child.textContent.trim())
.join("\n");
const response = await fetch("https://bigcode-santa-explains-code.hf.space/api/predict", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
data: [
question,
250,
0.6,
666,
],
}),
});
const data = await response.json();
const outputText = data.data[0];
const decodedOutputText = decodeURIComponent(outputText);
// Display the conversation in the chatbox
chatbox.innerHTML += `<p><strong>Server:</strong> ${question}</p>`;
chatbox.innerHTML += `<p><strong>Chatbot:</strong> ${decodedOutputText}</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({ decodedOutputText });
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);
}
// Periodically fetch the latest log entries and append them to the chatbox
async function updateChatbox() {
try {
const response = await fetch('http://localhost:5000/log');
const logEntries = await response.json();
// Append the new log entries to the chatbox
logEntries.forEach(entry => {
if (entry.sender !== "server") {
chatbox.innerHTML += `<p><strong>${entry.sender}:</strong> ${entry.message}</p>`;
chatbox.scrollTop = chatbox.scrollHeight;
}
})
} catch (error) {
console.error(error);
}
}
// Add a click event listener to the 'connect to server' button
connector.addEventListener("click", async () => {
try {
// Establish a WebSocket connection to the server
ws = new WebSocket('ws://localhost:5000');
// 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 to server successfully.";
// 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: inputText });
askQuestion(message);
ws.send(message);
}
});
// Periodically fetch and update the chatbox
setInterval(updateChatbox, 5000);
// Listen for messages from the server
ws.onmessage = (event) => {
const receivedMessage = event.data;
displayMessage(receivedMessage, "server");
};
</script>
</body>
</html>