restyle extensions setting panel

This commit is contained in:
RossAscends
2023-06-05 01:02:18 +09:00
parent a273fcb593
commit 8a80ed3e86
8 changed files with 95 additions and 75 deletions

View File

@@ -461,19 +461,20 @@ jQuery(async () => {
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<p>This extension rearranges the messages in the current chat to keep more relevant information in the context. Adjust the sliders below based on average amount of messages in your prompt (refer to the chat cut-off line).</p>
<span>Memory Injection Strategy</span>
<small>This extension rearranges the messages in the current chat to keep more relevant information in the context. Adjust the sliders below based on average amount of messages in your prompt (refer to the chat cut-off line).</small>
<span class="wide100p marginTopBot5 displayBlock">Memory Injection Strategy</span>
<hr>
<select id="chromadb_strategy">
<option value="original">Replace non-kept chat items with memories</option>
<option value="ross">Add memories after chat with a header tag</option>
</select>
<label for="chromadb_keep_context">How many original chat messages to keep: (<span id="chromadb_keep_context_value"></span>) messages</label>
<label for="chromadb_keep_context"><small>How many original chat messages to keep: (<span id="chromadb_keep_context_value"></span>) messages</small></label>
<input id="chromadb_keep_context" type="range" min="${defaultSettings.keep_context_min}" max="${defaultSettings.keep_context_max}" step="${defaultSettings.keep_context_step}" value="${defaultSettings.keep_context}" />
<label for="chromadb_n_results">Maximum number of ChromaDB 'memories' to inject: (<span id="chromadb_n_results_value"></span>) messages</label>
<label for="chromadb_n_results"><small>Maximum number of ChromaDB 'memories' to inject: (<span id="chromadb_n_results_value"></span>) messages</small></label>
<input id="chromadb_n_results" type="range" min="${defaultSettings.n_results_min}" max="${defaultSettings.n_results_max}" step="${defaultSettings.n_results_step}" value="${defaultSettings.n_results}" />
<label for="chromadb_split_length">Max length for each 'memory' pulled from the current chat history: (<span id="chromadb_split_length_value"></span>) characters</label>
<label for="chromadb_split_length"><small>Max length for each 'memory' pulled from the current chat history: (<span id="chromadb_split_length_value"></span>) characters</small></label>
<input id="chromadb_split_length" type="range" min="${defaultSettings.split_length_min}" max="${defaultSettings.split_length_max}" step="${defaultSettings.split_length_step}" value="${defaultSettings.split_length}" />
<label for="chromadb_file_split_length">Max length for each 'memory' pulled from imported text files: (<span id="chromadb_file_split_length_value"></span>) characters</label>
<label for="chromadb_file_split_length"><small>Max length for each 'memory' pulled from imported text files: (<span id="chromadb_file_split_length_value"></span>) characters</small></label>
<input id="chromadb_file_split_length" type="range" min="${defaultSettings.file_split_length_min}" max="${defaultSettings.file_split_length_max}" step="${defaultSettings.file_split_length_step}" value="${defaultSettings.file_split_length}" />
<label class="checkbox_label" for="chromadb_freeze" title="Pauses the automatic synchronization of new messages with ChromaDB. Older messages and injections will still be pulled as usual." >
<input type="checkbox" id="chromadb_freeze" />
@@ -503,7 +504,7 @@ jQuery(async () => {
<form><input id="chromadb_import_file" type="file" accept="application/json" hidden></form>
</div>`;
$('#extensions_settings').append(settingsHtml);
$('#extensions_settings2').append(settingsHtml);
$('#chromadb_strategy').on('change', onStrategyChange);
$('#chromadb_keep_context').on('input', onKeepContextInput);
$('#chromadb_n_results').on('input', onNResultsInput);

View File

@@ -321,24 +321,24 @@ $(document).ready(function () {
<div id="memory_settings">
<div class="inline-drawer">
<div class="inline-drawer-toggle inline-drawer-header">
<b>Chat memory</b>
<b>Summarize</b>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<label for="memory_contents">Memory contents</label>
<label for="memory_contents">Current summary: </label>
<textarea id="memory_contents" class="text_pole" rows="8" placeholder="Context will be generated here..."></textarea>
<div class="memory_contents_controls">
<input id="memory_restore" class="menu_button" type="submit" value="Restore previous state" />
<label for="memory_frozen"><input id="memory_frozen" type="checkbox" /> Freeze context</label>
<label for="memory_frozen"><input id="memory_frozen" type="checkbox" />Stop summarization updates</label>
</div>
</div>
<!--</div>
</div>
<div class="inline-drawer">
<div class="inline-drawer-toggle inline-drawer-header">
<b>Summarization parameters</b>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<div class="inline-drawer-content">-->
<label for="memory_short_length">Buffer <small>[short-term]</small> 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 <small>[long-term]</small> length (<span id="memory_long_length_tokens"></span> tokens)</label>
@@ -353,7 +353,7 @@ $(document).ready(function () {
</div>
</div>
`;
$('#extensions_settings').append(settingsHtml);
$('#extensions_settings2').append(settingsHtml);
$('#memory_restore').on('click', onMemoryRestoreClick);
$('#memory_contents').on('input', onMemoryContentInput);
$('#memory_long_length').on('input', onMemoryLongInput);

View File

@@ -61,7 +61,7 @@ async function generateQuietPrompt(quiet_prompt) {
// Accepts optional position. Defaults to adding to end of list.
function addTask(description, position = null) {
position = position != null ? position: position = globalTasks.length
position = position != null ? position : position = globalTasks.length
globalTasks.splice(position, 0, {
"description": description,
"completed": false
@@ -78,13 +78,13 @@ function getTask(index = null, taskDescription = null) {
task = globalObjective[index]
} else if (taskDescription != null) {
task = globalTasks.find(task => {
return task.description == description ? true: false
return task.description == description ? true : false
})
}
return task
}
function deleteTask(index){
function deleteTask(index) {
globalTasks.splice(index, 1)
setCurrentTask()
updateUiTaskList()
@@ -229,9 +229,9 @@ function addUiTask(taskIndex, taskComplete, taskDescription) {
<span class="text_pole" style="display: block" id="objective-task-description-${taskIndex}" contenteditable>${taskDescription}</span>
<div id="objective-task-delete-${taskIndex}" class="objective-task-button fa-solid fa-xmark fa-2x" title="Delete Task"></div>
<div id="objective-task-add-${taskIndex}" class="objective-task-button fa-solid fa-plus fa-2x" title="Add Task"></div>
</div><br>
</div>
`;
// Add the filled out template
$('#objective-tasks').append(template);
@@ -248,7 +248,7 @@ function addUiTask(taskIndex, taskComplete, taskDescription) {
});
$(`#objective-task-delete-${taskIndex}`).on('click', event => {
const index = Number(event.target.id.split('-').pop());
deleteTask(index)
deleteTask(index)
});
$(`#objective-task-add-${taskIndex}`).on('click', event => {
const index = Number(event.target.id.split('-').pop()) + 1;
@@ -262,7 +262,7 @@ function addUiTask(taskIndex, taskComplete, taskDescription) {
function updateUiTaskList() {
$('#objective-tasks').empty()
// Show tasks if there are any
if (globalTasks.length > 0){
if (globalTasks.length > 0) {
for (const index in globalTasks) {
addUiTask(
index,
@@ -271,7 +271,7 @@ function updateUiTaskList() {
)
}
} else {
// Show button to add tasks if there are none
// Show button to add tasks if there are none
$('#objective-tasks').append(`
<input id="objective-task-add-first" type="button" class="menu_button" value="Add Task">
`)
@@ -307,7 +307,7 @@ function onChatDepthInput() {
// Update how often we check for task completion
function onCheckFrequencyInput() {
checkCounter = $("#objective-check-frequency").val()
checkCounter = $("#objective-check-frequency").val()
$('#objective-counter').text(checkCounter)
saveState()
}
@@ -363,19 +363,19 @@ jQuery(() => {
<div class="inline-drawer-content">
<label for="objective-text"><small>Enter an objective and generate tasks. The AI will attempt to complete tasks autonomously</small></label>
<textarea id="objective-text" type="text" class="text_pole textarea_compact" rows="4"></textarea>
<div class="objective_block">
<input id="objective-generate" class="menu_button" type="submit" value="Generate Tasks" />
<small>Automatically generate tasks for Objective. Takes a moment.</small>
<div class="objective_block flex-container">
<input id="objective-generate" class="menu_button" type="submit" value="Auto-Generate Tasks" />
<label class="checkbox_label"><input id="objective-hide-tasks" type="checkbox"> Hide Tasks</label>
</div>
</br>
<label class="checkbox_label"><input id="objective-hide-tasks" type="checkbox"> Hide Tasks</label><br>
<div id="objective-tasks"> </div>
<div class="objective_block">
<div class="objective_block objective_block_control flex1">
<label for="objective-chat-depth">In-chat @ Depth</label>
<div class="objective_block margin-bot-10px">
<div class="objective_block objective_block_control flex1 flexFlowColumn">
<label for="objective-chat-depth">Position in Chat</label>
<input id="objective-chat-depth" class="text_pole widthUnset" type="number" min="0" max="99" />
<small>Depth</small>
</div>
<div class="objective_block objective_block_control flex1">
<div class="objective_block objective_block_control flex1 flexFlowColumn">
<label for="objective-check-frequency">Task Check Frequency</label>
<input id="objective-check-frequency" class="text_pole widthUnset" type="number" min="0" max="99" />
<small>(0 = disabled)</small>

View File

@@ -5,9 +5,10 @@
.objective_block {
display: flex;
flex-direction: row;
/* flex-direction: row; */
align-items: center;
column-gap: 10px;
column-gap: 5px;
flex-wrap: wrap;
}
.objective_block_control small,
@@ -24,7 +25,7 @@
opacity: 0.7;
align-items: center;
justify-content: center;
}
.objective-task-button:hover {
@@ -33,4 +34,9 @@
[id^=objective-task-delete-] {
color: #da3f3f;
}
#objective-tasks span {
margin: unset;
margin-bottom: 5px !important;
}

View File

@@ -144,7 +144,7 @@ jQuery(async () => {
</div>
</div>`;
$('#extensions_settings').append(settingsHtml);
$('#extensions_settings2').append(settingsHtml);
$('#quickReply1Mes').on('input', function () { onQuickReplyInput(1); });
$('#quickReply2Mes').on('input', function () { onQuickReplyInput(2); });

View File

@@ -350,7 +350,7 @@ jQuery(() => {
Translate Chat
</div>`;
$('#extensionsMenu').append(buttonHtml);
$('#extensions_settings').append(html);
$('#extensions_settings2').append(html);
$('#translate_chat').on('click', onTranslateChatClick);
$('#translation_clear').on('click', onTranslationsClearClick);