From 4a94c864336757033386501d532d90dc55ab9848 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 14:41:57 -0700
Subject: [PATCH 1/5] removed stuff from styling that wasnt settings-related

---
 ui/media/main.css | 105 ++--------------------------------------------
 1 file changed, 3 insertions(+), 102 deletions(-)

diff --git a/ui/media/main.css b/ui/media/main.css
index 759e8fae..29950e4a 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -1,8 +1,5 @@
-* {
-    font-family: Work Sans, Verdana, Geneva, sans-serif;
-}
-
 body {
+    font-family: Arial, Helvetica, sans-serif;
     font-size: 11pt;
     background-color: rgb(32, 33, 36);
     color: #eee;
@@ -32,7 +29,7 @@ label {
 }
 .image_clear_btn {
     position: absolute;
-    transform: translate(30%, -30%);
+    transform: translateX(-50%) translateY(-35%);
     background: black;
     color: white;
     border: 2pt solid #ccc;
@@ -44,8 +41,6 @@ label {
     height: 16pt;
     font-family: Verdana;
     font-size: 8pt;
-    top: 0px;
-    right: 0px;
 }
 .settings-box ul {
     font-size: 9pt;
@@ -126,7 +121,6 @@ label {
 }
 .settings-box label small {
     color: rgb(153, 153, 153);
-    margin-right: 10px;
 }
 #preview {
     padding: 5px;
@@ -423,101 +417,8 @@ img {
 #prompt_from_file {
     display: none;
 }
-#init_image_preview {
-    max-width: 150px;
-    max-height: 150px;
-	object-fit: contain;
-    border-radius: 6px;
-    transition: all 1s ease-in-out;
-}
-
-#init_image_preview:hover {
-    max-width: 500px;
-    max-height: 1000px;
-    transition: all 1s 0.5s ease-in-out;
-}
-
-#init_image_wrapper {
-    position: relative;
-    width: fit-content;
-}
-
-#init_image_size_box {
-    position: absolute;
-    right: 0px;
-    bottom: 3px;
-    padding: 3px;
-    background: rgb(32, 33, 36);
-    color: #ccc;
-    opacity: 70%;
-    font-size: 12px;
-    border-radius: 6px 0px;
-}
-
-#editor-settings-entries table td {
-    padding: 0px;
-    line-height: 28px;
-}
-
-#editor-settings-entries table td:first-child {
-    float: right;
-    padding-right: 4px;
-}
-
-button,
-input[type="file"],
-input[type="checkbox"],
-select {
-    cursor: pointer;
-}
-
-input,
-select,
-textarea {
-    background: hsl(225, 11.1%, 95%);
-    border: 2px solid hsl(225, 11.1%, 50%);
-    border-radius: 6px;
-    padding: 4px;
-    accent-color: rgb(80, 0, 185);
-    background: hsl(225, 11.1%, 14%);
-    border: 2px solid hsl(225, 11.1%, 10%); 
-    color: #ccc;
-}
-
-input { 
-    padding: 4px 6px;
-}
-
-input:focus,
-select:focus,
-textarea:focus {
-    outline: 2px solid rgb(80, 0, 185);
-}
-
-input[disabled],
-select[disabled],
-textarea[disabled] {
-    opacity: 0.5;
-}
-
-/* input[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0px;
-    padding: 0px;
-    cursor: pointer;
-    line-height: 29px;
-}
-
-input[type="range"]::-webkit-slider-thumb,
-input[type="range"]::-moz-range-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 24px;
-    height: 24px;
-    border-radius: 12px;
-} */
 
+/* Auto-Settings Styling */
 #auto_save_settings:not(:checked) ~ button {
     display: none;
 }

From 3e08d665c7ce8496da789a35932591d2e73c60b0 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 14:46:18 -0700
Subject: [PATCH 2/5] removed non-settings related stuff from html

---
 ui/index.html | 42 ++++++++++++++++++------------------------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index b968bb1c..d972341c 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <link rel="stylesheet" href="/media/drawingboard.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700;800&display=swap" rel="stylesheet"> 
     <script src="/media/jquery-3.6.1.min.js"></script>
     <script src="/media/drawingboard.min.js"></script>
 </head>
