Merge branch 'beta'

Update CHANGES.md

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,65 @@
+# What's new?
+
+## v2.4
+### Major Changes
+- **Allow reordering the task queue** (by dragging and dropping tasks). Thanks @madrang
+- **Automatic scanning for malicious model files** - using `picklescan`, and support for `safetensor` model format. Thanks @JeLuf
+- **Image Editor** - for drawing simple images for guiding the AI. Thanks @mdiller
+- **Use pre-trained hypernetworks** - for improving the quality of images. Thanks @C0bra5
+- **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
+- **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.20 - 22 Dec 2022 - `Pause All` button to pause all the pending tasks. Thanks @JeLuf
+* 2.4.20 - 22 Dec 2022 - `Undo`/`Redo` buttons in the image editor. Thanks @JeLuf
+* 2.4.20 - 22 Dec 2022 - Drag handle to reorder the tasks. This fixed a bug where the metadata was no longer selectable (for copying). Thanks @JeLuf
+* 2.4.19 - 17 Dec 2022 - Add Undo/Redo buttons in the Image Editor. Thanks @JeLuf
+* 2.4.19 - 10 Dec 2022 - Show init img in task list
+* 2.4.19 - 7 Dec 2022 - Use pre-trained hypernetworks while generating images. Thanks @C0bra5
+* 2.4.19 - 6 Dec 2022 - Allow processing new tasks first. Thanks @madrang
+* 2.4.19 - 6 Dec 2022 - Allow reordering the task queue (by dragging tasks). Thanks @madrang
+* 2.4.19 - 6 Dec 2022 - Re-organize the code, to make it easier to write user plugins. Thanks @madrang
+* 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

@@ -6,7 +6,7 @@ Thanks
 
 # For developers:
 
-If you would like to contribute to this project, there is a discord for dicussion:
+If you would like to contribute to this project, there is a discord for discussion:
 [![Discord Server](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.com/invite/u9yhsFmEkB)
 
 ## Development environment for UI (frontend and server) changes
@@ -40,6 +40,7 @@ or for Windows
 `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.
 

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

@@ -1,66 +1,107 @@
 # Stable Diffusion UI
-### Easiest way to install and use [Stable Diffusion](https://github.com/CompVis/stable-diffusion) on your own computer. No dependencies or technical knowledge required. 1-click install, powerful features.
+### The easiest way to install and use [Stable Diffusion](https://github.com/CompVis/stable-diffusion) on your own computer. Does not require technical knowledge, does not require pre-installed software. 1-click install, powerful features, friendly community.
 
-[![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)
+[![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](https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting)
+
+### New: 
+Experimental support for Stable Diffusion 2.0 is available in beta!
 
 ----
 
-## Step 1: Download the installer
+# Step 1: Download and prepare the installer
+Click the download button for your operating system:
 
 <p float="left">
-  <a href="#installation"><img src="https://github.com/cmdr2/stable-diffusion-ui/raw/develop/media/download-win.png" width="200" /></a>
-  <a href="#installation"><img src="https://github.com/cmdr2/stable-diffusion-ui/raw/develop/media/download-linux.png" width="200" /></a>
+  <a href="https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.4.13/stable-diffusion-ui-windows.zip"><img src="https://github.com/cmdr2/stable-diffusion-ui/raw/main/media/download-win.png" width="200" /></a>
+  <a href="https://github.com/cmdr2/stable-diffusion-ui#installation"><img src="https://github.com/cmdr2/stable-diffusion-ui/raw/main/media/download-linux.png" width="200" /></a>
 </p>
 
-## Step 2: Run the program
-- On Windows: Double-click `Start Stable Diffusion UI.cmd`
-- On Linux: Run `./start.sh` in a terminal
+## On Windows:
+1. Unzip/extract the folder `stable-diffusion-ui` which should be in your downloads folder, unless you changed your default downloads destination.
+2. Move the `stable-diffusion-ui` folder to your `C:` drive (or any other drive like `D:`, at the top root level). `C:\stable-diffusion-ui` or `D:\stable-diffusion-ui` as examples. This will avoid a common problem with Windows (file path length limits).
+## On Linux:
+1. Unzip/extract the folder `stable-diffusion-ui` which should be in your downloads folder, unless you changed your default downloads destination.
+2. Open a terminal window, and navigate to the `stable-diffusion-ui` directory.
 
-## Step 3: There is no step 3!
-It's simple to get started. You don't need to install or struggle with Python, Anaconda, Docker etc.
+# Step 2: Run the program
+## On Windows: 
+Double-click `Start Stable Diffusion UI.cmd`.
+If Windows SmartScreen prevents you from running the program click `More info` and then `Run anyway`.
+## On Linux: 
+Run `./start.sh` (or `bash start.sh`) in a terminal.
 
-The installer will take care of whatever is needed. A friendly [Discord community](https://discord.com/invite/u9yhsFmEkB) will help you if you face any problems.
+The installer will take care of whatever is needed. If you face any problems, you can join the friendly [Discord community](https://discord.com/invite/u9yhsFmEkB) and ask for assistance.
+
+# Step 3: There is no Step 3. It's that simple!
+
+**To Uninstall:** Just delete the `stable-diffusion-ui` folder to uninstall all the downloaded packages.
 
 ----
 
 # Easy for new users, powerful features for advanced users
-### Features:
-- **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*"
-- **Custom Models**: Use your own `.ckpt` file, by placing it inside the `models/stable-diffusion` folder!
-- **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
-- **Face Correction (GFPGAN) and Upscaling (RealESRGAN)**
-- **Image Modifiers**: A library of *modifier tags* like *"Realistic"*, *"Pencil Sketch"*, *"ArtStation"* etc. Experiment with various styles quickly.
-- **Loopback**: Use the output image as the input image for the next img2img task
+## Features:
+
+### User experience
+- **Hassle-free installation**: Does not require technical knowledge, does not require pre-installed software. Just download and run!
+- **Clutter-free UI**: A friendly and simple UI, while providing a lot of powerful features.
+
+### Image generation
+- **Supports**: "*Text to Image*" and "*Image to Image*".
+- **In-Painting**: Specify areas of your image to paint into.
+- **Simple Drawing Tool**: Draw basic images to guide the AI, without needing an external drawing program.
+- **Face Correction (GFPGAN)**
+- **Upscaling (RealESRGAN)**
+- **Loopback**: Use the output image as the input image for the next img2img task.
 - **Negative Prompt**: Specify aspects of the image to *remove*.
-- **Attention/Emphasis:** () in the prompt increases the model's attention to enclosed words, and [] decreases it
-- **Weighted Prompts:** Use weights for specific words in your prompt to change their importance, e.g. `red:2.4 dragon:1.2`
-- **Prompt Matrix:** (in beta) Quickly create multiple variations of your prompt, e.g. `a photograph of an astronaut riding a horse | illustration | cinematic lighting`
-- **Lots of Samplers:** ddim, plms, heun, euler, euler_a, dpm2, dpm2_a, lms
-- **Multiple Prompts File:** Queue multiple prompts by entering one prompt per line, or by running a text file
-- **NSFW Setting**: A setting in the UI to control *NSFW content*
-- **JPEG/PNG output**
-- **Save generated images to disk**
+- **Attention/Emphasis**: () in the prompt increases the model's attention to enclosed words, and [] decreases it.
+- **Weighted Prompts**: Use weights for specific words in your prompt to change their importance, e.g. `red:2.4 dragon:1.2`.
+- **Prompt Matrix**: Quickly create multiple variations of your prompt, e.g. `a photograph of an astronaut riding a horse | illustration | cinematic lighting`.
+- **Lots of Samplers**: ddim, plms, heun, euler, euler_a, dpm2, dpm2_a, lms.
+- **1-click Upscale/Face Correction**: Upscale or correct an image after it has been generated.
+- **Make Similar Images**: Click to generate multiple variations of a generated image.
+- **NSFW Setting**: A setting in the UI to control *NSFW content*.
+- **JPEG/PNG output**: Multiple file formats.
+
+### Advanced features
+- **Custom Models**: Use your own `.ckpt` or `.safetensors` file, by placing it inside the `models/stable-diffusion` folder!
+- **Stable Diffusion 2.0 support (experimental)**: available in beta channel.
+- **Use custom VAE models**
+- **Use pre-trained Hypernetworks**
+- **UI Plugins**: Choose from a growing list of [community-generated UI plugins](https://github.com/cmdr2/stable-diffusion-ui/wiki/UI-Plugins), or write your own plugin to add features to the project!
+
+### Performance and security
+- **Low Memory Usage**: Creates 512x512 images with less than 4GB of GPU RAM!
 - **Use CPU setting**: If you don't have a compatible graphics card, but still want to run it on your CPU.
+- **Multi-GPU support**: Automatically spreads your tasks across multiple GPUs (if available), for faster performance!
+- **Auto scan for malicious models**: Uses picklescan to prevent malicious models.
+- **Safetensors support**: Support loading models in the safetensor format, for improved safety.
 - **Auto-updater**: Gets you the latest improvements and bug-fixes to a rapidly evolving project.
-- **Low Memory Usage**: Creates 512x512 images with less than 4GB of VRAM!
 - **Developer Console**: A developer-mode for those who want to modify their Stable Diffusion code, and edit the conda environment.
 
-### Easy for new users:
+### Usability:
+- **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.
+- **Image Modifiers**: A library of *modifier tags* like *"Realistic"*, *"Pencil Sketch"*, *"ArtStation"* etc. Experiment with various styles quickly.
+- **Multiple Prompts File**: Queue multiple prompts by entering one prompt per line, or by running a text file.
+- **Save generated images to disk**: Save your images to your PC!
+- **UI Themes**: Customize the program to your liking.
+
+**(and a lot more)**
+
+----
+
+## Easy for new users:
 ![Screenshot of the initial UI](media/shot-v10-simple.jpg?raw=true)
 
-### Powerful features for advanced users:
+## Powerful features for advanced users:
 ![Screenshot of advanced settings](media/shot-v10.jpg?raw=true)
 
-### Live Preview
+## Live Preview
 Useful for judging (and stopping) an image quickly, without waiting for it to finish rendering.
 
 ![live-512](https://user-images.githubusercontent.com/844287/192097249-729a0a1e-a677-485e-9ccc-16a9e848fabe.gif)
 
-### Task Queue
+## Task Queue
 ![Screenshot of task queue](media/task-queue-v1.jpg?raw=true)
 
 # System Requirements
@@ -70,23 +111,10 @@ Useful for judging (and stopping) an image quickly, without waiting for it to fi
 
 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.3.5/stable-diffusion-ui-windows.zip) or [for Linux](https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.3.5/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).
-  - For Linux: After extracting the .tar.xz file, please open a terminal, and go to the `stable-diffusion-ui` directory.
-
-3. **Run**:
-  - For Windows: `Start Stable Diffusion UI.cmd` by double-clicking it.
-  - For Linux: In the terminal, run `./start.sh` (or `bash start.sh`)
-
-This will automatically install Stable Diffusion, set it up, and start the interface. No additional steps are needed.
-
-**To Uninstall:** Just delete the `stable-diffusion-ui` folder to uninstall all the downloaded packages.
+----
 
 # How to use?
-Please use our [guide](https://github.com/cmdr2/stable-diffusion-ui/wiki/How-to-Use) to understand how to use the features in this UI.
+Please refer to our [guide](https://github.com/cmdr2/stable-diffusion-ui/wiki/How-to-Use) to understand how to use the features in this UI.
 
 # Bugs reports and code contributions welcome
 If there are any problems or suggestions, please feel free to ask on the [discord server](https://discord.com/invite/u9yhsFmEkB) or [file an issue](https://github.com/cmdr2/stable-diffusion-ui/issues).
@@ -102,4 +130,11 @@ If you have any code contributions in mind, please feel free to say Hi to us on
 # Disclaimer
 The authors of this project are not responsible for any content generated using this interface.
 
-The license of this software forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm, spread misinformation, or target vulnerable groups. For the full list of restrictions please read [the license](LICENSE). You agree to these terms by using this software.
+The license of this software forbids you from sharing any content that:
+- Violates any laws.
+- Produces any harm to a person or persons.
+- Disseminates (spreads) any personal information that would be meant for harm.
+- Spreads misinformation.
+- Target vulnerable groups. 
+
+For the full list of restrictions please read [the License](LICENSE). You agree to these terms by using this software.

Troubleshooting.md

@@ -1 +0,0 @@
-Moved to https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting

scripts/Developer Console.cmd

@@ -29,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/bootstrap.bat

@@ -42,11 +42,11 @@ if "%PACKAGES_TO_INSTALL%" NEQ "" (
         mkdir "%MAMBA_ROOT_PREFIX%"
         call curl -Lk "%MICROMAMBA_DOWNLOAD_URL%" > "%MAMBA_ROOT_PREFIX%\micromamba.exe"
 
-        @REM if "%ERRORLEVEL%" NEQ "0" (
-        @REM     echo "There was a problem downloading micromamba. Cannot continue."
-        @REM     pause
-        @REM     exit /b
-        @REM )
+        if "%ERRORLEVEL%" NEQ "0" (
+            echo "There was a problem downloading micromamba. Cannot continue."
+            pause
+            exit /b
+        )
 
         mkdir "%APPDATA%"
         mkdir "%USERPROFILE%"

scripts/developer_console.sh

@@ -35,6 +35,15 @@ 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
   file_name=$(basename "${BASH_SOURCE[0]}")

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 733a1f6f9cae9b9a9b83294bf3281b123378cb1f
+    )
 
     @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,6 @@ 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
 
@@ -81,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
@@ -107,23 +112,9 @@ 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 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
-    )
-
     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.
         pause
@@ -142,17 +133,9 @@ 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 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
-    )
-
     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.
         pause
@@ -171,8 +154,6 @@ 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
 
@@ -191,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
@@ -200,8 +201,10 @@ call WHERE uvicorn > .tmp
 
 if not exist "..\models\stable-diffusion" mkdir "..\models\stable-diffusion"
 if not exist "..\models\vae" mkdir "..\models\vae"
+if not exist "..\models\hypernetwork" mkdir "..\models\hypernetwork"
 echo. > "..\models\stable-diffusion\Put your custom ckpt files here.txt"
 echo. > "..\models\vae\Put your VAE files here.txt"
+echo. > "..\models\hypernetwork\Put your hypernetwork files here.txt"
 
 @if exist "sd-v1-4.ckpt" (
     for %%I in ("sd-v1-4.ckpt") do if "%%~zI" EQU "4265380512" (
@@ -275,7 +278,7 @@ echo. > "..\models\vae\Put your VAE 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"
     )
 )
@@ -305,7 +308,7 @@ echo. > "..\models\vae\Put your VAE 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"
     )
 )
@@ -359,7 +362,9 @@ echo. > "..\models\vae\Put your VAE files here.txt"
     )
 )
 
-
+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" (
@@ -383,6 +388,14 @@ call python --version
 @set SD_UI_PATH=%cd%\ui
 @cd stable-diffusion
 
+@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%

scripts/on_sd_start.sh

@@ -21,33 +21,38 @@ python -c "import os; import shutil; frm = 'sd-ui-files/ui/hotfix/9c24e6cd9f499d
 # 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 || fail "ddim patch failed"
-    git apply ../ui/sd_internal/env_yaml.patch || fail "yaml patch failed"
+    if [ "$test_sd2" == "N" ]; then
+        git -c advice.detachedHead=false checkout 7f32368ed1030a6e710537047bacd908adea183a
+    elif [ "$test_sd2" == "Y" ]; then
+        git -c advice.detachedHead=false checkout 733a1f6f9cae9b9a9b83294bf3281b123378cb1f
+    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
         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 || fail "ddim patch failed"
-    git apply ../ui/sd_internal/env_yaml.patch || fail "yaml patch failed"
+    git -c advice.detachedHead=false checkout 7f32368ed1030a6e710537047bacd908adea183a
 
     cd ..
 fi
@@ -74,12 +79,6 @@ else
 
     conda activate ./env || fail "conda activate failed"
 
-    if conda install -c conda-forge --prefix ./env -y antlr4-python3-runtime=4.8 ; then
-        echo "Installed. Testing.."
-    else
-        fail "Error installing antlr4-python3-runtime"
-    fi
-
     out_test=`python -c "import torch; import ldm; import transformers; import numpy; import antlr4; print(42)"`
     if [ "$out_test" != "42" ]; then
         fail "Dependency test failed"
@@ -96,12 +95,6 @@ else
     export PYTHONNOUSERSITE=1
     export PYTHONPATH="$(pwd):$(pwd)/env/lib/site-packages"
 
-    if pip install -e git+https://github.com/TencentARC/GFPGAN#egg=GFPGAN ; then
-        echo "Installed. Testing.."
-    else
-        fail "Error installing the packages necessary for GFPGAN (Face Correction)."
-    fi
-
     out_test=`python -c "from gfpgan import GFPGANer; print(42)"`
     if [ "$out_test" != "42" ]; then
         echo "EE The dependency check has failed. This usually means that some system libraries are missing."
@@ -121,12 +114,6 @@ else
     export PYTHONNOUSERSITE=1
     export PYTHONPATH="$(pwd):$(pwd)/env/lib/site-packages"
 
-    if pip install -e git+https://github.com/xinntao/Real-ESRGAN#egg=realesrgan ; then
-        echo "Installed. Testing.."
-    else
-        fail "Error installing the packages necessary for ESRGAN"
-    fi
-
     out_test=`python -c "from basicsr.archs.rrdbnet_arch import RRDBNet; from realesrgan import RealESRGANer; print(42)"`
     if [ "$out_test" != "42" ]; then
         fail "ESRGAN dependency test failed"
@@ -156,12 +143,28 @@ else
     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"
+mkdir -p "../models/hypernetwork"
 echo "" > "../models/stable-diffusion/Put your custom ckpt files here.txt"
 echo "" > "../models/vae/Put your VAE files here.txt"
+echo "" > "../models/hypernetwork/Put your hypernetwork files here.txt"
 
 if [ -f "sd-v1-4.ckpt" ]; then
     model_size=`find "sd-v1-4.ckpt" -printf "%s"`
@@ -302,6 +305,9 @@ if [ ! -f "../models/vae/vae-ft-mse-840000-ema-pruned.ckpt" ]; then
     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

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

ui/index.html

@@ -3,23 +3,30 @@
 <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=3">
-    <link rel="stylesheet" href="/media/css/main.css?v=17">
-    <link rel="stylesheet" href="/media/css/auto-save.css?v=5">
-    <link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=4">
-    <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.4.5 <span id="updateBranchLabel"></span></small></h1>
+            <h1>
+                Stable Diffusion UI
+                <small>v2.4.20 <span id="updateBranchLabel"></span></small>
+            </h1>
         </div>
         <div id="server-status">
             <div id="server-status-color">●</div>
@@ -46,45 +53,58 @@
                     <label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn">Load from a file</button>
                     <textarea id="prompt" class="col-free">a photograph of an astronaut riding a horse</textarea>
                     <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
-
                     <label for="negative_prompt" class="collapsible" id="negative_prompt_handle">
                         Negative Prompt
-                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about Negative Prompts</span></i></a>
+                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">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)
-                            <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Inpainting" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about InPainting</span></i></a>
-                            <small>(select the area which the AI will paint into)</small>
-                        </label>
-                        <div id="inpaintingEditor"></div>
                     </div>
+
                 </div>
 
                 <div id="editor-inputs-tags-container" class="row">
-                    <label>Image Modifiers: <small>(click an Image Modifier to remove it)</small></label>
+                    <label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">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="stopImage" class="secondaryButton">Stop All</button>
+                <button id="makeImage" class="primaryButton">Make Image</button>
+		<div id="render-buttons">
+		   <button id="stopImage" class="secondaryButton">Stop All</button>
+		   <button id="pause"><i class="fa-solid fa-pause"></i> Pause All</button>
+		   <button id="resume"><i class="fa-solid fa-play"></i> Resume</button>
+		</div>
             </div>
 
             <span class="line-separator"></span>
@@ -93,7 +113,7 @@
                 <h4 class="collapsible">
                     Image Settings
                     <i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button">
-                        <span class="simple-tooltip left">
+                        <span class="simple-tooltip top-left">
                             Reset Image Settings
                         </span>
                     </i>
@@ -101,19 +121,19 @@
                 <div id="editor-settings-entries" class="collapsible-content">
                     <div><table>
                     <tr><b class="settings-subheader">Image Settings</b></tr>
-                    <tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="30000" onkeypress="preventNonNumericalInput(event)"> <input id="random_seed" name="random_seed" type="checkbox" checked><label for="random_seed">Random</label></td></tr>
+                    <tr class="pl-5"><td><label for="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>
+                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about custom models</span></i></a>
                     </td></tr>
                     <tr 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>
+                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about VAEs</span></i></a>
                     </td></tr>
                     <tr id="samplerSelection" class="pl-5"><td><label for="sampler">Sampler:</label></td><td>
                         <select id="sampler" name="sampler">
@@ -126,7 +146,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>
+                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/How-to-Use#samplers" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about samplers</span></i></a>
                     </td></tr>
                     <tr class="pl-5"><td><label>Image Size: </label></td><td>
                         <select id="width" name="width" value="512">
@@ -176,18 +196,30 @@
                     </td></tr>
                     <tr class="pl-5"><td><label for="num_inference_steps">Inference Steps:</label></td><td> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25" onkeypress="preventNonNumericalInput(event)"></td></tr>
                     <tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="10" max="500"> <input id="guidance_scale" name="guidance_scale" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>
-                    <tr id="prompt_strength_container" class="pl-5"><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td></tr></span>
+                    <tr id="prompt_strength_container" class="pl-5"><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td></tr>
+                    <tr class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</i></label></td><td>
+                        <select id="hypernetwork_model" name="hypernetwork_model">
+                            <!-- <option value="" selected>None</option> -->
+                        </select>
+                    </td></tr>
+                    <tr id="hypernetwork_strength_container" class="pl-5">
+                        <td><label for="hypernetwork_strength_slider">Hypernetwork Strength:</label></td>
+                        <td> <input id="hypernetwork_strength_slider" name="hypernetwork_strength_slider" class="editor-slider" value="100" type="range" min="0" max="100"> <input id="hypernetwork_strength" name="hypernetwork_strength" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td>
+                    </tr>
                     <tr class="pl-5"><td><label for="output_format">Output Format:</label></td><td>
                         <select id="output_format" name="output_format">
                             <option value="jpeg" selected>jpeg</option>
                             <option value="png">png</option>
                         </select>
                     </td></tr>
+                    <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, and slower image creation)</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>
@@ -241,14 +273,23 @@
         <div id="tab-content-settings" class="tab-content">
             <div id="system-settings" class="tab-content-inner">
                 <h1>System Settings</h1>
-                <table class="form-table"></table>
+                <div 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"></div>
+                    <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 top-left">You can access Stable Diffusion UI from other devices using these addresses</span></i> :</label></td><td id="system-info-server-hosts" class="value"></td></tr>
+                        </table>
+                    </div>
                 </div>
+
             </div>
         </div>
         <div id="tab-content-about" class="tab-content">
@@ -263,6 +304,7 @@
                                 <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>
@@ -313,6 +355,38 @@
         </div>
     </div>
 
+    <div id="image-editor" class="popup image-editor-popup">
+        <div>
+            <i class="close-button fa-solid fa-xmark"></i>
+            <h1>Image Editor</h1>
+            <div class="flex-container">
+                <div class="editor-controls-left"></div>
+                <div class="editor-controls-center">
+                    <div></div>
+                </div>
+                <div class="editor-controls-right">
+                    <div></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="image-inpainter" class="popup image-editor-popup">
+        <div>
+            <i class="close-button fa-solid fa-xmark"></i>
+            <h1>Inpainter</h1>
+            <div class="flex-container">
+                <div class="editor-controls-left"></div>
+                <div class="editor-controls-center">
+                    <div></div>
+                </div>
+                <div class="editor-controls-right">
+                    <div></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div id="footer-spacer"></div>
     <div id="footer">
         <div class="line-separator">&nbsp;</div>
@@ -326,28 +400,34 @@
     </div>
 </div>
 </body>
+<script src="media/js/utils.js"></script>
+<script src="media/js/engine.js"></script>
+<script src="media/js/parameters.js"></script>
+<script src="media/js/plugins.js"></script>
 
-<script src="media/js/parameters.js?v=9"></script>
-<script src="media/js/plugins.js?v=1"></script>
-<script src="media/js/utils.js?v=6"></script>
-<script src="media/js/inpainting-editor.js?v=1"></script>
-<script src="media/js/image-modifiers.js?v=6"></script>
-<script src="media/js/auto-save.js?v=8"></script>
-<script src="media/js/main.js?v=22.1"></script>
-<script src="media/js/themes.js?v=4"></script>
-<script src="media/js/dnd.js?v=9"></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 getDevices()
+    await loadModifiers()
+    await getSystemInfo()
 
-    setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
-    healthCheck()
+    SD.init({
+        events: {
+            statusChange: setServerStatus
+            , idle: onIdle
+        }
+    })
 
     playSound()
 }

ui/media/css/auto-save.css

@@ -26,23 +26,56 @@
     float: left;
 }
 
-.form-table 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);
 }
 
-#system-settings .form-table td {
-    height: 24px;
+.parameters-table > div > div:nth-child(1) {
+    font-size: 20px;
+    width: 45px;
 }
 
-#system-settings .form-table td:last-child div {
-    display: flex;
-    align-items: center;
-}
-#system-settings .form-table td:last-child div > :not([type="checkbox"]):first-child {
-    margin-left: 3px;
-}
-
-#system-settings .form-table td:last-child div small {
-    padding-left: 5px;
+.parameters-table > div > div:nth-child(2) {
+    flex: 1;
+    flex-direction: column;
     text-align: left;
+    justify-content: center;
+    align-items: start;
+    gap: 4px;
+}
+
+.parameters-table > div > div:nth-child(3) {
+    text-align: right;
+}
+
+.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,215 @@
+.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);
+}
+
+.editor-controls-right .image-editor-button {
+	margin-bottom: 4px;
+}
+
+#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

@@ -22,16 +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 {
-    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;
@@ -50,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;
@@ -123,7 +139,7 @@ label {
     padding: 16px;
     display: flex;
     flex-direction: column;
-    flex: 0 0 370pt;
+    flex: 0 0 380pt;
 }
 #editor label {
     font-weight: normal;
@@ -175,15 +191,29 @@ label {
     background: rgb(132, 8, 0);
     border: 2px solid rgb(122, 29, 0);
     color: rgb(255, 221, 255);
-    width: 100%;
     height: 30pt;
     border-radius: 6px;
-    display: none;
-    margin-top: 2pt;
+    flex-grow: 2;
 }
 #stopImage:hover {
     background: rgb(177, 27, 0);
 }
+
+div#render-buttons {
+    gap: 3px;
+    margin-top: 4px;
+    display: none;
+}
+button#pause {
+    flex-grow: 1;
+    background: var(--accent-color);
+}
+button#resume {
+    flex-grow: 1;
+    background: var(--accent-color);
+    display: none;
+}
+
 .flex-container {
     display: flex;
     width: 100%;
@@ -196,7 +226,7 @@ label {
 }
 .collapsible-content {
     display: block;
-    padding-left: 15px;
+    padding-left: 10px;
 }
 .collapsible-content h5 {
     padding: 5pt 0pt;
@@ -211,7 +241,6 @@ label {
     display: none !important;
 }
 #editor-modifiers {
-    max-width: 600px;
     overflow-y: auto;
     overflow-x: hidden;
 }
@@ -250,39 +279,13 @@ img {
 }
 .preview-prompt {
     font-size: 13pt;
-    margin-bottom: 10pt;
+    display: inline;
 }
 #coffeeButton {
     height: 23px;
     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 {
     position: relative;
     background: var(--background-color4);
@@ -402,14 +405,34 @@ img {
 .imageTaskContainer > div > .collapsible-handle {
     display: none;
 }
+.dropTargetBefore::before{
+    content: "";
+    border: 1px solid #fff;
+    margin-bottom: -2px;
+    display: block;
+    box-shadow: 0 0 5px #fff;
+    transform: translate(0px, -14px);
+}
+.dropTargetAfter::after{
+    content: "";
+    border: 1px solid #fff;
+    margin-bottom: -2px;
+    display: block;
+    box-shadow: 0 0 5px #fff;
+    transform: translate(0px, 14px);
+}
+.drag-handle {
+    margin-right: 6px;
+    cursor: move;
+}
 .taskStatusLabel {
-    float: left;
     font-size: 8pt;
     background:var(--background-color2);
     border: 1px solid rgb(61, 62, 66);
     padding: 2pt 4pt;
     border-radius: 2pt;
     margin-right: 5pt;
+    display: inline;
 }
 .activeTaskLabel {
     background:rgb(0, 90, 30);
@@ -437,6 +460,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;
 }
@@ -448,6 +482,7 @@ img {
     font-size: 10pt;
     color: #aaa;
     margin-bottom: 5pt;
+    margin-top: 5pt;
 }
 .img-batch {
     display: inline;
@@ -455,8 +490,58 @@ img {
 #prompt_from_file {
     display: none;
 }
+
+#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-width: 150px;
     max-height: 150px;
     height: 100%;
     width: 100%;
@@ -464,23 +549,18 @@ img {
     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;
-}
+} */
 
 #init_image_size_box {
     position: absolute;
     right: 0px;
-    bottom: 3px;
+    bottom: 0px;
     padding: 3px;
     background: black;
     color: white;
@@ -490,6 +570,10 @@ img {
     border-radius: 6px 0px;
 }
 
+#editor-settings {
+    min-width: 350px;
+}
+
 #editor-settings-entries {
     display: flex;
     flex-direction: column;
@@ -528,6 +612,10 @@ option {
     cursor: pointer;
 }
 
+input[type="file"] * {
+    cursor: pointer;
+}
+
 input,
 select,
 textarea {
@@ -566,12 +654,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 {
@@ -579,11 +681,66 @@ input::file-selector-button {
     height: 19px;
 }
 
-/* MOBILE SUPPORT */
-@media screen and (max-width: 700px) {
+
+.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;
     }
@@ -620,6 +777,9 @@ input::file-selector-button {
     #editor {
         padding: 16px 8px;
     }
+    #editor-settings {
+        min-width: 0px;
+    }
     .tab-content-inner {
         margin: 0px;
     }
@@ -630,7 +790,7 @@ input::file-selector-button {
         padding-right: 0px;
     }
     #server-status {
-        display: none;
+        top: 75%;
     }
     .popup > div {
         padding-left: 5px !important;
@@ -643,21 +803,24 @@ input::file-selector-button {
         padding: 0px !important;
         margin: 24px !important;
     }
-    .simple-tooltip.right {
-        right: initial;
-        left: 0px;
-        top: 50%;
-        transform: translate(calc(-100% + 15%), -50%);
+    .simple-tooltip {
+        display: none;
     }
-    :hover > .simple-tooltip.right {
-        transform: translate(100%, -50%);
+}
+
+@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;
     }
@@ -674,6 +837,8 @@ input::file-selector-button {
 
 #promptsFromFileBtn {
     font-size: 9pt;
+    display: inline;
+    background-color: var(--accent-color);
 }
 
 .section-button {
@@ -763,6 +928,15 @@ input::file-selector-button {
     transform: translate(-50%, 100%);
 }
 
+.simple-tooltip.top-left {
+    top: 0px;
+    left: 0px;
+    transform: translate(calc(-100% + 15%), calc(-100% + 15%));
+}
+:hover > .simple-tooltip.top-left {
+    transform: translate(-80%, -100%);
+}
+
 /* PROGRESS BAR */
 .progress-bar {
     background: var(--background-color3);
@@ -771,6 +945,7 @@ input::file-selector-button {
     height: 16px;
     position: relative;
     transition: 0.25s 1s border, 0.25s 1s height;
+    clear: both;
 }
 .progress-bar > div {
     background: var(--accent-color);
@@ -875,8 +1050,8 @@ input::file-selector-button {
     display: none;
 }
 
-#tab-content-wrapper {
-    border-top: 8px solid var(--background-color1);
+#tab-content-wrapper > * {
+    padding-top: 8px;
 }
 
 .tab-content-inner {
@@ -898,6 +1073,9 @@ input::file-selector-button {
 i.active {
     background: var(--accent-color);
 }
+.primaryButton.active {
+    background: hsl(var(--accent-hue), 100%, 50%);
+}
 #system-info {
     max-width: 800px;
     font-size: 10pt;
@@ -910,6 +1088,89 @@ i.active {
     float: right;
     font-weight: bold;
 }
-#save-system-settings-btn {
+
+button:active {
+  transition-duration: 0.1s;
+  background-color: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 24%));
+  position: relative;
+  top: 1px;
+  left: 1px;
+}
+
+div.task-initimg > img {
+    margin-right: 6px;
+    display:      block;
+}
+div.task-fs-initimage {
+    display:  none;
+#    position: absolute;
+}
+div.task-initimg:hover div.task-fs-initimage {
+    display: block;
+    position: absolute;
+    z-index: 9999;
+    box-shadow: 0 0 30px #000;
+    margin-top:-64px;
+}
+div.top-right {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+}
+
+button#save-system-settings-btn {
     padding: 4pt 8pt;
 }
+#ip-info a {
+    color:var(--text-color)
+}
+#ip-info div {
+    line-height: 200%;
+}
+
+/* SCROLLBARS */
+:root {
+    --scrollbar-width: 14px;
+    --scrollbar-radius: 10px;
+}
+
+.scrollbar-editor::-webkit-scrollbar {
+    width: 8px;
+}
+
+.scrollbar-editor::-webkit-scrollbar-track {
+    border-radius: 10px;
+}
+
+.scrollbar-editor::-webkit-scrollbar-thumb {
+    background: --background-color2;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px var(--input-border-color);
+    border-radius: var(--input-border-radius);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--background-color2);
+    border-radius: var(--scrollbar-radius);
+}
+
+body.pause {
+    border: solid 12px var(--accent-color);
+}
+
+body.wait-pause {
+    animation: blinker 2s linear infinite;
+}
+
+@keyframes blinker {
+     0% { border: solid 12px var(--accent-color); }
+    50% { border: solid 12px var(--background-color1); }
+   100% { border: solid 12px var(--accent-color); }
+}

ui/media/css/themes.css

@@ -1,22 +1,26 @@
 :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;
@@ -24,6 +28,11 @@
     --accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
     --accent-color-hover: hsl(var(--accent-hue), 100%, var(--accent-lightness-hover));
     --primary-button-border: none;
+    --input-switch-padding: 1px;
+    --input-height: 18px;
+
+    /* Main theme color, hex color fallback. */
+    --theme-color-fallback: #673AB6;
 }
 
 .theme-light {
@@ -37,6 +46,8 @@
     --input-text-color: black;
     --input-background-color: #f8f9fa; 
     --input-border-color: grey; 
+
+    --theme-color-fallback: #aaaaaa;
 }
 
 .theme-discord {
@@ -47,15 +58,12 @@
     
     --accent-hue: 235;
     --accent-lightness: 65%;
-    --primary-button-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 {
@@ -67,17 +75,12 @@
 	--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;
-    --primary-button-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))));
-    
-    --primary-button-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 {
@@ -111,16 +108,11 @@
 	--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) + (1.4 * var(--value-step))));
-    
-    --primary-button-border: none;
 
-    --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;
-    --primary-button-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

@@ -14,13 +14,16 @@ const SETTINGS_IDS_LIST = [
     "num_outputs_parallel",
     "stable_diffusion_model",
     "vae_model",
+    "hypernetwork_model",
     "sampler",
     "width",
     "height",
     "num_inference_steps",
     "guidance_scale",
     "prompt_strength",
+    "hypernetwork_strength",
     "output_format",
+    "output_quality",
     "negative_prompt",
     "stream_image_progress",
     "use_face_correction",
@@ -35,6 +38,7 @@ const SETTINGS_IDS_LIST = [
     "sound_toggle",
     "turbo",
     "use_full_precision",
+    "confirm_dangerous_actions",
     "auto_save_settings"
 ]
 
@@ -55,6 +59,9 @@ async function initSettings() {
         if (!element) {
             console.error(`Missing settings element ${id}`)
         }
+        if (id in SETTINGS) { // don't create it again
+            return
+        }
         SETTINGS[id] = {
             key: id,
             element: element,
@@ -124,7 +131,7 @@ function loadSettings() {
     var saved_settings_text = localStorage.getItem(SETTINGS_KEY)
     if (saved_settings_text) {
         var saved_settings = JSON.parse(saved_settings_text)
-        if (saved_settings.find(s => s.key == "auto_save_settings").value == false) {
+        if (saved_settings.find(s => s.key == "auto_save_settings")?.value == false) {
             setSetting("auto_save_settings", false)
             return
         }
@@ -213,6 +220,7 @@ function fillSaveSettingsConfigTable() {
             })
         })
     })
+    prettifyInputs(saveSettingsConfigTable)
 }
 
 // configureSettingsSaveBtn
@@ -224,7 +232,7 @@ var autoSaveSettings = document.getElementById("auto_save_settings")
 var configSettingsButton = document.createElement("button")
 configSettingsButton.textContent = "Configure"
 configSettingsButton.style.margin = "0px 5px"
-autoSaveSettings.insertAdjacentElement("afterend", configSettingsButton)
+autoSaveSettings.insertAdjacentElement("beforebegin", configSettingsButton)
 autoSaveSettings.addEventListener("change", () => {
     configSettingsButton.style.display = autoSaveSettings.checked ? "block" : "none"
 })

ui/media/js/dnd.js

@@ -51,6 +51,13 @@ const TASK_MAPPING = {
         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
@@ -78,13 +85,14 @@ const TASK_MAPPING = {
             if (!seed) {
                 randomSeedField.checked = true
                 seedField.disabled = true
+                seedField.value = 0
                 return
             }
             randomSeedField.checked = false
             seedField.disabled = false
             seedField.value = seed
         },
-        readUI: () => (randomSeedField.checked ? Math.floor(Math.random() * 10000000) : parseInt(seedField.value)),
+        readUI: () => parseInt(seedField.value), // just return the value the user is seeing in the UI
         parse: (val) => parseInt(val)
     },
     num_inference_steps: { name: 'Steps',
@@ -120,10 +128,12 @@ const TASK_MAPPING = {
     },
     mask:  { name: 'Mask',
         setUI: (mask) => {
-            inpaintingEditor.setImg(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 ? inpaintingEditor.getImg() : undefined),
+        readUI: () => (maskSetting.checked ? imageInpainter.getImg() : undefined),
         parse: (val) => val
     },
 
@@ -161,18 +171,7 @@ const TASK_MAPPING = {
         setUI: (use_stable_diffusion_model) => {
             const oldVal = stableDiffusionModelField.value
 
-            let pathIdx = use_stable_diffusion_model.lastIndexOf('/') // Linux, Mac paths
-            if (pathIdx < 0) {
-                pathIdx = use_stable_diffusion_model.lastIndexOf('\\') // Windows paths.
-            }
-            if (pathIdx >= 0) {
-                use_stable_diffusion_model = use_stable_diffusion_model.slice(pathIdx + 1)
-            }
-            const modelExt = '.ckpt'
-            if (use_stable_diffusion_model.endsWith(modelExt)) {
-                use_stable_diffusion_model = use_stable_diffusion_model.slice(0, use_stable_diffusion_model.length - modelExt.length)
-            }
-
+            use_stable_diffusion_model = getModelPath(use_stable_diffusion_model, ['.ckpt'])
             stableDiffusionModelField.value = use_stable_diffusion_model
 
             if (!stableDiffusionModelField.value) {
@@ -182,10 +181,45 @@ const TASK_MAPPING = {
         readUI: () => stableDiffusionModelField.value,
         parse: (val) => val
     },
+    use_vae_model: { name: 'VAE model',
+        setUI: (use_vae_model) => {
+            const oldVal = vaeModelField.value
 
-    numOutputsParallel: { name: 'Parallel Images',
-        setUI: (numOutputsParallel) => {
-            numOutputsParallelField.value = numOutputsParallel
+            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
+    },
+    use_hypernetwork_model: { name: 'Hypernetwork model',
+        setUI: (use_hypernetwork_model) => {
+            const oldVal = hypernetworkModelField.value
+
+            if (use_hypernetwork_model !== '') {
+                use_hypernetwork_model = getModelPath(use_hypernetwork_model, ['.pt'])
+                use_hypernetwork_model = use_hypernetwork_model !== '' ? use_hypernetwork_model : oldVal
+            }
+            hypernetworkModelField.value = use_hypernetwork_model
+            hypernetworkModelField.dispatchEvent(new Event('change'))
+        },
+        readUI: () => hypernetworkModelField.value,
+        parse: (val) => val
+    },
+    hypernetwork_strength: { name: 'Hypernetwork Strength',
+        setUI: (hypernetwork_strength) => {
+            hypernetworkStrengthField.value = hypernetwork_strength
+            updateHypernetworkStrengthSlider()
+        },
+        readUI: () => parseFloat(hypernetworkStrengthField.value),
+        parse: (val) => parseFloat(val)
+    },
+
+    num_outputs: { name: 'Parallel Images',
+        setUI: (num_outputs) => {
+            numOutputsParallelField.value = num_outputs
         },
         readUI: () => parseInt(numOutputsParallelField.value),
         parse: (val) => val
@@ -243,7 +277,9 @@ const TASK_MAPPING = {
         parse: (val) => val
     }
 }
-function restoreTaskToUI(task) {
+function restoreTaskToUI(task, fieldsToSkip) {
+    fieldsToSkip = fieldsToSkip || []
+
     if ('numOutputsTotal' in task) {
         numOutputsTotalField.value = task.numOutputsTotal
     }
@@ -255,10 +291,35 @@ function restoreTaskToUI(task) {
         return
     }
     for (const key in TASK_MAPPING) {
-        if (key in task.reqBody) {
+        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 = {}
@@ -271,6 +332,22 @@ function 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',
@@ -283,7 +360,9 @@ const TASK_TEXT_MAPPING = {
     use_upscale: 'Use Upscaling',
     sampler: 'Sampler',
     negative_prompt: 'Negative Prompt',
-    use_stable_diffusion_model: 'Stable Diffusion model'
+    use_stable_diffusion_model: 'Stable Diffusion model',
+    use_hypernetwork_model: 'Hypernetwork model',
+    hypernetwork_strength: 'Hypernetwork Strength'
 }
 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) {
@@ -326,29 +405,35 @@ function parseTaskFromText(str) {
     return task
 }
 
-async function readFile(file, i) {
-    const fileContent = (await file.text()).trim()
-
-    // JSON File.
-    if (fileContent.startsWith('{') && fileContent.endsWith('}')) {
+async function parseContent(text) {
+    text = text.trim();
+    if (text.startsWith('{') && text.endsWith('}')) {
         try {
-            const task = JSON.parse(fileContent)
+            const task = JSON.parse(text)
             restoreTaskToUI(task)
+            return true
         } catch (e) {
-            console.warn(`file[${i}]:${file.name} - File couldn't be parsed.`, e)
+            console.warn(`JSON text content couldn't be parsed.`, e)
         }
