added 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,13 +212,21 @@
             </div>
         </div>
     </div>
+    
+    <div id="system-settings" class="popup">
+        <div>
+            <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>
@@ -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,26 +6,27 @@
     display: none;
 }
 
-#save-settings-config-table {
+.form-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);
 }
 
@@ -45,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;
@@ -712,4 +700,8 @@ input::file-selector-button {
     transform: scale(150%);
     cursor: pointer;
     padding: 24px;
+}
+
+#settings-button {
+    cursor: pointer;
 }

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,8 +214,20 @@ function fillSaveSettingsConfigTable() {
     })
 }
 
+// configureSettingsSaveBtn
 
-document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
+
+
+
+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"
+})
+configSettingsButton.addEventListener('click', () => {
     fillSaveSettingsConfigTable()
     saveSettingsConfigOverlay.classList.add("active")
 })

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,6 +1313,7 @@ async function getDiskPath() {
     }
 }
 
+
 /* setup popup handlers */
 document.querySelectorAll('.popup').forEach(popup => {
     popup.addEventListener('click', event => {

ui/media/js/parameters.js

@@ -8,7 +8,7 @@
  var ParameterType = {
     checkbox: "checkbox",
 	select: "select",
-	text: "text",
+	custom: "custom",
 };
 
 /**
@@ -43,10 +43,12 @@ var PARAMETERS = [
 		default: false,
 	},
 	{
-		id: "diskPath", // TODO: auto-disabling of this based on save_to_disk
+		id: "diskPath",
-		type: ParameterType.text,
+		type: ParameterType.custom,
 		label: "Save Location",
-		default: "", // Note: default value is generated
+		render: (parameter) => {
+			return `<input id="${parameter.id}" name="${parameter.id}" size="40" disabled>`
+		}
 	},
 	{
 		id: "default_vae_model",
@@ -94,4 +96,40 @@ var PARAMETERS = [
 		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")
+})