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

338
templates/popups.html
View File

@@ -1,173 +1,173 @@
<!------------------File Browser--------------->
<div class="popup hidden" id="popup">
<div class="title" id="popup_title">
Popup Title
</div>
<div id="popup_breadcrumbs"></div>
<div id="popup_column_titles"></div>
<div class="popup_list_area" id="popup_list"></div>
<div class="popup_load_cancel hidden" id="popup_upload">
<input type=file id="popup_upload_file">
</div>
<div style="display:flex;justify-content: space-between;">
<span>Drag file(s) above or click here to Upload File<input id="popup_upload_input" type=file onchange="upload_file(this)"></span>
<!---<span>
Upload file without saving to google:
<input type=checkbox id="upload_no_save" class="setting_item_input"
data-size="mini" data-onstyle="success" data-toggle="toggle">
</span>--->
<span>
<button class="settings_button" id="upload_without_save_button" onclick="document.getElementById('upload_without_save').click()">
<span class="material-icons-outlined cursor" tooltip="Load from Local">browser_updated</span>
<span class="button_label">Load from Local</span>
</button>
<input class="hidden" type=file id="upload_without_save" onchange="upload_file_without_save(this)">
<button id="import_story_button" class="settings_button hidden" onclick="openClubImport();">
<span class="material-icons-outlined cursor" tooltip="Import Story">cloud_download</span>
<span class="button_label">Import Story</span>
</button>
</span>
</div>
<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" id="popup_cancel" onclick='document.getElementById("popup").classList.add("hidden");'>Cancel</button>
</div>
</div>
<!---------------- Model Load Screen ---------------------->
<div class="popup hidden" id="loadmodelcontainer">
<div class="title">
Select A Model To Load
</div>
<div id="loadmodellistbreadcrumbs">
</div>
<div id="loadmodellistcontent" class="popup_list_area"></div>
<div class="popup_load_cancel">
<div>
<input class="hidden fullwidth" type="text" placeholder="key" id="modelkey" onchange="socket.emit('OAI_Key_Update', {'model': document.getElementById('btn_loadmodelaccept').getAttribute('selected_model'), 'key': this.value});">
<input class="hidden fullwidth" type="text" placeholder="Enter the URL of the server (For example a trycloudflare link)" id="modelurl" onchange="check_enable_model_load()">
<input class="hidden fullwidth" type="text" placeholder="Model Path or Hugging Face Name" id="custommodelname" menu="" onblur="socket.send({'cmd': 'selectmodel', 'data': $(this).attr('menu'), 'path_modelname': $('#custommodelname')[0].value});">
<select class="hidden fullwidth settings_select" id="oaimodel"><option value="">Select OAI Model</option></select>
</div>
<div class="hidden" id=modellayers>
<div class="justifyleft">
GPU/Disk Layers<span class="material-icons-outlined helpicon" tooltip="Number of layers to assign to GPUs and to disk cache. Remaining layers will be put into CPU RAM.">help_icon</span>
</div>
<div class="justifyright"><span id="gpu_layers_current">0</span>/<span id="gpu_layers_max">0</span></div>
<div id=model_layer_bars style="color: white"></div>
<input type=hidden id='gpu_count' value=0/>
</div>
<div class="box flex-push-right hidden" id=use_gpu_div>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="use_gpu" checked>
<div class="box-label">Use GPU</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" onclick='document.getElementById("loadmodelcontainer").classList.add("hidden");' id="btn_loadmodelclose">Cancel</button>
</div>
</div>
<!---------------- Story overwrite screen ---------------------->
<div class="popup hidden" id="save-confirm">
<div class="title">
<div class="popuptitletext">Overwrite</div>
</div>
<div id="popup_list_area" class="popup_list_area">
The story name you have entered already exists. Would you like to overwrite?
</div>
<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="document.getElementById('save-confirm').classList.add('hidden');">Cancel</button>
</div>
</div>
<!---------------- Save Preset screen ---------------------->
<div class="popup hidden" id="save_preset">
<div class="title">
<div class="popuptitletext">Save Preset</div>
</div>
<div id="popup_list_area" class="popup_list_area">
<table>
<tr>
<td>
Name:
</td>
<td>
<input type="text" id="new_preset_name"/>
</td>
</tr>
<tr>
<td>
Description:
</td>
<td>
<input type="text" id="new_preset_description"/>
</td>
</tr>
</table>
</div>
<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="document.getElementById('save_preset').classList.add('hidden');">Cancel</button>
</div>
</div>
<!---------------- Import aidg.club Prompt ---------------------->
<div class="popup hidden" id="import_aidg_club_popup">
<div class="title">
<div class="popuptitletext">Enter the Prompt Number</div>
</div>
<div class="popup_list_area">
<br/>
<div style="text-align: center;"><a href="https://aetherroom.club/" target="_blank" rel="noopener noreferrer">https://aetherroom.club/</a></div>
<br/>
<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 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="this.parentElement.parentElement.classList.add('hidden');">Cancel</button>
</div>
</div>
<!---------------- error screen ---------------------->
<div class="popup hidden" id="error_message">
<div class="title">
<div class="popuptitletext">Error</div>
</div>
<div id="popup_list_area" class="popup_list_area" style="overflow-x: scroll;">
</div>
<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>
</div>
</div>
<!---------------- log screen ---------------------->
<div class="popup hidden" id="log_popup">
<div class="title">
<div class="popuptitletext">Log</div>
</div>
<div id="popup_list_area" class="popup_list_area" style="overflow-x: scroll;">
</div>
<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>
</div>
</div>
<!---------------- Advanced Theme Editor ---------------------->
<div class="popup hidden" id="advanced_theme_editor">
<div class="title">
<div class="popuptitletext">Advanced Theme Editor</div>
</div>
<div id="popup_list_area" class="popup_list_area">
<table border=1 id="advanced_theme_editor_table"></table>
</div>
<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>
</div>
</div>
<div id="popup-container" class="hidden">
<!------------------File Browser--------------->
<div id="file-browser" class="popup-window popup">
<div class="title" id="popup_title">
Popup Title
</div>
<div id="popup_breadcrumbs"></div>
<div id="popup_column_titles"></div>
<div class="popup_list_area" id="popup_list"></div>
<div class="popup_load_cancel hidden" id="popup_upload">
<input type=file id="popup_upload_file">
</div>
<div style="display:flex;justify-content: space-between;">
<span>Drag file(s) above or click here to Upload File<input id="popup_upload_input" type=file onchange="upload_file(this)"></span>
<!---<span>
Upload file without saving to google:
<input type=checkbox id="upload_no_save" class="setting_item_input"
data-size="mini" data-onstyle="success" data-toggle="toggle">
</span>--->
<span>
<button class="settings_button" id="upload_without_save_button" onclick="document.getElementById('upload_without_save').click()">
<span class="material-icons-outlined cursor" tooltip="Load from Local">browser_updated</span>
<span class="button_label">Load from Local</span>
</button>
<input class="hidden" type=file id="upload_without_save" onchange="upload_file_without_save(this)">
<button id="import_story_button" class="settings_button hidden" onclick="openClubImport();">
<span class="material-icons-outlined cursor" tooltip="Import Story">cloud_download</span>
<span class="button_label">Import Story</span>
</button>
</span>
</div>
<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" id="popup_cancel" onclick='closePopups();'>Cancel</button>
</div>
</div>
<!---------------- Model Load Screen ---------------------->
<div id="load-model" class="popup-window popup" >
<div class="title">
Select A Model To Load
</div>
<div id="loadmodellistbreadcrumbs">
</div>
<div id="loadmodellistcontent" class="popup_list_area"></div>
<div class="popup_load_cancel">
<div>
<input class="hidden fullwidth" type="text" placeholder="key" id="modelkey" onchange="socket.emit('OAI_Key_Update', {'model': document.getElementById('btn_loadmodelaccept').getAttribute('selected_model'), 'key': this.value});">
<input class="hidden fullwidth" type="text" placeholder="Enter the URL of the server (For example a trycloudflare link)" id="modelurl" onchange="check_enable_model_load()">
<input class="hidden fullwidth" type="text" placeholder="Model Path or Hugging Face Name" id="custommodelname" menu="" onblur="socket.send({'cmd': 'selectmodel', 'data': $(this).attr('menu'), 'path_modelname': $('#custommodelname')[0].value});">
<select class="hidden fullwidth settings_select" id="oaimodel"><option value="">Select OAI Model</option></select>
</div>
<div class="hidden" id=modellayers>
<div class="justifyleft">
GPU/Disk Layers<span class="material-icons-outlined helpicon" tooltip="Number of layers to assign to GPUs and to disk cache. Remaining layers will be put into CPU RAM.">help_icon</span>
</div>
<div class="justifyright"><span id="gpu_layers_current">0</span>/<span id="gpu_layers_max">0</span></div>
<div id=model_layer_bars style="color: white"></div>
<input type=hidden id='gpu_count' value=0/>
</div>
<div class="box flex-push-right hidden" id=use_gpu_div>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="use_gpu" checked>
<div class="box-label">Use GPU</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" onclick='closePopups();' id="btn_loadmodelclose">Cancel</button>
</div>
</div>
<!---------------- Story overwrite screen ---------------------->
<div id="save-confirm" class="popup hidden">
<div class="title">
<div class="popuptitletext">Overwrite</div>
</div>
<div id="popup_list_area" class="popup_list_area">
The story name you have entered already exists. Would you like to overwrite?
</div>
<div class="popup_load_cancel">
<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="closePopups();">Cancel</button>
</div>
</div>
<!---------------- Save Preset screen ---------------------->
<div id="save-preset" class="popup hidden">
<div class="title">
<div class="popuptitletext">Save Preset</div>
</div>
<div id="popup_list_area" class="popup_list_area">
<table>
<tr>
<td>
Name:
</td>
<td>
<input type="text" id="new_preset_name"/>
</td>
</tr>
<tr>
<td>
Description:
</td>
<td>
<input type="text" id="new_preset_description"/>
</td>
</tr>
</table>
</div>
<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="closePopups();">Cancel</button>
</div>
</div>
<!---------------- Import aidg.club Prompt ---------------------->
<div id="aidg-import-popup" class="popup hidden">
<div class="title">
<div class="popuptitletext">Enter the Prompt Number</div>
</div>
<div class="popup_list_area">
<br/>
<div style="text-align: center;"><a href="https://aetherroom.club/" target="_blank" rel="noopener noreferrer">https://aetherroom.club/</a></div>
<br/>
<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 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);closePopups();">Accept</button>
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Cancel</button>
</div>
</div>
<!---------------- error screen ---------------------->
<div id="error-popup" class="popup hidden">
<div class="title">
<div class="popuptitletext">Error</div>
</div>
<div id="popup_list_area" class="popup_list_area" style="overflow-x: scroll;">
</div>
<div class="popup_load_cancel">
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Ok</button>
</div>
</div>
<!---------------- log screen ---------------------->
<div id="log-popup" class="popup hidden">
<div class="title">
<div class="popuptitletext">Log</div>
</div>
<div id="popup_list_area" class="popup_list_area" style="overflow-x: scroll;">
</div>
<div class="popup_load_cancel">
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Ok</button>
</div>
</div>
<!---------------- Advanced Theme Editor ---------------------->
<div id="advanced_theme_editor" class="popup hidden">
<div class="title">
<div class="popuptitletext">Advanced Theme Editor</div>
</div>
<div id="popup_list_area" class="popup_list_area">
<table border=1 id="advanced_theme_editor_table"></table>
</div>
<div class="popup_load_cancel">
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Ok</button>
</div>
</div>
<!---------------- Context Viewer ---------------------->
<div id="context-viewer" class="popup-window">
<div id="context-viewer-header">

6
templates/settings flyout.html
View File

@@ -107,7 +107,7 @@
<div id="probabilities">
</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">
<button class="settings_button var_sync_alt_system_generating_image" onclick="socket.emit('generate_image', {})">Generate Image</button>
<div id="action image"></div>
@@ -411,7 +411,7 @@
</table>
</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>
</div>
</div>
@@ -442,6 +442,6 @@
<div id="settings_footer" class="settings_footer">
<span>Execution Time: <span id="Execution 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>

2
templates/story flyout.html
View File

@@ -110,7 +110,7 @@
</div>
</div>
<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="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>