World Info Frontend Functional (Everything editable and syncs to Backend)

This commit is contained in:
ebolam
2022-08-01 12:35:26 -04:00
parent 926e8d7106
commit 948a870580
3 changed files with 80 additions and 12 deletions

View File

@@ -6360,6 +6360,19 @@ def UI_2_Rename_World_Info_Folder(data):
print(data) print(data)
koboldai_vars.worldinfo_v2.rename_folder(data['old_folder'], data['new_folder']) koboldai_vars.worldinfo_v2.rename_folder(data['old_folder'], data['new_folder'])
#==================================================================#
# Event triggered when user edits world info item
#==================================================================#
@socketio.on('edit_world_info')
def UI_2_edit_world_info(data):
print("Rename_World_Info_Folder")
print(data)
koboldai_vars.worldinfo_v2.edit_item(data['uid'], data['title'], data['key'],
data['keysecondary'], data['folder'],
data['constant'], data['content'],
data['comment'])
#==================================================================# #==================================================================#
# Event triggered to rely a message # Event triggered to rely a message

View File

@@ -799,7 +799,8 @@ class KoboldWorldInfo(object):
self.world_info_folder[folder].insert(i, uid) self.world_info_folder[folder].insert(i, uid)
break break
print({x: self.world_info_folder[x] for x in self.world_info_folder}) #Finally, adjust the folder tag in the element
self.world_info[uid]['folder'] = folder
self.socketio.emit("world_info_folder", {x: self.world_info_folder[x] for x in self.world_info_folder}, broadcast=True, room="UI_2") self.socketio.emit("world_info_folder", {x: self.world_info_folder[x] for x in self.world_info_folder}, broadcast=True, room="UI_2")
def add_item(self, title, key, keysecondary, folder, constant, content, comment): def add_item(self, title, key, keysecondary, folder, constant, content, comment):
@@ -847,10 +848,10 @@ class KoboldWorldInfo(object):
self.socketio.emit("world_info_entry", self.world_info[uid], broadcast=True, room="UI_2") self.socketio.emit("world_info_entry", self.world_info[uid], broadcast=True, room="UI_2")
def edit_item(self, uid, title, key, keysecondary, folder, constant, content, comment, before=None): def edit_item(self, uid, title, key, keysecondary, folder, constant, content, comment, before=None):
old_folder = self.world_info[uid] old_folder = self.world_info[uid]['folder']
#move the world info entry if the folder changed or if there is a new order requested #move the world info entry if the folder changed or if there is a new order requested
if old_folder != folder or before is not None: if old_folder != folder or before is not None:
self.add_item_to_world_info_folder(uid, folder, before=before) self.add_item_to_folder(uid, folder, before=before)
if self.tokenizer is not None: if self.tokenizer is not None:
token_length = len(self.tokenizer.encode(content)) token_length = len(self.tokenizer.encode(content))
else: else:
@@ -899,7 +900,6 @@ class KoboldWorldInfo(object):
self.socketio.emit("world_info_folder", {x: self.world_info_folder[x] for x in self.world_info_folder}, broadcast=True, room="UI_2") self.socketio.emit("world_info_folder", {x: self.world_info_folder[x] for x in self.world_info_folder}, broadcast=True, room="UI_2")
def reorder(self, uid, before): def reorder(self, uid, before):
print("reorder")
self.add_item_to_folder(uid, self.world_info[before]['folder'], before=before) self.add_item_to_folder(uid, self.world_info[before]['folder'], before=before)
def send_to_ui(self): def send_to_ui(self):

View File

