holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity
4264c2e266
easydiffusion/ui/index.html

1656 lines
55 KiB
HTML
Raw Normal View History

Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
background-color: rgb(32, 33, 36);
color: #eee;
}
a {
color: rgb(0, 102, 204);
}
a:visited {
color: rgb(0, 102, 204);
}
label {
font-size: 10pt;
}
#prompt {
width: 100%;
height: 50pt;
}
@media screen and (max-width: 600px) {
#prompt {
width: 95%;
}
}
.image_preview_container {
display: none;
margin-top: 10pt;
}
.image_clear_btn {
position: absolute;
transform: translateX(-50%) translateY(-35%);
background: black;
color: white;
border: 2pt solid #ccc;
padding: 0;
cursor: pointer;
outline: inherit;
border-radius: 8pt;
width: 16pt;
height: 16pt;
font-family: Verdana;
font-size: 8pt;
}
#editor-settings-entries {
font-size: 9pt;
margin-bottom: 5px;
padding-left: 10px;
list-style-type: none;
}
#editor-settings-entries li {
padding-bottom: 3pt;
}
Make Prompt Strength editable via a text box; Restrict the max prompt strength to 0.99, since 1 caused CUDA errors for a few users; Color tweak for the stop button
2022-09-14 07:31:12 +02:00
.editor-slider {
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
transform: translateY(30%);
}
#outputMsg {
font-size: small;
}
#footer {
font-size: small;
padding-left: 10pt;
background: none;
}
#footer-legal {
font-size: 8pt;
}
.imgSeedLabel {
position: absolute;
transform: translateX(-100%);
margin-top: 5pt;
margin-left: -5pt;
font-size: 10pt;
background-color: #333;
opacity: 0.8;
color: #ddd;
border-radius: 3pt;
padding: 1pt 3pt;
}
.imgUseBtn {
position: absolute;
transform: translateX(-100%);
margin-top: 30pt;
margin-left: -5pt;
}
.imgSaveBtn {
position: absolute;
transform: translateX(-100%);
margin-top: 55pt;
margin-left: -5pt;
}
.imgItem {
display: inline;
padding-right: 10px;
}
.imgItemInfo {
opacity: 0.5;
}
#container {
width: 75%;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 1400px) {
#container {
width: 100%;
}
}
#meta small {
font-size: 11pt;
}
#editor {
padding: 5px;
}
#editor label {
font-weight: bold;
}
#preview {
padding: 5px;
}
#editor-inputs {
margin-bottom: 20px;
}
#editor-inputs-prompt {
flex: 1;
}
#editor-inputs .row {
padding-bottom: 10px;
}
#makeImage {
border-radius: 6px;
}
#editor-modifiers h5 {
padding: 5pt 0;
margin: 0;
}
#makeImage {
flex: 0 0 70px;
background: rgb(80, 0, 185);
border: 2px solid rgb(40, 0, 78);
color: rgb(255, 221, 255);
width: 100%;
height: 30pt;
}
#makeImage:hover {
background: rgb(93, 0, 214);
}
Stop button in the UI
2022-09-13 18:55:28 +02:00
#stopImage {
flex: 0 0 70px;
Make Prompt Strength editable via a text box; Restrict the max prompt strength to 0.99, since 1 caused CUDA errors for a few users; Color tweak for the stop button
2022-09-14 07:31:12 +02:00
background: rgb(132, 8, 0);
Stop button in the UI
2022-09-13 18:55:28 +02:00
border: 2px solid rgb(122, 29, 0);
color: rgb(255, 221, 255);
width: 100%;
height: 30pt;
border-radius: 6px;
display: none;
}
#stopImage:hover {
background: rgb(214, 32, 0);
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
.flex-container {
display: flex;
}
.col-50 {
flex: 50%;
}
.col-free {
flex: 1;
}
.collapsible {
cursor: pointer;
}
.collapsible-content {
display: none;
padding-left: 15px;
}
.collapsible-content h5 {
padding: 5pt 0pt;
margin: 0;
font-size: 10pt;
}
.collapsible-handle {
color: white;
padding-right: 5px;
}
.panel-box {
background: rgb(44, 45, 48);
border: 1px solid rgb(47, 49, 53);
border-radius: 7px;
padding: 5px;
margin-bottom: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
}
.panel-box h4 {
margin: 0;
padding: 2px 0;
}
#editor-modifiers .editor-modifiers-leaf {
padding-top: 10pt;
padding-bottom: 10pt;
}
#preview {
margin-left: 20pt;
}
img {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
}
.line-separator {
background: rgb(56, 56, 56);
height: 1pt;
margin: 15pt 0;
}
#editor-inputs-tags-container {
margin-top: 5pt;
display: none;
}
#server-status {
float: right;
}
#server-status-color {
width: 8pt;
height: 8pt;
border-radius: 4pt;
background-color: rgb(128, 87, 0);
/* background-color: rgb(197, 1, 1); */
float: left;
transform: translateY(15%);
}
#server-status-msg {
color: rgb(128, 87, 0);
padding-left: 2pt;
font-size: 10pt;
}
#preview-prompt {
font-size: 16pt;
margin-bottom: 10pt;
}
Ko-fi button
2022-09-05 14:33:19 +02:00
#coffeeButton {
height: 23px;
transform: translateY(25%);
}
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
.modifier-card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.1s;
border-radius: 7px;
margin: 3pt 3pt;
float: left;
width: 8em;
height: 11.5em;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 8em 3.5em;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
"modifier-card-image-container"
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
"modifier-card-container";
border: 2px solid rgba(255, 255, 255, .05);
cursor: pointer;
}
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
.modifier-card-size_5 {
width: 18em;
grid-template-rows: 18em 3.5em;
height: 21.5em;
}
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
.modifier-card-size_5 .modifier-card-image-overlay {
Scale card overlay text accordingly
2022-09-23 02:01:20 +02:00
font-size: 8em;
}
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
.modifier-card-size_4 {
width: 14em;
grid-template-rows: 14em 3.5em;
height: 17.5em;
}
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
.modifier-card-size_4 .modifier-card-image-overlay {
Scale card overlay text accordingly
2022-09-23 02:01:20 +02:00
font-size: 7em;
}
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
.modifier-card-size_3 {
width: 11em;
grid-template-rows: 11em 3.5em;
height: 14.5em;
}
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
.modifier-card-size_3 .modifier-card-image-overlay {
Scale card overlay text accordingly
2022-09-23 02:01:20 +02:00
font-size: 6em;
}
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
.modifier-card-size_2 {
width: 10em;
grid-template-rows: 10em 3.5em;
height: 13.5em;
}
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
.modifier-card-size_2 .modifier-card-image-overlay {
Scale card overlay text accordingly
2022-09-23 02:01:20 +02:00
font-size: 6em;
}
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
.modifier-card-size_1 {
width: 9em;
grid-template-rows: 9em 3.5em;
height: 12.5em;
}
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
.modifier-card-size_1 .modifier-card-image-overlay {
Scale card overlay text accordingly
2022-09-23 02:01:20 +02:00
font-size: 5em;
}
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
.modifier-card-size_-1 {
width: 7em;
grid-template-rows: 7em 3.5em;
height: 10.5em;
}
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
.modifier-card-size_-1 .modifier-card-image-overlay {
Scale card overlay text accordingly
2022-09-23 02:01:20 +02:00
font-size: 4em;
}
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
.modifier-card-size_-2 {
width: 6em;
grid-template-rows: 6em 3.5em;
height: 9.5em;
}
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
.modifier-card-size_-2 .modifier-card-image-overlay {
Scale card overlay text accordingly
2022-09-23 02:01:20 +02:00
font-size: 3em;
}
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
.modifier-card-size_-3 {
width: 5em;
grid-template-rows: 5em 3.5em;
height: 8.5em;
}
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
.modifier-card-size_-3 .modifier-card-image-overlay {
Scale card overlay text accordingly
2022-09-23 02:01:20 +02:00
font-size: 3em;
}
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
.modifier-card-size_-3 p {
font-size: 0.8em;
}
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
.modifier-card-tiny {
width: 6em;
height: 9.5em;
grid-template-rows: 6em 3.5em;
}
.modifier-card-tiny p {
font-size: 0.7em;
}
.modifier-card:hover {
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
transform: scale(1.05);
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.25);
}
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
.modifier-card-image-container {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
border-radius: 5px 5px 0 0;
width: inherit;
height: 100%;
background-color: rgba(0, 0, 0, .2);
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
grid-area: modifier-card-image-container;
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: rgb(255 255 255 / 8%);
}
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
.modifier-card-image-container img {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
width: inherit;
height: 100%;
border-radius: 5px 5px 0 0;
}
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
.modifier-card-image-container * {
Fix 'No Image' paragraph
2022-09-22 17:47:57 +02:00
position: absolute;
}
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
.modifier-card-container {
text-align: center;
background-color: rgba(0,0,0,0.5);
border-radius: 0 0 5px 5px;
display: flex;
justify-content: center;
align-items: center;
grid-area: modifier-card-container;
font-weight: 100;
font-size: .9em;
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
width: inherit;
}
.modifier-card-label {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
padding: 4px;
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
word-break: break-word;
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
}
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
.modifier-card-image-overlay {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
width: inherit;
height: inherit;
background-color: rgb(0 0 0 / 50%);
z-index: 2;
position: absolute;
border-radius: 5px 5px 0 0;
opacity: 0;
font-size: 5em;
font-weight: 900;
color: rgb(255 255 255 / 50%);
display: flex;
align-items: center;
justify-content: center;
}
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
.modifier-card-overlay {
width: inherit;
height: inherit;
position: absolute;
z-index: 3;
}
.modifier-card:hover > .modifier-card-image-container .modifier-card-image-overlay {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
opacity: 1;
}
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
.modifier-card:hover > .modifier-card-image-container img {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
filter: blur(.1em);
}
.modifier-card:active {
transform: scale(0.95);
box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.5);
}
#preview-image {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.modifier-card-active {
border: 2px solid rgb(179 82 255 / 94%);
box-shadow: 0 0px 10px 0 rgb(170 0 229 / 58%);
}
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 120px;
background: rgb(101,97,181);
background: linear-gradient(180deg, rgba(101,97,181,1) 0%, rgba(47,45,85,1) 100%);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
top: 105%;
left: 39%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
border: 2px solid rgb(90 100 177 / 94%);
box-shadow: 0px 10px 20px 5px rgb(11 0 58 / 55%);
width: 10em;
}
.tooltip .tooltip-text::after {
content: "";
position: absolute;
top: -0.9em;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent rgb(90 100 177 / 94%) transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
#modifier-card-size-slider {
width: 6em;
margin-bottom: 0.5em;
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
</style>
</html>
<body>
<div id="container">
<div class="flex-container">
<div id="editor" class="col-50">
<div id="meta">
<div id="server-status">
<div id="server-status-color">&nbsp;</div>
<span id="server-status-msg">Stable Diffusion is starting..</span>
</div>
Show a label for the update channel, next to the version number
2022-09-10 11:38:07 +02:00
<h1>Stable Diffusion UI <small>v2.1 <span id="updateBranchLabel"></span></small></h1>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
</div>
<div id="editor-inputs">
<div id="editor-inputs-prompt" class="row">
<label for="prompt">Prompt</label>
<textarea id="prompt" class="col-free">a photograph of an astronaut riding a horse</textarea>
</div>
<div id="editor-inputs-init-image" class="row">
<label for="init_image"><b>Initial Image:</b> (optional) </label> <input id="init_image" name="init_image" type="file" /> </button><br/>
<div id="init_image_preview_container" class="image_preview_container">
<img id="init_image_preview" src="" width="100" height="100" />
<button id="init_image_clear" class="image_clear_btn">X</button>
</div>
</div>
<div id="editor-inputs-tags-container" class="row">
<label>Tags: <small>(click a tag to remove it)</small></label>
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
<div id="editor-inputs-tags-list"></div>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
</div>
<button id="makeImage">Make Image</button>
Stop button in the UI
2022-09-13 18:55:28 +02:00
<button id="stopImage">Stop</button>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
</div>
<div class="line-separator">&nbsp;</div>
<div id="editor-settings" class="panel-box">
<h4 class="collapsible">Advanced Settings</h4>
<ul id="editor-settings-entries" class="collapsible-content">
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
<li><input id="use_face_correction" name="use_face_correction" type="checkbox" checked> <label for="use_face_correction">Fix incorrect faces and eyes (uses GFPGAN)</label></li>
<li>
<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>
</select>
</li>
Invert the logic - show only the filtered image by default
2022-09-09 17:36:51 +02:00
<li><input id="show_only_filtered_image" name="show_only_filtered_image" type="checkbox" checked> <label for="show_only_filtered_image">Show only the corrected/upscaled image</label></li>
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
<br/>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
<li><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><label for="num_outputs_total">Number of images to make:</label> <input id="num_outputs_total" name="num_outputs_total" value="1" size="4"> <label for="num_outputs_parallel">Generate in parallel:</label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="4"> (images at once)</li>
Allow more width and height options
2022-09-03 17:52:56 +02:00
<li><label for="width">Width:</label>
<select id="width" name="width" value="512">
<option value="128">128 (*)</option>
<option value="192">192</option>
<option value="256">256 (*)</option>
<option value="320">320</option>
<option value="384">384</option>
<option value="448">448</option>
<option value="512" selected>512 (*)</option>
<option value="576">576</option>
<option value="640">640</option>
<option value="704">704</option>
<option value="768">768 (*)</option>
<option value="832">832</option>
<option value="896">896</option>
<option value="960">960</option>
<option value="1024">1024 (*)</option>
Higher resolution options
2022-09-12 09:34:49 +02:00
<option value="1280">1280</option>
<option value="1536">1536</option>
<option value="1792">1792</option>
<option value="2048">2048</option>
Allow more width and height options
2022-09-03 17:52:56 +02:00
</select>
</li>
<li><label for="height">Height:</label>
<select id="height" name="height" value="512">
<option value="128">128 (*)</option>
<option value="192">192</option>
<option value="256">256 (*)</option>
<option value="320">320</option>
<option value="384">384</option>
<option value="448">448</option>
<option value="512" selected>512 (*)</option>
<option value="576">576</option>
<option value="640">640</option>
<option value="704">704</option>
<option value="768">768 (*)</option>
<option value="832">832</option>
<option value="896">896</option>
<option value="960">960</option>
<option value="1024">1024 (*)</option>
Higher resolution options
2022-09-12 09:34:49 +02:00
<option value="1280">1280</option>
<option value="1536">1536</option>
<option value="1792">1792</option>
<option value="2048">2048</option>
Allow more width and height options
2022-09-03 17:52:56 +02:00
</select>
</li>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
<li><label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" size="4" value="50"></li>
Make Prompt Strength editable via a text box; Restrict the max prompt strength to 0.99, since 1 caused CUDA errors for a few users; Color tweak for the stop button
2022-09-14 07:31:12 +02:00
<li><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="200"> <input id="guidance_scale" name="guidance_scale" size="4"></li>
<li><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>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
<li>&nbsp;</li>
Configurable path to save to disk
2022-09-05 13:55:25 +02:00
<li><input id="save_to_disk" name="save_to_disk" type="checkbox"> <label for="save_to_disk">Automatically save to <input id="diskPath" name="diskPath" size="40" disabled></label></li>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
<li><input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Play sound on task completion</label></li>
<li><input id="turbo" name="turbo" type="checkbox" checked> <label for="turbo">Turbo mode (generates images faster, but uses an additional 1 GB of GPU memory)</label></li>
<li><input id="use_cpu" name="use_cpu" type="checkbox"> <label for="use_cpu">Use CPU instead of GPU (warning: this will be *very* slow)</label></li>
Use full precision automatically for NVIDIA 1650 and 1660
2022-09-07 12:02:34 +02:00
<li><input id="use_full_precision" name="use_full_precision" type="checkbox"> <label for="use_full_precision">Use full precision (for GPU-only. warning: this will consume more VRAM)</label></li>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
<!-- <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> -->
UI for setting the beta/main channel
2022-09-09 17:04:32 +02:00
<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>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
</ul>
</div>
<div id="editor-modifiers" class="panel-box">
<h4 class="collapsible">Image Modifiers (art styles, tags etc)</h4>
<div id="editor-modifiers-entries" class="collapsible-content">
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
<label for="preview-image">Preview:</label>
<select id="preview-image" name="preview-image" value="portrait">
<option value="portrait" selected="">Portrait</option>
<option value="landscape">Landscape</option>
</select>
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
<div>
<label for="modifier-card-size-slider">Card Size:</label>
<input id="modifier-card-size-slider" name="modifier-card-size-slider" value="0" type="range" min="-3" max="5">
</div>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
</div>
</div>
</div>
<div id="preview" class="col-50">
img2img tip
2022-09-03 08:15:50 +02:00
<div id="preview-prompt">Type a prompt and press the "Make Image" button.<br/><br/>You can set an "Initial Image" if you want to guide the AI.<br/><br/>You can also add modifiers like "Realistic", "Pencil Sketch", "ArtStation" etc by browsing through the "Image Modifiers" section and selecting the desired modifiers.<br/><br/>Click "Advanced Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)</div>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
<div id="outputMsg"></div>
<div id="current-images" class="img-preview">
</div>
</div>
</div>
<div class="line-separator">&nbsp;</div>
<div id="footer" class="panel-box">
Ko-fi button
2022-09-05 14:33:19 +02:00
<p>If you found this project useful and want to help keep it alive, please <a href="https://ko-fi.com/cmdr2_stablediffusion_ui" target="_blank"><img src="media/kofi.png" id="coffeeButton"></a> to help cover the cost of development and maintenance! Thank you for your support!</p>
<p>Please feel free to join the <a href="https://discord.com/invite/u9yhsFmEkB" target="_blank">discord community</a> or <a href="https://github.com/cmdr2/stable-diffusion-ui/issues" target="_blank">file an issue</a> if you have any problems or suggestions in using this interface.</p>
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
<div id="footer-legal">
<p><b>Disclaimer:</b> The authors of this project are not responsible for any content generated using this interface.</p>
<p>This license of this software forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm, <br/>spread misinformation and target vulnerable groups. For the full list of restrictions please read <a href="https://github.com/cmdr2/stable-diffusion-ui/blob/main/LICENSE" target="_blank">the license</a>.</p>
<p>By using this software, you consent to the terms and conditions of the license.</p>
</div>
</div>
</div>
</body>
<script>
const SOUND_ENABLED_KEY = "soundEnabled"
Store the 'save to disk' setting
2022-09-07 12:35:39 +02:00
const SAVE_TO_DISK_KEY = "saveToDisk"
Preserve across restarts the settings for 'use cpu', 'use full precision', 'use turbo'
2022-09-03 08:13:05 +02:00
const USE_CPU_KEY = "useCPU"
const USE_FULL_PRECISION_KEY = "useFullPrecision"
const USE_TURBO_MODE_KEY = "useTurboMode"
Configurable path to save to disk
2022-09-05 13:55:25 +02:00
const DISK_PATH_KEY = "diskPath"
Preserve the state of the advanced and modifiers panel across restarts
2022-09-07 12:59:10 +02:00
const ADVANCED_PANEL_OPEN_KEY = "advancedPanelOpen"
const MODIFIERS_PANEL_OPEN_KEY = "modifiersPanelOpen"
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
const USE_FACE_CORRECTION_KEY = "useFaceCorrection"
const USE_UPSCALING_KEY = "useUpscaling"
const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage"
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
const HEALTH_PING_INTERVAL = 5 // seconds
Show suggestions if an out of memory error is encountered by the user
2022-09-05 09:52:34 +02:00
const MAX_INIT_IMAGE_DIMENSION = 768
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Show a warning if the initial image is larger than 768x768, can cause out of memory errors
2022-09-05 09:40:19 +02:00
const IMAGE_REGEX = new RegExp('data:image/[A-Za-z]+;base64')
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let promptField = document.querySelector('#prompt')
let numOutputsTotalField = document.querySelector('#num_outputs_total')
let numOutputsParallelField = document.querySelector('#num_outputs_parallel')
let numInferenceStepsField = document.querySelector('#num_inference_steps')
Allow editing the guidance scale using a textbox for finer control; Fix a bug where the image name would contain the wrong guidance scale
2022-09-14 07:16:07 +02:00
let guidanceScaleSlider = document.querySelector('#guidance_scale_slider')
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let guidanceScaleField = document.querySelector('#guidance_scale')
let randomSeedField = document.querySelector("#random_seed")
let seedField = document.querySelector('#seed')
let widthField = document.querySelector('#width')
let heightField = document.querySelector('#height')
let initImageSelector = document.querySelector("#init_image")
let initImagePreview = document.querySelector("#init_image_preview")
// let maskImageSelector = document.querySelector("#mask")
// let maskImagePreview = document.querySelector("#mask_preview")
let turboField = document.querySelector('#turbo')
let useCPUField = document.querySelector('#use_cpu')
let useFullPrecisionField = document.querySelector('#use_full_precision')
let saveToDiskField = document.querySelector('#save_to_disk')
Configurable path to save to disk
2022-09-05 13:55:25 +02:00
let diskPathField = document.querySelector('#diskPath')
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
// let allowNSFWField = document.querySelector("#allow_nsfw")
UI for setting the beta/main channel
2022-09-09 17:04:32 +02:00
let useBetaChannelField = document.querySelector("#use_beta_channel")
Make Prompt Strength editable via a text box; Restrict the max prompt strength to 0.99, since 1 caused CUDA errors for a few users; Color tweak for the stop button
2022-09-14 07:31:12 +02:00
let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let promptStrengthField = document.querySelector('#prompt_strength')
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
let useFaceCorrectionField = document.querySelector("#use_face_correction")
let useUpscalingField = document.querySelector("#use_upscale")
let upscaleModelField = document.querySelector("#upscale_model")
let showOnlyFilteredImageField = document.querySelector("#show_only_filtered_image")
Show a label for the update channel, next to the version number
2022-09-10 11:38:07 +02:00
let updateBranchLabel = document.querySelector("#updateBranchLabel")
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let makeImageBtn = document.querySelector('#makeImage')
Stop button in the UI
2022-09-13 18:55:28 +02:00
let stopImageBtn = document.querySelector('#stopImage')
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let imagesContainer = document.querySelector('#current-images')
let initImagePreviewContainer = document.querySelector('#init_image_preview_container')
let initImageClearBtn = document.querySelector('#init_image_clear')
let promptStrengthContainer = document.querySelector('#prompt_strength_container')
// let maskSetting = document.querySelector('#mask_setting')
// let maskImagePreviewContainer = document.querySelector('#mask_preview_container')
// let maskImageClearBtn = document.querySelector('#mask_clear')
let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
let previewImageField = document.querySelector('#preview-image')
previewImageField.onchange = () => changePreviewImages(previewImageField.value);
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
let modifierCardSizeSlider = document.querySelector('#modifier-card-size-slider')
modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value);
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let previewPrompt = document.querySelector('#preview-prompt')
let showConfigToggle = document.querySelector('#configToggleBtn')
// let configBox = document.querySelector('#config')
let outputMsg = document.querySelector('#outputMsg')
let soundToggle = document.querySelector('#sound_toggle')
let serverStatusColor = document.querySelector('#server-status-color')
let serverStatusMsg = document.querySelector('#server-status-msg')
Preserve the state of the advanced and modifiers panel across restarts
2022-09-07 12:59:10 +02:00
let advancedPanelHandle = document.querySelector("#editor-settings .collapsible")
let modifiersPanelHandle = document.querySelector("#editor-modifiers .collapsible")
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let serverStatus = 'offline'
let activeTags = []
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
let modifiers = []
Fix bug with broken tag name in filename generator
2022-09-03 20:58:38 +02:00
let lastPromptUsed = ''
Don't run the remaining batches of a stopped task
2022-09-13 19:25:45 +02:00
let taskStopped = true
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
const modifierThumbnailPath = 'static/modifier-thumbnails';
const activeCardClass = 'modifier-card-active';
Preserve across restarts the settings for 'use cpu', 'use full precision', 'use turbo'
2022-09-03 08:13:05 +02:00
function getLocalStorageItem(key, fallback) {
let item = localStorage.getItem(key)
if (item === null) {
return fallback
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
}
Preserve across restarts the settings for 'use cpu', 'use full precision', 'use turbo'
2022-09-03 08:13:05 +02:00
return item
}
function getLocalStorageBoolItem(key, fallback) {
let item = localStorage.getItem(key)
if (item === null) {
return fallback
}
return (item === 'true' ? true : false)
}
function handleBoolSettingChange(key) {
return function(e) {
localStorage.setItem(key, e.target.checked.toString())
}
}
Configurable path to save to disk
2022-09-05 13:55:25 +02:00
function handleStringSettingChange(key) {
return function(e) {
localStorage.setItem(key, e.target.value.toString())
}
}
Preserve across restarts the settings for 'use cpu', 'use full precision', 'use turbo'
2022-09-03 08:13:05 +02:00
function isSoundEnabled() {
return getLocalStorageBoolItem(SOUND_ENABLED_KEY, true)
}
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
function isFaceCorrectionEnabled() {
return getLocalStorageBoolItem(USE_FACE_CORRECTION_KEY, false)
}
function isUpscalingEnabled() {
return getLocalStorageBoolItem(USE_UPSCALING_KEY, false)
}
function isShowOnlyFilteredImageEnabled() {
Invert the logic - show only the filtered image by default
2022-09-09 17:36:51 +02:00
return getLocalStorageBoolItem(SHOW_ONLY_FILTERED_IMAGE_KEY, true)
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
}
Store the 'save to disk' setting
2022-09-07 12:35:39 +02:00
function isSaveToDiskEnabled() {
return getLocalStorageBoolItem(SAVE_TO_DISK_KEY, false)
}
Preserve across restarts the settings for 'use cpu', 'use full precision', 'use turbo'
2022-09-03 08:13:05 +02:00
function isUseCPUEnabled() {
return getLocalStorageBoolItem(USE_CPU_KEY, false)
}
function isUseFullPrecisionEnabled() {
return getLocalStorageBoolItem(USE_FULL_PRECISION_KEY, false)
}
function isUseTurboModeEnabled() {
return getLocalStorageBoolItem(USE_TURBO_MODE_KEY, true)
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
}
Configurable path to save to disk
2022-09-05 13:55:25 +02:00
function getSavedDiskPath() {
return getLocalStorageItem(DISK_PATH_KEY, '')
}
Preserve the state of the advanced and modifiers panel across restarts
2022-09-07 12:59:10 +02:00
function isAdvancedPanelOpenEnabled() {
return getLocalStorageBoolItem(ADVANCED_PANEL_OPEN_KEY, false)
}
function isModifiersPanelOpenEnabled() {
return getLocalStorageBoolItem(MODIFIERS_PANEL_OPEN_KEY, false)
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
function setStatus(statusType, msg, msgType) {
if (statusType !== 'server') {
return;
}
if (msgType == 'error') {
// msg = '<span style="color: red">' + msg + '<span>'
serverStatusColor.style.backgroundColor = 'red'
serverStatusMsg.style.color = 'red'
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
serverStatusMsg.innerText = 'Stable Diffusion has stopped'
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
} else if (msgType == 'success') {
// msg = '<span style="color: green">' + msg + '<span>'
serverStatusColor.style.backgroundColor = 'green'
serverStatusMsg.style.color = 'green'
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
serverStatusMsg.innerText = 'Stable Diffusion is ready'
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
serverStatus = 'online'
}
}
Show a warning if the initial image is larger than 768x768, can cause out of memory errors
2022-09-05 09:40:19 +02:00
function logMsg(msg, level) {
if (level === 'error') {
outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>'
} else if (level === 'warn') {
outputMsg.innerHTML = '<span style="color: orange">Warning: ' + msg + '</span>'
} else {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
outputMsg.innerText = msg
Show a warning if the initial image is larger than 768x768, can cause out of memory errors
2022-09-05 09:40:19 +02:00
}
console.log(level, msg)
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
function logError(msg, res) {
Show a warning if the initial image is larger than 768x768, can cause out of memory errors
2022-09-05 09:40:19 +02:00
logMsg(msg, 'error')
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
console.log('request error', res)
setStatus('request', 'error', 'error')
}
function playSound() {
const audio = new Audio('/media/ding.mp3')
audio.volume = 0.2
audio.play()
}
async function healthCheck() {
try {
let res = await fetch('/ping')
res = await res.json()
if (res[0] == 'OK') {
setStatus('server', 'online', 'success')
} else {
setStatus('server', 'offline', 'error')
}
} catch (e) {
setStatus('server', 'offline', 'error')
}
}
// makes a single image. don't call this directly, use makeImage() instead
async function doMakeImage(reqBody) {
Don't run the remaining batches of a stopped task
2022-09-13 19:25:45 +02:00
if (taskStopped) {
return
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let res = ''
let seed = reqBody['seed']
try {
res = await fetch('/image', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(reqBody)
})
if (res.status != 200) {
if (serverStatus === 'online') {
logError('Stable Diffusion had an error: ' + await res.text() + '. This happens sometimes. Maybe modify the prompt or seed a little bit?', res)
} else {
logError("Stable Diffusion is still starting up, please wait. If this goes on beyond a few minutes, Stable Diffusion has probably crashed.", res)
}
res = undefined
} else {
res = await res.json()
if (res.status !== 'succeeded') {
let msg = ''
if (res.detail !== undefined) {
msg = res.detail
Show suggestions if an out of memory error is encountered by the user
2022-09-05 09:52:34 +02:00
if (msg.toLowerCase().includes('out of memory')) {
msg += `<br/><br/>
<b>Suggestions</b>:
<br/>
1. If you have set an initial image, please try reducing its dimension to ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION} or smaller.<br/>
2. Try disabling the '<em>Turbo mode</em>' under '<em>Advanced Settings</em>'.<br/>
3. Try generating a smaller image.<br/>`
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
} else {
msg = res
}
logError(msg, res)
res = undefined
}
}
} catch (e) {
console.log('request error', e)
setStatus('request', 'error', 'error')
}
if (!res) {
return false
}
Fix bug with broken tag name in filename generator
2022-09-03 20:58:38 +02:00
lastPromptUsed = reqBody['prompt']
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
for (let idx in res.output) {
let imgBody = ''
The seed displayed in the UI was wrong
2022-09-12 19:45:41 +02:00
let seed = 0
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
try {
let imgData = res.output[idx]
imgBody = imgData.data
The seed displayed in the UI was wrong
2022-09-12 19:45:41 +02:00
seed = imgData.seed
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
} catch (e) {
console.log(imgBody)
setStatus('request', 'invalid image', 'error')
continue
}
let imgItem = document.createElement('div')
imgItem.className = 'imgItem'
let img = document.createElement('img')
img.width = parseInt(reqBody.width)
img.height = parseInt(reqBody.height)
img.src = imgBody
let imgItemInfo = document.createElement('span')
imgItemInfo.className = 'imgItemInfo'
let imgSeedLabel = document.createElement('span')
imgSeedLabel.className = 'imgSeedLabel'
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
imgSeedLabel.innerText = 'Seed: ' + seed
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let imgUseBtn = document.createElement('button')
imgUseBtn.className = 'imgUseBtn'
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
imgUseBtn.innerText = 'Use as Input'
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let imgSaveBtn = document.createElement('button')
imgSaveBtn.className = 'imgSaveBtn'
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
imgSaveBtn.innerText = 'Download'
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
imgItem.appendChild(img)
imgItem.appendChild(imgItemInfo)
imgItemInfo.appendChild(imgSeedLabel)
imgItemInfo.appendChild(imgUseBtn)
imgItemInfo.appendChild(imgSaveBtn)
imagesContainer.appendChild(imgItem)
imgUseBtn.addEventListener('click', function() {
initImageSelector.value = null
initImagePreview.src = imgBody
initImagePreviewContainer.style.display = 'block'
promptStrengthContainer.style.display = 'block'
// maskSetting.style.display = 'block'
randomSeedField.checked = false
seedField.value = seed
seedField.disabled = false
})
imgSaveBtn.addEventListener('click', function() {
let imgDownload = document.createElement('a')
updated filename
2022-09-03 17:06:34 +02:00
imgDownload.download = createFileName();
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
imgDownload.href = imgBody
imgDownload.click()
})
imgItem.addEventListener('mouseenter', function() {
imgItemInfo.style.opacity = 1
})
imgItem.addEventListener('mouseleave', function() {
imgItemInfo.style.opacity = 0.5
})
}
return true
}
Show a warning if the initial image is larger than 768x768, can cause out of memory errors
2022-09-05 09:40:19 +02:00
function validateInput() {
let width = parseInt(widthField.value)
let height = parseInt(heightField.value)
if (IMAGE_REGEX.test(initImagePreview.src)) {
if (initImagePreview.naturalWidth > MAX_INIT_IMAGE_DIMENSION || initImagePreview.naturalHeight > MAX_INIT_IMAGE_DIMENSION) {
return {'isValid': false, 'warning': `The dimensions of your initial image are very large, and can cause 'Out of Memory' errors! Please ensure that its dimensions are equal (or smaller) than the desired output image.
<br/><br/>
Your initial image size is ${initImagePreview.naturalWidth}x${initImagePreview.naturalHeight} pixels. Please try to keep it smaller than ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION}.`}
}
}
return {'isValid': true}
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
async function makeImage() {
if (serverStatus !== 'online') {
logError('The server is still starting up..')
return
}
Show a warning if the initial image is larger than 768x768, can cause out of memory errors
2022-09-05 09:40:19 +02:00
let validation = validateInput()
if (validation['isValid']) {
outputMsg.innerHTML = 'Fetching..'
} else {
if (validation['error']) {
logError(validation['error'])
return
} else if (validation['warning']) {
logMsg(validation['warning'], 'warn')
}
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
setStatus('request', 'fetching..')
makeImageBtn.innerHTML = 'Processing..'
Stop button in the UI
2022-09-13 18:55:28 +02:00
makeImageBtn.style.display = 'none'
stopImageBtn.style.display = 'block'
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Don't run the remaining batches of a stopped task
2022-09-13 19:25:45 +02:00
taskStopped = false
Set the set to 0 if deselecting from random; Allow 10 million random images by increasing the seed size
2022-09-09 17:41:05 +02:00
let seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000000) : parseInt(seedField.value))
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let numOutputsTotal = parseInt(numOutputsTotalField.value)
let numOutputsParallel = parseInt(numOutputsParallelField.value)
let batchCount = Math.ceil(numOutputsTotal / numOutputsParallel)
let batchSize = numOutputsParallel
let prompt = promptField.value
if (activeTags.length > 0) {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
let promptTags = activeTags.map(x => x.name).join(", ");
prompt += ", " + promptTags;
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
}
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
previewPrompt.innerText = prompt
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let reqBody = {
prompt: prompt,
num_outputs: batchSize,
num_inference_steps: numInferenceStepsField.value,
Allow editing the guidance scale using a textbox for finer control; Fix a bug where the image name would contain the wrong guidance scale
2022-09-14 07:16:07 +02:00
guidance_scale: guidanceScaleField.value,
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
width: widthField.value,
height: heightField.value,
// allow_nsfw: allowNSFWField.checked,
turbo: turboField.checked,
use_cpu: useCPUField.checked,
use_full_precision: useFullPrecisionField.checked
}
Show a warning if the initial image is larger than 768x768, can cause out of memory errors
2022-09-05 09:40:19 +02:00
if (IMAGE_REGEX.test(initImagePreview.src)) {
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
reqBody['init_image'] = initImagePreview.src
Make Prompt Strength editable via a text box; Restrict the max prompt strength to 0.99, since 1 caused CUDA errors for a few users; Color tweak for the stop button
2022-09-14 07:31:12 +02:00
reqBody['prompt_strength'] = promptStrengthField.value
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Show a warning if the initial image is larger than 768x768, can cause out of memory errors
2022-09-05 09:40:19 +02:00
// if (IMAGE_REGEX.test(maskImagePreview.src)) {
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
// reqBody['mask'] = maskImagePreview.src
// }
}
Configurable path to save to disk
2022-09-05 13:55:25 +02:00
if (saveToDiskField.checked && diskPathField.value.trim() !== '') {
reqBody['save_to_disk_path'] = diskPathField.value.trim()
}
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
if (useFaceCorrectionField.checked) {
reqBody['use_face_correction'] = 'GFPGANv1.3'
}
if (useUpscalingField.checked) {
reqBody['use_upscale'] = upscaleModelField.value
}
if (showOnlyFilteredImageField.checked && (useUpscalingField.checked || useFaceCorrectionField.checked)) {
reqBody['show_only_filtered_image'] = showOnlyFilteredImageField.checked
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let time = new Date().getTime()
imagesContainer.innerHTML = ''
let successCount = 0
for (let i = 0; i < batchCount; i++) {
Revert "Revert "Revert "Revert "Merge branch 'develop' of github.com:cmdr2/stable-diffusion-ui into develop"""" This reverts commit eb6d19a4dc1fb51d977a62b12a42da324b392c56.
2022-09-09 17:31:15 +02:00
reqBody['seed'] = seed + (i * batchSize)
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let success = await doMakeImage(reqBody)
if (success) {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
outputMsg.innerText = 'Processed batch ' + (i+1) + '/' + batchCount
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
successCount++
}
}
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
makeImageBtn.innerText = 'Make Image'
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
makeImageBtn.disabled = false
Reset the stop button once a task finishes normally
2022-09-13 19:27:32 +02:00
makeImageBtn.style.display = 'block'
stopImageBtn.style.display = 'none'
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
if (isSoundEnabled()) {
playSound()
}
time = new Date().getTime() - time
time /= 1000
if (successCount === batchCount) {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
outputMsg.innerText = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
setStatus('request', 'done', 'success')
}
if (randomSeedField.checked) {
seedField.value = seed
}
}
updated filename
2022-09-03 17:06:34 +02:00
// create a file name with embedded prompt and metadata
// for easier cateloging and comparison
function createFileName() {
// Most important information is the prompt
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
let underscoreName = lastPromptUsed.replace(/[^a-zA-Z0-9]/g, '_')
underscoreName = underscoreName.substring(0, 100)
Allow editing the guidance scale using a textbox for finer control; Fix a bug where the image name would contain the wrong guidance scale
2022-09-14 07:16:07 +02:00
const seed = seedField.value
const steps = numInferenceStepsField.value
const guidance = guidanceScaleField.value
updated filename
2022-09-03 17:06:34 +02:00
// name and the top level metadata
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
let fileName = `${underscoreName}_Seed-${seed}_Steps-${steps}_Guidance-${guidance}`
updated filename
2022-09-03 17:06:34 +02:00
// add the tags
Fix bug with broken tag name in filename generator
2022-09-03 20:58:38 +02:00
// let tags = [];
// let tagString = '';
// document.querySelectorAll(modifyTagsSelector).forEach(function(tag) {
// tags.push(tag.innerHTML);
// })
updated filename
2022-09-03 17:06:34 +02:00
// join the tags with a pipe
Fix bug with broken tag name in filename generator
2022-09-03 20:58:38 +02:00
// if (activeTags.length > 0) {
// tagString = '_Tags-';
// tagString += tags.join('|');
// }
updated filename
2022-09-03 17:06:34 +02:00
Fix bug with broken tag name in filename generator
2022-09-03 20:58:38 +02:00
// // append empty or populated tags
// fileName += `${tagString}`;
updated filename
2022-09-03 17:06:34 +02:00
// add the file extension
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
fileName += `.png`
updated filename
2022-09-03 17:06:34 +02:00
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
return fileName
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
}
Stop button in the UI
2022-09-13 18:55:28 +02:00
stopImageBtn.addEventListener('click', async function() {
try {
let res = await fetch('/image/stop')
} catch (e) {
console.log(e)
}
stopImageBtn.style.display = 'none'
makeImageBtn.style.display = 'block'
Don't run the remaining batches of a stopped task
2022-09-13 19:25:45 +02:00
taskStopped = true
Stop button in the UI
2022-09-13 18:55:28 +02:00
})
updated filename
2022-09-03 17:06:34 +02:00
Preserve across restarts the settings for 'use cpu', 'use full precision', 'use turbo'
2022-09-03 08:13:05 +02:00
soundToggle.addEventListener('click', handleBoolSettingChange(SOUND_ENABLED_KEY))
soundToggle.checked = isSoundEnabled()
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Store the 'save to disk' setting
2022-09-07 12:35:39 +02:00
saveToDiskField.checked = isSaveToDiskEnabled()
diskPathField.disabled = !saveToDiskField.checked
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
useFaceCorrectionField.addEventListener('click', handleBoolSettingChange(USE_FACE_CORRECTION_KEY))
useFaceCorrectionField.checked = isFaceCorrectionEnabled()
useUpscalingField.checked = isUpscalingEnabled()
upscaleModelField.disabled = !useUpscalingField.checked
showOnlyFilteredImageField.addEventListener('click', handleBoolSettingChange(SHOW_ONLY_FILTERED_IMAGE_KEY))
showOnlyFilteredImageField.checked = isShowOnlyFilteredImageEnabled()
Preserve across restarts the settings for 'use cpu', 'use full precision', 'use turbo'
2022-09-03 08:13:05 +02:00
useCPUField.addEventListener('click', handleBoolSettingChange(USE_CPU_KEY))
useCPUField.checked = isUseCPUEnabled()
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Preserve across restarts the settings for 'use cpu', 'use full precision', 'use turbo'
2022-09-03 08:13:05 +02:00
useFullPrecisionField.addEventListener('click', handleBoolSettingChange(USE_FULL_PRECISION_KEY))
useFullPrecisionField.checked = isUseFullPrecisionEnabled()
turboField.addEventListener('click', handleBoolSettingChange(USE_TURBO_MODE_KEY))
turboField.checked = isUseTurboModeEnabled()
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Configurable path to save to disk
2022-09-05 13:55:25 +02:00
diskPathField.addEventListener('change', handleStringSettingChange(DISK_PATH_KEY))
Store the 'save to disk' setting
2022-09-07 12:35:39 +02:00
saveToDiskField.addEventListener('click', function(e) {
Configurable path to save to disk
2022-09-05 13:55:25 +02:00
diskPathField.disabled = !this.checked
Store the 'save to disk' setting
2022-09-07 12:35:39 +02:00
handleBoolSettingChange(SAVE_TO_DISK_KEY)(e)
Configurable path to save to disk
2022-09-05 13:55:25 +02:00
})
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
useUpscalingField.addEventListener('click', function(e) {
upscaleModelField.disabled = !this.checked
handleBoolSettingChange(USE_UPSCALING_KEY)(e)
})
Preserve the state of the advanced and modifiers panel across restarts
2022-09-07 12:59:10 +02:00
function setPanelOpen(panelHandle) {
let panelContents = panelHandle.nextElementSibling
panelHandle.classList.add('active')
panelContents.style.display = 'block'
}
if (isAdvancedPanelOpenEnabled()) {
setPanelOpen(advancedPanelHandle)
}
if (isModifiersPanelOpenEnabled()) {
setPanelOpen(modifiersPanelHandle)
}
Preserve across restarts the settings for 'use cpu', 'use full precision', 'use turbo'
2022-09-03 08:13:05 +02:00
makeImageBtn.addEventListener('click', makeImage)
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
function updateGuidanceScale() {
Allow editing the guidance scale using a textbox for finer control; Fix a bug where the image name would contain the wrong guidance scale
2022-09-14 07:16:07 +02:00
guidanceScaleField.value = guidanceScaleSlider.value / 10
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
}
Allow editing the guidance scale using a textbox for finer control; Fix a bug where the image name would contain the wrong guidance scale
2022-09-14 07:16:07 +02:00
function updateGuidanceScaleSlider() {
if (guidanceScaleField.value < 0) {
guidanceScaleField.value = 0
} else if (guidanceScaleField.value > 20) {
guidanceScaleField.value = 20
}
guidanceScaleSlider.value = guidanceScaleField.value * 10
}
guidanceScaleSlider.addEventListener('input', updateGuidanceScale)
guidanceScaleField.addEventListener('input', updateGuidanceScaleSlider)
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
updateGuidanceScale()
function updatePromptStrength() {
Make Prompt Strength editable via a text box; Restrict the max prompt strength to 0.99, since 1 caused CUDA errors for a few users; Color tweak for the stop button
2022-09-14 07:31:12 +02:00
promptStrengthField.value = promptStrengthSlider.value / 100
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
}
Make Prompt Strength editable via a text box; Restrict the max prompt strength to 0.99, since 1 caused CUDA errors for a few users; Color tweak for the stop button
2022-09-14 07:31:12 +02:00
function updatePromptStrengthSlider() {
if (promptStrengthField.value < 0) {
promptStrengthField.value = 0
} else if (promptStrengthField.value > 0.99) {
promptStrengthField.value = 0.99
}
promptStrengthSlider.value = promptStrengthField.value * 100
}
promptStrengthSlider.addEventListener('input', updatePromptStrength)
promptStrengthField.addEventListener('input', updatePromptStrengthSlider)
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
updatePromptStrength()
UI for setting the beta/main channel
2022-09-09 17:04:32 +02:00
useBetaChannelField.addEventListener('click', async function(e) {
Don't allow setting the channel while the server is still starting up
2022-09-09 18:01:34 +02:00
if (serverStatus !== 'online') {
logError('The server is still starting up..')
alert('The server is still starting up..')
e.preventDefault()
return false
}
UI for setting the beta/main channel
2022-09-09 17:04:32 +02:00
let updateBranch = (this.checked ? 'beta' : 'main')
try {
let res = await fetch('/app_config', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'update_branch': updateBranch
})
})
res = await res.json()
console.log('set config status response', res)
} catch (e) {
console.log('set config status error', e)
}
})
async function getAppConfig() {
try {
let res = await fetch('/app_config')
config = await res.json()
if (config.update_branch === 'beta') {
useBetaChannelField.checked = true
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
updateBranchLabel.innerText = "(beta)"
UI for setting the beta/main channel
2022-09-09 17:04:32 +02:00
}
console.log('get config status response', config)
} catch (e) {
console.log('get config status error', e)
}
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
function checkRandomSeed() {
if (randomSeedField.checked) {
seedField.disabled = true
Set the set to 0 if deselecting from random; Allow 10 million random images by increasing the seed size
2022-09-09 17:41:05 +02:00
seedField.value = "0"
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
} else {
seedField.disabled = false
}
}
randomSeedField.addEventListener('input', checkRandomSeed)
checkRandomSeed()
function showInitImagePreview() {
if (initImageSelector.files.length === 0) {
initImagePreviewContainer.style.display = 'none'
promptStrengthContainer.style.display = 'none'
// maskSetting.style.display = 'none'
return
}
let reader = new FileReader()
let file = initImageSelector.files[0]
reader.addEventListener('load', function() {
// console.log(file.name, reader.result)
initImagePreview.src = reader.result
initImagePreviewContainer.style.display = 'block'
promptStrengthContainer.style.display = 'block'
// maskSetting.style.display = 'block'
})
if (file) {
reader.readAsDataURL(file)
}
}
initImageSelector.addEventListener('change', showInitImagePreview)
showInitImagePreview()
initImageClearBtn.addEventListener('click', function() {
initImageSelector.value = null
// maskImageSelector.value = null
initImagePreview.src = ''
// maskImagePreview.src = ''
initImagePreviewContainer.style.display = 'none'
// maskImagePreviewContainer.style.display = 'none'
// maskSetting.style.display = 'none'
promptStrengthContainer.style.display = 'none'
})
// function showMaskImagePreview() {
// if (maskImageSelector.files.length === 0) {
// maskImagePreviewContainer.style.display = 'none'
// return
// }
// let reader = new FileReader()
// let file = maskImageSelector.files[0]
// reader.addEventListener('load', function() {
// maskImagePreview.src = reader.result
// maskImagePreviewContainer.style.display = 'block'
// })
// if (file) {
// reader.readAsDataURL(file)
// }
// }
// maskImageSelector.addEventListener('change', showMaskImagePreview)
// showMaskImagePreview()
// maskImageClearBtn.addEventListener('click', function() {
// maskImageSelector.value = null
// maskImagePreview.src = ''
// maskImagePreviewContainer.style.display = 'none'
// })
</script>
<script>
function createCollapsibles(node) {
if (!node) {
node = document
}
let collapsibles = node.querySelectorAll(".collapsible")
collapsibles.forEach(function(c) {
let handle = document.createElement('span')
handle.className = 'collapsible-handle'
Preserve the state of the advanced and modifiers panel across restarts
2022-09-07 12:59:10 +02:00
if (c.className.indexOf('active') !== -1) {
handle.innerHTML = '&#x2796;' // minus
} else {
handle.innerHTML = '&#x2795;' // plus
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
c.insertBefore(handle, c.firstChild)
c.addEventListener('click', function() {
this.classList.toggle("active")
let content = this.nextElementSibling
if (content.style.display === "block") {
content.style.display = "none"
handle.innerHTML = '&#x2795;' // plus
} else {
content.style.display = "block"
handle.innerHTML = '&#x2796;' // minus
}
Preserve the state of the advanced and modifiers panel across restarts
2022-09-07 12:59:10 +02:00
if (this == advancedPanelHandle) {
let state = (content.style.display === 'block' ? 'true' : 'false')
localStorage.setItem(ADVANCED_PANEL_OPEN_KEY, state)
} else if (this == modifiersPanelHandle) {
let state = (content.style.display === 'block' ? 'true' : 'false')
localStorage.setItem(MODIFIERS_PANEL_OPEN_KEY, state)
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
})
})
}
createCollapsibles()
function refreshTagsList() {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
editorModifierTagsList.innerHTML = '';
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
if (activeTags.length == 0) {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
editorTagsContainer.style.display = 'none';
return;
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
} else {
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
editorTagsContainer.style.display = 'block';
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
}
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
activeTags.forEach((tag, index) => {
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
tag.element.querySelector('.modifier-card-image-overlay').innerText = '-';
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
tag.element.classList.add('modifier-card-tiny');
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
editorModifierTagsList.appendChild(tag.element);
tag.element.addEventListener('click', () => {
Revert changes to refreshTagsList
2022-09-23 14:35:05 +02:00
let idx = activeTags.indexOf(tag);
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
Revert changes to refreshTagsList
2022-09-23 14:35:05 +02:00
if (idx !== -1) {
activeTags[idx].originElement.classList.remove(activeCardClass);
activeTags[idx].originElement.querySelector('.modifier-card-overlay').innerText = '+';
activeTags.splice(idx, 1);
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
refreshTagsList();
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
}
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
});
});
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let brk = document.createElement('br')
brk.style.clear = 'both'
editorModifierTagsList.appendChild(brk)
}
async function getDiskPath() {
try {
Configurable path to save to disk
2022-09-05 13:55:25 +02:00
let diskPath = getSavedDiskPath()
if (diskPath !== '') {
diskPathField.value = diskPath
return
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let res = await fetch('/output_dir')
if (res.status === 200) {
res = await res.json()
res = res[0]
Configurable path to save to disk
2022-09-05 13:55:25 +02:00
document.querySelector('#diskPath').value = res
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
}
} catch (e) {
console.log('error fetching output dir path', e)
}
}
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
function createModifierCard(name, previews) {
const modifierCard = document.createElement('div');
modifierCard.className = 'modifier-card';
modifierCard.innerHTML = `
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
<div class="modifier-card-overlay"></div>
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
<div class="modifier-card-image-container">
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
<div class="modifier-card-image-overlay">+</div>
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
<p class="modifier-card-error-label"></p>
<img onerror="this.remove()" alt="Modifier Image" class="modifier-card-image">
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
</div>
<div class="modifier-card-container">
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
<div class="modifier-card-label"><p></p></div>
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
</div>`;
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
const image = modifierCard.querySelector('.modifier-card-image');
const errorText = modifierCard.querySelector('.modifier-card-error-label');
const label = modifierCard.querySelector('.modifier-card-label');
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
Fix 'No Image' paragraph
2022-09-22 17:47:57 +02:00
errorText.innerText = 'No Image';
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
if (typeof previews == 'object') {
image.src = previews[0]; // portrait
image.setAttribute('preview-type', 'portrait');
} else {
image.remove();
}
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
const maxLabelLength = 30;
const nameWithoutBy = name.replace('by ', '');
if(nameWithoutBy.length <= maxLabelLength) {
label.querySelector('p').innerText = nameWithoutBy;
} else {
const tooltipText = document.createElement('span');
tooltipText.className = 'tooltip-text';
tooltipText.innerText = name;
label.classList.add('tooltip');
label.appendChild(tooltipText);
label.querySelector('p').innerText = nameWithoutBy.substring(0, maxLabelLength) + '...';
}
Fix 'No Image' paragraph
2022-09-22 17:47:57 +02:00
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
return modifierCard;
}
function changePreviewImages(val) {
Support for longer labels Additional changes, - Updated some modifier portraits - Updated some modifier names - Removed one useless modifier
2022-09-22 23:05:05 +02:00
const previewImages = document.querySelectorAll('.modifier-card-image-container img');
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
let previewArr = [];
modifiers.map(x => x.modifiers).forEach(x => previewArr.push(...x.map(m => m.previews)));
previewArr = previewArr.map(x => {
let obj = {};
x.forEach(preview => {
obj[preview.name] = preview.path;
});
return obj;
});
previewImages.forEach(previewImage => {
const currentPreviewType = previewImage.getAttribute('preview-type');
const relativePreviewPath = previewImage.src.split(modifierThumbnailPath + '/').pop();
const previews = previewArr.find(preview => relativePreviewPath == preview[currentPreviewType]);
if(typeof previews == 'object') {
let preview = null;
if (val == 'portrait') {
preview = previews.portrait;
}
else if (val == 'landscape') {
preview = previews.landscape;
}
if(preview != null) {
previewImage.src = `${modifierThumbnailPath}/${preview}`;
previewImage.setAttribute('preview-type', val);
}
}
});
}
Modifier Card Resizing
2022-09-23 01:36:40 +02:00
function resizeModifierCards(val) {
const cardSizePrefix = 'modifier-card-size_';
const modifierCardClass = 'modifier-card';
const modifierCards = document.querySelectorAll(`.${modifierCardClass}`);
const cardSize = n => `${cardSizePrefix}${n}`;
modifierCards.forEach(card => {
// remove existing size classes
const classes = card.className.split(' ').filter(c => !c.startsWith(cardSizePrefix));
card.className = classes.join(' ').trim();
if(val != 0)
card.classList.add(cardSize(val));
});
}
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
async function loadModifiers() {
try {
let res = await fetch('/modifiers.json')
if (res.status === 200) {
res = await res.json()
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
modifiers = res; // update global variable
res.forEach(modifierGroup => {
const title = modifierGroup.category;
const modifiers = modifierGroup.modifiers;
const titleEl = document.createElement('h5');
titleEl.className = 'collapsible';
titleEl.innerText = title;
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
const modifiersEl = document.createElement('div');
modifiersEl.classList.add('collapsible-content', 'editor-modifiers-leaf');
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
modifiers.forEach(modObj => {
const modifierName = modObj.modifier;
const modifierPreviews = modObj?.previews?.map(preview => `${modifierThumbnailPath}/${preview.path}`);
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
const modifierCard = createModifierCard(modifierName, modifierPreviews);
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
if(typeof modifierCard == 'object') {
modifiersEl.appendChild(modifierCard);
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
modifierCard.addEventListener('click', () => {
if (activeTags.map(x => x.name).includes(modifierName)) {
// remove modifier from active array
activeTags = activeTags.filter(x => x.name != modifierName);
modifierCard.classList.remove(activeCardClass);
Card overlay text improvement
2022-09-23 01:50:32 +02:00
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+';
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
} else {
// add modifier to active array
activeTags.push({
'name': modifierName,
'element': modifierCard.cloneNode(true),
'originElement': modifierCard,
'previews': modifierPreviews
});
modifierCard.classList.add(activeCardClass);
Card overlay text improvement
2022-09-23 01:50:32 +02:00
Add an overlay on top of cards Clicking the card won't paint over text anymore. Additional changes, - Refactored a part of the refreshTagsList function
2022-09-23 14:31:22 +02:00
modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-';
Modifier Thumbnail Feature Additional changes - Changed some innerHTML to innerText
2022-09-22 17:01:30 +02:00
}
refreshTagsList();
});
}
});
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
let brk = document.createElement('br')
brk.style.clear = 'both'
modifiersEl.appendChild(brk)
let e = document.createElement('div')
e.appendChild(titleEl)
e.appendChild(modifiersEl)
editorModifierEntries.appendChild(e)
})
createCollapsibles(editorModifierEntries)
}
} catch (e) {
console.log('error fetching modifiers', e)
}
}
async function init() {
await loadModifiers()
await getDiskPath()
UI for setting the beta/main channel
2022-09-09 17:04:32 +02:00
await getAppConfig()
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
healthCheck()
Revert "Revert "Revert "Revert "Merge pull request #112 from cmdr2/develop"""" This reverts commit 0dd38870e0f5380c33a26fff31cfa7aef5902aba.
2022-09-09 17:35:24 +02:00
playSound()
Keep v2 files in the repo, for the updater
2022-09-02 10:28:36 +02:00
}
init()
</script>
</html>
Reference in New Issue Copy Permalink