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

Editable slider labels

Browse Source
This commit is contained in:
SillyLossy
2023-05-04 01:00:00 +03:00
parent 437cf59a48
commit 9c62783e08
5 changed files with 197 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
public/index.html
View File

@@ -153,7 +153,9 @@
<input type="range" id="amount_gen" name="volume" min="16" max="512" step="1">
</div>
<div class="range-block-counter">
<span id="amount_gen_counter">select</span>
<div contenteditable="true" data-for="amount_gen" id="amount_gen_counter">
select
</div>
</div>
</div>
<div id="max_context_block" class="range-block">
@@ -164,7 +166,9 @@
<input type="range" id="max_context" name="volume" min="512" max="2048" step="1">
</div>
<div class="range-block-counter">
<span id="max_context_counter">select</span>
<div contenteditable="true" data-for="max_context" id="max_context_counter">
select
</div>
</div>
</div>
</div>
@@ -179,7 +183,9 @@
<input type="range" id="temp" name="volume" min="0.1" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<span id="temp_counter">select</span>
<div contenteditable="true" data-for="temp" id="temp_counter">
select
</div>
</div>
</div>
<div class="range-block">
@@ -190,7 +196,9 @@
<input type="range" id="rep_pen" name="volume" min="1" max="1.5" step="0.01">
</div>
<div class="range-block-counter">
<span id="rep_pen_counter">select</span>
<div contenteditable="true" data-for="rep_pen" id="rep_pen_counter">
select
</div>
</div>
</div>
<div class="range-block">
@@ -201,7 +209,9 @@
<input type="range" id="rep_pen_range" name="volume" min="0" max="2048" step="1">
</div>
<div class="range-block-counter">
<span id="rep_pen_range_counter">select</span>
<div contenteditable="true" data-for="rep_pen_range" id="rep_pen_range_counter">
select
</div>
</div>
</div>
</div>
@@ -216,7 +226,9 @@
<input type="range" id="temp_textgenerationwebui" name="volume" min="0.1" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<span id="temp_counter_textgenerationwebui">select</span>
<div contenteditable="true" data-for="temp_textgenerationwebui" id="temp_counter_textgenerationwebui">
select
</div>
</div>
</div>
<div class="range-block">
@@ -227,7 +239,9 @@
<input type="range" id="rep_pen_textgenerationwebui" name="volume" min="1" max="1.5" step="0.01">
</div>
<div class="range-block-counter">
<span id="rep_pen_counter_textgenerationwebui">select</span>
<div contenteditable="true" data-for="rep_pen_textgenerationwebui" id="rep_pen_counter_textgenerationwebui">
select
</div>
</div>
</div>
<div class="range-block">
@@ -238,7 +252,9 @@
<input type="range" id="encoder_rep_pen_textgenerationwebui" name="volume" min="0.8" max="1.5" step="0.01" />
</div>
<div class="range-block-counter">
<span id="encoder_rep_pen_counter_textgenerationwebui">select</span>
<div contenteditable="true" data-for="encoder_rep_pen_textgenerationwebui" id="encoder_rep_pen_counter_textgenerationwebui">
select
</div>
</div>
</div>
<div class="range-block">
@@ -249,7 +265,9 @@
<input type="range" id="no_repeat_ngram_size_textgenerationwebui" name="volume" min="0" max="20" step="1">
</div>
<div class="range-block-counter">
<span id="no_repeat_ngram_size_counter_textgenerationwebui">select</span>
<div contenteditable="true" data-for="no_repeat_ngram_size_textgenerationwebui" id="no_repeat_ngram_size_counter_textgenerationwebui">
select
</div>
</div>
</div>
<div class="range-block">
@@ -260,7 +278,9 @@
<input type="range" id="min_length_textgenerationwebui" name="volume" min="0" max="2000" step="1" />
</div>
<div class="range-block-counter">
<span id="min_length_counter_textgenerationwebui">select</span>
<div contenteditable="true" data-for="min_length_textgenerationwebui" id="min_length_counter_textgenerationwebui">
select
</div>
</div>
</div>
</div>
@@ -289,7 +309,9 @@
<input type="range" id="openai_max_context" name="volume" min="512" max="4095" step="1">
</div>
<div class="range-block-counter">
<span id="openai_max_context_counter">select</span>
<div contenteditable="true" data-for="openai_max_context" id="openai_max_context_counter">
select
</div>
</div>
</div>
<div class="range-block">
@@ -309,7 +331,7 @@
<input type="range" id="temp_openai" name="volume" min="0" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<span id="temp_counter_openai">select</span>
<div contenteditable="true" data-for="temp_openai" id="temp_counter_openai">select</div>
</div>
</div>
<div class="range-block">
@@ -321,7 +343,9 @@
<input type="range" id="freq_pen_openai" name="volume" min="-2" max="2" step="0.01">
</div>
<div class="range-block-counter">
<span id="freq_pen_counter_openai">select</span>
<div contenteditable="true" data-for="freq_pen_openai" id="freq_pen_counter_openai">
select
</div>
</div>
</div>
<div class="range-block">
@@ -332,7 +356,9 @@
<input type="range" id="pres_pen_openai" name="volume" min="-2" max="2" step="0.01">
</div>
<div class="range-block-counter">
<span id="pres_pen_counter_openai">select</span>
<div contenteditable="true" data-for="pres_pen_openai" id="pres_pen_counter_openai">
select
</div>
</div>
</div>
</div>
@@ -388,7 +414,9 @@
<input type="range" id="top_p" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<span id="top_p_counter">select</span>
<div contenteditable="true" data-for="top_p" id="top_p_counter">
select
</div>
</div>
</div>
<div class="range-block">
@@ -399,7 +427,9 @@
<input type="range" id="top_a" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<span id="top_a_counter">select</span>
<div contenteditable="true" data-for="top_a" id="top_a_counter">
select
</div>
</div>
</div>
<div class="range-block">
@@ -410,7 +440,9 @@
<input type="range" id="top_k" name="volume" min="0" max="100" step="1">
</div>
<div class="range-block-counter">
<span id="top_k_counter">select</span>
<div contenteditable="true" data-for="top_k" id="top_k_counter">
select
</div>
</div>
</div>
<div class="range-block">
@@ -421,7 +453,9 @@
<input type="range" id="typical" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<span id="typical_counter">select</span>
<div contenteditable="true" data-for="typical" id="typical_counter">
select
</div>
</div>
</div>
<div class="range-block">
@@ -432,7 +466,9 @@
<input type="range" id="tfs" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<span id="tfs_counter">select</span>
<div contenteditable="true" data-for="tfs" id="tfs_counter">
select
</div>
</div>
</div>
<div class="range-block">
@@ -443,7 +479,9 @@
<input type="range" id="rep_pen_slope" name="volume" min="0" max="10" step="0.1">
</div>
<div class="range-block-counter">
<span id="rep_pen_slope_counter">select</span>
<div contenteditable="true" data-for="rep_pen_slope" id="rep_pen_slope_counter">
select
</div>
</div>
</div>
<div class="range-block">
@@ -472,7 +510,9 @@
<input type="range" id="temp_novel" name="volume" min="0.1" max="2.0" step="0.01">
</div>
<div class="range-block-counter">
<span id="temp_counter_novel">select</span>
<div contenteditable="true" data-for="temp_novel" id="temp_counter_novel">
select
</div>
</div>
</div>
<div class="range-block">
@@ -483,7 +523,9 @@
<input type="range" id="rep_pen_novel" name="volume" min="1" max="1.5" step="0.01">
</div>
<div class="range-block-counter">
<span id="rep_pen_counter_novel">select</span>
<div contenteditable="true" data-for="rep_pen_novel" id="rep_pen_counter_novel">
select
</div>
</div>
</div>
<div class="range-block">
@@ -494,7 +536,9 @@
<input type="range" id="rep_pen_size_novel" name="volume" min="0" max="2048" step="1">
</div>
<div class="range-block-counter">
<span id="rep_pen_size_counter_novel">select</span>
<div contenteditable="true" data-for="rep_pen_size_novel" id="rep_pen_size_counter_novel">
select
</div>
</div>
</div>
</div>
@@ -507,7 +551,9 @@
<input type="range" id="top_k_textgenerationwebui" name="volume" min="0" max="200" step="1">
</div>
<div class="range-block-counter">
<span id="top_k_counter_textgenerationwebui">select</span>
<div contenteditable="true" data-for="top_k_textgenerationwebui" id="top_k_counter_textgenerationwebui">
select
</div>
</div>
</div>
<div class="range-block">
@@ -518,7 +564,9 @@
<input type="range" id="top_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<span id="top_p_counter_textgenerationwebui">select</span>
<div contenteditable="true" data-for="top_p_textgenerationwebui" id="top_p_counter_textgenerationwebui">
select
</div>
</div>
</div>
<div class="range-block">
@@ -529,7 +577,9 @@
<input type="range" id="typical_p_textgenerationwebui" name="volume" min="0" max="1" step="0.01">
</div>
<div class="range-block-counter">
<span id="typical_p_counter_textgenerationwebui">select</span>
<div contenteditable="true" data-for="typical_p_textgenerationwebui" id="typical_p_counter_textgenerationwebui">
select
</div>
</div>
</div>
<div class="range-block">
@@ -578,7 +628,9 @@
<input type="range" id="num_beams_textgenerationwebui" name="volume" min="1" max="20" step="1" />
</div>
<div class="range-block-counter">
<span id="num_beams_counter_textgenerationwebui">select</span>
<div contenteditable="true" data-for="num_beams_textgenerationwebui" id="num_beams_counter_textgenerationwebui">
select
</div>
</div>
</div>
<div class="range-block">
@@ -589,7 +641,9 @@
<input type="range" id="length_penalty_textgenerationwebui" name="volume" min="-5" max="5" step="0.1" />
</div>
<div class="range-block-counter">
<span id="length_penalty_counter_textgenerationwebui">select</span>
<div contenteditable="true" data-for="length_penalty_textgenerationwebui" id="length_penalty_counter_textgenerationwebui">
select
</div>
</div>
</div>
<div class="range-block">
@@ -608,7 +662,9 @@
<input type="range" id="penalty_alpha_textgenerationwebui" name="volume" min="0" max="5" step="0.05" />
</div>
<div class="range-block-counter">
<span id="penalty_alpha_counter_textgenerationwebui">select</span>
<div contenteditable="true" data-for="penalty_alpha_textgenerationwebui" id="penalty_alpha_counter_textgenerationwebui">
select
</div>
</div>
</div>
<div class="range-block">
@@ -1149,14 +1205,14 @@
<h4>
Scan Depth <a href="/notes#scandepth" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</h4>
<span id="world_info_depth_counter">depth</span>
<label for="world_info_depth" id="world_info_depth_counter">depth</label>
<input type="range" id="world_info_depth" name="volume" min="1" max="10" step="1">
</div>
<div id="world_info_budget_block">
<h4>
Token Budget <a href="/notes#budget" class="notes-link" target="_blank"><span class="note-link-span">?</span></a>
</h4>
<span id="world_info_budget_counter">budget</span>
<label for="world_info_budget" id="world_info_budget_counter">budget</label>
<input type="range" id="world_info_budget" name="volume" min="32" max="2048" step="16">
</div>
</div>
@@ -1189,7 +1245,9 @@
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
</div>
<div class="range-block-counter">
<span id="font_scale_counter">select</span>
<div contenteditable="true" data-for="font_scale" id="font_scale_counter">
select
</div>
</div>
</div>
<div id="blur-strength-block" class="range-block">
@@ -1200,7 +1258,9 @@
<input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
</div>
<div class="range-block-counter">
<span id="blur_strength_counter">select</span>
<div contenteditable="true" data-for="blur_strength" id="blur_strength_counter">
select
</div>
</div>
</div>
<div id="shadow-width-block" class="range-block">
@@ -1211,7 +1271,9 @@
<input type="range" id="shadow_width" name="shadow_width" min="0" max="5" step="1">
</div>
<div class="range-block-counter">
<span id="shadow_width_counter">select</span>
<div contenteditable="true" data-for="shadow_width" id="shadow_width_counter">
select
</div>
</div>
</div>

