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 pull request #242 from one-some/ui2-shortcuts

Browse Source 
Streamline popups, add more shortcuts, and add shortcut popup
This commit is contained in:
ebolam
2022-10-23 10:27:06 -04:00
committed by GitHub
parent 34dfabfd94 0b92c25a3c
commit 2bb73058bb
9 changed files with 349 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
static/koboldai.css
View File

@@ -1805,23 +1805,6 @@ body {
width:95%;
}
/*------------------------------ Context Viewer --------------------------------------------*/
#context-viewer-container {
position: absolute;
left: 0px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
width: 100vw;
height: 100vh;
z-index: 20;
}
#context-viewer {
display: flex;
flex-direction: column;
@@ -1975,24 +1958,6 @@ body {
/* Finder */
#finder-container,
#debug-file-container,
#prompt-config-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99999999;
width: 100vw;
height: 100vh;
}
#finder-container {
flex-direction: column;
}
@@ -2403,6 +2368,80 @@ body {
max-width: 720px;
width: 100%;
}
/* Popups */
#popup-container {
position: absolute;
left: 0px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
width: 100vw;
height: 100vh;
z-index: 20;
}
.popup-close {
cursor: pointer;
}
/* Shortcuts */
#shortcuts-popup {
width: 50%;
height: 75%;
padding-bottom: 10px;
background-color: var(--popup_background_color);
}
#shortcuts-popup > .popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 7px;
margin-bottom: 5px;
}
#shortcuts-popup h2 {
display: inline;
margin: 0px;
position: relative;
top: 4px;
}
#shortcut-container {
padding: 0px 5px;
column-count: 2;
column-rule: 2px solid #ffffff1b;
}
.shortcut-item {
display: flex;
justify-content: space-between;
width: 100%;
}
.shortcut-keys {
display: inline-flex;
column-gap: 5px;
margin-bottom: 3px;
}
.shortcut-key {
background-color: #284b62;
padding: 2px 5px;
font-size: 16px;
font-family: monospace;
border-radius: 3px;
}
/*---------------------------------- Global ------------------------------------------------*/
.hidden {
display: none;

168
static/koboldai.js
View File

@@ -105,6 +105,18 @@ const context_menu_actions = [
// {label: "View Token Probabilities", icon: "account_tree", visibilityCondition: "SELECTION", click: view_selection_probabilities},
];
// CTRL-[X]
const shortcuts = [
{key: "k", desc: "Finder", func: open_finder},
{key: "/", desc: "Help screen", func: () => openPopup("shortcuts-popup")},
{key: "z", desc: "Undoes last story action", func: () => socket.emit("back", {})},
{key: "y", desc: "Redoes last story action", func: () => socket.emit("redo", {})},
{key: "e", desc: "Retries last story action", func: () => socket.emit("retry", {})},
{key: "m", desc: "Focuses Memory", func: () => focusEl("#memory")},
{key: "l", desc: "Focuses Author's Note", func: () => focusEl("#authors_notes")}, // CTRL-N is reserved :^(
{key: "g", desc: "Focuses game text", func: () => focusEl("#input_text")},
]
function $el(selector) {
// We do not preemptively fetch all elements upon execution (wall of consts)
// due to the layer of mental overhead it adds to debugging and reading
@@ -808,7 +820,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") {
@@ -851,7 +863,7 @@ function load_popup(data) {
}
popup.classList.remove("hidden");
openPopup("file-browser");
//adjust accept button
if (data.call_back == "") {
@@ -864,7 +876,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();
};
}
@@ -1212,7 +1224,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");
@@ -1267,8 +1279,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 = "";
@@ -1403,6 +1413,7 @@ function show_model_menu(data) {
var accept = document.getElementById("btn_loadmodelaccept");
accept.disabled = true;
openPopup("load-model");
}
function selected_model_info(data) {
@@ -1653,7 +1664,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) {
@@ -2242,9 +2253,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);
@@ -2258,6 +2267,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) {
@@ -2310,8 +2320,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']})
@@ -2385,10 +2395,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) {
@@ -2587,7 +2594,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------------------------------------
@@ -2697,7 +2704,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) {
@@ -3671,22 +3678,12 @@ 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("context-viewer-container").classList.add("hidden");
document.getElementById("save_preset").classList.add("hidden");
document.getElementById("log_popup").classList.add("hidden");
closePopups();
//unselect sampler items
for (temp of document.getElementsByClassName("sample_order")) {
temp.classList.remove("selected");
}
const finderContainer = document.getElementById("finder-container");
finderContainer.classList.add("hidden");
}
function toggle_flyout(x) {
@@ -3981,9 +3978,7 @@ async function downloadDebugFile(redact=true) {
}
function configurePrompt(placeholderData) {
console.log(placeholderData);
const container = document.querySelector("#prompt-config-container");
container.classList.remove("hidden");
openPopup("prompt-config");
const placeholders = document.querySelector("#prompt-config-placeholders");
@@ -4021,7 +4016,7 @@ function sendPromptConfiguration() {
socket.emit("configure_prompt", data);
document.querySelector("#prompt-config-container").classList.add("hidden");
closePopups();
$(".prompt-config-ph").remove();
}
@@ -4168,26 +4163,29 @@ function highlightEl(element) {
return;
}
let area = $(element).closest(".tab-target")[0];
if (!area) {
console.error("No error? :^(");
return;
const area = $(element).closest(".tab-target")[0];
if (area) {
// If we need to click a tab to make the element visible, do so.
let tab = Array.from($(".tab")).filter((c) => c.getAttribute("tab-target") === area.id)[0];
tab.click();
}
let tab = Array.from($(".tab")).filter((c) => c.getAttribute("tab-target") === area.id)[0];
tab.click();
element.scrollIntoView();
return element;
}
function focusEl(element) {
const el = highlightEl(element);
if (el) el.focus();
}
function addSearchListing(action, highlight) {
const finderContainer = document.getElementById("finder-container");
const finder = document.getElementById("finder");
let result = document.createElement("div");
result.classList.add("finder-result");
result.addEventListener("click", function(event) {
finderContainer.classList.add("hidden");
closePopups();
action.func();
});
@@ -4601,14 +4599,13 @@ function cycleFinderMode() {
}
function open_finder() {
const finderContainer = document.getElementById("finder-container");
const finderInput = document.getElementById("finder-input");
finderInput.value = "";
$(".finder-result").remove();
finder_selection_index = -1;
updateFinderMode("ui");
finderContainer.classList.remove("hidden");
openPopup("finder");
finderInput.focus();
}
@@ -4682,7 +4679,7 @@ function updateTitle() {
}
function openClubImport() {
document.getElementById("import_aidg_club_popup").classList.remove("hidden");
openPopup("aidg-import-popup");
}
//// INIT ////
@@ -4691,6 +4688,34 @@ document.onkeydown = detect_key_down;
document.onkeyup = detect_key_up;
document.getElementById("input_text").onkeydown = detect_enter_submit;
/* -- Popups -- */
function openPopup(id) {
closePopups();
const container = $el("#popup-container");
container.classList.remove("hidden");
for (const popupWindow of container.children) {
popupWindow.classList.add("hidden");
}
const popup = $el(`#${id}`);
popup.classList.remove("hidden");
}
function closePopups() {
const container = $el("#popup-container");
container.classList.add("hidden");
for (const popupWindow of container.children) {
popupWindow.classList.add("hidden");
}
}
$el("#popup-container").addEventListener("click", function(event) {
if (event.target === this) closePopups();
});
/* -- Colab Cookie Handling -- */
if (colab_cookies != null) {
for (const cookie of Object.keys(colab_cookies)) {
@@ -4767,7 +4792,6 @@ process_cookies();
/* -- Finder -- */
(function() {
const finderContainer = document.getElementById("finder-container");
const finderInput = document.getElementById("finder-input");
const finderIcon = document.getElementById("finder-icon");
@@ -4870,26 +4894,8 @@ process_cookies();
finder_selection_index = future;
updateFinderSelection(delta);
});
finderContainer.addEventListener("click", function(e) {
if (e.target !== this) return;
finderContainer.classList.add("hidden");
});
})();
/* -- Debug File -- */
(function() {
const debugContainer = document.getElementById("debug-file-container");
// TODO: All of this generic backdrop code really sucks. There should be a
// standardised thing for popups that adds the dimmed backdrop and standard
// closing, etc.
debugContainer.addEventListener("click", function(e) {
debugContainer.classList.add("hidden");
});
})();
/* -- Context Menu -- */
(function() {
const contextMenu = $e("div", document.body, {id: "context-menu", classes: ["hidden"]});
@@ -5334,19 +5340,29 @@ function initalizeTooltips() {
}
/* -- Shortcuts -- */
document.addEventListener("keydown", function(event) {
if (!event.ctrlKey) return;
(function() {
document.addEventListener("keydown", function(event) {
if (!event.ctrlKey) return;
switch (event.key) {
// TODO: Add other shortcuts
case "k":
open_finder()
for (const shortcut of shortcuts) {
if (shortcut.key !== event.key) continue;
event.preventDefault();
break;
}
});
shortcut.func();
}
});
// Display shortcuts in popup
const shortcutContainer = $el("#shortcut-container");
for (const shortcut of shortcuts) {
const shortcutRow = $e("div", shortcutContainer, {classes: ["shortcut-item"]});
const shortcutEl = $e("div", shortcutRow, {classes: ["shortcut-keys"]});
for (const key of ["Ctrl", shortcut.key.toUpperCase()]) {
console.log("HELLO")
$e("span", shortcutEl, {classes: ["shortcut-key"], innerText: key});
}
const shortcutDesc = $e("div", shortcutRow, {classes: ["shortcut-desc"], innerText: shortcut.desc});
}
})();
//function to load more actions if nessisary
function infinite_scroll() {

345
templates/popups.html
View File

@@ -1,175 +1,176 @@
<!------------------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 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 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 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="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 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 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>
<!---------------- Story overwrite screen ---------------------->
<div id="save-confirm" class="popup-window popup">
<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>
<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>
<!---------------- Save Preset screen ---------------------->
<div id="save-preset" class="popup-window popup">
<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>
<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>
<!---------------- Import aidg.club Prompt ---------------------->
<div id="aidg-import-popup" class="popup-window 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);closePopups();">Accept</button>
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Cancel</button>
</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>
<!---------------- error screen ---------------------->
<div id="error-popup" class="popup-window popup">
<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>
<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>
<!---------------- log screen ---------------------->
<div id="log-popup" class="popup-window 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="closePopups();">Ok</button>
</div>
</div>
<div id="popup_list_area" class="popup_list_area" style="overflow-x: scroll;">
<!---------------- Advanced Theme Editor ---------------------->
<div id="advanced_theme_editor" class="popup-window popup">
<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>
<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>
<!---------------- Context Viewer ---------------------->
<div id="context-viewer-container" class="hidden">
<div id="context-viewer">
<div id="context-viewer-header">
<!---------------- Context Viewer ---------------------->
<div id="context-viewer" class="popup-window">
<div id="context-viewer-header" class="popup-header">
<h3 class="noselect">Context Viewer</h3>
<div id="context-viewer-header-right">
<div>
@@ -184,7 +185,7 @@
<span class="noselect context-block-example context-submit">Submit</span>
</div>
</div>
<span id="context-viewer-close" class="material-icons-outlined" onclick='$el("#context-viewer-container").classList.add("hidden");'>close</span>
<span id="context-viewer-close" class="material-icons-outlined" onclick='closePopups();'>close</span>
</div>
</div>
<span class="help_text">
@@ -193,10 +194,9 @@
</span>
<div id="context-container"></div>
</div>
</div>
<!---------------- Finder ---------------------->
<div id="finder-container" class="hidden">
<div id="finder">
<!---------------- Finder ---------------------->
<div id="finder" class="popup-window">
<div id="finder-bar">
<input id="finder-input" placeholder="Search for something..."></input>
<span id="finder-icon" class="material-icons-outlined">search</span>
@@ -212,11 +212,9 @@
a threat to society
</span>
</div>
</div>
<!---------------- Debug File ---------------------->
<div id="debug-file-container" class="hidden">
<div id="debug-file-prompt">
<!---------------- Debug File ---------------------->
<div id="debug-file-prompt" class="popup-window">
<div id="redacted" onclick="downloadDebugFile(true);">
<span class="focus">Download debug file</span>
<span class="help_text">Sensitive information, including any story data, is redacted.</span>
@@ -229,11 +227,9 @@
</span>
</div>
</div>
</div>
<!---------------- Prompt Config ------------------->
<div id="prompt-config-container" class="hidden">
<div id="prompt-config">
<!---------------- Prompt Config ------------------->
<div id="prompt-config" class="popup-window">
<div id="prompt-config-header">
<h3 class="noselect">Prompt Configuration</h3>
<span class="help_text">This prompt has placeholders you need to fill in before starting.</span>
@@ -243,4 +239,13 @@
<div id="prompt-config-placeholders"></div>
<div id="prompt-config-done" onclick="sendPromptConfiguration();">Done</div>
</div>
<!---------------- Shortcuts ------------------->
<div id="shortcuts-popup" class="popup-window">
<div class="popup-header">
<h2>Shortcuts</h2>
<span class="popup-close material-icons-outlined" onclick='closePopups();'>close</span>
</div>
<div id="shortcut-container"></div>
</div>
</div>

6
templates/settings flyout.html
View File

@@ -107,7 +107,7 @@
<div id="probabilities">
</div>
<span id="debug-dump" class="cursor" onclick="document.getElementById('debug-file-container').classList.remove('hidden');">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);$el("#context-viewer-container").classList.remove("hidden");'>
<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>

2
themes/Darkness.css
View File

@@ -310,7 +310,7 @@
/* Context Viewer */
#context-viewer-header {
.popup-header {
background-color: #141414 !important;
}

2
themes/Monochrome.css
View File

@@ -315,7 +315,7 @@
/* Context Viewer */
#context-viewer-header {
.popup-header {
background-color: #1e2f44 !important;
}

2
themes/Nostalgia.css
View File

@@ -281,7 +281,7 @@
/* Context Viewer */
#context-viewer-header {
.popup-header {
background-color: #262626 !important;
}

2
themes/Unicorn.css
View File

@@ -332,7 +332,7 @@
/* Context Viewer */
#context-viewer-header {
.popup-header {
background-color: #a04a51 !important;
}