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

Merge branch 'UI2' of https://github.com/ebolam/KoboldAI into ui2-context-viewer

Browse Source
This commit is contained in:
somebody
2022-08-27 14:49:25 -05:00
parent 5052b39c3f 8a2d14c7e2
commit 889c318a22
8 changed files with 209 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gensettings.py
View File

@@ -483,7 +483,7 @@ gensettingstf = [
"UI_V2_Only": True,
"uitype": "slider",
"unit": "int",
"label": "Insert Depth",
"label": "AN Depth",
"id": "singleline",
"min": 0,
"max": 5,

29
static/koboldai.css
View File

@@ -102,7 +102,7 @@ input[type="range"]::-ms-fill-upper {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #AAA;
text-shadow: 0 1px #AAA;
margin: 0 -5px;
padding: 0 17px;
padding: 0 15px;
}
.tabrow span.selected {
background: #FFF;
@@ -307,7 +307,7 @@ input[type="range"]::-ms-fill-upper {
.menu_pin {
position: absolute;
top:10px;
left: calc(var(--flyout_menu_width) - 25px);
left: calc(var(--flyout_menu_width) - 20px);
z-index:50;
width: 25px;
height: 25px;
@@ -656,6 +656,25 @@ input[type="range"]::-ms-fill-upper {
filter: brightness(85%);
}
/* Tweaks */
.tweak-container {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--setting_text);
background-color: var(--setting_background);
border-radius: var(--radius_settings_background);
padding: 10px 8px;
margin-bottom: 5px;
width: 100%;
}
#Tweaks {
/* Don't add space under last tweak-container. Also, CSS, why no last-of-class!?!? */
margin-bottom: 0px;
}
/*----------------RIGHT FLYOUT MENU------------------*/
.right_menu_icon {
position: fixed;
@@ -728,7 +747,7 @@ input[type="range"]::-ms-fill-upper {
.story_menu_pin {
position: absolute;
top:10px;
right: calc(var(--flyout_menu_width) - 25px);
right: calc(var(--flyout_menu_width) - 29px);
z-index:50;
width: 25px;
height: 25px;
@@ -1147,6 +1166,8 @@ body {
}
#random_game_prompt{
display: flex;
flex-direction: column;
grid-area: textarea;
}
@@ -1563,6 +1584,7 @@ input {
border-color: white;
border-width: 1px;
border-style: solid;
outline: none;
}
.action_button {
@@ -1614,6 +1636,7 @@ button.disabled {
textarea {
background-color: var(--input_background);
color: var(--text);
outline: none;
}
.pulse {

230
static/koboldai.js
View File

@@ -50,7 +50,6 @@ map2.set(2, 'Top P Sampling')
map2.set(3, 'Tail Free Sampling')
map2.set(4, 'Typical Sampling')
map2.set(5, 'Temperature')
var use_word_highlighting = false;
var calc_token_usage_timeout;
var game_text_scroll_timeout;
var var_processing_time = 0;
@@ -224,30 +223,11 @@ function do_story_text_updates(data) {
while (item.firstChild) {
item.removeChild(item.firstChild);
}
if (use_word_highlighting) {
if (data.value.action['Selected Text'] == null) {
var text_array = [];
} else {
var text_array = data.value.action['Selected Text'].split(" ");
}
text_array.forEach(function (text, i) {
if (text != "") {
var word = document.createElement("span");
word.classList.add("rawtext");
if (i == text_array.length) {
word.textContent = text;
} else {
word.textContent = text+" ";
}
item.append(word);
}
});
} else {
span = document.createElement("span");
span.textContent = data.value.action['Selected Text'];
span2 = document.createElement("span");
span2.textContent = data.value.action['Selected Text'];
span.append(span2);
item.append(span);
}
item.original_text = data.value.action['Selected Text'];
item.setAttribute("world_info_uids", "");
item.classList.remove("pulse")
@@ -268,27 +248,9 @@ function do_story_text_updates(data) {
}
}
span.onkeydown = detect_enter_text;
if (use_word_highlighting) {
var text_array = data.value.action['Selected Text'].split(" ");
text_array.forEach(function (text, i) {
if (text != "") {
var word = document.createElement("span");
word.classList.add("rawtext");
word.classList.add("world_info_tag");
if (i == text_array.length) {
word.textContent = text;
} else {
word.textContent = text+" ";
}
span.append(word);
}
});
} else {
new_span = document.createElement("span");
new_span.textContent = data.value.action['Selected Text'];
span.append(new_span);
}
story_area.append(span);
@@ -306,25 +268,11 @@ function do_prompt(data) {
item.removeChild(item.firstChild);
}
if (use_word_highlighting) {
var text_array = data.value.split(" ");
text_array.forEach(function (text, i) {
if (text != "") {
var word = document.createElement("span");
word.classList.add("rawtext");
if (i == text_array.length) {
word.textContent = text;
} else {
word.textContent = text+" ";
}
item.append(word);
}
});
} else {
span = document.createElement("span");
span.textContent = data.value;
span2 = document.createElement("span");
span2.textContent = data.value;
span.append(span2);
item.append(span);
}
item.setAttribute("old_text", data.value)
item.classList.remove("pulse");
}
@@ -400,7 +348,7 @@ function do_presets(data) {
//add our blank option
var option = document.createElement("option");
option.value="";
option.text="presets";
option.text="Presets";
select.append(option);
presets = data.value;
@@ -1264,6 +1212,7 @@ function world_info_entry(data) {
}
}
world_info_card.addEventListener('dragstart', dragStart);
world_info_card.addEventListener('dragend', dragend);
title.addEventListener('dragenter', dragEnter)
title.addEventListener('dragover', dragOver);
title.addEventListener('dragleave', dragLeave);
@@ -1274,7 +1223,7 @@ function world_info_entry(data) {
delete_icon.setAttribute("title", data.title);
delete_icon.onclick = function () {
if (confirm("This will delete world info "+this.getAttribute("title"))) {
if (this.getAttribute("uid") == "-1") {
if (parseInt(this.getAttribute("uid")) < 0) {
this.parentElement.parentElement.remove();
} else {
socket.emit("delete_world_info", this.getAttribute("uid"));
@@ -2360,6 +2309,7 @@ function dragLeave(e) {
function drop(e) {
e.preventDefault();
// get the drop element
element = find_wi_container(e.target);
element.classList.remove('drag-over');
@@ -2370,8 +2320,6 @@ function drop(e) {
dragged_id = draggable.id.split("_").slice(-1)[0];
drop_id = element.id.split("_").slice(-1)[0];
// get the drop element
element = find_wi_container(e.target);
//check if we're droping on a folder, and then append it to the folder
if (element.children[0].tagName == "H2") {
@@ -2394,11 +2342,22 @@ function drop(e) {
}
function dragend(e) {
element = find_wi_container(e.target);
element.classList.remove('hidden');
// get the draggable element
const id = e.dataTransfer.getData('text/plain');
const draggable = document.getElementById(id);
// display the draggable element
draggable.classList.remove('hidden');
e.preventDefault();
}
function checkifancestorhasclass(element, classname) {
if (element.classList.contains(classname)) {
return true;
} else {
return hasSomeParentTheClass(element.parentNode, classname);
}
}
function assign_world_info_to_action(action_item, uid) {
if (Object.keys(world_info_data).length > 0) {
if (uid != null) {
@@ -2415,16 +2374,7 @@ function assign_world_info_to_action(action_item, uid) {
for (action of actions) {
//First check to see if we have a key in the text
if (use_word_highlighting) {
var words = Array.prototype.slice.call( action.children );
words_text = [];
for (word of words) {
words_text.push(word.textContent);
}
} else {
var words = action.textContent.split(" ");
var words_text = words;
}
for (const [key, worldinfo] of Object.entries(worldinfo_to_check)) {
//remove any world info tags
for (tag of action.getElementsByClassName("tag_uid_"+uid)) {
@@ -2449,12 +2399,46 @@ function assign_world_info_to_action(action_item, uid) {
//OK we have the phrase in our action. Let's see if we can identify the word(s) that are triggering
for (var i = 0; i < words.length; i++) {
key_words = keyword.split(" ").length;
var to_check = words_text.slice(i, i+key_words).join("").replace(/[^0-9a-z \'\"]/gi, '').trim();
var to_check = words.slice(i, i+key_words).join("").replace(/[^0-9a-z \'\"]/gi, '').trim();
if (keyword == to_check) {
for (var j = i; j < key_words+i; j++) {
action.innerHTML = action.innerHTML.replaceAll(keyword, '<i title="'+worldinfo['content']+'">'+keyword+'</i>')
//words[j].title = worldinfo['content'];
//words[j].classList.add("tag_uid_"+uid);
var start_word = i;
var end_word = i+len_of_keyword;
var passed_words = 0;
for (span of action.childNodes) {
if (passed_words + span.textContent.split(" ").length < start_word) {
passed_words += span.textContent.trim().split(" ").length;
} else if (passed_words < end_word) {
//OK, we have text that matches, let's do the highlighting
//we can skip the highlighting if it's already done though
if (span.tagName != "I") {
var span_text = span.textContent.trim().split(" ");
var before_highlight_text = span_text.slice(0, start_word-passed_words).join(" ")+" ";
var highlight_text = span_text.slice(start_word-passed_words, end_word-passed_words).join(" ");
if (end_word-passed_words <= span_text.length) {
highlight_text += " ";
}
var after_highlight_text = span_text.slice((end_word-passed_words)).join(" ")+" ";
//console.log(span.textContent);
//console.log(keyword);
//console.log(before_highlight_text);
//console.log(highlight_text);
//console.log(after_highlight_text);
//console.log("passed: "+passed_words+" start:" + start_word + " end: "+end_word+" continue: "+(end_word-passed_words));
//console.log(null);
var before_span = document.createElement("span");
before_span.textContent = before_highlight_text;
var hightlight_span = document.createElement("i");
hightlight_span.textContent = highlight_text;
hightlight_span.title = worldinfo['content'];
var after_span = document.createElement("span");
after_span.textContent = after_highlight_text;
action.insertBefore(before_span, span);
action.insertBefore(hightlight_span, span);
action.insertBefore(after_span, span);
span.remove();
}
passed_words += span.textContent.trim().split(" ").length;
}
}
}
}
@@ -2468,14 +2452,50 @@ function assign_world_info_to_action(action_item, uid) {
}
action.setAttribute("world_info_uids", current_ids.join(","));
//OK we have the phrase in our action. Let's see if we can identify the word(s) that are triggering
var len_of_keyword = keyword.split(" ").length;
//go through each word to see where we get a match
for (var i = 0; i < words.length; i++) {
key_words = keyword.split(" ").length;
var to_check = words_text.slice(i, i+key_words).join("").replace(/[^0-9a-z \'\"]/gi, '').trim();
//get the words from the ith word to the i+len_of_keyword. Get rid of non-letters/numbers/'/"
var to_check = words.slice(i, i+len_of_keyword).join(" ").replace(/[^0-9a-z \'\"]/gi, '').trim();
if (keyword == to_check) {
for (var j = i; j < key_words+i; j++) {
action.innerHTML = action.innerHTML.replaceAll(keyword, '<i title="'+worldinfo['content']+'">'+keyword+'</i>')
//words[j].title = worldinfo.content;
//words[j].classList.add("tag_uid_"+uid);
var start_word = i;
var end_word = i+len_of_keyword;
var passed_words = 0;
for (span of action.childNodes) {
if (passed_words + span.textContent.split(" ").length < start_word) {
passed_words += span.textContent.trim().split(" ").length;
} else if (passed_words < end_word) {
//OK, we have text that matches, let's do the highlighting
//we can skip the highlighting if it's already done though
if (span.tagName != "I") {
var span_text = span.textContent.trim().split(" ");
var before_highlight_text = span_text.slice(0, start_word-passed_words).join(" ")+" ";
var highlight_text = span_text.slice(start_word-passed_words, end_word-passed_words).join(" ");
if (end_word-passed_words <= span_text.length) {
highlight_text += " ";
}
var after_highlight_text = span_text.slice((end_word-passed_words)).join(" ")+" ";
//console.log(span.textContent);
//console.log(keyword);
//console.log(before_highlight_text);
//console.log(highlight_text);
//console.log(after_highlight_text);
//console.log("passed: "+passed_words+" start:" + start_word + " end: "+end_word+" continue: "+(end_word-passed_words));
//console.log(null);
var before_span = document.createElement("span");
before_span.textContent = before_highlight_text;
var hightlight_span = document.createElement("i");
hightlight_span.textContent = highlight_text;
hightlight_span.title = worldinfo['content'];
var after_span = document.createElement("span");
after_span.textContent = after_highlight_text;
action.insertBefore(before_span, span);
action.insertBefore(hightlight_span, span);
action.insertBefore(after_span, span);
span.remove();
}
passed_words += span.textContent.trim().split(" ").length;
}
}
}
}
@@ -2812,4 +2832,46 @@ $(document).ready(function(){
}
preserve_game_space(!(getCookie("preserve_game_space") == "false"));
options_on_right(!(getCookie("options_on_right") == "false"));
// Tweak registering
let enabledTweaks = JSON.parse(getCookie("enabledTweaks", "[]"));
function saveTweaks() {
let out = [];
// TODO: Better saving
for (const tweakContainer of document.getElementsByClassName("tweak-container")) {
let toggle = tweakContainer.querySelector("input");
let path = tweakContainer.getAttribute("tweak-path");
if (toggle.checked) out.push(path);
}
setCookie("enabledTweaks", JSON.stringify(out));
}
for (const tweakContainer of document.getElementsByClassName("tweak-container")) {
let toggle = tweakContainer.querySelector("input");
let path = tweakContainer.getAttribute("tweak-path");
$(toggle).change(function(e) {
let path = $(this).closest(".tweak-container")[0].getAttribute("tweak-path");
let id = `tweak-${path}`;
if (this.checked) {
let style = document.createElement("link");
style.rel = "stylesheet";
style.href = `/themes/tweaks/${path}.css`;
style.id = id;
document.head.appendChild(style);
} else {
document.getElementById(id).remove();
}
saveTweaks();
});
if (enabledTweaks.includes(path)) toggle.click();
}
});

3
templates/index_new.html
View File

@@ -70,8 +70,9 @@
<!------------ Input Area--------------------->
<div class="inputrow" id="inputrow_container">
<div id="random_game_prompt" class="hidden">
<input type="text" autocomplete="off" style="width: 100%;" id="themetext" placeholder="Theme for Random Story" oninput='if (this.value != "") {
<input type="text" autocomplete="off" id="themetext" placeholder="Theme for Random Story" oninput='if (this.value != "") {
document.getElementById("input_text").value = "";'/>
<span class="help_text" style="margin:0px;margin-top:5px;">The AI can create a prompt for you! Optionally type in one or more themes above, or let the AI do it's thing.</span>
</div>
<textarea autocomplete="off" row=5 id="input_text" placeholder="Enter Prompt Here" oninput='if (this.value != "") {
document.getElementById("themetext").value = "";

12
templates/settings flyout.html
View File

@@ -296,8 +296,18 @@
<span>Advanced Theme</h4>
</div>
</div>
<div class="collapsable_header" onclick="toggle_setting_category(this);">
<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Tweaks</h4>
</div>
<div class="setting_tile_area" id="Tweaks">
<span class="help_text">Small UI changes that can be mixed and matched.</span>
<div class="tweak-container" tweak-path="hide-timing">
<span>Hide timing information</span>
<input type=checkbox class="setting_item_input" data-size="mini" data-onstyle="success" data-toggle="toggle">
</div>
</div>
</div>
<span class=>
<span class="material-icons-outlined cursor show_footer_icon" onclick='if (document.getElementById("settings_footer").classList.contains("hidden")){
document.getElementById("settings_footer").classList.remove("hidden");
} else {

4
themes/Darkness.css
View File

@@ -98,11 +98,11 @@
--wi_card_tag_bg_color: #242424;
--wi_card_tag_text_color: #e0e0e0;
--wi_tag_color: #004397;
--wi_tag_color: #1d434a;
--wi_tag_text_color: #e0e0e0;
/*Popup*/
--popup_background_color: #151717;
--popup_background_color: #121414;
--popup_title_bar_color: #1a625f;
--popup_title_bar_color_text: #e0e0e0;

4
themes/Monochrome.css
View File

@@ -98,11 +98,11 @@
--wi_card_tag_bg_color: #273141;
--wi_card_tag_text_color: #e0e0e0;
--wi_tag_color: #004397;
--wi_tag_color: #244c65;
--wi_tag_text_color: #e0e0e0;
/*Popup*/
--popup_background_color: #18222a;
--popup_background_color: #141c23;
--popup_title_bar_color: #2b5471;
--popup_title_bar_color_text: #e0e0e0;

2
themes/tweaks/hide-timing.css Normal file
View File

@@ -0,0 +1,2 @@
.show_footer_icon { display: none; }
#settings_footer { display: none; }