43
public/script.js
View File

@@ -101,7 +101,7 @@ import {
setPoeOnlineStatus,
} from "./scripts/poe.js";
import { debounce, delay } from "./scripts/utils.js";
import { debounce, delay, restoreCaretPosition, saveCaretPosition } from "./scripts/utils.js";
import { extension_settings, loadExtensionSettings } from "./scripts/extensions.js";
import { executeSlashCommands, getSlashCommandsHelp, registerSlashCommand } from "./scripts/slash-commands.js";
import {
@@ -5628,4 +5628,45 @@ $(document).ready(function () {
streamingProcessor.abortController.abort();
}
});
$(document).on('input', 'div[contenteditable="true"]', function() {
const caretPosition = saveCaretPosition($(this).get(0));
const myText = $(this).text().trim();
$(this).text(myText); // trim line breaks and spaces
const masterSelector = $(this).data('for');
const masterElement = document.getElementById(masterSelector);
if (masterElement == null) {
console.error('Master input element not found for the editable label', masterSelector);
return;
}
const myValue = Number(myText);
if (Number.isNaN(myValue)) {
console.warn('Label input is not a valid number. Resetting the value', myText);
$(masterElement).trigger('input');
restoreCaretPosition($(this).get(0), caretPosition);
return;
}
const masterMin = Number($(masterElement).attr('min'));
const masterMax = Number($(masterElement).attr('max'));
if (myValue < masterMin) {
console.warn('Label input is less than minimum.', myText, '<', masterMin);
restoreCaretPosition($(this).get(0), caretPosition);
return;
}
if (myValue > masterMax) {
console.warn('Label input is more than maximum.', myText, '>', masterMax);
restoreCaretPosition($(this).get(0), caretPosition);
return;
}
console.log('Label value OK, setting to the master input control', myText);
$(masterElement).val(myValue).trigger('input');
restoreCaretPosition($(this).get(0), caretPosition);
});
})

