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

draggable popout for Summary

Browse Source
This commit is contained in:
RossAscends
2023-10-10 04:49:35 +09:00
parent dac9c091b2
commit 96ddd5f4e5
5 changed files with 181 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/css/mobile-styles.css
View File

@ -188,7 +188,8 @@
#showRawPrompt, #showRawPrompt,
#copyPromptToClipboard, #copyPromptToClipboard,
#groupCurrentMemberPopoutButton { #groupCurrentMemberPopoutButton,
#summaryExtensionPopoutButton {
display: none; display: none;
} }

3
public/css/toggle-dependent.css
View File

@ -329,7 +329,8 @@ body.movingUI #expression-holder,
body.movingUI .zoomed_avatar, body.movingUI .zoomed_avatar,
body.movingUI .draggable, body.movingUI .draggable,
body.movingUI #floatingPrompt, body.movingUI #floatingPrompt,
body.movingUI #groupMemberListPopout { body.movingUI #groupMemberListPopout,
body.movingUI #summaryExtensionPopout {
resize: both; resize: both;
} }

231
public/scripts/extensions/memory/index.js
View File

@ -3,6 +3,8 @@ import { getContext, getApiUrl, extension_settings, doExtrasFetch, modules } fro
import { eventSource, event_types, extension_prompt_types, generateQuietPrompt, is_send_press, saveSettingsDebounced, substituteParams } from "../../../script.js"; import { eventSource, event_types, extension_prompt_types, generateQuietPrompt, is_send_press, saveSettingsDebounced, substituteParams } from "../../../script.js";
import { is_group_generating, selected_group } from "../../group-chats.js"; import { is_group_generating, selected_group } from "../../group-chats.js";
import { registerSlashCommand } from "../../slash-commands.js"; import { registerSlashCommand } from "../../slash-commands.js";
import { loadMovingUIState } from '../../power-user.js';
import { dragElement } from "../../RossAscends-mods.js";
export { MODULE_NAME }; export { MODULE_NAME };
const MODULE_NAME = '1_memory'; const MODULE_NAME = '1_memory';
@ -547,100 +549,175 @@ function setMemoryContext(value, saveToMessage) {
} }
} }
function doPopout(e) {
const target = e.target;
//repurposes the zoomed avatar template to server as a floating div
if ($("#summaryExtensionPopout").length === 0) {
console.debug('did not see popout yet, creating')
const originalHTMLClone = $(target).parent().parent().parent().find('.inline-drawer-content').html()
const originalElement = $(target).parent().parent().parent().find('.inline-drawer-content')
const template = $('#zoomed_avatar_template').html();
const controlBarHtml = `<div class="panelControlBar flex-container">
<div id="summaryExtensionPopoutheader" class="fa-solid fa-grip drag-grabber hoverglow"></div>
<div id="summaryExtensionPopoutClose" class="fa-solid fa-circle-xmark hoverglow"></div>
</div>`
const newElement = $(template);
newElement.attr('id', 'summaryExtensionPopout');
newElement.removeClass('zoomed_avatar')
newElement.empty()
const prevSummaryBoxContents = $('#memory_contents').val(); //copy summary box before emptying
originalElement.empty();
originalElement.html(`<div class="flex-container alignitemscenter justifyCenter wide100p"><small>Currently popped out</small></div>`)
newElement.append(controlBarHtml).append(originalHTMLClone)
$('body').append(newElement);
$("#summaryExtensionDrawerContents").addClass('scrollableInnerFull')
setMemoryContext(prevSummaryBoxContents, false); //paste prev summary box contents into popout box
setupListeners();
loadSettings();
loadMovingUIState();
$("#summaryExtensionPopout").fadeIn(250);
dragElement(newElement);
//setup listener for close button to restore extensions menu
$('#summaryExtensionPopoutClose').off('click').on('click', function () {
$("#summaryExtensionDrawerContents").removeClass('scrollableInnerFull')
const summaryPopoutHTML = $("#summaryExtensionDrawerContents")
$("#summaryExtensionPopout").fadeOut(250, () => {
originalElement.empty();
originalElement.html(summaryPopoutHTML);
$("#summaryExtensionPopout").remove()
})
loadSettings();
})
} else {
console.debug('saw existing popout, removing')
$("#summaryExtensionPopout").fadeOut(250, () => { $("#summaryExtensionPopoutClose").trigger('click') });
}
}
function setupListeners() {
//setup shared listeners for popout and regular ext menu
$('#memory_restore').off('click').on('click', onMemoryRestoreClick);
$('#memory_contents').off('click').on('input', onMemoryContentInput);
$('#memory_long_length').off('click').on('input', onMemoryLongInput);
$('#memory_short_length').off('click').on('input', onMemoryShortInput);
$('#memory_repetition_penalty').off('click').on('input', onMemoryRepetitionPenaltyInput);
$('#memory_temperature').off('click').on('input', onMemoryTemperatureInput);
$('#memory_length_penalty').off('click').on('input', onMemoryLengthPenaltyInput);
$('#memory_frozen').off('click').on('input', onMemoryFrozenInput);
$('#summary_source').off('click').on('change', onSummarySourceChange);
$('#memory_prompt_words').off('click').on('input', onMemoryPromptWordsInput);
$('#memory_prompt_interval').off('click').on('input', onMemoryPromptIntervalInput);
$('#memory_prompt').off('click').on('input', onMemoryPromptInput);
$('#memory_force_summarize').off('click').on('click', forceSummarizeChat);
$('#memory_template').off('click').on('input', onMemoryTemplateInput);
$('#memory_depth').off('click').on('input', onMemoryDepthInput);
$('input[name="memory_position"]').off('click').on('change', onMemoryPositionChange);
$('#memory_prompt_words_force').off('click').on('input', onMemoryPromptWordsForceInput);
$("#summarySettingsBlockToggle").off('click').on('click', function () {
console.log('saw settings button click')
$("#summarySettingsBlock").slideToggle(200, "swing"); //toggleClass("hidden");
});
}
jQuery(function () { jQuery(function () {
function addExtensionControls() { function addExtensionControls() {
const settingsHtml = ` const settingsHtml = `
<div id="memory_settings"> <div id="memory_settings">
<div class="inline-drawer"> <div class="inline-drawer">
<div class="inline-drawer-toggle inline-drawer-header"> <div class="inline-drawer-toggle inline-drawer-header">
<b>Summarize</b> <div class="flex-container alignitemscenter margin0"><b>Summarize</b><i id="summaryExtensionPopoutButton" class="fa-solid fa-window-restore menu_button margin0"></i></div>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div> <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div> </div>
<div class="inline-drawer-content"> <div class="inline-drawer-content">
<label for="summary_source">Summarization source:</label> <div id="summaryExtensionDrawerContents">
<select id="summary_source"> <label for="summary_source">Summarize with:</label>
<option value="main">Main API</option> <select id="summary_source">
<option value="extras">Extras API</option> <option value="main">Main API</option>
</select> <option value="extras">Extras API</option>
<label for="memory_contents">Current summary: </label> </select><br>
<textarea id="memory_contents" class="text_pole textarea_compact" rows="6" placeholder="Summary will be generated here..."></textarea>
<div class="memory_contents_controls"> <div class="flex-container justifyspacebetween alignitemscenter">
<input id="memory_restore" class="menu_button" type="button" value="Restore previous state" />
<label for="memory_frozen"><input id="memory_frozen" type="checkbox" />Pause summarization</label> <span class="flex1">Current summary:</span>
</div> <div id="memory_restore" class="menu_button flex1 margin0"><span>Restore Previous</span></div>
<div class="memory_template">
<label for="memory_template">Injection template:</label> </div>
<textarea id="memory_template" class="text_pole textarea_compact" rows="1" placeholder="Use {{summary}} macro to specify the position of summarized text."></textarea>
</div> <textarea id="memory_contents" class="text_pole textarea_compact" rows="6" placeholder="Summary will be generated here..."></textarea>
<label for="memory_position">Injection position:</label> <div class="memory_contents_controls">
<div class="radio_group">
<label>
<input type="radio" name="memory_position" value="2" />
Before Main Prompt / Story String
</label>
<label>
<input type="radio" name="memory_position" value="0" />
After Main Prompt / Story String
</label>
<label>
<input type="radio" name="memory_position" value="1" />
In-chat @ Depth <input id="memory_depth" class="text_pole widthUnset" type="number" min="0" max="999" />
</label>
</div>
<div data-source="main" class="memory_contents_controls">
</div>
<div data-source="main">
<label for="memory_prompt" class="title_restorable">
Summarization Prompt
<div id="memory_force_summarize" class="menu_button menu_button_icon"> <div id="memory_force_summarize" class="menu_button menu_button_icon">
<i class="fa-solid fa-database"></i> <i class="fa-solid fa-database"></i>
<span>Generate now</span> <span>Summarize now</span>
</div>
<label for="memory_frozen"><input id="memory_frozen" type="checkbox" />Pause</label>
</div>
<div class="memory_contents_controls">
<div id="summarySettingsBlockToggle" class="menu_button">Settings</div>
</div>
<div id="summarySettingsBlock" style="display:none;">
<div class="memory_template">
<label for="memory_template">Insertion string:</label>
<textarea id="memory_template" class="text_pole textarea_compact" rows="2" placeholder="{{summary}} will resolve to the current summary contents."></textarea>
</div> </div>
</label> <label for="memory_position">Position:</label>
<textarea id="memory_prompt" class="text_pole textarea_compact" rows="6" placeholder="This prompt will be used in summary generation. Insert {{words}} macro to use the "Number of words" parameter."></textarea> <div class="radio_group">
<label for="memory_prompt_words">Number of words in the summary (<span id="memory_prompt_words_value"></span> words)</label> <label>
<input id="memory_prompt_words" type="range" value="${defaultSettings.promptWords}" min="${defaultSettings.promptMinWords}" max="${defaultSettings.promptMaxWords}" step="${defaultSettings.promptWordsStep}" /> <input type="radio" name="memory_position" value="2" />
<label for="memory_prompt_interval">Update interval (<span id="memory_prompt_interval_value"></span> messages)</label> Before Main Prompt / Story String
<small>Set to 0 to disable</small> </label>
<input id="memory_prompt_interval" type="range" value="${defaultSettings.promptInterval}" min="${defaultSettings.promptMinInterval}" max="${defaultSettings.promptMaxInterval}" step="${defaultSettings.promptIntervalStep}" /> <label>
<label for="memory_prompt_words_force">Force update after (<span id="memory_prompt_words_force_value"></span> words)</label> <input type="radio" name="memory_position" value="0" />
<small>Set to 0 to disable</small> After Main Prompt / Story String
<input id="memory_prompt_words_force" type="range" value="${defaultSettings.promptForceWords}" min="${defaultSettings.promptMinForceWords}" max="${defaultSettings.promptMaxForceWords}" step="${defaultSettings.promptForceWordsStep}" /> </label>
</div> <label>
<div data-source="extras"> <input type="radio" name="memory_position" value="1" />
<label for="memory_short_length">Chat to Summarize buffer length (<span id="memory_short_length_tokens"></span> tokens)</label> In-chat @ Depth <input id="memory_depth" class="text_pole widthUnset" type="number" min="0" max="999" />
<input id="memory_short_length" type="range" value="${defaultSettings.shortMemoryLength}" min="${defaultSettings.minShortMemory}" max="${defaultSettings.maxShortMemory}" step="${defaultSettings.shortMemoryStep}" /> </label>
<label for="memory_long_length">Summary output length (<span id="memory_long_length_tokens"></span> tokens)</label> </div>
<input id="memory_long_length" type="range" value="${defaultSettings.longMemoryLength}" min="${defaultSettings.minLongMemory}" max="${defaultSettings.maxLongMemory}" step="${defaultSettings.longMemoryStep}" /> <div data-source="main" class="memory_contents_controls">
<label for="memory_temperature">Temperature (<span id="memory_temperature_value"></span>)</label> </div>
<input id="memory_temperature" type="range" value="${defaultSettings.temperature}" min="${defaultSettings.minTemperature}" max="${defaultSettings.maxTemperature}" step="${defaultSettings.temperatureStep}" /> <div data-source="main">
<label for="memory_repetition_penalty">Repetition penalty (<span id="memory_repetition_penalty_value"></span>)</label> <label for="memory_prompt" class="title_restorable">
<input id="memory_repetition_penalty" type="range" value="${defaultSettings.repetitionPenalty}" min="${defaultSettings.minRepetitionPenalty}" max="${defaultSettings.maxRepetitionPenalty}" step="${defaultSettings.repetitionPenaltyStep}" /> Summary Prompt
<label for="memory_length_penalty">Length preference <small>[higher = longer summaries]</small> (<span id="memory_length_penalty_value"></span>)</label>
<input id="memory_length_penalty" type="range" value="${defaultSettings.lengthPenalty}" min="${defaultSettings.minLengthPenalty}" max="${defaultSettings.maxLengthPenalty}" step="${defaultSettings.lengthPenaltyStep}" /> </label>
<textarea id="memory_prompt" class="text_pole textarea_compact" rows="6" placeholder="This prompt will be sent to AI to request the summary generation. {{words}} will resolve to the 'Number of words' parameter."></textarea>
<label for="memory_prompt_words">Summary length (<span id="memory_prompt_words_value"></span> words)</label>
<input id="memory_prompt_words" type="range" value="${defaultSettings.promptWords}" min="${defaultSettings.promptMinWords}" max="${defaultSettings.promptMaxWords}" step="${defaultSettings.promptWordsStep}" />
<label for="memory_prompt_interval">Update every <span id="memory_prompt_interval_value"></span> messages</label>
<small>0 = disable</small>
<input id="memory_prompt_interval" type="range" value="${defaultSettings.promptInterval}" min="${defaultSettings.promptMinInterval}" max="${defaultSettings.promptMaxInterval}" step="${defaultSettings.promptIntervalStep}" />
<label for="memory_prompt_words_force">Update every <span id="memory_prompt_words_force_value"></span> words</label>
<small>0 = disable</small>
<input id="memory_prompt_words_force" type="range" value="${defaultSettings.promptForceWords}" min="${defaultSettings.promptMinForceWords}" max="${defaultSettings.promptMaxForceWords}" step="${defaultSettings.promptForceWordsStep}" />
<small>If both sliders are non-zero, then both will trigger summary updates a their respective intervals.</small>
</div>
<div data-source="extras">
<label for="memory_short_length">Chat to Summarize buffer length (<span id="memory_short_length_tokens"></span> tokens)</label>
<input id="memory_short_length" type="range" value="${defaultSettings.shortMemoryLength}" min="${defaultSettings.minShortMemory}" max="${defaultSettings.maxShortMemory}" step="${defaultSettings.shortMemoryStep}" />
<label for="memory_long_length">Summary output length (<span id="memory_long_length_tokens"></span> tokens)</label>
<input id="memory_long_length" type="range" value="${defaultSettings.longMemoryLength}" min="${defaultSettings.minLongMemory}" max="${defaultSettings.maxLongMemory}" step="${defaultSettings.longMemoryStep}" />
<label for="memory_temperature">Temperature (<span id="memory_temperature_value"></span>)</label>
<input id="memory_temperature" type="range" value="${defaultSettings.temperature}" min="${defaultSettings.minTemperature}" max="${defaultSettings.maxTemperature}" step="${defaultSettings.temperatureStep}" />
<label for="memory_repetition_penalty">Repetition penalty (<span id="memory_repetition_penalty_value"></span>)</label>
<input id="memory_repetition_penalty" type="range" value="${defaultSettings.repetitionPenalty}" min="${defaultSettings.minRepetitionPenalty}" max="${defaultSettings.maxRepetitionPenalty}" step="${defaultSettings.repetitionPenaltyStep}" />
<label for="memory_length_penalty">Length preference <small>[higher = longer summaries]</small> (<span id="memory_length_penalty_value"></span>)</label>
<input id="memory_length_penalty" type="range" value="${defaultSettings.lengthPenalty}" min="${defaultSettings.minLengthPenalty}" max="${defaultSettings.maxLengthPenalty}" step="${defaultSettings.lengthPenaltyStep}" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
`; `;
$('#extensions_settings2').append(settingsHtml); $('#extensions_settings2').append(settingsHtml);
$('#memory_restore').on('click', onMemoryRestoreClick); setupListeners();
$('#memory_contents').on('input', onMemoryContentInput); $("#summaryExtensionPopoutButton").off('click').on('click', function (e) {
$('#memory_long_length').on('input', onMemoryLongInput); doPopout(e);
$('#memory_short_length').on('input', onMemoryShortInput); e.stopPropagation();
$('#memory_repetition_penalty').on('input', onMemoryRepetitionPenaltyInput); });
$('#memory_temperature').on('input', onMemoryTemperatureInput);
$('#memory_length_penalty').on('input', onMemoryLengthPenaltyInput);
$('#memory_frozen').on('input', onMemoryFrozenInput);
$('#summary_source').on('change', onSummarySourceChange);
$('#memory_prompt_words').on('input', onMemoryPromptWordsInput);
$('#memory_prompt_interval').on('input', onMemoryPromptIntervalInput);
$('#memory_prompt').on('input', onMemoryPromptInput);
$('#memory_force_summarize').on('click', forceSummarizeChat);
$('#memory_template').on('input', onMemoryTemplateInput);
$('#memory_depth').on('input', onMemoryDepthInput);
$('input[name="memory_position"]').on('change', onMemoryPositionChange);
$('#memory_prompt_words_force').on('input', onMemoryPromptWordsForceInput);
} }
addExtensionControls(); addExtensionControls();

3
public/scripts/power-user.js
View File

@ -1410,7 +1410,8 @@ async function resetMovablePanels(type) {
'WorldInfo', 'WorldInfo',
'floatingPrompt', 'floatingPrompt',
'expression-holder', 'expression-holder',
'groupMemberListPopout' 'groupMemberListPopout',
'summaryExtensionPopout'
]; ];
const panelStyles = ['top', 'left', 'right', 'bottom', 'height', 'width', 'margin',]; const panelStyles = ['top', 'left', 'right', 'bottom', 'height', 'width', 'margin',];

25
public/style.css
View File

@ -3200,6 +3200,12 @@ a {
height: calc(100% - 30px); height: calc(100% - 30px);
} }
.scrollableInnerFull {
height: 100%;
overflow-Y: auto;
overflow-X: hidden;
}
.fillLeft .scrollableInner { .fillLeft .scrollableInner {
padding: 0.5em 1em 0.5em 0.5em padding: 0.5em 1em 0.5em 0.5em
} }
@ -3404,7 +3410,8 @@ a {
} }
.zoomed_avatar, .zoomed_avatar,
#groupMemberListPopout { #groupMemberListPopout,
#summaryExtensionPopout {
min-width: 100px; min-width: 100px;
min-height: 100px; min-height: 100px;
max-height: 90vh; max-height: 90vh;
@ -3413,15 +3420,25 @@ a {
/* width: calc((100vw - var(--sheldWidth)) /2); */ /* width: calc((100vw - var(--sheldWidth)) /2); */
position: absolute; position: absolute;
padding: 0; padding: 0;
filter: drop-shadow(2px 2px 2px var(--grey7070a)); /* filter: drop-shadow(2px 2px 2px var(--grey7070a)); */
box-shadow: 1px 2px 2px var(--black30a);
z-index: 29; z-index: 29;
overflow: hidden; overflow: hidden;
display: none; display: none;
bottom: 0; bottom: 0;
aspect-ratio: 2 / 3;
border-radius: 10px; border-radius: 10px;
} }
.zoomed_avatar {
aspect-ratio: 2 / 3;
}
#groupMemberListPopout,
#summaryExtensionPopout {
border: 1px solid var(--SmartThemeBorderColor);
padding: 5px;
}
.draggable { .draggable {
min-width: 100px; min-width: 100px;
min-height: 100px; min-height: 100px;
@ -3621,4 +3638,4 @@ a {
height: 100vh; height: 100vh;
z-index: 9999; z-index: 9999;
} }
} }