@@ -1243,6 +1243,16 @@ function world_info_entry(data) {
title = world_info_card.querySelector('#world_info_title_') title = world_info_card.querySelector('#world_info_title_')
title.id = "world_info_title_"+data.uid; title.id = "world_info_title_"+data.uid;
title.textContent = data.title; title.textContent = data.title;
title.setAttribute("uid", data.uid);
title.setAttribute("original_text", data.title);
title.setAttribute("contenteditable", true);
title.onblur = function () {
if (this.textContent != this.getAttribute("original_text")) {
world_info_data[this.getAttribute('uid')]['title'] = this.textContent;
send_world_info(this.getAttribute('uid'));
this.classList.add("pulse");
}
}
world_info_card.addEventListener('dragstart', dragStart); world_info_card.addEventListener('dragstart', dragStart);
title.addEventListener('dragenter', dragEnter) title.addEventListener('dragenter', dragEnter)
title.addEventListener('dragover', dragOver); title.addEventListener('dragover', dragOver);
@@ -1259,10 +1269,22 @@ function world_info_entry(data) {
add_secondary_tags(secondarytags, data); add_secondary_tags(secondarytags, data);
content = world_info_card.querySelector('#world_info_entry_text_'); content = world_info_card.querySelector('#world_info_entry_text_');
content.id = "world_info_entry_text_"+data.uid; content.id = "world_info_entry_text_"+data.uid;
content.setAttribute("uid", data.uid);
content.value = data.content; content.value = data.content;
content.onchange = function () {
world_info_data[this.getAttribute('uid')]['content'] = this.textContent;
send_world_info(this.getAttribute('uid'));
this.classList.add("pulse");
}
comment = world_info_card.querySelector('#world_info_comment_'); comment = world_info_card.querySelector('#world_info_comment_');
comment.id = "world_info_comment_"+data.uid; comment.id = "world_info_comment_"+data.uid;
content.setAttribute("uid", data.uid);
comment.value = data.comment; comment.value = data.comment;
comment.onchange = function () {
world_info_data[this.getAttribute('uid')]['comment'] = this.textContent;
send_world_info(this.getAttribute('uid'));
this.classList.add("pulse");
}
if (!(document.getElementById("world_info_folder_"+data.folder))) { if (!(document.getElementById("world_info_folder_"+data.folder))) {
folder = document.createElement("div"); folder = document.createElement("div");
console.log("Didn't find folder " + data.folder); console.log("Didn't find folder " + data.folder);
@@ -1438,7 +1460,24 @@ function upload_file(file_box) {
} }
} }
function send_world_info(uid) {
console.log("Upload World Info "+uid);
console.log(world_info_data[uid]);
socket.emit("edit_world_info", world_info_data[uid]);
}
//--------------------------------------------General UI Functions------------------------------------ //--------------------------------------------General UI Functions------------------------------------
function removeA(arr) {
var what, a = arguments, L = a.length, ax;
while (L > 1 && arr.length) {
what = a[--L];
while ((ax= arr.indexOf(what)) !== -1) {
arr.splice(ax, 1);
}
}
return arr;
}
function add_tags(tags, data) { function add_tags(tags, data) {
for (tag of data.key) { for (tag of data.key) {
tag_item = document.createElement("span"); tag_item = document.createElement("span");
@@ -1449,7 +1488,9 @@ function add_tags(tags, data) {
x.setAttribute("uid", data.uid); x.setAttribute("uid", data.uid);
x.setAttribute("tag", tag); x.setAttribute("tag", tag);
x.onclick = function () { x.onclick = function () {
socket.emit('delete_wi_tag', {'uid': this.getAttribute('data.uid'), 'key': this.getAttribute('tag')}); removeA(world_info_data[this.getAttribute('uid')]['key'], this.getAttribute('tag'));
send_world_info(this.getAttribute('uid'));
this.classList.add("pulse");
}; };
text = document.createElement("span"); text = document.createElement("span");
text.textContent = tag; text.textContent = tag;
@@ -1457,7 +1498,12 @@ function add_tags(tags, data) {
text.setAttribute("uid", data.uid); text.setAttribute("uid", data.uid);
text.setAttribute("tag", tag); text.setAttribute("tag", tag);
text.onblur = function () { text.onblur = function () {
socket.emit('change_wi_tag', {'uid': this.getAttribute('uid'), 'key': this.getAttribute('tag'), 'new_tag': this.textContent}); for (var i = 0; i < world_info_data[this.getAttribute('uid')]['key'].length; i++) {
if (world_info_data[this.getAttribute('uid')]['key'][i] == this.getAttribute("tag")) {
world_info_data[this.getAttribute('uid')]['key'][i] = this.textContent;
}
}
send_world_info(this.getAttribute('uid'));
this.classList.add("pulse"); this.classList.add("pulse");
}; };
tag_item.append(x); tag_item.append(x);
@@ -1477,8 +1523,9 @@ function add_tags(tags, data) {
text.setAttribute("uid", data.uid); text.setAttribute("uid", data.uid);
text.setAttribute("contenteditable", true); text.setAttribute("contenteditable", true);
text.onblur = function () { text.onblur = function () {
socket.emit('new_wi_tag', {'uid': this.getAttribute('uid'), 'key': this.textContent}); world_info_data[this.getAttribute('uid')]['key'].push(this.textContent);
this.parentElement.remove(); send_world_info(this.getAttribute('uid'));
this.classList.add("pulse");
}; };
text.onclick = function () { text.onclick = function () {
this.textContent = ""; this.textContent = "";
@@ -1498,7 +1545,9 @@ function add_secondary_tags(tags, data) {
x.setAttribute("uid", data.uid); x.setAttribute("uid", data.uid);
x.setAttribute("tag", tag); x.setAttribute("tag", tag);
x.onclick = function () { x.onclick = function () {
socket.emit('delete_wi_secondary_tag', {'uid': this.getAttribute('uid'), 'key': this.getAttribute('tag')}); removeA(world_info_data[this.getAttribute('uid')]['keysecondary'], this.getAttribute('tag'));
send_world_info(this.getAttribute('uid'));
this.classList.add("pulse");
}; };
text = document.createElement("span"); text = document.createElement("span");
text.textContent = tag; text.textContent = tag;
@@ -1506,7 +1555,12 @@ function add_secondary_tags(tags, data) {
text.setAttribute("uid", data.uid); text.setAttribute("uid", data.uid);
text.setAttribute("tag", tag); text.setAttribute("tag", tag);
text.onblur = function () { text.onblur = function () {
socket.emit('change_wi_secondary_tag', {'uid': this.getAttribute('uid'), 'key': this.getAttribute('tag'), 'new_tag': this.textContent}); for (var i = 0; i < world_info_data[this.getAttribute('uid')]['keysecondary'].length; i++) {
if (world_info_data[this.getAttribute('uid')]['keysecondary'][i] == this.getAttribute("tag")) {
world_info_data[this.getAttribute('uid')]['keysecondary'][i] = this.textContent;
}
}
send_world_info(this.getAttribute('uid'));
this.classList.add("pulse"); this.classList.add("pulse");
}; };
tag_item.append(x); tag_item.append(x);
@@ -1526,8 +1580,9 @@ function add_secondary_tags(tags, data) {
text.setAttribute("uid", data.uid); text.setAttribute("uid", data.uid);
text.setAttribute("contenteditable", true); text.setAttribute("contenteditable", true);
text.onblur = function () { text.onblur = function () {
socket.emit('new_wi_secondary_tag', {'uid': this.getAttribute('uid'), 'key': this.textContent}); world_info_data[this.getAttribute('uid')]['keysecondary'].push(this.textContent);
this.parentElement.remove(); send_world_info(this.getAttribute('uid'));
this.classList.add("pulse");
}; };
text.onclick = function () { text.onclick = function () {
this.textContent = ""; this.textContent = "";