@@ -74,11 +73,8 @@
                     <label for="init_image"><b>Initial Image (img2img):</b> <small>(optional)</small> </label> <input id="init_image" name="init_image" type="file" /><br/>
 
                     <div id="init_image_preview_container" class="image_preview_container">
-                        <div id="init_image_wrapper">
-                            <img id="init_image_preview" src="" />
-                            <span id="init_image_size_box"></span>
-                            <button class="init_image_clear image_clear_btn">X</button>
-                        </div>
+                        <img id="init_image_preview" src="" width="100" height="100" />
+                        <button class="init_image_clear image_clear_btn">X</button>
 
                         <br/>
                         <input id="enable_mask" name="enable_mask" type="checkbox"> <label for="enable_mask">In-Painting (beta) <small>(select the area which the AI will paint into)</small></label>
@@ -100,16 +96,15 @@
             <div id="editor-settings" class="panel-box settings-box">
                 <h4 class="collapsible">Image Settings</h4>
                 <ul id="editor-settings-entries" class="collapsible-content">
-                    <li><table>
-                    <tr><b class="settings-subheader">Image Settings</b></tr>
-                    <tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random</label></td></tr>
-                    <tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td><td><input id="num_outputs_total" name="num_outputs_total" value="1" size="1"> <label><small>(total)</small></label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1"> <label for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr>
-                    <tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td>
+                    <li><b class="settings-subheader">Image Settings</b></li>
+                    <li class="pl-5"><label for="seed">Seed:</label> <input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random Image</label></li>
+                    <li class="pl-5"><label for="num_outputs_total">Number of images to make:</label> <input id="num_outputs_total" name="num_outputs_total" value="1" size="1"> <label for="num_outputs_parallel">Generate in parallel:</label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1"> (images at once)</li>
+                    <li class="pl-5"><label for="stable_diffusion_model">Model:</label>
                         <select id="stable_diffusion_model" name="stable_diffusion_model">
                             <!-- <option value="sd-v1-4" selected>sd-v1-4</option> -->
                         </select>
-                    </td></tr>
-                    <tr id="samplerSelection" class="pl-5"><td><label for="sampler">Sampler:</label></td><td>
+                    </li>
+                    <li id="samplerSelection" class="pl-5"><label for="sampler">Sampler:</label>
                         <select id="sampler" name="sampler">
                             <option value="plms">plms</option>
                             <option value="ddim">ddim</option>
@@ -120,8 +115,8 @@
                             <option value="dpm2_a">dpm2_a</option>
                             <option value="lms">lms</option>
                         </select>
-                    </td></tr>
-                    <tr class="pl-5"><td><label>Image Size: </label></td><td>
+                    </li>
+                    <li class="pl-5"><label>Image Size: </label>
                         <select id="width" name="width" value="512">
                             <option value="128">128 (*)</option>
                             <option value="192">192</option>
@@ -166,25 +161,24 @@
                             <option value="2048">2048</option>
                         </select>
                         <label for="height"><small>(height)</small></label>
-                    </td></tr>
-                    <tr class="pl-5"><td><label for="num_inference_steps">Inference Steps:</label></td><td> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25"></td></tr>
-                    <tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="10" max="500"> <input id="guidance_scale" name="guidance_scale" size="4"></td></tr>
-                    <tr class="pl-5"><span id="prompt_strength_container"></span><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4"><br/></td></tr></span>
-                    <tr class="pl-5"><td><label for="output_format">Output Format:</label></td><td>
+                    </li>
+                    <li class="pl-5"><label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25"></li>
+                    <li class="pl-5"><label for="guidance_scale_slider">Guidance Scale:</label> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="10" max="500"> <input id="guidance_scale" name="guidance_scale" size="4"></li>
+                    <li class="pl-5"><span id="prompt_strength_container"><label for="prompt_strength_slider">Prompt Strength:</label> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4"><br/></span></li>
+                    <li class="pl-5"><label for="output_format">Output format:</label>
                         <select id="output_format" name="output_format">
                             <option value="jpeg" selected>jpeg</option>
                             <option value="png">png</option>
                         </select>
-                    </td></tr>
-                    </li></table>
+                    </li>
 
                     <br/>
 
                     <li><b class="settings-subheader">Render Settings</b></li>
