mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-11-23 00:33:28 +01:00
added a bunch of changes including cleaning up styling and inputs and adding auto-saving settings. see PR for more info.
This commit is contained in:
Malcolm Diller
parent
3ad59da2a9
commit
333ea4aa53
182
ui/index.html
182
ui/index.html
@ -8,6 +8,7 @@
|
|||||||
<link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1">
|
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
|
||||||
<link rel="stylesheet" href="/media/drawingboard.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/jquery-3.6.1.min.js"></script>
|
||||||
<script src="/media/drawingboard.min.js"></script>
|
<script src="/media/drawingboard.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
@ -38,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="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_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="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> -->
|
<!-- <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/>
|
<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>
|
<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>
|
||||||
@ -67,8 +74,11 @@
|
|||||||
<label for="init_image"><b>Initial Image (img2img):</b> <small>(optional)</small> </label> <input id="init_image" name="init_image" type="file" /><br/>
|
<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_preview_container" class="image_preview_container">
|
||||||
<img id="init_image_preview" src="" width="100" height="100" />
|
<div id="init_image_wrapper">
|
||||||
<button class="init_image_clear image_clear_btn">X</button>
|
<img id="init_image_preview" src="" />
|
||||||
|
<span id="init_image_size_box"></span>
|
||||||
|
<button class="init_image_clear image_clear_btn">X</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<br/>
|
<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>
|
<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>
|
||||||
@ -90,89 +100,93 @@
|
|||||||
<div id="editor-settings" class="panel-box settings-box">
|
<div id="editor-settings" class="panel-box settings-box">
|
||||||
<h4 class="collapsible">Image Settings</h4>
|
<h4 class="collapsible">Image Settings</h4>
|
||||||
<ul id="editor-settings-entries" class="collapsible-content">
|
<ul id="editor-settings-entries" class="collapsible-content">
|
||||||
<li><b class="settings-subheader">Image Settings</b></li>
|
<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>
|
<table>
|
||||||
<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>
|
<tr><b class="settings-subheader">Image Settings</b></tr>
|
||||||
<li class="pl-5"><label for="stable_diffusion_model">Model:</label>
|
<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>
|
||||||
<select id="stable_diffusion_model" name="stable_diffusion_model">
|
<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>
|
||||||
<!-- <option value="sd-v1-4" selected>sd-v1-4</option> -->
|
<tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td>
|
||||||
</select>
|
<select id="stable_diffusion_model" name="stable_diffusion_model">
|
||||||
</li>
|
<!-- <option value="sd-v1-4" selected>sd-v1-4</option> -->
|
||||||
<li id="samplerSelection" class="pl-5"><label for="sampler">Sampler:</label>
|
</select>
|
||||||
<select id="sampler" name="sampler">
|
</td></tr>
|
||||||
<option value="plms">plms</option>
|
<tr id="samplerSelection" class="pl-5"><td><label for="sampler">Sampler:</label></td><td>
|
||||||
<option value="ddim">ddim</option>
|
<select id="sampler" name="sampler">
|
||||||
<option value="heun">heun</option>
|
<option value="plms">plms</option>
|
||||||
<option value="euler">euler</option>
|
<option value="ddim">ddim</option>
|
||||||
<option value="euler_a" selected>euler_a</option>
|
<option value="heun">heun</option>
|
||||||
<option value="dpm2">dpm2</option>
|
<option value="euler">euler</option>
|
||||||
<option value="dpm2_a">dpm2_a</option>
|
<option value="euler_a" selected>euler_a</option>
|
||||||
<option value="lms">lms</option>
|
<option value="dpm2">dpm2</option>
|
||||||
</select>
|
<option value="dpm2_a">dpm2_a</option>
|
||||||
</li>
|
<option value="lms">lms</option>
|
||||||
<li class="pl-5"><label>Image Size: </label>
|
</select>
|
||||||
<select id="width" name="width" value="512">
|
</td></tr>
|
||||||
<option value="128">128 (*)</option>
|
<tr class="pl-5"><td><label>Image Size: </label></td><td>
|
||||||
<option value="192">192</option>
|
<select id="width" name="width" value="512">
|
||||||
<option value="256">256 (*)</option>
|
<option value="128">128 (*)</option>
|
||||||
<option value="320">320</option>
|
<option value="192">192</option>
|
||||||
<option value="384">384</option>
|
<option value="256">256 (*)</option>
|
||||||
<option value="448">448</option>
|
<option value="320">320</option>
|
||||||
<option value="512" selected>512 (*)</option>
|
<option value="384">384</option>
|
||||||
<option value="576">576</option>
|
<option value="448">448</option>
|
||||||
<option value="640">640</option>
|
<option value="512" selected>512 (*)</option>
|
||||||
<option value="704">704</option>
|
<option value="576">576</option>
|
||||||
<option value="768">768 (*)</option>
|
<option value="640">640</option>
|
||||||
<option value="832">832</option>
|
<option value="704">704</option>
|
||||||
<option value="896">896</option>
|
<option value="768">768 (*)</option>
|
||||||
<option value="960">960</option>
|
<option value="832">832</option>
|
||||||
<option value="1024">1024 (*)</option>
|
<option value="896">896</option>
|
||||||
<option value="1280">1280</option>
|
<option value="960">960</option>
|
||||||
<option value="1536">1536</option>
|
<option value="1024">1024 (*)</option>
|
||||||
<option value="1792">1792</option>
|
<option value="1280">1280</option>
|
||||||
<option value="2048">2048</option>
|
<option value="1536">1536</option>
|
||||||
</select>
|
<option value="1792">1792</option>
|
||||||
<label for="width"><small>(width)</small></label>
|
<option value="2048">2048</option>
|
||||||
<select id="height" name="height" value="512">
|
</select>
|
||||||
<option value="128">128 (*)</option>
|
<label for="width"><small>(width)</small></label>
|
||||||
<option value="192">192</option>
|
<select id="height" name="height" value="512">
|
||||||
<option value="256">256 (*)</option>
|
<option value="128">128 (*)</option>
|
||||||
<option value="320">320</option>
|
<option value="192">192</option>
|
||||||
<option value="384">384</option>
|
<option value="256">256 (*)</option>
|
||||||
<option value="448">448</option>
|
<option value="320">320</option>
|
||||||
<option value="512" selected>512 (*)</option>
|
<option value="384">384</option>
|
||||||
<option value="576">576</option>
|
<option value="448">448</option>
|
||||||
<option value="640">640</option>
|
<option value="512" selected>512 (*)</option>
|
||||||
<option value="704">704</option>
|
<option value="576">576</option>
|
||||||
<option value="768">768 (*)</option>
|
<option value="640">640</option>
|
||||||
<option value="832">832</option>
|
<option value="704">704</option>
|
||||||
<option value="896">896</option>
|
<option value="768">768 (*)</option>
|
||||||
<option value="960">960</option>
|
<option value="832">832</option>
|
||||||
<option value="1024">1024 (*)</option>
|
<option value="896">896</option>
|
||||||
<option value="1280">1280</option>
|
<option value="960">960</option>
|
||||||
<option value="1536">1536</option>
|
<option value="1024">1024 (*)</option>
|
||||||
<option value="1792">1792</option>
|
<option value="1280">1280</option>
|
||||||
<option value="2048">2048</option>
|
<option value="1536">1536</option>
|
||||||
</select>
|
<option value="1792">1792</option>
|
||||||
<label for="height"><small>(height)</small></label>
|
<option value="2048">2048</option>
|
||||||
</li>
|
</select>
|
||||||
<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>
|
<label for="height"><small>(height)</small></label>
|
||||||
<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>
|
</td></tr>
|
||||||
<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>
|
<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>
|
||||||
<li class="pl-5"><label for="output_format">Output format:</label>
|
<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>
|
||||||
<select id="output_format" name="output_format">
|
<tr class="pl-5"><span id="prompt_strength_container"></span><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>
|
||||||
<option value="jpeg" selected>jpeg</option>
|
<tr class="pl-5"><td><label for="output_format">Output Format:</label></td><td>
|
||||||
<option value="png">png</option>
|
<select id="output_format" name="output_format">
|
||||||
</select>
|
<option value="jpeg" selected>jpeg</option>
|
||||||
|
<option value="png">png</option>
|
||||||
|
</select>
|
||||||
|
</td></tr>
|
||||||
|
</table>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<br/>
|
<br/>
|
||||||
|
|
||||||
<li><b class="settings-subheader">Render Settings</b></li>
|
<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 of the image <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 <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_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">
|
<li class="pl-5">
|
||||||
<input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Upscale the image to 4x resolution using </label>
|
<input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Upscale image by 4x with </label>
|
||||||
<select id="upscale_model" name="upscale_model">
|
<select id="upscale_model" name="upscale_model">
|
||||||
<option value="RealESRGAN_x4plus" selected>RealESRGAN_x4plus</option>
|
<option value="RealESRGAN_x4plus" selected>RealESRGAN_x4plus</option>
|
||||||
<option value="RealESRGAN_x4plus_anime_6B">RealESRGAN_x4plus_anime_6B</option>
|
<option value="RealESRGAN_x4plus_anime_6B">RealESRGAN_x4plus_anime_6B</option>
|
||||||
@ -209,6 +223,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</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"> </div>
|
<div class="line-separator"> </div>
|
||||||
|
|
||||||
<div id="footer" class="panel-box">
|
<div id="footer" class="panel-box">
|
||||||
@ -230,6 +255,7 @@ async function init() {
|
|||||||
await getDiskPath()
|
await getDiskPath()
|
||||||
await getAppConfig()
|
await getAppConfig()
|
||||||
await getModels()
|
await getModels()
|
||||||
|
await initSettings()
|
||||||
|
|
||||||
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
|
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
|
||||||
healthCheck()
|
healthCheck()
|
||||||
|
|||||||
@ -1,5 +1,8 @@
|
|||||||
|
* {
|
||||||
|
font-family: Work Sans, Verdana, Geneva, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-size: 11pt;
|
font-size: 11pt;
|
||||||
background-color: rgb(32, 33, 36);
|
background-color: rgb(32, 33, 36);
|
||||||
color: #eee;
|
color: #eee;
|
||||||
@ -29,7 +32,7 @@ label {
|
|||||||
}
|
}
|
||||||
.image_clear_btn {
|
.image_clear_btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: translateX(-50%) translateY(-35%);
|
transform: translate(30%, -30%);
|
||||||
background: black;
|
background: black;
|
||||||
color: white;
|
color: white;
|
||||||
border: 2pt solid #ccc;
|
border: 2pt solid #ccc;
|
||||||
@ -41,6 +44,8 @@ label {
|
|||||||
height: 16pt;
|
height: 16pt;
|
||||||
font-family: Verdana;
|
font-family: Verdana;
|
||||||
font-size: 8pt;
|
font-size: 8pt;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
}
|
}
|
||||||
.settings-box ul {
|
.settings-box ul {
|
||||||
font-size: 9pt;
|
font-size: 9pt;
|
||||||
@ -121,6 +126,7 @@ label {
|
|||||||
}
|
}
|
||||||
.settings-box label small {
|
.settings-box label small {
|
||||||
color: rgb(153, 153, 153);
|
color: rgb(153, 153, 153);
|
||||||
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
#preview {
|
#preview {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
@ -416,4 +422,147 @@ img {
|
|||||||
}
|
}
|
||||||
#prompt_from_file {
|
#prompt_from_file {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
|
#init_image_preview {
|
||||||
|
max-width: 150px;
|
||||||
|
max-height: 150px;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: all 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#init_image_preview:hover {
|
||||||
|
max-width: 500px;
|
||||||
|
max-height: 1000px;
|
||||||
|
transition: all 1s 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#init_image_wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
#init_image_size_box {
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 3px;
|
||||||
|
padding: 3px;
|
||||||
|
background: rgb(32, 33, 36);
|
||||||
|
color: #ccc;
|
||||||
|
opacity: 70%;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 6px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor-settings-entries table td {
|
||||||
|
padding: 0px;
|
||||||
|
line-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor-settings-entries table td:first-child {
|
||||||
|
float: right;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type="file"],
|
||||||
|
input[type="checkbox"],
|
||||||
|
select {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
background: hsl(225, 11.1%, 95%);
|
||||||
|
border: 2px solid hsl(225, 11.1%, 50%);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 4px;
|
||||||
|
accent-color: rgb(80, 0, 185);
|
||||||
|
background: hsl(225, 11.1%, 14%);
|
||||||
|
border: 2px solid hsl(225, 11.1%, 10%);
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding: 4px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
select:focus,
|
||||||
|
textarea:focus {
|
||||||
|
outline: 2px solid rgb(80, 0, 185);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[disabled],
|
||||||
|
select[disabled],
|
||||||
|
textarea[disabled] {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* input[type="range"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 29px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-webkit-slider-thumb,
|
||||||
|
input[type="range"]::-moz-range-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 12px;
|
||||||
|
} */
|
||||||
|
|
||||||
|
#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%);
|
||||||
}
|
}
|
||||||
183
ui/media/main.js
183
ui/media/main.js
@ -12,6 +12,7 @@ const USE_UPSCALING_KEY = "useUpscaling"
|
|||||||
const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage"
|
const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage"
|
||||||
const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress"
|
const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress"
|
||||||
const OUTPUT_FORMAT_KEY = "outputFormat"
|
const OUTPUT_FORMAT_KEY = "outputFormat"
|
||||||
|
const AUTO_SAVE_SETTINGS_KEY = "autoSaveSettings"
|
||||||
const HEALTH_PING_INTERVAL = 5 // seconds
|
const HEALTH_PING_INTERVAL = 5 // seconds
|
||||||
const MAX_INIT_IMAGE_DIMENSION = 768
|
const MAX_INIT_IMAGE_DIMENSION = 768
|
||||||
const INPAINTING_EDITOR_SIZE = 450
|
const INPAINTING_EDITOR_SIZE = 450
|
||||||
@ -35,6 +36,7 @@ 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')
|
||||||
@ -42,6 +44,9 @@ let useCPUField = document.querySelector('#use_cpu')
|
|||||||
let useFullPrecisionField = document.querySelector('#use_full_precision')
|
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 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')
|
||||||
@ -78,6 +83,10 @@ 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)
|
||||||
@ -187,6 +196,10 @@ function isUseFullPrecisionEnabled() {
|
|||||||
return getLocalStorageBoolItem(USE_FULL_PRECISION_KEY, false)
|
return getLocalStorageBoolItem(USE_FULL_PRECISION_KEY, false)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isAutoSaveSettingsEnabled() {
|
||||||
|
return getLocalStorageBoolItem(AUTO_SAVE_SETTINGS_KEY, false)
|
||||||
|
}
|
||||||
|
|
||||||
function isUseTurboModeEnabled() {
|
function isUseTurboModeEnabled() {
|
||||||
return getLocalStorageBoolItem(USE_TURBO_MODE_KEY, true)
|
return getLocalStorageBoolItem(USE_TURBO_MODE_KEY, true)
|
||||||
}
|
}
|
||||||
@ -254,7 +267,12 @@ 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
|
||||||
audio.play()
|
var promise = audio.play();
|
||||||
|
if (promise !== undefined) {
|
||||||
|
promise.then(_ => {}).catch(error => {
|
||||||
|
console.warn("browser blocked autoplay");
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function healthCheck() {
|
async function healthCheck() {
|
||||||
@ -1017,6 +1035,9 @@ useCPUField.checked = isUseCPUEnabled()
|
|||||||
useFullPrecisionField.addEventListener('click', handleBoolSettingChange(USE_FULL_PRECISION_KEY))
|
useFullPrecisionField.addEventListener('click', handleBoolSettingChange(USE_FULL_PRECISION_KEY))
|
||||||
useFullPrecisionField.checked = isUseFullPrecisionEnabled()
|
useFullPrecisionField.checked = isUseFullPrecisionEnabled()
|
||||||
|
|
||||||
|
autoSaveSettingsField.addEventListener('click', handleBoolSettingChange(AUTO_SAVE_SETTINGS_KEY))
|
||||||
|
autoSaveSettingsField.checked = isAutoSaveSettingsEnabled()
|
||||||
|
|
||||||
turboField.addEventListener('click', handleBoolSettingChange(USE_TURBO_MODE_KEY))
|
turboField.addEventListener('click', handleBoolSettingChange(USE_TURBO_MODE_KEY))
|
||||||
turboField.checked = isUseTurboModeEnabled()
|
turboField.checked = isUseTurboModeEnabled()
|
||||||
|
|
||||||
@ -1187,7 +1208,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() {
|
reader.addEventListener('load', function(event) {
|
||||||
// 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'
|
||||||
@ -1208,6 +1229,8 @@ 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() {
|
||||||
@ -1225,7 +1248,8 @@ initImageClearBtn.addEventListener('click', function() {
|
|||||||
// maskSetting.style.display = 'none'
|
// maskSetting.style.display = 'none'
|
||||||
|
|
||||||
promptStrengthContainer.style.display = 'none'
|
promptStrengthContainer.style.display = 'none'
|
||||||
samplerSelectionContainer.style.display = 'block'
|
samplerSelectionContainer.style.display = 'table-row'
|
||||||
|
initImageSizeBox.style.display = 'none'
|
||||||
})
|
})
|
||||||
|
|
||||||
maskSetting.addEventListener('click', function() {
|
maskSetting.addEventListener('click', function() {
|
||||||
@ -1595,4 +1619,155 @@ 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';
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user