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

moved auto-save settings stuff to new file and removed ui changes from main.js. this not done, just first step

Browse Source
This commit is contained in:
Malcolm Diller 2022-10-15 14:54:34 -07:00
parent 3e08d665c7
commit b1aed344c7
3 changed files with 164 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/index.html
View File

@ -240,6 +240,7 @@
</div> </div>
</body> </body>
<script src="media/auto-save.js?v=1"></script>
<script src="media/main.js?v=34"></script> <script src="media/main.js?v=34"></script>
<script> <script>
async function init() { async function init() {

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

@ -0,0 +1,159 @@
// Saving settings
let autoSaveSettingsField = document.querySelector('#auto_save_settings')
let configureSettingsSaveBtn = document.querySelector('#configureSettingsSaveBtn')
let restoreDefaultSettingsBtn = document.querySelector('#restoreDefaultSettingsBtn')
let saveSettingsConfigOverlay = document.querySelector('#save-settings-config')
let saveSettingsConfigTable = document.querySelector('#save-settings-config-table')
let saveSettingsConfigCloseBtn = document.querySelector('#save-settings-config-close-btn')
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 = [
promptField,
seedField,
randomSeedField,
numOutputsTotalField,
numOutputsParallelField,
stableDiffusionModelField,
samplerField,
widthField,
heightField,
numInferenceStepsField,
guidanceScaleSlider,
promptStrengthSlider,
outputFormatField,
negativePromptField,
streamImageProgressField,
useFaceCorrectionField,
useUpscalingField,
showOnlyFilteredImageField,
upscaleModelField,
previewImageField,
modifierCardSizeSlider
];
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 (!autoSaveSettingsField.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();
}
}
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();
}
}
}
async function initSettings() {
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 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();
});
});
}
saveSettingsConfigCloseBtn.addEventListener('click', () => {
saveSettingsConfigOverlay.style.display = 'none';
});
configureSettingsSaveBtn.addEventListener('click', () => {
saveSettingsConfigOverlay.style.display = 'block';
});
saveSettingsConfigOverlay.addEventListener('click', (event) => {
if (event.target.id == saveSettingsConfigOverlay.id) {
saveSettingsConfigOverlay.style.display = 'none';
}
});

174
ui/media/main.js
View File

