From de27382e500cc17cbb4df3a0c647a9c4a6bad053 Mon Sep 17 00:00:00 2001 From: RossAsscends <124905043+RossAscends@users.noreply.github.com> Date: Sat, 18 Mar 2023 12:34:18 +0900 Subject: [PATCH 1/4] - made right swipe highlight when next swipe will generate - 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. --- public/script.js | 98 +++++++++++++------ public/scripts/RossAscends-mods.js | 43 ++++++-- .../scripts/extensions/expressions/index.js | 6 +- public/style.css | 9 ++ 4 files changed, 116 insertions(+), 40 deletions(-) diff --git a/public/script.js b/public/script.js index cc1eab332..31e54d96e 100644 --- a/public/script.js +++ b/public/script.js @@ -739,6 +739,7 @@ function printMessages() { //console.log(chat); //console.log('printMessages() -- printing messages for -- '+this_chid+' '+active_character+' '+characters[this_chid]); chat.forEach(function (item, i, arr) { + //console.log('print message calling addOneMessage'); addOneMessage(item); }); } @@ -845,7 +846,7 @@ function addOneMessage(mes, type = "normal") { '' + '
' + bias + '
' + '
' + - ' ' + + '
' + '
' + ''; @@ -868,17 +869,32 @@ function addOneMessage(mes, type = "normal") { 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').append(messageText); + + //console.log(mes); } else { $("#chat").children().filter('[mesid="' + count_view_mes + '"]').children('.mes_block').children('.mes_text').append(messageText); hideSwipeButtons(); count_view_mes++; + } var $textchat = $("#chat"); $('#chat .mes').last().addClass('last_mes'); $('#chat .mes').eq(-2).removeClass('last_mes'); $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(); + //console.log('addonemessage calling showSwipeBtns'); showSwipeButtons(); } @@ -909,7 +925,7 @@ function sendSystemMessage(type, text) { } chat.push(newMessage); - console.log('sendSystemMessage calls addOneMessage'); + //console.log('sendSystemMessage calls addOneMessage'); addOneMessage(newMessage); is_send_press = false; } @@ -1035,7 +1051,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length console.log('checking bias'); chat[chat.length - 1]['extra']['bias'] = messageBias; } - console.log('Generate calls addOneMessage'); + //console.log('Generate calls addOneMessage'); addOneMessage(chat[chat.length - 1]); } //////////////////////////////////// @@ -1212,7 +1228,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length return; function runGenerate(cycleGenerationPromt = '') { - + $(".swipe_right").css("display", "none"); is_send_press = true; 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) { //console.log(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'); } else { 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]['force_avatar'] = avatarImg; } - console.log('runGenerate calls addOneMessage'); + //console.log('runGenerate calls addOneMessage'); addOneMessage(chat[chat.length - 1]); $("#send_but").css("display", "inline"); @@ -1603,6 +1619,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length $("#send_but").css("display", "inline"); $("#loading_mes").css("display", "none"); + //console.log('runGenerate calling showSwipeBtns'); showSwipeButtons(); } 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)'); $("#send_but").css("display", "inline"); - + //console.log('runGenerate calling showSwipeBtns pt. 2'); showSwipeButtons(); $("#loading_mes").css("display", "none"); @@ -2036,6 +2053,7 @@ async function getSettings(type) { $('#swipes-checkbox').prop('checked', swipes); /// swipecode console.log('getSettings -- swipes = ' + swipes + '. toggling box'); hideSwipeButtons(); + //console.log('getsettings calling showswipebtns'); showSwipeButtons(); //Novel @@ -2140,23 +2158,9 @@ async function getSettings(type) { 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; - /* 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(); @@ -2696,7 +2700,33 @@ function showSwipeButtons() { if (swipeId !== undefined && swipeId != 0) { 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() { @@ -2733,6 +2763,7 @@ $(document).ready(function () { console.log('detected swipes-checkbox changed values') swipes = !!$('#swipes-checkbox').prop('checked'); if (swipes) { + //console.log('toggle change calling showswipebtns'); showSwipeButtons(); } else { hideSwipeButtons(); @@ -2754,11 +2785,14 @@ $(document).ready(function () { } chat[chat.length - 1]['swipe_id']++; //make new slot in array //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; } 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 - 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) @@ -2787,10 +2821,11 @@ $(document).ready(function () { //console.log(parseInt(chat[chat.length-1]['swipe_id'])); //console.log(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 ...'); - $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html('...'); //shows ... while generating + //console.log('showing ""..."'); + $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html('...'); //shows "..." while generating } else { //console.log('showing previously generated swipe candidate, or "..."'); + //console.log('onclick right swipe calling addOneMessage'); addOneMessage(chat[chat.length - 1], 'swipe'); } 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'); } else { if (parseInt(chat[chat.length - 1]['swipe_id']) !== chat[chat.length - 1]['swipes'].length) { - console.log('caught here 3'); + saveChat(); } } @@ -2891,7 +2926,7 @@ $(document).ready(function () { queue: false, complete: function () { 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'); let new_height = this_mes_div_height - (this_mes_block_height - this_mes_block[0].scrollHeight); if (new_height < 103) new_height = 103; @@ -3434,6 +3469,7 @@ $(document).ready(function () { chat[0]["is_name"] = true; chat[0]["mes"] = this_ch_mes; add_mes_without_animation = true; + //console.log('form create submission calling addOneMessage'); addOneMessage(chat[0]); } } @@ -3656,6 +3692,7 @@ $(document).ready(function () { $(this).prop("checked", false); }); this_del_mes = 0; + console.log('canceled del msgs, calling showswipesbtns'); showSwipeButtons(); }); @@ -3687,6 +3724,7 @@ $(document).ready(function () { this_del_mes = 0; $('#chat .mes').last().addClass('last_mes'); $('#chat .mes').eq(-2).removeClass('last_mes'); + console.log('confirmed del msgs, calling showswipesbtns'); showSwipeButtons(); }); diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index e6a970123..9d6469437 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -294,6 +294,10 @@ $("document").ready(function () { } }); + function isInputElementInFocus() { + return $(document.activeElement).is(":input"); + } + //Additional hotkeys CTRL+ENTER and CTRL+UPARROW document.addEventListener("keydown", (event) => { if (event.ctrlKey && event.key == "Enter") { @@ -316,11 +320,36 @@ $("document").ready(function () { ClearLocal(); } if (event.key == "ArrowLeft") { //swipes left - $('.swipe_left:last').click(); - } - if (event.key == "ArrowRight") { //swipes right - $('.swipe_right:last').click(); - } - }); + /* 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_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(); + } + }; + }) +}); diff --git a/public/scripts/extensions/expressions/index.js b/public/scripts/extensions/expressions/index.js index 817e20a04..c6bf2b706 100644 --- a/public/scripts/extensions/expressions/index.js +++ b/public/scripts/extensions/expressions/index.js @@ -180,14 +180,14 @@ async function setExpression(character, expression) { const debugImageStatus = document.querySelector(`#image_list li[id="${filename}"]`); 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}`; $('img.expression').prop('src', imgUrl); } else { if (showDefault) { - console.log('no character images, trying default expressions'); + //console.log('no character images, trying default expressions'); const defImgUrl = `/img/default-expressions/${filename}`; - console.log(defImgUrl); + //console.log(defImgUrl); $('img.expression').prop('src', defImgUrl); } } diff --git a/public/style.css b/public/style.css index 795656e72..3efb5e0f3 100644 --- a/public/style.css +++ b/public/style.css @@ -383,6 +383,15 @@ code { height: 30px; width: 30px; } +.swipes-counter{ +display: inline; +height: 15px; +width: 30px; +color: white; +position: fixed; +border: 1px solid red; +font-size: 12px; +} .swipe_left { left: 20px; From 33659c4e7ada23da3c23be5a4cb0913817b2216a Mon Sep 17 00:00:00 2001 From: RossAsscends <124905043+RossAscends@users.noreply.github.com> Date: Sat, 18 Mar 2023 13:25:17 +0900 Subject: [PATCH 2/4] - fixed touch swipe detection - removed unnecessary hideswipebuttons calls - restyled swipe buttons to display flex --- public/script.js | 8 ++++---- public/scripts/RossAscends-mods.js | 7 +++++-- public/style.css | 27 ++++++++++++++------------- 3 files changed, 23 insertions(+), 19 deletions(-) diff --git a/public/script.js b/public/script.js index 0f226adc8..af303ac19 100644 --- a/public/script.js +++ b/public/script.js @@ -2709,7 +2709,7 @@ function showSwipeButtons() { if (swipeId !== undefined && swipeId != 0) { currentMessage.children('.swipe_left').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 + 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'); } @@ -3024,7 +3024,7 @@ $(document).ready(function () { }); $("#send_but").click(function () { if (is_send_press == false) { - hideSwipeButtons(); + //hideSwipeButtons(); is_send_press = true; Generate(); @@ -3040,7 +3040,7 @@ $(document).ready(function () { $("#send_textarea").keydown(function (e) { if (!e.shiftKey && !e.ctrlKey && e.key == "Enter" && is_send_press == false) { - hideSwipeButtons(); + //hideSwipeButtons(); is_send_press = true; e.preventDefault(); Generate(); @@ -3667,7 +3667,7 @@ $(document).ready(function () { else if (id == "option_regenerate") { if (is_send_press == false) { - hideSwipeButtons(); + //hideSwipeButtons(); is_send_press = true; Generate("regenerate"); } diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index 9d6469437..98087f9c5 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -279,7 +279,8 @@ $("document").ready(function () { var SwipeButR = $('.swipe_right:last'); var SwipeTargetMesClassParent = e.target.closest('.last_mes'); if (SwipeTargetMesClassParent !== null) { - if (SwipeButR.attr('style') == 'display: flex;' == true) { + if (SwipeButR.css('display') === 'flex') { + //if (SwipeButR.attr('style') == 'display: flex;' == true) { SwipeButR.click(); } } @@ -287,8 +288,10 @@ $("document").ready(function () { document.addEventListener('swiped-right', function (e) { var SwipeButL = $('.swipe_left:last'); var SwipeTargetMesClassParent = e.target.closest('.last_mes'); + //console.log('Touch swipe check -- closest last_mes = "' + (SwipeTargetMesClassParent !== null) + ' Button display = ' + (SwipeButL.attr('style') == 'display: flex;' == true)); if (SwipeTargetMesClassParent !== null) { - if (SwipeButL.attr('style') == 'display: flex;' == true) { + if (SwipeButL.css('display') === 'flex') { + //if (SwipeButL.attr('style') == 'display: flex;' == true) { SwipeButL.click(); } } diff --git a/public/style.css b/public/style.css index 3efb5e0f3..7a062d82e 100644 --- a/public/style.css +++ b/public/style.css @@ -363,34 +363,33 @@ code { /* SWIPE RELATED STYLES*/ .swipe_right,.swipe_left { - height: 30px; - width: 30px; + height: 40px; + width: 40px; opacity: 0.36; position: absolute; right: 15px; - margin-top: 62px; + margin-top: 60px; left: auto; background-color: var(--black50a); - padding: 20px; border-radius: 50%; align-items: center; justify-content: center; - /* display: none; */ border: 1px solid grey; + flex-wrap: wrap; } .swipe_right img, .swipe_left img { height: 30px; + display: flex; width: 30px; } .swipes-counter{ -display: inline; -height: 15px; -width: 30px; -color: white; -position: fixed; -border: 1px solid red; -font-size: 12px; + display: flex; + color: white; + position: fixed; + font-size: 12px; + padding: 0; + margin-top: 60px; } .swipe_left { @@ -2631,7 +2630,9 @@ a { min-width: 33%; } /*for debug purposes*/ - /** {border: 1px solid purple;}*/ +/* + * {border: 1px solid purple;} + */ } @media (max-width: 768px) { From 0a7f06855b745d4a6bbb415cc9ba4fc94069980d Mon Sep 17 00:00:00 2001 From: RossAsscends <124905043+RossAscends@users.noreply.github.com> Date: Sat, 18 Mar 2023 14:26:34 +0900 Subject: [PATCH 3/4] changed #chat and .mes CSS chat now starts with the first message on the bottom of the scroll just like CAI this is more intuitive for the swipe buttons as they don't move much --- public/style.css | 41 +++++++++++++++++++++++++++++++++++++---- 1 file changed, 37 insertions(+), 4 deletions(-) diff --git a/public/style.css b/public/style.css index 7a062d82e..9e3cf2d18 100644 --- a/public/style.css +++ b/public/style.css @@ -176,7 +176,26 @@ code { } #chat { + overflow-x: hidden; + padding-bottom: 30px; + overflow-y: scroll; + display: flex; + flex-wrap: wrap; + margin-top: 40px; + bottom: 10px; + border-bottom: 1px solid var(--black30a); + border-left: 1px solid var(--black30a); + border-right: 1px solid var(--black30a); + backdrop-filter: blur(20px); + background-color: var(--black70a); + -webkit-backdrop-filter: blur(20px); + text-shadow: #000 0 0 3px; + scrollbar-width: thin; + transition: all 1s ease-in-out; + + /*old style top to bottom flow*/ +/* overflow-x: hidden; overflow-y: scroll; margin-top: 40px; border-bottom: 1px solid var(--black30a); @@ -187,7 +206,7 @@ code { -webkit-backdrop-filter: blur(20px); text-shadow: #000 0 0 3px; scrollbar-width: thin; - transition: all 1s ease-in-out; + transition: all 1s ease-in-out; */ } @@ -344,12 +363,21 @@ code { .mes { + display: grid; + grid-template-columns: min-content min-content auto min-content min-content; + padding: 10px 10px 0 10px; + margin-top: 0; + width: 100%; + color: var(--ivory, white); + align-self: flex-end; + + /* display: grid; grid-template-columns: min-content min-content auto min-content min-content; padding: 10px 10px 0 10px; vertical-align: top; width: 100%; - color: var(--ivory, white); + color: var(--ivory, white); */ } .last_mes .mes_text { @@ -2586,7 +2614,7 @@ a { #sheld { /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/ height: calc(100svh - 15px); - width: 100vw; //calc(100vw - 15px); + width: 100vw /* calc(100svw - 15px); */ margin-left: 5px; margin-right: 5px; position: fixed; @@ -2612,8 +2640,13 @@ a { max-height: 300px; } + #rm_api_block { + width:100vw; + + } + #right-nav-panel, #character_popup { /* character_popup display needs work, "width:100%" items push outside the box */ - width: 100%; + width: 100vw; box-shadow: none; } From 4777531014a879d852f94c2e8e99f862fbaf0b04 Mon Sep 17 00:00:00 2001 From: RossAsscends <124905043+RossAscends@users.noreply.github.com> Date: Sat, 18 Mar 2023 14:56:52 +0900 Subject: [PATCH 4/4] a few more css fixes/tweaks related to chat flow --- public/style.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/public/style.css b/public/style.css index 9e3cf2d18..803de0c8f 100644 --- a/public/style.css +++ b/public/style.css @@ -178,7 +178,7 @@ code { #chat { overflow-x: hidden; - padding-bottom: 30px; + padding-bottom: 0; overflow-y: scroll; display: flex; flex-wrap: wrap; @@ -193,6 +193,7 @@ code { text-shadow: #000 0 0 3px; scrollbar-width: thin; transition: all 1s ease-in-out; + align-content: end; /*old style top to bottom flow*/ /* overflow-x: hidden; @@ -381,7 +382,7 @@ code { } .last_mes .mes_text { - min-height: 7em; + min-height: 6em; } .last_mes{ @@ -2614,9 +2615,9 @@ a { #sheld { /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/ height: calc(100svh - 15px); - width: 100vw /* calc(100svw - 15px); */ + width: calc(100vw - 10px); + margin: 0 auto; margin-left: 5px; - margin-right: 5px; position: fixed; } #send_textarea { /*larger input bar for mobile screens, easier to tap*/