Merge pull request #417 from mdiller/mdiller_parameters

Moved System Settings & Reworked into "Parameters"

ui/index.html

@@ -30,35 +30,8 @@
                     <li><a href="https://github.com/cmdr2/stable-diffusion-ui" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
                 </ul>
             </li>
-            <li class="dropdown">
+            <li id="settings-button" class="dropdown">
                 <span><i class="fa fa-gear icon"></i> Settings</span>
-                <div id="system-settings" class="panel-box settings-box dropdown-content">
-                    <ul id="system-settings-entries">
-                        <li><b class="settings-subheader">System Settings</b></li>
-                        <br/>
-                        <li><label for="theme">Theme: </label><select id="theme" name="theme"><option value="theme-default">Default</option></select></li>
-                        <li><input id="save_to_disk" name="save_to_disk" type="checkbox"> <label for="save_to_disk">Automatically save to <input id="diskPath" name="diskPath" size="40" disabled></label></li>
-                        <li>
-                            <label for="default_vae_model">Default VAE:</label></td><td>
-                            <select id="default_vae_model" name="default_vae_model">
-                                <!-- <option value="vae-ft-mse-840000-ema-pruned" selected>vae-ft-mse-840000-ema-pruned</option> -->
-                            </select>
-                        </li>
-                        <li><input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Play sound on task completion</label></li>
-                        <li><input id="turbo" name="turbo" type="checkbox" checked> <label for="turbo">Turbo mode <small>(generates images faster, but uses an additional 1 GB of GPU memory)</small></label></li>
-                        <li><input id="use_cpu" name="use_cpu" type="checkbox"> <label for="use_cpu">Use CPU instead of GPU <small>(warning: this will be *very* slow)</small></label></li>
-                        <li><input id="use_full_precision" name="use_full_precision" type="checkbox"> <label for="use_full_precision">Use full precision <small>(for GPU-only. warning: this will consume more VRAM)</small></label></li>
-                        <li>
-                            <input id="auto_save_settings" name="auto_save_settings" checked type="checkbox">
-                            <label for="auto_save_settings">Automatically save settings <small>(settings restored on browser load)</small></label>
-                            <br/>
-                            <button id="configureSettingsSaveBtn">Configure</button>
-                        </li>
-                        <!-- <li><input id="allow_nsfw" name="allow_nsfw" type="checkbox"> <label for="allow_nsfw">Allow NSFW Content (You confirm you are above 18 years of age)</label></li> -->
-                        <br/>
-                        <li><input id="use_beta_channel" name="use_beta_channel" type="checkbox"> <label for="use_beta_channel">🔥Beta channel. Get the latest features immediately (but could be less stable). Please restart the program after changing this.</label></li>
-                    </ul>
-                </div>
             </li>
         </ul>
     </div>
@@ -239,20 +212,28 @@
             </div>
         </div>
     </div>
-
+    
-    <div id="save-settings-config" style="display:none">
+    <div id="system-settings" class="popup">
         <div>
-            <span id="save-settings-config-close-btn">X</span>
+            <i class="close-button fa-solid fa-xmark"></i>
+            <h1>System Settings</h1>
+            <table class="form-table"></table>
+        </div>
+    </div>
+
+    <div id="save-settings-config" class="popup">
+        <div>
+            <i class="close-button fa-solid fa-xmark"></i>
             <h1>Save Settings Configuration</h1>
             <p>Select which settings should be remembered when restarting the browser</p>
-            <table id="save-settings-config-table">
+            <table id="save-settings-config-table" class="form-table">
             </table>
         </div>
     </div>
 
-    <div id="modifier-settings-config" style="display:none">
+    <div id="modifier-settings-config" class="popup">
         <div>
-            <span id="modifier-settings-config-close-btn">X</span>
+            <i class="close-button fa-solid fa-xmark"></i>
             <h1>Modifier Settings</h1>
             <p>Set your custom modifiers (one per line)</p>
             <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line"></textarea>
@@ -274,6 +255,7 @@
 </div>
 </body>
 
