Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>Easy Diffusion</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="theme-color" content="#673AB6"> | |
| <link rel="icon" type="image/png" href="/media/images/favicon-16x16.png" sizes="16x16"> | |
| <link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32"> | |
| <link rel="stylesheet" href="/media/css/jquery-confirm.min.css"> | |
| <link rel="stylesheet" href="/media/css/fonts.css"> | |
| <link rel="stylesheet" href="/media/css/themes.css"> | |
| <link rel="stylesheet" href="/media/css/main.css"> | |
| <link rel="stylesheet" href="/media/css/auto-save.css"> | |
| <link rel="stylesheet" href="/media/css/modifier-thumbnails.css"> | |
| <link rel="stylesheet" href="/media/css/fontawesome-all.min.css"> | |
| <link rel="stylesheet" href="/media/css/image-editor.css"> | |
| <link rel="stylesheet" href="/media/css/searchable-models.css"> | |
| <link rel="stylesheet" href="/media/css/image-modal.css"> | |
| <link rel="manifest" href="/media/manifest.webmanifest"> | |
| <script src="/media/js/jquery-3.6.1.min.js"></script> | |
| <script src="/media/js/jquery-confirm.min.js"></script> | |
| <script src="/media/js/jszip.min.js"></script> | |
| <script src="/media/js/FileSaver.min.js"></script> | |
| <script src="/media/js/marked.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="top-nav"> | |
| <div id="logo"> | |
| <h1> | |
| <img id="logo_img" src="/media/images/icon-512x512.png" > | |
| Easy Diffusion | |
| <small>v2.5.26 <span id="updateBranchLabel"></span></small> | |
| </h1> | |
| </div> | |
| <div id="server-status"> | |
| <div id="server-status-color">●</div> | |
| <span id="server-status-msg">Stable Diffusion is starting..</span> | |
| </div> | |
| <div id="tab-container" class="tab-container"> | |
| <span id="tab-main" class="tab active"> | |
| <span><i class="fa fa-image icon"></i> Generate</span> | |
| </span> | |
| <span id="tab-settings" class="tab"> | |
| <span><i class="fa fa-gear icon"></i> Settings</span> | |
| </span> | |
| <span id="tab-about" class="tab"> | |
| <span><i class="fa fa-comments icon"></i> Help & Community</span> | |
| </span> | |
| </div> | |
| </div> | |
| <div id="tab-content-wrapper"> | |
| <div id="tab-content-main" class="tab-content active flex-container"> | |
| <div id="editor"> | |
| <div id="editor-inputs"> | |
| <div id="editor-inputs-prompt" class="row"> | |
| <label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn" class="tertiaryButton">Load from a file</button> | |
| <textarea id="prompt" class="col-free">a photograph of an astronaut riding a horse</textarea> | |
| <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden --> | |
| <label for="negative_prompt" class="collapsible" id="negative_prompt_handle"> | |
| Negative Prompt | |
| <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top">Click to learn more about Negative Prompts</span></i></a> | |
| <small>(optional)</small> | |
| </label> | |
| <div class="collapsible-content"> | |
| <textarea id="negative_prompt" name="negative_prompt" placeholder="list the things to remove from the image (e.g. fog, green)"></textarea> | |
| </div> | |
| </div> | |
| <div id="editor-inputs-init-image" class="row"> | |
| <label for="init_image">Initial Image (img2img) <small>(optional)</small> </label> | |
| <div id="init_image_preview_container" class="image_preview_container"> | |
| <div id="init_image_wrapper"> | |
| <img id="init_image_preview" src="" /> | |
| <span id="init_image_size_box" class="img_bottom_label"></span> | |
| <button class="init_image_clear image_clear_btn"><i class="fa-solid fa-xmark"></i></button> | |
| </div> | |
| <div id="init_image_buttons"> | |
| <div class="button"> | |
| <i class="fa-regular fa-folder-open"></i> | |
| Browse | |
| <input id="init_image" name="init_image" type="file" /> | |
| </div> | |
| <div id="init_image_button_draw" class="button"> | |
| <i class="fa-solid fa-pencil"></i> | |
| Draw | |
| </div> | |
| <div id="inpaint_button_container"> | |
| <div id="init_image_button_inpaint" class="button"> | |
| <i class="fa-solid fa-paintbrush"></i> | |
| Inpaint | |
| </div> | |
| <input id="enable_mask" name="enable_mask" type="checkbox"> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="apply_color_correction_setting" class="pl-5"><input id="apply_color_correction" name="apply_color_correction" type="checkbox"> <label for="apply_color_correction">Preserve color profile <small>(helps during inpainting)</small></label></div> | |
| </div> | |
| <div id="editor-inputs-tags-container" class="row"> | |
| <label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">click an Image Modifier to remove it, right-click to temporarily disable it, use Ctrl+Mouse Wheel to adjust its weight</span></i></label> | |
| <div id="editor-inputs-tags-list"></div> | |
| </div> | |
| <button id="makeImage" class="primaryButton">Make Image</button> | |
| <div id="render-buttons"> | |
| <button id="stopImage" class="secondaryButton">Stop All</button> | |
| <button id="pause"><i class="fa-solid fa-pause"></i> Pause All</button> | |
| <button id="resume"><i class="fa-solid fa-play"></i> Resume</button> | |
| </div> | |
| </div> | |
| <span class="line-separator"></span> | |
| <div id="editor-settings" class="settings-box panel-box"> | |
| <h4 class="collapsible"> | |
| Image Settings | |
| <i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button"> | |
| <span class="simple-tooltip top-left"> | |
| Reset Image Settings | |
| </span> | |
| </i> | |
| </h4> | |
| <div id="editor-settings-entries" class="collapsible-content"> | |
| <div><table> | |
| <tr><b class="settings-subheader">Image Settings</b></tr> | |
| <tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="0" onkeypress="preventNonNumericalInput(event)"> <input id="random_seed" name="random_seed" type="checkbox" checked><label for="random_seed">Random</label></td></tr> | |
| <tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td><td><input id="num_outputs_total" name="num_outputs_total" value="1" size="1" onkeypress="preventNonNumericalInput(event)"> <label><small>(total)</small></label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1" onkeypress="preventNonNumericalInput(event)"> <label for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr> | |
| <tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td class="model-input"> | |
| <input id="stable_diffusion_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" /> | |
| <button id="reload-models" class="secondaryButton reloadModels"><i class='fa-solid fa-rotate'></i></button> | |
| <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about custom models</span></i></a> | |
| </td></tr> | |
| <!-- <tr id="modelConfigSelection" class="pl-5"><td><label for="model_config">Model Config:</i></label></td><td> | |
| <select id="model_config" name="model_config"> | |
| </select> | |
| </td></tr> --> | |
| <tr class="pl-5"><td><label for="vae_model">Custom VAE:</i></label></td><td> | |
| <input id="vae_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" /> | |
| <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about VAEs</span></i></a> | |
| </td></tr> | |
| <tr id="samplerSelection" class="pl-5"><td><label for="sampler_name">Sampler:</label></td><td> | |
| <select id="sampler_name" name="sampler_name"> | |
| <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 Ancestral</option> | |
| <option value="dpm2">DPM2</option> | |
| <option value="dpm2_a">DPM2 Ancestral</option> | |
| <option value="lms">LMS</option> | |
| <option value="dpm_solver_stability">DPM Solver (Stability AI)</option> | |
| <option value="dpmpp_2s_a">DPM++ 2s Ancestral (Karras)</option> | |
| <option value="dpmpp_2m">DPM++ 2m (Karras)</option> | |
| <option value="dpmpp_sde">DPM++ SDE (Karras)</option> | |
| <option value="dpm_fast">DPM Fast (Karras)</option> | |
| <option value="dpm_adaptive">DPM Adaptive (Karras)</option> | |
| <option value="unipc_snr">UniPC SNR</option> | |
| <option value="unipc_tu">UniPC TU</option> | |
| <option value="unipc_snr_2">UniPC SNR 2</option> | |
| <option value="unipc_tu_2">UniPC TC 2</option> | |
| <option value="unipc_tq">UniPC TQ</option> | |
| </select> | |
| <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/How-to-Use#samplers" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about samplers</span></i></a> | |
| </td></tr> | |
| <tr class="pl-5"><td><label>Image Size: </label></td><td> | |
| <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> | |
| <div id="small_image_warning" class="displayNone">Small image sizes can cause bad image quality</div> | |
| </td></tr> | |
| <tr class="pl-5"><td><label for="num_inference_steps">Inference Steps:</label></td><td> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25" onkeypress="preventNonNumericalInput(event)"></td></tr> | |
| <tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="11" max="500"> <input id="guidance_scale" name="guidance_scale" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr> | |
| <tr id="prompt_strength_container" class="pl-5"><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td></tr> | |
| <tr class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</i></label></td><td> | |
| <input id="hypernetwork_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" /> | |
| </td></tr> | |
| <tr id="hypernetwork_strength_container" class="pl-5"> | |
| <td><label for="hypernetwork_strength_slider">Hypernetwork Strength:</label></td> | |
| <td> <input id="hypernetwork_strength_slider" name="hypernetwork_strength_slider" class="editor-slider" value="100" type="range" min="0" max="100"> <input id="hypernetwork_strength" name="hypernetwork_strength" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td> | |
| </tr> | |
| <tr class="pl-5"><td><label for="output_format">Output Format:</label></td><td> | |
| <select id="output_format" name="output_format"> | |
| <option value="jpeg" selected>jpeg</option> | |
| <option value="png">png</option> | |
| <option value="webp">webp</option> | |
| </select> | |
| </td></tr> | |
| <tr class="pl-5" id="output_quality_row"><td><label for="output_quality">Image Quality:</label></td><td> | |
| <input id="output_quality_slider" name="output_quality" class="editor-slider" value="75" type="range" min="10" max="95"> <input id="output_quality" name="output_quality" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"> | |
| </td></tr> | |
| </table></div> | |
| <div><ul> | |
| <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 <small>(uses more VRAM, slower images)</small></label></li> | |
| <li class="pl-5"><input id="use_face_correction" name="use_face_correction" type="checkbox"> <label for="use_face_correction">Fix incorrect faces and eyes</label> <div style="display:inline-block;"><input id="gfpgan_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" /></div></li> | |
| <li class="pl-5"> | |
| <input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Scale up by</label> | |
| <select id="upscale_amount" name="upscale_amount"> | |
| <option value="2">2x</option> | |
| <option value="4" selected>4x</option> | |
| </select> | |
| with | |
| <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> | |
| </ul></div> | |
| </div> | |
| </div> | |
| <div id="editor-modifiers" class="panel-box"> | |
| <h4 class="collapsible"> | |
| Image Modifiers (art styles, tags etc) | |
| <i id="modifier-settings-btn" class="fa-solid fa-gear section-button"> | |
| <span class="simple-tooltip left"> | |
| Add Custom Modifiers | |
| </span> | |
| </i> | |
| </h4> | |
| <div id="editor-modifiers-entries" class="collapsible-content"> | |
| <div id="editor-modifiers-entries-toolbar"> | |
| <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> | |
| <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 "Image Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :) | |
| </div> | |
| <div id="preview-content"> | |
| <div id="preview-tools"> | |
| <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can icon"></i> Clear All</button> | |
| <button class="tertiaryButton" id="show-download-popup"><i class="fa-solid fa-download"></i> Download images</button> | |
| <div class="display-settings"> | |
| <span class="auto-scroll"></span> <!-- hack for Rabbit Hole update --> | |
| <button id="auto_scroll_btn" class="tertiaryButton"> | |
| <i class="fa-solid fa-arrows-up-to-line icon"></i> | |
| <input id="auto_scroll" name="auto_scroll" type="checkbox" style="display: none"> | |
| <span class="simple-tooltip left"> | |
| Scroll to generated image (<span class="state">OFF</span>) | |
| </span> | |
| </button> | |
| <button class="dropdown tertiaryButton"> | |
| <i class="fa-solid fa-magnifying-glass-plus icon dropbtn"></i> | |
| <span class="simple-tooltip left"> | |
| Image Size | |
| </span> | |
| </button> | |
| <div class="dropdown-content"> | |
| <div class="dropdown-item"> | |
| <input id="thumbnail_size" name="thumbnail_size" class="editor-slider" type="range" value="70" min="5" max="200" oninput="sliderUpdate(event)"> | |
| <input id="thumbnail_size-input" name="thumbnail_size-input" size="3" value="70" pattern="^[0-9.]+$" onkeypress="preventNonNumericalInput(event)" oninput="sliderUpdate(event)"> % | |
| </div> | |
| </div> | |
| </div> | |
| <div class="clearfix" style="clear: both;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="tab-content-settings" class="tab-content"> | |
| <div id="system-settings" class="tab-content-inner"> | |
| <h1>System Settings</h1> | |
| <div class="parameters-table"></div> | |
| <br/> | |
| <button id="save-system-settings-btn" class="primaryButton">Save</button> | |
| <br/><br/> | |
| <div> | |
| <h3><i class="fa fa-microchip icon"></i> System Info</h3> | |
| <div id="system-info"> | |
| <table> | |
| <tr><td><label>Processor:</label></td><td id="system-info-cpu" class="value"></td></tr> | |
| <tr><td><label>Compatible Graphics Cards (all):</label></td><td id="system-info-gpus-all" class="value"></td></tr> | |
| <tr><td></td><td> </td></tr> | |
| <tr><td><label>Used for rendering 🔥:</label></td><td id="system-info-rendering-devices" class="value"></td></tr> | |
| <tr><td><label>Server Addresses <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">You can access Stable Diffusion UI from other devices using these addresses</span></i> :</label></td><td id="system-info-server-hosts" class="value"></td></tr> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="tab-content-about" class="tab-content"> | |
| <div class="tab-content-inner"> | |
| <div class="float-container"> | |
| <div class="float-child"> | |
| <h1>Help</h1> | |
| <ul id="help-links"> | |
| <li><span class="help-section">Using the software</span> | |
| <ul> | |
| <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/How-To-Use" target="_blank"><i class="fa-solid fa-book fa-fw"></i> How to use</a> | |
| <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/UI-Overview" target="_blank"><i class="fa-solid fa-list fa-fw"></i> UI Overview</a> | |
| <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-Prompts" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> Writing prompts</a> | |
| <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Inpainting" target="_blank"><i class="fa-solid fa-paintbrush fa-fw"></i> Inpainting</a> | |
| <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Run-on-Multiple-GPUs" target="_blank"><i class="fa-solid fa-paintbrush fa-fw"></i> Run on Multiple GPUs</a> | |
| </ul> | |
| <li><span class="help-section">Installation</span> | |
| <ul> | |
| <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" target="_blank"><i class="fa-solid fa-circle-question fa-fw"></i> Troubleshooting</a> | |
| </ul> | |
| <li><span class="help-section">Downloadable Content</span> | |
| <ul> | |
| <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-images fa-fw"></i> Custom Models</a> | |
| <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/UI-Plugins" target="_blank"><i class="fa-solid fa-puzzle-piece fa-fw"></i> UI Plugins</a> | |
| <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-hand-sparkles fa-fw"></i> VAE Variational Auto Encoder</a> | |
| </ul> | |
| </ul> | |
| </div> | |
| <div class="float-child"> | |
| <h1>Community</h1> | |
| <ul id="community-links"> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="popup" id="download-images-popup"> | |
| <div> | |
| <i class="close-button fa-solid fa-xmark"></i> | |
| <h1>Download all images</h1> | |
| <div class="parameters-table"> | |
| <div> | |
| <div><i class="fa fa-file-zipper"></i></div> | |
| <div><label for="theme">Download as a ZIP file</label><small>Instead of downloading individual files, generate one zip file with all images</small></div> | |
| <div><div class="input-toggle"><input id="zip_toggle" name="zip_toggle" checked="" type="checkbox"><label for="zip_toggle"></label></div></div> | |
| </div> | |
| <div id="download-add-folders"> | |
| <div><i class="fa fa-folder-tree"></i></div> | |
| <div><label for="theme">Add per-job folders</label><small>Place images into job folders</small></div> | |
| <div><div class="input-toggle"><input id="tree_toggle" name="tree_toggle" checked="" type="checkbox"><label for="tree_toggle"></label></div></div> | |
| </div> | |
| <div> | |
| <div><i class="fa fa-sliders"></i></div> | |
| <div><label for="theme">Add metadata files</label><small>For each image, also download a JSON file with all the settings used to generate the image</small></div> | |
| <div><div class="input-toggle"><input id="json_toggle" name="json_toggle" checked="" type="checkbox"><label for="json_toggle"></label></div></div> | |
| </div> | |
| </div> | |
| <br/> | |
| <button id="save-all-images" class="primaryButton"><i class="fa-solid fa-images"></i> Start download</button> | |
| </div> | |
| </div> | |
| <div id="save-settings-config" class="popup"> | |
| <div> | |
| <i class="close-button fa-solid fa-xmark"></i> | |
| <h1>Save Settings Configuration</h1> | |
| <p>Select which settings should be remembered when restarting the browser</p> | |
| <table id="save-settings-config-table" class="form-table"> | |
| </table> | |
| </div> | |
| </div> | |
| <div id="modifier-settings-config" class="popup" tabindex="0"> | |
| <div> | |
| <i class="close-button fa-solid fa-xmark"></i> | |
| <h1>Modifier Settings</h1> | |
| <p>Set your custom modifiers (one per line)</p> | |
| <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line" spellcheck="false"></textarea> | |
| <p><small><b>Tip:</b> You can include special characters like {} () [] and |. You can also put multiple comma-separated phrases in a single line, to make a single modifier that combines all of those.</small></p> | |
| </div> | |
| </div> | |
| <div id="image-editor" class="popup image-editor-popup"> | |
| <div> | |
| <i class="close-button fa-solid fa-xmark"></i> | |
| <h1>Image Editor</h1> | |
| <div class="flex-container"> | |
| <div class="editor-controls-left"></div> | |
| <div class="editor-controls-center"> | |
| <div></div> | |
| </div> | |
| <div class="editor-controls-right"> | |
| <div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="image-inpainter" class="popup image-editor-popup"> | |
| <div> | |
| <i class="close-button fa-solid fa-xmark"></i> | |
| <h1>Inpainter</h1> | |
| <div class="flex-container"> | |
| <div class="editor-controls-left"></div> | |
| <div class="editor-controls-center"> | |
| <div></div> | |
| </div> | |
| <div class="editor-controls-right"> | |
| <div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="footer-spacer"></div> | |
| <div id="footer"> | |
| <div class="line-separator"> </div> | |
| <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/images/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/js/utils.js"></script> | |
| <script src="media/js/engine.js"></script> | |
| <script src="media/js/parameters.js"></script> | |
| <script src="media/js/plugins.js"></script> | |
| <script src="media/js/image-modifiers.js"></script> | |
| <script src="media/js/auto-save.js"></script> | |
| <script src="media/js/searchable-models.js"></script> | |
| <script src="media/js/main.js"></script> | |
| <script src="media/js/themes.js"></script> | |
| <script src="media/js/dnd.js"></script> | |
| <script src="media/js/image-editor.js"></script> | |
| <script src="media/js/image-modal.js"></script> | |
| <script> | |
| async function init() { | |
| await initSettings() | |
| await getModels() | |
| await getAppConfig() | |
| await loadUIPlugins() | |
| await loadModifiers() | |
| await getSystemInfo() | |
| SD.init({ | |
| events: { | |
| statusChange: setServerStatus, | |
| idle: onIdle | |
| } | |
| }) | |
| playSound() | |
| } | |
| init() | |
| </script> | |
| </html> | |