rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-12 10:00:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix performance of loading very large chats

Browse Source
This commit is contained in:
Cohee 2024-03-16 02:19:41 +02:00
parent d311780328
commit 7aa5ab2d8d
2 changed files with 41 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@ -4904,7 +4904,7 @@
<div class="mes_timer"></div> <div class="mes_timer"></div>
<div class="tokenCounterDisplay"></div> <div class="tokenCounterDisplay"></div>
</div> </div>
<div class="swipe_left fa-solid fa-chevron-left"></div> <div class="swipe_left fa-solid fa-chevron-left" style="display: none;"></div>
<div class="mes_block"> <div class="mes_block">
<div class="ch_name flex-container justifySpaceBetween"> <div class="ch_name flex-container justifySpaceBetween">
<div class="flex-container flex1 alignitemscenter"> <div class="flex-container flex1 alignitemscenter">
@ -4920,7 +4920,7 @@
<div title="Translate message" class="mes_translate fa-solid fa-language" data-i18n="[title]Translate message"></div> <div title="Translate message" class="mes_translate fa-solid fa-language" data-i18n="[title]Translate message"></div>
<div title="Generate Image" class="sd_message_gen fa-solid fa-paintbrush" data-i18n="[title]Generate Image"></div> <div title="Generate Image" class="sd_message_gen fa-solid fa-paintbrush" data-i18n="[title]Generate Image"></div>
<div title="Narrate" class="mes_narrate fa-solid fa-bullhorn" data-i18n="[title]Narrate"></div> <div title="Narrate" class="mes_narrate fa-solid fa-bullhorn" data-i18n="[title]Narrate"></div>
<div title="Prompt" class="mes_prompt fa-solid fa-square-poll-horizontal " data-i18n="[title]Prompt"></div> <div title="Prompt" class="mes_prompt fa-solid fa-square-poll-horizontal " data-i18n="[title]Prompt" style="display: none;"></div>
<div title="Exclude message from prompts" class="mes_hide fa-solid fa-eye" data-i18n="[title]Exclude message from prompts"></div> <div title="Exclude message from prompts" class="mes_hide fa-solid fa-eye" data-i18n="[title]Exclude message from prompts"></div>
<div title="Include message in prompts" class="mes_unhide fa-solid fa-eye-slash" data-i18n="[title]Include message in prompts"></div> <div title="Include message in prompts" class="mes_unhide fa-solid fa-eye-slash" data-i18n="[title]Include message in prompts"></div>
<div title="Embed file or image" class="mes_embed fa-solid fa-paperclip" data-i18n="[title]Embed file or image"></div> <div title="Embed file or image" class="mes_embed fa-solid fa-paperclip" data-i18n="[title]Embed file or image"></div>
@ -4952,7 +4952,7 @@
</div> </div>
<div class="mes_bias"></div> <div class="mes_bias"></div>
</div> </div>
<div class="swipe_right fa-solid fa-chevron-right"> <div class="swipe_right fa-solid fa-chevron-right" style="display: none;">
<div class="swipes-counter"></div> <div class="swipes-counter"></div>
</div> </div>
</div> </div>

114
public/script.js
View File

