mirror of
https://github.com/KoboldAI/KoboldAI-Client.git
synced 2025-06-05 21:59:24 +02:00
265 lines
8.9 KiB
JavaScript
265 lines
8.9 KiB
JavaScript
var socket;
|
|
socket = io.connect(window.location.origin, {transports: ['polling', 'websocket'], closeOnBeforeunload: false, query:{"ui": "2"}});
|
|
|
|
//Let's register our server communications
|
|
socket.on('connect', function(){connect();});
|
|
socket.on('disconnect', function(){disconnect();});
|
|
socket.on('reset_story', function(){reset_story();});
|
|
socket.on('var_changed', function(data){var_changed(data);});
|
|
//socket.onAny(function(event_name, data) {console.log({"event": event_name, "data": data});});
|
|
|
|
var backend_vars = {};
|
|
var presets = {}
|
|
//-----------------------------------Server to UI Functions-----------------------------------------------
|
|
function connect() {
|
|
console.log("connected");
|
|
}
|
|
|
|
function disconnect() {
|
|
console.log("disconnected");
|
|
}
|
|
|
|
function reset_story() {
|
|
var story_area = document.getElementById('Selected Text');
|
|
while (story_area.firstChild) {
|
|
story_area.removeChild(story_area.firstChild);
|
|
}
|
|
var option_area = document.getElementById("Select Options");
|
|
while (option_area.firstChild) {
|
|
option_area.removeChild(option_area.firstChild);
|
|
}
|
|
}
|
|
|
|
function fix_text(val) {
|
|
if (typeof val === 'string' || val instanceof String) {
|
|
if (val.includes("{")) {
|
|
return JSON.stringify(val);
|
|
} else {
|
|
return val;
|
|
}
|
|
} else {
|
|
return val;
|
|
}
|
|
}
|
|
|
|
function create_options(data) {
|
|
console.log(data.value.options);
|
|
if (document.getElementById("Select Options Chunk "+data.value.id)) {
|
|
var option_chunk = document.getElementById("Select Options Chunk "+data.value.id)
|
|
} else {
|
|
var option_area = document.getElementById("Select Options");
|
|
var option_chunk = document.createElement("div");
|
|
option_chunk.id = "Select Options Chunk "+data.value.id;
|
|
option_area.append(option_chunk);
|
|
}
|
|
//first, let's clear out our existing data
|
|
while (option_chunk.firstChild) {
|
|
option_chunk.removeChild(option_chunk.firstChild);
|
|
}
|
|
var table = document.createElement("table");
|
|
table.classList.add("sequence");
|
|
table.style = "border-spacing: 0;";
|
|
//Add pins
|
|
i=0;
|
|
for (item of data.value.options) {
|
|
if (item.Pinned) {
|
|
var row = document.createElement("tr");
|
|
row.classList.add("sequence");
|
|
var textcell = document.createElement("td");
|
|
textcell.textContent = item.text;
|
|
textcell.classList.add("sequence");
|
|
textcell.setAttribute("option_id", i);
|
|
textcell.setAttribute("option_chunk", data.value.id);
|
|
var iconcell = document.createElement("td");
|
|
iconcell.setAttribute("option_id", i);
|
|
iconcell.setAttribute("option_chunk", data.value.id);
|
|
var icon = document.createElement("span");
|
|
icon.id = "Pin_"+i;
|
|
icon.classList.add("oi");
|
|
icon.setAttribute('data-glyph', "pin");
|
|
iconcell.append(icon);
|
|
textcell.onclick = function () {
|
|
socket.emit("Set Selected Text", {"chunk": this.getAttribute("option_chunk"), "option": this.getAttribute("option_id")});
|
|
};
|
|
iconcell.onclick = function () {
|
|
socket.emit("Pinning", {"chunk": this.getAttribute("option_chunk"), "option": this.getAttribute("option_id"), "set": false});
|
|
};
|
|
row.append(textcell);
|
|
row.append(iconcell);
|
|
table.append(row);
|
|
}
|
|
i+=1;
|
|
}
|
|
//Add general options
|
|
i=0;
|
|
for (item of data.value.options) {
|
|
if (!(item.Edited) && !(item.Pinned) && !(item['Previous Selection'])) {
|
|
var row = document.createElement("tr");
|
|
row.classList.add("sequence");
|
|
var textcell = document.createElement("td");
|
|
textcell.textContent = item.text;
|
|
textcell.classList.add("sequence");
|
|
textcell.setAttribute("option_id", i);
|
|
textcell.setAttribute("option_chunk", data.value.id);
|
|
var iconcell = document.createElement("td");
|
|
iconcell.setAttribute("option_id", i);
|
|
iconcell.setAttribute("option_chunk", data.value.id);
|
|
var icon = document.createElement("span");
|
|
icon.id = "Pin_"+i;
|
|
icon.classList.add("oi");
|
|
icon.setAttribute('data-glyph', "pin");
|
|
icon.setAttribute('style', "filter: brightness(50%);");
|
|
iconcell.append(icon);
|
|
iconcell.onclick = function () {
|
|
socket.emit("Pinning", {"chunk": this.getAttribute("option_chunk"), "option": this.getAttribute("option_id"), "set": true});
|
|
};
|
|
textcell.onclick = function () {
|
|
socket.emit("Set Selected Text", {"chunk": this.getAttribute("option_chunk"), "option": this.getAttribute("option_id")});
|
|
};
|
|
row.append(textcell);
|
|
row.append(iconcell);
|
|
table.append(row);
|
|
}
|
|
i+=1;
|
|
}
|
|
option_chunk.append(table);
|
|
}
|
|
|
|
function do_story_text_updates(data) {
|
|
story_area = document.getElementById('Selected Text');
|
|
if (document.getElementById('Selected Text Chunk '+data.value.id)) {
|
|
document.getElementById('Selected Text Chunk '+data.value.id).textContent = data.value.text;
|
|
} else {
|
|
var span = document.createElement("span");
|
|
span.id = 'Selected Text Chunk '+data.value.id;
|
|
span.chunk = data.value.id;
|
|
span.original_text = data.value.text;
|
|
span.setAttribute("contenteditable", true);
|
|
span.onblur = function () {
|
|
if (this.textContent != this.original_text) {
|
|
socket.emit("Set Selected Text", {"id": this.chunk, "text": this.textContent});
|
|
}
|
|
}
|
|
span.textContent = data.value.text;
|
|
|
|
story_area.append(span);
|
|
}
|
|
}
|
|
|
|
function do_presets(data) {
|
|
var select = document.getElementById('presets');
|
|
//clear out the preset list
|
|
while (select.firstChild) {
|
|
select.removeChild(select.firstChild);
|
|
}
|
|
//add our blank option
|
|
var option = document.createElement("option");
|
|
option.value="";
|
|
option.text="presets";
|
|
select.append(option);
|
|
for (item of data.value) {
|
|
presets[item.preset] = item;
|
|
var option = document.createElement("option");
|
|
option.value=item.preset;
|
|
option.text=item.preset;
|
|
select.append(option);
|
|
}
|
|
}
|
|
|
|
function selected_preset(data) {
|
|
if ((data.value == undefined) || (presets[data.value] == undefined)) {
|
|
return;
|
|
}
|
|
for (const [key, value] of Object.entries(presets[data.value])) {
|
|
if (key.charAt(0) != '_') {
|
|
var elements_to_change = document.getElementsByClassName("var_sync_model_"+key);
|
|
for (item of elements_to_change) {
|
|
if (item.tagName.toLowerCase() === 'input') {
|
|
item.value = fix_text(value);
|
|
} else {
|
|
item.textContent = fix_text(value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function var_changed(data) {
|
|
//Special Case for Story Text
|
|
if ((data.classname == "actions") && (data.name == "Selected Text")) {
|
|
do_story_text_updates(data);
|
|
//Special Case for Story Options
|
|
} else if ((data.classname == "actions") && (data.name == "Options")) {
|
|
create_options(data);
|
|
//Special Case for Presets
|
|
} else if ((data.classname == 'model') && (data.name == 'presets')) {
|
|
do_presets(data);
|
|
} else if ((data.classname == "model") && (data.name == "selected_preset")) {
|
|
selected_preset(data);
|
|
//Basic Data Syncing
|
|
} else {
|
|
var elements_to_change = document.getElementsByClassName("var_sync_"+data.classname+"_"+data.name);
|
|
for (item of elements_to_change) {
|
|
if (item.tagName.toLowerCase() === 'input') {
|
|
item.value = fix_text(data.value);
|
|
} else {
|
|
item.textContent = fix_text(data.value);
|
|
}
|
|
}
|
|
var elements_to_change = document.getElementsByClassName("var_sync_alt_"+data.classname+"_"+data.name);
|
|
for (item of elements_to_change) {
|
|
item.setAttribute("server_value", fix_text(data.value));
|
|
}
|
|
}
|
|
if ((data.classname == 'system') && (data.name == 'aibusy')) {
|
|
if (data.value) {
|
|
favicon.start_swap()
|
|
} else {
|
|
favicon.stop_swap()
|
|
}
|
|
}
|
|
}
|
|
|
|
//--------------------------------------------UI to Server Functions----------------------------------
|
|
|
|
|
|
//--------------------------------------------General UI Functions------------------------------------
|
|
function toggle_flyout(x) {
|
|
if (document.getElementById("SideMenu").classList.contains("open")) {
|
|
x.classList.remove("change");
|
|
document.getElementById("SideMenu").classList.remove("open");
|
|
document.getElementById("main-grid").classList.remove("menu-open");
|
|
//if pinned
|
|
if (document.getElementById("SideMenu").classList.contains("pinned")) {
|
|
document.getElementById("menu_pin").classList.remove("hidden");
|
|
} else {
|
|
document.getElementById("menu_pin").classList.add("hidden");
|
|
}
|
|
} else {
|
|
x.classList.add("change");
|
|
document.getElementById("SideMenu").classList.add("open");
|
|
document.getElementById("main-grid").classList.add("menu-open");
|
|
document.getElementById("menu_pin").classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
function toggle_flyout_right(x) {
|
|
if (document.getElementById("rightSideMenu").classList.contains("open")) {
|
|
document.getElementById("rightSideMenu").classList.remove("open");
|
|
x.setAttribute("data-glyph", "chevron-left");
|
|
} else {
|
|
document.getElementById("rightSideMenu").classList.add("open");
|
|
x.setAttribute("data-glyph", "chevron-right");
|
|
}
|
|
}
|
|
|
|
function toggle_pin_flyout() {
|
|
if (document.getElementById("SideMenu").classList.contains("pinned")) {
|
|
document.getElementById("SideMenu").classList.remove("pinned");
|
|
document.getElementById("main-grid").classList.remove("pinned");
|
|
} else {
|
|
document.getElementById("SideMenu").classList.add("pinned");
|
|
document.getElementById("main-grid").classList.add("pinned");
|
|
}
|
|
}
|