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

- made right swipe highlight when next swipe will generate

Browse Source 
- added a swipe counter below right swipe
(could add a toggle for displaying it later)
- removed spammy console.logs from expressions index.js
- swipes no longer trigger under the following conditions:
- - when an input it focused
- - when character_popup or history popup are visible
- - when send_textarea has something typed into it
(I think this a bit too restrictive, may seek a smarter way to handle it)

ISSUE: Pyg repeating gens cause swipes animation to lag/freeze
not sure what is the cause, but should seek to remedy somehow.
This commit is contained in:
RossAsscends
2023-03-18 12:34:18 +09:00
parent 07c6f09be2
commit de27382e50
4 changed files with 116 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
public/script.js
View File

@ -739,6 +739,7 @@ function printMessages() {
//console.log(chat); //console.log(chat);
//console.log('printMessages() -- printing messages for -- '+this_chid+' '+active_character+' '+characters[this_chid]); //console.log('printMessages() -- printing messages for -- '+this_chid+' '+active_character+' '+characters[this_chid]);
chat.forEach(function (item, i, arr) { chat.forEach(function (item, i, arr) {
//console.log('print message calling addOneMessage');
addOneMessage(item); addOneMessage(item);
}); });
} }
@ -845,7 +846,7 @@ function addOneMessage(mes, type = "normal") {
'</div>' + '</div>' +
'<div class="mes_bias">' + bias + '</div>' + '<div class="mes_bias">' + bias + '</div>' +
'<div class="swipe_right">' + '<div class="swipe_right">' +
' <img src="img/swipe_right.png">' + ' <img src="img/swipe_right.png"><div class="swipes-counter"></div>' +
'</div>' + '</div>' +
'</div>'; '</div>';
@ -868,17 +869,32 @@ function addOneMessage(mes, type = "normal") {
if (type === 'swipe') { if (type === 'swipe') {
$("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html(''); $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html('');
$("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').append(messageText); $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').append(messageText);
//console.log(mes);
} else { } else {
$("#chat").children().filter('[mesid="' + count_view_mes + '"]').children('.mes_block').children('.mes_text').append(messageText); $("#chat").children().filter('[mesid="' + count_view_mes + '"]').children('.mes_block').children('.mes_text').append(messageText);
hideSwipeButtons(); hideSwipeButtons();
count_view_mes++; count_view_mes++;
} }
var $textchat = $("#chat"); var $textchat = $("#chat");
$('#chat .mes').last().addClass('last_mes'); $('#chat .mes').last().addClass('last_mes');
$('#chat .mes').eq(-2).removeClass('last_mes'); $('#chat .mes').eq(-2).removeClass('last_mes');
$textchat.scrollTop(($textchat[0].scrollHeight)); $textchat.scrollTop(($textchat[0].scrollHeight));
//console.log(chat[chat.length - 1].["swipes"]);
//console.log(mes);
/* if (mes["swipes"] !== undefined) {
if (mes["swipes"].length - 1 == mes["swipe_id"]) { //this works to detect when next right swipe would generate
$(".swipe_right").css('opacity', '0.7') // but we need it to happen on load, not only when swiping happens.
} else {
$(".swipe_right").css('opacity', '0.3')
};
} */
hideSwipeButtons(); hideSwipeButtons();
//console.log('addonemessage calling showSwipeBtns');
showSwipeButtons(); showSwipeButtons();
} }
@ -909,7 +925,7 @@ function sendSystemMessage(type, text) {
} }
chat.push(newMessage); chat.push(newMessage);
console.log('sendSystemMessage calls addOneMessage'); //console.log('sendSystemMessage calls addOneMessage');
addOneMessage(newMessage); addOneMessage(newMessage);
is_send_press = false; is_send_press = false;
} }
@ -1035,7 +1051,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
console.log('checking bias'); console.log('checking bias');
chat[chat.length - 1]['extra']['bias'] = messageBias; chat[chat.length - 1]['extra']['bias'] = messageBias;
} }
console.log('Generate calls addOneMessage'); //console.log('Generate calls addOneMessage');
addOneMessage(chat[chat.length - 1]); addOneMessage(chat[chat.length - 1]);
} }
//////////////////////////////////// ////////////////////////////////////
@ -1212,7 +1228,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
return; return;
function runGenerate(cycleGenerationPromt = '') { function runGenerate(cycleGenerationPromt = '') {
$(".swipe_right").css("display", "none");
is_send_press = true; is_send_press = true;
generatedPromtCache += cycleGenerationPromt; generatedPromtCache += cycleGenerationPromt;
@ -1555,7 +1571,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
if (chat[chat.length - 1]['swipe_id'] === chat[chat.length - 1]['swipes'].length - 1) { if (chat[chat.length - 1]['swipe_id'] === chat[chat.length - 1]['swipes'].length - 1) {
//console.log(getMessage); //console.log(getMessage);
chat[chat.length - 1]['mes'] = getMessage; chat[chat.length - 1]['mes'] = getMessage;
console.log('runGenerate calls addOneMessage for swipe'); // console.log('runGenerate calls addOneMessage for swipe');
addOneMessage(chat[chat.length - 1], 'swipe'); addOneMessage(chat[chat.length - 1], 'swipe');
} else { } else {
chat[chat.length - 1]['mes'] = getMessage; chat[chat.length - 1]['mes'] = getMessage;
@ -1581,7 +1597,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
chat[chat.length - 1]['is_name'] = true; chat[chat.length - 1]['is_name'] = true;
chat[chat.length - 1]['force_avatar'] = avatarImg; chat[chat.length - 1]['force_avatar'] = avatarImg;
} }
console.log('runGenerate calls addOneMessage'); //console.log('runGenerate calls addOneMessage');
addOneMessage(chat[chat.length - 1]); addOneMessage(chat[chat.length - 1]);
$("#send_but").css("display", "inline"); $("#send_but").css("display", "inline");
@ -1603,6 +1619,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
$("#send_but").css("display", "inline"); $("#send_but").css("display", "inline");
$("#loading_mes").css("display", "none"); $("#loading_mes").css("display", "none");
//console.log('runGenerate calling showSwipeBtns');
showSwipeButtons(); showSwipeButtons();
} }
console.log('/savechat called by /Generate'); console.log('/savechat called by /Generate');
@ -1611,7 +1628,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
//console.log('AI Response: +'+getMessage+ '('+final_message_length+' tokens)'); //console.log('AI Response: +'+getMessage+ '('+final_message_length+' tokens)');
$("#send_but").css("display", "inline"); $("#send_but").css("display", "inline");
//console.log('runGenerate calling showSwipeBtns pt. 2');
showSwipeButtons(); showSwipeButtons();
$("#loading_mes").css("display", "none"); $("#loading_mes").css("display", "none");
@ -2036,6 +2053,7 @@ async function getSettings(type) {
$('#swipes-checkbox').prop('checked', swipes); /// swipecode $('#swipes-checkbox').prop('checked', swipes); /// swipecode
console.log('getSettings -- swipes = ' + swipes + '. toggling box'); console.log('getSettings -- swipes = ' + swipes + '. toggling box');
hideSwipeButtons(); hideSwipeButtons();
//console.log('getsettings calling showswipebtns');
showSwipeButtons(); showSwipeButtons();
//Novel //Novel
@ -2140,23 +2158,9 @@ async function getSettings(type) {
textgenerationwebui_settings[i] textgenerationwebui_settings[i]
); );
} }
/* //RossAscends: getting variables added/adjusted/applied with RA-mods
active_character = settings.active_character;
this_chid = settings.active_character; //forcing variable sameness for chid and this_chid with active_character in order to load RA_ALC
var chid = settings.active_character; //forcing variable sameness for chid and this_chid with active_character in order to load RA_ALC
console.log(
"getSettings -- loaded from file -- active_character : " +
settings.active_character
);
auto_connect = settings.auto_connect;
auto_load_chat = settings.auto_load_chat; */
selected_button = settings.selected_button; selected_button = settings.selected_button;
/* NavOpenClosePref = settings.NavOpenClosePref;
stickyNavPref = settings.stickyNavPref; */
/* $("#nav-toggle").prop("checked", NavOpenClosePref);
$("#rm_button_panel_pin").prop("checked", stickyNavPref);
$("#auto-connect-checkbox").prop("checked", auto_connect);
$("#auto-load-chat-checkbox").prop("checked", auto_load_chat); */
} }
if (!is_checked_colab) isColab(); if (!is_checked_colab) isColab();
@ -2696,7 +2700,33 @@ function showSwipeButtons() {
if (swipeId !== undefined && swipeId != 0) { if (swipeId !== undefined && swipeId != 0) {
currentMessage.children('.swipe_left').css('display', 'flex'); currentMessage.children('.swipe_left').css('display', 'flex');
} }
currentMessage.children('.swipe_right').css('display', 'flex'); if (is_send_press === false || chat[chat.length - 1].swipes.length > swipeId) { //only show right when generate is off, or when next right swipe would not make a generate happen
currentMessage.children('.swipe_right').css('display', 'flex');
currentMessage.children('.swipe_right').css('opacity', '0.3');
}
//had to add this to make the swipe counter work
//(copied from the onclick functions for swipe buttons..
//don't know why the array isn't set for non-swipe messsages in Generate or addOneMessage..)
if (chat[chat.length - 1]['swipe_id'] === undefined) { // if there is no swipe-message in the last spot of the chat array
chat[chat.length - 1]['swipe_id'] = 0; // set it to id 0
chat[chat.length - 1]['swipes'] = []; // empty the array
chat[chat.length - 1]['swipes'][0] = chat[chat.length - 1]['mes']; //assign swipe array with last message from chat
}
//console.log((chat[chat.length - 1]));
if (is_send_press === false && (chat[chat.length - 1].swipes.length - swipeId) === 1) {
console.log('highlighting R swipe');
currentMessage.children('.swipe_right').css('opacity', '0.7');
}
var swipesCounterHTML = (`${(swipeId + 1)}/${(chat[chat.length - 1].swipes.length)}`);
console.log(swipesCounterHTML);
$(".swipes-counter").html(swipesCounterHTML);
//console.log(swipeId);
//console.log(chat[chat.length - 1].swipes.length);
} }
function hideSwipeButtons() { function hideSwipeButtons() {
@ -2733,6 +2763,7 @@ $(document).ready(function () {
console.log('detected swipes-checkbox changed values') console.log('detected swipes-checkbox changed values')
swipes = !!$('#swipes-checkbox').prop('checked'); swipes = !!$('#swipes-checkbox').prop('checked');
if (swipes) { if (swipes) {
//console.log('toggle change calling showswipebtns');
showSwipeButtons(); showSwipeButtons();
} else { } else {
hideSwipeButtons(); hideSwipeButtons();
@ -2754,11 +2785,14 @@ $(document).ready(function () {
} }
chat[chat.length - 1]['swipe_id']++; //make new slot in array chat[chat.length - 1]['swipe_id']++; //make new slot in array
//console.log(chat[chat.length-1]['swipes']); //console.log(chat[chat.length-1]['swipes']);
if (parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) { //if swipe id of last message is the same as the length of the 'swipes' array if (parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) { //if swipe id of last message is the same as the length of the 'swipes' array
run_generate = true; run_generate = true;
} else if (parseInt(chat[chat.length - 1]['swipe_id']) < chat[chat.length - 1]['swipes'].length) { //otherwise, if the id is less than the number of swipes } else if (parseInt(chat[chat.length - 1]['swipe_id']) < chat[chat.length - 1]['swipes'].length) { //otherwise, if the id is less than the number of swipes
chat[chat.length - 1]['mes'] = chat[chat.length - 1]['swipes'][chat[chat.length - 1]['swipe_id']]; //load the last mes box with the latest generation chat[chat.length - 1]['mes'] = chat[chat.length - 1]['swipes'][chat[chat.length - 1]['swipe_id']]; //load the last mes box with the latest generation
run_swipe_right = true; //then swipe run_swipe_right = true; //then prepare to do normal right swipe to show next message
} }
if (chat[chat.length - 1]['swipe_id'] > chat[chat.length - 1]['swipes'].length) { //if we swipe right while generating (the swipe ID is greater than what we are viewing now) if (chat[chat.length - 1]['swipe_id'] > chat[chat.length - 1]['swipes'].length) { //if we swipe right while generating (the swipe ID is greater than what we are viewing now)
@ -2787,10 +2821,11 @@ $(document).ready(function () {
//console.log(parseInt(chat[chat.length-1]['swipe_id'])); //console.log(parseInt(chat[chat.length-1]['swipe_id']));
//console.log(chat[chat.length-1]['swipes'].length); //console.log(chat[chat.length-1]['swipes'].length);
if (run_generate && parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) { if (run_generate && parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) {
//console.log('showing ...'); //console.log('showing ""..."');
$("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html('...'); //shows ... while generating $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html('...'); //shows "..." while generating
} else { } else {
//console.log('showing previously generated swipe candidate, or "..."'); //console.log('showing previously generated swipe candidate, or "..."');
//console.log('onclick right swipe calling addOneMessage');
addOneMessage(chat[chat.length - 1], 'swipe'); addOneMessage(chat[chat.length - 1], 'swipe');
} }
let new_height = this_mes_div_height - (this_mes_block_height - this_mes_block[0].scrollHeight); let new_height = this_mes_div_height - (this_mes_block_height - this_mes_block[0].scrollHeight);
@ -2828,7 +2863,7 @@ $(document).ready(function () {
Generate('swipe'); Generate('swipe');
} else { } else {
if (parseInt(chat[chat.length - 1]['swipe_id']) !== chat[chat.length - 1]['swipes'].length) { if (parseInt(chat[chat.length - 1]['swipe_id']) !== chat[chat.length - 1]['swipes'].length) {
console.log('caught here 3');
saveChat(); saveChat();
} }
} }
@ -2891,7 +2926,7 @@ $(document).ready(function () {
queue: false, queue: false,
complete: function () { complete: function () {
const is_animation_scroll = ($('#chat').scrollTop() >= ($('#chat').prop("scrollHeight") - $('#chat').outerHeight()) - 10); const is_animation_scroll = ($('#chat').scrollTop() >= ($('#chat').prop("scrollHeight") - $('#chat').outerHeight()) - 10);
console.log('sipwing left after tr5ansition calls addOneMessage'); //console.log('on left swipe click calling addOneMessage');
addOneMessage(chat[chat.length - 1], 'swipe'); addOneMessage(chat[chat.length - 1], 'swipe');
let new_height = this_mes_div_height - (this_mes_block_height - this_mes_block[0].scrollHeight); let new_height = this_mes_div_height - (this_mes_block_height - this_mes_block[0].scrollHeight);
if (new_height < 103) new_height = 103; if (new_height < 103) new_height = 103;
@ -3434,6 +3469,7 @@ $(document).ready(function () {
chat[0]["is_name"] = true; chat[0]["is_name"] = true;
chat[0]["mes"] = this_ch_mes; chat[0]["mes"] = this_ch_mes;
add_mes_without_animation = true; add_mes_without_animation = true;
//console.log('form create submission calling addOneMessage');
addOneMessage(chat[0]); addOneMessage(chat[0]);
} }
} }
@ -3656,6 +3692,7 @@ $(document).ready(function () {
$(this).prop("checked", false); $(this).prop("checked", false);
}); });
this_del_mes = 0; this_del_mes = 0;
console.log('canceled del msgs, calling showswipesbtns');
showSwipeButtons(); showSwipeButtons();
}); });
@ -3687,6 +3724,7 @@ $(document).ready(function () {
this_del_mes = 0; this_del_mes = 0;
$('#chat .mes').last().addClass('last_mes'); $('#chat .mes').last().addClass('last_mes');
$('#chat .mes').eq(-2).removeClass('last_mes'); $('#chat .mes').eq(-2).removeClass('last_mes');
console.log('confirmed del msgs, calling showswipesbtns');
showSwipeButtons(); showSwipeButtons();
}); });

43
public/scripts/RossAscends-mods.js
View File

@ -294,6 +294,10 @@ $("document").ready(function () {
} }
}); });
function isInputElementInFocus() {
return $(document.activeElement).is(":input");
}
//Additional hotkeys CTRL+ENTER and CTRL+UPARROW //Additional hotkeys CTRL+ENTER and CTRL+UPARROW
document.addEventListener("keydown", (event) => { document.addEventListener("keydown", (event) => {
if (event.ctrlKey && event.key == "Enter") { if (event.ctrlKey && event.key == "Enter") {
@ -316,11 +320,36 @@ $("document").ready(function () {
ClearLocal(); ClearLocal();
} }
if (event.key == "ArrowLeft") { //swipes left if (event.key == "ArrowLeft") { //swipes left
$('.swipe_left:last').click(); /* console.log('SWIPE FILTER -- ' +
} $("#send_textarea").val() + ' ' +
if (event.key == "ArrowRight") { //swipes right $("#character_popup").css("display") + ' ' +
$('.swipe_right:last').click(); $("#shadow_select_chat_popup").css("display") + ' ' +
} isInputElementInFocus()); */
});
}) if (
$("#send_textarea").val() === '' &&
$("#character_popup").css("display") === "none" &&
$("#shadow_select_chat_popup").css("display") === "none" &&
!isInputElementInFocus()
) {
$('.swipe_left:last').click();
}
}
if (event.key == "ArrowRight") { //swipes right
/* console.log('SWIPE FILTER -- ' +
$("#send_textarea").val() + ' ' +
$("#character_popup").css("display") + ' ' +
$("#shadow_select_chat_popup").css("display") + ' ' +
isInputElementInFocus()); */
if (
$("#send_textarea").val() === '' &&
$("#character_popup").css("display") === "none" &&
$("#shadow_select_chat_popup").css("display") === "none" &&
!isInputElementInFocus()
) {
$('.swipe_right:last').click();
}
};
})
});

