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

CountCharTokens() + create_form to grid +CSS tweaks

Browse Source 
1. Added a new utility function CountCharTokens() to replace the token counting routine from before. It also works unsaved new characters.

1.5 - moved #result_info to the top under avatar.

2. put create_form into a grid display so the two textareas can automatically resize to fill as much space as possible.

3. CSS - standardized background shadings, and replaced backdrop filters with RGBA background-colors for most divs. increased the strangth of some box-shadows on large UI divs
This commit is contained in:
RossAsscends
2023-03-08 04:53:00 +09:00
parent 16b4503d8f
commit c21317d69e
2 changed files with 230 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
public/index.html
View File

@@ -128,8 +128,8 @@
var preset_settings = 'gui'; var preset_settings = 'gui';
var user_avatar = 'you.png'; var user_avatar = 'you.png';
var temp = 0.5; var temp = 0.5;
var amount_gen = 80; var amount_gen = 80; //default max length of AI generated responses
var max_context = 2048;//2048; var max_context = 2048;
var rep_pen = 1; var rep_pen = 1;
var rep_pen_size = 100; var rep_pen_size = 100;
@@ -212,8 +212,8 @@
function QuickRefresh(){ function QuickRefresh(){
clearChat(); clearChat();
//characters.length = 0 //if this could be enabled it would allow the GetCharacters function to detect files added or removed from the char dir on each panel load //characters.length = 0 //if this could be enabled it would allow the GetCharacters function to detect files added or removed from the char dir on each panel load
console.log('quickRefresh() -- active_character -- '+active_character); //console.log('quickRefresh() -- active_character -- '+active_character);
console.log('quickRefresh() -- this_chid -- '+this_chid); //console.log('quickRefresh() -- this_chid -- '+this_chid);
getSettings("def"); getSettings("def");
getCharacters(); getCharacters();
getUserAvatars(); getUserAvatars();
@@ -226,6 +226,24 @@
}; };
} }
//RossAscends: a utility function for counting characters, even works for unsaved characters.
function CountCharTokens(){
$('#result_info').html('');
if (selected_button == 'create'){
var count_tokens = encode(JSON.stringify(create_save_description+create_save_personality+create_save_scenario+create_save_mes_example)).length;
console.log('This unsaved character has '+count_tokens+' tokens in the defs.');
}else{
var count_tokens = encode(JSON.stringify(characters[this_chid].description+characters[this_chid].personality+characters[this_chid].scenario+characters[this_chid].mes_example)).length;
console.log(characters[this_chid].name+' has '+count_tokens+' tokens in the defs.');
}
if(count_tokens < 1024){
$('#result_info').html(count_tokens+" Tokens");
}else{
$('#result_info').html("<font color=red>"+count_tokens+" Tokens(TOO MANY TOKENS)</font>");
}
}
$('#characloud_url').click(function(){ $('#characloud_url').click(function(){
window.open('https://boosty.to/tavernai', '_blank'); window.open('https://boosty.to/tavernai', '_blank');
}); });
@@ -350,7 +368,7 @@
//console.log('printCharacters() entered'); //console.log('printCharacters() entered');
$("#rm_print_characters_block").empty(); $("#rm_print_characters_block").empty();
console.log('printCharacters() -- sees '+characters.length+' characters.'); //console.log('printCharacters() -- sees '+characters.length+' characters.');
characters.forEach(function(item, i, arr) { characters.forEach(function(item, i, arr) {
var this_avatar = default_avatar; var this_avatar = default_avatar;
@@ -359,7 +377,7 @@
} //RossAscends: changed 'prepend' to 'append' to make alphabetical sorting display correctly. } //RossAscends: changed 'prepend' to 'append' to make alphabetical sorting display correctly.
$("#rm_print_characters_block").append('<div class=character_select chid='+i+' id="CharID'+i+'"><div class=avatar><img src="'+this_avatar+'"></div><div class=ch_name>'+item.name+'</div></div>'); $("#rm_print_characters_block").append('<div class=character_select chid='+i+' id="CharID'+i+'"><div class=avatar><img src="'+this_avatar+'"></div><div class=ch_name>'+item.name+'</div></div>');
console.log('printcharacters() -- printing -- ChID '+i+' ('+item.name+')'); //console.log('printcharacters() -- printing -- ChID '+i+' ('+item.name+')');
}); });
} }
@@ -889,6 +907,8 @@
} }
function runGenerate(cycleGenerationPromt = ''){ function runGenerate(cycleGenerationPromt = ''){
generatedPromtCache+=cycleGenerationPromt; generatedPromtCache+=cycleGenerationPromt;
if(generatedPromtCache.length == 0){ if(generatedPromtCache.length == 0){
chatString = ""; chatString = "";
@@ -945,7 +965,8 @@
//Send story string //Send story string
var mesSendString = ''; var mesSendString = '';
var mesExmString = ''; var mesExmString = '';
function setPromtString(){
function setPromtString(){
mesSendString = ''; mesSendString = '';
mesExmString = ''; mesExmString = '';
for(let j = 0; j < count_exm_add; j++){ for(let j = 0; j < count_exm_add; j++){
@@ -955,17 +976,22 @@
mesSendString+=mesSend[j]; mesSendString+=mesSend[j];
} }
} }
function checkPromtSize(){ function checkPromtSize(){
setPromtString(); setPromtString();
let thisPromtContextSize = encode(JSON.stringify(storyString+mesExmString+mesSendString+anchorTop+anchorBottom+charPersonality+generatedPromtCache)).length+120; let thisPromtContextSize = encode(JSON.stringify(storyString+mesExmString+mesSendString+anchorTop+anchorBottom+charPersonality+generatedPromtCache)).length+120;
if(thisPromtContextSize > this_max_context){
if(count_exm_add > 0){ if(thisPromtContextSize > this_max_context){ //if the prepared prompt is larger than the max context size...
if(count_exm_add > 0){ // ..and we have example mesages..
//console.log('Context size: '+thisPromtContextSize+' -- too big, removing example message');
//mesExamplesArray.length = mesExamplesArray.length-1; //mesExamplesArray.length = mesExamplesArray.length-1;
count_exm_add--; count_exm_add--; // remove the example messages...
checkPromtSize(); checkPromtSize(); // and try agin...
}else if(mesSend.length > 0){ }else if(mesSend.length > 0){ // if the chat history is longer than 0
mesSend.shift(); //console.log('Context size: '+thisPromtContextSize+' -- too big, removing oldest chat message');
checkPromtSize(); mesSend.shift(); // remove the first (oldest) chat entry..
checkPromtSize(); // and check size again..
}else{ }else{
//end //end
} }
@@ -975,6 +1001,7 @@
if(generatedPromtCache.length > 0){ if(generatedPromtCache.length > 0){
//console.log('Generated Prompt Cache length: '+generatedPromtCache.length);
checkPromtSize(); checkPromtSize();
}else{ }else{
setPromtString(); setPromtString();
@@ -991,26 +1018,35 @@
var generate_data; var generate_data;
if(main_api == 'kobold'){ if(main_api == 'kobold'){
var generate_data = {prompt: finalPromt, gui_settings: true,max_length: amount_gen,temperature: temp, max_context_length: max_context}; var generate_data = {prompt: finalPromt, gui_settings: true,max_length: amount_gen,temperature: temp, max_context_length: max_context};
if(preset_settings != 'gui'){ if(preset_settings != 'gui'){ //if we aren't using the kobold GUI settings...
var this_settings = koboldai_settings[koboldai_setting_names[preset_settings]]; var this_settings = koboldai_settings[koboldai_setting_names[preset_settings]];
var this_amount_gen = parseInt(amount_gen); var this_amount_gen = parseInt(amount_gen); // how many tokens the AI will be requested to generate
if(is_pygmalion){
if(tokens_already_generated === 0){
if(parseInt(amount_gen) >= 50){
this_amount_gen = 50;
}else{
this_amount_gen = parseInt(amount_gen);
}
}else{ if(is_pygmalion){ // if we are using a pygmalion model...
if(parseInt(amount_gen) - tokens_already_generated < tokens_cycle_count){ if(tokens_already_generated === 0){ // if nothing has been generated yet..
this_amount_gen = parseInt(amount_gen) - tokens_already_generated; if(parseInt(amount_gen) >= 50){ // if the max gen setting is > 50...(
this_amount_gen = 50; // then only try to make 50 this cycle..
}else{ }else{
this_amount_gen = tokens_cycle_count; this_amount_gen = parseInt(amount_gen); // otherwise, make as much as the max amount request.
}
//console.log('Max Gen Amount: '+parseInt(amount_gen));
}else{ // if we already recieved some generated text...
if(parseInt(amount_gen) - tokens_already_generated < tokens_cycle_count){ // if the remaining tokens to be made is less than next potential cycle count
this_amount_gen = parseInt(amount_gen) - tokens_already_generated; // subtract already generated amount from the desired max gen amount
//console.log('Remaining tokens to be requested: '+this_amount_gen);
}else{
this_amount_gen = tokens_cycle_count; // otherwise make the standard cycle amont (frist 50, and 30 after that)
} }
} }
} //console.log('Upcoming token request amt: '+this_amount_gen);
}else{
//console.log('non-pyg model or GUI Settings are being used -- skipping request split');
}
generate_data = {prompt: finalPromt, generate_data = {prompt: finalPromt,
gui_settings: false, gui_settings: false,
sampler_order: this_settings.sampler_order, sampler_order: this_settings.sampler_order,
@@ -1076,7 +1112,10 @@
dataType: "json", dataType: "json",
contentType: "application/json", contentType: "application/json",
success: function(data){ success: function(data){
tokens_already_generated += this_amount_gen; tokens_already_generated += this_amount_gen; // add new gen amt to any prev gen counter..
//console.log('Tokens requested in total: '+tokens_already_generated);
//$("#send_textarea").focus(); //$("#send_textarea").focus();
//$("#send_textarea").removeAttr('disabled'); //$("#send_textarea").removeAttr('disabled');
is_send_press = false; is_send_press = false;
@@ -1089,16 +1128,22 @@
var getMessage = data.output; var getMessage = data.output;
} }
//Pygmalion run again //Pygmalion run again // to make it continue generating so long as it's under max_amount and hasn't signaled
// an end to the character's response via typing "You:" or adding "<endoftext>"
if(is_pygmalion){ if(is_pygmalion){
if_typing_text = false; if_typing_text = false;
message_already_generated +=getMessage; message_already_generated +=getMessage;
if(message_already_generated.indexOf('You:') === -1 && message_already_generated.indexOf('<|endoftext|>') === -1 && tokens_already_generated < parseInt(amount_gen) && getMessage.length > 0){ //console.log('AI Response so far: '+message_already_generated);
runGenerate(getMessage); if( message_already_generated.indexOf('You:') === -1 && //if there is no 'You:' in the response msg
message_already_generated.indexOf('<|endoftext|>') === -1 && //if there is no <endoftext> stamp in the response msg
tokens_already_generated < parseInt(amount_gen) && //if the gen'd msg is less than the max response length..
getMessage.length > 0){ //if we actually have gen'd text at all...
runGenerate(getMessage); //generate again with the 'GetMessage' argument..
return; return;
} }
getMessage = message_already_generated; getMessage = message_already_generated;
} }
//Formating //Formating
getMessage = $.trim(getMessage); getMessage = $.trim(getMessage);
@@ -1135,10 +1180,10 @@
addOneMessage(chat[chat.length-1]); addOneMessage(chat[chat.length-1]);
$( "#send_but" ).css("display", "inline"); $( "#send_but" ).css("display", "inline");
$( "#loading_mes" ).css("display", "none"); $( "#loading_mes" ).css("display", "none");
//console.log('/savechat called by /Generate'); //let final_message_length = encode(JSON.stringify(getMessage)).length;
//console.log('AI Response: +'+getMessage+ '('+final_message_length+' tokens)');
saveChat(); saveChat();
}else{ }else{
//console.log('run force_name2 protocol');
Generate('force_name2'); Generate('force_name2');
} }
}else{ }else{
@@ -1223,9 +1268,7 @@
chat_create_date = humanizedISO8601DateTime(); chat_create_date = humanizedISO8601DateTime();
} }
//console.log(chat); //console.log(chat);
//console.log('getChatResults called by /getchat');
getChatResult(); getChatResult();
//console.log('savechat called by /getchat');
saveChat(); saveChat();
}, },
error: function (jqXHR, exception) { error: function (jqXHR, exception) {
@@ -1340,6 +1383,7 @@
}); });
function select_rm_create(){ function select_rm_create(){
menu_type = 'create'; menu_type = 'create';
//console.log('select_rm_Create() -- selected button: '+selected_button); //console.log('select_rm_Create() -- selected button: '+selected_button);
if(selected_button == 'create'){ if(selected_button == 'create'){
if(create_save_avatar != ''){ if(create_save_avatar != ''){
@@ -1347,6 +1391,7 @@
read_avatar_load($("#add_avatar_button").get(0)); read_avatar_load($("#add_avatar_button").get(0));
} }
} }
$( "#rm_characters_block" ).css("display", "none"); $( "#rm_characters_block" ).css("display", "none");
$( "#rm_api_block" ).css("display", "none"); $( "#rm_api_block" ).css("display", "none");
$( "#rm_ch_create_block" ).css("display", "block"); $( "#rm_ch_create_block" ).css("display", "block");
@@ -1359,6 +1404,7 @@
complete: function() { } complete: function() { }
}); });
$( "#rm_info_block" ).css("display", "none"); $( "#rm_info_block" ).css("display", "none");
$( "#delete_button_div" ).css("display", "none"); $( "#delete_button_div" ).css("display", "none");
$( "#delete_button" ).css("display", "none"); $( "#delete_button" ).css("display", "none");
$( "#export_button" ).css("display", "none"); $( "#export_button" ).css("display", "none");
@@ -1389,6 +1435,7 @@
$("#name_div").css("display", "block"); $("#name_div").css("display", "block");
$("#form_create").attr("actiontype", "createcharacter"); $("#form_create").attr("actiontype", "createcharacter");
CountCharTokens();
} }
function select_rm_characters(){ function select_rm_characters(){
QuickRefresh(); QuickRefresh();
@@ -1485,14 +1532,8 @@
clearChat(); clearChat();
chat.length = 0; chat.length = 0;
getChat(); getChat();
var count_tokens = encode(JSON.stringify(characters[this_chid].description+characters[this_chid].personality+characters[this_chid].scenario+characters[this_chid].mes_example)).length;
//RossAscends: added token counter to load when a character is selected, instead of waiting for an edit. //console.log('Clicked on '+characters[this_chid].name+' Active_Character set to: '+active_character+' (ChID:'+this_chid+')');
if(count_tokens < 1024){
$('#result_info').html(count_tokens+" Tokens");
}else{
$('#result_info').html("<font color=red>"+count_tokens+" Tokens(TOO MANY TOKENS)</font>");
}
console.log('Clicked on '+characters[this_chid].name+' Active_Character set to: '+active_character+' (ChID:'+this_chid+')');
} }
}else{ //if clicked on character that was already selected }else{ //if clicked on character that was already selected
selected_button = 'character_edit'; selected_button = 'character_edit';
@@ -1888,13 +1929,8 @@
$('#create_button').attr('value','Save'); $('#create_button').attr('value','Save');
//console.log('/editcharacters -- this_chid -- '+this_chid); //console.log('/editcharacters -- this_chid -- '+this_chid);
if(this_chid != undefined && this_chid != 'invalid-safety-id'){ //added check to avoid trying to load tokens in case of character deletion if(this_chid != undefined && this_chid != 'invalid-safety-id'){ //added check to avoid trying to load tokens in case of character deletion
var count_tokens = encode(JSON.stringify(characters[this_chid].description+characters[this_chid].personality+characters[this_chid].scenario+characters[this_chid].mes_example)).length; CountCharTokens();
} }
if(count_tokens < 1024){
$('#result_info').html(count_tokens+" Tokens");
}else{
$('#result_info').html("<font color=red>"+count_tokens+" Tokens(TOO MANY TOKENS)</font>");
}
}, },
error: function (jqXHR, exception) { error: function (jqXHR, exception) {
$('#create_button').removeAttr("disabled"); $('#create_button').removeAttr("disabled");
@@ -1921,8 +1957,10 @@
}); });
$('#description_textarea').on('keyup paste cut', function(){//change keyup paste cut $('#description_textarea').on('keyup paste cut', function(){//change keyup paste cut
if(menu_type == 'create'){ if(menu_type == 'create'){
create_save_description = $('#description_textarea').val(); create_save_description = $('#description_textarea').val();
CountCharTokens();
}else{ }else{
timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit); timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit);
} }
@@ -1932,6 +1970,7 @@
if(menu_type == 'create'){ if(menu_type == 'create'){
create_save_personality = $('#personality_textarea').val(); create_save_personality = $('#personality_textarea').val();
CountCharTokens();
}else{ }else{
timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit); timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit);
} }
@@ -1940,6 +1979,7 @@
if(menu_type == 'create'){ if(menu_type == 'create'){
create_save_scenario = $('#scenario_pole').val(); create_save_scenario = $('#scenario_pole').val();
CountCharTokens();
}else{ }else{
timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit); timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit);
} }
@@ -1948,6 +1988,7 @@
if(menu_type == 'create'){ if(menu_type == 'create'){
create_save_mes_example = $('#mes_example_textarea').val(); create_save_mes_example = $('#mes_example_textarea').val();
CountCharTokens();
}else{ }else{
timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit); timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit);
} }
@@ -1956,6 +1997,7 @@
if(menu_type == 'create'){ if(menu_type == 'create'){
create_save_first_message = $('#firstmessage_textarea').val(); create_save_first_message = $('#firstmessage_textarea').val();
CountCharTokens();
}else{ }else{
timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit); timerSaveEdit = setTimeout(() => {$("#create_button").click();},durationSaveEdit);
} }
@@ -2338,7 +2380,9 @@
novelai_settings[i] = JSON.parse(item); novelai_settings[i] = JSON.parse(item);
}); });
var arr_holder = {}; var arr_holder = {};
$("#settings_perset_novel").empty();
$("#settings_perset_novel").empty;
novelai_setting_names.forEach(function(item, i, arr) { novelai_setting_names.forEach(function(item, i, arr) {
arr_holder[item] = i; arr_holder[item] = i;
$('#settings_perset_novel').append('<option value='+i+'>'+item+'</option>'); $('#settings_perset_novel').append('<option value='+i+'>'+item+'</option>');
@@ -2357,7 +2401,10 @@
koboldai_settings[i] = JSON.parse(item); koboldai_settings[i] = JSON.parse(item);
}); });
var arr_holder = {}; var arr_holder = {};
$("#settings_perset").empty(); //RossAscends: uncommented this to prevent settings selector from doubling preset list on QuickRefresh
$("#settings_perset").empty(); //RossAscends: uncommented this to prevent settings selector from doubling preset list on QuickRefresh
$("#settings_perset").append('<option value="gui">GUI KoboldAI Settings</option>'); //adding in the GUI settings, since it is not loaded dynamically
koboldai_setting_names.forEach(function(item, i, arr) { koboldai_setting_names.forEach(function(item, i, arr) {
arr_holder[item] = i; arr_holder[item] = i;
$('#settings_perset').append('<option value='+i+'>'+item+'</option>'); $('#settings_perset').append('<option value='+i+'>'+item+'</option>');
@@ -3046,11 +3093,14 @@
</div> </div>
<div> <div>
<h3 id="character_popup_text_h3">Create character</h3> <h3 id="character_popup_text_h3"></h3> - Advanced Defininitions
</div> </div>
</div> </div>
<img id="character_cross" src="img/cross.png" style="position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6"> <img id="character_cross" src="img/cross.png" style="position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
<div id="personality_div"> <div id="personality_div">
<hr>
<h4>Personality summary</h4><h5>A brief description of the personality <a href="/notes/2" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5> <h4>Personality summary</h4><h5>A brief description of the personality <a href="/notes/2" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
<input id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole" autocomplete="off"> <input id="personality_textarea" name="personality" placeholder="" form="form_create" class="text_pole" autocomplete="off">
</div> </div>
@@ -3118,7 +3168,10 @@
</div> </div>
</div> </div>
<div id="bg_menu"> <div id="bg_menu">
<div id="logo_block"><div id="bg_menu_button"><img src="img/tri.png"></div><img src="img/logo.png" id="site_logo"> <div id="logo_block">
<div id="bg_menu_button"><img src="img/tri.png">
</div>
<img src="img/logo.png" id="site_logo">
<div id="update-notification"> <div id="update-notification">
<a id="verson" href="https://github.com/TavernAI/TavernAI" target="_blank"></a> <a id="verson" href="https://github.com/TavernAI/TavernAI" target="_blank"></a>
</div> </div>
@@ -3147,48 +3200,52 @@
<div id="rm_ch_create_block" class="right_menu" style="display: none;"> <div id="rm_ch_create_block" class="right_menu" style="display: none;">
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data"> <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<div id="name_div"> <div id="avatar-and-name-block">
<h4>Name</h4><h5>Character name</h5> <div id="name_div">
<input id="character_name_pole" name="ch_name" class="text_pole" maxlength="120" value="" autocomplete="off"> <h4>Character Name</h4>
</div> <input id="character_name_pole" name="ch_name" class="text_pole" maxlength="120" value="" autocomplete="off">
<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> </div>
<div id="avatar_div" class="avatar_div">
<label for="add_avatar_button" class="menu_button" title="Click to select a new avatar for this character"> <div id="avatar_div_div" class="avatar">
<input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp"> <img id="avatar_load_preview" src="img/fluffy.png" alt="avatar">
Change Avatar </div>
</label> <label for="add_avatar_button" class="menu_button" title="Click to select a new avatar for this character">
</div> <input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
<hr> Change Avatar
<div id="description_div"> </label>
</div>
<div id="result_info" style="width: 100px;">&nbsp;</div>
</div>
<hr>
<div id="description_div">
<h4>Description</h4><h5>Description of personality and other characteristics <a href="/notes/1" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5> <h4>Description</h4><h5>Description of personality and other characteristics <a href="/notes/1" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
<textarea id="description_textarea" name="description" placeholder=""></textarea>
</div> </div>
<textarea id="description_textarea" name="description" placeholder=""></textarea>
<div id="first_message_div"> <div id="first_message_div">
<h4>First message</h4><h5>First message from the character <a href="/notes/3" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5> <h4>First message</h4><h5>First message from the character <a href="/notes/3" class="notes-link" target="_blank"><span class="note-link-span">?</span></a></h5>
<textarea id="firstmessage_textarea" name="first_mes" placeholder=""></textarea>
</div> </div>
<textarea id="firstmessage_textarea" name="first_mes" placeholder=""></textarea>
<!-- these divs are invisible and used for server communication purposes --> <!-- these divs are invisible and used for server communication purposes -->
<div id="avatar_url_div"> <div id="hidden-divs">
<input id="avatar_url_pole" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off"> <div id="avatar_url_div">
</div> <input id="avatar_url_pole" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
<div id="selected_chat_div"> </div>
<input id="selected_chat_pole" name="chat" class="text_pole" maxlength="999" size="2" value="" autocomplete="off"> <div id="selected_chat_div">
</div> <input id="selected_chat_pole" name="chat" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
<div id="create_date_div"> </div>
<input id="create_date_pole" name="create_date" class="text_pole" maxlength="999" size="2" value="" autocomplete="off"> <div id="create_date_div">
</div> <input id="create_date_pole" name="create_date" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
<div id="last_mes_div"> </div>
<input id="last_mes_pole" name="last_mes" class="text_pole" maxlength="999" size="2" value="" autocomplete="off"> <div id="last_mes_div">
</div> <input id="last_mes_pole" name="last_mes" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</div>
</div>
<!-- now back to normal divs for display purposes--> <!-- now back to normal divs for display purposes-->
<input id="advanced_div" class="menu_button" type="button" value="Advanced Edit"> <input id="advanced_div" class="menu_button" type="button" value="Advanced Edit">
<div id="result_info" style="width: 100px;">&nbsp;</div>
<hr>
<div class="form_create_bottom_buttons_block"> <div class="form_create_bottom_buttons_block">
<div id="rm_button_back" class="menu_button">Go Back</div> <div id="rm_button_back" class="menu_button">Go Back</div>
<input id="delete_button" class="menu_button" type="button" value="Delete"> <input id="delete_button" class="menu_button" type="button" value="Delete">

156
public/style.css
View File

@@ -62,8 +62,6 @@ body {
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
/*background-color: var(--black50a);*/
/*-webkit-box-shadow: inset 0 0 6px var(--black30a);*/
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
} }
@@ -133,9 +131,10 @@ code {
position:fixed; position:fixed;
color:var(--black30a); color:var(--black30a);
border-bottom:1px solid var(--black70a); border-bottom:1px solid var(--black70a);
box-shadow: 0 4px 8px 0 var(--black30a), 0 6px 20px 0 var(--black30a); box-shadow:0 2px 20px 0 var(--black70a);
backdrop-filter: blur(10px) brightness(0.3); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px) brightness(0.3); background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
z-index:2001; z-index:2001;
} }
@@ -160,8 +159,9 @@ code {
border-bottom:1px solid var(--black30a); border-bottom:1px solid var(--black30a);
border-left:1px solid var(--black30a); border-left:1px solid var(--black30a);
border-right:1px solid var(--black30a); border-right:1px solid var(--black30a);
backdrop-filter: blur(10px) brightness(0.3); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px) brightness(0.3); background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
/*border-radius: 0 0 40px 40px;*/ /*border-radius: 0 0 40px 40px;*/
text-shadow: #000 0 0 3px; text-shadow: #000 0 0 3px;
@@ -179,9 +179,8 @@ code {
grid-template-columns: 40px auto 40px; grid-template-columns: 40px auto 40px;
width: 100%; width: 100%;
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
border: 1px solid var(--black50a); border: 1px solid var(--black30a);
/*backdrop-filter: blur(10px) brightness(0.3);
-webkit-backdrop-filter: blur(10px) brightness(0.3);*/
border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px;
background-color:var(--crimson70a); background-color:var(--crimson70a);
} }
@@ -190,14 +189,8 @@ code {
padding: 0; padding: 0;
border: 0; border: 0;
height: 40px; height: 40px;
/* width: 40px; */
position: relative; position: relative;
/* border-radius: 0 40px 40px 0; */
/* background-color: var(--black30a); */
background-position: center; background-position: center;
/* display: grid; */
/* vertical-align: middle; */
/* padding-top: 377%; */
} }
#send_but{ #send_but{
width: 40px; width: 40px;
@@ -268,17 +261,18 @@ code {
} }
.options-content { .options-content {
overflow: hidden; overflow: hidden;
display: block; display: block;
position: absolute; position: absolute;
backdrop-filter: brightness(0.3) blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: brightness(0.3) blur(10px); background-color: var(--black70a);
border: 1px solid #666; -webkit-backdrop-filter: blur(10px);
border-radius: 15px; border: 1px solid #666;
box-shadow:00 5px #000; border-radius: 15px;
text-shadow: #000 0 0 3px; box-shadow:00 5px #000;
min-width: 200px; text-shadow: #000 0 0 3px;
z-index: 2000; min-width: 200px;
z-index: 2000;
} }
/* Ссылки внутри выпадающего блока */ /* Ссылки внутри выпадающего блока */
@@ -287,7 +281,7 @@ code {
padding:0; padding:0;
border-top: 1px solid var(--white30a); border-top: 1px solid var(--white30a);
} }
#right-nav-panel hr{ #right-nav-panel hr, #personality_div hr {
background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent)); background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent));
} }
.options-content a { .options-content a {
@@ -379,20 +373,17 @@ br {
} }
textarea{ textarea{
width: 100%; width: 100%;
resize: vertical; resize: vertical;
display: block; display: block;
background-color: var(--black30a); background-color: var(--black30a);
outline: none; outline: none;
border: 1px solid var(--white30a); border: 1px solid var(--white30a);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 2px var(--black50a);
color: var(--white70a); color: var(--white70a);
font-size: 15px; font-size: 15px;
font-family: "Noto Sans", "Noto Color Emoji", sans-serif; font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
padding-left: 10px; padding: 5px 10px;
padding-top: 10px;
} }
#send_textarea{ #send_textarea{
@@ -421,7 +412,7 @@ width: 100%;
#description_textarea{ #description_textarea{
height: 200px; height: -webkit-fill-available;
} }
@@ -431,8 +422,7 @@ width: 100%;
} }
#firstmessage_textarea{ #firstmessage_textarea{
height: 140px; height: -webkit-fill-available;
margin-top:0;
} }
.text_pole{ .text_pole{
@@ -463,7 +453,7 @@ width: 100%;
.right_menu h5 { .right_menu h5 {
color: var(--white50a); color: var(--white50a);
margin:0; margin:0;
padding:5px 0; padding-bottom:5px;
font-size:0.75rem; font-size:0.75rem;
} }
@@ -546,7 +536,6 @@ input[type=submit] {
height: 20px; height: 20px;
margin-top: -25px; margin-top: -25px;
margin-left: 0; margin-left: 0;
background: var(--black30a);
-webkit-transition: all 0.275s; -webkit-transition: all 0.275s;
transition: all 0.275s; transition: all 0.275s;
} }
@@ -745,8 +734,9 @@ select option:not(:checked) { /* works to color unselected items */
display: block; display: block;
width: 122px; width: 122px;
height:0; height:0;
backdrop-filter: brightness(30%) blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px) brightness(30%); background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
overflow: hidden; overflow: hidden;
} }
@@ -758,8 +748,9 @@ width: 103px;
/* padding-bottom: 20px; */ /* padding-bottom: 20px; */
position: relative; position: relative;
margin-left: 3px; margin-left: 3px;
backdrop-filter: blur(1px) brightness(50%); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(1px) brightness(50%); background-color: var(--black70a);
-webkit-backdrop-filter: blur(1px);
} }
.bg_example_img { .bg_example_img {
@@ -808,8 +799,23 @@ width: 103px;
margin-bottom: 2px; margin-bottom: 2px;
} }
#form_create {
display: grid;
height: 90vh;
grid-template-rows: [avatar] min-content
[hr] min-content
[descriptionHeader] min-content
[description] auto
[firstmessageHeader] min-content
[firstMessage] auto
[hidden] min-content
[advanced] min-content
[tokenCounter] min-content
[formButtons] min-content;
}
.avatar_div{ .avatar_div{
margin-top: 16px; /*margin-top: 16px;*/
vertical-align: middle; vertical-align: middle;
display: grid; display: grid;
grid-template-columns: min-content min-content; grid-template-columns: min-content min-content;
@@ -870,8 +876,9 @@ width: 103px;
#form_bg_download{ #form_bg_download{
margin-bottom: 2px; margin-bottom: 2px;
backdrop-filter: brightness(30%) blur(20px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: brightness(30%) blur(20px); background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
} }
/* Focus */ /* Focus */
#colab_popup{ #colab_popup{
@@ -888,8 +895,9 @@ width: 103px;
margin-top: 36vh; margin-top: 36vh;
box-shadow: 0 0 2px var(--black50a); box-shadow: 0 0 2px var(--black50a);
padding: 4px; padding: 4px;
backdrop-filter: blur(10px) brightness(0.3); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px) brightness(0.3); background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
border-radius: 10px; border-radius: 10px;
} }
#dialogue_popup{ #dialogue_popup{
@@ -905,7 +913,7 @@ width: 103px;
margin-top: 36vh; margin-top: 36vh;
box-shadow: 0 0 5px 5px var(--fullred); box-shadow: 0 0 5px 5px var(--fullred);
padding: 4px; padding: 4px;
background-color: var(--black50a); background-color: var(--black30a);
border-radius: 10px; border-radius: 10px;
} }
#dialogue_popup_ok{ #dialogue_popup_ok{
@@ -973,8 +981,8 @@ width: 103px;
} }
#colab_shadow_popup{ #colab_shadow_popup{
backdrop-filter: blur(10px) brightness(0.3); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px) brightness(0.3); -webkit-backdrop-filter: blur(10px);
display: none; display: none;
opacity: 1.0; opacity: 1.0;
position: absolute; position: absolute;
@@ -1099,7 +1107,6 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after
width:284px; width:284px;
margin-bottom: 35px; margin-bottom: 35px;
color: var(--white70a); color: var(--white70a);
box-shadow: 0 0 2px var(--black50a);
background-color: var(--black30a); background-color: var(--black30a);
} }
#user_avatar_block{ #user_avatar_block{
@@ -1174,8 +1181,9 @@ input[type="range"] {
margin-top: 15vh; margin-top: 15vh;
box-shadow: 5px 5px var(--black30a); box-shadow: 5px 5px var(--black30a);
padding: 4px; padding: 4px;
backdrop-filter: blur(10px) brightness(0.3); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px) brightness(0.3); background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
border-radius: 10px; border-radius: 10px;
padding-top: 30px; padding-top: 30px;
} }
@@ -1228,13 +1236,10 @@ input[type="range"] {
height: 23px; height: 23px;
} }
.edit_textarea{ .edit_textarea{
padding:0; padding:5px;
margin:0; margin:0;
border: none;
border-color: var(--transparent);
outline: none; outline: none;
box-shadow: 0 0 3px var(--white50a); background-color: var(--black50a);
background-color: var(--black30a);
font-size: 15px; font-size: 15px;
line-height:1.25rem; line-height:1.25rem;
} }
@@ -1257,8 +1262,9 @@ input[type="range"] {
} }
#shadow_character_popup{ #shadow_character_popup{
backdrop-filter: blur(10px) brightness(0.3); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px) brightness(0.3); background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
display: none; display: none;
opacity: 1.0; opacity: 1.0;
position: absolute; position: absolute;
@@ -1270,7 +1276,7 @@ input[type="range"] {
display: none; display: none;
background-color: var(--black30a); background-color: var(--black30a);
backdrop-filter: blur(50px); backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(30px);
grid-template-rows: 50px 100px 100px auto; grid-template-rows: 50px 100px 100px auto;
grid-gap: 10px; grid-gap: 10px;
max-width: 800px; max-width: 800px;
@@ -1282,11 +1288,11 @@ input[type="range"] {
left: 0; left: 0;
right: 0; right: 0;
margin-top: 40px; margin-top: 40px;
box-shadow: 0 0 2px var(--black50a); box-shadow: 0 0 20px var(--black70a);
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 30px;
border: 1px solid var(--black30a); border: 1px solid var(--black30a);
border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px;
} }
@@ -1295,6 +1301,7 @@ input[type="range"] {
margin-top:0; margin-top:0;
margin-bottom:0; margin-bottom:0;
margin-left:0; margin-left:0;
display: inline;
} }
#character_popup h4{ #character_popup h4{
@@ -1350,8 +1357,9 @@ input[type="range"] {
height: 40px; height: 40px;
margin-top: 15px; margin-top: 15px;
margin-left: 36px; margin-left: 36px;
backdrop-filter: blur(10px) brightness(0.3); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px) brightness(0.3); background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
width: 110px; width: 110px;
text-align: center; text-align: center;
} }
@@ -1363,8 +1371,8 @@ input[type="range"] {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
z-index: 2059; z-index: 2059;
backdrop-filter: blur(10px) brightness(1); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px) brightness(1); -webkit-backdrop-filter: blur(10px);
} }
#select_chat_popup{ #select_chat_popup{
@@ -1380,7 +1388,7 @@ input[type="range"] {
left: 0; left: 0;
right: 0; right: 0;
margin-top: 6vh; margin-top: 6vh;
box-shadow: 0 0 10px var(--black50a); box-shadow: 0px 0px 20px var(--black30a);
padding: 10px; padding: 10px;
background-color: var(--black70a); background-color: var(--black70a);
border-radius: 20px; border-radius: 20px;
@@ -1477,7 +1485,7 @@ p {
} }
hr { hr {
margin: 10px 0; margin: 5px 0;
height: 1px; height: 1px;
border: 0; border: 0;
} }
@@ -1525,8 +1533,9 @@ a {
-webkit-transition: right 0.14s ease-in-out 0.02s; -webkit-transition: right 0.14s ease-in-out 0.02s;
-moz-transition: right 0.14s ease-in-out 0.02s; -moz-transition: right 0.14s ease-in-out 0.02s;
transition: right 0.14s ease-in-out 0.02s; transition: right 0.14s ease-in-out 0.02s;
backdrop-filter: blur(10px) brightness(0.3); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px) brightness(0.3); background-color: var(--black70a);
-webkit-backdrop-filter: blur(10px);
z-index: 2050; z-index: 2050;
white-space:nowrap; white-space:nowrap;
border-left: 1px solid var(--black30a); border-left: 1px solid var(--black30a);
@@ -1567,7 +1576,7 @@ a {
height: 30px; height: 30px;
margin-top: -8px; margin-top: -8px;
margin-left: -24px; margin-left: -24px;
border: 1px solid var(--white50a); border: 1px solid var(--white30a);
border-radius: 5px; border-radius: 5px;
background: var(--black30a); background: var(--black30a);
color: var(--white50a); color: var(--white50a);
@@ -1584,7 +1593,6 @@ a {
/* this is what causes the panel movement */ /* this is what causes the panel movement */
#nav-toggle:checked ~ #right-nav-panel{ #nav-toggle:checked ~ #right-nav-panel{
right:0; right:0;
box-shadow: -5px 0 10px 0 var(--black50a); box-shadow: -5px 0 20px 0 var(--black70a);
overflow-y: auto; overflow-y: auto;
border-left: 1px solid var(--white30a);
} }