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

Palette theme system complete

Browse Source
This commit is contained in:
ebolam
2022-08-21 18:28:00 -04:00
parent 4c490bea16
commit afaedd2ef4
4 changed files with 101 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
aiserver.py
View File

@@ -7353,14 +7353,29 @@ def UI_2_load_aidg_club(data):
#==================================================================# #==================================================================#
@socketio.on('theme_change') @socketio.on('theme_change')
def UI_2_theme_change(data): def UI_2_theme_change(data):
with open("themes/user.css", "w") as f: with open("themes/{}.css".format(data['name']), "w") as f:
f.write(":root {") f.write(":root {\n")
for var in data: for key, value in data['theme'].items():
f.write("\t{}: {};\n".format(var[0], var[1].replace(";", ""))) f.write("\t{}: {};\n".format(key, value.replace(";", "")))
f.write("}") f.write("}")
print("Theme Saved") print("Theme Saved")
#==================================================================#
# Refresh SP List
#==================================================================#
@socketio.on('sp_list_refresh')
def UI_2_sp_list_refresh(data):
koboldai_vars.splist = [[f, get_softprompt_desc(os.path.join("./softprompts", f),None,True)] for f in os.listdir("./softprompts") if os.path.isfile(os.path.join("./softprompts", f)) and valid_softprompt(os.path.join("./softprompts", f))]
#==================================================================#
# Refresh Theme List
#==================================================================#
@socketio.on('theme_list_refresh')
def UI_2_theme_list_refresh(data):
koboldai_vars.theme_list = [".".join(f.split(".")[:-1]) for f in os.listdir("./themes") if os.path.isfile(os.path.join("./themes", f))]
#==================================================================# #==================================================================#
# Test # Test
#==================================================================# #==================================================================#

1
koboldai_settings.py
View File

@@ -699,6 +699,7 @@ class system_settings(settings):
self.seed_specified = False # Whether or not the current RNG seed was specified by the user (in their settings file) self.seed_specified = False # Whether or not the current RNG seed was specified by the user (in their settings file)
self.seed = None # The current RNG seed (as an int), or None if unknown self.seed = None # The current RNG seed (as an int), or None if unknown
self.alt_gen = False # Use the calc_ai_text method for generating text to go to the AI self.alt_gen = False # Use the calc_ai_text method for generating text to go to the AI
self.theme_list = [".".join(f.split(".")[:-1]) for f in os.listdir("./themes") if os.path.isfile(os.path.join("./themes", f))]
def __setattr__(self, name, value): def __setattr__(self, name, value):

91
static/koboldai.js
View File

