draggable popout for Summary
This commit is contained in:
RossAscends
parent
dac9c091b2
commit
96ddd5f4e5
|
|
@ -188,7 +188,8 @@
|
|||
|
||||
#showRawPrompt,
|
||||
#copyPromptToClipboard,
|
||||
#groupCurrentMemberPopoutButton {
|
||||
#groupCurrentMemberPopoutButton,
|
||||
#summaryExtensionPopoutButton {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,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 () {
|
||||
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>
|
||||
<select id="summary_source">
|
||||
<option value="main">Main API</option>
|
||||
<option value="extras">Extras API</option>
|
||||
</select>
|
||||
<label for="memory_contents">Current summary: </label>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<label for="memory_position">Injection position:</label>
|
||||
<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="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><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">
|
||||
<div id="memory_force_summarize" class="menu_button menu_button_icon">
|
||||
<i class="fa-solid fa-database"></i>
|
||||
<span>Generate now</span>
|
||||
<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">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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<input id="memory_prompt_words_force" type="range" value="${defaultSettings.promptForceWords}" min="${defaultSettings.promptMinForceWords}" max="${defaultSettings.promptMaxForceWords}" step="${defaultSettings.promptForceWordsStep}" />
|
||||
</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}" />
|
||||
<label for="memory_position">Position:</label>
|
||||
<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">
|
||||
Summary Prompt
|
||||
|
||||
</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>
|
||||
`;
|
||||
$('#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();
|
||||
|
|
|
|||
|
|
@ -1410,7 +1410,8 @@ async function resetMovablePanels(type) {
|
|||
'WorldInfo',
|
||||
'floatingPrompt',
|
||||
'expression-holder',
|
||||
'groupMemberListPopout'
|
||||
'groupMemberListPopout',
|
||||
'summaryExtensionPopout'
|
||||
];
|
||||
|
||||
const panelStyles = ['top', 'left', 'right', 'bottom', 'height', 'width', 'margin',];
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -3621,4 +3638,4 @@ a {
|
|||
height: 100vh;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue