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

Biasing ui update

Browse Source
This commit is contained in:
somebody
2023-01-06 19:21:15 -06:00
parent c6797a59ce
commit 8e24d91f6d
4 changed files with 83 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
static/koboldai.css
View File

@@ -235,11 +235,6 @@ border-top-right-radius: var(--tabs_rounding);
margin: 2px;
}
#biasing {
margin-left: 5px;
margin-right: 5px;
}
.setting_container.var_sync_alt_system_alt_gen[system_alt_gen="true"] {
display: none;
}
@@ -664,40 +659,40 @@ border-top-right-radius: var(--tabs_rounding);
}
/* Bias */
#biases_label {
cursor: pointer;
#biasing {
padding: 0px 10px;
}
.bias {
display: grid;
grid-template-areas: "phrase percent max";
grid-template-columns: auto 100px 100px;
.bias_card {
background-color: var(--setting_background);
padding: 8px;
}
.bias_top {
display: flex;
justify-content: space-between;
}
.bias_top > .close_button {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin-left: 7px;
}
.bias_card input {
width: 100%;
border: none;
}
.bias_phrase {
grid-area: phrase;
margin-right: 5px;
height: 36px;
}
.bias_phrase input {
width: 100%;
}
.bias_score {
grid-area: percent;
margin-right: 5px;
}
.bias_comp_threshold {
grid-area: max;
margin-right: 5px;
}
.bias_slider {
display: grid;
grid-template-areas: "bar bar bar"
"min cur max";
grid-template-columns: 33px 34px 33px;
.bias_slider_labels {
display: flex;
justify-content: space-between;
}
.bias_slider_bar {

55
static/koboldai.js
View File

@@ -3633,42 +3633,49 @@ function options_on_right(data) {
}
}
function makeBiasCard(phrase, score, compThreshold) {
function updateLabel(input) {
input.closest(".bias_slider").querySelector(".bias_slider_cur").innerText = input.value;
}
const biasContainer = $el("#biasing");
const biasCard = $el(".bias_card.template").cloneNode(true);
biasCard.classList.remove("template");
const phraseInput = biasCard.querySelector(".bias_phrase");
const scoreInput = biasCard.querySelector(".bias_score input");
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);
biasContainer.appendChild(biasCard);
}
function do_biases(data) {
//console.log(data);
//clear out our old bias lines
let bias_list = Object.assign([], document.getElementsByClassName("bias"));
for (item of bias_list) {
//console.log(item);
for (item of document.getElementsByClassName("bias_card")) {
if (item.classList.contains("template")) continue;
item.parentNode.removeChild(item);
}
//add our bias lines
for (const [key, value] of Object.entries(data.value)) {
bias_line = document.getElementById("empty_bias").cloneNode(true);
bias_line.id = "";
bias_line.classList.add("bias");
bias_line.querySelector(".bias_phrase").querySelector("input").value = key;
bias_line.querySelector(".bias_score").querySelector("input").value = value[0];
update_bias_slider_value(bias_line.querySelector(".bias_score").querySelector("input"));
bias_line.querySelector(".bias_comp_threshold").querySelector("input").value = value[1];
update_bias_slider_value(bias_line.querySelector(".bias_comp_threshold").querySelector("input"));
document.getElementById('biasing').append(bias_line);
makeBiasCard(key, value[0], value[1]);
}
//add another bias line if this is the phrase and it's not blank
bias_line = document.getElementById("empty_bias").cloneNode(true);
bias_line.id = "";
bias_line.classList.add("bias");
bias_line.querySelector(".bias_phrase").querySelector("input").value = "";
bias_line.querySelector(".bias_phrase").querySelector("input").id = "empty_bias_phrase";
bias_line.querySelector(".bias_score").querySelector("input").value = 1;
bias_line.querySelector(".bias_comp_threshold").querySelector("input").value = 50;
document.getElementById('biasing').append(bias_line);
const templateBiasCard = makeBiasCard("", 1, 50);
// bias_line.querySelector(".bias_phrase").querySelector("input").id = "empty_bias_phrase";
}
function update_bias_slider_value(slider) {
slider.parentElement.parentElement.querySelector(".bias_slider_cur").textContent = slider.value;
}
function distortColor(rgb) {
// rgb are 0..255, NOT NORMALIZED!!!!!!

10
templates/settings flyout.html
View File

@@ -242,14 +242,8 @@
</div>
<div id="biasing" class="biasing" ui_level=1>
<div class="help_text">Influence the likelihood for the AI to output certain phrases.</div>
<div class="bias_header">
<div class="bias_header_phrase">Phrase</div>
<div class="bias_header_score">Score</div>
<div 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>
</div>
</div>
<!-- HACK: .hidden keeps being applied if this isn't here. ?????? -->
<div></div>
</div>
<!-- Story Review Bot -->

40
templates/templates.html
View File

@@ -112,29 +112,35 @@
</div>
</div>
<!---------------- Phrase Bias ---------------------->
<div id="empty_bias">
<div class="bias_phrase">
<input type=text placeholder="Word or Phrase to Bias" onchange="save_bias(this);"/>
<div class="bias_card template">
<div class="bias_top">
<input class="bias_phrase" placeholder="Word or Phrase to Bias" onchange="save_bias(this);"/>
<span class="close_button material-icons-outlined">close</span>
</div>
<div class="bias_score">
<div class="bias_slider">
<div class="bias_slider_bar">
<input type="range" min="-50" max="50" step="0.01" value="0" class="setting_item_input"
oninput="update_bias_slider_value(this);"
onchange="save_bias(this);"/>
</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>
</div>
<div class="bias_comp_threshold">
<div class="bias_slider">
<div class="bias_slider_bar">
<input type="range" min="0" max="10" step="1" value="10" class="setting_item_input"
oninput="update_bias_slider_value(this);"
onchange="save_bias(this);"/>
</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>