diff --git a/gensettings.py b/gensettings.py index 2462c13e..eb03cb03 100644 --- a/gensettings.py +++ b/gensettings.py @@ -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, @@ -834,4 +834,4 @@ formatcontrols = [{ "label": "Single Line", "id": "singleline", "tooltip": "Only allows the AI to output anything before the enter" - }] \ No newline at end of file + }] diff --git a/static/koboldai.css b/static/koboldai.css index df8e176d..8a5c9416 100644 --- a/static/koboldai.css +++ b/static/koboldai.css @@ -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; } @@ -1562,7 +1583,8 @@ input { resize: none; border-color: white; border-width: 1px; - border-style:solid; + 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 { @@ -1721,4 +1744,4 @@ h2 .material-icons-outlined { font-size: 0.9em; display: block; color: var(--setting_category_help_text_color); -} \ No newline at end of file +} diff --git a/static/koboldai.js b/static/koboldai.js index c28871de..52eef5b4 100644 --- a/static/koboldai.js +++ b/static/koboldai.js @@ -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; @@ -223,31 +222,12 @@ function do_story_text_updates(data) { //clear out the item first 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']; - item.append(span); - } + } + span = document.createElement("span"); + 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); - } + 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; - item.append(span); - } + span = document.createElement("span"); + 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,7 +2309,8 @@ function dragLeave(e) { function drop(e) { e.preventDefault(); - element = find_wi_container(e.target); + // get the drop element + element = find_wi_container(e.target); element.classList.remove('drag-over'); // get the draggable element @@ -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; - } + var words = action.textContent.split(" "); 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, ''+keyword+'') - //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, ''+keyword+'') - //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")); -}); \ No newline at end of file + + + // 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(); + } +}); diff --git a/templates/index_new.html b/templates/index_new.html index e1ef5b50..0afad93e 100644 --- a/templates/index_new.html +++ b/templates/index_new.html @@ -70,8 +70,9 @@