From b5d9c76c3399a074ad59a5bee6dafb37ab75c475 Mon Sep 17 00:00:00 2001 From: ebolam Date: Wed, 24 Aug 2022 13:18:04 -0400 Subject: [PATCH] Moved execution time and remaining time to bottom of settings tab Added token usage bar in story flyout --- koboldai_settings.py | 2 +- static/koboldai.css | 32 ++++++++++++++++-- static/koboldai.js | 59 ++++++++++++++++++++++++++++++++++ templates/index_new.html | 4 ++- templates/settings flyout.html | 5 +++ templates/story flyout.html | 14 +++++--- 6 files changed, 108 insertions(+), 8 deletions(-) diff --git a/koboldai_settings.py b/koboldai_settings.py index be4daf82..c44abc6f 100644 --- a/koboldai_settings.py +++ b/koboldai_settings.py @@ -204,7 +204,7 @@ class koboldai_vars(object): match=True break if match: - if used_tokens+wi['token_length'] <= token_budget: + if used_tokens+0 if 'token_length' not in wi else wi['token_length'] <= token_budget: used_tokens+=wi['token_length'] used_world_info.append(wi['uid']) game_text = "{}{}".format(wi['content'], game_text) diff --git a/static/koboldai.css b/static/koboldai.css index 47a766dc..f9677fe3 100644 --- a/static/koboldai.css +++ b/static/koboldai.css @@ -614,7 +614,6 @@ input[type="range"]::-ms-fill-upper { overflow-y: hidden; transition: 0.5s; padding-top: 20px; - padding-bottom: 10px; border-radius: var(--radius_unpinned_menu) 0px 0px var(--radius_unpinned_menu); } @@ -636,7 +635,7 @@ input[type="range"]::-ms-fill-upper { .rightSideMenu .flyout_menu_contents { overflow-x: hidden; overflow-y: auto; - height: calc(100vh - 150px); + height: calc(100vh - 70px); } @@ -651,10 +650,20 @@ input[type="range"]::-ms-fill-upper { } } +@media only screen and (min-aspect-ratio: 7/5) { .story_menu_pin { + position: absolute; + top:10px; + right: calc(var(--flyout_menu_width) - 25px); + z-index:50; + width: 25px; + height: 25px; color: #999; + display: inline-block; + transition: left 0.5s; cursor: pointer; } +} table.server_vars { @@ -682,6 +691,22 @@ td.server_vars { margin: 10px 10px 0 10px; } +.token_breakdown { + height: 5px; + overflow: hidden; + display: block; + width: 100%; + padding-left: 20px; + padding-right: 35px; + margin-bottom: 10px; +} + +.token_breakdown div { + float: left; + height: 100%; + text-align: center; +} + #world_info_folder_root.WI_Folder { margin-left: 10px; } @@ -1546,6 +1571,9 @@ h2 .material-icons-outlined { .flyout_menu_contents { scrollbar-width: thin; + display: flex; + flex-direction: column; + justify-content: space-between; } .collapsable_header { diff --git a/static/koboldai.js b/static/koboldai.js index 88d73f7a..1cc3ffdf 100644 --- a/static/koboldai.js +++ b/static/koboldai.js @@ -1,6 +1,7 @@ var socket; socket = io.connect(window.location.origin, {transports: ['polling', 'websocket'], closeOnBeforeunload: false, query:{"ui": "2"}}); + //Let's register our server communications socket.on('connect', function(){connect();}); socket.on("disconnect", (reason, details) => { @@ -585,6 +586,7 @@ function var_changed(data) { update_token_lengths(); + } function load_popup(data) { @@ -1220,6 +1222,11 @@ function world_info_entry(data) { world_info_card = world_info_card_template.cloneNode(true); world_info_card.id = "world_info_"+data.uid; world_info_card.setAttribute("uid", data.uid); + if (data.used_in_game) { + world_info_card.classList.add("used_in_game"); + } else { + world_info_card.classList.remove("used_in_game"); + } title = world_info_card.querySelector('#world_info_title_') title.id = "world_info_title_"+data.uid; title.textContent = data.title; @@ -1460,6 +1467,8 @@ function world_info_entry(data) { assign_world_info_to_action(null, data.uid); update_token_lengths(); + + calc_token_usage(); return world_info_card; } @@ -1780,6 +1789,55 @@ function send_world_info(uid) { } //--------------------------------------------General UI Functions------------------------------------ +function token_length(text) { + return encode(text).length; +} + +function calc_token_usage() { + memory_tokens = parseInt(document.getElementById("memory").getAttribute("story_memory_length")); + authors_notes_tokens = parseInt(document.getElementById("authors_notes").getAttribute("story_authornote_length")); + prompt_tokens = parseInt(document.getElementById("story_prompt").getAttribute("story_prompt_length")); + game_text_tokens = 0; + submit_tokens = token_length(document.getElementById("input_text").value); + total_tokens = parseInt(document.getElementById('model_max_length_cur').value); + + //find world info entries set to go to AI + world_info_tokens = 0; + for (wi of document.querySelectorAll(".world_info_card.used_in_game")) { + if (wi.getAttribute("uid") in world_info_data) { + world_info_tokens += world_info_data[wi.getAttribute("uid")].token_length; + } + } + + //find game text tokens + var game_text_tokens = 0; + var game_text = document.getElementById('Selected Text').querySelectorAll(".within_max_length"); + var game_text = Array.prototype.slice.call(game_text).reverse(); + for (item of game_text) { + if (total_tokens - memory_tokens - authors_notes_tokens - world_info_tokens - prompt_tokens - game_text_tokens - submit_tokens > parseInt(item.getAttribute("token_length"))) { + game_text_tokens += parseInt(item.getAttribute("token_length")); + } + } + + + unused_tokens = total_tokens - memory_tokens - authors_notes_tokens - world_info_tokens - prompt_tokens - game_text_tokens - submit_tokens; + + document.getElementById("memory_tokens").style.width = (memory_tokens/total_tokens)*100 + "%"; + document.getElementById("memory_tokens").title = "Memory: "+memory_tokens; + document.getElementById("authors_notes_tokens").style.width = (authors_notes_tokens/total_tokens)*100 + "%"; + document.getElementById("authors_notes_tokens").title = "Author's Notes: "+authors_notes_tokens + document.getElementById("world_info_tokens").style.width = (world_info_tokens/total_tokens)*100 + "%"; + document.getElementById("world_info_tokens").title = "World Info: "+world_info_tokens + document.getElementById("prompt_tokens").style.width = (prompt_tokens/total_tokens)*100 + "%"; + document.getElementById("prompt_tokens").title = "Prompt: "+prompt_tokens + document.getElementById("game_text_tokens").style.width = (game_text_tokens/total_tokens)*100 + "%"; + document.getElementById("game_text_tokens").title = "Game Text: "+game_text_tokens + document.getElementById("submit_tokens").style.width = (submit_tokens/total_tokens)*100 + "%"; + document.getElementById("submit_tokens").title = "Submit Text: "+submit_tokens + document.getElementById("unused_tokens").style.width = (unused_tokens/total_tokens)*100 + "%"; + document.getElementById("unused_tokens").title = "Remaining: "+unused_tokens +} + function Change_Theme(theme) { console.log(theme); var css = document.getElementById("CSSTheme"); @@ -2392,6 +2450,7 @@ function assign_world_info_to_action(action_item, uid) { } function update_token_lengths() { + calc_token_usage(); return max_token_length = parseInt(document.getElementById("model_max_length_cur").value); included_world_info = []; diff --git a/templates/index_new.html b/templates/index_new.html index 519c82a6..e1ef5b50 100644 --- a/templates/index_new.html +++ b/templates/index_new.html @@ -1,6 +1,7 @@ + @@ -74,7 +75,8 @@ + }' + onkeyup="calc_token_usage()">
diff --git a/templates/settings flyout.html b/templates/settings flyout.html index f6271ff1..7ed636d7 100644 --- a/templates/settings flyout.html +++ b/templates/settings flyout.html @@ -69,6 +69,7 @@ cloud_download file_download +
@@ -297,4 +298,8 @@ + \ No newline at end of file diff --git a/templates/story flyout.html b/templates/story flyout.html index c50e40ba..498fe75d 100644 --- a/templates/story flyout.html +++ b/templates/story flyout.html @@ -16,10 +16,16 @@ } } -
Execution Time:
-
Remaining Time:
-
-
+ +
+
+
+
+
+
+
+
+
Memory Author's Note