holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made some updates and moved some stuff to auto-save js

Browse Source
This commit is contained in:
Malcolm Diller 2022-10-18 20:49:58 -07:00
parent 946dfdf7b8
commit 0922349344
5 changed files with 81 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/index.html
View File

@ -7,6 +7,7 @@
<link rel="stylesheet" href="/media/css/fonts.css?v=1">
<link rel="stylesheet" href="/media/css/themes.css?v=1">
<link rel="stylesheet" href="/media/css/main.css?v=1">
<link rel="stylesheet" href="/media/css/auto-save.css?v=1">
<link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=1">
<link rel="stylesheet" href="/media/css/fontawesome-all.min.css?v=1">
<link rel="stylesheet" href="/media/css/drawingboard.min.css">

2
ui/media/css/auto-save.css
View File

@ -14,7 +14,7 @@
}
#save-settings-config > div {
background: var(--background-color2);
background: var(--background-color3);
max-width: 600px;
margin: auto;
margin-top: 100px;

12
ui/media/js/auto-save.js
View File

@ -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
}

137
ui/media/js/main.js
View File

@ -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 = '<i class="fa-solid fa-rotate-left"></i>'
document.querySelector('.drawing-board-control-navigation-forward').innerHTML = '<i class="fa-solid fa-rotate-right"></i>'
@ -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)

91
ui/media/js/utils.js
View File

@ -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 = '&#x2795;' // plus
} else {
content.style.display = "block"
handle.innerHTML = '&#x2796;' // 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 = '&#x2795;' // plus
} else {
content.style.display = "block"
handle.innerHTML = '&#x2796;' // 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) {