Merge pull request #614 from cmdr2/beta

Beta

3rd-PARTY-LICENSES

@@ -0,0 +1,27 @@
+jquery-confirm
+==============
+https://craftpip.github.io/jquery-confirm/
+
+jquery-confirm is licensed under the MIT license:
+
+  The MIT License (MIT)
+
+  Copyright (c) 2019 Boniface Pereira
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

CHANGES.md

@@ -0,0 +1,54 @@
+# What's new?
+
+## v2.4
+### Major Changes
+- **Automatic scanning for malicious model files** - using `picklescan`, and support for `safetensor` model format. Thanks @JeLuf
+- **Support for custom VAE models**. You can place your VAE files in the `models/vae` folder, and refresh the browser page to use them. More info: https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder
+- **Experimental support for multiple GPUs!** It should work automatically. Just open one browser tab per GPU, and spread your tasks across your GPUs. For e.g. open our UI in two browser tabs if you have two GPUs. You can customize which GPUs it should use in the "Settings" tab, otherwise let it automatically pick the best GPUs. Thanks @madrang . More info: https://github.com/cmdr2/stable-diffusion-ui/wiki/Run-on-Multiple-GPUs
+- **Image Editor** - for drawing simple images for guiding the AI. Thanks @mdiller
+- **Cleaner UI design** - Show settings and help in new tabs, instead of dropdown popups (which were buggy). Thanks @mdiller
+- **Progress bar.** Thanks @mdiller
+- **Custom Image Modifiers** - You can now save your custom image modifiers! Your saved modifiers can include special characters like `{}, (), [], |`
+- Drag and Drop **text files generated from previously saved images**, and copy settings to clipboard. Thanks @madrang
+- Paste settings from clipboard. Thanks @JeLuf
+- Bug fixes to reduce the chances of tasks crashing during long multi-hour runs (chrome can put long-running background tabs to sleep). Thanks @JeLuf and @madrang
+- **Improved documentation.** Thanks @JeLuf and @jsuelwald
+- Improved the codebase for dealing with system settings and UI settings. Thanks @mdiller
+- Help instructions next to some setttings, and in the tab
+- Show system info in the settings tab
+- Keyboard shortcut: Ctrl+Enter to start a task
+- Configuration to prevent the browser from opening on startup
+- Lots of minor bug fixes
+- A `What's New?` tab in the UI
+- Ask for a confimation before clearing the results pane or stopping a render task. The dialog can be skipped by holding down the shift key while clicking on the button.
+- Show the network addresses of the server in the systems setting dialog
+- Support loading models in the safetensor format, for improved safety
+
+### Detailed changelog
+* 2.4.18 - 5 Dec 2022 - Make JPEG Output quality user controllable. Thanks @JeLuf
+* 2.4.18 - 5 Dec 2022 - Support loading models in the safetensor format, for improved safety. Thanks @JeLuf
+* 2.4.18 - 1 Dec 2022 - Image Editor, for drawing simple images for guiding the AI. Thanks @mdiller
+* 2.4.18 - 1 Dec 2022 - Disable an image modifier temporarily by right-clicking it. Thanks @patriceac
+* 2.4.17 - 30 Nov 2022 - Scroll to generated image. Thanks @patriceac
+* 2.4.17 - 30 Nov 2022 - Show the network addresses of the server in the systems setting dialog. Thanks @JeLuf
+* 2.4.17 - 30 Nov 2022 - Fix a bug where GFPGAN wouldn't work properly when multiple GPUs tried to run it at the same time. Thanks @madrang
+* 2.4.17 - 30 Nov 2022 - Confirm before stopping or clearing all the tasks. Thanks @JeLuf
+* 2.4.16 - 29 Nov 2022 - Bug fixes for SD 2.0 - remove the need for patching, default to SD 1.4 model if trying to load an SD2 model in SD1.4.
+* 2.4.15 - 25 Nov 2022 - Experimental support for SD 2.0. Uses lots of memory, not optimized, probably GPU-only.
+* 2.4.14 - 22 Nov 2022 - Change the backend to a custom fork of Stable Diffusion
+* 2.4.13 - 21 Nov 2022 - Change the modifier weight via mouse wheel, drag to reorder selected modifiers, and some more modifier-related fixes. Thanks @patriceac
+* 2.4.12 - 21 Nov 2022 - Another fix for improving how long images take to generate. Reduces the time taken for an enqueued task to start processing.
+* 2.4.11 - 21 Nov 2022 - Installer improvements: avoid crashing if the username contains a space or special characters, allow moving/renaming the folder after installation on Windows, whitespace fix on git apply
+* 2.4.11 - 21 Nov 2022 - Validate inputs before submitting the Image request
+* 2.4.11 - 19 Nov 2022 - New system settings to manage the network config (port number and whether to only listen on localhost)
+* 2.4.11 - 19 Nov 2022 - Address a regression in how long images take to generate. Use the previous code for moving a model to CPU. This improves things by a second or two per image, but we still have a regression (investigating).
+* 2.4.10 - 18 Nov 2022 - Textarea for negative prompts. Thanks @JeLuf
+* 2.4.10 - 18 Nov 2022 - Improved design for Settings, and rounded toggle buttons instead of checkboxes for a more modern look. Thanks @mdiller
+* 2.4.9 - 18 Nov 2022 - Add Picklescan - a scanner for malicious model files. If it finds a malicious file, it will halt the web application and alert the user. Thanks @JeLuf
+* 2.4.8 - 18 Nov 2022 - A `Use these settings` button to use the settings from a previously generated image task. Thanks @patriceac
+* 2.4.7 - 18 Nov 2022 - Don't crash if a VAE file fails to load
+* 2.4.7 - 17 Nov 2022 - Fix a bug where Face Correction (GFPGAN) would fail on cuda:N (i.e. GPUs other than cuda:0), as well as fail on CPU if the system had an incompatible GPU.
+* 2.4.6 - 16 Nov 2022 - Fix a regression in VRAM usage during startup, which caused 'Out of Memory' errors when starting on GPUs with 4gb (or less) VRAM
+* 2.4.5 - 16 Nov 2022 - Add checkbox for "Open browser on startup".
+* 2.4.5 - 16 Nov 2022 - Add a directory for core plugins that ship with Stable Diffusion UI by default.
+* 2.4.5 - 16 Nov 2022 - Add a "What's New?" tab as a core plugin, which fetches the contents of CHANGES.md from the app's release branch.

CONTRIBUTING.md

@@ -13,12 +13,11 @@ If you would like to contribute to this project, there is a discord for dicussio
 This is in-flux, but one way to get a development environment running for editing the UI of this project is:
 (swap `.sh` or `.bat` in instructions depending on your environment, and be sure to adjust any paths to match where you're working)
 
-1) `git clone` the repository, e.g. to `/projects/stable-diffusion-ui-repo`
-2) Download the pre-built end user archive from the link on github, and extract it, e.g. to `/projects/stable-diffusion-ui-archive`
-3) `cd /projects/stable-diffusion-ui-archive` and run the script to set up and start the project, e.g. `start.sh`
-4) Check you can view and generate images on `localhost:9000`
-5) Close the server, and edit `/projects/stable-diffusion-ui-archive/scripts/on_env_start.sh`
-6) Comment out the lines near the bottom that copies the `files/ui` folder, e.g:
+1) Install the project to a new location using the [usual installation process](https://github.com/cmdr2/stable-diffusion-ui#installation), e.g. to `/projects/stable-diffusion-ui-archive`
+2) Start the newly installed project, and check that you can view and generate images on `localhost:9000`
+3) Next, please clone the project repository using `git clone` (e.g. to `/projects/stable-diffusion-ui-repo`)
+4) Close the server (started in step 2), and edit `/projects/stable-diffusion-ui-archive/scripts/on_env_start.sh` (or `on_env_start.bat`)
+5) Comment out the lines near the bottom that copies the `files/ui` folder, e.g:
   
   for `.sh`
 ```
@@ -33,23 +32,20 @@ REM @xcopy sd-ui-files\ui ui /s /i /Y
 REM @copy sd-ui-files\scripts\on_sd_start.bat scripts\ /Y
 REM @copy "sd-ui-files\scripts\Start Stable Diffusion UI.cmd" . /Y
 ``` 
-7) Comment out the line at the top of `/projects/stable-diffusion-ui-archive/scripts/on_sd_start.sh` that copies `on_env_start`. For e.g. `@copy sd-ui-files\scripts\on_env_start.bat scripts\ /Y`
+6) Next, comment out the line at the top of `/projects/stable-diffusion-ui-archive/scripts/on_sd_start.sh` (or `on_sd_start.bat`) that copies `on_env_start`. For e.g. `@rem @copy sd-ui-files\scripts\on_env_start.bat scripts\ /Y`
 8) Delete the current `ui` folder at `/projects/stable-diffusion-ui-archive/ui`
 9) Now make a symlink between the repository clone (where you will be making changes) and this archive (where you will be running stable diffusion):
 `ln -s /projects/stable-diffusion-ui-repo/ui /projects/stable-diffusion-ui-archive/ui`
 or for Windows
-`mklink /D \projects\stable-diffusion-ui-archive\ui \projects\stable-diffusion-ui-repo\ui` (link name first, source repo dir second)
-9) Run the archive again `start.sh` and ensure you can still use the UI.
+`mklink /J \projects\stable-diffusion-ui-archive\ui \projects\stable-diffusion-ui-repo\ui` (link name first, source repo dir second)
+9) Run the project again (like in step 2) and ensure you can still use the UI.
 10) Congrats, now any changes you make in your repo `ui` folder are linked to this running archive of the app and can be previewed in the browser.
+11) Please update CHANGES.md in your pull requests.
 
 Check the `ui/frontend/build/README.md` for instructions on running and building the React code.
 
 ## Development environment for Installer changes
 Build the Windows installer using Windows, and the Linux installer using Linux. Don't mix the two, and don't use WSL. An Ubuntu VM is fine for building the Linux installer on a Windows host.
 
-1. Install Miniconda 3 or Anaconda.
-2. Install `conda install -c conda-forge -y conda-pack`
-3. Open the Anaconda Prompt. Do not use WSL if you're building for Windows.
-4. Run `build.bat` or `./build.sh` depending on whether you're in Windows or Linux.
-5. Compress the `stable-diffusion-ui` folder created inside the `dist` folder. Make a `zip` for Windows, and `tar.xz` for Linux (smaller files, and Linux users already have tar).
-6. Make a new GitHub release and upload the Windows and Linux installer builds.
+1. Run `build.bat` or `./build.sh` depending on whether you're in Windows or Linux.
+2. Make a new GitHub release and upload the Windows and Linux installer builds created inside the `dist` folder.

NSIS/README.md

@@ -0,0 +1 @@
+Scripts to be used with the Nullsoft Scriptable Installation System

NSIS/sdui.nsi

@@ -0,0 +1,265 @@
+; Script generated by the HM NIS Edit Script Wizard.
+
+Target x86-unicode
+Unicode True
+!AddPluginDir /x86-unicode "."
+; HM NIS Edit Wizard helper defines
+!define PRODUCT_NAME "Stable Diffusion UI"
+!define PRODUCT_VERSION "Installer 2.35"
+!define PRODUCT_PUBLISHER "cmdr2 and contributors"
+!define PRODUCT_WEB_SITE "https://stable-diffusion-ui.github.io"
+!define PRODUCT_DIR_REGKEY "Software\Microsoft\Cmdr2\App Paths\installer.exe"
+
+; MUI 1.67 compatible ------
+!include "MUI.nsh"
+!include "LogicLib.nsh"
+!include "nsDialogs.nsh"
+
+Var Dialog
+Var Label
+Var Button
+
+Var InstDirLen
+Var LongPathsEnabled
+Var AccountType
+
+;---------------------------------------------------------------------------------------------------------
+; This function returns the number of spaces in a string.
+; The string is passed on the stack (using Push $STRING)
+; The result is also returned on the stack and can be consumed with Pop $var
+; https://nsis.sourceforge.io/Check_for_spaces_in_a_directory_path
+Function CheckForSpaces
+  Exch $R0
+  Push $R1
+  Push $R2
+  Push $R3
+  StrCpy $R1 -1
+  StrCpy $R3 $R0
+  StrCpy $R0 0
+  loop:
+    StrCpy $R2 $R3 1 $R1
+    IntOp $R1 $R1 - 1
+    StrCmp $R2 "" done
+    StrCmp $R2 " " 0 loop
+    IntOp $R0 $R0 + 1
+  Goto loop
+  done:
+  Pop $R3
+  Pop $R2
+  Pop $R1
+  Exch $R0
+FunctionEnd
+
+;---------------------------------------------------------------------------------------------------------
+; The function DirectoryLeave is called after the user chose the installation directory.
+; If it calls "abort", the user is sent back to choose a different directory.
+Function DirectoryLeave
+   ; check whether the installation directory path is longer than 30 characters.
+   ; If yes, we suggest to the user to enable long filename support
+   ;----------------------------------------------------------------------------
+   StrLen $InstDirLen "$INSTDIR"
+
+   ; Check whether the registry key that allows for >260 characters in a path name is set
+   ReadRegStr $LongPathsEnabled HKLM "SYSTEM\CurrentControlSet\Control\FileSystem" "LongPathsEnabled"
+
+   ${If} $InstDirLen > 30
+   ${AndIf} $LongPathsEnabled == "0"
+      ; Check whether we're in the Admin group
+      UserInfo::GetAccountType
+      Pop $AccountType
+
+      ${If} $AccountType == "Admin"
+      ${AndIf} ${Cmd} `MessageBox MB_YESNO|MB_ICONQUESTION 'The path name is too long. $\n$\nYou can either enable long file name support in Windows,$\nor you can go back and choose a different path.$\n$\nFor details see: shorturl.at/auBD1$\n$\nEnable long path name support in Windows?' IDYES`
+          ; Enable long path names
+          WriteRegDWORD HKLM "SYSTEM\CurrentControlSet\Control\FileSystem" "LongPathsEnabled" 1
+      ${Else}
+          MessageBox MB_OK|MB_ICONEXCLAMATION "Installation path name too long. The installation path must not have more than 30 characters."
+          abort
+      ${EndIf}
+   ${EndIf}
+   
+   ; Check for spaces in the installation directory path.
+   ; ----------------------------------------------------
+
+   ; $R0 = CheckForSpaces( $INSTDIR )
+   Push $INSTDIR # Input string (install path).
+     Call CheckForSpaces
+   Pop $R0 # The function returns the number of spaces found in the input string.
+
+   ; Check if any spaces exist in $INSTDIR.
+   ${If} $R0 != 0
+     ; Plural if more than 1 space in $INSTDIR.
+     ; If $R0 == 1: $R1 = ""; else: $R1 = "s"
+     StrCmp $R0 1 0 +3
+       StrCpy $R1 ""
+     Goto +2
+       StrCpy $R1 "s"
+
+     ; Show message box then take the user back to the Directory page.
+     MessageBox MB_OK|MB_ICONEXCLAMATION "Error: The Installaton directory \
+     has $R0 space character$R1.$\nPlease choose an installation directory without space characters."
+     Abort
+   ${EndIf}
+   
+   ; Check for NTFS filesystem. Installations on FAT fail.
+   ; -----------------------------------------------------
+   StrCpy $5 $INSTDIR 3
+   System::Call 'Kernel32::GetVolumeInformation(t "$5",t,i ${NSIS_MAX_STRLEN},*i,*i,*i,t.r1,i ${NSIS_MAX_STRLEN})i.r0'
+   ${If} $0 <> 0
+   ${AndIf} $1 == "NTFS"
+       MessageBox mb_ok "$5 has filesystem type '$1'.$\nOnly NTFS filesystems are supported.$\nPlease choose a different drive."
+       Abort
+   ${EndIf}
+
+FunctionEnd
+
+
+;---------------------------------------------------------------------------------------------------------
+; Open the MS download page in a browser and enable the [Next] button
+Function MSMediaFeaturepack
+    ExecShell "open" "https://www.microsoft.com/en-us/software-download/mediafeaturepack"
+
+    GetDlgItem $0 $HWNDPARENT 1
+    EnableWindow $0 1
+FunctionEnd
+
+;---------------------------------------------------------------------------------------------------------
+; Install the MS Media Feature Pack, if it is missing (e.g. on Windows 10 N)
+Function MediaPackDialog
+    !insertmacro MUI_HEADER_TEXT "Windows Media Feature Pack" "Required software module is missing"
+
+    ; Skip this dialog if mf.dll is installed
+    ${If} ${FileExists} "$WINDIR\system32\mf.dll"
+        Abort
+    ${EndIf}
+    
+    nsDialogs::Create 1018
+    Pop $Dialog
+
+    ${If} $Dialog == error
+	Abort
+    ${EndIf}
+
+    ${NSD_CreateLabel} 0 0 100% 48u "The Windows Media Feature Pack is missing on this computer. It is required for the Stable Diffusion UI.$\nYou can continue the installation after installing the Windows Media Feature Pack."
+    Pop $Label
+ 	
+    ${NSD_CreateButton} 10% 49u 80% 12u "Download Meda Feature Pack from Microsoft"
+    Pop $Button
+
+    GetFunctionAddress $0 MSMediaFeaturePack
+    nsDialogs::OnClick $Button $0
+    GetDlgItem $0 $HWNDPARENT 1
+    EnableWindow $0 0
+    nsDialogs::Show
+FunctionEnd
+
+;---------------------------------------------------------------------------------------------------------
+; MUI Settings
+;---------------------------------------------------------------------------------------------------------
+!define MUI_ABORTWARNING
+!define MUI_ICON "sd.ico"
+
+!define MUI_WELCOMEFINISHPAGE_BITMAP "astro.bmp"
+
+; Welcome page
+!define MUI_WELCOMEPAGE_TEXT "This installer will guide you through the installation of Stable Diffusion UI.$\n$\n\
+Click Next to continue."
+!insertmacro MUI_PAGE_WELCOME
+Page custom MediaPackDialog
+
+; License page
+!insertmacro MUI_PAGE_LICENSE "..\LICENSE"
+!insertmacro MUI_PAGE_LICENSE "..\CreativeML Open RAIL-M License"
+; Directory page
+!define MUI_PAGE_CUSTOMFUNCTION_LEAVE "DirectoryLeave"
+!insertmacro MUI_PAGE_DIRECTORY
+
+; Instfiles page
+!insertmacro MUI_PAGE_INSTFILES 
+
+; Finish page
+!define MUI_FINISHPAGE_RUN "$INSTDIR\Start Stable Diffusion UI.cmd"
+!insertmacro MUI_PAGE_FINISH
+
+; Language files
+!insertmacro MUI_LANGUAGE "English"
+;---------------------------------------------------------------------------------------------------------
+; MUI end
+;---------------------------------------------------------------------------------------------------------
+
+Name "${PRODUCT_NAME} ${PRODUCT_VERSION}"
+OutFile "Install Stable Diffusion UI.exe"
+InstallDir "C:\Stable-Diffusion-UI\"
+InstallDirRegKey HKLM "${PRODUCT_DIR_REGKEY}" ""
+ShowInstDetails show
+
+;---------------------------------------------------------------------------------------------------------
+; List of files to be installed
+Section "MainSection" SEC01
+  SetOutPath "$INSTDIR"
+  File "..\CreativeML Open RAIL-M License"
+  File "..\How to install and run.txt"
+  File "..\LICENSE"
+  File "..\Start Stable Diffusion UI.cmd"
+  SetOutPath "$INSTDIR\scripts"
+  File "..\scripts\bootstrap.bat"
+  File "..\scripts\install_status.txt"
+  File "..\scripts\on_env_start.bat"
+  File "C:\windows\system32\curl.exe"
+  CreateDirectory "$INSTDIR\profile"
+  CreateDirectory "$SMPROGRAMS\Stable Diffusion UI"
+  CreateShortCut "$SMPROGRAMS\Stable Diffusion UI\Start Stable Diffusion UI.lnk" "$INSTDIR\Start Stable Diffusion UI.cmd"
+SectionEnd
+
+;---------------------------------------------------------------------------------------------------------
+; Our installer only needs 25 KB, but once it has run, we need 25 GB
+; So we need to overwrite the automatically detected space requirements.
+; https://nsis.sourceforge.io/Docs/Chapter4.html#4.9.13.7
+; The example in section 4.9.13.7 seems to be wrong: the number
+; needs to be provided in Kilobytes.
+Function .onInit
+   ; Set required size of section 'SEC01' to 25 Gigabytes
+   SectionSetSize ${SEC01} 26214400
+  
+  
+   ; Check system meory size. We need at least 8GB
+   ; ----------------------------------------------------
+
+   ; allocate a few bytes of memory
+   System::Alloc 64
+   Pop $1
+
+   ; Retrieve HW info from the Windows Kernel
+   System::Call "*$1(i64)"
+   System::Call "Kernel32::GlobalMemoryStatusEx(i r1)"
+   ; unpack the data into $R2 - $R10
+   System::Call "*$1(i.r2, i.r3, l.r4, l.r5, l.r6, l.r7, l.r8, l.r9, l.r10)"
+
+   # free up the memory
+   System::Free $1
+
+   ; Result mapping:
+   ; "Structure size: $2 bytes"
+   ; "Memory load: $3%"
+   ; "Total physical memory: $4 bytes"
+   ; "Free physical memory: $5 bytes"
+   ; "Total page file: $6 bytes"
+   ; "Free page file: $7 bytes"
+   ; "Total virtual: $8 bytes"
+   ; "Free virtual: $9 bytes"
+
+   ; Mem size in MB
+   System::Int64Op $4 / 1048576
+   Pop $4
+
+   ${If} $4 < "8000"
+      MessageBox MB_OK|MB_ICONEXCLAMATION "Warning!$\n$\nYour system has less than 8GB of memory (RAM).$\n$\n\
+You can still try to install Stable Diffusion UI,$\nbut it might have problems to start, or run$\nvery slowly."
+   ${EndIf}
+  
+FunctionEnd
+
+
+;Section -Post
+;  WriteRegStr HKLM "${PRODUCT_DIR_REGKEY}" "" "$INSTDIR\installer.exe"
+;SectionEnd

README.md

