So much for that 100px hack
This commit is contained in:
somebody
2022-09-11 21:41:37 -05:00
parent 0425d87b29
commit 6fb372c5e1
3 changed files with 175 additions and 43 deletions

View File

@@ -7481,7 +7481,7 @@ def UI_2_import_world_info(data):
koboldai_vars.worldinfo_v2.add_item_to_folder(uids[child], folder_name)
@socketio.on("search_wi")
def UI_2_load_softprompt_list(data):
def UI_2_search_wi(data):
query = data["query"].lower()
full_data = koboldai_vars.worldinfo_v2.to_json()
@@ -7502,6 +7502,32 @@ def UI_2_load_softprompt_list(data):
socketio.emit("wi_results", results, broadcast=True, room="UI_2")
@socketio.on("update_wi_attribute")
def UI_2_update_wi_attribute(data):
uid, key, value = data["uid"], data["key"], data["value"]
koboldai_vars.worldinfo_v2.world_info[uid][key] = value
socketio.emit("world_info_entry", koboldai_vars.worldinfo_v2.world_info[uid], broadcast=True, room="UI_2")
@socketio.on("update_wi_keys")
def UI_2_update_wi_attribute(data):
uid, key, is_secondary, operation = data["uid"], data["key"], data["is_secondary"], data["operation"]
keykey = "key" if not is_secondary else "keysecondary"
key_exists = key in koboldai_vars.worldinfo_v2.world_info[uid][keykey]
if operation == "add":
if not key_exists:
koboldai_vars.worldinfo_v2.world_info[uid][keykey].append(key)
elif operation == "remove":
if key_exists:
koboldai_vars.worldinfo_v2.world_info[uid][keykey].remove(key)
if keykey == "keysecondary":
koboldai_vars.worldinfo_v2.world_info[uid]["selective"] = len(koboldai_vars.worldinfo_v2.world_info[uid]["keysecondary"]) > 0
# Send to UI
socketio.emit("world_info_entry", koboldai_vars.worldinfo_v2.world_info[uid], broadcast=True, room="UI_2")
#==================================================================#
# Event triggered when user edits phrase biases

View File

