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

Merge pull request #335 from mdiller/mdiller_beta

Browse Source 
Auto-saving Settings
This commit is contained in:
cmdr2 2022-10-17 11:35:03 +05:30 committed by GitHub
commit 704486abc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 229 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
ui/index.html
View File

@ -8,7 +8,6 @@
<link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="/media/drawingboard.min.css">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<script src="/media/jquery-3.6.1.min.js"></script>
<script src="/media/drawingboard.min.js"></script>
</head>
@ -68,11 +67,8 @@
<label for="init_image"><b>Initial Image (img2img):</b> <small>(optional)</small> </label> <input id="init_image" name="init_image" type="file" /><br/>
<div id="init_image_preview_container" class="image_preview_container">
<div id="init_image_wrapper">
<img id="init_image_preview" src="" />
<span id="init_image_size_box"></span>
<button class="init_image_clear image_clear_btn">X</button>
</div>
<img id="init_image_preview" src="" width="100" height="100" />
<button class="init_image_clear image_clear_btn">X</button>
<br/>
<input id="enable_mask" name="enable_mask" type="checkbox"> <label for="enable_mask">In-Painting (beta) <small>(select the area which the AI will paint into)</small></label>
@ -94,16 +90,15 @@
<div id="editor-settings" class="panel-box settings-box">
<h4 class="collapsible">Image Settings</h4>
<ul id="editor-settings-entries" class="collapsible-content">
<li><table>
<tr><b class="settings-subheader">Image Settings</b></tr>
<tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random</label></td></tr>
<tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td><td><input id="num_outputs_total" name="num_outputs_total" value="1" size="1"> <label><small>(total)</small></label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1"> <label for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr>
<tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td>
<li><b class="settings-subheader">Image Settings</b></li>
<li class="pl-5"><label for="seed">Seed:</label> <input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random Image</label></li>
<li class="pl-5"><label for="num_outputs_total">Number of images to make:</label> <input id="num_outputs_total" name="num_outputs_total" value="1" size="1"> <label for="num_outputs_parallel">Generate in parallel:</label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1"> (images at once)</li>
<li class="pl-5"><label for="stable_diffusion_model">Model:</label>
<select id="stable_diffusion_model" name="stable_diffusion_model">
<!-- <option value="sd-v1-4" selected>sd-v1-4</option> -->
</select>
</td></tr>
<tr id="samplerSelection" class="pl-5"><td><label for="sampler">Sampler:</label></td><td>
</li>
<li id="samplerSelection" class="pl-5"><label for="sampler">Sampler:</label>
<select id="sampler" name="sampler">
<option value="plms">plms</option>
<option value="ddim">ddim</option>
@ -114,8 +109,8 @@
<option value="dpm2_a">dpm2_a</option>
<option value="lms">lms</option>
</select>
</td></tr>
<tr class="pl-5"><td><label>Image Size: </label></td><td>
</li>
<li class="pl-5"><label>Image Size: </label>
<select id="width" name="width" value="512">
<option value="128">128 (*)</option>
<option value="192">192</option>
@ -160,25 +155,24 @@
<option value="2048">2048</option>
</select>
<label for="height"><small>(height)</small></label>
</td></tr>
<tr class="pl-5"><td><label for="num_inference_steps">Inference Steps:</label></td><td> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25"></td></tr>
<tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="10" max="500"> <input id="guidance_scale" name="guidance_scale" size="4"></td></tr>
<tr id="prompt_strength_container" class="pl-5"><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4"><br/></td></tr></span>
<tr class="pl-5"><td><label for="output_format">Output Format:</label></td><td>
</li>
<li class="pl-5"><label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25"></li>
<li class="pl-5"><label for="guidance_scale_slider">Guidance Scale:</label> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="10" max="500"> <input id="guidance_scale" name="guidance_scale" size="4"></li>
<li class="pl-5"><span id="prompt_strength_container"><label for="prompt_strength_slider">Prompt Strength:</label> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4"><br/></span></li>
<li class="pl-5"><label for="output_format">Output format:</label>
<select id="output_format" name="output_format">
<option value="jpeg" selected>jpeg</option>
<option value="png">png</option>
</select>
</td></tr>
</li></table>
</li>
<br/>
<li><b class="settings-subheader">Render Settings</b></li>
<li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview <small>(uses more VRAM, slightly slower image creation)</small></label></li>
<li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview of the image <small>(uses more VRAM, slightly slower image creation)</small></label></li>
<li class="pl-5"><input id="use_face_correction" name="use_face_correction" type="checkbox" checked> <label for="use_face_correction">Fix incorrect faces and eyes <small>(uses GFPGAN)</small></label></li>
<li class="pl-5">
<input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Upscale image by 4x with </label>
<input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Upscale the image to 4x resolution using </label>
<select id="upscale_model" name="upscale_model">
<option value="RealESRGAN_x4plus" selected>RealESRGAN_x4plus</option>
<option value="RealESRGAN_x4plus_anime_6B">RealESRGAN_x4plus_anime_6B</option>
@ -229,6 +223,7 @@
</div>
</body>
<script src="media/auto-save.js?v=1"></script>
<script src="media/main.js?v=35"></script>
<script>
async function init() {

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

@ -0,0 +1,160 @@
// 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 = []; // 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
}));
}
let saveSettingsCheckbox = document.getElementById("auto_save_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;
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();
}
}
}
let saveSettingsConfigTable = document.getElementById("save-settings-config-table");
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();
});
});
}
let saveSettingsConfigOverlay = document.getElementById("save-settings-config");
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';
}
});