@@ -3,6 +3,8 @@
 
 [![Discord Server](https://img.shields.io/discord/1014774730907209781?label=Discord)](https://discord.com/invite/u9yhsFmEkB) (for support, and development discussion) | [Troubleshooting guide for common problems](Troubleshooting.md)
 
+New! Experimental support for Stable Diffusion 2.0 is available in beta!
+
 ----
 
 ## Step 1: Download the installer
@@ -28,7 +30,9 @@ The installer will take care of whatever is needed. A friendly [Discord communit
 - **No Dependencies or Technical Knowledge Required**: 1-click install for Windows 10/11 and Linux. *No dependencies*, no need for WSL or Docker or Conda or technical setup. Just download and run!
 - **Clutter-free UI**: a friendly and simple UI, while providing a lot of powerful features
 - Supports "*Text to Image*" and "*Image to Image*"
+- **Stable Diffusion 2.0 support (experimental)** - available in beta channel
 - **Custom Models**: Use your own `.ckpt` file, by placing it inside the `models/stable-diffusion` folder!
+- **Auto scan for malicious models** - uses picklescan to prevent malicious models
 - **Live Preview**: See the image as the AI is drawing it
 - **Task Queue**: Queue up all your ideas, without waiting for the current task to finish
 - **In-Painting**: Specify areas of your image to paint into
@@ -66,12 +70,12 @@ Useful for judging (and stopping) an image quickly, without waiting for it to fi
 # System Requirements
 1. Windows 10/11, or Linux. Experimental support for Mac is coming soon.
 2. An NVIDIA graphics card, preferably with 4GB or more of VRAM. If you don't have a compatible graphics card, it'll automatically run in the slower "CPU Mode".
-3. Minimum 8 GB of RAM.
+3. Minimum 8 GB of RAM and 25GB of disk space.
 
 You don't need to install or struggle with Python, Anaconda, Docker etc. The installer will take care of whatever is needed.
 
 # Installation
-1. **Download** [for Windows](https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.16/stable-diffusion-ui-win64.zip) or [for Linux](https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.16/stable-diffusion-ui-linux.tar.xz).
+1. **Download** [for Windows](https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.4.13/stable-diffusion-ui-windows.zip) or [for Linux](https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.4.13/stable-diffusion-ui-linux.zip).
 
 2. **Extract**:
   - For Windows: After unzipping the file, please move the `stable-diffusion-ui` folder to your `C:` (or any drive like D:, at the top root level), e.g. `C:\stable-diffusion-ui`. This will avoid a common problem with Windows (file path length limits).

build.bat

@@ -34,14 +34,12 @@ echo. > dist\win\stable-diffusion-ui\scripts\install_status.txt
 @rem make the zip
 
 cd dist\win
-call powershell Compress-Archive -Path stable-diffusion-ui -DestinationPath ..\stable-diffusion-ui-win-x64.zip
+call powershell Compress-Archive -Path stable-diffusion-ui -DestinationPath ..\stable-diffusion-ui-windows.zip
 cd ..\..
 
 @REM cd dist\linux-mac
-@REM call powershell Compress-Archive -Path stable-diffusion-ui -DestinationPath ..\stable-diffusion-ui-linux-x64.zip
-@REM call powershell Compress-Archive -Path stable-diffusion-ui -DestinationPath ..\stable-diffusion-ui-linux-arm64.zip
-@REM call powershell Compress-Archive -Path stable-diffusion-ui -DestinationPath ..\stable-diffusion-ui-mac-x64.zip
-@REM call powershell Compress-Archive -Path stable-diffusion-ui -DestinationPath ..\stable-diffusion-ui-mac-arm64.zip
+@REM call powershell Compress-Archive -Path stable-diffusion-ui -DestinationPath ..\stable-diffusion-ui-linux.zip
+@REM call powershell Compress-Archive -Path stable-diffusion-ui -DestinationPath ..\stable-diffusion-ui-mac.zip
 @REM cd ..\..
 
 echo "Build ready. Upload the zip files inside the 'dist' folder."

build.sh

@@ -28,6 +28,7 @@ mkdir -p dist/linux-mac/stable-diffusion-ui/scripts
 
 cp scripts/on_env_start.sh dist/linux-mac/stable-diffusion-ui/scripts/
 cp scripts/bootstrap.sh dist/linux-mac/stable-diffusion-ui/scripts/
+cp scripts/functions.sh dist/linux-mac/stable-diffusion-ui/scripts/
 cp scripts/start.sh dist/linux-mac/stable-diffusion-ui/
 cp LICENSE dist/linux-mac/stable-diffusion-ui/
 cp "CreativeML Open RAIL-M License" dist/linux-mac/stable-diffusion-ui/
@@ -37,14 +38,12 @@ echo "" > dist/linux-mac/stable-diffusion-ui/scripts/install_status.txt
 # make the zip
 
 # cd dist/win
-# zip -r ../stable-diffusion-ui-win-x64.zip stable-diffusion-ui
+# zip -r ../stable-diffusion-ui-windows.zip stable-diffusion-ui
 # cd ../..
 
 cd dist/linux-mac
-zip -r ../stable-diffusion-ui-linux-x64.zip stable-diffusion-ui
-zip -r ../stable-diffusion-ui-linux-arm64.zip stable-diffusion-ui
-zip -r ../stable-diffusion-ui-mac-x64.zip stable-diffusion-ui
-zip -r ../stable-diffusion-ui-mac-arm64.zip stable-diffusion-ui
+zip -r ../stable-diffusion-ui-linux.zip stable-diffusion-ui
+zip -r ../stable-diffusion-ui-mac.zip stable-diffusion-ui
 cd ../..
 
 echo "Build ready. Upload the zip files inside the 'dist' folder."

scripts/Developer Console.cmd

@@ -8,6 +8,8 @@ set PATH=C:\Windows\System32;%PATH%
 if exist "installer" set PATH=%cd%\installer;%cd%\installer\Library\bin;%cd%\installer\Scripts;%cd%\installer\Library\usr\bin;%PATH%
 if exist "installer_files\env" set PATH=%cd%\installer_files\env;%cd%\installer_files\env\Library\bin;%cd%\installer_files\env\Scripts;%cd%\installer_files\Library\usr\bin;%PATH%
 
+set PYTHONPATH=%cd%\installer;%cd%\installer_files\env
+
 @rem activate the installer env
 call conda activate
 
@@ -27,6 +29,18 @@ call conda activate .\stable-diffusion\env
 call where python
 call python --version
 
+@rem set the PYTHONPATH
+cd stable-diffusion
+set SD_DIR=%cd%
+
+cd env\lib\site-packages
+set PYTHONPATH=%SD_DIR%;%cd%
+cd ..\..\..
+echo PYTHONPATH=%PYTHONPATH%
+
+cd ..
+
+@rem done
 echo.
 
 cmd /k

scripts/Start Stable Diffusion UI.cmd

@@ -1,5 +1,6 @@
 @echo off
 
+cd /d %~dp0
 set PATH=C:\Windows\System32;%PATH%
 
 @rem set legacy installer's PATH, if it exists
@@ -11,6 +12,8 @@ call scripts\bootstrap.bat
 @rem set new installer's PATH, if it downloaded any packages
 if exist "installer_files\env" set PATH=%cd%\installer_files\env;%cd%\installer_files\env\Library\bin;%cd%\installer_files\env\Scripts;%cd%\installer_files\Library\usr\bin;%PATH%
 
+set PYTHONPATH=%cd%\installer;%cd%\installer_files\env
+
 @rem Test the bootstrap
 call where git
 call git --version

scripts/bootstrap.bat

@@ -11,6 +11,12 @@ set MAMBA_ROOT_PREFIX=%cd%\installer_files\mamba
 set INSTALL_ENV_DIR=%cd%\installer_files\env
 set LEGACY_INSTALL_ENV_DIR=%cd%\installer
 set MICROMAMBA_DOWNLOAD_URL=https://github.com/cmdr2/stable-diffusion-ui/releases/download/v1.1/micromamba.exe
+set umamba_exists=F
+
+set OLD_APPDATA=%APPDATA%
+set OLD_USERPROFILE=%USERPROFILE%
+set APPDATA=%cd%\installer_files\appdata
+set USERPROFILE=%cd%\profile
 
 @rem figure out whether git and conda needs to be installed
 if exist "%INSTALL_ENV_DIR%" set PATH=%INSTALL_ENV_DIR%;%INSTALL_ENV_DIR%\Library\bin;%INSTALL_ENV_DIR%\Scripts;%INSTALL_ENV_DIR%\Library\usr\bin;%PATH%
@@ -24,14 +30,26 @@ if not exist "%LEGACY_INSTALL_ENV_DIR%\etc\profile.d\conda.sh" (
 call git --version >.tmp1 2>.tmp2
 if "%ERRORLEVEL%" NEQ "0" set PACKAGES_TO_INSTALL=%PACKAGES_TO_INSTALL% git
 
+call "%MAMBA_ROOT_PREFIX%\micromamba.exe" --version >.tmp1 2>.tmp2
+if "%ERRORLEVEL%" EQU "0" set umamba_exists=T
+
 @rem (if necessary) install git and conda into a contained environment
 if "%PACKAGES_TO_INSTALL%" NEQ "" (
     @rem download micromamba
-    if not exist "%MAMBA_ROOT_PREFIX%\micromamba.exe" (
+    if "%umamba_exists%" == "F" (
         echo "Downloading micromamba from %MICROMAMBA_DOWNLOAD_URL% to %MAMBA_ROOT_PREFIX%\micromamba.exe"
 
         mkdir "%MAMBA_ROOT_PREFIX%"
-        call curl -L "%MICROMAMBA_DOWNLOAD_URL%" > "%MAMBA_ROOT_PREFIX%\micromamba.exe"
+        call curl -Lk "%MICROMAMBA_DOWNLOAD_URL%" > "%MAMBA_ROOT_PREFIX%\micromamba.exe"
+
+        if "%ERRORLEVEL%" NEQ "0" (
+            echo "There was a problem downloading micromamba. Cannot continue."
+            pause
+            exit /b
+        )
+
+        mkdir "%APPDATA%"
+        mkdir "%USERPROFILE%"
 
         @rem test the mamba binary
         echo Micromamba version:
@@ -53,3 +71,7 @@ if "%PACKAGES_TO_INSTALL%" NEQ "" (
         exit /b
     )
 )
+
+@rem revert to the old APPDATA. only needed it for bypassing a bug in micromamba (with special characters)
+set APPDATA=%OLD_APPDATA%
+set USERPROFILE=%OLD_USERPROFILE%

scripts/bootstrap.sh

@@ -6,6 +6,9 @@
 
 # This enables a user to install this project without manually installing conda and git.
 
+source ./scripts/functions.sh
+
+set -o pipefail
 
 OS_NAME=$(uname -s)
 case "${OS_NAME}" in
@@ -29,6 +32,7 @@ export MAMBA_ROOT_PREFIX="$(pwd)/installer_files/mamba"
 INSTALL_ENV_DIR="$(pwd)/installer_files/env"
 LEGACY_INSTALL_ENV_DIR="$(pwd)/installer"
 MICROMAMBA_DOWNLOAD_URL="https://micro.mamba.pm/api/micromamba/${OS_NAME}-${OS_ARCH}/latest"
+umamba_exists="F"
 
 # figure out whether git and conda needs to be installed
 if [ -e "$INSTALL_ENV_DIR" ]; then export PATH="$INSTALL_ENV_DIR/bin:$PATH"; fi
@@ -38,15 +42,25 @@ PACKAGES_TO_INSTALL=""
 if [ ! -e "$LEGACY_INSTALL_ENV_DIR/etc/profile.d/conda.sh" ] && [ ! -e "$INSTALL_ENV_DIR/etc/profile.d/conda.sh" ]; then PACKAGES_TO_INSTALL="$PACKAGES_TO_INSTALL conda"; fi
 if ! hash "git" &>/dev/null; then PACKAGES_TO_INSTALL="$PACKAGES_TO_INSTALL git"; fi
 
+if "$MAMBA_ROOT_PREFIX/micromamba" --version &>/dev/null; then umamba_exists="T"; fi
+
 # (if necessary) install git and conda into a contained environment
 if [ "$PACKAGES_TO_INSTALL" != "" ]; then
     # download micromamba
-    if [ ! -e "$MAMBA_ROOT_PREFIX/micromamba" ]; then
+    if [ "$umamba_exists" == "F" ]; then
         echo "Downloading micromamba from $MICROMAMBA_DOWNLOAD_URL to $MAMBA_ROOT_PREFIX/micromamba"
 
         mkdir -p "$MAMBA_ROOT_PREFIX"
         curl -L "$MICROMAMBA_DOWNLOAD_URL" | tar -xvj bin/micromamba -O > "$MAMBA_ROOT_PREFIX/micromamba"
 
+        if [ "$?" != "0" ]; then
+            echo
+            echo "EE micromamba download failed"
+            echo "EE If the lines above contain 'bzip2: Cannot exec', your system doesn't have bzip2 installed"
+            echo "EE If there are network errors, please check your internet setup"
+            fail "micromamba download failed"
+        fi
+
         chmod u+x "$MAMBA_ROOT_PREFIX/micromamba"
 
         # test the mamba binary
@@ -56,15 +70,17 @@ if [ "$PACKAGES_TO_INSTALL" != "" ]; then
 
     # create the installer env
     if [ ! -e "$INSTALL_ENV_DIR" ]; then
-        "$MAMBA_ROOT_PREFIX/micromamba" create -y --prefix "$INSTALL_ENV_DIR"
+        "$MAMBA_ROOT_PREFIX/micromamba" create -y --prefix "$INSTALL_ENV_DIR" || fail "unable to create the install environment"
+    fi
+   
+    if [ ! -e "$INSTALL_ENV_DIR" ]; then
+        fail "There was a problem while installing$PACKAGES_TO_INSTALL using micromamba. Cannot continue."
     fi
 
     echo "Packages to install:$PACKAGES_TO_INSTALL"
 
     "$MAMBA_ROOT_PREFIX/micromamba" install -y --prefix "$INSTALL_ENV_DIR" -c conda-forge $PACKAGES_TO_INSTALL
-
-    if [ ! -e "$INSTALL_ENV_DIR" ]; then
-        echo "There was a problem while installing$PACKAGES_TO_INSTALL using micromamba. Cannot continue."
-        exit
+    if [ "$?" != "0" ]; then
+        fail "Installation of the packages '$PACKAGES_TO_INSTALL' failed."
     fi
 fi

scripts/developer_console.sh

@@ -1,5 +1,7 @@
 #!/bin/bash
 
+cd "$(dirname "${BASH_SOURCE[0]}")"
+
 if [ "$0" == "bash" ]; then
   echo "Opening Stable Diffusion UI - Developer Console.."
   echo ""
@@ -33,7 +35,17 @@ if [ "$0" == "bash" ]; then
   which python
   python --version
 
+  # set the PYTHONPATH
+  cd stable-diffusion
+  SD_PATH=`pwd`
+  export PYTHONPATH="$SD_PATH:$SD_PATH/env/lib/python3.8/site-packages"
+  echo "PYTHONPATH=$PYTHONPATH"
+  cd ..
+
+  # done
+
   echo ""
 else
-  bash --init-file developer_console.sh
+  file_name=$(basename "${BASH_SOURCE[0]}")
+  bash --init-file "$file_name"
 fi

scripts/functions.sh

@@ -0,0 +1,32 @@
+#
+# utility functions for all scripts
+#
+
+fail() {
+    echo
+    echo "EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE"
+    echo
+    if [ "$1" != "" ]; then
+        echo ERROR: $1
+    else
+        echo An error occurred.
+    fi
+    cat <<EOF
+
+Error downloading Stable Diffusion UI. Sorry about that, please try to:
+ 1. Run this installer again.
+ 2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting
+ 3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB
+ 4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues
+
+Thanks!
+
+
+EOF
+    read -p "Press any key to continue"
+    exit 1
+
+}
+
+
+

scripts/on_env_start.bat

@@ -50,7 +50,7 @@ if "%update_branch%"=="" (
     )
 )
 
-@xcopy sd-ui-files\ui ui /s /i /Y
+@xcopy sd-ui-files\ui ui /s /i /Y /q
 @copy sd-ui-files\scripts\on_sd_start.bat scripts\ /Y
 @copy sd-ui-files\scripts\bootstrap.bat scripts\ /Y
 @copy "sd-ui-files\scripts\Start Stable Diffusion UI.cmd" . /Y

scripts/on_env_start.sh

@@ -1,5 +1,7 @@
 #!/bin/bash
 
+source ./scripts/functions.sh
+
 printf "\n\nStable Diffusion UI\n\n"
 
 if [ -f "scripts/config.sh" ]; then
@@ -27,9 +29,7 @@ else
     if git clone -b "$update_branch" https://github.com/cmdr2/stable-diffusion-ui.git sd-ui-files ; then
         echo sd_ui_git_cloned >> scripts/install_status.txt
     else
-        printf "\n\nError downloading Stable Diffusion UI. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
+        fail "git clone failed"
     fi
 fi
 

scripts/on_sd_start.bat

@@ -1,5 +1,8 @@
 @echo off
 
+@REM Caution, this file will make your eyes and brain bleed. It's such an unholy mess.
+@REM Note to self: Please rewrite this in Python. For the sake of your own sanity.
+
 @copy sd-ui-files\scripts\on_env_start.bat scripts\ /Y
 @copy sd-ui-files\scripts\bootstrap.bat scripts\ /Y
 
@@ -7,35 +10,48 @@ if exist "%cd%\profile" (
     set USERPROFILE=%cd%\profile
 )
 
+@mkdir tmp
+@set TMP=%cd%\tmp
+@set TEMP=%cd%\tmp
+
 @rem activate the installer env
 call conda activate
-
-@REM Caution, this file will make your eyes and brain bleed. It's such an unholy mess.
-@REM Note to self: Please rewrite this in Python. For the sake of your own sanity.
+@if "%ERRORLEVEL%" NEQ "0" (
+       @echo. & echo "Error activating conda for Stable Diffusion. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
+       pause
+       exit /b
+)
 
 @REM remove the old version of the dev console script, if it's still present
 if exist "Open Developer Console.cmd" del "Open Developer Console.cmd"
 
 @call python -c "import os; import shutil; frm = 'sd-ui-files\\ui\\hotfix\\9c24e6cd9f499d02c4f21a033736dabd365962dc80fe3aeb57a8f85ea45a20a3.26fead7ea4f0f843f6eb4055dfd25693f1a71f3c6871b184042d4b126244e142'; dst = os.path.join(os.path.expanduser('~'), '.cache', 'huggingface', 'transformers', '9c24e6cd9f499d02c4f21a033736dabd365962dc80fe3aeb57a8f85ea45a20a3.26fead7ea4f0f843f6eb4055dfd25693f1a71f3c6871b184042d4b126244e142'); shutil.copyfile(frm, dst) if os.path.exists(dst) else print(''); print('Hotfixed broken JSON file from OpenAI');"
 
+if NOT DEFINED test_sd2 set test_sd2=N
+
 @>nul findstr /m "sd_git_cloned" scripts\install_status.txt
 @if "%ERRORLEVEL%" EQU "0" (
     @echo "Stable Diffusion's git repository was already installed. Updating.."
 
     @cd stable-diffusion
 
+    @call git remote set-url origin https://github.com/easydiffusion/diffusion-kit.git
+
     @call git reset --hard
     @call git pull
-    @call git -c advice.detachedHead=false checkout f6cfebffa752ee11a7b07497b8529d5971de916c
 
-    @call git apply ..\ui\sd_internal\ddim_callback.patch
-    @call git apply ..\ui\sd_internal\env_yaml.patch
+    if "%test_sd2%" == "N" (
+        @call git -c advice.detachedHead=false checkout 7f32368ed1030a6e710537047bacd908adea183a
+    )
+    if "%test_sd2%" == "Y" (
+        @call git -c advice.detachedHead=false checkout b1a80dfc75388914252ce363f923103185eaf48f
+    )
 
     @cd ..
 ) else (
     @echo. & echo "Downloading Stable Diffusion.." & echo.
 
-    @call git clone https://github.com/basujindal/stable-diffusion.git && (
+    @call git clone https://github.com/easydiffusion/diffusion-kit.git stable-diffusion && (
         @echo sd_git_cloned >> scripts\install_status.txt
     ) || (
         @echo "Error downloading Stable Diffusion. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!"
@@ -44,10 +60,7 @@ if exist "Open Developer Console.cmd" del "Open Developer Console.cmd"
     )
 
     @cd stable-diffusion
-    @call git -c advice.detachedHead=false checkout f6cfebffa752ee11a7b07497b8529d5971de916c
-
-    @call git apply ..\ui\sd_internal\ddim_callback.patch
-    @call git apply ..\ui\sd_internal\env_yaml.patch
+    @call git -c advice.detachedHead=false checkout 7f32368ed1030a6e710537047bacd908adea183a
 
     @cd ..
 )
@@ -68,8 +81,8 @@ if exist "Open Developer Console.cmd" del "Open Developer Console.cmd"
     @set PYTHONNOUSERSITE=1
 
     set USERPROFILE=%cd%\profile
-    set TMP=%cd%\tmp
-    set TEMP=%cd%\tmp
+
+    set PYTHONPATH=%cd%;%cd%\env\lib\site-packages
 
     @call conda env create --prefix env -f environment.yaml || (
         @echo. & echo "Error installing the packages necessary for Stable Diffusion. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
@@ -79,12 +92,6 @@ if exist "Open Developer Console.cmd" del "Open Developer Console.cmd"
 
     @call conda activate .\env
 
-    @call conda install -c conda-forge -y --prefix env antlr4-python3-runtime=4.8 || (
-        @echo. & echo "Error installing antlr4-python3-runtime for Stable Diffusion. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-
     for /f "tokens=*" %%a in ('python -c "import torch; import ldm; import transformers; import numpy; import antlr4; print(42)"') do if "%%a" NEQ "42" (
         @echo. & echo "Dependency test failed! Error installing the packages necessary for Stable Diffusion. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
         pause
@@ -105,20 +112,8 @@ set PATH=C:\Windows\System32;%PATH%
     @set PYTHONNOUSERSITE=1
 
     set USERPROFILE=%cd%\profile
-    set TMP=%cd%\tmp
-    set TEMP=%cd%\tmp
 
-    @call pip install -e git+https://github.com/TencentARC/GFPGAN#egg=GFPGAN || (
-        @echo. & echo "Error installing the packages necessary for GFPGAN (Face Correction). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-
-    @call pip install basicsr==1.4.2 || (
-        @echo. & echo "Error installing the basicsr package necessary for GFPGAN (Face Correction). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
+    set PYTHONPATH=%cd%;%cd%\env\lib\site-packages
 
     for /f "tokens=*" %%a in ('python -c "from gfpgan import GFPGANer; print(42)"') do if "%%a" NEQ "42" (
         @echo. & echo "Dependency test failed! Error installing the packages necessary for GFPGAN (Face Correction). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
@@ -138,14 +133,8 @@ set PATH=C:\Windows\System32;%PATH%
     @set PYTHONNOUSERSITE=1
 
     set USERPROFILE=%cd%\profile
-    set TMP=%cd%\tmp
-    set TEMP=%cd%\tmp
 
-    @call pip install -e git+https://github.com/xinntao/Real-ESRGAN#egg=realesrgan || (
-        @echo. & echo "Error installing the packages necessary for ESRGAN (Resolution Upscaling). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
+    set PYTHONPATH=%cd%;%cd%\env\lib\site-packages
 
     for /f "tokens=*" %%a in ('python -c "from basicsr.archs.rrdbnet_arch import RRDBNet; from realesrgan import RealESRGANer; print(42)"') do if "%%a" NEQ "42" (
         @echo. & echo "Dependency test failed! Error installing the packages necessary for ESRGAN (Resolution Upscaling). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
@@ -165,8 +154,8 @@ set PATH=C:\Windows\System32;%PATH%
     @set PYTHONNOUSERSITE=1
 
     set USERPROFILE=%cd%\profile
-    set TMP=%cd%\tmp
-    set TEMP=%cd%\tmp
+
+    set PYTHONPATH=%cd%;%cd%\env\lib\site-packages
 
     @call conda install -c conda-forge -y --prefix env uvicorn fastapi || (
         echo "Error installing the packages necessary for Stable Diffusion UI. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!"
@@ -183,6 +172,26 @@ call WHERE uvicorn > .tmp
     exit /b
 )
 
+@>nul 2>nul call python -m picklescan --help
+@if "%ERRORLEVEL%" NEQ "0" (
+    @echo. & echo Picklescan not found. Installing
+    @call pip install picklescan || (
+        echo "Error installing the picklescan package necessary for Stable Diffusion UI. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!"
+        pause
+        exit /b
+    )
+)
+
+@>nul 2>nul call python -c "import safetensors"
+@if "%ERRORLEVEL%" NEQ "0" (
+    @echo. & echo SafeTensors not found. Installing
+    @call pip install safetensors || (
+        echo "Error installing the safetensors package necessary for Stable Diffusion UI. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!"
+        pause
+        exit /b
+    )
+)
+
 @>nul findstr /m "conda_sd_ui_deps_installed" ..\scripts\install_status.txt
 @if "%ERRORLEVEL%" NEQ "0" (
     @echo conda_sd_ui_deps_installed >> ..\scripts\install_status.txt
@@ -191,7 +200,9 @@ call WHERE uvicorn > .tmp
 
 
 if not exist "..\models\stable-diffusion" mkdir "..\models\stable-diffusion"
+if not exist "..\models\vae" mkdir "..\models\vae"
 echo. > "..\models\stable-diffusion\Put your custom ckpt files here.txt"
+echo. > "..\models\vae\Put your VAE files here.txt"
 
 @if exist "sd-v1-4.ckpt" (
     for %%I in ("sd-v1-4.ckpt") do if "%%~zI" EQU "4265380512" (
@@ -213,7 +224,7 @@ echo. > "..\models\stable-diffusion\Put your custom ckpt files here.txt"
 @if not exist "sd-v1-4.ckpt" (
     @echo. & echo "Downloading data files (weights) for Stable Diffusion.." & echo.
 
-    @call curl -C - --retry 20 --retry-all-errors --retry-delay 5 -L -k https://me.cmdr2.org/stable-diffusion-ui/sd-v1-4.ckpt > sd-v1-4.ckpt
+    @call curl -L -k https://me.cmdr2.org/stable-diffusion-ui/sd-v1-4.ckpt > sd-v1-4.ckpt
 
     @if exist "sd-v1-4.ckpt" (
         for %%I in ("sd-v1-4.ckpt") do if "%%~zI" NEQ "4265380512" (
@@ -243,7 +254,7 @@ echo. > "..\models\stable-diffusion\Put your custom ckpt files here.txt"
 @if not exist "GFPGANv1.3.pth" (
     @echo. & echo "Downloading data files (weights) for GFPGAN (Face Correction).." & echo.
 
-    @call curl -C - --retry 20 --retry-all-errors --retry-delay 5 -L -k https://github.com/TencentARC/GFPGAN/releases/download/v1.3.0/GFPGANv1.3.pth > GFPGANv1.3.pth
+    @call curl -L -k https://github.com/TencentARC/GFPGAN/releases/download/v1.3.0/GFPGANv1.3.pth > GFPGANv1.3.pth
 
     @if exist "GFPGANv1.3.pth" (
         for %%I in ("GFPGANv1.3.pth") do if "%%~zI" NEQ "348632874" (
@@ -265,7 +276,7 @@ echo. > "..\models\stable-diffusion\Put your custom ckpt files here.txt"
     for %%I in ("RealESRGAN_x4plus.pth") do if "%%~zI" EQU "67040989" (
         echo "Data files (weights) necessary for ESRGAN (Resolution Upscaling) x4plus were already downloaded"
     ) else (
-        echo. & echo "The GFPGAN model file present at %cd%\RealESRGAN_x4plus.pth is invalid. It is only %%~zI bytes in size. Re-downloading.." & echo.
+        echo. & echo "The RealESRGAN model file present at %cd%\RealESRGAN_x4plus.pth is invalid. It is only %%~zI bytes in size. Re-downloading.." & echo.
         del "RealESRGAN_x4plus.pth"
     )
 )
@@ -273,7 +284,7 @@ echo. > "..\models\stable-diffusion\Put your custom ckpt files here.txt"
 @if not exist "RealESRGAN_x4plus.pth" (
     @echo. & echo "Downloading data files (weights) for ESRGAN (Resolution Upscaling) x4plus.." & echo.
 
-    @call curl -C - --retry 20 --retry-all-errors --retry-delay 5 -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.1.0/RealESRGAN_x4plus.pth > RealESRGAN_x4plus.pth
+    @call curl -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.1.0/RealESRGAN_x4plus.pth > RealESRGAN_x4plus.pth
 
     @if exist "RealESRGAN_x4plus.pth" (
         for %%I in ("RealESRGAN_x4plus.pth") do if "%%~zI" NEQ "67040989" (
@@ -295,7 +306,7 @@ echo. > "..\models\stable-diffusion\Put your custom ckpt files here.txt"
     for %%I in ("RealESRGAN_x4plus_anime_6B.pth") do if "%%~zI" EQU "17938799" (
         echo "Data files (weights) necessary for ESRGAN (Resolution Upscaling) x4plus_anime were already downloaded"
     ) else (
-        echo. & echo "The GFPGAN model file present at %cd%\RealESRGAN_x4plus_anime_6B.pth is invalid. It is only %%~zI bytes in size. Re-downloading.." & echo.
+        echo. & echo "The RealESRGAN model file present at %cd%\RealESRGAN_x4plus_anime_6B.pth is invalid. It is only %%~zI bytes in size. Re-downloading.." & echo.
         del "RealESRGAN_x4plus_anime_6B.pth"
     )
 )
@@ -303,7 +314,7 @@ echo. > "..\models\stable-diffusion\Put your custom ckpt files here.txt"
 @if not exist "RealESRGAN_x4plus_anime_6B.pth" (
     @echo. & echo "Downloading data files (weights) for ESRGAN (Resolution Upscaling) x4plus_anime.." & echo.
 
-    @call curl -C - --retry 20 --retry-all-errors --retry-delay 5 -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.2.4/RealESRGAN_x4plus_anime_6B.pth > RealESRGAN_x4plus_anime_6B.pth
+    @call curl -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.2.4/RealESRGAN_x4plus_anime_6B.pth > RealESRGAN_x4plus_anime_6B.pth
 
     @if exist "RealESRGAN_x4plus_anime_6B.pth" (
         for %%I in ("RealESRGAN_x4plus_anime_6B.pth") do if "%%~zI" NEQ "17938799" (
@@ -321,6 +332,38 @@ echo. > "..\models\stable-diffusion\Put your custom ckpt files here.txt"
 
 
 
+@if exist "..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt" (
+    for %%I in ("..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt") do if "%%~zI" EQU "334695179" (
+        echo "Data files (weights) necessary for the default VAE (sd-vae-ft-mse-original) were already downloaded"
+    ) else (
+        echo. & echo "The default VAE (sd-vae-ft-mse-original) file present at models\vae\vae-ft-mse-840000-ema-pruned.ckpt is invalid. It is only %%~zI bytes in size. Re-downloading.." & echo.
+        del "..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt"
+    )
+)
+
+@if not exist "..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt" (
+    @echo. & echo "Downloading data files (weights) for the default VAE (sd-vae-ft-mse-original).." & echo.
+
+    @call curl -L -k https://huggingface.co/stabilityai/sd-vae-ft-mse-original/resolve/main/vae-ft-mse-840000-ema-pruned.ckpt > ..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt
+
+    @if exist "..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt" (
+        for %%I in ("..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt") do if "%%~zI" NEQ "334695179" (
+            echo. & echo "Error: The downloaded default VAE (sd-vae-ft-mse-original) file was invalid! Bytes downloaded: %%~zI" & echo.
+            echo. & echo "Error downloading the data files (weights) for the default VAE (sd-vae-ft-mse-original). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
+            pause
+            exit /b
+        )
+    ) else (
+        @echo. & echo "Error downloading the data files (weights) for the default VAE (sd-vae-ft-mse-original). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
+        pause
+        exit /b
+    )
+)
+
+if "%test_sd2%" == "Y" (
+    @call pip install open_clip_torch==2.0.2
+)
+
 @>nul findstr /m "sd_install_complete" ..\scripts\install_status.txt
 @if "%ERRORLEVEL%" NEQ "0" (
     @echo sd_weights_downloaded >> ..\scripts\install_status.txt
@@ -343,6 +386,17 @@ call python --version
 @set SD_UI_PATH=%cd%\ui
 @cd stable-diffusion
 
-@uvicorn server:app --app-dir "%SD_UI_PATH%" --port 9000 --host 0.0.0.0
+@rem
+@rem Rewrite easy-install.pth. This fixes the installation if the user has relocated the SDUI installation
+@rem
+>env\Lib\site-packages\easy-install.pth echo %cd%\src\taming-transformers
+>>env\Lib\site-packages\easy-install.pth echo %cd%\src\clip
+>>env\Lib\site-packages\easy-install.pth echo %cd%\src\gfpgan
+>>env\Lib\site-packages\easy-install.pth echo %cd%\src\realesrgan
+
+@if NOT DEFINED SD_UI_BIND_PORT set SD_UI_BIND_PORT=9000
+@if NOT DEFINED SD_UI_BIND_IP set SD_UI_BIND_IP=0.0.0.0
+@uvicorn server:app --app-dir "%SD_UI_PATH%" --port %SD_UI_BIND_PORT% --host %SD_UI_BIND_IP%
+
 
 @pause

scripts/on_sd_start.sh

@@ -1,5 +1,7 @@
 #!/bin/bash
 
+source ./scripts/functions.sh
+
 cp sd-ui-files/scripts/on_env_start.sh scripts/
 cp sd-ui-files/scripts/bootstrap.sh scripts/
 
@@ -7,47 +9,50 @@ cp sd-ui-files/scripts/bootstrap.sh scripts/
 CONDA_BASEPATH=$(conda info --base)
 source "$CONDA_BASEPATH/etc/profile.d/conda.sh" # avoids the 'shell not initialized' error
 
-conda activate
+conda activate || fail "Failed to activate conda"
 
 # remove the old version of the dev console script, if it's still present
 if [ -e "open_dev_console.sh" ]; then
     rm "open_dev_console.sh"
 fi
 
-python -c "import os; import shutil; frm = 'sd-ui-files/ui/hotfix/9c24e6cd9f499d02c4f21a033736dabd365962dc80fe3aeb57a8f85ea45a20a3.26fead7ea4f0f843f6eb4055dfd25693f1a71f3c6871b184042d4b126244e142'; dst = os.path.join(os.path.expanduser('~'), '.cache', 'huggingface', 'transformers', '9c24e6cd9f499d02c4f21a033736dabd365962dc80fe3aeb57a8f85ea45a20a3.26fead7ea4f0f843f6eb4055dfd25693f1a71f3c6871b184042d4b126244e142'); shutil.copyfile(frm, dst) if os.path.exists(dst) else print(''); print('Hotfixed broken JSON file from OpenAI');"
+python -c "import os; import shutil; frm = 'sd-ui-files/ui/hotfix/9c24e6cd9f499d02c4f21a033736dabd365962dc80fe3aeb57a8f85ea45a20a3.26fead7ea4f0f843f6eb4055dfd25693f1a71f3c6871b184042d4b126244e142'; dst = os.path.join(os.path.expanduser('~'), '.cache', 'huggingface', 'transformers', '9c24e6cd9f499d02c4f21a033736dabd365962dc80fe3aeb57a8f85ea45a20a3.26fead7ea4f0f843f6eb4055dfd25693f1a71f3c6871b184042d4b126244e142'); shutil.copyfile(frm, dst) if os.path.exists(dst) else print(''); print('Hotfixed broken JSON file from OpenAI');" 
 
 # Caution, this file will make your eyes and brain bleed. It's such an unholy mess.
 # Note to self: Please rewrite this in Python. For the sake of your own sanity.
 
+if [ "$test_sd2" == "" ]; then
+    export test_sd2="N"
+fi
+
 if [ -e "scripts/install_status.txt" ] && [ `grep -c sd_git_cloned scripts/install_status.txt` -gt "0" ]; then
     echo "Stable Diffusion's git repository was already installed. Updating.."
 
     cd stable-diffusion
 
+    git remote set-url origin https://github.com/easydiffusion/diffusion-kit.git
+
     git reset --hard
     git pull
-    git -c advice.detachedHead=false checkout f6cfebffa752ee11a7b07497b8529d5971de916c
 
-    git apply ../ui/sd_internal/ddim_callback.patch
-    git apply ../ui/sd_internal/env_yaml.patch
+    if [ "$test_sd2" == "N" ]; then
+        git -c advice.detachedHead=false checkout 7f32368ed1030a6e710537047bacd908adea183a
+    elif [ "$test_sd2" == "Y" ]; then
+        git -c advice.detachedHead=false checkout b1a80dfc75388914252ce363f923103185eaf48f
+    fi
 
     cd ..
 else
     printf "\n\nDownloading Stable Diffusion..\n\n"
 
-    if git clone https://github.com/basujindal/stable-diffusion.git ; then
+    if git clone https://github.com/easydiffusion/diffusion-kit.git stable-diffusion ; then
         echo sd_git_cloned >> scripts/install_status.txt
     else
-        printf "\n\nError downloading Stable Diffusion. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
+        fail "git clone of basujindal/stable-diffusion.git failed"
     fi
 
     cd stable-diffusion
-    git -c advice.detachedHead=false checkout f6cfebffa752ee11a7b07497b8529d5971de916c
-
-    git apply ../ui/sd_internal/ddim_callback.patch
-    git apply ../ui/sd_internal/env_yaml.patch
+    git -c advice.detachedHead=false checkout 7f32368ed1030a6e710537047bacd908adea183a
 
     cd ..
 fi
@@ -57,37 +62,26 @@ cd stable-diffusion
 if [ `grep -c conda_sd_env_created ../scripts/install_status.txt` -gt "0" ]; then
     echo "Packages necessary for Stable Diffusion were already installed"
 
-    conda activate ./env
+    conda activate ./env || fail "conda activate failed"
 else
     printf "\n\nDownloading packages necessary for Stable Diffusion..\n"
     printf "\n\n***** This will take some time (depending on the speed of the Internet connection) and may appear to be stuck, but please be patient ***** ..\n\n"
 
     # prevent conda from using packages from the user's home directory, to avoid conflicts
     export PYTHONNOUSERSITE=1
+    export PYTHONPATH="$(pwd):$(pwd)/env/lib/site-packages"
 
     if conda env create --prefix env --force -f environment.yaml ; then
         echo "Installed. Testing.."
     else
-        printf "\n\nError installing the packages necessary for Stable Diffusion. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
+        fail "'conda env create' failed"
     fi
 
-    conda activate ./env
-
-    if conda install -c conda-forge --prefix ./env -y antlr4-python3-runtime=4.8 ; then
-        echo "Installed. Testing.."
-    else
-        printf "\n\nError installing antlr4-python3-runtime for Stable Diffusion. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
-    fi
+    conda activate ./env || fail "conda activate failed"
 
     out_test=`python -c "import torch; import ldm; import transformers; import numpy; import antlr4; print(42)"`
     if [ "$out_test" != "42" ]; then
-        printf "\n\nDependency test failed! Error installing the packages necessary for Stable Diffusion. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
+        fail "Dependency test failed"
     fi
 
     echo conda_sd_env_created >> ../scripts/install_status.txt
@@ -99,20 +93,14 @@ else
     printf "\n\nDownloading packages necessary for GFPGAN (Face Correction)..\n"
 
     export PYTHONNOUSERSITE=1
-
-    if pip install -e git+https://github.com/TencentARC/GFPGAN#egg=GFPGAN ; then
-        echo "Installed. Testing.."
-    else
-        printf "\n\nError installing the packages necessary for GFPGAN (Face Correction). Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
-    fi
+    export PYTHONPATH="$(pwd):$(pwd)/env/lib/site-packages"
 
     out_test=`python -c "from gfpgan import GFPGANer; print(42)"`
     if [ "$out_test" != "42" ]; then
-        printf "\n\nDependency test failed! Error installing the packages necessary for GFPGAN (Face Correction). Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
+        echo "EE The dependency check has failed. This usually means that some system libraries are missing."
+	echo "EE On Debian/Ubuntu systems, this are often these packages: libsm6 libxext6 libxrender-dev"
+	echo "EE Other Linux distributions might have different package names for these libraries."
+        fail "GFPGAN dependency test failed"
     fi
 
     echo conda_sd_gfpgan_deps_installed >> ../scripts/install_status.txt
@@ -124,20 +112,11 @@ else
     printf "\n\nDownloading packages necessary for ESRGAN (Resolution Upscaling)..\n"
 
     export PYTHONNOUSERSITE=1
-
-    if pip install -e git+https://github.com/xinntao/Real-ESRGAN#egg=realesrgan ; then
-        echo "Installed. Testing.."
-    else
-        printf "\n\nError installing the packages necessary for ESRGAN (Resolution Upscaling). Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
-    fi
+    export PYTHONPATH="$(pwd):$(pwd)/env/lib/site-packages"
 
     out_test=`python -c "from basicsr.archs.rrdbnet_arch import RRDBNet; from realesrgan import RealESRGANer; print(42)"`
     if [ "$out_test" != "42" ]; then
-        printf "\n\nDependency test failed! Error installing the packages necessary for ESRGAN (Resolution Upscaling). Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
+        fail "ESRGAN dependency test failed"
     fi
 
     echo conda_sd_esrgan_deps_installed >> ../scripts/install_status.txt
@@ -149,28 +128,41 @@ else
     printf "\n\nDownloading packages necessary for Stable Diffusion UI..\n\n"
 
     export PYTHONNOUSERSITE=1
+    export PYTHONPATH="$(pwd):$(pwd)/env/lib/site-packages"
 
     if conda install -c conda-forge --prefix ./env -y uvicorn fastapi ; then
         echo "Installed. Testing.."
     else
-        printf "\n\nError installing the packages necessary for Stable Diffusion UI. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
+        fail "'conda install uvicorn' failed" 
     fi
 
     if ! command -v uvicorn &> /dev/null; then
-        printf "\n\nUI packages not found! Error installing the packages necessary for Stable Diffusion UI. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
+        fail "UI packages not found!"
     fi
 
     echo conda_sd_ui_deps_installed >> ../scripts/install_status.txt
 fi
 
+if python -m picklescan --help >/dev/null 2>&1; then
+    echo "Picklescan is already installed."
+else
+    echo "Picklescan not found, installing."
+    pip install picklescan || fail "Picklescan installation failed."
+fi
+
+if python -c "import safetensors" --help >/dev/null 2>&1; then
+    echo "SafeTensors is already installed."
+else
+    echo "SafeTensors not found, installing."
+    pip install safetensors || fail "SafeTensors installation failed."
+fi
+
 
 
 mkdir -p "../models/stable-diffusion"
+mkdir -p "../models/vae"
 echo "" > "../models/stable-diffusion/Put your custom ckpt files here.txt"
+echo "" > "../models/vae/Put your VAE files here.txt"
 
 if [ -f "sd-v1-4.ckpt" ]; then
     model_size=`find "sd-v1-4.ckpt" -printf "%s"`
@@ -186,20 +178,15 @@ fi
 if [ ! -f "sd-v1-4.ckpt" ]; then
     echo "Downloading data files (weights) for Stable Diffusion.."
 
-    curl -C - --retry 20 --retry-all-errors --retry-delay 5 -L -k https://me.cmdr2.org/stable-diffusion-ui/sd-v1-4.ckpt > sd-v1-4.ckpt
+    curl -L -k https://me.cmdr2.org/stable-diffusion-ui/sd-v1-4.ckpt > sd-v1-4.ckpt
 
     if [ -f "sd-v1-4.ckpt" ]; then
         model_size=`find "sd-v1-4.ckpt" -printf "%s"`
         if [ ! "$model_size" == "4265380512" ]; then
-            printf "\n\nError: The downloaded model file was invalid! Bytes downloaded: $model_size\n\n"
-            printf "\n\nError downloading the data files (weights) for Stable Diffusion. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-            read -p "Press any key to continue"
-            exit
+	    fail "The downloaded model file was invalid! Bytes downloaded: $model_size"
         fi
     else
-        printf "\n\nError downloading the data files (weights) for Stable Diffusion. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
+        fail "Error downloading the data files (weights) for Stable Diffusion"
     fi
 fi
 
@@ -218,20 +205,15 @@ fi
 if [ ! -f "GFPGANv1.3.pth" ]; then
     echo "Downloading data files (weights) for GFPGAN (Face Correction).."
 
-    curl -C - --retry 20 --retry-all-errors --retry-delay 5 -L -k https://github.com/TencentARC/GFPGAN/releases/download/v1.3.0/GFPGANv1.3.pth > GFPGANv1.3.pth
+    curl -L -k https://github.com/TencentARC/GFPGAN/releases/download/v1.3.0/GFPGANv1.3.pth > GFPGANv1.3.pth
 
     if [ -f "GFPGANv1.3.pth" ]; then
         model_size=`find "GFPGANv1.3.pth" -printf "%s"`
         if [ ! "$model_size" -eq "348632874" ]; then
-            printf "\n\nError: The downloaded GFPGAN model file was invalid! Bytes downloaded: $model_size\n\n"
-            printf "\n\nError downloading the data files (weights) for GFPGAN (Face Correction). Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-            read -p "Press any key to continue"
-            exit
+            fail "The downloaded GFPGAN model file was invalid! Bytes downloaded: $model_size"
         fi
     else
-        printf "\n\nError downloading the data files (weights) for GFPGAN (Face Correction). Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
+        fail "Error downloading the data files (weights) for GFPGAN (Face Correction)."
     fi
 fi
 
@@ -250,20 +232,15 @@ fi
 if [ ! -f "RealESRGAN_x4plus.pth" ]; then
     echo "Downloading data files (weights) for ESRGAN (Resolution Upscaling) x4plus.."
 
-    curl -C - --retry 20 --retry-all-errors --retry-delay 5 -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.1.0/RealESRGAN_x4plus.pth > RealESRGAN_x4plus.pth
+    curl -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.1.0/RealESRGAN_x4plus.pth > RealESRGAN_x4plus.pth
 
     if [ -f "RealESRGAN_x4plus.pth" ]; then
         model_size=`find "RealESRGAN_x4plus.pth" -printf "%s"`
         if [ ! "$model_size" -eq "67040989" ]; then
-            printf "\n\nError: The downloaded ESRGAN x4plus model file was invalid! Bytes downloaded: $model_size\n\n"
-            printf "\n\nError downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-            read -p "Press any key to continue"
-            exit
+            fail "The downloaded ESRGAN x4plus model file was invalid! Bytes downloaded: $model_size"
         fi
     else
-        printf "\n\nError downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
+        fail "Error downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus"
     fi
 fi
 
@@ -282,23 +259,53 @@ fi
 if [ ! -f "RealESRGAN_x4plus_anime_6B.pth" ]; then
     echo "Downloading data files (weights) for ESRGAN (Resolution Upscaling) x4plus_anime.."
 
-    curl -C - --retry 20 --retry-all-errors --retry-delay 5 -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.2.4/RealESRGAN_x4plus_anime_6B.pth > RealESRGAN_x4plus_anime_6B.pth
+    curl -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.2.4/RealESRGAN_x4plus_anime_6B.pth > RealESRGAN_x4plus_anime_6B.pth
 
     if [ -f "RealESRGAN_x4plus_anime_6B.pth" ]; then
         model_size=`find "RealESRGAN_x4plus_anime_6B.pth" -printf "%s"`
         if [ ! "$model_size" -eq "17938799" ]; then
-            printf "\n\nError: The downloaded ESRGAN x4plus_anime model file was invalid! Bytes downloaded: $model_size\n\n"
-            printf "\n\nError downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus_anime. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
+            fail "The downloaded ESRGAN x4plus_anime model file was invalid! Bytes downloaded: $model_size"
+        fi
+    else
+        fail "Error downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus_anime."
+    fi
+fi
+
+
+if [ -f "../models/vae/vae-ft-mse-840000-ema-pruned.ckpt" ]; then
+    model_size=`find ../models/vae/vae-ft-mse-840000-ema-pruned.ckpt -printf "%s"`
+
+    if [ "$model_size" -eq "334695179" ]; then
+        echo "Data files (weights) necessary for the default VAE (sd-vae-ft-mse-original) were already downloaded"
+    else
+        printf "\n\nThe model file present at models/vae/vae-ft-mse-840000-ema-pruned.ckpt is invalid. It is only $model_size bytes in size. Re-downloading.."
+        rm ../models/vae/vae-ft-mse-840000-ema-pruned.ckpt
+    fi
+fi
+
+if [ ! -f "../models/vae/vae-ft-mse-840000-ema-pruned.ckpt" ]; then
+    echo "Downloading data files (weights) for the default VAE (sd-vae-ft-mse-original).."
+
+    curl -L -k https://huggingface.co/stabilityai/sd-vae-ft-mse-original/resolve/main/vae-ft-mse-840000-ema-pruned.ckpt > ../models/vae/vae-ft-mse-840000-ema-pruned.ckpt
+
+    if [ -f "../models/vae/vae-ft-mse-840000-ema-pruned.ckpt" ]; then
+        model_size=`find ../models/vae/vae-ft-mse-840000-ema-pruned.ckpt -printf "%s"`
+        if [ ! "$model_size" -eq "334695179" ]; then
+            printf "\n\nError: The downloaded default VAE (sd-vae-ft-mse-original) file was invalid! Bytes downloaded: $model_size\n\n"
+            printf "\n\nError downloading the data files (weights) for the default VAE (sd-vae-ft-mse-original). Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
             read -p "Press any key to continue"
             exit
         fi
     else
-        printf "\n\nError downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus_anime. Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
+        printf "\n\nError downloading the data files (weights) for the default VAE (sd-vae-ft-mse-original). Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
         read -p "Press any key to continue"
         exit
     fi
 fi
 
+if [ "$test_sd2" == "Y" ]; then
+    pip install open_clip_torch==2.0.2
+fi
 
 if [ `grep -c sd_install_complete ../scripts/install_status.txt` -gt "0" ]; then
     echo sd_weights_downloaded >> ../scripts/install_status.txt
@@ -318,6 +325,6 @@ cd ..
 export SD_UI_PATH=`pwd`/ui
 cd stable-diffusion
 
-uvicorn server:app --app-dir "$SD_UI_PATH" --port 9000 --host 0.0.0.0
+uvicorn server:app --app-dir "$SD_UI_PATH" --port ${SD_UI_BIND_PORT:-9000} --host ${SD_UI_BIND_IP:-0.0.0.0}
 
 read -p "Press any key to continue"

scripts/post_activate.bat

@@ -1,6 +0,0 @@
-@call conda --version
-@call git --version
-
-cd %CONDA_PREFIX%\..\scripts
-
-on_env_start.bat

scripts/post_activate.sh

@@ -1,12 +0,0 @@
-#!/bin/bash
-
-conda-unpack
-
-source $CONDA_PREFIX/etc/profile.d/conda.sh
-
-conda --version
-git --version
-
-cd $CONDA_PREFIX/../scripts
-
-./on_env_start.sh

scripts/start.sh

@@ -1,20 +1,22 @@
 #!/bin/bash
 
+cd "$(dirname "${BASH_SOURCE[0]}")"
+
 # set legacy installer's PATH, if it exists
 if [ -e "installer" ]; then export PATH="$(pwd)/installer/bin:$PATH"; fi
 
 # Setup the packages required for the installer
-scripts/bootstrap.sh
+scripts/bootstrap.sh || exit 1
 
 # set new installer's PATH, if it downloaded any packages
 if [ -e "installer_files/env" ]; then export PATH="$(pwd)/installer_files/env/bin:$PATH"; fi
 
 # Test the bootstrap
 which git
-git --version
+git --version || exit 1
 
 which conda
-conda --version
+conda --version || exit 1
 
 # Download the rest of the installer and UI
 scripts/on_env_start.sh

ui/index.html

@@ -1,125 +1,135 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <title>Stable Diffusion UI</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/fonts.css?v=1">
-    <link rel="stylesheet" href="/media/css/themes.css?v=1">
-    <link rel="stylesheet" href="/media/css/main.css?v=3">
-    <link rel="stylesheet" href="/media/css/auto-save.css?v=2">
-    <link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=2">
-    <link rel="stylesheet" href="/media/css/fontawesome-all.min.css?v=1">
-    <link rel="stylesheet" href="/media/css/drawingboard.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/jquery-confirm.min.css">
+    <link rel="manifest" href="/media/manifest.webmanifest">
     <script src="/media/js/jquery-3.6.1.min.js"></script>
-    <script src="/media/js/drawingboard.min.js"></script>
+    <script src="/media/js/jquery-confirm.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.3.5 <span id="updateBranchLabel"></span></small></h1>
+            <h1>
+                Stable Diffusion UI
+                <small>v2.4.18 <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/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>
-            </li>
-            <li class="dropdown">
+        <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>
-                <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><label for="theme">Theme: </label><select id="theme" name="theme"><option value="theme-default">Default</option></select></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 <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="auto_save_settings" name="auto_save_settings" checked type="checkbox">
-                            <label for="auto_save_settings">Automatically save settings <small>(settings restored on browser load)</small></label>
-                            <br/>
-                            <button id="configureSettingsSaveBtn">Configure</button>
-                        </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>
+            </span>
+            <span id="tab-about" class="tab">
+                <span><i class="fa fa-comments icon"></i> Help & Community</span>
+            </span>
+        </div>
     </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="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 <small>(optional)</small></label>
+                    <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">
-                        <input id="negative_prompt" name="negative_prompt" placeholder="list the things to remove from the image (e.g. fog, green)">
+                        <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/>
+                    <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"></span>
-                            <button class="init_image_clear image_clear_btn">X</button>
+                            <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>
-
-                        <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>
+                    <label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">click an Image Modifier to remove it, use Ctrl+Mouse Wheel to adjust its weight</span></i>:</label>
                     <div id="editor-inputs-tags-list"></div>
                 </div>
 
-                <button id="makeImage">Make Image</button>
+                <button id="makeImage" class="primaryButton">Make Image</button>
                 <button id="stopImage" class="secondaryButton">Stop All</button>
             </div>
 
-            <div class="line-separator">&nbsp;</div>
+            <span class="line-separator"></span>
 
-            <div id="editor-settings" class="panel-box settings-box">
+            <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">
+                    <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>
-                <ul id="editor-settings-entries" class="collapsible-content">
-                    <li><table>
+                <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"> <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"> <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="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>
                         <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">
@@ -132,6 +142,7 @@
                             <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">
@@ -179,22 +190,24 @@
                         </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"></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="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>
-                    </li></table>
-
-                    <br/>
+                    <tr class="pl-5" id="output_quality_row"><td><label for="output_quality">JPEG 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, 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="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 <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">
@@ -203,12 +216,19 @@
                         </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>
+                    </ul></div>
+                </div>
             </div>
 
             <div id="editor-modifiers" class="panel-box">
-                <button id="modifier-settings-btn" title="Add custom modifiers"><i class="fa fa-gear"></i></button>
-                <h4 class="collapsible">Image Modifiers (art styles, tags etc)</h4>
+                <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>
@@ -226,27 +246,95 @@
 
         <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! :)
+                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>
 
-    <div id="save-settings-config" style="display:none">
+        <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>&nbsp;</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>
-            <span id="save-settings-config-close-btn">X</span>
+            <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">
+            <table id="save-settings-config-table" class="form-table">
             </table>
         </div>
     </div>
 
-    <div id="modifier-settings-config" style="display:none">
+    <div id="modifier-settings-config" class="popup">
         <div>
-            <span id="modifier-settings-config-close-btn">X</span>
+            <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>
@@ -254,9 +342,41 @@
         </div>
     </div>
 
-    <div class="line-separator">&nbsp;</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="footer" class="panel-box">
+    <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">&nbsp;</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">
@@ -267,22 +387,24 @@
     </div>
 </div>
 </body>
-
-<script src="media/js/plugins.js?v=1"></script>
-<script src="media/js/utils.js?v=4"></script>
-<script src="media/js/inpainting-editor.js?v=1"></script>
-<script src="media/js/image-modifiers.js?v=3"></script>
-<script src="media/js/auto-save.js?v=2"></script>
-<script src="media/js/main.js?v=5"></script>
-<script src="media/js/themes.js?v=2"></script>
+<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/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 src="media/js/image-editor.js"></script>
 <script>
 async function init() {
     await initSettings()
     await getModels()
     await getDiskPath()
     await getAppConfig()
-    await loadModifiers()
     await loadUIPlugins()
+    await loadModifiers()
+    await getSystemInfo()
 
     setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
     healthCheck()

ui/media/css/auto-save.css

@@ -6,69 +6,76 @@
     display: none;
 }
 
-#save-settings-config {
-    position: absolute;
-    background: rgba(32, 33, 36, 50%);
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    z-index: 1000;
-}
-
-#save-settings-config > div {
-    background: var(--background-color3);
-    max-width: 600px;
-    margin: auto;
-    margin-top: 50px;
-    border-radius: 6px;
-    padding: 30px;
-    text-align: center;
-}
-
-#save-settings-config-table {
+.form-table {
     margin: auto;
 }
 
-#save-settings-config-table th {
+.form-table th {
     padding-top: 15px;
     padding-bottom: 5px;
 }
 
-#save-settings-config-table td:first-child,
-#save-settings-config-table th:first-child {
+.form-table td:first-child > *,
+.form-table th:first-child > * {
     float: right;
+    white-space: nowrap;
 }
 
-#save-settings-config-table td:last-child,
-#save-settings-config-table th:last-child {
+.form-table td:last-child > *,
+.form-table th:last-child > * {
     float: left;
 }
 
-#save-settings-config-table td small {
+
+.parameters-table {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.parameters-table > div {
+    background: var(--background-color2);
+    display: flex;
+    padding: 0px 4px;
+}
+
+.parameters-table > div > div {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.parameters-table small {
     color: rgb(153, 153, 153);
 }
 
-#save-settings-config-close-btn {
-    float: right;
-    cursor: pointer;
-    padding: 10px;
-    transform: translate(50%, -50%) scaleX(130%);
+.parameters-table > div > div:nth-child(1) {
+    font-size: 20px;
+    width: 45px;
 }
 
-#reset-image-settings {
-    cursor: pointer;
-    float: right;
-    padding: 8px;
-    opacity: 1;
-    transition: opacity 0.5;
+.parameters-table > div > div:nth-child(2) {
+    flex: 1;
+    flex-direction: column;
+    text-align: left;
+    justify-content: center;
+    align-items: start;
+    gap: 4px;
 }
 
-.collapsible:not(.active) #reset-image-settings {
-    display: none;
+.parameters-table > div > div:nth-child(3) {
+    text-align: right;
 }
 
-#reset-image-settings.hidden {
-    opacity: 0;
-    pointer-events: none;
+.parameters-table > div:first-child {
+    border-radius: 12px 12px 0px 0px;
 }
+
+.parameters-table > div:last-child {
+    border-radius: 0px 0px 12px 12px;
+}
+
+.parameters-table .fa-fire {
+    color: #F7630C;
+}

ui/media/css/image-editor.css

@@ -0,0 +1,211 @@
+.editor-controls-left {
+	padding-left: 32px;
+	text-align: left;
+	padding-bottom: 20px;
+}
+
+.editor-options-container {
+	display: flex;
+	row-gap: 10px;
+	max-width: 210px;
+}
+
+.editor-options-container > * {
+	flex: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.editor-options-container > * > * {
+	position: inherit;
+	width: 32px;
+	height: 32px;
+	border-radius: 16px;
+	background: var(--background-color3);
+	cursor: pointer;
+	transition: opacity 0.25s;
+}
+.editor-options-container > * > *:hover {
+	opacity: 0.75;
+}
+
+.editor-options-container > * > *.active {
+	border: 2px solid #3584e4;
+}
+
+.image_editor_opacity .editor-options-container > * > *:not(.active) {
+	border: 1px solid var(--background-color3);
+}
+
+.image_editor_color .editor-options-container {
+	flex-wrap: wrap;
+}
+.image_editor_color .editor-options-container > * {
+	flex: 20%;
+}
+.image_editor_color .editor-options-container > * > * {
+	position: relative;
+}
+.image_editor_color .editor-options-container > * > *.active::before {
+	content: "\f00c";
+	display: var(--fa-display,inline-block);
+	font-style: normal;
+	font-variant: normal;
+	line-height: 1;
+	text-rendering: auto;
+	font-family: var(--fa-style-family, "Font Awesome 6 Free");
+	font-weight: var(--fa-style, 900);
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%) scale(125%);
+	color: black;
+}
+.image_editor_color .editor-options-container > *:first-child {
+	flex: 100%;
+}
+.image_editor_color .editor-options-container > *:first-child > * {
+	width: 100%;
+}
+.image_editor_color .editor-options-container > *:first-child > * > input {
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	cursor: pointer;
+}
+.image_editor_color .editor-options-container > *:first-child > * > span {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	opacity: 0.5;
+}
+.image_editor_color .editor-options-container > *:first-child > *.active > span {
+	opacity: 0;
+}
+
+.image_editor_tool .editor-options-container {
+	flex-wrap: wrap;
+}
+
+.image_editor_tool .editor-options-container > * {
+	padding: 2px;
+	flex: 50%;
+}
+
+.editor-controls-center {
+	/* background: var(--background-color2); */
+	flex: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.editor-controls-center > div {
+	position: relative;
+	background: black;
+}
+
+.editor-controls-center canvas {
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+
+.editor-controls-right {
+	padding: 32px;
+	display: flex;
+	flex-direction: column;
+}
+
+
+.editor-controls-right > div:last-child {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-width: 200px;
+	gap: 5px;
+	justify-content: end;
+}
+
+.image-editor-button {
+	width: 100%;
+	height: 32px;
+	border-radius: 16px;
+	background: var(--background-color3);
+}
+
+#init_image_button_inpaint .input-toggle {
+	position: absolute;
+	left: 16px;
+}
+
+#init_image_button_inpaint .input-toggle input:not(:checked) ~ label {
+	pointer-events: none;
+}
+
+
+.image-editor-popup {
+	--popup-margin: 16px;
+	--popup-padding: 24px;
+}
+
+.image-editor-popup > div {
+	margin: var(--popup-margin);
+	padding: var(--popup-padding);
+	min-height: calc(100vh - (2 * var(--popup-margin)));
+	max-width: none;
+}
+
+.image-editor-popup h1 {
+	position: absolute;
+	top: 32px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+
+@media screen and (max-width: 700px) {
+	.image-editor-popup > div {
+		margin: 0px;
+		padding: 0px;
+	}
+
+	.image-editor-popup h1 {
+		position: relative;
+		transform: none;
+		left: auto;
+	}
+}
+
+
+.image-editor-popup > div > div {
+	min-height: calc(100vh - (2 * var(--popup-margin)) - (2 * var(--popup-padding)));
+}
+
+.inpainter .image_editor_color {
+	display: none;
+}
+
+.inpainter .editor-canvas-background {
+	opacity: 0.75;
+}
+
+#init_image_preview_container .button {
+	display: flex;
+	padding: 6px;
+	height: 24px;
+	box-shadow: 2px 2px 1px 1px #00000088;
+}
+
+#init_image_preview_container .button:hover {
+  background: var(--background-color4)
+}
+
+.image-editor-popup .button {
+	display: flex;
+}
+.image-editor-popup h4 {
+	text-align: left;
+}

ui/media/css/main.css

@@ -8,6 +8,7 @@ html {
 }
 
 body {
+    margin: 0;
     font-size: 11pt;
     background-color: var(--background-color1);
     color: var(--text-color);
@@ -21,15 +22,27 @@ a:visited {
 label {
     font-size: 10pt;
 }
+code {
+    background: var(--background-color4);
+    padding: 2px 4px;
+    border-radius: 4px;
+}
 #prompt {
     width: 100%;
     height: 65pt;
-    font-size: 13px;
+    font-size: 14px;
     margin-bottom: 6px;
+    margin-top: 5px;
+    display: block;
+    border: 2px solid var(--background-color2);
 }
-.image_preview_container {
-    /* display: none; */
-    margin-top: 10pt;
+#negative_prompt {
+    width: 100%;
+    height: 50pt;
+    font-size: 13px;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    display: block;
 }
 .image_clear_btn {
     position: absolute;
@@ -48,6 +61,11 @@ label {
     top: 0px;
     right: 0px;
 }
+.image_clear_btn:active {
+    position: absolute;
+    top: 0px;
+    left: auto;
+}
 .settings-box ul {
     font-size: 9pt;
     margin-bottom: 5px;
@@ -64,17 +82,17 @@ label {
     font-size: small;
     padding-bottom: 3pt;
 }
-#progressBar {
-    font-size: small;
-}
 #footer {
     font-size: small;
-    padding-left: 10pt;
+    padding: 10pt;
     background: none;
 }
 #footer-legal {
     font-size: 8pt;
 }
+#footer-spacer {
+    flex: 0.7
+}
 .imgSeedLabel {
     font-size: 0.8em;
     background-color: var(--background-color2);
@@ -107,33 +125,42 @@ label {
     margin-bottom: 7px;
 }
 #container {
-    width: 95%;
-    margin-left: auto;
-    margin-right: auto;
-}
-@media screen and (max-width: 1800px) {
-    #container {
-        width: 100%;
-    }
+    min-height: 100vh;
+    width: 100%;
+    margin: 0px;
+    display: flex;
+    flex-direction: column;
 }
 #logo small {
     font-size: 11pt;
 }
 #editor {
-    padding: 5px;
+    background: var(--background-color1);
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 370pt;
 }
 #editor label {
     font-weight: normal;
 }
+#editor h4 {
+    margin: 0px;
+    white-space: nowrap;
+}
+#editor .collapsible-content {
+    width: 100%;
+}
 .settings-box label small {
     color: rgb(153, 153, 153);
     margin-right: 10px;
 }
 #preview {
-    padding: 5px;
+    padding: 8px;
+    background: var(--background-color1);
 }
-#editor-inputs {
-    margin-bottom: 20px;
+#preview .collapsible-content {
+    padding: 0px 15px;
 }
 #editor-inputs-prompt {
     flex: 1;
@@ -151,7 +178,7 @@ label {
 #makeImage {
     flex: 0 0 70px;
     background: var(--accent-color);
-    border: var(--make-image-border);
+    border: var(--primary-button-border);
     color: rgb(255, 221, 255);
     width: 100%;
     height: 30pt;
@@ -168,6 +195,7 @@ label {
     height: 30pt;
     border-radius: 6px;
     display: none;
+    margin-top: 2pt;
 }
 #stopImage:hover {
     background: rgb(177, 27, 0);
@@ -176,12 +204,6 @@ label {
     display: flex;
     width: 100%;
 }
-.col-50 {
-    flex: 50%;
-}
-.col-fixed-10 {
-    flex: 0 0 350pt;
-}
 .col-free {
     flex: 1;
 }
@@ -189,8 +211,8 @@ label {
     cursor: pointer;
 }
 .collapsible-content {
-    display: none;
-    padding-left: 15px;
+    display: block;
+    padding-left: 10px;
 }
 .collapsible-content h5 {
     padding: 5pt 0pt;
@@ -201,50 +223,39 @@ label {
     color: white;
     padding-right: 5px;
 }
-.panel-box {
-    background: var(--background-color2);
-    border: 1px solid var(--background-color3);
-    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);
+.collapsible:not(.active) ~ .collapsible-content  {
+    display: none !important;
 }
-.panel-box h4 {
-    margin: 0;
-    padding: 2px 0;
+#editor-modifiers {
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 #editor-modifiers .editor-modifiers-leaf {
     padding-top: 10pt;
     padding-bottom: 10pt;
 }
-#preview {
-    margin-left: 10pt;
-}
 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);
+    background: var(--background-color3);
     height: 1pt;
-    margin: 15pt 0;
+    margin: 16px 0px;
 }
 #editor-inputs-tags-container {
     margin-top: 5pt;
     display: none;
 }
 #server-status {
-    display: inline;
-    float: right;
-    transform: translateY(-5pt);
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: right;
 }
 #server-status-color {
-    /* width: 8pt;
-    height: 8pt;
-    border-radius: 4pt; */
     font-size: 14pt;
     color: rgb(200, 139, 0);
-    /* background-color: rgb(197, 1, 1); */
-    /* transform: translateY(15%); */
     display: inline;
 }
 #server-status-msg {
@@ -261,43 +272,20 @@ img {
     transform: translateY(25%);
 }
 
-#inpaintingEditor {
-    width: 300pt;
-    height: 300pt;
-    margin-top: 5pt;
-}
-.drawing-board-canvas-wrapper {
-    background-size: 100% 100%;
-}
-.drawing-board-controls {
-    min-width: 273px;
-}
-.drawing-board-control > button {
-    background-color: #eee;
-    border-radius: 3pt;
-}
-.drawing-board-control-inner {
-    background-color: #eee;
-    border-radius: 3pt;
-}
-#inpaintingEditor canvas {
-    opacity: 0.6;
-}
-#enable_mask {
-    margin-top: 8pt;
-}
-
 #top-nav {
-    padding-top: 3pt;
-    padding-bottom: 15pt;
+    position: relative;
+    background: var(--background-color4);
+    display: flex;
 }
-#top-nav .icon {
+.tab .icon {
     padding-right: 4pt;
     font-size: 14pt;
     transform: translateY(1pt);
 }
 #logo {
     display: inline;
+    padding: 12px;
+    white-space: nowrap;
 }
 #logo h1 {
     display: inline;
@@ -311,6 +299,8 @@ img {
     float: left;
     display: inline;
     padding-left: 20pt;
+}
+#top-nav-items > li:first-child {
     cursor: default;
 }
 #initial-text {
@@ -324,26 +314,12 @@ img {
 .pl-5 {
     padding-left: 5pt;
 }
-#system-settings {
-    width: 360pt;
-    transform: translateX(-100%) translateX(70pt);
-
-    padding-top: 10pt;
-    padding-bottom: 10pt;
-}
-#system-settings ul {
-    margin: 0;
-    padding: 0;
-}
-#system-settings li {
-    padding-left: 5pt;
-}
 #community-links {
+    display: inline-block;
     list-style-type: none;
-    margin: 0;
-    padding: 12pt;
-    padding-bottom: 0pt;
-    transform: translateX(-15%);
+    text-align: left;
+    margin: auto;
+    padding: 0px;
 }
 #community-links li {
     padding-bottom: 12pt;
