2022-09-02 10:28:36 +02:00
<!DOCTYPE html>
< html >
2022-09-23 16:18:48 +02:00
< head >
2022-11-09 04:22:14 +01:00
< title > Stable Diffusion UI< / title >
2022-09-02 10:28:36 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2022-10-18 16:48:56 +02:00
< 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" >
2022-10-18 17:36:56 +02:00
< link rel = "stylesheet" href = "/media/css/fonts.css?v=1" >
2022-10-18 16:48:56 +02:00
< link rel = "stylesheet" href = "/media/css/themes.css?v=1" >
2022-10-29 14:40:23 +02:00
< link rel = "stylesheet" href = "/media/css/main.css?v=4" >
< link rel = "stylesheet" href = "/media/css/auto-save.css?v=3" >
< link rel = "stylesheet" href = "/media/css/modifier-thumbnails.css?v=3" >
2022-10-18 18:10:17 +02:00
< link rel = "stylesheet" href = "/media/css/fontawesome-all.min.css?v=1" >
2022-10-18 16:48:56 +02:00
< link rel = "stylesheet" href = "/media/css/drawingboard.min.css" >
< script src = "/media/js/jquery-3.6.1.min.js" > < / script >
< script src = "/media/js/drawingboard.min.js" > < / script >
2022-09-23 16:18:48 +02:00
< / head >
2022-09-02 10:28:36 +02:00
< body >
< div id = "container" >
2022-09-23 13:37:54 +02:00
< div id = "top-nav" >
< div id = "logo" >
2022-10-29 08:59:28 +02:00
< h1 > Stable Diffusion UI < small > v2.3.9 < span id = "updateBranchLabel" > < / span > < / small > < / h1 >
2022-09-23 13:37:54 +02:00
< / div >
2022-11-02 07:03:05 +01:00
< 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" >
2022-11-09 04:54:41 +01:00
< span id = "tab-main" class = "tab active" >
2022-11-02 07:03:05 +01:00
< span > < i class = "fa fa-image icon" > < / i > Generate< / span >
< / span >
2022-11-09 04:54:41 +01:00
< span id = "tab-settings" class = "tab" >
2022-11-02 07:03:05 +01:00
< span > < i class = "fa fa-gear icon" > < / i > Settings< / span >
< / span >
2022-11-09 04:54:41 +01:00
< span id = "tab-about" class = "tab" >
2022-11-02 07:03:05 +01:00
< span > < i class = "fa fa-circle-info icon" > < / i > About< / span >
< / span >
< / div >
2022-09-23 13:37:54 +02:00
< / div >
2022-11-09 04:54:41 +01:00
< div id = "tab-content-wrapper" >
< div id = "tab-content-main" class = "tab-content active flex-container" >
2022-11-02 07:03:05 +01:00
< div id = "editor" >
2022-09-02 10:28:36 +02:00
< div id = "editor-inputs" >
< div id = "editor-inputs-prompt" class = "row" >
2022-10-17 10:15:08 +02:00
< label for = "prompt" > < b > Enter Prompt< / b > < / label > < small > or< / small > < button id = "promptsFromFileBtn" > Load from a file< / button >
2022-09-02 10:28:36 +02:00
< textarea id = "prompt" class = "col-free" > a photograph of an astronaut riding a horse< / textarea >
2022-10-07 20:16:56 +02:00
< input id = "prompt_from_file" name = "prompt_from_file" type = "file" / > <!-- hidden -->
2022-09-02 10:28:36 +02:00
2022-10-17 10:15:08 +02:00
< label for = "negative_prompt" class = "collapsible" id = "negative_prompt_handle" > Negative Prompt < small > (optional)< / small > < / label >
< div class = "collapsible-content" >
< input id = "negative_prompt" name = "negative_prompt" placeholder = "list the things to remove from the image (e.g. fog, green)" >
< / div >
< / div >
2022-10-14 19:31:23 +02:00
2022-09-02 10:28:36 +02:00
< div id = "editor-inputs-init-image" class = "row" >
2022-10-17 10:15:08 +02:00
< label for = "init_image" > Initial Image (img2img) < small > (optional)< / small > < / label > < input id = "init_image" name = "init_image" type = "file" / > < br / >
2022-09-15 19:59:55 +02:00
2022-09-02 10:28:36 +02:00
< div id = "init_image_preview_container" class = "image_preview_container" >
2022-10-17 08:10:01 +02:00
< 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 >
2022-09-02 10:28:36 +02:00
2022-09-15 19:59:55 +02:00
< br / >
2022-09-24 14:01:36 +02:00
< 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 >
2022-09-15 19:59:55 +02:00
< div id = "inpaintingEditor" > < / div >
2022-09-02 10:28:36 +02:00
< / div >
< / div >
< div id = "editor-inputs-tags-container" class = "row" >
2022-09-24 12:49:59 +02:00
< label > Image Modifiers: < small > (click an Image Modifier to remove it)< / small > < / label >
2022-09-22 17:01:30 +02:00
< div id = "editor-inputs-tags-list" > < / div >
2022-09-02 10:28:36 +02:00
< / div >
< button id = "makeImage" > Make Image< / button >
2022-09-27 14:39:07 +02:00
< button id = "stopImage" class = "secondaryButton" > Stop All< / button >
2022-09-02 10:28:36 +02:00
< / div >
2022-11-02 07:03:05 +01:00
< span class = "line-separator" > < / span >
2022-09-02 10:28:36 +02:00
2022-11-02 07:03:05 +01:00
< div id = "editor-settings" class = "settings-box" >
2022-10-22 02:44:04 +02:00
< h4 class = "collapsible" >
Image Settings
2022-11-02 07:03:05 +01:00
< i id = "reset-image-settings" class = "fa-solid fa-arrow-rotate-left section-button" >
2022-11-09 04:22:14 +01:00
< span class = "simple-tooltip left" >
2022-10-22 02:44:04 +02:00
Reset Image Settings
< / span >
< / i >
< / h4 >
2022-11-02 07:03:05 +01:00
< div id = "editor-settings-entries" class = "collapsible-content" >
< div > < table >
2022-10-17 08:10:01 +02:00
< tr > < b class = "settings-subheader" > Image Settings< / b > < / tr >
2022-10-19 18:28:51 +02:00
< tr class = "pl-5" > < td > < label for = "seed" > Seed:< / label > < / td > < td > < input id = "seed" name = "seed" size = "10" value = "30000" > < input id = "random_seed" name = "random_seed" type = "checkbox" checked > < label for = "random_seed" > Random< / label > < / td > < / tr >
2022-10-17 08:10:01 +02:00
< 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" > < label > < small > (total)< / small > < / label > < input id = "num_outputs_parallel" name = "num_outputs_parallel" value = "1" size = "1" > < 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 >
2022-10-15 01:36:29 +02:00
< select id = "stable_diffusion_model" name = "stable_diffusion_model" >
<!-- <option value="sd - v1 - 4" selected>sd - v1 - 4</option> -->
< / select >
2022-10-17 08:10:01 +02:00
< / td > < / tr >
< tr id = "samplerSelection" class = "pl-5" > < td > < label for = "sampler" > Sampler:< / label > < / td > < td >
2022-10-15 01:36:29 +02:00
< 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 >
2022-10-17 08:10:01 +02:00
< / td > < / tr >
< tr class = "pl-5" > < td > < label > Image Size: < / label > < / td > < td >
2022-10-15 01:36:29 +02:00
< select id = "width" name = "width" value = "512" >
< option value = "128" > 128 (*)< / option >
< option value = "192" > 192< / option >
< option value = "256" > 256 (*)< / option >
< option value = "320" > 320< / option >
< option value = "384" > 384< / option >
< option value = "448" > 448< / option >
< option value = "512" selected > 512 (*)< / option >
< option value = "576" > 576< / option >
< option value = "640" > 640< / option >
< option value = "704" > 704< / option >
< option value = "768" > 768 (*)< / option >
< option value = "832" > 832< / option >
< option value = "896" > 896< / option >
< option value = "960" > 960< / option >
< option value = "1024" > 1024 (*)< / option >
< 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 >
2022-10-17 08:10:01 +02:00
< / 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" > < / 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" > < / 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" > < br / > < / td > < / tr > < / span >
< tr class = "pl-5" > < td > < label for = "output_format" > Output Format:< / label > < / td > < td >
2022-10-15 01:36:29 +02:00
< select id = "output_format" name = "output_format" >
< option value = "jpeg" selected > jpeg< / option >
< option value = "png" > png< / option >
< / select >
2022-10-17 08:10:01 +02:00
< / td > < / tr >
2022-11-02 07:03:05 +01:00
< / table > < / div >
2022-09-23 13:37:54 +02:00
2022-11-02 07:03:05 +01:00
< div > < ul >
2022-09-23 13:37:54 +02:00
< li > < b class = "settings-subheader" > Render Settings< / b > < / li >
2022-10-17 08:10:01 +02:00
< 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, slightly slower image creation)< / small > < / label > < / li >
2022-09-23 13:37:54 +02:00
< 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" >
2022-10-17 08:10:01 +02:00
< input id = "use_upscale" name = "use_upscale" type = "checkbox" > < label for = "use_upscale" > Upscale image by 4x with < / label >
2022-09-23 13:37:54 +02:00
< select id = "upscale_model" name = "upscale_model" >
< option value = "RealESRGAN_x4plus" selected > RealESRGAN_x4plus< / option >
< option value = "RealESRGAN_x4plus_anime_6B" > RealESRGAN_x4plus_anime_6B< / option >
< / select >
2022-09-03 17:52:56 +02:00
< / li >
2022-09-23 13:37:54 +02:00
< li class = "pl-5" > < input id = "show_only_filtered_image" name = "show_only_filtered_image" type = "checkbox" checked > < label for = "show_only_filtered_image" > Show only the corrected/upscaled image< / label > < / li >
2022-11-02 07:03:05 +01:00
< / ul > < / div >
< / div >
2022-09-02 10:28:36 +02:00
< / div >
2022-11-02 07:03:05 +01:00
< span class = "line-separator" > < / span >
< div id = "editor-modifiers" >
< h4 class = "collapsible" >
Image Modifiers
< i id = "modifier-settings-btn" class = "fa-solid fa-gear section-button" >
2022-11-09 04:22:14 +01:00
< span class = "simple-tooltip left" >
2022-11-02 07:03:05 +01:00
Add Custom Modifiers
< / span >
< / i >
< / h4 >
2022-09-02 10:28:36 +02:00
< div id = "editor-modifiers-entries" class = "collapsible-content" >
2022-10-21 11:24:45 +02:00
< 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 >
2022-09-02 10:28:36 +02:00
< / div >
< / div >
< / div >
2022-09-23 13:37:54 +02:00
< div id = "preview" class = "col-free" >
2022-09-27 14:39:07 +02:00
< 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! :)
2022-09-23 13:37:54 +02:00
< / div >
2022-09-27 14:39:07 +02:00
< div id = "preview-tools" >
< button id = "clear-all-previews" class = "secondaryButton" > < i class = "fa-solid fa-trash-can" > < / i > Clear All< / button >
2022-09-02 10:28:36 +02:00
< / div >
< / div >
2022-11-09 04:54:41 +01:00
< / div >
< div id = "tab-content-settings" class = "tab-content" >
< div id = "system-settings" class = "tab-content-inner" >
< h1 > System Settings< / h1 >
< table class = "form-table" > < / table >
< / div >
< / div >
< div id = "tab-content-about" class = "tab-content" >
< div class = "tab-content-inner" >
< h1 > About< / h1 >
< ul id = "community-links" >
< li > < a href = "https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" 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 >
< / div >
2022-10-29 03:25:54 +02:00
< / div >
< / div >
2022-11-09 04:54:41 +01:00
2022-09-02 10:28:36 +02:00
2022-10-29 01:48:32 +02:00
< div id = "save-settings-config" class = "popup" >
2022-10-17 09:14:05 +02:00
< div >
2022-10-29 01:48:32 +02:00
< i class = "close-button fa-solid fa-xmark" > < / i >
2022-10-17 09:14:05 +02:00
< h1 > Save Settings Configuration< / h1 >
2022-10-20 06:12:01 +02:00
< p > Select which settings should be remembered when restarting the browser< / p >
2022-10-29 03:25:54 +02:00
< table id = "save-settings-config-table" class = "form-table" >
2022-10-17 09:14:05 +02:00
< / table >
< / div >
< / div >
2022-10-29 01:48:32 +02:00
< div id = "modifier-settings-config" class = "popup" >
2022-10-21 10:38:16 +02:00
< div >
2022-10-29 01:48:32 +02:00
< i class = "close-button fa-solid fa-xmark" > < / i >
2022-10-21 10:38:16 +02:00
< 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 >
2022-10-21 18:05:20 +02:00
< 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 >
2022-10-21 10:38:16 +02:00
< / div >
< / div >
2022-09-02 10:28:36 +02:00
< div class = "line-separator" > < / div >
2022-11-02 07:03:05 +01:00
< div id = "footer" >
2022-10-18 16:48:56 +02:00
< p > If you found this project useful and want to help keep it alive, please < a href = "https://ko-fi.com/cmdr2_stablediffusion_ui" target = "_blank" > < img src = "/media/images/kofi.png" id = "coffeeButton" > < / a > to help cover the cost of development and maintenance! Thank you for your support!< / p >
2022-09-05 14:33:19 +02:00
< p > Please feel free to join the < a href = "https://discord.com/invite/u9yhsFmEkB" target = "_blank" > discord community< / a > or < a href = "https://github.com/cmdr2/stable-diffusion-ui/issues" target = "_blank" > file an issue< / a > if you have any problems or suggestions in using this interface.< / p >
2022-09-02 10:28:36 +02:00
< div id = "footer-legal" >
< p > < b > Disclaimer:< / b > The authors of this project are not responsible for any content generated using this interface.< / p >
< p > This license of this software forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm, < br / > spread misinformation and target vulnerable groups. For the full list of restrictions please read < a href = "https://github.com/cmdr2/stable-diffusion-ui/blob/main/LICENSE" target = "_blank" > the license< / a > .< / p >
< p > By using this software, you consent to the terms and conditions of the license.< / p >
< / div >
< / div >
< / div >
< / body >
2022-10-29 03:25:54 +02:00
< script src = "media/js/parameters.js?v=1" > < / script >
2022-10-19 16:20:05 +02:00
< script src = "media/js/plugins.js?v=1" > < / script >
2022-10-25 07:33:07 +02:00
< script src = "media/js/utils.js?v=4" > < / script >
2022-10-18 18:39:11 +02:00
< script src = "media/js/inpainting-editor.js?v=1" > < / script >
2022-10-29 14:40:23 +02:00
< script src = "media/js/image-modifiers.js?v=4" > < / script >
< script src = "media/js/auto-save.js?v=3" > < / script >
< script src = "media/js/main.js?v=7" > < / script >
< script src = "media/js/themes.js?v=3" > < / script >
2022-09-02 10:28:36 +02:00
< script >
async function init() {
2022-10-20 06:12:01 +02:00
await initSettings()
await getModels()
2022-09-02 10:28:36 +02:00
await getDiskPath()
2022-09-09 17:04:32 +02:00
await getAppConfig()
2022-10-20 06:12:01 +02:00
await loadModifiers()
2022-10-19 18:04:40 +02:00
await loadUIPlugins()
2022-09-02 10:28:36 +02:00
setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
healthCheck()
2022-09-09 17:35:24 +02:00
playSound()
2022-09-02 10:28:36 +02:00
}
init()
< / script >
< / html >
