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/GuiAworld/KoboldAI into UI2

Browse Source
This commit is contained in:
GuiAworld
2022-08-10 18:42:22 -03:00
parent 779077d8cd 6e661232e3
commit e5700523ac
7 changed files with 145 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
aiserver.py
View File

@@ -6495,6 +6495,13 @@ def UI_2_load_story(file):
print("loading {}".format(file)) print("loading {}".format(file))
loadRequest(file) loadRequest(file)
#==================================================================#
# Event triggered on load story
#==================================================================#
@socketio.on('new_story')
def UI_2_new_story(data):
koboldai_vars.create_story("")
#==================================================================# #==================================================================#
# Event triggered when user moves world info # Event triggered when user moves world info

4
koboldai_settings.py
View File

@@ -38,7 +38,7 @@ def process_variable_changes(socketio, classname, name, value, old_value, debug_
if threading.get_ident() in rely_clients: if threading.get_ident() in rely_clients:
sio = rely_clients[threading.get_ident()] sio = rely_clients[threading.get_ident()]
else: else:
sio = socketio_client.Client() sio = socketio_client.Client(logger=True, engineio_logger=True)
@sio.event @sio.event
def connect(): def connect():
pass pass
@@ -316,7 +316,7 @@ class story_settings(settings):
def __init__(self, socketio, tokenizer=None): def __init__(self, socketio, tokenizer=None):
self.socketio = socketio self.socketio = socketio
self.tokenizer = tokenizer self.tokenizer = tokenizer
self.story_name = "" # Title of the story self.story_name = "New Game" # Title of the story
self.lastact = "" # The last action received from the user self.lastact = "" # The last action received from the user
self.submission = "" # Same as above, but after applying input formatting self.submission = "" # Same as above, but after applying input formatting
self.lastctx = "" # The last context submitted to the generator self.lastctx = "" # The last context submitted to the generator

13
static/koboldai.css
View File

@@ -79,6 +79,10 @@
--wi_card_bg_color: #262626; --wi_card_bg_color: #262626;
--wi_card_tag_bg_color: #404040; --wi_card_tag_bg_color: #404040;
--wi_tag_color: #337ab7; --wi_tag_color: #337ab7;
--story_options_size: 30%;
--story_pinned_areas: "menuicon options gamescreen lefticon"
"menuicon inputrow inputrow lefticon";
--story_pinned_area_widths: 30px var(--story_options_size) auto 30px;
} }
/*----------------Folder Tabs--------------------*/ /*----------------Folder Tabs--------------------*/
@@ -694,7 +698,7 @@ body {
margin-right: var(--flyout_menu_closed_width); margin-right: var(--flyout_menu_closed_width);
grid-template-areas: "menuicon gamescreen options lefticon" grid-template-areas: "menuicon gamescreen options lefticon"
"menuicon inputrow inputrow lefticon"; "menuicon inputrow inputrow lefticon";
grid-template-columns: 30px auto 30% 30px; grid-template-columns: 30px auto var(--story_options_size) 30px;
grid-template-rows: auto 100px; grid-template-rows: auto 100px;
} }
.main-grid.settings_pinned { .main-grid.settings_pinned {
@@ -704,16 +708,15 @@ body {
.main-grid.story_pinned { .main-grid.story_pinned {
margin-left: var(--flyout_menu_closed_width); margin-left: var(--flyout_menu_closed_width);
margin-right: var(--flyout_menu_width); margin-right: var(--flyout_menu_width);
grid-template-areas: "menuicon options gamescreen lefticon" grid-template-areas: var(--story_pinned_areas);
"menuicon inputrow inputrow lefticon"; grid-template-columns: var(--story_pinned_area_widths);
grid-template-columns: 30px 30% auto 30px;
} }
.main-grid.settings_pinned.story_pinned { .main-grid.settings_pinned.story_pinned {
margin-left: var(--flyout_menu_width); margin-left: var(--flyout_menu_width);
margin-right: var(--flyout_menu_width); margin-right: var(--flyout_menu_width);
grid-template-areas: "menuicon gamescreen options lefticon" grid-template-areas: "menuicon gamescreen options lefticon"
"menuicon inputrow inputrow lefticon"; "menuicon inputrow inputrow lefticon";
grid-template-columns: 30px auto 30% 30px; grid-template-columns: 30px auto var(--story_options_size) 30px;
} }
} }

52
static/koboldai.js
View File

@@ -401,6 +401,19 @@ function var_changed(data) {
} }
} }
//if we changed the gen amount, make sure our option area is set/not set
if ((data.classname == 'model') && (data.name == 'numseqs')) {
if (data.value == 1) {
//allow our options to collapse to 0%, but no more than 30% (in case there is a redo or the like)
var r = document.querySelector(':root');
r.style.setProperty('--story_options_size', 'fit-content(30%)');
} else {
//static 30%
var r = document.querySelector(':root');
r.style.setProperty('--story_options_size', '30%');
}
}
//if we're updating generated tokens, let's show that in our status bar //if we're updating generated tokens, let's show that in our status bar
if ((data.classname == 'model') && (data.name == 'tqdm_progress')) { if ((data.classname == 'model') && (data.name == 'tqdm_progress')) {
update_status_bar(data); update_status_bar(data);
@@ -1255,6 +1268,18 @@ function show_error_message(data) {
error_message_box.querySelector("#popup_list_area").textContent = data; error_message_box.querySelector("#popup_list_area").textContent = data;
} }
//--------------------------------------------UI to Server Functions---------------------------------- //--------------------------------------------UI to Server Functions----------------------------------
function new_story() {
//check if the story is saved
if (document.getElementById('save_story').getAttribute('story_gamesaved') == "false") {
//ask the user if they want to continue
if (window.confirm("You asked for a new story but your current story has not been saved. If you continue you will loose your changes.")) {
socket.emit('new_story', '');
}
} else {
socket.emit('new_story', '');
}
}
function save_as_story(response) { function save_as_story(response) {
if (response == "overwrite?") { if (response == "overwrite?") {
document.getElementById('save-confirm').classList.remove('hidden') document.getElementById('save-confirm').classList.remove('hidden')
@@ -1346,10 +1371,34 @@ function preserve_game_space(preserve) {
if (preserve) { if (preserve) {
setCookie("preserve_game_space", "true"); setCookie("preserve_game_space", "true");
r.style.setProperty('--setting_menu_closed_width_no_pins_width', '0px'); r.style.setProperty('--setting_menu_closed_width_no_pins_width', '0px');
if (!(document.getElementById('preserve_game_space_setting').checked)) {
//not sure why the bootstrap-toggle won't respect a standard item.checked = true/false, so....
document.getElementById('preserve_game_space_setting').parentNode.click();
}
document.getElementById('preserve_game_space_setting').checked = true; document.getElementById('preserve_game_space_setting').checked = true;
} else { } else {
setCookie("preserve_game_space", "false"); setCookie("preserve_game_space", "false");
r.style.setProperty('--setting_menu_closed_width_no_pins_width', '400px'); r.style.setProperty('--setting_menu_closed_width_no_pins_width', '450px');
if (document.getElementById('preserve_game_space_setting').checked) {
//not sure why the bootstrap-toggle won't respect a standard item.checked = true/false, so....
document.getElementById('preserve_game_space_setting').parentNode.click();
}
document.getElementById('preserve_game_space_setting').checked = false;
}
}
function options_on_right(data) {
var r = document.querySelector(':root');
console.log("Setting cookie to: "+data);
if (data) {
setCookie("options_on_right", "true");
r.style.setProperty('--story_pinned_areas', '"menuicon gamescreen options lefticon"\n"menuicon inputrow inputrow lefticon"');
r.style.setProperty('--story_pinned_area_widths', '30px auto var(--story_options_size) 30px');
document.getElementById('preserve_game_space_setting').checked = true;
} else {
setCookie("options_on_right", "false");
r.style.setProperty('--story_pinned_areas', '"menuicon options gamescreen lefticon"\n"menuicon inputrow inputrow lefticon"');
r.style.setProperty('--story_pinned_area_widths', '30px var(--story_options_size) auto 30px');
document.getElementById('preserve_game_space_setting').checked = false; document.getElementById('preserve_game_space_setting').checked = false;
} }
} }
@@ -2071,4 +2120,5 @@ $(document).ready(function(){
} }
console.log("cookie: "+getCookie("preserve_game_space")); console.log("cookie: "+getCookie("preserve_game_space"));
preserve_game_space((getCookie("preserve_game_space") == "true")); preserve_game_space((getCookie("preserve_game_space") == "true"));
options_on_right((getCookie("options_on_right") == "true"));
}); });

