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

Optimize WI layout

Browse Source
This commit is contained in:
Cohee
2023-11-04 17:44:43 +02:00
parent b897c8db4a
commit 890ae4bba9
3 changed files with 162 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
public/index.html
View File

@@ -2510,152 +2510,154 @@
</h3>
</div>
<div id="wi-holder" class="margin5">
<div class="justifyContentSpaceAround wi-settings flex-container gap10px alignitemscenter">
<div id="WIMultiSelector" class="flex2 flex alignSelfStart range-block">
<div class="range-block-title justifyLeft">
<span data-i18n="Active World(s) for all chats"><small>Active World(s) for all chats</small></span>
</div>
<div class="range-block-range">
<select id="world_info" multiple>
<option value="">
<span data-i18n="-- World Info not found --">-- World Info not found --</span>
</option>
</select>
</div>
<div id="WIMultiSelector" class="flex2 flex alignSelfStart range-block">
<div class="range-block-title justifyLeft">
<span data-i18n="Active World(s) for all chats"><small>Active World(s) for all chats</small></span>
</div>
<div class="flex2 flex-container flexFlowColumn">
<div data-newbie-hidden class="flex range-block">
<div class="range-block-title justifyLeft">
<label for="world_info_character_strategy">
<span data-i18n="Character Lore Insertion Strategy"><small>Character Lore Insertion Strategy</small></span>
<div class="range-block-range">
<select id="world_info" multiple>
<option value="">
<span data-i18n="-- World Info not found --">-- World Info not found --</span>
</option>
</select>
</div>
</div>
<div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
<div class="inline-drawer-toggle inline-drawer-header">
<b><span data-i18n="Activation Settings">Activation Settings</span></b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div class="justifyContentSpaceAround wi-settings flex-container gap10px alignitemscenter">
<div class="flex2 flex-container flexFlowColumn">
<div data-newbie-hidden class="flex range-block">
<div class="range-block-title justifyLeft">
<label for="world_info_character_strategy">
<span data-i18n="Character Lore Insertion Strategy"><small>Character Lore Insertion Strategy</small></span>
</label>
</div>
<div class="range-block-range">
<select id="world_info_character_strategy" class="flexGrow margin0">
<option value="0" data-i18n="Sorted Evenly">Sorted Evenly</option>
<option value="1" data-i18n="Character Lore First">Character Lore First</option>
<option value="2" data-i18n="Global Lore First">Global Lore First</option>
</select>
</div>
</div>
<div name="WIScanAndTokens" class="flex1 flex-container flexFlowColumn">
<div data-newbie-hidden class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Scan Depth">Scan Depth</small>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_depth" name="volume" min="0" max="100" step="1">
</div>
<div class="range-block-counter margin0">
<input type="number" data-for="world_info_depth" id="world_info_depth_counter">
</div>
</div>
</div>
<div class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Context %">Context %</small>
</div>
<div class="range-block-range-and-counter ">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_budget" name="volume" min="1" max="100" step="1">
</div>
<div class="range-block-counter margin0">
<input type="number" min="1" max="100" step="1" data-for="world_info_budget" id="world_info_budget_counter">
</div>
</div>
</div>
<div data-newbie-hidden class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Budget Cap">Budget Cap</small>
</div>
<div class="range-block-range-and-counter ">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_budget_cap" name="volume" min="0" max="8192" step="1">
</div>
<div class="range-block-counter margin0">
<input type="number" min="0" max="8192" step="1" data-for="world_info_budget_cap" id="world_info_budget_cap_counter">
</div>
</div>
<div class="budget_cap_note">
<small data-i18n="(0 = disabled)">(0 = disabled)</small>
</div>
</div>
<div data-newbie-hidden class="flex1 gap5px range-block" title="Scan chronologically until reached min entries or token budget." data-i18n="[title]Scan chronologically until reached min entries or token budget.">
<div class="wide10pMinFit">
<small data-i18n="Min Activations">Min Activations</small>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_min_activations" name="volume" min="0" max="100" step="1">
</div>
<div class="range-block-counter margin0">
<input type="number" data-for="world_info_min_activations" id="world_info_min_activations_counter">
</div>
</div>
</div>
<div data-newbie-hidden class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Max Depth">Max Depth</small>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_min_activations_depth_max" name="volume" min="0" max="100" step="1">
</div>
<div class="range-block-counter margin0">
<input type="number" data-for="world_info_min_activations_depth_max" id="world_info_min_activations_depth_max_counter">
</div>
</div>
<div class="budget_cap_note">
<small data-i18n="(0 = unlimited, use budget)">(0 = unlimited, use budget)</small>
</div>
</div>
</div>
</div>
<div id="worldInfoScanningCheckboxes" data-newbie-hidden class="alignitemsflexstart flex1 flex-container flexFlowColumn">
<label title="Entries can activate other entries by mentioning their keywords" data-i18n="[title]Entries can activate other entries by mentioning their keywords" class="checkbox_label flex1">
<input id="world_info_recursive" type="checkbox" />
<small data-i18n="Recursive Scan" class="whitespacenowrap flex1">
Recursive Scan
</small>
</label>
<label title="Lookup for the entry keys in the context will respect the case" data-i18n="[title]Lookup for the entry keys in the context will respect the case" class="checkbox_label flex1">
<input id="world_info_case_sensitive" type="checkbox" />
<small data-i18n="Case Sensitive" class="whitespacenowrap flex1">
Case-sensitive
</small>
</label>
<label title="If the entry key consists of only one word, it would not be matched as part of other words" data-i18n="[title]If the entry key consists of only one word, it would not be matched as part of other words" class="checkbox_label flex1">
<input id="world_info_match_whole_words" type="checkbox" />
<small data-i18n="Match whole words" class="whitespacenowrap flex1">
Match whole words
</small>
</label>
<label title="Alert if your world info is greater than the allocated budget." data-i18n="[title]Alert if your world info is greater than the allocated budget." class="checkbox_label flex1">
<input id="world_info_overflow_alert" type="checkbox" />
<small data-i18n="Alert On Overflow" class="whitespacenowrap flex1">
Alert On Overflow
</small>
</label>
</div>
<div class="range-block-range">
<select id="world_info_character_strategy" class="flexGrow margin0">
<option value="0" data-i18n="Sorted Evenly">Sorted Evenly</option>
<option value="1" data-i18n="Character Lore First">Character Lore First</option>
<option value="2" data-i18n="Global Lore First">Global Lore First</option>
</select>
</div>
</div>
<div name="WIScanAndTokens" class="flex1 flex-container flexFlowColumn">
<div data-newbie-hidden class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Scan Depth">Scan Depth</small>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_depth" name="volume" min="0" max="100" step="1">
</div>
<div class="range-block-counter margin0">
<input type="number" data-for="world_info_depth" id="world_info_depth_counter">
</div>
</div>
</div>
<div class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Context %">Context %</small>
</div>
<div class="range-block-range-and-counter ">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_budget" name="volume" min="1" max="100" step="1">
</div>
<div class="range-block-counter margin0">
<input type="number" min="1" max="100" step="1" data-for="world_info_budget" id="world_info_budget_counter">
</div>
</div>
</div>
<div data-newbie-hidden class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Budget Cap">Budget Cap</small>
</div>
<div class="range-block-range-and-counter ">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_budget_cap" name="volume" min="0" max="8192" step="1">
</div>
<div class="range-block-counter margin0">
<input type="number" min="0" max="8192" step="1" data-for="world_info_budget_cap" id="world_info_budget_cap_counter">
</div>
</div>
<div class="budget_cap_note">
<small data-i18n="(0 = disabled)">(0 = disabled)</small>
</div>
</div>
<div data-newbie-hidden class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Min Activations">Min Activations</small>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_min_activations" name="volume" min="0" max="100" step="1">
</div>
<div class="range-block-counter margin0">
<input type="number" data-for="world_info_min_activations" id="world_info_min_activations_counter">
</div>
</div>
<div class="budget_cap_note">
<small data-i18n="scan chronologically until min entries or token budget">scan chronologically until min entries or token budget</small>
</div>
</div>
<div data-newbie-hidden class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Min Activations: Max Depth">Min Activations: Max Depth</small>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range paddingLeftRight5">
<input type="range" id="world_info_min_activations_depth_max" name="volume" min="0" max="100" step="1">
</div>
<div class="range-block-counter margin0">
<input type="number" data-for="world_info_min_activations_depth_max" id="world_info_min_activations_depth_max_counter">
</div>
</div>
<div class="budget_cap_note">
<small data-i18n="(0 = chronological scan depth unlimited, use token budget)">(0 = chronological scan depth unlimited, use token budget)</small>
</div>
</div>
</div>
</div>
<div id="worldInfoScanningCheckboxes" data-newbie-hidden class="alignitemsflexstart flex1 flex-container flexFlowColumn">
<label title="Entries can activate other entries by mentioning their keywords" data-i18n="[title]Entries can activate other entries by mentioning their keywords" class="checkbox_label flex1">
<input id="world_info_recursive" type="checkbox" />
<small data-i18n="Recursive Scan" class="whitespacenowrap flex1">
Recursive Scan
</small>
</label>
<label title="Lookup for the entry keys in the context will respect the case" data-i18n="[title]Lookup for the entry keys in the context will respect the case" class="checkbox_label flex1">
<input id="world_info_case_sensitive" type="checkbox" />
<small data-i18n="Case Sensitive" class="whitespacenowrap flex1">
Case-sensitive
</small>
</label>
<label title="If the entry key consists of only one word, it would not be matched as part of other words" data-i18n="[title]If the entry key consists of only one word, it would not be matched as part of other words" class="checkbox_label flex1">
<input id="world_info_match_whole_words" type="checkbox" />
<small data-i18n="Match whole words" class="whitespacenowrap flex1">
Match whole words
</small>
</label>
<label title="Alert if your world info is greater than the allocated budget." data-i18n="[title]Alert if your world info is greater than the allocated budget." class="checkbox_label flex1">
<input id="world_info_overflow_alert" type="checkbox" />
<small data-i18n="Alert On Overflow" class="whitespacenowrap flex1">
Alert On Overflow
</small>
</label>
</div>
<div id="WIInputWidthReference" style="display:none; height:1px;">10000</div>
</div>
<div id="world_popup">

