Push back the auto-save settings change by @mdiller

ui/index.html

@@ -39,6 +39,12 @@
                         <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" type="checkbox">
+                            <label for="auto_save_settings">Automatically save settings <small>(settings restored on browser load)</small></label>
+                            <button id="configureSettingsSaveBtn">Configure</button>
+                            <button id="restoreDefaultSettingsBtn">Restore Defaults</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>
@@ -215,6 +221,17 @@
         </div>
     </div>
 
+    <div id="save-settings-config" style="display:none">
+        <div>
+            <span id="save-settings-config-close-btn">X</span>
+            <h1>Save Settings Configuration</h1>
+            <p>Select which settings should be saved and reloaded when restarting the browser</p>
+            <table id="save-settings-config-table">
+                <tr><th>Setting</th><th></th><th>Default value</th></tr>
+            </table>
+        </div>
+    </div>
+
     <div class="line-separator">&nbsp;</div>
 
     <div id="footer" class="panel-box">
@@ -229,6 +246,7 @@
 </div>
 </body>
 
+<script src="media/auto-save.js?v=1"></script>
 <script src="media/main.js?v=35"></script>
 <script>
 async function init() {
@@ -236,6 +254,7 @@ async function init() {
     await getDiskPath()
     await getAppConfig()
     await getModels()
+    await initSettings()
 
     setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
     healthCheck()

ui/media/auto-save.js

@@ -0,0 +1,158 @@
+// Saving settings
+let saveSettingsCheckbox = document.getElementById("auto_save_settings")
+let saveSettingsConfigTable = document.getElementById("save-settings-config-table")
+let saveSettingsConfigOverlay = document.getElementById("save-settings-config")
+
+const SETTINGS_KEY = "user_settings"
+var SETTINGS_SHOULD_SAVE_MAP = {} // key=id. dict initialized in initSettings
+var SETTINGS_VALUES = {} // key=id. dict initialized in initSettings
+var SETTINGS_DEFAULTS = {} // key=id. dict initialized in initSettings
+var SETTINGS_TO_SAVE = [] // list of elements initialized by initSettings
+var SETTINGS_IDS_LIST = [
+    "prompt",
+    "seed",
+    "random_seed",
+    "num_outputs_total",
+    "num_outputs_parallel",
+    "stable_diffusion_model",
+    "sampler",
+    "width",
+    "height",
+    "num_inference_steps",
+    "guidance_scale_slider",
+    "prompt_strength_slider",
+    "output_format",
+    "negative_prompt",
+    "stream_image_progress",
+    "use_face_correction",
+    "use_upscale",
+    "show_only_filtered_image",
+    "upscale_model",
+    "preview-image",
+    "modifier-card-size-slider"
+]
+
+async function initSettings() {
+    SETTINGS_IDS_LIST.forEach(id => SETTINGS_TO_SAVE.push(document.getElementById(id)))
+    SETTINGS_TO_SAVE.forEach(element => {
+        SETTINGS_SHOULD_SAVE_MAP[element.id] = true
+        SETTINGS_DEFAULTS[element.id] = getSetting(element)
+        SETTINGS_VALUES[element.id] = getSetting(element)
+        element.addEventListener("input", settingChangeHandler)
+        element.addEventListener("change", settingChangeHandler)
+    })
+    loadSettings()
+    fillSaveSettingsConfigTable()
+}
+
+function getSetting(element) {
+    if (element.type == "checkbox") {
+        return element.checked
+    }
+    return element.value
+}
+function setSetting(element, value) {
+    if (getSetting(element) == value) {
+        return // no setting necessary
+    }
+    if (element.type == "checkbox") {
+        element.checked = value
+    }
+    else {
+        element.value = value
+    }
+    element.dispatchEvent(new Event("input"))
+    element.dispatchEvent(new Event("change"))
+}
+
+function saveSettings() {
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify({
+        values: SETTINGS_VALUES,
+        should_save: SETTINGS_SHOULD_SAVE_MAP
+    }))
+}
+
+
+var CURRENTLY_LOADING_SETTINGS = false
+function loadSettings() {
+    if (!saveSettingsCheckbox.checked) {
+        return
+    }
+    var saved_settings = JSON.parse(localStorage.getItem(SETTINGS_KEY))
+    if (saved_settings) {
+        var values = saved_settings.values
+        var should_save = saved_settings.should_save
+        CURRENTLY_LOADING_SETTINGS = true
+        SETTINGS_TO_SAVE.forEach(element => {
+            if (element.id in values) {
+                SETTINGS_SHOULD_SAVE_MAP[element.id] = should_save[element.id]
+                SETTINGS_VALUES[element.id] = values[element.id]
+                if (SETTINGS_SHOULD_SAVE_MAP[element.id]) {
+                    setSetting(element, SETTINGS_VALUES[element.id])
+                }
+            }
+        })
+        CURRENTLY_LOADING_SETTINGS = false
+    }
+    else {
+        saveSettings()
+    }
+}
+
+document.querySelector('#restoreDefaultSettingsBtn').addEventListener('click', loadDefaultSettings)
+function loadDefaultSettings() {
+    CURRENTLY_LOADING_SETTINGS = true
+    SETTINGS_TO_SAVE.forEach(element => {
+        SETTINGS_VALUES[element.id] = SETTINGS_DEFAULTS[element.id]
+        setSetting(element, SETTINGS_VALUES[element.id])
+    })
+    CURRENTLY_LOADING_SETTINGS = false
+    saveSettings()
+}
+
+function settingChangeHandler(event) {
+    if (!CURRENTLY_LOADING_SETTINGS) {
+        var element = event.target
+        var value = getSetting(element)
+        if (value != SETTINGS_VALUES[element.id]) {
+            SETTINGS_VALUES[element.id] = value
+            saveSettings()
+        }
+    }
+}
+
+function fillSaveSettingsConfigTable() {
+    SETTINGS_TO_SAVE.forEach(element => {
+        var caption = element.id
+        var label = document.querySelector(`label[for='${element.id}']`)
+        if (label) {
+            caption = label.innerText
+            var truncate_length = 25
+            if (caption.length > truncate_length) {
+                caption = caption.substring(0, truncate_length - 3) + "..."
+            }
+        }
+        var default_value = SETTINGS_DEFAULTS[element.id]
+        var checkbox_id = `shouldsave_${element.id}`
+        var is_checked = SETTINGS_SHOULD_SAVE_MAP[element.id] ? "checked" : ""
+        var newrow = `<tr><td><label for="${checkbox_id}">${caption}</label></td><td><input id="${checkbox_id}" name="${checkbox_id}" ${is_checked} type="checkbox" ></td><td><small>(${default_value})</small></td></tr>`
+        saveSettingsConfigTable.insertAdjacentHTML("beforeend", newrow)
+        var checkbox = document.getElementById(checkbox_id)
+        checkbox.addEventListener("input", event => {
+            SETTINGS_SHOULD_SAVE_MAP[element.id] = checkbox.checked
+            saveSettings()
+        })
+    })
+}
+
+document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
+    saveSettingsConfigOverlay.style.display = 'none'
+})
+document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
+    saveSettingsConfigOverlay.style.display = 'block'
+})
+saveSettingsConfigOverlay.addEventListener('click', (event) => {
+    if (event.target.id == saveSettingsConfigOverlay.id) {
+        saveSettingsConfigOverlay.style.display = 'none'
+    }
+})

