Moved execution time and remaining time to bottom of settings tab

Added token usage bar in story flyout

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)

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 {

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 = [];

templates/index_new.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+	<script type="module">import {encode, decode} from "./static/tokenizer.js";window.encode = encode;window.decode = decode;</script>
 	<link href="static/open-iconic/css/open-iconic.css" rel="stylesheet">
 	<link rel="stylesheet" href="static/bootstrap-toggle.min.css">
 	<link rel="stylesheet" href="static/bootstrap.min.css">
@@ -74,7 +75,8 @@
 			</div>
 			<textarea autocomplete="off" row=5 id="input_text" placeholder="Enter Prompt Here" oninput='if (this.value != "") {
 																											document.getElementById("themetext").value = "";
-																										}'></textarea>
+																										}'
+																										onkeyup="calc_token_usage()"></textarea>
 			<div class="statusbar_outer hidden" id="status_bar" onclick="socket.emit('abort','');">
 				<div class="statusbar_inner" style="width:0%">0%</div>
 			</div><br>

templates/settings flyout.html

@@ -69,6 +69,7 @@
 					<span class="material-icons-outlined cursor" title="Import Story" onclick="document.getElementById('import_aidg_club_popup').classList.remove('hidden');">cloud_download</span>
 					<span class="material-icons-outlined cursor" title="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
 				</div>
+				<input id=testtoken type=text onchange="this.value = token_length(this.value)"/>
 			</div>
 			<hr/>
 		</div>
@@ -297,4 +298,8 @@
 			</div>
 		</div>
 	</div>
+	<div id="footer">
+		<span>Execution Time: <span id="Execution Time"></span></span> | 
+		<span>Remaining Time: <span class="var_sync_model_tqdm_rem_time"></span></span>
+	</div>
 </div>

templates/story flyout.html

@@ -16,10 +16,16 @@
 		}
 	}
 </script>
-<div>Execution Time: <span id="Execution Time"></span></div>
-<div>Remaining Time: <span class="var_sync_model_tqdm_rem_time"></span></div>
-<div class="used_token_length"></div>
-<hr/>
+
+<div class="token_breakdown">
+	<div id="memory_tokens" style="width:40%; background-color: #3572A5;"></div>
+	<div id="authors_notes_tokens" style="width:10%; background-color: #f1e05a;"></div>
+	<div id="world_info_tokens" style="width:20%; background-color: #563d7c;"></div>
+	<div id="prompt_tokens" style="width:40%; background-color: #e34c26;"></div>
+	<div id="game_text_tokens" style="width:10%; background-color: #c6538c ;"></div>
+	<div id="submit_tokens" style="width:20%; background-color: #ededed ;"></div>
+	<div id="unused_tokens" style="width:20%; background-color: white;"></div>
+</div>
 <div class="tabrow nomenu_icon">
 	<span class="story_menu_button selected" onclick="show_story_menu(this, 'story_menu_memory');">Memory</span>
 	<span class="story_menu_button" onclick="show_story_menu(this, 'story_menu_author');">Author's Note</span>