@ -36,7 +36,6 @@ let widthField = document.querySelector('#width')
let heightField = document.querySelector('#height') let heightField = document.querySelector('#height')
let initImageSelector = document.querySelector("#init_image") let initImageSelector = document.querySelector("#init_image")
let initImagePreview = document.querySelector("#init_image_preview") let initImagePreview = document.querySelector("#init_image_preview")
let initImageSizeBox = document.querySelector("#init_image_size_box")
let maskImageSelector = document.querySelector("#mask") let maskImageSelector = document.querySelector("#mask")
let maskImagePreview = document.querySelector("#mask_preview") let maskImagePreview = document.querySelector("#mask_preview")
let turboField = document.querySelector('#turbo') let turboField = document.querySelector('#turbo')
@ -45,8 +44,6 @@ let useFullPrecisionField = document.querySelector('#use_full_precision')
let saveToDiskField = document.querySelector('#save_to_disk') let saveToDiskField = document.querySelector('#save_to_disk')
let diskPathField = document.querySelector('#diskPath') let diskPathField = document.querySelector('#diskPath')
let autoSaveSettingsField = document.querySelector('#auto_save_settings') let autoSaveSettingsField = document.querySelector('#auto_save_settings')
let configureSettingsSaveBtn = document.querySelector('#configureSettingsSaveBtn')
let restoreDefaultSettingsBtn = document.querySelector('#restoreDefaultSettingsBtn')
// let allowNSFWField = document.querySelector("#allow_nsfw") // let allowNSFWField = document.querySelector("#allow_nsfw")
let useBetaChannelField = document.querySelector("#use_beta_channel") let useBetaChannelField = document.querySelector("#use_beta_channel")
let promptStrengthSlider = document.querySelector('#prompt_strength_slider') let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
@ -83,10 +80,6 @@ let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list') let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
let editorTagsContainer = document.querySelector('#editor-inputs-tags-container') let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
let saveSettingsConfigOverlay = document.querySelector('#save-settings-config')
let saveSettingsConfigTable = document.querySelector('#save-settings-config-table')
let saveSettingsConfigCloseBtn = document.querySelector('#save-settings-config-close-btn')
let imagePreview = document.querySelector("#preview") let imagePreview = document.querySelector("#preview")
let previewImageField = document.querySelector('#preview-image') let previewImageField = document.querySelector('#preview-image')
previewImageField.onchange = () => changePreviewImages(previewImageField.value) previewImageField.onchange = () => changePreviewImages(previewImageField.value)
@ -267,12 +260,7 @@ function logError(msg, res, outputMsg) {
function playSound() { function playSound() {
const audio = new Audio('/media/ding.mp3') const audio = new Audio('/media/ding.mp3')
audio.volume = 0.2 audio.volume = 0.2
var promise = audio.play(); audio.play()
if (promise !== undefined) {
promise.then(_ => {}).catch(error => {
console.warn("browser blocked autoplay");
});
}
} }
async function healthCheck() { async function healthCheck() {
@ -1208,7 +1196,7 @@ function showInitImagePreview() {
let reader = new FileReader() let reader = new FileReader()
let file = initImageSelector.files[0] let file = initImageSelector.files[0]
reader.addEventListener('load', function(event) { reader.addEventListener('load', function() {
// console.log(file.name, reader.result) // console.log(file.name, reader.result)
initImagePreview.src = reader.result initImagePreview.src = reader.result
initImagePreviewContainer.style.display = 'block' initImagePreviewContainer.style.display = 'block'
@ -1229,8 +1217,6 @@ initImagePreview.addEventListener('load', function() {
inpaintingEditorCanvasBackground.style.backgroundImage = "url('" + this.src + "')" inpaintingEditorCanvasBackground.style.backgroundImage = "url('" + this.src + "')"
// maskSetting.style.display = 'block' // maskSetting.style.display = 'block'
// inpaintingEditorContainer.style.display = 'block' // inpaintingEditorContainer.style.display = 'block'
initImageSizeBox.textContent = initImagePreview.naturalWidth + " x " + initImagePreview.naturalHeight
initImageSizeBox.style.display = 'block'
}) })
initImageClearBtn.addEventListener('click', function() { initImageClearBtn.addEventListener('click', function() {
@ -1248,8 +1234,7 @@ initImageClearBtn.addEventListener('click', function() {
// maskSetting.style.display = 'none' // maskSetting.style.display = 'none'
promptStrengthContainer.style.display = 'none' promptStrengthContainer.style.display = 'none'
samplerSelectionContainer.style.display = 'table-row' samplerSelectionContainer.style.display = 'block'
initImageSizeBox.style.display = 'none'
}) })
maskSetting.addEventListener('click', function() { maskSetting.addEventListener('click', function() {
@ -1619,155 +1604,4 @@ async function loadModifiers() {
} catch (e) { } catch (e) {
console.log('error fetching modifiers', e) console.log('error fetching modifiers', e)
} }
} }
// Saving 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 = [
promptField,
seedField,
randomSeedField,
numOutputsTotalField,
numOutputsParallelField,
stableDiffusionModelField,
samplerField,
widthField,
heightField,
numInferenceStepsField,
guidanceScaleSlider,
promptStrengthSlider,
outputFormatField,
negativePromptField,
streamImageProgressField,
useFaceCorrectionField,
useUpscalingField,
showOnlyFilteredImageField,
upscaleModelField,
previewImageField,
modifierCardSizeSlider
];
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 (!autoSaveSettingsField.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();
}
}
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();
}
}
}
async function initSettings() {
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 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();
});
});
}
saveSettingsConfigCloseBtn.addEventListener('click', () => {
saveSettingsConfigOverlay.style.display = 'none';
});
configureSettingsSaveBtn.addEventListener('click', () => {
saveSettingsConfigOverlay.style.display = 'block';
});
saveSettingsConfigOverlay.addEventListener('click', (event) => {
if (event.target.id == saveSettingsConfigOverlay.id) {
saveSettingsConfigOverlay.style.display = 'none';
}
});