@@ -357,6 +333,35 @@ img {
     color: var(--text-color);
     text-decoration: none;
 }
+.float-child h1 {
+    border-bottom: var(--button-border);
+}
+#help-links {
+    display: inline-block;
+    list-style-type: none;
+    text-align: left;
+    margin: auto;
+    padding: 0px;
+}
+#help-links li {
+    padding-bottom: 12pt;
+    display: block;
+    font-size: 10pt;
+}
+#help-links li .fa-fw {
+    padding-right: 2pt;
+}
+#help-links li a {
+    color: var(--text-color);
+    text-decoration: none;
+}
+#help-links li ul {
+    padding-inline-start: 10px;
+    margin-top: 8px;
+}
+.help-section {
+    font-size: 130%;
+}
 .dropdown {
     overflow: hidden;
 }
@@ -383,6 +388,9 @@ img {
     border-radius: 5pt;
     box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
 }
+.imageTaskContainer > div > .collapsible-handle {
+    display: none;
+}
 .taskStatusLabel {
     float: left;
     font-size: 8pt;
@@ -402,6 +410,12 @@ img {
     border: 1px solid rgb(107, 75, 0);
     color:rgb(255, 242, 211)
 }
+.primaryButton {
+    flex: 0 0 70px;
+    background: var(--accent-color);
+    border: var(--primary-button-border);
+    color: rgb(255, 221, 255);
+}
 .secondaryButton {
     background: rgb(132, 8, 0);
     border: 1px solid rgb(122, 29, 0);
@@ -412,6 +426,17 @@ img {
 .secondaryButton:hover {
     background: rgb(177, 27, 0);
 }
+.useSettings {
+    background: var(--accent-color);
+    border: 1px solid var(--accent-color);
+    color: rgb(255, 221, 255);
+    padding: 3pt 6pt;
+    margin-right: 6pt;
+    float: right;
+}
+.useSettings:hover {
+    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+}
 .stopTask {
     float: right;
 }
@@ -430,29 +455,77 @@ img {
 #prompt_from_file {
     display: none;
 }
-#init_image_preview {
-    max-width: 150px;
+
+#init_image_preview_container {
+    display: flex;
+    margin-top: 6px;
+    margin-bottom: 8px;
+}
+
+#init_image_preview_container:not(.has-image) #init_image_wrapper,
+#init_image_preview_container:not(.has-image) #inpaint_button_container  {
+    display: none;
+}
+
+
+#init_image_buttons {
+    display: flex;
+    gap: 8px;
+}
+
+#init_image_preview_container.has-image #init_image_buttons {
+    flex-direction: column;
+    padding-left: 8px;
+}
+
+#init_image_buttons .button {
+    position: relative;
+    height: 32px;
+    width: 150px;
+}
+
+#init_image_buttons .button > input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+}
+
+#inpaint_button_container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+#init_image_wrapper {
+    grid-row: span 3;
+    position: relative;
+    width: fit-content;
     max-height: 150px;
+}
+
+#init_image_preview {
+    max-height: 150px;
+    height: 100%;
+    width: 100%;
 	object-fit: contain;
     border-radius: 6px;
     transition: all 1s ease-in-out;
 }
-
+/* 
 #init_image_preview:hover {
     max-width: 500px;
     max-height: 1000px;
-    transition: all 1s 0.5s ease-in-out;
-}
 
-#init_image_wrapper {
-    position: relative;
-    width: fit-content;
-}
+    transition: all 1s 0.5s ease-in-out;
+} */
 
 #init_image_size_box {
     position: absolute;
     right: 0px;
-    bottom: 3px;
+    bottom: 0px;
     padding: 3px;
     background: black;
     color: white;
@@ -462,6 +535,24 @@ img {
     border-radius: 6px 0px;
 }
 
+#editor-settings {
+    min-width: 350px;
+}
+
+#editor-settings-entries {
+    display: flex;
+    flex-direction: column;
+}
+
+#editor-settings-entries > div {
+    margin-top: 15px;
+}
+
+#editor-settings-entries ul {
+    margin: 0px;
+    padding: 0px;
+}
+
 #editor-settings-entries table td {
     padding: 0px;
     line-height: 28px;
@@ -477,6 +568,7 @@ img {
     width: 100%;
 }
 
+/* INPUTS STYLING */
 button,
 input[type="file"],
 input[type="checkbox"],
@@ -485,6 +577,10 @@ option {
     cursor: pointer;
 }
 
+input[type="file"] * {
+    cursor: pointer;
+}
+
 input,
 select,
 textarea {
@@ -523,12 +619,26 @@ input[type="file"] {
 }
 
 button,
-input::file-selector-button { 
+input::file-selector-button,
+.button { 
     padding: 2px 4px;
-    border-radius: 4px;
+    border-radius: var(--input-border-radius);
     background: var(--button-color);
     color: var(--button-text-color);
     border: var(--button-border);
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.button i {
+    margin-right: 8px;
+}
+
+button:hover,
+.button:hover {
+  transition-duration: 0.1s;
+  background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
 }
 
 input::file-selector-button {
@@ -536,13 +646,71 @@ input::file-selector-button {
     height: 19px;
 }
 
+
+.input-toggle {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    width: calc(var(--input-height) * 2);
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    margin-right: 4px;
+}
+.input-toggle > input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+.input-toggle > label {
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    height: var(--input-height);
+    padding: 0;
+    line-height: var(--input-height);
+    border: var(--input-border-size) solid var(--input-border-color);
+    border-radius: var(--input-height);
+    background: var(--input-background-color);
+    transition: background 0.2s ease-in;
+}
+.input-toggle > label:before {
+    content: "";
+    display: block;
+    width: calc(var(--input-height) - ((var(--input-border-size) + var(--input-switch-padding)) * 2));
+    margin: 0px;
+    background: var(--input-text-color);
+    position: absolute;
+    top: calc(var(--input-border-size) + var(--input-switch-padding));
+    bottom: calc(var(--input-border-size) + var(--input-switch-padding));
+    right: calc(var(--input-border-size) + var(--input-switch-padding) + var(--input-height));
+    border-radius: calc(var(--input-height) - ((var(--input-border-size) + var(--input-switch-padding)) * 2));
+    transition: all 0.2s ease-in 0s; 
+    opacity: 0.8;
+}
+.input-toggle > input:checked + label {
+    background: var(--accent-color);
+}
+.input-toggle > input:checked + label:before {
+    right: calc(var(--input-border-size) + var(--input-switch-padding));
+    opacity: 1;
+}
+
+/* Small screens */
+@media screen and (max-width: 1265px) {
+    #top-nav {
+        flex-direction: column;
+    }
+}
+
+/* MOBILE SUPPORT */
 @media screen and (max-width: 700px) {
     body {
         margin: 0px;
     }
     #container {
         margin: 0px;
-        padding: 10px
     }
     .flex-container {
         flex-direction: column;
@@ -571,21 +739,106 @@ input::file-selector-button {
         left: 0px;
         right: 0px;
     }
+    #editor {
+        padding: 16px 8px;
+    }
+    #editor-settings {
+        min-width: 0px;
+    }
+    .tab-content-inner {
+        margin: 0px;
+    }
+    .tab {
+        font-size: 0;
+    }
+    .tab .icon {
+        padding-right: 0px;
+    }
+    #server-status {
+        top: 75%;
+    }
+    .popup > div {
+        padding-left: 5px !important;
+        padding-right: 5px !important;
+    }
+    .popup > div input, .popup > div select {
+        max-width: 40vw;
+    }
+    .popup .close-button {
+        padding: 0px !important;
+        margin: 24px !important;
+    }
+    .simple-tooltip {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    #server-status #server-status-msg {
+        display: none;
+    }
+    #server-status:hover #server-status-msg {
+        display: inline;
+    }
+}
+
+@media (min-width: 700px) {
+    /* #editor {
+        max-width: 480px;
+    }*/
+    .float-container {
+        padding: 20px;
+    }
+    .float-child {
+        width: 50%;
+        float: left;
+        padding: 20px;
+    }
+}
+
+.help-btn {
+    position: relative;
 }
 
 #promptsFromFileBtn {
     font-size: 9pt;
+    display: inline;
+    background-color: var(--accent-color);
 }
 
-#reset-image-settings {
+.section-button {
     position: relative;
     transform: translateY(-13%);
 }
+.collapsible:not(.active) #copy-image-settings {
+    display: none;
+}
 
+.section-button {
+    cursor: pointer;
+    float: right;
+    padding: 8px;
+    opacity: 1;
+    transition: opacity 0.5;
+}
+
+.section-button {
+    cursor: pointer;
+    float: right;
+    padding: 8px;
+    opacity: 1;
+    transition: opacity 0.5;
+}
+
+.collapsible:not(.active) .section-button {
+    display: none;
+}
+
+/* SIMPLE TOOTIP */
 .simple-tooltip {
 	border-radius: 3px;
 	font-weight: bold;
-	font-size: 16px;
+	font-size: 12px;
     background-color: var(--background-color3);
 
 	visibility: hidden;
@@ -604,8 +857,6 @@ input::file-selector-button {
         visibility: visible;
     }
 }
-
-/* position specific */
 .simple-tooltip.right {
     right: 0px;
     top: 50%;
@@ -641,3 +892,172 @@ input::file-selector-button {
 :hover > .simple-tooltip.bottom {
     transform: translate(-50%, 100%);
 }
+
+/* PROGRESS BAR */
+.progress-bar {
+    background: var(--background-color3);
+    border-radius: 4px;
+    border: 2px solid var(--background-color3);
+    height: 16px;
+    position: relative;
+    transition: 0.25s 1s border, 0.25s 1s height;
+}
+.progress-bar > div {
+    background: var(--accent-color);
+    border-radius: 4px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 0%;
+    transition: width 1s ease-in-out;
+}
+.progress-bar.active {
+    background: repeating-linear-gradient(-65deg, 
+        var(--background-color2), 
+        var(--background-color2) 4px, 
+        var(--background-color3) 5px, 
+        var(--background-color3) 9px, 
+        var(--background-color2) 10px);
+    background-size: 200% auto;
+    background-position: 0 100%;
+    animation: progress-anim 2s infinite;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+}
+
+@keyframes progress-anim { 
+    0%   { background-position: -55px 0; }
+    100% { background-position: 0 0; }
+}
+
+/* POPUPS */
+.popup:not(.active) {
+    visibility: hidden;
+    opacity: 0;
+}
+
+.popup {
+    position: absolute;
+    background: rgba(32, 33, 36, 50%);
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: 1000;
+    opacity: 1;
+    transition: 0s visibility, 0.3s opacity;
+}
+
+@media only screen and (min-height: 1050px) {
+    .popup {
+        position: fixed;
+    }
+}
+
+.popup > div {
+    position: relative;
+    background: var(--background-color2);
+    border: solid 1px var(--background-color3);
+    max-width: 700px;
+    margin: auto;
+    margin-top: 50px;
+    border-radius: 6px;
+    padding: 30px;
+    text-align: center;
+    box-shadow: 0px 0px 30px black;
+}
+
+.popup .close-button {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    transform: scale(150%);
+    cursor: pointer;
+    padding: 24px;
+}
+
+/* TABS */
+#tab-container {
+    display: flex;
+    align-items: flex-end;
+}
+
+.tab {
+    padding: 8px 16px;
+    border-radius: 4px 4px 0px 0px;
+    margin-left: 8px;
+    cursor: pointer;
+    background: var(--background-color1);
+    opacity: 50%;
+    transition: opacity 0.25s;
+}
+
+.tab:hover {
+    opacity: 75%;
+}
+
+.tab.active {
+    opacity: 100%;
+}
+
+.tab-content:not(.active) {
+    display: none;
+}
+
+#tab-content-wrapper > * {
+    padding-top: 8px;
+}
+
+.tab-content-inner {
+    margin: auto;
+    max-width: 600px;
+    text-align: center;
+    padding: 20px 10px;
+}
+
+.panel-box {
+    background: var(--background-color2);
+    border: 1px solid var(--background-color3);
+    border-radius: 7px;
+    padding: 7px;
+    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);
+}
+
+i.active {
+    background: var(--accent-color);
+}
+.primaryButton.active {
+    background: hsl(var(--accent-hue), 100%, 50%);
+}
+#system-info {
+    max-width: 800px;
+    font-size: 10pt;
+}
+#system-info .value {
+    text-align: left;
+    padding-left: 10pt;
+}
+#system-info label {
+    float: right;
+    font-weight: bold;
+}
+
+button:active {
+  transition-duration: 0.1s;
+  background-color: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 24%));
+  position: relative;
+  top: 1px;
+  left: 1px;
+}
+
+button#save-system-settings-btn {
+    padding: 4pt 8pt;
+}
+#ip-info a {
+    color:var(--text-color)
+}
+#ip-info div {
+    line-height: 200%;
+}

ui/media/css/modifier-thumbnails.css

@@ -217,32 +217,6 @@
 #modifier-settings-btn {
     float: right;
 }
-
-#modifier-settings-config {
-    position: fixed;
-    background: rgba(32, 33, 36, 50%);
-    top: 0px;
-    left: 0px;
-    width: 100vw;
-    height: 100vh;
-    z-index: 1000;
-}
-
-#modifier-settings-config > div {
-    background: var(--background-color2);
-    max-width: 600px;
-    margin: auto;
-    margin-top: 100px;
-    border-radius: 6px;
-    padding: 30px;
-    text-align: center;
-}
-#modifier-settings-config-close-btn {
-    float: right;
-    cursor: pointer;
-    padding: 10px;
-    transform: translate(50%, -50%) scaleX(130%);
-}
 #modifier-settings-config textarea {
     width: 90%;
     height: 150px;

ui/media/css/themes.css

@@ -1,34 +1,43 @@
 :root {
-    --background-color1: rgb(32, 33, 36); /* main parts of the page */
-    --background-color2: rgb(44, 45, 48); /* main panels */
-    --background-color3: rgb(47, 49, 53);
-    --background-color4: rgb(18, 18, 19); /* settings dropdowns */
+    --main-hue: 222;
+	--main-saturation: 4%;
+	--value-base: 13%;
+	--value-step: 5%;
+	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
+	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1 * var(--value-step))));
+	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.5 * var(--value-step))));
+	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1.5 * var(--value-step))));
 
-    --accent-hue: 266;
+    --accent-hue: 267;
     --accent-lightness: 36%;
     --accent-lightness-hover: 40%;
 
     --text-color: #eee;
 
-    --input-text-color: black;
-    --input-background-color: #e9e9ed; 
-    --input-border-color: #8f8f9d; 
+	--input-text-color: #eee;
+    --input-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.7 * var(--value-step))));
+	--input-border-color: var(--background-color4);
 
     --button-text-color: var(--input-text-color);
-    --button-color: #e9e9ed;
-    --button-border: 1px solid #8f8f9d;
+    --button-color: var(--input-background-color);
+    --button-border: none;
 
     /* other */
     --input-border-radius: 4px;
     --input-border-size: 1px; 
     --accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
     --accent-color-hover: hsl(var(--accent-hue), 100%, var(--accent-lightness-hover));
-    --make-image-border: 2px solid hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) - 21%));
+    --primary-button-border: none;
+    --input-switch-padding: 1px;
+    --input-height: 18px;
+
+    /* Main theme color, hex color fallback. */
+    --theme-color-fallback: #673AB6;
 }
 
 .theme-light {
     --background-color1: white; 
-    --background-color2: #dddddd;
+    --background-color2: #ececec;
     --background-color3: #e7e9eb;
     --background-color4: #cccccc;
 
@@ -37,6 +46,8 @@
     --input-text-color: black;
     --input-background-color: #f8f9fa; 
     --input-border-color: grey; 
+
+    --theme-color-fallback: #aaaaaa;
 }
 
 .theme-discord {
@@ -47,37 +58,29 @@
     
     --accent-hue: 235;
     --accent-lightness: 65%;
-    --make-image-border: none;
-    
-    --button-color: var(--accent-color);
-    --button-border: none;
 
-    --input-text-color: #ccc;
     --input-border-size: 2px; 
     --input-background-color: #202225; 
     --input-border-color: var(--input-background-color); 
+
+    --theme-color-fallback: #202225;
 }
 
 .theme-cool-blue {
     --main-hue: 222;
 	--main-saturation: 18%;
-	--value-base: 19%;
+	--value-base: 18%;
 	--value-step: 3%;
 	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
 	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
 	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
 	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
-    
-    --accent-hue: 212;
-    --make-image-border: none;
 
-    --button-color: var(--accent-color);
-    --button-border: none;
-    
-    --input-border-size: 1px; 
     --input-background-color: var(--background-color3);
-	--input-text-color: #ccc;
-	--input-border-color: var(--background-color4);
+
+    --accent-hue: 212;
+
+    --theme-color-fallback: #0056b8;
 }
 
 
@@ -90,16 +93,10 @@
 	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
 	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
 	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
-    
-    --make-image-border: none;
 
-    --button-color: var(--accent-color);
-    --button-border: none;
-    
-    --input-border-size: 1px; 
     --input-background-color: var(--background-color3);
-	--input-text-color: #ccc;
-	--input-border-color: var(--background-color4);
+
+    --theme-color-fallback: #5300b8;
 }
 
 .theme-super-dark {
@@ -110,17 +107,12 @@
 	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
 	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1 * var(--value-step))));
 	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
-	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3 * var(--value-step))));
-    
-    --make-image-border: none;
+	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1.4 * var(--value-step))));
 
-    --button-color: var(--accent-color);
-    --button-border: none;
-    
-    --input-border-size: 0px; 
     --input-background-color: var(--background-color3);
