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,
#copyPromptToClipboard,
#groupCurrentMemberPopoutButton {
#groupCurrentMemberPopoutButton,
#summaryExtensionPopoutButton {
display: none;
}

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

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

151
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 { is_group_generating, selected_group } from "../../group-chats.js";
import { registerSlashCommand } from "../../slash-commands.js";
import { loadMovingUIState } from '../../power-user.js';
import { dragElement } from "../../RossAscends-mods.js";
export { MODULE_NAME };
const MODULE_NAME = '1_memory';
@ -547,32 +549,119 @@ 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 () {
function addExtensionControls() {
const settingsHtml = `
<div id="memory_settings">
<div class="inline-drawer">
<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>
<div class="inline-drawer-content">
<label for="summary_source">Summarization source:</label>
<div id="summaryExtensionDrawerContents">
<label for="summary_source">Summarize with:</label>
<select id="summary_source">
<option value="main">Main API</option>
<option value="extras">Extras API</option>
</select>
<label for="memory_contents">Current summary: </label>
</select><br>
<div class="flex-container justifyspacebetween alignitemscenter">
<span class="flex1">Current summary:</span>
<div id="memory_restore" class="menu_button flex1 margin0"><span>Restore Previous</span></div>
</div>
<textarea id="memory_contents" class="text_pole textarea_compact" rows="6" placeholder="Summary will be generated here..."></textarea>
<div class="memory_contents_controls">
<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>
<div id="memory_force_summarize" class="menu_button menu_button_icon">
<i class="fa-solid fa-database"></i>
<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">Injection template:</label>
<textarea id="memory_template" class="text_pole textarea_compact" rows="1" placeholder="Use {{summary}} macro to specify the position of summarized text."></textarea>
<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>
<label for="memory_position">Injection position:</label>
<label for="memory_position">Position:</label>
<div class="radio_group">
<label>
<input type="radio" name="memory_position" value="2" />
@ -591,21 +680,19 @@ jQuery(function () {
</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">
<i class="fa-solid fa-database"></i>
<span>Generate now</span>
</div>
Summary Prompt
</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>
<label for="memory_prompt_words">Number of words in the summary (<span id="memory_prompt_words_value"></span> words)</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 interval (<span id="memory_prompt_interval_value"></span> messages)</label>
<small>Set to 0 to disable</small>
<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">Force update after (<span id="memory_prompt_words_force_value"></span> words)</label>
<small>Set to 0 to disable</small>
<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>
@ -622,25 +709,15 @@ jQuery(function () {
</div>
</div>
</div>
</div>
</div>
`;
$('#extensions_settings2').append(settingsHtml);
$('#memory_restore').on('click', onMemoryRestoreClick);
$('#memory_contents').on('input', onMemoryContentInput);
$('#memory_long_length').on('input', onMemoryLongInput);
$('#memory_short_length').on('input', onMemoryShortInput);
$('#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);
setupListeners();
$("#summaryExtensionPopoutButton").off('click').on('click', function (e) {
doPopout(e);
e.stopPropagation();
});
}
addExtensionControls();

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

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

23
public/style.css
View File

@ -3200,6 +3200,12 @@ a {
height: calc(100% - 30px);
}
.scrollableInnerFull {
height: 100%;
overflow-Y: auto;
overflow-X: hidden;
}
.fillLeft .scrollableInner {
padding: 0.5em 1em 0.5em 0.5em
}
@ -3404,7 +3410,8 @@ a {
}
.zoomed_avatar,
#groupMemberListPopout {
#groupMemberListPopout,
#summaryExtensionPopout {
min-width: 100px;
min-height: 100px;
max-height: 90vh;
@ -3413,15 +3420,25 @@ a {
/* width: calc((100vw - var(--sheldWidth)) /2); */
position: absolute;
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;
overflow: hidden;
display: none;
bottom: 0;
aspect-ratio: 2 / 3;
border-radius: 10px;
}
.zoomed_avatar {
aspect-ratio: 2 / 3;
}
#groupMemberListPopout,
#summaryExtensionPopout {
border: 1px solid var(--SmartThemeBorderColor);
padding: 5px;
}
.draggable {
min-width: 100px;
min-height: 100px;