@@ -1932,8 +1932,6 @@ body {
}
.finder-wi-focus {
/* This MUST be a percentage before pushing. The 100px is a workaround but
i've got to find a solution otherwiseit causes visual bugs on shorter screens */
margin-top: -100px;
height: calc(100% + 100px) !important;
@@ -1945,6 +1943,7 @@ body {
background-color: var(--flyout_background_pinned);
height: 100%;
flex-grow: 1;
flex-basis: 50%;
overflow-y: hidden;
filter: brightness(70%);
padding: 0px 7px;
@@ -1970,6 +1969,10 @@ body {
height: 30%;
}
.finder-wi-keys {
margin-bottom: 8px;
}
.finder-wi-added-keys {
display: inline-block;
}
@@ -1984,11 +1987,6 @@ body {
.tag-text { cursor: text; }
[data-placeholder]:empty:before {
content: attr(data-placeholder);
opacity: 0.6;
}
.finder-wi-activation-header-container {
display: flex;
justify-content: space-between;
@@ -2005,20 +2003,29 @@ body {
column-gap: 5px;
}
.finder-wi-blanket {
position: absolute;
/* Hack */
width: 99%;
height: 100%;
cursor: pointer;
}
/*---------------------------------- Global ------------------------------------------------*/
.hidden {
display: none;
}
.block {
display: block;
}
.disabled {
opacity: 0.4;
pointer-events: none;
}
[data-placeholder]:empty:before {
content: attr(data-placeholder);
opacity: 0.6;
}
#input_text {
grid-area: textarea;
background-color: var(--input_background);

View File

@@ -44,6 +44,8 @@ var world_info_folder_data = {};
var saved_settings = {};
var finder_selection_index = -1;
var on_colab;
var wi_finder_data = [];
var wi_finder_offset = 0;
// name, desc, icon, func
const finder_actions = [
@@ -3391,30 +3393,74 @@ function $e(tag, parent, attributes) {
return element;
}
function makeFinderWITag(name, container, isPrimary) {
function makeFinderWITag(name, container, isPrimary, uid) {
let wiTag = $e("span", container, {classes: ["tag"]});
let wiTagIcon = $e("span", wiTag, {classes: ["finder-wi-tag-icon", "material-icons-outlined"], innerText: "close"});
let wiTagText = $e("span", wiTag, {innerText: name, contenteditable: true});
wiTagIcon.addEventListener("click", function(e) {
// TODO: Server
socket.emit(
"update_wi_keys",
{uid: parseInt(uid), key: name, is_secondary: !isPrimary, operation: "remove"}
);
wiTag.remove();
});
}
function updateWISearchListings(entry) {
const wiCarousel = document.getElementById("finder-wi-carousel");
function updateWIInfo(event) {
// Should be a change event or something similar. This WILL send an update
// packet on each unfocus in some cases. It's not that big of a deal, right? :p
let entries = Object.values(entry).flat().slice(0, 3);
let key = event.target.getAttribute("wi-sync");
if ("checked" in event.target) {
// checkbox / toggle
value = event.target.checked;
} else if ("value" in event.target) {
// standard inputs
value = event.target.value;
} else {
// contenteditable
value = event.target.innerText
}
let uid = $(event.target).closest(".finder-wi-block")[0].getAttribute("wi-uid");
socket.emit("update_wi_attribute", {uid: parseInt(uid), key: key, value: value});
}
function updateWISearchListings(data) {
wi_finder_offset = 0;
wi_finder_data = Object.values(data).flat();
renderWISearchListings();
}
function renderWISearchListings() {
const wiCarousel = document.getElementById("finder-wi-carousel");
$(".finder-wi-block").remove();
let data = Array.from(wi_finder_data);
// No need for excessive shifting
let realOffset = wi_finder_offset % data.length;
// Make first be central
if (data.length > 2) realOffset--;
// Wrap around
if (realOffset < 0) realOffset += data.length;
// Actual data wrap
for (let i=0;i<realOffset;i++) {
data.push(data.shift());
}
let entries = data.slice(0, 3);
// Visual spacing-- this kinda sucks
if (entries.length == 1) entries = [null, entries[0], null];
if (entries.length == 2) entries = [null, ...entries];
console.log(entries);
for (const [i, entry] of entries.entries()) {
let wiBlock = $e("div", wiCarousel, {classes: ["finder-wi-block"]});
let wiBlock = $e("div", wiCarousel, {classes: ["finder-wi-block"], "wi-uid": entry ? entry.uid : "null"});
// Spacer hack
if (!entry) {
@@ -3422,50 +3468,99 @@ function updateWISearchListings(entry) {
continue;
}
// Focus is the center highlighted one. If there is 3 entries (max),
// the important one is at the center. Otherwise, the important one is
// in the front.
if ((i == 1 && entries.length == 3) || (i == 0 && entries.length < 3)) {
// The "position" relative to others.
let current = "center";
if (entries.length == 3) {
if (i !== 1) current = (i == 0) ? "left" : "right";
} else if (entries.length == 2) {
if (i === 1) current = "right";
}
if (current !== "center") {
let blanket = $e("div", wiBlock, {classes: ["finder-wi-blanket"]});
}
if (current === "left") {
wiBlock.addEventListener("click", function(event) {
wi_finder_offset--;
renderWISearchListings();
event.preventDefault();
});
} else if (current === "right") {
wiBlock.addEventListener("click", function(event) {
wi_finder_offset++;
renderWISearchListings();
event.preventDefault();
});
} else if (current === "center") {
// Focus is the center highlighted one. If there is 3 entries (max),
// the important one is at the center. Otherwise, the important one
// is in the front.
wiBlock.classList.add("finder-wi-focus");
}
let wiTitle = $e("span", wiBlock, {classes: ["finder-wi-title"], innerText: entry.title, contenteditable: true, "data-placeholder": "Entry"});
wiTitle.addEventListener("keydown", function(e) {
if (e.key === "Enter") e.preventDefault();
let wiTitle = $e("span", wiBlock, {
classes: ["finder-wi-title"],
innerText: entry.title,
contenteditable: true,
"data-placeholder": "Entry",
"wi-sync": "title",
});
wiTitle.addEventListener("keydown", function(e) {
if (e.key === "Enter") {
e.preventDefault();
wiTitle.blur();
}
});
wiTitle.addEventListener("blur", updateWIInfo);
let wiTextLabel = $e("h3", wiBlock, {innerText: "Info", "style.margin": "10px 0px 5px 0px"});
/*
let wiContentLabel = $e("span", wiBlock, {
classes: ["block"], innerText: "Text: "
let wiContent = $e("textarea", wiBlock, {
classes: ["finder-wi-content"],
value: entry.content,
placeholder: "Write your World Info here!",
"wi-sync": "content",
});
*/
let wiContent = $e("textarea", wiBlock, {classes: ["finder-wi-content"], value: entry.content, placeholder: "Write your World Info here!"});
let wiComment = $e("textarea", wiBlock, {placeholder: "Comment"});
wiContent.addEventListener("blur", updateWIInfo);
let wiComment = $e("textarea", wiBlock, {
placeholder: "Comment",
value: entry.comment,
"wi-sync": "comment",
});
wiComment.addEventListener("blur", updateWIInfo);
let wiActivationHeaderContainer = $e("div", wiBlock, {classes: ["finder-wi-activation-header-container"]});
let wiActivationLabel = $e("h3", wiActivationHeaderContainer, {innerText: "Activation", "style.display": "inline"});
let wiAlwaysContainer = $e("div", wiActivationHeaderContainer, {classes: ["finder-wi-always-container"]});
let wiAlwaysLabel = $e("span", wiAlwaysContainer, {innerText: "Always Activate"});
let wiAlways = $e("input", wiAlwaysContainer, {type: "checkbox", "data-toggle": "toggle", "data-size": "mini", "data-onstyle": "success"});
let wiActivationHelp = $e("span", wiBlock, {classes: ["help_text"], innerText: "Change when the AI reads this World Info entry"})
let wiTagActivationContainer = $e("div", wiBlock);
let wiAlways = $e("input", wiAlwaysContainer, {
type: "checkbox",
"wi-sync": "constant",
});
$(wiAlways).change(function(e) {
console.log("<3!!")
updateWIInfo(e);
if (this.checked) {
wiTagActivationContainer.classList.add("disabled");
} else {
wiTagActivationContainer.classList.remove("disabled");
}
});
$(wiAlways).bootstrapToggle();
let wiActivationHelp = $e("span", wiBlock, {classes: ["help_text"], innerText: "Change when the AI reads this World Info entry"})
let wiTagActivationContainer = $e("div", wiBlock);
$(wiAlways).bootstrapToggle({
size: "mini",
onstyle: "success",
});
$(wiAlways).bootstrapToggle(entry.constant ? "on" : "off");
for (const isPrimary of [true, false]) {
let wiTagLabel = $e("span", wiTagActivationContainer, {
classes: ["block"],
"style.display": "block",
innerText: isPrimary ? "Requires one of:" : "And (if present):"
});
@@ -3477,7 +3572,7 @@ function updateWISearchListings(entry) {
// Existing keys
for (const key of entry.key) {
makeFinderWITag(key, wiAddedTagContainer);
makeFinderWITag(key, wiAddedTagContainer, isPrimary, entry.uid);
}
// The "fake key" add button
@@ -3486,11 +3581,15 @@ function updateWISearchListings(entry) {
let wiNewTagText = $e("span", wiNewTag, {classes: ["tag-text"], contenteditable: true, "data-placeholder": "Key"});
function newTag() {
// TODO: Server
let tagName = wiNewTagText.innerText;
wiNewTagText.innerText = "";
if (!tagName.trim()) return;
makeFinderWITag(tagName, wiAddedTagContainer, isPrimary)
makeFinderWITag(tagName, wiAddedTagContainer, isPrimary, entry.uid)
socket.emit(
"update_wi_keys",
{uid: parseInt(entry.uid), key: tagName, is_secondary: !isPrimary, operation: "add"}
);
}
wiNewTagText.addEventListener("blur", newTag);