59
templates/index_new.html
View File

@@ -77,64 +77,7 @@
<!------------- Templates -------------------------------> <!------------- Templates ------------------------------->
<div class="hidden"> <div class="hidden">
<div draggable="true" class="world_info_card" id="world_info_"> {% include 'templates.html' %}
<div class="world_info_title_area">
<h4 id="world_info_title_" class="world_info_title"></h4>
<span id="world_info_delete_" class="world_info_delete">X</span>
</div>
<div class="world_info_tag_area" id="world_info_toggle_area_">
Always Include
</div>
<div id="world_info_tags_" class="world_info_tag_area">
<div>Requires one of:</div>
</div>
<div id="world_info_secondtags_" class="world_info_tag_area">
<div>And (if present):</div>
</div>
<div>
Text:
<textarea id="world_info_entry_text_" class="world_info_text fullwidth"></textarea>
</div>
<div id="world_info_entry_w++_" class="hidden">
<input type=text placeholder="Type"/><input type=text placeholder="Name"/>
<div>
<input type=text placeholder="attribute"/><input type=text placeholder="value"/>
</div>
</div>
<div>
Comment:
<textarea rows=1 id="world_info_comment_" class="world_info_text fullwidth"></textarea>
</div>
</div>
<div id="empty_bias">
<div class="bias_phrase">
<input type=text placeholder="Word or Phrase to Bias" onchange="save_bias(this);"/>
</div>
<div class="bias_score">
<div class="bias_slider">
<div class="bias_slider_bar">
<input type="range" min="-12" max="12" step="0.01" value="0" class="setting_item_input"
oninput="update_bias_slider_value(this);"
onchange="save_bias(this);"/>
</div>
<div class="bias_slider_min">-12</div>
<div class="bias_slider_cur">0</div>
<div class="bias_slider_max">12</div>
</div>
</div>
<div class="bias_comp_threshold">
<div class="bias_slider">
<div class="bias_slider_bar">
<input type="range" min="0" max="10" step="1" value="10" class="setting_item_input"
oninput="update_bias_slider_value(this);"
onchange="save_bias(this);"/>
</div>
<div class="bias_slider_min">0</div>
<div class="bias_slider_cur">10</div>
<div class="bias_slider_max">10</div>
</div>
</div>
</div>
</div> </div>
<iframe id="download_iframe" style="display:none;"></iframe> <iframe id="download_iframe" style="display:none;"></iframe>
</body> </body>