@@ -446,9 +446,9 @@ function do_ai_busy(data) {
} }
function var_changed(data) { function var_changed(data) {
if (data.name == "sp") { //if (data.name == "sp") {
console.log({"name": data.name, "data": data}); // console.log({"name": data.name, "data": data});
} //}
//Special Case for Actions //Special Case for Actions
if ((data.classname == "story") && (data.name == "actions")) { if ((data.classname == "story") && (data.name == "actions")) {
do_story_text_updates(data); do_story_text_updates(data);
@@ -474,12 +474,9 @@ function var_changed(data) {
for (const [index, item] of data.value.entries()) { for (const [index, item] of data.value.entries()) {
Array.from(document.getElementsByClassName("sample_order"))[index].textContent = map2.get(item); Array.from(document.getElementsByClassName("sample_order"))[index].textContent = map2.get(item);
} }
//Basic Data Syncing //Special Case for SP
} else { } else if ((data.classname == 'system') && (data.name == 'splist')) {
var elements_to_change = document.getElementsByClassName("var_sync_"+data.classname.replace(" ", "_")+"_"+data.name.replace(" ", "_")); item = document.getElementById("sp");
for (item of elements_to_change) {
if (Array.isArray(data.value)) {
if (item.tagName.toLowerCase() === 'select') {
while (item.firstChild) { while (item.firstChild) {
item.removeChild(item.firstChild); item.removeChild(item.firstChild);
} }
@@ -494,6 +491,21 @@ function var_changed(data) {
option.setAttribute("title", sp[1][1]); option.setAttribute("title", sp[1][1]);
item.append(option); item.append(option);
} }
//Basic Data Syncing
} else {
var elements_to_change = document.getElementsByClassName("var_sync_"+data.classname.replace(" ", "_")+"_"+data.name.replace(" ", "_"));
for (item of elements_to_change) {
if (Array.isArray(data.value)) {
if (item.tagName.toLowerCase() === 'select') {
while (item.firstChild) {
item.removeChild(item.firstChild);
}
for (option_data of data.value) {
option = document.createElement("option");
option.textContent = option_data;
option.value = option_data;
item.append(option);
}
} else if (item.tagName.toLowerCase() === 'input') { } else if (item.tagName.toLowerCase() === 'input') {
item.value = fix_text(data.value); item.value = fix_text(data.value);
} else { } else {
@@ -1461,6 +1473,18 @@ function show_error_message(data) {
} }
//--------------------------------------------UI to Server Functions---------------------------------- //--------------------------------------------UI to Server Functions----------------------------------
function save_theme() {
var cssVars = getAllCSSVariableNames();
console.log(cssVars);
for (item of document.getElementsByClassName("Theme_Input")) {
cssVars["--"+item.id] = item.value;
}
console.log(cssVars);
socket.emit("theme_change", {"name": document.getElementById("save_theme_name").value, "theme": cssVars});
document.getElementById("save_theme_name").value = "";
socket.emit('theme_list_refresh', '');
}
function move_sample(direction) { function move_sample(direction) {
var previous = null; var previous = null;
//console.log(direction); //console.log(direction);
@@ -1592,11 +1616,11 @@ function Change_Theme(theme) {
function palette_color(item) { function palette_color(item) {
var r = document.querySelector(':root'); var r = document.querySelector(':root');
r.style.setProperty("--"+item.id, item.value); r.style.setProperty("--"+item.id, item.value);
socket.emit("theme_change", getAllCSSVariableNames()); //socket.emit("theme_change", getAllCSSVariableNames());
} }
function getAllCSSVariableNames(styleSheets = document.styleSheets){ function getAllCSSVariableNames(styleSheets = document.styleSheets){
var cssVars = []; var cssVars = {};
// loop each stylesheet // loop each stylesheet
//console.log(styleSheets); //console.log(styleSheets);
for(var i = 0; i < styleSheets.length; i++){ for(var i = 0; i < styleSheets.length; i++){
@@ -1611,8 +1635,8 @@ function getAllCSSVariableNames(styleSheets = document.styleSheets){
if(name.startsWith('--') && (styleSheets[i].ownerNode.id == "CSSTheme")){ if(name.startsWith('--') && (styleSheets[i].ownerNode.id == "CSSTheme")){
let value = styleSheets[i].cssRules[j].style.getPropertyValue(name); let value = styleSheets[i].cssRules[j].style.getPropertyValue(name);
value.replace(/(\r\n|\r|\n){2,}/g, '$1\n'); value.replace(/(\r\n|\r|\n){2,}/g, '$1\n');
value = value.replaceAll("\t", ""); value = value.replaceAll("\t", "").trim();
cssVars.push([name, value]); cssVars[name] = value;
} }
} }
} catch (error) {} } catch (error) {}
@@ -1629,23 +1653,20 @@ function create_theming_elements() {
advanced_table = document.createElement("table"); advanced_table = document.createElement("table");
theme_area = document.getElementById("Palette"); theme_area = document.getElementById("Palette");
theme_area.append(palette_table); theme_area.append(palette_table);
console.log(cssVars); //console.log(cssVars);
//theme_area.append(advanced_table); //theme_area.append(advanced_table);
for (css_item of cssVars) { for (const [css_item, css_value] of Object.entries(cssVars)) {
if (css_item[0].includes("_palette")) { if (css_item.includes("_palette")) {
if (document.getElementById(css_item[0].replace("--", ""))) { if (document.getElementById(css_item.replace("--", ""))) {
input = document.getElementById(css_item[0].replace("--", "")); input = document.getElementById(css_item.replace("--", ""));
input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", "")); input.setAttribute("title", css_item.replace("--", "").replace("_palette", ""));
input.value = css_item[1]; input.value = css_value;
console.log("Set "+css_item[0].replace("--", "")+" to "+css_item[1]);
console.log(input);
} }
} else { } else {
tr = document.createElement("tr"); tr = document.createElement("tr");
tr.style = "width:100%;"; tr.style = "width:100%;";
title = document.createElement("td"); title = document.createElement("td");
title.textContent = css_item[0].replace("--", "").replace("_palette", ""); title.textContent = css_item.replace("--", "").replace("_palette", "");
tr.append(title); tr.append(title);
select = document.createElement("select"); select = document.createElement("select");
select.style = "width: 100px; color:black;"; select.style = "width: 100px; color:black;";
@@ -1653,11 +1674,11 @@ function create_theming_elements() {
option.value=""; option.value="";
option.text="Use Color"; option.text="Use Color";
select.append(option); select.append(option);
for (css_item2 of cssVars) { for (const [css_item2, css_value2] of Object.entries(cssVars)) {
if (css_item2 != css_item) { if (css_item2 != css_item) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value=css_item2[0]; option.value=css_item2;
option.text=css_item2[0].replace("--", ""); option.text=css_item2.replace("--", "");
select.append(option); select.append(option);
} }
} }
@@ -1666,12 +1687,12 @@ function create_theming_elements() {
tr.append(select_td); tr.append(select_td);
td = document.createElement("td"); td = document.createElement("td");
tr.append(td); tr.append(td);
if (css_item[1].includes("#")) { if (css_value.includes("#")) {
input = document.createElement("input"); input = document.createElement("input");
input.setAttribute("type", "color"); input.setAttribute("type", "color");
input.id = css_item[0]; input.id = css_item;
input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", "")); input.setAttribute("title", css_item.replace("--", "").replace("_palette", ""));
input.value = css_item[1]; input.value = css_value;
input.onchange = function () { input.onchange = function () {
var r = document.querySelector(':root'); var r = document.querySelector(':root');
r.style.setProperty(this.id, this.value); r.style.setProperty(this.id, this.value);
@@ -1680,9 +1701,9 @@ function create_theming_elements() {
} else { } else {
input = document.createElement("input"); input = document.createElement("input");
input.setAttribute("type", "text"); input.setAttribute("type", "text");
input.id = css_item[0]; input.id = css_item;
input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", "")); input.setAttribute("title", css_item.replace("--", "").replace("_palette", ""));
input.value = css_item[1]; input.value = css_value;
input.onchange = function () { input.onchange = function () {
var r = document.querySelector(':root'); var r = document.querySelector(':root');
r.style.setProperty(this.id, this.value); r.style.setProperty(this.id, this.value);
@@ -2410,7 +2431,7 @@ function setCookie(cname, cvalue, exdays=60) {
const d = new Date(); const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString(); let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;samesite=none;"; document.cookie = cname + "=" + cvalue + ";" + expires + ";";
} }
function getCookie(cname) { function getCookie(cname) {

45
templates/settings flyout.html
View File

@@ -169,8 +169,9 @@
<!---Bottom Row----> <!---Bottom Row---->
<span class="setting_item"> <span class="setting_item">
<!---<span class="material-icons-outlined cursor" onclick="socket.emit('load_softprompt_list', '');">folder_open</span> <span class="var_sync_system_spname"></span>---> <!---<span class="material-icons-outlined cursor" onclick="socket.emit('load_softprompt_list', '');">folder_open</span> <span class="var_sync_system_spname"></span>--->
<select autocomplete="off" id="sp" class="var_sync_system_splist var_sync_system_spfilename" style="width: 150px;color:black;" onclick="socket.emit('load_softprompt', this.value);"> <select autocomplete="off" id="sp" class="var_sync_system_splist var_sync_system_spfilename" style="width: 140px;color:black;" onclick="socket.emit('load_softprompt', this.value);">
</select> </select>
<span class="material-icons-outlined cursor" style="font-size: 18px;" title="Refresh List" onclick="socket.emit('sp_list_refresh', '');">autorenew</span>
</span> </span>
<!---Slider Labels---> <!---Slider Labels--->
<span class="setting_minlabel"><span style="top: -4px; position: relative;"></span></span> <span class="setting_minlabel"><span style="top: -4px; position: relative;"></span></span>
@@ -227,15 +228,13 @@
<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Theme</h4> <h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Theme</h4>
</div> </div>
<div class="setting_tile_area" id="Theme"> <div class="setting_tile_area" id="Theme">
<select autocomplete="off" style="color: black;" onchange="Change_Theme(this.value);"> <select class="var_sync_system_theme_list" autocomplete="off" style="color: black;" onchange="Change_Theme(this.value);">
<option selected>Monochrome</option> </select><span class="material-icons-outlined cursor" title="Refresh List" onclick="socket.emit('theme_list_refresh', '');">autorenew</span>
<option>Material You</option>
<option>Darkness</option>
<option>user</option>
</select>
<div class="collapsable_header" onclick="toggle_setting_category(this);"> <div class="collapsable_header" onclick="toggle_setting_category(this);">
<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Palette</h4> <h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Palette</h4>
</div> </div>
<input type="text" id="save_theme_name" autocomplete="off" placeholder="New Theme Name"/>
<span class="material-icons-outlined cursor" title="Save Theme" onclick='save_theme();'>save</span>
<div class="setting_tile_area" id="Palette"> <div class="setting_tile_area" id="Palette">
<table border=1> <table border=1>
<tr> <tr>
@@ -252,31 +251,31 @@
</tr> </tr>
<tr> <tr>
<td>Primary</td> <td>Primary</td>
<td><input autocomplete="off" type=color id="primary_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="primary_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="on_primary_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_primary_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="primary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="primary_containter_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="on_primary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_primary_containter_palette" onchange="palette_color(this)"></td>
</tr> </tr>
<tr> <tr>
<td>Secondary</td> <td>Secondary</td>
<td><input autocomplete="off" type=color id="secondary_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="secondary_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="on_secondary_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_secondary_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="secondary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="secondary_containter_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="on_secondary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_secondary_containter_palette" onchange="palette_color(this)"></td>
</tr> </tr>
<tr> <tr>
<td>Tertiary</td> <td>Tertiary</td>
<td><input autocomplete="off" type=color id="tertiary_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="tertiary_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="on_tertiary_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_tertiary_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="tertiary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="tertiary_containter_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="on_tertiary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_tertiary_containter_palette" onchange="palette_color(this)"></td>
</tr> </tr>
<tr> <tr>
<td>Error</td> <td>Error</td>
<td><input autocomplete="off" type=color id="error_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="error_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="on_error_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_error_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="error_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="error_containter_palette" onchange="palette_color(this)"></td>
<td><input autocomplete="off" type=color id="on_error_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_error_containter_palette" onchange="palette_color(this)"></td>
</tr> </tr>
</table> </table>