-                    <li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview <small>(uses more VRAM, slightly slower image creation)</small></label></li>
+                    <li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview of the image <small>(uses more VRAM, slightly slower image creation)</small></label></li>
                     <li class="pl-5"><input id="use_face_correction" name="use_face_correction" type="checkbox" checked> <label for="use_face_correction">Fix incorrect faces and eyes <small>(uses GFPGAN)</small></label></li>
                     <li class="pl-5">
-                        <input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Upscale image by 4x with </label>
+                        <input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Upscale the image to 4x resolution using </label>
                         <select id="upscale_model" name="upscale_model">
                             <option value="RealESRGAN_x4plus" selected>RealESRGAN_x4plus</option>
                             <option value="RealESRGAN_x4plus_anime_6B">RealESRGAN_x4plus_anime_6B</option>

From b1aed344c7b5c370ff051371bae19d23ea2c62f2 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 14:54:34 -0700
Subject: [PATCH 3/5] moved auto-save settings stuff to new file and removed ui
 changes from main.js. this not done, just first step

---
 ui/index.html         |   1 +
 ui/media/auto-save.js | 159 ++++++++++++++++++++++++++++++++++++++
 ui/media/main.js      | 174 +-----------------------------------------
 3 files changed, 164 insertions(+), 170 deletions(-)
 create mode 100644 ui/media/auto-save.js

diff --git a/ui/index.html b/ui/index.html
index d972341c..3444af85 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -240,6 +240,7 @@
 </div>
 </body>
 
+<script src="media/auto-save.js?v=1"></script>
 <script src="media/main.js?v=34"></script>
 <script>
 async function init() {
diff --git a/ui/media/auto-save.js b/ui/media/auto-save.js
new file mode 100644
index 00000000..2c21828d
--- /dev/null
+++ b/ui/media/auto-save.js
@@ -0,0 +1,159 @@
+// Saving settings 
+
+let autoSaveSettingsField = document.querySelector('#auto_save_settings')
+let configureSettingsSaveBtn = document.querySelector('#configureSettingsSaveBtn')
+let restoreDefaultSettingsBtn = document.querySelector('#restoreDefaultSettingsBtn')
+let saveSettingsConfigOverlay = document.querySelector('#save-settings-config')
+let saveSettingsConfigTable = document.querySelector('#save-settings-config-table')
+let saveSettingsConfigCloseBtn = document.querySelector('#save-settings-config-close-btn')
+
+
+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 = [
+    promptField,
+    seedField,
+    randomSeedField,
+    numOutputsTotalField,
+    numOutputsParallelField,
+    stableDiffusionModelField,
+    samplerField,
+    widthField,
+    heightField,
+    numInferenceStepsField,
+    guidanceScaleSlider,
+    promptStrengthSlider,
+    outputFormatField,
+    negativePromptField,
+    streamImageProgressField,
+    useFaceCorrectionField,
+    useUpscalingField,
+    showOnlyFilteredImageField,
+    upscaleModelField,
+    previewImageField,
+    modifierCardSizeSlider
+];
+
+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 (!autoSaveSettingsField.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();
+    }
+}
+
+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();
+        }
+    }
+}
+async function initSettings() {
+    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 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();
+        });
+    });
+}
+
+saveSettingsConfigCloseBtn.addEventListener('click', () => {
+    saveSettingsConfigOverlay.style.display = 'none';
+});
+configureSettingsSaveBtn.addEventListener('click', () => {
+    saveSettingsConfigOverlay.style.display = 'block';
+});
+saveSettingsConfigOverlay.addEventListener('click', (event) => {
+    if (event.target.id == saveSettingsConfigOverlay.id) {
+        saveSettingsConfigOverlay.style.display = 'none';
+    }
+});
\ No newline at end of file
diff --git a/ui/media/main.js b/ui/media/main.js
index 6d68c9e1..c89f757a 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -36,7 +36,6 @@ let widthField = document.querySelector('#width')
 let heightField = document.querySelector('#height')
 let initImageSelector = document.querySelector("#init_image")
 let initImagePreview = document.querySelector("#init_image_preview")
-let initImageSizeBox = document.querySelector("#init_image_size_box")
 let maskImageSelector = document.querySelector("#mask")
 let maskImagePreview = document.querySelector("#mask_preview")
 let turboField = document.querySelector('#turbo')