-        return
+        return false
     }
-
     // Normal txt file.
-    const task = parseTaskFromText(fileContent)
+    const task = parseTaskFromText(text)
     if (task) {
         restoreTaskToUI(task)
+        return true
     } else {
-        console.warn(`file[${i}]:${file.name} - File couldn't be parsed.`)
+        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 = []
@@ -395,72 +480,73 @@ const TASK_REQ_NO_EXPORT = [
     "use_full_precision",
     "save_to_disk_path"
 ]
+const resetSettings = document.getElementById('reset-image-settings')
 
-// Retrieve clipboard content and try to parse it 
-async function pasteFromClipboard() {
-    //const text = await navigator.clipboard.readText()
-    let text = await navigator.clipboard.readText();
-    text=text.trim();
-    if (text.startsWith('{') && text.endsWith('}')) {
-        try {
-            const task = JSON.parse(text)
-            restoreTaskToUI(task)
-        } catch (e) {
-            console.warn(`Clipboard JSON couldn't be parsed.`, e)
-        }
+function checkReadTextClipboardPermission (result) {
+    if (result.state != "granted" && result.state != "prompt") {
         return
     }
-    // Normal txt file.
-    const task = parseTaskFromText(text)
-    if (task) {
-        restoreTaskToUI(task)
-    } else {
-        console.warn(`Clipboard content - File couldn't be parsed.`)
-    }
+    // PASTE ICON
+    const pasteIcon = document.createElement('i')
+    pasteIcon.className = 'fa-solid fa-paste section-button'
+    pasteIcon.innerHTML = `<span class="simple-tooltip top-left">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") {
-        const resetSettings = document.getElementById('reset-image-settings')
-
-        // 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 1000 ms remove the 'active' class
-	    asyncDelay(1000).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)
-
-        // 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', (event) => {
-            event.stopPropagation()
-	    // Add css class 'active'
-	    pasteIcon.classList.add('active')
-	    // In 1000 ms remove the 'active' class
-	    asyncDelay(1000).then(() => pasteIcon.classList.remove('active'))
-            pasteFromClipboard()
-        })
-        resetSettings.parentNode.insertBefore(pasteIcon, resetSettings)
+    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 top-left">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.
+// 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

ui/media/js/image-editor.js

@@ -0,0 +1,706 @@
+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)
+		},
+		trackHistory: true
+	},
+	{
+		id: "undo",
+		name: "Undo",
+		icon: "fa-solid fa-rotate-left",
+		handler: (editor) => {
+			editor.history.undo()
+		},
+		trackHistory: false
+	},
+	{
+		id: "redo",
+		name: "Redo",
+		icon: "fa-solid fa-rotate-right",
+		handler: (editor) => {
+			editor.history.redo()
+		},
+		trackHistory: false
+	}
+]
+
+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: [ 6, 12, 16, 24, 30, 40, 48, 64 ],
+		initElement: (element, option) => {
+			element.parentElement.style.flex = option
+			element.style.width = option + "px"
+			element.style.height = option + "px"
+			element.style['margin-right'] = '2px'
+			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"))
+			this.selectOption("opacity", IMAGE_EDITOR_SECTIONS.find(s => s.name == "opacity").options.indexOf(0.4))
+		}
+
+		// 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
+		}
+
+		if (width > height) {
+		        var max_size = Math.min(parseInt(window.innerWidth * 0.9), width, 768)
+			var multiplier = max_size / width
+			width = (multiplier * width).toFixed()
+			height = (multiplier * height).toFixed()
+		}
+		else {
+		        var max_size = Math.min(parseInt(window.innerHeight * 0.9), height, 768)
+			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)
+		if (action.trackHistory) {
+			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()
+})
+
+img2imgUnload() // no init image when the app starts

ui/media/js/image-modifiers.js

@@ -85,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({
@@ -101,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()
@@ -125,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')
@@ -148,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 = ''
 
@@ -165,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()
@@ -182,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')
 
@@ -256,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/parameters.js

@@ -5,9 +5,9 @@
  */
  var ParameterType = {
     checkbox: "checkbox",
-	select: "select",
-	select_multiple: "select_multiple",
-	custom: "custom",
+    select: "select",
+    select_multiple: "select_multiple",
+    custom: "custom",
 };
 
 /**
@@ -23,136 +23,189 @@
 
 /** @type {Array.<Parameter>} */
 var PARAMETERS = [
-	{
-		id: "theme",
-		type: ParameterType.select,
-		label: "Theme",
-		default: "theme-default",
-		options: [ // Note: options expanded dynamically
-			{
-				value: "theme-default",
-				label: "Default"
-			}
-		]
-	},
-	{
-		id: "save_to_disk",
-		type: ParameterType.checkbox,
-		label: "Auto-Save Images",
-		note: "automatically saves images to the specified location",
-		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",
-		default: true,
-	},
-	{
-		id: "ui_open_browser_on_start",
-		type: ParameterType.checkbox,
-		label: "Open browser on startup",
-		note: "starts the default browser on startup",
-		default: true,
-	},
-	{
-		id: "turbo",
-		type: ParameterType.checkbox,
-		label: "Turbo Mode",
-		default: true,
-		note: "generates images faster, but uses an additional 1 GB of GPU memory",
-	},
-	{
-		id: "use_cpu",
-		type: ParameterType.checkbox,
-		label: "Use CPU (not GPU)",
-		note: "warning: this will be *very* slow",
-		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",
-		default: false,
-	},
-	{
-		id: "auto_save_settings",
-		type: ParameterType.checkbox,
-		label: "Auto-Save Settings",
-		note: "restores settings on browser load",
-		default: true,
-	},
-	{
-		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.",
-		default: false,
-	},
+    {
+        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: "process_order_toggle",
+        type: ParameterType.checkbox,
+        label: "Process newest jobs first",
+        note: "reverse the normal processing order",
+        default: false,
+    },
+    {
+        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
+    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"
-	}
+    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 table")
+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 newrow = document.createElement('tr')
-		newrow.innerHTML = `
-			<td><label for="${parameter.id}">${parameter.label}</label></td>
-			<td><div>${element}${note}<div></td>`
-		parametersTable.appendChild(newrow)
-		parameter.settingsEntry = newrow
-	})
+    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()
@@ -164,11 +217,16 @@ 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', {
@@ -193,10 +251,23 @@ async function getAppConfig() {
 
         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) {
@@ -273,58 +344,100 @@ async function getDiskPath() {
     }
 }
 
-async function getDevices() {
-    try {
-        let res = await fetch('/get/devices')
-        if (res.status === 200) {
-            res = await res.json()
+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)
 
-            let allDeviceIds = Object.keys(res['all']).filter(d => d !== 'cpu')
-            let activeDeviceIds = Object.keys(res['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 = (res['config'] === 'auto')
-
-            useGPUsField.innerHTML = ''
-            allDeviceIds.forEach(device => {
-                let deviceName = res['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)
-            }
+    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 {
+        const res = await SD.getSystemInfo()
+        let devices = res['devices']
+
+        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(res['hosts'])
     } catch (e) {
         console.log('error fetching devices', e)
     }
 }
 
 saveSettingsBtn.addEventListener('click', function() {
-	let updateBranch = (useBetaChannelField.checked ? 'beta' : 'main')
-
-	changeAppConfig({
+    if (listenPortField.value == '') {
+        alert('The network port field must not be empty.')
+        return
+    }
+    if (listenPortField.value < 1 || listenPortField.value > 65535) {
+        alert('The network port must be a number from 1 to 65535')
+        return
+    }
+    let updateBranch = (useBetaChannelField.checked ? 'beta' : 'main')
+    changeAppConfig({
         'render_devices': getCurrentRenderDeviceSelection(),
-		'update_branch': updateBranch,
-		'ui_open_browser_on_start': uiOpenBrowserOnStartField.checked
+        '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,23 +24,48 @@ const PLUGINS = {
      *   }
      * })
      */
-    IMAGE_INFO_BUTTONS: []
+    IMAGE_INFO_BUTTONS: [],
+    MODIFIERS_LOAD: [],
+    TASK_CREATE: [],
+    OUTPUTS_FORMATS: new ServiceContainer(
+        function png() { return (reqBody) => new SD.RenderTask(reqBody) }
+        , function jpeg() { return (reqBody) => new SD.RenderTask(reqBody) }
+    ),
+}
+PLUGINS.OUTPUTS_FORMATS.register = function(...args) {
+    const service = ServiceContainer.prototype.register.apply(this, args)
+    if (typeof outputFormatField !== 'undefined') {
+        const newOption = document.createElement("option")
+        newOption.setAttribute("value", service.name)
+        newOption.innerText = service.name
+        outputFormatField.appendChild(newOption)
+    }
+    return service
+}
+
+function loadScript(url) {
+    const script = document.createElement('script')
+    const promiseSrc = new PromiseSource()
+    script.addEventListener('error', () => promiseSrc.reject(new Error(`Script "${url}" couldn't be loaded.`)))
+    script.addEventListener('load', () => promiseSrc.resolve(url))
+    script.src = url + '?t=' + Date.now()
+
+    console.log('loading script', url)
+    document.head.appendChild(script)
+
+    return promiseSrc.promise
 }
 
 async function loadUIPlugins() {
     try {
-        let res = await fetch('/get/ui_plugins')
-        if (res.status === 200) {
-            res = await res.json()
-            res.forEach(pluginPath => {
-                let script = document.createElement('script')
-                script.src = pluginPath + '?t=' + Date.now()
-
-                console.log('loading plugin', pluginPath)
-
-                document.head.appendChild(script)
-            })
+        const res = await fetch('/get/ui_plugins')
+        if (!res.ok) {
+            console.error(`Error HTTP${res.status} while loading plugins list. - ${res.statusText}`)
+            return
         }
+        const plugins = await res.json()
+        const loadingPromises = plugins.map(loadScript)
+        return await Promise.allSettled(loadingPromises)
     } catch (e) {
         console.log('error fetching plugin paths', e)
     }

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,32 +1,37 @@
+"use strict";
+
 // 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
+    let 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
+    }
 }
 
 
-
 /* Panel Stuff */
 
 // true = open
-var COLLAPSIBLES_INITIALIZED = false;
+let COLLAPSIBLES_INITIALIZED = false;
 const COLLAPSIBLES_KEY = "collapsibles";
 const COLLAPSIBLE_PANELS = []; // filled in by createCollapsibles with all the elements matching .collapsible
 
 // on-init call this for any panels that are marked open
 function toggleCollapsible(element) {
-    var collapsibleHeader = element.querySelector(".collapsible");
-    var handle = element.querySelector(".collapsible-handle");
+    const collapsibleHeader = element.querySelector(".collapsible");
+    const handle = element.querySelector(".collapsible-handle");
     collapsibleHeader.classList.toggle("active")
     let content = getNextSibling(collapsibleHeader, '.collapsible-content')
     if (!collapsibleHeader.classList.contains("active")) {
@@ -40,6 +45,7 @@ function toggleCollapsible(element) {
             handle.innerHTML = '➖' // minus
         }
     }
+    document.dispatchEvent(new CustomEvent('collapsibleClick', { detail: collapsibleHeader }))
     
     if (COLLAPSIBLES_INITIALIZED && COLLAPSIBLE_PANELS.includes(element)) {
         saveCollapsibles()
@@ -47,16 +53,16 @@ function toggleCollapsible(element) {
 }
 
 function saveCollapsibles() {
-    var values = {}
+    let values = {}
     COLLAPSIBLE_PANELS.forEach(element => {
-        var value = element.querySelector(".collapsible").className.indexOf("active") !== -1
+        let value = element.querySelector(".collapsible").className.indexOf("active") !== -1
         values[element.id] = value
     })
     localStorage.setItem(COLLAPSIBLES_KEY, JSON.stringify(values))
 }
 
 function createCollapsibles(node) {
-    var save = false
+    let save = false
     if (!node) {
         node = document
         save = true
@@ -81,7 +87,7 @@ function createCollapsibles(node) {
         })
     })
     if (save) {
-        var saved = localStorage.getItem(COLLAPSIBLES_KEY)
+        let saved = localStorage.getItem(COLLAPSIBLES_KEY)
         if (!saved) { 
             saved = tryLoadOldCollapsibles();
         }
@@ -89,9 +95,9 @@ function createCollapsibles(node) {
             saveCollapsibles()
             saved = localStorage.getItem(COLLAPSIBLES_KEY)
         }
-        var values = JSON.parse(saved)
+        let values = JSON.parse(saved)
         COLLAPSIBLE_PANELS.forEach(element => {
-            var value = element.querySelector(".collapsible").className.indexOf("active") !== -1
+            let value = element.querySelector(".collapsible").className.indexOf("active") !== -1
             if (values[element.id] != value) {
                 toggleCollapsible(element)
             }
@@ -101,17 +107,17 @@ function createCollapsibles(node) {
 }
 
 function tryLoadOldCollapsibles() {
-    var old_map = {
+    const old_map = {
         "advancedPanelOpen": "editor-settings",
         "modifiersPanelOpen": "editor-modifiers",
         "negativePromptPanelOpen": "editor-inputs-prompt"
     };
     if (localStorage.getItem(Object.keys(old_map)[0])) {
-        var result = {};
+        let result = {};
         Object.keys(old_map).forEach(key => {
-            var value = localStorage.getItem(key);
+            const value = localStorage.getItem(key);
             if (value !== null) {
-                result[old_map[key]] = value == true || value == "true"
+                result[old_map[key]] = (value == true || value == "true")
                 localStorage.removeItem(key)
             }
         });
@@ -150,17 +156,17 @@ function millisecondsToStr(milliseconds) {
         return (number > 1) ? 's' : ''
     }
 
-    var temp = Math.floor(milliseconds / 1000)
-    var hours = Math.floor((temp %= 86400) / 3600)
-    var s = ''
+    let temp = Math.floor(milliseconds / 1000)
+    let hours = Math.floor((temp %= 86400) / 3600)
+    let s = ''
     if (hours) {
         s += hours + ' hour' + numberEnding(hours) + ' '
     }
-    var minutes = Math.floor((temp %= 3600) / 60)
+    let minutes = Math.floor((temp %= 3600) / 60)
     if (minutes) {
         s += minutes + ' minute' + numberEnding(minutes) + ' '
     }
-    var seconds = temp % 60
+    let seconds = temp % 60
     if (!hours && minutes < 4 && seconds) {
         s += seconds + ' second' + numberEnding(seconds)
     }
@@ -178,7 +184,7 @@ function BraceExpander() {
     function bracePair(tkns, iPosn, iNest, lstCommas) {
         if (iPosn >= tkns.length || iPosn < 0) return null;
 
-        var t = tkns[iPosn],
+        let t = tkns[iPosn],
             n = (t === '{') ? (
                 iNest + 1
             ) : (t === '}' ? (
@@ -198,7 +204,7 @@ function BraceExpander() {
     function andTree(dctSofar, tkns) {
         if (!tkns.length) return [dctSofar, []];
 
-        var dctParse = dctSofar ? dctSofar : {
+        let dctParse = dctSofar ? dctSofar : {
                 fn: and,
                 args: []
             },
@@ -231,14 +237,14 @@ function BraceExpander() {
     // Parse of a PARADIGM subtree
     function orTree(dctSofar, tkns, lstCommas) {
         if (!tkns.length) return [dctSofar, []];
-        var iLast = lstCommas.length;
+        let iLast = lstCommas.length;
 
         return {
             fn: or,
             args: splitsAt(
                 lstCommas, tkns
             ).map(function (x, i) {
-                var ts = x.slice(
+                let ts = x.slice(
                     1, i === iLast ? (
                         -1
                     ) : void 0
@@ -256,7 +262,7 @@ function BraceExpander() {
     // List of unescaped braces and commas, and remaining strings
     function tokens(str) {
         // Filter function excludes empty splitting artefacts
-        var toS = function (x) {
+        let toS = function (x) {
             return x.toString();
         };
 
@@ -270,7 +276,7 @@ function BraceExpander() {
     // PARSE TREE OPERATOR (1 of 2)
     // Each possible head * each possible tail
     function and(args) {
-        var lng = args.length,
+        let lng = args.length,
             head = lng ? args[0] : null,
             lstHead = "string" === typeof head ? (
                 [head]
@@ -330,7 +336,7 @@ function BraceExpander() {
     // s -> [s]
     this.expand = function(s) {
         // BRACE EXPRESSION PARSED
-        var dctParse = andTree(null, tokens(s))[0];
+        let dctParse = andTree(null, tokens(s))[0];
 
         // ABSTRACT SYNTAX TREE LOGGED
         // console.log(pp(dctParse));
@@ -341,12 +347,76 @@ function BraceExpander() {
 
 }
 
+
+/** Pause the execution of an async function until timer elapse.
+ * @Returns a promise that will resolve after the specified timeout.
+ */
 function asyncDelay(timeout) {
     return new Promise(function(resolve, reject) {
         setTimeout(resolve, timeout, true)
     })
 }
 
+function PromiseSource() {
+    const srcPromise = new Promise((resolve, reject) => {
+        Object.defineProperties(this, {
+            resolve: { value: resolve, writable: false }
+            , reject: { value: reject, writable: false }
+        })
+    })
+    Object.defineProperties(this, {
+        promise: {value: makeQuerablePromise(srcPromise), writable: false}
+    })
+}
+
+/** A debounce is a higher-order function, which is a function that returns another function
+ * that, as long as it continues to be invoked, will not be triggered.
+ * The function will be called after it stops being called for N milliseconds.
+ * If `immediate` is passed, trigger the function on the leading edge, instead of the trailing.
+ * @Returns a promise that will resolve to func return value.
+ */
+function debounce (func, wait, immediate) {
+    if (typeof wait === "undefined") {
+        wait = 40
+    }
+    if (typeof wait !== "number") {
+        throw new Error("wait is not an number.")
+    }
+    let timeout = null
+    let lastPromiseSrc = new PromiseSource()
+    const applyFn = function(context, args) {
+        let result = undefined
+        try {
+            result = func.apply(context, args)
+        } catch (err) {
+            lastPromiseSrc.reject(err)
+        }
+        if (result instanceof Promise) {
+            result.then(lastPromiseSrc.resolve, lastPromiseSrc.reject)
+        } else {
+            lastPromiseSrc.resolve(result)
+        }
+    }
+    return function(...args) {
+        const callNow = Boolean(immediate && !timeout)
+        const context = this;
+        if (timeout) {
+            clearTimeout(timeout)
+        }
+        timeout = setTimeout(function () {
+            if (!immediate) {
+                applyFn(context, args)
+            }
+            lastPromiseSrc = new PromiseSource()
+            timeout = null
+        }, wait)
+        if (callNow) {
+            applyFn(context, args)
+        }
+        return lastPromiseSrc.promise
+    }
+}
+
 function preventNonNumericalInput(e) {
     e = e || window.event;
     let charCode = (typeof e.which == "undefined") ? e.keyCode : e.which;
@@ -358,3 +428,249 @@ function preventNonNumericalInput(e) {
         e.preventDefault();
     }
 }
+
+/** Returns the global object for the current execution environement.
+ * @Returns window in a browser, global in node and self in a ServiceWorker.
+ * @Notes Allows unit testing and use of the engine outside of a browser.
+ */
+function getGlobal() {
+    if (typeof globalThis === 'object') {
+        return globalThis
+    } else if (typeof global === 'object') {
+        return global
+    } else if (typeof self === 'object') {
+        return self
+    }
+    try {
+        return Function('return this')()
+    } catch {
+        // If the Function constructor fails, we're in a browser with eval disabled by CSP headers.
+        return window
+    } // Returns undefined if global can't be found.
+}
+
+/** Check if x is an Array or a TypedArray.
+ * @Returns true if x is an Array or a TypedArray, false otherwise.
+ */
+function isArrayOrTypedArray(x) {
+    return Boolean(typeof x === 'object' && (Array.isArray(x) || (ArrayBuffer.isView(x) && !(x instanceof DataView))))
+}
+
+function makeQuerablePromise(promise) {
+    if (typeof promise !== 'object') {
+        throw new Error('promise is not an object.')
+    }
+    if (!(promise instanceof Promise)) {
+        throw new Error('Argument is not a promise.')
+    }
+    // Don't modify a promise that's been already modified.
+    if ('isResolved' in promise || 'isRejected' in promise || 'isPending' in promise) {
+        return promise
+    }
+    let isPending = true
+    let isRejected = false
+    let rejectReason = undefined
+    let isResolved = false
+    let resolvedValue = undefined
+    const qurPro = promise.then(
+        function(val){
+            isResolved = true
+            isPending = false
+            resolvedValue = val
+            return val
+        }
+        , function(reason) {
+            rejectReason = reason
+            isRejected = true
+            isPending = false
+            throw reason
+        }
+    )
+    Object.defineProperties(qurPro, {
+        'isResolved': {
+            get: () => isResolved
+        }
+        , 'resolvedValue': {
+            get: () => resolvedValue
+        }
+        , 'isPending': {
+            get: () => isPending
+        }
+        , 'isRejected': {
+            get: () => isRejected
+        }
+        , 'rejectReason': {
+            get: () => rejectReason
+        }
+    })
+    return qurPro
+}
+
+/* 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);
+        }
+    })
+}
+
+class GenericEventSource {
+    #events = {};
+    #types = []
+    constructor(...eventsTypes) {
+        if (Array.isArray(eventsTypes) && eventsTypes.length === 1 && Array.isArray(eventsTypes[0])) {
+            eventsTypes = eventsTypes[0]
+        }
+        this.#types.push(...eventsTypes)
+    }
+    get eventTypes() {
+        return this.#types
+    }
+    /** Add a new event listener
+     */
+    addEventListener(name, handler) {
+        if (!this.#types.includes(name)) {
+            throw new Error('Invalid event name.')
+        }
+        if (this.#events.hasOwnProperty(name)) {
+            this.#events[name].push(handler)
+        } else {
+            this.#events[name] = [handler]
+        }
+    }
+    /** Remove the event listener
+     */
+    removeEventListener(name, handler) {
+        if (!this.#events.hasOwnProperty(name)) {
+            return
+        }
+        const index = this.#events[name].indexOf(handler)
+        if (index != -1) {
+            this.#events[name].splice(index, 1)
+        }
+    }
+    fireEvent(name, ...args) {
+        if (!this.#types.includes(name)) {
+            throw new Error(`Event ${String(name)} missing from Events.types`)
+        }
+        if (!this.#events.hasOwnProperty(name)) {
+            return Promise.resolve()
+        }
+        if (!args || !args.length) {
+            args = []
+        }
+        const evs = this.#events[name]
+        if (evs.length <= 0) {
+            return Promise.resolve()
+        }
+        return Promise.allSettled(evs.map((callback) => {
+            try {
+                return Promise.resolve(callback.apply(SD, args))
+            } catch (ex) {
+                return Promise.reject(ex)
+            }
+        }))
+    }
+}
+
+class ServiceContainer {
+    #services = new Map()
+    #singletons = new Map()
+    constructor(...servicesParams) {
+        servicesParams.forEach(this.register.bind(this))
+    }
+    get services () {
+        return this.#services
+    }
+    get singletons() {
+        return this.#singletons
+    }
+    register(params) {
+        if (ServiceContainer.isConstructor(params)) {
+            if (typeof params.name !== 'string') {
+                throw new Error('params.name is not a string.')
+            }
+            params = {name:params.name, definition:params}
+        }
+        if (typeof params !== 'object') {
+            throw new Error('params is not an object.')
+        }
+        [   'name',
+            'definition',
+        ].forEach((key) => {
+            if (!(key in params)) {
+                console.error('Invalid service %o registration.', params)
+                throw new Error(`params.${key} is not defined.`)
+            }
+        })
+        const opts = {definition: params.definition}
+        if ('dependencies' in params) {
+            if (Array.isArray(params.dependencies)) {
+                params.dependencies.forEach((dep) => {
+                    if (typeof dep !== 'string') {
+                        throw new Error('dependency name is not a string.')
+                    }
+                })
+                opts.dependencies = params.dependencies
+            } else {
+                throw new Error('params.dependencies is not an array.')
+            }
+        }
+        if (params.singleton) {
+            opts.singleton = true
+        }
+        this.#services.set(params.name, opts)
+        return Object.assign({name: params.name}, opts)
+    }
+    get(name) {
+        const ctorInfos = this.#services.get(name)
+        if (!ctorInfos) {
+            return
+        }
+        if(!ServiceContainer.isConstructor(ctorInfos.definition)) {
+            return ctorInfos.definition
+        }
+        if(!ctorInfos.singleton) {
+            return this._createInstance(ctorInfos)
+        }
+        const singletonInstance = this.#singletons.get(name)
+        if(singletonInstance) {
+            return singletonInstance
+        }
+        const newSingletonInstance = this._createInstance(ctorInfos)
+        this.#singletons.set(name, newSingletonInstance)
+        return newSingletonInstance
+    }
+
+    _getResolvedDependencies(service) {
+        let classDependencies = []
+        if(service.dependencies) {
+            classDependencies = service.dependencies.map(this.get.bind(this))
+        }
+        return classDependencies
+    }
+
+    _createInstance(service) {
+        if (!ServiceContainer.isClass(service.definition)) {
+            // Call as normal function.
+            return service.definition(...this._getResolvedDependencies(service))
+        }
+        // Use new
+        return new service.definition(...this._getResolvedDependencies(service))
+    }
+
+    static isClass(definition) {
+        return typeof definition === 'function' && Boolean(definition.prototype) && definition.prototype.constructor === definition
+    }
+    static isConstructor(definition) {
+        return typeof definition === 'function'
+    }
+}

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,45 @@
+(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")
+    
+    // save/restore the toggle state
+    autoScroll.addEventListener('click', (e) => {
+        localStorage.setItem('auto_scroll', autoScroll.checked)
+    })
+    autoScroll.checked = localStorage.getItem('auto_scroll') == "true"
+
+    // 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,94 @@
+(function () { "use strict"
+    if (typeof editorModifierTagsList !== 'object') {
+        console.error('editorModifierTagsList missing...')
+        return
+    }
+
+    const 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
+    const 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,65 @@
+(function () { "use strict"
+    if (typeof editorModifierTagsList !== 'object') {
+        console.error('editorModifierTagsList missing...')
+        return
+    }
+
+    // observe for changes in tag list
+    const 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/SpecRunner.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Jasmine Spec Runner v4.5.0</title>
+
+  <link rel="shortcut icon" type="image/png" href="./jasmine/jasmine_favicon.png">
+  <link rel="stylesheet" href="./jasmine/jasmine.css">
+
+  <script src="./jasmine/jasmine.js"></script>
+  <script src="./jasmine/jasmine-html.js"></script>
+  <script src="./jasmine/boot0.js"></script>
+  <!-- optional: include a file here that configures the Jasmine env -->
+  <script src="./jasmine/boot1.js"></script>
+
+  <!-- include source files here... -->
+  <script src="/media/js/utils.js?v=4"></script>
+  <script src="/media/js/engine.js?v=1"></script>
+  <!-- <script src="./engine.js?v=1"></script> -->
+  <script src="/media/js/plugins.js?v=1"></script>
+
+  <!-- include spec files here... -->
+  <script src="./jasmineSpec.js"></script>
+
+</head>
+
+<body>
+</body>
+</html>

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/jasmine/boot0.js

@@ -0,0 +1,64 @@
+/*
+Copyright (c) 2008-2022 Pivotal Labs
+
+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.
+*/
+/**
+ This file starts the process of "booting" Jasmine. It initializes Jasmine,
+ makes its globals available, and creates the env. This file should be loaded
+ after `jasmine.js` and `jasmine_html.js`, but before `boot1.js` or any project
+ source files or spec files are loaded.
+ */
+(function() {
+  const jasmineRequire = window.jasmineRequire || require('./jasmine.js');
+
+  /**
+   * ## Require & Instantiate
+   *
+   * Require Jasmine's core files. Specifically, this requires and attaches all of Jasmine's code to the `jasmine` reference.
+   */
+  const jasmine = jasmineRequire.core(jasmineRequire),
+    global = jasmine.getGlobal();
+  global.jasmine = jasmine;
+
+  /**
+   * Since this is being run in a browser and the results should populate to an HTML page, require the HTML-specific Jasmine code, injecting the same reference.
+   */
+  jasmineRequire.html(jasmine);
+
+  /**
+   * Create the Jasmine environment. This is used to run all specs in a project.
+   */
+  const env = jasmine.getEnv();
+
+  /**
+   * ## The Global Interface
+   *
+   * Build up the functions that will be exposed as the Jasmine public interface. A project can customize, rename or alias any of these functions as desired, provided the implementation remains unchanged.
+   */
+  const jasmineInterface = jasmineRequire.interface(jasmine, env);
+
+  /**
+   * Add all of the Jasmine global/public interface to the global scope, so a project can use the public interface directly. For example, calling `describe` in specs instead of `jasmine.getEnv().describe`.
+   */
+  for (const property in jasmineInterface) {
+    global[property] = jasmineInterface[property];
+  }
+})();

ui/plugins/ui/jasmine/boot1.js

@@ -0,0 +1,132 @@
+/*
+Copyright (c) 2008-2022 Pivotal Labs
+
+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.
+*/
+/**
+ This file finishes 'booting' Jasmine, performing all of the necessary
+ initialization before executing the loaded environment and all of a project's
+ specs. This file should be loaded after `boot0.js` but before any project
+ source files or spec files are loaded. Thus this file can also be used to
+ customize Jasmine for a project.
+
+ If a project is using Jasmine via the standalone distribution, this file can
+ be customized directly. If you only wish to configure the Jasmine env, you
+ can load another file that calls `jasmine.getEnv().configure({...})`
+ after `boot0.js` is loaded and before this file is loaded.
+ */
+
+(function() {
+  const env = jasmine.getEnv();
+
+  /**
+   * ## Runner Parameters
+   *
+   * More browser specific code - wrap the query string in an object and to allow for getting/setting parameters from the runner user interface.
+   */
+
+  const queryString = new jasmine.QueryString({
+    getWindowLocation: function() {
+      return window.location;
+    }
+  });
+
+  const filterSpecs = !!queryString.getParam('spec');
+
+  const config = {
+    stopOnSpecFailure: queryString.getParam('stopOnSpecFailure'),
+    stopSpecOnExpectationFailure: queryString.getParam(
+      'stopSpecOnExpectationFailure'
+    ),
+    hideDisabled: queryString.getParam('hideDisabled')
+  };
+
+  const random = queryString.getParam('random');
+
+  if (random !== undefined && random !== '') {
+    config.random = random;
+  }
+
+  const seed = queryString.getParam('seed');
+  if (seed) {
+    config.seed = seed;
+  }
+
+  /**
+   * ## Reporters
+   * The `HtmlReporter` builds all of the HTML UI for the runner page. This reporter paints the dots, stars, and x's for specs, as well as all spec names and all failures (if any).
+   */
+  const htmlReporter = new jasmine.HtmlReporter({
+    env: env,
+    navigateWithNewParam: function(key, value) {
+      return queryString.navigateWithNewParam(key, value);
+    },
+    addToExistingQueryString: function(key, value) {
+      return queryString.fullStringWithNewParam(key, value);
+    },
+    getContainer: function() {
+      return document.body;
+    },
+    createElement: function() {
+      return document.createElement.apply(document, arguments);
+    },
+    createTextNode: function() {
+      return document.createTextNode.apply(document, arguments);
+    },
+    timer: new jasmine.Timer(),
+    filterSpecs: filterSpecs
+  });
+
+  /**
+   * The `jsApiReporter` also receives spec results, and is used by any environment that needs to extract the results  from JavaScript.
+   */
+  env.addReporter(jsApiReporter);
+  env.addReporter(htmlReporter);
+
+  /**
+   * Filter which specs will be run by matching the start of the full name against the `spec` query param.
+   */
+  const specFilter = new jasmine.HtmlSpecFilter({
+    filterString: function() {
+      return queryString.getParam('spec');
+    }
+  });
+
+  config.specFilter = function(spec) {
+    return specFilter.matches(spec.getFullName());
+  };
+
+  env.configure(config);
+
+  /**
+   * ## Execution
+   *
+   * Replace the browser window's `onload`, ensure it's called, and then run all of the loaded specs. This includes initializing the `HtmlReporter` instance and then executing the loaded Jasmine environment. All of this will happen after all of the specs are loaded.
+   */
+  const currentWindowOnload = window.onload;
+
+  window.onload = function() {
+    if (currentWindowOnload) {
+      currentWindowOnload();
+    }
+    htmlReporter.initialize();
+    env.execute();
+  };
+})();

ui/plugins/ui/jasmine/jasmine-html.js

@@ -0,0 +1,964 @@
+/*
+Copyright (c) 2008-2022 Pivotal Labs
+
+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.
+*/
+// eslint-disable-next-line no-var
+var jasmineRequire = window.jasmineRequire || require('./jasmine.js');
+
+jasmineRequire.html = function(j$) {
+  j$.ResultsNode = jasmineRequire.ResultsNode();
+  j$.HtmlReporter = jasmineRequire.HtmlReporter(j$);
+  j$.QueryString = jasmineRequire.QueryString();
+  j$.HtmlSpecFilter = jasmineRequire.HtmlSpecFilter();
+};
+
+jasmineRequire.HtmlReporter = function(j$) {
+  function ResultsStateBuilder() {
+    this.topResults = new j$.ResultsNode({}, '', null);
+    this.currentParent = this.topResults;
+    this.specsExecuted = 0;
+    this.failureCount = 0;
+    this.pendingSpecCount = 0;
+  }
+
+  ResultsStateBuilder.prototype.suiteStarted = function(result) {
+    this.currentParent.addChild(result, 'suite');
+    this.currentParent = this.currentParent.last();
+  };
+
+  ResultsStateBuilder.prototype.suiteDone = function(result) {
+    this.currentParent.updateResult(result);
+    if (this.currentParent !== this.topResults) {
+      this.currentParent = this.currentParent.parent;
+    }
+
+    if (result.status === 'failed') {
+      this.failureCount++;
+    }
+  };
+
+  ResultsStateBuilder.prototype.specStarted = function(result) {};
+
+  ResultsStateBuilder.prototype.specDone = function(result) {
+    this.currentParent.addChild(result, 'spec');
+
+    if (result.status !== 'excluded') {
+      this.specsExecuted++;
+    }
+
+    if (result.status === 'failed') {
+      this.failureCount++;
+    }
+
+    if (result.status == 'pending') {
+      this.pendingSpecCount++;
+    }
+  };
+
+  ResultsStateBuilder.prototype.jasmineDone = function(result) {
+    if (result.failedExpectations) {
+      this.failureCount += result.failedExpectations.length;
+    }
+  };
+
+  function HtmlReporter(options) {
+    function config() {
+      return (options.env && options.env.configuration()) || {};
+    }
+
+    const getContainer = options.getContainer;
+    const createElement = options.createElement;
+    const createTextNode = options.createTextNode;
+    const navigateWithNewParam = options.navigateWithNewParam || function() {};
+    const addToExistingQueryString =
+      options.addToExistingQueryString || defaultQueryString;
+    const filterSpecs = options.filterSpecs;
+    let htmlReporterMain;
+    let symbols;
+    const deprecationWarnings = [];
+    const failures = [];
+
+    this.initialize = function() {
+      clearPrior();
+      htmlReporterMain = createDom(
+        'div',
+        { className: 'jasmine_html-reporter' },
+        createDom(
+          'div',
+          { className: 'jasmine-banner' },
+          createDom('a', {
+            className: 'jasmine-title',
+            href: 'http://jasmine.github.io/',
+            target: '_blank'
+          }),
+          createDom('span', { className: 'jasmine-version' }, j$.version)
+        ),
+        createDom('ul', { className: 'jasmine-symbol-summary' }),
+        createDom('div', { className: 'jasmine-alert' }),
+        createDom(
+          'div',
+          { className: 'jasmine-results' },
+          createDom('div', { className: 'jasmine-failures' })
+        )
+      );
+      getContainer().appendChild(htmlReporterMain);
+    };
+
+    let totalSpecsDefined;
+    this.jasmineStarted = function(options) {
+      totalSpecsDefined = options.totalSpecsDefined || 0;
+    };
+
+    const summary = createDom('div', { className: 'jasmine-summary' });
+
+    const stateBuilder = new ResultsStateBuilder();
+
+    this.suiteStarted = function(result) {
+      stateBuilder.suiteStarted(result);
+    };
+
+    this.suiteDone = function(result) {
+      stateBuilder.suiteDone(result);
+
+      if (result.status === 'failed') {
+        failures.push(failureDom(result));
+      }
+      addDeprecationWarnings(result, 'suite');
+    };
+
+    this.specStarted = function(result) {
+      stateBuilder.specStarted(result);
+    };
+
+    this.specDone = function(result) {
+      stateBuilder.specDone(result);
+
+      if (noExpectations(result)) {
+        const noSpecMsg = "Spec '" + result.fullName + "' has no expectations.";
+        if (result.status === 'failed') {
+          console.error(noSpecMsg);
+        } else {
+          console.warn(noSpecMsg);
+        }
+      }
+
+      if (!symbols) {
+        symbols = find('.jasmine-symbol-summary');
+      }
+
+      symbols.appendChild(
+        createDom('li', {
+          className: this.displaySpecInCorrectFormat(result),
+          id: 'spec_' + result.id,
+          title: result.fullName
+        })
+      );
+
+      if (result.status === 'failed') {
+        failures.push(failureDom(result));
+      }
+
+      addDeprecationWarnings(result, 'spec');
+    };
+
+    this.displaySpecInCorrectFormat = function(result) {
+      return noExpectations(result) && result.status === 'passed'
+        ? 'jasmine-empty'
+        : this.resultStatus(result.status);
+    };
+
+    this.resultStatus = function(status) {
+      if (status === 'excluded') {
+        return config().hideDisabled
+          ? 'jasmine-excluded-no-display'
+          : 'jasmine-excluded';
+      }
+      return 'jasmine-' + status;
+    };
+
+    this.jasmineDone = function(doneResult) {
+      stateBuilder.jasmineDone(doneResult);
+      const banner = find('.jasmine-banner');
+      const alert = find('.jasmine-alert');
+      const order = doneResult && doneResult.order;
+
+      alert.appendChild(
+        createDom(
+          'span',
+          { className: 'jasmine-duration' },
+          'finished in ' + doneResult.totalTime / 1000 + 's'
+        )
+      );
+
+      banner.appendChild(optionsMenu(config()));
+
+      if (stateBuilder.specsExecuted < totalSpecsDefined) {
+        const skippedMessage =
+          'Ran ' +
+          stateBuilder.specsExecuted +
+          ' of ' +
+          totalSpecsDefined +
+          ' specs - run all';
+        // include window.location.pathname to fix issue with karma-jasmine-html-reporter in angular: see https://github.com/jasmine/jasmine/issues/1906
+        const skippedLink =
+          (window.location.pathname || '') +
+          addToExistingQueryString('spec', '');
+        alert.appendChild(
+          createDom(
+            'span',
+            { className: 'jasmine-bar jasmine-skipped' },
+            createDom(
+              'a',
+              { href: skippedLink, title: 'Run all specs' },
+              skippedMessage
+            )
+          )
+        );
+      }
+      let statusBarMessage = '';
+      let statusBarClassName = 'jasmine-overall-result jasmine-bar ';
+      const globalFailures =
+        (doneResult && doneResult.failedExpectations) || [];
+      const failed = stateBuilder.failureCount + globalFailures.length > 0;
+
+      if (totalSpecsDefined > 0 || failed) {
+        statusBarMessage +=
+          pluralize('spec', stateBuilder.specsExecuted) +
+          ', ' +
+          pluralize('failure', stateBuilder.failureCount);
+        if (stateBuilder.pendingSpecCount) {
+          statusBarMessage +=
+            ', ' + pluralize('pending spec', stateBuilder.pendingSpecCount);
+        }
+      }
+
+      if (doneResult.overallStatus === 'passed') {
+        statusBarClassName += ' jasmine-passed ';
+      } else if (doneResult.overallStatus === 'incomplete') {
+        statusBarClassName += ' jasmine-incomplete ';
+        statusBarMessage =
+          'Incomplete: ' +
+          doneResult.incompleteReason +
+          ', ' +
+          statusBarMessage;
+      } else {
+        statusBarClassName += ' jasmine-failed ';
+      }
+
+      let seedBar;
+      if (order && order.random) {
+        seedBar = createDom(
+          'span',
+          { className: 'jasmine-seed-bar' },
+          ', randomized with seed ',
+          createDom(
+            'a',
+            {
+              title: 'randomized with seed ' + order.seed,
+              href: seedHref(order.seed)
+            },
+            order.seed
+          )
+        );
+      }
+
+      alert.appendChild(
+        createDom(
+          'span',
+          { className: statusBarClassName },
+          statusBarMessage,
+          seedBar
+        )
+      );
+
+      const errorBarClassName = 'jasmine-bar jasmine-errored';
+      const afterAllMessagePrefix = 'AfterAll ';
+
+      for (let i = 0; i < globalFailures.length; i++) {
+        alert.appendChild(
+          createDom(
+            'span',
+            { className: errorBarClassName },
+            globalFailureMessage(globalFailures[i])
+          )
+        );
+      }
+
+      function globalFailureMessage(failure) {
+        if (failure.globalErrorType === 'load') {
+          const prefix = 'Error during loading: ' + failure.message;
+
+          if (failure.filename) {
+            return (
+              prefix + ' in ' + failure.filename + ' line ' + failure.lineno
+            );
+          } else {
+            return prefix;
+          }
+        } else if (failure.globalErrorType === 'afterAll') {
+          return afterAllMessagePrefix + failure.message;
+        } else {
+          return failure.message;
+        }
+      }
+
+      addDeprecationWarnings(doneResult);
+
+      for (let i = 0; i < deprecationWarnings.length; i++) {
+        const children = [];
+        let context;
+
+        switch (deprecationWarnings[i].runnableType) {
+          case 'spec':
+            context = '(in spec: ' + deprecationWarnings[i].runnableName + ')';
+            break;
+          case 'suite':
+            context = '(in suite: ' + deprecationWarnings[i].runnableName + ')';
+            break;
+          default:
+            context = '';
+        }
+
+        deprecationWarnings[i].message.split('\n').forEach(function(line) {
+          children.push(line);
+          children.push(createDom('br'));
+        });
+
+        children[0] = 'DEPRECATION: ' + children[0];
+        children.push(context);
+
+        if (deprecationWarnings[i].stack) {
+          children.push(createExpander(deprecationWarnings[i].stack));
+        }
+
+        alert.appendChild(
+          createDom(
+            'span',
+            { className: 'jasmine-bar jasmine-warning' },
+            children
+          )
+        );
+      }
+
+      const results = find('.jasmine-results');
+      results.appendChild(summary);
+
+      summaryList(stateBuilder.topResults, summary);
+
+      if (failures.length) {
+        alert.appendChild(
+          createDom(
+            'span',
+            { className: 'jasmine-menu jasmine-bar jasmine-spec-list' },
+            createDom('span', {}, 'Spec List | '),
+            createDom(
+              'a',
+              { className: 'jasmine-failures-menu', href: '#' },
+              'Failures'
+            )
+          )
+        );
+        alert.appendChild(
+          createDom(
+            'span',
+            { className: 'jasmine-menu jasmine-bar jasmine-failure-list' },
+            createDom(
+              'a',
+              { className: 'jasmine-spec-list-menu', href: '#' },
+              'Spec List'
+            ),
+            createDom('span', {}, ' | Failures ')
+          )
+        );
+
+        find('.jasmine-failures-menu').onclick = function() {
+          setMenuModeTo('jasmine-failure-list');
+          return false;
+        };
+        find('.jasmine-spec-list-menu').onclick = function() {
+          setMenuModeTo('jasmine-spec-list');
+          return false;
+        };
+
+        setMenuModeTo('jasmine-failure-list');
+
+        const failureNode = find('.jasmine-failures');
+        for (let i = 0; i < failures.length; i++) {
+          failureNode.appendChild(failures[i]);
+        }
+      }
+    };
+
+    return this;
+
+    function failureDom(result) {
+      const failure = createDom(
+        'div',
+        { className: 'jasmine-spec-detail jasmine-failed' },
+        failureDescription(result, stateBuilder.currentParent),
+        createDom('div', { className: 'jasmine-messages' })
+      );
+      const messages = failure.childNodes[1];
+
+      for (let i = 0; i < result.failedExpectations.length; i++) {
+        const expectation = result.failedExpectations[i];
+        messages.appendChild(
+          createDom(
+            'div',
+            { className: 'jasmine-result-message' },
+            expectation.message
+          )
+        );
+        messages.appendChild(
+          createDom(
+            'div',
+            { className: 'jasmine-stack-trace' },
+            expectation.stack
+          )
+        );
+      }
+
+      if (result.failedExpectations.length === 0) {
+        messages.appendChild(
+          createDom(
+            'div',
+            { className: 'jasmine-result-message' },
+            'Spec has no expectations'
+          )
+        );
+      }
+
+      if (result.debugLogs) {
+        messages.appendChild(debugLogTable(result.debugLogs));
+      }
+
+      return failure;
+    }
+
+    function debugLogTable(debugLogs) {
+      const tbody = createDom('tbody');
+
+      debugLogs.forEach(function(entry) {
+        tbody.appendChild(
+          createDom(
+            'tr',
+            {},
+            createDom('td', {}, entry.timestamp.toString()),
+            createDom('td', {}, entry.message)
+          )
+        );
+      });
+
+      return createDom(
+        'div',
+        { className: 'jasmine-debug-log' },
+        createDom(
+          'div',
+          { className: 'jasmine-debug-log-header' },
+          'Debug logs'
+        ),
+        createDom(
+          'table',
+          {},
+          createDom(
+            'thead',
+            {},
+            createDom(
+              'tr',
+              {},
+              createDom('th', {}, 'Time (ms)'),
+              createDom('th', {}, 'Message')
+            )
+          ),
+          tbody
+        )
+      );
+    }
+
+    function summaryList(resultsTree, domParent) {
+      let specListNode;
+      for (let i = 0; i < resultsTree.children.length; i++) {
+        const resultNode = resultsTree.children[i];
+        if (filterSpecs && !hasActiveSpec(resultNode)) {
+          continue;
+        }
+        if (resultNode.type === 'suite') {
+          const suiteListNode = createDom(
+            'ul',
+            { className: 'jasmine-suite', id: 'suite-' + resultNode.result.id },
+            createDom(
+              'li',
+              {
+                className:
+                  'jasmine-suite-detail jasmine-' + resultNode.result.status
+              },
+              createDom(
+                'a',
+                { href: specHref(resultNode.result) },
+                resultNode.result.description
+              )
+            )
+          );
+
+          summaryList(resultNode, suiteListNode);
+          domParent.appendChild(suiteListNode);
+        }
+        if (resultNode.type === 'spec') {
+          if (domParent.getAttribute('class') !== 'jasmine-specs') {
+            specListNode = createDom('ul', { className: 'jasmine-specs' });
+            domParent.appendChild(specListNode);
+          }
+          let specDescription = resultNode.result.description;
+          if (noExpectations(resultNode.result)) {
+            specDescription = 'SPEC HAS NO EXPECTATIONS ' + specDescription;
+          }
+          if (
+            resultNode.result.status === 'pending' &&
+            resultNode.result.pendingReason !== ''
+          ) {
+            specDescription =
+              specDescription +
+              ' PENDING WITH MESSAGE: ' +
+              resultNode.result.pendingReason;
+          }
+          specListNode.appendChild(
+            createDom(
+              'li',
+              {
+                className: 'jasmine-' + resultNode.result.status,
+                id: 'spec-' + resultNode.result.id
+              },
+              createDom(
+                'a',
+                { href: specHref(resultNode.result) },
+                specDescription
+              )
+            )
+          );
+        }
+      }
+    }
+
+    function optionsMenu(config) {
+      const optionsMenuDom = createDom(
+        'div',
+        { className: 'jasmine-run-options' },
+        createDom('span', { className: 'jasmine-trigger' }, 'Options'),
+        createDom(
+          'div',
+          { className: 'jasmine-payload' },
+          createDom(
+            'div',
+            { className: 'jasmine-stop-on-failure' },
+            createDom('input', {
+              className: 'jasmine-fail-fast',
+              id: 'jasmine-fail-fast',
+              type: 'checkbox'
+            }),
+            createDom(
+              'label',
+              { className: 'jasmine-label', for: 'jasmine-fail-fast' },
+              'stop execution on spec failure'
+            )
+          ),
+          createDom(
+            'div',
+            { className: 'jasmine-throw-failures' },
+            createDom('input', {
+              className: 'jasmine-throw',
+              id: 'jasmine-throw-failures',
+              type: 'checkbox'
+            }),
+            createDom(
+              'label',
+              { className: 'jasmine-label', for: 'jasmine-throw-failures' },
+              'stop spec on expectation failure'
+            )
+          ),
+          createDom(
+            'div',
+            { className: 'jasmine-random-order' },
+            createDom('input', {
+              className: 'jasmine-random',
+              id: 'jasmine-random-order',
+              type: 'checkbox'
+            }),
+            createDom(
+              'label',
+              { className: 'jasmine-label', for: 'jasmine-random-order' },
+              'run tests in random order'
+            )
+          ),
+          createDom(
+            'div',
+            { className: 'jasmine-hide-disabled' },
+            createDom('input', {
+              className: 'jasmine-disabled',
+              id: 'jasmine-hide-disabled',
+              type: 'checkbox'
+            }),
+            createDom(
+              'label',
+              { className: 'jasmine-label', for: 'jasmine-hide-disabled' },
+              'hide disabled tests'
+            )
+          )
+        )
+      );
+
+      const failFastCheckbox = optionsMenuDom.querySelector(
+        '#jasmine-fail-fast'
+      );
+      failFastCheckbox.checked = config.stopOnSpecFailure;
+      failFastCheckbox.onclick = function() {
+        navigateWithNewParam('stopOnSpecFailure', !config.stopOnSpecFailure);
+      };
+
+      const throwCheckbox = optionsMenuDom.querySelector(
+        '#jasmine-throw-failures'
+      );
+      throwCheckbox.checked = config.stopSpecOnExpectationFailure;
+      throwCheckbox.onclick = function() {
+        navigateWithNewParam(
+          'stopSpecOnExpectationFailure',
+          !config.stopSpecOnExpectationFailure
+        );
+      };
+
+      const randomCheckbox = optionsMenuDom.querySelector(
+        '#jasmine-random-order'
+      );
+      randomCheckbox.checked = config.random;
+      randomCheckbox.onclick = function() {
+        navigateWithNewParam('random', !config.random);
+      };
+
+      const hideDisabled = optionsMenuDom.querySelector(
+        '#jasmine-hide-disabled'
+      );
+      hideDisabled.checked = config.hideDisabled;
+      hideDisabled.onclick = function() {
+        navigateWithNewParam('hideDisabled', !config.hideDisabled);
+      };
+
+      const optionsTrigger = optionsMenuDom.querySelector('.jasmine-trigger'),
+        optionsPayload = optionsMenuDom.querySelector('.jasmine-payload'),
+        isOpen = /\bjasmine-open\b/;
+
+      optionsTrigger.onclick = function() {
+        if (isOpen.test(optionsPayload.className)) {
+          optionsPayload.className = optionsPayload.className.replace(
+            isOpen,
+            ''
+          );
+        } else {
+          optionsPayload.className += ' jasmine-open';
+        }
+      };
+
+      return optionsMenuDom;
+    }
+
+    function failureDescription(result, suite) {
+      const wrapper = createDom(
+        'div',
+        { className: 'jasmine-description' },
+        createDom(
+          'a',
+          { title: result.description, href: specHref(result) },
+          result.description
+        )
+      );
+      let suiteLink;
+
+      while (suite && suite.parent) {
+        wrapper.insertBefore(createTextNode(' > '), wrapper.firstChild);
+        suiteLink = createDom(
+          'a',
+          { href: suiteHref(suite) },
+          suite.result.description
+        );
+        wrapper.insertBefore(suiteLink, wrapper.firstChild);
+
+        suite = suite.parent;
+      }
+
+      return wrapper;
+    }
+
+    function suiteHref(suite) {
+      const els = [];
+
+      while (suite && suite.parent) {
+        els.unshift(suite.result.description);
+        suite = suite.parent;
+      }
+
+      // include window.location.pathname to fix issue with karma-jasmine-html-reporter in angular: see https://github.com/jasmine/jasmine/issues/1906
+      return (
+        (window.location.pathname || '') +
+        addToExistingQueryString('spec', els.join(' '))
+      );
+    }
+
+    function addDeprecationWarnings(result, runnableType) {
+      if (result && result.deprecationWarnings) {
+        for (let i = 0; i < result.deprecationWarnings.length; i++) {
+          const warning = result.deprecationWarnings[i].message;
+          deprecationWarnings.push({
+            message: warning,
+            stack: result.deprecationWarnings[i].stack,
+            runnableName: result.fullName,
+            runnableType: runnableType
+          });
+        }
+      }
+    }
+
+    function createExpander(stackTrace) {
+      const expandLink = createDom('a', { href: '#' }, 'Show stack trace');
+      const root = createDom(
+        'div',
+        { className: 'jasmine-expander' },
+        expandLink,
+        createDom(
+          'div',
+          { className: 'jasmine-expander-contents jasmine-stack-trace' },
+          stackTrace
+        )
+      );
+
+      expandLink.addEventListener('click', function(e) {
+        e.preventDefault();
+
+        if (root.classList.contains('jasmine-expanded')) {
+          root.classList.remove('jasmine-expanded');
+          expandLink.textContent = 'Show stack trace';
+        } else {
+          root.classList.add('jasmine-expanded');
+          expandLink.textContent = 'Hide stack trace';
+        }
+      });
+
+      return root;
+    }
+
+    function find(selector) {
+      return getContainer().querySelector('.jasmine_html-reporter ' + selector);
+    }
+
+    function clearPrior() {
+      const oldReporter = find('');
+
+      if (oldReporter) {
+        getContainer().removeChild(oldReporter);
+      }
+    }
+
+    function createDom(type, attrs, childrenArrayOrVarArgs) {
+      const el = createElement(type);
+      let children;
+
+      if (j$.isArray_(childrenArrayOrVarArgs)) {
+        children = childrenArrayOrVarArgs;
+      } else {
+        children = [];
+
+        for (let i = 2; i < arguments.length; i++) {
+          children.push(arguments[i]);
+        }
+      }
+
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+
+        if (typeof child === 'string') {
+          el.appendChild(createTextNode(child));
+        } else {
+          if (child) {
+            el.appendChild(child);
+          }
+        }
+      }
+
+      for (const attr in attrs) {
+        if (attr == 'className') {
+          el[attr] = attrs[attr];
+        } else {
+          el.setAttribute(attr, attrs[attr]);
+        }
+      }
+
+      return el;
+    }
+
+    function pluralize(singular, count) {
+      const word = count == 1 ? singular : singular + 's';
+
+      return '' + count + ' ' + word;
+    }
+
+    function specHref(result) {
+      // include window.location.pathname to fix issue with karma-jasmine-html-reporter in angular: see https://github.com/jasmine/jasmine/issues/1906
+      return (
+        (window.location.pathname || '') +
+        addToExistingQueryString('spec', result.fullName)
+      );
+    }
+
+    function seedHref(seed) {
+      // include window.location.pathname to fix issue with karma-jasmine-html-reporter in angular: see https://github.com/jasmine/jasmine/issues/1906
+      return (
+        (window.location.pathname || '') +
+        addToExistingQueryString('seed', seed)
+      );
+    }
+
+    function defaultQueryString(key, value) {
+      return '?' + key + '=' + value;
+    }
+
+    function setMenuModeTo(mode) {
+      htmlReporterMain.setAttribute('class', 'jasmine_html-reporter ' + mode);
+    }
+
+    function noExpectations(result) {
+      const allExpectations =
+        result.failedExpectations.length + result.passedExpectations.length;
+
+      return (
+        allExpectations === 0 &&
+        (result.status === 'passed' || result.status === 'failed')
+      );
+    }
+
+    function hasActiveSpec(resultNode) {
+      if (resultNode.type == 'spec' && resultNode.result.status != 'excluded') {
+        return true;
+      }
+
+      if (resultNode.type == 'suite') {
+        for (let i = 0, j = resultNode.children.length; i < j; i++) {
+          if (hasActiveSpec(resultNode.children[i])) {
+            return true;
+          }
+        }
+      }
+    }
+  }
+
+  return HtmlReporter;
+};
+
+jasmineRequire.HtmlSpecFilter = function() {
+  function HtmlSpecFilter(options) {
+    const filterString =
+      options &&
+      options.filterString() &&
+      options.filterString().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+    const filterPattern = new RegExp(filterString);
+
+    this.matches = function(specName) {
+      return filterPattern.test(specName);
+    };
+  }
+
+  return HtmlSpecFilter;
+};
+
+jasmineRequire.ResultsNode = function() {
+  function ResultsNode(result, type, parent) {
+    this.result = result;
+    this.type = type;
+    this.parent = parent;
+
+    this.children = [];
+
+    this.addChild = function(result, type) {
+      this.children.push(new ResultsNode(result, type, this));
+    };
+
+    this.last = function() {
+      return this.children[this.children.length - 1];
+    };
+
+    this.updateResult = function(result) {
+      this.result = result;
+    };
+  }
+
+  return ResultsNode;
+};
+
+jasmineRequire.QueryString = function() {
+  function QueryString(options) {
+    this.navigateWithNewParam = function(key, value) {
+      options.getWindowLocation().search = this.fullStringWithNewParam(
+        key,
+        value
+      );
+    };
+
+    this.fullStringWithNewParam = function(key, value) {
+      const paramMap = queryStringToParamMap();
+      paramMap[key] = value;
+      return toQueryString(paramMap);
+    };
+
+    this.getParam = function(key) {
+      return queryStringToParamMap()[key];
+    };
+
+    return this;
+
+    function toQueryString(paramMap) {
+      const qStrPairs = [];
+      for (const prop in paramMap) {
+        qStrPairs.push(
+          encodeURIComponent(prop) + '=' + encodeURIComponent(paramMap[prop])
+        );
+      }
+      return '?' + qStrPairs.join('&');
+    }
+
+    function queryStringToParamMap() {
+      const paramStr = options.getWindowLocation().search.substring(1);
+      let params = [];
+      const paramMap = {};
+
+      if (paramStr.length > 0) {
+        params = paramStr.split('&');
+        for (let i = 0; i < params.length; i++) {
+          const p = params[i].split('=');
+          let value = decodeURIComponent(p[1]);
+          if (value === 'true' || value === 'false') {
+            value = JSON.parse(value);
+          }
+          paramMap[decodeURIComponent(p[0])] = value;
+        }
+      }
+
+      return paramMap;
+    }
+  }
+
+  return QueryString;
+};

ui/plugins/ui/jasmineSpec.js

@@ -0,0 +1,412 @@
+"use strict"
+
+const JASMINE_SESSION_ID = `jasmine-${String(Date.now()).slice(8)}`
+
+beforeEach(function () {
+    jasmine.DEFAULT_TIMEOUT_INTERVAL = 15 * 60 * 1000 // Test timeout after 15 minutes
+    jasmine.addMatchers({
+        toBeOneOf: function () {
+            return {
+                compare: function (actual, expected) {
+                    return {
+                        pass: expected.includes(actual)
+                    }
+                }
+            }
+        }
+    })
+})
+describe('stable-diffusion-ui', function() {
+    beforeEach(function() {
+        expect(typeof SD).toBe('object')
+        expect(typeof SD.serverState).toBe('object')
+        expect(typeof SD.serverState.status).toBe('string')
+    })
+    it('should be able to reach the backend', async function() {
+        expect(SD.serverState.status).toBe(SD.ServerStates.unavailable)
+        SD.sessionId = JASMINE_SESSION_ID
+        await SD.init()
+        expect(SD.isServerAvailable()).toBeTrue()
+    })
+
+    it('enfore the current task state', function() {
+        const task = new SD.Task()
+        expect(task.status).toBe(SD.TaskStatus.init)
+        expect(task.isPending).toBeTrue()
+
+        task._setStatus(SD.TaskStatus.pending)
+        expect(task.status).toBe(SD.TaskStatus.pending)
+        expect(task.isPending).toBeTrue()
+        expect(function() {
+            task._setStatus(SD.TaskStatus.init)
+        }).toThrowError()
+
+        task._setStatus(SD.TaskStatus.waiting)
+        expect(task.status).toBe(SD.TaskStatus.waiting)
+        expect(task.isPending).toBeTrue()
+        expect(function() {
+            task._setStatus(SD.TaskStatus.pending)
+        }).toThrowError()
+
+        task._setStatus(SD.TaskStatus.processing)
+        expect(task.status).toBe(SD.TaskStatus.processing)
+        expect(task.isPending).toBeTrue()
+        expect(function() {
+            task._setStatus(SD.TaskStatus.pending)
+        }).toThrowError()
+
+        task._setStatus(SD.TaskStatus.failed)
+        expect(task.status).toBe(SD.TaskStatus.failed)
+        expect(task.isPending).toBeFalse()
+        expect(function() {
+            task._setStatus(SD.TaskStatus.processing)
+        }).toThrowError()
+        expect(function() {
+            task._setStatus(SD.TaskStatus.completed)
+        }).toThrowError()
+    })
+    it('should be able to run tasks', async function() {
+        expect(typeof SD.Task.run).toBe('function')
+        const promiseGenerator = (function*(val) {
+            expect(val).toBe('start')
+            expect(yield 1 + 1).toBe(4)
+            expect(yield 2 + 2).toBe(8)
+            yield asyncDelay(500)
+            expect(yield 3 + 3).toBe(12)
+            expect(yield 4 + 4).toBe(16)
+            return 8 + 8
+        })('start')
+        const callback = function({value, done}) {
+            return {value: 2 * value, done}
+        }
+        expect(await SD.Task.run(promiseGenerator, {callback})).toBe(32)
+    })
+    it('should be able to queue tasks', async function() {
+        expect(typeof SD.Task.enqueue).toBe('function')
+        const promiseGenerator = (function*(val) {
+            expect(val).toBe('start')
+            expect(yield 1 + 1).toBe(4)
+            expect(yield 2 + 2).toBe(8)
+            yield asyncDelay(500)
+            expect(yield 3 + 3).toBe(12)
+            expect(yield 4 + 4).toBe(16)
+            return 8 + 8
+        })('start')
+        const callback = function({value, done}) {
+            return {value: 2 * value, done}
+        }
+        const gen = SD.Task.asGenerator({generator: promiseGenerator, callback})
+        expect(await SD.Task.enqueue(gen)).toBe(32)
+    })
+    it('should be able to chain handlers', async function() {
+        expect(typeof SD.Task.enqueue).toBe('function')
+        const promiseGenerator = (function*(val) {
+            expect(val).toBe('start')
+            expect(yield {test: '1'}).toEqual({test: '1', foo: 'bar'})
+            expect(yield 2 + 2).toEqual(8)
+            yield asyncDelay(500)
+            expect(yield 3 + 3).toEqual(12)
+            expect(yield {test: 4}).toEqual({test: 8, foo: 'bar'})
+            return {test: 8}
+        })('start')
+        const gen1 = SD.Task.asGenerator({generator: promiseGenerator, callback: function({value, done}) {
+            if (typeof value === "object") {
+                value['foo'] = 'bar'
+            }
+            return {value, done}
+        }})
+        const gen2 = SD.Task.asGenerator({generator: gen1, callback: function({value, done}) {
+            if (typeof value === 'number') {
+                value = 2 * value
+            }
+            if (typeof value === 'object' && typeof value.test === 'number') {
+                value.test = 2 * value.test
+            }
+            return {value, done}
+        }})
+        expect(await SD.Task.enqueue(gen2)).toEqual({test:32, foo: 'bar'})
+    })
+    describe('ServiceContainer', function() {
+        it('should be able to register providers', function() {
+            const cont = new ServiceContainer(
+                function foo() {
+                    this.bar = ''
+                },
+                function bar() {
+                    return () => 0
+                },
+                { name: 'zero', definition: 0 },
+                { name: 'ctx', definition: () => Object.create(null), singleton: true },
+                { name: 'test',
+                    definition: (ctx, missing, one, foo) => {
+                        expect(ctx).toEqual({ran: true})
+                        expect(one).toBe(1)
+                        expect(typeof foo).toBe('object')
+                        expect(foo.bar).toBeDefined()
+                        expect(typeof missing).toBe('undefined')
+                        return {foo: 'bar'}
+                    }, dependencies: ['ctx', 'missing', 'one', 'foo']
+                }
+            )
+            const fooObj = cont.get('foo')
+            expect(typeof fooObj).toBe('object')
+            fooObj.ran = true
+
+            const ctx = cont.get('ctx')
+            expect(ctx).toEqual({})
+            ctx.ran = true
+
+            const bar = cont.get('bar')
+            expect(typeof bar).toBe('function')
+            expect(bar()).toBe(0)
+
+            cont.register({name: 'one', definition: 1})
+            const test = cont.get('test')
+            expect(typeof test).toBe('object')
+            expect(test.foo).toBe('bar')
+        })
+    })
+    it('should be able to stream data in chunks', async function() {
+        expect(SD.isServerAvailable()).toBeTrue()
+        const nbr_steps = 15
+        let res = await fetch('/render', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                "prompt": "a photograph of an astronaut riding a horse",
+                "negative_prompt": "",
+                "width": 128,
+                "height": 128,
+                "seed": Math.floor(Math.random() * 10000000),
+
+                "sampler": "plms",
+                "use_stable_diffusion_model": "sd-v1-4",
+                "num_inference_steps": nbr_steps,
+                "guidance_scale": 7.5,
+
+                "numOutputsParallel": 1,
+                "stream_image_progress": true,
+                "show_only_filtered_image": true,
+                "output_format": "jpeg",
+
+                "session_id": JASMINE_SESSION_ID,
+            }),
+        })
+        expect(res.ok).toBeTruthy()
+        const renderRequest = await res.json()
+        expect(typeof renderRequest.stream).toBe('string')
+        expect(renderRequest.task).toBeDefined()
+
+        // Wait for server status to update.
+        await SD.waitUntil(() => {
+            console.log('Waiting for %s to be received...', renderRequest.task)
+            return (!SD.serverState.tasks || SD.serverState.tasks[String(renderRequest.task)])
+        }, 250, 10 * 60 * 1000)
+        // Wait for task to start on server.
+        await SD.waitUntil(() => {
+            console.log('Waiting for %s to start...', renderRequest.task)
+            return !SD.serverState.tasks || SD.serverState.tasks[String(renderRequest.task)] !== 'pending'
+        }, 250)
+
+        const reader = new SD.ChunkedStreamReader(renderRequest.stream)
+        const parseToString = reader.parse
+        reader.parse = function(value) {
+            value = parseToString.call(this, value)
+            if (!value || value.length <= 0) {
+                return
+            }
+            return reader.readStreamAsJSON(value.join(''))
+        }
+        reader.onNext = function({done, value}) {
+            console.log(value)
+            if (typeof value === 'object' && 'status' in value) {
+                done = true
+            }
+            return {done, value}
+        }
+        let lastUpdate = undefined
+        let stepCount = 0
+        let complete = false
+        //for await (const stepUpdate of reader) {
+        for await (const stepUpdate of reader.open()) {
+            console.log('ChunkedStreamReader received ', stepUpdate)
+            lastUpdate = stepUpdate
+            if (complete) {
+                expect(stepUpdate.status).toBe('succeeded')
+                expect(stepUpdate.output).toHaveSize(1)
+            } else {
+                expect(stepUpdate.total_steps).toBe(nbr_steps)
+                expect(stepUpdate.step).toBe(stepCount)
+                if (stepUpdate.step === stepUpdate.total_steps) {
+                    complete = true
+                } else {
+                    stepCount++
+                }
+            }
+        }
+        for(let i=1; i <= 5; ++i) {
+            res = await fetch(renderRequest.stream)
+            expect(res.ok).toBeTruthy()
+            const cachedResponse = await res.json()
+            console.log('Cache test %s received %o', i, cachedResponse)
+            expect(lastUpdate).toEqual(cachedResponse)
+        }
+    })
+
+    describe('should be able to make renders', function() {
+        beforeEach(function() {
+            expect(SD.isServerAvailable()).toBeTrue()
+        })
+        it('basic inline request', async function() {
+            let stepCount = 0
+            let complete = false
+            const result = await SD.render({
+                "prompt": "a photograph of an astronaut riding a horse",
+                "width": 128,
+                "height": 128,
+                "num_inference_steps": 10,
+                "show_only_filtered_image": false,
+                //"use_face_correction": 'GFPGANv1.3',
+                "use_upscale": "RealESRGAN_x4plus",
+                "session_id": JASMINE_SESSION_ID,
+            }, function(event) {
+                console.log(this, event)
+                if ('update' in event) {
+                    const stepUpdate = event.update
+                    if (complete || (stepUpdate.status && stepUpdate.step === stepUpdate.total_steps)) {
+                        expect(stepUpdate.status).toBe('succeeded')
+                        expect(stepUpdate.output).toHaveSize(2)
+                    } else {
+                        expect(stepUpdate.step).toBe(stepCount)
+                        if (stepUpdate.step === stepUpdate.total_steps) {
+                            complete = true
+                        } else {
+                            stepCount++
+                        }
+                    }
+                }
+            })
+            console.log(result)
+            expect(result.status).toBe('succeeded')
+            expect(result.output).toHaveSize(2)
+        })
+        it('post and reader request', async function() {
+            const renderTask = new SD.RenderTask({
+                "prompt": "a photograph of an astronaut riding a horse",
+                "width": 128,
+                "height": 128,
+                "seed": SD.MAX_SEED_VALUE,
+                "num_inference_steps": 10,
+                "session_id": JASMINE_SESSION_ID,
+            })
+            expect(renderTask.status).toBe(SD.TaskStatus.init)
+
+            const timeout = -1
+            const renderRequest = await renderTask.post(timeout)
+            expect(typeof renderRequest.stream).toBe('string')
+            expect(renderTask.status).toBe(SD.TaskStatus.waiting)
+            expect(renderTask.streamUrl).toBe(renderRequest.stream)
+
+            await renderTask.waitUntil({state: SD.TaskStatus.processing, callback: () => console.log('Waiting for render task to start...') })
+            expect(renderTask.status).toBe(SD.TaskStatus.processing)
+
+            let stepCount = 0
+            let complete = false
+            //for await (const stepUpdate of renderTask.reader) {
+            for await (const stepUpdate of renderTask.reader.open()) {
+                console.log(stepUpdate)
+                if (complete || (stepUpdate.status && stepUpdate.step === stepUpdate.total_steps)) {
+                    expect(stepUpdate.status).toBe('succeeded')
+                    expect(stepUpdate.output).toHaveSize(1)
+                } else {
+                    expect(stepUpdate.step).toBe(stepCount)
+                    if (stepUpdate.step === stepUpdate.total_steps) {
+                        complete = true
+                    } else {
+                        stepCount++
+                    }
+                }
+            }
+            expect(renderTask.status).toBe(SD.TaskStatus.completed)
+            expect(renderTask.result.status).toBe('succeeded')
+            expect(renderTask.result.output).toHaveSize(1)
+        })
+        it('queued request', async function() {
+            let stepCount = 0
+            let complete = false
+            const renderTask = new SD.RenderTask({
+                "prompt": "a photograph of an astronaut riding a horse",
+                "width": 128,
+                "height": 128,
+                "num_inference_steps": 10,
+                "show_only_filtered_image": false,
+                //"use_face_correction": 'GFPGANv1.3',
+                "use_upscale": "RealESRGAN_x4plus",
+                "session_id": JASMINE_SESSION_ID,
+            })
+            await renderTask.enqueue(function(event) {
+                console.log(this, event)
+                if ('update' in event) {
+                    const stepUpdate = event.update
+                    if (complete || (stepUpdate.status && stepUpdate.step === stepUpdate.total_steps)) {
+                        expect(stepUpdate.status).toBe('succeeded')
+                        expect(stepUpdate.output).toHaveSize(2)
+                    } else {
+                        expect(stepUpdate.step).toBe(stepCount)
+                        if (stepUpdate.step === stepUpdate.total_steps) {
+                            complete = true
+                        } else {
+                            stepCount++
+                        }
+                    }
+                }
+            })
+            console.log(renderTask.result)
+            expect(renderTask.result.status).toBe('succeeded')
+            expect(renderTask.result.output).toHaveSize(2)
+        })
+    })
+    describe('# Special cases', function() {
+        it('should throw an exception on set for invalid sessionId', function() {
+            expect(function() {
+                SD.sessionId = undefined
+            }).toThrowError("Can't set sessionId to undefined.")
+        })
+    })
+})
+
+const loadCompleted = window.onload
+let loadEvent = undefined
+window.onload = function(evt) {
+    loadEvent = evt
+}
+if (!PLUGINS.SELFTEST) {
+    PLUGINS.SELFTEST = {}
+}
+loadUIPlugins().then(function() {
+    console.log('loadCompleted', loadEvent)
+    describe('@Plugins', function() {
+        it('exposes hooks to overide', function() {
+            expect(typeof PLUGINS.IMAGE_INFO_BUTTONS).toBe('object')
+            expect(typeof PLUGINS.TASK_CREATE).toBe('object')
+        })
+        describe('supports selftests', function() { // Hook to allow plugins to define tests.
+            const pluginsTests = Object.keys(PLUGINS.SELFTEST).filter((key) => PLUGINS.SELFTEST.hasOwnProperty(key))
+            if (!pluginsTests || pluginsTests.length <= 0) {
+                it('but nothing loaded...', function() {
+                    expect(true).toBeTruthy()
+                })
+                return
+            }
+            for (const pTest of pluginsTests) {
+                describe(pTest, function() {
+                    const testFn = PLUGINS.SELFTEST[pTest]
+                    return Promise.resolve(testFn.call(jasmine, pTest))
+                })
+            }
+        })
+    })
+    loadCompleted.call(window, loadEvent)
+})

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,64 @@
+(function() {
+    // Register selftests when loaded by jasmine.
+    if (typeof PLUGINS?.SELFTEST === 'object') {
+        PLUGINS.SELFTEST["release-notes"] = function() {
+            it('should be able to fetch CHANGES.md', async function() {
+                let releaseNotes = await fetch(`https://raw.githubusercontent.com/cmdr2/stable-diffusion-ui/main/CHANGES.md`)
+                expect(releaseNotes.status).toBe(200)
+            })
+        }
+    }
+
+    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>
+    `)
+
+    const tabNews = document.querySelector('#tab-news')
+    if (tabNews) {
+        linkTabContents(tabNews)
+    }
+    const news = document.querySelector('#news')
+    if (!news) {
+        // news tab not found, dont exec plugin code.
+        return
+    }
+
+    document.querySelector('body').insertAdjacentHTML('beforeend', `
+        <style>
+        #tab-content-news .tab-content-inner {
+            max-width: 100%;
+            text-align: left;
+            padding: 10pt;
+        }
+        </style>
+    `)
+
+    loadScript('/media/js/marked.min.js').then(async function() {
+        let appConfig = await fetch('/get/app_config')
+        if (!appConfig.ok) {
+            console.error('[release-notes] Failed to get app_config.')
+            return
+        }
+        appConfig = await appConfig.json()
+
+        const updateBranch = appConfig.update_branch || 'main'
+
+        let releaseNotes = await fetch(`https://raw.githubusercontent.com/cmdr2/stable-diffusion-ui/${updateBranch}/CHANGES.md`)
+        if (!releaseNotes.ok) {
+            console.error('[release-notes] Failed to get CHANGES.md.')
+            return
+        }
+        releaseNotes = await releaseNotes.text()
+        news.innerHTML = marked.parse(releaseNotes)
+    })
+})()

ui/plugins/ui/selftest.plugin.js

@@ -0,0 +1,25 @@
+/* SD-UI Selftest Plugin.js
+ */
+(function() { "use strict"
+    const ID_PREFIX = "selftest-plugin"
+
+    const links = document.getElementById("community-links")
+    if (!links) {
+        console.error('%s the ID "community-links" cannot be found.', ID_PREFIX)
+        return
+    }
+
+    // Add link to Jasmine SpecRunner
+    const pluginLink = document.createElement('li')
+    const options = {
+        'stopSpecOnExpectationFailure': "true",
+        'stopOnSpecFailure': 'false',
+        'random': 'false',
+        'hideDisabled': 'false'
+    }
+    const optStr = Object.entries(options).map(([key, val]) => `${key}=${val}`).join('&')
+    pluginLink.innerHTML = `<a id="${ID_PREFIX}-starttest" href="${location.protocol}/plugins/core/SpecRunner.html?${optStr}" target="_blank"><i class="fa-solid fa-vial-circle-check"></i> Start SelfTest</a>`
+    links.appendChild(pluginLink)
+
+    console.log('%s loaded!', ID_PREFIX)
+})()

ui/sd_internal/__init__.py

@@ -1,6 +1,7 @@
 import json
 
 class Request:
+    request_id: str = None
     session_id: str = "session"
     prompt: str = ""
     negative_prompt: str = ""
@@ -23,8 +24,11 @@ class Request:
     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
+    use_hypernetwork_model: str = None
+    hypernetwork_strength: float = 1
     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
@@ -37,6 +41,7 @@ class Request:
             "num_outputs": self.num_outputs,
             "num_inference_steps": self.num_inference_steps,
             "guidance_scale": self.guidance_scale,
+            "hypernetwork_strengtgh": self.guidance_scale,
             "width": self.width,
             "height": self.height,
             "seed": self.seed,
@@ -46,7 +51,10 @@ class Request:
             "use_upscale": self.use_upscale,
             "use_stable_diffusion_model": self.use_stable_diffusion_model,
             "use_vae_model": self.use_vae_model,
+            "use_hypernetwork_model": self.use_hypernetwork_model,
+            "hypernetwork_strength": self.hypernetwork_strength,
             "output_format": self.output_format,
+            "output_quality": self.output_quality,
         }
 
     def __str__(self):
@@ -68,8 +76,11 @@ class Request:
     use_upscale: {self.use_upscale}
     use_stable_diffusion_model: {self.use_stable_diffusion_model}
     use_vae_model: {self.use_vae_model}
+    use_hypernetwork_model: {self.use_hypernetwork_model}
+    hypernetwork_strength: {self.hypernetwork_strength}
     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

@@ -101,7 +101,7 @@ def device_init(thread_data, 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)
+    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.

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/hypernetwork.py

@@ -0,0 +1,198 @@
+# this is basically a cut down version of https://github.com/AUTOMATIC1111/stable-diffusion-webui/blob/c9a2cfdf2a53d37c2de1908423e4f548088667ef/modules/hypernetworks/hypernetwork.py, mostly for feature parity
+# I, c0bra5, don't really understand how deep learning works. I just know how to port stuff.
+
+import inspect
+import torch
+import optimizedSD.splitAttention
+from . import runtime
+from einops import rearrange
+
+optimizer_dict = {optim_name : cls_obj for optim_name, cls_obj in inspect.getmembers(torch.optim, inspect.isclass) if optim_name != "Optimizer"}
+
+loaded_hypernetwork = None
+
+class HypernetworkModule(torch.nn.Module):
+    multiplier = 0.5
+    activation_dict = {
+        "linear": torch.nn.Identity,
+        "relu": torch.nn.ReLU,
+        "leakyrelu": torch.nn.LeakyReLU,
+        "elu": torch.nn.ELU,
+        "swish": torch.nn.Hardswish,
+        "tanh": torch.nn.Tanh,
+        "sigmoid": torch.nn.Sigmoid,
+    }
+    activation_dict.update({cls_name.lower(): cls_obj for cls_name, cls_obj in inspect.getmembers(torch.nn.modules.activation) if inspect.isclass(cls_obj) and cls_obj.__module__ == 'torch.nn.modules.activation'})
+
+    def __init__(self, dim, state_dict=None, layer_structure=None, activation_func=None, weight_init='Normal',
+                 add_layer_norm=False, use_dropout=False, activate_output=False, last_layer_dropout=False):
+        super().__init__()
+
+        assert layer_structure is not None, "layer_structure must not be None"
+        assert layer_structure[0] == 1, "Multiplier Sequence should start with size 1!"
+        assert layer_structure[-1] == 1, "Multiplier Sequence should end with size 1!"
+
+        linears = []
+        for i in range(len(layer_structure) - 1):
+
+            # Add a fully-connected layer
+            linears.append(torch.nn.Linear(int(dim * layer_structure[i]), int(dim * layer_structure[i+1])))
+
+            # Add an activation func except last layer
+            if activation_func == "linear" or activation_func is None or (i >= len(layer_structure) - 2 and not activate_output):
+                pass
+            elif activation_func in self.activation_dict:
+                linears.append(self.activation_dict[activation_func]())
+            else:
+                raise RuntimeError(f'hypernetwork uses an unsupported activation function: {activation_func}')
+
+            # Add layer normalization
+            if add_layer_norm:
+                linears.append(torch.nn.LayerNorm(int(dim * layer_structure[i+1])))
+
+            # Add dropout except last layer
+            if use_dropout and (i < len(layer_structure) - 3 or last_layer_dropout and i < len(layer_structure) - 2):
+                linears.append(torch.nn.Dropout(p=0.3))
+
+        self.linear = torch.nn.Sequential(*linears)
+
+        self.fix_old_state_dict(state_dict)
+        self.load_state_dict(state_dict)
+
+        self.to(runtime.thread_data.device)
+
+    def fix_old_state_dict(self, state_dict):
+        changes = {
+            'linear1.bias': 'linear.0.bias',
+            'linear1.weight': 'linear.0.weight',
+            'linear2.bias': 'linear.1.bias',
+            'linear2.weight': 'linear.1.weight',
+        }
+
+        for fr, to in changes.items():
+            x = state_dict.get(fr, None)
+            if x is None:
+                continue
+
+            del state_dict[fr]
+            state_dict[to] = x
+
+    def forward(self, x: torch.Tensor):
+        return x + self.linear(x) * runtime.thread_data.hypernetwork_strength
+
+def apply_hypernetwork(hypernetwork, context, layer=None):
+    hypernetwork_layers = hypernetwork.get(context.shape[2], None)
+
+    if hypernetwork_layers is None:
+        return context, context
+
+    if layer is not None:
+        layer.hyper_k = hypernetwork_layers[0]
+        layer.hyper_v = hypernetwork_layers[1]
+
+    context_k = hypernetwork_layers[0](context)
+    context_v = hypernetwork_layers[1](context)
+    return context_k, context_v
+
+def get_kv(context, hypernetwork):
+    if hypernetwork is None:
+        return context, context
+    else:
+        return apply_hypernetwork(runtime.thread_data.hypernetwork, context)
+
+# This might need updating as the optimisedSD code changes
+# I think yall have a system for this (patch files in sd_internal) but idk how it works and no amount of searching gave me any clue
+# just in case for attribution https://github.com/easydiffusion/diffusion-kit/blob/e8ea0cadd543056059cd951e76d4744de76327d2/optimizedSD/splitAttention.py#L171
+def new_cross_attention_forward(self, x, context=None, mask=None):
+    h = self.heads
+
+    q = self.to_q(x)
+    # default context
+    context = context if context is not None else x() if inspect.isfunction(x) else x
+    # hypernetwork!
+    context_k, context_v =  get_kv(context, runtime.thread_data.hypernetwork)
+    k = self.to_k(context_k)
+    v = self.to_v(context_v)
+    del context, x
+
+    q, k, v = map(lambda t: rearrange(t, 'b n (h d) -> (b h) n d', h=h), (q, k, v))
+
+
+    limit = k.shape[0]
+    att_step = self.att_step
+    q_chunks = list(torch.tensor_split(q, limit//att_step, dim=0))
+    k_chunks = list(torch.tensor_split(k, limit//att_step, dim=0))
+    v_chunks = list(torch.tensor_split(v, limit//att_step, dim=0))
+
+    q_chunks.reverse()
+    k_chunks.reverse()
+    v_chunks.reverse()
+    sim = torch.zeros(q.shape[0], q.shape[1], v.shape[2], device=q.device)
+    del k, q, v
+    for i in range (0, limit, att_step):
+
+        q_buffer = q_chunks.pop()
+        k_buffer = k_chunks.pop()
+        v_buffer = v_chunks.pop()
+        sim_buffer = torch.einsum('b i d, b j d -> b i j', q_buffer, k_buffer) * self.scale
+
+        del k_buffer, q_buffer
+        # attention, what we cannot get enough of, by chunks
+
+        sim_buffer = sim_buffer.softmax(dim=-1)
+
+        sim_buffer = torch.einsum('b i j, b j d -> b i d', sim_buffer, v_buffer)
+        del v_buffer
+        sim[i:i+att_step,:,:] = sim_buffer
+
+        del sim_buffer
+    sim = rearrange(sim, '(b h) n d -> b n (h d)', h=h)
+    return self.to_out(sim)
+
+
+def load_hypernetwork(path: str):
+
+    state_dict = torch.load(path, map_location='cpu')
+
+    layer_structure = state_dict.get('layer_structure', [1, 2, 1])
+    activation_func = state_dict.get('activation_func', None)
+    weight_init = state_dict.get('weight_initialization', 'Normal')
+    add_layer_norm = state_dict.get('is_layer_norm', False)
+    use_dropout = state_dict.get('use_dropout', False)
+    activate_output = state_dict.get('activate_output', True)
+    last_layer_dropout = state_dict.get('last_layer_dropout', False)
+    # this is a bit verbose so leaving it commented out for the poor soul who ever has to debug this
+    # print(f"layer_structure: {layer_structure}")
+    # print(f"activation_func: {activation_func}")
+    # print(f"weight_init: {weight_init}")
+    # print(f"add_layer_norm: {add_layer_norm}")
+    # print(f"use_dropout: {use_dropout}")
+    # print(f"activate_output: {activate_output}")
+    # print(f"last_layer_dropout: {last_layer_dropout}")
+
+    layers = {}
+    for size, sd in state_dict.items():
+        if type(size) == int:
+            layers[size] = (
+                HypernetworkModule(size, sd[0], layer_structure, activation_func, weight_init, add_layer_norm,
+                                   use_dropout, activate_output, last_layer_dropout=last_layer_dropout),
+                HypernetworkModule(size, sd[1], layer_structure, activation_func, weight_init, add_layer_norm,
+                                   use_dropout, activate_output, last_layer_dropout=last_layer_dropout),
+            )
+    print(f"hypernetwork loaded")
+    return layers
+
+
+
+# overriding of original function
+old_cross_attention_forward = optimizedSD.splitAttention.CrossAttention.forward
+# hijacks the cross attention forward function to add hyper network support
+def hijack_cross_attention():
+    print("hypernetwork functionality added to cross attention")
+    optimizedSD.splitAttention.CrossAttention.forward = new_cross_attention_forward
+# there was a cop on board
+def unhijack_cross_attention_forward():
+    print("hypernetwork functionality removed from cross attention")
+    optimizedSD.splitAttention.CrossAttention.forward = old_cross_attention_forward
+
+hijack_cross_attention()

ui/sd_internal/runtime.py

@@ -7,6 +7,7 @@ Notes:
 import json
 import os, re
 import traceback
+import queue
 import torch
 import numpy as np
 from gc import collect as gc_collect
@@ -21,13 +22,17 @@ from torch import autocast
 from contextlib import nullcontext
 from einops import rearrange, repeat
 from ldm.util import instantiate_from_config
-from optimizedSD.optimUtils import split_weighted_subprompts
 from transformers import logging
 
 from gfpgan import GFPGANer
 from basicsr.archs.rrdbnet_arch import RRDBNet
 from realesrgan import RealESRGANer
 
+from server import HYPERNETWORK_MODEL_EXTENSIONS# , STABLE_DIFFUSION_MODEL_EXTENSIONS, VAE_MODEL_EXTENSIONS
+
+from threading import Lock
+from safetensors.torch import load_file
+
 import uuid
 
 logging.set_verbosity_error()
@@ -35,7 +40,7 @@ logging.set_verbosity_error()
 # consts
 config_yaml = "optimizedSD/v1-inference.yaml"
 filename_regex = re.compile('[^a-zA-Z0-9]')
-force_gfpgan_to_cuda0 = True # workaround: gfpgan currently works only on cuda:0
+gfpgan_temp_device_lock = Lock() # workaround: gfpgan currently can only start on one device at a time.
 
 # api stuff
 from sd_internal import device_manager
@@ -54,12 +59,15 @@ def thread_init(device):
 
     thread_data.ckpt_file = None
     thread_data.vae_file = None
+    thread_data.hypernetwork_file = None
     thread_data.gfpgan_file = None
     thread_data.real_esrgan_file = None
 
     thread_data.model = None
     thread_data.modelCS = None
     thread_data.modelFS = None
+    thread_data.hypernetwork = None
+    thread_data.hypernetwork_strength = 1
     thread_data.model_gfpgan = None
     thread_data.model_real_esrgan = None
 
@@ -76,11 +84,32 @@ def thread_init(device):
     thread_data.force_full_precision = False
     thread_data.reduced_memory = True
 
+    thread_data.test_sd2 = isSD2()
+
     device_manager.device_init(thread_data, device)
 
+# temp hack, will remove soon
+def isSD2():
+    try:
+        SD_UI_DIR = os.getenv('SD_UI_PATH', None)
+        CONFIG_DIR = os.path.abspath(os.path.join(SD_UI_DIR, '..', 'scripts'))
+        config_json_path = os.path.join(CONFIG_DIR, 'config.json')
+        if not os.path.exists(config_json_path):
+            return False
+        with open(config_json_path, 'r', encoding='utf-8') as f:
+            config = json.load(f)
+            return config.get('test_sd2', False)
+    except Exception as e:
+        return False
+
 def load_model_ckpt():
     if not thread_data.ckpt_file: raise ValueError(f'Thread ckpt_file is undefined.')
-    if not os.path.exists(thread_data.ckpt_file + '.ckpt'): raise FileNotFoundError(f'Cannot find {thread_data.ckpt_file}.ckpt')
+    if os.path.exists(thread_data.ckpt_file + '.ckpt'):
+        thread_data.ckpt_file += '.ckpt'
+    elif os.path.exists(thread_data.ckpt_file + '.safetensors'):
+        thread_data.ckpt_file += '.safetensors'
+    elif not os.path.exists(thread_data.ckpt_file):
+        raise FileNotFoundError(f'Cannot find {thread_data.ckpt_file}.ckpt or .safetensors')
 
     if not thread_data.precision:
         thread_data.precision = 'full' if thread_data.force_full_precision else 'autocast'
@@ -91,8 +120,15 @@ def load_model_ckpt():
     if thread_data.device == 'cpu':
         thread_data.precision = 'full'
 
-    print('loading', thread_data.ckpt_file + '.ckpt', 'to device', thread_data.device, 'using precision', thread_data.precision)
-    sd = load_model_from_config(thread_data.ckpt_file + '.ckpt')
+    print('loading', thread_data.ckpt_file, 'to device', thread_data.device, 'using precision', thread_data.precision)
+
+    if thread_data.test_sd2:
+        load_model_ckpt_sd2()
+    else:
+        load_model_ckpt_sd1()
+
+def load_model_ckpt_sd1():
+    sd, model_ver = load_model_from_config(thread_data.ckpt_file)
     li, lo = [], []
     for key, value in sd.items():
         sp = key.split(".")
@@ -118,8 +154,8 @@ def load_model_ckpt():
     model.cdevice = torch.device(thread_data.device)
     model.unet_bs = thread_data.unet_bs
     model.turbo = thread_data.turbo
-    if thread_data.device != 'cpu':
-        model.to(thread_data.device)
+    # if thread_data.device != 'cpu':
+    #     model.to(thread_data.device)
     #if thread_data.reduced_memory:
         #model.model1.to("cpu")
         #model.model2.to("cpu")
@@ -129,33 +165,42 @@ def load_model_ckpt():
     _, _ = modelCS.load_state_dict(sd, strict=False)
     modelCS.eval()
     modelCS.cond_stage_model.device = torch.device(thread_data.device)
-    if thread_data.device != 'cpu':
-        if thread_data.reduced_memory:
-            modelCS.to('cpu')
-        else:
-            modelCS.to(thread_data.device) # Preload on device if not already there.
+    # if thread_data.device != 'cpu':
+    #     if thread_data.reduced_memory:
+    #         modelCS.to('cpu')
+    #     else:
+    #         modelCS.to(thread_data.device) # Preload on device if not already there.
     thread_data.modelCS = modelCS
 
     modelFS = instantiate_from_config(config.modelFirstStage)
     _, _ = modelFS.load_state_dict(sd, strict=False)
 
     if thread_data.vae_file is not None:
-        for model_extension in ['.ckpt', '.vae.pt']:
-            if os.path.exists(thread_data.vae_file + model_extension):
-                print(f"Loading VAE weights from: {thread_data.vae_file}{model_extension}")
-                vae_ckpt = torch.load(thread_data.vae_file + model_extension, map_location="cpu")
-                vae_dict = {k: v for k, v in vae_ckpt["state_dict"].items() if k[0:4] != "loss"}
-                modelFS.first_stage_model.load_state_dict(vae_dict, strict=False)
-                break
-            else:
-                print(f'Cannot find VAE file: {thread_data.vae_file}{model_extension}')
+        try:
+            loaded = False
+            for model_extension in ['.ckpt', '.vae.pt']:
+                if os.path.exists(thread_data.vae_file + model_extension):
+                    print(f"Loading VAE weights from: {thread_data.vae_file}{model_extension}")
+                    vae_ckpt = torch.load(thread_data.vae_file + model_extension, map_location="cpu")
+                    vae_dict = {k: v for k, v in vae_ckpt["state_dict"].items() if k[0:4] != "loss"}
+                    modelFS.first_stage_model.load_state_dict(vae_dict, strict=False)
+                    loaded = True
+                    break
+
+            if not loaded:
+                print(f'Cannot find VAE: {thread_data.vae_file}')
+                thread_data.vae_file = None
+        except:
+            print(traceback.format_exc())
+            print(f'Could not load VAE: {thread_data.vae_file}')
+            thread_data.vae_file = None
 
     modelFS.eval()
-    if thread_data.device != 'cpu':
-        if thread_data.reduced_memory:
-            modelFS.to('cpu')
-        else:
-            modelFS.to(thread_data.device) # Preload on device if not already there.
+    # if thread_data.device != 'cpu':
+    #     if thread_data.reduced_memory:
+    #         modelFS.to('cpu')
+    #     else:
+    #         modelFS.to(thread_data.device) # Preload on device if not already there.
     thread_data.modelFS = modelFS
     del sd
 
@@ -170,12 +215,46 @@ def load_model_ckpt():
         thread_data.model_fs_is_half = False
 
     print(f'''loaded model
- model file: {thread_data.ckpt_file}.ckpt
+ model file: {thread_data.ckpt_file}
  model.device: {model.device}
  modelCS.device: {modelCS.cond_stage_model.device}
  modelFS.device: {thread_data.modelFS.device}
  using precision: {thread_data.precision}''')
 
+def load_model_ckpt_sd2():
+    sd, model_ver = load_model_from_config(thread_data.ckpt_file)
+
+    config_file = 'configs/stable-diffusion/v2-inference-v.yaml' if model_ver == 'sd2' else "configs/stable-diffusion/v1-inference.yaml"
+    config = OmegaConf.load(config_file)
+    verbose = False
+
+    thread_data.model = instantiate_from_config(config.model)
+    m, u = thread_data.model.load_state_dict(sd, strict=False)
+    if len(m) > 0 and verbose:
+        print("missing keys:")
+        print(m)
+    if len(u) > 0 and verbose:
+        print("unexpected keys:")
+        print(u)
+
+    thread_data.model.to(thread_data.device)
+    thread_data.model.eval()
+    del sd
+
+    thread_data.model.cond_stage_model.device = torch.device(thread_data.device)
+
+    if thread_data.device != "cpu" and thread_data.precision == "autocast":
+        thread_data.model.half()
+        thread_data.model_is_half = True
+        thread_data.model_fs_is_half = True
+    else:
+        thread_data.model_is_half = False
+        thread_data.model_fs_is_half = False
+
+    print(f'''loaded model
+ model file: {thread_data.ckpt_file}
+ using precision: {thread_data.precision}''')
+
 def unload_filters():
     if thread_data.model_gfpgan is not None:
         if thread_data.device != 'cpu': thread_data.model_gfpgan.gfpgan.to('cpu')
@@ -195,10 +274,11 @@ def unload_models():
     if thread_data.model is not None:
         print('Unloading models...')
         if thread_data.device != 'cpu':
-            thread_data.modelFS.to('cpu')
-            thread_data.modelCS.to('cpu')
-            thread_data.model.model1.to("cpu")
-            thread_data.model.model2.to("cpu")
+            if not thread_data.test_sd2:
+                thread_data.modelFS.to('cpu')
+                thread_data.modelCS.to('cpu')
+                thread_data.model.model1.to("cpu")
+                thread_data.model.model2.to("cpu")
 
         del thread_data.model
         del thread_data.modelCS
@@ -210,35 +290,42 @@ def unload_models():
 
     gc()
 
-def wait_model_move_to(model, target_device): # Send to target_device and wait until complete.
-    if thread_data.device == target_device: return
-    start_mem = torch.cuda.memory_allocated(thread_data.device) / 1e6
-    if start_mem <= 0: return
-    model_name = model.__class__.__name__
-    print(f'Device {thread_data.device} - Sending model {model_name} to {target_device} | Memory transfer starting. Memory Used: {round(start_mem)}Mb')
-    start_time = time.time()
-    model.to(target_device)
-    time_step = start_time
-    WARNING_TIMEOUT = 1.5 # seconds - Show activity in console after timeout.
-    last_mem = start_mem
-    is_transfering = True
-    while is_transfering:
-        time.sleep(0.5) # 500ms
-        mem = torch.cuda.memory_allocated(thread_data.device) / 1e6
-        is_transfering = bool(mem > 0 and mem < last_mem) # still stuff loaded, but less than last time.
-        last_mem = mem
-        if not is_transfering:
-            break;
-        if time.time() - time_step > WARNING_TIMEOUT: # Long delay, print to console to show activity.
-            print(f'Device {thread_data.device} - Waiting for Memory transfer. Memory Used: {round(mem)}Mb, Transfered: {round(start_mem - mem)}Mb')
-            time_step = time.time()
-    print(f'Device {thread_data.device} - {model_name} Moved: {round(start_mem - last_mem)}Mb in {round(time.time() - start_time, 3)} seconds to {target_device}')
+# def wait_model_move_to(model, target_device): # Send to target_device and wait until complete.
+#     if thread_data.device == target_device: return
+#     start_mem = torch.cuda.memory_allocated(thread_data.device) / 1e6
+#     if start_mem <= 0: return
+#     model_name = model.__class__.__name__
+#     print(f'Device {thread_data.device} - Sending model {model_name} to {target_device} | Memory transfer starting. Memory Used: {round(start_mem)}Mb')
+#     start_time = time.time()
+#     model.to(target_device)
+#     time_step = start_time
+#     WARNING_TIMEOUT = 1.5 # seconds - Show activity in console after timeout.
+#     last_mem = start_mem
+#     is_transfering = True
+#     while is_transfering:
+#         time.sleep(0.5) # 500ms
+#         mem = torch.cuda.memory_allocated(thread_data.device) / 1e6
+#         is_transfering = bool(mem > 0 and mem < last_mem) # still stuff loaded, but less than last time.
+#         last_mem = mem
+#         if not is_transfering:
+#             break;
+#         if time.time() - time_step > WARNING_TIMEOUT: # Long delay, print to console to show activity.
+#             print(f'Device {thread_data.device} - Waiting for Memory transfer. Memory Used: {round(mem)}Mb, Transfered: {round(start_mem - mem)}Mb')
+#             time_step = time.time()
+#     print(f'Device {thread_data.device} - {model_name} Moved: {round(start_mem - last_mem)}Mb in {round(time.time() - start_time, 3)} seconds to {target_device}')
+
+def move_to_cpu(model):
+    if thread_data.device != "cpu":
+        d = torch.device(thread_data.device)
+        mem = torch.cuda.memory_allocated(d) / 1e6
+        model.to("cpu")
+        while torch.cuda.memory_allocated(d) / 1e6 >= mem:
+            time.sleep(1)
 
 def load_model_gfpgan():
     if thread_data.gfpgan_file is None: raise ValueError(f'Thread gfpgan_file is undefined.')
     model_path = thread_data.gfpgan_file + ".pth"
-    device = 'cuda:0' if force_gfpgan_to_cuda0 else thread_data.device
-    thread_data.model_gfpgan = GFPGANer(device=torch.device(device), model_path=model_path, upscale=1, arch='clean', channel_multiplier=2, bg_upsampler=None)
+    thread_data.model_gfpgan = GFPGANer(device=torch.device(thread_data.device), model_path=model_path, upscale=1, arch='clean', channel_multiplier=2, bg_upsampler=None)
     print('loaded', thread_data.gfpgan_file, 'to', thread_data.model_gfpgan.device, 'precision', thread_data.precision)
 
 def load_model_real_esrgan():
@@ -288,24 +375,29 @@ def apply_filters(filter_name, image_data, model_path=None):
     print(f'Applying filter {filter_name}...')
     gc() # Free space before loading new data.
 
-    if filter_name == 'gfpgan':
-        if isinstance(image_data, torch.Tensor):
-            image_data.to('cuda:0' if force_gfpgan_to_cuda0 else thread_data.device)
+    if isinstance(image_data, torch.Tensor):
+        image_data.to(thread_data.device)
 
-        if model_path is not None and model_path != thread_data.gfpgan_file:
-            thread_data.gfpgan_file = model_path
-            load_model_gfpgan()
-        elif not thread_data.model_gfpgan:
-            load_model_gfpgan()
-        if thread_data.model_gfpgan is None: raise Exception('Model "gfpgan" not loaded.')
-        print('enhance with', thread_data.gfpgan_file, 'on', thread_data.model_gfpgan.device, 'precision', thread_data.precision)
-        _, _, output = thread_data.model_gfpgan.enhance(image_data[:,:,::-1], has_aligned=False, only_center_face=False, paste_back=True)
-        image_data = output[:,:,::-1]
+    if filter_name == 'gfpgan':
+        # This lock is only ever used here. No need to use timeout for the request. Should never deadlock.
+        with gfpgan_temp_device_lock: # Wait for any other devices to complete before starting.
+            # hack for a bug in facexlib: https://github.com/xinntao/facexlib/pull/19/files
+            from facexlib.detection import retinaface
+            retinaface.device = torch.device(thread_data.device)
+            print('forced retinaface.device to', thread_data.device)
+
+            if model_path is not None and model_path != thread_data.gfpgan_file:
+                thread_data.gfpgan_file = model_path
+                load_model_gfpgan()
+            elif not thread_data.model_gfpgan:
+                load_model_gfpgan()
+            if thread_data.model_gfpgan is None: raise Exception('Model "gfpgan" not loaded.')
+
+            print('enhance with', thread_data.gfpgan_file, 'on', thread_data.model_gfpgan.device, 'precision', thread_data.precision)
+            _, _, output = thread_data.model_gfpgan.enhance(image_data[:,:,::-1], has_aligned=False, only_center_face=False, paste_back=True)
+            image_data = output[:,:,::-1]
 
     if filter_name == 'real_esrgan':
-        if isinstance(image_data, torch.Tensor):
-            image_data.to(thread_data.device)
-
         if model_path is not None and model_path != thread_data.real_esrgan_file:
             thread_data.real_esrgan_file = model_path
             load_model_real_esrgan()
@@ -318,47 +410,129 @@ def apply_filters(filter_name, image_data, model_path=None):
 
     return image_data
 
-def mk_img(req: Request):
+def is_model_reload_necessary(req: Request):
+    # custom model support:
+    #  the req.use_stable_diffusion_model needs to be a valid path
+    #  to the ckpt file (without the extension).
+    if os.path.exists(req.use_stable_diffusion_model + '.ckpt'):
+        req.use_stable_diffusion_model += '.ckpt'
+    elif os.path.exists(req.use_stable_diffusion_model + '.safetensors'):
+        req.use_stable_diffusion_model += '.safetensors'
+    elif not os.path.exists(req.use_stable_diffusion_model): 
+        raise FileNotFoundError(f'Cannot find {req.use_stable_diffusion_model}.ckpt or .safetensors')
+
+    needs_model_reload = False
+    if not thread_data.model or thread_data.ckpt_file != req.use_stable_diffusion_model or thread_data.vae_file != req.use_vae_model:
+        thread_data.ckpt_file = req.use_stable_diffusion_model
+        thread_data.vae_file = req.use_vae_model
+        needs_model_reload = True
+
+    if thread_data.device != 'cpu':
+        if (thread_data.precision == 'autocast' and (req.use_full_precision or not thread_data.model_is_half)) or \
+            (thread_data.precision == 'full' and not req.use_full_precision and not thread_data.force_full_precision):
+            thread_data.precision = 'full' if req.use_full_precision else 'autocast'
+            needs_model_reload = True
+
+    return needs_model_reload
+
+def reload_model():
+    unload_models()
+    unload_filters()
+    load_model_ckpt()
+
+def is_hypernetwork_reload_necessary(req: Request):
+    needs_model_reload = False
+    if thread_data.hypernetwork_file != req.use_hypernetwork_model:
+        thread_data.hypernetwork_file = req.use_hypernetwork_model
+        needs_model_reload = True
+
+    return needs_model_reload
+
+def load_hypernetwork():
+    if thread_data.test_sd2:
+        # Not yet supported in SD2
+        return
+
+    from . import hypernetwork
+    if thread_data.hypernetwork_file is not None:
+        try:
+            loaded = False
+            for model_extension in HYPERNETWORK_MODEL_EXTENSIONS:
+                if os.path.exists(thread_data.hypernetwork_file + model_extension):
+                    print(f"Loading hypernetwork weights from: {thread_data.hypernetwork_file}{model_extension}")
+                    thread_data.hypernetwork = hypernetwork.load_hypernetwork(thread_data.hypernetwork_file + model_extension)
+                    loaded = True
+                    break
+
+            if not loaded:
+                print(f'Cannot find hypernetwork: {thread_data.hypernetwork_file}')
+                thread_data.hypernetwork_file = None
+        except:
+            print(traceback.format_exc())
+            print(f'Could not load hypernetwork: {thread_data.hypernetwork_file}')
+            thread_data.hypernetwork_file = None
+
+def unload_hypernetwork():
+    if thread_data.hypernetwork is not None:
+        print('Unloading hypernetwork...')
+        if thread_data.device != 'cpu':
+            for i in thread_data.hypernetwork:
+                thread_data.hypernetwork[i][0].to('cpu')
+                thread_data.hypernetwork[i][1].to('cpu')
+        del thread_data.hypernetwork
+    thread_data.hypernetwork = None
+
+    gc()
+
+def reload_hypernetwork():
+    unload_hypernetwork()
+    load_hypernetwork()
+
+def mk_img(req: Request, data_queue: queue.Queue, task_temp_images: list, step_callback):
     try:
-        yield from do_mk_img(req)
+        return do_mk_img(req, data_queue, task_temp_images, step_callback)
     except Exception as e:
         print(traceback.format_exc())
 
-        if thread_data.device != 'cpu':
+        if thread_data.device != 'cpu' and not thread_data.test_sd2:
             thread_data.modelFS.to('cpu')
             thread_data.modelCS.to('cpu')
             thread_data.model.model1.to("cpu")
             thread_data.model.model2.to("cpu")
 
         gc() # Release from memory.
-        yield json.dumps({
+        data_queue.put(json.dumps({
             "status": 'failed',
             "detail": str(e)
-        })
+        }))
+        raise e
 
-def update_temp_img(req, x_samples):
+def update_temp_img(req, x_samples, task_temp_images: list):
     partial_images = []
     for i in range(req.num_outputs):
-        x_sample_ddim = thread_data.modelFS.decode_first_stage(x_samples[i].unsqueeze(0))
+        if thread_data.test_sd2:
+            x_sample_ddim = thread_data.model.decode_first_stage(x_samples[i].unsqueeze(0))
+        else:
+            x_sample_ddim = thread_data.modelFS.decode_first_stage(x_samples[i].unsqueeze(0))
         x_sample = torch.clamp((x_sample_ddim + 1.0) / 2.0, min=0.0, max=1.0)
         x_sample = 255.0 * rearrange(x_sample[0].cpu().numpy(), "c h w -> h w c")
         x_sample = x_sample.astype(np.uint8)
         img = Image.fromarray(x_sample)
-        buf = BytesIO()
-        img.save(buf, format='JPEG')
-        buf.seek(0)
+        buf = img_to_buffer(img, output_format='JPEG')
 
         del img, x_sample, x_sample_ddim
         # don't delete x_samples, it is used in the code that called this callback
 
-        thread_data.temp_images[str(req.session_id) + '/' + str(i)] = buf
-        partial_images.append({'path': f'/image/tmp/{req.session_id}/{i}'})
+        thread_data.temp_images[f'{req.request_id}/{i}'] = buf
+        task_temp_images[i] = buf
+        partial_images.append({'path': f'/image/tmp/{req.request_id}/{i}'})
     return partial_images
 
 # Build and return the apropriate generator for do_mk_img
-def get_image_progress_generator(req, extra_props=None):
+def get_image_progress_generator(req, data_queue: queue.Queue, task_temp_images: list, step_callback, extra_props=None):
     if not req.stream_progress_updates:
-        def empty_callback(x_samples, i): return x_samples
+        def empty_callback(x_samples, i):
+            step_callback()
         return empty_callback
 
     thread_data.partial_x_samples = None
@@ -375,46 +549,27 @@ def get_image_progress_generator(req, extra_props=None):
             progress.update(extra_props)
 
         if req.stream_image_progress and i % 5 == 0:
-            progress['output'] = update_temp_img(req, x_samples)
+            progress['output'] = update_temp_img(req, x_samples, task_temp_images)
 
-        yield json.dumps(progress)
+        data_queue.put(json.dumps(progress))
+
+        step_callback()
 
         if thread_data.stop_processing:
             raise UserInitiatedStop("User requested that we stop processing")
     return img_callback
 
-def do_mk_img(req: Request):
+def do_mk_img(req: Request, data_queue: queue.Queue, task_temp_images: list, step_callback):
     thread_data.stop_processing = False
 
     res = Response()
     res.request = req
     res.images = []
+    thread_data.hypernetwork_strength = req.hypernetwork_strength
 
     thread_data.temp_images.clear()
 
-    # custom model support:
-    #  the req.use_stable_diffusion_model needs to be a valid path
-    #  to the ckpt file (without the extension).
-    if not os.path.exists(req.use_stable_diffusion_model + '.ckpt'): raise FileNotFoundError(f'Cannot find {req.use_stable_diffusion_model}.ckpt')
-
-    needs_model_reload = False
-    if not thread_data.model or thread_data.ckpt_file != req.use_stable_diffusion_model or thread_data.vae_file != req.use_vae_model:
-        thread_data.ckpt_file = req.use_stable_diffusion_model
-        thread_data.vae_file = req.use_vae_model
-        needs_model_reload = True
-
-    if thread_data.device != 'cpu':
-        if (thread_data.precision == 'autocast' and (req.use_full_precision or not thread_data.model_is_half)) or \
-            (thread_data.precision == 'full' and not req.use_full_precision and not thread_data.force_full_precision):
-            thread_data.precision = 'full' if req.use_full_precision else 'autocast'
-            needs_model_reload = True
-
-    if needs_model_reload:
-        unload_models()
-        unload_filters()
-        load_model_ckpt()
-
-    if thread_data.turbo != req.turbo:
+    if thread_data.turbo != req.turbo and not thread_data.test_sd2:
         thread_data.turbo = req.turbo
         thread_data.model.turbo = req.turbo
 
@@ -459,10 +614,14 @@ def do_mk_img(req: Request):
         if thread_data.device != "cpu" and thread_data.precision == "autocast":
             init_image = init_image.half()
 
-        thread_data.modelFS.to(thread_data.device)
+        if not thread_data.test_sd2:
+            thread_data.modelFS.to(thread_data.device)
 
         init_image = repeat(init_image, '1 ... -> b ...', b=batch_size)
-        init_latent = thread_data.modelFS.get_first_stage_encoding(thread_data.modelFS.encode_first_stage(init_image))  # move to latent space
+        if thread_data.test_sd2:
+            init_latent = thread_data.model.get_first_stage_encoding(thread_data.model.encode_first_stage(init_image))  # move to latent space
+        else:
+            init_latent = thread_data.modelFS.get_first_stage_encoding(thread_data.modelFS.encode_first_stage(init_image))  # move to latent space
 
         if req.mask is not None:
             mask = load_mask(req.mask, req.width, req.height, init_latent.shape[2], init_latent.shape[3], True).to(thread_data.device)
@@ -473,27 +632,27 @@ def do_mk_img(req: Request):
                 mask = mask.half()
 
         # Send to CPU and wait until complete.
-        wait_model_move_to(thread_data.modelFS, 'cpu')
+        # wait_model_move_to(thread_data.modelFS, 'cpu')
+        if not thread_data.test_sd2:
+            move_to_cpu(thread_data.modelFS)
 
         assert 0. <= req.prompt_strength <= 1., 'can only work with strength in [0.0, 1.0]'
         t_enc = int(req.prompt_strength * req.num_inference_steps)
         print(f"target t_enc is {t_enc} steps")
 
-    if req.save_to_disk_path is not None:
-        session_out_path = get_session_out_path(req.save_to_disk_path, req.session_id)
-    else:
-        session_out_path = None
-
     with torch.no_grad():
         for n in trange(opt_n_iter, desc="Sampling"):
             for prompts in tqdm(data, desc="data"):
 
                 with precision_scope("cuda"):
-                    if thread_data.reduced_memory:
+                    if thread_data.reduced_memory and not thread_data.test_sd2:
                         thread_data.modelCS.to(thread_data.device)
                     uc = None
                     if req.guidance_scale != 1.0:
-                        uc = thread_data.modelCS.get_learned_conditioning(batch_size * [req.negative_prompt])
+                        if thread_data.test_sd2:
+                            uc = thread_data.model.get_learned_conditioning(batch_size * [req.negative_prompt])
+                        else:
+                            uc = thread_data.modelCS.get_learned_conditioning(batch_size * [req.negative_prompt])
                     if isinstance(prompts, tuple):
                         prompts = list(prompts)
 
@@ -506,15 +665,21 @@ def do_mk_img(req: Request):
                             weight = weights[i]
                             # if not skip_normalize:
                             weight = weight / totalWeight
-                            c = torch.add(c, thread_data.modelCS.get_learned_conditioning(subprompts[i]), alpha=weight)
+                            if thread_data.test_sd2:
+                                c = torch.add(c, thread_data.model.get_learned_conditioning(subprompts[i]), alpha=weight)
+                            else:
+                                c = torch.add(c, thread_data.modelCS.get_learned_conditioning(subprompts[i]), alpha=weight)
                     else:
-                        c = thread_data.modelCS.get_learned_conditioning(prompts)
+                        if thread_data.test_sd2:
+                            c = thread_data.model.get_learned_conditioning(prompts)
+                        else:
+                            c = thread_data.modelCS.get_learned_conditioning(prompts)
 
-                    if thread_data.reduced_memory:
+                    if thread_data.reduced_memory and not thread_data.test_sd2:
                         thread_data.modelFS.to(thread_data.device)
 
                     n_steps = req.num_inference_steps if req.init_image is None else t_enc
-                    img_callback = get_image_progress_generator(req, {"total_steps": n_steps})
+                    img_callback = get_image_progress_generator(req, data_queue, task_temp_images, step_callback, {"total_steps": n_steps})
 
                     # run the handler
                     try:
@@ -522,14 +687,7 @@ def do_mk_img(req: Request):
                         if handler == _txt2img:
                             x_samples = _txt2img(req.width, req.height, req.num_outputs, req.num_inference_steps, req.guidance_scale, None, opt_C, opt_f, opt_ddim_eta, c, uc, opt_seed, img_callback, mask, req.sampler)
                         else:
-                            x_samples = _img2img(init_latent, t_enc, batch_size, req.guidance_scale, c, uc, req.num_inference_steps, opt_ddim_eta, opt_seed, img_callback, mask)
-
-                        if req.stream_progress_updates:
-                            yield from x_samples
-                        if hasattr(thread_data, 'partial_x_samples'):
-                            if thread_data.partial_x_samples is not None:
-                                x_samples = thread_data.partial_x_samples
-                            del thread_data.partial_x_samples
+                            x_samples = _img2img(init_latent, t_enc, batch_size, req.guidance_scale, c, uc, req.num_inference_steps, opt_ddim_eta, opt_seed, img_callback, mask, opt_C, req.height, req.width, opt_f)
                     except UserInitiatedStop:
                         if not hasattr(thread_data, 'partial_x_samples'):
                             continue
@@ -542,17 +700,16 @@ def do_mk_img(req: Request):
                     print("decoding images")
                     img_data = [None] * batch_size
                     for i in range(batch_size):
-                        x_samples_ddim = thread_data.modelFS.decode_first_stage(x_samples[i].unsqueeze(0))
+                        if thread_data.test_sd2:
+                            x_samples_ddim = thread_data.model.decode_first_stage(x_samples[i].unsqueeze(0))
+                        else:
+                            x_samples_ddim = thread_data.modelFS.decode_first_stage(x_samples[i].unsqueeze(0))
                         x_sample = torch.clamp((x_samples_ddim + 1.0) / 2.0, min=0.0, max=1.0)
                         x_sample = 255.0 * rearrange(x_sample[0].cpu().numpy(), "c h w -> h w c")
                         x_sample = x_sample.astype(np.uint8)
                         img_data[i] = x_sample
                     del x_samples, x_samples_ddim, x_sample
 
-                    if thread_data.reduced_memory:
-                        # Send to CPU and wait until complete.
-                        wait_model_move_to(thread_data.modelFS, 'cpu')
-
                     print("saving images")
                     for i in range(batch_size):
                         img = Image.fromarray(img_data[i])
@@ -570,14 +727,16 @@ def do_mk_img(req: Request):
                         if req.save_to_disk_path is not None:
                             if return_orig_img:
                                 img_out_path = get_base_path(req.save_to_disk_path, req.session_id, prompts[0], img_id, req.output_format)
-                                save_image(img, img_out_path)
+                                save_image(img, img_out_path, req.output_format, req.output_quality)
                             meta_out_path = get_base_path(req.save_to_disk_path, req.session_id, prompts[0], img_id, 'txt')
                             save_metadata(meta_out_path, req, prompts[0], opt_seed)
 
                         if return_orig_img:
-                            img_str = img_to_base64_str(img, req.output_format)
+                            img_buffer = img_to_buffer(img, req.output_format, req.output_quality)
+                            img_str = buffer_to_base64_str(img_buffer, req.output_format)
                             res_image_orig = ResponseImage(data=img_str, seed=opt_seed)
                             res.images.append(res_image_orig)
+                            task_temp_images[i] = img_buffer
 
                             if req.save_to_disk_path is not None:
                                 res_image_orig.path_abs = img_out_path
@@ -593,12 +752,14 @@ def do_mk_img(req: Request):
                                 filters_applied.append(req.use_upscale)
                             if (len(filters_applied) > 0):
                                 filtered_image = Image.fromarray(img_data[i])
-                                filtered_img_data = img_to_base64_str(filtered_image, req.output_format)
+                                filtered_buffer = img_to_buffer(filtered_image, req.output_format, req.output_quality)
+                                filtered_img_data = buffer_to_base64_str(filtered_buffer, req.output_format)
                                 response_image = ResponseImage(data=filtered_img_data, seed=opt_seed)
                                 res.images.append(response_image)
+                                task_temp_images[i] = filtered_buffer
                                 if req.save_to_disk_path is not None:
                                     filtered_img_out_path = get_base_path(req.save_to_disk_path, req.session_id, prompts[0], img_id, req.output_format, "_".join(filters_applied))
-                                    save_image(filtered_image, filtered_img_out_path)
+                                    save_image(filtered_image, filtered_img_out_path, req.output_format, req.output_quality)
                                     response_image.path_abs = filtered_img_out_path
                                 del filtered_image
                         # Filter Applied, move to next seed
@@ -606,17 +767,25 @@ def do_mk_img(req: Request):
 
                     # if thread_data.reduced_memory:
                     #     unload_filters()
+                    if not thread_data.test_sd2:
+                        move_to_cpu(thread_data.modelFS)
                     del img_data
                     gc()
                     if thread_data.device != 'cpu':
                         print(f'memory_final = {round(torch.cuda.memory_allocated(thread_data.device) / 1e6, 2)}Mb')
 
     print('Task completed')
-    yield json.dumps(res.json())
+    res = res.json()
+    data_queue.put(json.dumps(res))
 
-def save_image(img, img_out_path):
+    return res
+
+def save_image(img, img_out_path, output_format="", output_quality=75):
     try:
-        img.save(img_out_path)
+        if output_format.upper() == "JPEG":
+            img.save(img_out_path, quality=output_quality)
+        else:
+            img.save(img_out_path)
     except:
         print('could not save the file', traceback.format_exc())
 
@@ -634,6 +803,8 @@ Sampler: {req.sampler}
 Negative Prompt: {req.negative_prompt}
 Stable Diffusion model: {req.use_stable_diffusion_model + '.ckpt'}
 VAE model: {req.use_vae_model}
+Hypernetwork Model: {req.use_hypernetwork_model}
+Hypernetwork Strength: {req.hypernetwork_strength}
 '''
     try:
         with open(meta_out_path, 'w', encoding='utf-8') as f:
@@ -645,51 +816,111 @@ def _txt2img(opt_W, opt_H, opt_n_samples, opt_ddim_steps, opt_scale, start_code,
     shape = [opt_n_samples, opt_C, opt_H // opt_f, opt_W // opt_f]
 
     # Send to CPU and wait until complete.
-    wait_model_move_to(thread_data.modelCS, 'cpu')
+    # wait_model_move_to(thread_data.modelCS, 'cpu')
 
-    if sampler_name == 'ddim':
-        thread_data.model.make_schedule(ddim_num_steps=opt_ddim_steps, ddim_eta=opt_ddim_eta, verbose=False)
+    if not thread_data.test_sd2:
+        move_to_cpu(thread_data.modelCS)
 
-    samples_ddim = thread_data.model.sample(
-        S=opt_ddim_steps,
-        conditioning=c,
-        seed=opt_seed,
-        shape=shape,
-        verbose=False,
-        unconditional_guidance_scale=opt_scale,
-        unconditional_conditioning=uc,
-        eta=opt_ddim_eta,
-        x_T=start_code,
-        img_callback=img_callback,
-        mask=mask,
-        sampler = sampler_name,
-    )
-    yield from samples_ddim
+    if thread_data.test_sd2 and sampler_name not in ('plms', 'ddim', 'dpm2'):
+        raise Exception('Only plms, ddim and dpm2 samplers are supported right now, in SD 2.0')
 
-def _img2img(init_latent, t_enc, batch_size, opt_scale, c, uc, opt_ddim_steps, opt_ddim_eta, opt_seed, img_callback, mask):
+
+    # samples, _ = sampler.sample(S=opt.steps,
+    #                                                  conditioning=c,
+    #                                                  batch_size=opt.n_samples,
+    #                                                  shape=shape,
+    #                                                  verbose=False,
+    #                                                  unconditional_guidance_scale=opt.scale,
+    #                                                  unconditional_conditioning=uc,
+    #                                                  eta=opt.ddim_eta,
+    #                                                  x_T=start_code)
+
+    if thread_data.test_sd2:
+        if sampler_name == 'plms':
+            from ldm.models.diffusion.plms import PLMSSampler
+            sampler = PLMSSampler(thread_data.model)
+        elif sampler_name == 'ddim':
+            from ldm.models.diffusion.ddim import DDIMSampler
+            sampler = DDIMSampler(thread_data.model)
+            sampler.make_schedule(ddim_num_steps=opt_ddim_steps, ddim_eta=opt_ddim_eta, verbose=False)
+        elif sampler_name == 'dpm2':
+            from ldm.models.diffusion.dpm_solver import DPMSolverSampler
+            sampler = DPMSolverSampler(thread_data.model)
+
+        shape = [opt_C, opt_H // opt_f, opt_W // opt_f]
+
+        samples_ddim, intermediates = sampler.sample(
+            S=opt_ddim_steps,
+            conditioning=c,
+            batch_size=opt_n_samples,
+            seed=opt_seed,
+            shape=shape,
+            verbose=False,
+            unconditional_guidance_scale=opt_scale,
+            unconditional_conditioning=uc,
+            eta=opt_ddim_eta,
+            x_T=start_code,
+            img_callback=img_callback,
+            mask=mask,
+            sampler = sampler_name,
+        )
+    else:
+        if sampler_name == 'ddim':
+            thread_data.model.make_schedule(ddim_num_steps=opt_ddim_steps, ddim_eta=opt_ddim_eta, verbose=False)
+
+        samples_ddim = thread_data.model.sample(
+            S=opt_ddim_steps,
+            conditioning=c,
+            seed=opt_seed,
+            shape=shape,
+            verbose=False,
+            unconditional_guidance_scale=opt_scale,
+            unconditional_conditioning=uc,
+            eta=opt_ddim_eta,
+            x_T=start_code,
+            img_callback=img_callback,
+            mask=mask,
+            sampler = sampler_name,
+        )
+    return samples_ddim
+
+def _img2img(init_latent, t_enc, batch_size, opt_scale, c, uc, opt_ddim_steps, opt_ddim_eta, opt_seed, img_callback, mask, opt_C=1, opt_H=1, opt_W=1, opt_f=1):
     # encode (scaled latent)
-    z_enc = thread_data.model.stochastic_encode(
-        init_latent,
-        torch.tensor([t_enc] * batch_size).to(thread_data.device),
-        opt_seed,
-        opt_ddim_eta,
-        opt_ddim_steps,
-    )
     x_T = None if mask is None else init_latent
 
-    # decode it
-    samples_ddim = thread_data.model.sample(
-        t_enc,
-        c,
-        z_enc,
-        unconditional_guidance_scale=opt_scale,
-        unconditional_conditioning=uc,
-        img_callback=img_callback,
-        mask=mask,
-        x_T=x_T,
-        sampler = 'ddim'
-    )
-    yield from samples_ddim
+    if thread_data.test_sd2:
+        from ldm.models.diffusion.ddim import DDIMSampler
+
+        sampler = DDIMSampler(thread_data.model)
+
+        sampler.make_schedule(ddim_num_steps=opt_ddim_steps, ddim_eta=opt_ddim_eta, verbose=False)
+
+        z_enc = sampler.stochastic_encode(init_latent, torch.tensor([t_enc] * batch_size).to(thread_data.device))
+
+        samples_ddim = sampler.decode(z_enc, c, t_enc, unconditional_guidance_scale=opt_scale,unconditional_conditioning=uc, img_callback=img_callback)
+
+    else:
+        z_enc = thread_data.model.stochastic_encode(
+            init_latent,
+            torch.tensor([t_enc] * batch_size).to(thread_data.device),
+            opt_seed,
+            opt_ddim_eta,
+            opt_ddim_steps,
+        )
+
+        # decode it
+        samples_ddim = thread_data.model.sample(
+            t_enc,
+            c,
+            z_enc,
+            unconditional_guidance_scale=opt_scale,
+            unconditional_conditioning=uc,
+            img_callback=img_callback,
+            mask=mask,
+            x_T=x_T,
+            sampler = 'ddim'
+        )
+    return samples_ddim
 
 def gc():
     gc_collect()
@@ -706,13 +937,26 @@ def chunk(it, size):
 
 def load_model_from_config(ckpt, verbose=False):
     print(f"Loading model from {ckpt}")
-    pl_sd = torch.load(ckpt, map_location="cpu")
+    model_ver = 'sd1'
+
+    if ckpt.endswith(".safetensors"):
+        print("Loading from safetensors")
+        pl_sd = load_file(ckpt, device="cpu")
+    else:
+        pl_sd = torch.load(ckpt, map_location="cpu")
+
     if "global_step" in pl_sd:
         print(f"Global Step: {pl_sd['global_step']}")
-    sd = pl_sd["state_dict"]
-    return sd
 
-# utils
+    if "state_dict" in pl_sd:
+        # check for a key that only seems to be present in SD2 models
+        if 'cond_stage_model.model.ln_final.bias' in pl_sd['state_dict'].keys():
+            model_ver = 'sd2'
+
+        return pl_sd["state_dict"], model_ver
+    else:
+        return pl_sd, model_ver
+
 class UserInitiatedStop(Exception):
     pass
 
@@ -756,9 +1000,20 @@ def load_mask(mask_str, h0, w0, newH, newW, invert=False):
     return image
 
 # https://stackoverflow.com/a/61114178
-def img_to_base64_str(img, output_format="PNG"):
+def img_to_base64_str(img, output_format="PNG", output_quality=75):
+    buffered = img_to_buffer(img, output_format, quality=output_quality)
+    return buffer_to_base64_str(buffered, output_format)
+
+def img_to_buffer(img, output_format="PNG", output_quality=75):
     buffered = BytesIO()
-    img.save(buffered, format=output_format)
+    if ( output_format.upper() == "JPEG" ):
+        img.save(buffered, format=output_format, quality=output_quality)
+    else:
+        img.save(buffered, format=output_format)
+    buffered.seek(0)
+    return buffered
+
+def buffer_to_base64_str(buffered, output_format="PNG"):
     buffered.seek(0)
     img_byte = buffered.getvalue()
     mime_type = "image/png" if output_format.lower() == "png" else "image/jpeg"
@@ -776,3 +1031,48 @@ def base64_str_to_img(img_str):
     buffered = base64_str_to_buffer(img_str)
     img = Image.open(buffered)
     return img
+
+def split_weighted_subprompts(text):
+    """
+    grabs all text up to the first occurrence of ':' 
+    uses the grabbed text as a sub-prompt, and takes the value following ':' as weight
+    if ':' has no value defined, defaults to 1.0
+    repeats until no text remaining
+    """
+    remaining = len(text)
+    prompts = []
+    weights = []
+    while remaining > 0:
+        if ":" in text:
+            idx = text.index(":") # first occurrence from start
+            # grab up to index as sub-prompt
+            prompt = text[:idx]
+            remaining -= idx
+            # remove from main text
+            text = text[idx+1:]
+            # find value for weight 
+            if " " in text:
+                idx = text.index(" ") # first occurence
+            else: # no space, read to end
+                idx = len(text)
+            if idx != 0:
+                try:
+                    weight = float(text[:idx])
+                except: # couldn't treat as float
+                    print(f"Warning: '{text[:idx]}' is not a value, are you missing a space?")
+                    weight = 1.0
+            else: # no value found
+                weight = 1.0
+            # remove from main text
+            remaining -= idx
+            text = text[idx+1:]
+            # append the sub-prompt and its weight
+            prompts.append(prompt)
+            weights.append(weight)
+        else: # no : found
+            if len(text) > 0: # there is still text though
+                # take remainder as weight 1
+                prompts.append(text)
+                weights.append(1.0)
+            remaining = 0
+    return prompts, weights

ui/sd_internal/task_manager.py

@@ -37,7 +37,8 @@ class ServerStates:
 
 class RenderTask(): # Task with output queue and completion lock.
     def __init__(self, req: Request):
-        self.request: Request = req # Initial Request
+        req.request_id = id(self)
+        self.request: Request = req  # Initial Request
         self.response: Any = None # Copy of the last reponse
         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)
@@ -51,6 +52,22 @@ class RenderTask(): # Task with output queue and completion lock.
                 self.buffer_queue.task_done()
                 yield res
         except queue.Empty as e: yield
+    @property
+    def status(self):
+        if self.lock.locked():
+            return 'running'
+        if isinstance(self.error, StopAsyncIteration):
+            return 'stopped'
+        if self.error:
+            return 'error'
+        if not self.buffer_queue.empty():
+            return 'buffer'
+        if self.response:
+            return 'completed'
+        return 'pending'
+    @property
+    def is_pending(self):
+        return bool(not self.response and not self.error)
 
 # defaults from https://huggingface.co/blog/stable_diffusion
 class ImageRequest(BaseModel):
@@ -77,8 +94,11 @@ class ImageRequest(BaseModel):
     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
+    use_hypernetwork_model: str = None
+    hypernetwork_strength: float = 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
@@ -95,9 +115,10 @@ class FilterRequest(BaseModel):
     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():
+class DataCache():
     def __init__(self):
         self._base = dict()
         self._lock: threading.Lock = threading.Lock()
@@ -106,7 +127,7 @@ class TaskCache():
     def _is_expired(self, timestamp: int) -> bool:
         return int(time.time()) >= timestamp
     def clean(self) -> None:
-        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('TaskCache.clean' + ERR_LOCK_FAILED)
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('DataCache.clean' + ERR_LOCK_FAILED)
         try:
             # Create a list of expired keys to delete
             to_delete = []
@@ -116,16 +137,22 @@ class TaskCache():
                     to_delete.append(key)
             # Remove Items
             for key in to_delete:
+                (_, val) = self._base[key]
+                if isinstance(val, RenderTask):
+                    print(f'RenderTask {key} expired. Data removed.')
+                elif isinstance(val, SessionState):
+                    print(f'Session {key} expired. Data removed.')
+                else:
+                    print(f'Key {key} expired. Data removed.')
                 del self._base[key]
-                print(f'Session {key} expired. Data removed.')
         finally:
             self._lock.release()
     def clear(self) -> None:
-        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('TaskCache.clear' + ERR_LOCK_FAILED)
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('DataCache.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=LOCK_TIMEOUT): raise Exception('TaskCache.delete' + ERR_LOCK_FAILED)
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('DataCache.delete' + ERR_LOCK_FAILED)
         try:
             if key not in self._base:
                 return False
@@ -134,7 +161,7 @@ class TaskCache():
         finally:
             self._lock.release()
     def keep(self, key: Hashable, ttl: int) -> bool:
-        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('TaskCache.keep' + ERR_LOCK_FAILED)
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('DataCache.keep' + ERR_LOCK_FAILED)
         try:
             if key in self._base:
                 _, value = self._base.get(key)
@@ -144,7 +171,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=LOCK_TIMEOUT): raise Exception('TaskCache.put' + ERR_LOCK_FAILED)
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('DataCache.put' + ERR_LOCK_FAILED)
         try:
             self._base[key] = (
                 self._get_ttl_time(ttl), value
@@ -158,7 +185,7 @@ class TaskCache():
         finally:
             self._lock.release()
     def tryGet(self, key: Hashable) -> Any:
-        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('TaskCache.tryGet' + ERR_LOCK_FAILED)
+        if not self._lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('DataCache.tryGet' + ERR_LOCK_FAILED)
         try:
             ttl, value = self._base.get(key, (None, None))
             if ttl is not None and self._is_expired(ttl):
@@ -175,28 +202,61 @@ current_state = ServerStates.Init
 current_state_error:Exception = None
 current_model_path = None
 current_vae_path = None
+current_hypernetwork_path = None
 tasks_queue = []
-task_cache = TaskCache()
+session_cache = DataCache()
+task_cache = DataCache()
 default_model_to_load = None
 default_vae_to_load = None
+default_hypernetwork_to_load = None
 weak_thread_data = weakref.WeakKeyDictionary()
+idle_event: threading.Event = threading.Event()
 
-def preload_model(ckpt_file_path=None, vae_file_path=None):
-    global current_state, current_state_error, current_model_path, current_vae_path
+class SessionState():
+    def __init__(self, id: str):
+        self._id = id
+        self._tasks_ids = []
+    @property
+    def id(self):
+        return self._id
+    @property
+    def tasks(self):
+        tasks = []
+        for task_id in self._tasks_ids:
+            task = task_cache.tryGet(task_id)
+            if task:
+                tasks.append(task)
+        return tasks
+    def put(self, task, ttl=TASK_TTL):
+        task_id = id(task)
+        self._tasks_ids.append(task_id)
+        if not task_cache.put(task_id, task, ttl):
+            return False
+        while len(self._tasks_ids) > len(render_threads) * 2:
+            self._tasks_ids.pop(0)
+        return True
+
+def preload_model(ckpt_file_path=None, vae_file_path=None, hypernetwork_file_path=None):
+    global current_state, current_state_error, current_model_path, current_vae_path, current_hypernetwork_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 hypernetwork_file_path == None:
+        hypernetwork_file_path = default_hypernetwork_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.thread_data.hypernetwork_file = hypernetwork_file_path
         runtime.thread_data.ckpt_file = ckpt_file_path
         runtime.thread_data.vae_file = vae_file_path
         runtime.load_model_ckpt()
+        runtime.load_hypernetwork()
         current_model_path = ckpt_file_path
         current_vae_path = vae_file_path
+        current_hypernetwork_path = hypernetwork_file_path
         current_state_error = None
         current_state = ServerStates.Online
     except Exception as e:
@@ -217,10 +277,6 @@ def thread_get_next_task():
     task = None
     try:  # Select a render task.
         for queued_task in tasks_queue:
-            if queued_task.request.use_face_correction and runtime.thread_data.device == 'cpu' and is_alive() == 1:
-                queued_task.error = Exception('The CPU cannot be used to run this task currently. Please remove "Fix incorrect faces" from Image Settings and try again.')
-                task = queued_task
-                break
             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:
@@ -242,7 +298,7 @@ def thread_get_next_task():
         manager_lock.release()
 
 def thread_render(device):
-    global current_state, current_state_error, current_model_path, current_vae_path
+    global current_state, current_state_error, current_model_path, current_vae_path, current_hypernetwork_path
     from . import runtime
     try:
         runtime.thread_init(device)
@@ -261,6 +317,7 @@ def thread_render(device):
         preload_model()
         current_state = ServerStates.Online
     while True:
+        session_cache.clean()
         task_cache.clean()
         if not weak_thread_data[threading.current_thread()]['alive']:
             print(f'Shutting down thread for device {runtime.thread_data.device}')
@@ -272,7 +329,8 @@ def thread_render(device):
             return
         task = thread_get_next_task()
         if task is None:
-            time.sleep(1)
+            idle_event.clear()
+            idle_event.wait(timeout=1)
             continue
         if task.error is not None:
             print(task.error)
@@ -287,53 +345,42 @@ def thread_render(device):
         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:
-            if runtime.thread_data.device == 'cpu' and is_alive() > 1:
-                # CPU is not the only device. Keep track of active time to unload resources later.
-                runtime.thread_data.lastActive = time.time()
-            # Open data generator.
-            res = runtime.mk_img(task.request)
-            if current_model_path == task.request.use_stable_diffusion_model:
-                current_state = ServerStates.Rendering
-            else:
+            if runtime.is_hypernetwork_reload_necessary(task.request):
+                runtime.reload_hypernetwork()
+                current_hypernetwork_path = task.request.use_hypernetwork_model
+                
+            if runtime.is_model_reload_necessary(task.request):
                 current_state = ServerStates.LoadingModel
-            # Start reading from generator.
-            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
-                    current_vae_path = task.request.use_vae_model
+                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)}')
-                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.thread_data.temp_images[out_obj['path'][11:]]
-                        elif 'data' in out_obj:
-                            buf = runtime.base64_str_to_buffer(out_obj['data'])
-                            task.temp_images[result['output'].index(out_obj)] = buf
-                # Before looping back to the generator, mark cache as still alive.
-                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)
+            # Before looping back to the generator, mark cache as still alive.
+            task_cache.keep(id(task), TASK_TTL)
+            session_cache.keep(task.request.session_id, TASK_TTL)
         except Exception as e:
             task.error = e
+            task.response = {"status": 'failed', "detail": str(task.error)}
+            task.buffer_queue.put(json.dumps(task.response))
             print(traceback.format_exc())
             continue
         finally:
             # Task completed
             task.lock.release()
-        task_cache.keep(task.request.session_id, TASK_TTL)
+        task_cache.keep(id(task), TASK_TTL)
+        session_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:
@@ -342,12 +389,21 @@ def thread_render(device):
             print(f'Session {task.request.session_id} task {id(task)} completed by {runtime.thread_data.device_name}.')
         current_state = ServerStates.Online
 
-def get_cached_task(session_id:str, update_ttl:bool=False):
+def get_cached_task(task_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):
+    if update_ttl and not task_cache.keep(task_id, TASK_TTL):
         # Failed to keep task, already gone.
         return None
-    return task_cache.tryGet(session_id)
+    return task_cache.tryGet(task_id)
+
+def get_cached_session(session_id:str, update_ttl:bool=False):
+    if update_ttl:
+        session_cache.keep(session_id, TASK_TTL)
+    session = session_cache.tryGet(session_id)
+    if not session:
+        session = SessionState(session_id)
+        session_cache.put(session_id, session, TASK_TTL)
+    return session
 
 def get_devices():
     devices = {
@@ -440,7 +496,7 @@ def stop_render_thread(device):
     try:
         device_manager.validate_device_id(device, log_prefix='stop_render_thread')
     except:
-        print(traceback.format_exec())
+        print(traceback.format_exc())
         return False
 
     if not manager_lock.acquire(blocking=True, timeout=LOCK_TIMEOUT): raise Exception('stop_render_thread' + ERR_LOCK_FAILED)
@@ -494,14 +550,16 @@ def shutdown_event(): # Signal render thread to close on shutdown
     current_state_error = SystemExit('Application shutting down.')
 
 def render(req : ImageRequest):
-    if is_alive() <= 0: # Render thread is dead
+    current_thread_count = is_alive()
+    if current_thread_count <= 0:  # Render thread is dead
         raise ChildProcessError('Rendering thread has died.')
+
     # Alive, check if task in cache
-    task = task_cache.tryGet(req.session_id)
-    if task and not task.response and not task.error and not task.lock.locked():
-        # Unstarted task pending, deny queueing more than one.
-        raise ConnectionRefusedError(f'Session {req.session_id} has an already pending task.')
-    #
+    session = get_cached_session(req.session_id, update_ttl=True)
+    pending_tasks = list(filter(lambda t: t.is_pending, session.tasks))
+    if current_thread_count < len(pending_tasks):
+        raise ConnectionRefusedError(f'Session {req.session_id} already has {len(pending_tasks)} pending tasks out of {current_thread_count}.')
+
     from . import runtime
     r = Request()
     r.session_id = req.session_id
@@ -525,8 +583,11 @@ def render(req : ImageRequest):
     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.use_hypernetwork_model = req.use_hypernetwork_model
+    r.hypernetwork_strength = req.hypernetwork_strength
     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
@@ -535,13 +596,13 @@ def render(req : ImageRequest):
         r.stream_image_progress = False
 
     new_task = RenderTask(r)
-
-    if task_cache.put(r.session_id, new_task, TASK_TTL):
+    if session.put(new_task, TASK_TTL):
         # Use twice the normal timeout for adding user requests.
-        # Tries to force task_cache.put to fail before tasks_queue.put would. 
+        # Tries to force session.put to fail before tasks_queue.put would.
         if manager_lock.acquire(blocking=True, timeout=LOCK_TIMEOUT * 2):
             try:
                 tasks_queue.append(new_task)
+                idle_event.set()
                 return new_task
             finally:
                 manager_lock.release()

ui/server.py

@@ -7,6 +7,9 @@ import traceback
 
 import sys
 import os
+import socket
+import picklescan.scanner
+import rich
 
 SD_DIR = os.getcwd()
 print('started in ', SD_DIR)
@@ -16,7 +19,14 @@ 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']
+HYPERNETWORK_MODEL_EXTENSIONS = ['.pt']
 
 OUTPUT_DIRNAME = "Stable Diffusion UI" # in the user's home folder
 TASK_TTL = 15 * 60 # Discard last session's task timeout
@@ -39,25 +49,33 @@ 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, List, Optional, Union
 
 from sd_internal import Request, Response, task_manager
 
 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:
@@ -65,13 +83,21 @@ def getConfig(default_val=APP_CONFIG_DEFAULTS):
         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)
+            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:
@@ -85,10 +111,12 @@ def setConfig(config):
 
         if 'update_branch' in config:
             config_bat.append(f"@set update_branch={config['update_branch']}")
-        if os.getenv('SD_UI_BIND_PORT') is not None:
-            config_bat.append(f"@set SD_UI_BIND_PORT={os.getenv('SD_UI_BIND_PORT')}")
-        if os.getenv('SD_UI_BIND_IP') is not None:
-            config_bat.append(f"@set SD_UI_BIND_IP={os.getenv('SD_UI_BIND_IP')}")
+
+        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:
@@ -102,10 +130,12 @@ def setConfig(config):
 
         if 'update_branch' in config:
             config_sh.append(f"export update_branch={config['update_branch']}")
-        if os.getenv('SD_UI_BIND_PORT') is not None:
-            config_sh.append(f"export SD_UI_BIND_PORT={os.getenv('SD_UI_BIND_PORT')}")
-        if os.getenv('SD_UI_BIND_IP') is not None:
-            config_sh.append(f"export SD_UI_BIND_IP={os.getenv('SD_UI_BIND_IP')}")
+
+        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:
@@ -114,12 +144,19 @@ def setConfig(config):
         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()
+        # 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:
@@ -147,11 +184,17 @@ def resolve_model_to_use(model_name:str, model_type:str, model_dir:str, model_ex
     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=['.ckpt'], default_models=APP_CONFIG_DEFAULT_MODELS)
+    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.pt', '.ckpt'], default_models=[])
+        return resolve_model_to_use(model_name, model_type='vae', model_dir='vae', model_extensions=VAE_MODEL_EXTENSIONS, default_models=[])
+    except:
+        return None
+
+def resolve_hypernetwork_to_use(model_name:str=None):
+    try:
+        return resolve_model_to_use(model_name, model_type='hypernetwork', model_dir='hypernetwork', model_extensions=HYPERNETWORK_MODEL_EXTENSIONS, default_models=[])
     except:
         return None
 
@@ -160,6 +203,9 @@ class SetAppConfigRequest(BaseModel):
     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):
@@ -172,6 +218,16 @@ async def setAppConfig(req : SetAppConfigRequest):
         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)
 
@@ -183,15 +239,31 @@ async def setAppConfig(req : SetAppConfigRequest):
         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:
+            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
+
+known_models = {}
 def getModels():
     models = {
         'active': {
             'stable-diffusion': 'sd-v1-4',
             'vae': '',
+            'hypernetwork': '',
         },
         'options': {
             'stable-diffusion': ['sd-v1-4'],
             'vae': [],
+            'hypernetwork': [],
         },
     }
 
@@ -202,17 +274,28 @@ def getModels():
 
         for file in os.listdir(models_dir):
             for model_extension in model_extensions:
-                if file.endswith(model_extension):
-                    model_name = file[:-len(model_extension)]
-                    models['options'][model_type].append(model_name)
+                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=['.ckpt'])
-    listModels(models_dirname='vae', model_type='vae', model_extensions=['.vae.pt', '.ckpt'])
-
+    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)
+    listModels(models_dirname='hypernetwork', model_type='hypernetwork', model_extensions=HYPERNETWORK_MODEL_EXTENSIONS)
     # legacy
     custom_weight_path = os.path.join(SD_DIR, 'custom-model.ckpt')
     if os.path.exists(custom_weight_path):
@@ -223,12 +306,24 @@ def getModels():
 def getUIPlugins():
     plugins = []
 
-    for file in os.listdir(UI_PLUGINS_DIR):
-        if file.endswith('.plugin.js'):
-            plugins.append(f'/plugins/{file}')
+    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():
+    try: 
+        ips = socket.gethostbyname_ex(socket.gethostname())
+        ips[2].append(ips[0])
+        return ips[2]
+    except Exception as e:
+        print(e)
+        print(traceback.format_exc())
+        return []
+        
+
 @app.get('/get/{key:path}')
 def read_web_data(key:str=None):
     if not key: # /get without parameters, stable-diffusion easter egg.
@@ -238,11 +333,14 @@ def read_web_data(key:str=None):
         if config is None:
             config = APP_CONFIG_DEFAULTS
         return JSONResponse(config, headers=NOCACHE_HEADERS)
-    elif key == 'devices':
+    elif key == 'system_info':
         config = getConfig()
-        devices = task_manager.get_devices()
-        devices['config'] = config.get('render_devices', "auto")
-        return JSONResponse(devices, headers=NOCACHE_HEADERS)
+        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)
@@ -260,34 +358,24 @@ def ping(session_id:str=None):
     # Alive
     response = {'status': str(task_manager.current_state)}
     if session_id:
-        task = task_manager.get_cached_task(session_id, update_ttl=True)
-        if task:
-            response['task'] = id(task)
-            if task.lock.locked():
-                response['session'] = 'running'
-            elif isinstance(task.error, StopAsyncIteration):
-                response['session'] = 'stopped'
-            elif task.error:
-                response['session'] = 'error'
-            elif not task.buffer_queue.empty():
-                response['session'] = 'buffer'
-            elif task.response:
-                response['session'] = 'completed'
-            else:
-                response['session'] = 'pending'
+        session = task_manager.get_cached_session(session_id, update_ttl=True)
+        response['tasks'] = {id(t): t.status for t in session.tasks}
     response['devices'] = task_manager.get_devices()
     return JSONResponse(response, headers=NOCACHE_HEADERS)
 
-def save_model_to_config(ckpt_model_name, vae_model_name):
+def save_model_to_config(ckpt_model_name, vae_model_name, hypernetwork_model_name):
     config = getConfig()
     if 'model' not in config:
         config['model'] = {}
 
     config['model']['stable-diffusion'] = ckpt_model_name
     config['model']['vae'] = vae_model_name
+    config['model']['hypernetwork'] = hypernetwork_model_name
 
     if vae_model_name is None or vae_model_name == "":
         del config['model']['vae']
+    if hypernetwork_model_name is None or hypernetwork_model_name == "":
+        del config['model']['hypernetwork']
 
     setConfig(config)
 
@@ -303,30 +391,33 @@ def update_render_devices_in_config(config, render_devices):
 @app.post('/render')
 def render(req : task_manager.ImageRequest):
     try:
-        save_model_to_config(req.use_stable_diffusion_model, req.use_vae_model)
+        save_model_to_config(req.use_stable_diffusion_model, req.use_vae_model, req.use_hypernetwork_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)
+        req.use_hypernetwork_model = resolve_hypernetwork_to_use(req.use_hypernetwork_model)
         new_task = task_manager.render(req)
         response = {
             'status': str(task_manager.current_state), 
             'queue': len(task_manager.tasks_queue),
-            'stream': f'/image/stream/{req.session_id}/{id(new_task)}',
+            'stream': f'/image/stream/{id(new_task)}',
             'task': id(new_task)
         }
         return JSONResponse(response, headers=NOCACHE_HEADERS)
     except ChildProcessError as e: # Render thread is dead
         raise HTTPException(status_code=500, detail=f'Rendering thread has died.') # HTTP500 Internal Server Error
-    except ConnectionRefusedError as e: # Unstarted task pending, deny queueing more than one.
-        raise HTTPException(status_code=503, detail=f'Session {req.session_id} has an already pending task.') # HTTP503 Service Unavailable
+    except ConnectionRefusedError as e: # Unstarted task pending limit reached, deny queueing too many.
+        raise HTTPException(status_code=503, detail=str(e)) # HTTP503 Service Unavailable
     except Exception as e:
+        print(e)
+        print(traceback.format_exc())
         raise HTTPException(status_code=500, detail=str(e))
 
-@app.get('/image/stream/{session_id:str}/{task_id:int}')
-def stream(session_id:str, task_id:int):
+@app.get('/image/stream/{task_id:int}')
+def stream(task_id:int):
     #TODO Move to WebSockets ??
-    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
+    task = task_manager.get_cached_task(task_id, update_ttl=True)
+    if not task: raise HTTPException(status_code=404, detail=f'Request {task_id} not found.') # HTTP404 NotFound
+    #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():
         if task.response:
             #print(f'Session {session_id} sending cached response')
@@ -336,22 +427,23 @@ def stream(session_id:str, task_id:int):
     return StreamingResponse(task.read_buffer_generator(), media_type='application/json')
 
 @app.get('/image/stop')
-def stop(session_id:str=None):
-    if not session_id:
+def stop(task: int):
+    if not task:
         if task_manager.current_state == task_manager.ServerStates.Online or task_manager.current_state == task_manager.ServerStates.Unavailable:
             raise HTTPException(status_code=409, detail='Not currently running any tasks.') # HTTP409 Conflict
         task_manager.current_state_error = StopAsyncIteration('')
         return {'OK'}
-    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('')
+    task_id = task
+    task = task_manager.get_cached_task(task_id, update_ttl=False)
+    if not task: raise HTTPException(status_code=404, detail=f'Task {task_id} was not found.') # HTTP404 Not Found
+    if isinstance(task.error, StopAsyncIteration): raise HTTPException(status_code=409, detail=f'Task {task_id} is already stopped.') # HTTP409 Conflict
+    task.error = StopAsyncIteration(f'Task {task_id} stop requested.')
     return {'OK'}
 
-@app.get('/image/tmp/{session_id}/{img_id:int}')
-def get_image(session_id, img_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
+@app.get('/image/tmp/{task_id:int}/{img_id:int}')
+def get_image(task_id: int, img_id: int):
+    task = task_manager.get_cached_task(task_id, update_ttl=True)
+    if not task: raise HTTPException(status_code=410, detail=f'Task {task_id} could not be found.') # HTTP404 NotFound
     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]
@@ -378,9 +470,13 @@ class LogSuppressFilter(logging.Filter):
         return True
 logging.getLogger('uvicorn.access').addFilter(LogSuppressFilter())
 
+# 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()
+task_manager.default_hypernetwork_to_load = resolve_hypernetwork_to_use()
 
 def update_render_threads():
     config = getConfig()
@@ -396,7 +492,9 @@ update_render_threads()
 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('http://localhost:9000')
+        import webbrowser; webbrowser.open(f"http://localhost:{port}")
 
 open_browser()