rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fixed broken character avatar updates + settings panel tooltips

Browse Source 
1. Due to a mistake on my end character avatars were not updating real time. This has been fixed.

2. added some tooltips to icons and buttons on the right nav panel.

3. resized the New Character and Import Character buttons
This commit is contained in:
RossAsscends
2023-03-03 07:26:21 +09:00
parent cfa642507f
commit 751647461e
3 changed files with 88 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
public/index.html
View File

@@ -335,7 +335,7 @@
characters.forEach(function(item, i, arr) {
var this_avatar = default_avatar;
if(item.avatar != 'none'){
this_avatar = "characters/"+item.avatar+"#"+humanizedISO8601DateTime; //Date.now();
this_avatar = "characters/"+item.avatar+"#"+Date.now();
}
$("#rm_print_characters_block").prepend('<div class=character_select chid='+i+'><div class=avatar><img src="'+this_avatar+'"></div><div class=ch_name>'+item.name+'</div></div>');
@@ -673,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'] = humanizedISO8601DateTime; //Date.now();
chat[chat.length-1]['send_date'] = Date.now();
chat[chat.length-1]['mes'] = textareaText;
addOneMessage(chat[chat.length-1]);
}
@@ -1090,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'] = humanizedISO8601DateTime; //Date.now();
chat[chat.length-1]['send_date'] = Date.now();
getMessage = $.trim(getMessage);
chat[chat.length-1]['mes'] = getMessage;
addOneMessage(chat[chat.length-1]);
@@ -1180,7 +1180,7 @@
chat.shift();
}else{
chat_create_date = humanizedISO8601DateTime; //Date.now();
chat_create_date = Date.now();
}
//console.log(chat);
getChatResult();
@@ -1213,7 +1213,7 @@
chat[0]['name'] = name2;
chat[0]['is_user'] = false;
chat[0]['is_name'] = true;
chat[0]['send_date'] = humanizedISO8601DateTime; //Date.now();
chat[0]['send_date'] = Date.now();
if(characters[this_chid].first_mes != ""){
chat[0]['mes'] = characters[this_chid].first_mes;
}else{
@@ -1340,7 +1340,7 @@
}else{
$("#mes_example_textarea").val(create_save_mes_example);
}
$("#avatar_div").css("display", "block");
$("#avatar_div").css("display", "grid");
$("#avatar_load_preview").attr('src',default_avatar);
$("#name_div").css("display", "block");
@@ -1420,7 +1420,7 @@
if(characters[chid].avatar != 'none'){
this_avatar = "characters/"+characters[chid].avatar;
}
$("#avatar_load_preview").attr('src',this_avatar+"#"+humanizedISO8601DateTime); //Date.now());
$("#avatar_load_preview").attr('src',this_avatar+"#"+Date.now());
$("#name_div").css("display", "none");
$("#form_create").attr("actiontype", "editcharacter");
@@ -1585,7 +1585,8 @@
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 = (name2 +' - '+ humanizedISO8601DateTime); //RossAscends: added character name to new chat filenames and replaced Date.now() with humanizedISO8601DateTime;
characters[this_chid].chat = Date.now(); //RossAscends: added character name to new chat filenames and replaced Date.now() with humanizedISO8601DateTime;
//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();
@@ -1683,15 +1684,17 @@
});
function read_avatar_load(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
if(selected_button == 'create'){
create_save_avatar = input.files;
}
reader.onload = function (e) {
if(selected_button == 'character_edit'){
timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit);
}
$('#avatar_load_preview')
@@ -1706,15 +1709,18 @@
}
}
$("#add_avatar_button").change(function(){
is_mes_reload_avatar = humanizedISO8601DateTime; //Date.now();
is_mes_reload_avatar = Date.now();
read_avatar_load(this);
});
$( "#form_create" ).submit(function(e) {
$('#rm_info_avatar').html('');
var formData = new FormData($("#form_create").get(0));
if($("#form_create").attr("actiontype") == "createcharacter"){
if($("#character_name_pole").val().length > 0){
jQuery.ajax({
type: 'POST',
url: '/createcharacter',
@@ -1748,6 +1754,7 @@
$('#create_button').removeAttr("disabled");
$("#add_avatar_button").replaceWith($("#add_avatar_button").val('').clone(true));
$('#create_button').attr('value','Create');
if(true){
$('#rm_info_block').transition({ opacity: 0 ,duration: 0});
@@ -1756,6 +1763,7 @@
select_rm_info("Character created");
$('#rm_info_block').transition({ opacity: 1.0 ,duration: 2000});
getCharacters();
}else{
$('#result_info').html(html);
@@ -1769,7 +1777,8 @@
$('#result_info').html("Name not entered");
}
}else{
//console.log($("#add_avatar_button").val());
console.log($("#add_avatar_button").val());
jQuery.ajax({
type: 'POST',
url: '/editcharacter',
@@ -1807,12 +1816,13 @@
}
}
$('#create_button').removeAttr("disabled");
getCharacters();
$("#add_avatar_button").replaceWith($("#add_avatar_button").val('').clone(true));
$('#create_button').attr('value','Save');
var count_tokens = encode(JSON.stringify(characters[this_chid].description+characters[this_chid].personality+characters[this_chid].scenario+characters[this_chid].mes_example)).length;
if(count_tokens < 1024){
$('#result_info').html(count_tokens+" Tokens");
@@ -2746,7 +2756,7 @@
$("#character_import_file_type").val(format);
//console.log(format);
var formData = new FormData($("#form_import").get(0));
jQuery.ajax({
type: 'POST',
url: '/importcharacter',
@@ -2868,7 +2878,7 @@
</div>
<!--<div id="shadow_character_popup">
</div>-->
<div id="character_popup">
<div id="character_popup">
<div id="character_popup_text">
<img id="character_cross" src="img/cross.png" style="position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
@@ -2964,10 +2974,10 @@
<nav id="right-nav-panel">
<div id="right-nav-panel-tabs">
<div class="right_menu_button" id="rm_button_characters">&#x1F464;</div>
<div class="right_menu_button" id="rm_button_settings">⚙️</div>
<div class="right_menu_button" id="rm_button_characters" title="Select/Create Characters">&#x1F464;</div>
<div class="right_menu_button" id="rm_button_settings" title="API and AI Settings">⚙️</div>
<div class="right_menu_button" id="rm_button_selected_ch"><h2></h2></div>
<div class="right_menu_button" id="rm_button_panel_pin_div"><input type="checkbox" id="rm_button_panel_pin"></div>
<div class="right_menu_button" id="rm_button_panel_pin_div"><input type="checkbox" id="rm_button_panel_pin" title="Locked = Settings panel stays open"></div>
</div>
<div id="rm_ch_create_block" class="right_menu" style="display: none;">
@@ -2979,18 +2989,23 @@
<h4>Name</h4><h5>Character name</h5>
<input id="character_name_pole" name="ch_name" class="text_pole" maxlength="120" value="" autocomplete="off">
</div>
<!--<div id="avatar_div" class="avatar_div" style="display: block;">
<div id="avatar_div_div" class="avatar">
<img id="avatar_load_preview" src="img/fluffy.png" alt="avatar">
</div>
<input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
</div>-->
<div id="avatar_div" class="avatar_div">
<div id="avatar_div_div" class="avatar">
<img id="avatar_load_preview" src="img/fluffy.png" alt="avatar">
</div>
<label id="add_avatar_button">
<input type="file" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
<label for="add_avatar_button" class="add_avatar_button_label" title="Click to select a new avatar for this character">
<input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
Change Avatar
</label>
</div>
<div id="description_div">
@@ -3037,7 +3052,11 @@
<option value="novel">NovelAI</option>
</select>
<div id="kobold_api" style="position: relative;">
<div style="display:none; position: absolute; right:188px; top:-34px; opacity:0.20;"><a href="https://github.com/KoboldAI/KoboldAI-Client" target="_blank"><img src="img/kobold.png" style="width:40px;height:40px;"></a></div>
<div style="position: absolute; right:188px; top:-34px; opacity:0.20;">
<a href="https://github.com/KoboldAI/KoboldAI-Client" target="_blank">
<img src="img/kobold.png" style="width:40px;height:40px;">
</a>
</div>
<form action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>API url</h4><h5>Example: http://127.0.0.1:5000/api </h5>
@@ -3104,7 +3123,7 @@
<h4>Name</h4>
<input id="your_name" name="your_name" class="text_pole" maxlength="35" value="" autocomplete="off">
<br>
<input id="your_name_button" type="submit" value="Change">
<input id="your_name_button" type="submit" title="Click to set a new User Name (reloads page)" value="Change Name">
</form>
<hr>
<div style="opacity:0.80">
@@ -3136,7 +3155,7 @@
</div>
<div id="rm_characters_block" class="right_menu">
<div id="rm_button_create" class="right_menu_button"><h2>+New Character</h2></div>
<div id="character_import_button" class="right_menu_button"><h2>+Import</h2></div>
<div id="character_import_button" class="right_menu_button"><h2>+Import Character</h2></div>
<div id="characloud_url" title="Find more characters on CharaCloud (coming soon)">
<img src="img/cloud_logo.png">

44
public/style.css
View File

@@ -476,9 +476,9 @@ input::file-selector-button {
font-weight: bold;
color: #fff;
padding: 0.5em;
border: 1px solid yellow; /*#666;*/
border: 1px solid #666;
border-radius: 3px;
background-color: red; /*rgba(0,0,0,0.3);*/
background-color: rgba(0,0,0,0.3);
cursor: pointer;
}
@@ -591,34 +591,34 @@ input[type=button] {
#character_import_button h2{
margin-top: auto;
margin-bottom: auto;
font-size: 17px;
font-size: 15px;
color: rgba(188, 193, 200, 1);
border: 1px solid #333;
background-color: rgba(0,0,0,0.3);
padding:6px;
padding:5px;
border-radius: 10px;
}
#rm_button_create h2{
margin-top: auto;
margin-bottom: auto;
font-size: 17px;
font-size: 15px;
color: rgba(188, 193, 200, 1);
border: 1px solid #333;
background-color: rgba(0,0,0,0.3);
padding:6px;
padding:5px;
border-radius: 10px;
}
#characloud_url{
margin-right: 10px;
margin-top:0;
margin-right: 0px;
margin-top: 0;
float: right;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.3);
background-color: rgba(0,0,0,0.3);
border-radius: 10px;
padding: 6px;
padding: 5px;
opacity: 0.5;
}
@@ -873,23 +873,27 @@ width: 103px;
}
.avatar_div{
margin-top: 16px;
vertical-align: middle;
margin-top: 16px;
vertical-align: middle;
display: grid;
grid-template-columns: min-content min-content;
align-items:center;
}
.avatar_div .avatar{
margin-left: 4px;
display: inline-block;
}
#add_avatar_button{
.add_avatar_button_label{
display: inline-block;
margin-left: 15px;
font-size: 0.75rem;
color: #666;
background-color: rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.7);
border-radius: 5px;
cursor:pointer;
margin-left: 15px;
color: #666;
background-color: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.5);
padding: 5px;
border-radius: 5px;
cursor: pointer;
height: min-content;
}
#description_div{
margin-top: 6px;
@@ -1745,7 +1749,7 @@ h2 {
.right_menu_button h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 1.5rem;
font-size: 1.25rem;
}
a {

38
server.js
View File

@@ -415,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": humanizedISO8601DateTime, "mes_example": data.mes_example, "scenario": data.scenario, "create_date": humanizedISO8601DateTime};
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()};
return char;
}
app.post("/createcharacter", urlencodedParser, function(request, response){
@@ -599,7 +599,7 @@ app.post("/getcharacters", jsonParser, function(request, response){
//console.log(directories[0]);
//characters = {};
//character_i = 0;
//getCharaterFile(directories, response,0);
//getCharacterFile(directories, response,0);
});
app.post("/getbackgrounds", jsonParser, function(request, response){
@@ -766,7 +766,7 @@ app.post('/getsettings', jsonParser, (request, response) => { //Wintermute's cod
});
function getCharaterFile(directories,response,i){ //old need del
function getCharacterFile(directories,response,i){ //old need del
if(directories.length > i){
fs.stat(charactersPath+directories[i]+'/'+directories[i]+".json", function(err, stat) {
@@ -782,11 +782,11 @@ function getCharaterFile(directories,response,i){ //old need del
characters[character_i] = data;
i++;
character_i++;
getCharaterFile(directories,response,i);
getCharacterFile(directories,response,i);
});
}else{
i++;
getCharaterFile(directories,response,i);
getCharacterFile(directories,response,i);
}
});
@@ -987,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": humanizedISO8601DateTime, "mes_example": jsonData.mes_example ?? '', "scenario": jsonData.scenario ?? '', "create_date": humanizedISO8601DateTime};
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()};
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": humanizedISO8601DateTime, "mes_example": jsonData.example_dialogue ?? '', "scenario": jsonData.world_scenario ?? '', "create_date": humanizedISO8601DateTime};
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()};
char = JSON.stringify(char);
charaWrite('./public/img/fluffy.png', char, png_name, response, {file_name: png_name});
}else{
@@ -1008,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": humanizedISO8601DateTime, "mes_example": jsonData.mes_example ?? '', "scenario": jsonData.scenario ?? '', "create_date": humanizedISO8601DateTime};
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()};
char = JSON.stringify(char);
charaWrite('./uploads/'+filedata.filename, char, png_name, response, {file_name: png_name});
/*
@@ -1067,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'] = humanizedISO8601DateTime //Date.now();
new_chat[0]['create_date'] = Date.now() //Date.now();
i++;
jsonData.histories.histories[0].msgs.forEach(function(item) {
new_chat[i] = {};
@@ -1078,7 +1078,7 @@ 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'] = humanizedISO8601DateTime //Date.now();
new_chat[i]['send_date'] = Date.now() //Date.now();
new_chat[i]['mes'] = item.text;
i++;
});
@@ -1113,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+'/'+ch_name+' - '+humanizedISO8601DateTime+'.jsonl', (err) => { //Date.now() replaced for humanizedISO8601DateTime
fs.copyFile('./uploads/'+filedata.filename, chatsPath+avatar_url+'/'+ch_name+' - '+humanizedISO8601DateTime+'.jsonl', (err) => { //added character name and replaced Date.now() with humanizedISO8601DateTime
if(err) {
response.send({error:true});
return console.log(err);
@@ -1174,7 +1174,7 @@ function convertStage1(){
charactersB = {};
character_ib = 0;
var folderForDel = {};
getCharaterFile2(directories, 0);
getCharacterFile2(directories, 0);
}
function convertStage2(){
//directoriesB = JSON.parse(directoriesB);
@@ -1192,7 +1192,7 @@ function convertStage2(){
//console.log(directoriesB[key]);
var char = JSON.parse(charactersB[key]);
char.create_date = humanizedISO8601DateTime;
char.create_date = Date.now();
charactersB[key] = JSON.stringify(char);
var avatar = 'public/img/fluffy.png';
if(char.avatar !== 'none'){
@@ -1222,7 +1222,7 @@ function convertStage2(){
}
let i = 0;
let ii = 0;
new_chat_data[i] = {user_name:'You', character_name:char.name, create_date: humanizedISO8601DateTime};
new_chat_data[i] = {user_name:'You', character_name:char.name, create_date: Date.now()};
i++;
ii++;
chat_data.forEach(function(mes) {
@@ -1238,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'] = humanizedISO8601DateTime; //Date.now();
new_chat_data[ii]['send_date'] = Date.now(); //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'] = humanizedISO8601DateTime //Date.now();
new_chat_data[ii]['send_date'] = Date.now() //Date.now();
}
new_chat_data[ii]['mes'] = mes.trim();
@@ -1311,7 +1311,7 @@ function getDirectories2(path) {
})
.reverse();
}
function getCharaterFile2(directories,i){
function getCharacterFile2(directories,i){
if(directories.length > i){
fs.stat('public/characters/'+directories[i]+'/'+directories[i]+".json", function(err, stat) {
if (err == null) {
@@ -1328,11 +1328,11 @@ function getCharaterFile2(directories,i){
character_ib++;
}
i++;
getCharaterFile2(directories,i);
getCharacterFile2(directories,i);
});
}else{
i++;
getCharaterFile2(directories,i);
getCharacterFile2(directories,i);
}
});
}else{