@@ -45,8 +44,6 @@ 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 configureSettingsSaveBtn = document.querySelector('#configureSettingsSaveBtn')
-let restoreDefaultSettingsBtn = document.querySelector('#restoreDefaultSettingsBtn')
 // let allowNSFWField = document.querySelector("#allow_nsfw")
 let useBetaChannelField = document.querySelector("#use_beta_channel")
 let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
@@ -83,10 +80,6 @@ let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
 let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
 let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
 
-let saveSettingsConfigOverlay = document.querySelector('#save-settings-config')
-let saveSettingsConfigTable = document.querySelector('#save-settings-config-table')
-let saveSettingsConfigCloseBtn = document.querySelector('#save-settings-config-close-btn')
-
 let imagePreview = document.querySelector("#preview")
 let previewImageField = document.querySelector('#preview-image')
 previewImageField.onchange = () => changePreviewImages(previewImageField.value)
@@ -267,12 +260,7 @@ function logError(msg, res, outputMsg) {
 function playSound() {
     const audio = new Audio('/media/ding.mp3')
     audio.volume = 0.2
-    var promise = audio.play();
-    if (promise !== undefined) {
-        promise.then(_ => {}).catch(error => {
-            console.warn("browser blocked autoplay");
-        });
-    }
+    audio.play()
 }
 
 async function healthCheck() {
@@ -1208,7 +1196,7 @@ function showInitImagePreview() {
     let reader = new FileReader()
     let file = initImageSelector.files[0]
 
-    reader.addEventListener('load', function(event) {
+    reader.addEventListener('load', function() {
         // console.log(file.name, reader.result)
         initImagePreview.src = reader.result
         initImagePreviewContainer.style.display = 'block'
@@ -1229,8 +1217,6 @@ initImagePreview.addEventListener('load', function() {
     inpaintingEditorCanvasBackground.style.backgroundImage = "url('" + this.src + "')"
     // maskSetting.style.display = 'block'
     // inpaintingEditorContainer.style.display = 'block'
-    initImageSizeBox.textContent = initImagePreview.naturalWidth + " x " + initImagePreview.naturalHeight
-    initImageSizeBox.style.display = 'block'
 })
 
 initImageClearBtn.addEventListener('click', function() {
@@ -1248,8 +1234,7 @@ initImageClearBtn.addEventListener('click', function() {
     // maskSetting.style.display = 'none'
 
     promptStrengthContainer.style.display = 'none'
-    samplerSelectionContainer.style.display = 'table-row'
-    initImageSizeBox.style.display = 'none'
+    samplerSelectionContainer.style.display = 'block'
 })
 
 maskSetting.addEventListener('click', function() {
@@ -1619,155 +1604,4 @@ async function loadModifiers() {
     } catch (e) {
         console.log('error fetching modifiers', e)
     }
-}
-
-// Saving settings 
-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 = [
-    promptField,
-    seedField,
-    randomSeedField,
-    numOutputsTotalField,
-    numOutputsParallelField,
-    stableDiffusionModelField,
-    samplerField,
-    widthField,
-    heightField,
-    numInferenceStepsField,
-    guidanceScaleSlider,
-    promptStrengthSlider,
-    outputFormatField,
-    negativePromptField,
-    streamImageProgressField,
-    useFaceCorrectionField,
-    useUpscalingField,
-    showOnlyFilteredImageField,
-    upscaleModelField,
-    previewImageField,
-    modifierCardSizeSlider
-];
-
-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 (!autoSaveSettingsField.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();
-    }
-}
-
-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();
-        }
-    }
-}
-async function initSettings() {
-    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 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();
-        });
-    });
-}
-
-saveSettingsConfigCloseBtn.addEventListener('click', () => {
-    saveSettingsConfigOverlay.style.display = 'none';
-});
-configureSettingsSaveBtn.addEventListener('click', () => {
-    saveSettingsConfigOverlay.style.display = 'block';
-});
-saveSettingsConfigOverlay.addEventListener('click', (event) => {
-    if (event.target.id == saveSettingsConfigOverlay.id) {
-        saveSettingsConfigOverlay.style.display = 'none';
-    }
-});
\ No newline at end of file
+}
\ No newline at end of file

From a69a04cfb64044f1abf3c0d3f33bb9e9399895a6 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Sat, 15 Oct 2022 15:10:42 -0700
Subject: [PATCH 4/5] reorganized and fixed the auto-save settings stuff so its
 all in its own file

---
 ui/media/auto-save.js | 87 ++++++++++++++++++++++---------------------
 1 file changed, 44 insertions(+), 43 deletions(-)

diff --git a/ui/media/auto-save.js b/ui/media/auto-save.js
index 2c21828d..267e46f6 100644
--- a/ui/media/auto-save.js
+++ b/ui/media/auto-save.js
@@ -1,41 +1,48 @@
 // Saving settings 
 
-let autoSaveSettingsField = document.querySelector('#auto_save_settings')
-let configureSettingsSaveBtn = document.querySelector('#configureSettingsSaveBtn')
-let restoreDefaultSettingsBtn = document.querySelector('#restoreDefaultSettingsBtn')
-let saveSettingsConfigOverlay = document.querySelector('#save-settings-config')
-let saveSettingsConfigTable = document.querySelector('#save-settings-config-table')
-let saveSettingsConfigCloseBtn = document.querySelector('#save-settings-config-close-btn')
-
 
 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 = [
-    promptField,
-    seedField,
-    randomSeedField,
-    numOutputsTotalField,
-    numOutputsParallelField,
-    stableDiffusionModelField,
-    samplerField,
-    widthField,
-    heightField,
-    numInferenceStepsField,
-    guidanceScaleSlider,
-    promptStrengthSlider,
-    outputFormatField,
-    negativePromptField,
-    streamImageProgressField,
-    useFaceCorrectionField,
-    useUpscalingField,
-    showOnlyFilteredImageField,
-    upscaleModelField,
-    previewImageField,
-    modifierCardSizeSlider
+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;
@@ -63,9 +70,11 @@ function saveSettings() {
     }));
 }
 
