mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-11-22 16:23:28 +01:00
Merge pull request #386 from cmdr2/beta
Refactor the previously saved settings into the new auto-save system
This commit is contained in:
cmdr2
GitHub
commit
2bc5f475f4
@ -6,8 +6,8 @@
|
||||
<link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32">
|
||||
<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/auto-save.css?v=1">
|
||||
<link rel="stylesheet" href="/media/css/main.css?v=1">
|
||||
<link rel="stylesheet" href="/media/css/main.css?v=3">
|
||||
<link rel="stylesheet" href="/media/css/auto-save.css?v=2">
|
||||
<link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=2">
|
||||
<link rel="stylesheet" href="/media/css/fontawesome-all.min.css?v=1">
|
||||
<link rel="stylesheet" href="/media/css/drawingboard.min.css">
|
||||
@ -18,7 +18,7 @@
|
||||
<div id="container">
|
||||
<div id="top-nav">
|
||||
<div id="logo">
|
||||
<h1>Stable Diffusion UI <small>v2.3.3 <span id="updateBranchLabel"></span></small></h1>
|
||||
<h1>Stable Diffusion UI <small>v2.3.4 <span id="updateBranchLabel"></span></small></h1>
|
||||
</div>
|
||||
<ul id="top-nav-items">
|
||||
<li class="dropdown">
|
||||
@ -43,11 +43,10 @@
|
||||
<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">
|
||||
<input id="auto_save_settings" name="auto_save_settings" checked type="checkbox">
|
||||
<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,14 @@
|
||||
<div class="line-separator"> </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">
|
||||
<span class="simple-tooltip right">
|
||||
Reset Image Settings
|
||||
</span>
|
||||
</i>
|
||||
</h4>
|
||||
<ul id="editor-settings-entries" class="collapsible-content">
|
||||
<li><table>
|
||||
<tr><b class="settings-subheader">Image Settings</b></tr>
|
||||
@ -232,9 +238,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>
|
||||
@ -264,19 +269,19 @@
|
||||
</body>
|
||||
|
||||
<script src="media/js/plugins.js?v=1"></script>
|
||||
<script src="media/js/utils.js?v=3"></script>
|
||||
<script src="media/js/utils.js?v=4"></script>
|
||||
<script src="media/js/inpainting-editor.js?v=1"></script>
|
||||
<script src="media/js/image-modifiers.js?v=3"></script>
|
||||
<script src="media/js/auto-save.js?v=1"></script>
|
||||
<script src="media/js/main.js?v=4"></script>
|
||||
<script src="media/js/themes.js?v=1"></script>
|
||||
<script src="media/js/auto-save.js?v=2"></script>
|
||||
<script src="media/js/main.js?v=5"></script>
|
||||
<script src="media/js/themes.js?v=2"></script>
|
||||
<script>
|
||||
async function init() {
|
||||
await loadModifiers()
|
||||
await initSettings()
|
||||
await getModels()
|
||||
await getDiskPath()
|
||||
await getAppConfig()
|
||||
await getModels()
|
||||
await initSettings()
|
||||
await loadModifiers()
|
||||
await loadUIPlugins()
|
||||
|
||||
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
|
||||
|
||||
@ -1,23 +1,26 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
#save-settings-config > div {
|
||||
background: var(--background-color2);
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
@ -573,3 +576,68 @@ input::file-selector-button {
|
||||
#promptsFromFileBtn {
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
#reset-image-settings {
|
||||
position: relative;
|
||||
transform: translateY(-13%);
|
||||
}
|
||||
|
||||
.simple-tooltip {
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
background-color: var(--background-color3);
|
||||
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
padding: 8px 12px;
|
||||
transition: 0.3s all;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
:hover > .simple-tooltip {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* position specific */
|
||||
.simple-tooltip.right {
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
transform: translate(calc(100% - 15%), -50%);
|
||||
}
|
||||
:hover > .simple-tooltip.right {
|
||||
transform: translate(100%, -50%);
|
||||
}
|
||||
|
||||
.simple-tooltip.top {
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(-100% + 15%));
|
||||
}
|
||||
:hover > .simple-tooltip.top {
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
.simple-tooltip.left {
|
||||
left: 0px;
|
||||
top: 50%;
|
||||
transform: translate(calc(-100% + 15%), -50%);
|
||||
}
|
||||
:hover > .simple-tooltip.left {
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
|
||||
.simple-tooltip.bottom {
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(100% - 15%));
|
||||
}
|
||||
:hover > .simple-tooltip.bottom {
|
||||
transform: translate(-50%, 100%);
|
||||
}
|
||||
|
||||
@ -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",
|
||||
@ -29,29 +28,70 @@ 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"
|
||||
]
|
||||
|
||||
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 (typeof element === "string" || element instanceof String) {
|
||||
element = SETTINGS[element].element
|
||||
}
|
||||
if (element.type == "checkbox") {
|
||||
return element.checked
|
||||
}
|
||||
return element.value
|
||||
}
|
||||
function setSetting(element, value) {
|
||||
if (typeof element === "string" || element instanceof String) {
|
||||
element = SETTINGS[element].element
|
||||
}
|
||||
SETTINGS[element.id].value = value
|
||||
if (getSetting(element) == value) {
|
||||
return // no setting necessary
|
||||
}
|
||||
@ -66,45 +106,51 @@ 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() {
|
||||
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
|
||||
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
|
||||
}
|
||||
else {
|
||||
CURRENTLY_LOADING_SETTINGS = true
|
||||
tryLoadOldSettings();
|
||||
CURRENTLY_LOADING_SETTINGS = false
|
||||
saveSettings()
|
||||
}
|
||||
}
|
||||
|
||||
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()
|
||||
@ -114,33 +160,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()
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
@ -149,10 +212,74 @@ 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()
|
||||
})
|
||||
|
||||
|
||||
function tryLoadOldSettings() {
|
||||
console.log("Loading old user settings")
|
||||
// load v1 auto-save.js settings
|
||||
var old_map = {
|
||||
"guidance_scale_slider": "guidance_scale",
|
||||
"prompt_strength_slider": "prompt_strength"
|
||||
}
|
||||
var settings_key_v1 = "user_settings"
|
||||
var saved_settings_text = localStorage.getItem(settings_key_v1)
|
||||
if (saved_settings_text) {
|
||||
var saved_settings = JSON.parse(saved_settings_text)
|
||||
Object.keys(saved_settings.should_save).forEach(key => {
|
||||
key = key in old_map ? old_map[key] : key
|
||||
SETTINGS[key].ignore = !saved_settings.should_save[key]
|
||||
});
|
||||
Object.keys(saved_settings.values).forEach(key => {
|
||||
key = key in old_map ? old_map[key] : key
|
||||
var setting = SETTINGS[key]
|
||||
if (!setting.ignore) {
|
||||
setting.value = saved_settings.values[key]
|
||||
setSetting(setting.element, setting.value)
|
||||
}
|
||||
});
|
||||
localStorage.removeItem(settings_key_v1)
|
||||
}
|
||||
|
||||
// load old individually stored items
|
||||
var individual_settings_map = { // maps old localStorage-key to new SETTINGS-key
|
||||
"soundEnabled": "sound_toggle",
|
||||
"saveToDisk": "save_to_disk",
|
||||
"useCPU": "use_cpu",
|
||||
"useFullPrecision": "use_full_precision",
|
||||
"useTurboMode": "turbo",
|
||||
"diskPath": "diskPath",
|
||||
"useFaceCorrection": "use_face_correction",
|
||||
"useUpscaling": "use_upscale",
|
||||
"showOnlyFilteredImage": "show_only_filtered_image",
|
||||
"streamImageProgress": "stream_image_progress",
|
||||
"outputFormat": "output_format",
|
||||
"autoSaveSettings": "auto_save_settings",
|
||||
};
|
||||
Object.keys(individual_settings_map).forEach(localStorageKey => {
|
||||
var localStorageValue = localStorage.getItem(localStorageKey);
|
||||
if (localStorageValue !== null) {
|
||||
var setting = SETTINGS[individual_settings_map[localStorageKey]]
|
||||
if (setting.element.type == "checkbox" && (typeof localStorageValue === "string" || localStorageValue instanceof String)) {
|
||||
localStorageValue = localStorageValue == "true"
|
||||
}
|
||||
setting.value = localStorageValue
|
||||
setSetting(setting.element, setting.value)
|
||||
localStorage.removeItem(localStorageKey);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -44,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')
|
||||
@ -77,7 +60,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 +75,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 +91,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 +113,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) {
|
||||
@ -261,11 +180,11 @@ function logError(msg, res, outputMsg) {
|
||||
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")
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -759,7 +678,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, {
|
||||
@ -1097,40 +1016,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)
|
||||
|
||||
@ -1161,37 +1046,18 @@ 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)
|
||||
|
||||
|
||||
function updateGuidanceScale() {
|
||||
guidanceScaleField.value = guidanceScaleSlider.value / 10
|
||||
guidanceScaleField.dispatchEvent(new Event("change"))
|
||||
}
|
||||
|
||||
function updateGuidanceScaleSlider() {
|
||||
@ -1211,6 +1077,7 @@ updateGuidanceScale()
|
||||
|
||||
function updatePromptStrength() {
|
||||
promptStrengthField.value = promptStrengthSlider.value / 100
|
||||
promptStrengthField.dispatchEvent(new Event("change"))
|
||||
}
|
||||
|
||||
function updatePromptStrengthSlider() {
|
||||
@ -1274,10 +1141,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']
|
||||
|
||||
@ -1286,13 +1155,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)
|
||||
@ -1394,19 +1269,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)
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -14,13 +14,54 @@ function getNextSibling(elem, selector) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 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.querySelector(".collapsible-handle");
|
||||
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)) {
|
||||
saveCollapsibles()
|
||||
}
|
||||
}
|
||||
|
||||
function saveCollapsibles() {
|
||||
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))
|
||||
}
|
||||
|
||||
function createCollapsibles(node) {
|
||||
var save = false
|
||||
if (!node) {
|
||||
node = document
|
||||
save = true
|
||||
}
|
||||
|
||||
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 +73,49 @@ 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
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
toggleCollapsible(c.parentElement)
|
||||
})
|
||||
})
|
||||
if (save) {
|
||||
var saved = localStorage.getItem(COLLAPSIBLES_KEY)
|
||||
if (!saved) {
|
||||
saved = tryLoadOldCollapsibles();
|
||||
}
|
||||
if (!saved) {
|
||||
saveCollapsibles()
|
||||
saved = localStorage.getItem(COLLAPSIBLES_KEY)
|
||||
}
|
||||
var values = JSON.parse(saved)
|
||||
COLLAPSIBLE_PANELS.forEach(element => {
|
||||
var value = element.querySelector(".collapsible").className.indexOf("active") !== -1
|
||||
if (values[element.id] != value) {
|
||||
toggleCollapsible(element)
|
||||
}
|
||||
})
|
||||
COLLAPSIBLES_INITIALIZED = true
|
||||
}
|
||||
}
|
||||
|
||||
function tryLoadOldCollapsibles() {
|
||||
var old_map = {
|
||||
"advancedPanelOpen": "editor-settings",
|
||||
"modifiersPanelOpen": "editor-modifiers",
|
||||
"negativePromptPanelOpen": "editor-inputs-prompt"
|
||||
};
|
||||
if (localStorage.getItem(Object.keys(old_map)[0])) {
|
||||
var result = {};
|
||||
Object.keys(old_map).forEach(key => {
|
||||
var value = localStorage.getItem(key);
|
||||
if (value !== null) {
|
||||
result[old_map[key]] = value == true || value == "true"
|
||||
localStorage.removeItem(key)
|
||||
}
|
||||
});
|
||||
result = JSON.stringify(result)
|
||||
localStorage.setItem(COLLAPSIBLES_KEY, result)
|
||||
return result
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function permute(arr) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user