18
templates/settings flyout.html
View File

@@ -53,6 +53,7 @@
<div id="Story_Info"> <div id="Story_Info">
<div><b>Story Name: </b><span class="var_sync_story_story_name" contenteditable=true onblur="sync_to_server(this);"></span></div> <div><b>Story Name: </b><span class="var_sync_story_story_name" contenteditable=true onblur="sync_to_server(this);"></span></div>
<div> <div>
<button id="new_story" class="btn action_button" onclick="new_story();">New Story</button>
<button id="load_story" class="btn action_button" onclick="socket.emit('load_story_list', '');">Load Story</button> <button id="load_story" class="btn action_button" onclick="socket.emit('load_story_list', '');">Load Story</button>
<button id="save_story" class="btn action_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>Save Story</button> <button id="save_story" class="btn action_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>Save Story</button>
<button id="download_story" class="btn action_button" onclick="document.getElementById('download_iframe').src = 'json';">Download Story</button> <button id="download_story" class="btn action_button" onclick="document.getElementById('download_iframe').src = 'json';">Download Story</button>
@@ -106,6 +107,23 @@
<span class="setting_minlabel"><span style="top: -4px; position: relative;"></span></span> <span class="setting_minlabel"><span style="top: -4px; position: relative;"></span></span>
<span class="setting_maxlabel"><span style="top: -4px; position: relative;"></span></span> <span class="setting_maxlabel"><span style="top: -4px; position: relative;"></span></span>
</div> </div>
<div class="setting_container">
<span class="setting_label">
Keep options on Right:
<span class="helpicon">
?
<span class="helptext">
When enabled and only the story menu is pinned, the generated story options will be shown on the right instead of the left of the game text.
</span>
</span>
</span>
<span class="setting_item">
<input type=checkbox id="options_on_right" data-size=mini data-onstyle=success data-toggle=toggle onchange="options_on_right(this.checked)"/>
</span>
<!---Slider Labels--->
<span class="setting_minlabel"><span style="top: -4px; position: relative;"></span></span>
<span class="setting_maxlabel"><span style="top: -4px; position: relative;"></span></span>
</div>
</div> </div>
</div> </div>
</div> </div>