+
+let saveSettingsCheckbox = document.getElementById("auto_save_settings");
 var CURRENTLY_LOADING_SETTINGS = false;
 function loadSettings() {
-    if (!autoSaveSettingsField.checked) {
+    if (!saveSettingsCheckbox.checked) {
         return;
     }
     var saved_settings = JSON.parse(localStorage.getItem(SETTINGS_KEY));
@@ -110,18 +119,9 @@ function settingChangeHandler(event) {
         }
     }
 }
-async function initSettings() {
-    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();
-}
 
+
+let saveSettingsConfigTable = document.getElementById("save-settings-config-table");
 function fillSaveSettingsConfigTable() {
     SETTINGS_TO_SAVE.forEach(element => {
         var caption = element.id;
@@ -146,10 +146,11 @@ function fillSaveSettingsConfigTable() {
     });
 }
 
-saveSettingsConfigCloseBtn.addEventListener('click', () => {
+let saveSettingsConfigOverlay = document.getElementById("save-settings-config");
+document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
     saveSettingsConfigOverlay.style.display = 'none';
 });
-configureSettingsSaveBtn.addEventListener('click', () => {
+document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
     saveSettingsConfigOverlay.style.display = 'block';
 });
 saveSettingsConfigOverlay.addEventListener('click', (event) => {

From fd21eeb4777bfafba6f3f14472dfa3bb4432458f Mon Sep 17 00:00:00 2001
From: cmdr2 <shashank.shekhar.global@gmail.com>
Date: Mon, 17 Oct 2022 11:26:02 +0530
Subject: [PATCH 5/5] Uncomment the git reset

---
 scripts/on_env_start.bat | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/on_env_start.bat b/scripts/on_env_start.bat
index 1ebea8e8..a85e22dd 100644
--- a/scripts/on_env_start.bat
+++ b/scripts/on_env_start.bat
@@ -34,8 +34,8 @@ if "%update_branch%"=="" (
 
     @cd sd-ui-files
 
-    @REM @call git reset --hard
-    @REM @call git checkout "%update_branch%"
+    @call git reset --hard
+    @call git checkout "%update_branch%"
     @call git pull
 
     @cd ..
@@ -59,4 +59,4 @@ if "%update_branch%"=="" (
 
 @call scripts\on_sd_start.bat
 
-@pause
\ No newline at end of file
+@pause