extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-22 16:23:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Push back the auto-save settings change by @mdiller

Browse Source
This commit is contained in:
cmdr2 2022-10-17 12:44:05 +05:30
parent 70f99a70a5
commit 188894c837
4 changed files with 236 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/index.html
View File

@ -39,6 +39,12 @@
<li><input id="turbo" name="turbo" type="checkbox" checked> <label for="turbo">Turbo mode <small>(generates images faster, but uses an additional 1 GB of GPU memory)</small></label></li>
<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">
<label for="auto_save_settings">Automatically save settings <small>(settings restored on browser load)</small></label>
<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/>
<li><input id="use_beta_channel" name="use_beta_channel" type="checkbox"> <label for="use_beta_channel">🔥Beta channel. Get the latest features immediately (but could be less stable). Please restart the program after changing this.</label></li>
@ -215,6 +221,17 @@
</div>
</div>
<div id="save-settings-config" style="display:none">
<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>
<table id="save-settings-config-table">
<tr><th>Setting</th><th></th><th>Default value</th></tr>
</table>
</div>
</div>
<div class="line-separator">&nbsp;</div>
<div id="footer" class="panel-box">
@ -229,6 +246,7 @@
</div>
</body>
<script src="media/auto-save.js?v=1"></script>
<script src="media/main.js?v=35"></script>
<script>
async function init() {
@ -236,6 +254,7 @@ async function init() {
await getDiskPath()
await getAppConfig()
await getModels()
await initSettings()
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
healthCheck()

158
ui/media/auto-save.js Normal file
View File

@ -0,0 +1,158 @@
// Saving settings
let saveSettingsCheckbox = document.getElementById("auto_save_settings")
let saveSettingsConfigTable = document.getElementById("save-settings-config-table")
let saveSettingsConfigOverlay = document.getElementById("save-settings-config")
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 = [
"prompt",
"seed",
"random_seed",
"num_outputs_total",
"num_outputs_parallel",
"stable_diffusion_model",
"sampler",
"width",
"height",
"num_inference_steps",
"guidance_scale_slider",
"prompt_strength_slider",
"output_format",
"negative_prompt",
"stream_image_progress",
"use_face_correction",
"use_upscale",
"show_only_filtered_image",
"upscale_model",
"preview-image",
"modifier-card-size-slider"
]
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)
element.addEventListener("input", settingChangeHandler)
element.addEventListener("change", settingChangeHandler)
})
loadSettings()
fillSaveSettingsConfigTable()
}
function getSetting(element) {
if (element.type == "checkbox") {
return element.checked
}
return element.value
}
function setSetting(element, 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() {
localStorage.setItem(SETTINGS_KEY, JSON.stringify({
values: SETTINGS_VALUES,
should_save: SETTINGS_SHOULD_SAVE_MAP
}))
}
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
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])
}
}
})
CURRENTLY_LOADING_SETTINGS = false
}
else {
saveSettings()
}
}
document.querySelector('#restoreDefaultSettingsBtn').addEventListener('click', loadDefaultSettings)
function loadDefaultSettings() {
CURRENTLY_LOADING_SETTINGS = true
SETTINGS_TO_SAVE.forEach(element => {
SETTINGS_VALUES[element.id] = SETTINGS_DEFAULTS[element.id]
setSetting(element, SETTINGS_VALUES[element.id])
})
CURRENTLY_LOADING_SETTINGS = false
saveSettings()
}
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
saveSettings()
}
}
}
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) + "..."
}
}
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()
})
})
}
document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
saveSettingsConfigOverlay.style.display = 'none'
})
document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
saveSettingsConfigOverlay.style.display = 'block'
})
saveSettingsConfigOverlay.addEventListener('click', (event) => {
if (event.target.id == saveSettingsConfigOverlay.id) {
saveSettingsConfigOverlay.style.display = 'none'
}
})

50
ui/media/main.css
View File

@ -662,3 +662,53 @@ input[type="range"]::-moz-range-thumb {
right: 0px;
}
}
/* Auto-Settings Styling */
#auto_save_settings:not(:checked) ~ button {
display: none;
}
#save-settings-config {
position: fixed;
background: rgba(32, 33, 36, 50%);
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
z-index: 1000;
}
#save-settings-config > div {
background: rgb(44, 45, 48);
max-width: 600px;
margin: auto;
margin-top: 100px;
border-radius: 6px;
padding: 30px;
text-align: center;
}
#save-settings-config-table {
margin: auto;
}
#save-settings-config-table td:first-child,
#save-settings-config-table th:first-child {
float: right;
}
#save-settings-config-table td:last-child,
#save-settings-config-table th:last-child {
float: left;
}
#save-settings-config-table td small {
color: rgb(153, 153, 153);
}
#save-settings-config-close-btn {
float: right;
cursor: pointer;
padding: 10px;
transform: translate(50%, -50%) scaleX(130%);
}

9
ui/media/main.js
View File

@ -12,6 +12,7 @@ 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
const INPAINTING_EDITOR_SIZE = 450
@ -43,6 +44,7 @@ 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 allowNSFWField = document.querySelector("#allow_nsfw")
let useBetaChannelField = document.querySelector("#use_beta_channel")
let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
@ -188,6 +190,10 @@ function isUseFullPrecisionEnabled() {
return getLocalStorageBoolItem(USE_FULL_PRECISION_KEY, false)
}
function isAutoSaveSettingsEnabled() {
return getLocalStorageBoolItem(AUTO_SAVE_SETTINGS_KEY, false)
}
function isUseTurboModeEnabled() {
return getLocalStorageBoolItem(USE_TURBO_MODE_KEY, true)
}
@ -1023,6 +1029,9 @@ 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()