forked from extern/easydiffusion
1530 lines
48 KiB
HTML
1530 lines
48 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Stable Diffusion UI</title>
|
|
</head>
|
|
<body>
|
|
<!-- The react app entry point. Currently no ui just poc importing and logging -->
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
|
|
<!-- ORIGINAL CODE BELOW FOR REFENCE -->
|
|
|
|
<!-- KEEP FOR NOW -->
|
|
<!-- THE STYLES ARE BEING USED IN THE REACT APP -->
|
|
<!-- WE NEED TO PORT OVER THE STYLES OVER TO THE REACT COMPONENTS -->
|
|
<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;
|
|
}
|
|
#guidance_scale {
|
|
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);
|
|
}
|
|
.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;
|
|
}
|
|
.prompt-modifier-tag {
|
|
border: 1px solid rgb(10, 0, 24);
|
|
border-radius: 4px;
|
|
padding: 0pt 3pt;
|
|
margin-right: 2pt;
|
|
cursor: pointer;
|
|
display: inline;
|
|
background: rgb(163, 163, 163);
|
|
color: black;
|
|
line-height: 25pt;
|
|
float: left;
|
|
font-size: 9pt;
|
|
}
|
|
.prompt-modifier-tag:hover {
|
|
background: black;
|
|
color: white;
|
|
}
|
|
#editor-modifiers-entries .prompt-modifier-tag {
|
|
background: #110f0f;
|
|
color: rgb(212, 212, 212);
|
|
margin-bottom: 4pt;
|
|
font-size: 10pt;
|
|
}
|
|
#editor-modifiers-entries .prompt-modifier-tag:hover {
|
|
background: rgb(163, 163, 163);
|
|
color: black;
|
|
}
|
|
#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;
|
|
}
|
|
#coffeeButton {
|
|
height: 23px;
|
|
transform: translateY(25%);
|
|
}
|
|
</style>
|
|
|
|
<!-- ALL OF THIS IS HERE FOR REFERNCE FOR THE TIME BEING BUT CAN BE SAFLEY REMOVED -->
|
|
|
|
<!-- All of the original DOM -->
|
|
<div id="container" style="display: none">
|
|
<div class="flex-container">
|
|
<div id="editor" class="col-50">
|
|
<div id="meta">
|
|
<div id="server-status">
|
|
<div id="server-status-color"> </div>
|
|
<span id="server-status-msg">Stable Diffusion is starting..</span>
|
|
</div>
|
|
<h1>
|
|
Stable Diffusion UI
|
|
<small>v2.1 <span id="updateBranchLabel"></span></small>
|
|
</h1>
|
|
</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" /><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>
|
|
<div id="editor-inputs-tags-list"></div>
|
|
</div>
|
|
|
|
<button id="makeImage">Make Image</button>
|
|
</div>
|
|
|
|
<div class="line-separator"> </div>
|
|
|
|
<div id="editor-settings" class="panel-box">
|
|
<h4 class="collapsible">Advanced Settings</h4>
|
|
<ul id="editor-settings-entries" class="collapsible-content">
|
|
<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>
|
|
<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>
|
|
<br />
|
|
<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>
|
|
<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>
|
|
</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>
|
|
</select>
|
|
</li>
|
|
<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>
|
|
<li>
|
|
<label for="guidance_scale">Guidance Scale:</label>
|
|
<input
|
|
id="guidance_scale"
|
|
name="guidance_scale"
|
|
value="75"
|
|
type="range"
|
|
min="10"
|
|
max="200"
|
|
/>
|
|
<span id="guidance_scale_value"></span>
|
|
</li>
|
|
<li>
|
|
<span id="prompt_strength_container"
|
|
><label for="prompt_strength">Prompt Strength:</label>
|
|
<input
|
|
id="prompt_strength"
|
|
name="prompt_strength"
|
|
value="8"
|
|
type="range"
|
|
min="0"
|
|
max="10" />
|
|
<span id="prompt_strength_value"></span><br
|
|
/></span>
|
|
</li>
|
|
<li> </li>
|
|
<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 (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>
|
|
<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>
|
|
<!-- <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>
|
|
</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"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="preview" class="col-50">
|
|
<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>
|
|
|
|
<div id="outputMsg"></div>
|
|
<div id="current-images" class="img-preview"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="line-separator"> </div>
|
|
|
|
<div id="footer" class="panel-box">
|
|
<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>
|
|
<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>
|
|
|
|
<!-- All of the original script -->
|
|
<script>
|
|
const SOUND_ENABLED_KEY = "soundEnabled";
|
|
const SAVE_TO_DISK_KEY = "saveToDisk";
|
|
const USE_CPU_KEY = "useCPU";
|
|
const USE_FULL_PRECISION_KEY = "useFullPrecision";
|
|
const USE_TURBO_MODE_KEY = "useTurboMode";
|
|
const DISK_PATH_KEY = "diskPath";
|
|
const ADVANCED_PANEL_OPEN_KEY = "advancedPanelOpen";
|
|
const MODIFIERS_PANEL_OPEN_KEY = "modifiersPanelOpen";
|
|
const USE_FACE_CORRECTION_KEY = "useFaceCorrection";
|
|
const USE_UPSCALING_KEY = "useUpscaling";
|
|
const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage";
|
|
const HEALTH_PING_INTERVAL = 5; // seconds
|
|
const MAX_INIT_IMAGE_DIMENSION = 768;
|
|
|
|
const IMAGE_REGEX = new RegExp("data:image/[A-Za-z]+;base64");
|
|
|
|
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"
|
|
);
|
|
let guidanceScaleField = document.querySelector("#guidance_scale");
|
|
let guidanceScaleValueLabel = document.querySelector(
|
|
"#guidance_scale_value"
|
|
);
|
|
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");
|
|
let diskPathField = document.querySelector("#diskPath");
|
|
// let allowNSFWField = document.querySelector("#allow_nsfw")
|
|
let useBetaChannelField = document.querySelector("#use_beta_channel");
|
|
let promptStrengthField = document.querySelector("#prompt_strength");
|
|
let promptStrengthValueLabel = document.querySelector(
|
|
"#prompt_strength_value"
|
|
);
|
|
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"
|
|
);
|
|
let updateBranchLabel = document.querySelector("#updateBranchLabel");
|
|
|
|
let makeImageBtn = document.querySelector("#makeImage");
|
|
|
|
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"
|
|
);
|
|
|
|
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");
|
|
|
|
let advancedPanelHandle = document.querySelector(
|
|
"#editor-settings .collapsible"
|
|
);
|
|
let modifiersPanelHandle = document.querySelector(
|
|
"#editor-modifiers .collapsible"
|
|
);
|
|
|
|
let serverStatus = "offline";
|
|
let activeTags = [];
|
|
let lastPromptUsed = "";
|
|
|
|
function getLocalStorageItem(key, fallback) {
|
|
let item = localStorage.getItem(key);
|
|
if (item === null) {
|
|
return fallback;
|
|
}
|
|
|
|
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());
|
|
};
|
|
}
|
|
|
|
function handleStringSettingChange(key) {
|
|
return function (e) {
|
|
localStorage.setItem(key, e.target.value.toString());
|
|
};
|
|
}
|
|
|
|
function isSoundEnabled() {
|
|
return getLocalStorageBoolItem(SOUND_ENABLED_KEY, true);
|
|
}
|
|
|
|
function isFaceCorrectionEnabled() {
|
|
return getLocalStorageBoolItem(USE_FACE_CORRECTION_KEY, false);
|
|
}
|
|
|
|
function isUpscalingEnabled() {
|
|
return getLocalStorageBoolItem(USE_UPSCALING_KEY, false);
|
|
}
|
|
|
|
function isShowOnlyFilteredImageEnabled() {
|
|
return getLocalStorageBoolItem(SHOW_ONLY_FILTERED_IMAGE_KEY, true);
|
|
}
|
|
|
|
function isSaveToDiskEnabled() {
|
|
return getLocalStorageBoolItem(SAVE_TO_DISK_KEY, false);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
function getSavedDiskPath() {
|
|
return getLocalStorageItem(DISK_PATH_KEY, "");
|
|
}
|
|
|
|
function isAdvancedPanelOpenEnabled() {
|
|
return getLocalStorageBoolItem(ADVANCED_PANEL_OPEN_KEY, false);
|
|
}
|
|
|
|
function isModifiersPanelOpenEnabled() {
|
|
return getLocalStorageBoolItem(MODIFIERS_PANEL_OPEN_KEY, false);
|
|
}
|
|
|
|
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";
|
|
serverStatusMsg.innerHTML = "Stable Diffusion has stopped";
|
|
} else if (msgType == "success") {
|
|
// msg = '<span style="color: green">' + msg + '<span>'
|
|
serverStatusColor.style.backgroundColor = "green";
|
|
serverStatusMsg.style.color = "green";
|
|
serverStatusMsg.innerHTML = "Stable Diffusion is ready";
|
|
serverStatus = "online";
|
|
}
|
|
}
|
|
|
|
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 {
|
|
outputMsg.innerHTML = msg;
|
|
}
|
|
|
|
console.log(level, msg);
|
|
}
|
|
|
|
function logError(msg, res) {
|
|
logMsg(msg, "error");
|
|
|
|
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) {
|
|
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;
|
|
|
|
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/>`;
|
|
}
|
|
} else {
|
|
msg = res;
|
|
}
|
|
logError(msg, res);
|
|
res = undefined;
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.log("request error", e);
|
|
setStatus("request", "error", "error");
|
|
}
|
|
|
|
if (!res) {
|
|
return false;
|
|
}
|
|
|
|
lastPromptUsed = reqBody["prompt"];
|
|
|
|
for (let idx in res.output) {
|
|
let imgBody = "";
|
|
|
|
try {
|
|
let imgData = res.output[idx];
|
|
imgBody = imgData.data;
|
|
} 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";
|
|
imgSeedLabel.innerHTML = "Seed: " + seed;
|
|
|
|
let imgUseBtn = document.createElement("button");
|
|
imgUseBtn.className = "imgUseBtn";
|
|
imgUseBtn.innerHTML = "Use as Input";
|
|
|
|
let imgSaveBtn = document.createElement("button");
|
|
imgSaveBtn.className = "imgSaveBtn";
|
|
imgSaveBtn.innerHTML = "Download";
|
|
|
|
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");
|
|
imgDownload.download = createFileName();
|
|
imgDownload.href = imgBody;
|
|
imgDownload.click();
|
|
});
|
|
|
|
imgItem.addEventListener("mouseenter", function () {
|
|
imgItemInfo.style.opacity = 1;
|
|
});
|
|
|
|
imgItem.addEventListener("mouseleave", function () {
|
|
imgItemInfo.style.opacity = 0.5;
|
|
});
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
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 };
|
|
}
|
|
|
|
async function makeImage() {
|
|
if (serverStatus !== "online") {
|
|
logError("The server is still starting up..");
|
|
return;
|
|
}
|
|
|
|
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");
|
|
}
|
|
}
|
|
|
|
setStatus("request", "fetching..");
|
|
|
|
makeImageBtn.innerHTML = "Processing..";
|
|
makeImageBtn.disabled = true;
|
|
|
|
let seed = randomSeedField.checked
|
|
? Math.floor(Math.random() * 10000000)
|
|
: parseInt(seedField.value);
|
|
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) {
|
|
let promptTags = activeTags.join(", ");
|
|
prompt += ", " + promptTags;
|
|
}
|
|
|
|
previewPrompt.innerHTML = prompt;
|
|
|
|
let reqBody = {
|
|
prompt: prompt,
|
|
num_outputs: batchSize,
|
|
num_inference_steps: numInferenceStepsField.value,
|
|
guidance_scale: parseInt(guidanceScaleField.value) / 10,
|
|
width: widthField.value,
|
|
height: heightField.value,
|
|
// allow_nsfw: allowNSFWField.checked,
|
|
turbo: turboField.checked,
|
|
use_cpu: useCPUField.checked,
|
|
use_full_precision: useFullPrecisionField.checked,
|
|
};
|
|
|
|
if (IMAGE_REGEX.test(initImagePreview.src)) {
|
|
reqBody["init_image"] = initImagePreview.src;
|
|
reqBody["prompt_strength"] = parseInt(promptStrengthField.value) / 10;
|
|
|
|
// if (IMAGE_REGEX.test(maskImagePreview.src)) {
|
|
// reqBody['mask'] = maskImagePreview.src
|
|
// }
|
|
}
|
|
|
|
if (saveToDiskField.checked && diskPathField.value.trim() !== "") {
|
|
reqBody["save_to_disk_path"] = diskPathField.value.trim();
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
let time = new Date().getTime();
|
|
imagesContainer.innerHTML = "";
|
|
|
|
let successCount = 0;
|
|
|
|
for (let i = 0; i < batchCount; i++) {
|
|
reqBody["seed"] = seed + i * batchSize;
|
|
|
|
let success = await doMakeImage(reqBody);
|
|
|
|
if (success) {
|
|
outputMsg.innerHTML =
|
|
"Processed batch " + (i + 1) + "/" + batchCount;
|
|
successCount++;
|
|
}
|
|
}
|
|
|
|
makeImageBtn.innerHTML = "Make Image";
|
|
makeImageBtn.disabled = false;
|
|
|
|
if (isSoundEnabled()) {
|
|
playSound();
|
|
}
|
|
|
|
time = new Date().getTime() - time;
|
|
time /= 1000;
|
|
|
|
if (successCount === batchCount) {
|
|
outputMsg.innerHTML =
|
|
"Processed " + numOutputsTotal + " images in " + time + " seconds";
|
|
|
|
setStatus("request", "done", "success");
|
|
}
|
|
|
|
if (randomSeedField.checked) {
|
|
seedField.value = seed;
|
|
}
|
|
}
|
|
|
|
// create a file name with embedded prompt and metadata
|
|
// for easier cateloging and comparison
|
|
function createFileName() {
|
|
// Most important information is the prompt
|
|
let underscoreName = lastPromptUsed.replace(/[^a-zA-Z0-9]/g, "_");
|
|
underscoreName = underscoreName.substring(0, 100);
|
|
const seed = seedField.value;
|
|
const steps = numInferenceStepsField.value;
|
|
const guidance = guidanceScaleField.value;
|
|
|
|
// name and the top level metadata
|
|
let fileName = `${underscoreName}_Seed-${seed}_Steps-${steps}_Guidance-${guidance}`;
|
|
|
|
// add the tags
|
|
// let tags = [];
|
|
// let tagString = '';
|
|
// document.querySelectorAll(modifyTagsSelector).forEach(function(tag) {
|
|
// tags.push(tag.innerHTML);
|
|
// })
|
|
|
|
// join the tags with a pipe
|
|
// if (activeTags.length > 0) {
|
|
// tagString = '_Tags-';
|
|
// tagString += tags.join('|');
|
|
// }
|
|
|
|
// // append empty or populated tags
|
|
// fileName += `${tagString}`;
|
|
|
|
// add the file extension
|
|
fileName += `.png`;
|
|
|
|
return fileName;
|
|
}
|
|
|
|
soundToggle.addEventListener(
|
|
"click",
|
|
handleBoolSettingChange(SOUND_ENABLED_KEY)
|
|
);
|
|
soundToggle.checked = isSoundEnabled();
|
|
|
|
saveToDiskField.checked = isSaveToDiskEnabled();
|
|
diskPathField.disabled = !saveToDiskField.checked;
|
|
|
|
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();
|
|
|
|
useCPUField.addEventListener(
|
|
"click",
|
|
handleBoolSettingChange(USE_CPU_KEY)
|
|
);
|
|
useCPUField.checked = isUseCPUEnabled();
|
|
|
|
useFullPrecisionField.addEventListener(
|
|
"click",
|
|
handleBoolSettingChange(USE_FULL_PRECISION_KEY)
|
|
);
|
|
useFullPrecisionField.checked = isUseFullPrecisionEnabled();
|
|
|
|
turboField.addEventListener(
|
|
"click",
|
|
handleBoolSettingChange(USE_TURBO_MODE_KEY)
|
|
);
|
|
turboField.checked = isUseTurboModeEnabled();
|
|
|
|
diskPathField.addEventListener(
|
|
"change",
|
|
handleStringSettingChange(DISK_PATH_KEY)
|
|
);
|
|
|
|
saveToDiskField.addEventListener("click", function (e) {
|
|
diskPathField.disabled = !this.checked;
|
|
handleBoolSettingChange(SAVE_TO_DISK_KEY)(e);
|
|
});
|
|
|
|
useUpscalingField.addEventListener("click", function (e) {
|
|
upscaleModelField.disabled = !this.checked;
|
|
handleBoolSettingChange(USE_UPSCALING_KEY)(e);
|
|
});
|
|
|
|
function setPanelOpen(panelHandle) {
|
|
let panelContents = panelHandle.nextElementSibling;
|
|
panelHandle.classList.add("active");
|
|
panelContents.style.display = "block";
|
|
}
|
|
|
|
if (isAdvancedPanelOpenEnabled()) {
|
|
setPanelOpen(advancedPanelHandle);
|
|
}
|
|
|
|
if (isModifiersPanelOpenEnabled()) {
|
|
setPanelOpen(modifiersPanelHandle);
|
|
}
|
|
|
|
makeImageBtn.addEventListener("click", makeImage);
|
|
|
|
function updateGuidanceScale() {
|
|
guidanceScaleValueLabel.innerHTML = guidanceScaleField.value / 10;
|
|
}
|
|
|
|
guidanceScaleField.addEventListener("input", updateGuidanceScale);
|
|
updateGuidanceScale();
|
|
|
|
function updatePromptStrength() {
|
|
promptStrengthValueLabel.innerHTML = promptStrengthField.value / 10;
|
|
}
|
|
|
|
promptStrengthField.addEventListener("input", updatePromptStrength);
|
|
updatePromptStrength();
|
|
|
|
useBetaChannelField.addEventListener("click", async function (e) {
|
|
if (serverStatus !== "online") {
|
|
logError("The server is still starting up..");
|
|
alert("The server is still starting up..");
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
|
|
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;
|
|
updateBranchLabel.innerHTML = "(beta)";
|
|
}
|
|
|
|
console.log("get config status response", config);
|
|
} catch (e) {
|
|
console.log("get config status error", e);
|
|
}
|
|
}
|
|
|
|
function checkRandomSeed() {
|
|
if (randomSeedField.checked) {
|
|
seedField.disabled = true;
|
|
seedField.value = "0";
|
|
} 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";
|
|
|
|
if (c.className.indexOf("active") !== -1) {
|
|
handle.innerHTML = "➖"; // minus
|
|
} else {
|
|
handle.innerHTML = "➕"; // plus
|
|
}
|
|
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
|
|
}
|
|
|
|
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);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
createCollapsibles();
|
|
|
|
function refreshTagsList() {
|
|
editorModifierTagsList.innerHTML = "";
|
|
|
|
if (activeTags.length == 0) {
|
|
editorTagsContainer.style.display = "none";
|
|
return;
|
|
} else {
|
|
editorTagsContainer.style.display = "block";
|
|
}
|
|
|
|
activeTags.forEach(function (tag) {
|
|
let el = document.createElement("div");
|
|
el.className = "prompt-modifier-tag";
|
|
el.innerHTML = tag;
|
|
|
|
editorModifierTagsList.appendChild(el);
|
|
|
|
el.addEventListener("click", function () {
|
|
let idx = activeTags.indexOf(tag);
|
|
if (idx !== -1) {
|
|
activeTags.splice(idx, 1);
|
|
refreshTagsList();
|
|
}
|
|
});
|
|
});
|
|
|
|
let brk = document.createElement("br");
|
|
brk.style.clear = "both";
|
|
editorModifierTagsList.appendChild(brk);
|
|
}
|
|
|
|
async function getDiskPath() {
|
|
try {
|
|
let diskPath = getSavedDiskPath();
|
|
|
|
if (diskPath !== "") {
|
|
diskPathField.value = diskPath;
|
|
return;
|
|
}
|
|
|
|
let res = await fetch("/output_dir");
|
|
if (res.status === 200) {
|
|
res = await res.json();
|
|
res = res[0];
|
|
|
|
document.querySelector("#diskPath").value = res;
|
|
}
|
|
} catch (e) {
|
|
console.log("error fetching output dir path", e);
|
|
}
|
|
}
|
|
|
|
async function loadModifiers() {
|
|
try {
|
|
let res = await fetch("/modifiers.json");
|
|
if (res.status === 200) {
|
|
res = await res.json();
|
|
|
|
res.forEach(function (m) {
|
|
let title = m[0];
|
|
let modifiers = m[1];
|
|
|
|
let titleEl = document.createElement("h5");
|
|
titleEl.className = "collapsible";
|
|
titleEl.innerHTML = title;
|
|
|
|
let modifiersEl = document.createElement("div");
|
|
modifiersEl.classList.add(
|
|
"collapsible-content",
|
|
"editor-modifiers-leaf"
|
|
);
|
|
|
|
modifiers.forEach(function (modifier) {
|
|
let tagEl = document.createElement("div");
|
|
tagEl.className = "prompt-modifier-tag";
|
|
tagEl.innerHTML = modifier;
|
|
|
|
modifiersEl.appendChild(tagEl);
|
|
|
|
tagEl.addEventListener("click", function () {
|
|
if (activeTags.includes(modifier)) {
|
|
return;
|
|
}
|
|
|
|
activeTags.push(modifier);
|
|
refreshTagsList();
|
|
});
|
|
});
|
|
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);
|
|
}
|
|
}
|
|
|
|
/* TURNED OFF */
|
|
async function init() {
|
|
// await loadModifiers()
|
|
// await getDiskPath()
|
|
// await getAppConfig()
|
|
// setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
|
|
// healthCheck()
|
|
// playSound()
|
|
}
|
|
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html>
|