6
public/scripts/extensions/expressions/index.js
View File

@ -180,14 +180,14 @@ async function setExpression(character, expression) {
const debugImageStatus = document.querySelector(`#image_list li[id="${filename}"]`); const debugImageStatus = document.querySelector(`#image_list li[id="${filename}"]`);
if (debugImageStatus && !debugImageStatus.classList.contains('failure')) { if (debugImageStatus && !debugImageStatus.classList.contains('failure')) {
console.log('setting expression from character images folder'); //console.log('setting expression from character images folder');
const imgUrl = `/characters/${character}/${filename}`; const imgUrl = `/characters/${character}/${filename}`;
$('img.expression').prop('src', imgUrl); $('img.expression').prop('src', imgUrl);
} else { } else {
if (showDefault) { if (showDefault) {
console.log('no character images, trying default expressions'); //console.log('no character images, trying default expressions');
const defImgUrl = `/img/default-expressions/${filename}`; const defImgUrl = `/img/default-expressions/${filename}`;
console.log(defImgUrl); //console.log(defImgUrl);
$('img.expression').prop('src', defImgUrl); $('img.expression').prop('src', defImgUrl);
} }
} }

9
public/style.css
View File

@ -383,6 +383,15 @@ code {
height: 30px; height: 30px;
width: 30px; width: 30px;
} }
.swipes-counter{
display: inline;
height: 15px;
width: 30px;
color: white;
position: fixed;
border: 1px solid red;
font-size: 12px;
}
.swipe_left { .swipe_left {
left: 20px; left: 20px;