Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <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"> | |
| <link rel="stylesheet" href="media/main.css?v=22"> | |
| <link rel="stylesheet" href="media/modifier-thumbnails.css?v=1"> | |
| <link rel="stylesheet" href="media/font-awesome/6.2.0/css/all.min.css"> | |
| <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> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="top-nav"> | |
| <div id="logo"> | |
| <h1>Stable Diffusion UI <small>v2.21 <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://www.reddit.com/r/StableDiffusionUI/" target="_blank"><i class="fa-brands fa-reddit fa-fw"></i> Reddit 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> | |
| </div> | |
| </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> | |
| </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> | |
| <small>(or)</small> <button id="promptsFromFileBtn">Load prompts from a file</button> <small>(one prompt per line)</small> | |
| <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden --> | |
| </div> | |
| <div id="editor-inputs-init-image" class="row"> | |
| <label for="init_image"><b>Initial Image (img2img):</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 class="init_image_clear image_clear_btn">X</button> | |
| <br/> | |
| <input id="enable_mask" name="enable_mask" type="checkbox"> <label for="enable_mask">In-Painting (beta) <small>(select the area which the AI will paint into)</small></label> | |
| <div id="inpaintingEditor"></div> | |
| </div> | |
| </div> | |
| <div id="editor-inputs-tags-container" class="row"> | |
| <label>Image Modifiers: <small>(click an Image Modifier to remove it)</small></label> | |
| <div id="editor-inputs-tags-list"></div> | |
| </div> | |
| <button id="makeImage">Make Image</button> | |
| <button id="stopImage" class="secondaryButton">Stop All</button> | |
| </div> | |
| <div class="line-separator"> </div> | |
| <div id="editor-settings" class="panel-box settings-box"> | |
| <h4 class="collapsible">Image Settings</h4> | |
| <ul id="editor-settings-entries" class="collapsible-content"> | |
| <li><b class="settings-subheader">Image Settings</b></li> | |
| <li class="pl-5"><label for="seed">Seed:</label> <input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random Image</label></li> | |
| <li class="pl-5"><label for="num_outputs_total">Number of images to make:</label> <input id="num_outputs_total" name="num_outputs_total" value="1" size="1"> <label for="num_outputs_parallel">Generate in parallel:</label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1"> (images at once)</li> | |
| <li class="pl-5"><label for="stable_diffusion_model">Model:</label> | |
| <select id="stable_diffusion_model" name="stable_diffusion_model"> | |
| <!-- <option value="sd-v1-4" selected>sd-v1-4</option> --> | |
| </select> | |
| </li> | |
| <li id="samplerSelection" class="pl-5"><label for="sampler">Sampler:</label> | |
| <select id="sampler" name="sampler"> | |
| <option value="plms">plms</option> | |
| <option value="ddim">ddim</option> | |
| <option value="heun">heun</option> | |
| <option value="euler">euler</option> | |
| <option value="euler_a" selected>euler_a</option> | |
| <option value="dpm2">dpm2</option> | |
| <option value="dpm2_a">dpm2_a</option> | |
| <option value="lms">lms</option> | |
| </select> | |
| </li> | |
| <li class="pl-5"><label>Image Size: </label> | |
| <select id="width" name="width" value="512"> | |
| <option value="128">128 (*)</option> | |
| <option value="192">192</option> | |
| <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> | |
| <option value="1280">1280</option> | |
| <option value="1536">1536</option> | |
| <option value="1792">1792</option> | |
| <option value="2048">2048</option> | |
| </select> | |
| <label for="width"><small>(width)</small></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> | |
| <option value="1280">1280</option> | |
| <option value="1536">1536</option> | |
| <option value="1792">1792</option> | |
| <option value="2048">2048</option> | |
| </select> | |
| <label for="height"><small>(height)</small></label> | |
| </li> | |
| <li class="pl-5"><label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25"></li> | |
| <li class="pl-5"><label for="guidance_scale_slider">Guidance Scale:</label> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="10" max="500"> <input id="guidance_scale" name="guidance_scale" size="4"></li> | |
| <li class="pl-5"><span id="prompt_strength_container"><label for="prompt_strength_slider">Prompt Strength:</label> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4"><br/></span></li> | |
| <li class="pl-5"><label for="output_format">Output format:</label> | |
| <select id="output_format" name="output_format"> | |
| <option value="jpeg" selected>jpeg</option> | |
| <option value="png">png</option> | |
| </select> | |
| </li> | |
| <br/> | |
| <li><b class="settings-subheader">Prompt Settings</b></li> | |
| <li class="pl-5"><label for="negative_prompt">Negative Prompt:</label> <input id="negative_prompt" name="negative_prompt" size="55"></li> | |
| <br/> | |
| <li><b class="settings-subheader">Render Settings</b></li> | |
| <li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview of the image <small>(uses more VRAM, slightly slower image creation)</small></label></li> | |
| <li class="pl-5"><input id="use_face_correction" name="use_face_correction" type="checkbox" checked> <label for="use_face_correction">Fix incorrect faces and eyes <small>(uses GFPGAN)</small></label></li> | |
| <li class="pl-5"> | |
| <input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Upscale 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 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> | |
| <br/> | |
| <li><small>The system-related settings have been moved to the top-right corner.</small></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"> | |
| <label for="preview-image">Image Style:</label> | |
| <select id="preview-image" name="preview-image" value="portrait"> | |
| <option value="portrait" selected="">Face</option> | |
| <option value="landscape">Landscape</option> | |
| </select> | |
| | |
| <label for="modifier-card-size-slider">Thumbnail Size:</label> | |
| <input id="modifier-card-size-slider" name="modifier-card-size-slider" value="0" type="range" min="-3" max="5"> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="preview" class="col-free"> | |
| <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 id="preview-tools"> | |
| <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button> | |
| </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> | |
| </body> | |
| <script src="media/main.js?v=32"></script> | |
| <script> | |
| async function init() { | |
| await loadModifiers() | |
| await getDiskPath() | |
| await getAppConfig() | |
| await getModels() | |
| setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000) | |
| healthCheck() | |
| playSound() | |
| } | |
| init() | |
| </script> | |
| </html> | |