35
public/scripts/world-info.js
View File

@@ -60,8 +60,6 @@ const worldInfoFilter = new FilterHelper(() => updateEditor());
const SORT_ORDER_KEY = 'world_info_sort_order';
const METADATA_KEY = 'world_info';
const InputWidthReference = $("#WIInputWidthReference");
const DEFAULT_DEPTH = 4;
export function getWorldInfoSettings() {
@@ -384,22 +382,21 @@ function displayWorldEntries(name, data, navigation = navigation_option.none) {
<small class="flex1">
Title/Memo
</small>
<small style="width:${InputWidthReference.width() + 5 + 'px'}">
<small style="width: calc(3.5em + 5px)">
Status
</small>
<small style="width:${InputWidthReference.width() + 20 + 'px'}">
<small style="width: calc(3.5em + 20px)">
Position
</small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}">
<small style="width: calc(3.5em + 15px)">
Depth
</small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}">
<small style="width: calc(3.5em + 15px)">
Order
</small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}">
<small style="width: calc(3.5em + 15px)">
Trigger %
</small>
</div>`
const blocks = page.map(entry => getWorldEntry(name, data, entry));
$("#world_popup_entries_list").append(keywordHeaders);
@@ -836,7 +833,7 @@ function getWorldEntry(name, data, entry) {
saveWorldInfo(name, data);
});
orderInput.val(entry.order).trigger("input");
orderInput.width(InputWidthReference.width() + 15 + 'px')
orderInput.css('width', 'calc(3em + 15px)');
// probability
if (entry.probability === undefined) {
@@ -857,7 +854,7 @@ function getWorldEntry(name, data, entry) {
saveWorldInfo(name, data);
});
depthInput.val(entry.depth ?? DEFAULT_DEPTH).trigger("input");
depthInput.width(InputWidthReference.width() + 15 + 'px');
depthInput.css('width', 'calc(3em + 15px)');
// Hide by default unless depth is specified
if (entry.position === world_info_position.atDepth) {
@@ -885,7 +882,7 @@ function getWorldEntry(name, data, entry) {
saveWorldInfo(name, data);
});
probabilityInput.val(entry.probability).trigger("input");
probabilityInput.width(InputWidthReference.width() + 15 + 'px')
probabilityInput.css('width', 'calc(3em + 15px)');
// probability toggle
if (entry.useProbability === undefined) {
@@ -2065,7 +2062,7 @@ jQuery(() => {
$("#world_editor_select").on('change', async () => {
$("#world_info_search").val('');
worldInfoFilter.setFilterData(FILTER_TYPES.WORLD_INFO_SEARCH, '', true);
const selectedIndex = $("#world_editor_select").find(":selected").val();
const selectedIndex = String($("#world_editor_select").find(":selected").val());
if (selectedIndex === "") {
hideWorldEditor();
@@ -2080,39 +2077,39 @@ jQuery(() => {
eventSource.emit(event_types.WORLDINFO_SETTINGS_UPDATED);
}
$(document).on("input", "#world_info_depth", function () {
$("#world_info_depth").on('input', function () {
world_info_depth = Number($(this).val());
$("#world_info_depth_counter").val($(this).val());
saveSettings();
});
$(document).on("input", "#world_info_min_activations", function () {
$("#world_info_min_activations").on('input', function () {
world_info_min_activations = Number($(this).val());
$("#world_info_min_activations_counter").val($(this).val());
saveSettings();
});
$(document).on("input", "#world_info_min_activations_depth_max", function () {
$("#world_info_min_activations_depth_max").on('input', function () {
world_info_min_activations_depth_max = Number($(this).val());
$("#world_info_min_activations_depth_max_counter").val($(this).val());
saveSettings();
});
$(document).on("input", "#world_info_budget", function () {
$("#world_info_budget").on('input', function () {
world_info_budget = Number($(this).val());
$("#world_info_budget_counter").val($(this).val());
saveSettings();
});
$(document).on("input", "#world_info_recursive", function () {
$("#world_info_recursive").on('input', function () {
world_info_recursive = !!$(this).prop('checked');
saveSettings();
})
});
$('#world_info_case_sensitive').on('input', function () {
world_info_case_sensitive = !!$(this).prop('checked');
saveSettings();
})
});
$('#world_info_match_whole_words').on('input', function () {
world_info_match_whole_words = !!$(this).prop('checked');