2
public/scripts/RossAscends-mods.js
View File

@@ -698,7 +698,7 @@ $("document").ready(function () {
function isInputElementInFocus() {
//return $(document.activeElement).is(":input");
var focused = $(':focus');
if (focused.is('input') || focused.is('textarea')) {
if (focused.is('input') || focused.is('textarea') || focused.attr('contenteditable') == 'true') {
if (focused.attr('id') === 'send_textarea') {
return false;
}

51
public/scripts/utils.js
View File

@@ -111,3 +111,54 @@ export function stringFormat(format) {
;
});
};
// Save the caret position in a contenteditable element
export function saveCaretPosition(element) {
// Get the current selection
const selection = window.getSelection();
// If the selection is empty, return null
if (selection.rangeCount === 0) {
return null;
}
// Get the range of the current selection
const range = selection.getRangeAt(0);
// If the range is not within the specified element, return null
if (!element.contains(range.commonAncestorContainer)) {
return null;
}
// Return an object with the start and end offsets of the range
const position = {
start: range.startOffset,
end: range.endOffset
};
console.log('Caret saved', position);
return position;
}
// Restore the caret position in a contenteditable element
export function restoreCaretPosition(element, position) {
// If the position is null, do nothing
if (!position) {
return;
}
console.log('Caret restored', position);
// Create a new range object
const range = new Range();
// Set the start and end positions of the range within the element
range.setStart(element.childNodes[0], position.start);
range.setEnd(element.childNodes[0], position.end);
// Create a new selection object and set the range
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}

7
public/style.css
View File

@@ -1943,10 +1943,15 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
width: max-content;
margin-left: 5px;
margin-right: 15px;
font-size: calc(var(--mainFontSize) - 0.2rem);
font-size: calc(var(--mainFontSize) * 0.95);
color: var(--SmartThemeBodyColor);
}
.range-block-counter div[contenteditable="true"] {
display: block;
cursor: text;
}
.range-block-range {
margin: 0;
width: 80%;