2022-09-02 10:28:36 +02:00
<!DOCTYPE html>
< html >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2022-09-21 14:58:43 +02:00
< link rel = "icon" type = "image/png" href = "/media/favicon-16x16.png" sizes = "16x16" >
< link rel = "icon" type = "image/png" href = "/media/favicon-32x32.png" sizes = "32x32" >
2022-09-02 10:28:36 +02:00
< 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%;
2022-09-23 13:37:54 +02:00
height: 65pt;
box-sizing: border-box;
2022-09-02 10:28:36 +02:00
}
@media screen and (max-width: 600px) {
#prompt {
width: 95%;
}
}
.image_preview_container {
2022-09-15 19:59:55 +02:00
/* display: none; */
2022-09-02 10:28:36 +02:00
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;
}
2022-09-23 13:37:54 +02:00
.settings-box ul {
2022-09-02 10:28:36 +02:00
font-size: 9pt;
margin-bottom: 5px;
padding-left: 10px;
list-style-type: none;
}
2022-09-23 13:37:54 +02:00
.settings-box li {
padding-bottom: 4pt;
2022-09-02 10:28:36 +02:00
}
2022-09-14 07:31:12 +02:00
.editor-slider {
2022-09-02 10:28:36 +02:00
transform: translateY(30%);
}
#outputMsg {
font-size: small;
}
2022-09-14 13:22:03 +02:00
#progressBar {
font-size: small;
}
2022-09-02 10:28:36 +02:00
#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 {
2022-09-23 13:37:54 +02:00
width: 90%;
2022-09-02 10:28:36 +02:00
margin-left: auto;
margin-right: auto;
}
2022-09-23 13:37:54 +02:00
@media screen and (max-width: 1800px) {
2022-09-02 10:28:36 +02:00
#container {
width: 100%;
}
}
2022-09-23 13:37:54 +02:00
#logo small {
2022-09-02 10:28:36 +02:00
font-size: 11pt;
}
#editor {
padding: 5px;
}
#editor label {
2022-09-23 13:37:54 +02:00
font-weight: normal;
}
.settings-box label small {
color: rgb(153, 153, 153);
2022-09-02 10:28:36 +02:00
}
#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);
}
2022-09-13 18:55:28 +02:00
#stopImage {
flex: 0 0 70px;
2022-09-14 07:31:12 +02:00
background: rgb(132, 8, 0);
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);
}
2022-09-02 10:28:36 +02:00
.flex-container {
display: flex;
}
.col-50 {
flex: 50%;
}
2022-09-23 13:37:54 +02:00
.col-fixed-10 {
flex: 0 0 400pt;
}
2022-09-02 10:28:36 +02:00
.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 {
2022-09-23 13:37:54 +02:00
display: inline;
2022-09-02 10:28:36 +02:00
float: right;
2022-09-23 13:37:54 +02:00
transform: translateY(-5pt);
2022-09-02 10:28:36 +02:00
}
#server-status-color {
2022-09-23 13:37:54 +02:00
/* width: 8pt;
2022-09-02 10:28:36 +02:00
height: 8pt;
2022-09-23 13:37:54 +02:00
border-radius: 4pt; */
font-size: 14pt;
color: rgb(128, 87, 0);
2022-09-02 10:28:36 +02:00
/* background-color: rgb(197, 1, 1); */
2022-09-23 13:37:54 +02:00
/* transform: translateY(15%); */
display: inline;
2022-09-02 10:28:36 +02:00
}
#server-status-msg {
color: rgb(128, 87, 0);
padding-left: 2pt;
font-size: 10pt;
}
#preview-prompt {
font-size: 16pt;
margin-bottom: 10pt;
}
2022-09-05 14:33:19 +02:00
#coffeeButton {
height: 23px;
transform: translateY(25%);
}
2022-09-23 15:24:53 +02:00
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:
2022-09-22 23:05:05 +02:00
"modifier-card-image-container"
2022-09-22 17:01:30 +02:00
"modifier-card-container";
border: 2px solid rgba(255, 255, 255, .05);
cursor: pointer;
}
2022-09-23 01:36:40 +02:00
.modifier-card-size_5 {
width: 18em;
grid-template-rows: 18em 3.5em;
height: 21.5em;
}
2022-09-23 14:31:22 +02:00
.modifier-card-size_5 .modifier-card-image-overlay {
2022-09-23 02:01:20 +02:00
font-size: 8em;
}
2022-09-23 01:36:40 +02:00
.modifier-card-size_4 {
width: 14em;
grid-template-rows: 14em 3.5em;
height: 17.5em;
}
2022-09-23 14:31:22 +02:00
.modifier-card-size_4 .modifier-card-image-overlay {
2022-09-23 02:01:20 +02:00
font-size: 7em;
}
2022-09-23 01:36:40 +02:00
.modifier-card-size_3 {
width: 11em;
grid-template-rows: 11em 3.5em;
height: 14.5em;
}
2022-09-23 14:31:22 +02:00
.modifier-card-size_3 .modifier-card-image-overlay {
2022-09-23 02:01:20 +02:00
font-size: 6em;
}
2022-09-23 01:36:40 +02:00
.modifier-card-size_2 {
width: 10em;
grid-template-rows: 10em 3.5em;
height: 13.5em;
}
2022-09-23 14:31:22 +02:00
.modifier-card-size_2 .modifier-card-image-overlay {
2022-09-23 02:01:20 +02:00
font-size: 6em;
}
2022-09-23 01:36:40 +02:00
.modifier-card-size_1 {
width: 9em;
grid-template-rows: 9em 3.5em;
height: 12.5em;
}
2022-09-23 14:31:22 +02:00
.modifier-card-size_1 .modifier-card-image-overlay {
2022-09-23 02:01:20 +02:00
font-size: 5em;
}
2022-09-23 01:36:40 +02:00
.modifier-card-size_-1 {
width: 7em;
grid-template-rows: 7em 3.5em;
height: 10.5em;
}
2022-09-23 14:31:22 +02:00
.modifier-card-size_-1 .modifier-card-image-overlay {
2022-09-23 02:01:20 +02:00
font-size: 4em;
}
2022-09-23 01:36:40 +02:00
.modifier-card-size_-2 {
width: 6em;
grid-template-rows: 6em 3.5em;
height: 9.5em;
}
2022-09-23 14:31:22 +02:00
.modifier-card-size_-2 .modifier-card-image-overlay {
2022-09-23 02:01:20 +02:00
font-size: 3em;
}
2022-09-23 01:36:40 +02:00
.modifier-card-size_-3 {
width: 5em;
grid-template-rows: 5em 3.5em;
height: 8.5em;
}
2022-09-23 14:31:22 +02:00
.modifier-card-size_-3 .modifier-card-image-overlay {
2022-09-23 02:01:20 +02:00
font-size: 3em;
}
2022-09-23 01:36:40 +02:00
.modifier-card-size_-3 p {
font-size: 0.8em;
}
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 {
2022-09-23 01:36:40 +02:00
transform: scale(1.05);
2022-09-22 17:01:30 +02:00
box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.25);
}
2022-09-22 23:05:05 +02:00
.modifier-card-image-container {
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);
2022-09-22 23:05:05 +02:00
grid-area: modifier-card-image-container;
2022-09-22 17:01:30 +02:00
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: rgb(255 255 255 / 8%);
}
2022-09-22 23:05:05 +02:00
.modifier-card-image-container img {
2022-09-22 17:01:30 +02:00
width: inherit;
height: 100%;
border-radius: 5px 5px 0 0;
}
2022-09-22 23:05:05 +02:00
.modifier-card-image-container * {
2022-09-22 17:47:57 +02:00
position: absolute;
}
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;
2022-09-22 23:05:05 +02:00
width: inherit;
}
.modifier-card-label {
2022-09-22 17:01:30 +02:00
padding: 4px;
2022-09-22 23:05:05 +02:00
word-break: break-word;
2022-09-22 17:01:30 +02:00
}
2022-09-23 14:31:22 +02:00
.modifier-card-image-overlay {
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;
}
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 {
2022-09-22 17:01:30 +02:00
opacity: 1;
}
2022-09-22 23:05:05 +02:00
.modifier-card:hover > .modifier-card-image-container img {
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%);
}
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;
}
2022-09-23 01:36:40 +02:00
#modifier-card-size-slider {
width: 6em;
margin-bottom: 0.5em;
}
2022-09-23 15:24:53 +02:00
2022-09-15 19:59:55 +02:00
#inpaintingEditor {
width: 300pt;
height: 300pt;
margin-top: 5pt;
}
.drawing-board-canvas-wrapper {
background-size: 100% 100%;
}
#inpaintingEditor canvas {
opacity: 0.6;
}
#enable_mask {
margin-top: 8pt;
}
2022-09-23 13:37:54 +02:00
#top-nav {
padding-top: 3pt;
padding-bottom: 15pt;
}
#top-nav .icon {
padding-right: 4pt;
font-size: 14pt;
transform: translateY(1pt);
}
#logo {
display: inline;
}
#logo h1 {
display: inline;
}
#top-nav-items {
list-style-type: none;
display: inline;
float: right;
}
#top-nav-items > li {
float: left;
display: inline;
padding-left: 20pt;
cursor: default;
}
#initial-text {
padding-top: 15pt;
padding-left: 4pt;
}
.settings-subheader {
font-size: 10pt;
font-weight: bold;
}
.pl-5 {
padding-left: 5pt;
}
#system-settings {
width: 360pt;
transform: translateX(-100%) translateX(70pt);
padding-top: 10pt;
padding-bottom: 10pt;
}
#system-settings ul {
margin: 0;
padding: 0;
}
#system-settings li {
padding-left: 5pt;
}
#community-links {
list-style-type: none;
margin: 0;
padding: 12pt;
padding-bottom: 0pt;
transform: translateX(-15%);
}
#community-links li {
padding-bottom: 12pt;
display: block;
font-size: 10pt;
}
#community-links li .fa-fw {
padding-right: 2pt;
}
#community-links li a {
color: white;
text-decoration: none;
}
.dropdown {
overflow: hidden;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 2;
background: rgb(18, 18, 19);
border: 2px solid rgb(37, 38, 41);
border-radius: 7px;
padding: 5px;
margin-bottom: 15px;
box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
}
.dropdown:hover .dropdown-content {
display: block;
}
2022-09-02 10:28:36 +02:00
< / style >
2022-09-23 13:37:54 +02:00
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" >
2022-09-15 19:59:55 +02:00
< link rel = "stylesheet" href = "/media/drawingboard.min.css" >
< script src = "/media/jquery-3.6.1.min.js" > < / script >
< script src = "/media/drawingboard.min.js" > < / script >
2022-09-02 10:28:36 +02:00
< / html >
< body >
< div id = "container" >
2022-09-23 13:37:54 +02:00
< div id = "top-nav" >
< div id = "logo" >
< h1 > Stable Diffusion UI < small > v2.16 < span id = "updateBranchLabel" > < / span > < / small > < / h1 >
< / div >
< ul id = "top-nav-items" >
< li class = "dropdown" >
< span > < i class = "fa fa-comments icon" > < / i > Help & Community< / span >
< ul id = "community-links" class = "dropdown-content" >
< li > < a href = "https://github.com/cmdr2/stable-diffusion-ui/blob/main/Troubleshooting.md" target = "_blank" > < i class = "fa-solid fa-circle-question fa-fw" > < / i > Usual problems and solutions< / a > < / li >
< li > < a href = "https://discord.com/invite/u9yhsFmEkB" target = "_blank" > < i class = "fa-brands fa-discord fa-fw" > < / i > Discord user community< / a > < / li >
< li > < a href = "https://github.com/cmdr2/stable-diffusion-ui" target = "_blank" > < i class = "fa-brands fa-github fa-fw" > < / i > Source code on GitHub< / a > < / li >
< / ul >
< / li >
< li class = "dropdown" >
< span > < i class = "fa fa-gear icon" > < / i > Settings< / span >
< div id = "system-settings" class = "panel-box settings-box dropdown-content" >
< ul id = "system-settings-entries" >
< li > < b class = "settings-subheader" > System Settings< / b > < / li >
< br / >
< 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 >
< 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 < small > (generates images faster, but uses an additional 1 GB of GPU memory)< / small > < / label > < / li >
< li > < input id = "use_cpu" name = "use_cpu" type = "checkbox" > < label for = "use_cpu" > Use CPU instead of GPU < small > (warning: this will be *very* slow)< / small > < / label > < / li >
< li > < input id = "use_full_precision" name = "use_full_precision" type = "checkbox" > < label for = "use_full_precision" > Use full precision < small > (for GPU-only. warning: this will consume more VRAM)< / small > < / label > < / li >
<!-- <li><input id="allow_nsfw" name="allow_nsfw" type="checkbox"> <label for="allow_nsfw">Allow NSFW Content (You confirm you are above 18 years of age)</label></li> -->
< br / >
< li > < input id = "use_beta_channel" name = "use_beta_channel" type = "checkbox" > < label for = "use_beta_channel" > 🔥Beta channel. Get the latest features immediately (but could be less stable). Please restart the program after changing this.< / label > < / li >
< / ul >
2022-09-02 10:28:36 +02:00
< / div >
2022-09-23 13:37:54 +02:00
< / li >
< / ul >
< / div >
< div class = "flex-container" >
< div id = "editor" class = "col-fixed-10" >
< div id = "server-status" >
< div id = "server-status-color" > ●< / div >
< span id = "server-status-msg" > Stable Diffusion is starting..< / span >
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" >
2022-09-15 14:24:03 +02:00
< label for = "init_image" > < b > Initial Image:< / b > (optional) < / label > < input id = "init_image" name = "init_image" type = "file" / > < br / >
2022-09-15 19:59:55 +02:00
2022-09-02 10:28:36 +02:00
< div id = "init_image_preview_container" class = "image_preview_container" >
< img id = "init_image_preview" src = "" width = "100" height = "100" / >
2022-09-15 19:59:55 +02:00
< button class = "init_image_clear image_clear_btn" > X< / button >
2022-09-02 10:28:36 +02:00
2022-09-15 19:59:55 +02:00
< br / >
< input id = "enable_mask" name = "enable_mask" type = "checkbox" > < label for = "enable_mask" > In-Painting (select the area which the AI will paint into)< / label >
< div id = "inpaintingEditor" > < / div >
2022-09-02 10:28:36 +02:00
< / div >
< / div >
< div id = "editor-inputs-tags-container" class = "row" >
< label > Tags: < small > (click a tag to remove it)< / small > < / label >
2022-09-22 17:01:30 +02:00
< div id = "editor-inputs-tags-list" > < / div >
2022-09-02 10:28:36 +02:00
< / div >
< button id = "makeImage" > Make Image< / button >
2022-09-13 18:55:28 +02:00
< button id = "stopImage" > Stop< / button >
2022-09-02 10:28:36 +02:00
< / div >
< div class = "line-separator" > < / div >
2022-09-23 13:37:54 +02:00
< div id = "editor-settings" class = "panel-box settings-box" >
< h4 class = "collapsible" > Image Settings< / h4 >
2022-09-02 10:28:36 +02:00
< ul id = "editor-settings-entries" class = "collapsible-content" >
2022-09-23 13:37:54 +02:00
< li > < b class = "settings-subheader" > Image Settings< / b > < / li >
< li class = "pl-5" > < label for = "seed" > Seed:< / label > < input id = "seed" name = "seed" size = "10" value = "30000" > < input id = "random_seed" name = "random_seed" type = "checkbox" checked > < label for = "random_seed" > Random Image< / label > < / li >
< li class = "pl-5" > < label for = "num_outputs_total" > Number of images to make:< / label > < input id = "num_outputs_total" name = "num_outputs_total" value = "1" size = "1" > < label for = "num_outputs_parallel" > Generate in parallel:< / label > < input id = "num_outputs_parallel" name = "num_outputs_parallel" value = "1" size = "1" > (images at once)< / li >
< li id = "samplerSelection" class = "pl-5" > < label for = "sampler" > Sampler:< / label >
2022-09-22 20:49:05 +02:00
< select id = "sampler" name = "sampler" >
< option value = "plms" selected > plms< / option >
< option value = "ddim" > ddim< / option >
< option value = "heun" > heun< / option >
< option value = "euler" > euler< / option >
< option value = "euler_a" > euler_a< / option >
< option value = "dpm2" > dpm2< / option >
< option value = "dpm2_a" > dpm2_a< / option >
< option value = "lms" > lms< / option >
2022-09-09 17:35:24 +02:00
< / select >
< / li >
2022-09-23 13:37:54 +02:00
< li class = "pl-5" > < label > Image Size: < / label >
2022-09-03 17:52:56 +02:00
< 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 >
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 >
2022-09-23 13:37:54 +02:00
< / select > < label for = "width" > < small > (width)< / small > < / label >
2022-09-03 17:52:56 +02:00
< 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 >
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 >
2022-09-03 17:52:56 +02:00
< / select >
2022-09-23 13:37:54 +02:00
< label for = "height" > < small > (height)< / small > < / label >
2022-09-03 17:52:56 +02:00
< / li >
2022-09-23 13:37:54 +02:00
< 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 = "50" > < / li >
2022-09-23 13:49:11 +02:00
< 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 >
2022-09-23 13:37:54 +02:00
< 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 >
2022-09-09 17:04:32 +02:00
< br / >
2022-09-23 13:37:54 +02:00
< 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 > (consumes more VRAM, slightly slower image generation)< / small > < / label > < / li >
< li class = "pl-5" > < input id = "use_face_correction" name = "use_face_correction" type = "checkbox" checked > < label for = "use_face_correction" > Fix incorrect faces and eyes < small > (uses GFPGAN)< / small > < / label > < / li >
< li class = "pl-5" >
< input id = "use_upscale" name = "use_upscale" type = "checkbox" > < label for = "use_upscale" > Upscale 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 >
2022-09-03 17:52:56 +02:00
< / li >
2022-09-23 13:37:54 +02:00
< li class = "pl-5" > < 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 >
2022-09-09 17:04:32 +02:00
< br / >
2022-09-23 13:37:54 +02:00
< li > < small > The system-related settings have been moved to the top-right corner.< / small > < / li >
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" >
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 >
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 >
2022-09-02 10:28:36 +02:00
< / div >
< / div >
< / div >
2022-09-23 13:37:54 +02:00
< div id = "preview" class = "col-free" >
< div id = "preview-prompt" >
< div id = "initial-text" >
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 >
< / div >
2022-09-02 10:28:36 +02:00
< div id = "outputMsg" > < / div >
2022-09-14 13:22:03 +02:00
< div id = "progressBar" > < / div >
2022-09-02 10:28:36 +02:00
< div id = "current-images" class = "img-preview" >
< / div >
< / div >
< / div >
< div class = "line-separator" > < / div >
< div id = "footer" class = "panel-box" >
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 >
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"
2022-09-07 12:35:39 +02:00
const SAVE_TO_DISK_KEY = "saveToDisk"
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"
2022-09-05 13:55:25 +02:00
const DISK_PATH_KEY = "diskPath"
2022-09-07 12:59:10 +02:00
const ADVANCED_PANEL_OPEN_KEY = "advancedPanelOpen"
const MODIFIERS_PANEL_OPEN_KEY = "modifiersPanelOpen"
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"
2022-09-14 18:59:42 +02:00
const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress"
2022-09-02 10:28:36 +02:00
const HEALTH_PING_INTERVAL = 5 // seconds
2022-09-05 09:52:34 +02:00
const MAX_INIT_IMAGE_DIMENSION = 768
2022-09-02 10:28:36 +02:00
2022-09-05 09:40:19 +02:00
const IMAGE_REGEX = new RegExp('data:image/[A-Za-z]+;base64')
2022-09-14 18:59:42 +02:00
let sessionId = new Date().getTime()
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')
2022-09-14 07:16:07 +02:00
let guidanceScaleSlider = document.querySelector('#guidance_scale_slider')
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")
2022-09-15 14:24:03 +02:00
let maskImageSelector = document.querySelector("#mask")
let maskImagePreview = document.querySelector("#mask_preview")
2022-09-02 10:28:36 +02:00
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')
2022-09-05 13:55:25 +02:00
let diskPathField = document.querySelector('#diskPath')
2022-09-02 10:28:36 +02:00
// let allowNSFWField = document.querySelector("#allow_nsfw")
2022-09-09 17:04:32 +02:00
let useBetaChannelField = document.querySelector("#use_beta_channel")
2022-09-14 07:31:12 +02:00
let promptStrengthSlider = document.querySelector('#prompt_strength_slider')
2022-09-02 10:28:36 +02:00
let promptStrengthField = document.querySelector('#prompt_strength')
2022-09-22 20:49:05 +02:00
let samplerField = document.querySelector('#sampler')
let samplerSelectionContainer = document.querySelector("#samplerSelection")
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")
2022-09-10 11:38:07 +02:00
let updateBranchLabel = document.querySelector("#updateBranchLabel")
2022-09-14 18:59:42 +02:00
let streamImageProgressField = document.querySelector("#stream_image_progress")
2022-09-02 10:28:36 +02:00
let makeImageBtn = document.querySelector('#makeImage')
2022-09-13 18:55:28 +02:00
let stopImageBtn = document.querySelector('#stopImage')
2022-09-02 10:28:36 +02:00
let imagesContainer = document.querySelector('#current-images')
let initImagePreviewContainer = document.querySelector('#init_image_preview_container')
2022-09-15 19:59:55 +02:00
let initImageClearBtn = document.querySelector('.init_image_clear')
2022-09-02 10:28:36 +02:00
let promptStrengthContainer = document.querySelector('#prompt_strength_container')
2022-09-15 19:59:55 +02:00
// let maskSetting = document.querySelector('#editor-inputs-mask_setting')
2022-09-02 10:28:36 +02:00
// let maskImagePreviewContainer = document.querySelector('#mask_preview_container')
// let maskImageClearBtn = document.querySelector('#mask_clear')
2022-09-15 19:59:55 +02:00
let maskSetting = document.querySelector('#enable_mask')
2022-09-02 10:28:36 +02:00
let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
2022-09-22 17:01:30 +02:00
let previewImageField = document.querySelector('#preview-image')
previewImageField.onchange = () => changePreviewImages(previewImageField.value);
2022-09-23 01:36:40 +02:00
let modifierCardSizeSlider = document.querySelector('#modifier-card-size-slider')
modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value);
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')
2022-09-14 13:22:03 +02:00
let progressBar = document.querySelector("#progressBar")
2022-09-02 10:28:36 +02:00
let soundToggle = document.querySelector('#sound_toggle')
let serverStatusColor = document.querySelector('#server-status-color')
let serverStatusMsg = document.querySelector('#server-status-msg')
2022-09-07 12:59:10 +02:00
let advancedPanelHandle = document.querySelector("#editor-settings .collapsible")
let modifiersPanelHandle = document.querySelector("#editor-modifiers .collapsible")
2022-09-15 19:59:55 +02:00
let inpaintingEditorContainer = document.querySelector('#inpaintingEditor')
let inpaintingEditor = new DrawingBoard.Board('inpaintingEditor', {
color: "#ffffff",
background: false,
size: 30,
webStorage: false,
controls: [{'DrawingMode': {'filler': false}}, 'Size', 'Navigation']
})
let inpaintingEditorCanvasBackground = document.querySelector('.drawing-board-canvas-wrapper')
// let inpaintingEditorControls = document.querySelector('.drawing-board-controls')
// let inpaintingEditorMetaControl = document.createElement('div')
// inpaintingEditorMetaControl.className = 'drawing-board-control'
// let initImageClearBtnToolbar = document.createElement('button')
// initImageClearBtnToolbar.className = 'init_image_clear'
// initImageClearBtnToolbar.innerHTML = 'Remove Image'
// inpaintingEditorMetaControl.appendChild(initImageClearBtnToolbar)
// inpaintingEditorControls.appendChild(inpaintingEditorMetaControl)
let maskResetButton = document.querySelector('.drawing-board-control-navigation-reset')
maskResetButton.innerHTML = 'Clear'
maskResetButton.style.fontWeight = 'normal'
maskResetButton.style.fontSize = '10pt'
2022-09-07 12:59:10 +02:00
2022-09-02 10:28:36 +02:00
let serverStatus = 'offline'
let activeTags = []
2022-09-22 17:01:30 +02:00
let modifiers = []
2022-09-03 20:58:38 +02:00
let lastPromptUsed = ''
2022-09-13 19:25:45 +02:00
let taskStopped = true
2022-09-14 13:22:03 +02:00
let batchesDone = 0
2022-09-02 10:28:36 +02:00
2022-09-22 17:01:30 +02:00
const modifierThumbnailPath = 'static/modifier-thumbnails';
const activeCardClass = 'modifier-card-active';
2022-09-03 08:13:05 +02:00
function getLocalStorageItem(key, fallback) {
let item = localStorage.getItem(key)
if (item === null) {
return fallback
2022-09-02 10:28:36 +02:00
}
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())
}
}
2022-09-05 13:55:25 +02:00
function handleStringSettingChange(key) {
return function(e) {
localStorage.setItem(key, e.target.value.toString())
}
}
2022-09-03 08:13:05 +02:00
function isSoundEnabled() {
return getLocalStorageBoolItem(SOUND_ENABLED_KEY, true)
}
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() {
2022-09-09 17:36:51 +02:00
return getLocalStorageBoolItem(SHOW_ONLY_FILTERED_IMAGE_KEY, true)
2022-09-09 17:35:24 +02:00
}
2022-09-07 12:35:39 +02:00
function isSaveToDiskEnabled() {
return getLocalStorageBoolItem(SAVE_TO_DISK_KEY, false)
}
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)
2022-09-02 10:28:36 +02:00
}
2022-09-05 13:55:25 +02:00
function getSavedDiskPath() {
return getLocalStorageItem(DISK_PATH_KEY, '')
}
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)
}
2022-09-14 18:59:42 +02:00
function isStreamImageProgressEnabled() {
2022-09-14 19:18:36 +02:00
return getLocalStorageBoolItem(STREAM_IMAGE_PROGRESS_KEY, false)
2022-09-14 18:59:42 +02:00
}
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 > '
2022-09-23 13:37:54 +02:00
serverStatusColor.style.color = 'red'
2022-09-02 10:28:36 +02:00
serverStatusMsg.style.color = 'red'
2022-09-22 17:01:30 +02:00
serverStatusMsg.innerText = 'Stable Diffusion has stopped'
2022-09-02 10:28:36 +02:00
} else if (msgType == 'success') {
// msg = '< span style = "color: green" > ' + msg + '< span > '
2022-09-23 13:37:54 +02:00
serverStatusColor.style.color = 'green'
2022-09-02 10:28:36 +02:00
serverStatusMsg.style.color = 'green'
2022-09-22 17:01:30 +02:00
serverStatusMsg.innerText = 'Stable Diffusion is ready'
2022-09-02 10:28:36 +02:00
serverStatus = 'online'
}
}
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 {
2022-09-22 17:01:30 +02:00
outputMsg.innerText = msg
2022-09-05 09:40:19 +02:00
}
console.log(level, msg)
}
2022-09-02 10:28:36 +02:00
function logError(msg, res) {
2022-09-05 09:40:19 +02:00
logMsg(msg, 'error')
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')
}
}
2022-09-14 18:59:42 +02:00
function makeImageElement(width, height) {
let imgItem = document.createElement('div')
imgItem.className = 'imgItem'
let img = document.createElement('img')
img.width = parseInt(width)
img.height = parseInt(height)
imgItem.appendChild(img)
imagesContainer.appendChild(imgItem)
return imgItem
}
2022-09-02 10:28:36 +02:00
// makes a single image. don't call this directly, use makeImage() instead
2022-09-14 13:22:03 +02:00
async function doMakeImage(reqBody, batchCount) {
2022-09-13 19:25:45 +02:00
if (taskStopped) {
return
}
2022-09-02 10:28:36 +02:00
let res = ''
let seed = reqBody['seed']
2022-09-14 18:59:42 +02:00
let numOutputs = parseInt(reqBody['num_outputs'])
let images = []
2022-09-21 12:56:13 +02:00
function makeImageContainers(numImages) {
for (let i = images.length; i < numImages ; i + + ) {
images.push(makeImageElement(reqBody.width, reqBody.height))
2022-09-14 18:59:42 +02:00
}
}
2022-09-02 10:28:36 +02:00
try {
res = await fetch('/image', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(reqBody)
})
2022-09-14 13:22:03 +02:00
let reader = res.body.getReader()
let textDecoder = new TextDecoder()
let finalJSON = ''
2022-09-14 14:18:26 +02:00
let prevTime = -1
2022-09-14 13:22:03 +02:00
while (true) {
try {
2022-09-14 14:18:26 +02:00
let t = new Date().getTime()
2022-09-14 13:22:03 +02:00
const {value, done} = await reader.read()
if (done) {
break
}
2022-09-14 14:18:26 +02:00
let timeTaken = (prevTime === -1 ? -1 : t - prevTime)
2022-09-14 13:22:03 +02:00
let jsonStr = textDecoder.decode(value)
try {
let stepUpdate = JSON.parse(jsonStr)
2022-09-14 13:51:00 +02:00
if (stepUpdate.step === undefined) {
finalJSON += jsonStr
} else {
2022-09-23 10:08:33 +02:00
let batchSize = stepUpdate.total_steps
2022-09-14 13:22:03 +02:00
let overallStepCount = stepUpdate.step + batchesDone * batchSize
let totalSteps = batchCount * batchSize
let percent = 100 * (overallStepCount / totalSteps)
2022-09-21 11:44:22 +02:00
percent = (percent > 100 ? 100 : percent)
2022-09-14 13:22:03 +02:00
percent = percent.toFixed(0)
2022-09-14 14:18:26 +02:00
stepsRemaining = totalSteps - overallStepCount
2022-09-21 11:44:22 +02:00
stepsRemaining = (stepsRemaining < 0 ? 0 : stepsRemaining )
2022-09-14 14:18:26 +02:00
timeRemaining = (timeTaken === -1 ? '' : stepsRemaining * timeTaken) // ms
2022-09-14 13:22:03 +02:00
outputMsg.innerHTML = `Batch ${batchesDone+1} of ${batchCount}`
2022-09-14 13:45:05 +02:00
progressBar.innerHTML = `Generating image(s): ${percent}%`
2022-09-14 14:18:26 +02:00
if (timeTaken !== -1) {
progressBar.innerHTML += `< br > Time remaining (approx): ${millisecondsToStr(timeRemaining)}`
}
2022-09-14 13:22:03 +02:00
progressBar.style.display = 'block'
2022-09-14 18:59:42 +02:00
if (stepUpdate.output !== undefined) {
2022-09-21 12:56:13 +02:00
makeImageContainers(numOutputs)
2022-09-14 18:59:42 +02:00
for (idx in stepUpdate.output) {
let imgItem = images[idx]
let img = imgItem.firstChild
let tmpImageData = stepUpdate.output[idx]
img.src = tmpImageData['path'] + '?t=' + new Date().getTime()
}
}
2022-09-14 13:22:03 +02:00
}
} catch (e) {
finalJSON += jsonStr
}
2022-09-14 14:18:26 +02:00
prevTime = t
2022-09-14 13:22:03 +02:00
} catch (e) {
2022-09-22 12:17:38 +02:00
logError('Stable Diffusion had an error. Please check the logs in the command-line window.', res)
2022-09-14 13:22:03 +02:00
res = undefined
throw e
}
}
2022-09-02 10:28:36 +02:00
if (res.status != 200) {
if (serverStatus === 'online') {
2022-09-22 12:17:38 +02:00
logError('Stable Diffusion had an error: ' + await res.text(), res)
2022-09-02 10:28:36 +02:00
} else {
2022-09-22 12:17:38 +02:00
logError("Stable Diffusion is still starting up, please wait. If this goes on beyond a few minutes, Stable Diffusion has probably crashed. Please check the error message in the command-line window.", res)
2022-09-02 10:28:36 +02:00
}
res = undefined
2022-09-14 13:22:03 +02:00
progressBar.style.display = 'none'
2022-09-02 10:28:36 +02:00
} else {
2022-09-14 13:22:03 +02:00
res = JSON.parse(finalJSON)
progressBar.style.display = 'none'
2022-09-02 10:28:36 +02:00
if (res.status !== 'succeeded') {
let msg = ''
if (res.detail !== undefined) {
msg = res.detail
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 / > `
}
2022-09-02 10:28:36 +02:00
} else {
msg = res
}
logError(msg, res)
res = undefined
}
}
} catch (e) {
console.log('request error', e)
2022-09-22 12:17:38 +02:00
logError('Stable Diffusion had an error. Please check the logs in the command-line window. < br / > < br / > ' + e + '< br / > < pre > ' + e.stack + '< / pre > ', res)
2022-09-02 10:28:36 +02:00
setStatus('request', 'error', 'error')
2022-09-14 13:22:03 +02:00
progressBar.style.display = 'none'
2022-09-22 12:17:38 +02:00
res = undefined
2022-09-02 10:28:36 +02:00
}
if (!res) {
return false
}
2022-09-03 20:58:38 +02:00
lastPromptUsed = reqBody['prompt']
2022-09-21 14:11:42 +02:00
makeImageContainers(res.output.length)
2022-09-14 18:59:42 +02:00
2022-09-02 10:28:36 +02:00
for (let idx in res.output) {
let imgBody = ''
2022-09-12 19:45:41 +02:00
let seed = 0
2022-09-02 10:28:36 +02:00
try {
let imgData = res.output[idx]
imgBody = imgData.data
2022-09-12 19:45:41 +02:00
seed = imgData.seed
2022-09-02 10:28:36 +02:00
} catch (e) {
console.log(imgBody)
setStatus('request', 'invalid image', 'error')
continue
}
2022-09-14 18:59:42 +02:00
let imgItem = images[idx]
let img = imgItem.firstChild
2022-09-02 10:28:36 +02:00
img.src = imgBody
let imgItemInfo = document.createElement('span')
imgItemInfo.className = 'imgItemInfo'
let imgSeedLabel = document.createElement('span')
imgSeedLabel.className = 'imgSeedLabel'
2022-09-22 17:01:30 +02:00
imgSeedLabel.innerText = 'Seed: ' + seed
2022-09-02 10:28:36 +02:00
let imgUseBtn = document.createElement('button')
imgUseBtn.className = 'imgUseBtn'
2022-09-22 17:01:30 +02:00
imgUseBtn.innerText = 'Use as Input'
2022-09-02 10:28:36 +02:00
let imgSaveBtn = document.createElement('button')
imgSaveBtn.className = 'imgSaveBtn'
2022-09-22 17:01:30 +02:00
imgSaveBtn.innerText = 'Download'
2022-09-02 10:28:36 +02:00
imgItem.appendChild(imgItemInfo)
imgItemInfo.appendChild(imgSeedLabel)
imgItemInfo.appendChild(imgUseBtn)
imgItemInfo.appendChild(imgSaveBtn)
imgUseBtn.addEventListener('click', function() {
initImageSelector.value = null
initImagePreview.src = imgBody
initImagePreviewContainer.style.display = 'block'
2022-09-15 19:59:55 +02:00
inpaintingEditorContainer.style.display = 'none'
2022-09-02 10:28:36 +02:00
promptStrengthContainer.style.display = 'block'
2022-09-15 19:59:55 +02:00
maskSetting.checked = false
2022-09-02 10:28:36 +02:00
// maskSetting.style.display = 'block'
randomSeedField.checked = false
seedField.value = seed
seedField.disabled = false
})
imgSaveBtn.addEventListener('click', function() {
let imgDownload = document.createElement('a')
2022-09-03 17:06:34 +02:00
imgDownload.download = createFileName();
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
}
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}
}
2022-09-02 10:28:36 +02:00
async function makeImage() {
if (serverStatus !== 'online') {
logError('The server is still starting up..')
return
}
2022-09-05 09:40:19 +02:00
let validation = validateInput()
if (validation['isValid']) {
2022-09-14 13:22:03 +02:00
outputMsg.innerHTML = 'Starting..'
2022-09-05 09:40:19 +02:00
} else {
if (validation['error']) {
logError(validation['error'])
return
} else if (validation['warning']) {
logMsg(validation['warning'], 'warn')
}
}
2022-09-02 10:28:36 +02:00
setStatus('request', 'fetching..')
makeImageBtn.innerHTML = 'Processing..'
2022-09-15 07:29:48 +02:00
makeImageBtn.disabled = true
2022-09-13 18:55:28 +02:00
makeImageBtn.style.display = 'none'
stopImageBtn.style.display = 'block'
2022-09-02 10:28:36 +02:00
2022-09-13 19:25:45 +02:00
taskStopped = false
2022-09-14 13:22:03 +02:00
batchesDone = 0
2022-09-13 19:25:45 +02:00
2022-09-09 17:41:05 +02:00
let seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000000) : parseInt(seedField.value))
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
2022-09-14 18:59:42 +02:00
let streamImageProgress = (numOutputsTotal > 50 ? false : streamImageProgressField.checked)
2022-09-02 10:28:36 +02:00
let prompt = promptField.value
if (activeTags.length > 0) {
2022-09-22 17:01:30 +02:00
let promptTags = activeTags.map(x => x.name).join(", ");
prompt += ", " + promptTags;
2022-09-02 10:28:36 +02:00
}
2022-09-22 17:01:30 +02:00
previewPrompt.innerText = prompt
2022-09-02 10:28:36 +02:00
let reqBody = {
2022-09-14 18:59:42 +02:00
session_id: sessionId,
2022-09-02 10:28:36 +02:00
prompt: prompt,
num_outputs: batchSize,
num_inference_steps: numInferenceStepsField.value,
2022-09-14 07:16:07 +02:00
guidance_scale: guidanceScaleField.value,
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,
2022-09-14 13:22:03 +02:00
use_full_precision: useFullPrecisionField.checked,
2022-09-14 18:59:42 +02:00
stream_progress_updates: true,
2022-09-21 14:11:42 +02:00
stream_image_progress: streamImageProgress,
show_only_filtered_image: showOnlyFilteredImageField.checked
2022-09-02 10:28:36 +02:00
}
2022-09-05 09:40:19 +02:00
if (IMAGE_REGEX.test(initImagePreview.src)) {
2022-09-02 10:28:36 +02:00
reqBody['init_image'] = initImagePreview.src
2022-09-14 07:31:12 +02:00
reqBody['prompt_strength'] = promptStrengthField.value
2022-09-02 10:28:36 +02:00
2022-09-05 09:40:19 +02:00
// if (IMAGE_REGEX.test(maskImagePreview.src)) {
2022-09-02 10:28:36 +02:00
// reqBody['mask'] = maskImagePreview.src
// }
2022-09-15 19:59:55 +02:00
if (maskSetting.checked) {
reqBody['mask'] = inpaintingEditor.getImg()
2022-09-15 14:24:03 +02:00
}
2022-09-22 20:49:05 +02:00
reqBody['sampler'] = 'ddim'
} else {
reqBody['sampler'] = samplerField.value
2022-09-02 10:28:36 +02:00
}
2022-09-05 13:55:25 +02:00
if (saveToDiskField.checked & & diskPathField.value.trim() !== '') {
reqBody['save_to_disk_path'] = diskPathField.value.trim()
}
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
}
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 + + ) {
2022-09-09 17:31:15 +02:00
reqBody['seed'] = seed + (i * batchSize)
2022-09-02 10:28:36 +02:00
2022-09-14 13:22:03 +02:00
let success = await doMakeImage(reqBody, batchCount)
batchesDone++
2022-09-02 10:28:36 +02:00
if (success) {
2022-09-22 17:01:30 +02:00
outputMsg.innerText = 'Processed batch ' + (i+1) + '/' + batchCount
2022-09-02 10:28:36 +02:00
successCount++
}
}
2022-09-22 17:01:30 +02:00
makeImageBtn.innerText = 'Make Image'
2022-09-02 10:28:36 +02:00
makeImageBtn.disabled = false
2022-09-13 19:27:32 +02:00
makeImageBtn.style.display = 'block'
stopImageBtn.style.display = 'none'
2022-09-02 10:28:36 +02:00
if (isSoundEnabled()) {
playSound()
}
time = new Date().getTime() - time
time /= 1000
if (successCount === batchCount) {
2022-09-22 17:01:30 +02:00
outputMsg.innerText = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
2022-09-02 10:28:36 +02:00
setStatus('request', 'done', 'success')
}
if (randomSeedField.checked) {
seedField.value = seed
}
}
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
2022-09-09 17:35:24 +02:00
let underscoreName = lastPromptUsed.replace(/[^a-zA-Z0-9]/g, '_')
underscoreName = underscoreName.substring(0, 100)
2022-09-14 07:16:07 +02:00
const seed = seedField.value
const steps = numInferenceStepsField.value
const guidance = guidanceScaleField.value
2022-09-03 17:06:34 +02:00
// name and the top level metadata
2022-09-09 17:35:24 +02:00
let fileName = `${underscoreName}_Seed-${seed}_Steps-${steps}_Guidance-${guidance}`
2022-09-03 17:06:34 +02:00
// add the tags
2022-09-03 20:58:38 +02:00
// let tags = [];
// let tagString = '';
// document.querySelectorAll(modifyTagsSelector).forEach(function(tag) {
// tags.push(tag.innerHTML);
// })
2022-09-03 17:06:34 +02:00
// join the tags with a pipe
2022-09-03 20:58:38 +02:00
// if (activeTags.length > 0) {
// tagString = '_Tags-';
// tagString += tags.join('|');
// }
2022-09-03 17:06:34 +02:00
2022-09-03 20:58:38 +02:00
// // append empty or populated tags
// fileName += `${tagString}`;
2022-09-03 17:06:34 +02:00
// add the file extension
2022-09-09 17:35:24 +02:00
fileName += `.png`
2022-09-03 17:06:34 +02:00
2022-09-09 17:35:24 +02:00
return fileName
2022-09-02 10:28:36 +02:00
}
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'
2022-09-13 19:25:45 +02:00
taskStopped = true
2022-09-13 18:55:28 +02:00
})
2022-09-03 17:06:34 +02:00
2022-09-03 08:13:05 +02:00
soundToggle.addEventListener('click', handleBoolSettingChange(SOUND_ENABLED_KEY))
soundToggle.checked = isSoundEnabled()
2022-09-02 10:28:36 +02:00
2022-09-07 12:35:39 +02:00
saveToDiskField.checked = isSaveToDiskEnabled()
diskPathField.disabled = !saveToDiskField.checked
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()
2022-09-03 08:13:05 +02:00
useCPUField.addEventListener('click', handleBoolSettingChange(USE_CPU_KEY))
useCPUField.checked = isUseCPUEnabled()
2022-09-02 10:28:36 +02:00
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()
2022-09-02 10:28:36 +02:00
2022-09-14 18:59:42 +02:00
streamImageProgressField.addEventListener('click', handleBoolSettingChange(STREAM_IMAGE_PROGRESS_KEY))
streamImageProgressField.checked = isStreamImageProgressEnabled()
2022-09-05 13:55:25 +02:00
diskPathField.addEventListener('change', handleStringSettingChange(DISK_PATH_KEY))
2022-09-07 12:35:39 +02:00
saveToDiskField.addEventListener('click', function(e) {
2022-09-05 13:55:25 +02:00
diskPathField.disabled = !this.checked
2022-09-07 12:35:39 +02:00
handleBoolSettingChange(SAVE_TO_DISK_KEY)(e)
2022-09-05 13:55:25 +02:00
})
2022-09-09 17:35:24 +02:00
useUpscalingField.addEventListener('click', function(e) {
upscaleModelField.disabled = !this.checked
handleBoolSettingChange(USE_UPSCALING_KEY)(e)
})
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)
}
2022-09-03 08:13:05 +02:00
makeImageBtn.addEventListener('click', makeImage)
2022-09-02 10:28:36 +02:00
function updateGuidanceScale() {
2022-09-14 07:16:07 +02:00
guidanceScaleField.value = guidanceScaleSlider.value / 10
2022-09-02 10:28:36 +02:00
}
2022-09-14 07:16:07 +02:00
function updateGuidanceScaleSlider() {
if (guidanceScaleField.value < 0 ) {
guidanceScaleField.value = 0
2022-09-23 13:49:11 +02:00
} else if (guidanceScaleField.value > 50) {
guidanceScaleField.value = 50
2022-09-14 07:16:07 +02:00
}
guidanceScaleSlider.value = guidanceScaleField.value * 10
}
guidanceScaleSlider.addEventListener('input', updateGuidanceScale)
guidanceScaleField.addEventListener('input', updateGuidanceScaleSlider)
2022-09-02 10:28:36 +02:00
updateGuidanceScale()
function updatePromptStrength() {
2022-09-14 07:31:12 +02:00
promptStrengthField.value = promptStrengthSlider.value / 100
2022-09-02 10:28:36 +02:00
}
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)
2022-09-02 10:28:36 +02:00
updatePromptStrength()
2022-09-09 17:04:32 +02:00
useBetaChannelField.addEventListener('click', async function(e) {
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
}
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
2022-09-22 17:01:30 +02:00
updateBranchLabel.innerText = "(beta)"
2022-09-09 17:04:32 +02:00
}
console.log('get config status response', config)
} catch (e) {
console.log('get config status error', e)
}
}
2022-09-02 10:28:36 +02:00
function checkRandomSeed() {
if (randomSeedField.checked) {
seedField.disabled = true
2022-09-09 17:41:05 +02:00
seedField.value = "0"
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'
2022-09-15 19:59:55 +02:00
// inpaintingEditorContainer.style.display = 'none'
2022-09-02 10:28:36 +02:00
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'
2022-09-15 19:59:55 +02:00
inpaintingEditorContainer.style.display = 'none'
2022-09-02 10:28:36 +02:00
promptStrengthContainer.style.display = 'block'
2022-09-22 20:49:05 +02:00
samplerSelectionContainer.style.display = 'none'
2022-09-15 19:59:55 +02:00
// maskSetting.checked = false
2022-09-02 10:28:36 +02:00
})
if (file) {
reader.readAsDataURL(file)
}
}
initImageSelector.addEventListener('change', showInitImagePreview)
showInitImagePreview()
2022-09-15 19:59:55 +02:00
initImagePreview.addEventListener('load', function() {
inpaintingEditorCanvasBackground.style.backgroundImage = "url('" + this.src + "')"
// maskSetting.style.display = 'block'
// inpaintingEditorContainer.style.display = 'block'
})
2022-09-02 10:28:36 +02:00
initImageClearBtn.addEventListener('click', function() {
initImageSelector.value = null
// maskImageSelector.value = null
initImagePreview.src = ''
// maskImagePreview.src = ''
2022-09-15 19:59:55 +02:00
maskSetting.checked = false
2022-09-02 10:28:36 +02:00
initImagePreviewContainer.style.display = 'none'
2022-09-15 19:59:55 +02:00
// inpaintingEditorContainer.style.display = 'none'
2022-09-02 10:28:36 +02:00
// maskImagePreviewContainer.style.display = 'none'
// maskSetting.style.display = 'none'
promptStrengthContainer.style.display = 'none'
2022-09-22 20:49:05 +02:00
samplerSelectionContainer.style.display = 'block'
2022-09-02 10:28:36 +02:00
})
2022-09-15 19:59:55 +02:00
maskSetting.addEventListener('click', function() {
inpaintingEditorContainer.style.display = (this.checked ? 'block' : 'none')
2022-09-02 10:28:36 +02:00
})
// function showMaskImagePreview() {
// if (maskImageSelector.files.length === 0) {
2022-09-15 19:59:55 +02:00
// // maskImagePreviewContainer.style.display = 'none'
2022-09-02 10:28:36 +02:00
// return
// }
// let reader = new FileReader()
// let file = maskImageSelector.files[0]
// reader.addEventListener('load', function() {
2022-09-15 19:59:55 +02:00
// // maskImagePreview.src = reader.result
// // maskImagePreviewContainer.style.display = 'block'
2022-09-02 10:28:36 +02:00
// })
// if (file) {
// reader.readAsDataURL(file)
// }
// }
// maskImageSelector.addEventListener('change', showMaskImagePreview)
// showMaskImagePreview()
// maskImageClearBtn.addEventListener('click', function() {
// maskImageSelector.value = null
// maskImagePreview.src = ''
2022-09-15 19:59:55 +02:00
// // maskImagePreviewContainer.style.display = 'none'
2022-09-02 10:28:36 +02:00
// })
2022-09-15 19:59:55 +02:00
2022-09-14 14:18:26 +02:00
// https://stackoverflow.com/a/8212878
function millisecondsToStr(milliseconds) {
function numberEnding (number) {
return (number > 1) ? 's' : '';
}
var temp = Math.floor(milliseconds / 1000);
var hours = Math.floor((temp %= 86400) / 3600);
var s = ''
if (hours) {
s += hours + ' hour' + numberEnding(hours) + ' ';
}
var minutes = Math.floor((temp %= 3600) / 60);
if (minutes) {
s += minutes + ' minute' + numberEnding(minutes) + ' ';
}
var seconds = temp % 60;
if (!hours & & minutes < 4 & & seconds ) {
s += seconds + ' second' + numberEnding(seconds);
}
return s;
}
2022-09-02 10:28:36 +02:00
< / 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'
2022-09-07 12:59:10 +02:00
if (c.className.indexOf('active') !== -1) {
handle.innerHTML = '➖ ' // minus
} else {
handle.innerHTML = '➕ ' // plus
}
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 = '➕ ' // plus
} else {
content.style.display = "block"
handle.innerHTML = '➖ ' // minus
}
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)
}
2022-09-02 10:28:36 +02:00
})
})
}
createCollapsibles()
function refreshTagsList() {
2022-09-22 17:01:30 +02:00
editorModifierTagsList.innerHTML = '';
2022-09-02 10:28:36 +02:00
if (activeTags.length == 0) {
2022-09-22 17:01:30 +02:00
editorTagsContainer.style.display = 'none';
return;
2022-09-02 10:28:36 +02:00
} else {
2022-09-22 17:01:30 +02:00
editorTagsContainer.style.display = 'block';
2022-09-02 10:28:36 +02:00
}
2022-09-22 17:01:30 +02:00
activeTags.forEach((tag, index) => {
2022-09-23 14:31:22 +02:00
tag.element.querySelector('.modifier-card-image-overlay').innerText = '-';
2022-09-22 17:01:30 +02:00
tag.element.classList.add('modifier-card-tiny');
2022-09-02 10:28:36 +02:00
2022-09-22 17:01:30 +02:00
editorModifierTagsList.appendChild(tag.element);
tag.element.addEventListener('click', () => {
2022-09-23 14:35:05 +02:00
let idx = activeTags.indexOf(tag);
2022-09-22 17:01:30 +02:00
2022-09-23 14:35:05 +02:00
if (idx !== -1) {
activeTags[idx].originElement.classList.remove(activeCardClass);
2022-09-23 14:38:40 +02:00
activeTags[idx].originElement.querySelector('.modifier-card-image-overlay').innerText = '+';
2022-09-23 14:35:05 +02:00
activeTags.splice(idx, 1);
2022-09-22 17:01:30 +02:00
refreshTagsList();
2022-09-02 10:28:36 +02:00
}
2022-09-22 17:01:30 +02:00
});
});
2022-09-02 10:28:36 +02:00
let brk = document.createElement('br')
brk.style.clear = 'both'
editorModifierTagsList.appendChild(brk)
}
async function getDiskPath() {
try {
2022-09-05 13:55:25 +02:00
let diskPath = getSavedDiskPath()
if (diskPath !== '') {
diskPathField.value = diskPath
return
}
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]
2022-09-05 13:55:25 +02:00
document.querySelector('#diskPath').value = res
2022-09-02 10:28:36 +02:00
}
} catch (e) {
console.log('error fetching output dir path', e)
}
}
2022-09-22 17:01:30 +02:00
function createModifierCard(name, previews) {
const modifierCard = document.createElement('div');
modifierCard.className = 'modifier-card';
modifierCard.innerHTML = `
2022-09-23 14:31:22 +02:00
< div class = "modifier-card-overlay" > < / div >
2022-09-22 23:05:05 +02:00
< div class = "modifier-card-image-container" >
2022-09-23 14:31:22 +02:00
< div class = "modifier-card-image-overlay" > +< / div >
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" >
2022-09-22 17:01:30 +02:00
< / div >
< div class = "modifier-card-container" >
2022-09-22 23:05:05 +02:00
< div class = "modifier-card-label" > < p > < / p > < / div >
2022-09-22 17:01:30 +02:00
< / div > `;
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');
2022-09-22 17:01:30 +02:00
2022-09-22 17:47:57 +02:00
errorText.innerText = 'No Image';
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();
}
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) + '...';
}
2022-09-22 17:47:57 +02:00
2022-09-22 17:01:30 +02:00
return modifierCard;
}
function changePreviewImages(val) {
2022-09-22 23:05:05 +02:00
const previewImages = document.querySelectorAll('.modifier-card-image-container img');
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);
}
}
});
}
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));
});
}
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()
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;
2022-09-02 10:28:36 +02:00
2022-09-22 17:01:30 +02:00
const modifiersEl = document.createElement('div');
modifiersEl.classList.add('collapsible-content', 'editor-modifiers-leaf');
2022-09-02 10:28:36 +02:00
2022-09-22 17:01:30 +02:00
modifiers.forEach(modObj => {
const modifierName = modObj.modifier;
const modifierPreviews = modObj?.previews?.map(preview => `${modifierThumbnailPath}/${preview.path}`);
2022-09-02 10:28:36 +02:00
2022-09-22 17:01:30 +02:00
const modifierCard = createModifierCard(modifierName, modifierPreviews);
2022-09-02 10:28:36 +02:00
2022-09-22 17:01:30 +02:00
if(typeof modifierCard == 'object') {
modifiersEl.appendChild(modifierCard);
2022-09-02 10:28:36 +02:00
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);
2022-09-23 01:50:32 +02:00
2022-09-23 14:31:22 +02:00
modifierCard.querySelector('.modifier-card-image-overlay').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);
2022-09-23 01:50:32 +02:00
2022-09-23 14:31:22 +02:00
modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-';
2022-09-22 17:01:30 +02:00
}
refreshTagsList();
});
}
});
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()
2022-09-09 17:04:32 +02:00
await getAppConfig()
2022-09-02 10:28:36 +02:00
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
healthCheck()
2022-09-09 17:35:24 +02:00
playSound()
2022-09-02 10:28:36 +02:00
}
init()
< / script >
< / html >
