updateValue = function(id, value) {
document.getElementById(id).innerText = value;
}
htmlToElement = function(html) {
let template = document.createElement('template');
html = html.trim(); // Never return a text node of whitespace as the result
template.innerHTML = html;
return template.content;
}
let websocket = null;
let currentPersonaID = null;
let persona_ids = {};
pageSetup = function() {
// const users = document.querySelector('.users');
const userInput = document.querySelector('.user-input');
const userInputButton = document.querySelector('.user-input-button');
const serverMessageValue = document.querySelector('.server-message-value');
const messages = document.getElementById('chat-messages');
const friends = document.getElementById('friends');
websocket = new WebSocket("wss://gpt2-chat.ai-research.id/");
//websocket = new WebSocket("ws://localhost:8502/");
let persona_list;
let getParameters = function() {
return {
"do_sample": document.getElementById("doSample").checked,
"min_length": parseInt(document.getElementById("minLength").value),
"max_length": parseInt(document.getElementById("maxLength").value),
"temperature": parseFloat(document.getElementById("temperature").value),
"top_k": parseInt(document.getElementById("topK").value),
"top_p": parseFloat(document.getElementById("topP").value),
};
}
let createMessage = function (message, image, bot) {
let message_template = "";
if(bot) {
message_template += '
';
message_template += '
![](' + image + ')
';
}
else {
message_template += '
';
message_template += '
![](images/generated_photos_m_001.jpg)
';
}
message_template += '
' + message;
message_template += '
';
message_template += '
';
message_template += '
';
return message_template;
}
let createFriends = function (persona_list) {
html_template = '';
for (let i=0; i
';
html_template += '
';
html_template += ' ';
html_template += ' ' + persona_list[i]["name"] + '';
html_template += ' ' + persona_list[i]["email"]+ '';
html_template += ' ' + persona_list[i]["id"]+ '';
html_template += '
';
html_template += ' ';
html_template += ' ';
}
return html_template;
}
let hoverMesssagePhoto = function (persona_id) {
let id = '#chat_message_' + persona_id;
let message_photo = $(id + ' .message:last-child img');
message_photo.hover(function () {
let profile_photo_zoom = $('#photo-block img');
profile_photo_zoom[0].src = message_photo[0].src;
$('#photo-block').fadeIn();
}, function () {
$('#photo-block').fadeOut(800);
})
}
let processUserInput = function (userInput) {
let parameters = getParameters();
parameters["action"] = "talk";
parameters["persona_id"] = currentPersonaID;
parameters["utterance"] = userInput.value;
websocket.send(JSON.stringify(parameters));
let message = createMessage(userInput.value, persona_ids[currentPersonaID]["image"], false);
const element = htmlToElement(message).firstChild;
userInput.value = "";
let chat_message = $('#chat_message_' + currentPersonaID)[0];
chat_message.appendChild(element);
const margin_top = element.childNodes[3].offsetHeight - 25;
element.childNodes[1].style = "margin-top:" + margin_top + "px";
chat_message.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
hoverMesssagePhoto(currentPersonaID);
}
userInputButton.onclick = function () {
processUserInput(userInput);
}
userInput.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
processUserInput(userInput);
}
});
websocket.onmessage = function (event) {
let data = JSON.parse(event.data);
switch (data.type) {
case 'connection':
console.log(data.value)
websocket.send(JSON.stringify({action: 'dialog', personality: []}));
break;
case 'state':
console.log("stat: " + data.value)
break;
case 'users':
serverMessageValue.textContent = (
data.count.toString() + " user" +
(data.count === 1 ? "" : "s") + " online");
break;
case 'dialog':
console.log(data.message)
break;
case 'talk':
case 'persona_greeting':
let message = createMessage(data.message, persona_ids[currentPersonaID]["image"], true);
const element = htmlToElement(message).firstChild;
let chat_message = $('#chat_message_' + currentPersonaID)[0];
chat_message.appendChild(element);
margin_top = element.childNodes[3].offsetHeight - 25;
element.childNodes[1].style = "margin-top:" + margin_top + "px";
chat_message.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
hoverMesssagePhoto(currentPersonaID);
break;
case 'personality':
const elements = document.querySelectorAll(".bot-personality input")
for (let i = 0; i < Math.min(elements.length, data.message.length); i++) {
elements[i].value = data.message[i];
}
break;
case 'persona_list':
persona_list = data.message;
for(i=0; i';
$('#chat-block').children().first().append(html_template)
chat_message = $('#chat_message_' + currentPersonaID);
websocket.send(JSON.stringify({action: 'persona_chosen', persona_id: currentPersonaID}));
}
else {
chat_message.show(400, function () {
chat_message[0].scrollIntoView({behavior: "auto", block: "end", inline: "nearest"});
});
}
$(clone).css({'top': top}).addClass("floatingImg").appendTo("#chatbox");
setTimeout(function(){$("#profile p").addClass("animate");$("#profile").addClass("animate");}, 100);
setTimeout(function(){
chat_message.addClass("animate");
$('.cx, .cy').addClass('s1');
setTimeout(function(){$('.cx, .cy').addClass('s2');}, 100);
setTimeout(function(){$('.cx, .cy').addClass('s3');}, 200);
}, 150);
let profile_photo = $('.floatingImg');
profile_photo.animate({
'width': "68px",
'left':'15px',
'top':'20px'
}, 200);
profile_photo.hover(function () {
var profile_photo_zoom = $('#photo-block img');
console.log(profile_photo_zoom);
profile_photo_zoom[0].src = profile_photo[0].src;
$('#photo-block').fadeIn();
}, function () {
$('#photo-block').fadeOut(800);
});
var name = $(this).find("p strong").html();
var email = $(this).find("p span").html();
$("#profile p").html(name);
$("#profile span").html(email);
$(".message").not(".right").find("img").attr("src", $(clone).attr("src"));
$('#friendslist').fadeOut();
$('#chat-block').show();
$('#config-block').hide();
$('#chatview').fadeIn();
$('#close').unbind("click").click(function(){
chat_message.removeClass("animate");
chat_message.hide();
$("#profile, #profile p").removeClass("animate");
$('.cx, .cy').removeClass("s1 s2 s3");
$('.floatingImg').animate({
'width': "40px",
'top':top,
'left': '12px'
}, 200, function(){$('.floatingImg').remove()});
setTimeout(function(){
$('#chatview').fadeOut();
$('#friendslist').fadeIn();
}, 50);
});
personalities = ["", "", "", "", ""];
$('#personalities').unbind("click").click(function(){
personality_input = document.querySelectorAll(".bot-personality input")
for (let i = 0; i < Math.min(personality_input.length, persona_ids[currentPersonaID]["personality"].length); i++) {
personality_input[i].value = persona_ids[currentPersonaID]["personality"][i+3];
}
setTimeout(function(){
$('#server_view').fadeOut(400, function () {
$('#server_view').fadeIn();
});
$('#parameters_view').fadeOut(400, function (){
$('#about_view').fadeOut(400, function () {
$('#personalities_view').fadeIn();
});
});
$('#about_view').fadeOut(400);
$('#chat-block').fadeOut(400, function (){
$('#config-block').fadeIn();
});
}, 50);
const elements = document.querySelectorAll(".bot-personality input")
for (let i = 0; i < Math.min(elements.length, 5); i++) {
personalities[i] = elements[i].value;
}
});
$('#personalities_cancel').unbind("click").click(function(){
const elements = document.querySelectorAll(".bot-personality input")
for (let i = 0; i < Math.min(elements.length, 5); i++) {
elements[i].value = personalities[i];
}
setTimeout(function(){
$('#config-block').fadeOut(400, function (){
$('#chat-block').fadeIn();
});
}, 50);
});
$('#personalities_update').unbind("click").click(function(){
const elements = document.querySelectorAll(".bot-personality input")
let data = {
"action": "personality",
"persona_id": currentPersonaID,
"message": []
}
// persona_ids[currentPersonaID]["personality"]
for (let i = 0; i < Math.min(elements.length, 5); i++) {
if(elements[i].value.length >0)
persona_ids[currentPersonaID]["personality"][i+3] = elements[i].value;
data.message.push(elements[i].value);
}
websocket.send(JSON.stringify(data));
setTimeout(function(){
$('#config-block').fadeOut(400, function (){
$('#chat-block').fadeIn();
});
}, 500);
});
$('#parameters').unbind("click").click(function(){
setTimeout(function(){
$('#server_view').fadeOut(400, function () {
$('#server_view').fadeIn();
});
$('#personalities_view').fadeOut(400, function (){
$('#about_view').fadeOut(400, function () {
$('#parameters_view').fadeIn();
});
});
$('#chat-block').fadeOut(400, function () {
$('#config-block').fadeIn();
});
}, 50);
});
$('#parameters_ok').unbind("click").click(function(){
setTimeout(function(){
$('#config-block').fadeOut(400, function (){
$('#chat-block').fadeIn();
});
}, 50);
});
$('#about').unbind("click").click(function(){
setTimeout(function(){
$('#server_view').fadeOut(400, function () {
$('#server_view').fadeIn();
});
$('#personalities_view').fadeOut(400, function (){
$('#parameters_view').fadeOut(400, function (){
$('#about_view').fadeIn();
});
});
$('#chat-block').fadeOut(400, function () {
$('#config-block').fadeIn();
});
}, 50);
});
$('#about_close').unbind("click").click(function(){
setTimeout(function(){
$('#config-block').fadeOut(400, function (){
$('#chat-block').fadeIn();
});
}, 50);
});
});
});
// $("#friends")[0].firstElementChild.click()
};