+<script src="media/js/parameters.js?v=1"></script>
 <script src="media/js/plugins.js?v=1"></script>
 <script src="media/js/utils.js?v=4"></script>
 <script src="media/js/inpainting-editor.js?v=1"></script>

ui/media/css/auto-save.css

@@ -6,56 +6,30 @@
     display: none;
 }
 
-#save-settings-config {
+.form-table {
-    position: absolute;
-    background: rgba(32, 33, 36, 50%);
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    z-index: 1000;
-}
-
-#save-settings-config > div {
-    background: var(--background-color3);
-    max-width: 600px;
-    margin: auto;
-    margin-top: 50px;
-    border-radius: 6px;
-    padding: 30px;
-    text-align: center;
-}
-
-#save-settings-config-table {
     margin: auto;
 }
 
-#save-settings-config-table th {
+.form-table th {
     padding-top: 15px;
     padding-bottom: 5px;
 }
 
-#save-settings-config-table td:first-child,
+.form-table td:first-child > *,
-#save-settings-config-table th:first-child {
+.form-table th:first-child > * {
     float: right;
+    white-space: nowrap;
 }
 
-#save-settings-config-table td:last-child,
+.form-table td:last-child > *,
-#save-settings-config-table th:last-child {
+.form-table th:last-child > * {
     float: left;
 }
 
-#save-settings-config-table td small {
+.form-table small {
     color: rgb(153, 153, 153);
 }
 
-#save-settings-config-close-btn {
-    float: right;
-    cursor: pointer;
-    padding: 10px;
-    transform: translate(50%, -50%) scaleX(130%);
-}
-
 #reset-image-settings {
     cursor: pointer;
     float: right;
@@ -72,3 +46,20 @@
     opacity: 0;
     pointer-events: none;
 }
+
+#system-settings .form-table td {
+    height: 24px;
+}
+
+#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;
+    text-align: left;
+}

ui/media/css/main.css

@@ -311,6 +311,8 @@ img {
     float: left;
     display: inline;
     padding-left: 20pt;
+}
+#top-nav-items > li:first-child {
     cursor: default;
 }
 #initial-text {
@@ -324,20 +326,6 @@ img {
 .pl-5 {
     padding-left: 5pt;
 }
-#system-settings {
-    width: 360pt;
-    transform: translateX(-100%) translateX(70pt);
-
-    padding-top: 10pt;
-    padding-bottom: 10pt;
-}
-#system-settings ul {
-    margin: 0;
-    padding: 0;
-}
-#system-settings li {
-    padding-left: 5pt;
-}
 #community-links {
     list-style-type: none;
     margin: 0;
@@ -677,4 +665,47 @@ input::file-selector-button {
 @keyframes progress-anim { 
     0%   { background-position: -55px 0; }
     100% { background-position: 0 0; }
+}
+
+.popup:not(.active) {
+    visibility: hidden;
+    opacity: 0;
+}
+
+.popup {
+    position: absolute;
+    background: rgba(32, 33, 36, 50%);
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: 1000;
+    opacity: 1;
+    transition: 0s visibility, 0.3s opacity;
+}
+
+.popup > div {
+    position: relative;
+    background: var(--background-color2);
+    border: solid 1px var(--background-color3);
+    max-width: 700px;
+    margin: auto;
+    margin-top: 50px;
+    border-radius: 6px;
+    padding: 30px;
+    text-align: center;
+    box-shadow: 0px 0px 30px black;
+}
+
+.popup .close-button {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    transform: scale(150%);
+    cursor: pointer;
+    padding: 24px;
+}
+
+#settings-button {
+    cursor: pointer;
 }

ui/media/css/modifier-thumbnails.css

@@ -217,32 +217,6 @@
 #modifier-settings-btn {
     float: right;
 }
-
-#modifier-settings-config {
-    position: fixed;
-    background: rgba(32, 33, 36, 50%);
-    top: 0px;
-    left: 0px;
-    width: 100vw;
-    height: 100vh;
-    z-index: 1000;
-}
-
-#modifier-settings-config > div {
-    background: var(--background-color2);
-    max-width: 600px;
-    margin: auto;
-    margin-top: 100px;
-    border-radius: 6px;
-    padding: 30px;
-    text-align: center;
-}
-#modifier-settings-config-close-btn {
-    float: right;
-    cursor: pointer;
-    padding: 10px;
-    transform: translate(50%, -50%) scaleX(130%);
-}
 #modifier-settings-config textarea {
     width: 90%;
     height: 150px;

