Spaces:
Runtime error
Runtime error
removed unnessary files
Browse files- app/css/main.css +0 -109
- app/js/main.js +0 -122
app/css/main.css
DELETED
@@ -1,109 +0,0 @@
|
|
1 |
-
body {
|
2 |
-
font-family: "Arial, Courier New", sans-serif;
|
3 |
-
text-align: center;
|
4 |
-
}
|
5 |
-
|
6 |
-
h1 {
|
7 |
-
margin: 10px 10px;
|
8 |
-
}
|
9 |
-
|
10 |
-
.buttons {
|
11 |
-
font-size: 2em;
|
12 |
-
display: flex;
|
13 |
-
justify-content: center;
|
14 |
-
}
|
15 |
-
|
16 |
-
.button, .value {
|
17 |
-
line-height: 1;
|
18 |
-
padding: 1rem;
|
19 |
-
margin: 1rem;
|
20 |
-
border: medium solid;
|
21 |
-
min-height: 1em;
|
22 |
-
min-width: 1em;
|
23 |
-
}
|
24 |
-
|
25 |
-
.button {
|
26 |
-
cursor: pointer;
|
27 |
-
user-select: none;
|
28 |
-
}
|
29 |
-
|
30 |
-
.minus {
|
31 |
-
color: red;
|
32 |
-
}
|
33 |
-
|
34 |
-
.plus {
|
35 |
-
color: green;
|
36 |
-
}
|
37 |
-
|
38 |
-
.value {
|
39 |
-
min-width: 2em;
|
40 |
-
}
|
41 |
-
|
42 |
-
.state {
|
43 |
-
font-size: 2em;
|
44 |
-
}
|
45 |
-
|
46 |
-
.container {
|
47 |
-
min-width: 30em;
|
48 |
-
max-width: 40em;
|
49 |
-
}
|
50 |
-
|
51 |
-
.accordion-collapse {
|
52 |
-
padding: 5px 5px 0 5px;
|
53 |
-
}
|
54 |
-
|
55 |
-
.chat-container {
|
56 |
-
margin: 10px 0;
|
57 |
-
min-height: 300px;
|
58 |
-
max-height: 600px;
|
59 |
-
overflow: auto;
|
60 |
-
}
|
61 |
-
|
62 |
-
.bot-personality {
|
63 |
-
text-align: left;
|
64 |
-
margin: 0 0 5px 0;
|
65 |
-
}
|
66 |
-
|
67 |
-
.chat-parameter {
|
68 |
-
text-align: left;
|
69 |
-
margin: 5px 0 5px 0;
|
70 |
-
}
|
71 |
-
|
72 |
-
.bot-personality input {
|
73 |
-
margin: 5px 0 0 0;
|
74 |
-
min-width: 20em;
|
75 |
-
}
|
76 |
-
|
77 |
-
.message {
|
78 |
-
margin: 5px 0;
|
79 |
-
}
|
80 |
-
|
81 |
-
.message-inner {
|
82 |
-
font-size: 16px;
|
83 |
-
}
|
84 |
-
|
85 |
-
.outgoing {
|
86 |
-
text-align: right;
|
87 |
-
}
|
88 |
-
|
89 |
-
.outgoing .badge {
|
90 |
-
text-align: right;
|
91 |
-
}
|
92 |
-
|
93 |
-
.botPersonality, .incoming, .incoming .badge, .chat-suggestion, .server-message, .parameters {
|
94 |
-
text-align: left;
|
95 |
-
}
|
96 |
-
|
97 |
-
.chat-suggestion, .server-message
|
98 |
-
{
|
99 |
-
padding-left: 5px;
|
100 |
-
}
|
101 |
-
|
102 |
-
.server-message-value {
|
103 |
-
font-style: italic;
|
104 |
-
}
|
105 |
-
|
106 |
-
#collapseParameter {
|
107 |
-
width: 300px;
|
108 |
-
margin: 8px 0px;
|
109 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
app/js/main.js
DELETED
@@ -1,122 +0,0 @@
|
|
1 |
-
updateValue = function(id, value) {
|
2 |
-
document.getElementById(id).innerText = value;
|
3 |
-
}
|
4 |
-
|
5 |
-
htmlToElement = function(html) {
|
6 |
-
let template = document.createElement('template');
|
7 |
-
html = html.trim(); // Never return a text node of whitespace as the result
|
8 |
-
template.innerHTML = html;
|
9 |
-
return template.content.firstChild;
|
10 |
-
}
|
11 |
-
|
12 |
-
pageSetup = function() {
|
13 |
-
const minus = document.querySelector('.minus');
|
14 |
-
const plus = document.querySelector('.plus');
|
15 |
-
const value = document.querySelector('.value');
|
16 |
-
// const users = document.querySelector('.users');
|
17 |
-
const userInput = document.querySelector('.user-input');
|
18 |
-
const userInputButton = document.querySelector('.user-input-button');
|
19 |
-
const serverMessageValue = document.querySelector('.server-message-value');
|
20 |
-
const messages = document.querySelector('.messages');
|
21 |
-
const updatePersonality = document.getElementById("updatePersonality")
|
22 |
-
const websocket = new WebSocket("wss://gpt2-chat.ai-research.id/");
|
23 |
-
//const websocket = new WebSocket("ws://localhost:8502/");
|
24 |
-
|
25 |
-
minus.onclick = function () {
|
26 |
-
websocket.send(JSON.stringify({action: 'minus'}));
|
27 |
-
}
|
28 |
-
|
29 |
-
plus.onclick = function () {
|
30 |
-
websocket.send(JSON.stringify({action: 'plus'}));
|
31 |
-
}
|
32 |
-
|
33 |
-
updatePersonality.onclick = function () {
|
34 |
-
const elements = document.querySelectorAll(".bot-personality input")
|
35 |
-
let data = {
|
36 |
-
"action": "personality",
|
37 |
-
"message": []
|
38 |
-
}
|
39 |
-
for (let i = 0; i < Math.min(elements.length, 5); i++) {
|
40 |
-
if(elements[i].value.length >0)
|
41 |
-
data.message.push(elements[i].value);
|
42 |
-
}
|
43 |
-
websocket.send(JSON.stringify(data));
|
44 |
-
}
|
45 |
-
|
46 |
-
let getParameters = function() {
|
47 |
-
return {
|
48 |
-
"do_sample": document.getElementById("doSample").checked,
|
49 |
-
"min_length": parseInt(document.getElementById("minLength").value),
|
50 |
-
"max_length": parseInt(document.getElementById("maxLength").value),
|
51 |
-
"temperature": parseFloat(document.getElementById("temperature").value),
|
52 |
-
"top_k": parseInt(document.getElementById("topK").value),
|
53 |
-
"top_p": parseFloat(document.getElementById("topP").value),
|
54 |
-
};
|
55 |
-
}
|
56 |
-
|
57 |
-
let processUserInput = function (userInput) {
|
58 |
-
let parameters = getParameters();
|
59 |
-
parameters["action"] = "talk";
|
60 |
-
parameters["utterance"] = userInput.value;
|
61 |
-
websocket.send(JSON.stringify(parameters));
|
62 |
-
const element = htmlToElement("<div class=\"message outgoing\"><div class=\"message-inner badge bg-primary text-wrap\">"
|
63 |
-
+ userInput.value + "</div></div>");
|
64 |
-
userInput.value = "";
|
65 |
-
messages.appendChild(element);
|
66 |
-
messages.scrollIntoView(false)
|
67 |
-
}
|
68 |
-
|
69 |
-
userInputButton.onclick = function () {
|
70 |
-
processUserInput(userInput);
|
71 |
-
}
|
72 |
-
|
73 |
-
userInput.addEventListener("keyup", function(event) {
|
74 |
-
if (event.keyCode === 13) {
|
75 |
-
// Cancel the default action, if needed
|
76 |
-
event.preventDefault();
|
77 |
-
processUserInput(userInput);
|
78 |
-
}
|
79 |
-
});
|
80 |
-
|
81 |
-
websocket.onmessage = function (event) {
|
82 |
-
let data = JSON.parse(event.data);
|
83 |
-
switch (data.type) {
|
84 |
-
case 'connection':
|
85 |
-
console.log(data.value)
|
86 |
-
websocket.send(JSON.stringify({action: 'dialog', personality: []}));
|
87 |
-
break;
|
88 |
-
case 'state':
|
89 |
-
value.textContent = data.value;
|
90 |
-
break;
|
91 |
-
case 'users':
|
92 |
-
serverMessageValue.textContent = (
|
93 |
-
data.count.toString() + " user" +
|
94 |
-
(data.count === 1 ? "" : "s") + " online");
|
95 |
-
break;
|
96 |
-
case 'dialog':
|
97 |
-
console.log(data.message)
|
98 |
-
break;
|
99 |
-
case 'talk':
|
100 |
-
const element = htmlToElement("<div class=\"message incoming\"><div class=\"message-inner badge bg-success text-wrap\">"
|
101 |
-
+ data.message+ "</div></div>");
|
102 |
-
messages.appendChild(element);
|
103 |
-
messages.scrollIntoView(false)
|
104 |
-
break;
|
105 |
-
case 'personality':
|
106 |
-
const elements = document.querySelectorAll(".bot-personality input")
|
107 |
-
for (let i = 0; i < Math.min(elements.length, data.message.length); i++) {
|
108 |
-
elements[i].value = data.message[i];
|
109 |
-
}
|
110 |
-
break;
|
111 |
-
case 'personality_reply':
|
112 |
-
serverMessageValue.textContent = data.message
|
113 |
-
setTimeout(function() {
|
114 |
-
websocket.send(JSON.stringify({action: 'get_users'}));
|
115 |
-
}, 3000);
|
116 |
-
break;
|
117 |
-
default:
|
118 |
-
console.error(
|
119 |
-
"unsupported event", data);
|
120 |
-
}
|
121 |
-
};
|
122 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|