mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
restyle extensions setting panel
This commit is contained in:
RossAscends
@ -2032,33 +2032,34 @@
|
||||
<div class="drawer-icon fa-solid fa-cubes closedIcon" title="Extensions"></div>
|
||||
</div>
|
||||
<div id="rm_extensions_block" class="drawer-content closedDrawer">
|
||||
<div class="extensions_block">
|
||||
<h3>Extensions API:
|
||||
<a target="_blank" href="https://github.com/SillyTavern/SillyTavern-extras">
|
||||
SillyTavern-extras
|
||||
</a>
|
||||
</h3>
|
||||
<input id="extensions_url" type="text" class="text_pole" maxlength="250" placeholder="Extensions URL" />
|
||||
<input id="extensions_api_key" type="text" class="text_pole" maxlength="250" placeholder="API key" />
|
||||
<div class="extensions_url_block">
|
||||
<input id="extensions_connect" class="menu_button" type="submit" value="Connect" />
|
||||
<input id="extensions_details" class="menu_button" type="button" value="Manage extensions" />
|
||||
<span class="expander"></span>
|
||||
<label for="extensions_autoconnect"><input id="extensions_autoconnect" type="checkbox" />
|
||||
<div class="extensions_block flex-container">
|
||||
<div class="alignitemscenter flex-container justify wide100p" style="justify-content: space-between;">
|
||||
<h3 class="margin0 flex1">Extensions API:
|
||||
<a target="_blank" href="https://github.com/SillyTavern/SillyTavern-extras">
|
||||
SillyTavern-extras
|
||||
</a>
|
||||
</h3>
|
||||
<div id="extensions_status">Not Connected</div>
|
||||
<label for="extensions_autoconnect">
|
||||
<input id="extensions_autoconnect" type="checkbox">
|
||||
Auto-connect
|
||||
</label>
|
||||
</div>
|
||||
<div id="extensions_status">
|
||||
Not connected
|
||||
<div class="alignitemsflexstart flex-container wide100p">
|
||||
<input id="extensions_url" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" placeholder="Extensions URL">
|
||||
<input id="extensions_api_key" type="text" class="flex1 heightFitContent text_pole widthNatural" maxlength="250" placeholder="API key">
|
||||
<div class="alignitemsflexstart extensions_url_block">
|
||||
<div class="" style="text-align: center">
|
||||
<input id="extensions_connect" class="menu_button" type="submit" value="Connect">
|
||||
</div>
|
||||
<input id="extensions_details" class="alignitemsflexstart menu_button" type="button" value="Manage extensions">
|
||||
</div>
|
||||
</div>
|
||||
<div id="extensions_loaded">
|
||||
<h4>Active extensions</h4>
|
||||
<ul id="extensions_list">
|
||||
</ul>
|
||||
<div id="extensions_settings" class="flex1 widthNatural">
|
||||
</div>
|
||||
<div id="extensions_settings">
|
||||
<h3>Extension settings</h3>
|
||||
<div id="extensions_settings2" class="flex1 widthNatural">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2329,14 +2330,11 @@
|
||||
<div class="inline-drawer-content">
|
||||
<div>
|
||||
<h4>System Prompt</h4>
|
||||
<textarea id="system_prompt_textarea" name="system_prompt"
|
||||
placeholder="(Overrides the main prompt for OpenAI and/or system prompt for Instruct Mode if not empty)"
|
||||
form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="20000"></textarea>
|
||||
<textarea id="system_prompt_textarea" name="system_prompt" placeholder="(Overrides the main prompt for OpenAI and/or system prompt for Instruct Mode if not empty)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="20000"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Post History Instructions</h4>
|
||||
<textarea id="post_history_instructions_textarea" name="post_history_instructions" placeholder="(Overrides the default jailbreak for OpenAI if not empty)" form="form_create" class="text_pole"
|
||||
autocomplete="off" rows="3" maxlength="100"></textarea>
|
||||
<textarea id="post_history_instructions_textarea" name="post_history_instructions" placeholder="(Overrides the default jailbreak for OpenAI if not empty)" form="form_create" class="text_pole" autocomplete="off" rows="3" maxlength="100"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2351,24 +2349,19 @@
|
||||
<div class="inline-drawer-content">
|
||||
<div>
|
||||
<h4>Creator's Name</h4>
|
||||
<textarea id="creator_textarea" name="creator" placeholder="(Botmaker's name / Contact info)" form="form_create" class="text_pole"
|
||||
autocomplete="off" rows="1" maxlength="100"></textarea>
|
||||
<textarea id="creator_textarea" name="creator" placeholder="(Botmaker's name / Contact info)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="100"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Creator's Notes</h4>
|
||||
<textarea id="creator_notes_textarea" name="creator_notes"
|
||||
placeholder="(Describe the bot to the user, list the chat models it has been tested on, and any other useful tips)"
|
||||
form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="20000"></textarea>
|
||||
<textarea id="creator_notes_textarea" name="creator_notes" placeholder="(Describe the bot to the user, list the chat models it has been tested on, and any other useful tips)" form="form_create" class="text_pole" autocomplete="off" rows="2" maxlength="20000"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Creators's Tags</h4>
|
||||
<textarea id="tags_textarea" name="tags" placeholder="(List of freeform comma-separated tags)" form="form_create"
|
||||
class="text_pole" autocomplete="off" rows="1" maxlength="2000"></textarea>
|
||||
<textarea id="tags_textarea" name="tags" placeholder="(List of freeform comma-separated tags)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="2000"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Character Version</h4>
|
||||
<textarea id="character_version_textarea" name="character_version" placeholder="(Optional string to track character versions)"
|
||||
form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="100"></textarea>
|
||||
<textarea id="character_version_textarea" name="character_version" placeholder="(Optional string to track character versions)" form="form_create" class="text_pole" autocomplete="off" rows="1" maxlength="100"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2890,4 +2883,4 @@
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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); });
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -902,6 +902,10 @@ select {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.marginTopBot5 {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#description_textarea,
|
||||
#firstmessage_textarea {
|
||||
height: -webkit-fill-available;
|
||||
@ -1316,7 +1320,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
|
||||
}
|
||||
|
||||
.alignitemsflexstart {
|
||||
align-items: flex-start;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.gap5px {
|
||||
@ -3497,7 +3501,7 @@ a {
|
||||
}
|
||||
|
||||
#extensions_status {
|
||||
margin-bottom: 10px;
|
||||
/* margin-bottom: 10px; */
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@ -3558,6 +3562,16 @@ label[for="extensions_autoconnect"] {
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
#extensions_settings .inline-drawer-toggle.inline-drawer-header,
|
||||
#extensions_settings2 .inline-drawer-toggle.inline-drawer-header {
|
||||
/* background-color: var(--SmartThemeBlurTintColor); */
|
||||
background-image: linear-gradient(350deg, var(--white30a)2%, var(--grey30a)10%, var(--black70a)90%, var(--SmartThemeQuoteColor)100%);
|
||||
margin-bottom: 5px;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
border: 1px solid var(--grey30);
|
||||
}
|
||||
|
||||
.success {
|
||||
color: green;
|
||||
}
|
||||
@ -4183,6 +4197,12 @@ body.waifuMode #avatar_zoom_popup {
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
|
||||
#extensions_settings,
|
||||
#extensions_settings2 {
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
||||
#avatar_zoom_popup {
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
@ -4500,4 +4520,4 @@ body.waifuMode #avatar_zoom_popup {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user