58
templates/templates.html Normal file
View File

@@ -0,0 +1,58 @@
<div draggable="true" class="world_info_card" id="world_info_">
<div class="world_info_title_area">
<h4 id="world_info_title_" class="world_info_title"></h4>
<span id="world_info_delete_" class="world_info_delete">X</span>
</div>
<div class="world_info_tag_area" id="world_info_toggle_area_">
Always Include
</div>
<div id="world_info_tags_" class="world_info_tag_area">
<div>Requires one of:</div>
</div>
<div id="world_info_secondtags_" class="world_info_tag_area">
<div>And (if present):</div>
</div>
<div>
Text:
<textarea id="world_info_entry_text_" class="world_info_text fullwidth"></textarea>
</div>
<div id="world_info_entry_w++_" class="hidden">
<input type=text placeholder="Type"/><input type=text placeholder="Name"/>
<div>
<input type=text placeholder="attribute"/><input type=text placeholder="value"/>
</div>
</div>
<div>
Comment:
<textarea rows=1 id="world_info_comment_" class="world_info_text fullwidth"></textarea>
</div>
</div>
<div id="empty_bias">
<div class="bias_phrase">
<input type=text placeholder="Word or Phrase to Bias" onchange="save_bias(this);"/>
</div>
<div class="bias_score">
<div class="bias_slider">
<div class="bias_slider_bar">
<input type="range" min="-12" max="12" step="0.01" value="0" class="setting_item_input"
oninput="update_bias_slider_value(this);"
onchange="save_bias(this);"/>
</div>
<div class="bias_slider_min">-12</div>
<div class="bias_slider_cur">0</div>
<div class="bias_slider_max">12</div>
</div>
</div>
<div class="bias_comp_threshold">
<div class="bias_slider">
<div class="bias_slider_bar">
<input type="range" min="0" max="10" step="1" value="10" class="setting_item_input"
oninput="update_bias_slider_value(this);"
onchange="save_bias(this);"/>
</div>
<div class="bias_slider_min">0</div>
<div class="bias_slider_cur">10</div>
<div class="bias_slider_max">10</div>
</div>
</div>
</div>