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

More generic popup stuff

Browse Source
This commit is contained in:
somebody
2022-10-22 21:38:25 -05:00
parent 8daea61599
commit 948cf71d42
4 changed files with 190 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
static/koboldai.js
View File

@@ -807,7 +807,7 @@ function load_popup(data) {
popup_deleteable = data.deleteable; popup_deleteable = data.deleteable;
popup_editable = data.editable; popup_editable = data.editable;
popup_renameable = data.renameable; popup_renameable = data.renameable;
var popup = document.getElementById("popup"); var popup = document.getElementById("file-browser");
var popup_title = document.getElementById("popup_title"); var popup_title = document.getElementById("popup_title");
popup_title.textContent = data.popup_title; popup_title.textContent = data.popup_title;
if (data.popup_title == "Select Story to Load") { if (data.popup_title == "Select Story to Load") {
@@ -850,7 +850,7 @@ function load_popup(data) {
} }
popup.classList.remove("hidden"); openPopup("file-browser");
//adjust accept button //adjust accept button
if (data.call_back == "") { if (data.call_back == "") {
@@ -863,7 +863,7 @@ function load_popup(data) {
accept.setAttribute("selected_value", ""); accept.setAttribute("selected_value", "");
accept.onclick = function () { accept.onclick = function () {
socket.emit(this.getAttribute("emit"), this.getAttribute("selected_value")); socket.emit(this.getAttribute("emit"), this.getAttribute("selected_value"));
document.getElementById("popup").classList.add("hidden"); closePopups();
}; };
} }
@@ -1211,7 +1211,7 @@ function popup_edit_file(data) {
accept.onclick = function () { accept.onclick = function () {
var textarea = document.getElementById("filecontents"); var textarea = document.getElementById("filecontents");
socket.emit("popup_change_file", {"file": textarea.getAttribute("filename"), "data": textarea.value}); socket.emit("popup_change_file", {"file": textarea.getAttribute("filename"), "data": textarea.value});
document.getElementById("popup").classList.add("hidden"); closePopups();
}; };
var textarea = document.createElement("textarea"); var textarea = document.createElement("textarea");
@@ -1266,8 +1266,6 @@ function getModelParameterCount(modelName) {
} }
function show_model_menu(data) { function show_model_menu(data) {
document.getElementById("loadmodelcontainer").classList.remove("hidden");
//clear old options //clear old options
document.getElementById("modelkey").classList.add("hidden"); document.getElementById("modelkey").classList.add("hidden");
document.getElementById("modelkey").value = ""; document.getElementById("modelkey").value = "";
@@ -1402,6 +1400,7 @@ function show_model_menu(data) {
var accept = document.getElementById("btn_loadmodelaccept"); var accept = document.getElementById("btn_loadmodelaccept");
accept.disabled = true; accept.disabled = true;
openPopup("load-model");
} }
function selected_model_info(data) { function selected_model_info(data) {
@@ -1652,7 +1651,7 @@ function load_model() {
'disk_layers': disk_layers, 'url': document.getElementById("modelurl").value, 'disk_layers': disk_layers, 'url': document.getElementById("modelurl").value,
'online_model': selected_models}; 'online_model': selected_models};
socket.emit("load_model", message); socket.emit("load_model", message);
document.getElementById("loadmodelcontainer").classList.add("hidden"); closePopups();
} }
function world_info_entry_used_in_game(data) { function world_info_entry_used_in_game(data) {
@@ -2241,9 +2240,7 @@ function world_info_folder(data) {
} }
function show_error_message(data) { function show_error_message(data) {
error_message_box = document.getElementById('error_message'); const error_box_data = $el("#error-popup").querySelector("#popup_list_area")
error_message_box.classList.remove("hidden");
error_box_data = error_message_box.querySelector("#popup_list_area")
//clear out the error box //clear out the error box
while (error_box_data.firstChild) { while (error_box_data.firstChild) {
error_box_data.removeChild(error_box_data.firstChild); error_box_data.removeChild(error_box_data.firstChild);
@@ -2257,6 +2254,7 @@ function show_error_message(data) {
//console.log(item); //console.log(item);
$e("div", error_box_data, {'innerHTML': item, 'classes': ['console_text']}) $e("div", error_box_data, {'innerHTML': item, 'classes': ['console_text']})
} }
openPopup("error-popup");
} }
function do_wpp(wpp_area) { function do_wpp(wpp_area) {
@@ -2309,8 +2307,8 @@ function process_log_message(full_data) {
} }
//put log message in log popup //put log message in log popup
log_popup = document.getElementById('log_popup'); const log_popup = document.getElementById('log-popup');
log_popup_data = log_popup.querySelector("#popup_list_area") const log_popup_data = log_popup.querySelector("#popup_list_area")
//clear out the error box //clear out the error box
for (item of data['html']) { for (item of data['html']) {
$e("div", log_popup_data, {'innerHTML': item, 'classes': ['console_text']}) $e("div", log_popup_data, {'innerHTML': item, 'classes': ['console_text']})
@@ -2384,10 +2382,7 @@ function new_story() {
} }
function save_as_story(response) { function save_as_story(response) {
if (response == "overwrite?") { if (response === "overwrite?") openPopup("save-confirm");
document.getElementById('save-confirm').classList.remove('hidden')
}
} }
function save_bias(item) { function save_bias(item) {
@@ -2586,7 +2581,7 @@ function edit_game_text() {
function save_preset() { function save_preset() {
socket.emit("save_new_preset", {"preset": document.getElementById("new_preset_name").value, "description": document.getElementById("new_preset_description").value}); socket.emit("save_new_preset", {"preset": document.getElementById("new_preset_name").value, "description": document.getElementById("new_preset_description").value});
document.getElementById('save_preset').classList.add('hidden'); closePopups();
} }
//--------------------------------------------General UI Functions------------------------------------ //--------------------------------------------General UI Functions------------------------------------
@@ -2696,7 +2691,7 @@ function get_caret_position(target) {
} }
function show_save_preset() { function show_save_preset() {
document.getElementById("save_preset").classList.remove("hidden"); openPopup("save-preset");
} }
function autoResize(element, min_size=200) { function autoResize(element, min_size=200) {
@@ -3670,13 +3665,6 @@ function close_menus() {
document.getElementById("main-grid").classList.remove("story_menu-open"); document.getElementById("main-grid").classList.remove("story_menu-open");
//close popup menus //close popup menus
document.getElementById('popup').classList.add("hidden");
document.getElementById('loadmodelcontainer').classList.add("hidden");
document.getElementById('save-confirm').classList.add("hidden");
document.getElementById('error_message').classList.add("hidden");
document.getElementById("advanced_theme_editor").classList.add("hidden");
document.getElementById("save_preset").classList.add("hidden");
document.getElementById("log_popup").classList.add("hidden");
closePopups(); closePopups();
//unselect sampler items //unselect sampler items
@@ -3977,7 +3965,7 @@ async function downloadDebugFile(redact=true) {
} }
function configurePrompt(placeholderData) { function configurePrompt(placeholderData) {
showPopup("prompt-config"); openPopup("prompt-config");
const placeholders = document.querySelector("#prompt-config-placeholders"); const placeholders = document.querySelector("#prompt-config-placeholders");
@@ -4600,7 +4588,7 @@ function open_finder() {
finder_selection_index = -1; finder_selection_index = -1;
updateFinderMode("ui"); updateFinderMode("ui");
showPopup("finder"); openPopup("finder");
finderInput.focus(); finderInput.focus();
} }
@@ -4674,7 +4662,7 @@ function updateTitle() {
} }
function openClubImport() { function openClubImport() {
document.getElementById("import_aidg_club_popup").classList.remove("hidden"); openPopup("aidg-import-popup");
} }
//// INIT //// //// INIT ////
@@ -4684,7 +4672,7 @@ document.onkeyup = detect_key_up;
document.getElementById("input_text").onkeydown = detect_enter_submit; document.getElementById("input_text").onkeydown = detect_enter_submit;
/* -- Popups -- */ /* -- Popups -- */
function showPopup(id) { function openPopup(id) {
closePopups(); closePopups();
const container = $el("#popup-container"); const container = $el("#popup-container");

38
templates/popups.html
View File

@@ -1,5 +1,6 @@
<div id="popup-container" class="hidden">
<!------------------File Browser---------------> <!------------------File Browser--------------->
<div class="popup hidden" id="popup"> <div id="file-browser" class="popup-window popup">
<div class="title" id="popup_title"> <div class="title" id="popup_title">
Popup Title Popup Title
</div> </div>
@@ -30,12 +31,12 @@
</div> </div>
<div class="popup_load_cancel" id="popup_load_cancel"> <div class="popup_load_cancel" id="popup_load_cancel">
<button class="btn popup_load_cancel_button action_button" id="popup_accept" disabled>Load</button> <button class="btn popup_load_cancel_button action_button" id="popup_accept" disabled>Load</button>
<button class="btn popup_load_cancel_button" id="popup_cancel" onclick='document.getElementById("popup").classList.add("hidden");'>Cancel</button> <button class="btn popup_load_cancel_button" id="popup_cancel" onclick='closePopups();'>Cancel</button>
</div> </div>
</div> </div>
<!---------------- Model Load Screen ----------------------> <!---------------- Model Load Screen ---------------------->
<div class="popup hidden" id="loadmodelcontainer"> <div id="load-model" class="popup-window popup" >
<div class="title"> <div class="title">
Select A Model To Load Select A Model To Load
</div> </div>
@@ -63,12 +64,12 @@
<div class="box-label">Use GPU</div> <div class="box-label">Use GPU</div>
</div> </div>
<button type="button" class="btn popup_load_cancel_button action_button disabled" onclick="load_model()" id="btn_loadmodelaccept" disabled>Load</button> <button type="button" class="btn popup_load_cancel_button action_button disabled" onclick="load_model()" id="btn_loadmodelaccept" disabled>Load</button>
<button type="button" class="btn popup_load_cancel_button" onclick='document.getElementById("loadmodelcontainer").classList.add("hidden");' id="btn_loadmodelclose">Cancel</button> <button type="button" class="btn popup_load_cancel_button" onclick='closePopups();' id="btn_loadmodelclose">Cancel</button>
</div> </div>
</div> </div>
<!---------------- Story overwrite screen ----------------------> <!---------------- Story overwrite screen ---------------------->
<div class="popup hidden" id="save-confirm"> <div id="save-confirm" class="popup hidden">
<div class="title"> <div class="title">
<div class="popuptitletext">Overwrite</div> <div class="popuptitletext">Overwrite</div>
</div> </div>
@@ -76,13 +77,13 @@
The story name you have entered already exists. Would you like to overwrite? The story name you have entered already exists. Would you like to overwrite?
</div> </div>
<div class="popup_load_cancel"> <div class="popup_load_cancel">
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick='socket.emit("save_story", "overwrite"); document.getElementById("save-confirm").classList.add("hidden");'>Overwrite</button> <button type="button" class="btn btn-primary popup_load_cancel_button" onclick='socket.emit("save_story", "overwrite");closePopups();'>Overwrite</button>
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="document.getElementById('save-confirm').classList.add('hidden');">Cancel</button> <button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Cancel</button>
</div> </div>
</div> </div>
<!---------------- Save Preset screen ----------------------> <!---------------- Save Preset screen ---------------------->
<div class="popup hidden" id="save_preset"> <div id="save-preset" class="popup hidden">
<div class="title"> <div class="title">
<div class="popuptitletext">Save Preset</div> <div class="popuptitletext">Save Preset</div>
</div> </div>
@@ -108,12 +109,12 @@
</div> </div>
<div class="popup_load_cancel"> <div class="popup_load_cancel">
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick='save_preset()'>Save</button> <button type="button" class="btn btn-primary popup_load_cancel_button" onclick='save_preset()'>Save</button>
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="document.getElementById('save_preset').classList.add('hidden');">Cancel</button> <button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Cancel</button>
</div> </div>
</div> </div>
<!---------------- Import aidg.club Prompt ----------------------> <!---------------- Import aidg.club Prompt ---------------------->
<div class="popup hidden" id="import_aidg_club_popup"> <div id="aidg-import-popup" class="popup hidden">
<div class="title"> <div class="title">
<div class="popuptitletext">Enter the Prompt Number</div> <div class="popuptitletext">Enter the Prompt Number</div>
</div> </div>
@@ -124,13 +125,13 @@
<input autocomplete="off" class="form-control" type="text" placeholder="Prompt Number (4-digit number at the end of aetherroom.club URL)" id="aidgpromptnum"> <input autocomplete="off" class="form-control" type="text" placeholder="Prompt Number (4-digit number at the end of aetherroom.club URL)" id="aidgpromptnum">
</div> </div>
<div class="popup_load_cancel"> <div class="popup_load_cancel">
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="socket.emit('load_aidg_club', document.getElementById('aidgpromptnum').value); $('.popup').addClass('hidden');">Accept</button> <button type="button" class="btn btn-primary popup_load_cancel_button" onclick="socket.emit('load_aidg_club', document.getElementById('aidgpromptnum').value);closePopups();">Accept</button>
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="this.parentElement.parentElement.classList.add('hidden');">Cancel</button> <button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Cancel</button>
</div> </div>
</div> </div>
<!---------------- error screen ----------------------> <!---------------- error screen ---------------------->
<div class="popup hidden" id="error_message"> <div id="error-popup" class="popup hidden">
<div class="title"> <div class="title">
<div class="popuptitletext">Error</div> <div class="popuptitletext">Error</div>
</div> </div>
@@ -138,12 +139,12 @@
</div> </div>
<div class="popup_load_cancel"> <div class="popup_load_cancel">
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="document.getElementById('error_message').classList.add('hidden');">Ok</button> <button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Ok</button>
</div> </div>
</div> </div>
<!---------------- log screen ----------------------> <!---------------- log screen ---------------------->
<div class="popup hidden" id="log_popup"> <div id="log-popup" class="popup hidden">
<div class="title"> <div class="title">
<div class="popuptitletext">Log</div> <div class="popuptitletext">Log</div>
</div> </div>
@@ -151,11 +152,11 @@
</div> </div>
<div class="popup_load_cancel"> <div class="popup_load_cancel">
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="document.getElementById('log_popup').classList.add('hidden');">Ok</button> <button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Ok</button>
</div> </div>
</div> </div>
<!---------------- Advanced Theme Editor ----------------------> <!---------------- Advanced Theme Editor ---------------------->
<div class="popup hidden" id="advanced_theme_editor"> <div id="advanced_theme_editor" class="popup hidden">
<div class="title"> <div class="title">
<div class="popuptitletext">Advanced Theme Editor</div> <div class="popuptitletext">Advanced Theme Editor</div>
</div> </div>
@@ -163,11 +164,10 @@
<table border=1 id="advanced_theme_editor_table"></table> <table border=1 id="advanced_theme_editor_table"></table>
</div> </div>
<div class="popup_load_cancel"> <div class="popup_load_cancel">
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="document.getElementById('advanced_theme_editor').classList.add('hidden');">Ok</button> <button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Ok</button>
</div> </div>
</div> </div>
<div id="popup-container" class="hidden">
<!---------------- Context Viewer ----------------------> <!---------------- Context Viewer ---------------------->
<div id="context-viewer" class="popup-window"> <div id="context-viewer" class="popup-window">
<div id="context-viewer-header"> <div id="context-viewer-header">

6
templates/settings flyout.html
View File

@@ -107,7 +107,7 @@
<div id="probabilities"> <div id="probabilities">
</div> </div>
<span id="debug-dump" class="cursor" onclick="showPopup('debug-file-prompt');">Download debug dump</span> <span id="debug-dump" class="cursor" onclick="openPopup('debug-file-prompt');">Download debug dump</span>
<div id="Images"> <div id="Images">
<button class="settings_button var_sync_alt_system_generating_image" onclick="socket.emit('generate_image', {})">Generate Image</button> <button class="settings_button var_sync_alt_system_generating_image" onclick="socket.emit('generate_image', {})">Generate Image</button>
<div id="action image"></div> <div id="action image"></div>
@@ -411,7 +411,7 @@
</table> </table>
</div> </div>
</div> </div>
<div class="advanced_theme cursor" onclick='document.getElementById("advanced_theme_editor").classList.remove("hidden");'> <div class="advanced_theme cursor" onclick='openPopup("advanced_theme_editor");'>
<span>Advanced Theme</h4> <span>Advanced Theme</h4>
</div> </div>
</div> </div>
@@ -442,6 +442,6 @@
<div id="settings_footer" class="settings_footer"> <div id="settings_footer" class="settings_footer">
<span>Execution Time: <span id="Execution Time"></span></span> | <span>Execution Time: <span id="Execution Time"></span></span> |
<span>Remaining Time: <span class="var_sync_model_tqdm_rem_time"></span></span> | <span>Remaining Time: <span class="var_sync_model_tqdm_rem_time"></span></span> |
<a onclick='socket.emit("get_log", {});document.getElementById("log_popup").classList.remove("hidden");' class='cursor'>Log</a> <a onclick='socket.emit("get_log", {});openPopup("log-popup");' class='cursor'>Log</a>
</div> </div>
</div> </div>

2
templates/story flyout.html
View File

@@ -110,7 +110,7 @@
</div> </div>
</div> </div>
<div id="token-breakdown-container" class="settings_footer" style="padding-top: 10px;"> <div id="token-breakdown-container" class="settings_footer" style="padding-top: 10px;">
<div class="token_breakdown" onclick='socket.emit("update_tokens", document.getElementById("input_text").value);showPopup("context-viewer");'> <div class="token_breakdown" onclick='socket.emit("update_tokens", document.getElementById("input_text").value);openPopup("context-viewer");'>
<div id="soft_prompt_tokens" style="width:0%; background-color: var(--context_colors_soft_prompt);"></div> <div id="soft_prompt_tokens" style="width:0%; background-color: var(--context_colors_soft_prompt);"></div>
<div id="memory_tokens" style="width:40%; background-color: var(--context_colors_memory);"></div> <div id="memory_tokens" style="width:40%; background-color: var(--context_colors_memory);"></div>
<div id="authors_notes_tokens" style="width:10%; background-color: var(--context_colors_authors_notes);"></div> <div id="authors_notes_tokens" style="width:10%; background-color: var(--context_colors_authors_notes);"></div>