ui/media/js/auto-save.js

@@ -52,7 +52,9 @@ const SETTINGS_SECTIONS = [ // gets the "keys" property filled in with an ordere
 async function initSettings() {
     SETTINGS_IDS_LIST.forEach(id => {
         var element = document.getElementById(id)
-        var label = document.querySelector(`label[for='${element.id}']`)
+        if (!element) {
+            console.error(`Missing settings element ${id}`)
+        }
         SETTINGS[id] = {
             key: id,
             element: element,
@@ -126,8 +128,12 @@ function loadSettings() {
             return
         }
         CURRENTLY_LOADING_SETTINGS = true
-        saved_settings.map(saved_setting => {
+        saved_settings.forEach(saved_setting => {
             var setting = SETTINGS[saved_setting.key]
+            if (!setting) {
+                console.warn(`Attempted to load setting ${saved_setting.key}, but no setting found`);
+                return null;
+            }
             setting.ignore = saved_setting.ignore
             if (!setting.ignore) {
                 setting.value = saved_setting.value
@@ -208,20 +214,22 @@ function fillSaveSettingsConfigTable() {
     })
 }
 
-document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
+// configureSettingsSaveBtn
-    saveSettingsConfigOverlay.style.display = 'none'
+
+
+
+
+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.addEventListener("change", () => {
+    configSettingsButton.style.display = autoSaveSettings.checked ? "block" : "none"
 })
-document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
+configSettingsButton.addEventListener('click', () => {
     fillSaveSettingsConfigTable()
-    saveSettingsConfigOverlay.style.display = 'block'
+    saveSettingsConfigOverlay.classList.add("active")
-})
-saveSettingsConfigOverlay.addEventListener('click', (event) => {
-    if (event.target.id == saveSettingsConfigOverlay.id) {
-        saveSettingsConfigOverlay.style.display = 'none'
-    }
-})
-document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
-    saveSettingsConfigOverlay.style.display = 'none'
 })
 resetImageSettingsButton.addEventListener('click', event => {
     loadDefaultSettingsSection("editor-settings");

ui/media/js/image-modifiers.js

@@ -246,15 +246,7 @@ modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlid
 previewImageField.onchange = () => changePreviewImages(previewImageField.value)
 
 modifierSettingsBtn.addEventListener('click', function() {
-    modifierSettingsOverlay.style.display = 'block'
+    modifierSettingsOverlay.classList.add("active")
-})
-document.getElementById("modifier-settings-config-close-btn").addEventListener('click', () => {
-    modifierSettingsOverlay.style.display = 'none'
-})
-modifierSettingsOverlay.addEventListener('click', (event) => {
-    if (event.target.id == modifierSettingsOverlay.id) {
-        modifierSettingsOverlay.style.display = 'none'
-    }
 })
 
 function saveCustomModifiers() {

ui/media/js/main.js

@@ -1054,11 +1054,13 @@ function onDimensionChange() {
     resizeInpaintingEditor(widthValue, heightValue)
 }
 
-saveToDiskField.addEventListener('click', function(e) {
+diskPathField.disabled = !saveToDiskField.checked
+saveToDiskField.addEventListener('change', function(e) {
     diskPathField.disabled = !this.checked
 })
 
-useUpscalingField.addEventListener('click', function(e) {
+upscaleModelField.disabled = !useUpscalingField.checked
+useUpscalingField.addEventListener('change', function(e) {
     upscaleModelField.disabled = !this.checked
 })
 
@@ -1311,4 +1313,20 @@ async function getDiskPath() {
     }
 }
 
+
+/* setup popup handlers */
+document.querySelectorAll('.popup').forEach(popup => {
+    popup.addEventListener('click', event => {
+        if (event.target == popup) {
+            popup.classList.remove("active")
+        }
+    })
+    var closeButton = popup.querySelector(".close-button")
+    if (closeButton) {
+        closeButton.addEventListener('click', () => {
+            popup.classList.remove("active")
+        })
+    }
+})
+
 createCollapsibles()

ui/media/js/parameters.js

@@ -0,0 +1,137 @@
+
+
+/**
+ * Enum of parameter types
+ * @readonly
+ * @enum {string}
+ */
+ var ParameterType = {
+    checkbox: "checkbox",
+	select: "select",
+	custom: "custom",
+};
+
+/**
+ * JSDoc style
+ * @typedef {object} Parameter
+ * @property {string} id
+ * @property {ParameterType} type
+ * @property {string} label
+ * @property {?string} note
+ * @property {number|boolean|string} default
+ */
+
+
+/** @type {Array.<Parameter>} */
+var PARAMETERS = [
+	{
+		id: "theme",
+		type: ParameterType.select,
+		label: "Theme",
+		default: "theme-default",
+		options: [ // Note: options expanded dynamically
+			{
+				value: "theme-default",
+				label: "Default"
+			}
+		]
+	},
+	{
+		id: "save_to_disk",
+		type: ParameterType.checkbox,
+		label: "Auto-Save Images",
+		note: "automatically saves images to the specified location",
+		default: false,
+	},
+	{
+		id: "diskPath",
+		type: ParameterType.custom,
+		label: "Save Location",
+		render: (parameter) => {
+			return `<input id="${parameter.id}" name="${parameter.id}" size="40" disabled>`
+		}
+	},
+	{
+		id: "default_vae_model",
+		type: ParameterType.select, // Note: options generated dynamically
+		label: "Default VAE",
+	},
+	{
+		id: "sound_toggle",
+		type: ParameterType.checkbox,
+		label: "Enable Sound",
+		note: "plays a sound on task completion",
+		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",
+	},
+	{
+		id: "use_cpu",
+		type: ParameterType.checkbox,
+		label: "Use CPU instead of GPU",
+		note: "warning: this will be *very* slow",
+		default: false,
+	},
+	{
+		id: "use_full_precision",
+		type: ParameterType.checkbox,
+		label: "Use Full Precision",
+		note: "for GPU-only. warning: this will consume more VRAM",
+		default: false,
+	},
+	{
+		id: "auto_save_settings",
+		type: ParameterType.checkbox,
+		label: "Auto-Save Settings",
+		note: "restores settings on browser load",
+		default: true,
+	},
+	{
+		id: "use_beta_channel",
+		type: ParameterType.checkbox,
+		label: "🔥Beta channel",
+		note: "Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
+		default: false,
+	},
+];
+
+
+function getParameterElement(parameter) {
+	switch (parameter.type) {
+		case ParameterType.checkbox:
+			var is_checked = parameter.default ? " checked" : "";
+			return `<input id="${parameter.id}" name="${parameter.id}"${is_checked} type="checkbox">`
+		case ParameterType.select:
+			var options = (parameter.options || []).map(option => `<option value="${option.value}">${option.label}</option>`).join("")
+			return `<select id="${parameter.id}" name="${parameter.id}">${options}</select>`
+		case ParameterType.custom:
+			return parameter.render(parameter)
+		default:
+			console.error(`Invalid type for parameter ${parameter.id}`);
+			return "ERROR: Invalid Type"
+	}
+}
+
+var parametersTable = document.querySelector("#system-settings table")
+/* fill in the system settings popup table */
+function initParameters() {
+	PARAMETERS.forEach(parameter => {
+		var element = getParameterElement(parameter)
+		var note = parameter.note ? `<small>${parameter.note}</small>` : "";
+		var newrow = `<tr>
+			<td><label for="${parameter.id}">${parameter.label}</label></td>
+			<td><div>${element}${note}<div></td></tr>`
+		parametersTable.insertAdjacentHTML("beforeend", newrow)
+	})
+}
+
+initParameters();
+
+document.getElementById("settings-button").addEventListener('click', event => {
+    document.getElementById("system-settings").classList.add("active")
+})