ui/media/main.css

@@ -662,3 +662,53 @@ input[type="range"]::-moz-range-thumb {
         right: 0px;
     }
 }
+
+/* Auto-Settings Styling */
+#auto_save_settings:not(:checked) ~ button {
+    display: none;
+}
+
+#save-settings-config {
+    position: fixed;
+    background: rgba(32, 33, 36, 50%);
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+}
+
+#save-settings-config > div {
+    background: rgb(44, 45, 48);
+    max-width: 600px;
+    margin: auto;
+    margin-top: 100px;
+    border-radius: 6px;
+    padding: 30px;
+    text-align: center;
+}
+
+#save-settings-config-table {
+    margin: auto;
+}
+
+#save-settings-config-table td:first-child,
+#save-settings-config-table th:first-child {
+    float: right;
+}
+
+#save-settings-config-table td:last-child,
+#save-settings-config-table th:last-child {
+    float: left;
+}
+
+#save-settings-config-table td small {
+    color: rgb(153, 153, 153);
+}
+
+#save-settings-config-close-btn {
+    float: right;
+    cursor: pointer;
+    padding: 10px;
+    transform: translate(50%, -50%) scaleX(130%);
+}

ui/media/main.js

@@ -12,6 +12,7 @@ const USE_UPSCALING_KEY = "useUpscaling"
 const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage"
 const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress"
 const OUTPUT_FORMAT_KEY = "outputFormat"
+const AUTO_SAVE_SETTINGS_KEY = "autoSaveSettings"
 const HEALTH_PING_INTERVAL = 5 // seconds
 const MAX_INIT_IMAGE_DIMENSION = 768
 const INPAINTING_EDITOR_SIZE = 450
@@ -43,6 +44,7 @@ let useCPUField = document.querySelector('#use_cpu')
 let useFullPrecisionField = document.querySelector('#use_full_precision')
 let saveToDiskField = document.querySelector('#save_to_disk')
 let diskPathField = document.querySelector('#diskPath')
+let autoSaveSettingsField = document.querySelector('#auto_save_settings')
 // let allowNSFWField = document.querySelector("#allow_nsfw")
 let useBetaChannelField = document.querySelector("#use_beta_channel")
 let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
@@ -188,6 +190,10 @@ function isUseFullPrecisionEnabled() {
     return getLocalStorageBoolItem(USE_FULL_PRECISION_KEY, false)
 }
 
+function isAutoSaveSettingsEnabled() {
+    return getLocalStorageBoolItem(AUTO_SAVE_SETTINGS_KEY, false)
+}
+
 function isUseTurboModeEnabled() {
     return getLocalStorageBoolItem(USE_TURBO_MODE_KEY, true)
 }
@@ -1023,6 +1029,9 @@ useCPUField.checked = isUseCPUEnabled()
 useFullPrecisionField.addEventListener('click', handleBoolSettingChange(USE_FULL_PRECISION_KEY))
 useFullPrecisionField.checked = isUseFullPrecisionEnabled()
 
+autoSaveSettingsField.addEventListener('click', handleBoolSettingChange(AUTO_SAVE_SETTINGS_KEY))
+autoSaveSettingsField.checked = isAutoSaveSettingsEnabled()
+
 turboField.addEventListener('click', handleBoolSettingChange(USE_TURBO_MODE_KEY))
 turboField.checked = isUseTurboModeEnabled()