|
updateValue = function(id, value) { |
|
document.getElementById(id).innerText = value; |
|
} |
|
|
|
htmlToElement = function(html) { |
|
let template = document.createElement('template'); |
|
html = html.trim(); |
|
template.innerHTML = html; |
|
return template.content; |
|
} |
|
|
|
let websocket = null; |
|
let currentPersonaID = null; |
|
let persona_ids = {}; |
|
|
|
pageSetup = function() { |
|
|
|
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/"); |
|
|
|
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 += '<div class="message">'; |
|
message_template += ' <img alt="" src="' + image + '" />'; |
|
} |
|
else { |
|
message_template += '<div class="message right">'; |
|
message_template += ' <img alt="" src="https://static.ai-research.id/images/generated_photos_m_001.jpg" />'; |
|
} |
|
message_template += ' <div class="bubble">' + message; |
|
message_template += ' <div class="corner"></div>'; |
|
message_template += ' </div>'; |
|
message_template += '</div>'; |
|
return message_template; |
|
} |
|
|
|
let createFriends = function (persona_list) { |
|
html_template = ''; |
|
for (let i=0; i<persona_list.length; i++) { |
|
html_template += '<div class="friend">'; |
|
html_template += ' <img alt="" src="' + persona_list[i]["image"] + '" />'; |
|
html_template += ' <p>'; |
|
html_template += ' <strong>' + persona_list[i]["name"] + '</strong>'; |
|
html_template += ' <span>' + persona_list[i]["email"]+ '</span>'; |
|
html_template += ' <span class="persona_id">' + persona_list[i]["id"]+ '</span>'; |
|
html_template += ' </p>'; |
|
html_template += ' <div class="status available"></div>'; |
|
html_template += '</div>'; |
|
} |
|
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) { |
|
|
|
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<persona_list.length; i++) { |
|
persona_ids[persona_list[i]["id"]] = persona_list[i]; |
|
} |
|
html_template = createFriends(persona_list); |
|
friends.appendChild(htmlToElement(html_template)); |
|
document_ready(); |
|
break; |
|
case 'personality_reply': |
|
serverMessageValue.textContent = data.message |
|
setTimeout(function() { |
|
websocket.send(JSON.stringify({action: 'get_users'})); |
|
}, 3000); |
|
break; |
|
default: |
|
console.error( |
|
"unsupported event", data); |
|
} |
|
}; |
|
} |
|
|
|
let document_ready = function () { |
|
$("#searchfield").focus(function(){ |
|
if($(this).val() == "Search contacts..."){ |
|
$(this).val(""); |
|
} |
|
}); |
|
$("#searchfield").focusout(function(){ |
|
if($(this).val() == ""){ |
|
$(this).val("Search contacts..."); |
|
|
|
} |
|
}); |
|
|
|
$("#sendmessage input").focus(function(){ |
|
if($(this).val() == "Send message..."){ |
|
$(this).val(""); |
|
} |
|
}); |
|
$("#sendmessage input").focusout(function(){ |
|
if($(this).val() == ""){ |
|
$(this).val("Send message..."); |
|
|
|
} |
|
}); |
|
$("#searchfield").keyup(function(){ |
|
if($(this).val() === ""){ |
|
$('.friend').each(function(index){ |
|
$( this ).fadeIn(); |
|
}) |
|
} |
|
else { |
|
const searchtext = $(this).val().toLowerCase(); |
|
$('.friend strong').each(function(index){ |
|
console.log(index + ": " + $( this ).parent().parent().text()); |
|
if($(this).text().toLowerCase().search(searchtext) !== -1) |
|
$( this ).parent().parent().fadeIn(); |
|
else |
|
$( this ).parent().parent().fadeOut(); |
|
}) |
|
} |
|
}); |
|
|
|
$(".friend").each(function(){ |
|
$(this).click(function(){ |
|
let childOffset = $(this).offset(); |
|
let parentOffset = $(this).parent().parent().offset(); |
|
let childTop = childOffset.top - parentOffset.top; |
|
let clone = $(this).find('img').eq(0).clone(); |
|
let top = childTop+12+"px"; |
|
currentPersonaID = this.children[1].children[2].innerHTML; |
|
|
|
let chat_message = $('#chat_message_' + currentPersonaID); |
|
if(chat_message.length === 0) { |
|
html_template = '<div id="' + 'chat_message_' + currentPersonaID + '" class="chat_messages"></div>'; |
|
$('#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": [] |
|
} |
|
|
|
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); |
|
}); |
|
|
|
}); |
|
}); |
|
|
|
|
|
}; |
|
|