mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-11-27 02:33:10 +01:00
1023f5f7cc
* Slider for preview image size Add a slider to the system settings so that users can configure the max size of thumbnails * Remove debug output * Fix var definition * Move slider to 'display settings' menu * thumbnail slider CSS
321 lines
11 KiB
JavaScript
321 lines
11 KiB
JavaScript
// Saving 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_v2"
|
||
|
||
const SETTINGS = {} // key=id. dict initialized in initSettings. { element, default, value, ignore }
|
||
const SETTINGS_IDS_LIST = [
|
||
"prompt",
|
||
"seed",
|
||
"random_seed",
|
||
"num_outputs_total",
|
||
"num_outputs_parallel",
|
||
"stable_diffusion_model",
|
||
"vae_model",
|
||
"hypernetwork_model",
|
||
"sampler_name",
|
||
"width",
|
||
"height",
|
||
"num_inference_steps",
|
||
"guidance_scale",
|
||
"prompt_strength",
|
||
"hypernetwork_strength",
|
||
"output_format",
|
||
"output_quality",
|
||
"negative_prompt",
|
||
"stream_image_progress",
|
||
"use_face_correction",
|
||
"gfpgan_model",
|
||
"use_upscale",
|
||
"upscale_amount",
|
||
"block_nsfw",
|
||
"show_only_filtered_image",
|
||
"upscale_model",
|
||
"preview-image",
|
||
"modifier-card-size-slider",
|
||
"theme",
|
||
"save_to_disk",
|
||
"diskPath",
|
||
"sound_toggle",
|
||
"vram_usage_level",
|
||
"confirm_dangerous_actions",
|
||
"metadata_output_format",
|
||
"auto_save_settings",
|
||
"apply_color_correction",
|
||
"process_order_toggle",
|
||
"thumbnail_size"
|
||
]
|
||
|
||
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 => {
|
||
var element = document.getElementById(id)
|
||
if (!element) {
|
||
console.error(`Missing settings element ${id}`)
|
||
}
|
||
if (id in SETTINGS) { // don't create it again
|
||
return
|
||
}
|
||
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 unsorted_ids = unsorted_settings_ids.map(id => `#${id}`).join(",")
|
||
var children = unsorted_ids == "" ? [] : Array.from(element.querySelectorAll(unsorted_ids));
|
||
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()
|
||
}
|
||
|
||
function getSetting(element) {
|
||
if (element.dataset && 'path' in element.dataset) {
|
||
return element.dataset.path
|
||
}
|
||
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 (element.dataset && 'path' in element.dataset) {
|
||
element.dataset.path = value
|
||
return // no need to dispatch any event here because the models are not loaded yet
|
||
}
|
||
if (typeof element === "string" || element instanceof String) {
|
||
element = SETTINGS[element].element
|
||
}
|
||
SETTINGS[element.id].value = 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() {
|
||
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_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
|
||
saved_settings.forEach(saved_setting => {
|
||
var setting = SETTINGS[saved_setting.key]
|
||
if (!setting) {
|
||
console.warn(`Attempted to load setting ${saved_setting.key}, but no setting found`);
|
||
return null;
|
||
}
|
||
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()
|
||
}
|
||
}
|
||
|
||
function loadDefaultSettingsSection(section_id) {
|
||
CURRENTLY_LOADING_SETTINGS = true
|
||
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()
|
||
}
|
||
|
||
function settingChangeHandler(event) {
|
||
if (!CURRENTLY_LOADING_SETTINGS) {
|
||
var element = event.target
|
||
var value = getSetting(element)
|
||
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() {
|
||
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 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()
|
||
})
|
||
})
|
||
})
|
||
prettifyInputs(saveSettingsConfigTable)
|
||
}
|
||
|
||
// configureSettingsSaveBtn
|
||
|
||
|
||
|
||
|
||
var autoSaveSettings = document.getElementById("auto_save_settings")
|
||
var configSettingsButton = document.createElement("button")
|
||
configSettingsButton.textContent = "Configure"
|
||
configSettingsButton.style.margin = "0px 5px"
|
||
autoSaveSettings.insertAdjacentElement("beforebegin", configSettingsButton)
|
||
autoSaveSettings.addEventListener("change", () => {
|
||
configSettingsButton.style.display = autoSaveSettings.checked ? "block" : "none"
|
||
})
|
||
configSettingsButton.addEventListener('click', () => {
|
||
fillSaveSettingsConfigTable()
|
||
saveSettingsConfigOverlay.classList.add("active")
|
||
})
|
||
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
|
||
if (!(key in SETTINGS)) return
|
||
SETTINGS[key].ignore = !saved_settings.should_save[key]
|
||
});
|
||
Object.keys(saved_settings.values).forEach(key => {
|
||
key = key in old_map ? old_map[key] : key
|
||
if (!(key in SETTINGS)) return
|
||
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",
|
||
"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) {
|
||
let key = individual_settings_map[localStorageKey]
|
||
var setting = SETTINGS[key]
|
||
if (!setting) {
|
||
console.warn(`Attempted to map old setting ${key}, but no setting found`);
|
||
return null;
|
||
}
|
||
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);
|
||
}
|
||
})
|
||
}
|