From 8554473c21cefabf448337222ea842f7cc2f2de9 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Wed, 19 Oct 2022 21:12:01 -0700
Subject: [PATCH] the rest of the fking owl

---
 ui/index.html              |  13 ++-
 ui/media/css/auto-save.css |  33 ++++++-
 ui/media/css/main.css      |   5 +-
 ui/media/js/auto-save.js   | 180 ++++++++++++++++++++++++-------------
 ui/media/js/main.js        |  44 ++++-----
 ui/media/js/themes.js      |  12 +++
 ui/media/js/utils.js       |  40 ++++-----
 7 files changed, 212 insertions(+), 115 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 9d28ee9a..8bd50fc8 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -47,7 +47,6 @@
                             <label for="auto_save_settings">Automatically save settings <small>(settings restored on browser load)</small></label>
                             <br/>
                             <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/>
@@ -104,7 +103,7 @@
             <div class="line-separator">&nbsp;</div>
 
             <div id="editor-settings" class="panel-box settings-box">
-                <h4 class="collapsible">Image Settings</h4>
+                <h4 class="collapsible">Image Settings<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left"></i></h4>
                 <ul id="editor-settings-entries" class="collapsible-content">
                     <li><table>
                     <tr><b class="settings-subheader">Image Settings</b></tr>
@@ -231,9 +230,8 @@
         <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>
+            <p>Select which settings should be remembered 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>
@@ -260,11 +258,12 @@
 <script src="media/js/themes.js?v=1"></script>
 <script>
 async function init() {
-    await loadModifiers()
+    await initSettings()
+    await getModels()
     await getDiskPath()
     await getAppConfig()
-    await getModels()
-    await initSettings()
+    await loadModifiers()
+
 
     setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
     healthCheck()
diff --git a/ui/media/css/auto-save.css b/ui/media/css/auto-save.css
index 717ba93f..cb6ccb80 100644
--- a/ui/media/css/auto-save.css
+++ b/ui/media/css/auto-save.css
@@ -1,15 +1,18 @@
 /* Auto-Settings Styling */
+#auto_save_settings ~ button {
+    margin: 5px;
+}
 #auto_save_settings:not(:checked) ~ button {
     display: none;
 }
 
 #save-settings-config {
-    position: fixed;
+    position: absolute;
     background: rgba(32, 33, 36, 50%);
     top: 0px;
     left: 0px;
-    width: 100vw;
-    height: 100vh;
+    right: 0px;
+    bottom: 0px;
     z-index: 1000;
 }
 
@@ -17,7 +20,7 @@
     background: var(--background-color3);
     max-width: 600px;
     margin: auto;
-    margin-top: 100px;
+    margin-top: 50px;
     border-radius: 6px;
     padding: 30px;
     text-align: center;
@@ -27,6 +30,11 @@
     margin: auto;
 }
 
+#save-settings-config-table th {
+    padding-top: 15px;
+    padding-bottom: 5px;
+}
+
 #save-settings-config-table td:first-child,
 #save-settings-config-table th:first-child {
     float: right;
@@ -47,3 +55,20 @@
     padding: 10px;
     transform: translate(50%, -50%) scaleX(130%);
 }
