From cfa642507ff10c6c4cbe5cef80c043d7ffed20c2 Mon Sep 17 00:00:00 2001 From: RossAsscends <124905043+RossAscends@users.noreply.github.com> Date: Fri, 3 Mar 2023 03:48:30 +0900 Subject: [PATCH] Chat Filename Humanization + Larger Past Chats Box 1. Replaced all Date.now() instances with a humanized ISO8601 timestamp that is easily readable by users. This has a seamless effect on the embedded timestamping of chat mesages. Old chat files can still be edited (messages deleted), and continued. Character PNG files get updated with the new date format, and this will be reflected in github but there is no functional change to the user. 2. Added character name to the front of all newly saved/imported chat files. Old chats will retain their original filename unless re-imported. With these two changes, the new chat filenames are as such: "Aqua - 2023-3-3 @03h 08m 36s 948ms.jsonl" (I would like to make it smaller, perhaps by removing the milliseconds. Let me know if this is possible, or if it would introduce potential overwrites if users make/update files within the same second.) 3. Increased the size of the 'view past chats' popup box to max 800px so accommodate the new larger filenames. --- public/characters/Aqua.png | Bin 405263 -> 405291 bytes public/index.html | 40 ++++++++++++++++------- public/style.css | 23 +++++++------ server.js | 64 ++++++++++++++++++++++++------------- 4 files changed, 84 insertions(+), 43 deletions(-) diff --git a/public/characters/Aqua.png b/public/characters/Aqua.png index 62552dd74288e944f6e55dffae680f9eb959a371..6da8e87e17226ffaba92b78601db0b51fa66acad 100644 GIT binary patch delta 98 zcmeCbC$ajTL_-T>3sVbo3rh>@7PbN<#%0?JmDpae>v=gPM}%c~Ivb?>W;s^+RvJ|K zg!rZhx;R!PIy;v8y933mqN+SyvJL#*4Xd_iYq3pb;b+|A&Hx0Su6{1-oD!MxL_-T>3sVbo3rh>@7PbN<#;)y!N^CFKg*+?#vXZNOL((gJLjsL_T^!4| Zw`;LYW#M0cyPW|DJYD@<);T3K0RVCH7tR0x diff --git a/public/index.html b/public/index.html index e87dd88b3..57bd0aee8 100644 --- a/public/index.html +++ b/public/index.html @@ -53,6 +53,25 @@ }]; var chat_create_date = 0; + + //RossAscends: Added function to format dates used in files and chat timestamps to a humanized format. + //Mostly I wanted this to be for file names, but couldn't figure out exactly where the filename save code was as everything seemed to be connected. + //During testing, this performs the same as previous date.now() structure. + //It also does not break old characters/chats, as the code just uses whatever timestamp exists in the chat. + //New chats made with characters will use this new formatting. + //Useable variable is (( humanizedISO8601Datetime )) + + var baseDate = new Date(Date.now()); + var humanYear = baseDate.getFullYear(); + var humanMonth = (baseDate.getMonth()+1); + var humanDate = baseDate.getDate(); + var humanHour = (baseDate.getHours() < 10? '0' : '') + baseDate.getHours(); + var humanMinute = (baseDate.getMinutes() < 10? '0' : '') + baseDate.getMinutes(); + var humanSecond = (baseDate.getSeconds() < 10? '0' : '') + baseDate.getSeconds(); + var humanMillisecond = (baseDate.getMilliseconds() < 10? '0' : '') + baseDate.getMilliseconds(); + var humanizedISO8601DateTime = (humanYear+"-"+humanMonth+"-"+humanDate+" @"+humanHour+"h "+humanMinute+"m "+humanSecond+"s "+humanMillisecond+"ms"); + + var default_ch_mes = "Hello"; var count_view_mes = 0; var mesStr = ''; @@ -316,7 +335,7 @@ characters.forEach(function(item, i, arr) { var this_avatar = default_avatar; if(item.avatar != 'none'){ - this_avatar = "characters/"+item.avatar+"#"+Date.now(); + this_avatar = "characters/"+item.avatar+"#"+humanizedISO8601DateTime; //Date.now(); } $("#rm_print_characters_block").prepend('
'+item.name+'
'); @@ -654,7 +673,7 @@ chat[chat.length-1]['name'] = name1; chat[chat.length-1]['is_user'] = true; chat[chat.length-1]['is_name'] = true; - chat[chat.length-1]['send_date'] = Date.now(); + chat[chat.length-1]['send_date'] = humanizedISO8601DateTime; //Date.now(); chat[chat.length-1]['mes'] = textareaText; addOneMessage(chat[chat.length-1]); } @@ -1071,7 +1090,7 @@ chat[chat.length-1]['name'] = name2; chat[chat.length-1]['is_user'] = false; chat[chat.length-1]['is_name'] = this_mes_is_name; - chat[chat.length-1]['send_date'] = Date.now(); + chat[chat.length-1]['send_date'] = humanizedISO8601DateTime; //Date.now(); getMessage = $.trim(getMessage); chat[chat.length-1]['mes'] = getMessage; addOneMessage(chat[chat.length-1]); @@ -1117,7 +1136,6 @@ } }); var save_chat = [{user_name:default_user_name, character_name:name2,create_date: chat_create_date}, ...chat]; - jQuery.ajax({ type: 'POST', url: '/savechat', @@ -1162,7 +1180,7 @@ chat.shift(); }else{ - chat_create_date = Date.now(); + chat_create_date = humanizedISO8601DateTime; //Date.now(); } //console.log(chat); getChatResult(); @@ -1195,7 +1213,7 @@ chat[0]['name'] = name2; chat[0]['is_user'] = false; chat[0]['is_name'] = true; - chat[0]['send_date'] = Date.now(); + chat[0]['send_date'] = humanizedISO8601DateTime; //Date.now(); if(characters[this_chid].first_mes != ""){ chat[0]['mes'] = characters[this_chid].first_mes; }else{ @@ -1402,7 +1420,7 @@ if(characters[chid].avatar != 'none'){ this_avatar = "characters/"+characters[chid].avatar; } - $("#avatar_load_preview").attr('src',this_avatar+"#"+Date.now()); + $("#avatar_load_preview").attr('src',this_avatar+"#"+humanizedISO8601DateTime); //Date.now()); $("#name_div").css("display", "none"); $("#form_create").attr("actiontype", "editcharacter"); @@ -1567,7 +1585,7 @@ if(popup_type == 'new_chat' && this_chid != undefined && menu_type != "create"){//Fix it; New chat doesn't create while open create character menu clearChat(); chat.length = 0; - characters[this_chid].chat = Date.now(); + characters[this_chid].chat = (name2 +' - '+ humanizedISO8601DateTime); //RossAscends: added character name to new chat filenames and replaced Date.now() with humanizedISO8601DateTime; $("#selected_chat_pole").val(characters[this_chid].chat); timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit); getChat(); @@ -1688,7 +1706,7 @@ } } $("#add_avatar_button").change(function(){ - is_mes_reload_avatar = Date.now(); + is_mes_reload_avatar = humanizedISO8601DateTime; //Date.now(); read_avatar_load(this); }); $( "#form_create" ).submit(function(e) { @@ -2552,7 +2570,7 @@ //console.log(characters[this_chid].chat); jQuery.ajax({ type: 'POST', - url: '/getallchatsofchatacter', + url: '/getallchatsofcharacter', data: JSON.stringify({avatar_url: characters[this_chid].avatar}), beforeSend: function(){ //$('#create_button').attr('value','Creating...'); @@ -2571,7 +2589,7 @@ if(mes.length > strlen){ mes = '...'+mes.substring(mes.length - strlen); } - $('#select_chat_div').append('
'+data[key]['file_name']+'
'+mes+'
'); + $('#select_chat_div').append('
'+data[key]['file_name']+'
'+mes+'
'); if(characters[this_chid]['chat'] == data[key]['file_name'].replace('.jsonl', '')){ //children().last() $('#select_chat_div').children(':nth-last-child(1)').attr('highlight', true); diff --git a/public/style.css b/public/style.css index f306500bc..67220f24b 100644 --- a/public/style.css +++ b/public/style.css @@ -1585,7 +1585,7 @@ label.checkbox :checked + span:after { #select_chat_popup{ display: block; grid-template-rows: 50px 100px 100px auto 45px; - max-width:450px; + max-width:800px; height: 440px; position: absolute; z-index: 2066; @@ -1628,7 +1628,7 @@ label.checkbox :checked + span:after { margin-top: 30px; overflow-x: hidden; overflow-y: scroll; - max-width:430px; + height: 350px; } #select_chat_div hr{ @@ -1641,18 +1641,21 @@ label.checkbox :checked + span:after { } .select_chat_block{ - border-radius: 5px; +border-radius: 5px; margin-right: 10px; - cursor:pointer; + margin-bottom: 10px; + border: 1px solid rgba(255,255,255,0.2); + padding: 5px; display: grid; - grid-template-columns: 60px auto; - grid-template-rows: 26px auto; + grid-template-columns: min-content auto; + grid-template-rows: auto auto; + grid-gap: 10px; } .select_chat_block:hover { - background-color: #ffffff07; + background-color: rgba(255,255,255,0.2); } .select_chat_block[highlight]{ - background-color: #ffffff09;/* #c2b07a12; */ + background-color: rgba(100,100,255,0.3); } .select_chat_block .avatar{ @@ -1669,8 +1672,8 @@ label.checkbox :checked + span:after { } .select_chat_block .avatar { - height:30px; - width:30px; + /*height:30px; + width:30px;*/ } #advanced_div{ diff --git a/server.js b/server.js index 545b484e9..67fca5d2b 100644 --- a/server.js +++ b/server.js @@ -51,6 +51,24 @@ var response_getstatus_novel; var response_getlastversion; var api_key_novel; + //RossAscends: Added function to format dates used in files and chat timestamps to a humanized format. + //Mostly I wanted this to be for file names, but couldn't figure out exactly where the filename save code was as everything seemed to be connected. + //During testing, this performs the same as previous date.now() structure. + //It also does not break old characters/chats, as the code just uses whatever timestamp exists in the chat. + //New chats made with characters will use this new formatting. + //Useable variable is (( humanizedISO8601Datetime )) + + var baseDate = new Date(Date.now()); + var humanYear = baseDate.getFullYear(); + var humanMonth = (baseDate.getMonth()+1); + var humanDate = baseDate.getDate(); + var humanHour = (baseDate.getHours() < 10? '0' : '') + baseDate.getHours(); + var humanMinute = (baseDate.getMinutes() < 10? '0' : '') + baseDate.getMinutes(); + var humanSecond = (baseDate.getSeconds() < 10? '0' : '') + baseDate.getSeconds(); + var humanMillisecond = (baseDate.getMilliseconds() < 10? '0' : '') + baseDate.getMilliseconds(); + + var humanizedISO8601DateTime = (humanYear+"-"+humanMonth+"-"+humanDate+" @"+humanHour+"h "+humanMinute+"m "+humanSecond+"s "+humanMillisecond+"ms"); + var is_colab = false; var charactersPath = 'public/characters/'; var chatsPath = 'public/chats/'; @@ -263,6 +281,7 @@ app.post("/generate", jsonParser, function(request, response_generate = response }); }); app.post("/savechat", jsonParser, function(request, response){ + //console.log('/savechat/ entered'); //console.log(request.data); //console.log(request.body.bg); //const data = request.body; @@ -291,22 +310,23 @@ app.post("/getchat", jsonParser, function(request, response){ //console.log(request); //console.log(request.body.chat); //var bg = "body {background-image: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(../backgrounds/"+request.body.bg+");}"; + //console.log('/getchat entered'); var dir_name = String(request.body.avatar_url).replace('.png',''); fs.stat(chatsPath+dir_name, function(err, stat) { - if(stat === undefined){ + if(stat === undefined){ //if no chat dir for the character is found, make one with the character name fs.mkdirSync(chatsPath+dir_name); response.send({}); return; }else{ - if(err === null){ + if(err === null){ //if there is a dir, then read the requested file from the JSON call fs.stat(chatsPath+dir_name+"/"+request.body.file_name+".jsonl", function(err, stat) { - if (err === null) { + if (err === null) { //if no error (the file exists), read the file if(stat !== undefined){ fs.readFile(chatsPath+dir_name+"/"+request.body.file_name+".jsonl", 'utf8', (err, data) => { @@ -321,7 +341,7 @@ app.post("/getchat", jsonParser, function(request, response){ // Iterate through the array of strings and parse each line as JSON const jsonData = lines.map(JSON.parse); response.send(jsonData); - + //console.log('read the requested file') }); } @@ -335,6 +355,7 @@ app.post("/getchat", jsonParser, function(request, response){ console.error(err); response.send({}); return; + } } @@ -394,7 +415,7 @@ function checkServer(){ //***************** Main functions function charaFormatData(data){ - var char = {"name": data.ch_name, "description": data.description, "personality": data.personality, "first_mes": data.first_mes, "avatar": 'none', "chat": Date.now(), "mes_example": data.mes_example, "scenario": data.scenario, "create_date": Date.now()}; + var char = {"name": data.ch_name, "description": data.description, "personality": data.personality, "first_mes": data.first_mes, "avatar": 'none', "chat": humanizedISO8601DateTime, "mes_example": data.mes_example, "scenario": data.scenario, "create_date": humanizedISO8601DateTime}; return char; } app.post("/createcharacter", urlencodedParser, function(request, response){ @@ -884,7 +905,7 @@ app.post("/generate_novelai", jsonParser, function(request, response_generate_no }); }); -app.post("/getallchatsofchatacter", jsonParser, function(request, response){ +app.post("/getallchatsofcharacter", jsonParser, function(request, response){ if(!request.body) return response.sendStatus(400); var char_dir = (request.body.avatar_url).replace('.png','') @@ -900,10 +921,10 @@ app.post("/getallchatsofchatacter", jsonParser, function(request, response){ // sort the files by name //jsonFiles.sort().reverse(); - // print the sorted file names var chatData = {}; - let ii = jsonFiles.length; + let ii = jsonFiles.length; //this is the number of files belonging to the character + for(let i = jsonFiles.length-1; i >= 0; i--){ const file = jsonFiles[i]; @@ -914,11 +935,9 @@ app.post("/getallchatsofchatacter", jsonParser, function(request, response){ }); let lastLine; - rl.on('line', (line) => { - lastLine = line; + lastLine = line; }); - rl.on('close', () => { if(lastLine){ let jsonData = JSON.parse(lastLine); @@ -968,12 +987,12 @@ app.post("/importcharacter", urlencodedParser, function(request, response){ if(jsonData.name !== undefined){ png_name = getPngName(jsonData.name); - let char = {"name": jsonData.name, "description": jsonData.description ?? '', "personality": jsonData.personality ?? '', "first_mes": jsonData.first_mes ?? '', "avatar": 'none', "chat": Date.now(), "mes_example": jsonData.mes_example ?? '', "scenario": jsonData.scenario ?? '', "create_date": Date.now()}; + let char = {"name": jsonData.name, "description": jsonData.description ?? '', "personality": jsonData.personality ?? '', "first_mes": jsonData.first_mes ?? '', "avatar": 'none', "chat": humanizedISO8601DateTime, "mes_example": jsonData.mes_example ?? '', "scenario": jsonData.scenario ?? '', "create_date": humanizedISO8601DateTime}; char = JSON.stringify(char); charaWrite('./public/img/fluffy.png', char, png_name, response, {file_name: png_name}); }else if(jsonData.char_name !== undefined){//json Pygmalion notepad png_name = getPngName(jsonData.char_name); - let char = {"name": jsonData.char_name, "description": jsonData.char_persona ?? '', "personality": '', "first_mes": jsonData.char_greeting ?? '', "avatar": 'none', "chat": Date.now(), "mes_example": jsonData.example_dialogue ?? '', "scenario": jsonData.world_scenario ?? '', "create_date": Date.now()}; + let char = {"name": jsonData.char_name, "description": jsonData.char_persona ?? '', "personality": '', "first_mes": jsonData.char_greeting ?? '', "avatar": 'none', "chat": humanizedISO8601DateTime, "mes_example": jsonData.example_dialogue ?? '', "scenario": jsonData.world_scenario ?? '', "create_date": humanizedISO8601DateTime}; char = JSON.stringify(char); charaWrite('./public/img/fluffy.png', char, png_name, response, {file_name: png_name}); }else{ @@ -989,7 +1008,7 @@ app.post("/importcharacter", urlencodedParser, function(request, response){ png_name = getPngName(jsonData.name); if(jsonData.name !== undefined){ - let char = {"name": jsonData.name, "description": jsonData.description ?? '', "personality": jsonData.personality ?? '', "first_mes": jsonData.first_mes ?? '', "avatar": 'none', "chat": Date.now(), "mes_example": jsonData.mes_example ?? '', "scenario": jsonData.scenario ?? '', "create_date": Date.now()}; + let char = {"name": jsonData.name, "description": jsonData.description ?? '', "personality": jsonData.personality ?? '', "first_mes": jsonData.first_mes ?? '', "avatar": 'none', "chat": humanizedISO8601DateTime, "mes_example": jsonData.mes_example ?? '', "scenario": jsonData.scenario ?? '', "create_date": humanizedISO8601DateTime}; char = JSON.stringify(char); charaWrite('./uploads/'+filedata.filename, char, png_name, response, {file_name: png_name}); /* @@ -1048,7 +1067,7 @@ app.post("/importchat", urlencodedParser, function(request, response){ new_chat[i] = {}; new_chat[0]['user_name'] = 'You'; new_chat[0]['character_name'] = ch_name; - new_chat[0]['create_date'] = Date.now(); + new_chat[0]['create_date'] = humanizedISO8601DateTime //Date.now(); i++; jsonData.histories.histories[0].msgs.forEach(function(item) { new_chat[i] = {}; @@ -1059,12 +1078,13 @@ app.post("/importchat", urlencodedParser, function(request, response){ } new_chat[i]['is_user'] = item.src.is_human; new_chat[i]['is_name'] = true; - new_chat[i]['send_date'] = Date.now(); + new_chat[i]['send_date'] = humanizedISO8601DateTime //Date.now(); new_chat[i]['mes'] = item.text; i++; }); const chatJsonlData = new_chat.map(JSON.stringify).join('\n'); - fs.writeFile(chatsPath+avatar_url+'/'+Date.now()+'.jsonl', chatJsonlData, 'utf8', function(err) { + fs.writeFile(chatsPath+avatar_url+'/'+ch_name+' - '+humanizedISO8601DateTime+' imported.jsonl', chatJsonlData, 'utf8', function(err) { //added ch_name and replaced Date.now() with humanizedISO8601DateTime + if(err) { response.send(err); return console.log(err); @@ -1093,7 +1113,7 @@ app.post("/importchat", urlencodedParser, function(request, response){ let jsonData = JSON.parse(line); if(jsonData.user_name !== undefined){ - fs.copyFile('./uploads/'+filedata.filename, chatsPath+avatar_url+'/'+Date.now()+'.jsonl', (err) => { + fs.copyFile('./uploads/'+filedata.filename, chatsPath+avatar_url+'/'+ch_name+' - '+humanizedISO8601DateTime+'.jsonl', (err) => { //Date.now() replaced for humanizedISO8601DateTime if(err) { response.send({error:true}); return console.log(err); @@ -1172,7 +1192,7 @@ function convertStage2(){ //console.log(directoriesB[key]); var char = JSON.parse(charactersB[key]); - char.create_date = Date.now(); + char.create_date = humanizedISO8601DateTime; charactersB[key] = JSON.stringify(char); var avatar = 'public/img/fluffy.png'; if(char.avatar !== 'none'){ @@ -1202,7 +1222,7 @@ function convertStage2(){ } let i = 0; let ii = 0; - new_chat_data[i] = {user_name:'You', character_name:char.name, create_date: Date.now()}; + new_chat_data[i] = {user_name:'You', character_name:char.name, create_date: humanizedISO8601DateTime}; i++; ii++; chat_data.forEach(function(mes) { @@ -1218,14 +1238,14 @@ function convertStage2(){ new_chat_data[ii]['name'] = char.name; new_chat_data[ii]['is_user'] = false; new_chat_data[ii]['is_name'] = is_name; - new_chat_data[ii]['send_date'] = Date.now(); + new_chat_data[ii]['send_date'] = humanizedISO8601DateTime; //Date.now(); }else{ mes = mes.replace(this_chat_user_name+':',''); new_chat_data[ii]['name'] = 'You'; new_chat_data[ii]['is_user'] = true; new_chat_data[ii]['is_name'] = true; - new_chat_data[ii]['send_date'] = Date.now(); + new_chat_data[ii]['send_date'] = humanizedISO8601DateTime //Date.now(); } new_chat_data[ii]['mes'] = mes.trim();