@ -466,6 +466,10 @@ let rawPromptPopper = Popper.createPopper(document.getElementById('dialogue_popu
placement: 'right', placement: 'right',
}); });
// Saved here for performance reasons
const messageTemplate = $('#message_template .mes');
const chatElement = $('#chat');
let dialogueResolve = null; let dialogueResolve = null;
let dialogueCloseStop = false; let dialogueCloseStop = false;
let chat_metadata = {}; let chat_metadata = {};
@ -1524,7 +1528,7 @@ async function printMessages() {
for (let i = startIndex; i < chat.length; i++) { for (let i = startIndex; i < chat.length; i++) {
const item = chat[i]; const item = chat[i];
addOneMessage(item, { scroll: i === chat.length - 1, forceId: i }); addOneMessage(item, { scroll: i === chat.length - 1, forceId: i, showSwipes: false });
} }
// Scroll to bottom when all images are loaded // Scroll to bottom when all images are loaded
@ -1542,6 +1546,11 @@ async function printMessages() {
} }
} }
$('#chat .mes').removeClass('last_mes');
$('#chat .mes').last().addClass('last_mes');
hideSwipeButtons();
showSwipeButtons();
function incrementAndCheck() { function incrementAndCheck() {
imagesLoaded++; imagesLoaded++;
if (imagesLoaded === images.length) { if (imagesLoaded === images.length) {
@ -1822,7 +1831,7 @@ function getMessageFromTemplate({
tokenCount, tokenCount,
extra, extra,
} = {}) { } = {}) {
const mes = $('#message_template .mes').clone(); const mes = messageTemplate.clone();
mes.attr({ mes.attr({
'mesid': mesId, 'mesid': mesId,
'ch_name': characterName, 'ch_name': characterName,
@ -1916,8 +1925,8 @@ export function addCopyToCodeBlocks(messageElement) {
} }
function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll = true, insertBefore = null, forceId = null } = {}) { function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll = true, insertBefore = null, forceId = null, showSwipes = true } = {}) {
var messageText = mes['mes']; let messageText = mes['mes'];
const momentDate = timestampToMoment(mes.send_date); const momentDate = timestampToMoment(mes.send_date);
const timestamp = momentDate.isValid() ? momentDate.format('LL LT') : ''; const timestamp = momentDate.isValid() ? momentDate.format('LL LT') : '';
@ -1932,7 +1941,7 @@ function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll = true
mes.swipes = [mes.mes]; mes.swipes = [mes.mes];
} }
var avatarImg = getUserAvatar(user_avatar); let avatarImg = getUserAvatar(user_avatar);
const isSystem = mes.is_system; const isSystem = mes.is_system;
const title = mes.title; const title = mes.title;
generatedPromptCache = ''; generatedPromptCache = '';
@ -1968,17 +1977,7 @@ function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll = true
); );
const bias = messageFormatting(mes.extra?.bias ?? '', '', false, false, -1); const bias = messageFormatting(mes.extra?.bias ?? '', '', false, false, -1);
let bookmarkLink = mes?.extra?.bookmark_link ?? ''; let bookmarkLink = mes?.extra?.bookmark_link ?? '';
// Verify bookmarked chat still exists
// Cohee: Commented out for now. I'm worried of performance issues.
/*if (bookmarkLink !== '') {
let chat_names = selected_group
? getGroupChatNames(selected_group)
: Object.values(getPastCharacterChats()).map(({ file_name }) => file_name);
if (!chat_names.includes(bookmarkLink)) {
bookmarkLink = ''
}
}*/
let params = { let params = {
mesId: forceId ?? chat.length - 1, mesId: forceId ?? chat.length - 1,
characterName: mes.name, characterName: mes.name,
@ -1995,22 +1994,18 @@ function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll = true
...formatGenerationTimer(mes.gen_started, mes.gen_finished, mes.extra?.token_count), ...formatGenerationTimer(mes.gen_started, mes.gen_finished, mes.extra?.token_count),
}; };
const HTMLForEachMes = getMessageFromTemplate(params); const renderedMessage = getMessageFromTemplate(params);
if (type !== 'swipe') { if (type !== 'swipe') {
if (!insertAfter && !insertBefore) { if (!insertAfter && !insertBefore) {
$('#chat').append(HTMLForEachMes); chatElement.append(renderedMessage);
} }
else if (insertAfter) { else if (insertAfter) {
const target = $('#chat').find(`.mes[mesid="${insertAfter}"]`); const target = chatElement.find(`.mes[mesid="${insertAfter}"]`);
$(HTMLForEachMes).insertAfter(target); $(renderedMessage).insertAfter(target);
$(HTMLForEachMes).find('.swipe_left').css('display', 'none');
$(HTMLForEachMes).find('.swipe_right').css('display', 'none');
} else { } else {
const target = $('#chat').find(`.mes[mesid="${insertBefore}"]`); const target = chatElement.find(`.mes[mesid="${insertBefore}"]`);
$(HTMLForEachMes).insertBefore(target); $(renderedMessage).insertBefore(target);
$(HTMLForEachMes).find('.swipe_left').css('display', 'none');
$(HTMLForEachMes).find('.swipe_right').css('display', 'none');
} }
} }
@ -2021,49 +2016,19 @@ function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll = true
const isSmallSys = mes?.extra?.isSmallSys; const isSmallSys = mes?.extra?.isSmallSys;
newMessage.data('isSystem', isSystem); newMessage.data('isSystem', isSystem);
if (isSystem) {
// newMessage.find(".mes_edit").hide();
newMessage.find('.mes_prompt').hide(); //don't need prompt button for sys
}
if (isSmallSys === true) { if (isSmallSys === true) {
newMessage.addClass('smallSysMes'); newMessage.addClass('smallSysMes');
} }
// don't need prompt button for user
if (params.isUser === true) {
newMessage.find('.mes_prompt').hide();
//console.log(`hiding prompt for user mesID ${params.mesId}`);
}
//shows or hides the Prompt display button //shows or hides the Prompt display button
let mesIdToFind = type == 'swipe' ? params.mesId - 1 : params.mesId; //Number(newMessage.attr('mesId')); let mesIdToFind = type == 'swipe' ? params.mesId - 1 : params.mesId; //Number(newMessage.attr('mesId'));
//if we have itemized messages, and the array isn't null.. //if we have itemized messages, and the array isn't null..
if (params.isUser === false && itemizedPrompts.length !== 0 && itemizedPrompts.length !== null) { if (params.isUser === false && Array.isArray(itemizedPrompts) && itemizedPrompts.length > 0) {
// console.log('looking through itemized prompts...'); const itemizedPrompt = itemizedPrompts.find(x => Number(x.mesId) === Number(mesIdToFind));
//console.log(`mesIdToFind = ${mesIdToFind} from ${params.avatarImg}`); if (itemizedPrompt) {
//console.log(`itemizedPrompts.length = ${itemizedPrompts.length}`) newMessage.find('.mes_prompt').show();
//console.log(itemizedPrompts);
for (var i = 0; i < itemizedPrompts.length; i++) {
//console.log(`itemized array item ${i} is MesID ${Number(itemizedPrompts[i].mesId)}, does it match ${Number(mesIdToFind)}?`);
if (Number(itemizedPrompts[i].mesId) === Number(mesIdToFind)) {
newMessage.find('.mes_prompt').show();
//console.log(`showing button for mesID ${params.mesId} from ${params.characterName}`);
break;
} /*else {
console.log(`no cache obj for mesID ${mesIdToFind}, hiding this prompt button`);
newMessage.find(".mes_prompt").hide();
console.log(itemizedPrompts);
} */
} }
} else {
//console.log('itemizedprompt array empty null, or user, hiding this prompt buttons');
//$(".mes_prompt").hide();
newMessage.find('.mes_prompt').hide();
//console.log(itemizedPrompts);
} }
newMessage.find('.avatar img').on('error', function () { newMessage.find('.avatar img').on('error', function () {
@ -2072,38 +2037,36 @@ function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll = true
}); });
if (type === 'swipe') { if (type === 'swipe') {
const swipeMessage = $('#chat').find(`[mesid="${chat.length - 1}"]`); const swipeMessage = chatElement.find(`[mesid="${chat.length - 1}"]`);
swipeMessage.find('.mes_text').html(''); swipeMessage.find('.mes_text').html(messageText).attr('title', title);
swipeMessage.find('.mes_text').append(messageText);
appendMediaToMessage(mes, swipeMessage);
swipeMessage.attr('title', title);
swipeMessage.find('.timestamp').text(timestamp).attr('title', `${params.extra.api} - ${params.extra.model}`); swipeMessage.find('.timestamp').text(timestamp).attr('title', `${params.extra.api} - ${params.extra.model}`);
appendMediaToMessage(mes, swipeMessage);
if (power_user.timestamp_model_icon && params.extra?.api) { if (power_user.timestamp_model_icon && params.extra?.api) {
insertSVGIcon(swipeMessage, params.extra); insertSVGIcon(swipeMessage, params.extra);
} }
if (mes.swipe_id == mes.swipes.length - 1) { if (mes.swipe_id == mes.swipes.length - 1) {
swipeMessage.find('.mes_timer').text(params.timerValue); swipeMessage.find('.mes_timer').text(params.timerValue).attr('title', params.timerTitle);
swipeMessage.find('.mes_timer').attr('title', params.timerTitle);
swipeMessage.find('.tokenCounterDisplay').text(`${params.tokenCount}t`); swipeMessage.find('.tokenCounterDisplay').text(`${params.tokenCount}t`);
} else { } else {
swipeMessage.find('.mes_timer').html(''); swipeMessage.find('.mes_timer').empty();
swipeMessage.find('.tokenCounterDisplay').html(''); swipeMessage.find('.tokenCounterDisplay').empty();
} }
} else { } else {
const messageId = forceId ?? chat.length - 1; const messageId = forceId ?? chat.length - 1;
$('#chat').find(`[mesid="${messageId}"]`).find('.mes_text').append(messageText); chatElement.find(`[mesid="${messageId}"] .mes_text`).append(messageText);
appendMediaToMessage(mes, newMessage); appendMediaToMessage(mes, newMessage);
hideSwipeButtons(); showSwipes && hideSwipeButtons();
} }
addCopyToCodeBlocks(newMessage); addCopyToCodeBlocks(newMessage);
$('#chat .mes').last().addClass('last_mes'); if (showSwipes) {
$('#chat .mes').eq(-2).removeClass('last_mes'); $('#chat .mes').last().addClass('last_mes');
$('#chat .mes').eq(-2).removeClass('last_mes');
hideSwipeButtons(); hideSwipeButtons();
showSwipeButtons(); showSwipeButtons();
}
// Don't scroll if not inserting last // Don't scroll if not inserting last
if (!insertAfter && !insertBefore && scroll) { if (!insertAfter && !insertBefore && scroll) {
@ -2177,7 +2140,6 @@ function formatGenerationTimer(gen_started, gen_finished, tokenCount) {
function scrollChatToBottom() { function scrollChatToBottom() {
if (power_user.auto_scroll_chat_to_bottom) { if (power_user.auto_scroll_chat_to_bottom) {
const chatElement = $('#chat');
let position = chatElement[0].scrollHeight; let position = chatElement[0].scrollHeight;
if (power_user.waifuMode) { if (power_user.waifuMode) {