49
ui/media/main.css
View File

@ -90,6 +90,7 @@
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
background-color: var(--background-color1);
color: var(--text-color);
@ -115,7 +116,7 @@ label {
}
.image_clear_btn {
position: absolute;
transform: translate(30%, -30%);
transform: translateX(-50%) translateY(-35%);
background: black;
color: white;
border: 2pt solid #ccc;
@ -127,8 +128,6 @@ label {
height: 16pt;
font-family: Verdana;
font-size: 8pt;
top: 0px;
right: 0px;
}
.settings-box ul {
font-size: 9pt;
@ -209,7 +208,6 @@ label {
}
.settings-box label small {
color: rgb(153, 153, 153);
margin-right: 10px;
}
#preview {
padding: 5px;
@ -507,6 +505,49 @@ img {
#prompt_from_file {
display: none;
}
/* 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);
#init_image_preview {
max-width: 150px;
max-height: 150px;

16
ui/media/main.js
View File

@ -35,7 +35,6 @@ let widthField = document.querySelector('#width')
let heightField = document.querySelector('#height')
let initImageSelector = document.querySelector("#init_image")
let initImagePreview = document.querySelector("#init_image_preview")
let initImageSizeBox = document.querySelector("#init_image_size_box")
let maskImageSelector = document.querySelector("#mask")
let maskImagePreview = document.querySelector("#mask_preview")
let turboField = document.querySelector('#turbo')
@ -43,6 +42,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')
@ -255,12 +255,7 @@ function logError(msg, res, outputMsg) {
function playSound() {
const audio = new Audio('/media/ding.mp3')
audio.volume = 0.2
var promise = audio.play();
if (promise !== undefined) {
promise.then(_ => {}).catch(error => {
console.warn("browser blocked autoplay");
});
}
audio.play()
}
async function healthCheck() {
@ -1193,7 +1188,7 @@ function showInitImagePreview() {
let reader = new FileReader()
let file = initImageSelector.files[0]
reader.addEventListener('load', function(event) {
reader.addEventListener('load', function() {
// console.log(file.name, reader.result)
initImagePreview.src = reader.result
initImagePreviewContainer.style.display = 'block'
@ -1214,8 +1209,6 @@ initImagePreview.addEventListener('load', function() {
inpaintingEditorCanvasBackground.style.backgroundImage = "url('" + this.src + "')"
// maskSetting.style.display = 'block'
// inpaintingEditorContainer.style.display = 'block'
initImageSizeBox.textContent = initImagePreview.naturalWidth + " x " + initImagePreview.naturalHeight
initImageSizeBox.style.display = 'block'
})
initImageClearBtn.addEventListener('click', function() {
@ -1233,8 +1226,7 @@ initImageClearBtn.addEventListener('click', function() {
// maskSetting.style.display = 'none'
promptStrengthContainer.style.display = 'none'
samplerSelectionContainer.style.display = 'table-row'
initImageSizeBox.style.display = 'none'
samplerSelectionContainer.style.display = 'block'
})
maskSetting.addEventListener('click', function() {