forked from extern/easydiffusion
373 lines
24 KiB
HTML
373 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Stable Diffusion UI</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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/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/drawingboard.min.css">
|
|
<link rel="stylesheet" href="/media/css//jquery-confirm.min.css">
|
|
<script src="/media/js/jquery-3.6.1.min.js"></script>
|
|
<script src="/media/js/jquery-confirm.min.js"></script>
|
|
<script src="/media/js/drawingboard.min.js"></script>
|
|
<script src="/media/js/marked.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="top-nav">
|
|
<div id="logo">
|
|
<h1>
|
|
Stable Diffusion UI
|
|
<small>v2.4.17 <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">
|
|
<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">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 right">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> <input id="init_image" name="init_image" type="file" /><br/>
|
|
|
|
<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"></span>
|
|
<button class="init_image_clear image_clear_btn">X</button>
|
|
</div>
|
|
|
|
<br/>
|
|
<input id="enable_mask" name="enable_mask" type="checkbox">
|
|
<label for="enable_mask">
|
|
In-Painting (beta)
|
|
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Inpainting" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about InPainting</span></i></a>
|
|
<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" class="primaryButton">Make Image</button>
|
|
<button id="stopImage" class="secondaryButton">Stop All</button>
|
|
</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 right">
|
|
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="30000" 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>
|
|
<select id="stable_diffusion_model" name="stable_diffusion_model">
|
|
<!-- <option value="sd-v1-4" selected>sd-v1-4</option> -->
|
|
</select>
|
|
<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 right">Click to learn more about custom models</span></i></a>
|
|
</td></tr>
|
|
<tr class="pl-5"><td><label for="vae_model">Custom VAE:</i></label></td><td>
|
|
<select id="vae_model" name="vae_model">
|
|
<!-- <option value="" selected>None</option> -->
|
|
</select>
|
|
<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 right">Click to learn more about VAEs</span></i></a>
|
|
</td></tr>
|
|
<tr id="samplerSelection" class="pl-5"><td><label for="sampler">Sampler:</label></td><td>
|
|
<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>
|
|
<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 right">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>
|
|
</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="10" 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></span>
|
|
<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>
|
|
</select>
|
|
</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, and slower image creation)</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 <small>(uses GFPGAN)</small></label></li>
|
|
<li class="pl-5">
|
|
<input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Upscale image by 4x with </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>
|
|
</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-tools">
|
|
<button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
|
|
</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 right">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 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">
|
|
<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"></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="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/parameters.js"></script>
|
|
<script src="media/js/plugins.js"></script>
|
|
<script src="media/js/inpainting-editor.js"></script>
|
|
<script src="media/js/image-modifiers.js"></script>
|
|
<script src="media/js/auto-save.js"></script>
|
|
<script src="media/js/main.js"></script>
|
|
<script src="media/js/themes.js"></script>
|
|
<script src="media/js/dnd.js"></script>
|
|
<script>
|
|
async function init() {
|
|
await initSettings()
|
|
await getModels()
|
|
await getDiskPath()
|
|
await getAppConfig()
|
|
await loadModifiers()
|
|
await loadUIPlugins()
|
|
await getSystemInfo()
|
|
|
|
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
|
|
healthCheck()
|
|
|
|
playSound()
|
|
}
|
|
|
|
init()
|
|
</script>
|
|
</html>
|