diff --git a/static/koboldai.css b/static/koboldai.css index 7e5784d0..cd484c40 100644 --- a/static/koboldai.css +++ b/static/koboldai.css @@ -1780,11 +1780,13 @@ body { cursor: pointer; } -.finder-result > .result-textblock > span { - display: block; -} +.result-selected { background-color: #273b48; } .result-title { + display: flex !important; + align-items: center; + white-space: pre; + font-weight: bold; font-size: 15px; } @@ -1792,6 +1794,17 @@ body { .result-details { margin-left: 15px; opacity: 0.7; + + /* Limit to 2 lines of text */ + + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.result-highlight { + background-color: rgb(112, 112, 31); } .result-icon { diff --git a/static/koboldai.js b/static/koboldai.js index 30554b7a..32b53ad5 100644 --- a/static/koboldai.js +++ b/static/koboldai.js @@ -37,7 +37,21 @@ var shift_down = false; var world_info_data = {}; var world_info_folder_data = {}; var saved_settings = {}; -var settings_data = {}; +var finder_selection_index = -1; + +// name, desc, icon, func +const finder_actions = [ + {name: "Load Model", icon: "folder_open", func: function() { socket.emit('load_model_button', {}); }}, + {name: "New Story", icon: "description", func: function() { socket.emit('new_story', ''); }}, + {name: "Load Story", icon: "folder_open", func: function() { socket.emit('load_story_list', ''); }}, + {name: "Save Story", icon: "save", func: function() { socket.emit("save_story", null, (response) => {save_as_story(response);}); }}, + {name: "Download Story", icon: "file_download", func: function() { document.getElementById('download_iframe').src = 'json'; }}, + + // Locations + {name: "Setting Presets", icon: "open_in_new", func: function() { highlightEl(".var_sync_model_selected_preset") }}, + {name: "Phrase Biases", icon: "open_in_new", func: function() { highlightEl("#biasing") }}, +]; + const map1 = new Map() map1.set('Top K Sampling', 0) map1.set('Top A Sampling', 1) @@ -57,6 +71,7 @@ map2.set(6, 'Repetition Penalty') var calc_token_usage_timeout; var game_text_scroll_timeout; var var_processing_time = 0; +var finder_last_input; //-----------------------------------Server to UI Functions----------------------------------------------- function connect() { console.log("connected"); @@ -3029,27 +3044,104 @@ async function processDroppedFile(file) { } } -// By p01 - https://gist.github.com/p01/1127070 -function levenshteinDistance(a, b){ - let c,d,e,f,g; - for(d=[e=0];a[e];e++) { - for(c=[f=0];b[++f];) { - g=d[f]= e ? 1+Math.min(d[--f], c[f]-(a[e-1]==b[f]), c[++f]=d[f]) : f; - } +function highlightEl(element) { + if (typeof element === "string") element = document.querySelector(element); + if (!element) { + console.error("Bad jump!") + return; } - return g; + + console.log("uhoh", element); +} + +function addSearchListing(action, highlight) { + const finder = document.getElementById("finder"); + + let result = document.createElement("div"); + result.classList.add("finder-result"); + + let textblock = document.createElement("div"); + textblock.classList.add("result-textbox"); + result.appendChild(textblock); + + let titleEl = document.createElement("span"); + titleEl.classList.add("result-title"); + titleEl.innerText = action.name; + + // TODO: Sanitation + titleEl.innerHTML = titleEl.innerHTML.replace( + new RegExp(`(${highlight})`, "i"), + '$1' + ); + textblock.appendChild(titleEl); + + if (action.desc) { + let descriptionEl = document.createElement("span"); + descriptionEl.classList.add("result-details"); + descriptionEl.innerText = action.desc; + descriptionEl.innerHTML = descriptionEl.innerHTML.replace( + new RegExp(`(${highlight})`, "i"), + '$1' + ); + + // It can get cut off by CSS, so let's add a tooltip. + descriptionEl.setAttribute("title", action.desc); + textblock.appendChild(descriptionEl); + } + + let icon = document.createElement("span"); + icon.classList.add("result-icon"); + icon.classList.add("material-icons-outlined"); + + // TODO: Change depending on what pressing enter does + icon.innerText = action.icon; + result.appendChild(icon) + + finder.appendChild(result); + + return result; } function updateSearchListings() { + const maxResultCount = 5; + + if (this.value === finder_last_input) return; + finder_last_input = this.value; + finder_selection_index = -1; + let query = this.value.toLowerCase(); + // TODO: Maybe reuse the element? Would it give better performance? + $(".finder-result").remove(); + if (!query) return; - for (const settingName of Object.keys(settings_data)) { - let compare = settingName.toLowerCase().slice(0, query.length); - let distance = levenshteinDistance(query, compare); - console.log(distance, settingName, query, compare); + const actionMatches = {name: [], desc: []}; + + for (const action of finder_actions) { + if (action.name.toLowerCase().includes(query)) { + actionMatches.name.push(action); + } else if (action.desc && action.desc.toLowerCase().includes(query)) { + actionMatches.desc.push(action); + } } + + // Title matches over desc matches + const matchingActions = actionMatches.name.concat(actionMatches.desc); + + + for (let i=0;i= actionsCount) { + future = 0; + } else if (future < 0) { + future = actionsCount - 1; + } + + finder_selection_index = future; + updateFinderSelection(delta); + }); }); document.addEventListener("keydown", function(event) { @@ -3177,8 +3304,11 @@ document.addEventListener("keydown", function(event) { switch (event.key) { // TODO: Add other shortcuts case "k": - let finderContainer = document.getElementById("finder-container"); + const finderContainer = document.getElementById("finder-container"); + const finderInput = document.getElementById("finder-input"); finderContainer.classList.remove("hidden"); + finderInput.focus(); + finder_selection_index = -1; event.preventDefault(); break; } diff --git a/templates/index_new.html b/templates/index_new.html index 68382680..a04ee9d1 100644 --- a/templates/index_new.html +++ b/templates/index_new.html @@ -147,37 +147,6 @@