mirror of
https://github.com/KoboldAI/KoboldAI-Client.git
synced 2025-06-05 21:59:24 +02:00
Palette theme system complete
This commit is contained in:
ebolam
23
aiserver.py
23
aiserver.py
@@ -7353,14 +7353,29 @@ def UI_2_load_aidg_club(data):
|
||||
#==================================================================#
|
||||
@socketio.on('theme_change')
|
||||
def UI_2_theme_change(data):
|
||||
with open("themes/user.css", "w") as f:
|
||||
f.write(":root {")
|
||||
for var in data:
|
||||
f.write("\t{}: {};\n".format(var[0], var[1].replace(";", "")))
|
||||
with open("themes/{}.css".format(data['name']), "w") as f:
|
||||
f.write(":root {\n")
|
||||
for key, value in data['theme'].items():
|
||||
f.write("\t{}: {};\n".format(key, value.replace(";", "")))
|
||||
f.write("}")
|
||||
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
|
||||
#==================================================================#
|
||||
|
||||
@@ -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 = 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.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):
|
||||
|
||||
@@ -446,9 +446,9 @@ function do_ai_busy(data) {
|
||||
}
|
||||
|
||||
function var_changed(data) {
|
||||
if (data.name == "sp") {
|
||||
console.log({"name": data.name, "data": data});
|
||||
}
|
||||
//if (data.name == "sp") {
|
||||
// console.log({"name": data.name, "data": data});
|
||||
//}
|
||||
//Special Case for Actions
|
||||
if ((data.classname == "story") && (data.name == "actions")) {
|
||||
do_story_text_updates(data);
|
||||
@@ -474,12 +474,9 @@ function var_changed(data) {
|
||||
for (const [index, item] of data.value.entries()) {
|
||||
Array.from(document.getElementsByClassName("sample_order"))[index].textContent = map2.get(item);
|
||||
}
|
||||
//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') {
|
||||
//Special Case for SP
|
||||
} else if ((data.classname == 'system') && (data.name == 'splist')) {
|
||||
item = document.getElementById("sp");
|
||||
while (item.firstChild) {
|
||||
item.removeChild(item.firstChild);
|
||||
}
|
||||
@@ -494,6 +491,21 @@ function var_changed(data) {
|
||||
option.setAttribute("title", sp[1][1]);
|
||||
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') {
|
||||
item.value = fix_text(data.value);
|
||||
} else {
|
||||
@@ -1461,6 +1473,18 @@ function show_error_message(data) {
|
||||
}
|
||||
|
||||
//--------------------------------------------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) {
|
||||
var previous = null;
|
||||
//console.log(direction);
|
||||
@@ -1592,11 +1616,11 @@ function Change_Theme(theme) {
|
||||
function palette_color(item) {
|
||||
var r = document.querySelector(':root');
|
||||
r.style.setProperty("--"+item.id, item.value);
|
||||
socket.emit("theme_change", getAllCSSVariableNames());
|
||||
//socket.emit("theme_change", getAllCSSVariableNames());
|
||||
}
|
||||
|
||||
function getAllCSSVariableNames(styleSheets = document.styleSheets){
|
||||
var cssVars = [];
|
||||
var cssVars = {};
|
||||
// loop each stylesheet
|
||||
//console.log(styleSheets);
|
||||
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")){
|
||||
let value = styleSheets[i].cssRules[j].style.getPropertyValue(name);
|
||||
value.replace(/(\r\n|\r|\n){2,}/g, '$1\n');
|
||||
value = value.replaceAll("\t", "");
|
||||
cssVars.push([name, value]);
|
||||
value = value.replaceAll("\t", "").trim();
|
||||
cssVars[name] = value;
|
||||
}
|
||||
}
|
||||
} catch (error) {}
|
||||
@@ -1629,23 +1653,20 @@ function create_theming_elements() {
|
||||
advanced_table = document.createElement("table");
|
||||
theme_area = document.getElementById("Palette");
|
||||
theme_area.append(palette_table);
|
||||
console.log(cssVars);
|
||||
//console.log(cssVars);
|
||||
//theme_area.append(advanced_table);
|
||||
for (css_item of cssVars) {
|
||||
if (css_item[0].includes("_palette")) {
|
||||
if (document.getElementById(css_item[0].replace("--", ""))) {
|
||||
input = document.getElementById(css_item[0].replace("--", ""));
|
||||
input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", ""));
|
||||
input.value = css_item[1];
|
||||
console.log("Set "+css_item[0].replace("--", "")+" to "+css_item[1]);
|
||||
console.log(input);
|
||||
|
||||
for (const [css_item, css_value] of Object.entries(cssVars)) {
|
||||
if (css_item.includes("_palette")) {
|
||||
if (document.getElementById(css_item.replace("--", ""))) {
|
||||
input = document.getElementById(css_item.replace("--", ""));
|
||||
input.setAttribute("title", css_item.replace("--", "").replace("_palette", ""));
|
||||
input.value = css_value;
|
||||
}
|
||||
} else {
|
||||
tr = document.createElement("tr");
|
||||
tr.style = "width:100%;";
|
||||
title = document.createElement("td");
|
||||
title.textContent = css_item[0].replace("--", "").replace("_palette", "");
|
||||
title.textContent = css_item.replace("--", "").replace("_palette", "");
|
||||
tr.append(title);
|
||||
select = document.createElement("select");
|
||||
select.style = "width: 100px; color:black;";
|
||||
@@ -1653,11 +1674,11 @@ function create_theming_elements() {
|
||||
option.value="";
|
||||
option.text="Use Color";
|
||||
select.append(option);
|
||||
for (css_item2 of cssVars) {
|
||||
for (const [css_item2, css_value2] of Object.entries(cssVars)) {
|
||||
if (css_item2 != css_item) {
|
||||
var option = document.createElement("option");
|
||||
option.value=css_item2[0];
|
||||
option.text=css_item2[0].replace("--", "");
|
||||
option.value=css_item2;
|
||||
option.text=css_item2.replace("--", "");
|
||||
select.append(option);
|
||||
}
|
||||
}
|
||||
@@ -1666,12 +1687,12 @@ function create_theming_elements() {
|
||||
tr.append(select_td);
|
||||
td = document.createElement("td");
|
||||
tr.append(td);
|
||||
if (css_item[1].includes("#")) {
|
||||
if (css_value.includes("#")) {
|
||||
input = document.createElement("input");
|
||||
input.setAttribute("type", "color");
|
||||
input.id = css_item[0];
|
||||
input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", ""));
|
||||
input.value = css_item[1];
|
||||
input.id = css_item;
|
||||
input.setAttribute("title", css_item.replace("--", "").replace("_palette", ""));
|
||||
input.value = css_value;
|
||||
input.onchange = function () {
|
||||
var r = document.querySelector(':root');
|
||||
r.style.setProperty(this.id, this.value);
|
||||
@@ -1680,9 +1701,9 @@ function create_theming_elements() {
|
||||
} else {
|
||||
input = document.createElement("input");
|
||||
input.setAttribute("type", "text");
|
||||
input.id = css_item[0];
|
||||
input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", ""));
|
||||
input.value = css_item[1];
|
||||
input.id = css_item;
|
||||
input.setAttribute("title", css_item.replace("--", "").replace("_palette", ""));
|
||||
input.value = css_value;
|
||||
input.onchange = function () {
|
||||
var r = document.querySelector(':root');
|
||||
r.style.setProperty(this.id, this.value);
|
||||
@@ -2410,7 +2431,7 @@ function setCookie(cname, cvalue, exdays=60) {
|
||||
const d = new Date();
|
||||
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
|
||||
let expires = "expires="+d.toUTCString();
|
||||
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;samesite=none;";
|
||||
document.cookie = cname + "=" + cvalue + ";" + expires + ";";
|
||||
}
|
||||
|
||||
function getCookie(cname) {
|
||||
|
||||
@@ -169,8 +169,9 @@
|
||||
<!---Bottom Row---->
|
||||
<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>--->
|
||||
<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>
|
||||
<span class="material-icons-outlined cursor" style="font-size: 18px;" title="Refresh List" onclick="socket.emit('sp_list_refresh', '');">autorenew</span>
|
||||
</span>
|
||||
<!---Slider Labels--->
|
||||
<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>
|
||||
</div>
|
||||
<div class="setting_tile_area" id="Theme">
|
||||
<select autocomplete="off" style="color: black;" onchange="Change_Theme(this.value);">
|
||||
<option selected>Monochrome</option>
|
||||
<option>Material You</option>
|
||||
<option>Darkness</option>
|
||||
<option>user</option>
|
||||
</select>
|
||||
<select class="var_sync_system_theme_list" autocomplete="off" style="color: black;" onchange="Change_Theme(this.value);">
|
||||
</select><span class="material-icons-outlined cursor" title="Refresh List" onclick="socket.emit('theme_list_refresh', '');">autorenew</span>
|
||||
<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>
|
||||
</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">
|
||||
<table border=1>
|
||||
<tr>
|
||||
@@ -252,31 +251,31 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Primary</td>
|
||||
<td><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 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="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 class="Theme_Input" autocomplete="off" type=color id="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>
|
||||
<td>Secondary</td>
|
||||
<td><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 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="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 class="Theme_Input" autocomplete="off" type=color id="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>
|
||||
<td>Tertiary</td>
|
||||
<td><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 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="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 class="Theme_Input" autocomplete="off" type=color id="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>
|
||||
<td>Error</td>
|
||||
<td><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 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="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 class="Theme_Input" autocomplete="off" type=color id="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>
|
||||
</table>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user