From 0922349344e54cd2099f66faa14f2c64baa1529a Mon Sep 17 00:00:00 2001 From: Malcolm Diller Date: Tue, 18 Oct 2022 20:49:58 -0700 Subject: [PATCH 01/14] made some updates and moved some stuff to auto-save js --- ui/index.html | 1 + ui/media/css/auto-save.css | 2 +- ui/media/js/auto-save.js | 12 +++- ui/media/js/main.js | 137 +------------------------------------ ui/media/js/utils.js | 91 +++++++++++++++++------- 5 files changed, 81 insertions(+), 162 deletions(-) diff --git a/ui/index.html b/ui/index.html index 7a5abee7..4f5b7ee4 100644 --- a/ui/index.html +++ b/ui/index.html @@ -7,6 +7,7 @@ + diff --git a/ui/media/css/auto-save.css b/ui/media/css/auto-save.css index a302dc5d..717ba93f 100644 --- a/ui/media/css/auto-save.css +++ b/ui/media/css/auto-save.css @@ -14,7 +14,7 @@ } #save-settings-config > div { - background: var(--background-color2); + background: var(--background-color3); max-width: 600px; margin: auto; margin-top: 100px; diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js index 64cd4330..1d0cf4b5 100644 --- a/ui/media/js/auto-save.js +++ b/ui/media/js/auto-save.js @@ -29,7 +29,14 @@ var SETTINGS_IDS_LIST = [ "upscale_model", "preview-image", "modifier-card-size-slider", - "theme" + "theme", + "save_to_disk", + "diskPath", + "sound_toggle", + "turbo", + "use_cpu", + "use_full_precision", + "auto_save_settings" ] async function initSettings() { @@ -46,6 +53,9 @@ async function initSettings() { } function getSetting(element) { + if (element instanceof String) { + element = SETTINGS_TO_SAVE.find(e => e.id == element); + } if (element.type == "checkbox") { return element.checked } diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 403c1252..1bb1151d 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -1,19 +1,4 @@ "use strict" // Opt in to a restricted variant of JavaScript -const SOUND_ENABLED_KEY = "soundEnabled" -const SAVE_TO_DISK_KEY = "saveToDisk" -const USE_CPU_KEY = "useCPU" -const USE_FULL_PRECISION_KEY = "useFullPrecision" -const USE_TURBO_MODE_KEY = "useTurboMode" -const DISK_PATH_KEY = "diskPath" -const ADVANCED_PANEL_OPEN_KEY = "advancedPanelOpen" -const MODIFIERS_PANEL_OPEN_KEY = "modifiersPanelOpen" -const NEGATIVE_PROMPT_PANEL_OPEN_KEY = "negativePromptPanelOpen" -const USE_FACE_CORRECTION_KEY = "useFaceCorrection" -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 @@ -77,7 +62,6 @@ let clearAllPreviewsBtn = document.querySelector("#clear-all-previews") // let maskImagePreviewContainer = document.querySelector('#mask_preview_container') // let maskImageClearBtn = document.querySelector('#mask_clear') let maskSetting = document.querySelector('#enable_mask') -let negativePromptPanelHandle = document.querySelector('#negative_prompt_handle') let imagePreview = document.querySelector("#preview") @@ -93,8 +77,6 @@ let soundToggle = document.querySelector('#sound_toggle') let serverStatusColor = document.querySelector('#server-status-color') let serverStatusMsg = document.querySelector('#server-status-msg') -let advancedPanelHandle = document.querySelector("#editor-settings .collapsible") -let modifiersPanelHandle = document.querySelector("#editor-modifiers .collapsible") document.querySelector('.drawing-board-control-navigation-back').innerHTML = '' document.querySelector('.drawing-board-control-navigation-forward').innerHTML = '' @@ -111,15 +93,6 @@ let bellPending = false let taskQueue = [] let currentTask = null -function getLocalStorageItem(key, fallback) { - let item = localStorage.getItem(key) - if (item === null) { - return fallback - } - - return item -} - function getLocalStorageBoolItem(key, fallback) { let item = localStorage.getItem(key) if (item === null) { @@ -142,63 +115,11 @@ function handleStringSettingChange(key) { } function isSoundEnabled() { - return getLocalStorageBoolItem(SOUND_ENABLED_KEY, true) -} - -function isFaceCorrectionEnabled() { - return getLocalStorageBoolItem(USE_FACE_CORRECTION_KEY, false) -} - -function isUpscalingEnabled() { - return getLocalStorageBoolItem(USE_UPSCALING_KEY, false) -} - -function isShowOnlyFilteredImageEnabled() { - return getLocalStorageBoolItem(SHOW_ONLY_FILTERED_IMAGE_KEY, true) -} - -function isSaveToDiskEnabled() { - return getLocalStorageBoolItem(SAVE_TO_DISK_KEY, false) -} - -function isUseCPUEnabled() { - return getLocalStorageBoolItem(USE_CPU_KEY, false) -} - -function isUseFullPrecisionEnabled() { - return getLocalStorageBoolItem(USE_FULL_PRECISION_KEY, false) -} - -function isAutoSaveSettingsEnabled() { - return getLocalStorageBoolItem(AUTO_SAVE_SETTINGS_KEY, true) -} - -function isUseTurboModeEnabled() { - return getLocalStorageBoolItem(USE_TURBO_MODE_KEY, true) + return getSetting("sound_toggle") } function getSavedDiskPath() { - return getLocalStorageItem(DISK_PATH_KEY, '') -} - -function isAdvancedPanelOpenEnabled() { - return getLocalStorageBoolItem(ADVANCED_PANEL_OPEN_KEY, false) -} - -function isModifiersPanelOpenEnabled() { - return getLocalStorageBoolItem(MODIFIERS_PANEL_OPEN_KEY, false) -} - -function isNegativePromptPanelOpenEnabled() { - return getLocalStorageBoolItem(NEGATIVE_PROMPT_PANEL_OPEN_KEY, false) -} - -function isStreamImageProgressEnabled() { - return getLocalStorageBoolItem(STREAM_IMAGE_PROGRESS_KEY, false) -} - -function getOutputFormat() { - return getLocalStorageItem(OUTPUT_FORMAT_KEY, 'jpeg') + return getSetting("diskPath") } function setStatus(statusType, msg, msgType) { @@ -1056,40 +977,6 @@ stopImageBtn.addEventListener('click', async function() { await stopAllTasks() }) -soundToggle.addEventListener('click', handleBoolSettingChange(SOUND_ENABLED_KEY)) -soundToggle.checked = isSoundEnabled() - -saveToDiskField.checked = isSaveToDiskEnabled() -diskPathField.disabled = !saveToDiskField.checked - -useFaceCorrectionField.addEventListener('click', handleBoolSettingChange(USE_FACE_CORRECTION_KEY)) -useFaceCorrectionField.checked = isFaceCorrectionEnabled() - -useUpscalingField.checked = isUpscalingEnabled() -upscaleModelField.disabled = !useUpscalingField.checked - -showOnlyFilteredImageField.addEventListener('click', handleBoolSettingChange(SHOW_ONLY_FILTERED_IMAGE_KEY)) -showOnlyFilteredImageField.checked = isShowOnlyFilteredImageEnabled() - -useCPUField.addEventListener('click', handleBoolSettingChange(USE_CPU_KEY)) -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() - -streamImageProgressField.addEventListener('click', handleBoolSettingChange(STREAM_IMAGE_PROGRESS_KEY)) -streamImageProgressField.checked = isStreamImageProgressEnabled() - -outputFormatField.addEventListener('change', handleStringSettingChange(OUTPUT_FORMAT_KEY)) -outputFormatField.value = getOutputFormat() - -diskPathField.addEventListener('change', handleStringSettingChange(DISK_PATH_KEY)) widthField.addEventListener('change', onDimensionChange) heightField.addEventListener('change', onDimensionChange) @@ -1105,32 +992,12 @@ function onDimensionChange() { saveToDiskField.addEventListener('click', function(e) { diskPathField.disabled = !this.checked - handleBoolSettingChange(SAVE_TO_DISK_KEY)(e) }) useUpscalingField.addEventListener('click', function(e) { upscaleModelField.disabled = !this.checked - handleBoolSettingChange(USE_UPSCALING_KEY)(e) }) -function setPanelOpen(panelHandle) { - let panelContents = panelHandle.nextElementSibling - panelHandle.classList.add('active') - panelContents.style.display = 'block' -} - -if (isAdvancedPanelOpenEnabled()) { - setPanelOpen(advancedPanelHandle) -} - -if (isModifiersPanelOpenEnabled()) { - setPanelOpen(modifiersPanelHandle) -} - -if (isNegativePromptPanelOpenEnabled()) { - setPanelOpen(negativePromptPanelHandle) -} - makeImageBtn.addEventListener('click', makeImage) diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js index 05c6d4ab..9a119e7a 100644 --- a/ui/media/js/utils.js +++ b/ui/media/js/utils.js @@ -14,13 +14,58 @@ function getNextSibling(elem, selector) { } } -function createCollapsibles(node) { - if (!node) { - node = document - } + +/* Panel Stuff */ + +// true = open +var COLLAPSIBLES_INITIALIZED = false; +const COLLAPSIBLES_KEY = "collapsibles"; +const COLLAPSIBLE_PANELS = []; // filled in by createCollapsibles with all the elements matching .collapsible + +// on-init call this for any panels that are marked open +function toggleCollapsible(element) { + var collapsibleHeader = element.querySelector(".collapsible"); + var handle = element.firstChild; + collapsibleHeader.classList.toggle("active") + let content = getNextSibling(collapsibleHeader, '.collapsible-content') + if (content.style.display === "block") { + content.style.display = "none" + handle.innerHTML = '➕' // plus + } else { + content.style.display = "block" + handle.innerHTML = '➖' // minus + } + + if (COLLAPSIBLES_INITIALIZED && COLLAPSIBLE_PANELS.includes(element.parentElement)) { + saveCollapsibles(); + } +} + +function saveCollapsibles() { + var values = {}; + console.log(COLLAPSIBLE_PANELS); + COLLAPSIBLE_PANELS.forEach(element => { + values[element.id] = element.querySelector(".collapsible").className.indexOf("active") !== -1; + }); + localStorage.setItem(COLLAPSIBLES_KEY, JSON.stringify(values)); +} + +function createCollapsibles(node) { + var save = false; + if (!node) { + node = document; + save = true; + } + // FIX: problem here is that the elements we're getting in c are the buttons, and they are the children of the things with collapsible stuff + // FIX: gotta get parent + + // default closed. let collapsibles = node.querySelectorAll(".collapsible") collapsibles.forEach(function(c) { + if (save && c.parentElement.id) { + COLLAPSIBLE_PANELS.push(c.parentElement); + } let handle = document.createElement('span') handle.className = 'collapsible-handle' @@ -32,28 +77,24 @@ function createCollapsibles(node) { c.insertBefore(handle, c.firstChild) c.addEventListener('click', function() { - this.classList.toggle("active") - let content = getNextSibling(this, '.collapsible-content') - if (content.style.display === "block") { - content.style.display = "none" - handle.innerHTML = '➕' // plus - } else { - content.style.display = "block" - handle.innerHTML = '➖' // minus + toggleCollapsible(c.parentElement); + }); + }); + if (save) { + var saved = localStorage.getItem(COLLAPSIBLES_KEY); + if (!saved) { + saveCollapsibles(); + saved = localStorage.getItem(COLLAPSIBLES_KEY); + } + var values = JSON.parse(saved); + Object.keys(values).forEach(element_id => { + if (values[element_id]) { + var element = COLLAPSIBLE_PANELS.find(e => e.id == element_id); + toggleCollapsible(element); } - - if (this == advancedPanelHandle) { - let state = (content.style.display === 'block' ? 'true' : 'false') - localStorage.setItem(ADVANCED_PANEL_OPEN_KEY, state) - } else if (this == modifiersPanelHandle) { - let state = (content.style.display === 'block' ? 'true' : 'false') - localStorage.setItem(MODIFIERS_PANEL_OPEN_KEY, state) - } else if (this == negativePromptPanelHandle) { - let state = (content.style.display === 'block' ? 'true' : 'false') - localStorage.setItem(NEGATIVE_PROMPT_PANEL_OPEN_KEY, state) - } - }) - }) + }); + COLLAPSIBLES_INITIALIZED = true; + } } function permute(arr) { From 48222ce44c80d974f6d72ef2dd9cb1759f877b25 Mon Sep 17 00:00:00 2001 From: Malcolm Diller Date: Tue, 18 Oct 2022 22:13:45 -0700 Subject: [PATCH 02/14] updated to make autosaving on by default and updated some of the new logic --- ui/index.html | 2 +- ui/media/js/auto-save.js | 8 ++++++-- ui/media/js/utils.js | 20 ++++++++------------ 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/ui/index.html b/ui/index.html index 4f5b7ee4..9d28ee9a 100644 --- a/ui/index.html +++ b/ui/index.html @@ -43,7 +43,7 @@
  • - +
    diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js index 1d0cf4b5..e3d85dd0 100644 --- a/ui/media/js/auto-save.js +++ b/ui/media/js/auto-save.js @@ -62,6 +62,9 @@ function getSetting(element) { return element.value } function setSetting(element, value) { + if (typeof element === "string" || element instanceof String) { + element = SETTINGS_TO_SAVE.find(e => e.id == element); + } if (getSetting(element) == value) { return // no setting necessary } @@ -85,10 +88,11 @@ function saveSettings() { var CURRENTLY_LOADING_SETTINGS = false function loadSettings() { - if (!saveSettingsCheckbox.checked) { + var saved_settings = JSON.parse(localStorage.getItem(SETTINGS_KEY)) + if (!saved_settings.values["auto_save_settings"]) { + setSetting("auto_save_settings", false); 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 diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js index 9a119e7a..a0d0c2fe 100644 --- a/ui/media/js/utils.js +++ b/ui/media/js/utils.js @@ -26,7 +26,7 @@ const COLLAPSIBLE_PANELS = []; // filled in by createCollapsibles with all the e // on-init call this for any panels that are marked open function toggleCollapsible(element) { var collapsibleHeader = element.querySelector(".collapsible"); - var handle = element.firstChild; + var handle = element.querySelector(".collapsible-handle"); collapsibleHeader.classList.toggle("active") let content = getNextSibling(collapsibleHeader, '.collapsible-content') if (content.style.display === "block") { @@ -37,16 +37,16 @@ function toggleCollapsible(element) { handle.innerHTML = '➖' // minus } - if (COLLAPSIBLES_INITIALIZED && COLLAPSIBLE_PANELS.includes(element.parentElement)) { + if (COLLAPSIBLES_INITIALIZED && COLLAPSIBLE_PANELS.includes(element)) { saveCollapsibles(); } } function saveCollapsibles() { var values = {}; - console.log(COLLAPSIBLE_PANELS); COLLAPSIBLE_PANELS.forEach(element => { - values[element.id] = element.querySelector(".collapsible").className.indexOf("active") !== -1; + var value = element.querySelector(".collapsible").className.indexOf("active") !== -1; + values[element.id] = value; }); localStorage.setItem(COLLAPSIBLES_KEY, JSON.stringify(values)); } @@ -57,10 +57,6 @@ function createCollapsibles(node) { node = document; save = true; } - // FIX: problem here is that the elements we're getting in c are the buttons, and they are the children of the things with collapsible stuff - // FIX: gotta get parent - - // default closed. let collapsibles = node.querySelectorAll(".collapsible") collapsibles.forEach(function(c) { if (save && c.parentElement.id) { @@ -87,12 +83,12 @@ function createCollapsibles(node) { saved = localStorage.getItem(COLLAPSIBLES_KEY); } var values = JSON.parse(saved); - Object.keys(values).forEach(element_id => { - if (values[element_id]) { - var element = COLLAPSIBLE_PANELS.find(e => e.id == element_id); + COLLAPSIBLE_PANELS.forEach(element => { + var value = element.querySelector(".collapsible").className.indexOf("active") !== -1; + if (values[element.id] != value) { toggleCollapsible(element); } - }); + }) COLLAPSIBLES_INITIALIZED = true; } } From 8554473c21cefabf448337222ea842f7cc2f2de9 Mon Sep 17 00:00:00 2001 From: Malcolm Diller Date: Wed, 19 Oct 2022 21:12:01 -0700 Subject: [PATCH 03/14] 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 @@
    -

    • @@ -104,7 +103,7 @@
     
    -

    Image Settings

    +

    Image Settings

    • Image Settings @@ -231,9 +230,8 @@
      X

      Save Settings Configuration

      -

      Select which settings should be saved and reloaded when restarting the browser

      +

      Select which settings should be remembered when restarting the browser

      -
      SettingDefault value
    @@ -260,11 +258,12 @@ - + - - - + + +