System Settings
-
+
diff --git a/ui/media/css/auto-save.css b/ui/media/css/auto-save.css
index 58cc7d85..58710039 100644
--- a/ui/media/css/auto-save.css
+++ b/ui/media/css/auto-save.css
@@ -26,23 +26,55 @@
float: left;
}
-.form-table small {
+
+.parameters-table {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+}
+
+.parameters-table > div {
+ background: var(--background-color2);
+ display: flex;
+}
+
+.parameters-table > div > div {
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.parameters-table small {
color: rgb(153, 153, 153);
}
-#system-settings .form-table td {
- height: 24px;
+.parameters-table > div > div:nth-child(1) {
+ font-size: 20px;
+ width: 45px;
}
-#system-settings .form-table td:last-child div {
- display: flex;
- align-items: center;
-}
-#system-settings .form-table td:last-child div > :not([type="checkbox"]):first-child {
- margin-left: 3px;
-}
-
-#system-settings .form-table td:last-child div small {
- padding-left: 5px;
+.parameters-table > div > div:nth-child(2) {
+ flex: 1;
+ flex-direction: column;
text-align: left;
+ justify-content: center;
+ align-items: start;
+ gap: 4px;
+}
+
+.parameters-table > div > div:nth-child(3) {
+ text-align: right;
+}
+
+.parameters-table > div:first-child {
+ border-radius: 12px 12px 0px 0px;
+}
+
+.parameters-table > div:last-child {
+ border-radius: 0px 0px 12px 12px;
+}
+
+.parameters-table .fa-fire {
+ color: #F7630C;
}
\ No newline at end of file
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 06e1ed4f..9766ae1f 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -216,7 +216,6 @@ code {
display: none !important;
}
#editor-modifiers {
- max-width: 600px;
overflow-y: auto;
overflow-x: hidden;
}
@@ -495,6 +494,10 @@ img {
border-radius: 6px 0px;
}
+#editor-settings {
+ min-width: 500px;
+}
+
#editor-settings-entries {
display: flex;
flex-direction: column;
@@ -584,6 +587,57 @@ input::file-selector-button {
height: 19px;
}
+
+.input-toggle {
+ display: inline-block;
+ position: relative;
+ vertical-align: middle;
+ width: calc(var(--input-height) * 2);
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ margin-right: 4px;
+}
+.input-toggle > input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+.input-toggle > label {
+ display: block;
+ overflow: hidden;
+ cursor: pointer;
+ height: var(--input-height);
+ padding: 0;
+ line-height: var(--input-height);
+ border: var(--input-border-size) solid var(--input-border-color);
+ border-radius: var(--input-height);
+ background: var(--input-background-color);
+ transition: background 0.2s ease-in;
+}
+.input-toggle > label:before {
+ content: "";
+ display: block;
+ width: calc(var(--input-height) - ((var(--input-border-size) + var(--input-switch-padding)) * 2));
+ margin: 0px;
+ background: var(--input-text-color);
+ position: absolute;
+ top: calc(var(--input-border-size) + var(--input-switch-padding));
+ bottom: calc(var(--input-border-size) + var(--input-switch-padding));
+ right: calc(var(--input-border-size) + var(--input-switch-padding) + var(--input-height));
+ border-radius: calc(var(--input-height) - ((var(--input-border-size) + var(--input-switch-padding)) * 2));
+ transition: all 0.2s ease-in 0s;
+ opacity: 0.8;
+}
+.input-toggle > input:checked + label {
+ background: var(--accent-color);
+}
+.input-toggle > input:checked + label:before {
+ right: calc(var(--input-border-size) + var(--input-switch-padding));
+ opacity: 1;
+}
+
/* MOBILE SUPPORT */
@media screen and (max-width: 700px) {
#top-nav {
@@ -625,6 +679,9 @@ input::file-selector-button {
#editor {
padding: 16px 8px;
}
+ #editor-settings {
+ min-width: 0px;
+ }
.tab-content-inner {
margin: 0px;
}
@@ -648,14 +705,8 @@ input::file-selector-button {
padding: 0px !important;
margin: 24px !important;
}
- .simple-tooltip.right {
- right: initial;
- left: 0px;
- top: 50%;
- transform: translate(calc(-100% + 15%), -50%);
- }
- :hover > .simple-tooltip.right {
- transform: translate(100%, -50%);
+ .simple-tooltip {
+ display: none;
}
}
diff --git a/ui/media/css/themes.css b/ui/media/css/themes.css
index 0f889ec9..e87df2c6 100644
--- a/ui/media/css/themes.css
+++ b/ui/media/css/themes.css
@@ -24,6 +24,18 @@
--accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
--accent-color-hover: hsl(var(--accent-hue), 100%, var(--accent-lightness-hover));
--primary-button-border: none;
+ --input-switch-padding: 1px;
+ --input-height: 24px;
+}
+
+.theme-default-modified {
+ --button-text-color: black;
+
+ --input-switch-padding: 2px;
+ --input-text-color: #ccc;
+ --input-border-size: 0px;
+ --input-background-color: #16191c;
+ --input-border-color: var(--input-background-color);
}
.theme-light {
diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js
index 8b97f461..29e5298a 100644
--- a/ui/media/js/auto-save.js
+++ b/ui/media/js/auto-save.js
@@ -213,6 +213,7 @@ function fillSaveSettingsConfigTable() {
})
})
})
+ prettifyInputs(saveSettingsConfigTable)
}
// configureSettingsSaveBtn
@@ -224,7 +225,7 @@ var autoSaveSettings = document.getElementById("auto_save_settings")
var configSettingsButton = document.createElement("button")
configSettingsButton.textContent = "Configure"
configSettingsButton.style.margin = "0px 5px"
-autoSaveSettings.insertAdjacentElement("afterend", configSettingsButton)
+autoSaveSettings.insertAdjacentElement("beforebegin", configSettingsButton)
autoSaveSettings.addEventListener("change", () => {
configSettingsButton.style.display = autoSaveSettings.checked ? "block" : "none"
})
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index afb0925d..467da253 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -1323,3 +1323,4 @@ window.addEventListener("beforeunload", function(e) {
});
createCollapsibles()
+prettifyInputs(document);
\ No newline at end of file
diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js
index 1aa87bf8..394e9703 100644
--- a/ui/media/js/parameters.js
+++ b/ui/media/js/parameters.js
@@ -28,18 +28,21 @@ var PARAMETERS = [
type: ParameterType.select,
label: "Theme",
default: "theme-default",
+ note: "customize the look and feel of the ui",
options: [ // Note: options expanded dynamically
{
value: "theme-default",
label: "Default"
}
- ]
+ ],
+ icon: "fa-palette"
},
{
id: "save_to_disk",
type: ParameterType.checkbox,
label: "Auto-Save Images",
note: "automatically saves images to the specified location",
+ icon: "fa-download",
default: false,
},
{
@@ -55,6 +58,7 @@ var PARAMETERS = [
type: ParameterType.checkbox,
label: "Enable Sound",
note: "plays a sound on task completion",
+ icon: "fa-volume-low",
default: true,
},
{
@@ -62,20 +66,23 @@ var PARAMETERS = [
type: ParameterType.checkbox,
label: "Open browser on startup",
note: "starts the default browser on startup",
+ icon: "fa-window-restore",
default: true,
},
{
id: "turbo",
type: ParameterType.checkbox,
label: "Turbo Mode",
- default: true,
note: "generates images faster, but uses an additional 1 GB of GPU memory",
+ icon: "fa-forward",
+ default: true,
},
{
id: "use_cpu",
type: ParameterType.checkbox,
label: "Use CPU (not GPU)",
note: "warning: this will be *very* slow",
+ icon: "fa-microchip",
default: false,
},
{
@@ -96,6 +103,7 @@ var PARAMETERS = [
type: ParameterType.checkbox,
label: "Use Full Precision",
note: "for GPU-only. warning: this will consume more VRAM",
+ icon: "fa-crosshairs",
default: false,
},
{
@@ -103,13 +111,15 @@ var PARAMETERS = [
type: ParameterType.checkbox,
label: "Auto-Save Settings",
note: "restores settings on browser load",
+ icon: "fa-gear",
default: true,
},
{
id: "use_beta_channel",
type: ParameterType.checkbox,
- label: "🔥Beta channel",
+ label: "Beta channel",
note: "Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
+ icon: "fa-fire",
default: false,
},
];
@@ -140,16 +150,18 @@ function getParameterElement(parameter) {
}
}
-let parametersTable = document.querySelector("#system-settings table")
+let parametersTable = document.querySelector("#system-settings .parameters-table")
/* fill in the system settings popup table */
function initParameters() {
PARAMETERS.forEach(parameter => {
var element = getParameterElement(parameter)
var note = parameter.note ? `
${parameter.note}` : "";
- var newrow = document.createElement('tr')
+ var icon = parameter.icon ? `
` : "";
+ var newrow = document.createElement('div')
newrow.innerHTML = `
-
|
-
| `
+
${icon}
+
${note}
+
${element}
`
parametersTable.appendChild(newrow)
parameter.settingsEntry = newrow
})
@@ -224,6 +236,7 @@ function getCurrentRenderDeviceSelection() {
useCPUField.addEventListener('click', function() {
let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
let autoPickGPUSettingEntry = getParameterSettingsEntry('auto_pick_gpus')
+ console.log("hello", this.checked);
if (this.checked) {
gpuSettingEntry.style.display = 'none'
autoPickGPUSettingEntry.style.display = 'none'
diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js
index 3172579f..6fc3c402 100644
--- a/ui/media/js/utils.js
+++ b/ui/media/js/utils.js
@@ -358,3 +358,19 @@ function preventNonNumericalInput(e) {
e.preventDefault();
}
}
+
+/* inserts custom html to allow prettifying of inputs */
+function prettifyInputs(root_element) {
+ root_element.querySelectorAll(`input[type="checkbox"]`).forEach(element => {
+ var parent = element.parentNode;
+ if (!parent.classList.contains("input-toggle")) {
+ var wrapper = document.createElement("div");
+ wrapper.classList.add("input-toggle");
+ parent.replaceChild(wrapper, element);
+ wrapper.appendChild(element);
+ var label = document.createElement("label");
+ label.htmlFor = element.id;
+ wrapper.appendChild(label);
+ }
+ })
+}
From bfc21220a7e084c0e261ff73424bbc60547faf05 Mon Sep 17 00:00:00 2001
From: Malcolm Diller
Date: Thu, 17 Nov 2022 18:13:08 -0800
Subject: [PATCH 12/39] added hamunii theme
---
ui/media/css/themes.css | 28 ++++++++++++++++++++++++++++
ui/media/js/themes.js | 2 +-
2 files changed, 29 insertions(+), 1 deletion(-)
diff --git a/ui/media/css/themes.css b/ui/media/css/themes.css
index e87df2c6..32224fcf 100644
--- a/ui/media/css/themes.css
+++ b/ui/media/css/themes.css
@@ -156,3 +156,31 @@
--input-text-color: red;
--input-border-color: green;
}
+
+.theme-hamunii {
+ --background-color1: #242424;
+ --background-color2: #353535;
+ --background-color3: #494949;
+ --background-color4: #000000;
+
+ --accent-hue: 213;
+ --accent-lightness: 76.8%;
+ --accent-color: #3584e4;
+ --make-image-border: none;
+
+ --button-color: var(--accent-color);
+ --button-border: none;
+
+ --input-border-radius: 6px;
+ --input-text-color: #ffffff;
+ --input-background-color: #2a2a2a;
+ --input-border-size: 0px;
+ --input-border-color: var(--input-background-color);
+}
+
+.theme-hamunii .panel-box {
+ border: none;
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+ border-radius: 10px;
+}
+
diff --git a/ui/media/js/themes.js b/ui/media/js/themes.js
index d23e9b08..8ffdb172 100644
--- a/ui/media/js/themes.js
+++ b/ui/media/js/themes.js
@@ -14,7 +14,7 @@ function initTheme() {
.flatMap(sheet => Array.from(sheet.cssRules))
.forEach(rule => {
var selector = rule.selectorText; // TODO: also do selector == ":root", re-run un-set props
- if (selector && selector.startsWith(".theme-")) {
+ if (selector && selector.startsWith(".theme-") && !selector.includes(" ")) {
var theme_key = selector.substring(1);
THEMES.push({
key: theme_key,
From 2db00236532a72f88ad3719646f72f7afb015495 Mon Sep 17 00:00:00 2001
From: Malcolm Diller
Date: Thu, 17 Nov 2022 20:15:39 -0800
Subject: [PATCH 13/39] updated themes to work nicely with the new stuff
---
ui/media/css/auto-save.css | 1 +
ui/media/css/themes.css | 77 ++++++++------------------------------
2 files changed, 17 insertions(+), 61 deletions(-)
diff --git a/ui/media/css/auto-save.css b/ui/media/css/auto-save.css
index 58710039..80aa48d8 100644
--- a/ui/media/css/auto-save.css
+++ b/ui/media/css/auto-save.css
@@ -36,6 +36,7 @@
.parameters-table > div {
background: var(--background-color2);
display: flex;
+ padding: 0px 4px;
}
.parameters-table > div > div {
diff --git a/ui/media/css/themes.css b/ui/media/css/themes.css
index 32224fcf..f87bc7ec 100644
--- a/ui/media/css/themes.css
+++ b/ui/media/css/themes.css
@@ -1,22 +1,26 @@
:root {
- --background-color1: rgb(32, 33, 36); /* main parts of the page */
- --background-color2: rgb(44, 45, 48); /* main panels */
- --background-color3: rgb(47, 49, 53);
- --background-color4: rgb(18, 18, 19); /* settings dropdowns */
+ --main-hue: 222;
+ --main-saturation: 4%;
+ --value-base: 13%;
+ --value-step: 5%;
+ --background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
+ --background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1 * var(--value-step))));
+ --background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.5 * var(--value-step))));
+ --background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1.5 * var(--value-step))));
- --accent-hue: 266;
+ --accent-hue: 263;
--accent-lightness: 36%;
--accent-lightness-hover: 40%;
--text-color: #eee;
- --input-text-color: black;
- --input-background-color: #e9e9ed;
- --input-border-color: #8f8f9d;
+ --input-text-color: #ccc;
+ --input-background-color: var(--background-color3);
+ --input-border-color: var(--background-color4);
--button-text-color: var(--input-text-color);
- --button-color: #e9e9ed;
- --button-border: 1px solid #8f8f9d;
+ --button-color: var(--accent-color);
+ --button-border: none;
/* other */
--input-border-radius: 4px;
@@ -28,16 +32,6 @@
--input-height: 24px;
}
-.theme-default-modified {
- --button-text-color: black;
-
- --input-switch-padding: 2px;
- --input-text-color: #ccc;
- --input-border-size: 0px;
- --input-background-color: #16191c;
- --input-border-color: var(--input-background-color);
-}
-
.theme-light {
--background-color1: white;
--background-color2: #ececec;
@@ -45,6 +39,7 @@
--background-color4: #cccccc;
--text-color: black;
+ --button-text-color: white;
--input-text-color: black;
--input-background-color: #f8f9fa;
@@ -59,12 +54,7 @@
--accent-hue: 235;
--accent-lightness: 65%;
- --primary-button-border: none;
-
- --button-color: var(--accent-color);
- --button-border: none;
- --input-text-color: #ccc;
--input-border-size: 2px;
--input-background-color: #202225;
--input-border-color: var(--input-background-color);
@@ -81,15 +71,6 @@
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
--accent-hue: 212;
- --primary-button-border: none;
-
- --button-color: var(--accent-color);
- --button-border: none;
-
- --input-border-size: 1px;
- --input-background-color: var(--background-color3);
- --input-text-color: #ccc;
- --input-border-color: var(--background-color4);
}
@@ -102,16 +83,6 @@
--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
-
- --primary-button-border: none;
-
- --button-color: var(--accent-color);
- --button-border: none;
-
- --input-border-size: 1px;
- --input-background-color: var(--background-color3);
- --input-text-color: #ccc;
- --input-border-color: var(--background-color4);
}
.theme-super-dark {
@@ -124,15 +95,7 @@
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1.4 * var(--value-step))));
- --primary-button-border: none;
-
- --button-color: var(--accent-color);
- --button-border: none;
-
- --input-border-size: 0px;
- --input-background-color: var(--background-color3);
- --input-text-color: #ccc;
- --input-border-color: var(--background-color4);
+ --input-border-size: 0px;
}
.theme-wild {
@@ -146,10 +109,6 @@
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
--accent-hue: 212;
- --primary-button-border: none;
-
- --button-color: var(--accent-color);
- --button-border: none;
--input-border-size: 1px;
--input-background-color: hsl(222, var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
@@ -166,10 +125,6 @@
--accent-hue: 213;
--accent-lightness: 76.8%;
--accent-color: #3584e4;
- --make-image-border: none;
-
- --button-color: var(--accent-color);
- --button-border: none;
--input-border-radius: 6px;
--input-text-color: #ffffff;
From 45086a4b6e951389a36b59d5c65191b7d55ab4fc Mon Sep 17 00:00:00 2001
From: Malcolm Diller
Date: Thu, 17 Nov 2022 22:25:55 -0800
Subject: [PATCH 14/39] updated hamunii theme name to gnomie
---
ui/media/css/themes.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/ui/media/css/themes.css b/ui/media/css/themes.css
index f87bc7ec..cdf45c17 100644
--- a/ui/media/css/themes.css
+++ b/ui/media/css/themes.css
@@ -116,7 +116,7 @@
--input-border-color: green;
}
-.theme-hamunii {
+.theme-gnomie {
--background-color1: #242424;
--background-color2: #353535;
--background-color3: #494949;
From 025d4df774c805fdab652d7775dc22fbf5845f5c Mon Sep 17 00:00:00 2001
From: cmdr2
Date: Fri, 18 Nov 2022 13:10:56 +0530
Subject: [PATCH 15/39] Don't crash if a VAE file fails to load
---
CHANGES.md | 1 +
ui/sd_internal/runtime.py | 27 ++++++++++++++++++---------
ui/sd_internal/task_manager.py | 2 +-
3 files changed, 20 insertions(+), 10 deletions(-)
diff --git a/CHANGES.md b/CHANGES.md
index ac31a612..2151b8e8 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -20,6 +20,7 @@
- A `What's New?` tab in the UI
### Detailed changelog
+* 2.4.7 - 18 Nov 2022 - Don't crash if a VAE file fails to load
* 2.4.7 - 17 Nov 2022 - Fix a bug where Face Correction (GFPGAN) would fail on cuda:N (i.e. GPUs other than cuda:0), as well as fail on CPU if the system had an incompatible GPU.
* 2.4.6 - 16 Nov 2022 - Fix a regression in VRAM usage during startup, which caused 'Out of Memory' errors when starting on GPUs with 4gb (or less) VRAM
* 2.4.5 - 16 Nov 2022 - Add checkbox for "Open browser on startup".
diff --git a/ui/sd_internal/runtime.py b/ui/sd_internal/runtime.py
index 2308298e..486d2179 100644
--- a/ui/sd_internal/runtime.py
+++ b/ui/sd_internal/runtime.py
@@ -140,15 +140,24 @@ def load_model_ckpt():
_, _ = modelFS.load_state_dict(sd, strict=False)
if thread_data.vae_file is not None:
- for model_extension in ['.ckpt', '.vae.pt']:
- if os.path.exists(thread_data.vae_file + model_extension):
- print(f"Loading VAE weights from: {thread_data.vae_file}{model_extension}")
- vae_ckpt = torch.load(thread_data.vae_file + model_extension, map_location="cpu")
- vae_dict = {k: v for k, v in vae_ckpt["state_dict"].items() if k[0:4] != "loss"}
- modelFS.first_stage_model.load_state_dict(vae_dict, strict=False)
- break
- else:
- print(f'Cannot find VAE file: {thread_data.vae_file}{model_extension}')
+ try:
+ loaded = False
+ for model_extension in ['.ckpt', '.vae.pt']:
+ if os.path.exists(thread_data.vae_file + model_extension):
+ print(f"Loading VAE weights from: {thread_data.vae_file}{model_extension}")
+ vae_ckpt = torch.load(thread_data.vae_file + model_extension, map_location="cpu")
+ vae_dict = {k: v for k, v in vae_ckpt["state_dict"].items() if k[0:4] != "loss"}
+ modelFS.first_stage_model.load_state_dict(vae_dict, strict=False)
+ loaded = True
+ break
+
+ if not loaded:
+ print(f'Cannot find VAE: {thread_data.vae_file}')
+ thread_data.vae_file = None
+ except:
+ print(traceback.format_exc())
+ print(f'Could not load VAE: {thread_data.vae_file}')
+ thread_data.vae_file = None
modelFS.eval()
# if thread_data.device != 'cpu':
diff --git a/ui/sd_internal/task_manager.py b/ui/sd_internal/task_manager.py
index 45f90f9f..4b96438c 100644
--- a/ui/sd_internal/task_manager.py
+++ b/ui/sd_internal/task_manager.py
@@ -436,7 +436,7 @@ def stop_render_thread(device):
try:
device_manager.validate_device_id(device, log_prefix='stop_render_thread')
except:
- print(traceback.format_exec())
+ print(traceback.format_exc())
return False
if not manager_lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('stop_render_thread' + ERR_LOCK_FAILED)
From f7ed65d7490241fd49e1b132d18c7e052a786624 Mon Sep 17 00:00:00 2001
From: cmdr2
Date: Fri, 18 Nov 2022 14:51:05 +0530
Subject: [PATCH 16/39] Bump version
---
ui/index.html | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/ui/index.html b/ui/index.html
index 43a327ad..7290a756 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -7,7 +7,7 @@
-
+
@@ -333,9 +333,9 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+
-
-
-
+
+
+
@@ -328,15 +328,15 @@