rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

More work on front end

Browse Source 
Its extra shiny
This commit is contained in:
somebody
2023-01-07 00:43:53 -06:00
parent 8e24d91f6d
commit 73f85a1a9e
3 changed files with 124 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
static/koboldai.css
View File

@@ -693,51 +693,30 @@ border-top-right-radius: var(--tabs_rounding);
.bias_slider_labels {
display: flex;
justify-content: space-between;
position: relative;
}
.bias_slider_bar {
grid-area: bar;
}
.bias_slider_min {
grid-area: min;
.bias_slider_min, .bias_slider_max{
font-size: calc(0.8em + var(--font_size_adjustment));
margin-right: 5px;
margin-left: 5px;
user-select: none;
}
.bias_slider_cur {
grid-area: cur;
text-align: center;
outline: none;
}
.bias_slider_max {
grid-area: max;
font-size: calc(0.8em + var(--font_size_adjustment));
text-align: right;
margin-right: 5px;
margin-left: 5px;
.bias_score, .bias_top {
margin-bottom: 12px;
}
.bias_header {
display: grid;
grid-template-areas: "phrase percent max";
grid-template-columns: auto 100px 100px;
}
.bias_header_phrase {
grid-area: phrase;
font-size: calc(1.1em + var(--font_size_adjustment));
}
.bias_header_score {
grid-area: percent;
font-size: calc(1.1em + var(--font_size_adjustment));
}
.bias_header_max {
grid-area: max;
font-size: calc(1.1em + var(--font_size_adjustment));
.bias_slider_centerlayer {
/* Yeah its a bit of a hack */
position: absolute;
left: 0px;
width: 100%;
display: flex;
justify-content: center;
}
/* Theme */

90
static/koboldai.js
View File

@@ -2862,8 +2862,7 @@ function save_as_story(response) {
if (response === "overwrite?") openPopup("save-confirm");
}
function save_bias(item) {
function save_bias() {
var have_blank = false;
var biases = {};
//get all of our biases
@@ -3634,8 +3633,15 @@ function options_on_right(data) {
}
function makeBiasCard(phrase, score, compThreshold) {
function updateLabel(input) {
input.closest(".bias_slider").querySelector(".bias_slider_cur").innerText = input.value;
function updateBias(origin, input, save=true) {
const textInput = input.closest(".bias_slider").querySelector(".bias_slider_cur");
let value = (origin === "slider") ? input.value : parseFloat(textInput.innerText);
textInput.innerText = value;
input.value = value;
// Only save on "commitful" actions like blur or mouseup to not spam
// the poor server
if (save) console.warn("saving")
}
const biasContainer = $el("#biasing");
@@ -3647,14 +3653,78 @@ function makeBiasCard(phrase, score, compThreshold) {
const compThresholdInput = biasCard.querySelector(".bias_comp_threshold input");
phraseInput.value = phrase;
scoreInput.value = score;
scoreInput.addEventListener("input", function() { updateLabel(this) });
updateLabel(scoreInput);
compThresholdInput.value = compThreshold;
compThresholdInput.addEventListener("input", function() { updateLabel(this) });
updateLabel(compThresholdInput);
for (const input of [scoreInput, compThresholdInput]) {
// Init sync
updateBias("slider", input, false);
// Visual update on each value change
input.addEventListener("input", function() { updateBias("slider", this, false) });
// Only when we leave do we sync to server (might come back to bite us)
input.addEventListener("mouseup", function() { updateBias("slider", this) });
input.addEventListener("blur", function() { updateBias("slider", this) });
// Personally I don't want to press a key 100 times to add one
const nudge = parseFloat(input.getAttribute("keyboard-step") ?? input.getAttribute("step"));
const min = parseFloat(input.getAttribute("min"));
const max = parseFloat(input.getAttribute("max"));
const currentHitbox = input.closest(".hitbox");
const currentLabel = input.closest(".bias_slider").querySelector(".bias_slider_cur");
currentLabel.addEventListener("keydown", function(event) {
// Nothing special for numbers
if ([".", "-"].includes(event.key) || parseInt(event.key)) return;
// Either we are special keys or forbidden keys
event.preventDefault();
switch (event.key) {
case "Enter":
currentLabel.blur();
break;
// This feels very nice :^)
case "ArrowDown":
case "ArrowUp":
let delta = (event.key === "ArrowUp") ? nudge : -nudge;
let currentValue = parseFloat(currentLabel.innerText);
event.preventDefault();
if (!currentValue && currentValue !== 0) return;
// toFixed because 1.1 + 0.1 !== 1.2 yay rounding errors.
// Although the added decimal place(s) look cleaner now
// that I think about it.
let value = Math.min(max, Math.max(min, currentValue + delta));
currentLabel.innerText = value.toFixed(2);
updateBias("text", input, false);
break;
}
});
currentHitbox.addEventListener("wheel", function(event) {
// Only when focused! (May drop this requirement later, browsers seem to behave when scrolling :] )
if (currentLabel !== document.activeElement) return;
if (event.deltaY === 0) return;
let delta = (event.deltaY > 0) ? nudge : -nudge;
let currentValue = parseFloat(currentLabel.innerText);
event.preventDefault();
if (!currentValue && currentValue !== 0) return;
let value = Math.min(max, Math.max(min, currentValue + delta));
currentLabel.innerText = value.toFixed(2);
updateBias("text", input, false);
});
currentLabel.addEventListener("blur", function(event) {
updateBias("text", input);
});
}
biasContainer.appendChild(biasCard);
}

54
templates/templates.html
View File

@@ -118,32 +118,40 @@
<span class="close_button material-icons-outlined">close</span>
</div>
<span>Score</span>
<div class="bias_score bias_slider">
<div class="bias_slider_bar">
<input type="range" min="-50" max="50" step="0.01" value="0" class="setting_item_input"
onchange="save_bias(this);"/>
</div>
<div class="bias_slider_labels">
<div class="bias_slider_min">-50</div>
<div class="bias_slider_cur">0</div>
<div class="bias_slider_max">50</div>
<div class="hitbox">
<span class="bias_label">Bias Amount</span>
<div class="bias_score bias_slider">
<div class="bias_slider_bar">
<input type="range" min="-50" max="50" keyboard-step="0.1" step="0.01" value="0" class="setting_item_input"
onchange="save_bias(this);"/>
</div>
<div class="bias_slider_labels">
<span class="bias_slider_min">-50</span>
<div class="bias_slider_centerlayer">
<span class="bias_slider_cur" contenteditable="true">0</span>
</div>
<div class="bias_slider_max">50</div>
</div>
</div>
</div>
<span class="bias_header_comp_threshold">
Completion Threshold
<span class="helpicon material-icons-outlined" tooltip="Amount of tokens that must match the phrase before it is force-completed.">help_icon</span>
</span>
<div class="bias_comp_threshold bias_slider">
<div class="bias_slider_bar">
<input type="range" min="0" max="10" step="1" value="10" class="setting_item_input"
onchange="save_bias(this);"/>
</div>
<div class="bias_slider_labels">
<div class="bias_slider_min">0</div>
<div class="bias_slider_cur">10</div>
<div class="bias_slider_max">10</div>
<div class="hitbox">
<span class="bias_label">
Completion Threshold
<span class="helpicon material-icons-outlined" tooltip="Amount of tokens that must match the phrase before it is force-completed.">help_icon</span>
</span>
<div class="bias_comp_threshold bias_slider">
<div class="bias_slider_bar">
<input type="range" min="0" max="10" step="1" value="10" class="setting_item_input"
onchange="save_bias(this);"/>
</div>
<div class="bias_slider_labels">
<div class="bias_slider_min">0</div>
<div class="bias_slider_centerlayer">
<span class="bias_slider_cur" contenteditable="true">10</span>
</div>
<div class="bias_slider_max">10</div>
</div>
</div>
</div>
</div>