-	--input-text-color: #ccc;
-	--input-border-color: var(--background-color4);
+    --input-border-size: 0px;
+
+    --theme-color-fallback: #000000;
 }
 
 .theme-wild {
@@ -134,13 +126,35 @@
 	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
     
     --accent-hue: 212;
-    --make-image-border: none;
-
-    --button-color: var(--accent-color);
-    --button-border: none;
     
     --input-border-size: 1px; 
     --input-background-color: hsl(222, var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
-	--input-text-color: red;
-	--input-border-color: green;
+    --input-text-color: #FF0000;
+    --input-border-color: #005E05;
 }
+
+
+.theme-gnomie {
+    --background-color1: #242424;
+    --background-color2: #353535;
+    --background-color3: #494949;
+    --background-color4: #000000;
+    
+    --accent-hue: 213;
+    --accent-lightness: 55%;
+    --accent-color: #2168bf;
+
+    --input-border-radius: 6px;
+    --input-text-color: #ffffff;
+    --input-background-color: #2a2a2a; 
+    --input-border-size: 0px; 
+    --input-border-color: var(--input-background-color); 
+
+    --theme-color-fallback: #2168bf;
+}
+
+.theme-gnomie .panel-box {
+    border: none;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+}

ui/media/js/auto-save.js

@@ -13,6 +13,7 @@ const SETTINGS_IDS_LIST = [
     "num_outputs_total",
     "num_outputs_parallel",
     "stable_diffusion_model",
+    "vae_model",
     "sampler",
     "width",
     "height",
@@ -20,6 +21,7 @@ const SETTINGS_IDS_LIST = [
     "guidance_scale",
     "prompt_strength",
     "output_format",
+    "output_quality",
     "negative_prompt",
     "stream_image_progress",
     "use_face_correction",
@@ -33,8 +35,8 @@ const SETTINGS_IDS_LIST = [
     "diskPath",
     "sound_toggle",
     "turbo",
-    "use_cpu",
     "use_full_precision",
+    "confirm_dangerous_actions",
     "auto_save_settings"
 ]
 
@@ -52,7 +54,12 @@ const SETTINGS_SECTIONS = [ // gets the "keys" property filled in with an ordere
 async function initSettings() {
     SETTINGS_IDS_LIST.forEach(id => {
         var element = document.getElementById(id)
-        var label = document.querySelector(`label[for='${element.id}']`)
+        if (!element) {
+            console.error(`Missing settings element ${id}`)
+        }
+        if (id in SETTINGS) { // don't create it again
+            return
+        }
         SETTINGS[id] = {
             key: id,
             element: element,
@@ -68,7 +75,8 @@ async function initSettings() {
     SETTINGS_SECTIONS.forEach(section => {
         var name = section.name
         var element = document.getElementById(section.id)
-        var children = Array.from(element.querySelectorAll(unsorted_settings_ids.map(id => `#${id}`).join(",")))
+        var unsorted_ids = unsorted_settings_ids.map(id => `#${id}`).join(",")
+        var children = unsorted_ids == "" ? [] : Array.from(element.querySelectorAll(unsorted_ids));
         section.keys = []
         children.forEach(e => {
             section.keys.push(e.id)
@@ -126,8 +134,12 @@ function loadSettings() {
             return
         }
         CURRENTLY_LOADING_SETTINGS = true
-        saved_settings.map(saved_setting => {
+        saved_settings.forEach(saved_setting => {
             var setting = SETTINGS[saved_setting.key]
+            if (!setting) {
+                console.warn(`Attempted to load setting ${saved_setting.key}, but no setting found`);
+                return null;
+            }
             setting.ignore = saved_setting.ignore
             if (!setting.ignore) {
                 setting.value = saved_setting.value
@@ -206,22 +218,25 @@ function fillSaveSettingsConfigTable() {
             })
         })
     })
+    prettifyInputs(saveSettingsConfigTable)
 }
 
-document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
-    saveSettingsConfigOverlay.style.display = 'none'
+// configureSettingsSaveBtn
+
+
+
+
+var autoSaveSettings = document.getElementById("auto_save_settings")
+var configSettingsButton = document.createElement("button")
+configSettingsButton.textContent = "Configure"
+configSettingsButton.style.margin = "0px 5px"
+autoSaveSettings.insertAdjacentElement("beforebegin", configSettingsButton)
+autoSaveSettings.addEventListener("change", () => {
+    configSettingsButton.style.display = autoSaveSettings.checked ? "block" : "none"
 })
-document.getElementById("configureSettingsSaveBtn").addEventListener('click', () => {
+configSettingsButton.addEventListener('click', () => {
     fillSaveSettingsConfigTable()
-    saveSettingsConfigOverlay.style.display = 'block'
-})
-saveSettingsConfigOverlay.addEventListener('click', (event) => {
-    if (event.target.id == saveSettingsConfigOverlay.id) {
-        saveSettingsConfigOverlay.style.display = 'none'
-    }
-})
-document.getElementById("save-settings-config-close-btn").addEventListener('click', () => {
-    saveSettingsConfigOverlay.style.display = 'none'
+    saveSettingsConfigOverlay.classList.add("active")
 })
 resetImageSettingsButton.addEventListener('click', event => {
     loadDefaultSettingsSection("editor-settings");
@@ -273,7 +288,12 @@ function tryLoadOldSettings() {
     Object.keys(individual_settings_map).forEach(localStorageKey => {
         var localStorageValue = localStorage.getItem(localStorageKey);
         if (localStorageValue !== null) {
-            var setting = SETTINGS[individual_settings_map[localStorageKey]]
+            let key = individual_settings_map[localStorageKey]
+            var setting = SETTINGS[key]
+            if (!setting) {
+                console.warn(`Attempted to map old setting ${key}, but no setting found`);
+                return null;
+            }
             if (setting.element.type == "checkbox" && (typeof localStorageValue === "string" || localStorageValue instanceof String)) {
                 localStorageValue = localStorageValue == "true"
             }

ui/media/js/dnd.js

@@ -0,0 +1,531 @@
+"use strict" // Opt in to a restricted variant of JavaScript
+
+const EXT_REGEX = /(?:\.([^.]+))?$/
+const TEXT_EXTENSIONS = ['txt', 'json']
+const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'bmp', 'tiff', 'tif', 'tga']
+
+function parseBoolean(stringValue) {
+    if (typeof stringValue === 'boolean') {
+        return stringValue
+    }
+    if (typeof stringValue === 'number') {
+        return stringValue !== 0
+    }
+    if (typeof stringValue !== 'string') {
+        return false
+    }
+    switch(stringValue?.toLowerCase()?.trim()) {
+        case "true":
+        case "yes":
+        case "on":
+        case "1":
+          return true;
+
+        case "false":
+        case "no":
+        case "off":
+        case "0":
+        case null:
+        case undefined:
+          return false;
+    }
+    try {
+        return Boolean(JSON.parse(stringValue));
+    } catch {
+        return Boolean(stringValue)
+    }
+}
+
+const TASK_MAPPING = {
+    prompt: { name: 'Prompt',
+        setUI: (prompt) => {
+            promptField.value = prompt
+        },
+        readUI: () => promptField.value,
+        parse: (val) => val
+    },
+    negative_prompt: { name: 'Negative Prompt',
+        setUI: (negative_prompt) => {
+            negativePromptField.value = negative_prompt
+        },
+        readUI: () => negativePromptField.value,
+        parse: (val) => val
+    },
+    active_tags: { name: "Image Modifiers",
+        setUI: (active_tags) => {
+            refreshModifiersState(active_tags)
+        },
+        readUI: () => activeTags.map(x => x.name),
+        parse: (val) => val
+    },
+    width: { name: 'Width',
+        setUI: (width) => {
+            const oldVal = widthField.value
+            widthField.value = width
+            if (!widthField.value) {
+                widthField.value = oldVal
+            }
+        },
+        readUI: () => parseInt(widthField.value),
+        parse: (val) => parseInt(val)
+    },
+    height: { name: 'Height',
+        setUI: (height) => {
+            const oldVal = heightField.value
+            heightField.value = height
+            if (!heightField.value) {
+                heightField.value = oldVal
+            }
+        },
+        readUI: () => parseInt(heightField.value),
+        parse: (val) => parseInt(val)
+    },
+    seed: { name: 'Seed',
+        setUI: (seed) => {
+            if (!seed) {
+                randomSeedField.checked = true
+                seedField.disabled = true
+                seedField.value = 0
+                return
+            }
+            randomSeedField.checked = false
+            seedField.disabled = false
+            seedField.value = seed
+        },
+        readUI: () => parseInt(seedField.value), // just return the value the user is seeing in the UI
+        parse: (val) => parseInt(val)
+    },
+    num_inference_steps: { name: 'Steps',
+        setUI: (num_inference_steps) => {
+            numInferenceStepsField.value = num_inference_steps
+        },
+        readUI: () => parseInt(numInferenceStepsField.value),
+        parse: (val) => parseInt(val)
+    },
+    guidance_scale: { name: 'Guidance Scale',
+        setUI: (guidance_scale) => {
+            guidanceScaleField.value = guidance_scale
+            updateGuidanceScaleSlider()
+        },
+        readUI: () => parseFloat(guidanceScaleField.value),
+        parse: (val) => parseFloat(val)
+    },
+    prompt_strength: { name: 'Prompt Strength',
+        setUI: (prompt_strength) => {
+            promptStrengthField.value = prompt_strength
+            updatePromptStrengthSlider()
+        },
+        readUI: () => parseFloat(promptStrengthField.value),
+        parse: (val) => parseFloat(val)
+    },
+
+    init_image:  { name: 'Initial Image',
+        setUI: (init_image) => {
+            initImagePreview.src = init_image
+        },
+        readUI: () => initImagePreview.src,
+        parse: (val) => val
+    },
+    mask:  { name: 'Mask',
+        setUI: (mask) => {
+            setTimeout(() => { // add a delay to insure this happens AFTER the main image loads (which reloads the inpainter)
+                imageInpainter.setImg(mask)
+            }, 250)
+            maskSetting.checked = Boolean(mask)
+        },
+        readUI: () => (maskSetting.checked ? imageInpainter.getImg() : undefined),
+        parse: (val) => val
+    },
+
+    use_face_correction: { name: 'Use Face Correction',
+        setUI: (use_face_correction) => {
+            useFaceCorrectionField.checked = parseBoolean(use_face_correction)
+        },
+        readUI: () => useFaceCorrectionField.checked,
+        parse: (val) => parseBoolean(val)
+    },
+    use_upscale: { name: 'Use Upscaling',
+        setUI: (use_upscale) => {
+            const oldVal = upscaleModelField.value
+            upscaleModelField.value = use_upscale
+            if (upscaleModelField.value) { // Is a valid value for the field.
+                useUpscalingField.checked = true
+                upscaleModelField.disabled = false
+            } else { // Not a valid value, restore the old value and disable the filter.
+                upscaleModelField.disabled = true
+                upscaleModelField.value = oldVal
+                useUpscalingField.checked = false
+            }
+        },
+        readUI: () => (useUpscalingField.checked ? upscaleModelField.value : undefined),
+        parse: (val) => val
+    },
+    sampler: { name: 'Sampler',
+        setUI: (sampler) => {
+            samplerField.value = sampler
+        },
+        readUI: () => samplerField.value,
+        parse: (val) => val
+    },
+    use_stable_diffusion_model: { name: 'Stable Diffusion model',
+        setUI: (use_stable_diffusion_model) => {
+            const oldVal = stableDiffusionModelField.value
+
+            use_stable_diffusion_model = getModelPath(use_stable_diffusion_model, ['.ckpt'])
+            stableDiffusionModelField.value = use_stable_diffusion_model
+
+            if (!stableDiffusionModelField.value) {
+                stableDiffusionModelField.value = oldVal
+            }
+        },
+        readUI: () => stableDiffusionModelField.value,
+        parse: (val) => val
+    },
+    use_vae_model: { name: 'VAE model',
+        setUI: (use_vae_model) => {
+            const oldVal = vaeModelField.value
+
+            if (use_vae_model !== '') {
+                use_vae_model = getModelPath(use_vae_model, ['.vae.pt', '.ckpt'])
+                use_vae_model = use_vae_model !== '' ? use_vae_model : oldVal
+            }
+            vaeModelField.value = use_vae_model
+        },
+        readUI: () => vaeModelField.value,
+        parse: (val) => val
+    },
+
+    num_outputs: { name: 'Parallel Images',
+        setUI: (num_outputs) => {
+            numOutputsParallelField.value = num_outputs
+        },
+        readUI: () => parseInt(numOutputsParallelField.value),
+        parse: (val) => val
+    },
+
+    use_cpu: { name: 'Use CPU',
+        setUI: (use_cpu) => {
+            useCPUField.checked = use_cpu
+        },
+        readUI: () => useCPUField.checked,
+        parse: (val) => val
+    },
+    turbo: { name: 'Turbo',
+        setUI: (turbo) => {
+            turboField.checked = turbo
+        },
+        readUI: () => turboField.checked,
+        parse: (val) => Boolean(val)
+    },
+    use_full_precision: { name: 'Use Full Precision',
+        setUI: (use_full_precision) => {
+            useFullPrecisionField.checked = use_full_precision
+        },
+        readUI: () => useFullPrecisionField.checked,
+        parse: (val) => Boolean(val)
+    },
+
+    stream_image_progress: { name: 'Stream Image Progress',
+        setUI: (stream_image_progress) => {
+            streamImageProgressField.checked = (parseInt(numOutputsTotalField.value) > 50 ? false : stream_image_progress)
+        },
+        readUI: () => streamImageProgressField.checked,
+        parse: (val) => Boolean(val)
+    },
+    show_only_filtered_image: { name: 'Show only the corrected/upscaled image',
+        setUI: (show_only_filtered_image) => {
+            showOnlyFilteredImageField.checked = show_only_filtered_image
+        },
+        readUI: () => showOnlyFilteredImageField.checked,
+        parse: (val) => Boolean(val)
+    },
+    output_format: { name: 'Output Format',
+        setUI: (output_format) => {
+            outputFormatField.value = output_format
+        },
+        readUI: () => outputFormatField.value,
+        parse: (val) => val
+    },
+    save_to_disk_path: { name: 'Save to disk path',
+        setUI: (save_to_disk_path) => {
+            saveToDiskField.checked = Boolean(save_to_disk_path)
+            diskPathField.value = save_to_disk_path
+        },
+        readUI: () => diskPathField.value,
+        parse: (val) => val
+    }
+}
+function restoreTaskToUI(task, fieldsToSkip) {
+    fieldsToSkip = fieldsToSkip || []
+
+    if ('numOutputsTotal' in task) {
+        numOutputsTotalField.value = task.numOutputsTotal
+    }
+    if ('seed' in task) {
+        randomSeedField.checked = false
+        seedField.value = task.seed
+    }
+    if (!('reqBody' in task)) {
+        return
+    }
+    for (const key in TASK_MAPPING) {
+        if (key in task.reqBody && !fieldsToSkip.includes(key)) {
+            TASK_MAPPING[key].setUI(task.reqBody[key])
+        }
+    }
+
+    // restore the original tag
+    promptField.value = task.reqBody.original_prompt || task.reqBody.prompt
+
+    // properly reset checkboxes
+    if (!('use_face_correction' in task.reqBody)) {
+        useFaceCorrectionField.checked = false
+    }
+    if (!('use_upscale' in task.reqBody)) {
+        useUpscalingField.checked = false
+    }
+    if (!('mask' in task.reqBody)) {
+        maskSetting.checked = false
+    }
+    upscaleModelField.disabled = !useUpscalingField.checked
+
+    // Show the source picture if present
+    initImagePreview.src = (task.reqBody.init_image == undefined ? '' : task.reqBody.init_image)
+    if (IMAGE_REGEX.test(initImagePreview.src)) {
+        if (Boolean(task.reqBody.mask)) {
+            setTimeout(() => { // add a delay to insure this happens AFTER the main image loads (which reloads the inpainter)
+                imageInpainter.setImg(task.reqBody.mask)
+            }, 250)
+        }
+    }
+}
+function readUI() {
+    const reqBody = {}
+    for (const key in TASK_MAPPING) {
+        reqBody[key] = TASK_MAPPING[key].readUI()
+    }
+    return {
+        'numOutputsTotal': parseInt(numOutputsTotalField.value),
+        'seed': TASK_MAPPING['seed'].readUI(),
+        'reqBody': reqBody
+    }
+}
+function getModelPath(filename, extensions)
+{
+    let pathIdx = filename.lastIndexOf('/') // Linux, Mac paths
+    if (pathIdx < 0) {
+        pathIdx = filename.lastIndexOf('\\') // Windows paths.
+    }
+    if (pathIdx >= 0) {
+        filename = filename.slice(pathIdx + 1)
+    }
+    extensions.forEach(ext => {
+        if (filename.endsWith(ext)) {
+            filename = filename.slice(0, filename.length - ext.length)
+        }
+    })
+    return filename
+}
+
+const TASK_TEXT_MAPPING = {
+    width: 'Width',
+    height: 'Height',
+    seed: 'Seed',
+    num_inference_steps: 'Steps',
+    guidance_scale: 'Guidance Scale',
+    prompt_strength: 'Prompt Strength',
+    use_face_correction: 'Use Face Correction',
+    use_upscale: 'Use Upscaling',
+    sampler: 'Sampler',
+    negative_prompt: 'Negative Prompt',
+    use_stable_diffusion_model: 'Stable Diffusion model'
+}
+const afterPromptRe = /^\s*Width\s*:\s*\d+\s*(?:\r\n|\r|\n)+\s*Height\s*:\s*\d+\s*(\r\n|\r|\n)+Seed\s*:\s*\d+\s*$/igm
+function parseTaskFromText(str) {
+    const taskReqBody = {}
+
+    // Prompt
+    afterPromptRe.lastIndex = 0
+    const match = afterPromptRe.exec(str)
+    if (match) {
+        let prompt = str.slice(0, match.index)
+        str = str.slice(prompt.length)
+        taskReqBody.prompt = prompt.trim()
+        console.log('Prompt:', taskReqBody.prompt)
+    }
+    for (const key in TASK_TEXT_MAPPING) {
+        const name = TASK_TEXT_MAPPING[key];
+        let val = undefined
+
+        const reName = new RegExp(`${name}\\ *:\\ *(.*)(?:\\r\\n|\\r|\\n)*`, 'igm')
+        const match = reName.exec(str);
+        if (match) {
+            str = str.slice(0, match.index) + str.slice(match.index + match[0].length)
+            val = match[1]
+        }
+        if (val !== undefined) {
+            taskReqBody[key] = TASK_MAPPING[key].parse(val.trim())
+            console.log(TASK_MAPPING[key].name + ':', taskReqBody[key])
+            if (!str) {
+                break
+            }
+        }
+    }
+    if (Object.keys(taskReqBody).length <= 0) {
+        return undefined
+    }
+    const task = { reqBody: taskReqBody }
+    if ('seed' in taskReqBody) {
+        task.seed = taskReqBody.seed
+    }
+    return task
+}
+
+async function parseContent(text) {
+    text = text.trim();
+    if (text.startsWith('{') && text.endsWith('}')) {
+        try {
+            const task = JSON.parse(text)
+            restoreTaskToUI(task)
+            return true
+        } catch (e) {
+            console.warn(`JSON text content couldn't be parsed.`, e)
+        }
+        return false
+    }
+    // Normal txt file.
+    const task = parseTaskFromText(text)
+    if (task) {
+        restoreTaskToUI(task)
+        return true
+    } else {
+        console.warn(`Raw text content couldn't be parsed.`)
+        return false
+    }
+}
+
+async function readFile(file, i) {
+    console.log(`Event %o reading file[${i}]:${file.name}...`)
+    const fileContent = (await file.text()).trim()
+    return await parseContent(fileContent)
+}
+
+function dropHandler(ev) {
+    console.log('Content dropped...')
+    let items = []
+
+    if (ev?.dataTransfer?.items) { // Use DataTransferItemList interface
+        items = Array.from(ev.dataTransfer.items)
+        items = items.filter(item => item.kind === 'file')
+        items = items.map(item => item.getAsFile())
+    } else if (ev?.dataTransfer?.files) { // Use DataTransfer interface
+        items = Array.from(ev.dataTransfer.files)
+    }
+
+    items.forEach(item => {item.file_ext = EXT_REGEX.exec(item.name.toLowerCase())[1]})
+
+    let text_items = items.filter(item => TEXT_EXTENSIONS.includes(item.file_ext))
+    let image_items = items.filter(item => IMAGE_EXTENSIONS.includes(item.file_ext))
+
+    if (image_items.length > 0 && ev.target == initImageSelector) {
+        return // let the event bubble up, so that the Init Image filepicker can receive this
+    }
+
+    ev.preventDefault() // Prevent default behavior (Prevent file/content from being opened)
+    text_items.forEach(readFile)
+}
+function dragOverHandler(ev) {
+    console.log('Content in drop zone')
+
+    // Prevent default behavior (Prevent file/content from being opened)
+    ev.preventDefault()
+
+    ev.dataTransfer.dropEffect = "copy"
+
+    let img = new Image()
+    img.src = location.host + '/media/images/favicon-32x32.png'
+    ev.dataTransfer.setDragImage(img, 16, 16)
+}
+
+document.addEventListener("drop", dropHandler)
+document.addEventListener("dragover", dragOverHandler)
+
+const TASK_REQ_NO_EXPORT = [
+    "use_cpu",
+    "turbo",
+    "use_full_precision",
+    "save_to_disk_path"
+]
+const resetSettings = document.getElementById('reset-image-settings')
+
+function checkReadTextClipboardPermission (result) {
+    if (result.state != "granted" && result.state != "prompt") {
+        return
+    }
+    // PASTE ICON
+    const pasteIcon = document.createElement('i')
+    pasteIcon.className = 'fa-solid fa-paste section-button'
+    pasteIcon.innerHTML = `<span class="simple-tooltip right">Paste Image Settings</span>`
+    pasteIcon.addEventListener('click', async (event) => {
+        event.stopPropagation()
+        // Add css class 'active'
+        pasteIcon.classList.add('active')
+        // In 350 ms remove the 'active' class
+        asyncDelay(350).then(() => pasteIcon.classList.remove('active'))
+
+        // Retrieve clipboard content and try to parse it
+        const text = await navigator.clipboard.readText();
+        await parseContent(text)
+    })
+    resetSettings.parentNode.insertBefore(pasteIcon, resetSettings)
+}
+navigator.permissions.query({ name: "clipboard-read" }).then(checkReadTextClipboardPermission, (reason) => console.log('clipboard-read is not available. %o', reason))
+
+document.addEventListener('paste', async (event) => {
+    if (event.target) {
+        const targetTag = event.target.tagName.toLowerCase()
+        // Disable when targeting input elements.
+        if (targetTag === 'input' || targetTag === 'textarea') {
+            return
+        }
+    }
+    const paste = (event.clipboardData || window.clipboardData).getData('text')
+    const selection = window.getSelection()
+    if (selection.toString().trim().length <= 0 && await parseContent(paste)) {
+        event.preventDefault()
+        return
+    }
+})
+
+// Adds a copy and a paste icon if the browser grants permission to write to clipboard.
+function checkWriteToClipboardPermission (result) {
+    if (result.state != "granted" && result.state != "prompt") {
+        return
+    }
+    // COPY ICON
+    const copyIcon = document.createElement('i')
+    copyIcon.className = 'fa-solid fa-clipboard section-button'
+    copyIcon.innerHTML = `<span class="simple-tooltip right">Copy Image Settings</span>`
+    copyIcon.addEventListener('click', (event) => {
+        event.stopPropagation()
+        // Add css class 'active'
+        copyIcon.classList.add('active')
+        // In 350 ms remove the 'active' class
+        asyncDelay(350).then(() => copyIcon.classList.remove('active'))
+        const uiState = readUI()
+        TASK_REQ_NO_EXPORT.forEach((key) => delete uiState.reqBody[key])
+        if (uiState.reqBody.init_image && !IMAGE_REGEX.test(uiState.reqBody.init_image)) {
+            delete uiState.reqBody.init_image
+            delete uiState.reqBody.prompt_strength
+        }
+        navigator.clipboard.writeText(JSON.stringify(uiState, undefined, 4))
+    })
+    resetSettings.parentNode.insertBefore(copyIcon, resetSettings)
+}
+// Determine which access we have to the clipboard. Clipboard access is only available on localhost or via TLS.
+navigator.permissions.query({ name: "clipboard-write" }).then(checkWriteToClipboardPermission, (e) => {
+    if (e instanceof TypeError && typeof navigator?.clipboard?.writeText === 'function') {
+        // Fix for firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1560373
+        checkWriteToClipboardPermission({state:"granted"})
+    }
+})

ui/media/js/image-editor.js

@@ -0,0 +1,680 @@
+var editorControlsLeft = document.getElementById("image-editor-controls-left")
+
+const IMAGE_EDITOR_MAX_SIZE = 800
+
+const IMAGE_EDITOR_BUTTONS = [
+	{
+		name: "Cancel",
+		icon: "fa-regular fa-circle-xmark",
+		handler: editor => {
+			editor.hide()
+		}
+	},
+	{
+		name: "Save",
+		icon: "fa-solid fa-floppy-disk",
+		handler: editor => {
+			editor.saveImage()
+		}
+	}
+]
+
+const defaultToolBegin = (editor, ctx, x, y, is_overlay = false) => {
+	ctx.beginPath()
+	ctx.moveTo(x, y)
+}
+const defaultToolMove = (editor, ctx, x, y, is_overlay = false) => {
+	ctx.lineTo(x, y)
+	if (is_overlay) {
+		ctx.clearRect(0, 0, editor.width, editor.height)
+		ctx.stroke()
+	}
+}
+const defaultToolEnd = (editor, ctx, x, y, is_overlay = false) => {
+	ctx.stroke()
+	if (is_overlay) {
+		ctx.clearRect(0, 0, editor.width, editor.height)
+	}
+}
+
+const IMAGE_EDITOR_TOOLS = [
+	{
+		id: "draw",
+		name: "Draw",
+		icon: "fa-solid fa-pencil",
+		cursor: "url(/media/images/fa-pencil.png) 0 24, pointer",
+		begin: defaultToolBegin,
+		move: defaultToolMove,
+		end: defaultToolEnd
+	},
+	{
+		id: "erase",
+		name: "Erase",
+		icon: "fa-solid fa-eraser",
+		cursor: "url(/media/images/fa-eraser.png) 0 18, pointer",
+		begin: defaultToolBegin,
+		move: (editor, ctx, x, y, is_overlay = false) => {
+			ctx.lineTo(x, y)
+			if (is_overlay) {
+				ctx.clearRect(0, 0, editor.width, editor.height)
+				ctx.globalCompositeOperation = "source-over"
+				ctx.globalAlpha = 1
+				ctx.filter = "none"
+				ctx.drawImage(editor.canvas_current, 0, 0)
+				editor.setBrush(editor.layers.overlay)
+				ctx.stroke()
+				editor.canvas_current.style.opacity = 0
+			}
+		},
+		end: (editor, ctx, x, y, is_overlay = false) => {
+			ctx.stroke()
+			if (is_overlay) {
+				ctx.clearRect(0, 0, editor.width, editor.height)
+				editor.canvas_current.style.opacity = ""
+			}
+		},
+		setBrush: (editor, layer) => {
+			layer.ctx.globalCompositeOperation = "destination-out"
+		}
+	},
+	{
+		id: "colorpicker",
+		name: "Color Picker",
+		icon: "fa-solid fa-eye-dropper",
+		cursor: "url(/media/images/fa-eye-dropper.png) 0 24, pointer",
+		begin: (editor, ctx, x, y, is_overlay = false) => {
+			var img_rgb = editor.layers.background.ctx.getImageData(x, y, 1, 1).data
+			var drawn_rgb = editor.ctx_current.getImageData(x, y, 1, 1).data
+			var drawn_opacity = drawn_rgb[3] / 255
+			editor.custom_color_input.value = rgbToHex({ 
+				r: (drawn_rgb[0] * drawn_opacity) + (img_rgb[0] * (1 - drawn_opacity)),
+				g: (drawn_rgb[1] * drawn_opacity) + (img_rgb[1] * (1 - drawn_opacity)),
+				b: (drawn_rgb[2] * drawn_opacity) + (img_rgb[2] * (1 - drawn_opacity)),
+			})
+			editor.custom_color_input.dispatchEvent(new Event("change"))
+		},
+		move: (editor, ctx, x, y, is_overlay = false) => {},
+		end: (editor, ctx, x, y, is_overlay = false) => {}
+	}
+]
+
+const IMAGE_EDITOR_ACTIONS = [
+	{
+		id: "clear",
+		name: "Clear",
+		icon: "fa-solid fa-xmark",
+		handler: (editor) => {
+			editor.ctx_current.clearRect(0, 0, editor.width, editor.height)
+		}
+	}
+]
+
+var IMAGE_EDITOR_SECTIONS = [
+	{
+		name: "tool",
+		title: "Tool",
+		default: "draw",
+		options: Array.from(IMAGE_EDITOR_TOOLS.map(t => t.id)),
+		initElement: (element, option) => {
+			var tool_info = IMAGE_EDITOR_TOOLS.find(t => t.id == option)
+			element.className = "image-editor-button button"
+			var sub_element = document.createElement("div")
+			var icon = document.createElement("i")
+			tool_info.icon.split(" ").forEach(c => icon.classList.add(c))
+			sub_element.appendChild(icon)
+			sub_element.append(tool_info.name)
+			element.appendChild(sub_element)
+		}
+	},
+	{
+		name: "color",
+		title: "Color",
+		default: "#f1c232",
+		options: [
+			"custom",
+			"#ea9999", "#e06666", "#cc0000", "#990000", "#660000",
+			"#f9cb9c", "#f6b26b", "#e69138", "#b45f06", "#783f04",
+			"#ffe599", "#ffd966", "#f1c232", "#bf9000", "#7f6000",
+			"#b6d7a8", "#93c47d", "#6aa84f", "#38761d", "#274e13",
+			"#a4c2f4", "#6d9eeb", "#3c78d8", "#1155cc", "#1c4587",
+			"#b4a7d6", "#8e7cc3", "#674ea7", "#351c75", "#20124d",
+			"#d5a6bd", "#c27ba0", "#a64d79", "#741b47", "#4c1130",
+			"#ffffff", "#c0c0c0", "#838383", "#525252", "#000000",
+		],
+		initElement: (element, option) => {
+			if (option == "custom") {
+				var input = document.createElement("input")
+				input.type = "color"
+				element.appendChild(input)
+				var span = document.createElement("span")
+				span.textContent = "Custom"
+				span.onclick = function(e) {
+					input.click()
+				}
+				element.appendChild(span)
+			}
+			else {
+				element.style.background = option
+			}
+		},
+		getCustom: editor => {
+			var input = editor.popup.querySelector(".image_editor_color input")
+			return input.value
+		}
+	},
+	{
+		name: "brush_size",
+		title: "Brush Size",
+		default: 48,
+		options: [ 16, 24, 32, 48, 64 ],
+		initElement: (element, option) => {
+			element.parentElement.style.flex = option
+			element.style.width = option + "px"
+			element.style.height = option + "px"
+			element.style["border-radius"] = (option / 2).toFixed() + "px"
+		}
+	},
+	{
+		name: "opacity",
+		title: "Opacity",
+		default: 0,
+		options: [ 0, 0.2, 0.4, 0.6, 0.8 ],
+		initElement: (element, option) => {
+			element.style.background = `repeating-conic-gradient(rgba(0, 0, 0, ${option}) 0% 25%, rgba(255, 255, 255, ${option}) 0% 50%) 50% / 10px 10px`
+		}
+	},
+	{
+		name: "sharpness",
+		title: "Sharpness",
+		default: 0,
+		options: [ 0, 0.05, 0.1, 0.2, 0.3 ],
+		initElement: (element, option) => {
+			var size = 32
+			var blur_amount = parseInt(option * size)
+			var sub_element = document.createElement("div")
+			sub_element.style.background = `var(--background-color3)`
+			sub_element.style.filter = `blur(${blur_amount}px)`
+			sub_element.style.width = `${size - 4}px`
+			sub_element.style.height = `${size - 4}px`
+			sub_element.style['border-radius'] = `${size}px`
+			element.style.background = "none"
+			element.appendChild(sub_element)
+		}
+	}
+]
+
+class EditorHistory {
+	constructor(editor) {
+		this.editor = editor
+		this.events = [] // stack of all events (actions/edits)
+		this.current_edit = null
+		this.rewind_index = 0 // how many events back into the history we've rewound to. (current state is just after event at index 'length - this.rewind_index - 1')
+	}
+	push(event) {
+		// probably add something here eventually to save state every x events
+		if (this.rewind_index != 0) {
+			this.events = this.events.slice(0, 0 - this.rewind_index)
+			this.rewind_index = 0
+		}
+		var snapshot_frequency = 20 // (every x edits, take a snapshot of the current drawing state, for faster rewinding)
+		if (this.events.length > 0 && this.events.length % snapshot_frequency == 0) {
+			event.snapshot = this.editor.layers.drawing.ctx.getImageData(0, 0, this.editor.width, this.editor.height)
+		}
+		this.events.push(event)
+	}
+	pushAction(action) {
+		this.push({
+			type: "action",
+			id: action
+		});
+	}
+	editBegin(x, y) {
+		this.current_edit = {
+			type: "edit",
+			id: this.editor.getOptionValue("tool"),
+			options: Object.assign({}, this.editor.options),
+			points: [ { x: x, y: y } ]
+		}
+	}
+	editMove(x, y) {
+		if (this.current_edit) {
+			this.current_edit.points.push({ x: x, y: y })
+		}
+	}
+	editEnd(x, y) {
+		if (this.current_edit) {
+			this.push(this.current_edit)
+			this.current_edit = null
+		}
+	}
+	clear() {
+		this.events = []
+	}
+	undo() {
+		this.rewindTo(this.rewind_index + 1)
+	}
+	redo() {
+		this.rewindTo(this.rewind_index - 1)
+	}
+	rewindTo(new_rewind_index) {
+		if (new_rewind_index < 0 || new_rewind_index > this.events.length) {
+			return; // do nothing if target index is out of bounds
+		}
+
+		var ctx = this.editor.layers.drawing.ctx
+		ctx.clearRect(0, 0, this.editor.width, this.editor.height)
+
+		var target_index = this.events.length - 1 - new_rewind_index
+		var snapshot_index = target_index
+		while (snapshot_index > -1) {
+			if (this.events[snapshot_index].snapshot) {
+				break
+			}
+			snapshot_index--
+		}
+
+		if (snapshot_index != -1) {
+			ctx.putImageData(this.events[snapshot_index].snapshot, 0, 0);
+		}
+
+		for (var i = (snapshot_index + 1); i <= target_index; i++) {
+			var event = this.events[i]
+			if (event.type == "action") {
+				var action = IMAGE_EDITOR_ACTIONS.find(a => a.id == event.id)
+				action.handler(this.editor)
+			}
+			else if (event.type == "edit") {
+				var tool = IMAGE_EDITOR_TOOLS.find(t => t.id == event.id)
+				this.editor.setBrush(this.editor.layers.drawing, event.options)
+
+				var first_point = event.points[0]
+				tool.begin(this.editor, ctx, first_point.x, first_point.y)
+				for (var point_i = 1; point_i < event.points.length; point_i++) {
+					tool.move(this.editor, ctx, event.points[point_i].x, event.points[point_i].y)
+				}
+				var last_point = event.points[event.points.length - 1]
+				tool.end(this.editor, ctx, last_point.x, last_point.y)
+			}
+		}
+
+		// re-set brush to current settings
+		this.editor.setBrush(this.editor.layers.drawing)
+
+		this.rewind_index = new_rewind_index
+	}
+}
+
+class ImageEditor {
+	constructor(popup, inpainter = false) {
+		this.inpainter = inpainter
+		this.popup = popup
+		this.history = new EditorHistory(this)
+		if (inpainter) {
+			this.popup.classList.add("inpainter")
+		}
+		this.drawing = false
+		this.temp_previous_tool = null // used for the ctrl-colorpicker functionality
+		this.container = popup.querySelector(".editor-controls-center > div")
+		this.layers = {}
+		var layer_names = [
+			"background",
+			"drawing",
+			"overlay"
+		]
+		layer_names.forEach(name => {
+			let canvas = document.createElement("canvas")
+			canvas.className = `editor-canvas-${name}`
+			this.container.appendChild(canvas)
+			this.layers[name] = {
+				name: name,
+				canvas: canvas,
+				ctx: canvas.getContext("2d")
+			}
+		})
+
+		// add mouse handlers
+		this.container.addEventListener("mousedown", this.mouseHandler.bind(this))
+		this.container.addEventListener("mouseup", this.mouseHandler.bind(this))
+		this.container.addEventListener("mousemove", this.mouseHandler.bind(this))
+		this.container.addEventListener("mouseout", this.mouseHandler.bind(this))
+		this.container.addEventListener("mouseenter", this.mouseHandler.bind(this))
+
+		this.container.addEventListener("touchstart", this.mouseHandler.bind(this))
+		this.container.addEventListener("touchmove", this.mouseHandler.bind(this))
+		this.container.addEventListener("touchcancel", this.mouseHandler.bind(this))
+		this.container.addEventListener("touchend", this.mouseHandler.bind(this))
+
+		// initialize editor controls
+		this.options = {}
+		this.optionElements = {}
+		IMAGE_EDITOR_SECTIONS.forEach(section => {
+			section.id = `image_editor_${section.name}`
+			var sectionElement = document.createElement("div")
+			sectionElement.className = section.id
+	
+			var title = document.createElement("h4")
+			title.innerText = section.title
+			sectionElement.appendChild(title)
+	
+			var optionsContainer = document.createElement("div")
+			optionsContainer.classList.add("editor-options-container")
+	
+			this.optionElements[section.name] = []
+			section.options.forEach((option, index) => {
+				var optionHolder = document.createElement("div")
+				var optionElement = document.createElement("div")
+				optionHolder.appendChild(optionElement)
+				section.initElement(optionElement, option)
+				optionElement.addEventListener("click", target => this.selectOption(section.name, index))
+				optionsContainer.appendChild(optionHolder)
+				this.optionElements[section.name].push(optionElement)
+			})
+			this.selectOption(section.name, section.options.indexOf(section.default))
+	
+			sectionElement.appendChild(optionsContainer)
+	
+			this.popup.querySelector(".editor-controls-left").appendChild(sectionElement)
+		})
+
+		this.custom_color_input = this.popup.querySelector(`input[type="color"]`)
+		this.custom_color_input.addEventListener("change", () => {
+			this.custom_color_input.parentElement.style.background = this.custom_color_input.value
+			this.selectOption("color", 0)
+		})
+
+		if (this.inpainter) {
+			this.selectOption("color", IMAGE_EDITOR_SECTIONS.find(s => s.name == "color").options.indexOf("#ffffff"))
+		}
+
+		// initialize the right-side controls
+		var buttonContainer = document.createElement("div")
+		IMAGE_EDITOR_BUTTONS.forEach(button => {
+			var element = document.createElement("div")
+			var icon = document.createElement("i")
+			element.className = "image-editor-button button"
+			icon.className = button.icon
+			element.appendChild(icon)
+			element.append(button.name)
+			buttonContainer.appendChild(element)
+			element.addEventListener("click", event => button.handler(this))
+		})
+		var actionsContainer = document.createElement("div")
+		var actionsTitle = document.createElement("h4")
+		actionsTitle.textContent = "Actions"
+		actionsContainer.appendChild(actionsTitle);
+		IMAGE_EDITOR_ACTIONS.forEach(action => {
+			var element = document.createElement("div")
+			var icon = document.createElement("i")
+			element.className = "image-editor-button button"
+			icon.className = action.icon
+			element.appendChild(icon)
+			element.append(action.name)
+			actionsContainer.appendChild(element)
+			element.addEventListener("click", event => this.runAction(action.id))
+		})
+		this.popup.querySelector(".editor-controls-right").appendChild(actionsContainer)
+		this.popup.querySelector(".editor-controls-right").appendChild(buttonContainer)
+
+		this.keyHandlerBound = this.keyHandler.bind(this)
+
+		this.setSize(512, 512)
+	}
+	show() {
+		this.popup.classList.add("active")
+		document.addEventListener("keydown", this.keyHandlerBound)
+		document.addEventListener("keyup", this.keyHandlerBound)
+	}
+	hide() {
+		this.popup.classList.remove("active")
+		document.removeEventListener("keydown", this.keyHandlerBound)
+		document.removeEventListener("keyup", this.keyHandlerBound)
+	}
+	setSize(width, height) {
+		if (width == this.width && height == this.height) {
+			return
+		}
+
+		var max_size = Math.min(parseInt(window.innerWidth * 0.9), width, 768)
+		if (width > height) {
+			var multiplier = max_size / width
+			width = (multiplier * width).toFixed()
+			height = (multiplier * height).toFixed()
+		}
+		else {
+			var multiplier = max_size / height
+			width = (multiplier * width).toFixed()
+			height = (multiplier * height).toFixed()
+		}
+		this.width = width
+		this.height = height
+	
+		this.container.style.width = width + "px"
+		this.container.style.height = height + "px"
+		
+		Object.values(this.layers).forEach(layer => {
+			layer.canvas.width = width
+			layer.canvas.height = height
+		})
+
+		if (this.inpainter) {
+			this.saveImage() // We've reset the size of the image so inpainting is different
+		}
+		this.setBrush()
+		this.history.clear()
+	}
+	get tool() {
+		var tool_id = this.getOptionValue("tool")
+		return IMAGE_EDITOR_TOOLS.find(t => t.id == tool_id);
+	}
+	loadTool() {
+		this.drawing = false
+		this.container.style.cursor = this.tool.cursor;
+	}
+	setImage(url, width, height) {
+		this.setSize(width, height)
+		this.layers.drawing.ctx.clearRect(0, 0, this.width, this.height)
+		this.layers.background.ctx.clearRect(0, 0, this.width, this.height)
+		if (url) {
+			var image = new Image()
+			image.onload = () => { 
+				this.layers.background.ctx.drawImage(image, 0, 0, this.width, this.height)
+			}
+			image.src = url
+		}
+		else {
+			this.layers.background.ctx.fillStyle = "#ffffff"
+			this.layers.background.ctx.beginPath()
+			this.layers.background.ctx.rect(0, 0, this.width, this.height)
+			this.layers.background.ctx.fill()
+		}
+		this.history.clear()
+	}
+	saveImage() {
+		if (!this.inpainter) {
+			// This is not an inpainter, so save the image as the new img2img input
+			this.layers.background.ctx.drawImage(this.layers.drawing.canvas, 0, 0, this.width, this.height)
+			var base64 = this.layers.background.canvas.toDataURL()
+			initImagePreview.src = base64 // this will trigger the rest of the app to use it
+		}
+		else {
+			// This is an inpainter, so make sure the toggle is set accordingly
+			var is_blank = !this.layers.drawing.ctx
+				.getImageData(0, 0, this.width, this.height).data
+				.some(channel => channel !== 0)
+			maskSetting.checked = !is_blank
+		}
+		this.hide()
+	}
+	getImg() { // a drop-in replacement of the drawingboard version
+		return this.layers.drawing.canvas.toDataURL()
+	}
+	setImg(dataUrl) { // a drop-in replacement of the drawingboard version
+		var image = new Image()
+		image.onload = () => {
+			var ctx = this.layers.drawing.ctx;
+			ctx.clearRect(0, 0, this.width, this.height)
+			ctx.globalCompositeOperation = "source-over"
+			ctx.globalAlpha = 1
+			ctx.filter = "none"
+			ctx.drawImage(image, 0, 0, this.width, this.height)
+			this.setBrush(this.layers.drawing)
+		}
+		image.src = dataUrl
+	}
+	runAction(action_id) {
+		var action = IMAGE_EDITOR_ACTIONS.find(a => a.id == action_id)
+		this.history.pushAction(action_id)
+		action.handler(this)
+	}
+	setBrush(layer = null, options = null) {
+		if (options == null) {
+			options = this.options
+		}
+		if (layer) {
+			layer.ctx.lineCap = "round"
+			layer.ctx.lineJoin = "round"
+			layer.ctx.lineWidth = options.brush_size
+			layer.ctx.fillStyle = options.color
+			layer.ctx.strokeStyle = options.color
+			var sharpness = parseInt(options.sharpness * options.brush_size)
+			layer.ctx.filter = sharpness == 0 ? `none` : `blur(${sharpness}px)`
+			layer.ctx.globalAlpha = (1 - options.opacity)
+			layer.ctx.globalCompositeOperation = "source-over"
+			var tool = IMAGE_EDITOR_TOOLS.find(t => t.id == options.tool)
+			if (tool && tool.setBrush) {
+				tool.setBrush(editor, layer)
+			}
+		}
+		else {
+			Object.values([ "drawing", "overlay" ]).map(name => this.layers[name]).forEach(l => {
+				this.setBrush(l)
+			})
+		}
+	}
+	get ctx_overlay() {
+		return this.layers.overlay.ctx
+	}
+	get ctx_current() { // the idea is this will help support having custom layers and editing each one
+		return this.layers.drawing.ctx
+	}
+	get canvas_current() {
+		return this.layers.drawing.canvas
+	}
+	keyHandler(event) { // handles keybinds like ctrl+z, ctrl+y
+		if (!this.popup.classList.contains("active")) {
+			document.removeEventListener("keydown", this.keyHandlerBound)
+			document.removeEventListener("keyup", this.keyHandlerBound)
+			return // this catches if something else closes the window but doesnt properly unbind the key handler
+		}
+
+		// keybindings
+		if (event.type == "keydown") {
+			if ((event.key == "z" || event.key == "Z") && event.ctrlKey) {
+				if (!event.shiftKey) {
+					this.history.undo()
+				}
+				else {
+					this.history.redo()
+				}
+			}
+			if (event.key == "y" && event.ctrlKey) {
+				this.history.redo()
+			}
+		}
+		
+		// dropper ctrl holding handler stuff
+		var dropper_active = this.temp_previous_tool != null;
+		if (dropper_active && !event.ctrlKey) {
+			this.selectOption("tool", IMAGE_EDITOR_TOOLS.findIndex(t => t.id == this.temp_previous_tool))
+			this.temp_previous_tool = null
+		}
+		else if (!dropper_active && event.ctrlKey) {
+			this.temp_previous_tool = this.getOptionValue("tool")
+			this.selectOption("tool", IMAGE_EDITOR_TOOLS.findIndex(t => t.id == "colorpicker"))
+		}
+	}
+	mouseHandler(event) {
+		var bbox = this.layers.overlay.canvas.getBoundingClientRect()
+		var x = (event.clientX || 0) - bbox.left
+		var y = (event.clientY || 0) - bbox.top
+		var type = event.type;
+		var touchmap = {
+			touchstart: "mousedown",
+			touchmove: "mousemove",
+			touchend: "mouseup",
+			touchcancel: "mouseup"
+		}
+		if (type in touchmap) {
+			type = touchmap[type]
+			if (event.touches && event.touches[0]) {
+				var touch = event.touches[0]				
+				var x = (touch.clientX || 0) - bbox.left
+				var y = (touch.clientY || 0) - bbox.top
+			}
+		}
+		event.preventDefault()	
+		// do drawing-related stuff
+		if (type == "mousedown" || (type == "mouseenter" && event.buttons == 1)) {
+			this.drawing = true
+			this.tool.begin(this, this.ctx_current, x, y)
+			this.tool.begin(this, this.ctx_overlay, x, y, true)
+			this.history.editBegin(x, y)
+		}
+		if (type == "mouseup" || type == "mousemove") {
+			if (this.drawing) {
+				if (x > 0 && y > 0) {
+					this.tool.move(this, this.ctx_current, x, y)
+					this.tool.move(this, this.ctx_overlay, x, y, true)
+					this.history.editMove(x, y)
+				}
+			}
+		}
+		if (type == "mouseup" || type == "mouseout") {
+			if (this.drawing) {
+				this.drawing = false
+				this.tool.end(this, this.ctx_current, x, y)
+				this.tool.end(this, this.ctx_overlay, x, y, true)
+				this.history.editEnd(x, y)
+			}
+		}
+	}
+	getOptionValue(section_name) {
+		var section = IMAGE_EDITOR_SECTIONS.find(s => s.name == section_name)
+		return this.options && section_name in this.options ? this.options[section_name] : section.default
+	}
+	selectOption(section_name, option_index) {
+		var section = IMAGE_EDITOR_SECTIONS.find(s => s.name == section_name)
+		var value = section.options[option_index]
+		this.options[section_name] = value == "custom" ? section.getCustom(this) : value
+		
+		this.optionElements[section_name].forEach(element => element.classList.remove("active"))
+		this.optionElements[section_name][option_index].classList.add("active")
+	
+		// change the editor
+		this.setBrush()
+		if (section.name == "tool") {
+			this.loadTool()
+		}
+	}
+}
+
+function rgbToHex(rgb) {
+	function componentToHex(c) {
+		var hex = parseInt(c).toString(16)
+		return hex.length == 1 ? "0" + hex : hex
+	}
+	return "#" + componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b)
+}
+
+const imageEditor = new ImageEditor(document.getElementById("image-editor"))
+const imageInpainter = new ImageEditor(document.getElementById("image-inpainter"), true)
+
+imageEditor.setImage(null, 512, 512)
+imageInpainter.setImage(null, 512, 512)
+
+document.getElementById("init_image_button_draw").addEventListener("click", () => {
+	imageEditor.show()
+})
+document.getElementById("init_image_button_inpaint").addEventListener("click", () => {
+	imageInpainter.show()
+})

ui/media/js/image-modifiers.js

@@ -75,7 +75,6 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
 
     if (initiallyExpanded === true) {
         titleEl.className += ' active'
-        modifiersEl.style.display = 'block'
     }
 
     modifiers.forEach(modObj => {
@@ -86,14 +85,13 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
 
         if(typeof modifierCard == 'object') {
             modifiersEl.appendChild(modifierCard)
+            const trimmedName = trimModifiers(modifierName)
 
             modifierCard.addEventListener('click', () => {
-                if (activeTags.map(x => x.name).includes(modifierName)) {
+                if (activeTags.map(x => trimModifiers(x.name)).includes(trimmedName)) {
                     // remove modifier from active array
-                    activeTags = activeTags.filter(x => x.name != modifierName)
-                    modifierCard.classList.remove(activeCardClass)
-
-                    modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+'
+                    activeTags = activeTags.filter(x => trimModifiers(x.name) != trimmedName)
+                    toggleCardState(trimmedName, false)
                 } else {
                     // add modifier to active array
                     activeTags.push({
@@ -102,10 +100,7 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
                         'originElement': modifierCard,
                         'previews': modifierPreviews
                     })
-
-                    modifierCard.classList.add(activeCardClass)
-
-                    modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-'
+                    toggleCardState(trimmedName, true)
                 }
 
                 refreshTagsList()
@@ -126,6 +121,10 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
     return e
 }
 
+function trimModifiers(tag) {
+    return tag.replace(/^\(+|\)+$/g, '').replace(/^\[+|\]+$/g, '')
+}
+
 async function loadModifiers() {
     try {
         let res = await fetch('/get/modifiers')
@@ -149,6 +148,60 @@ async function loadModifiers() {
     loadCustomModifiers()
 }
 
+function refreshModifiersState(newTags) {
+    // clear existing modifiers
+    document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(modifierCard => {
+        const modifierName = modifierCard.querySelector('.modifier-card-label').innerText
+        if (activeTags.map(x => x.name).includes(modifierName)) {
+            modifierCard.classList.remove(activeCardClass)
+            modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+'
+        }
+    })
+    activeTags = []
+
+    // set new modifiers
+    newTags.forEach(tag => {
+        let found = false
+        document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(modifierCard => {
+            const modifierName = modifierCard.querySelector('.modifier-card-label').innerText
+            if (tag == modifierName) {
+                // add modifier to active array
+                if (!activeTags.map(x => x.name).includes(tag)) { // only add each tag once even if several custom modifier cards share the same tag
+                    activeTags.push({
+                        'name': modifierName,
+                        'element': modifierCard.cloneNode(true),
+                        'originElement': modifierCard
+                    })
+                }
+                modifierCard.classList.add(activeCardClass)
+                modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-'
+                found = true
+            }
+        })
+        if (found == false) { // custom tag went missing, create one here
+            let modifierCard = createModifierCard(tag, undefined) // create a modifier card for the missing tag, no image
+            
+            modifierCard.addEventListener('click', () => {
+                if (activeTags.map(x => x.name).includes(tag)) {
+                    // remove modifier from active array
+                    activeTags = activeTags.filter(x => x.name != tag)
+                    modifierCard.classList.remove(activeCardClass)
+
+                    modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+'
+                }
+                refreshTagsList()
+            })
+
+            activeTags.push({
+                'name': tag,
+                'element': modifierCard,
+                'originElement': undefined  // no origin element for missing tags
+            })
+        }
+    })
+    refreshTagsList()
+}
+
 function refreshTagsList() {
     editorModifierTagsList.innerHTML = ''
 
@@ -166,11 +219,10 @@ function refreshTagsList() {
         editorModifierTagsList.appendChild(tag.element)
 
         tag.element.addEventListener('click', () => {
-            let idx = activeTags.indexOf(tag)
+            let idx = activeTags.findIndex(o => { return o.name === tag.name })            
 
             if (idx !== -1) {
-                activeTags[idx].originElement.classList.remove(activeCardClass)
-                activeTags[idx].originElement.querySelector('.modifier-card-image-overlay').innerText = '+'
+                toggleCardState(activeTags[idx].name, false)
 
                 activeTags.splice(idx, 1)
                 refreshTagsList()
@@ -183,6 +235,23 @@ function refreshTagsList() {
     editorModifierTagsList.appendChild(brk)
 }
 
+function toggleCardState(modifierName, makeActive) {
+    document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(card => {
+        const name = card.querySelector('.modifier-card-label').innerText
+        if (   trimModifiers(modifierName) == trimModifiers(name)
+            || trimModifiers(modifierName) == 'by ' + trimModifiers(name)) {
+            if(makeActive) {
+                card.classList.add(activeCardClass)
+                card.querySelector('.modifier-card-image-overlay').innerText = '-'
+            }
+            else{
+                card.classList.remove(activeCardClass)
+                card.querySelector('.modifier-card-image-overlay').innerText = '+'
+            }
+        }
+    })
+}
+
 function changePreviewImages(val) {
     const previewImages = document.querySelectorAll('.modifier-card-image-container img')
 
@@ -245,16 +314,9 @@ function resizeModifierCards(val) {
 modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value)
 previewImageField.onchange = () => changePreviewImages(previewImageField.value)
 
-modifierSettingsBtn.addEventListener('click', function() {
-    modifierSettingsOverlay.style.display = 'block'
-})
-document.getElementById("modifier-settings-config-close-btn").addEventListener('click', () => {
-    modifierSettingsOverlay.style.display = 'none'
-})
-modifierSettingsOverlay.addEventListener('click', (event) => {
-    if (event.target.id == modifierSettingsOverlay.id) {
-        modifierSettingsOverlay.style.display = 'none'
-    }
+modifierSettingsBtn.addEventListener('click', function(e) {
+    modifierSettingsOverlay.classList.add("active")
+    e.stopPropagation()
 })
 
 function saveCustomModifiers() {
@@ -264,31 +326,7 @@ function saveCustomModifiers() {
 }
 
 function loadCustomModifiers() {
-    let customModifiers = localStorage.getItem(CUSTOM_MODIFIERS_KEY, '')
-    customModifiersTextBox.value = customModifiers
-
-    if (customModifiersGroupElement !== undefined) {
-        customModifiersGroupElement.remove()
-    }
-
-    if (customModifiers && customModifiers.trim() !== '') {
-        customModifiers = customModifiers.split('\n')
-        customModifiers = customModifiers.filter(m => m.trim() !== '')
-        customModifiers = customModifiers.map(function(m) {
-            return {
-                "modifier": m
-            }
-        })
-
-        let customGroup = {
-            'category': 'Custom Modifiers',
-            'modifiers': customModifiers
-        }
-
-        customModifiersGroupElement = createModifierGroup(customGroup, true)
-
-        createCollapsibles(customModifiersGroupElement)
-    }
+    PLUGINS['MODIFIERS_LOAD'].forEach(fn=>fn.loader.call())
 }
 
 customModifiersTextBox.addEventListener('change', saveCustomModifiers)

ui/media/js/inpainting-editor.js

@@ -1,41 +0,0 @@
-const INPAINTING_EDITOR_SIZE = 450
-
-let inpaintingEditorContainer = document.querySelector('#inpaintingEditor')
-let inpaintingEditor = new DrawingBoard.Board('inpaintingEditor', {
-    color: "#ffffff",
-    background: false,
-    size: 30,
-    webStorage: false,
-    controls: [{'DrawingMode': {'filler': false}}, 'Size', 'Navigation']
-})
-let inpaintingEditorCanvasBackground = document.querySelector('.drawing-board-canvas-wrapper')
-
-function resizeInpaintingEditor(widthValue, heightValue) {
-    if (widthValue === heightValue) {
-        widthValue = INPAINTING_EDITOR_SIZE
-        heightValue = INPAINTING_EDITOR_SIZE
-    } else if (widthValue > heightValue) {
-        heightValue = (heightValue / widthValue) * INPAINTING_EDITOR_SIZE
-        widthValue = INPAINTING_EDITOR_SIZE
-    } else {
-        widthValue = (widthValue / heightValue) * INPAINTING_EDITOR_SIZE
-        heightValue = INPAINTING_EDITOR_SIZE
-    }
-    if (inpaintingEditor.opts.aspectRatio === (widthValue / heightValue).toFixed(3)) {
-        // Same ratio, don't reset the canvas.
-        return
-    }
-    inpaintingEditor.opts.aspectRatio = (widthValue / heightValue).toFixed(3)
-
-    inpaintingEditorContainer.style.width = widthValue + 'px'
-    inpaintingEditorContainer.style.height = heightValue + 'px'
-    inpaintingEditor.opts.enlargeYourContainer = true
-
-    inpaintingEditor.opts.size = inpaintingEditor.ctx.lineWidth
-    inpaintingEditor.resize()
-
-    inpaintingEditor.ctx.lineCap = "round"
-    inpaintingEditor.ctx.lineJoin = "round"
-    inpaintingEditor.ctx.lineWidth = inpaintingEditor.opts.size
-    inpaintingEditor.setColor(inpaintingEditor.opts.color)
-}

ui/media/js/main.js

@@ -1,6 +1,7 @@
 "use strict" // Opt in to a restricted variant of JavaScript
 const HEALTH_PING_INTERVAL = 5 // seconds
 const MAX_INIT_IMAGE_DIMENSION = 768
+const MIN_GPUS_TO_SHOW_SELECTION = 2
 
 const IMAGE_REGEX = new RegExp('data:image/[A-Za-z]+;base64')
 
@@ -15,6 +16,9 @@ let numOutputsParallelField = document.querySelector('#num_outputs_parallel')
 let numInferenceStepsField = document.querySelector('#num_inference_steps')
 let guidanceScaleSlider = document.querySelector('#guidance_scale_slider')
 let guidanceScaleField = document.querySelector('#guidance_scale')
+let outputQualitySlider = document.querySelector('#output_quality_slider')
+let outputQualityField = document.querySelector('#output_quality')
+let outputQualityRow = document.querySelector('#output_quality_row')
 let randomSeedField = document.querySelector("#random_seed")
 let seedField = document.querySelector('#seed')
 let widthField = document.querySelector('#width')
@@ -24,13 +28,6 @@ let initImagePreview = document.querySelector("#init_image_preview")
 let initImageSizeBox = document.querySelector("#init_image_size_box")
 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 promptStrengthSlider = document.querySelector('#prompt_strength_slider')
 let promptStrengthField = document.querySelector('#prompt_strength')
 let samplerField = document.querySelector('#sampler')
@@ -39,6 +36,7 @@ let useFaceCorrectionField = document.querySelector("#use_face_correction")
 let useUpscalingField = document.querySelector("#use_upscale")
 let upscaleModelField = document.querySelector("#upscale_model")
 let stableDiffusionModelField = document.querySelector('#stable_diffusion_model')
+let vaeModelField = document.querySelector('#vae_model')
 let outputFormatField = document.querySelector('#output_format')
 let showOnlyFilteredImageField = document.querySelector("#show_only_filtered_image")
 let updateBranchLabel = document.querySelector("#updateBranchLabel")
@@ -56,36 +54,15 @@ let initialText = document.querySelector("#initial-text")
 let previewTools = document.querySelector("#preview-tools")
 let clearAllPreviewsBtn = document.querySelector("#clear-all-previews")
 
-// let maskSetting = document.querySelector('#editor-inputs-mask_setting')
-// let maskImagePreviewContainer = document.querySelector('#mask_preview_container')
-// let maskImageClearBtn = document.querySelector('#mask_clear')
 let maskSetting = document.querySelector('#enable_mask')
 
 let imagePreview = document.querySelector("#preview")
 
-// let previewPrompt = document.querySelector('#preview-prompt')
-
-let showConfigToggle = document.querySelector('#configToggleBtn')
-// let configBox = document.querySelector('#config')
-// let outputMsg = document.querySelector('#outputMsg')
-// let progressBar = document.querySelector("#progressBar")
-
-let soundToggle = document.querySelector('#sound_toggle')
-
 let serverStatusColor = document.querySelector('#server-status-color')
 let serverStatusMsg = document.querySelector('#server-status-msg')
 
 
-document.querySelector('.drawing-board-control-navigation-back').innerHTML = '<i class="fa-solid fa-rotate-left"></i>'
-document.querySelector('.drawing-board-control-navigation-forward').innerHTML = '<i class="fa-solid fa-rotate-right"></i>'
-
-let maskResetButton = document.querySelector('.drawing-board-control-navigation-reset')
-maskResetButton.innerHTML = 'Clear'
-maskResetButton.style.fontWeight = 'normal'
-maskResetButton.style.fontSize = '10pt'
-
 let serverState = {'status': 'Offline', 'time': Date.now()}
-let lastPromptUsed = ''
 let bellPending = false
 
 let taskQueue = []
@@ -156,6 +133,35 @@ function isServerAvailable() {
     }
 }
 
+// shiftOrConfirm(e, prompt, fn)
+//   e      : MouseEvent
+//   prompt : Text to be shown as prompt. Should be a question to which "yes" is a good answer.
+//   fn     : function to be called if the user confirms the dialog or has the shift key pressed
+//
+// If the user had the shift key pressed while clicking, the function fn will be executed.
+// If the setting "confirm_dangerous_actions" in the system settings is disabled, the function 
+// fn will be executed.
+// Otherwise, a confirmation dialog is shown. If the user confirms, the function fn will also
+// be executed.
+function shiftOrConfirm(e, prompt, fn) {
+    e.stopPropagation()
+    if (e.shiftKey || !confirmDangerousActionsField.checked) {
+         fn(e)
+    } else {
+        $.confirm({
+            theme: 'modern',
+            title: prompt,
+            useBootstrap: false,
+            animateFromElement: false,
+            content: '<small>Tip: To skip this dialog, use shift-click or disable the "Confirm dangerous actions" setting in the Settings tab.</small>',
+            buttons: {
+                yes: () => { fn(e) },
+                cancel: () => {}
+            }
+        }); 
+    }
+}
+
 function logMsg(msg, level, outputMsg) {
     if (outputMsg.hasChildNodes()) {
         outputMsg.appendChild(document.createElement('br'))
@@ -220,8 +226,12 @@ async function healthCheck() {
                 setServerStatus('error', serverState.status.toLowerCase())
                 break
         }
+        if (serverState.devices) {
+            setDeviceInfo(serverState.devices)
+        }
         serverState.time = Date.now()
     } catch (e) {
+        console.log(e)
         serverState = {'status': 'Offline', 'time': Date.now()}
         setServerStatus('error', 'offline')
     }
@@ -320,11 +330,7 @@ function onUseAsInputClick(req, img) {
     initImageSelector.value = null
     initImagePreview.src = imgData
 
-    initImagePreviewContainer.style.display = 'block'
-    inpaintingEditorContainer.style.display = 'none'
-    promptStrengthContainer.style.display = 'table-row'
     maskSetting.checked = false
-    samplerSelectionContainer.style.display = 'none'
 }
 
 function onDownloadImageClick(req, img) {
@@ -340,10 +346,10 @@ function onDownloadImageClick(req, img) {
     imgDownload.click()
 }
 
-function modifyCurrentRequest(req, ...reqDiff) {
+function modifyCurrentRequest(...reqDiff) {
     const newTaskRequest = getCurrentUserRequest()
 
-    newTaskRequest.reqBody = Object.assign({}, req, ...reqDiff, {
+    newTaskRequest.reqBody = Object.assign(newTaskRequest.reqBody, ...reqDiff, {
         use_cpu: useCPUField.checked
     })
     newTaskRequest.seed = newTaskRequest.reqBody.seed
@@ -372,11 +378,21 @@ function onMakeSimilarClick(req, img) {
 function enqueueImageVariationTask(req, img, reqDiff) {
     const imageSeed = img.getAttribute('data-seed')
 
-    const newTaskRequest = modifyCurrentRequest(req, reqDiff, {
+    const newRequestBody = {
         num_outputs: 1, // this can be user-configurable in the future
         seed: imageSeed
-    })
+    }
 
+    // If the user is editing pictures, stop modifyCurrentRequest from importing
+    // new values by setting the missing properties to undefined
+    if (!('init_image' in req) && !('init_image' in reqDiff)) {
+        newRequestBody.init_image = undefined
+        newRequestBody.mask = undefined
+    } else if (!('mask' in req) && !('mask' in reqDiff)) {
+        newRequestBody.mask = undefined
+    }
+
+    const newTaskRequest = modifyCurrentRequest(req, reqDiff, newRequestBody)
     newTaskRequest.numOutputsTotal = 1 // this can be user-configurable in the future
     newTaskRequest.batchCount = 1
 
@@ -410,7 +426,7 @@ async function doMakeImage(task) {
     const RETRY_DELAY_IF_BUFFER_IS_EMPTY = 1000 // ms
     const RETRY_DELAY_IF_SERVER_IS_BUSY = 30 * 1000 // ms, status_code 503, already a task running
     const TASK_START_DELAY_ON_SERVER = 1500 // ms
-    const SERVER_STATE_VALIDITY_DURATION = 10 * 1000 // ms
+    const SERVER_STATE_VALIDITY_DURATION = 90 * 1000 // ms
 
     const reqBody = task.reqBody
     const batchCount = task.batchCount
@@ -422,10 +438,10 @@ async function doMakeImage(task) {
     const outputMsg = task['outputMsg']
     const previewPrompt = task['previewPrompt']
     const progressBar = task['progressBar']
+    const progressBarInner = progressBar.querySelector("div")
 
     let res = undefined
     try {
-        const lastTask = serverState.task
         let renderRequest = undefined
         do {
             res = await fetch('/render', {
@@ -561,6 +577,13 @@ async function doMakeImage(task) {
                 outputMsg.innerHTML += `. Time remaining (approx): ${timeRemaining}`
                 outputMsg.style.display = 'block'
 
+                progressBarInner.style.width = `${percent}%`
+                if (percent == 100) {
+                    task.progressBar.style.height = "0px"
+                    task.progressBar.style.border = "0px solid var(--background-color3)"
+                    task.progressBar.classList.remove("active")
+                }
+
                 if (stepUpdate.output !== undefined) {
                     showImages(reqBody, stepUpdate, outputContainer, true)
                 }
@@ -620,17 +643,14 @@ async function doMakeImage(task) {
                 let msg = `Unexpected Read Error:<br/><pre>Response: ${res}<br/>StepUpdate: ${typeof stepUpdate === 'object' ? JSON.stringify(stepUpdate, undefined, 4) : stepUpdate}</pre>`
                 logError(msg, res, outputMsg)
             }
-            progressBar.style.display = 'none'
             return false
         }
 
-        lastPromptUsed = reqBody['prompt']
         showImages(reqBody, stepUpdate, outputContainer, false)
     } catch (e) {
         console.log('request error', e)
         logError('Stable Diffusion had an error. Please check the logs in the command-line window. <br/><br/>' + e + '<br/><pre>' + e.stack + '</pre>', res, outputMsg)
         setStatus('request', 'error', 'error')
-        progressBar.style.display = 'none'
         return false
     }
     return true
@@ -677,6 +697,12 @@ async function checkTasks() {
 
     const genSeeds = Boolean(typeof task.reqBody.seed !== 'number' || (task.reqBody.seed === task.seed && task.numOutputsTotal > 1))
     const startSeed = task.reqBody.seed || task.seed
+    
+    // Update the seed *before* starting the processing so it's retained if user stops the task
+    if (randomSeedField.checked) {
+        seedField.value = task.seed
+    }
+    
     for (let i = 0; i < task.batchCount; i++) {
         let newTask = task
         if (task.batchCount > 1) {
@@ -713,6 +739,9 @@ async function checkTasks() {
 
     if (successCount === task.batchCount) {
         task.outputMsg.innerText = 'Processed ' + task.numOutputsTotal + ' images in ' + time + ' seconds'
+        task.progressBar.style.height = "0px"
+        task.progressBar.style.border = "0px solid var(--background-color3)"
+        task.progressBar.classList.remove("active")
         // setStatus('request', 'done', 'success')
     } else {
         if (task.outputMsg.innerText.toLowerCase().indexOf('error') === -1) {
@@ -720,10 +749,6 @@ async function checkTasks() {
         }
     }
 
-    if (randomSeedField.checked) {
-        seedField.value = task.seed
-    }
-
     currentTask = null
 
     if (typeof requestIdleCallback === 'function') {
@@ -762,13 +787,16 @@ function getCurrentUserRequest() {
             height: heightField.value,
             // allow_nsfw: allowNSFWField.checked,
             turbo: turboField.checked,
-            use_cpu: useCPUField.checked,
             use_full_precision: useFullPrecisionField.checked,
             use_stable_diffusion_model: stableDiffusionModelField.value,
+            use_vae_model: vaeModelField.value,
             stream_progress_updates: true,
             stream_image_progress: (numOutputsTotal > 50 ? false : streamImageProgressField.checked),
             show_only_filtered_image: showOnlyFilteredImageField.checked,
-            output_format: outputFormatField.value
+            output_format: outputFormatField.value,
+            output_quality: outputQualityField.value,
+            original_prompt: promptField.value,
+            active_tags: (activeTags.map(x => x.name))
         }
     }
     if (IMAGE_REGEX.test(initImagePreview.src)) {
@@ -779,7 +807,7 @@ function getCurrentUserRequest() {
         //     newTask.reqBody.mask = maskImagePreview.src
         // }
         if (maskSetting.checked) {
-            newTask.reqBody.mask = inpaintingEditor.getImg()
+            newTask.reqBody.mask = imageInpainter.getImg()
         }
         newTask.reqBody.sampler = 'ddim'
     } else {
@@ -800,42 +828,58 @@ function getCurrentUserRequest() {
 function makeImage() {
     if (!isServerAvailable()) {
         alert('The server is not available.')
-        return
-    }
-    const taskTemplate = getCurrentUserRequest()
-    const newTaskRequests = []
-    getPrompts().forEach((prompt) => newTaskRequests.push(Object.assign({}, taskTemplate, {
-        reqBody: Object.assign({ prompt: prompt }, taskTemplate.reqBody)
-    })))
-    newTaskRequests.forEach(createTask)
+    } else if (!randomSeedField.checked && seedField.value == '') {
+        alert('The "Seed" field must not be empty.')
+    } else if (numOutputsTotalField.value == '') {
+        alert('The "Number of Images" field must not be empty.')
+    } else if (numOutputsParallelField.value == '') {
+        alert('The "Number of parallel Images" field must not be empty.')
+    } else if (numInferenceStepsField.value == '') {
+        alert('The "Inference Steps" field must not be empty.')
+    } else if (guidanceScaleField.value == '') {
+        alert('The Guidance Scale field must not be empty.')
+    } else {
+        const taskTemplate = getCurrentUserRequest()
+        const newTaskRequests = []
+        getPrompts().forEach((prompt) => newTaskRequests.push(Object.assign({}, taskTemplate, {
+            reqBody: Object.assign({ prompt: prompt }, taskTemplate.reqBody)
+        })))
+        newTaskRequests.forEach(createTask)
 
-    initialText.style.display = 'none'
+        initialText.style.display = 'none'
+    }
 }
 
 function createTask(task) {
-    let taskConfig = `Seed: ${task.seed}, Sampler: ${task.reqBody.sampler}, Inference Steps: ${task.reqBody.num_inference_steps}, Guidance Scale: ${task.reqBody.guidance_scale}, Model: ${task.reqBody.use_stable_diffusion_model}`
-    if (negativePromptField.value.trim() !== '') {
-        taskConfig += `, Negative Prompt: ${task.reqBody.negative_prompt}`
+    let taskConfig = `<b>Seed:</b> ${task.seed}, <b>Sampler:</b> ${task.reqBody.sampler}, <b>Inference Steps:</b> ${task.reqBody.num_inference_steps}, <b>Guidance Scale:</b> ${task.reqBody.guidance_scale}, <b>Model:</b> ${task.reqBody.use_stable_diffusion_model}`
+    if (task.reqBody.use_vae_model.trim() !== '') {
+        taskConfig += `, <b>VAE:</b> ${task.reqBody.use_vae_model}`
+    }
+    if (task.reqBody.negative_prompt.trim() !== '') {
+        taskConfig += `, <b>Negative Prompt:</b> ${task.reqBody.negative_prompt}`
     }
     if (task.reqBody.init_image !== undefined) {
-        taskConfig += `, Prompt Strength: ${task.reqBody.prompt_strength}`
+        taskConfig += `, <b>Prompt Strength:</b> ${task.reqBody.prompt_strength}`
     }
     if (task.reqBody.use_face_correction) {
-        taskConfig += `, Fix Faces: ${task.reqBody.use_face_correction}`
+        taskConfig += `, <b>Fix Faces:</b> ${task.reqBody.use_face_correction}`
     }
     if (task.reqBody.use_upscale) {
-        taskConfig += `, Upscale: ${task.reqBody.use_upscale}`
+        taskConfig += `, <b>Upscale:</b> ${task.reqBody.use_upscale}`
     }
 
     let taskEntry = document.createElement('div')
     taskEntry.className = 'imageTaskContainer'
-    taskEntry.innerHTML = ` <div class="taskStatusLabel">Enqueued</div>
-                            <button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
-                            <div class="preview-prompt collapsible active"></div>
-                            <div class="taskConfig">${taskConfig}</div>
-                            <div class="collapsible-content" style="display: block">
+    taskEntry.innerHTML = ` <div class="header-content panel collapsible active">
+                                <div class="taskStatusLabel">Enqueued</div>
+                                <button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
+                                <button class="secondaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button>
+                                <div class="preview-prompt collapsible active"></div>
+                                <div class="taskConfig">${taskConfig}</div>
                                 <div class="outputMsg"></div>
-                                <div class="progressBar"></div>
+                                <div class="progress-bar active"><div></div></div>
+                            </div>
+                            <div class="collapsible-content">
                                 <div class="img-preview">
                             </div>`
 
@@ -845,25 +889,35 @@ function createTask(task) {
     task['outputContainer'] = taskEntry.querySelector('.img-preview')
     task['outputMsg'] = taskEntry.querySelector('.outputMsg')
     task['previewPrompt'] = taskEntry.querySelector('.preview-prompt')
-    task['progressBar'] = taskEntry.querySelector('.progressBar')
+    task['progressBar'] = taskEntry.querySelector('.progress-bar')
     task['stopTask'] = taskEntry.querySelector('.stopTask')
 
-    task['stopTask'].addEventListener('click', async function() {
-        if (task['isProcessing']) {
-            task.isProcessing = false
-            try {
-                let res = await fetch('/image/stop?session_id=' + sessionId)
-            } catch (e) {
-                console.log(e)
-            }
-        } else {
-            let idx = taskQueue.indexOf(task)
-            if (idx >= 0) {
-                taskQueue.splice(idx, 1)
-            }
+    task['stopTask'].addEventListener('click', (e) => {
+        let question = (task['isProcessing'] ? "Stop this task?" : "Remove this task?")
+        shiftOrConfirm(e, question, async function(e) {
+            if (task['isProcessing']) {
+                task.isProcessing = false
+                task.progressBar.classList.remove("active")
+                try {
+                    let res = await fetch('/image/stop?session_id=' + sessionId)
+                } catch (e) {
+                    console.log(e)
+                }
+            } else {
+                let idx = taskQueue.indexOf(task)
+                if (idx >= 0) {
+                    taskQueue.splice(idx, 1)
+                }
 
-            taskEntry.remove()
-        }
+                removeTask(taskEntry)
+            }
+        })
+    })
+
+    task['useSettings'] = taskEntry.querySelector('.useSettings')
+    task['useSettings'].addEventListener('click', function(e) {
+        e.stopPropagation()
+        restoreTaskToUI(task, TASK_REQ_NO_EXPORT)
     })
 
     imagePreview.insertBefore(taskEntry, previewTools.nextSibling)
@@ -886,15 +940,16 @@ function getPrompts() {
     prompts = prompts.map(prompt => prompt.trim())
     prompts = prompts.filter(prompt => prompt !== '')
 
+    const newTags = activeTags.filter(tag => tag.inactive === undefined || tag.inactive === false)
+    if (newTags.length > 0) {
+        const promptTags = newTags.map(x => x.name).join(", ")
+        prompts = prompts.map((prompt) => `${prompt}, ${promptTags}`)
+    }
+
     let promptsToMake = applySetOperator(prompts)
     promptsToMake = applyPermuteOperator(promptsToMake)
 
-    if (activeTags.length <= 0) {
-        return promptsToMake
-    }
-
-    const promptTags = activeTags.map(x => x.name).join(", ")
-    return promptsToMake.map((prompt) => `${prompt}, ${promptTags}`)
+    return promptsToMake
 }
 
 function applySetOperator(prompts) {
@@ -1000,21 +1055,25 @@ async function stopAllTasks() {
     }
 }
 
-clearAllPreviewsBtn.addEventListener('click', async function() {
+function removeTask(taskToRemove) {
+    taskToRemove.remove()
+
+    if (document.querySelector('.imageTaskContainer') === null) {
+        previewTools.style.display = 'none'
+        initialText.style.display = 'block'
+    }
+}
+
+clearAllPreviewsBtn.addEventListener('click', (e) => { shiftOrConfirm(e, "Clear all the results and tasks in this window?", async function() {
     await stopAllTasks()
 
     let taskEntries = document.querySelectorAll('.imageTaskContainer')
-    taskEntries.forEach(task => {
-        task.remove()
-    })
+    taskEntries.forEach(removeTask)
+})})
 
-    previewTools.style.display = 'none'
-    initialText.style.display = 'block'
-})
-
-stopImageBtn.addEventListener('click', async function() {
+stopImageBtn.addEventListener('click', (e) => { shiftOrConfirm(e, "Stop all the tasks?", async function(e) {
     await stopAllTasks()
-})
+})})
 
 widthField.addEventListener('change', onDimensionChange)
 heightField.addEventListener('change', onDimensionChange)
@@ -1035,26 +1094,33 @@ numOutputsTotalField.addEventListener('change', renameMakeImageButton)
 numOutputsParallelField.addEventListener('change', renameMakeImageButton)
 
 function onDimensionChange() {
-    if (!maskSetting.checked) {
-        return
-    }
     let widthValue = parseInt(widthField.value)
     let heightValue = parseInt(heightField.value)
-
-    resizeInpaintingEditor(widthValue, heightValue)
+    if (!initImagePreviewContainer.classList.contains("has-image")) {
+        imageEditor.setImage(null, widthValue, heightValue)
+    }
+    else {
+        imageInpainter.setImage(initImagePreview.src, widthValue, heightValue)
+    }
 }
 
-saveToDiskField.addEventListener('click', function(e) {
-    diskPathField.disabled = !this.checked
-})
+diskPathField.disabled = !saveToDiskField.checked
 
-useUpscalingField.addEventListener('click', function(e) {
+upscaleModelField.disabled = !useUpscalingField.checked
+useUpscalingField.addEventListener('change', function(e) {
     upscaleModelField.disabled = !this.checked
 })
 
 makeImageBtn.addEventListener('click', makeImage)
 
+document.onkeydown = function(e) {
+    if (e.ctrlKey && e.code === 'Enter') {
+        makeImage()
+        e.preventDefault()
+    }
+}
 
+/********************* Guidance **************************/
 function updateGuidanceScale() {
     guidanceScaleField.value = guidanceScaleSlider.value / 10
     guidanceScaleField.dispatchEvent(new Event("change"))
@@ -1075,6 +1141,7 @@ guidanceScaleSlider.addEventListener('input', updateGuidanceScale)
 guidanceScaleField.addEventListener('input', updateGuidanceScaleSlider)
 updateGuidanceScale()
 
+/********************* Prompt Strength *******************/
 function updatePromptStrength() {
     promptStrengthField.value = promptStrengthSlider.value / 100
     promptStrengthField.dispatchEvent(new Event("change"))
@@ -1095,80 +1162,82 @@ promptStrengthSlider.addEventListener('input', updatePromptStrength)
 promptStrengthField.addEventListener('input', updatePromptStrengthSlider)
 updatePromptStrength()
 
-useBetaChannelField.addEventListener('click', async function(e) {
-    if (!isServerAvailable()) {
-        // logError('The server is still starting up..')
-        alert('The server is still starting up..')
-        e.preventDefault()
-        return false
+/********************* JPEG Quality **********************/
+function updateOutputQuality() {
+    outputQualityField.value =  0 | outputQualitySlider.value
+    outputQualityField.dispatchEvent(new Event("change"))
+}
+
+function updateOutputQualitySlider() {
+    if (outputQualityField.value < 10) {
+        outputQualityField.value = 10
+    } else if (outputQualityField.value > 95) {
+        outputQualityField.value = 95
     }
 
-    let updateBranch = (this.checked ? 'beta' : 'main')
+    outputQualitySlider.value =  0 | outputQualityField.value
+    outputQualitySlider.dispatchEvent(new Event("change"))
+}
 
-    try {
-        let res = await fetch('/app_config', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                'update_branch': updateBranch
-            })
-        })
-        res = await res.json()
+outputQualitySlider.addEventListener('input', updateOutputQuality)
+outputQualityField.addEventListener('input', debounce(updateOutputQualitySlider))
+updateOutputQuality()
 
-        console.log('set config status response', res)
-    } catch (e) {
-        console.log('set config status error', e)
+outputFormatField.addEventListener('change', e => {
+    if (outputFormatField.value == 'jpeg') {
+        outputQualityRow.style.display='table-row'
+    } else {
+        outputQualityRow.style.display='none'
     }
 })
 
-async function getAppConfig() {
-    try {
-        let res = await fetch('/get/app_config')
-        const config = await res.json()
-
-        if (config.update_branch === 'beta') {
-            useBetaChannelField.checked = true
-            updateBranchLabel.innerText = "(beta)"
-        }
-
-        console.log('get config status response', config)
-    } catch (e) {
-        console.log('get config status error', e)
-    }
-}
 
 async function getModels() {
     try {
-        var model_setting_key = "stable_diffusion_model"
-        var selectedModel = SETTINGS[model_setting_key].value
+        var sd_model_setting_key = "stable_diffusion_model"
+        var vae_model_setting_key = "vae_model"
+        var selectedSDModel = SETTINGS[sd_model_setting_key].value
+        var selectedVaeModel = SETTINGS[vae_model_setting_key].value
         let res = await fetch('/get/models')
         const models = await res.json()
 
-        // let activeModel = models['active']
+        console.log('got models response', models)
+
+        if ( "scan-error" in models ) {
+            // let previewPane = document.getElementById('tab-content-wrapper')
+            let previewPane = document.getElementById('preview')
+            previewPane.style.background="red"
+            previewPane.style.textAlign="center"
+            previewPane.innerHTML = '<H1>🔥Malware alert!🔥</H1><h2>The file <i>' + models['scan-error'] + '</i> in your <tt>models/stable-diffusion</tt> folder is probably malware infected.</h2><h2>Please delete this file from the folder before proceeding!</h2>After deleting the file, reload this page.<br><br><button onClick="window.location.reload();">Reload Page</button>'
+            makeImageBtn.disabled = true
+        }
         let modelOptions = models['options']
         let stableDiffusionOptions = modelOptions['stable-diffusion']
+        let vaeOptions = modelOptions['vae']
+        vaeOptions.unshift('') // add a None option
 
-        stableDiffusionOptions.forEach(modelName => {
-            let modelOption = document.createElement('option')
-            modelOption.value = modelName
-            modelOption.innerText = modelName
+        function createModelOptions(modelField, selectedModel) {
+            return function(modelName) {
+                let modelOption = document.createElement('option')
+                modelOption.value = modelName
+                modelOption.innerText = modelName !== '' ? modelName : 'None'
 
-            if (modelName === selectedModel) {
-                modelOption.selected = true
+                if (modelName === selectedModel) {
+                    modelOption.selected = true
+                }
+
+                modelField.appendChild(modelOption)
             }
-
-            stableDiffusionModelField.appendChild(modelOption)
-        })
-
-        // TODO: set default for model here too
-        SETTINGS[model_setting_key].default = stableDiffusionOptions[0]
-        if (getSetting(model_setting_key) == '' || SETTINGS[model_setting_key].value == '') {
-            setSetting(model_setting_key, stableDiffusionOptions[0])
         }
 
-        console.log('get models response', models)
+        stableDiffusionOptions.forEach(createModelOptions(stableDiffusionModelField, selectedSDModel))
+        vaeOptions.forEach(createModelOptions(vaeModelField, selectedVaeModel))
+
+        // TODO: set default for model here too
+        SETTINGS[sd_model_setting_key].default = stableDiffusionOptions[0]
+        if (getSetting(sd_model_setting_key) == '' || SETTINGS[sd_model_setting_key].value == '') {
+            setSetting(sd_model_setting_key, stableDiffusionOptions[0])
+        }
     } catch (e) {
         console.log('get models error', e)
     }
@@ -1177,7 +1246,7 @@ async function getModels() {
 function checkRandomSeed() {
     if (randomSeedField.checked) {
         seedField.disabled = true
-        seedField.value = "0"
+        //seedField.value = "0" // This causes the seed to be lost if the user changes their mind after toggling the checkbox
     } else {
         seedField.disabled = false
     }
@@ -1185,12 +1254,8 @@ function checkRandomSeed() {
 randomSeedField.addEventListener('input', checkRandomSeed)
 checkRandomSeed()
 
-function showInitImagePreview() {
+function loadImg2ImgFromFile() {
     if (initImageSelector.files.length === 0) {
-        initImagePreviewContainer.style.display = 'none'
-        // inpaintingEditorContainer.style.display = 'none'
-        promptStrengthContainer.style.display = 'none'
-        // maskSetting.style.display = 'none'
         return
     }
 
@@ -1198,51 +1263,41 @@ function showInitImagePreview() {
     let file = initImageSelector.files[0]
 
     reader.addEventListener('load', function(event) {
-        // console.log(file.name, reader.result)
         initImagePreview.src = reader.result
-        initImagePreviewContainer.style.display = 'block'
-        inpaintingEditorContainer.style.display = 'none'
-        promptStrengthContainer.style.display = 'table-row'
-        samplerSelectionContainer.style.display = 'none'
-        // maskSetting.checked = false
     })
 
     if (file) {
         reader.readAsDataURL(file)
     }
 }
-initImageSelector.addEventListener('change', showInitImagePreview)
-showInitImagePreview()
+initImageSelector.addEventListener('change', loadImg2ImgFromFile)
+loadImg2ImgFromFile()
+
+function img2imgLoad() {
+    promptStrengthContainer.style.display = 'table-row'
+    samplerSelectionContainer.style.display = "none"
+    initImagePreviewContainer.classList.add("has-image")
 
-initImagePreview.addEventListener('load', function() {
-    inpaintingEditorCanvasBackground.style.backgroundImage = "url('" + this.src + "')"
-    // maskSetting.style.display = 'block'
-    // inpaintingEditorContainer.style.display = 'block'
     initImageSizeBox.textContent = initImagePreview.naturalWidth + " x " + initImagePreview.naturalHeight
-    initImageSizeBox.style.display = 'block'
-})
+    imageEditor.setImage(this.src, initImagePreview.naturalWidth, initImagePreview.naturalHeight)
+    imageInpainter.setImage(this.src, parseInt(widthField.value), parseInt(heightField.value))
+}
 
-initImageClearBtn.addEventListener('click', function() {
+function img2imgUnload() {
     initImageSelector.value = null
-    // maskImageSelector.value = null
-
     initImagePreview.src = ''
-    // maskImagePreview.src = ''
     maskSetting.checked = false
 
-    initImagePreviewContainer.style.display = 'none'
-    // inpaintingEditorContainer.style.display = 'none'
-    // maskImagePreviewContainer.style.display = 'none'
+    promptStrengthContainer.style.display = "none"
+    samplerSelectionContainer.style.display = ""
+    initImagePreviewContainer.classList.remove("has-image")
+    imageEditor.setImage(null, parseInt(widthField.value), parseInt(heightField.value))
 
-    // maskSetting.style.display = 'none'
-
-    promptStrengthContainer.style.display = 'none'
-    samplerSelectionContainer.style.display = 'table-row'
-    initImageSizeBox.style.display = 'none'
-})
+}
+initImagePreview.addEventListener('load', img2imgLoad)
+initImageClearBtn.addEventListener('click', img2imgUnload)
 
 maskSetting.addEventListener('click', function() {
-    inpaintingEditorContainer.style.display = (this.checked ? 'block' : 'none')
     onDimensionChange()
 })
 
@@ -1267,21 +1322,61 @@ promptsFromFileSelector.addEventListener('change', function() {
     }
 })
 
-async function getDiskPath() {
-    try {
-        var diskPath = getSetting("diskPath")
-        if (diskPath == '' || diskPath == undefined || diskPath == "undefined") {
-            let res = await fetch('/get/output_dir')
-            if (res.status === 200) {
-                res = await res.json()
-                res = res.output_dir
-
-                setSetting("diskPath", res)
-            }
+/* setup popup handlers */
+document.querySelectorAll('.popup').forEach(popup => {
+    popup.addEventListener('click', event => {
+        if (event.target == popup) {
+            popup.classList.remove("active")
         }
-    } catch (e) {
-        console.log('error fetching output dir path', e)
+    })
+    var closeButton = popup.querySelector(".close-button")
+    if (closeButton) {
+        closeButton.addEventListener('click', () => {
+            popup.classList.remove("active")
+        })
+    }
+})
+
+var tabElements = []
+function selectTab(tab_id) {
+    let tabInfo = tabElements.find(t => t.tab.id == tab_id)
+    if (!tabInfo.tab.classList.contains("active")) {
+        tabElements.forEach(info => {
+            if (info.tab.classList.contains("active")) {
+                info.tab.classList.toggle("active")
+                info.content.classList.toggle("active")
+            }
+        })
+        tabInfo.tab.classList.toggle("active")
+        tabInfo.content.classList.toggle("active")
     }
 }
+function linkTabContents(tab) {
+    var name = tab.id.replace("tab-", "")
+    var content = document.getElementById(`tab-content-${name}`)
+    tabElements.push({
+        name: name,
+        tab: tab,
+        content: content
+    })
+
+    tab.addEventListener("click", event => selectTab(tab.id))
+}
+
+document.querySelectorAll(".tab").forEach(linkTabContents)
+
+window.addEventListener("beforeunload", function(e) {
+    const msg = "Unsaved pictures will be lost!";
+
+    let elementList = document.getElementsByClassName("imageTaskContainer");
+    if (elementList.length != 0) {
+        e.preventDefault();
+        (e || window.event).returnValue = msg;
+        return msg;
+    } else {
+        return true;
+    }
+});
 
 createCollapsibles()
+prettifyInputs(document);

ui/media/js/parameters.js

@@ -0,0 +1,440 @@
+/**
+ * Enum of parameter types
+ * @readonly
+ * @enum {string}
+ */
+ var ParameterType = {
+    checkbox: "checkbox",
+    select: "select",
+    select_multiple: "select_multiple",
+    custom: "custom",
+};
+
+/**
+ * JSDoc style
+ * @typedef {object} Parameter
+ * @property {string} id
+ * @property {ParameterType} type
+ * @property {string} label
+ * @property {?string} note
+ * @property {number|boolean|string} default
+ */
+
+
+/** @type {Array.<Parameter>} */
+var PARAMETERS = [
+    {
+        id: "theme",
+        type: ParameterType.select,
+        label: "Theme",
+        default: "theme-default",
+        note: "customize the look and feel of the ui",
+        options: [ // Note: options expanded dynamically
+            {
+                value: "theme-default",
+                label: "Default"
+            }
+        ],
+        icon: "fa-palette"
+    },
+    {
+        id: "save_to_disk",
+        type: ParameterType.checkbox,
+        label: "Auto-Save Images",
+        note: "automatically saves images to the specified location",
+        icon: "fa-download",
+        default: false,
+    },
+    {
+        id: "diskPath",
+        type: ParameterType.custom,
+        label: "Save Location",
+        render: (parameter) => {
+            return `<input id="${parameter.id}" name="${parameter.id}" size="30" disabled>`
+        }
+    },
+    {
+        id: "sound_toggle",
+        type: ParameterType.checkbox,
+        label: "Enable Sound",
+        note: "plays a sound on task completion",
+        icon: "fa-volume-low",
+        default: true,
+    },
+    {
+        id: "ui_open_browser_on_start",
+        type: ParameterType.checkbox,
+        label: "Open browser on startup",
+        note: "starts the default browser on startup",
+        icon: "fa-window-restore",
+        default: true,
+    },
+    {
+        id: "turbo",
+        type: ParameterType.checkbox,
+        label: "Turbo Mode",
+        note: "generates images faster, but uses an additional 1 GB of GPU memory",
+        icon: "fa-forward",
+        default: true,
+    },
+    {
+        id: "use_cpu",
+        type: ParameterType.checkbox,
+        label: "Use CPU (not GPU)",
+        note: "warning: this will be *very* slow",
+        icon: "fa-microchip",
+        default: false,
+    },
+    {
+        id: "auto_pick_gpus",
+        type: ParameterType.checkbox,
+        label: "Automatically pick the GPUs (experimental)",
+        default: false,
+    },
+    {
+        id: "use_gpus",
+        type: ParameterType.select_multiple,
+        label: "GPUs to use (experimental)",
+        note: "to process in parallel",
+        default: false,
+    },
+    {
+        id: "use_full_precision",
+        type: ParameterType.checkbox,
+        label: "Use Full Precision",
+        note: "for GPU-only. warning: this will consume more VRAM",
+        icon: "fa-crosshairs",
+        default: false,
+    },
+    {
+        id: "auto_save_settings",
+        type: ParameterType.checkbox,
+        label: "Auto-Save Settings",
+        note: "restores settings on browser load",
+        icon: "fa-gear",
+        default: true,
+    },
+    {
+        id: "confirm_dangerous_actions",
+        type: ParameterType.checkbox,
+        label: "Confirm dangerous actions",
+        note: "Actions that might lead to data loss must either be clicked with the shift key pressed, or confirmed in an 'Are you sure?' dialog",
+        icon: "fa-check-double",
+        default: true,
+    },
+    {
+        id: "listen_to_network",
+        type: ParameterType.checkbox,
+        label: "Make Stable Diffusion available on your network",
+        note: "Other devices on your network can access this web page",
+        icon: "fa-network-wired",
+        default: true,
+    },
+    {
+        id: "listen_port",
+        type: ParameterType.custom,
+        label: "Network port",
+        note: "Port that this server listens to. The '9000' part in 'http://localhost:9000'",
+        icon: "fa-anchor",
+        render: (parameter) => {
+            return `<input id="${parameter.id}" name="${parameter.id}" size="6" value="9000" onkeypress="preventNonNumericalInput(event)">`
+        }
+    },
+    {
+        id: "test_sd2",
+        type: ParameterType.checkbox,
+        label: "Test SD 2.0",
+        note: "Experimental! High memory usage! GPU-only! Not the final version! Please restart the program after changing this.",
+        icon: "fa-fire",
+        default: false,
+    },
+    {
+        id: "use_beta_channel",
+        type: ParameterType.checkbox,
+        label: "Beta channel",
+        note: "Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
+        icon: "fa-fire",
+        default: false,
+    },
+];
+
+function getParameterSettingsEntry(id) {
+    let parameter = PARAMETERS.filter(p => p.id === id)
+    if (parameter.length === 0) {
+        return
+    }
+    return parameter[0].settingsEntry
+}
+
+function getParameterElement(parameter) {
+    switch (parameter.type) {
+        case ParameterType.checkbox:
+            var is_checked = parameter.default ? " checked" : "";
+            return `<input id="${parameter.id}" name="${parameter.id}"${is_checked} type="checkbox">`
+        case ParameterType.select:
+        case ParameterType.select_multiple:
+            var options = (parameter.options || []).map(option => `<option value="${option.value}">${option.label}</option>`).join("")
+            var multiple = (parameter.type == ParameterType.select_multiple ? 'multiple' : '')
+            return `<select id="${parameter.id}" name="${parameter.id}" ${multiple}>${options}</select>`
+        case ParameterType.custom:
+            return parameter.render(parameter)
+        default:
+            console.error(`Invalid type for parameter ${parameter.id}`);
+            return "ERROR: Invalid Type"
+    }
+}
+
+let parametersTable = document.querySelector("#system-settings .parameters-table")
+/* fill in the system settings popup table */
+function initParameters() {
+    PARAMETERS.forEach(parameter => {
+        var element = getParameterElement(parameter)
+        var note = parameter.note ? `<small>${parameter.note}</small>` : "";
+        var icon = parameter.icon ? `<i class="fa ${parameter.icon}"></i>` : "";
+        var newrow = document.createElement('div')
+        newrow.innerHTML = `
+            <div>${icon}</div>
+            <div><label for="${parameter.id}">${parameter.label}</label>${note}</div>
+            <div>${element}</div>`
+        parametersTable.appendChild(newrow)
+        parameter.settingsEntry = newrow
+    })
+}
+
+initParameters()
+
+let turboField = document.querySelector('#turbo')
+let useCPUField = document.querySelector('#use_cpu')
+let autoPickGPUsField = document.querySelector('#auto_pick_gpus')
+let useGPUsField = document.querySelector('#use_gpus')
+let useFullPrecisionField = document.querySelector('#use_full_precision')
+let saveToDiskField = document.querySelector('#save_to_disk')
+let diskPathField = document.querySelector('#diskPath')
+let listenToNetworkField = document.querySelector("#listen_to_network")
+let listenPortField = document.querySelector("#listen_port")
+let testSD2Field = document.querySelector("#test_sd2")
+let useBetaChannelField = document.querySelector("#use_beta_channel")
+let uiOpenBrowserOnStartField = document.querySelector("#ui_open_browser_on_start")
+let confirmDangerousActionsField = document.querySelector("#confirm_dangerous_actions")
+
+let saveSettingsBtn = document.querySelector('#save-system-settings-btn')
+
+
+async function changeAppConfig(configDelta) {
+    try {
+        let res = await fetch('/app_config', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(configDelta)
+        })
+        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('/get/app_config')
+        const config = await res.json()
+
+        if (config.update_branch === 'beta') {
+            useBetaChannelField.checked = true
+            document.querySelector("#updateBranchLabel").innerText = "(beta)"
+        }
+        if (config.ui && config.ui.open_browser_on_start === false) {
+            uiOpenBrowserOnStartField.checked = false
+        }
+        if ('test_sd2' in config) {
+            testSD2Field.checked = config['test_sd2']
+        }
+
+        let testSD2SettingEntry = getParameterSettingsEntry('test_sd2')
+        testSD2SettingEntry.style.display = (config.update_branch === 'beta' ? '' : 'none')
+        if (config.net && config.net.listen_to_network === false) {
+            listenToNetworkField.checked = false
+        }
+        if (config.net && config.net.listen_port !== undefined) {
+            listenPortField.value = config.net.listen_port
+        }
+
+        console.log('get config status response', config)
+    } catch (e) {
+        console.log('get config status error', e)
+    }
+}
+
+saveToDiskField.addEventListener('change', function(e) {
+    diskPathField.disabled = !this.checked
+})
+
+function getCurrentRenderDeviceSelection() {
+    let selectedGPUs = $('#use_gpus').val()
+
+    if (useCPUField.checked && !autoPickGPUsField.checked) {
+        return 'cpu'
+    }
+    if (autoPickGPUsField.checked || selectedGPUs.length == 0) {
+        return 'auto'
+    }
+
+    return selectedGPUs.join(',')
+}
+
+useCPUField.addEventListener('click', function() {
+    let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
+    let autoPickGPUSettingEntry = getParameterSettingsEntry('auto_pick_gpus')
+    if (this.checked) {
+        gpuSettingEntry.style.display = 'none'
+        autoPickGPUSettingEntry.style.display = 'none'
+        autoPickGPUsField.setAttribute('data-old-value', autoPickGPUsField.checked)
+        autoPickGPUsField.checked = false
+    } else if (useGPUsField.options.length >= MIN_GPUS_TO_SHOW_SELECTION) {
+        gpuSettingEntry.style.display = ''
+        autoPickGPUSettingEntry.style.display = ''
+        let oldVal = autoPickGPUsField.getAttribute('data-old-value')
+        if (oldVal === null || oldVal === undefined) { // the UI started with CPU selected by default
+            autoPickGPUsField.checked = true
+        } else {
+            autoPickGPUsField.checked = (oldVal === 'true')
+        }
+        gpuSettingEntry.style.display = (autoPickGPUsField.checked ? 'none' : '')
+    }
+})
+
+useGPUsField.addEventListener('click', function() {
+    let selectedGPUs = $('#use_gpus').val()
+    autoPickGPUsField.checked = (selectedGPUs.length === 0)
+})
+
+autoPickGPUsField.addEventListener('click', function() {
+    if (this.checked) {
+        $('#use_gpus').val([])
+    }
+
+    let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
+    gpuSettingEntry.style.display = (this.checked ? 'none' : '')
+})
+
+async function getDiskPath() {
+    try {
+        var diskPath = getSetting("diskPath")
+        if (diskPath == '' || diskPath == undefined || diskPath == "undefined") {
+            let res = await fetch('/get/output_dir')
+            if (res.status === 200) {
+                res = await res.json()
+                res = res.output_dir
+
+                setSetting("diskPath", res)
+            }
+        }
+    } catch (e) {
+        console.log('error fetching output dir path', e)
+    }
+}
+
+function setDeviceInfo(devices) {
+    let cpu = devices.all.cpu.name
+    let allGPUs = Object.keys(devices.all).filter(d => d != 'cpu')
+    let activeGPUs = Object.keys(devices.active)
+
+    function ID_TO_TEXT(d) {
+        let info = devices.all[d]
+        if ("mem_free" in info && "mem_total" in info) {
+            return `${info.name} <small>(${d}) (${info.mem_free.toFixed(1)}Gb free / ${info.mem_total.toFixed(1)} Gb total)</small>`
+        } else {
+            return `${info.name} <small>(${d}) (no memory info)</small>`
+        }
+    }
+
+    allGPUs = allGPUs.map(ID_TO_TEXT)
+    activeGPUs = activeGPUs.map(ID_TO_TEXT)
+
+    let systemInfoEl = document.querySelector('#system-info')
+    systemInfoEl.querySelector('#system-info-cpu').innerText = cpu
+    systemInfoEl.querySelector('#system-info-gpus-all').innerHTML = allGPUs.join('</br>')
+    systemInfoEl.querySelector('#system-info-rendering-devices').innerHTML = activeGPUs.join('</br>')
+}
+
+function setHostInfo(hosts) {
+    let port = listenPortField.value
+    hosts = hosts.map(addr => `http://${addr}:${port}/`).map(url => `<div><a href="${url}">${url}</a></div>`)
+    document.querySelector('#system-info-server-hosts').innerHTML = hosts.join('')
+}
+
+async function getSystemInfo() {
+    try {
+        let res = await fetch('/get/system_info')
+        if (res.status === 200) {
+            res = await res.json()
+            let devices = res['devices']
+            let hosts = res['hosts']
+
+            let allDeviceIds = Object.keys(devices['all']).filter(d => d !== 'cpu')
+            let activeDeviceIds = Object.keys(devices['active']).filter(d => d !== 'cpu')
+
+            if (activeDeviceIds.length === 0) {
+                useCPUField.checked = true
+            }
+
+            if (allDeviceIds.length < MIN_GPUS_TO_SHOW_SELECTION || useCPUField.checked) {
+                let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
+                gpuSettingEntry.style.display = 'none'
+                let autoPickGPUSettingEntry = getParameterSettingsEntry('auto_pick_gpus')
+                autoPickGPUSettingEntry.style.display = 'none'
+            }
+
+            if (allDeviceIds.length === 0) {
+                useCPUField.checked = true
+                useCPUField.disabled = true // no compatible GPUs, so make the CPU mandatory
+            }
+
+            autoPickGPUsField.checked = (devices['config'] === 'auto')
+
+            useGPUsField.innerHTML = ''
+            allDeviceIds.forEach(device => {
+                let deviceName = devices['all'][device]['name']
+                let deviceOption = `<option value="${device}">${deviceName} (${device})</option>`
+                useGPUsField.insertAdjacentHTML('beforeend', deviceOption)
+            })
+
+            if (autoPickGPUsField.checked) {
+                let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
+                gpuSettingEntry.style.display = 'none'
+            } else {
+                $('#use_gpus').val(activeDeviceIds)
+            }
+
+            setDeviceInfo(devices)
+            setHostInfo(hosts)
+        }
+    } catch (e) {
+        console.log('error fetching devices', e)
+    }
+}
+
+saveSettingsBtn.addEventListener('click', function() {
+    let updateBranch = (useBetaChannelField.checked ? 'beta' : 'main')
+
+    if (listenPortField.value == '') {
+        alert('The network port field must not be empty.')
+    } else if (listenPortField.value<1 || listenPortField.value>65535) {
+        alert('The network port must be a number from 1 to 65535')
+    } else {
+        changeAppConfig({
+            'render_devices': getCurrentRenderDeviceSelection(),
+            'update_branch': updateBranch,
+            'ui_open_browser_on_start': uiOpenBrowserOnStartField.checked,
+            'listen_to_network': listenToNetworkField.checked,
+            'listen_port': listenPortField.value,
+            'test_sd2': testSD2Field.checked
+        })
+    }
+
+    saveSettingsBtn.classList.add('active')
+    asyncDelay(300).then(() => saveSettingsBtn.classList.remove('active'))
+})

ui/media/js/plugins.js

@@ -24,7 +24,8 @@ const PLUGINS = {
      *   }
      * })
      */
-    IMAGE_INFO_BUTTONS: []
+    IMAGE_INFO_BUTTONS: [],
+    MODIFIERS_LOAD: []
 }
 
 async function loadUIPlugins() {

ui/media/js/themes.js

@@ -14,7 +14,7 @@ function initTheme() {
         .flatMap(sheet => Array.from(sheet.cssRules))
         .forEach(rule => {
             var selector = rule.selectorText; // TODO: also do selector == ":root", re-run un-set props
-            if (selector && selector.startsWith(".theme-")) {
+            if (selector && selector.startsWith(".theme-") && !selector.includes(" ")) {
                 var theme_key = selector.substring(1);
                 THEMES.push({
                     key: theme_key,
@@ -60,6 +60,7 @@ function themeFieldChanged() {
 
     body.style = "";
     var theme = THEMES.find(t => t.key == theme_key);
+    let borderColor = undefined
     if (theme) {
         // refresh variables incase they are back referencing
         Array.from(DEFAULT_THEME.rule.style)
@@ -67,7 +68,14 @@ function themeFieldChanged() {
             .forEach(cssVariable => {
             body.style.setProperty(cssVariable, DEFAULT_THEME.rule.style.getPropertyValue(cssVariable));
         });
+        borderColor = theme.rule.style.getPropertyValue('--input-border-color').trim()
+        if (!borderColor.startsWith('#')) {
+            borderColor = theme.rule.style.getPropertyValue('--theme-color-fallback')
+        }
+    } else {
+        borderColor = DEFAULT_THEME.rule.style.getPropertyValue('--theme-color-fallback')
     }
+    document.querySelector('meta[name="theme-color"]').setAttribute("content", borderColor)
 }
 
 themeField.addEventListener('change', themeFieldChanged);

ui/media/js/utils.js

@@ -1,17 +1,17 @@
 // https://gomakethings.com/finding-the-next-and-previous-sibling-elements-that-match-a-selector-with-vanilla-js/
 function getNextSibling(elem, selector) {
-	// Get the next sibling element
-	var sibling = elem.nextElementSibling
+    // Get the next sibling element
+    var sibling = elem.nextElementSibling
 
-	// If there's no selector, return the first sibling
-	if (!selector) return sibling
+    // If there's no selector, return the first sibling
+    if (!selector) return sibling
 
-	// If the sibling matches our selector, use it
-	// If not, jump to the next sibling and continue the loop
-	while (sibling) {
-		if (sibling.matches(selector)) return sibling
-		sibling = sibling.nextElementSibling
-	}
+    // If the sibling matches our selector, use it
+    // If not, jump to the next sibling and continue the loop
+    while (sibling) {
+        if (sibling.matches(selector)) return sibling
+        sibling = sibling.nextElementSibling
+    }
 }
 
 
@@ -29,12 +29,16 @@ function toggleCollapsible(element) {
     var handle = element.querySelector(".collapsible-handle");
     collapsibleHeader.classList.toggle("active")
     let content = getNextSibling(collapsibleHeader, '.collapsible-content')
-    if (content.style.display === "block") {
+    if (!collapsibleHeader.classList.contains("active")) {
         content.style.display = "none"
-        handle.innerHTML = '➕' // plus
+        if (handle != null) {  // render results don't have a handle
+            handle.innerHTML = '➕' // plus
+        }
     } else {
         content.style.display = "block"
-        handle.innerHTML = '➖' // minus
+        if (handle != null) {  // render results don't have a handle
+            handle.innerHTML = '➖' // minus
+        }
     }
     
     if (COLLAPSIBLES_INITIALIZED && COLLAPSIBLE_PANELS.includes(element)) {
@@ -65,7 +69,7 @@ function createCollapsibles(node) {
         let handle = document.createElement('span')
         handle.className = 'collapsible-handle'
 
-        if (c.className.indexOf('active') !== -1) {
+        if (c.classList.contains("active")) {
             handle.innerHTML = '➖' // minus
         } else {
             handle.innerHTML = '➕' // plus
@@ -342,3 +346,41 @@ function asyncDelay(timeout) {
         setTimeout(resolve, timeout, true)
     })
 }
+
+/* Simple debounce function, placeholder for the one in engine.js for simple use cases */
+function debounce(func, timeout = 300){
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => { func.apply(this, args); }, timeout);
+  };
+}
+
+
+function preventNonNumericalInput(e) {
+    e = e || window.event;
+    let charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
+    let charStr = String.fromCharCode(charCode);
+    let re = e.target.getAttribute('pattern') || '^[0-9]+$'
+    re = new RegExp(re)
+
+    if (!charStr.match(re)) {
+        e.preventDefault();
+    }
+}
+
+/* inserts custom html to allow prettifying of inputs */
+function prettifyInputs(root_element) {
+    root_element.querySelectorAll(`input[type="checkbox"]`).forEach(element => {
+        var parent = element.parentNode;
+        if (!parent.classList.contains("input-toggle")) {
+            var wrapper = document.createElement("div");
+            wrapper.classList.add("input-toggle");
+            parent.replaceChild(wrapper, element);
+            wrapper.appendChild(element);
+            var label = document.createElement("label");
+            label.htmlFor = element.id;
+            wrapper.appendChild(label);
+        }
+    })
+}

ui/media/manifest.webmanifest

@@ -0,0 +1,8 @@
+{
+  "name": "Stable Diffusion UI",
+  "display": "standalone",
+  "display_override": [
+    "window-controls-overlay"
+  ],
+  "theme_color": "#000000"
+}

ui/plugins/ui/Autoscroll.plugin.js

@@ -0,0 +1,51 @@
+(function () {
+    "use strict"
+
+    var styleSheet = document.createElement("style");
+    styleSheet.textContent = `
+        .auto-scroll {
+            float: right;
+        }
+    `;
+    document.head.appendChild(styleSheet);
+    
+    const autoScrollControl = document.createElement('div');
+    autoScrollControl.innerHTML = `<input id="auto_scroll" name="auto_scroll" type="checkbox">
+                            <label for="auto_scroll">Scroll to generated image</label>`
+    autoScrollControl.className = "auto-scroll"
+    clearAllPreviewsBtn.parentNode.insertBefore(autoScrollControl, clearAllPreviewsBtn.nextSibling)
+    prettifyInputs(document);
+    let autoScroll = document.querySelector("#auto_scroll")
+
+    /**
+     * the use of initSettings() in the autoscroll plugin seems to be breaking the models dropdown and the save-to-disk folder field
+     * in the settings tab. They're both blank, because they're being re-initialized. Their earlier values came from the API call,
+     * but those values aren't stored in localStorage, since they aren't user-specified.
+     * So when initSettings() is called a second time, it overwrites the values with an empty string.
+     *
+     * We could either rework how new components can register themselves to be auto-saved, without having to call initSettings() again.
+     * Or we could move the autoscroll code into the main code, and include it in the list of fields in auto-save.js
+     */
+    // SETTINGS_IDS_LIST.push("auto_scroll")
+    // initSettings()
+
+    // observe for changes in the preview pane
+    var observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+            if (mutation.target.className == 'img-batch') {
+                Autoscroll(mutation.target)
+            }
+        })
+    })
+    
+    observer.observe(document.getElementById('preview'), {
+            childList: true,
+            subtree: true
+    })
+
+    function Autoscroll(target) {
+        if (autoScroll.checked && target !== null) {
+            target.parentElement.parentElement.parentElement.scrollIntoView();
+        }
+    }
+})()

ui/plugins/ui/Modifiers-dnd.plugin.js

@@ -0,0 +1,91 @@
+(function () {
+    "use strict"
+
+    var styleSheet = document.createElement("style");
+    styleSheet.textContent = `
+        .modifier-card-tiny.drag-sort-active {
+            background: transparent;
+            border: 2px dashed white;
+            opacity:0.2;
+        }
+    `;
+    document.head.appendChild(styleSheet);
+
+    // observe for changes in tag list
+    var observer = new MutationObserver(function (mutations) {
+    //    mutations.forEach(function (mutation) {
+            if (editorModifierTagsList.childNodes.length > 0) {
+                ModifierDragAndDrop(editorModifierTagsList)
+            }
+    //    })
+    })
+    
+    observer.observe(editorModifierTagsList, {
+            childList: true
+    })
+
+    let current
+    function ModifierDragAndDrop(target) {
+        let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay')
+        overlays.forEach (i => {
+            i.parentElement.draggable = true;
+            
+            i.parentElement.ondragstart = (e) => {
+                current = i
+                i.parentElement.getElementsByClassName('modifier-card-image-overlay')[0].innerText = ''
+                i.parentElement.draggable = true
+                i.parentElement.classList.add('drag-sort-active')
+                for(let item of document.querySelector('#editor-inputs-tags-list').getElementsByClassName('modifier-card-image-overlay')) {
+                    if (item.parentElement.parentElement.getElementsByClassName('modifier-card-overlay')[0] != current) {
+                        item.parentElement.parentElement.getElementsByClassName('modifier-card-image-overlay')[0].style.opacity = 0
+                        if(item.parentElement.getElementsByClassName('modifier-card-image').length > 0) {
+                            item.parentElement.getElementsByClassName('modifier-card-image')[0].style.filter = 'none'
+                        }
+                        item.parentElement.parentElement.style.transform = 'none'
+                        item.parentElement.parentElement.style.boxShadow = 'none'
+                    }
+                    item.innerText = ''
+                }
+            }
+            
+            i.ondragenter = (e) => {
+                e.preventDefault()
+                if (i != current) {
+                    let currentPos = 0, droppedPos = 0;
+                    for (let it = 0; it < overlays.length; it++) {
+                        if (current == overlays[it]) { currentPos = it; }
+                        if (i == overlays[it]) { droppedPos = it; }
+                    }
+
+                    if (i.parentElement != current.parentElement) {
+                        let currentPos = 0, droppedPos = 0
+                        for (let it = 0; it < overlays.length; it++) {
+                            if (current == overlays[it]) { currentPos = it }
+                            if (i == overlays[it]) { droppedPos = it }
+                        }
+                        if (currentPos < droppedPos) {
+                            current = i.parentElement.parentNode.insertBefore(current.parentElement, i.parentElement.nextSibling).getElementsByClassName('modifier-card-overlay')[0]
+                        } else {
+                            current = i.parentElement.parentNode.insertBefore(current.parentElement, i.parentElement).getElementsByClassName('modifier-card-overlay')[0]
+                        }
+                        // update activeTags
+                        const tag = activeTags.splice(currentPos, 1)
+                        activeTags.splice(droppedPos, 0, tag[0])
+                    }
+                }
+            };
+
+            i.ondragover = (e) => {
+                e.preventDefault()
+            }
+            
+            i.parentElement.ondragend = (e) => {
+                i.parentElement.classList.remove('drag-sort-active')
+                for(let item of document.querySelector('#editor-inputs-tags-list').getElementsByClassName('modifier-card-image-overlay')) {
+                    item.style.opacity = ''
+                    item.innerText = '-'
+                }
+            }
+        })
+    }
+})()

ui/plugins/ui/Modifiers-wheel.plugin.js

@@ -0,0 +1,62 @@
+(function () {
+    "use strict"
+
+    // observe for changes in tag list
+    var observer = new MutationObserver(function (mutations) {
+    //    mutations.forEach(function (mutation) {
+            if (editorModifierTagsList.childNodes.length > 0) {
+                ModifierMouseWheel(editorModifierTagsList)
+            }
+    //    })
+    })
+    
+    observer.observe(editorModifierTagsList, {
+            childList: true
+    })
+
+    function ModifierMouseWheel(target) {
+        let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay')
+        overlays.forEach (i => {
+            i.onwheel = (e) => {
+                if (e.ctrlKey == true) {
+                    e.preventDefault()
+    
+                    const delta = Math.sign(event.deltaY)
+                    let s = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText
+                    if (delta < 0) {
+                        // wheel scrolling up
+                        if (s.substring(0, 1) == '[' && s.substring(s.length-1) == ']') {
+                            s = s.substring(1, s.length - 1)
+                        }
+                        else
+                        {
+                            if (s.substring(0, 10) !== '('.repeat(10) && s.substring(s.length-10) !== ')'.repeat(10)) {
+                                s = '(' + s + ')'
+                            }
+                        }
+                    }
+                    else{
+                        // wheel scrolling down
+                        if (s.substring(0, 1) == '(' && s.substring(s.length-1) == ')') {
+                            s = s.substring(1, s.length - 1)
+                        }
+                        else
+                        {
+                            if (s.substring(0, 10) !== '['.repeat(10) && s.substring(s.length-10) !== ']'.repeat(10)) {
+                                s = '[' + s + ']'
+                            }
+                        }
+                    }
+                    i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText = s
+                    // update activeTags
+                    for (let it = 0; it < overlays.length; it++) {
+                        if (i == overlays[it]) {
+                            activeTags[it].name = s
+                            break
+                        }
+                    }
+                }
+            }
+        })
+    }
+})()

ui/plugins/ui/Put UI plugins here (developer team only).txt

@@ -0,0 +1,3 @@
+Custom plugins in this folder will be shipped to all the users by default.
+
+This allows UI features to be built as plugins (testing our Plugins API, and keeping our core lean and modular).

ui/plugins/ui/custom-modifiers.plugin.js

@@ -0,0 +1,31 @@
+(function() {
+    PLUGINS['MODIFIERS_LOAD'].push({
+        loader: function() {
+            let customModifiers = localStorage.getItem(CUSTOM_MODIFIERS_KEY, '')
+            customModifiersTextBox.value = customModifiers
+
+            if (customModifiersGroupElement !== undefined) {
+                customModifiersGroupElement.remove()
+            }
+
+            if (customModifiers && customModifiers.trim() !== '') {
+                customModifiers = customModifiers.split('\n')
+                customModifiers = customModifiers.filter(m => m.trim() !== '')
+                customModifiers = customModifiers.map(function(m) {
+                    return {
+                        "modifier": m
+                    }
+                })
+
+                let customGroup = {
+                    'category': 'Custom Modifiers',
+                    'modifiers': customModifiers
+                }
+
+                customModifiersGroupElement = createModifierGroup(customGroup, true)
+
+                createCollapsibles(customModifiersGroupElement)
+            }
+        }
+    })
+})()

ui/plugins/ui/modifiers-toggle.plugin.js

@@ -0,0 +1,53 @@
+(function () {
+    "use strict"
+
+    var styleSheet = document.createElement("style");
+    styleSheet.textContent = `
+        .modifier-card-tiny.modifier-toggle-inactive {
+            background: transparent;
+            border: 2px dashed red;
+            opacity:0.2;
+        }
+    `;
+    document.head.appendChild(styleSheet);
+
+    // observe for changes in tag list
+    var observer = new MutationObserver(function (mutations) {
+    //    mutations.forEach(function (mutation) {
+            if (editorModifierTagsList.childNodes.length > 0) {
+                ModifierToggle()
+            }
+    //    })
+    })
+
+    observer.observe(editorModifierTagsList, {
+            childList: true
+    })
+
+    function ModifierToggle() {
+        let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay')
+        overlays.forEach (i => {
+            i.oncontextmenu = (e) => {
+                e.preventDefault()
+
+                if (i.parentElement.classList.contains('modifier-toggle-inactive')) {
+                    i.parentElement.classList.remove('modifier-toggle-inactive')
+                }
+                else
+                {
+                    i.parentElement.classList.add('modifier-toggle-inactive')
+                }
+                // refresh activeTags
+                let modifierName = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText
+                activeTags = activeTags.map(obj => {
+                    if (obj.name === modifierName) {
+                        return {...obj, inactive: (obj.element.classList.contains('modifier-toggle-inactive'))};
+                    }
+                    
+                    return obj;
+                });
+                console.log(activeTags)
+            }
+        })
+    }
+})()

ui/plugins/ui/release-notes.plugin.js

@@ -0,0 +1,47 @@
+(function() {
+    document.querySelector('#tab-container').insertAdjacentHTML('beforeend', `
+        <span id="tab-news" class="tab">
+            <span><i class="fa fa-bolt icon"></i> What's new?</span>
+        </span>
+    `)
+
+    document.querySelector('#tab-content-wrapper').insertAdjacentHTML('beforeend', `
+        <div id="tab-content-news" class="tab-content">
+            <div id="news" class="tab-content-inner">
+                Loading..
+            </div>
+        </div>
+    `)
+
+    document.querySelector('body').insertAdjacentHTML('beforeend', `
+        <style>
+        #tab-content-news .tab-content-inner {
+            max-width: 100%;
+            text-align: left;
+            padding: 10pt;
+        }
+        </style>
+    `)
+
+    linkTabContents(document.querySelector('#tab-news'))
+
+    let markedScript = document.createElement('script')
+    markedScript.src = '/media/js/marked.min.js'
+
+    markedScript.onload = async function() {
+        let appConfig = await fetch('/get/app_config')
+        appConfig = await appConfig.json()
+
+        let updateBranch = appConfig.update_branch || 'main'
+
+        let news = document.querySelector('#news')
+        let releaseNotes = await fetch(`https://raw.githubusercontent.com/cmdr2/stable-diffusion-ui/${updateBranch}/CHANGES.md`)
+        if (releaseNotes.status != 200) {
+            return
+        }
+        releaseNotes = await releaseNotes.text()
+        news.innerHTML = marked.parse(releaseNotes)
+    }
+
+    document.querySelector('body').appendChild(markedScript)
+})()

ui/sd_internal/__init__.py

@@ -18,13 +18,14 @@ class Request:
     precision: str = "autocast" # or "full"
     save_to_disk_path: str = None
     turbo: bool = True
-    use_cpu: bool = False
     use_full_precision: bool = False
     use_face_correction: str = None # or "GFPGANv1.3"
     use_upscale: str = None # or "RealESRGAN_x4plus" or "RealESRGAN_x4plus_anime_6B"
     use_stable_diffusion_model: str = "sd-v1-4"
+    use_vae_model: str = None
     show_only_filtered_image: bool = False
     output_format: str = "jpeg" # or "png"
+    output_quality: int = 75
 
     stream_progress_updates: bool = False
     stream_image_progress: bool = False
@@ -45,10 +46,12 @@ class Request:
             "use_face_correction": self.use_face_correction,
             "use_upscale": self.use_upscale,
             "use_stable_diffusion_model": self.use_stable_diffusion_model,
+            "use_vae_model": self.use_vae_model,
             "output_format": self.output_format,
+            "output_quality": self.output_quality,
         }
 
-    def to_string(self):
+    def __str__(self):
         return f'''
     session_id: {self.session_id}
     prompt: {self.prompt}
@@ -62,13 +65,14 @@ class Request:
     precision: {self.precision}
     save_to_disk_path: {self.save_to_disk_path}
     turbo: {self.turbo}
-    use_cpu: {self.use_cpu}
     use_full_precision: {self.use_full_precision}
     use_face_correction: {self.use_face_correction}
     use_upscale: {self.use_upscale}
     use_stable_diffusion_model: {self.use_stable_diffusion_model}
+    use_vae_model: {self.use_vae_model}
     show_only_filtered_image: {self.show_only_filtered_image}
     output_format: {self.output_format}
+    output_quality: {self.output_quality}
 
     stream_progress_updates: {self.stream_progress_updates}
     stream_image_progress: {self.stream_image_progress}'''

ui/sd_internal/ddim_callback.patch

@@ -1,72 +1,13 @@
 diff --git a/optimizedSD/ddpm.py b/optimizedSD/ddpm.py
-index b967b55..35ef520 100644
+index 79058bc..a473411 100644
 --- a/optimizedSD/ddpm.py
 +++ b/optimizedSD/ddpm.py
-@@ -22,7 +22,7 @@ from ldm.util import exists, default, instantiate_from_config
- from ldm.modules.diffusionmodules.util import make_beta_schedule
- from ldm.modules.diffusionmodules.util import make_ddim_sampling_parameters, make_ddim_timesteps, noise_like
- from ldm.modules.diffusionmodules.util import make_beta_schedule, extract_into_tensor, noise_like
--from samplers import CompVisDenoiser, get_ancestral_step, to_d, append_dims,linear_multistep_coeff
-+from .samplers import CompVisDenoiser, get_ancestral_step, to_d, append_dims,linear_multistep_coeff
+@@ -564,12 +564,12 @@ class UNet(DDPM):
+                                         unconditional_guidance_scale=unconditional_guidance_scale,
+                                         callback=callback, img_callback=img_callback)
  
- def disabled_train(self):
-     """Overwrite model.train with this function to make sure train/eval mode
-@@ -506,6 +506,8 @@ class UNet(DDPM):
- 
-         x_latent = noise if x0 is None else x0
-         # sampling
-+        if sampler in ('ddim', 'dpm2', 'heun', 'dpm2_a', 'lms') and not hasattr(self, 'ddim_timesteps'):
-+            self.make_schedule(ddim_num_steps=S, ddim_eta=eta, verbose=False)
-         
-         if sampler == "plms":
-             self.make_schedule(ddim_num_steps=S, ddim_eta=eta, verbose=False)
-@@ -528,39 +530,46 @@ class UNet(DDPM):
-         elif sampler == "ddim":
-             samples = self.ddim_sampling(x_latent, conditioning, S, unconditional_guidance_scale=unconditional_guidance_scale,
-                                          unconditional_conditioning=unconditional_conditioning,
--                                         mask = mask,init_latent=x_T,use_original_steps=False)
-+                                         mask = mask,init_latent=x_T,use_original_steps=False,
-+                                         callback=callback, img_callback=img_callback)
- 
-         elif sampler == "euler":
-             self.make_schedule(ddim_num_steps=S, ddim_eta=eta, verbose=False)
-             samples = self.euler_sampling(self.alphas_cumprod,x_latent, S, conditioning, unconditional_conditioning=unconditional_conditioning,
--                                        unconditional_guidance_scale=unconditional_guidance_scale)
-+                                        unconditional_guidance_scale=unconditional_guidance_scale,
-+                                        img_callback=img_callback)
-         elif sampler == "euler_a":
-             self.make_schedule(ddim_num_steps=S, ddim_eta=eta, verbose=False)
-             samples = self.euler_ancestral_sampling(self.alphas_cumprod,x_latent, S, conditioning, unconditional_conditioning=unconditional_conditioning,
--                                        unconditional_guidance_scale=unconditional_guidance_scale)
-+                                        unconditional_guidance_scale=unconditional_guidance_scale,
-+                                        img_callback=img_callback)
- 
-         elif sampler == "dpm2":
-             samples = self.dpm_2_sampling(self.alphas_cumprod,x_latent, S, conditioning, unconditional_conditioning=unconditional_conditioning,
--                                        unconditional_guidance_scale=unconditional_guidance_scale)
-+                                        unconditional_guidance_scale=unconditional_guidance_scale,
-+                                        img_callback=img_callback)
-         elif sampler == "heun":
-             samples = self.heun_sampling(self.alphas_cumprod,x_latent, S, conditioning, unconditional_conditioning=unconditional_conditioning,
--                                        unconditional_guidance_scale=unconditional_guidance_scale)
-+                                        unconditional_guidance_scale=unconditional_guidance_scale,
-+                                        img_callback=img_callback)
- 
-         elif sampler == "dpm2_a":
-             samples = self.dpm_2_ancestral_sampling(self.alphas_cumprod,x_latent, S, conditioning, unconditional_conditioning=unconditional_conditioning,
--                                        unconditional_guidance_scale=unconditional_guidance_scale)
-+                                        unconditional_guidance_scale=unconditional_guidance_scale,
-+                                        img_callback=img_callback)
- 
- 
-         elif sampler == "lms":
-             samples = self.lms_sampling(self.alphas_cumprod,x_latent, S, conditioning, unconditional_conditioning=unconditional_conditioning,
--                                        unconditional_guidance_scale=unconditional_guidance_scale)
-+                                        unconditional_guidance_scale=unconditional_guidance_scale,
-+                                        img_callback=img_callback)
-+
 +        yield from samples
- 
++
          if(self.turbo):
              self.model1.to("cpu")
              self.model2.to("cpu")
@@ -76,7 +17,7 @@ index b967b55..35ef520 100644
      @torch.no_grad()
      def plms_sampling(self, cond,b, img,
                        ddim_use_original_steps=False,
-@@ -599,10 +608,10 @@ class UNet(DDPM):
+@@ -608,10 +608,10 @@ class UNet(DDPM):
              old_eps.append(e_t)
              if len(old_eps) >= 4:
                  old_eps.pop(0)
@@ -90,23 +31,15 @@ index b967b55..35ef520 100644
  
      @torch.no_grad()
      def p_sample_plms(self, x, c, t, index, repeat_noise=False, use_original_steps=False, quantize_denoised=False,
-@@ -706,7 +715,8 @@ class UNet(DDPM):
- 
-     @torch.no_grad()
-     def ddim_sampling(self, x_latent, cond, t_start, unconditional_guidance_scale=1.0, unconditional_conditioning=None,
--               mask = None,init_latent=None,use_original_steps=False):
-+               mask = None,init_latent=None,use_original_steps=False,
-+               callback=None, img_callback=None):
- 
-         timesteps = self.ddim_timesteps
-         timesteps = timesteps[:t_start]
-@@ -730,10 +740,13 @@ class UNet(DDPM):
+@@ -740,13 +740,13 @@ class UNet(DDPM):
                                            unconditional_guidance_scale=unconditional_guidance_scale,
                                            unconditional_conditioning=unconditional_conditioning)
-         
+ 
+-            if callback: callback(i)
+-            if img_callback: img_callback(x_dec, i)
 +            if callback: yield from callback(i)
 +            if img_callback: yield from img_callback(x_dec, i)
-+
+         
          if mask is not None:
 -            return x0 * mask + (1. - mask) * x_dec
 +            x_dec = x0 * mask + (1. - mask) * x_dec
@@ -116,217 +49,114 @@ index b967b55..35ef520 100644
  
  
      @torch.no_grad()
-@@ -779,13 +792,16 @@ class UNet(DDPM):
+@@ -820,12 +820,12 @@ class UNet(DDPM):
  
  
-     @torch.no_grad()
--    def euler_sampling(self, ac, x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1,extra_args=None,callback=None, disable=None, s_churn=0., s_tmin=0., s_tmax=float('inf'), s_noise=1.):
-+    def euler_sampling(self, ac, x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1,extra_args=None,callback=None, disable=None, s_churn=0., s_tmin=0., s_tmax=float('inf'), s_noise=1.,
-+                        img_callback=None):
-         """Implements Algorithm 2 (Euler steps) from Karras et al. (2022)."""
-         extra_args = {} if extra_args is None else extra_args
-         cvd = CompVisDenoiser(ac)
-         sigmas = cvd.get_sigmas(S)
-         x = x*sigmas[0]
- 
-+        print(f"Running Euler Sampling with {len(sigmas) - 1} timesteps")
-+
-         s_in = x.new_ones([x.shape[0]]).half()
-         for i in trange(len(sigmas) - 1, disable=disable):
-             gamma = min(s_churn / (len(sigmas) - 1), 2 ** 0.5 - 1) if s_tmin <= sigmas[i] <= s_tmax else 0.
-@@ -807,13 +823,18 @@ class UNet(DDPM):
              d = to_d(x, sigma_hat, denoised)
-             if callback is not None:
-                 callback({'x': x, 'i': i, 'sigma': sigmas[i], 'sigma_hat': sigma_hat, 'denoised': denoised})
-+
+-            if callback: callback(i)
+-            if img_callback: img_callback(x, i)
++            if callback: yield from callback(i)
 +            if img_callback: yield from img_callback(x, i)
-+
              dt = sigmas[i + 1] - sigma_hat
              # Euler method
              x = x + d * dt
 -        return x
-+
 +        yield from img_callback(x, len(sigmas)-1)
  
      @torch.no_grad()
--    def euler_ancestral_sampling(self,ac,x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1,extra_args=None, callback=None, disable=None):
-+    def euler_ancestral_sampling(self,ac,x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1,extra_args=None, callback=None, disable=None,
-+                        img_callback=None):
-         """Ancestral sampling with Euler method steps."""
-         extra_args = {} if extra_args is None else extra_args
+     def euler_ancestral_sampling(self,ac,x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1,extra_args=None, callback=None, disable=None, img_callback=None):
+@@ -852,14 +852,14 @@ class UNet(DDPM):
+             denoised = e_t_uncond + unconditional_guidance_scale * (e_t - e_t_uncond)
  
-@@ -822,6 +843,8 @@ class UNet(DDPM):
-         sigmas = cvd.get_sigmas(S)
-         x = x*sigmas[0]
- 
-+        print(f"Running Euler Ancestral Sampling with {len(sigmas) - 1} timesteps")
-+
-         s_in = x.new_ones([x.shape[0]]).half()
-         for i in trange(len(sigmas) - 1, disable=disable):
- 
-@@ -837,17 +860,22 @@ class UNet(DDPM):
              sigma_down, sigma_up = get_ancestral_step(sigmas[i], sigmas[i + 1])
-             if callback is not None:
-                 callback({'x': x, 'i': i, 'sigma': sigmas[i], 'sigma_hat': sigmas[i], 'denoised': denoised})
-+
+-            if callback: callback(i)
+-            if img_callback: img_callback(x, i)
++            if callback: yield from callback(i)
 +            if img_callback: yield from img_callback(x, i)
-+
              d = to_d(x, sigmas[i], denoised)
              # Euler method
              dt = sigma_down - sigmas[i]
              x = x + d * dt
              x = x + torch.randn_like(x) * sigma_up
 -        return x
-+
 +        yield from img_callback(x, len(sigmas)-1)
  
  
  
-     @torch.no_grad()
--    def heun_sampling(self, ac, x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1, extra_args=None, callback=None, disable=None, s_churn=0., s_tmin=0., s_tmax=float('inf'), s_noise=1.):
-+    def heun_sampling(self, ac, x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1, extra_args=None, callback=None, disable=None, s_churn=0., s_tmin=0., s_tmax=float('inf'), s_noise=1.,
-+                        img_callback=None):
-         """Implements Algorithm 2 (Heun steps) from Karras et al. (2022)."""
-         extra_args = {} if extra_args is None else extra_args
+@@ -892,8 +892,8 @@ class UNet(DDPM):
+             denoised = e_t_uncond + unconditional_guidance_scale * (e_t - e_t_uncond)
  
-@@ -855,6 +883,8 @@ class UNet(DDPM):
-         sigmas = cvd.get_sigmas(S)
-         x = x*sigmas[0]
- 
-+        print(f"Running Heun Sampling with {len(sigmas) - 1} timesteps")
-+
- 
-         s_in = x.new_ones([x.shape[0]]).half()
-         for i in trange(len(sigmas) - 1, disable=disable):
-@@ -876,6 +906,9 @@ class UNet(DDPM):
              d = to_d(x, sigma_hat, denoised)
-             if callback is not None:
-                 callback({'x': x, 'i': i, 'sigma': sigmas[i], 'sigma_hat': sigma_hat, 'denoised': denoised})
-+
+-            if callback: callback(i)
+-            if img_callback: img_callback(x, i)
++            if callback: yield from callback(i)
 +            if img_callback: yield from img_callback(x, i)
-+
              dt = sigmas[i + 1] - sigma_hat
              if sigmas[i + 1] == 0:
                  # Euler method
-@@ -895,11 +928,13 @@ class UNet(DDPM):
+@@ -913,7 +913,7 @@ class UNet(DDPM):
                  d_2 = to_d(x_2, sigmas[i + 1], denoised_2)
                  d_prime = (d + d_2) / 2
                  x = x + d_prime * dt
 -        return x
-+
 +        yield from img_callback(x, len(sigmas)-1)
  
  
      @torch.no_grad()
--    def dpm_2_sampling(self,ac,x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1,extra_args=None, callback=None, disable=None, s_churn=0., s_tmin=0., s_tmax=float('inf'), s_noise=1.):
-+    def dpm_2_sampling(self,ac,x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1,extra_args=None, callback=None, disable=None, s_churn=0., s_tmin=0., s_tmax=float('inf'), s_noise=1.,
-+                        img_callback=None):
-         """A sampler inspired by DPM-Solver-2 and Algorithm 2 from Karras et al. (2022)."""
-         extra_args = {} if extra_args is None else extra_args
- 
-@@ -907,6 +942,8 @@ class UNet(DDPM):
-         sigmas = cvd.get_sigmas(S)
-         x = x*sigmas[0]
- 
-+        print(f"Running DPM2 Sampling with {len(sigmas) - 1} timesteps")
-+
-         s_in = x.new_ones([x.shape[0]]).half()
-         for i in trange(len(sigmas) - 1, disable=disable):
-             gamma = min(s_churn / (len(sigmas) - 1), 2 ** 0.5 - 1) if s_tmin <= sigmas[i] <= s_tmax else 0.
-@@ -924,7 +961,7 @@ class UNet(DDPM):
+@@ -944,8 +944,8 @@ class UNet(DDPM):
              e_t_uncond, e_t = (x_in  + eps * c_out).chunk(2)
              denoised = e_t_uncond + unconditional_guidance_scale * (e_t - e_t_uncond)
  
--
+-            if callback: callback(i)
+-            if img_callback: img_callback(x, i)
++            if callback: yield from callback(i)
 +            if img_callback: yield from img_callback(x, i)
              
              d = to_d(x, sigma_hat, denoised)
              # Midpoint method, where the midpoint is chosen according to a rho=3 Karras schedule
-@@ -945,11 +982,13 @@ class UNet(DDPM):
+@@ -966,7 +966,7 @@ class UNet(DDPM):
  
              d_2 = to_d(x_2, sigma_mid, denoised_2)
              x = x + d_2 * dt_2
 -        return x
-+
 +        yield from img_callback(x, len(sigmas)-1)
  
  
      @torch.no_grad()
--    def dpm_2_ancestral_sampling(self,ac,x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1, extra_args=None, callback=None, disable=None):
-+    def dpm_2_ancestral_sampling(self,ac,x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1, extra_args=None, callback=None, disable=None,
-+                        img_callback=None):
-         """Ancestral sampling with DPM-Solver inspired second-order steps."""
-         extra_args = {} if extra_args is None else extra_args
+@@ -994,8 +994,8 @@ class UNet(DDPM):
  
-@@ -957,6 +996,8 @@ class UNet(DDPM):
-         sigmas = cvd.get_sigmas(S)
-         x = x*sigmas[0]
  
-+        print(f"Running DPM2 Ancestral Sampling with {len(sigmas) - 1} timesteps")
-+
-         s_in = x.new_ones([x.shape[0]]).half()
-         for i in trange(len(sigmas) - 1, disable=disable):
- 
-@@ -973,6 +1014,9 @@ class UNet(DDPM):
              sigma_down, sigma_up = get_ancestral_step(sigmas[i], sigmas[i + 1])
-             if callback is not None:
-                 callback({'x': x, 'i': i, 'sigma': sigmas[i], 'sigma_hat': sigmas[i], 'denoised': denoised})
-+
+-            if callback: callback(i)
+-            if img_callback: img_callback(x, i)
++            if callback: yield from callback(i)
 +            if img_callback: yield from img_callback(x, i)
-+
              d = to_d(x, sigmas[i], denoised)
              # Midpoint method, where the midpoint is chosen according to a rho=3 Karras schedule
              sigma_mid = ((sigmas[i] ** (1 / 3) + sigma_down ** (1 / 3)) / 2) ** 3
-@@ -993,11 +1037,13 @@ class UNet(DDPM):
+@@ -1016,7 +1016,7 @@ class UNet(DDPM):
              d_2 = to_d(x_2, sigma_mid, denoised_2)
              x = x + d_2 * dt_2
              x = x + torch.randn_like(x) * sigma_up
 -        return x
-+
 +        yield from img_callback(x, len(sigmas)-1)
  
  
      @torch.no_grad()
--    def lms_sampling(self,ac,x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1, extra_args=None, callback=None, disable=None, order=4):
-+    def lms_sampling(self,ac,x, S, cond, unconditional_conditioning = None, unconditional_guidance_scale = 1, extra_args=None, callback=None, disable=None, order=4,
-+                        img_callback=None):
-         extra_args = {} if extra_args is None else extra_args
-         s_in = x.new_ones([x.shape[0]])
- 
-@@ -1005,6 +1051,8 @@ class UNet(DDPM):
-         sigmas = cvd.get_sigmas(S)
-         x = x*sigmas[0]
- 
-+        print(f"Running LMS Sampling with {len(sigmas) - 1} timesteps")
-+
-         ds = []
-         for i in trange(len(sigmas) - 1, disable=disable):
- 
-@@ -1017,6 +1065,7 @@ class UNet(DDPM):
+@@ -1042,8 +1042,8 @@ class UNet(DDPM):
              e_t_uncond, e_t = (x_in  + eps * c_out).chunk(2)
              denoised = e_t_uncond + unconditional_guidance_scale * (e_t - e_t_uncond)
  
+-            if callback: callback(i)
+-            if img_callback: img_callback(x, i)
++            if callback: yield from callback(i)
 +            if img_callback: yield from img_callback(x, i)
  
              d = to_d(x, sigmas[i], denoised)
              ds.append(d)
-@@ -1027,4 +1076,5 @@ class UNet(DDPM):
+@@ -1054,4 +1054,4 @@ class UNet(DDPM):
              cur_order = min(i + 1, order)
              coeffs = [linear_multistep_coeff(cur_order, sigmas.cpu(), i, j) for j in range(cur_order)]
              x = x + sum(coeff * d for coeff, d in zip(coeffs, reversed(ds)))
 -        return x
-+
 +        yield from img_callback(x, len(sigmas)-1)
-diff --git a/optimizedSD/openaimodelSplit.py b/optimizedSD/openaimodelSplit.py
-index abc3098..7a32ffe 100644
---- a/optimizedSD/openaimodelSplit.py
-+++ b/optimizedSD/openaimodelSplit.py
-@@ -13,7 +13,7 @@ from ldm.modules.diffusionmodules.util import (
-     normalization,
-     timestep_embedding,
- )
--from splitAttention import SpatialTransformer
-+from .splitAttention import SpatialTransformer
- 
- 
- class AttentionPool2d(nn.Module):

ui/sd_internal/ddim_callback_sd2.patch

@@ -0,0 +1,84 @@
+diff --git a/ldm/models/diffusion/ddim.py b/ldm/models/diffusion/ddim.py
+index 27ead0e..6215939 100644
+--- a/ldm/models/diffusion/ddim.py
++++ b/ldm/models/diffusion/ddim.py
+@@ -100,7 +100,7 @@ class DDIMSampler(object):
+         size = (batch_size, C, H, W)
+         print(f'Data shape for DDIM sampling is {size}, eta {eta}')
+ 
+-        samples, intermediates = self.ddim_sampling(conditioning, size,
++        samples = self.ddim_sampling(conditioning, size,
+                                                     callback=callback,
+                                                     img_callback=img_callback,
+                                                     quantize_denoised=quantize_x0,
+@@ -117,7 +117,8 @@ class DDIMSampler(object):
+                                                     dynamic_threshold=dynamic_threshold,
+                                                     ucg_schedule=ucg_schedule
+                                                     )
+-        return samples, intermediates
++        # return samples, intermediates
++        yield from samples
+ 
+     @torch.no_grad()
+     def ddim_sampling(self, cond, shape,
+@@ -168,14 +169,15 @@ class DDIMSampler(object):
+                                       unconditional_conditioning=unconditional_conditioning,
+                                       dynamic_threshold=dynamic_threshold)
+             img, pred_x0 = outs
+-            if callback: callback(i)
+-            if img_callback: img_callback(pred_x0, i)
++            if callback: yield from callback(i)
++            if img_callback: yield from img_callback(pred_x0, i)
+ 
+             if index % log_every_t == 0 or index == total_steps - 1:
+                 intermediates['x_inter'].append(img)
+                 intermediates['pred_x0'].append(pred_x0)
+ 
+-        return img, intermediates
++        # return img, intermediates
++        yield from img_callback(pred_x0, len(iterator)-1)
+ 
+     @torch.no_grad()
+     def p_sample_ddim(self, x, c, t, index, repeat_noise=False, use_original_steps=False, quantize_denoised=False,
+diff --git a/ldm/models/diffusion/plms.py b/ldm/models/diffusion/plms.py
+index 7002a36..0951f39 100644
+--- a/ldm/models/diffusion/plms.py
++++ b/ldm/models/diffusion/plms.py
+@@ -96,7 +96,7 @@ class PLMSSampler(object):
+         size = (batch_size, C, H, W)
+         print(f'Data shape for PLMS sampling is {size}')
+ 
+-        samples, intermediates = self.plms_sampling(conditioning, size,
++        samples = self.plms_sampling(conditioning, size,
+                                                     callback=callback,
+                                                     img_callback=img_callback,
+                                                     quantize_denoised=quantize_x0,
+@@ -112,7 +112,8 @@ class PLMSSampler(object):
+                                                     unconditional_conditioning=unconditional_conditioning,
+                                                     dynamic_threshold=dynamic_threshold,
+                                                     )
+-        return samples, intermediates
++        #return samples, intermediates
++        yield from samples
+ 
+     @torch.no_grad()
+     def plms_sampling(self, cond, shape,
+@@ -165,14 +166,15 @@ class PLMSSampler(object):
+             old_eps.append(e_t)
+             if len(old_eps) >= 4:
+                 old_eps.pop(0)
+-            if callback: callback(i)
+-            if img_callback: img_callback(pred_x0, i)
++            if callback: yield from callback(i)
++            if img_callback: yield from img_callback(pred_x0, i)
+ 
+             if index % log_every_t == 0 or index == total_steps - 1:
+                 intermediates['x_inter'].append(img)
+                 intermediates['pred_x0'].append(pred_x0)
+ 
+-        return img, intermediates
++        # return img, intermediates
++        yield from img_callback(pred_x0, len(iterator)-1)
+ 
+     @torch.no_grad()
+     def p_sample_plms(self, x, c, t, index, repeat_noise=False, use_original_steps=False, quantize_denoised=False,

ui/sd_internal/device_manager.py

@@ -0,0 +1,168 @@
+import os
+import torch
+import traceback
+import re
+
+COMPARABLE_GPU_PERCENTILE = 0.65 # if a GPU's free_mem is within this % of the GPU with the most free_mem, it will be picked
+
+mem_free_threshold = 0
+
+def get_device_delta(render_devices, active_devices):
+    '''
+    render_devices: 'cpu', or 'auto' or ['cuda:N'...]
+    active_devices: ['cpu', 'cuda:N'...]
+    '''
+
+    if render_devices in ('cpu', 'auto'):
+        render_devices = [render_devices]
+    elif render_devices is not None:
+        if isinstance(render_devices, str):
+            render_devices = [render_devices]
+        if isinstance(render_devices, list) and len(render_devices) > 0:
+            render_devices = list(filter(lambda x: x.startswith('cuda:'), render_devices))
+            if len(render_devices) == 0:
+                raise Exception('Invalid render_devices value in config.json. Valid: {"render_devices": ["cuda:0", "cuda:1"...]}, or {"render_devices": "cpu"} or {"render_devices": "auto"}')
+
+            render_devices = list(filter(lambda x: is_device_compatible(x), render_devices))
+            if len(render_devices) == 0:
+                raise Exception('Sorry, none of the render_devices configured in config.json are compatible with Stable Diffusion')
+        else:
+            raise Exception('Invalid render_devices value in config.json. Valid: {"render_devices": ["cuda:0", "cuda:1"...]}, or {"render_devices": "cpu"} or {"render_devices": "auto"}')
+    else:
+        render_devices = ['auto']
+
+    if 'auto' in render_devices:
+        render_devices = auto_pick_devices(active_devices)
+        if 'cpu' in render_devices:
+            print('WARNING: Could not find a compatible GPU. Using the CPU, but this will be very slow!')
+
+    active_devices = set(active_devices)
+    render_devices = set(render_devices)
+
+    devices_to_start = render_devices - active_devices
+    devices_to_stop = active_devices - render_devices
+
+    return devices_to_start, devices_to_stop
+
+def auto_pick_devices(currently_active_devices):
+    global mem_free_threshold
+
+    if not torch.cuda.is_available(): return ['cpu']
+
+    device_count = torch.cuda.device_count()
+    if device_count == 1:
+        return ['cuda:0'] if is_device_compatible('cuda:0') else ['cpu']
+
+    print('Autoselecting GPU. Using most free memory.')
+    devices = []
+    for device in range(device_count):
+        device = f'cuda:{device}'
+        if not is_device_compatible(device):
+            continue
+
+        mem_free, mem_total = torch.cuda.mem_get_info(device)
+        mem_free /= float(10**9)
+        mem_total /= float(10**9)
+        device_name = torch.cuda.get_device_name(device)
+        print(f'{device} detected: {device_name} - Memory (free/total): {round(mem_free, 2)}Gb / {round(mem_total, 2)}Gb')
+        devices.append({'device': device, 'device_name': device_name, 'mem_free': mem_free})
+
+    devices.sort(key=lambda x:x['mem_free'], reverse=True)
+    max_mem_free = devices[0]['mem_free']
+    curr_mem_free_threshold = COMPARABLE_GPU_PERCENTILE * max_mem_free
+    mem_free_threshold = max(curr_mem_free_threshold, mem_free_threshold)
+
+    # Auto-pick algorithm:
+    # 1. Pick the top 75 percentile of the GPUs, sorted by free_mem.
+    # 2. Also include already-running devices (GPU-only), otherwise their free_mem will
+    #    always be very low (since their VRAM contains the model).
+    #    These already-running devices probably aren't terrible, since they were picked in the past.
+    #    Worst case, the user can restart the program and that'll get rid of them.
+    devices = list(filter((lambda x: x['mem_free'] > mem_free_threshold or x['device'] in currently_active_devices), devices))
+    devices = list(map(lambda x: x['device'], devices))
+    return devices
+
+def device_init(thread_data, device):
+    '''
+    This function assumes the 'device' has already been verified to be compatible.
+    `get_device_delta()` has already filtered out incompatible devices.
+    '''
+
+    validate_device_id(device, log_prefix='device_init')
+
+    if device == 'cpu':
+        thread_data.device = 'cpu'
+        thread_data.device_name = get_processor_name()
+        print('Render device CPU available as', thread_data.device_name)
+        return
+
+    thread_data.device_name = torch.cuda.get_device_name(device)
+    thread_data.device = device
+
+    # Force full precision on 1660 and 1650 NVIDIA cards to avoid creating green images
+    device_name = thread_data.device_name.lower()
+    thread_data.force_full_precision = (('nvidia' in device_name or 'geforce' in device_name) and (' 1660' in device_name or ' 1650' in device_name)) or ('Quadro T2000' in device_name)
+    if thread_data.force_full_precision:
+        print('forcing full precision on NVIDIA 16xx cards, to avoid green images. GPU detected: ', thread_data.device_name)
+        # Apply force_full_precision now before models are loaded.
+        thread_data.precision = 'full'
+
+    print(f'Setting {device} as active')
+    torch.cuda.device(device)
+
+    return
+
+def validate_device_id(device, log_prefix=''):
+    def is_valid():
+        if not isinstance(device, str):
+            return False
+        if device == 'cpu':
+            return True
+        if not device.startswith('cuda:') or not device[5:].isnumeric():
+            return False
+        return True
+
+    if not is_valid():
+        raise EnvironmentError(f"{log_prefix}: device id should be 'cpu', or 'cuda:N' (where N is an integer index for the GPU). Got: {device}")
+
+def is_device_compatible(device):
+    '''
+    Returns True/False, and prints any compatibility errors
+    '''
+    try:
+        validate_device_id(device, log_prefix='is_device_compatible')
+    except:
+        print(str(e))
+        return False
+
+    if device == 'cpu': return True
+    # Memory check
+    try:
+        _, mem_total = torch.cuda.mem_get_info(device)
+        mem_total /= float(10**9)
+        if mem_total < 3.0:
+            print(f'GPU {device} with less than 3 GB of VRAM is not compatible with Stable Diffusion')
+            return False
+    except RuntimeError as e:
+        print(str(e))
+        return False
+    return True
+
+def get_processor_name():
+    try:
+        import platform, subprocess
+        if platform.system() == "Windows":
+            return platform.processor()
+        elif platform.system() == "Darwin":
+            os.environ['PATH'] = os.environ['PATH'] + os.pathsep + '/usr/sbin'
+            command = "sysctl -n machdep.cpu.brand_string"
+            return subprocess.check_output(command).strip()
+        elif platform.system() == "Linux":
+            command = "cat /proc/cpuinfo"
+            all_info = subprocess.check_output(command, shell=True).decode().strip()
+            for line in all_info.split("\n"):
+                if "model name" in line:
+                    return re.sub(".*model name.*:", "", line, 1).strip()
+    except:
+        print(traceback.format_exc())
+        return "cpu"

ui/sd_internal/env_yaml.patch

@@ -1,13 +0,0 @@
-diff --git a/environment.yaml b/environment.yaml
-index 7f25da8..306750f 100644
---- a/environment.yaml
-+++ b/environment.yaml
-@@ -23,6 +23,8 @@ dependencies:
-     - torch-fidelity==0.3.0
-     - transformers==4.19.2
-     - torchmetrics==0.6.0
-+    - pywavelets==1.3.0
-+    - pandas==1.4.4
-     - kornia==0.6
-     - -e git+https://github.com/CompVis/taming-transformers.git@master#egg=taming-transformers
-     - -e git+https://github.com/openai/CLIP.git@main#egg=clip

ui/sd_internal/task_manager.py

@@ -1,13 +1,27 @@
+"""task_manager.py: manage tasks dispatching and render threads.
+Notes:
+    render_threads should be the only hard reference held by the manager to the threads.
+    Use weak_thread_data to store all other data using weak keys.
+    This will allow for garbage collection after the thread dies.
+"""
 import json
 import traceback
 
 TASK_TTL = 15 * 60 # seconds, Discard last session's task timeout
 
-import queue, threading, time
+import torch
+import queue, threading, time, weakref
 from typing import Any, Generator, Hashable, Optional, Union
 
 from pydantic import BaseModel
-from sd_internal import Request, Response
+from sd_internal import Request, Response, runtime, device_manager
+
+THREAD_NAME_PREFIX = 'Runtime-Render/'
+ERR_LOCK_FAILED = ' failed to acquire lock within timeout.'
+LOCK_TIMEOUT = 15 # Maximum locking time in seconds before failing a task.
+# It's better to get an exception than a deadlock... ALWAYS use timeout in critical paths.
+
+DEVICE_START_TIMEOUT = 60 # seconds - Maximum time to wait for a render device to init.
 
 class SymbolClass(type): # Print nicely formatted Symbol names.
     def __repr__(self): return self.__qualname__
@@ -25,7 +39,8 @@ class RenderTask(): # Task with output queue and completion lock.
     def __init__(self, req: Request):
         self.request: Request = req # Initial Request
         self.response: Any = None # Copy of the last reponse
-        self.temp_images:[] = [None] * req.num_outputs * (1 if req.show_only_filtered_image else 2)
+        self.render_device = None # Select the task affinity. (Not used to change active devices).
+        self.temp_images:list = [None] * req.num_outputs * (1 if req.show_only_filtered_image else 2)
         self.error: Exception = None
         self.lock: threading.Lock = threading.Lock() # Locks at task start and unlocks when task is completed
         self.buffer_queue: queue.Queue = queue.Queue() # Queue of JSON string segments
@@ -55,28 +70,45 @@ class ImageRequest(BaseModel):
     # allow_nsfw: bool = False
     save_to_disk_path: str = None
     turbo: bool = True
-    use_cpu: bool = False
+    use_cpu: bool = False ##TODO Remove after UI and plugins transition.
+    render_device: str = None # Select the task affinity. (Not used to change active devices).
     use_full_precision: bool = False
     use_face_correction: str = None # or "GFPGANv1.3"
     use_upscale: str = None # or "RealESRGAN_x4plus" or "RealESRGAN_x4plus_anime_6B"
     use_stable_diffusion_model: str = "sd-v1-4"
+    use_vae_model: str = None
     show_only_filtered_image: bool = False
     output_format: str = "jpeg" # or "png"
+    output_quality: int = 75
 
     stream_progress_updates: bool = False
     stream_image_progress: bool = False
 
+class FilterRequest(BaseModel):
+    session_id: str = "session"
+    model: str = None
+    name: str = ""
+    init_image: str = None # base64
+    width: int = 512
+    height: int = 512
+    save_to_disk_path: str = None
+    turbo: bool = True
+    render_device: str = None
+    use_full_precision: bool = False
+    output_format: str = "jpeg" # or "png"
+    output_quality: int = 75
+
 # Temporary cache to allow to query tasks results for a short time after they are completed.
 class TaskCache():
     def __init__(self):
         self._base = dict()
-        self._lock: threading.Lock = threading.RLock()
+        self._lock: threading.Lock = threading.Lock()
     def _get_ttl_time(self, ttl: int) -> int:
         return int(time.time()) + ttl
     def _is_expired(self, timestamp: int) -> bool:
         return int(time.time()) >= timestamp
     def clean(self) -> None:
-        if not self._lock.acquire(blocking=True, timeout=10): raise Exception('TaskCache.clean failed to acquire lock within timeout.')
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('TaskCache.clean' + ERR_LOCK_FAILED)
         try:
             # Create a list of expired keys to delete
             to_delete = []
@@ -91,11 +123,11 @@ class TaskCache():
         finally:
             self._lock.release()
     def clear(self) -> None:
-        if not self._lock.acquire(blocking=True, timeout=10): raise Exception('TaskCache.clear failed to acquire lock within timeout.')
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('TaskCache.clear' + ERR_LOCK_FAILED)
         try: self._base.clear()
         finally: self._lock.release()
     def delete(self, key: Hashable) -> bool:
-        if not self._lock.acquire(blocking=True, timeout=10): raise Exception('TaskCache.delete failed to acquire lock within timeout.')
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('TaskCache.delete' + ERR_LOCK_FAILED)
         try:
             if key not in self._base:
                 return False
@@ -104,7 +136,7 @@ class TaskCache():
         finally:
             self._lock.release()
     def keep(self, key: Hashable, ttl: int) -> bool:
-        if not self._lock.acquire(blocking=True, timeout=10): raise Exception('TaskCache.keep failed to acquire lock within timeout.')
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('TaskCache.keep' + ERR_LOCK_FAILED)
         try:
             if key in self._base:
                 _, value = self._base.get(key)
@@ -114,7 +146,7 @@ class TaskCache():
         finally:
             self._lock.release()
     def put(self, key: Hashable, value: Any, ttl: int) -> bool:
-        if not self._lock.acquire(blocking=True, timeout=10): raise Exception('TaskCache.put failed to acquire lock within timeout.')
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('TaskCache.put' + ERR_LOCK_FAILED)
         try:
             self._base[key] = (
                 self._get_ttl_time(ttl), value
@@ -128,131 +160,320 @@ class TaskCache():
         finally:
             self._lock.release()
     def tryGet(self, key: Hashable) -> Any:
-        if not self._lock.acquire(blocking=True, timeout=10): raise Exception('TaskCache.tryGet failed to acquire lock within timeout.')
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('TaskCache.tryGet' + ERR_LOCK_FAILED)
         try:
             ttl, value = self._base.get(key, (None, None))
             if ttl is not None and self._is_expired(ttl):
                 print(f'Session {key} expired. Discarding data.')
-                self.delete(key)
+                del self._base[key]
                 return None
             return value
         finally:
             self._lock.release()
 
+manager_lock = threading.RLock()
+render_threads = []
 current_state = ServerStates.Init
 current_state_error:Exception = None
 current_model_path = None
-tasks_queue = queue.Queue()
+current_vae_path = None
+tasks_queue = []
 task_cache = TaskCache()
 default_model_to_load = None
+default_vae_to_load = None
+weak_thread_data = weakref.WeakKeyDictionary()
 
-def preload_model(file_path=None):
-    global current_state, current_state_error, current_model_path
-    if file_path == None:
-        file_path = default_model_to_load
-    if file_path == current_model_path:
+def preload_model(ckpt_file_path=None, vae_file_path=None):
+    global current_state, current_state_error, current_model_path, current_vae_path
+    if ckpt_file_path == None:
+        ckpt_file_path = default_model_to_load
+    if vae_file_path == None:
+        vae_file_path = default_vae_to_load
+    if ckpt_file_path == current_model_path and vae_file_path == current_vae_path:
         return
     current_state = ServerStates.LoadingModel
     try:
         from . import runtime
-        runtime.load_model_ckpt(ckpt_to_use=file_path)
-        current_model_path = file_path
+        runtime.thread_data.ckpt_file = ckpt_file_path
+        runtime.thread_data.vae_file = vae_file_path
+        runtime.load_model_ckpt()
+        current_model_path = ckpt_file_path
+        current_vae_path = vae_file_path
         current_state_error = None
         current_state = ServerStates.Online
     except Exception as e:
         current_model_path = None
+        current_vae_path = None
         current_state_error = e
         current_state = ServerStates.Unavailable
         print(traceback.format_exc())
 
-def thread_render():
-    global current_state, current_state_error, current_model_path
+def thread_get_next_task():
     from . import runtime
-    current_state = ServerStates.Online
-    preload_model()
+    if not manager_lock.acquire(blocking=True, timeout=LOCK_TIMEOUT):
+        print('Render thread on device', runtime.thread_data.device, 'failed to acquire manager lock.')
+        return None
+    if len(tasks_queue) <= 0:
+        manager_lock.release()
+        return None
+    task = None
+    try:  # Select a render task.
+        for queued_task in tasks_queue:
+            if queued_task.render_device and runtime.thread_data.device != queued_task.render_device:
+                # Is asking for a specific render device.
+                if is_alive(queued_task.render_device) > 0:
+                    continue  # requested device alive, skip current one.
+                else:
+                    # Requested device is not active, return error to UI.
+                    queued_task.error = Exception(queued_task.render_device + ' is not currently active.')
+                    task = queued_task
+                    break
+            if not queued_task.render_device and runtime.thread_data.device == 'cpu' and is_alive() > 1:
+                # not asking for any specific devices, cpu want to grab task but other render devices are alive.
+                continue  # Skip Tasks, don't run on CPU unless there is nothing else or user asked for it.
+            task = queued_task
+            break
+        if task is not None:
+            del tasks_queue[tasks_queue.index(task)]
+        return task
+    finally:
+        manager_lock.release()
+
+def thread_render(device):
+    global current_state, current_state_error, current_model_path, current_vae_path
+    from . import runtime
+    try:
+        runtime.thread_init(device)
+    except Exception as e:
+        print(traceback.format_exc())
+        weak_thread_data[threading.current_thread()] = {
+            'error': e
+        }
+        return
+    weak_thread_data[threading.current_thread()] = {
+        'device': runtime.thread_data.device,
+        'device_name': runtime.thread_data.device_name,
+        'alive': True
+    }
+    if runtime.thread_data.device != 'cpu' or is_alive() == 1:
+        preload_model()
+        current_state = ServerStates.Online
     while True:
         task_cache.clean()
+        if not weak_thread_data[threading.current_thread()]['alive']:
+            print(f'Shutting down thread for device {runtime.thread_data.device}')
+            runtime.unload_models()
+            runtime.unload_filters()
+            return
         if isinstance(current_state_error, SystemExit):
             current_state = ServerStates.Unavailable
             return
-        task = None
-        try:
-            task = tasks_queue.get(timeout=1)
-        except queue.Empty as e:
-            if isinstance(current_state_error, SystemExit):
-                current_state = ServerStates.Unavailable
-                return
-            else: continue
-        #if current_model_path != task.request.use_stable_diffusion_model:
-        #    preload_model(task.request.use_stable_diffusion_model)
+        task = thread_get_next_task()
+        if task is None:
+            time.sleep(0.05)
+            continue
+        if task.error is not None:
+            print(task.error)
+            task.response = {"status": 'failed', "detail": str(task.error)}
+            task.buffer_queue.put(json.dumps(task.response))
+            continue
         if current_state_error:
             task.error = current_state_error
+            task.response = {"status": 'failed', "detail": str(task.error)}
+            task.buffer_queue.put(json.dumps(task.response))
             continue
-        print(f'Session {task.request.session_id} starting task {id(task)}')
+        print(f'Session {task.request.session_id} starting task {id(task)} on {runtime.thread_data.device_name}')
+        if not task.lock.acquire(blocking=False): raise Exception('Got locked task from queue.')
         try:
-            task.lock.acquire(blocking=False)
-            res = runtime.mk_img(task.request)
-            if current_model_path == task.request.use_stable_diffusion_model:
-                current_state = ServerStates.Rendering
-            else:
+            if runtime.is_model_reload_necessary(task.request):
                 current_state = ServerStates.LoadingModel
+                runtime.reload_model()
+                current_model_path = task.request.use_stable_diffusion_model
+                current_vae_path = task.request.use_vae_model
+
+            def step_callback():
+                global current_state_error
+
+                if isinstance(current_state_error, SystemExit) or isinstance(current_state_error, StopAsyncIteration) or isinstance(task.error, StopAsyncIteration):
+                    runtime.thread_data.stop_processing = True
+                    if isinstance(current_state_error, StopAsyncIteration):
+                        task.error = current_state_error
+                        current_state_error = None
+                        print(f'Session {task.request.session_id} sent cancel signal for task {id(task)}')
+
+                    task_cache.keep(task.request.session_id, TASK_TTL)
+
+            current_state = ServerStates.Rendering
+            task.response = runtime.mk_img(task.request, task.buffer_queue, task.temp_images, step_callback)
         except Exception as e:
             task.error = e
-            task.lock.release()
-            tasks_queue.task_done()
             print(traceback.format_exc())
             continue
-        dataQueue = None
-        if task.request.stream_progress_updates:
-            dataQueue = task.buffer_queue
-        for result in res:
-            if current_state == ServerStates.LoadingModel:
-                current_state = ServerStates.Rendering
-                current_model_path = task.request.use_stable_diffusion_model
-            if isinstance(current_state_error, SystemExit) or isinstance(current_state_error, StopAsyncIteration) or isinstance(task.error, StopAsyncIteration):
-                runtime.stop_processing = True
-                if isinstance(current_state_error, StopAsyncIteration):
-                    task.error = current_state_error
-                    current_state_error = None
-                    print(f'Session {task.request.session_id} sent cancel signal for task {id(task)}')
-            if dataQueue:
-                dataQueue.put(result)
-            if isinstance(result, str):
-                result = json.loads(result)
-            task.response = result
-            if 'output' in result:
-                for out_obj in result['output']:
-                    if 'path' in out_obj:
-                        img_id = out_obj['path'][out_obj['path'].rindex('/') + 1:]
-                        task.temp_images[int(img_id)] = runtime.temp_images[out_obj['path'][11:]]
-                    elif 'data' in out_obj:
-                        task.temp_images[result['output'].index(out_obj)] = out_obj['data']
-            task_cache.keep(task.request.session_id, TASK_TTL)
-        # Task completed
-        task.lock.release()
-        tasks_queue.task_done()
+        finally:
+            # Task completed
+            task.lock.release()
         task_cache.keep(task.request.session_id, TASK_TTL)
         if isinstance(task.error, StopAsyncIteration):
             print(f'Session {task.request.session_id} task {id(task)} cancelled!')
         elif task.error is not None:
             print(f'Session {task.request.session_id} task {id(task)} failed!')
         else:
-            print(f'Session {task.request.session_id} task {id(task)} completed.')
+            print(f'Session {task.request.session_id} task {id(task)} completed by {runtime.thread_data.device_name}.')
         current_state = ServerStates.Online
 
-render_thread = threading.Thread(target=thread_render)
+def get_cached_task(session_id:str, update_ttl:bool=False):
+    # By calling keep before tryGet, wont discard if was expired.
+    if update_ttl and not task_cache.keep(session_id, TASK_TTL):
+        # Failed to keep task, already gone.
+        return None
+    return task_cache.tryGet(session_id)
 
-def start_render_thread():
-    # Start Rendering Thread
-    render_thread.daemon = True
-    render_thread.start()
+def get_devices():
+    devices = {
+        'all': {},
+        'active': {},
+    }
+
+    def get_device_info(device):
+        if device == 'cpu':
+            return {'name': device_manager.get_processor_name()}
+            
+        mem_free, mem_total = torch.cuda.mem_get_info(device)
+        mem_free /= float(10**9)
+        mem_total /= float(10**9)
+
+        return {
+            'name': torch.cuda.get_device_name(device),
+            'mem_free': mem_free,
+            'mem_total': mem_total,
+        }
+
+    # list the compatible devices
+    gpu_count = torch.cuda.device_count()
+    for device in range(gpu_count):
+        device = f'cuda:{device}'
+        if not device_manager.is_device_compatible(device):
+            continue
+
+        devices['all'].update({device: get_device_info(device)})
+
+    devices['all'].update({'cpu': get_device_info('cpu')})
+
+    # list the activated devices
+    if not manager_lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('get_devices' + ERR_LOCK_FAILED)
+    try:
+        for rthread in render_threads:
+            if not rthread.is_alive():
+                continue
+            weak_data = weak_thread_data.get(rthread)
+            if not weak_data or not 'device' in weak_data or not 'device_name' in weak_data:
+                continue
+            device = weak_data['device']
+            devices['active'].update({device: get_device_info(device)})
+    finally:
+        manager_lock.release()
+
+    return devices
+
+def is_alive(device=None):
+    if not manager_lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('is_alive' + ERR_LOCK_FAILED)
+    nbr_alive = 0
+    try:
+        for rthread in render_threads:
+            if device is not None:
+                weak_data = weak_thread_data.get(rthread)
+                if weak_data is None or not 'device' in weak_data or weak_data['device'] is None:
+                    continue
+                thread_device = weak_data['device']
+                if thread_device != device:
+                    continue
+            if rthread.is_alive():
+                nbr_alive += 1
+        return nbr_alive
+    finally:
+        manager_lock.release()
+
+def start_render_thread(device):
+    if not manager_lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('start_render_thread' + ERR_LOCK_FAILED)
+    print('Start new Rendering Thread on device', device)
+    try:
+        rthread = threading.Thread(target=thread_render, kwargs={'device': device})
+        rthread.daemon = True
+        rthread.name = THREAD_NAME_PREFIX + device
+        rthread.start()
+        render_threads.append(rthread)
+    finally:
+        manager_lock.release()
+    timeout = DEVICE_START_TIMEOUT
+    while not rthread.is_alive() or not rthread in weak_thread_data or not 'device' in weak_thread_data[rthread]:
+        if rthread in weak_thread_data and 'error' in weak_thread_data[rthread]:
+            print(rthread, device, 'error:', weak_thread_data[rthread]['error'])
+            return False
+        if timeout <= 0:
+            return False
+        timeout -= 1
+        time.sleep(1)
+    return True
+
+def stop_render_thread(device):
+    try:
+        device_manager.validate_device_id(device, log_prefix='stop_render_thread')
+    except:
+        print(traceback.format_exc())
+        return False
+
+    if not manager_lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('stop_render_thread' + ERR_LOCK_FAILED)
+    print('Stopping Rendering Thread on device', device)
+
+    try:
+        thread_to_remove = None
+        for rthread in render_threads:
+            weak_data = weak_thread_data.get(rthread)
+            if weak_data is None or not 'device' in weak_data or weak_data['device'] is None:
+                continue
+            thread_device = weak_data['device']
+            if thread_device == device:
+                weak_data['alive'] = False
+                thread_to_remove = rthread
+                break
+        if thread_to_remove is not None:
+            render_threads.remove(rthread)
+            return True
+    finally:
+        manager_lock.release()
+
+    return False
+
+def update_render_threads(render_devices, active_devices):
+    devices_to_start, devices_to_stop = device_manager.get_device_delta(render_devices, active_devices)
+    print('devices_to_start', devices_to_start)
+    print('devices_to_stop', devices_to_stop)
+
+    for device in devices_to_stop:
+        if is_alive(device) <= 0:
+            print(device, 'is not alive')
+            continue
+        if not stop_render_thread(device):
+            print(device, 'could not stop render thread')
+
+    for device in devices_to_start:
+        if is_alive(device) >= 1:
+            print(device, 'already registered.')
+            continue
+        if not start_render_thread(device):
+            print(device, 'failed to start.')
+
+    if is_alive() <= 0: # No running devices, probably invalid user config.
+        raise EnvironmentError('ERROR: No active render devices! Please verify the "render_devices" value in config.json')
+
+    print('active devices', get_devices()['active'])
 
 def shutdown_event(): # Signal render thread to close on shutdown
     global current_state_error
     current_state_error = SystemExit('Application shutting down.')
 
 def render(req : ImageRequest):
-    if not render_thread.is_alive(): # Render thread is dead
+    if is_alive() <= 0: # Render thread is dead
         raise ChildProcessError('Rendering thread has died.')
     # Alive, check if task in cache
     task = task_cache.tryGet(req.session_id)
@@ -277,14 +498,15 @@ def render(req : ImageRequest):
     r.sampler = req.sampler
     # r.allow_nsfw = req.allow_nsfw
     r.turbo = req.turbo
-    r.use_cpu = req.use_cpu
     r.use_full_precision = req.use_full_precision
     r.save_to_disk_path = req.save_to_disk_path
     r.use_upscale: str = req.use_upscale
     r.use_face_correction = req.use_face_correction
     r.use_stable_diffusion_model = req.use_stable_diffusion_model
+    r.use_vae_model = req.use_vae_model
     r.show_only_filtered_image = req.show_only_filtered_image
     r.output_format = req.output_format
+    r.output_quality = req.output_quality
 
     r.stream_progress_updates = True # the underlying implementation only supports streaming
     r.stream_image_progress = req.stream_image_progress
@@ -293,7 +515,14 @@ def render(req : ImageRequest):
         r.stream_image_progress = False
 
     new_task = RenderTask(r)
+
     if task_cache.put(r.session_id, new_task, TASK_TTL):
-        tasks_queue.put(new_task, block=True, timeout=30)
-        return new_task
+        # Use twice the normal timeout for adding user requests.
+        # Tries to force task_cache.put to fail before tasks_queue.put would. 
+        if manager_lock.acquire(blocking=True, timeout=LOCK_TIMEOUT * 2):
+            try:
+                tasks_queue.append(new_task)
+                return new_task
+            finally:
+                manager_lock.release()
     raise RuntimeError('Failed to add task to cache.')

ui/server.py

@@ -1,8 +1,15 @@
+"""server.py: FastAPI SD-UI Web Host.
+Notes:
+    async endpoints always run on the main thread. Without they run on the thread pool.
+"""
 import json
 import traceback
 
 import sys
 import os
+import socket
+import picklescan.scanner
+import rich
 
 SD_DIR = os.getcwd()
 print('started in ', SD_DIR)
@@ -12,18 +19,37 @@ sys.path.append(os.path.dirname(SD_UI_DIR))
 
 CONFIG_DIR = os.path.abspath(os.path.join(SD_UI_DIR, '..', 'scripts'))
 MODELS_DIR = os.path.abspath(os.path.join(SD_DIR, '..', 'models'))
-UI_PLUGINS_DIR = os.path.abspath(os.path.join(SD_DIR, '..', 'plugins', 'ui'))
+
+USER_UI_PLUGINS_DIR = os.path.abspath(os.path.join(SD_DIR, '..', 'plugins', 'ui'))
+CORE_UI_PLUGINS_DIR = os.path.abspath(os.path.join(SD_UI_DIR, 'plugins', 'ui'))
+UI_PLUGINS_SOURCES = ((CORE_UI_PLUGINS_DIR, 'core'), (USER_UI_PLUGINS_DIR, 'user'))
+
+STABLE_DIFFUSION_MODEL_EXTENSIONS = ['.ckpt', '.safetensors']
+VAE_MODEL_EXTENSIONS = ['.vae.pt', '.ckpt']
 
 OUTPUT_DIRNAME = "Stable Diffusion UI" # in the user's home folder
 TASK_TTL = 15 * 60 # Discard last session's task timeout
+APP_CONFIG_DEFAULTS = {
+    # auto: selects the cuda device with the most free memory, cuda: use the currently active cuda device.
+    'render_devices': 'auto', # valid entries: 'auto', 'cpu' or 'cuda:N' (where N is a GPU index)
+    'update_branch': 'main',
+    'ui': {
+        'open_browser_on_start': True,
+    },
+}
+APP_CONFIG_DEFAULT_MODELS = [
+    # needed to support the legacy installations
+    'custom-model', # Check if user has a custom model, use it first.
+    'sd-v1-4', # Default fallback.
+]
 
 from fastapi import FastAPI, HTTPException
 from fastapi.staticfiles import StaticFiles
 from starlette.responses import FileResponse, JSONResponse, StreamingResponse
 from pydantic import BaseModel
 import logging
-import queue, threading, time
-from typing import Any, Generator, Hashable, Optional, Union
+#import queue, threading, time
+from typing import Any, Generator, Hashable, List, Optional, Union
 
 from sd_internal import Request, Response, task_manager
 
@@ -32,66 +58,294 @@ app = FastAPI()
 modifiers_cache = None
 outpath = os.path.join(os.path.expanduser("~"), OUTPUT_DIRNAME)
 
-os.makedirs(UI_PLUGINS_DIR, exist_ok=True)
+os.makedirs(USER_UI_PLUGINS_DIR, exist_ok=True)
 
 # don't show access log entries for URLs that start with the given prefix
 ACCESS_LOG_SUPPRESS_PATH_PREFIXES = ['/ping', '/image', '/modifier-thumbnails']
 
 NOCACHE_HEADERS={"Cache-Control": "no-cache, no-store, must-revalidate", "Pragma": "no-cache", "Expires": "0"}
 
-app.mount('/media', StaticFiles(directory=os.path.join(SD_UI_DIR, 'media')), name="media")
-app.mount('/plugins', StaticFiles(directory=UI_PLUGINS_DIR), name="plugins")
+class NoCacheStaticFiles(StaticFiles):
+    def is_not_modified(self, response_headers, request_headers) -> bool:
+        if 'content-type' in response_headers and ('javascript' in response_headers['content-type'] or 'css' in response_headers['content-type']):
+            response_headers.update(NOCACHE_HEADERS)
+            return False
+
+        return super().is_not_modified(response_headers, request_headers)
+
+app.mount('/media', NoCacheStaticFiles(directory=os.path.join(SD_UI_DIR, 'media')), name="media")
+
+for plugins_dir, dir_prefix in UI_PLUGINS_SOURCES:
+    app.mount(f'/plugins/{dir_prefix}', NoCacheStaticFiles(directory=plugins_dir), name=f"plugins-{dir_prefix}")
+
+def getConfig(default_val=APP_CONFIG_DEFAULTS):
+    try:
+        config_json_path = os.path.join(CONFIG_DIR, 'config.json')
+        if not os.path.exists(config_json_path):
+            return default_val
+        with open(config_json_path, 'r', encoding='utf-8') as f:
+            config = json.load(f)
+            if 'net' not in config:
+                config['net'] = {}
+            if os.getenv('SD_UI_BIND_PORT') is not None:
+                config['net']['listen_port'] = int(os.getenv('SD_UI_BIND_PORT'))
+            if os.getenv('SD_UI_BIND_IP') is not None:
+                config['net']['listen_to_network'] = ( os.getenv('SD_UI_BIND_IP') == '0.0.0.0' )
+            return config
+    except Exception as e:
+        print(str(e))
+        print(traceback.format_exc())
+        return default_val
+
+def setConfig(config):
+    print( json.dumps(config) )
+    try: # config.json
+        config_json_path = os.path.join(CONFIG_DIR, 'config.json')
+        with open(config_json_path, 'w', encoding='utf-8') as f:
+            json.dump(config, f)
+    except:
+        print(traceback.format_exc())
+
+    try: # config.bat
+        config_bat_path = os.path.join(CONFIG_DIR, 'config.bat')
+        config_bat = []
+
+        if 'update_branch' in config:
+            config_bat.append(f"@set update_branch={config['update_branch']}")
+
+        config_bat.append(f"@set SD_UI_BIND_PORT={config['net']['listen_port']}")
+        bind_ip = '0.0.0.0' if config['net']['listen_to_network'] else '127.0.0.1'
+        config_bat.append(f"@set SD_UI_BIND_IP={bind_ip}")
+
+        config_bat.append(f"@set test_sd2={'Y' if config.get('test_sd2', False) else 'N'}")
+
+        if len(config_bat) > 0:
+            with open(config_bat_path, 'w', encoding='utf-8') as f:
+                f.write('\r\n'.join(config_bat))
+    except:
+        print(traceback.format_exc())
+
+    try: # config.sh
+        config_sh_path = os.path.join(CONFIG_DIR, 'config.sh')
+        config_sh = ['#!/bin/bash']
+
+        if 'update_branch' in config:
+            config_sh.append(f"export update_branch={config['update_branch']}")
+
+        config_sh.append(f"export SD_UI_BIND_PORT={config['net']['listen_port']}")
+        bind_ip = '0.0.0.0' if config['net']['listen_to_network'] else '127.0.0.1'
+        config_sh.append(f"export SD_UI_BIND_IP={bind_ip}")
+
+        config_sh.append(f"export test_sd2=\"{'Y' if config.get('test_sd2', False) else 'N'}\"")
+
+        if len(config_sh) > 1:
+            with open(config_sh_path, 'w', encoding='utf-8') as f:
+                f.write('\n'.join(config_sh))
+    except:
+        print(traceback.format_exc())
+
+def resolve_model_to_use(model_name:str, model_type:str, model_dir:str, model_extensions:list, default_models=[]):
+    config = getConfig()
+
+    model_dirs = [os.path.join(MODELS_DIR, model_dir), SD_DIR]
+    if not model_name: # When None try user configured model.
+        # config = getConfig()
+        if 'model' in config and model_type in config['model']:
+            model_name = config['model'][model_type]
+    if model_name:
+        is_sd2 = config.get('test_sd2', False)
+        if model_name.startswith('sd2_') and not is_sd2: # temp hack, until SD2 is unified with 1.4
+            print('ERROR: Cannot use SD 2.0 models with SD 1.0 code. Using the sd-v1-4 model instead!')
+            model_name = 'sd-v1-4'
+
+        # Check models directory
+        models_dir_path = os.path.join(MODELS_DIR, model_dir, model_name)
+        for model_extension in model_extensions:
+            if os.path.exists(models_dir_path + model_extension):
+                return models_dir_path
+            if os.path.exists(model_name + model_extension):
+                # Direct Path to file
+                model_name = os.path.abspath(model_name)
+                return model_name
+    # Default locations
+    if model_name in default_models:
+        default_model_path = os.path.join(SD_DIR, model_name)
+        for model_extension in model_extensions:
+            if os.path.exists(default_model_path + model_extension):
+                return default_model_path
+    # Can't find requested model, check the default paths.
+    for default_model in default_models:
+        for model_dir in model_dirs:
+            default_model_path = os.path.join(model_dir, default_model)
+            for model_extension in model_extensions:
+                if os.path.exists(default_model_path + model_extension):
+                    if model_name is not None:
+                        print(f'Could not find the configured custom model {model_name}{model_extension}. Using the default one: {default_model_path}{model_extension}')
+                    return default_model_path
+    raise Exception('No valid models found.')
+
+def resolve_ckpt_to_use(model_name:str=None):
+    return resolve_model_to_use(model_name, model_type='stable-diffusion', model_dir='stable-diffusion', model_extensions=STABLE_DIFFUSION_MODEL_EXTENSIONS, default_models=APP_CONFIG_DEFAULT_MODELS)
+
+def resolve_vae_to_use(model_name:str=None):
+    try:
+        return resolve_model_to_use(model_name, model_type='vae', model_dir='vae', model_extensions=VAE_MODEL_EXTENSIONS, default_models=[])
+    except:
+        return None
 
 class SetAppConfigRequest(BaseModel):
-    update_branch: str = "main"
-
-# needs to support the legacy installations
-def get_initial_model_to_load():
-    custom_weight_path = os.path.join(SD_DIR, 'custom-model.ckpt')
-    ckpt_to_use = "sd-v1-4" if not os.path.exists(custom_weight_path) else "custom-model"
-
-    ckpt_to_use = os.path.join(SD_DIR, ckpt_to_use)
+    update_branch: str = None
+    render_devices: Union[List[str], List[int], str, int] = None
+    model_vae: str = None
+    ui_open_browser_on_start: bool = None
+    listen_to_network: bool = None
+    listen_port: int = None
+    test_sd2: bool = None
 
+@app.post('/app_config')
+async def setAppConfig(req : SetAppConfigRequest):
     config = getConfig()
-    if 'model' in config and 'stable-diffusion' in config['model']:
-        model_name = config['model']['stable-diffusion']
-        model_path = resolve_model_to_use(model_name)
+    if req.update_branch is not None:
+        config['update_branch'] = req.update_branch
+    if req.render_devices is not None:
+        update_render_devices_in_config(config, req.render_devices)
+    if req.ui_open_browser_on_start is not None:
+        if 'ui' not in config:
+            config['ui'] = {}
+        config['ui']['open_browser_on_start'] = req.ui_open_browser_on_start
+    if req.listen_to_network is not None:
+       if 'net' not in config:
+           config['net'] = {}
+       config['net']['listen_to_network'] = bool(req.listen_to_network)
+    if req.listen_port is not None:
+       if 'net' not in config:
+           config['net'] = {}
+       config['net']['listen_port'] = int(req.listen_port)
+    if req.test_sd2 is not None:
+        config['test_sd2'] = req.test_sd2
+    try:
+        setConfig(config)
 
-        if os.path.exists(model_path + '.ckpt'):
-            ckpt_to_use = model_path
+        if req.render_devices:
+            update_render_threads()
+
+        return JSONResponse({'status': 'OK'}, headers=NOCACHE_HEADERS)
+    except Exception as e:
+        print(traceback.format_exc())
+        raise HTTPException(status_code=500, detail=str(e))
+
+def is_malicious_model(file_path):
+    try:
+        scan_result = picklescan.scanner.scan_file_path(file_path)
+        if scan_result.issues_count > 0 or scan_result.infected_files > 0:
+            rich.print(":warning: [bold red]Scan %s: %d scanned, %d issue, %d infected.[/bold red]" % (file_path, scan_result.scanned_files, scan_result.issues_count, scan_result.infected_files))
+            return True
         else:
-            print('Could not find the configured custom model at:', model_path + '.ckpt', '. Using the default one:', ckpt_to_use + '.ckpt')
-    return ckpt_to_use
+            rich.print("Scan %s: [green]%d scanned, %d issue, %d infected.[/green]" % (file_path, scan_result.scanned_files, scan_result.issues_count, scan_result.infected_files))
+            return False
+    except Exception as e:
+        print('error while scanning', file_path, 'error:', e)
+    return False
 
-def resolve_model_to_use(model_name):
-    if model_name in ('sd-v1-4', 'custom-model'):
-        model_path = os.path.join(MODELS_DIR, 'stable-diffusion', model_name)
+known_models = {}
+def getModels():
+    models = {
+        'active': {
+            'stable-diffusion': 'sd-v1-4',
+            'vae': '',
+        },
+        'options': {
+            'stable-diffusion': ['sd-v1-4'],
+            'vae': [],
+        },
+    }
 
-        legacy_model_path = os.path.join(SD_DIR, model_name)
-        if not os.path.exists(model_path + '.ckpt') and os.path.exists(legacy_model_path + '.ckpt'):
-            model_path = legacy_model_path
+    def listModels(models_dirname, model_type, model_extensions):
+        models_dir = os.path.join(MODELS_DIR, models_dirname)
+        if not os.path.exists(models_dir):
+            os.makedirs(models_dir)
+
+        for file in os.listdir(models_dir):
+            for model_extension in model_extensions:
+                if not file.endswith(model_extension):
+                    continue
+
+                model_path = os.path.join(models_dir, file)
+                mtime = os.path.getmtime(model_path)
+                mod_time = known_models[model_path] if model_path in known_models else -1
+                if mod_time != mtime:
+                    if is_malicious_model(model_path):
+                        models['scan-error'] = file
+                        return
+                known_models[model_path] = mtime
+
+                model_name = file[:-len(model_extension)]
+                models['options'][model_type].append(model_name)
+
+        models['options'][model_type] = [*set(models['options'][model_type])] # remove duplicates
+        models['options'][model_type].sort()
+
+    # custom models
+    listModels(models_dirname='stable-diffusion', model_type='stable-diffusion', model_extensions=STABLE_DIFFUSION_MODEL_EXTENSIONS)
+    listModels(models_dirname='vae', model_type='vae', model_extensions=VAE_MODEL_EXTENSIONS)
+
+    # legacy
+    custom_weight_path = os.path.join(SD_DIR, 'custom-model.ckpt')
+    if os.path.exists(custom_weight_path):
+        models['options']['stable-diffusion'].append('custom-model')
+
+    return models
+
+def getUIPlugins():
+    plugins = []
+
+    for plugins_dir, dir_prefix in UI_PLUGINS_SOURCES:
+        for file in os.listdir(plugins_dir):
+            if file.endswith('.plugin.js'):
+                plugins.append(f'/plugins/{dir_prefix}/{file}')
+
+    return plugins
+
+def getIPConfig():
+    ips = socket.gethostbyname_ex(socket.gethostname())
+    ips[2].append(ips[0])
+    return ips[2]
+
+@app.get('/get/{key:path}')
+def read_web_data(key:str=None):
+    if not key: # /get without parameters, stable-diffusion easter egg.
+        raise HTTPException(status_code=418, detail="StableDiffusion is drawing a teapot!") # HTTP418 I'm a teapot
+    elif key == 'app_config':
+        config = getConfig(default_val=None)
+        if config is None:
+            config = APP_CONFIG_DEFAULTS
+        return JSONResponse(config, headers=NOCACHE_HEADERS)
+    elif key == 'system_info':
+        config = getConfig()
+        system_info = {
+            'devices': task_manager.get_devices(),
+            'hosts': getIPConfig(),
+        }
+        system_info['devices']['config'] = config.get('render_devices', "auto")
+        return JSONResponse(system_info, headers=NOCACHE_HEADERS)
+    elif key == 'models':
+        return JSONResponse(getModels(), headers=NOCACHE_HEADERS)
+    elif key == 'modifiers': return FileResponse(os.path.join(SD_UI_DIR, 'modifiers.json'), headers=NOCACHE_HEADERS)
+    elif key == 'output_dir': return JSONResponse({ 'output_dir': outpath }, headers=NOCACHE_HEADERS)
+    elif key == 'ui_plugins': return JSONResponse(getUIPlugins(), headers=NOCACHE_HEADERS)
     else:
-        model_path = os.path.join(MODELS_DIR, 'stable-diffusion', model_name)
-    return model_path
-
-@app.on_event("shutdown")
-def shutdown_event(): # Signal render thread to close on shutdown
-    task_manager.current_state_error = SystemExit('Application shutting down.')
-
-@app.get('/')
-def read_root():
-    return FileResponse(os.path.join(SD_UI_DIR, 'index.html'), headers=NOCACHE_HEADERS)
+        raise HTTPException(status_code=404, detail=f'Request for unknown {key}') # HTTP404 Not Found
 
 @app.get('/ping') # Get server and optionally session status.
 def ping(session_id:str=None):
-    if not task_manager.render_thread.is_alive(): # Render thread is dead.
+    if task_manager.is_alive() <= 0: # Check that render threads are alive.
         if task_manager.current_state_error: raise HTTPException(status_code=500, detail=str(task_manager.current_state_error))
         raise HTTPException(status_code=500, detail='Render thread is dead.')
     if task_manager.current_state_error and not isinstance(task_manager.current_state_error, StopAsyncIteration): raise HTTPException(status_code=500, detail=str(task_manager.current_state_error))
     # Alive
     response = {'status': str(task_manager.current_state)}
     if session_id:
-        task = task_manager.task_cache.tryGet(session_id)
+        task = task_manager.get_cached_task(session_id, update_ttl=True)
         if task:
             response['task'] = id(task)
             if task.lock.locked():
@@ -106,25 +360,41 @@ def ping(session_id:str=None):
                 response['session'] = 'completed'
             else:
                 response['session'] = 'pending'
+    response['devices'] = task_manager.get_devices()
     return JSONResponse(response, headers=NOCACHE_HEADERS)
 
-def save_model_to_config(model_name):
+def save_model_to_config(ckpt_model_name, vae_model_name):
     config = getConfig()
     if 'model' not in config:
         config['model'] = {}
 
-    config['model']['stable-diffusion'] = model_name
+    config['model']['stable-diffusion'] = ckpt_model_name
+    config['model']['vae'] = vae_model_name
+
+    if vae_model_name is None or vae_model_name == "":
+        del config['model']['vae']
+
     setConfig(config)
 
+def update_render_devices_in_config(config, render_devices):
+    if render_devices not in ('cpu', 'auto') and not render_devices.startswith('cuda:'):
+        raise HTTPException(status_code=400, detail=f'Invalid render device requested: {render_devices}')
+
+    if render_devices.startswith('cuda:'):
+        render_devices = render_devices.split(',')
+
+    config['render_devices'] = render_devices
+
 @app.post('/render')
 def render(req : task_manager.ImageRequest):
     try:
-        save_model_to_config(req.use_stable_diffusion_model)
-        req.use_stable_diffusion_model = resolve_model_to_use(req.use_stable_diffusion_model)
+        save_model_to_config(req.use_stable_diffusion_model, req.use_vae_model)
+        req.use_stable_diffusion_model = resolve_ckpt_to_use(req.use_stable_diffusion_model)
+        req.use_vae_model = resolve_vae_to_use(req.use_vae_model)
         new_task = task_manager.render(req)
         response = {
             'status': str(task_manager.current_state), 
-            'queue': task_manager.tasks_queue.qsize(),
+            'queue': len(task_manager.tasks_queue),
             'stream': f'/image/stream/{req.session_id}/{id(new_task)}',
             'task': id(new_task)
         }
@@ -139,7 +409,7 @@ def render(req : task_manager.ImageRequest):
 @app.get('/image/stream/{session_id:str}/{task_id:int}')
 def stream(session_id:str, task_id:int):
     #TODO Move to WebSockets ??
-    task = task_manager.task_cache.tryGet(session_id)
+    task = task_manager.get_cached_task(session_id, update_ttl=True)
     if not task: raise HTTPException(status_code=410, detail='No request received.') # HTTP410 Gone
     if (id(task) != task_id): raise HTTPException(status_code=409, detail=f'Wrong task id received. Expected:{id(task)}, Received:{task_id}') # HTTP409 Conflict
     if task.buffer_queue.empty() and not task.lock.locked():
@@ -157,7 +427,7 @@ def stop(session_id:str=None):
             raise HTTPException(status_code=409, detail='Not currently running any tasks.') # HTTP409 Conflict
         task_manager.current_state_error = StopAsyncIteration('')
         return {'OK'}
-    task = task_manager.task_cache.tryGet(session_id)
+    task = task_manager.get_cached_task(session_id, update_ttl=False)
     if not task: raise HTTPException(status_code=404, detail=f'Session {session_id} has no active task.') # HTTP404 Not Found
     if isinstance(task.error, StopAsyncIteration): raise HTTPException(status_code=409, detail=f'Session {session_id} task is already stopped.') # HTTP409 Conflict
     task.error = StopAsyncIteration('')
@@ -165,122 +435,23 @@ def stop(session_id:str=None):
 
 @app.get('/image/tmp/{session_id}/{img_id:int}')
 def get_image(session_id, img_id):
-    task = task_manager.task_cache.tryGet(session_id)
+    task = task_manager.get_cached_task(session_id, update_ttl=True)
     if not task: raise HTTPException(status_code=410, detail=f'Session {session_id} has not submitted a task.') # HTTP410 Gone
     if not task.temp_images[img_id]: raise HTTPException(status_code=425, detail='Too Early, task data is not available yet.') # HTTP425 Too Early
     try:
         img_data = task.temp_images[img_id]
-        if isinstance(img_data, str):
-            return img_data
         img_data.seek(0)
         return StreamingResponse(img_data, media_type='image/jpeg')
     except KeyError as e:
         raise HTTPException(status_code=500, detail=str(e))
 
-@app.post('/app_config')
-async def setAppConfig(req : SetAppConfigRequest):
-    try:
-        config = {
-            'update_branch': req.update_branch
-        }
+@app.get('/')
+def read_root():
+    return FileResponse(os.path.join(SD_UI_DIR, 'index.html'), headers=NOCACHE_HEADERS)
 
-        config_json_str = json.dumps(config)
-        config_bat_str = f'@set update_branch={req.update_branch}'
-        config_sh_str = f'export update_branch={req.update_branch}'
-
-        config_json_path = os.path.join(CONFIG_DIR, 'config.json')
-        config_bat_path = os.path.join(CONFIG_DIR, 'config.bat')
-        config_sh_path = os.path.join(CONFIG_DIR, 'config.sh')
-
-        with open(config_json_path, 'w', encoding='utf-8') as f:
-            f.write(config_json_str)
-
-        with open(config_bat_path, 'w', encoding='utf-8') as f:
-            f.write(config_bat_str)
-
-        with open(config_sh_path, 'w', encoding='utf-8') as f:
-            f.write(config_sh_str)
-
-        return {'OK'}
-    except Exception as e:
-        print(traceback.format_exc())
-        raise HTTPException(status_code=500, detail=str(e))
-
-def getConfig(default_val={}):
-    try:
-        config_json_path = os.path.join(CONFIG_DIR, 'config.json')
-        if not os.path.exists(config_json_path):
-            return default_val
-        with open(config_json_path, 'r', encoding='utf-8') as f:
-            return json.load(f)
-    except Exception as e:
-        print(str(e))
-        print(traceback.format_exc())
-        return default_val
-
-def setConfig(config):
-    try:
-        config_json_path = os.path.join(CONFIG_DIR, 'config.json')
-        with open(config_json_path, 'w', encoding='utf-8') as f:
-            return json.dump(config, f)
-    except Exception as e:
-        print(str(e))
-        print(traceback.format_exc())
-
-def getModels():
-    models = {
-        'active': {
-            'stable-diffusion': 'sd-v1-4',
-        },
-        'options': {
-            'stable-diffusion': ['sd-v1-4'],
-        },
-    }
-
-    # custom models
-    sd_models_dir = os.path.join(MODELS_DIR, 'stable-diffusion')
-    for file in os.listdir(sd_models_dir):
-        if file.endswith('.ckpt'):
-            model_name = os.path.splitext(file)[0]
-            models['options']['stable-diffusion'].append(model_name)
-
-    # legacy
-    custom_weight_path = os.path.join(SD_DIR, 'custom-model.ckpt')
-    if os.path.exists(custom_weight_path):
-        models['active']['stable-diffusion'] = 'custom-model'
-        models['options']['stable-diffusion'].append('custom-model')
-
-    config = getConfig()
-    if 'model' in config and 'stable-diffusion' in config['model']:
-        models['active']['stable-diffusion'] = config['model']['stable-diffusion']
-
-    return models
-
-def getUIPlugins():
-    plugins = []
-
-    for file in os.listdir(UI_PLUGINS_DIR):
-        if file.endswith('.plugin.js'):
-            plugins.append(f'/plugins/{file}')
-
-    return plugins
-
-@app.get('/get/{key:path}')
-def read_web_data(key:str=None):
-    if not key: # /get without parameters, stable-diffusion easter egg.
-        raise HTTPException(status_code=418, detail="StableDiffusion is drawing a teapot!") # HTTP418 I'm a teapot
-    elif key == 'app_config':
-        config = getConfig(default_val=None)
-        if config is None:
-            raise HTTPException(status_code=500, detail="Config file is missing or unreadable")
-        return JSONResponse(config, headers=NOCACHE_HEADERS)
-    elif key == 'models':
-        return JSONResponse(getModels(), headers=NOCACHE_HEADERS)
-    elif key == 'modifiers': return FileResponse(os.path.join(SD_UI_DIR, 'modifiers.json'), headers=NOCACHE_HEADERS)
-    elif key == 'output_dir': return JSONResponse({ 'output_dir': outpath }, headers=NOCACHE_HEADERS)
-    elif key == 'ui_plugins': return JSONResponse(getUIPlugins(), headers=NOCACHE_HEADERS)
-    else:
-        raise HTTPException(status_code=404, detail=f'Request for unknown {key}') # HTTP404 Not Found
+@app.on_event("shutdown")
+def shutdown_event(): # Signal render thread to close on shutdown
+    task_manager.current_state_error = SystemExit('Application shutting down.')
 
 # don't log certain requests
 class LogSuppressFilter(logging.Filter):
@@ -292,8 +463,30 @@ class LogSuppressFilter(logging.Filter):
         return True
 logging.getLogger('uvicorn.access').addFilter(LogSuppressFilter())
 
-task_manager.default_model_to_load = get_initial_model_to_load()
-task_manager.start_render_thread()
+# Check models and prepare cache for UI open
+getModels()
+
+# Start the task_manager
+task_manager.default_model_to_load = resolve_ckpt_to_use()
+task_manager.default_vae_to_load = resolve_vae_to_use()
+
+def update_render_threads():
+    config = getConfig()
+    render_devices = config.get('render_devices', 'auto')
+    active_devices = task_manager.get_devices()['active'].keys()
+
+    print('requesting for render_devices', render_devices)
+    task_manager.update_render_threads(render_devices, active_devices)
+
+update_render_threads()
 
 # start the browser ui
-import webbrowser; webbrowser.open('http://localhost:9000')
+def open_browser():
+    config = getConfig()
+    ui = config.get('ui', {})
+    net = config.get('net', {'listen_port':9000})
+    port = net.get('listen_port', 9000)
+    if ui.get('open_browser_on_start', True):
+        import webbrowser; webbrowser.open(f"http://localhost:{port}")
+
+open_browser()