+
+#reset-image-settings {
+    cursor: pointer;
+    float: right;
+    padding: 8px;
+    opacity: 1;
+    transition: opacity 0.5;
+}
+
+.collapsible:not(.active) #reset-image-settings {
+    display: none;
+}
+
+#reset-image-settings.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index ebc48be2..b1233997 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1,7 +1,10 @@
 * {
     font-family: Work Sans, Verdana, Geneva, sans-serif;
     box-sizing: border-box;
-    transition: background 0.5s, color 0.5s, background-color 0.5s;
+}
+
+html {
+    position: relative;
 }
 
 body {
diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js
index e3d85dd0..850d61c3 100644
--- a/ui/media/js/auto-save.js
+++ b/ui/media/js/auto-save.js
@@ -1,14 +1,13 @@
 // Saving settings
-let saveSettingsCheckbox = document.getElementById("auto_save_settings")
 let saveSettingsConfigTable = document.getElementById("save-settings-config-table")
 let saveSettingsConfigOverlay = document.getElementById("save-settings-config")
+let resetImageSettingsButton = document.getElementById("reset-image-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 = [] // list of elements initialized by initSettings
-var SETTINGS_IDS_LIST = [
+const SETTINGS_KEY = "user_settings_v2"
+
+const SETTINGS = {} // key=id. dict initialized in initSettings. { element, default, value, ignore }
+const SETTINGS_IDS_LIST = [
+    "prompt",
     "seed",
     "random_seed",
     "num_outputs_total",
@@ -18,8 +17,8 @@ var SETTINGS_IDS_LIST = [
     "width",
     "height",
     "num_inference_steps",
-    "guidance_scale_slider",
-    "prompt_strength_slider",
+    "guidance_scale",
+    "prompt_strength",
     "output_format",
     "negative_prompt",
     "stream_image_progress",
@@ -39,22 +38,49 @@ var SETTINGS_IDS_LIST = [
     "auto_save_settings"
 ]
 
+const IGNORE_BY_DEFAULT = [
+    "prompt"
+]
+
+const SETTINGS_SECTIONS = [ // gets the "keys" property filled in with an ordered list of settings in this section via initSettings
+    { id: "editor-inputs",   name: "Prompt" },
+    { id: "editor-settings", name: "Image Settings" },
+    { id: "system-settings", name: "System Settings" },
+    { id: "container",       name: "Other" }
+]
+
 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)
+    SETTINGS_IDS_LIST.forEach(id => {
+        var element = document.getElementById(id)
+        var label = document.querySelector(`label[for='${element.id}']`)
+        SETTINGS[id] = {
+            key: id,
+            element: element,
+            label: getSettingLabel(element),
+            default: getSetting(element),
+            value: getSetting(element),
+            ignore: IGNORE_BY_DEFAULT.includes(id)
+        }
         element.addEventListener("input", settingChangeHandler)
         element.addEventListener("change", settingChangeHandler)
     })
+    var unsorted_settings_ids = [...SETTINGS_IDS_LIST]
+    SETTINGS_SECTIONS.forEach(section => {
+        var name = section.name
+        var element = document.getElementById(section.id)
+        var children = Array.from(element.querySelectorAll(unsorted_settings_ids.map(id => `#${id}`).join(",")))
+        section.keys = []
+        children.forEach(e => {
+            section.keys.push(e.id)
+        })
+        unsorted_settings_ids = unsorted_settings_ids.filter(id => children.find(e => e.id == id) == undefined)
+    })
     loadSettings()
-    fillSaveSettingsConfigTable()
 }
 
 function getSetting(element) {
-    if (element instanceof String) {
-        element = SETTINGS_TO_SAVE.find(e => e.id == element);
+    if (typeof element === "string" || element instanceof String) {
+        element = SETTINGS[element].element
     }
     if (element.type == "checkbox") {
         return element.checked
@@ -63,8 +89,9 @@ function getSetting(element) {
 }
 function setSetting(element, value) {
     if (typeof element === "string" || element instanceof String) {
-        element = SETTINGS_TO_SAVE.find(e => e.id == element);
+        element = SETTINGS[element].element
     }
+    SETTINGS[element.id].value = value
     if (getSetting(element) == value) {
         return // no setting necessary
     }
@@ -79,31 +106,32 @@ function setSetting(element, value) {
 }
 
 function saveSettings() {
-    localStorage.setItem(SETTINGS_KEY, JSON.stringify({
-        values: SETTINGS_VALUES,
-        should_save: SETTINGS_SHOULD_SAVE_MAP
-    }))
+    var saved_settings = Object.values(SETTINGS).map(setting => {
+        return {
+            key: setting.key,
+            value: setting.value,
+            ignore: setting.ignore
+        }
+    })
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(saved_settings))
 }
 
-
 var CURRENTLY_LOADING_SETTINGS = false
 function loadSettings() {
-    var saved_settings = JSON.parse(localStorage.getItem(SETTINGS_KEY))
-    if (!saved_settings.values["auto_save_settings"]) {
-        setSetting("auto_save_settings", false);
-        return
-    }
-    if (saved_settings) {
-        var values = saved_settings.values
-        var should_save = saved_settings.should_save
+    var saved_settings_text = localStorage.getItem(SETTINGS_KEY)
+    if (saved_settings_text) {
+        var saved_settings = JSON.parse(saved_settings_text)
+        if (saved_settings.find(s => s.key == "auto_save_settings").value == false) {
+            setSetting("auto_save_settings", false)
+            return
+        }
         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])
-                }
+        saved_settings.map(saved_setting => {
+            var setting = SETTINGS[saved_setting.key]
+            setting.ignore = saved_setting.ignore
+            if (!setting.ignore) {
+                setting.value = saved_setting.value
+                setSetting(setting.element, setting.value)
             }
         })
         CURRENTLY_LOADING_SETTINGS = false
@@ -113,12 +141,13 @@ function loadSettings() {
     }
 }
 
-document.querySelector('#restoreDefaultSettingsBtn').addEventListener('click', loadDefaultSettings)
-function loadDefaultSettings() {
+function loadDefaultSettingsSection(section_id) {
     CURRENTLY_LOADING_SETTINGS = true
-    SETTINGS_TO_SAVE.forEach(element => {
-        SETTINGS_VALUES[element.id] = SETTINGS_DEFAULTS[element.id]
-        setSetting(element, SETTINGS_VALUES[element.id])
+    var section = SETTINGS_SECTIONS.find(s => s.id == section_id);
+    section.keys.forEach(key => {
+        var setting = SETTINGS[key];
+        setting.value = setting.default
+        setSetting(setting.element, setting.value)
     })
     CURRENTLY_LOADING_SETTINGS = false
     saveSettings()
@@ -128,33 +157,50 @@ 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
+        if (value != SETTINGS[element.id].value) {
+            SETTINGS[element.id].value = value
             saveSettings()
         }
     }
 }
 
+function getSettingLabel(element) {
+    var labelElement = document.querySelector(`label[for='${element.id}']`)
+    var label = labelElement?.innerText || element.id
+    var truncate_length = 30
+    if (label.includes(" (")) {
+        label = label.substring(0, label.indexOf(" ("))
+    }
+    if (label.length > truncate_length) {
+        label = label.substring(0, truncate_length - 3) + "..."
+    }
+    label = label.replace("➕", "")
+    label = label.replace("➖", "")
+    return label
+}
+
 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) + "..."
+    saveSettingsConfigTable.textContent = ""
+    SETTINGS_SECTIONS.forEach(section => {
+        var section_row = `<tr><th>${section.name}</th><td></td></tr>`
+        saveSettingsConfigTable.insertAdjacentHTML("beforeend", section_row)
+        section.keys.forEach(key => {
+            var setting = SETTINGS[key]
+            var element = setting.element
+            var checkbox_id = `shouldsave_${element.id}`
+            var is_checked = setting.ignore ? "" : "checked"
+            var value = setting.value
+            var value_truncate_length = 30
+            if ((typeof value === "string" || value instanceof String) && value.length > value_truncate_length) {
+                value = value.substring(0, value_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()
+            var newrow = `<tr><td><label for="${checkbox_id}">${setting.label}</label></td><td><input id="${checkbox_id}" name="${checkbox_id}" ${is_checked} type="checkbox" ></td><td><small>(${value})</small></td></tr>`
+            saveSettingsConfigTable.insertAdjacentHTML("beforeend", newrow)
+            var checkbox = document.getElementById(checkbox_id)
+            checkbox.addEventListener("input", event => {
+                setting.ignore = !checkbox.checked
+                saveSettings()
+            })
         })
     })
 }
@@ -163,10 +209,18 @@ document.getElementById("save-settings-config-close-btn").addEventListener('clic
     saveSettingsConfigOverlay.style.display = 'none'
 })
 document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
+    fillSaveSettingsConfigTable()
     saveSettingsConfigOverlay.style.display = 'block'
 })
 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");
+    event.stopPropagation()
 })
\ No newline at end of file
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 1bb1151d..19f0cae7 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -29,8 +29,6 @@ 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 themeField = document.querySelector('#theme')
 // let allowNSFWField = document.querySelector("#allow_nsfw")
 let useBetaChannelField = document.querySelector("#use_beta_channel")
 let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
@@ -187,11 +185,11 @@ function asyncDelay(timeout) {
 function playSound() {
     const audio = new Audio('/media/ding.mp3')
     audio.volume = 0.2
-    var promise = audio.play();
+    var promise = audio.play()
     if (promise !== undefined) {
         promise.then(_ => {}).catch(error => {
-            console.warn("browser blocked autoplay");
-        });
+            console.warn("browser blocked autoplay")
+        })
     }
 }
 
@@ -656,7 +654,7 @@ async function checkTasks() {
     const genSeeds = Boolean(typeof task.reqBody.seed !== 'number' || (task.reqBody.seed === task.seed && task.numOutputsTotal > 1))
     const startSeed = task.reqBody.seed || task.seed
     for (let i = 0; i < task.batchCount; i++) {
-        let newTask = task;
+        let newTask = task
         if (task.batchCount > 1) {
             // Each output render batch needs it's own task instance to avoid altering the other runs after they are completed.
             newTask = Object.assign({}, task, {
@@ -1003,6 +1001,7 @@ makeImageBtn.addEventListener('click', makeImage)
 
 function updateGuidanceScale() {
     guidanceScaleField.value = guidanceScaleSlider.value / 10
+    guidanceScaleField.dispatchEvent(new Event("change"))
 }
 
 function updateGuidanceScaleSlider() {
@@ -1021,6 +1020,7 @@ updateGuidanceScale()
 
 function updatePromptStrength() {
     promptStrengthField.value = promptStrengthSlider.value / 100
+    promptStrengthField.dispatchEvent(new Event("change"))
 }
 
 function updatePromptStrengthSlider() {
@@ -1083,10 +1083,12 @@ async function getAppConfig() {
 
 async function getModels() {
     try {
+        var model_setting_key = "stable_diffusion_model"
+        var selectedModel = SETTINGS[model_setting_key].value
         let res = await fetch('/get/models')
         const models = await res.json()
 
-        let activeModel = models['active']
+        // let activeModel = models['active']
         let modelOptions = models['options']
         let stableDiffusionOptions = modelOptions['stable-diffusion']
 
@@ -1095,13 +1097,19 @@ async function getModels() {
             modelOption.value = modelName
             modelOption.innerText = modelName
 
-            if (modelName === activeModel['stable-diffusion']) {
+            if (modelName === selectedModel) {
                 modelOption.selected = true
             }
 
             stableDiffusionModelField.appendChild(modelOption)
         })
 
+        // TODO: set default for model here too
+        SETTINGS[model_setting_key].default = stableDiffusionOptions[0]
+        if (getSetting(model_setting_key) == '' || SETTINGS[model_setting_key].value == '') {
+            setSetting(model_setting_key, stableDiffusionOptions[0])
+        }
+
         console.log('get models response', models)
     } catch (e) {
         console.log('get models error', e)
@@ -1203,19 +1211,15 @@ promptsFromFileSelector.addEventListener('change', function() {
 
 async function getDiskPath() {
     try {
-        let diskPath = getSavedDiskPath()
+        var diskPath = getSetting("diskPath")
+        if (diskPath == '' || diskPath == undefined || diskPath == "undefined") {
+            let res = await fetch('/get/output_dir')
+            if (res.status === 200) {
+                res = await res.json()
+                res = res.output_dir
 
-        if (diskPath !== '') {
-            diskPathField.value = diskPath
-            return
-        }
-
-        let res = await fetch('/get/output_dir')
-        if (res.status === 200) {
-            res = await res.json()
-            res = res.output_dir
-
-            document.querySelector('#diskPath').value = res
+                setSetting("diskPath", res)
+            }
         }
     } catch (e) {
         console.log('error fetching output dir path', e)
diff --git a/ui/media/js/themes.js b/ui/media/js/themes.js
index 1b960a2e..d23e9b08 100644
--- a/ui/media/js/themes.js
+++ b/ui/media/js/themes.js
@@ -1,3 +1,4 @@
+const themeField = document.getElementById("theme");
 var DEFAULT_THEME = {};
 var THEMES = []; // initialized in initTheme from data in css
 
@@ -36,6 +37,15 @@ function initTheme() {
         new_option.innerText = theme.name;
         themeField.appendChild(new_option);
     });
+
+    
+    // setup the style transitions a second after app initializes, so initial style is instant
+    setTimeout(() => {
+        var body = document.querySelector("body");
+        var style = document.createElement('style');
+        style.innerHTML = "* { transition: background 0.5s, color 0.5s, background-color 0.5s; }";
+        body.appendChild(style);
+    }, 1000);
 }
 initTheme();
 
@@ -45,6 +55,8 @@ function themeFieldChanged() {
     var body = document.querySelector("body");
     body.classList.remove(...THEMES.map(theme => theme.key));
     body.classList.add(theme_key);
+    
+    // 
 
     body.style = "";
     var theme = THEMES.find(t => t.key == theme_key);
diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js
index a0d0c2fe..af177c80 100644
--- a/ui/media/js/utils.js
+++ b/ui/media/js/utils.js
@@ -38,29 +38,29 @@ function toggleCollapsible(element) {
     }
     
     if (COLLAPSIBLES_INITIALIZED && COLLAPSIBLE_PANELS.includes(element)) {
-        saveCollapsibles();
+        saveCollapsibles()
     }
 }
 
 function saveCollapsibles() {
-    var values = {};
+    var values = {}
     COLLAPSIBLE_PANELS.forEach(element => {
-        var value = element.querySelector(".collapsible").className.indexOf("active") !== -1;
-        values[element.id] = value;
-    });
-    localStorage.setItem(COLLAPSIBLES_KEY, JSON.stringify(values));
+        var value = element.querySelector(".collapsible").className.indexOf("active") !== -1
+        values[element.id] = value
+    })
+    localStorage.setItem(COLLAPSIBLES_KEY, JSON.stringify(values))
 }
 
 function createCollapsibles(node) {
-    var save = false;
+    var save = false
     if (!node) {
-        node = document;
-        save = true;
+        node = document
+        save = true
     }
     let collapsibles = node.querySelectorAll(".collapsible")
     collapsibles.forEach(function(c) {
         if (save && c.parentElement.id) {
-            COLLAPSIBLE_PANELS.push(c.parentElement);
+            COLLAPSIBLE_PANELS.push(c.parentElement)
         }
         let handle = document.createElement('span')
         handle.className = 'collapsible-handle'
@@ -73,23 +73,23 @@ function createCollapsibles(node) {
         c.insertBefore(handle, c.firstChild)
 
         c.addEventListener('click', function() {
-            toggleCollapsible(c.parentElement);
-        });
-    });
+            toggleCollapsible(c.parentElement)
+        })
+    })
     if (save) {
-        var saved = localStorage.getItem(COLLAPSIBLES_KEY);
+        var saved = localStorage.getItem(COLLAPSIBLES_KEY)
         if (!saved) {
-            saveCollapsibles();
-            saved = localStorage.getItem(COLLAPSIBLES_KEY);
+            saveCollapsibles()
+            saved = localStorage.getItem(COLLAPSIBLES_KEY)
         }
-        var values = JSON.parse(saved);
+        var values = JSON.parse(saved)
         COLLAPSIBLE_PANELS.forEach(element => {
-            var value = element.querySelector(".collapsible").className.indexOf("active") !== -1;
+            var value = element.querySelector(".collapsible").className.indexOf("active") !== -1
             if (values[element.id] != value) {
-                toggleCollapsible(element);
+                toggleCollapsible(element)
             }
         })
-        COLLAPSIBLES_INITIALIZED = true;
+        COLLAPSIBLES_INITIALIZED = true
     }
 }