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

Browse Source
This commit is contained in:
ebolam
2022-10-30 12:50:29 -04:00
parent 9aaec13e1f 3c403b0a89
commit f6c0f42776
4 changed files with 173 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
static/application.js
View File

@@ -79,6 +79,7 @@ var rs_close;
var seqselmenu;
var seqselcontents;
var stream_preview;
var stream_preview_text;
var token_prob_container;
var storyname = null;
@@ -2151,6 +2152,7 @@ function endStream() {
if (stream_preview) {
stream_preview.remove();
stream_preview = null;
stream_preview_text = null;
}
}
@@ -2390,10 +2392,14 @@ $(document).ready(function(){
if (!stream_preview && streamingEnabled) {
stream_preview = document.createElement("span");
game_text.append(stream_preview);
stream_preview_text = "";
}
for (const token of msg.data) {
if (streamingEnabled) stream_preview.innerText += token.decoded;
if (streamingEnabled) {
stream_preview_text += token.decoded;
stream_preview.innerText = stream_preview_text;
}
if (probabilitiesEnabled) {
// Probability display
@@ -3800,4 +3806,4 @@ function getSelectedOptions(element) {
output.push(item.value);
}
return output;
}
}

40
static/koboldai.css
View File

@@ -2566,6 +2566,46 @@ body {
to { width: 0%; }
}
/* WI Delete Confirm */
#confirm-delete-dialog {
background-color: var(--popup_background_color);
padding: 10px;
min-width: 40vw;
}
#confirm-buttons {
display: flex;
width: 100%;
justify-content: center;
gap: 10px;
margin-top: 10px;
}
#confirm-deny-button { background-color: var(--button_background); }
#confirm-confirm-button { background-color: #974040; }
.confirm-button {
display: inline-flex;
height: 32px;
flex-basis: 50%;
align-items: center;
justify-content: center;
cursor: pointer;
}
.confirm-button > .material-icons-outlined {
opacity: 0.7;
}
.confirm-button > .text {
position: relative;
top: 2px;
}
/*---------------------------------- Global ------------------------------------------------*/
.hidden {
display: none;

134
static/koboldai.js
View File

@@ -109,9 +109,9 @@ const context_menu_actions = [
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: "z", desc: "Undoes last story action", func: () => socket.emit("back", {}), criteria: canNavigateStoryHistory},
{key: "y", desc: "Redoes last story action", func: () => socket.emit("redo", {}), criteria: canNavigateStoryHistory},
{key: "e", desc: "Retries last story action", func: () => socket.emit("retry", {}), criteria: canNavigateStoryHistory},
{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")},
@@ -953,15 +953,17 @@ function redrawPopup() {
delete_icon.id = row.path;
delete_icon.setAttribute("folder", row.isFolder);
delete_icon.onclick = function () {
if (this.getAttribute("folder") == "true") {
if (window.confirm("Do you really want to delete this folder and ALL files under it?")) {
socket.emit("popup_delete", this.id);
const message = this.getAttribute("folder") == "true" ? "Do you really want to delete this folder and ALL files under it?" : "Do you really want to delete this file?";
const delId = this.id;
deleteConfirmation(
[{text: message}],
confirmText="Go for it.",
denyText="I've changed my mind!",
confirmCallback=function() {
socket.emit("popup_delete", delId);
}
} else {
if (window.confirm("Do you really want to delete this file?")) {
socket.emit("popup_delete", this.id);
}
}
);
};
}
icon_area.append(delete_icon);
@@ -1746,13 +1748,24 @@ function world_info_entry(data) {
delete_icon.setAttribute("uid", data.uid);
delete_icon.setAttribute("wi-title", data.title);
delete_icon.onclick = function () {
if (confirm("This will delete world info "+this.getAttribute("wi-title"))) {
if (parseInt(this.getAttribute("uid")) < 0) {
this.parentElement.parentElement.remove();
} else {
socket.emit("delete_world_info", this.getAttribute("uid"));
const wiTitle = this.getAttribute("wi-title");
const wiUid = parseInt(this.getAttribute("uid"));
const wiElement = this.parentElement.parentElement;
deleteConfirmation([
{text: "You're about to delete World Info entry "},
{text: wiTitle, format: "bold"},
{text: ". Are you alright with this?"},
],
confirmText="Go for it.",
denyText="I've changed my mind!",
confirmCallback=function() {
if (wiUid < 0) {
wiElement.remove();
} else {
socket.emit("delete_world_info", wiUid);
}
}
}
);
}
tags = world_info_card.querySelector('.world_info_tag_primary_area');
tags.id = "world_info_tags_"+data.uid;
@@ -2119,10 +2132,19 @@ function world_info_folder(data) {
delete_button.setAttribute("folder", folder_name);
delete_button.textContent = "delete";
delete_button.onclick = function () {
if (window.confirm("Do you really want to delete this World Info folder and ALL entries under it?")) {
socket.emit("delete_wi_folder", this.getAttribute("folder"));
}
};
const folderName = this.getAttribute("folder");
deleteConfirmation([
{text: "You're about to delete World Info folder "},
{text: folderName, format: "bold"},
{text: " and the "},
{text: countWIFolderChildren(folderName), format: "bold"},
{text: " entries inside it. Are you sure?"},
],
confirmText="Go for it.",
denyText="I've changed my mind!",
confirmCallback=function() { socket.emit("delete_wi_folder", folderName); }
);
};
delete_button.classList.add("delete");
title.append(delete_button);
@@ -2405,9 +2427,15 @@ 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', '');
}
deleteConfirmation([
{text: "You asked for a new story but your current story has not been saved. If you continue you will loose your changes."},
],
confirmText="Go for it.",
denyText="I've changed my mind!",
confirmCallback=function() {
socket.emit('new_story', '');
}
);
} else {
socket.emit('new_story', '');
}
@@ -5461,6 +5489,7 @@ function initalizeTooltips() {
for (const shortcut of shortcuts) {
if (shortcut.key !== event.key) continue;
if (shortcut.criteria && !shortcut.criteria()) continue;
event.preventDefault();
shortcut.func();
}
@@ -5499,7 +5528,9 @@ function reportError(title, text) {
showNotification(title, text, "error");
}
showNotification("Be aware!", "Things are happening at an alarming pace!");
function canNavigateStoryHistory() {
return !["TEXTAREA", "INPUT"].includes(document.activeElement.tagName);
}
//function to load more actions if nessisary
function infinite_scroll() {
@@ -5552,4 +5583,57 @@ function run_infinite_scroll_update(action_type, actions, first_action) {
}
}
}
function countWIFolderChildren(folder) {
let count = 0;
for (const wi of Object.values(world_info_data)) {
if (wi.folder === folder) count += 1;
}
return count;
}
function sFormatted2HTML(sFormatted) {
// "sFormatted" is a rudimentary solution to safe formatting
let outHTML = "";
for (const chunk of sFormatted) {
// Expand as needed
let format = {
bold: "<b>%s</b>",
italic: "<i>%s</i>"
}[chunk.format] || "%s";
// This actually sucks but apparently the best recognized way to escape
// HTML in JavaScript is just "make an element real quick and slap some
// text in it."
let escaped = new Option(chunk.text).innerHTML;
outHTML += format.replace("%s", escaped);
}
return outHTML;
}
function deleteConfirmation(sFormatted, confirmText, denyText, confirmCallback, denyCallback) {
$el("#confirm-text").innerHTML = sFormatted2HTML(sFormatted);
$el("#confirm-confirm-button > .text").innerText = confirmText;
$el("#confirm-deny-button > .text").innerText = denyText;
const confirmButton = $el("#confirm-confirm-button")
confirmButton.onclick = function() {
confirmCallback();
closePopups();
confirmButton.onclick = undefined;
}
const denyButton = $el("#confirm-deny-button")
denyButton.onclick = function() {
// No-op if no deny callback
(denyCallback || function(){})();
closePopups();
confirmButton.onclick = undefined;
}
openPopup("confirm-delete-dialog");
}

16
templates/popups.html
View File

@@ -267,6 +267,22 @@
<button type="button" class="btn btn-primary popup_load_cancel_button" onclick="closePopups();">Ok</button>
</div>
</div>
<!-- WI deletion confirmation -->
<div id="confirm-delete-dialog">
<span id="confirm-text">You're about to delete World Info folder <b>evil and malice</b> and the <b>infinite</b> entries inside it. Are you sure?</span>
<div id="confirm-buttons">
<div id="confirm-deny-button" class="confirm-button">
<span class="material-icons-outlined">close</span>
<span class="text">I've changed my mind!</span>
</div>
<div id="confirm-confirm-button" class="confirm-button">
<span class="material-icons-outlined">delete</span>
<span class="text">Go for it.</span>
</div>
</div>
</div>
</div>
<div id="notification-container"></div>