Merge pull request #1463 from easydiffusion/beta

Beta

CHANGES.md

@@ -8,13 +8,13 @@
 - **Full support for Stable Diffusion 2.1 (including CPU)** - supports loading v1.4 or v2.0 or v2.1 models seamlessly. No need to enable "Test SD2", and no need to add `sd2_` to your SD 2.0 model file names. Works on CPU as well.
 - **Memory optimized Stable Diffusion 2.1** - you can now use Stable Diffusion 2.1 models, with the same low VRAM optimizations that we've always had for SD 1.4. Please note, the SD 2.0 and 2.1 models require more GPU and System RAM, as compared to the SD 1.4 and 1.5 models.
 - **11 new samplers!** - explore the new samplers, some of which can generate great images in less than 10 inference steps! We've added the Karras and UniPC samplers. Thanks @Schorny for the UniPC samplers.
-- **Model Merging** - You can now merge two models (`.ckpt` or `.safetensors`) and output `.ckpt` or `.safetensors` models, optionally in `fp16` precision. Details: https://github.com/cmdr2/stable-diffusion-ui/wiki/Model-Merging . Thanks @JeLuf.
+- **Model Merging** - You can now merge two models (`.ckpt` or `.safetensors`) and output `.ckpt` or `.safetensors` models, optionally in `fp16` precision. Details: https://github.com/easydiffusion/easydiffusion/wiki/Model-Merging . Thanks @JeLuf.
 - **Fast loading/unloading of VAEs** - No longer needs to reload the entire Stable Diffusion model, each time you change the VAE
 - **Database of known models** - automatically picks the right configuration for known models. E.g. we automatically detect and apply "v" parameterization (required for some SD 2.0 models), and "fp32" attention precision (required for some SD 2.1 models).
 - **Color correction for img2img** - an option to preserve the color profile (histogram) of the initial image. This is especially useful if you're getting red-tinted images after inpainting/masking.
 - **Three GPU Memory Usage Settings** - `High` (fastest, maximum VRAM usage), `Balanced` (default - almost as fast, significantly lower VRAM usage), `Low` (slowest, very low VRAM usage). The `Low` setting is applied automatically for GPUs with less than 4 GB of VRAM.
 - **Find models in sub-folders** - This allows you to organize your models into sub-folders inside `models/stable-diffusion`, instead of keeping them all in a single folder. Thanks @patriceac and @ogmaresca.
-- **Custom Modifier Categories** - Ability to create custom modifiers with thumbnails, and custom categories (and hierarchy of categories). Details: https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Modifiers . Thanks @ogmaresca.
+- **Custom Modifier Categories** - Ability to create custom modifiers with thumbnails, and custom categories (and hierarchy of categories). Details: https://github.com/easydiffusion/easydiffusion/wiki/Custom-Modifiers . Thanks @ogmaresca.
 - **Embed metadata, or save as TXT/JSON** - You can now embed the metadata directly into the images, or save them as text or json files (choose in the Settings tab). Thanks @patriceac.
 - **Major rewrite of the code** - Most of the codebase has been reorganized and rewritten, to make it more manageable and easier for new developers to contribute features. We've separated our core engine into a new project called `sdkit`, which allows anyone to easily integrate Stable Diffusion (and related modules like GFPGAN etc) into their programming projects (via a simple `pip install sdkit`): https://github.com/easydiffusion/sdkit/
 - **Name change** - Last, and probably the least, the UI is now called "Easy Diffusion". It indicates the focus of this project - an easy way for people to play with Stable Diffusion.
@@ -22,6 +22,24 @@
 Our focus continues to remain on an easy installation experience, and an easy user-interface. While still remaining pretty powerful, in terms of features and speed.
 
 ### Detailed changelog
+* 2.5.48 - 1 Aug 2023 - (beta-only) Full support for ControlNets. You can select a control image to guide the AI. You can pick a filter to pre-process the image, and one of the known (or custom) controlnet models. Supports `OpenPose`, `Canny`, `Straight Lines`, `Depth`, `Line Art`, `Scribble`, `Soft Edge`, `Shuffle` and `Segment`.
+* 2.5.47 - 30 Jul 2023 - An option to use `Strict Mask Border` while inpainting, to avoid touching areas outside the mask. But this might show a slight outline of the mask, which you will have to touch up separately.
+* 2.5.47 - 29 Jul 2023 - (beta-only) Fix long prompts with SDXL.
+* 2.5.47 - 29 Jul 2023 - (beta-only) Fix red dots in some SDXL images.
+* 2.5.47 - 29 Jul 2023 - Significantly faster `Fix Faces` and `Upscale` buttons (on the image). They no longer need to generate the image from scratch, instead they just upscale/fix the generated image in-place.
+* 2.5.47 - 28 Jul 2023 - Lots of internal code reorganization, in preparation for supporting Controlnets. No user-facing changes.
+* 2.5.46 - 27 Jul 2023 - (beta-only) Full support for SD-XL models (base and refiner)!
+* 2.5.45 - 24 Jul 2023 - (beta-only) Hide the samplers that won't be supported in the new diffusers version.
+* 2.5.45 - 22 Jul 2023 - (beta-only) Fix the recently-broken inpainting models.
+* 2.5.45 - 16 Jul 2023 - (beta-only) Fix the image quality of LoRAs, which had degraded in v2.5.44.
+* 2.5.44 - 15 Jul 2023 - (beta-only) Support for multiple LoRA files.
+* 2.5.43 - 9 Jul 2023 - (beta-only) Support for loading Textual Inversion embeddings. You can find the option in the Image Settings panel. Thanks @JeLuf.
+* 2.5.43 - 9 Jul 2023 - Improve the startup time of the UI.
+* 2.5.42 - 4 Jul 2023 - Keyboard shortcuts for the Image Editor. Thanks @JeLuf.
+* 2.5.42 - 28 Jun 2023 - Allow dropping images from folders to use as an Initial Image.
+* 2.5.42 - 26 Jun 2023 - Show a popup for Image Modifiers, allowing a larger screen space, better UX on mobile screens, and more room for us to develop and improve the Image Modifiers panel. Thanks @Hakorr.
+* 2.5.42 - 26 Jun 2023 - (beta-only) Show a welcome screen for users of the diffusers beta, with instructions on how to use the new prompt syntax, and known bugs. Thanks @JeLuf.
+* 2.5.42 - 26 Jun 2023 - Use YAML files for config. You can now edit the `config.yaml` file (using a text editor, like Notepad). This file is present inside the Easy Diffusion folder, and is easier to read and edit (for humans) than JSON. Thanks @JeLuf.
 * 2.5.41 - 24 Jun 2023 - (beta-only) Fix broken inpainting in low VRAM usage mode.
 * 2.5.41 - 24 Jun 2023 - (beta-only) Fix a recent regression where the LoRA would not get applied when changing SD models.
 * 2.5.41 - 23 Jun 2023 - Fix a regression where latent upscaler stopped working on PCs without a graphics card.
@@ -72,7 +90,7 @@ Our focus continues to remain on an easy installation experience, and an easy us
 * 2.5.24 - 11 Mar 2023 - Button to load an image mask from a file.
 * 2.5.24 - 10 Mar 2023 - Logo change. Image credit: @lazlo_vii.
 * 2.5.23 - 8 Mar 2023 - Experimental support for Mac M1/M2. Thanks @michaelgallacher, @JeLuf and vishae!
-* 2.5.23 - 8 Mar 2023 - Ability to create custom modifiers with thumbnails, and custom categories (and hierarchy of categories). More details - https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Modifiers . Thanks @ogmaresca.
+* 2.5.23 - 8 Mar 2023 - Ability to create custom modifiers with thumbnails, and custom categories (and hierarchy of categories). More details - https://github.com/easydiffusion/easydiffusion/wiki/Custom-Modifiers . Thanks @ogmaresca.
 * 2.5.22 - 28 Feb 2023 - Minor styling changes to UI buttons, and the models dropdown.
 * 2.5.22 - 28 Feb 2023 - Lots of UI-related bug fixes. Thanks @patriceac.
 * 2.5.21 - 22 Feb 2023 - An option to control the size of the image thumbnails. You can use the `Display options` in the top-right corner to change this. Thanks @JeLuf.
@@ -97,7 +115,7 @@ Our focus continues to remain on an easy installation experience, and an easy us
 * 2.5.14 - 3 Feb 2023 - Fix the 'Make Similar Images' button, which was producing incorrect images (weren't very similar).
 * 2.5.13 - 1 Feb 2023 - Fix the remaining GPU memory leaks, including a better fix (more comprehensive) for the change in 2.5.12 (27 Jan).
 * 2.5.12 - 27 Jan 2023 - Fix a memory leak, which made the UI unresponsive after an out-of-memory error. The allocated memory is now freed-up after an error.
-* 2.5.11 - 25 Jan 2023 - UI for Merging Models. Thanks @JeLuf. More info: https://github.com/cmdr2/stable-diffusion-ui/wiki/Model-Merging
+* 2.5.11 - 25 Jan 2023 - UI for Merging Models. Thanks @JeLuf. More info: https://github.com/easydiffusion/easydiffusion/wiki/Model-Merging
 * 2.5.10 - 24 Jan 2023 - Reduce the VRAM usage for img2img in 'balanced' mode (without reducing the rendering speed), to make it similar to v2.4 of this UI.
 * 2.5.9 - 23 Jan 2023 - Fix a bug where img2img would produce poorer-quality images for the same settings, as compared to version 2.4 of this UI.
 * 2.5.9 - 23 Jan 2023 - Reduce the VRAM usage for 'balanced' mode (without reducing the rendering speed), to make it similar to v2.4 of the UI.
@@ -126,8 +144,8 @@ Our focus continues to remain on an easy installation experience, and an easy us
 - **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
+- **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/easydiffusion/easydiffusion/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
+- **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/easydiffusion/easydiffusion/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 `{}, (), [], |`

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 Hi there, these instructions are meant for the developers of this project.
 
-If you only want to use the Stable Diffusion UI, you've downloaded the wrong file. In that case, please download and follow the instructions at https://github.com/cmdr2/stable-diffusion-ui#installation
+If you only want to use the Stable Diffusion UI, you've downloaded the wrong file. In that case, please download and follow the instructions at https://github.com/easydiffusion/easydiffusion#installation
 
 Thanks
 
@@ -13,7 +13,7 @@ If you would like to contribute to this project, there is a discord for discussi
 This is in-flux, but one way to get a development environment running for editing the UI of this project is:
 (swap `.sh` or `.bat` in instructions depending on your environment, and be sure to adjust any paths to match where you're working)
 
-1) Install the project to a new location using the [usual installation process](https://github.com/cmdr2/stable-diffusion-ui#installation), e.g. to `/projects/stable-diffusion-ui-archive`
+1) Install the project to a new location using the [usual installation process](https://github.com/easydiffusion/easydiffusion#installation), e.g. to `/projects/stable-diffusion-ui-archive`
 2) Start the newly installed project, and check that you can view and generate images on `localhost:9000`
 3) Next, please clone the project repository using `git clone` (e.g. to `/projects/stable-diffusion-ui-repo`)
 4) Close the server (started in step 2), and edit `/projects/stable-diffusion-ui-archive/scripts/on_env_start.sh` (or `on_env_start.bat`)

How to install and run.txt

@@ -1,6 +1,6 @@
 Congrats on downloading Stable Diffusion UI, version 2!
 
-If you haven't downloaded Stable Diffusion UI yet, please download from https://github.com/cmdr2/stable-diffusion-ui#installation
+If you haven't downloaded Stable Diffusion UI yet, please download from https://github.com/easydiffusion/easydiffusion#installation
 
 After downloading, to install please follow these instructions:
 
@@ -16,9 +16,9 @@ To start the UI in the future, please run the same command mentioned above.
 
 
 If you have any problems, please:
-1. Try the troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting
+1. Try the troubleshooting steps at https://github.com/easydiffusion/easydiffusion/wiki/Troubleshooting
 2. Or, seek help from the community at https://discord.com/invite/u9yhsFmEkB
-3. Or, file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues
+3. Or, file an issue at https://github.com/easydiffusion/easydiffusion/issues
 
 Thanks
 cmdr2 (and contributors to the project)

PRIVACY.md

@@ -3,7 +3,7 @@
 This is a summary of whether Easy Diffusion uses your data or tracks you:
 * The short answer is - Easy Diffusion does *not* use your data, and does *not* track you.
 * Easy Diffusion does not send your prompts or usage or analytics to anyone. There is no tracking. We don't even know how many people use Easy Diffusion, let alone their prompts.
-* Easy Diffusion fetches updates to the code whenever it starts up. It does this by contacting GitHub directly, via SSL (secure connection). Only your computer and GitHub and [this repository](https://github.com/cmdr2/stable-diffusion-ui) are involved, and no third party is involved. Some countries intercepts SSL connections, that's not something we can do much about. GitHub does *not* share statistics (even with me) about how many people fetched code updates.
+* Easy Diffusion fetches updates to the code whenever it starts up. It does this by contacting GitHub directly, via SSL (secure connection). Only your computer and GitHub and [this repository](https://github.com/easydiffusion/easydiffusion) are involved, and no third party is involved. Some countries intercepts SSL connections, that's not something we can do much about. GitHub does *not* share statistics (even with me) about how many people fetched code updates.
 * Easy Diffusion fetches the models from huggingface.co and github.com, if they don't exist on your PC. For e.g. if the safety checker (NSFW) model doesn't exist, it'll try to download it.
 * Easy Diffusion fetches code packages from pypi.org, which is the standard hosting service for all Python projects. That's where packages installed via `pip install` are stored.
 * Occasionally, antivirus software are known to *incorrectly* flag and delete some model files, which will result in Easy Diffusion re-downloading `pytorch_model.bin`. This *incorrect deletion* affects other Stable Diffusion UIs as well, like Invoke AI - https://itch.io/post/7509488

README BEFORE YOU RUN THIS.txt

@@ -3,6 +3,6 @@ Hi there,
 What you have downloaded is meant for the developers of this project, not for users.
 
 If you only want to use the Stable Diffusion UI, you've downloaded the wrong file.
-Please download and follow the instructions at https://github.com/cmdr2/stable-diffusion-ui#installation
+Please download and follow the instructions at https://github.com/easydiffusion/easydiffusion#installation
 
 Thanks

README.md

@@ -3,7 +3,7 @@
 
 Does not require technical knowledge, does not require pre-installed software. 1-click install, powerful features, friendly community.
 
-[Installation guide](#installation) | [Troubleshooting guide](https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting) | <sub>[![Discord Server](https://img.shields.io/discord/1014774730907209781?label=Discord)](https://discord.com/invite/u9yhsFmEkB)</sub> <sup>(for support queries, and development discussions)</sup>
+[Installation guide](#installation) | [Troubleshooting guide](https://github.com/easydiffusion/easydiffusion/wiki/Troubleshooting) | <sub>[![Discord Server](https://img.shields.io/discord/1014774730907209781?label=Discord)](https://discord.com/invite/u9yhsFmEkB)</sub> <sup>(for support queries, and development discussions)</sup>
 
 ![t2i](https://raw.githubusercontent.com/Stability-AI/stablediffusion/main/assets/stable-samples/txt2img/768/merged-0006.png)
 
@@ -71,6 +71,7 @@ Just delete the `EasyDiffusion` folder to uninstall all the downloaded packages.
 - **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`.
+- **Prompt Set**: Quickly create multiple variations of your prompt, e.g. `a photograph of an astronaut on the {moon,earth}`
 - **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*.
@@ -83,7 +84,7 @@ Just delete the `EasyDiffusion` folder to uninstall all the downloaded packages.
 - **Use custom VAE models**
 - **Use pre-trained Hypernetworks**
 - **Use custom GFPGAN models**
-- **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!
+- **UI Plugins**: Choose from a growing list of [community-generated UI plugins](https://github.com/easydiffusion/easydiffusion/wiki/UI-Plugins), or write your own plugin to add features to the project!
 
 ### Performance and security
 - **Fast**: Creates a 512x512 image with euler_a in 5 seconds, on an NVIDIA 3060 12GB.
@@ -119,10 +120,10 @@ Useful for judging (and stopping) an image quickly, without waiting for it to fi
 ----
 
 # How to use?
-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.
+Please refer to our [guide](https://github.com/easydiffusion/easydiffusion/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).
+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/easydiffusion/easydiffusion/issues).
 
 We could really use help on these aspects (click to view tasks that need your help):
 * [User Interface](https://github.com/users/cmdr2/projects/1/views/1)

build.bat

@@ -2,7 +2,7 @@
 
 @echo "Hi there, what you are running is meant for the developers of this project, not for users." & echo.
 @echo "If you only want to use the Stable Diffusion UI, you've downloaded the wrong file."
-@echo "Please download and follow the instructions at https://github.com/cmdr2/stable-diffusion-ui#installation" & echo.
+@echo "Please download and follow the instructions at https://github.com/easydiffusion/easydiffusion#installation" & echo.
 @echo "If you are actually a developer of this project, please type Y and press enter" & echo.
 
 set /p answer=Are you a developer of this project (Y/N)?
@@ -15,6 +15,7 @@ mkdir dist\win\stable-diffusion-ui\scripts
 
 copy scripts\on_env_start.bat dist\win\stable-diffusion-ui\scripts\
 copy scripts\bootstrap.bat dist\win\stable-diffusion-ui\scripts\
+copy scripts\config.yaml.sample dist\win\stable-diffusion-ui\scripts\config.yaml
 copy "scripts\Start Stable Diffusion UI.cmd" dist\win\stable-diffusion-ui\
 copy LICENSE dist\win\stable-diffusion-ui\
 copy "CreativeML Open RAIL-M License" dist\win\stable-diffusion-ui\

build.sh

@@ -2,7 +2,7 @@
 
 printf "Hi there, what you are running is meant for the developers of this project, not for users.\n\n"
 printf "If you only want to use the Stable Diffusion UI, you've downloaded the wrong file.\n"
-printf "Please download and follow the instructions at https://github.com/cmdr2/stable-diffusion-ui#installation\n\n"
+printf "Please download and follow the instructions at https://github.com/easydiffusion/easydiffusion#installation \n\n"
 printf "If you are actually a developer of this project, please type Y and press enter\n\n"
 
 read -p "Are you a developer of this project (Y/N) " yn
@@ -29,6 +29,7 @@ mkdir -p dist/linux-mac/stable-diffusion-ui/scripts
 cp scripts/on_env_start.sh dist/linux-mac/stable-diffusion-ui/scripts/
 cp scripts/bootstrap.sh dist/linux-mac/stable-diffusion-ui/scripts/
 cp scripts/functions.sh dist/linux-mac/stable-diffusion-ui/scripts/
+cp scripts/config.yaml.sample dist/linux-mac/stable-diffusion-ui/scripts/config.yaml
 cp scripts/start.sh dist/linux-mac/stable-diffusion-ui/
 cp LICENSE dist/linux-mac/stable-diffusion-ui/
 cp "CreativeML Open RAIL-M License" dist/linux-mac/stable-diffusion-ui/

scripts/Developer Console.cmd

@@ -2,6 +2,8 @@
 
 echo "Opening Stable Diffusion UI - Developer Console.." & echo.
 
+cd /d %~dp0
+
 set PATH=C:\Windows\System32;%PATH%
 
 @rem set legacy and new installer's PATH, if they exist
@@ -21,6 +23,8 @@ call git --version
 call where conda
 call conda --version
 
+echo.
+echo COMSPEC=%COMSPEC%
 echo.
 
 @rem activate the legacy environment (if present) and set PYTHONPATH
@@ -37,6 +41,10 @@ call python --version
 
 echo PYTHONPATH=%PYTHONPATH%
 
+if exist "%cd%\profile" (
+    set HF_HOME=%cd%\profile\.cache\huggingface
+)
+
 @rem done
 echo.
 

scripts/Start Stable Diffusion UI.cmd

@@ -36,8 +36,9 @@ call git --version
 
 call where conda
 call conda --version
+echo .
+echo COMSPEC=%COMSPEC%
 
 @rem Download the rest of the installer and UI
 call scripts\on_env_start.bat
-
 @pause

scripts/bootstrap.bat

@@ -11,7 +11,7 @@ setlocal enabledelayedexpansion
 set MAMBA_ROOT_PREFIX=%cd%\installer_files\mamba
 set INSTALL_ENV_DIR=%cd%\installer_files\env
 set LEGACY_INSTALL_ENV_DIR=%cd%\installer
-set MICROMAMBA_DOWNLOAD_URL=https://github.com/cmdr2/stable-diffusion-ui/releases/download/v1.1/micromamba.exe
+set MICROMAMBA_DOWNLOAD_URL=https://github.com/easydiffusion/easydiffusion/releases/download/v1.1/micromamba.exe
 set umamba_exists=F
 
 set OLD_APPDATA=%APPDATA%

scripts/check_modules.py

@@ -18,12 +18,13 @@ os_name = platform.system()
 modules_to_check = {
     "torch": ("1.11.0", "1.13.1", "2.0.0"),
     "torchvision": ("0.12.0", "0.14.1", "0.15.1"),
-    "sdkit": "1.0.112",
+    "sdkit": "1.0.165",
     "stable-diffusion-sdkit": "2.1.4",
     "rich": "12.6.0",
     "uvicorn": "0.19.0",
     "fastapi": "0.85.1",
     "pycloudflared": "0.2.0",
+    "ruamel.yaml": "0.17.21",
     # "xformers": "0.0.16",
 }
 modules_to_log = ["torch", "torchvision", "sdkit", "stable-diffusion-sdkit"]
@@ -148,9 +149,9 @@ def fail(module_name):
     print(
         f"""Error installing {module_name}. Sorry about that, please try to:
 1. Run this installer again.
-2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting
+2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/easydiffusion/easydiffusion/wiki/Troubleshooting
 3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB
-4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues
+4. If that doesn't solve the problem, please file an issue at https://github.com/easydiffusion/easydiffusion/issues
 Thanks!"""
     )
     exit(1)

scripts/config.yaml.sample

@@ -0,0 +1,24 @@
+# Change listen_port if port 9000 is already in use on your system
+# Set listen_to_network to true to make Easy Diffusion accessibble on your local network
+net:
+  listen_port: 9000
+  listen_to_network: false
+
+# Multi GPU setup
+render_devices: auto
+
+# Set open_browser_on_start to false to disable opening a new browser tab on each restart
+ui:
+  open_browser_on_start: true
+
+# set update_branch to main to use the stable version, or to beta to use the experimental
+# beta version.
+update_branch: main
+
+# Set force_save_path to enforce an auto save path. Clients will not be able to change or
+# disable auto save when this option is set. Please adapt the path in the examples to your
+# needs.
+# Windows:
+# force_save_path: C:\\Easy Diffusion Images\\
+# Linux:
+# force_save_path: /data/easy-diffusion-images/

scripts/functions.sh

@@ -15,9 +15,9 @@ fail() {
 
 Error downloading Stable Diffusion UI. Sorry about that, please try to:
  1. Run this installer again.
- 2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting
+ 2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/easydiffusion/easydiffusion/wiki/Troubleshooting
  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB
- 4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues
+ 4. If that doesn't solve the problem, please file an issue at https://github.com/easydiffusion/easydiffusion/issues
 
 Thanks!
 

scripts/get_config.py

@@ -1,10 +1,11 @@
 import os
 import argparse
 import sys
+import shutil
 
 # The config file is in the same directory as this script
 config_directory = os.path.dirname(__file__)
-# config_yaml = os.path.join(config_directory, "config.yaml")
+config_yaml = os.path.join(config_directory, "..", "config.yaml")
 config_json = os.path.join(config_directory, "config.json")
 
 parser = argparse.ArgumentParser(description='Get values from config file')
@@ -15,25 +16,30 @@ parser.add_argument('key', metavar='key', nargs='+',
 
 args = parser.parse_args()
 
+config = None
 
-# if os.path.isfile(config_yaml):
+# migrate the old config yaml location
-#     import yaml
+config_legacy_yaml = os.path.join(config_directory, "config.yaml")
-#     with open(config_yaml, 'r') as configfile:
+if os.path.isfile(config_legacy_yaml):
-#         try:
+    shutil.move(config_legacy_yaml, config_yaml)
-#             config = yaml.safe_load(configfile)
+
-#         except Exception as e:
+if os.path.isfile(config_yaml):
-#             print(e, file=sys.stderr)
+    from ruamel.yaml import YAML
-#             config = {}
+    yaml = YAML(typ='safe')
-# el
+    with open(config_yaml, 'r') as configfile:
-if os.path.isfile(config_json):
+        try:
+            config = yaml.load(configfile)
+        except Exception as e:
+            print(e, file=sys.stderr)
+elif os.path.isfile(config_json):
     import json
     with open(config_json, 'r') as configfile:
         try:
             config = json.load(configfile)
         except Exception as e:
             print(e, file=sys.stderr)
-            config = {}
+
-else:
+if config is None:
     config = {}
 
 for k in args.key:

scripts/on_env_start.bat

@@ -55,10 +55,10 @@ if "%update_branch%"=="" (
     @echo. & echo "Downloading Easy Diffusion..." & echo.
     @echo "Using the %update_branch% channel" & echo.
 
-    @call git clone -b "%update_branch%" https://github.com/cmdr2/stable-diffusion-ui.git sd-ui-files && (
+    @call git clone -b "%update_branch%" https://github.com/easydiffusion/easydiffusion.git sd-ui-files && (
         @echo sd_ui_git_cloned >> scripts\install_status.txt
     ) || (
-        @echo "Error downloading Easy 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 "Error downloading Easy 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/easydiffusion/easydiffusion/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/easydiffusion/easydiffusion/issues" & echo "Thanks!"
         pause
         @exit /b
     )
@@ -68,6 +68,7 @@ if "%update_branch%"=="" (
 @copy sd-ui-files\scripts\on_sd_start.bat scripts\ /Y
 @copy sd-ui-files\scripts\check_modules.py scripts\ /Y
 @copy sd-ui-files\scripts\get_config.py scripts\ /Y
+@copy sd-ui-files\scripts\config.yaml.sample scripts\ /Y
 @copy "sd-ui-files\scripts\Start Stable Diffusion UI.cmd" . /Y
 @copy "sd-ui-files\scripts\Developer Console.cmd" . /Y
 

scripts/on_env_start.sh

@@ -38,7 +38,7 @@ else
     printf "\n\nDownloading Easy Diffusion..\n\n"
     printf "Using the $update_branch channel\n\n"
 
-    if git clone -b "$update_branch" https://github.com/cmdr2/stable-diffusion-ui.git sd-ui-files ; then
+    if git clone -b "$update_branch" https://github.com/easydiffusion/easydiffusion.git sd-ui-files ; then
         echo sd_ui_git_cloned >> scripts/install_status.txt
     else
         fail "git clone failed"
@@ -51,6 +51,7 @@ cp sd-ui-files/scripts/on_sd_start.sh scripts/
 cp sd-ui-files/scripts/bootstrap.sh scripts/
 cp sd-ui-files/scripts/check_modules.py scripts/
 cp sd-ui-files/scripts/get_config.py scripts/
+cp sd-ui-files/scripts/config.yaml.sample scripts/
 cp sd-ui-files/scripts/start.sh .
 cp sd-ui-files/scripts/developer_console.sh .
 cp sd-ui-files/scripts/functions.sh scripts/

scripts/on_sd_start.bat

@@ -6,6 +6,7 @@
 @copy sd-ui-files\scripts\on_env_start.bat scripts\ /Y
 @copy sd-ui-files\scripts\check_modules.py scripts\ /Y
 @copy sd-ui-files\scripts\get_config.py scripts\ /Y
+@copy sd-ui-files\scripts\config.yaml.sample scripts\ /Y
 
 if exist "%cd%\profile" (
     set HF_HOME=%cd%\profile\.cache\huggingface
@@ -26,7 +27,7 @@ if exist "%cd%\stable-diffusion\env" (
 @rem activate the installer env
 call conda activate
 @if "%ERRORLEVEL%" NEQ "0" (
-       @echo. & echo "Error activating conda for Easy 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.
+       @echo. & echo "Error activating conda for Easy 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/easydiffusion/easydiffusion/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/easydiffusion/easydiffusion/issues" & echo "Thanks!" & echo.
        pause
        exit /b
 )
@@ -68,7 +69,7 @@ if "%ERRORLEVEL%" NEQ "0" (
 call WHERE uvicorn > .tmp
 @>nul findstr /m "uvicorn" .tmp
 @if "%ERRORLEVEL%" NEQ "0" (
-    @echo. & echo "UI packages not found! 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.
+    @echo. & echo "UI packages not found! 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/easydiffusion/easydiffusion/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/easydiffusion/easydiffusion/issues" & echo "Thanks!" & echo.
     pause
     exit /b
 )
@@ -103,18 +104,21 @@ call python --version
 
 @FOR /F "tokens=* USEBACKQ" %%F IN (`python scripts\get_config.py --default=False net listen_to_network`) DO (
     if "%%F" EQU "True" (
-        @SET ED_BIND_IP=0.0.0.0    
+        @FOR /F "tokens=* USEBACKQ" %%G IN (`python scripts\get_config.py --default=0.0.0.0 net bind_ip`) DO (
+            @SET ED_BIND_IP=%%G
+        )
     ) else (
         @SET ED_BIND_IP=127.0.0.1
     )
 )
 
+
 @cd stable-diffusion
 
 @rem set any overrides
 set HF_HUB_DISABLE_SYMLINKS_WARNING=true
 
-@uvicorn main:server_api --app-dir "%SD_UI_PATH%" --port %ED_BIND_PORT% --host %ED_BIND_IP% --log-level error
+@python -m uvicorn main:server_api --app-dir "%SD_UI_PATH%" --port %ED_BIND_PORT% --host %ED_BIND_IP% --log-level error
 
 
 @pause

scripts/on_sd_start.sh

@@ -5,6 +5,7 @@ cp sd-ui-files/scripts/on_env_start.sh scripts/
 cp sd-ui-files/scripts/bootstrap.sh scripts/
 cp sd-ui-files/scripts/check_modules.py scripts/
 cp sd-ui-files/scripts/get_config.py scripts/
+cp sd-ui-files/scripts/config.yaml.sample scripts/
 
 source ./scripts/functions.sh
 
@@ -71,7 +72,7 @@ export SD_UI_PATH=`pwd`/ui
 export ED_BIND_PORT="$( python scripts/get_config.py --default=9000 net listen_port )"
 case "$( python scripts/get_config.py --default=False net listen_to_network )" in
     "True")
-        export ED_BIND_IP=0.0.0.0
+        export ED_BIND_IP=$( python scripts/get_config.py --default=0.0.0.0 net bind_ip)
         ;;
     "False")
         export ED_BIND_IP=127.0.0.1

ui/easydiffusion/app.py

@@ -1,9 +1,13 @@
 import json
 import logging
 import os
+import shutil
 import socket
 import sys
 import traceback
+import copy
+from ruamel.yaml import YAML
+
 import urllib
 import warnings
 
@@ -28,6 +32,8 @@ logging.basicConfig(
 
 SD_DIR = os.getcwd()
 
+ROOT_DIR = os.path.abspath(os.path.join(SD_DIR, ".."))
+
 SD_UI_DIR = os.getenv("SD_UI_PATH", None)
 
 CONFIG_DIR = os.path.abspath(os.path.join(SD_UI_DIR, "..", "scripts"))
@@ -92,57 +98,108 @@ def init():
     # https://pytorch.org/docs/stable/storage.html
     warnings.filterwarnings("ignore", category=UserWarning, message="TypedStorage is deprecated")
 
+
+def init_render_threads():
     load_server_plugins()
 
     update_render_threads()
 
 
 def getConfig(default_val=APP_CONFIG_DEFAULTS):
-    try:
+    config_yaml_path = os.path.join(CONFIG_DIR, "..", "config.yaml")
-        config_json_path = os.path.join(CONFIG_DIR, "config.json")
 
-        # compatibility with upcoming yaml changes, switching from beta to main
+    # migrate the old config yaml location
-        config_yaml_path = os.path.join(CONFIG_DIR, "..", "config.yaml")
+    config_legacy_yaml = os.path.join(CONFIG_DIR, "config.yaml")
+    if os.path.isfile(config_legacy_yaml):
+        shutil.move(config_legacy_yaml, config_yaml_path)
 
-        # migrate the old config yaml location
+    def set_config_on_startup(config: dict):
-        config_legacy_yaml = os.path.join(CONFIG_DIR, "config.yaml")
+        if getConfig.__test_diffusers_on_startup is None:
-        if os.path.isfile(config_legacy_yaml):
+            getConfig.__test_diffusers_on_startup = config.get("test_diffusers", False)
-            shutil.move(config_legacy_yaml, config_yaml_path)
+        config["config_on_startup"] = {"test_diffusers": getConfig.__test_diffusers_on_startup}
 
-        if os.path.exists(config_yaml_path):
+    if os.path.isfile(config_yaml_path):
-            try:
+        try:
-                import yaml
+            yaml = YAML()
+            with open(config_yaml_path, "r", encoding="utf-8") as f:
+                config = yaml.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"))
+                else:
+                    config["net"]["listen_port"] = 9000
+                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"
+                else:
+                    config["net"]["listen_to_network"] = True
 
-                with open(config_yaml_path, "r", encoding="utf-8") as f:
+            set_config_on_startup(config)
-                    config = yaml.safe_load(f)
 
-                setConfig(config)  # save to config.json
+            return config
-                os.remove(config_yaml_path)  # delete the yaml file
+        except Exception as e:
-            except:
+            log.warn(traceback.format_exc())
-                log.warn(traceback.format_exc())
+            set_config_on_startup(default_val)
-                config = default_val
+            return default_val
-        elif not os.path.exists(config_json_path):
+    else:
-            config = default_val
+        try:
-        else:
+            config_json_path = os.path.join(CONFIG_DIR, "config.json")
+            if not os.path.exists(config_json_path):
+                return default_val
+
+            log.info("Converting old json config file to yaml")
             with open(config_json_path, "r", encoding="utf-8") as f:
                 config = json.load(f)
-        if "net" not in config:
+            # Save config in new format
-            config["net"] = {}
+            setConfig(config)
-        if os.getenv("SD_UI_BIND_PORT") is not None:
+
-            config["net"]["listen_port"] = int(os.getenv("SD_UI_BIND_PORT"))
+            with open(config_json_path + ".txt", "w") as f:
-        if os.getenv("SD_UI_BIND_IP") is not None:
+                f.write("Moved to config.yaml inside the Easy Diffusion folder. You can open it in any text editor.")
-            config["net"]["listen_to_network"] = os.getenv("SD_UI_BIND_IP") == "0.0.0.0"
+            os.remove(config_json_path)
-        return config
+
-    except Exception:
+            return getConfig(default_val)
-        log.warn(traceback.format_exc())
+        except Exception as e:
-        return default_val
+            log.warn(traceback.format_exc())
+            set_config_on_startup(default_val)
+            return default_val
+
+
+getConfig.__test_diffusers_on_startup = None
 
 
 def setConfig(config):
-    try:  # config.json
+    try:  # config.yaml
-        config_json_path = os.path.join(CONFIG_DIR, "config.json")
+        config_yaml_path = os.path.join(CONFIG_DIR, "..", "config.yaml")
-        with open(config_json_path, "w", encoding="utf-8") as f:
+        yaml = YAML()
-            json.dump(config, f)
+
+        if not hasattr(config, "_yaml_comment"):
+            config_yaml_sample_path = os.path.join(CONFIG_DIR, "config.yaml.sample")
+
+            if os.path.exists(config_yaml_sample_path):
+                with open(config_yaml_sample_path, "r", encoding="utf-8") as f:
+                    commented_config = yaml.load(f)
+
+                for k in config:
+                    commented_config[k] = config[k]
+
+                config = commented_config
+        yaml.indent(mapping=2, sequence=4, offset=2)
+
+        if "config_on_startup" in config:
+            del config["config_on_startup"]
+
+        try:
+            f = open(config_yaml_path + ".tmp", "w", encoding="utf-8")
+            yaml.dump(config, f)
+        finally:
+            f.close()  # do this explicitly to avoid NUL bytes (possible rare bug when using 'with')
+
+        # verify that the new file is valid, and only then overwrite the old config file
+        # helps prevent the rare NUL bytes error from corrupting the config file
+        yaml = YAML()
+        with open(config_yaml_path + ".tmp", "r", encoding="utf-8") as f:
+            yaml.load(f)
+        shutil.move(config_yaml_path + ".tmp", config_yaml_path)
     except:
         log.error(traceback.format_exc())
 
@@ -178,10 +235,12 @@ def update_render_threads():
 def getUIPlugins():
     plugins = []
 
+    file_names = set()
     for plugins_dir, dir_prefix in UI_PLUGINS_SOURCES:
         for file in os.listdir(plugins_dir):
-            if file.endswith(".plugin.js"):
+            if file.endswith(".plugin.js") and file not in file_names:
                 plugins.append(f"/plugins/{dir_prefix}/{file}")
+                file_names.add(file)
 
     return plugins
 
@@ -240,6 +299,8 @@ def open_browser():
     if ui.get("open_browser_on_start", True):
         import webbrowser
 
+        log.info("Opening browser..")
+
         webbrowser.open(f"http://localhost:{port}")
 
     Console().print(
@@ -258,7 +319,7 @@ def fail_and_die(fail_type: str, data: str):
     suggestions = [
         "Run this installer again.",
         "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",
-        "If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues",
+        "If that doesn't solve the problem, please file an issue at https://github.com/easydiffusion/easydiffusion/issues",
     ]
 
     if fail_type == "model_download":

ui/easydiffusion/model_manager.py

@@ -2,12 +2,14 @@ import os
 import shutil
 from glob import glob
 import traceback
+from typing import Union
 
 from easydiffusion import app
-from easydiffusion.types import TaskData
+from easydiffusion.types import ModelsData
 from easydiffusion.utils import log
 from sdkit import Context
 from sdkit.models import load_model, scan_model, unload_model, download_model, get_model_info_from_db
+from sdkit.models.model_loader.controlnet_filters import filters as cn_filters
 from sdkit.utils import hash_file_quick
 
 KNOWN_MODEL_TYPES = [
@@ -18,6 +20,8 @@ KNOWN_MODEL_TYPES = [
     "realesrgan",
     "lora",
     "codeformer",
+    "embeddings",
+    "controlnet",
 ]
 MODEL_EXTENSIONS = {
     "stable-diffusion": [".ckpt", ".safetensors"],
@@ -27,6 +31,8 @@ MODEL_EXTENSIONS = {
     "realesrgan": [".pth"],
     "lora": [".ckpt", ".safetensors"],
     "codeformer": [".pth"],
+    "embeddings": [".pt", ".bin", ".safetensors"],
+    "controlnet": [".pth", ".safetensors"],
 }
 DEFAULT_MODELS = {
     "stable-diffusion": [
@@ -52,11 +58,15 @@ def init():
     make_model_folders()
     migrate_legacy_model_location()  # if necessary
     download_default_models_if_necessary()
-    getModels()  # run this once, to cache the picklescan results
 
 
 def load_default_models(context: Context):
-    set_vram_optimizations(context)
+    from easydiffusion import runtime
+
+    runtime.set_vram_optimizations(context)
+
+    config = app.getConfig()
+    context.embeddings_path = os.path.join(app.MODELS_DIR, "embeddings")
 
     # init default model paths
     for model_type in MODELS_TO_LOAD_ON_START:
@@ -90,7 +100,14 @@ def unload_all(context: Context):
             del context.model_load_errors[model_type]
 
 
-def resolve_model_to_use(model_name: str = None, model_type: str = None, fail_if_not_found: bool = True):
+def resolve_model_to_use(model_name: Union[str, list] = None, model_type: str = None, fail_if_not_found: bool = True):
+    model_names = model_name if isinstance(model_name, list) else [model_name]
+    model_paths = [resolve_model_to_use_single(m, model_type, fail_if_not_found) for m in model_names]
+
+    return model_paths[0] if len(model_paths) == 1 else model_paths
+
+
+def resolve_model_to_use_single(model_name: str = None, model_type: str = None, fail_if_not_found: bool = True):
     model_extensions = MODEL_EXTENSIONS.get(model_type, [])
     default_models = DEFAULT_MODELS.get(model_type, [])
     config = app.getConfig()
@@ -127,43 +144,32 @@ def resolve_model_to_use(model_name: str = None, model_type: str = None, fail_if
         raise Exception(f"Could not find the desired model {model_name}! Is it present in the {model_dir} folder?")
 
 
-def reload_models_if_necessary(context: Context, task_data: TaskData):
+def reload_models_if_necessary(context: Context, models_data: ModelsData, models_to_force_reload: list = []):
-    face_fix_lower = task_data.use_face_correction.lower() if task_data.use_face_correction else ""
-    upscale_lower = task_data.use_upscale.lower() if task_data.use_upscale else ""
-
-    model_paths_in_req = {
-        "stable-diffusion": task_data.use_stable_diffusion_model,
-        "vae": task_data.use_vae_model,
-        "hypernetwork": task_data.use_hypernetwork_model,
-        "codeformer": task_data.use_face_correction if "codeformer" in face_fix_lower else None,
-        "gfpgan": task_data.use_face_correction if "gfpgan" in face_fix_lower else None,
-        "realesrgan": task_data.use_upscale if "realesrgan" in upscale_lower else None,
-        "latent_upscaler": True if "latent_upscaler" in upscale_lower else None,
-        "nsfw_checker": True if task_data.block_nsfw else None,
-        "lora": task_data.use_lora_model,
-    }
     models_to_reload = {
         model_type: path
-        for model_type, path in model_paths_in_req.items()
+        for model_type, path in models_data.model_paths.items()
-        if context.model_paths.get(model_type) != path
+        if context.model_paths.get(model_type) != path or (path is not None and context.models.get(model_type) is None)
     }
 
-    if task_data.codeformer_upscale_faces:
+    if models_data.model_paths.get("codeformer"):
         if "realesrgan" not in models_to_reload and "realesrgan" not in context.models:
             default_realesrgan = DEFAULT_MODELS["realesrgan"][0]["file_name"]
             models_to_reload["realesrgan"] = resolve_model_to_use(default_realesrgan, "realesrgan")
         elif "realesrgan" in models_to_reload and models_to_reload["realesrgan"] is None:
             del models_to_reload["realesrgan"]  # don't unload realesrgan
 
-    if set_vram_optimizations(context) or set_clip_skip(context, task_data):  # reload SD
+    for model_type in models_to_force_reload:
-        models_to_reload["stable-diffusion"] = model_paths_in_req["stable-diffusion"]
+        if model_type not in models_data.model_paths:
+            continue
+        models_to_reload[model_type] = models_data.model_paths[model_type]
 
     for model_type, model_path_in_req in models_to_reload.items():
         context.model_paths[model_type] = model_path_in_req
 
         action_fn = unload_model if context.model_paths[model_type] is None else load_model
+        extra_params = models_data.model_params.get(model_type, {})
         try:
-            action_fn(context, model_type, scan_model=False)  # we've scanned them already
+            action_fn(context, model_type, scan_model=False, **extra_params)  # we've scanned them already
             if model_type in context.model_load_errors:
                 del context.model_load_errors[model_type]
         except Exception as e:
@@ -172,24 +178,22 @@ def reload_models_if_necessary(context: Context, task_data: TaskData):
                 context.model_load_errors[model_type] = str(e)  # storing the entire Exception can lead to memory leaks
 
 
-def resolve_model_paths(task_data: TaskData):
+def resolve_model_paths(models_data: ModelsData):
-    task_data.use_stable_diffusion_model = resolve_model_to_use(
+    model_paths = models_data.model_paths
-        task_data.use_stable_diffusion_model, model_type="stable-diffusion"
+    for model_type in model_paths:
-    )
+        skip_models = cn_filters + ["latent_upscaler", "nsfw_checker"]
-    task_data.use_vae_model = resolve_model_to_use(task_data.use_vae_model, model_type="vae")
+        if model_type in skip_models:  # doesn't use model paths
-    task_data.use_hypernetwork_model = resolve_model_to_use(task_data.use_hypernetwork_model, model_type="hypernetwork")
+            continue
-    task_data.use_lora_model = resolve_model_to_use(task_data.use_lora_model, model_type="lora")
+        if model_type == "codeformer":
-
-    if task_data.use_face_correction:
-        if "gfpgan" in task_data.use_face_correction.lower():
-            model_type = "gfpgan"
-        elif "codeformer" in task_data.use_face_correction.lower():
-            model_type = "codeformer"
             download_if_necessary("codeformer", "codeformer.pth", "codeformer-0.1.0")
+        elif model_type == "controlnet":
+            model_id = model_paths[model_type]
+            model_info = get_model_info_from_db(model_type=model_type, model_id=model_id)
+            if model_info:
+                filename = model_info.get("url", "").split("/")[-1]
+                download_if_necessary("controlnet", filename, model_id, skip_if_others_exist=False)
 
-        task_data.use_face_correction = resolve_model_to_use(task_data.use_face_correction, model_type)
+        model_paths[model_type] = resolve_model_to_use(model_paths[model_type], model_type=model_type)
-    if task_data.use_upscale and "realesrgan" in task_data.use_upscale.lower():
-        task_data.use_upscale = resolve_model_to_use(task_data.use_upscale, "realesrgan")
 
 
 def fail_if_models_did_not_load(context: Context):
@@ -211,28 +215,17 @@ def download_default_models_if_necessary():
         print(model_type, "model(s) found.")
 
 
-def download_if_necessary(model_type: str, file_name: str, model_id: str):
+def download_if_necessary(model_type: str, file_name: str, model_id: str, skip_if_others_exist=True):
     model_path = os.path.join(app.MODELS_DIR, model_type, file_name)
     expected_hash = get_model_info_from_db(model_type=model_type, model_id=model_id)["quick_hash"]
 
-    other_models_exist = any_model_exists(model_type)
+    other_models_exist = any_model_exists(model_type) and skip_if_others_exist
     known_model_exists = os.path.exists(model_path)
     known_model_is_corrupt = known_model_exists and hash_file_quick(model_path) != expected_hash
 
     if known_model_is_corrupt or (not other_models_exist and not known_model_exists):
         print("> download", model_type, model_id)
-        download_model(model_type, model_id, download_base_dir=app.MODELS_DIR)
+        download_model(model_type, model_id, download_base_dir=app.MODELS_DIR, download_config_if_available=False)
-
-
-def set_vram_optimizations(context: Context):
-    config = app.getConfig()
-    vram_usage_level = config.get("vram_usage_level", "balanced")
-
-    if vram_usage_level != context.vram_usage_level:
-        context.vram_usage_level = vram_usage_level
-        return True
-
-    return False
 
 
 def migrate_legacy_model_location():
@@ -255,16 +248,6 @@ def any_model_exists(model_type: str) -> bool:
     return False
 
 
-def set_clip_skip(context: Context, task_data: TaskData):
-    clip_skip = task_data.clip_skip
-
-    if clip_skip != context.clip_skip:
-        context.clip_skip = clip_skip
-        return True
-
-    return False
-
-
 def make_model_folders():
     for model_type in KNOWN_MODEL_TYPES:
         model_dir_path = os.path.join(app.MODELS_DIR, model_type)
@@ -310,14 +293,29 @@ def is_malicious_model(file_path):
     return False
 
 
-def getModels():
+def getModels(scan_for_malicious: bool = True):
     models = {
         "options": {
-            "stable-diffusion": ["sd-v1-4"],
+            "stable-diffusion": [{"sd-v1-4": "SD 1.4"}],
             "vae": [],
             "hypernetwork": [],
             "lora": [],
-            "codeformer": ["codeformer"],
+            "codeformer": [{"codeformer": "CodeFormer"}],
+            "embeddings": [],
+            "controlnet": [
+                {"control_v11p_sd15_canny": "Canny (*)"},
+                {"control_v11p_sd15_openpose": "OpenPose (*)"},
+                {"control_v11p_sd15_normalbae": "Normal BAE (*)"},
+                {"control_v11f1p_sd15_depth": "Depth (*)"},
+                {"control_v11p_sd15_scribble": "Scribble"},
+                {"control_v11p_sd15_softedge": "Soft Edge"},
+                {"control_v11p_sd15_inpaint": "Inpaint"},
+                {"control_v11p_sd15_lineart": "Line Art"},
+                {"control_v11p_sd15s2_lineart_anime": "Line Art Anime"},
+                {"control_v11p_sd15_mlsd": "Straight Lines"},
+                {"control_v11p_sd15_seg": "Segment"},
+                {"control_v11e_sd15_shuffle": "Shuffle"},
+            ],
         },
     }
 
@@ -326,9 +324,9 @@ def getModels():
     class MaliciousModelException(Exception):
         "Raised when picklescan reports a problem with a model"
 
-    def scan_directory(directory, suffixes, directoriesFirst: bool = True):
+    def scan_directory(directory, suffixes, directoriesFirst: bool = True, default_entries=[]):
+        tree = list(default_entries)
         nonlocal models_scanned
-        tree = []
         for entry in sorted(
             os.scandir(directory),
             key=lambda entry: (entry.is_file() == directoriesFirst, entry.name.lower()),
@@ -343,10 +341,18 @@ def getModels():
                 mod_time = known_models[entry.path] if entry.path in known_models else -1
                 if mod_time != mtime:
                     models_scanned += 1
-                    if is_malicious_model(entry.path):
+                    if scan_for_malicious and is_malicious_model(entry.path):
                         raise MaliciousModelException(entry.path)
-                known_models[entry.path] = mtime
+                if scan_for_malicious:
-                tree.append(entry.name[: -len(matching_suffix)])
+                    known_models[entry.path] = mtime
+                model_id = entry.name[: -len(matching_suffix)]
+                model_exists = False
+                for m in tree:  # allows default "named" models, like CodeFormer and known ControlNet models
+                    if (isinstance(m, str) and model_id == m) or (isinstance(m, dict) and model_id in m):
+                        model_exists = True
+                        break
+                if not model_exists:
+                    tree.append(model_id)
             elif entry.is_dir():
                 scan = scan_directory(entry.path, suffixes, directoriesFirst=False)
 
@@ -363,19 +369,23 @@ def getModels():
             os.makedirs(models_dir)
 
         try:
-            models["options"][model_type] = scan_directory(models_dir, model_extensions)
+            default_tree = models["options"].get(model_type, [])
+            models["options"][model_type] = scan_directory(models_dir, model_extensions, default_entries=default_tree)
         except MaliciousModelException as e:
-            models["scan-error"] = e
+            models["scan-error"] = str(e)
 
-    log.info(f"[green]Scanning all model folders for models...[/]")
+    if scan_for_malicious:
+        log.info(f"[green]Scanning all model folders for models...[/]")
     # custom models
     listModels(model_type="stable-diffusion")
     listModels(model_type="vae")
     listModels(model_type="hypernetwork")
     listModels(model_type="gfpgan")
     listModels(model_type="lora")
+    listModels(model_type="embeddings")
+    listModels(model_type="controlnet")
 
-    if models_scanned > 0:
+    if scan_for_malicious and models_scanned > 0:
         log.info(f"[green]Scanned {models_scanned} models. Nothing infected[/]")
 
     return models

ui/easydiffusion/package_manager.py

@@ -0,0 +1,98 @@
+import sys
+import os
+import platform
+from importlib.metadata import version as pkg_version
+
+from sdkit.utils import log
+
+from easydiffusion import app
+
+# future home of scripts/check_modules.py
+
+manifest = {
+    "tensorrt": {
+        "install": [
+            "nvidia-cudnn --extra-index-url=https://pypi.ngc.nvidia.com --trusted-host pypi.ngc.nvidia.com",
+            "tensorrt-libs --extra-index-url=https://pypi.ngc.nvidia.com --trusted-host pypi.ngc.nvidia.com",
+            "tensorrt --extra-index-url=https://pypi.ngc.nvidia.com --trusted-host pypi.ngc.nvidia.com",
+        ],
+        "uninstall": ["tensorrt"],
+        # TODO also uninstall tensorrt-libs and nvidia-cudnn, but do it upon restarting (avoid 'file in use' error)
+    }
+}
+installing = []
+
+# remove this once TRT releases on pypi
+if platform.system() == "Windows":
+    trt_dir = os.path.join(app.ROOT_DIR, "tensorrt")
+    if os.path.exists(trt_dir):
+        files = os.listdir(trt_dir)
+
+        packages = manifest["tensorrt"]["install"]
+        packages = tuple(p.replace("-", "_") for p in packages)
+
+        wheels = []
+        for p in packages:
+            p = p.split(" ")[0]
+            f = next((f for f in files if f.startswith(p) and f.endswith((".whl", ".tar.gz"))), None)
+            if f:
+                wheels.append(os.path.join(trt_dir, f))
+
+        manifest["tensorrt"]["install"] = wheels
+
+
+def get_installed_packages() -> list:
+    return {module_name: version(module_name) for module_name in manifest if is_installed(module_name)}
+
+
+def is_installed(module_name) -> bool:
+    return version(module_name) is not None
+
+
+def install(module_name):
+    if is_installed(module_name):
+        log.info(f"{module_name} has already been installed!")
+        return
+    if module_name in installing:
+        log.info(f"{module_name} is already installing!")
+        return
+
+    if module_name not in manifest:
+        raise RuntimeError(f"Can't install unknown package: {module_name}!")
+
+    commands = manifest[module_name]["install"]
+    commands = [f"python -m pip install --upgrade {cmd}" for cmd in commands]
+
+    installing.append(module_name)
+
+    try:
+        for cmd in commands:
+            print(">", cmd)
+            if os.system(cmd) != 0:
+                raise RuntimeError(f"Error while running {cmd}. Please check the logs in the command-line.")
+    finally:
+        installing.remove(module_name)
+
+
+def uninstall(module_name):
+    if not is_installed(module_name):
+        log.info(f"{module_name} hasn't been installed!")
+        return
+
+    if module_name not in manifest:
+        raise RuntimeError(f"Can't uninstall unknown package: {module_name}!")
+
+    commands = manifest[module_name]["uninstall"]
+    commands = [f"python -m pip uninstall -y {cmd}" for cmd in commands]
+
+    for cmd in commands:
+        print(">", cmd)
+        if os.system(cmd) != 0:
+            raise RuntimeError(f"Error while running {cmd}. Please check the logs in the command-line.")
+
+
+def version(module_name: str) -> str:
+    try:
+        return pkg_version(module_name)
+    except:
+        return None

ui/easydiffusion/renderer.py

@@ -1,279 +0,0 @@
-import json
-import pprint
-import queue
-import time
-
-from easydiffusion import device_manager
-from easydiffusion.types import GenerateImageRequest
-from easydiffusion.types import Image as ResponseImage
-from easydiffusion.types import Response, TaskData, UserInitiatedStop
-from easydiffusion.model_manager import DEFAULT_MODELS, resolve_model_to_use
-from easydiffusion.utils import get_printable_request, log, save_images_to_disk
-from sdkit import Context
-from sdkit.filter import apply_filters
-from sdkit.generate import generate_images
-from sdkit.models import load_model
-from sdkit.utils import (
-    diffusers_latent_samples_to_images,
-    gc,
-    img_to_base64_str,
-    img_to_buffer,
-    latent_samples_to_images,
-    get_device_usage,
-)
-
-context = Context()  # thread-local
-"""
-runtime data (bound locally to this thread), for e.g. device, references to loaded models, optimization flags etc
-"""
-
-
-def init(device):
-    """
-    Initializes the fields that will be bound to this runtime's context, and sets the current torch device
-    """
-    context.stop_processing = False
-    context.temp_images = {}
-    context.partial_x_samples = None
-    context.model_load_errors = {}
-    context.enable_codeformer = True
-
-    from easydiffusion import app
-
-    app_config = app.getConfig()
-    context.test_diffusers = (
-        app_config.get("test_diffusers", False) and app_config.get("update_branch", "main") != "main"
-    )
-
-    log.info("Device usage during initialization:")
-    get_device_usage(device, log_info=True, process_usage_only=False)
-
-    device_manager.device_init(context, device)
-
-
-def make_images(
-    req: GenerateImageRequest,
-    task_data: TaskData,
-    data_queue: queue.Queue,
-    task_temp_images: list,
-    step_callback,
-):
-    context.stop_processing = False
-    print_task_info(req, task_data)
-
-    images, seeds = make_images_internal(req, task_data, data_queue, task_temp_images, step_callback)
-
-    res = Response(
-        req,
-        task_data,
-        images=construct_response(images, seeds, task_data, base_seed=req.seed),
-    )
-    res = res.json()
-    data_queue.put(json.dumps(res))
-    log.info("Task completed")
-
-    return res
-
-
-def print_task_info(req: GenerateImageRequest, task_data: TaskData):
-    req_str = pprint.pformat(get_printable_request(req, task_data)).replace("[", "\[")
-    task_str = pprint.pformat(task_data.dict()).replace("[", "\[")
-    log.info(f"request: {req_str}")
-    log.info(f"task data: {task_str}")
-
-
-def make_images_internal(
-    req: GenerateImageRequest,
-    task_data: TaskData,
-    data_queue: queue.Queue,
-    task_temp_images: list,
-    step_callback,
-):
-    images, user_stopped = generate_images_internal(
-        req,
-        task_data,
-        data_queue,
-        task_temp_images,
-        step_callback,
-        task_data.stream_image_progress,
-        task_data.stream_image_progress_interval,
-    )
-    gc(context)
-    filtered_images = filter_images(req, task_data, images, user_stopped)
-
-    if task_data.save_to_disk_path is not None:
-        save_images_to_disk(images, filtered_images, req, task_data)
-
-    seeds = [*range(req.seed, req.seed + len(images))]
-    if task_data.show_only_filtered_image or filtered_images is images:
-        return filtered_images, seeds
-    else:
-        return images + filtered_images, seeds + seeds
-
-
-def generate_images_internal(
-    req: GenerateImageRequest,
-    task_data: TaskData,
-    data_queue: queue.Queue,
-    task_temp_images: list,
-    step_callback,
-    stream_image_progress: bool,
-    stream_image_progress_interval: int,
-):
-    context.temp_images.clear()
-
-    callback = make_step_callback(
-        req,
-        task_data,
-        data_queue,
-        task_temp_images,
-        step_callback,
-        stream_image_progress,
-        stream_image_progress_interval,
-    )
-
-    try:
-        if req.init_image is not None and not context.test_diffusers:
-            req.sampler_name = "ddim"
-
-        images = generate_images(context, callback=callback, **req.dict())
-        user_stopped = False
-    except UserInitiatedStop:
-        images = []
-        user_stopped = True
-        if context.partial_x_samples is not None:
-            if context.test_diffusers:
-                images = diffusers_latent_samples_to_images(context, context.partial_x_samples)
-            else:
-                images = latent_samples_to_images(context, context.partial_x_samples)
-    finally:
-        if hasattr(context, "partial_x_samples") and context.partial_x_samples is not None:
-            if not context.test_diffusers:
-                del context.partial_x_samples
-            context.partial_x_samples = None
-
-    return images, user_stopped
-
-
-def filter_images(req: GenerateImageRequest, task_data: TaskData, images: list, user_stopped):
-    if user_stopped:
-        return images
-
-    if task_data.block_nsfw:
-        images = apply_filters(context, "nsfw_checker", images)
-
-    if task_data.use_face_correction and "codeformer" in task_data.use_face_correction.lower():
-        default_realesrgan = DEFAULT_MODELS["realesrgan"][0]["file_name"]
-        prev_realesrgan_path = None
-        if task_data.codeformer_upscale_faces and default_realesrgan not in context.model_paths["realesrgan"]:
-            prev_realesrgan_path = context.model_paths["realesrgan"]
-            context.model_paths["realesrgan"] = resolve_model_to_use(default_realesrgan, "realesrgan")
-            load_model(context, "realesrgan")
-
-        try:
-            images = apply_filters(
-                context,
-                "codeformer",
-                images,
-                upscale_faces=task_data.codeformer_upscale_faces,
-                codeformer_fidelity=task_data.codeformer_fidelity,
-            )
-        finally:
-            if prev_realesrgan_path:
-                context.model_paths["realesrgan"] = prev_realesrgan_path
-                load_model(context, "realesrgan")
-    elif task_data.use_face_correction and "gfpgan" in task_data.use_face_correction.lower():
-        images = apply_filters(context, "gfpgan", images)
-
-    if task_data.use_upscale:
-        if "realesrgan" in task_data.use_upscale.lower():
-            images = apply_filters(context, "realesrgan", images, scale=task_data.upscale_amount)
-        elif task_data.use_upscale == "latent_upscaler":
-            images = apply_filters(
-                context,
-                "latent_upscaler",
-                images,
-                scale=task_data.upscale_amount,
-                latent_upscaler_options={
-                    "prompt": req.prompt,
-                    "negative_prompt": req.negative_prompt,
-                    "seed": req.seed,
-                    "num_inference_steps": task_data.latent_upscaler_steps,
-                    "guidance_scale": 0,
-                },
-            )
-
-    return images
-
-
-def construct_response(images: list, seeds: list, task_data: TaskData, base_seed: int):
-    return [
-        ResponseImage(
-            data=img_to_base64_str(
-                img,
-                task_data.output_format,
-                task_data.output_quality,
-                task_data.output_lossless,
-            ),
-            seed=seed,
-        )
-        for img, seed in zip(images, seeds)
-    ]
-
-
-def make_step_callback(
-    req: GenerateImageRequest,
-    task_data: TaskData,
-    data_queue: queue.Queue,
-    task_temp_images: list,
-    step_callback,
-    stream_image_progress: bool,
-    stream_image_progress_interval: int,
-):
-    n_steps = req.num_inference_steps if req.init_image is None else int(req.num_inference_steps * req.prompt_strength)
-    last_callback_time = -1
-
-    def update_temp_img(x_samples, task_temp_images: list):
-        partial_images = []
-
-        if context.test_diffusers:
-            images = diffusers_latent_samples_to_images(context, x_samples)
-        else:
-            images = latent_samples_to_images(context, x_samples)
-
-        if task_data.block_nsfw:
-            images = apply_filters(context, "nsfw_checker", images)
-
-        for i, img in enumerate(images):
-            buf = img_to_buffer(img, output_format="JPEG")
-
-            context.temp_images[f"{task_data.request_id}/{i}"] = buf
-            task_temp_images[i] = buf
-            partial_images.append({"path": f"/image/tmp/{task_data.request_id}/{i}"})
-        del images
-        return partial_images
-
-    def on_image_step(x_samples, i, *args):
-        nonlocal last_callback_time
-
-        if context.test_diffusers:
-            context.partial_x_samples = (x_samples, args[0])
-        else:
-            context.partial_x_samples = x_samples
-
-        step_time = time.time() - last_callback_time if last_callback_time != -1 else -1
-        last_callback_time = time.time()
-
-        progress = {"step": i, "step_time": step_time, "total_steps": n_steps}
-
-        if stream_image_progress and stream_image_progress_interval > 0 and i % stream_image_progress_interval == 0:
-            progress["output"] = update_temp_img(context.partial_x_samples, task_temp_images)
-
-        data_queue.put(json.dumps(progress))
-
-        step_callback()
-
-        if context.stop_processing:
-            raise UserInitiatedStop("User requested that we stop processing")
-
-    return on_image_step

ui/easydiffusion/runtime.py

@@ -0,0 +1,53 @@
+"""
+A runtime that runs on a specific device (in a thread).
+
+It can run various tasks like image generation, image filtering, model merge etc by using that thread-local context.
+
+This creates an `sdkit.Context` that's bound to the device specified while calling the `init()` function.
+"""
+
+from easydiffusion import device_manager
+from easydiffusion.utils import log
+from sdkit import Context
+from sdkit.utils import get_device_usage
+
+context = Context()  # thread-local
+"""
+runtime data (bound locally to this thread), for e.g. device, references to loaded models, optimization flags etc
+"""
+
+
+def init(device):
+    """
+    Initializes the fields that will be bound to this runtime's context, and sets the current torch device
+    """
+    context.stop_processing = False
+    context.temp_images = {}
+    context.partial_x_samples = None
+    context.model_load_errors = {}
+    context.enable_codeformer = True
+
+    from easydiffusion import app
+
+    app_config = app.getConfig()
+    context.test_diffusers = (
+        app_config.get("test_diffusers", False) and app_config.get("update_branch", "main") != "main"
+    )
+
+    log.info("Device usage during initialization:")
+    get_device_usage(device, log_info=True, process_usage_only=False)
+
+    device_manager.device_init(context, device)
+
+
+def set_vram_optimizations(context: Context):
+    from easydiffusion import app
+
+    config = app.getConfig()
+    vram_usage_level = config.get("vram_usage_level", "balanced")
+
+    if vram_usage_level != context.vram_usage_level:
+        context.vram_usage_level = vram_usage_level
+        return True
+
+    return False

ui/easydiffusion/server.py

@@ -8,8 +8,17 @@ import os
 import traceback
 from typing import List, Union
 
-from easydiffusion import app, model_manager, task_manager
+from easydiffusion import app, model_manager, task_manager, package_manager
-from easydiffusion.types import GenerateImageRequest, MergeRequest, TaskData
+from easydiffusion.tasks import RenderTask, FilterTask
+from easydiffusion.types import (
+    GenerateImageRequest,
+    FilterImageRequest,
+    MergeRequest,
+    TaskData,
+    ModelsData,
+    OutputFormatData,
+    convert_legacy_render_req_to_new,
+)
 from easydiffusion.utils import log
 from fastapi import FastAPI, HTTPException
 from fastapi.staticfiles import StaticFiles
@@ -86,8 +95,8 @@ def init():
         return set_app_config_internal(req)
 
     @server_api.get("/get/{key:path}")
-    def read_web_data(key: str = None):
+    def read_web_data(key: str = None, scan_for_malicious: bool = True):
-        return read_web_data_internal(key)
+        return read_web_data_internal(key, scan_for_malicious=scan_for_malicious)
 
     @server_api.get("/ping")  # Get server and optionally session status.
     def ping(session_id: str = None):
@@ -97,6 +106,10 @@ def init():
     def render(req: dict):
         return render_internal(req)
 
+    @server_api.post("/filter")
+    def render(req: dict):
+        return filter_internal(req)
+
     @server_api.post("/model/merge")
     def model_merge(req: dict):
         print(req)
@@ -122,6 +135,10 @@ def init():
     def stop_cloudflare_tunnel(req: dict):
         return stop_cloudflare_tunnel_internal(req)
 
+    @server_api.post("/package/{package_name:str}")
+    def modify_package(package_name: str, req: dict):
+        return modify_package_internal(package_name, req)
+
     @server_api.get("/")
     def read_root():
         return FileResponse(os.path.join(app.SD_UI_DIR, "index.html"), headers=NOCACHE_HEADERS)
@@ -179,7 +196,7 @@ def update_render_devices_in_config(config, render_devices):
     config["render_devices"] = render_devices
 
 
-def read_web_data_internal(key: str = None):
+def read_web_data_internal(key: str = None, **kwargs):
     if not key:  # /get without parameters, stable-diffusion easter egg.
         raise HTTPException(status_code=418, detail="StableDiffusion is drawing a teapot!")  # HTTP418 I'm a teapot
     elif key == "app_config":
@@ -198,7 +215,8 @@ def read_web_data_internal(key: str = None):
         system_info["devices"]["config"] = config.get("render_devices", "auto")
         return JSONResponse(system_info, headers=NOCACHE_HEADERS)
     elif key == "models":
-        return JSONResponse(model_manager.getModels(), headers=NOCACHE_HEADERS)
+        scan_for_malicious = kwargs.get("scan_for_malicious", True)
+        return JSONResponse(model_manager.getModels(scan_for_malicious), headers=NOCACHE_HEADERS)
     elif key == "modifiers":
         return JSONResponse(app.get_image_modifiers(), headers=NOCACHE_HEADERS)
     elif key == "ui_plugins":
@@ -212,24 +230,36 @@ def ping_internal(session_id: str = None):
         if task_manager.current_state_error:
             raise HTTPException(status_code=500, detail=str(task_manager.current_state_error))
         raise HTTPException(status_code=500, detail="Render thread is dead.")
+
     if task_manager.current_state_error and not isinstance(task_manager.current_state_error, StopAsyncIteration):
         raise HTTPException(status_code=500, detail=str(task_manager.current_state_error))
+
     # Alive
     response = {"status": str(task_manager.current_state)}
+
     if session_id:
         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()
+    response["packages_installed"] = package_manager.get_installed_packages()
+    response["packages_installing"] = package_manager.installing
+
     if cloudflare.address != None:
         response["cloudflare"] = cloudflare.address
+
     return JSONResponse(response, headers=NOCACHE_HEADERS)
 
 
 def render_internal(req: dict):
     try:
+        req = convert_legacy_render_req_to_new(req)
+
         # separate out the request data into rendering and task-specific data
         render_req: GenerateImageRequest = GenerateImageRequest.parse_obj(req)
         task_data: TaskData = TaskData.parse_obj(req)
+        models_data: ModelsData = ModelsData.parse_obj(req)
+        output_format: OutputFormatData = OutputFormatData.parse_obj(req)
 
         # Overwrite user specified save path
         config = app.getConfig()
@@ -239,28 +269,53 @@ def render_internal(req: dict):
         render_req.init_image_mask = req.get("mask")  # hack: will rename this in the HTTP API in a future revision
 
         app.save_to_config(
-            task_data.use_stable_diffusion_model,
+            models_data.model_paths.get("stable-diffusion"),
-            task_data.use_vae_model,
+            models_data.model_paths.get("vae"),
-            task_data.use_hypernetwork_model,
+            models_data.model_paths.get("hypernetwork"),
             task_data.vram_usage_level,
         )
 
         # enqueue the task
-        new_task = task_manager.render(render_req, task_data)
+        task = RenderTask(render_req, task_data, models_data, output_format)
+        return enqueue_task(task)
+    except HTTPException as e:
+        raise e
+    except Exception as e:
+        log.error(traceback.format_exc())
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+def filter_internal(req: dict):
+    try:
+        session_id = req.get("session_id", "session")
+        filter_req: FilterImageRequest = FilterImageRequest.parse_obj(req)
+        models_data: ModelsData = ModelsData.parse_obj(req)
+        output_format: OutputFormatData = OutputFormatData.parse_obj(req)
+
+        # enqueue the task
+        task = FilterTask(filter_req, session_id, models_data, output_format)
+        return enqueue_task(task)
+    except HTTPException as e:
+        raise e
+    except Exception as e:
+        log.error(traceback.format_exc())
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+def enqueue_task(task):
+    try:
+        task_manager.enqueue_task(task)
         response = {
             "status": str(task_manager.current_state),
             "queue": len(task_manager.tasks_queue),
-            "stream": f"/image/stream/{id(new_task)}",
+            "stream": f"/image/stream/{task.id}",
-            "task": id(new_task),
+            "task": task.id,
         }
         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 limit reached, deny queueing too many.
         raise HTTPException(status_code=503, detail=str(e))  # HTTP503 Service Unavailable
-    except Exception as e:
-        log.error(traceback.format_exc())
-        raise HTTPException(status_code=500, detail=str(e))
 
 
 def model_merge_internal(req: dict):
@@ -334,7 +389,8 @@ def get_image_internal(task_id: int, img_id: int):
     except KeyError as e:
         raise HTTPException(status_code=500, detail=str(e))
 
-#---- Cloudflare Tunnel ----
+
+# ---- Cloudflare Tunnel ----
 class CloudflareTunnel:
     def __init__(self):
         config = app.getConfig()
@@ -357,23 +413,41 @@ class CloudflareTunnel:
         else:
             return None
 
+
 cloudflare = CloudflareTunnel()
 
+
 def start_cloudflare_tunnel_internal(req: dict):
-   try:
+    try:
-      cloudflare.start()
+        cloudflare.start()
-      log.info(f"- Started cloudflare tunnel. Using address: {cloudflare.address}")
+        log.info(f"- Started cloudflare tunnel. Using address: {cloudflare.address}")
-      return JSONResponse({"address":cloudflare.address})
+        return JSONResponse({"address": cloudflare.address})
-   except Exception as e:
+    except Exception as e:
-      log.error(str(e))
+        log.error(str(e))
-      log.error(traceback.format_exc())
+        log.error(traceback.format_exc())
-      return HTTPException(status_code=500, detail=str(e))
+        return HTTPException(status_code=500, detail=str(e))
+
 
 def stop_cloudflare_tunnel_internal(req: dict):
-   try:
+    try:
-      cloudflare.stop()
+        cloudflare.stop()
-   except Exception as e:
+    except Exception as e:
-      log.error(str(e))
+        log.error(str(e))
-      log.error(traceback.format_exc())
+        log.error(traceback.format_exc())
-      return HTTPException(status_code=500, detail=str(e))
+        return HTTPException(status_code=500, detail=str(e))
 
+
+def modify_package_internal(package_name: str, req: dict):
+    try:
+        cmd = req["command"]
+        if cmd not in ("install", "uninstall"):
+            raise RuntimeError(f"Unknown command: {cmd}")
+
+        cmd = getattr(package_manager, cmd)
+        cmd(package_name)
+
+        return JSONResponse({"status": "OK"}, headers=NOCACHE_HEADERS)
+    except Exception as e:
+        log.error(str(e))
+        log.error(traceback.format_exc())
+        return HTTPException(status_code=500, detail=str(e))

ui/easydiffusion/task_manager.py

@@ -17,7 +17,7 @@ from typing import Any, Hashable
 
 import torch
 from easydiffusion import device_manager
-from easydiffusion.types import GenerateImageRequest, TaskData
+from easydiffusion.tasks import Task
 from easydiffusion.utils import log
 from sdkit.utils import gc
 
@@ -27,6 +27,7 @@ LOCK_TIMEOUT = 15  # Maximum locking time in seconds before failing a task.
 # It's better to get an exception than a deadlock... ALWAYS use timeout in critical paths.
 
 DEVICE_START_TIMEOUT = 60  # seconds - Maximum time to wait for a render device to init.
+MAX_OVERLOAD_ALLOWED_RATIO = 2  # i.e. 2x pending tasks compared to the number of render threads
 
 
 class SymbolClass(type):  # Print nicely formatted Symbol names.
@@ -58,46 +59,6 @@ class ServerStates:
         pass
 
 
-class RenderTask:  # Task with output queue and completion lock.
-    def __init__(self, req: GenerateImageRequest, task_data: TaskData):
-        task_data.request_id = id(self)
-        self.render_request: GenerateImageRequest = req  # Initial Request
-        self.task_data: TaskData = task_data
-        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 task_data.show_only_filtered_image else 2)
-        self.error: Exception = None
-        self.lock: threading.Lock = threading.Lock()  # Locks at task start and unlocks when task is completed
-        self.buffer_queue: queue.Queue = queue.Queue()  # Queue of JSON string segments
-
-    async def read_buffer_generator(self):
-        try:
-            while not self.buffer_queue.empty():
-                res = self.buffer_queue.get(block=False)
-                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)
-
-
 # Temporary cache to allow to query tasks results for a short time after they are completed.
 class DataCache:
     def __init__(self):
@@ -123,8 +84,8 @@ class DataCache:
             # Remove Items
             for key in to_delete:
                 (_, val) = self._base[key]
-                if isinstance(val, RenderTask):
+                if isinstance(val, Task):
-                    log.debug(f"RenderTask {key} expired. Data removed.")
+                    log.debug(f"Task {key} expired. Data removed.")
                 elif isinstance(val, SessionState):
                     log.debug(f"Session {key} expired. Data removed.")
                 else:
@@ -220,8 +181,8 @@ class SessionState:
                 tasks.append(task)
         return tasks
 
-    def put(self, task, ttl=TASK_TTL):
+    def put(self, task: Task, ttl=TASK_TTL):
-        task_id = id(task)
+        task_id = task.id
         self._tasks_ids.append(task_id)
         if not task_cache.put(task_id, task, ttl):
             return False
@@ -230,11 +191,16 @@ class SessionState:
         return True
 
 
+def keep_task_alive(task: Task):
+    task_cache.keep(task.id, TASK_TTL)
+    session_cache.keep(task.session_id, TASK_TTL)
+
+
 def thread_get_next_task():
-    from easydiffusion import renderer
+    from easydiffusion import runtime
 
     if not manager_lock.acquire(blocking=True, timeout=LOCK_TIMEOUT):
-        log.warn(f"Render thread on device: {renderer.context.device} failed to acquire manager lock.")
+        log.warn(f"Render thread on device: {runtime.context.device} failed to acquire manager lock.")
         return None
     if len(tasks_queue) <= 0:
         manager_lock.release()
@@ -242,7 +208,7 @@ def thread_get_next_task():
     task = None
     try:  # Select a render task.
         for queued_task in tasks_queue:
-            if queued_task.render_device and renderer.context.device != queued_task.render_device:
+            if queued_task.render_device and runtime.context.device != queued_task.render_device:
                 # Is asking for a specific render device.
                 if is_alive(queued_task.render_device) > 0:
                     continue  # requested device alive, skip current one.
@@ -251,7 +217,7 @@ def thread_get_next_task():
                     queued_task.error = Exception(queued_task.render_device + " is not currently active.")
                     task = queued_task
                     break
-            if not queued_task.render_device and renderer.context.device == "cpu" and is_alive() > 1:
+            if not queued_task.render_device and runtime.context.device == "cpu" and is_alive() > 1:
                 # not asking for any specific devices, cpu want to grab task but other render devices are alive.
                 continue  # Skip Tasks, don't run on CPU unless there is nothing else or user asked for it.
             task = queued_task
@@ -266,19 +232,19 @@ def thread_get_next_task():
 def thread_render(device):
     global current_state, current_state_error
 
-    from easydiffusion import model_manager, renderer
+    from easydiffusion import model_manager, runtime
 
     try:
-        renderer.init(device)
+        runtime.init(device)
 
         weak_thread_data[threading.current_thread()] = {
-            "device": renderer.context.device,
+            "device": runtime.context.device,
-            "device_name": renderer.context.device_name,
+            "device_name": runtime.context.device_name,
             "alive": True,
         }
 
         current_state = ServerStates.LoadingModel
-        model_manager.load_default_models(renderer.context)
+        model_manager.load_default_models(runtime.context)
 
         current_state = ServerStates.Online
     except Exception as e:
@@ -290,8 +256,8 @@ def thread_render(device):
         session_cache.clean()
         task_cache.clean()
         if not weak_thread_data[threading.current_thread()]["alive"]:
-            log.info(f"Shutting down thread for device {renderer.context.device}")
+            log.info(f"Shutting down thread for device {runtime.context.device}")
-            model_manager.unload_all(renderer.context)
+            model_manager.unload_all(runtime.context)
             return
         if isinstance(current_state_error, SystemExit):
             current_state = ServerStates.Unavailable
@@ -311,62 +277,31 @@ def thread_render(device):
             task.response = {"status": "failed", "detail": str(task.error)}
             task.buffer_queue.put(json.dumps(task.response))
             continue
-        log.info(f"Session {task.task_data.session_id} starting task {id(task)} on {renderer.context.device_name}")
+        log.info(f"Session {task.session_id} starting task {task.id} on {runtime.context.device_name}")
         if not task.lock.acquire(blocking=False):
             raise Exception("Got locked task from queue.")
         try:
+            task.run()
 
-            def step_callback():
-                global current_state_error
-
-                task_cache.keep(id(task), TASK_TTL)
-                session_cache.keep(task.task_data.session_id, TASK_TTL)
-
-                if (
-                    isinstance(current_state_error, SystemExit)
-                    or isinstance(current_state_error, StopAsyncIteration)
-                    or isinstance(task.error, StopAsyncIteration)
-                ):
-                    renderer.context.stop_processing = True
-                    if isinstance(current_state_error, StopAsyncIteration):
-                        task.error = current_state_error
-                        current_state_error = None
-                        log.info(f"Session {task.task_data.session_id} sent cancel signal for task {id(task)}")
-
-            current_state = ServerStates.LoadingModel
-            model_manager.resolve_model_paths(task.task_data)
-            model_manager.reload_models_if_necessary(renderer.context, task.task_data)
-            model_manager.fail_if_models_did_not_load(renderer.context)
-
-            current_state = ServerStates.Rendering
-            task.response = renderer.make_images(
-                task.render_request,
-                task.task_data,
-                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)
+            keep_task_alive(task)
-            session_cache.keep(task.task_data.session_id, TASK_TTL)
         except Exception as e:
             task.error = str(e)
             task.response = {"status": "failed", "detail": str(task.error)}
             task.buffer_queue.put(json.dumps(task.response))
             log.error(traceback.format_exc())
         finally:
-            gc(renderer.context)
+            gc(runtime.context)
             task.lock.release()
-        task_cache.keep(id(task), TASK_TTL)
+
-        session_cache.keep(task.task_data.session_id, TASK_TTL)
+        keep_task_alive(task)
+
         if isinstance(task.error, StopAsyncIteration):
-            log.info(f"Session {task.task_data.session_id} task {id(task)} cancelled!")
+            log.info(f"Session {task.session_id} task {task.id} cancelled!")
         elif task.error is not None:
-            log.info(f"Session {task.task_data.session_id} task {id(task)} failed!")
+            log.info(f"Session {task.session_id} task {task.id} failed!")
         else:
-            log.info(
+            log.info(f"Session {task.session_id} task {task.id} completed by {runtime.context.device_name}.")
-                f"Session {task.task_data.session_id} task {id(task)} completed by {renderer.context.device_name}."
-            )
         current_state = ServerStates.Online
 
 
@@ -438,6 +373,12 @@ def get_devices():
     finally:
         manager_lock.release()
 
+    # temp until TRT releases
+    import os
+    from easydiffusion import app
+
+    devices["enable_trt"] = os.path.exists(os.path.join(app.ROOT_DIR, "tensorrt"))
+
     return devices
 
 
@@ -548,28 +489,27 @@ def shutdown_event():  # Signal render thread to close on shutdown
     current_state_error = SystemExit("Application shutting down.")
 
 
-def render(render_req: GenerateImageRequest, task_data: TaskData):
+def enqueue_task(task: Task):
     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
-    session = get_cached_session(task_data.session_id, update_ttl=True)
+    session = get_cached_session(task.session_id, update_ttl=True)
     pending_tasks = list(filter(lambda t: t.is_pending, session.tasks))
-    if current_thread_count < len(pending_tasks):
+    if len(pending_tasks) > current_thread_count * MAX_OVERLOAD_ALLOWED_RATIO:
         raise ConnectionRefusedError(
-            f"Session {task_data.session_id} already has {len(pending_tasks)} pending tasks out of {current_thread_count}."
+            f"Session {task.session_id} already has {len(pending_tasks)} pending tasks, with {current_thread_count} workers."
         )
 
-    new_task = RenderTask(render_req, task_data)
+    if session.put(task, TASK_TTL):
-    if session.put(new_task, TASK_TTL):
         # Use twice the normal timeout for adding user requests.
         # 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)
+                tasks_queue.append(task)
                 idle_event.set()
-                return new_task
+                return task
             finally:
                 manager_lock.release()
     raise RuntimeError("Failed to add task to cache.")

ui/easydiffusion/tasks/__init__.py

@@ -0,0 +1,3 @@
+from .task import Task
+from .render_images import RenderTask
+from .filter_images import FilterTask

ui/easydiffusion/tasks/filter_images.py

@@ -0,0 +1,110 @@
+import json
+import pprint
+
+from sdkit.filter import apply_filters
+from sdkit.models import load_model
+from sdkit.utils import img_to_base64_str, log
+
+from easydiffusion import model_manager, runtime
+from easydiffusion.types import FilterImageRequest, FilterImageResponse, ModelsData, OutputFormatData
+
+from .task import Task
+
+
+class FilterTask(Task):
+    "For applying filters to input images"
+
+    def __init__(
+        self, req: FilterImageRequest, session_id: str, models_data: ModelsData, output_format: OutputFormatData
+    ):
+        super().__init__(session_id)
+
+        self.request = req
+        self.models_data = models_data
+        self.output_format = output_format
+
+        # convert to multi-filter format, if necessary
+        if isinstance(req.filter, str):
+            req.filter_params = {req.filter: req.filter_params}
+            req.filter = [req.filter]
+
+        if not isinstance(req.image, list):
+            req.image = [req.image]
+
+    def run(self):
+        "Runs the image filtering task on the assigned thread"
+
+        context = runtime.context
+
+        model_manager.resolve_model_paths(self.models_data)
+        model_manager.reload_models_if_necessary(context, self.models_data)
+        model_manager.fail_if_models_did_not_load(context)
+
+        print_task_info(self.request, self.models_data, self.output_format)
+
+        images = filter_images(context, self.request.image, self.request.filter, self.request.filter_params)
+
+        output_format = self.output_format
+        images = [
+            img_to_base64_str(
+                img, output_format.output_format, output_format.output_quality, output_format.output_lossless
+            )
+            for img in images
+        ]
+
+        res = FilterImageResponse(self.request, self.models_data, images=images)
+        res = res.json()
+        self.buffer_queue.put(json.dumps(res))
+        log.info("Filter task completed")
+
+        self.response = res
+
+
+def filter_images(context, images, filters, filter_params={}):
+    filters = filters if isinstance(filters, list) else [filters]
+
+    for filter_name in filters:
+        params = filter_params.get(filter_name, {})
+
+        previous_state = before_filter(context, filter_name, params)
+
+        try:
+            images = apply_filters(context, filter_name, images, **params)
+        finally:
+            after_filter(context, filter_name, params, previous_state)
+
+    return images
+
+
+def before_filter(context, filter_name, filter_params):
+    if filter_name == "codeformer":
+        from easydiffusion.model_manager import DEFAULT_MODELS, resolve_model_to_use
+
+        default_realesrgan = DEFAULT_MODELS["realesrgan"][0]["file_name"]
+        prev_realesrgan_path = None
+
+        upscale_faces = filter_params.get("upscale_faces", False)
+        if upscale_faces and default_realesrgan not in context.model_paths["realesrgan"]:
+            prev_realesrgan_path = context.model_paths.get("realesrgan")
+            context.model_paths["realesrgan"] = resolve_model_to_use(default_realesrgan, "realesrgan")
+            load_model(context, "realesrgan")
+
+        return prev_realesrgan_path
+
+
+def after_filter(context, filter_name, filter_params, previous_state):
+    if filter_name == "codeformer":
+        prev_realesrgan_path = previous_state
+        if prev_realesrgan_path:
+            context.model_paths["realesrgan"] = prev_realesrgan_path
+            load_model(context, "realesrgan")
+
+
+def print_task_info(req: FilterImageRequest, models_data: ModelsData, output_format: OutputFormatData):
+    req_str = pprint.pformat({"filter": req.filter, "filter_params": req.filter_params}).replace("[", "\[")
+    models_data = pprint.pformat(models_data.dict()).replace("[", "\[")
+    output_format = pprint.pformat(output_format.dict()).replace("[", "\[")
+
+    log.info(f"request: {req_str}")
+    log.info(f"models data: {models_data}")
+    log.info(f"output format: {output_format}")

ui/easydiffusion/tasks/render_images.py

@@ -0,0 +1,340 @@
+import json
+import pprint
+import queue
+import time
+
+from easydiffusion import model_manager, runtime
+from easydiffusion.types import GenerateImageRequest, ModelsData, OutputFormatData
+from easydiffusion.types import Image as ResponseImage
+from easydiffusion.types import GenerateImageResponse, TaskData, UserInitiatedStop
+from easydiffusion.utils import get_printable_request, log, save_images_to_disk
+from sdkit.generate import generate_images
+from sdkit.utils import (
+    diffusers_latent_samples_to_images,
+    gc,
+    img_to_base64_str,
+    img_to_buffer,
+    latent_samples_to_images,
+    log,
+)
+
+from .task import Task
+from .filter_images import filter_images
+
+
+class RenderTask(Task):
+    "For image generation"
+
+    def __init__(
+        self, req: GenerateImageRequest, task_data: TaskData, models_data: ModelsData, output_format: OutputFormatData
+    ):
+        super().__init__(task_data.session_id)
+
+        task_data.request_id = self.id
+        self.render_request: GenerateImageRequest = req  # Initial Request
+        self.task_data: TaskData = task_data
+        self.models_data = models_data
+        self.output_format = output_format
+        self.temp_images: list = [None] * req.num_outputs * (1 if task_data.show_only_filtered_image else 2)
+
+    def run(self):
+        "Runs the image generation task on the assigned thread"
+
+        from easydiffusion import task_manager
+
+        context = runtime.context
+
+        def step_callback():
+            task_manager.keep_task_alive(self)
+            task_manager.current_state = task_manager.ServerStates.Rendering
+
+            if isinstance(task_manager.current_state_error, (SystemExit, StopAsyncIteration)) or isinstance(
+                self.error, StopAsyncIteration
+            ):
+                context.stop_processing = True
+                if isinstance(task_manager.current_state_error, StopAsyncIteration):
+                    self.error = task_manager.current_state_error
+                    task_manager.current_state_error = None
+                    log.info(f"Session {self.session_id} sent cancel signal for task {self.id}")
+
+        task_manager.current_state = task_manager.ServerStates.LoadingModel
+        model_manager.resolve_model_paths(self.models_data)
+
+        models_to_force_reload = []
+        if (
+            runtime.set_vram_optimizations(context)
+            or self.has_param_changed(context, "clip_skip")
+            or self.trt_needs_reload(context)
+        ):
+            models_to_force_reload.append("stable-diffusion")
+
+        model_manager.reload_models_if_necessary(context, self.models_data, models_to_force_reload)
+        model_manager.fail_if_models_did_not_load(context)
+
+        task_manager.current_state = task_manager.ServerStates.Rendering
+        self.response = make_images(
+            context,
+            self.render_request,
+            self.task_data,
+            self.models_data,
+            self.output_format,
+            self.buffer_queue,
+            self.temp_images,
+            step_callback,
+        )
+
+    def has_param_changed(self, context, param_name):
+        if not context.test_diffusers:
+            return False
+        if "stable-diffusion" not in context.models or "params" not in context.models["stable-diffusion"]:
+            return True
+
+        model = context.models["stable-diffusion"]
+        new_val = self.models_data.model_params.get("stable-diffusion", {}).get(param_name, False)
+        return model["params"].get(param_name) != new_val
+
+    def trt_needs_reload(self, context):
+        if not context.test_diffusers:
+            return False
+        if "stable-diffusion" not in context.models or "params" not in context.models["stable-diffusion"]:
+            return True
+
+        model = context.models["stable-diffusion"]
+
+        # curr_convert_to_trt = model["params"].get("convert_to_tensorrt")
+        new_convert_to_trt = self.models_data.model_params.get("stable-diffusion", {}).get("convert_to_tensorrt", False)
+
+        pipe = model["default"]
+        is_trt_loaded = hasattr(pipe.unet, "_allocate_trt_buffers") or hasattr(
+            pipe.unet, "_allocate_trt_buffers_backup"
+        )
+        if new_convert_to_trt and not is_trt_loaded:
+            return True
+
+        curr_build_config = model["params"].get("trt_build_config")
+        new_build_config = self.models_data.model_params.get("stable-diffusion", {}).get("trt_build_config", {})
+
+        return new_convert_to_trt and curr_build_config != new_build_config
+
+
+def make_images(
+    context,
+    req: GenerateImageRequest,
+    task_data: TaskData,
+    models_data: ModelsData,
+    output_format: OutputFormatData,
+    data_queue: queue.Queue,
+    task_temp_images: list,
+    step_callback,
+):
+    context.stop_processing = False
+    print_task_info(req, task_data, models_data, output_format)
+
+    images, seeds = make_images_internal(
+        context, req, task_data, models_data, output_format, data_queue, task_temp_images, step_callback
+    )
+
+    res = GenerateImageResponse(
+        req, task_data, models_data, output_format, images=construct_response(images, seeds, output_format)
+    )
+    res = res.json()
+    data_queue.put(json.dumps(res))
+    log.info("Task completed")
+
+    return res
+
+
+def print_task_info(
+    req: GenerateImageRequest, task_data: TaskData, models_data: ModelsData, output_format: OutputFormatData
+):
+    req_str = pprint.pformat(get_printable_request(req, task_data, output_format)).replace("[", "\[")
+    task_str = pprint.pformat(task_data.dict()).replace("[", "\[")
+    models_data = pprint.pformat(models_data.dict()).replace("[", "\[")
+    output_format = pprint.pformat(output_format.dict()).replace("[", "\[")
+
+    log.info(f"request: {req_str}")
+    log.info(f"task data: {task_str}")
+    # log.info(f"models data: {models_data}")
+    log.info(f"output format: {output_format}")
+
+
+def make_images_internal(
+    context,
+    req: GenerateImageRequest,
+    task_data: TaskData,
+    models_data: ModelsData,
+    output_format: OutputFormatData,
+    data_queue: queue.Queue,
+    task_temp_images: list,
+    step_callback,
+):
+    images, user_stopped = generate_images_internal(
+        context,
+        req,
+        task_data,
+        models_data,
+        data_queue,
+        task_temp_images,
+        step_callback,
+        task_data.stream_image_progress,
+        task_data.stream_image_progress_interval,
+    )
+
+    gc(context)
+
+    filters, filter_params = task_data.filters, task_data.filter_params
+    filtered_images = filter_images(context, images, filters, filter_params) if not user_stopped else images
+
+    if task_data.save_to_disk_path is not None:
+        save_images_to_disk(images, filtered_images, req, task_data, output_format)
+
+    seeds = [*range(req.seed, req.seed + len(images))]
+    if task_data.show_only_filtered_image or filtered_images is images:
+        return filtered_images, seeds
+    else:
+        return images + filtered_images, seeds + seeds
+
+
+def generate_images_internal(
+    context,
+    req: GenerateImageRequest,
+    task_data: TaskData,
+    models_data: ModelsData,
+    data_queue: queue.Queue,
+    task_temp_images: list,
+    step_callback,
+    stream_image_progress: bool,
+    stream_image_progress_interval: int,
+):
+    context.temp_images.clear()
+
+    callback = make_step_callback(
+        context,
+        req,
+        task_data,
+        data_queue,
+        task_temp_images,
+        step_callback,
+        stream_image_progress,
+        stream_image_progress_interval,
+    )
+
+    try:
+        if req.init_image is not None and not context.test_diffusers:
+            req.sampler_name = "ddim"
+
+        req.width, req.height = map(lambda x: x - x % 8, (req.width, req.height))  # clamp to 8
+
+        if req.control_image and task_data.control_filter_to_apply:
+            req.control_image = filter_images(context, req.control_image, task_data.control_filter_to_apply)[0]
+
+        if context.test_diffusers:
+            pipe = context.models["stable-diffusion"]["default"]
+            if hasattr(pipe.unet, "_allocate_trt_buffers_backup"):
+                setattr(pipe.unet, "_allocate_trt_buffers", pipe.unet._allocate_trt_buffers_backup)
+                delattr(pipe.unet, "_allocate_trt_buffers_backup")
+
+            if hasattr(pipe.unet, "_allocate_trt_buffers"):
+                convert_to_trt = models_data.model_params["stable-diffusion"].get("convert_to_tensorrt", False)
+                if convert_to_trt:
+                    pipe.unet.forward = pipe.unet._trt_forward
+                    # pipe.vae.decoder.forward = pipe.vae.decoder._trt_forward
+                    log.info(f"Setting unet.forward to TensorRT")
+                else:
+                    log.info(f"Not using TensorRT for unet.forward")
+                    pipe.unet.forward = pipe.unet._non_trt_forward
+                    # pipe.vae.decoder.forward = pipe.vae.decoder._non_trt_forward
+                    setattr(pipe.unet, "_allocate_trt_buffers_backup", pipe.unet._allocate_trt_buffers)
+                    delattr(pipe.unet, "_allocate_trt_buffers")
+
+        images = generate_images(context, callback=callback, **req.dict())
+        user_stopped = False
+    except UserInitiatedStop:
+        images = []
+        user_stopped = True
+        if context.partial_x_samples is not None:
+            if context.test_diffusers:
+                images = diffusers_latent_samples_to_images(context, context.partial_x_samples)
+            else:
+                images = latent_samples_to_images(context, context.partial_x_samples)
+    finally:
+        if hasattr(context, "partial_x_samples") and context.partial_x_samples is not None:
+            if not context.test_diffusers:
+                del context.partial_x_samples
+            context.partial_x_samples = None
+
+    return images, user_stopped
+
+
+def construct_response(images: list, seeds: list, output_format: OutputFormatData):
+    return [
+        ResponseImage(
+            data=img_to_base64_str(
+                img,
+                output_format.output_format,
+                output_format.output_quality,
+                output_format.output_lossless,
+            ),
+            seed=seed,
+        )
+        for img, seed in zip(images, seeds)
+    ]
+
+
+def make_step_callback(
+    context,
+    req: GenerateImageRequest,
+    task_data: TaskData,
+    data_queue: queue.Queue,
+    task_temp_images: list,
+    step_callback,
+    stream_image_progress: bool,
+    stream_image_progress_interval: int,
+):
+    n_steps = req.num_inference_steps if req.init_image is None else int(req.num_inference_steps * req.prompt_strength)
+    last_callback_time = -1
+
+    def update_temp_img(x_samples, task_temp_images: list):
+        partial_images = []
+
+        if context.test_diffusers:
+            images = diffusers_latent_samples_to_images(context, x_samples)
+        else:
+            images = latent_samples_to_images(context, x_samples)
+
+        if task_data.block_nsfw:
+            images = filter_images(context, images, "nsfw_checker")
+
+        for i, img in enumerate(images):
+            buf = img_to_buffer(img, output_format="JPEG")
+
+            context.temp_images[f"{task_data.request_id}/{i}"] = buf
+            task_temp_images[i] = buf
+            partial_images.append({"path": f"/image/tmp/{task_data.request_id}/{i}"})
+        del images
+        return partial_images
+
+    def on_image_step(x_samples, i, *args):
+        nonlocal last_callback_time
+
+        if context.test_diffusers:
+            context.partial_x_samples = (x_samples, args[0])
+        else:
+            context.partial_x_samples = x_samples
+
+        step_time = time.time() - last_callback_time if last_callback_time != -1 else -1
+        last_callback_time = time.time()
+
+        progress = {"step": i, "step_time": step_time, "total_steps": n_steps}
+
+        if stream_image_progress and stream_image_progress_interval > 0 and i % stream_image_progress_interval == 0:
+            progress["output"] = update_temp_img(context.partial_x_samples, task_temp_images)
+
+        data_queue.put(json.dumps(progress))
+
+        step_callback()
+
+        if context.stop_processing:
+            raise UserInitiatedStop("User requested that we stop processing")
+
+    return on_image_step

ui/easydiffusion/tasks/task.py

@@ -0,0 +1,47 @@
+from threading import Lock
+from queue import Queue, Empty as EmptyQueueException
+from typing import Any
+
+
+class Task:
+    "Task with output queue and completion lock"
+
+    def __init__(self, session_id):
+        self.id = id(self)
+        self.session_id = session_id
+        self.render_device = None  # Select the task affinity. (Not used to change active devices).
+        self.error: Exception = None
+        self.lock: Lock = Lock()  # Locks at task start and unlocks when task is completed
+        self.buffer_queue: Queue = Queue()  # Queue of JSON string segments
+        self.response: Any = None  # Copy of the last reponse
+
+    async def read_buffer_generator(self):
+        try:
+            while not self.buffer_queue.empty():
+                res = self.buffer_queue.get(block=False)
+                self.buffer_queue.task_done()
+                yield res
+        except EmptyQueueException 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)
+
+    def run(self):
+        "Override this to implement the task's behavior"
+        pass

ui/easydiffusion/types.py

@@ -1,4 +1,4 @@
-from typing import Any
+from typing import Any, List, Dict, Union
 
 from pydantic import BaseModel
 
@@ -17,36 +17,68 @@ class GenerateImageRequest(BaseModel):
 
     init_image: Any = None
     init_image_mask: Any = None
+    control_image: Any = None
+    control_alpha: Union[float, List[float]] = None
     prompt_strength: float = 0.8
     preserve_init_image_color_profile = False
+    strict_mask_border = False
 
     sampler_name: str = None  # "ddim", "plms", "heun", "euler", "euler_a", "dpm2", "dpm2_a", "lms"
     hypernetwork_strength: float = 0
-    lora_alpha: float = 0
+    lora_alpha: Union[float, List[float]] = 0
     tiling: str = "none"  # "none", "x", "y", "xy"
 
 
+class FilterImageRequest(BaseModel):
+    image: Any = None
+    filter: Union[str, List[str]] = None
+    filter_params: dict = {}
+
+
+class ModelsData(BaseModel):
+    """
+    Contains the information related to the models involved in a request.
+
+    - To load a model: set the relative path(s) to the model in `model_paths`. No effect if already loaded.
+    - To unload a model: set the model to `None` in `model_paths`. No effect if already unloaded.
+
+    Models that aren't present in `model_paths` will not be changed.
+    """
+
+    model_paths: Dict[str, Union[str, None, List[str]]] = None
+    "model_type to string path, or list of string paths"
+
+    model_params: Dict[str, Dict[str, Any]] = {}
+    "model_type to dict of parameters"
+
+
+class OutputFormatData(BaseModel):
+    output_format: str = "jpeg"  # or "png" or "webp"
+    output_quality: int = 75
+    output_lossless: bool = False
+
+
 class TaskData(BaseModel):
     request_id: str = None
     session_id: str = "session"
     save_to_disk_path: str = None
     vram_usage_level: str = "balanced"  # or "low" or "medium"
 
-    use_face_correction: str = None  # or "GFPGANv1.3"
+    use_face_correction: Union[str, List[str]] = None  # or "GFPGANv1.3"
-    use_upscale: str = None  # or "RealESRGAN_x4plus" or "RealESRGAN_x4plus_anime_6B" or "latent_upscaler"
+    use_upscale: Union[str, List[str]] = None
     upscale_amount: int = 4  # or 2
     latent_upscaler_steps: int = 10
-    use_stable_diffusion_model: str = "sd-v1-4"
+    use_stable_diffusion_model: Union[str, List[str]] = "sd-v1-4"
-    # use_stable_diffusion_config: str = "v1-inference"
+    use_vae_model: Union[str, List[str]] = None
-    use_vae_model: str = None
+    use_hypernetwork_model: Union[str, List[str]] = None
-    use_hypernetwork_model: str = None
+    use_lora_model: Union[str, List[str]] = None
-    use_lora_model: str = None
+    use_controlnet_model: Union[str, List[str]] = None
+    filters: List[str] = []
+    filter_params: Dict[str, Dict[str, Any]] = {}
+    control_filter_to_apply: Union[str, List[str]] = None
 
     show_only_filtered_image: bool = False
     block_nsfw: bool = False
-    output_format: str = "jpeg"  # or "png" or "webp"
-    output_quality: int = 75
-    output_lossless: bool = False
     metadata_output_format: str = "txt"  # or "json"
     stream_image_progress: bool = False
     stream_image_progress_interval: int = 5
@@ -81,24 +113,39 @@ class Image:
         }
 
 
-class Response:
+class GenerateImageResponse:
     render_request: GenerateImageRequest
     task_data: TaskData
+    models_data: ModelsData
     images: list
 
-    def __init__(self, render_request: GenerateImageRequest, task_data: TaskData, images: list):
+    def __init__(
+        self,
+        render_request: GenerateImageRequest,
+        task_data: TaskData,
+        models_data: ModelsData,
+        output_format: OutputFormatData,
+        images: list,
+    ):
         self.render_request = render_request
         self.task_data = task_data
+        self.models_data = models_data
+        self.output_format = output_format
         self.images = images
 
     def json(self):
         del self.render_request.init_image
         del self.render_request.init_image_mask
+        del self.render_request.control_image
+
+        task_data = self.task_data.dict()
+        task_data.update(self.output_format.dict())
 
         res = {
             "status": "succeeded",
             "render_request": self.render_request.dict(),
-            "task_data": self.task_data.dict(),
+            "task_data": task_data,
+            # "models_data": self.models_data.dict(), # haven't migrated the UI to the new format (yet)
             "output": [],
         }
 
@@ -108,5 +155,111 @@ class Response:
         return res
 
 
+class FilterImageResponse:
+    request: FilterImageRequest
+    models_data: ModelsData
+    images: list
+
+    def __init__(self, request: FilterImageRequest, models_data: ModelsData, images: list):
+        self.request = request
+        self.models_data = models_data
+        self.images = images
+
+    def json(self):
+        del self.request.image
+
+        res = {
+            "status": "succeeded",
+            "request": self.request.dict(),
+            "models_data": self.models_data.dict(),
+            "output": [],
+        }
+
+        for image in self.images:
+            res["output"].append(image)
+
+        return res
+
+
 class UserInitiatedStop(Exception):
     pass
+
+
+def convert_legacy_render_req_to_new(old_req: dict):
+    new_req = dict(old_req)
+
+    # new keys
+    model_paths = new_req["model_paths"] = {}
+    model_params = new_req["model_params"] = {}
+    filters = new_req["filters"] = []
+    filter_params = new_req["filter_params"] = {}
+
+    # move the model info
+    model_paths["stable-diffusion"] = old_req.get("use_stable_diffusion_model")
+    model_paths["vae"] = old_req.get("use_vae_model")
+    model_paths["hypernetwork"] = old_req.get("use_hypernetwork_model")
+    model_paths["lora"] = old_req.get("use_lora_model")
+    model_paths["controlnet"] = old_req.get("use_controlnet_model")
+
+    model_paths["gfpgan"] = old_req.get("use_face_correction", "")
+    model_paths["gfpgan"] = model_paths["gfpgan"] if "gfpgan" in model_paths["gfpgan"].lower() else None
+
+    model_paths["codeformer"] = old_req.get("use_face_correction", "")
+    model_paths["codeformer"] = model_paths["codeformer"] if "codeformer" in model_paths["codeformer"].lower() else None
+
+    model_paths["realesrgan"] = old_req.get("use_upscale", "")
+    model_paths["realesrgan"] = model_paths["realesrgan"] if "realesrgan" in model_paths["realesrgan"].lower() else None
+
+    model_paths["latent_upscaler"] = old_req.get("use_upscale", "")
+    model_paths["latent_upscaler"] = (
+        model_paths["latent_upscaler"] if "latent_upscaler" in model_paths["latent_upscaler"].lower() else None
+    )
+    if "control_filter_to_apply" in old_req:
+        filter_model = old_req["control_filter_to_apply"]
+        model_paths[filter_model] = filter_model
+
+    if old_req.get("block_nsfw"):
+        model_paths["nsfw_checker"] = "nsfw_checker"
+
+    # move the model params
+    if model_paths["stable-diffusion"]:
+        model_params["stable-diffusion"] = {
+            "clip_skip": bool(old_req.get("clip_skip", False)),
+            "convert_to_tensorrt": bool(old_req.get("convert_to_tensorrt", False)),
+            "trt_build_config": old_req.get(
+                "trt_build_config", {"batch_size_range": (1, 1), "dimensions_range": [(768, 1024)]}
+            ),
+        }
+
+    # move the filter params
+    if model_paths["realesrgan"]:
+        filter_params["realesrgan"] = {"scale": int(old_req.get("upscale_amount", 4))}
+    if model_paths["latent_upscaler"]:
+        filter_params["latent_upscaler"] = {
+            "prompt": old_req["prompt"],
+            "negative_prompt": old_req.get("negative_prompt"),
+            "seed": int(old_req.get("seed", 42)),
+            "num_inference_steps": int(old_req.get("latent_upscaler_steps", 10)),
+            "guidance_scale": 0,
+        }
+    if model_paths["codeformer"]:
+        filter_params["codeformer"] = {
+            "upscale_faces": bool(old_req.get("codeformer_upscale_faces", True)),
+            "codeformer_fidelity": float(old_req.get("codeformer_fidelity", 0.5)),
+        }
+
+    # set the filters
+    if old_req.get("block_nsfw"):
+        filters.append("nsfw_checker")
+
+    if model_paths["codeformer"]:
+        filters.append("codeformer")
+    elif model_paths["gfpgan"]:
+        filters.append("gfpgan")
+
+    if model_paths["realesrgan"]:
+        filters.append("realesrgan")
+    elif model_paths["latent_upscaler"]:
+        filters.append("latent_upscaler")
+
+    return new_req

ui/easydiffusion/utils/save_utils.py

@@ -1,11 +1,13 @@
 import os
 import re
 import time
+import regex
+
 from datetime import datetime
 from functools import reduce
 
 from easydiffusion import app
-from easydiffusion.types import GenerateImageRequest, TaskData
+from easydiffusion.types import GenerateImageRequest, TaskData, OutputFormatData
 from numpy import base_repr
 from sdkit.utils import save_dicts, save_images
 
@@ -19,6 +21,8 @@ TASK_TEXT_MAPPING = {
     "seed": "Seed",
     "use_stable_diffusion_model": "Stable Diffusion model",
     "clip_skip": "Clip Skip",
+    "use_controlnet_model": "ControlNet model",
+    "control_filter_to_apply": "ControlNet Filter",
     "use_vae_model": "VAE model",
     "sampler_name": "Sampler",
     "width": "Width",
@@ -30,11 +34,12 @@ TASK_TEXT_MAPPING = {
     "lora_alpha": "LoRA Strength",
     "use_hypernetwork_model": "Hypernetwork model",
     "hypernetwork_strength": "Hypernetwork Strength",
+    "use_embedding_models": "Embedding models",
     "tiling": "Seamless Tiling",
     "use_face_correction": "Use Face Correction",
     "use_upscale": "Use Upscaling",
     "upscale_amount": "Upscale By",
-    "latent_upscaler_steps": "Latent Upscaler Steps"
+    "latent_upscaler_steps": "Latent Upscaler Steps",
 }
 
 time_placeholders = {
@@ -111,12 +116,14 @@ def format_file_name(
     return filename_regex.sub("_", format)
 
 
-def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageRequest, task_data: TaskData):
+def save_images_to_disk(
+    images: list, filtered_images: list, req: GenerateImageRequest, task_data: TaskData, output_format: OutputFormatData
+):
     now = time.time()
     app_config = app.getConfig()
     folder_format = app_config.get("folder_format", "$id")
     save_dir_path = os.path.join(task_data.save_to_disk_path, format_folder_name(folder_format, req, task_data))
-    metadata_entries = get_metadata_entries_for_request(req, task_data)
+    metadata_entries = get_metadata_entries_for_request(req, task_data, output_format)
     file_number = calculate_img_number(save_dir_path, task_data)
     make_filename = make_filename_callback(
         app_config.get("filename_format", "$p_$tsb64"),
@@ -131,9 +138,9 @@ def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageR
             filtered_images,
             save_dir_path,
             file_name=make_filename,
-            output_format=task_data.output_format,
+            output_format=output_format.output_format,
-            output_quality=task_data.output_quality,
+            output_quality=output_format.output_quality,
-            output_lossless=task_data.output_lossless,
+            output_lossless=output_format.output_lossless,
         )
         if task_data.metadata_output_format:
             for metadata_output_format in task_data.metadata_output_format.split(","):
@@ -143,7 +150,7 @@ def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageR
                         save_dir_path,
                         file_name=make_filename,
                         output_format=metadata_output_format,
-                        file_format=task_data.output_format,
+                        file_format=output_format.output_format,
                     )
     else:
         make_filter_filename = make_filename_callback(
@@ -159,17 +166,17 @@ def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageR
             images,
             save_dir_path,
             file_name=make_filename,
-            output_format=task_data.output_format,
+            output_format=output_format.output_format,
-            output_quality=task_data.output_quality,
+            output_quality=output_format.output_quality,
-            output_lossless=task_data.output_lossless,
+            output_lossless=output_format.output_lossless,
         )
         save_images(
             filtered_images,
             save_dir_path,
             file_name=make_filter_filename,
-            output_format=task_data.output_format,
+            output_format=output_format.output_format,
-            output_quality=task_data.output_quality,
+            output_quality=output_format.output_quality,
-            output_lossless=task_data.output_lossless,
+            output_lossless=output_format.output_lossless,
         )
         if task_data.metadata_output_format:
             for metadata_output_format in task_data.metadata_output_format.split(","):
@@ -178,18 +185,26 @@ def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageR
                         metadata_entries,
                         save_dir_path,
                         file_name=make_filter_filename,
-                        output_format=task_data.metadata_output_format,
+                        output_format=metadata_output_format,
-                        file_format=task_data.output_format,
+                        file_format=output_format.output_format,
                     )
 
 
-def get_metadata_entries_for_request(req: GenerateImageRequest, task_data: TaskData):
+def get_metadata_entries_for_request(req: GenerateImageRequest, task_data: TaskData, output_format: OutputFormatData):
-    metadata = get_printable_request(req, task_data)
+    metadata = get_printable_request(req, task_data, output_format)
 
     # if text, format it in the text format expected by the UI
     is_txt_format = task_data.metadata_output_format and "txt" in task_data.metadata_output_format.lower().split(",")
     if is_txt_format:
-        metadata = {TASK_TEXT_MAPPING[key]: val for key, val in metadata.items() if key in TASK_TEXT_MAPPING}
+
+        def format_value(value):
+            if isinstance(value, list):
+                return ", ".join([str(it) for it in value])
+            return value
+
+        metadata = {
+            TASK_TEXT_MAPPING[key]: format_value(val) for key, val in metadata.items() if key in TASK_TEXT_MAPPING
+        }
 
     entries = [metadata.copy() for _ in range(req.num_outputs)]
     for i, entry in enumerate(entries):
@@ -198,9 +213,13 @@ def get_metadata_entries_for_request(req: GenerateImageRequest, task_data: TaskD
     return entries
 
 
-def get_printable_request(req: GenerateImageRequest, task_data: TaskData):
+def get_printable_request(req: GenerateImageRequest, task_data: TaskData, output_format: OutputFormatData):
     req_metadata = req.dict()
     task_data_metadata = task_data.dict()
+    task_data_metadata.update(output_format.dict())
+
+    app_config = app.getConfig()
+    using_diffusers = app_config.get("test_diffusers", False)
 
     # Save the metadata in the order defined in TASK_TEXT_MAPPING
     metadata = {}
@@ -209,7 +228,29 @@ def get_printable_request(req: GenerateImageRequest, task_data: TaskData):
             metadata[key] = req_metadata[key]
         elif key in task_data_metadata:
             metadata[key] = task_data_metadata[key]
-    
+        elif key == "use_embedding_models" and using_diffusers:
+            embeddings_extensions = {".pt", ".bin", ".safetensors"}
+
+            def scan_directory(directory_path: str):
+                used_embeddings = []
+                for entry in os.scandir(directory_path):
+                    if entry.is_file():
+                        entry_extension = os.path.splitext(entry.name)[1]
+                        if entry_extension not in embeddings_extensions:
+                            continue
+
+                        embedding_name_regex = regex.compile(
+                            r"(^|[\s,])" + regex.escape(os.path.splitext(entry.name)[0]) + r"([+-]*$|[\s,]|[+-]+[\s,])"
+                        )
+                        if embedding_name_regex.search(req.prompt) or embedding_name_regex.search(req.negative_prompt):
+                            used_embeddings.append(entry.path)
+                    elif entry.is_dir():
+                        used_embeddings.extend(scan_directory(entry.path))
+                return used_embeddings
+
+            used_embeddings = scan_directory(os.path.join(app.MODELS_DIR, "embeddings"))
+            metadata["use_embedding_models"] = used_embeddings if len(used_embeddings) > 0 else None
+
     # Clean up the metadata
     if req.init_image is None and "prompt_strength" in metadata:
         del metadata["prompt_strength"]
@@ -221,10 +262,13 @@ def get_printable_request(req: GenerateImageRequest, task_data: TaskData):
         del metadata["lora_alpha"]
     if task_data.use_upscale != "latent_upscaler" and "latent_upscaler_steps" in metadata:
         del metadata["latent_upscaler_steps"]
+    if task_data.use_controlnet_model is None and "control_filter_to_apply" in metadata:
+        del metadata["control_filter_to_apply"]
 
-    app_config = app.getConfig()
+    if not using_diffusers:
-    if not app_config.get("test_diffusers", False):
+        for key in (
-        for key in (x for x in ["use_lora_model", "lora_alpha", "clip_skip", "tiling", "latent_upscaler_steps"] if x in metadata):
+            x for x in ["use_lora_model", "lora_alpha", "clip_skip", "tiling", "latent_upscaler_steps", "use_controlnet_model", "control_filter_to_apply"] if x in metadata
+        ):
             del metadata[key]
 
     return metadata

ui/index.html

@@ -16,6 +16,8 @@
     <link rel="stylesheet" href="/media/css/image-editor.css">
     <link rel="stylesheet" href="/media/css/searchable-models.css">
     <link rel="stylesheet" href="/media/css/image-modal.css">
+    <link rel="stylesheet" href="/media/css/plugins.css">
+    <link rel="stylesheet" href="/media/css/animations.css">
     <link rel="manifest" href="/media/manifest.webmanifest">
     <script src="/media/js/jquery-3.6.1.min.js"></script>
     <script src="/media/js/jquery-confirm.min.js"></script>
@@ -30,7 +32,7 @@
             <h1>
                 <img id="logo_img" src="/media/images/icon-512x512.png" >
                 Easy Diffusion
-                <small>v2.5.41 <span id="updateBranchLabel"></span></small>
+                <small><span id="version">v2.5.48</span> <span id="updateBranchLabel"></span></small>
             </h1>
         </div>
         <div id="server-status">
@@ -55,14 +57,23 @@
         <div id="editor">
             <div id="editor-inputs">
                 <div id="editor-inputs-prompt" class="row">
-                    <label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn" class="tertiaryButton">Load from a file</button>
+                    <div id="prompt-toolbar" class="split-toolbar">
+                        <div id="prompt-toolbar-left" class="toolbar-left">
+                            <label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn" class="tertiaryButton smallButton">Load from a file</button>
+                        </div>
+                        <div id="prompt-toolbar-right" class="toolbar-right">
+                            <button id="image-modifier-dropdown" class="tertiaryButton smallButton">+ Image Modifiers</button>
+                            <button id="embeddings-button" class="tertiaryButton smallButton displayNone">+ Embedding</button>
+                        </div>
+                    </div>
                     <textarea id="prompt" class="col-free">a photograph of an astronaut riding a horse</textarea>
                     <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
                     <label for="negative_prompt" class="collapsible" id="negative_prompt_handle">
                         Negative Prompt
-                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top">Click to learn more about Negative Prompts</span></i></a>
+                        <a href="https://github.com/easydiffusion/easydiffusion/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top">Click to learn more about Negative Prompts</span></i></a>
                         <small>(optional)</small>
                     </label>
+                    <button id="negative-embeddings-button" class="tertiaryButton smallButton displayNone">+ Embedding</button>
                     <div class="collapsible-content">
                         <textarea id="negative_prompt" name="negative_prompt" placeholder="list the things to remove from the image (e.g. fog, green)"></textarea>
                     </div>
@@ -72,8 +83,8 @@
                     <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">
+                        <div id="init_image_wrapper" class="preview_image_wrapper">
-                            <img id="init_image_preview" src="" />
+                            <img id="init_image_preview" class="image_preview" src="" crossorigin="anonymous" />
                             <span id="init_image_size_box" class="img_bottom_label"></span>
                             <button class="init_image_clear image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
                         </div>
@@ -98,11 +109,12 @@
                     </div>
 
                     <div id="apply_color_correction_setting" class="pl-5"><input id="apply_color_correction" name="apply_color_correction" type="checkbox"> <label for="apply_color_correction">Preserve color profile <small>(helps during inpainting)</small></label></div>
+                    <div id="strict_mask_border_setting" class="pl-5"><input id="strict_mask_border" name="strict_mask_border" type="checkbox"> <label for="strict_mask_border">Strict Mask Border <small>(won't modify outside the mask, but the mask border might be visible)</small></label></div>
 
                 </div>
 
                 <div id="editor-inputs-tags-container" class="row">
-                    <label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">click an Image Modifier to remove it, right-click to temporarily disable it, use Ctrl+Mouse Wheel to adjust its weight</span></i></label>
+                    <label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click an Image Modifier to remove it, right-click to temporarily disable it, use Ctrl+Mouse Wheel to adjust its weight</span></i></label>
                     <div id="editor-inputs-tags-list"></div>
                 </div>
 
@@ -129,22 +141,86 @@
                     <div><table>
                     <tr><b class="settings-subheader">Image Settings</b></tr>
                     <tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="0" onkeypress="preventNonNumericalInput(event)"> <input id="random_seed" name="random_seed" type="checkbox" checked><label for="random_seed">Random</label></td></tr>
-                    <tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td><td><input id="num_outputs_total" name="num_outputs_total" value="1" size="1" onkeypress="preventNonNumericalInput(event)"> <label><small>(total)</small></label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1" onkeypress="preventNonNumericalInput(event)"> <label for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr>
+                    <tr class="pl-5"><td><label for="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 id="num_outputs_parallel_label" for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr>
                     <tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td class="model-input">
                         <input id="stable_diffusion_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
                         <button id="reload-models" class="secondaryButton reloadModels"><i class='fa-solid fa-rotate'></i></button>
-                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about custom models</span></i></a>
+                        <a href="https://github.com/easydiffusion/easydiffusion/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 displayNone" id="enable_trt_config">
+                        <td><label for="convert_to_tensorrt">Enable TensorRT:</label></td>
+                        <td class="diffusers-restart-needed">
+                            <input id="convert_to_tensorrt" name="convert_to_tensorrt" type="checkbox">
+                            <!-- <label><small>Takes upto 20 mins the first time</small></label> -->
+                        </td>
+                    </tr>
                     <tr class="pl-5 displayNone" id="clip_skip_config">
                         <td><label for="clip_skip">Clip Skip:</label></td>
-                        <td>
+                        <td class="diffusers-restart-needed">
                             <input id="clip_skip" name="clip_skip" type="checkbox">
-                            <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Clip-Skip" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about Clip Skip</span></i></a>
+                            <a href="https://github.com/easydiffusion/easydiffusion/wiki/Clip-Skip" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about Clip Skip</span></i></a>
+                        </td>
+                    </tr>
+                    <tr id="controlnet_model_container" class="pl-5">
+                        <td><label for="controlnet_model">ControlNet Image:</label></td>
+                        <td class="diffusers-restart-needed">
+                            <div id="control_image_wrapper" class="preview_image_wrapper">
+                                <img id="control_image_preview" class="image_preview" src="" crossorigin="anonymous" />
+                                <span id="control_image_size_box" class="img_bottom_label"></span>
+                                <button class="control_image_clear image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
+                            </div>
+                            <input id="control_image" name="control_image" type="file" />
+                            <a href="https://github.com/easydiffusion/easydiffusion/wiki/ControlNet" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about ControlNets</span></i></a>
+                            <div id="controlnet_config" class="displayNone">
+                                <label><small>Filter to apply:</small></label>
+                                <select id="control_image_filter">
+                                    <option value="">None</option>
+                                    <optgroup label="Pose">
+                                        <option value="openpose">OpenPose (*)</option>
+                                        <option value="openpose_face">OpenPose face</option>
+                                        <option value="openpose_faceonly">OpenPose face-only</option>
+                                        <option value="openpose_hand">OpenPose hand</option>
+                                        <option value="openpose_full">OpenPose full</option>
+                                    </optgroup>
+                                    <optgroup label="Outline">
+                                        <option value="canny">Canny (*)</option>
+                                        <option value="mlsd">Straight lines</option>
+                                        <option value="scribble_hed">Scribble hed (*)</option>
+                                        <option value="scribble_hedsafe">Scribble hedsafe</option>
+                                        <option value="scribble_pidinet">Scribble pidinet</option>
+                                        <option value="scribble_pidsafe">Scribble pidsafe</option>
+                                        <option value="softedge_hed">Softedge hed</option>
+                                        <option value="softedge_hedsafe">Softedge hedsafe</option>
+                                        <option value="softedge_pidinet">Softedge pidinet</option>
+                                        <option value="softedge_pidsafe">Softedge pidsafe</option>
+                                    </optgroup>
+                                    <optgroup label="Depth">
+                                        <option value="normal_bae">Normal bae (*)</option>
+                                        <option value="depth_midas">Depth midas</option>
+                                        <option value="depth_zoe">Depth zoe</option>
+                                        <option value="depth_leres">Depth leres</option>
+                                        <option value="depth_leres++">Depth leres++</option>
+                                    </optgroup>
+                                    <optgroup label="Line art">
+                                        <option value="lineart_coarse">Lineart coarse</option>
+                                        <option value="lineart_realistic">Lineart realistic</option>
+                                        <option value="lineart_anime">Lineart anime</option>
+                                    </optgroup>
+                                    <optgroup label="Misc">
+                                        <option value="shuffle">Shuffle</option>
+                                        <option value="segment">Segment</option>
+                                    </optgroup>
+                                </select>
+                                <br/>
+                                <label for="controlnet_model"><small>Model:</small></label> <input id="controlnet_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
+                                <br/>
+                                <label><small>Will download the necessary models, the first time.</small></label>
+                            </div>
                         </td>
                     </tr>
                     <tr class="pl-5"><td><label for="vae_model">Custom VAE:</label></td><td>
                         <input id="vae_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
-                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about VAEs</span></i></a>
+                        <a href="https://github.com/easydiffusion/easydiffusion/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about VAEs</span></i></a>
                     </td></tr>
                     <tr id="samplerSelection" class="pl-5"><td><label for="sampler_name">Sampler:</label></td><td>
                         <select id="sampler_name" name="sampler_name">
@@ -157,10 +233,10 @@
                             <option value="dpm2_a">DPM2 Ancestral</option>
                             <option value="lms">LMS</option>
                             <option value="dpm_solver_stability">DPM Solver (Stability AI)</option>
-                            <option value="dpmpp_2s_a" class="k_diffusion-only">DPM++ 2s Ancestral (Karras)</option>
+                            <option value="dpmpp_2s_a">DPM++ 2s Ancestral (Karras)</option>
                             <option value="dpmpp_2m">DPM++ 2m (Karras)</option>
-                            <option value="dpmpp_sde" class="k_diffusion-only">DPM++ SDE (Karras)</option>
+                            <option value="dpmpp_2m_sde" class="diffusers-only">DPM++ 2m SDE (Karras)</option>
-                            <option value="dpm_fast" class="k_diffusion-only">DPM Fast (Karras)</option>
+                            <option value="dpmpp_sde">DPM++ SDE (Karras)</option>
                             <option value="dpm_adaptive" class="k_diffusion-only">DPM Adaptive (Karras)</option>
                             <option value="ddpm" class="diffusers-only">DDPM</option>
                             <option value="deis" class="diffusers-only">DEIS</option>
@@ -170,17 +246,17 @@
                             <option value="unipc_tu_2" class="k_diffusion-only">UniPC TU 2</option>
                             <option value="unipc_tq" class="k_diffusion-only">UniPC TQ</option>
                         </select>
-                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/How-to-Use#samplers" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about samplers</span></i></a>
+                        <a href="https://github.com/easydiffusion/easydiffusion/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>
+                    <tr class="pl-5"><td><label>Image Size: </label></td><td id="image-size-options">
                         <select id="width" name="width" value="512">
-                            <option value="128">128 (*)</option>
+                            <option value="128">128</option>
                             <option value="192">192</option>
-                            <option value="256">256 (*)</option>
+                            <option value="256">256</option>
                             <option value="320">320</option>
                             <option value="384">384</option>
                             <option value="448">448</option>
-                            <option value="512" selected>512 (*)</option>
+                            <option value="512" selected="">512 (*)</option>
                             <option value="576">576</option>
                             <option value="640">640</option>
                             <option value="704">704</option>
@@ -195,14 +271,15 @@
                             <option value="2048">2048</option>
                         </select>
                         <label for="width"><small>(width)</small></label>
+                        <span id="swap-width-height" class="clickable smallButton" style="margin-left: 2px; margin-right:2px;"><i class="fa-solid fa-right-left"><span class="simple-tooltip top-left"> Swap width and height </span></i></span>
                         <select id="height" name="height" value="512">
-                            <option value="128">128 (*)</option>
+                            <option value="128">128</option>
                             <option value="192">192</option>
-                            <option value="256">256 (*)</option>
+                            <option value="256">256</option>
                             <option value="320">320</option>
                             <option value="384">384</option>
                             <option value="448">448</option>
-                            <option value="512" selected>512 (*)</option>
+                            <option value="512" selected="">512 (*)</option>
                             <option value="576">576</option>
                             <option value="640">640</option>
                             <option value="704">704</option>
@@ -217,19 +294,34 @@
                             <option value="2048">2048</option>
                         </select>
                         <label for="height"><small>(height)</small></label>
+                        <div id="recent-resolutions-container">
+                            <span id="recent-resolutions-button" class="clickable"><i class="fa-solid fa-sliders"><span class="simple-tooltip top-left"> Advanced sizes </span></i></span>
+                            <div id="recent-resolutions-popup" class="displayNone">
+                                <small>Custom size:</small><br>
+                                <input id="custom-width" name="custom-width" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)">
+                                &times;
+                                <input id="custom-height" name="custom-height" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)"><br>
+
+                                <small>Enlarge:</small><br>
+                                <div id="enlarge-buttons"><button id="enlarge15" class="tertiaryButton smallButton">×1.5</button>&nbsp;<button id="enlarge2" class="tertiaryButton smallButton">×2</button>&nbsp;<button id="enlarge3" class="tertiaryButton smallButton">×3</button></div>
+
+                                <small>Recently&nbsp;used:</small><br>
+                                <div id="recent-resolution-list">
+                                </div>
+                            </div>
+                        </div>
                         <div id="small_image_warning" class="displayNone">Small image sizes can cause bad image quality</div>
                     </td></tr>
-                    <tr class="pl-5"><td><label for="num_inference_steps">Inference Steps:</label></td><td> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25" onkeypress="preventNonNumericalInput(event)"></td></tr>
+                    <tr class="pl-5"><td><label for="num_inference_steps">Inference Steps:</label></td><td> <input id="num_inference_steps" name="num_inference_steps" type="number" min="1" step="1" style="width: 42pt" value="25" onkeypress="preventNonNumericalInput(event)"></td></tr>
                     <tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="11" max="500"> <input id="guidance_scale" name="guidance_scale" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>
                     <tr id="prompt_strength_container" class="pl-5"><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td></tr>
-                    <tr id="lora_model_container" class="pl-5"><td><label for="lora_model">LoRA:</label></td><td>
+                    <tr id="lora_model_container" class="pl-5">
-                        <input id="lora_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
-                    </td></tr>
-                    <tr id="lora_alpha_container" class="pl-5">
-                        <td><label for="lora_alpha_slider">LoRA Strength:</label></td>
                         <td>
-                            <small>-2</small> <input id="lora_alpha_slider" name="lora_alpha_slider" class="editor-slider" value="50" type="range" min="-200" max="200"> <small>2</small> &nbsp;
+                            <label for="lora_model">LoRA:</label>
-                            <input id="lora_alpha" name="lora_alpha" size="4" pattern="^-?[0-9]*\.?[0-9]*$" onkeypress="preventNonNumericalInput(event)"><br/>
+                        </td>
+                        <td class="diffusers-restart-needed">
+                            <div class="model_entries"></div>
+                            <button class="add_model_entry"><i class="fa-solid fa-plus"></i> add another LoRA</button>
                         </td>
                     </tr>
                     <tr class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</label></td><td>
@@ -239,15 +331,18 @@
                         <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 id="tiling_container" class="pl-5"><td><label for="tiling">Seamless Tiling:</label></td><td>
+                    <tr id="tiling_container" class="pl-5">
-                        <select id="tiling" name="tiling">
+                        <td><label for="tiling">Seamless Tiling:</label></td>
-                            <option value="none" selected>None</option>
+                        <td class="diffusers-restart-needed">
-                            <option value="x">Horizontal</option>
+                            <select id="tiling" name="tiling">
-                            <option value="y">Vertical</option>
+                                <option value="none" selected>None</option>
-                            <option value="xy">Both</option>
+                                <option value="x">Horizontal</option>
-                        </select>
+                                <option value="y">Vertical</option>
-                        <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Seamless-Tiling" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about Seamless Tiling</span></i></a>
+                                <option value="xy">Both</option>
-                    </td></tr>
+                            </select>
+                            <a href="https://github.com/easydiffusion/easydiffusion/wiki/Seamless-Tiling" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about Seamless Tiling</span></i></a>
+                        </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>
@@ -294,28 +389,7 @@
                 </div>
             </div>
 
-            <div id="editor-modifiers" class="panel-box">
+            <label><small><b>Note:</b> The Image Modifiers section has moved to the <code>+ Image Modifiers</code> button at the top, just below the Prompt textbox.</small></label>
-                <h4 class="collapsible">
-                    Image Modifiers (art styles, tags etc)
-                    <i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
-                        <span class="simple-tooltip left">
-                            Add Custom Modifiers
-                        </span>
-                    </i>
-                </h4>
-                <div id="editor-modifiers-entries" class="collapsible-content">
-                    <div id="editor-modifiers-entries-toolbar">
-                        <label for="preview-image">Image Style:</label>
-                        <select id="preview-image" name="preview-image" value="portrait">
-                            <option value="portrait" selected="">Face</option>
-                            <option value="landscape">Landscape</option>
-                        </select>
-                        &nbsp;
-                        <label for="modifier-card-size-slider">Thumbnail Size:</label>
-                        <input id="modifier-card-size-slider" name="modifier-card-size-slider" value="0" type="range" min="-3" max="5">
-                    </div>
-                </div>
-            </div>
         </div>
 
         <div id="preview" class="col-free">
@@ -368,6 +442,13 @@
                 <div class="parameters-table" id="system-settings-table"></div>
                 <br/>
                 <button id="save-system-settings-btn" class="primaryButton">Save</button>
+                <div id="install-extras-container" class="displayNone">
+                    <br/>
+                    <div id="install-extras">
+                        <h3><i class="fa fa-cubes-stacked"></i> Optional Packages</h3>
+                        <div class="parameters-table" id="system-settings-install-extras-table"></div>
+                    </div>
+                </div>
                 <br/><br/>
                 <div id="share-easy-diffusion">
                    <h3><i class="fa fa-user-group"></i> Share Easy Diffusion</h3>
@@ -398,23 +479,23 @@
                         <ul id="help-links">
                             <li><span class="help-section">Using the software</span>
                             <ul>
-                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/How-To-Use" target="_blank"><i class="fa-solid fa-book fa-fw"></i> How to use</a>
+                                <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/How-To-Use" target="_blank"><i class="fa-solid fa-book fa-fw"></i> How to use</a>
-                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/UI-Overview" target="_blank"><i class="fa-solid fa-list fa-fw"></i> UI Overview</a>
+                                <li> <a href="https://github.com/easydiffusion/easydiffusion/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/easydiffusion/easydiffusion/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/easydiffusion/easydiffusion/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>
+                                <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/Run-on-Multiple-GPUs" target="_blank"><i class="fa-solid fa-paintbrush fa-fw"></i> Run on Multiple GPUs</a>
                             </ul>
   
                             <li><span class="help-section">Installation</span>
                             <ul>
-                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" target="_blank"><i class="fa-solid fa-circle-question fa-fw"></i> Troubleshooting</a>
+                                <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/Troubleshooting" target="_blank"><i class="fa-solid fa-circle-question fa-fw"></i> Troubleshooting</a>
                             </ul>
   
                             <li><span class="help-section">Downloadable Content</span>
                             <ul>
-                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-images fa-fw"></i> Custom Models</a>
+                                <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-images fa-fw"></i> Custom Models</a>
-                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/UI-Plugins" target="_blank"><i class="fa-solid fa-puzzle-piece fa-fw"></i> UI Plugins</a>
+                                <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/UI-Plugins" target="_blank"><i class="fa-solid fa-puzzle-piece fa-fw"></i> UI Plugins</a>
-                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-hand-sparkles fa-fw"></i> VAE Variational Auto Encoder</a>
+                                <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-hand-sparkles fa-fw"></i> VAE Variational Auto Encoder</a>
                             </ul>
                         </ul>
                     </div>
@@ -424,7 +505,7 @@
                         <ul id="community-links">
                             <li><a href="https://discord.com/invite/u9yhsFmEkB" target="_blank"><i class="fa-brands fa-discord fa-fw"></i> Discord user community</a></li>
                             <li><a href="https://www.reddit.com/r/StableDiffusionUI/" target="_blank"><i class="fa-brands fa-reddit fa-fw"></i> Reddit community</a></li>
-                            <li><a href="https://github.com/cmdr2/stable-diffusion-ui" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
+                            <li><a href="https://github.com/easydiffusion/easydiffusion" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
                         </ul>
                     </div>
                 </div>
@@ -432,32 +513,85 @@
         </div>
     </div>
     
-
+    <div class="popup" id="splash-screen" data-version="1">
-    <div class="popup" id="download-images-popup">
         <div>
             <i class="close-button fa-solid fa-xmark"></i>
-            <h1>Download all images</h1>
+            <img class="splash-img" src="/media/images/icon-512x512.png" width="128" height="128">
-            <div class="parameters-table">
+            <h1>Diffusers Tech Preview</h1>
-                <div>
+            <p>The Diffusers Tech Preview allows early access to the new features based on <a href="https://huggingface.co/docs/diffusers/index" target="_blank">Diffusers</a>.</p>
-                    <div><i class="fa fa-file-zipper"></i></div>
+            <p>This is under active development, and is missing a few features. It is experimental! Please report any bugs to the #beta channel in our <a href="https://discord.gg/QUcNZufQNZ" target="_blank">Discord</a> server!</p>
-                    <div><label for="theme">Download as a ZIP file</label><small>Instead of downloading individual files, generate one zip file with all images</small></div>
+            <h2>New upcoming features in our new engine</h2>
-                    <div><div class="input-toggle"><input id="zip_toggle" name="zip_toggle" checked="" type="checkbox"><label for="zip_toggle"></label></div></div>
+            <ul>
-                </div>
+                <li><a href="https://huggingface.co/blog/lora" target="_blank">LORA</a> support - Place LORA files in the <tt>models/lora</tt> folder.</li>
-                <div id="download-add-folders">
+                <li><a href="https://github.com/damian0815/compel/blob/main/Reference.md" target="_blank">Compel Prompt Parser</a> - New, more powerful parser. In short:
-                    <div><i class="fa fa-folder-tree"></i></div>
+                    <ul>
-                    <div><label for="theme">Add per-job folders</label><small>Place images into job folders</small></div>
+                        <li> no limit to the length of prompts (i.e. long prompts are supported)</li>
-                    <div><div class="input-toggle"><input id="tree_toggle" name="tree_toggle" checked="" type="checkbox"><label for="tree_toggle"></label></div></div>
+                        <li> Use <tt>+</tt> and <tt>-</tt> to increase/decrease the weight. E.g. <tt>apple</tt>, <tt>apple+</tt>, <tt>apple++</tt>, <tt>apple+++</tt>,
-                </div>
+                             or <tt>apple-</tt>, <tt>apple--</tt> for different weights.</li>
-                <div>
+                        <li> Use exact weights - 0.0 to 1.0 reduces the weight, 1.0 to 2.0 increases the weight.
-                    <div><i class="fa fa-sliders"></i></div>
+                             Think of it like a multiplier, like 1.5x or 0.5x: E.g. <tt>(apple)0.8 falling from a tree</tt>,
-                    <div><label for="theme">Add metadata files</label><small>For each image, also download a JSON file with all the settings used to generate the image</small></div>
+                             <tt>(apple)1.5 falling from a tree</tt>, <tt>(apple falling)1.4 from a tree</tt></li>
-                    <div><div class="input-toggle"><input id="json_toggle" name="json_toggle" checked="" type="checkbox"><label for="json_toggle"></label></div></div>
+                        <li> You can group tokens together using parentheses/round-brackets. E.g. <tt>(apple falling)++
-                </div>
+                             from a tree</tt>. Nested parentheses are supported.</li>
-            </div>
+                    </ul>
-            <br/>
+                    This clarifies a few things:
-            <button id="save-all-images" class="primaryButton"><i class="fa-solid fa-images"></i> Start download</button>
+                    <ul>
+                        <li> colon (<tt>:</tt>) is NOT used for blending. Neither is it used for weights. It has no impact and
+                             will be considered a part of the prompt.</li>
+                        <li> <tt>(())</tt> and <tt>[]</tt> do not affect the prompt's weights.</li>
+                    </ul>
+                </li>
+                <li> More choices for img2img samplers</li>
+                <li> Support for official inpainting models</li>
+		<li> Generate images that tile seamlessly</li>
+                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Clip-Skip" target="_blank">Clip Skip</a> support allows to skip the last CLIP layer (recommended by some LORA models)</li>
+                <li> New samplers: DDPM and DEIS</li>
+                <li> Memory optimizations that allow the use of 2GB GPUs</li>
+            </ul>
+            <h2>Known issues</h2>
+            <ul>
+                <li> Some LoRA consistently fail to load in EasyDiffusion</li>
+                <li> Some LoRA are far more sensitive to alpha (compared to a11)</li>
+                <li> Hangs sometimes on "compel is ready", while making the token.</li>
+                <li> Some custom inpainting models don't work</li>
+                <li> These samplers don't work yet: Unipc SNR, Unipc TQ, Unipc SNR2, DPM++ 2s Ancestral, DPM++ SDE, DPM Fast, DPM Adaptive, DPM2</li>
+                <li> Hypernetwork doesn't work</li>
+                <li> The time remaining in browser differs from the one in the console</li>
+            </ul>
         </div>
     </div>
+
+    <dialog id="download-images-dialog">
+        <div class="dialog-header">
+            <div class="dialog-header-left">
+                <h4>Download all images</h4>
+                <span></span>
+            </div>
+            <div>
+                <i id="download-images-close-button" class="fa-solid fa-xmark fa-lg"></i>
+            </div>
+        </div>
+        <div class="parameters-table">
+            <div>
+                <div><i class="fa fa-file-zipper"></i></div>
+                <div><label for="theme">Download as a ZIP file</label><small>Instead of downloading individual files, generate one zip file with all images</small></div>
+                <div><div class="input-toggle"><input id="zip_toggle" name="zip_toggle" checked="" type="checkbox"><label for="zip_toggle"></label></div></div>
+            </div>
+            <div id="download-add-folders">
+                <div><i class="fa fa-folder-tree"></i></div>
+                <div><label for="theme">Add per-job folders</label><small>Place images into job folders</small></div>
+                <div><div class="input-toggle"><input id="tree_toggle" name="tree_toggle" checked="" type="checkbox"><label for="tree_toggle"></label></div></div>
+            </div>
+            <div>
+                <div><i class="fa fa-sliders"></i></div>
+                <div><label for="theme">Add metadata files</label><small>For each image, also download a JSON file with all the settings used to generate the image</small></div>
+                <div><div class="input-toggle"><input id="json_toggle" name="json_toggle" checked="" type="checkbox"><label for="json_toggle"></label></div></div>
+            </div>
+        </div>
+        <div class="center">
+            <button id="save-all-images" class="primaryButton"><i class="fa-solid fa-images"></i> Start download</button>
+        </div>
+    </dialog>
     <div id="save-settings-config" class="popup">
         <div>
             <i class="close-button fa-solid fa-xmark"></i>
@@ -468,16 +602,90 @@
         </div>
     </div>
 
-    <div id="modifier-settings-config" class="popup" tabindex="0">
+    <div id="editor-modifiers">
-        <div>
+        <div id="editor-modifiers-header" class="dialog-header">
-            <i class="close-button fa-solid fa-xmark"></i>
+            <div id="modifiers-header-left" class="dialog-header-left">
-            <h1>Modifier Settings</h1>
+                <h4>Image Modifiers</h4>
-            <p>Set your custom modifiers (one per line)</p>
+                <span>(drawing style, camera, etc.)</span>
-            <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line" spellcheck="false"></textarea>
+            </div>
-            <p><small><b>Tip:</b> You can include special characters like {} () [] and |. You can also put multiple comma-separated phrases in a single line, to make a single modifier that combines all of those.</small></p>
+            <div id="modifiers-header-right">
+                <i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
+                    <span class="simple-tooltip left">
+                        Add Custom Modifiers
+                    </span>
+                </i>
+                <i id="modifiers-container-size-btn" class="fa-solid fa-expand"></i>
+                <i id="modifiers-close-button" class="fa-solid fa-xmark fa-lg"></i>
+            </div>
         </div>
+        <div id="editor-modifiers-subheader">
+            <div id="modifiers-action-collapsibles-btn">
+                <i class="modifiers-action-icon fa-solid fa-square-plus"></i>
+                <span class="modifiers-action-text">
+                    Expand Categories
+                </span>
+            </div>
+            <div>
+                <label for="preview-image">Image Style:</label>
+                <select id="preview-image" name="preview-image" value="portrait">
+                    <option value="portrait" selected="">Face</option>
+                    <option value="landscape">Landscape</option>
+                </select>
+            </div>
+            <div>
+                <label for="modifier-card-size-slider">Thumbnail Size:</label>
+                <input id="modifier-card-size-slider" name="modifier-card-size-slider" value="0" type="range" min="-2" max="3">
+            </div>
+        </div>
+        <div id="editor-modifiers-entries" class="collapsible-content"></div>
     </div>
 
+    <dialog id="modifier-settings-config">
+        <div id="modifier-settings-header" class="dialog-header">
+            <div id="modifier-settings-header-left" class="dialog-header-left">
+                <h4>Custom Modifiers</h4>
+                <span>Set your custom modifiers (one per line)</span>
+            </div>
+            <div id="modifier-settings-header-right">
+                <i id="modifier-settings-close-button" class="fa-solid fa-xmark fa-lg"></i>
+            </div>
+        </div>
+        <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line" spellcheck="false"></textarea>
+        <div>
+            <small>
+                <b>Tip:</b> You can include special characters like {} () [] and |. You can also put multiple comma-separated
+                phrases in a single line, to make a single modifier that combines all of those.
+            </small>
+        </div>
+    </dialog>
+
+    <dialog id="embeddings-dialog">
+        <div id="embeddings-dialog-header" class="dialog-header">
+            <div id="embeddings-dialog-header-left" class="dialog-header-left">
+                <h4>Embeddings</h4>
+                <span>
+                    <span class="displayNone" id="positive-embedding-text"> Add embeddings to the prompt (click) or negative prompt (shift-click)</span>
+                    <span class="displayNone" id="negative-embedding-text"> Add embeddings to the negative prompt</span>
+                <span>
+            </div>
+            <div id="embeddings-dialog-header-right">
+                <i id="embeddings-dialog-close-button" class="fa-solid fa-xmark fa-lg"></i>
+            </div>
+        </div>
+        <div>
+            <button id="embeddings-action-collapsibles-btn" class="tertiaryButton smallButton">
+                <i class="embeddings-action-icon fa-solid fa-square-plus"></i>
+                <span class="embeddings-action-text">Expand Categories</span>
+            </button>
+            <i class="fa-solid fa-magnifying-glass"></i>
+            <input id="embeddings-search-box" type="text" spellcheck="false" autocomplete="off" placeholder="Search...">
+            <span style="float:right;"><label>Mode:</label>&nbsp;<select id="embeddings-mode"><option value="insert">Insert at cursor position</option><option value="append">Append at the end</option></select>
+        </div>
+        <div id="embeddings-list">
+        </div>
+        </div>
+    </dialog>
+
     <div id="image-editor" class="popup image-editor-popup">
         <div>
             <i class="close-button fa-solid fa-xmark"></i>
@@ -514,10 +722,10 @@
     <div id="footer">
         <div class="line-separator">&nbsp;</div>
         <p>If you found this project useful and want to help keep it alive, please <a href="https://ko-fi.com/cmdr2_stablediffusion_ui" target="_blank"><img src="/media/images/kofi.png" id="coffeeButton"></a> to help cover the cost of development and maintenance! Thank you for your support!</p>
-        <p>Please feel free to join the <a href="https://discord.com/invite/u9yhsFmEkB" target="_blank">discord community</a> or <a href="https://github.com/cmdr2/stable-diffusion-ui/issues" target="_blank">file an issue</a> if you have any problems or suggestions in using this interface.</p>
+        <p>Please feel free to join the <a href="https://discord.com/invite/u9yhsFmEkB" target="_blank">discord community</a> or <a href="https://github.com/easydiffusion/easydiffusion/issues" target="_blank">file an issue</a> if you have any problems or suggestions in using this interface.</p>
         <div id="footer-legal">
             <p><b>Disclaimer:</b> The authors of this project are not responsible for any content generated using this interface.</p>
-            <p>This license of this software forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm, <br/>spread misinformation and target vulnerable groups. For the full list of restrictions please read <a href="https://github.com/cmdr2/stable-diffusion-ui/blob/main/LICENSE" target="_blank">the license</a>.</p>
+            <p>This license of this software forbids you from sharing any content that violates any laws, produce any harm to a person, disseminate any personal information that would be meant for harm, <br/>spread misinformation and target vulnerable groups. For the full list of restrictions please read <a href="https://github.com/easydiffusion/easydiffusion/blob/main/LICENSE" target="_blank">the license</a>.</p>
             <p>By using this software, you consent to the terms and conditions of the license.</p>
         </div>
     </div>
@@ -526,13 +734,13 @@
 <script src="media/js/utils.js"></script>
 <script src="media/js/engine.js"></script>
 <script src="media/js/parameters.js"></script>
-<script src="media/js/plugins.js"></script>
 
 <script src="media/js/image-modifiers.js"></script>
 <script src="media/js/auto-save.js"></script>
 
 <script src="media/js/searchable-models.js"></script>
 <script src="media/js/main.js"></script>
+<script src="media/js/plugins.js"></script>
 <script src="media/js/themes.js"></script>
 <script src="media/js/dnd.js"></script>
 <script src="media/js/image-editor.js"></script>
@@ -540,19 +748,24 @@
 <script>
 async function init() {
     await initSettings()
-    await getModels()
+    await getModels(false)
     await getAppConfig()
     await loadUIPlugins()
     await loadModifiers()
     await getSystemInfo()
+    // await initPlugins()
 
     SD.init({
         events: {
             statusChange: setServerStatus,
             idle: onIdle,
-            ping: tunnelUpdate
+            ping: onPing
         }
     })
+    // splashScreen()
+
+    // load models again, but scan for malicious this time
+    await getModels(true)
 
     // playSound()
 }

ui/main.py

@@ -1,10 +1,12 @@
 from easydiffusion import model_manager, app, server
-from easydiffusion.server import server_api # required for uvicorn
+from easydiffusion.server import server_api  # required for uvicorn
+
+server.init()
 
 # Init the app
 model_manager.init()
 app.init()
-server.init()
+app.init_render_threads()
 
 # start the browser ui
 app.open_browser()

ui/media/css/animations.css

@@ -0,0 +1,68 @@
+@keyframes ldio-8f673ktaleu-1 {
+    0% { transform: rotate(0deg) }
+   50% { transform: rotate(-45deg) }
+  100% { transform: rotate(0deg) }
+}
+@keyframes ldio-8f673ktaleu-2 {
+    0% { transform: rotate(180deg) }
+   50% { transform: rotate(225deg) }
+  100% { transform: rotate(180deg) }
+}
+.ldio-8f673ktaleu > div:nth-child(2) {
+  transform: translate(-15px,0);
+}
+.ldio-8f673ktaleu > div:nth-child(2) div {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 60px;
+  height: 30px;
+  border-radius: 60px 60px 0 0;
+  background: #f3b72e;
+  animation: ldio-8f673ktaleu-1 1s linear infinite;
+  transform-origin: 30px 30px
+}
+.ldio-8f673ktaleu > div:nth-child(2) div:nth-child(2) {
+  animation: ldio-8f673ktaleu-2 1s linear infinite
+}
+.ldio-8f673ktaleu > div:nth-child(2) div:nth-child(3) {
+  transform: rotate(-90deg);
+  animation: none;
+}@keyframes ldio-8f673ktaleu-3 {
+    0% { transform: translate(95px,0); opacity: 0 }
+   20% { opacity: 1 }
+  100% { transform: translate(35px,0); opacity: 1 }
+}
+.ldio-8f673ktaleu > div:nth-child(1) {
+  display: block;
+}
+.ldio-8f673ktaleu > div:nth-child(1) div {
+  position: absolute;
+  top: 46px;
+  left: -4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #3869c5;
+  animation: ldio-8f673ktaleu-3 1s linear infinite
+}
+.ldio-8f673ktaleu > div:nth-child(1) div:nth-child(1) { animation-delay: -0.67s }
+.ldio-8f673ktaleu > div:nth-child(1) div:nth-child(2) { animation-delay: -0.33s }
+.ldio-8f673ktaleu > div:nth-child(1) div:nth-child(3) { animation-delay: 0s }
+.loadingio-spinner-bean-eater-x0y3u8qky4n {
+  width: 58px;
+  height: 58px;
+  display: inline-block;
+  overflow: hidden;
+  background: none;
+}
+.ldio-8f673ktaleu {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform: translateZ(0) scale(0.58);
+  backface-visibility: hidden;
+  transform-origin: 0 0; /* see note above */
+}
+.ldio-8f673ktaleu div { box-sizing: content-box; }
+/* generated by https://loading.io/ */

ui/media/css/auto-save.css

@@ -78,6 +78,7 @@
     border-bottom-right-radius: 12px;
 }
 
-.parameters-table .fa-fire {
+.parameters-table .fa-fire,
+.parameters-table .fa-bolt {
     color: #F7630C;
 }

ui/media/css/main.css

@@ -5,6 +5,8 @@
 
 html {
     position: relative;
+    overscroll-behavior-y: none;
+    color-scheme: dark !important;
 }
 
 body {
@@ -12,12 +14,13 @@ body {
     font-size: 11pt;
     background-color: var(--background-color1);
     color: var(--text-color);
+    overscroll-behavior-y: contain;
 }
 a {
-    color: rgb(0, 102, 204);
+    color: var(--link-color);
 }
 a:visited {
-    color: rgb(0, 102, 204);
+    color: var(--link-color);
 }
 label {
     font-size: 10pt;
@@ -144,7 +147,7 @@ code {
     opacity: 0;
 }
 .imgPreviewItemClearBtn:hover {
-    background: rgb(177, 27, 0);
+    background: var(--button-hover-background);
 }
 .imgContainer:hover > .imgItemInfo {
     opacity: 1;
@@ -184,7 +187,7 @@ code {
 #editor label {
     font-weight: normal;
 }
-#editor h4 {
+.dialog-header h4 {
     margin: 0px;
     white-space: nowrap;
 }
@@ -192,7 +195,7 @@ code {
     width: 100%;
 }
 .settings-box label small {
-    color: rgb(153, 153, 153);
+    color: var(--small-label-color);
     margin-right: 10px;
 }
 #preview {
@@ -211,10 +214,6 @@ code {
 #makeImage {
     border-radius: 6px;
 }
-#editor-modifiers h5 {
-    padding: 5pt 0;
-    margin: 0;
-}
 #makeImage {
     flex: 0 0 70px;
     background: var(--accent-color);
@@ -224,11 +223,11 @@ code {
     height: 30pt;
 }
 #makeImage:hover {
-    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+    background: var(--button-hover-background);
 }
 #stopImage {
     flex: 0 0 70px;
-    background: rgb(132, 8, 0);
+    background: var(--secondary-button-background);
     border: 2px solid rgb(122, 29, 0);
     color: rgb(255, 221, 255);
     height: 30pt;
@@ -236,7 +235,7 @@ code {
     flex-grow: 2;
 }
 #stopImage:hover {
-    background: rgb(177, 27, 0);
+    background: var(--secondary-button-hover-background);
 }
 #undo {
     float: right;
@@ -284,14 +283,212 @@ button#resume {
 .collapsible:not(.active) ~ .collapsible-content  {
     display: none !important;
 }
+#image-modifier-dropdown {
+    margin-left: 1em;
+    position: relative;
+    cursor: pointer;
+}
 #editor-modifiers {
-    overflow-y: auto;
+    max-width: 75vw;
+    min-width: 50vw;
+    max-height: fit-content;
+    overflow-y: hidden;
     overflow-x: hidden;
+    display: none;
+    background: var(--background-color1);
+    border: solid 1px var(--background-color3);
+    z-index: 1999;
+    border-radius: 6px;
+    box-shadow: 0px 0px 30px black;
+    border: 2px solid rgb(255 255 255 / 10%);
+    margin-top: 150pt;
+}
+@media screen and (max-height: 500px) {
+    #editor-modifiers {
+        margin-top: 50pt;
+    }
+}
+#editor-modifiers.active {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 5vw;
+}
+.modifiers-maximized {
+    position: fixed !important;
+    top: 0 !important;
+    bottom: 0px !important;
+    left: 0px !important;
+    right: 0px !important;
+    margin: 0px !important;
+    max-width: unset !important;
+    max-height: unset !important;
+    border: 0px !important;
+    border-radius: 0px !important;
+}
+.modifiers-maximized #editor-modifiers-entries {
+    max-height: 100%;
+    flex: 1;
+}
+.dialog-header {
+    background-color: var(--background-color4);
+    padding: 0.5em;
+    border-bottom: 1px solid rgb(255 255 255 / 10%);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+#editor-modifiers-subheader {
+    background-color: var(--background-color4);
+    padding: 0.5em;
+    border-bottom: 1px solid rgb(255 255 255 / 10%);
+    display: flex;
+    align-items: center;
+    grid-gap: 0.8em;
+    flex-direction: row;
+    position: relative;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    transition: all 0.1s ease;
+}
+#editor-modifiers-subheader::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.02);
+    opacity: 1;
+    pointer-events: none;
+}
+#modifiers-header-left {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 0.1em;
+}
+.dialog-header-left span {
+    font-size: 0.8em;
+    color: rgb(127 127 127);
+    font-weight: 200;
+}
+#modifiers-header-right {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    grid-gap: 0.8em;
+    margin-right: 0.3em;
+}
+
+#editor-modifiers-subheader i,
+#modifiers-header-right i {
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+}
+#modifiers-header-right .section-button,
+#editor-modifiers-subheader .section-button {
+    margin-top: 0.3em;
+}
+#modifiers-action-collapsibles-btn {
+    display: flex;
+    grid-gap: 0.5em;
+    cursor: pointer;
+}
+.modifiers-action-text {
+    font-size: 0.8em;
+    color: rgb(192 192 192);
+}
+#modifiers-expand-btn {
+    z-index: 2;
+}
+#modifiers-expand-btn .simple-tooltip {
+    background-color: var(--background-color3);
+    border-radius: 50px;
+}
+.modifier-category .collapsible {
+    position: relative;
+}
+.modifier-category .collapsible::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.1);
+    opacity: 0;
+    transition: opacity 0.1s ease;
+    pointer-events: none;
+}
+.modifier-category:hover .collapsible::after {
+    opacity: 1;
+    pointer-events: none;
+}
+#editor-modifiers-entries {
+    overflow: auto scroll;
+    max-height: 50vh;
+    height: fit-content;
+    margin-bottom: 0.1em;
+    padding-left: 0px;
+}
+#editor-modifiers-entries .collapsible {
+    transition: opacity 0.1s ease;
+    padding-left: 0.5em;
+}
+#editor-modifiers-entries .modifier-category:nth-child(odd) .collapsible::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.02);
+    opacity: 1;
+    pointer-events: none;
 }
 #editor-modifiers .editor-modifiers-leaf {
     padding-top: 10pt;
     padding-bottom: 10pt;
 }
+#editor-modifiers h5 {
+    padding: 5pt 0;
+    margin: 0;
+    position: sticky;
+    top: -2px;
+    z-index: 10;
+    background-color: var(--background-color3);
+    border-bottom: 1px solid rgb(255 255 255 / 4%);
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+dialog {
+    background: var(--background-color2);
+    color: var(--text-color);
+    border-radius: 6px;
+    border: 2px solid rgb(255 255 255 / 10%);
+    padding: 0px;
+}
+
+dialog::backdrop {
+    background: rgba(32, 33, 36, 50%);
+}
+
+dialog > div {
+    padding: 0.5em;
+}
+
+
 img {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
 }
@@ -310,6 +507,9 @@ div.img-preview img {
     margin-top: 5pt;
     display: none;
 }
+#editor-inputs-tags-list {
+    max-height: 30em;
+}
 #server-status {
     position: absolute;
     right: 16px;
@@ -318,11 +518,11 @@ div.img-preview img {
 }
 #server-status-color {
     font-size: 14pt;
-    color: rgb(200, 139, 0);
+    color: var(--status-orange);
     display: inline;
 }
 #server-status-msg {
-    color: rgb(200, 139, 0);
+    color: var(--status-orange);
     padding-left: 2pt;
     font-size: 10pt;
 }
@@ -529,14 +729,14 @@ div.img-preview img {
     padding: 3pt 6pt;
 }
 .secondaryButton {
-    background: rgb(132, 8, 0);
+    background: var(--secondary-button-background);
     border: 1px solid rgb(122, 29, 0);
     color: rgb(255, 221, 255);
     padding: 3pt 6pt;
     border-radius: 5px;
 }
 .secondaryButton:hover {
-    background: rgb(177, 27, 0);
+    background: var(--secondary-button-hover-background);
 }
 .tertiaryButton {
     background: var(--tertiary-background-color);
@@ -546,12 +746,12 @@ div.img-preview img {
     border-radius: 5px;
 }
 .tertiaryButton:hover {
-    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+    background: var(--button-hover-background);
     color: var(--accent-text-color);
 }
 .tertiaryButton.pressed {
     border-style: inset;
-    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+    background: var(--button-hover-background);
     color: var(--accent-text-color);
 }
 .useSettings {
@@ -594,7 +794,7 @@ div.img-preview img {
     margin-bottom: 8px;
 }
 
-#init_image_preview_container:not(.has-image) #init_image_wrapper,
+#init_image_preview_container:not(.has-image) .preview_image_wrapper,
 #init_image_preview_container:not(.has-image) #inpaint_button_container  {
     display: none;
 }
@@ -631,14 +831,14 @@ div.img-preview img {
     gap: 8px;
 }
 
-#init_image_wrapper {
+.preview_image_wrapper {
     grid-row: span 3;
     position: relative;
     width: fit-content;
     max-height: 150px;
 }
 
-#init_image_preview {
+.image_preview {
     max-height: 150px;
     height: 100%;
     width: 100%;
@@ -672,6 +872,9 @@ div.img-preview img {
 #editor-settings {
     min-width: 350px;
 }
+.panel-box > h4 {
+    margin: 0;
+}
 
 #editor-settings-entries {
     display: flex;
@@ -697,6 +900,10 @@ div.img-preview img {
     white-space: nowrap;
 }
 
+#editor-settings-entries table {
+    width: 93%;
+}
+
 #negative_prompt {
     width: 100%;
 }
@@ -771,7 +978,7 @@ input::file-selector-button,
 button:hover,
 .button:hover {
   transition-duration: 0.1s;
-  background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+  background: var(--button-hover-background);
 }
 
 input::file-selector-button {
@@ -779,7 +986,6 @@ input::file-selector-button {
     height: 19px;
 }
 
-
 .input-toggle {
     display: inline-block;
     position: relative;
@@ -937,7 +1143,7 @@ input::file-selector-button {
     position: relative;
 }
 
-#promptsFromFileBtn {
+.smallButton {
     font-size: 9pt;
     display: inline;
     padding: 2pt;
@@ -1083,6 +1289,7 @@ input::file-selector-button {
 /* POPUPS */
 .popup:not(.active) {
     visibility: hidden;
+    overflow-x: hidden; /* fix overflow from body */
     opacity: 0;
 }
 
@@ -1241,10 +1448,18 @@ button#save-system-settings-btn {
     line-height: 200%;
 }
 
-#download-images-popup .parameters-table > div {
+#download-images-dialog .parameters-table > div {
     background: var(--background-color1);
 }
 
+.center {
+    text-align: center;
+}
+
+.fa-xmark {
+    cursor: pointer;;
+}
+
 /* SCROLLBARS */
 :root {
     --scrollbar-width: 14px;
@@ -1292,6 +1507,49 @@ body.wait-pause {
    100% { border: solid 12px var(--accent-color); }
 }
 
+#splash-screen div {
+   text-align: left;
+   max-width: 70vw;
+}
+
+#splash-screen .splash-img {
+   float: right;
+   box-shadow: none;
+   margin-left: 6px;
+}
+
+#splash-screen tt {
+   font-family: monospace;
+   background: var(--input-background-color);
+   padding: 1px 4px 1px 4px;
+   border-radius: 5px;
+}
+
+#splash-screen li {
+   margin-bottom: 6px;
+}
+
+#splash-screen a
+{
+  color: #ccf;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+#splash-screen a[href^="http"]::after,
+#splash-screen a[href^="https://"]::after
+{
+  content: "";
+  width: 11px;
+  height: 11px;
+  margin-left: 4px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='lightblue' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  display: inline-block;
+}
+
 .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c {
     color: var(--button-text-color);
 }
@@ -1317,6 +1575,7 @@ body.wait-pause {
     margin-top: 0.2em;
     margin-bottom: 0.2em;
     display: inline-block;
+    width: 80%;
 }
 
 #copy-cloudflare-address {
@@ -1352,6 +1611,14 @@ body.wait-pause {
     color: red;
 }
 
+.image-editor-button-label {
+    display: inline-block;
+}
+
+.image-editor-button-label::first-letter {
+    text-decoration: underline;
+}
+
 @keyframes slideInRight {
     from {
         right: -300px;
@@ -1382,3 +1649,186 @@ body.wait-pause {
         bottom: 0;
     }
 }
+
+#embeddings-dialog {
+    overflow: clip;
+}
+
+#embeddings-list {
+    height: 70vH;
+    width: 50vW;
+    margin-left: 0px;
+    margin-right: 0px;
+    padding-left: 0px;
+    padding-right: 0px;
+    overflow-y: scroll;
+}
+
+#embeddings-list button {
+    margin: 2px;
+    color: var(--button-color);
+    background: var(--button-text-color);
+    font-weight: 700;
+}
+#embeddings-list button:hover {
+    background: var(--accent-color);
+    color: var(--button-text-color);
+}
+
+#embeddings-list .collapsible {
+    background: var(--background-color3);
+    margin: 0px;
+    padding: 0.5em;
+    position: sticky;
+}
+
+#embeddings-list .embedding-category:nth-child(odd) .collapsible::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.02);
+    opacity: 1;
+    pointer-events: none;
+}
+
+#embeddings-list .collapsible-content {
+    padding-top:    0.4em;
+    padding-bottom: 0.4em;
+}
+
+#embeddings-list::-webkit-scrollbar-thumb {
+    background: var(--background-color3);
+}
+
+.model_entry .model_name {
+    width: 73%;
+}
+
+.model_entry {
+    position: relative;
+}
+
+.model_entry .remove_model_btn {
+    position: absolute;
+    left: -23pt;
+    top: 4pt;
+}
+
+.split-toolbar {  display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas: "toolbar-left toolbar-right";
+}
+
+.toolbar-left {
+    justify-self: start;
+    align-self: center;
+    grid-area: toolbar-left;
+}
+
+.toolbar-right {
+    justify-self: end;
+    align-self: center;
+    grid-area: toolbar-right;
+}
+
+#negative-embeddings-button {
+    float: right;
+}
+
+.diffusers-disabled-on-startup .diffusers-restart-needed {
+    font-size: 0;
+}
+
+.diffusers-disabled-on-startup .diffusers-restart-needed * {
+    display: none;
+}
+
+.diffusers-disabled-on-startup .diffusers-restart-needed::after {
+    content: "Please restart Easy Diffusion!";
+    font-size: 10pt;
+}
+
+input#custom-width, input#custom-height {
+    width: 47pt;
+}
+
+div#recent-resolutions-container {
+    position: relative;
+    display:inline-block;
+}
+
+div#recent-resolutions-popup {
+    position: absolute;
+    right: 0px;
+    margin: 3px;
+    padding: 0.2em 1em 0.4em 1em;
+    z-index: 1;
+    background: var(--background-color3);
+    border-radius: 4px;
+    box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
+}
+
+div#recent-resolutions-popup small {
+    opacity: 0.7;
+}
+
+td#image-size-options small {
+    margin-right: 0px !important;
+}
+
+td#image-size-options {
+    white-space: nowrap;
+}
+
+div#recent-resolution-list {
+    text-align: center;
+}
+
+div#enlarge-buttons {
+    text-align: center;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.imgContainer .spinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0;
+    padding: 0;
+
+    background: var(--background-color3);
+    opacity: 0.95;
+    border-radius: 5px;
+    padding: 4pt;
+    border: 1px solid var(--button-color);
+    box-shadow: 0px 0px 4px black;
+}
+
+.imgContainer .spinnerStatus {
+    font-size: 10pt;
+}
+
+#controlnet_model_container small {
+    color: var(--text-color)
+}
+#control_image {
+    width: 130pt;
+}
+#controlnet_model {
+    width: 77%;
+}
+
+/* hack for fixing Image Modifier Improvements plugin */
+#imageTagPopupContainer {
+    position: absolute;
+}

ui/media/css/modifier-thumbnails.css

@@ -1,14 +1,16 @@
 .modifier-card {
+    position: relative;
+    box-sizing: content-box; /* fixes border misalignment */
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.1s;
     border-radius: 7px;
     margin: 3pt 3pt;
     float: left;
-    width: 8em;
+    width: 6em;
-    height: 11.5em;
+    height: 9.5em;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 8em 3.5em;
+    grid-template-rows: 6em 3.5em;
     gap: 0px 0px;
     grid-auto-flow: row;
     grid-template-areas:
@@ -16,82 +18,71 @@
         "modifier-card-container";
     border: 2px solid rgba(255, 255, 255, .05);
     cursor: pointer;
-}
+    z-index: 2;
-.modifier-card-size_5 {
-    width: 18em;
-    grid-template-rows: 18em 3.5em;
-    height: 21.5em;
-}
-.modifier-card-size_5 .modifier-card-image-overlay {
-    font-size: 8em;
-}
-.modifier-card-size_4 {
-    width: 14em;
-    grid-template-rows: 14em 3.5em;
-    height: 17.5em;
-}
-.modifier-card-size_4 .modifier-card-image-overlay {
-    font-size: 7em;
 }
 .modifier-card-size_3 {
-    width: 11em;
-    grid-template-rows: 11em 3.5em;
-    height: 14.5em;
-}
-.modifier-card-size_3 .modifier-card-image-overlay {
-    font-size: 6em;
-}
-.modifier-card-size_2 {
     width: 10em;
     grid-template-rows: 10em 3.5em;
     height: 13.5em;
 }
-.modifier-card-size_2 .modifier-card-image-overlay {
+.modifier-card-size_3 .modifier-card-image-overlay {
     font-size: 6em;
 }
-.modifier-card-size_1 {
+.modifier-card-size_3 .modifier-card-label {
+    font-size: 1.2em;
+}
+.modifier-card-size_2 {
     width: 9em;
     grid-template-rows: 9em 3.5em;
     height: 12.5em;
 }
-.modifier-card-size_1 .modifier-card-image-overlay {
+.modifier-card-size_2 .modifier-card-image-overlay {
     font-size: 5em;
 }
-.modifier-card-size_-1 {
+.modifier-card-size_2 .modifier-card-label {
+    font-size: 1.1em;
+}
+.modifier-card-size_1 {
     width: 7em;
     grid-template-rows: 7em 3.5em;
     height: 10.5em;
 }
-.modifier-card-size_-1 .modifier-card-image-overlay {
+.modifier-card-size_1 .modifier-card-image-overlay {
     font-size: 4em;
 }
-.modifier-card-size_-2 {
+.modifier-card-size_-1 {
-    width: 6em;
-    grid-template-rows: 6em 3.5em;
-    height: 9.5em;
-}
-.modifier-card-size_-2 .modifier-card-image-overlay {
-    font-size: 3em;
-}
-.modifier-card-size_-3 {
     width: 5em;
     grid-template-rows: 5em 3.5em;
     height: 8.5em;
 }
-.modifier-card-size_-3 .modifier-card-image-overlay {
+.modifier-card-size_-1 .modifier-card-image-overlay {
     font-size: 3em;
 }
-.modifier-card-size_-3 .modifier-card-label {
+.modifier-card-size_-1 .modifier-card-label {
-    font-size: 0.8em;
+    font-size: 0.9em;
+}
+.modifier-card-size_-2 {
+    width: 4em;
+    grid-template-rows: 3.5em 3em;
+    height: 6.5em;
+}
+.modifier-card-size_-2 .modifier-card-image-overlay {
+    font-size: 2em;
+}
+.modifier-card-size_-2 .modifier-card-label {
+    font-size: 0.7em;
 }
 .modifier-card-tiny {
-    width: 6em;
+    width: 5em;
-    height: 9.5em;
+    grid-template-rows: 5em 3.5em;
-    grid-template-rows: 6em 3.5em;
+    height: 8.5em;
 }
 .modifier-card-tiny .modifier-card-image-overlay {
     font-size: 4em;
 }
+.modifier-card-tiny .modifier-card-label {
+    font-size: 0.9em;
+}
 .modifier-card:hover {
     transform: scale(1.05);
     box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.25);
@@ -115,6 +106,7 @@
 }
 .modifier-card-image-container * {
     position: absolute;
+    text-align: center;
 }
 .modifier-card-container {
     text-align: center;
@@ -131,6 +123,7 @@
 .modifier-card-label {
     padding: 4px;
     word-break: break-word;
+    text-transform: capitalize;
 }
 .modifier-card-image-overlay {
     width: inherit;
@@ -140,7 +133,7 @@
     position: absolute;
     border-radius: 5px 5px 0 0;
     opacity: 0;
-    font-size: 5em;
+    font-size: 4em;
     font-weight: 900;
     color: rgb(255 255 255 / 50%);
     display: flex;
@@ -153,9 +146,8 @@
     position: absolute;
     z-index: 3;
 }
-.modifier-card-overlay:hover ~ .modifier-card-container .modifier-card-label.tooltip .tooltip-text {
+.modifier-card-active .modifier-card-overlay {
-    visibility: visible;
+    background-color: rgb(169 78 241 / 40%);
-    opacity: 1;
 }
 .modifier-card:hover > .modifier-card-image-container .modifier-card-image-overlay {
     opacity: 1;
@@ -167,61 +159,30 @@
     transform: scale(0.95);
     box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.5);
 }
-#preview-image {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-}
 .modifier-card-active {
     border: 2px solid rgb(179 82 255 / 94%);
     box-shadow: 0 0px 10px 0 rgb(170 0 229 / 58%);
 }
-.tooltip {
-    position: relative;
-    display: inline-block;
-}
-.tooltip .tooltip-text {
-    visibility: hidden;
-    width: 120px;
-    background: rgb(101,97,181);
-    background: linear-gradient(180deg, rgba(101,97,181,1) 0%, rgba(47,45,85,1) 100%);
-    color: #fff;
-    text-align: center;
-    border-radius: 6px;
-    padding: 5px;
-    position: absolute;
-    z-index: 1;
-    top: 105%;
-    left: 39%;
-    margin-left: -60px;
-    opacity: 0;
-    transition: opacity 0.3s;
-    border: 2px solid rgb(90 100 177 / 94%);
-    box-shadow: 0px 10px 20px 5px rgb(11 0 58 / 55%);
-    width: 10em;
-}
-.tooltip .tooltip-text::after {
-    content: "";
-    position: absolute;
-    top: -0.9em;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent rgb(90 100 177 / 94%) transparent;
-}
-.tooltip:hover .tooltip-text {
-    visibility: visible;
-    opacity: 1;
-}
 #modifier-card-size-slider {
     width: 6em;
-    margin-bottom: 0.5em;
+    height: 4pt;
     vertical-align: middle;
 }
-#modifier-settings-btn {
-    float: right;
-}
 #modifier-settings-config textarea {
+    margin-left: 5%;
+    margin-top: 2ex;
     width: 90%;
     height: 150px;
 }
+.modifier-card .hidden {
+    display: none;
+}
+.support-long-label .modifier-card-overlay:hover ~ .modifier-card-container .modifier-card-label {
+    font-size: 0.7em;
+}
+.support-long-label .modifier-card-overlay:hover ~ .modifier-card-container .long-label {
+    display: block;
+}
+.support-long-label .modifier-card-overlay:hover ~ .modifier-card-container .regular-label {
+    display: none;
+}

ui/media/css/plugins.css

@@ -0,0 +1,288 @@
+.plugins-table {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.plugins-table > div {
+    background: var(--background-color2);
+    display: flex;
+    padding: 0px 4px;
+}
+
+.plugins-table > div > div {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.plugins-table small {
+    color: rgb(153, 153, 153);
+}
+
+.plugins-table > div > div:nth-child(1) {
+    font-size: 20px;
+    width: 45px;
+}
+
+.plugins-table > div > div:nth-child(2) {
+    flex: 1;
+    flex-direction: column;
+    text-align: left;
+    justify-content: center;
+    align-items: start;
+    gap: 4px;
+}
+
+.plugins-table > div > div:nth-child(3) {
+    text-align: right;
+}
+
+.plugins-table > div:first-child {
+    border-radius: 12px 12px 0px 0px;
+}
+
+.plugins-table > div:last-child {
+    border-radius: 0px 0px 12px 12px;
+}
+
+.notifications-table {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.notifications-table > div {
+    background: var(--background-color2);
+    display: flex;
+    padding: 0px 4px;
+}
+
+.notifications-table > div > div {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.notifications-table small {
+    color: rgb(153, 153, 153);
+}
+
+.notifications-table > div > div:nth-child(1) {
+    flex: 1;
+    flex-direction: column;
+    text-align: left;
+    justify-content: center;
+    align-items: start;
+    gap: 4px;
+}
+
+.notifications-table > div > div:nth-child(2) {
+    width: auto;
+}
+
+.notifications-table > div:first-child {
+    border-radius: 12px 12px 0px 0px;
+}
+
+.notifications-table > div:last-child {
+    border-radius: 0px 0px 12px 12px;
+}
+
+.notification-error {
+    color: red;
+}
+
+DIV.no-notification {
+    padding-top: 16px;
+    font-style: italic;
+}
+
+.plugin-manager-intro {
+    margin: 0 0 16px 0;
+}
+
+#plugin-filter {
+    box-sizing: border-box;
+    width: 100%;
+    margin: 4px 0 6px 0;
+    padding: 10px;
+}
+
+#refresh-plugins {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0px;
+}
+
+#refresh-plugins a {
+    cursor: pointer;
+}
+
+#refresh-plugins a:active {
+    transition-duration: 0.1s;
+    position: relative;
+    top: 1px;
+    left: 1px;
+}
+
+.plugin-installed-locally {
+    font-style: italic;
+    font-size: small;
+}
+
+.plugin-source {
+    font-size: x-small;
+}
+
+.plugin-warning {
+    color: orange;
+    font-size: smaller;
+}
+
+.plugin-warning.hide {
+    display: none;
+}
+
+.plugin-warning ul {
+    list-style: square;
+    margin: 0 0 8px 16px;
+    padding: 0;
+}
+
+.plugin-warning li {
+    margin-left: 8px;
+    padding: 0;
+}
+
+/* MODAL DIALOG */
+#pluginDialog-input-dialog {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+}
+
+.pluginDialog-dialog-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(32, 33, 36, 50%);
+}
+
+.pluginDialog-dialog-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+    max-width: 600px;
+    background: var(--background-color2);
+    border: solid 1px var(--background-color3);
+    border-radius: 6px;
+    box-shadow: 0px 0px 30px black;
+}
+
+.pluginDialog-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+}
+
+.pluginDialog-dialog-header h2 {
+    margin: 0;
+}
+
+.pluginDialog-dialog-close-button {
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 1;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.pluginDialog-dialog-close-button:hover {
+    color: #555;
+}
+
+.pluginDialog-dialog-content {
+    padding: 0 16px 0 16px;
+}
+
+.pluginDialog-dialog-content textarea {
+    width: 100%;
+    height: 300px;
+    border-radius: var(--input-border-radius);
+    padding: 4px;
+    accent-color: var(--accent-color);
+    background: var(--input-background-color);
+    border: var(--input-border-size) solid var(--input-border-color);
+    color: var(--input-text-color);
+    font-size: 9pt;
+    resize: none;
+}
+
+.pluginDialog-dialog-buttons {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16px;
+}
+
+.pluginDialog-dialog-buttons button {
+    margin-left: 8px;
+    padding: 8px 16px;
+    font-size: 16px;
+    border-radius: 4px;
+    /*background: var(--accent-color);*/
+    /*border: var(--primary-button-border);*/
+    /*color: rgb(255, 221, 255);*/
+    background-color: #3071a9;
+    border: none;
+    cursor: pointer;
+}
+
+.pluginDialog-dialog-buttons button:hover {
+    /*background: hsl(var(--accent-hue), 100%, 50%);*/
+    background-color: #428bca;
+}
+
+/* NOTIFICATION CENTER */
+#plugin-notification-button {
+    float: right;
+    margin-top: 30px;
+}
+
+#plugin-notification-button:hover {
+    background: unset;
+}
+
+#plugin-notification-button:active {
+    transition-duration: 0.1s;
+    position: relative;
+    top: 1px;
+    left: 1px;
+}
+
+.plugin-notification-pill {
+    background-color: red;
+    border-radius: 50%;
+    color: white;
+    font-size: 10px;
+    font-weight: bold;
+    height: 12px;
+    line-height: 12px;
+    position: relative;
+    right: -8px;
+    text-align: center;
+    top: -20px;
+    width: 12px;
+}

ui/media/css/themes.css

@@ -13,6 +13,8 @@
     --accent-lightness-hover: 40%;
 
     --text-color: #eee;
+    --link-color: rgb(0, 102, 204);
+    --small-label-color: rgb(153, 153, 153);
 
 	--input-text-color: #eee;
     --input-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.7 * var(--value-step))));
@@ -21,6 +23,9 @@
     --button-text-color: var(--input-text-color);
     --button-color: var(--input-background-color);
     --button-border: none;
+    --button-hover-background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+    --secondary-button-background: rgb(132, 8, 0);
+    --secondary-button-hover-background: rgb(177, 27, 0);
 
     /* other */
     --input-border-radius: 4px;

ui/media/js/auto-save.js

@@ -16,7 +16,6 @@ const SETTINGS_IDS_LIST = [
     "clip_skip",
     "vae_model",
     "hypernetwork_model",
-    "lora_model",
     "sampler_name",
     "width",
     "height",
@@ -24,7 +23,6 @@ const SETTINGS_IDS_LIST = [
     "guidance_scale",
     "prompt_strength",
     "hypernetwork_strength",
-    "lora_alpha",
     "tiling",
     "output_format",
     "output_quality",
@@ -176,13 +174,14 @@ function loadSettings() {
         // So this is likely the first time Easy Diffusion is running.
         // Initialize vram_usage_level based on the available VRAM
         function initGPUProfile(event) {
-            if (    "detail" in event 
+            if (
-                && "active" in event.detail
+                "detail" in event &&
-                && "cuda:0" in event.detail.active
+                "active" in event.detail &&
-                && event.detail.active["cuda:0"].mem_total <4.5 )
+                "cuda:0" in event.detail.active &&
-            {
+                event.detail.active["cuda:0"].mem_total < 4.5
-               vramUsageLevelField.value = "low"
+            ) {
-               vramUsageLevelField.dispatchEvent(new Event("change"))
+                vramUsageLevelField.value = "low"
+                vramUsageLevelField.dispatchEvent(new Event("change"))
             }
             document.removeEventListener("system_info_update", initGPUProfile)
         }

ui/media/js/dnd.js

@@ -292,29 +292,75 @@ const TASK_MAPPING = {
     use_lora_model: {
         name: "LoRA model",
         setUI: (use_lora_model) => {
-            const oldVal = loraModelField.value
+            // create rows
-            use_lora_model =
+            for (let i = loraModels.length; i < use_lora_model.length; i++) {
-                use_lora_model === undefined || use_lora_model === null || use_lora_model === "None"
+                createLoraEntry()
-                    ? ""
-                    : use_lora_model
-
-            if (use_lora_model !== "") {
-                use_lora_model = getModelPath(use_lora_model, [".ckpt", ".safetensors"])
-                use_lora_model = use_lora_model !== "" ? use_lora_model : oldVal
             }
-            loraModelField.value = use_lora_model
+
+            use_lora_model.forEach((model_name, i) => {
+                let field = loraModels[i][0]
+                const oldVal = field.value
+
+                if (model_name !== "") {
+                    model_name = getModelPath(model_name, [".ckpt", ".safetensors"])
+                    model_name = model_name !== "" ? model_name : oldVal
+                }
+                field.value = model_name
+            })
+
+            // clear the remaining entries
+            let container = document.querySelector("#lora_model_container .model_entries")
+            for (let i = use_lora_model.length; i < loraModels.length; i++) {
+                let modelEntry = loraModels[i][2]
+                container.removeChild(modelEntry)
+            }
+
+            loraModels.splice(use_lora_model.length)
+        },
+        readUI: () => {
+            let values = loraModels.map((e) => e[0].value)
+            values = values.filter((e) => e.trim() !== "")
+            values = values.length > 0 ? values : "None"
+            return values
+        },
+        parse: (val) => {
+            val = !val || val === "None" ? "" : val
+            val = Array.isArray(val) ? val : [val]
+            return val
         },
-        readUI: () => loraModelField.value,
-        parse: (val) => val,
     },
     lora_alpha: {
         name: "LoRA Strength",
         setUI: (lora_alpha) => {
-            loraAlphaField.value = lora_alpha
+            for (let i = loraModels.length; i < lora_alpha.length; i++) {
-            updateLoraAlphaSlider()
+                createLoraEntry()
+            }
+
+            lora_alpha.forEach((model_strength, i) => {
+                let field = loraModels[i][1]
+                field.value = model_strength
+            })
+
+            // clear the remaining entries
+            let container = document.querySelector("#lora_model_container .model_entries")
+            for (let i = lora_alpha.length; i < loraModels.length; i++) {
+                let modelEntry = loraModels[i][2]
+                container.removeChild(modelEntry)
+            }
+
+            loraModels.splice(lora_alpha.length)
+        },
+        readUI: () => {
+            let models = loraModels.filter((e) => e[0].value.trim() !== "")
+            let values = models.map((e) => e[1].value)
+            values = values.length > 0 ? values : 0
+            return values
+        },
+        parse: (val) => {
+            val = Array.isArray(val) ? val : [val]
+            val = val.map((e) => parseFloat(e))
+            return val
         },
-        readUI: () => parseFloat(loraAlphaField.value),
-        parse: (val) => parseFloat(val),
     },
     use_hypernetwork_model: {
         name: "Hypernetwork model",
@@ -426,8 +472,11 @@ function restoreTaskToUI(task, fieldsToSkip) {
     }
 
     if (!("use_lora_model" in task.reqBody)) {
-        loraModelField.value = ""
+        loraModels.forEach((e) => {
-        loraModelField.dispatchEvent(new Event("change"))
+            e[0].value = ""
+            e[1].value = 0
+            e[0].dispatchEvent(new Event("change"))
+        })
     }
 
     // restore the original prompt if provided (e.g. use settings), fallback to prompt as needed (e.g. copy/paste or d&d)

ui/media/js/engine.js

@@ -1047,7 +1047,9 @@
         }
     }
     class FilterTask extends Task {
-        constructor(options = {}) {}
+        constructor(options = {}) {
+            super(options)
+        }
         /** Send current task to server.
          * @param {*} [timeout=-1] Optional timeout value in ms
          * @returns the response from the render request.
@@ -1055,9 +1057,27 @@
          */
         async post(timeout = -1) {
             let jsonResponse = await super.post("/filter", timeout)
-            //this._setId(jsonResponse.task)
+            if (typeof jsonResponse?.task !== "number") {
+                console.warn("Endpoint error response: ", jsonResponse)
+                const event = Object.assign({ task: this }, jsonResponse)
+                await eventSource.fireEvent(EVENT_UNEXPECTED_RESPONSE, event)
+                if ("continueWith" in event) {
+                    jsonResponse = await Promise.resolve(event.continueWith)
+                }
+                if (typeof jsonResponse?.task !== "number") {
+                    const err = new Error(jsonResponse?.detail || "Endpoint response does not contains a task ID.")
+                    this.abort(err)
+                    throw err
+                }
+            }
+            this._setId(jsonResponse.task)
+            if (jsonResponse.stream) {
+                this.streamUrl = jsonResponse.stream
+            }
             this._setStatus(TaskStatus.waiting)
+            return jsonResponse
         }
+        checkReqBody() {}
         enqueue(progressCallback) {
             return Task.enqueueNew(this, FilterTask, progressCallback)
         }
@@ -1068,6 +1088,65 @@
             if (this.isStopped) {
                 return
             }
+
+            this._setStatus(TaskStatus.pending)
+            progressCallback?.call(this, { reqBody: this._reqBody })
+            Object.freeze(this._reqBody)
+
+            // Post task request to backend
+            let renderRes = undefined
+            try {
+                renderRes = yield this.post()
+                yield progressCallback?.call(this, { renderResponse: renderRes })
+            } catch (e) {
+                yield progressCallback?.call(this, { detail: e.message })
+                throw e
+            }
+
+            try {
+                // Wait for task to start on server.
+                yield this.waitUntil({
+                    callback: function() {
+                        return progressCallback?.call(this, {})
+                    },
+                    status: TaskStatus.processing,
+                })
+            } catch (e) {
+                this.abort(err)
+                throw e
+            }
+
+            // Task started!
+            // Open the reader.
+            const reader = this.reader
+            const task = this
+            reader.onError = function(response) {
+                if (progressCallback) {
+                    task.abort(new Error(response.statusText))
+                    return progressCallback.call(task, { response, reader })
+                }
+                return Task.prototype.onError.call(task, response)
+            }
+            yield progressCallback?.call(this, { reader })
+
+            //Start streaming the results.
+            const streamGenerator = reader.open()
+            let value = undefined
+            let done = undefined
+            yield progressCallback?.call(this, { stream: streamGenerator })
+            do {
+                ;({ value, done } = yield streamGenerator.next())
+                if (typeof value !== "object") {
+                    continue
+                }
+                if (value.status !== undefined) {
+                    yield progressCallback?.call(this, value)
+                    if (value.status === "succeeded" || value.status === "failed") {
+                        done = true
+                    }
+                }
+            } while (!done)
+            return value
         }
         static start(task, progressCallback) {
             if (typeof task !== "object") {
@@ -1121,13 +1200,13 @@
         return systemInfo.hosts
     }
 
-    async function getModels() {
+    async function getModels(scanForMalicious = true) {
         let models = {
             "stable-diffusion": [],
             vae: [],
         }
         try {
-            const res = await fetch("/get/models")
+            const res = await fetch("/get/models?scan_for_malicious=" + scanForMalicious)
             if (!res.ok) {
                 console.error("Invalid response fetching models", res.statusText)
                 return models

ui/media/js/image-editor.js

@@ -47,6 +47,7 @@ const IMAGE_EDITOR_TOOLS = [
         begin: defaultToolBegin,
         move: defaultToolMove,
         end: defaultToolEnd,
+        hotkey: "d",
     },
     {
         id: "erase",
@@ -77,6 +78,7 @@ const IMAGE_EDITOR_TOOLS = [
         setBrush: (editor, layer) => {
             layer.ctx.globalCompositeOperation = "destination-out"
         },
+        hotkey: "e",
     },
     {
         id: "fill",
@@ -92,6 +94,7 @@ const IMAGE_EDITOR_TOOLS = [
         },
         move: toolDoNothing,
         end: toolDoNothing,
+        hotkey: "f",
     },
     {
         id: "colorpicker",
@@ -113,6 +116,7 @@ const IMAGE_EDITOR_TOOLS = [
         },
         move: toolDoNothing,
         end: toolDoNothing,
+        hotkey: "p",
     },
 ]
 
@@ -208,7 +212,10 @@ var IMAGE_EDITOR_SECTIONS = [
             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)
+            var label_element = document.createElement("div")
+            label_element.classList.add("image-editor-button-label")
+            label_element.textContent=tool_info.name
+            sub_element.appendChild(label_element)
             element.appendChild(sub_element)
         },
     },
@@ -619,6 +626,7 @@ class ImageEditor {
                 .getImageData(0, 0, this.width, this.height)
                 .data.some((channel) => channel !== 0)
             maskSetting.checked = !is_blank
+            maskSetting.dispatchEvent(new Event("change"))
         }
         this.hide()
     }
@@ -702,15 +710,22 @@ class ImageEditor {
                 event.stopPropagation()
                 event.preventDefault()
             }
-            if (event.key == "y" && event.ctrlKey) {
+            else if (event.key == "y" && event.ctrlKey) {
                 this.history.redo()
                 event.stopPropagation()
                 event.preventDefault()
             }
-            if (event.key === "Escape") {
+            else if (event.key === "Escape") {
                 this.hide()
                 event.stopPropagation()
                 event.preventDefault()
+            } else {
+                let toolIndex = IMAGE_EDITOR_TOOLS.findIndex( t => t.hotkey ==event.key )
+                if (toolIndex != -1) {
+                    this.selectOption("tool", toolIndex)
+                    event.stopPropagation()
+                    event.preventDefault()
+                }
             }
         }
 

ui/media/js/image-modifiers.js

@@ -1,48 +1,56 @@
 let activeTags = []
 let modifiers = []
 let customModifiersGroupElement = undefined
-let customModifiersInitialContent
+let customModifiersInitialContent = ""
+let modifierPanelFreezed = false
 
+let modifiersMainContainer = document.querySelector("#editor-modifiers")
+let modifierDropdown = document.querySelector("#image-modifier-dropdown")
+let editorModifiersContainer = document.querySelector("#editor-modifiers")
 let editorModifierEntries = document.querySelector("#editor-modifiers-entries")
 let editorModifierTagsList = document.querySelector("#editor-inputs-tags-list")
 let editorTagsContainer = document.querySelector("#editor-inputs-tags-container")
 let modifierCardSizeSlider = document.querySelector("#modifier-card-size-slider")
 let previewImageField = document.querySelector("#preview-image")
 let modifierSettingsBtn = document.querySelector("#modifier-settings-btn")
-let modifierSettingsOverlay = document.querySelector("#modifier-settings-config")
+let modifiersContainerSizeBtn = document.querySelector("#modifiers-container-size-btn")
+let modifiersCloseBtn = document.querySelector("#modifiers-close-button")
+let modifiersCollapsiblesBtn = document.querySelector("#modifiers-action-collapsibles-btn")
+let modifierSettingsDialog = document.querySelector("#modifier-settings-config")
 let customModifiersTextBox = document.querySelector("#custom-modifiers-input")
-let customModifierEntriesToolbar = document.querySelector("#editor-modifiers-entries-toolbar")
+let customModifierEntriesToolbar = document.querySelector("#editor-modifiers-subheader")
+let modifierSettingsCloseBtn = document.querySelector("#modifier-settings-close-button")
 
 const modifierThumbnailPath = "media/modifier-thumbnails"
 const activeCardClass = "modifier-card-active"
 const CUSTOM_MODIFIERS_KEY = "customModifiers"
 
 function createModifierCard(name, previews, removeBy) {
-    const modifierCard = document.createElement("div")
+    let cardPreviewImageType = previewImageField.value
-    let style = previewImageField.value
-    let styleIndex = style == "portrait" ? 0 : 1
 
+    const modifierCard = document.createElement("div")
     modifierCard.className = "modifier-card"
     modifierCard.innerHTML = `
     <div class="modifier-card-overlay"></div>
     <div class="modifier-card-image-container">
         <div class="modifier-card-image-overlay">+</div>
-        <p class="modifier-card-error-label"></p>
+        <p class="modifier-card-error-label">No Image</p>
         <img onerror="this.remove()" alt="Modifier Image" class="modifier-card-image">
     </div>
     <div class="modifier-card-container">
-        <div class="modifier-card-label"><p></p></div>
+        <div class="modifier-card-label">
+            <span class="long-label hidden"></span>
+            <p class="regular-label"></p>
+        </div>
     </div>`
 
     const image = modifierCard.querySelector(".modifier-card-image")
-    const errorText = modifierCard.querySelector(".modifier-card-error-label")
+    const longLabel = modifierCard.querySelector(".modifier-card-label span.long-label")
-    const label = modifierCard.querySelector(".modifier-card-label")
+    const regularLabel = modifierCard.querySelector(".modifier-card-label p.regular-label")
-
-    errorText.innerText = "No Image"
 
     if (typeof previews == "object") {
-        image.src = previews[styleIndex] // portrait
+        image.src = previews[cardPreviewImageType == "portrait" ? 0 : 1] // 0 index is portrait, 1 landscape
-        image.setAttribute("preview-type", style)
+        image.setAttribute("preview-type", cardPreviewImageType)
     } else {
         image.remove()
     }
@@ -50,24 +58,32 @@ function createModifierCard(name, previews, removeBy) {
     const maxLabelLength = 30
     const cardLabel = removeBy ? name.replace("by ", "") : name
 
-    if (cardLabel.length <= maxLabelLength) {
+    function getFormattedLabel(length) {
-        label.querySelector("p").innerText = cardLabel
+        if (cardLabel?.length <= length) {
-    } else {
+            return cardLabel
-        const tooltipText = document.createElement("span")
+        } else {
-        tooltipText.className = "tooltip-text"
+            return cardLabel.substring(0, length) + "..."
-        tooltipText.innerText = name
+        }
-
-        label.classList.add("tooltip")
-        label.appendChild(tooltipText)
-
-        label.querySelector("p").innerText = cardLabel.substring(0, maxLabelLength) + "..."
     }
-    label.querySelector("p").dataset.fullName = name // preserve the full name
 
+    modifierCard.dataset.fullName = name // preserve the full name
+    regularLabel.dataset.fullName = name // preserve the full name, legacy support for older plugins
+    
+    longLabel.innerText = getFormattedLabel(maxLabelLength * 2)
+    regularLabel.innerText = getFormattedLabel(maxLabelLength)
+
+    if (cardLabel.length > maxLabelLength) {
+        modifierCard.classList.add("support-long-label")
+
+        if (cardLabel.length > maxLabelLength * 2) {
+            modifierCard.title = `"${name}"`
+        }
+    }
+    
     return modifierCard
 }
 
-function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
+function createModifierGroup(modifierGroup, isInitiallyOpen, removeBy) {
     const title = modifierGroup.category
     const modifiers = modifierGroup.modifiers
 
@@ -78,8 +94,8 @@ function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
     const modifiersEl = document.createElement("div")
     modifiersEl.classList.add("collapsible-content", "editor-modifiers-leaf")
 
-    if (initiallyExpanded === true) {
+    if (isInitiallyOpen === true) {
-        titleEl.className += " active"
+        titleEl.classList.add("active")
     }
 
     modifiers.forEach((modObj) => {
@@ -126,7 +142,7 @@ function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
     e.appendChild(titleEl)
     e.appendChild(modifiersEl)
 
-    editorModifierEntries.insertBefore(e, customModifierEntriesToolbar.nextSibling)
+    editorModifierEntries.prepend(e)
 
     return e
 }
@@ -149,7 +165,10 @@ async function loadModifiers() {
             res.reverse()
 
             res.forEach((modifierGroup, idx) => {
-                createModifierGroup(modifierGroup, idx === res.length - 1, modifierGroup === "Artist" ? true : false) // only remove "By " for artists
+                const isInitiallyOpen = false // idx === res.length - 1
+                const removeBy = modifierGroup === "Artist" ? true : false // only remove "By " for artists
+
+                createModifierGroup(modifierGroup, isInitiallyOpen, removeBy) 
             })
 
             createCollapsibles(editorModifierEntries)
@@ -169,7 +188,7 @@ function refreshModifiersState(newTags, inactiveTags) {
         .querySelector("#editor-modifiers")
         .querySelectorAll(".modifier-card")
         .forEach((modifierCard) => {
-            const modifierName = modifierCard.querySelector(".modifier-card-label p").dataset.fullName // pick the full modifier name
+            const modifierName = modifierCard.dataset.fullName // pick the full modifier name
             if (activeTags.map((x) => x.name).includes(modifierName)) {
                 modifierCard.classList.remove(activeCardClass)
                 modifierCard.querySelector(".modifier-card-image-overlay").innerText = "+"
@@ -184,8 +203,9 @@ function refreshModifiersState(newTags, inactiveTags) {
             .querySelector("#editor-modifiers")
             .querySelectorAll(".modifier-card")
             .forEach((modifierCard) => {
-                const modifierName = modifierCard.querySelector(".modifier-card-label p").dataset.fullName
+                const modifierName = modifierCard.dataset.fullName
                 const shortModifierName = modifierCard.querySelector(".modifier-card-label p").innerText
+
                 if (trimModifiers(tag) == trimModifiers(modifierName)) {
                     // add modifier to active array
                     if (!activeTags.map((x) => x.name).includes(tag)) {
@@ -242,10 +262,10 @@ function refreshInactiveTags(inactiveTags) {
     }
 
     // update cards
-    let overlays = document.querySelector("#editor-inputs-tags-list").querySelectorAll(".modifier-card-overlay")
+    let overlays = editorModifierTagsList.querySelectorAll(".modifier-card-overlay")
     overlays.forEach((i) => {
-        let modifierName = i.parentElement.getElementsByClassName("modifier-card-label")[0].getElementsByTagName("p")[0]
+        let modifierName = i.parentElement.dataset.fullName
-            .dataset.fullName
+
         if (inactiveTags?.find((element) => trimModifiers(element) === modifierName) !== undefined) {
             i.parentElement.classList.add("modifier-toggle-inactive")
         }
@@ -262,6 +282,12 @@ function refreshTagsList(inactiveTags) {
         editorTagsContainer.style.display = "block"
     }
 
+    if(activeTags.length > 15) {
+        editorModifierTagsList.style["overflow-y"] = "auto"
+    } else {
+        editorModifierTagsList.style["overflow-y"] = "unset"
+    }
+
     activeTags.forEach((tag, index) => {
         tag.element.querySelector(".modifier-card-image-overlay").innerText = "-"
         tag.element.classList.add("modifier-card-tiny")
@@ -285,48 +311,42 @@ function refreshTagsList(inactiveTags) {
 
     let brk = document.createElement("br")
     brk.style.clear = "both"
+
     editorModifierTagsList.appendChild(brk)
+
     refreshInactiveTags(inactiveTags)
+
     document.dispatchEvent(new Event("refreshImageModifiers")) // notify plugins that the image tags have been refreshed
 }
 
 function toggleCardState(modifierName, makeActive) {
-    document
+    const cards = [...document.querySelectorAll("#editor-modifiers .modifier-card")]
-        .querySelector("#editor-modifiers")
+        .filter(cardElem => trimModifiers(cardElem.dataset.fullName) == trimModifiers(modifierName))
-        .querySelectorAll(".modifier-card")
+
-        .forEach((card) => {
+    const cardExists = typeof cards == "object" && cards?.length > 0
-            const name = card.querySelector(".modifier-card-label").innerText
+
-            if (
+    if (cardExists) {
-                trimModifiers(modifierName) == trimModifiers(name) ||
+        const card = cards[0]
-                trimModifiers(modifierName) == "by " + trimModifiers(name)
+    
-            ) {
+        if (makeActive) {
-                if (makeActive) {
+            card.classList.add(activeCardClass)
-                    card.classList.add(activeCardClass)
+            card.querySelector(".modifier-card-image-overlay").innerText = "-"
-                    card.querySelector(".modifier-card-image-overlay").innerText = "-"
+        } else {
-                } else {
+            card.classList.remove(activeCardClass)
-                    card.classList.remove(activeCardClass)
+            card.querySelector(".modifier-card-image-overlay").innerText = "+"
-                    card.querySelector(".modifier-card-image-overlay").innerText = "+"
+        }
-                }
+    }
-            }
-        })
 }
 
 function changePreviewImages(val) {
     const previewImages = document.querySelectorAll(".modifier-card-image-container img")
 
-    let previewArr = []
+    const previewArr = modifiers.flatMap((x) => x.modifiers.map((m) => m.previews))
-
+        .map((x) => x.reduce((obj, preview) => {
-    modifiers.map((x) => x.modifiers).forEach((x) => previewArr.push(...x.map((m) => m.previews)))
-
-    previewArr = previewArr.map((x) => {
-        let obj = {}
-
-        x.forEach((preview) => {
             obj[preview.name] = preview.path
-        })
 
-        return obj
+            return obj
-    })
+        }, {}))
 
     previewImages.forEach((previewImage) => {
         const currentPreviewType = previewImage.getAttribute("preview-type")
@@ -343,7 +363,7 @@ function changePreviewImages(val) {
                 preview = previews.landscape
             }
 
-            if (preview != null) {
+            if (preview) {
                 previewImage.src = `${modifierThumbnailPath}/${preview}`
                 previewImage.setAttribute("preview-type", val)
             }
@@ -369,34 +389,6 @@ function resizeModifierCards(val) {
     })
 }
 
-modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value)
-previewImageField.onchange = () => changePreviewImages(previewImageField.value)
-
-modifierSettingsBtn.addEventListener("click", function(e) {
-    modifierSettingsOverlay.classList.add("active")
-    customModifiersTextBox.setSelectionRange(0, 0)
-    customModifiersTextBox.focus()
-    customModifiersInitialContent = customModifiersTextBox.value // preserve the initial content
-    e.stopPropagation()
-})
-
-modifierSettingsOverlay.addEventListener("keydown", function(e) {
-    switch (e.key) {
-        case "Escape": // Escape to cancel
-            customModifiersTextBox.value = customModifiersInitialContent // undo the changes
-            modifierSettingsOverlay.classList.remove("active")
-            e.stopPropagation()
-            break
-        case "Enter":
-            if (e.ctrlKey) {
-                // Ctrl+Enter to confirm
-                modifierSettingsOverlay.classList.remove("active")
-                e.stopPropagation()
-                break
-            }
-    }
-})
-
 function saveCustomModifiers() {
     localStorage.setItem(CUSTOM_MODIFIERS_KEY, customModifiersTextBox.value.trim())
 
@@ -407,4 +399,156 @@ function loadCustomModifiers() {
     PLUGINS["MODIFIERS_LOAD"].forEach((fn) => fn.loader.call())
 }
 
+function showModifierContainer() {
+    document.addEventListener("mousedown", checkIfClickedOutsideDropdownElem)
+
+    modifierDropdown.dataset.active = true
+    editorModifiersContainer.classList.add("active")
+}
+
+function hideModifierContainer() {
+    document.removeEventListener("click", checkIfClickedOutsideDropdownElem)
+
+    modifierDropdown.dataset.active = false
+    editorModifiersContainer.classList.remove("active")
+}
+
+function checkIfClickedOutsideDropdownElem(e) {
+    const clickedElement = e.target
+
+    const clickedInsideSpecificElems = [modifierDropdown, editorModifiersContainer, modifierSettingsDialog].some((div) => 
+        div && (div.contains(clickedElement) || div === clickedElement))
+
+    if (!clickedInsideSpecificElems && !modifierPanelFreezed) {
+        hideModifierContainer()
+    }
+}
+
+function collapseAllModifierCategory() {
+    collapseAll(".modifier-category .collapsible")
+}
+
+function expandAllModifierCategory() {
+    expandAll(".modifier-category .collapsible")
+}
+
 customModifiersTextBox.addEventListener("change", saveCustomModifiers)
+
+modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value)
+previewImageField.onchange = () => changePreviewImages(previewImageField.value)
+
+modifierSettingsDialog.addEventListener("keydown", function(e) {
+    switch (e.key) {
+        case "Escape": // Escape to cancel
+            customModifiersTextBox.value = customModifiersInitialContent // undo the changes
+            modifierSettingsDialog.close()
+            e.stopPropagation()
+            break
+        case "Enter":
+            if (e.ctrlKey) {
+                // Ctrl+Enter to confirm
+                modifierSettingsDialog.close()
+                e.stopPropagation()
+                break
+            }
+    }
+})
+
+modifierDropdown.addEventListener("click", e => {
+    const targetElem = e.target
+    const isDropdownActive = targetElem.dataset.active == "true" ? true : false
+
+    if (!isDropdownActive) 
+        showModifierContainer()
+    else
+        hideModifierContainer()
+})
+
+let collapsiblesBtnState = false
+
+modifiersCollapsiblesBtn.addEventListener("click", (e) => {
+    const btnElem = modifiersCollapsiblesBtn
+
+    const collapseText = "Collapse Categories"
+    const expandText = "Expand Categories"
+
+    const collapseIconClasses = ["fa-solid", "fa-square-minus"]
+    const expandIconClasses = ["fa-solid", "fa-square-plus"]
+
+    const iconElem = btnElem.querySelector(".modifiers-action-icon")
+    const textElem = btnElem.querySelector(".modifiers-action-text")
+
+    if (collapsiblesBtnState) {
+        collapseAllModifierCategory()
+
+        collapsiblesBtnState = false
+
+        collapseIconClasses.forEach((c) => iconElem.classList.remove(c))
+        expandIconClasses.forEach((c) => iconElem.classList.add(c))
+
+        textElem.innerText = expandText
+    } else {
+        expandAllModifierCategory()
+
+        collapsiblesBtnState = true
+
+        expandIconClasses.forEach((c) => iconElem.classList.remove(c))
+        collapseIconClasses.forEach((c) => iconElem.classList.add(c))
+
+        textElem.innerText = collapseText
+    }
+})
+
+let containerSizeBtnState = false
+
+modifiersContainerSizeBtn.addEventListener("click", (e) => {
+    const btnElem = modifiersContainerSizeBtn
+
+    const maximizeIconClasses = ["fa-solid", "fa-expand"]
+    const revertIconClasses = ["fa-solid", "fa-compress"]
+
+    modifiersMainContainer.classList.toggle("modifiers-maximized")
+
+    if(containerSizeBtnState) {
+        revertIconClasses.forEach((c) => btnElem.classList.remove(c))
+        maximizeIconClasses.forEach((c) => btnElem.classList.add(c))
+
+        containerSizeBtnState = false
+    } else {
+        maximizeIconClasses.forEach((c) => btnElem.classList.remove(c))
+        revertIconClasses.forEach((c) => btnElem.classList.add(c))
+        
+        containerSizeBtnState = true
+    }
+})
+
+modifierSettingsBtn.addEventListener("click", (e) => {
+    modifierSettingsDialog.showModal()
+    customModifiersTextBox.setSelectionRange(0, 0)
+    customModifiersTextBox.focus()
+    customModifiersInitialContent = customModifiersTextBox.value // preserve the initial content
+    e.stopPropagation()
+})
+
+modifiersCloseBtn.addEventListener("click", (e) => {
+    hideModifierContainer()
+})
+
+// prevents the modifier panel closing at the same time as the settings overlay
+new MutationObserver(() => {
+    const isActive = modifierSettingsDialog.open
+
+    if (!isActive) {
+        modifierPanelFreezed = true
+
+        setTimeout(() => modifierPanelFreezed = false, 25)
+    }
+}).observe(modifierSettingsDialog, { attributes: true })
+
+modifierSettingsCloseBtn.addEventListener("click", (e) => {
+    modifierSettingsDialog.close()    
+})
+
+modalDialogCloseOnBackdropClick(modifierSettingsDialog)
+makeDialogDraggable(modifierSettingsDialog)
+

ui/media/js/parameters.js

@@ -16,6 +16,7 @@ var ParameterType = {
  */
 let parametersTable = document.querySelector("#system-settings-table")
 let networkParametersTable = document.querySelector("#system-settings-network-table")
+let installExtrasTable = document.querySelector("#system-settings-install-extras-table")
 
 /**
  * JSDoc style
@@ -233,14 +234,37 @@ var PARAMETERS = [
         note: `<span id="cloudflare-off">Create a VPN tunnel to share your Easy Diffusion instance with your friends. This will
                generate a web server address on the public Internet for your Easy Diffusion instance. </span>
                <div id="cloudflare-on" class="displayNone"><div>This Easy Diffusion server is available on the Internet using the
-               address:</div><div><div id="cloudflare-address"></div><button id="copy-cloudflare-address">Copy</button></div></div>
+               address:</div><div><input id="cloudflare-address" value="" readonly><button id="copy-cloudflare-address">Copy</button></div></div>
                <b>Anyone knowing this address can access your server.</b> The address of your server will change each time
                you share a session.<br>
                Uses <a href="https://try.cloudflare.com/" target="_blank">Cloudflare services</a>.`,
         icon: ["fa-brands", "fa-cloudflare"],
         render: () => '<button id="toggle-cloudflare-tunnel" class="primaryButton">Start</button>',
         table: networkParametersTable,
-    }
+    },
+    {
+        id: "nvidia_tensorrt",
+        type: ParameterType.custom,
+        label: "NVIDIA TensorRT",
+        note: `Faster image generation by converting your Stable Diffusion models to the NVIDIA TensorRT format. You can choose the
+               models to convert. Download size: approximately 2 GB.<br/><br/>
+               <b>Early access version:</b> support for LoRA is still under development.
+               <div id="trt-build-config" class="displayNone">
+                    <h3>Build Config:</h3>
+                    Batch size range:
+                    <label>Min:</label> <input id="trt-build-min-batch" type="number" min="1" value="1" style="width: 40pt" />
+                    <label>Max:</label> <input id="trt-build-max-batch" type="number" min="1" value="1" style="width: 40pt" /><br/><br/>
+                    <b>Build for resolutions</b>:<br/>
+                    <input id="trt-build-res-512" type="checkbox" value="1" /> 512x512 to 768x768<br/>
+                    <input id="trt-build-res-768" type="checkbox" value="1" checked /> 768x768 to 1024x1024<br/>
+                    <input id="trt-build-res-1024" type="checkbox" value="1" /> 1024x1024 to 1280x1280<br/>
+                    <input id="trt-build-res-1280" type="checkbox" value="1" /> 1280x1280 to 1536x1536<br/>
+                    <input id="trt-build-res-1536" type="checkbox" value="1" /> 1536x1536 to 1792x1792<br/>
+               </div>`,
+        icon: "fa-angles-up",
+        render: () => '<button id="toggle-tensorrt-install" class="primaryButton">Install</button>',
+        table: installExtrasTable,
+    },
 ]
 
 function getParameterSettingsEntry(id) {
@@ -315,7 +339,7 @@ function initParameters(parameters) {
             noteElements.push(noteElement)
         }
 
-        if (typeof(parameter.icon) == "string") {
+        if (typeof parameter.icon == "string") {
             parameter.icon = [parameter.icon]
         }
         const icon = parameter.icon ? [createElement("i", undefined, ["fa", ...parameter.icon])] : []
@@ -342,7 +366,7 @@ function initParameters(parameters) {
         let p = parametersTable
         if (parameter.table) {
             p = parameter.table
-        } 
+        }
         p.appendChild(newrow)
 
         parameter.settingsEntry = newrow
@@ -409,7 +433,7 @@ async function getAppConfig() {
             useBetaChannelField.checked = true
             document.querySelector("#updateBranchLabel").innerText = "(beta)"
         } else {
-            getParameterSettingsEntry("test_diffusers").style.display = "none"
+            getParameterSettingsEntry("test_diffusers").classList.add("displayNone")
         }
         if (config.ui && config.ui.open_browser_on_start === false) {
             uiOpenBrowserOnStartField.checked = false
@@ -424,23 +448,39 @@ async function getAppConfig() {
         const testDiffusersEnabled = config.test_diffusers && config.update_branch !== "main"
         testDiffusers.checked = testDiffusersEnabled
 
+        if (config.config_on_startup) {
+            if (config.config_on_startup?.test_diffusers && config.update_branch !== "main") {
+                document.body.classList.add("diffusers-enabled-on-startup")
+                document.body.classList.remove("diffusers-disabled-on-startup")
+            } else {
+                document.body.classList.add("diffusers-disabled-on-startup")
+                document.body.classList.remove("diffusers-enabled-on-startup")
+            }
+        }
+
         if (!testDiffusersEnabled) {
             document.querySelector("#lora_model_container").style.display = "none"
-            document.querySelector("#lora_alpha_container").style.display = "none"
             document.querySelector("#tiling_container").style.display = "none"
+            document.querySelector("#controlnet_model_container").style.display = "none"
 
             document.querySelectorAll("#sampler_name option.diffusers-only").forEach((option) => {
                 option.style.display = "none"
             })
+            customWidthField.step = 64
+            customHeightField.step = 64
         } else {
             document.querySelector("#lora_model_container").style.display = ""
-            document.querySelector("#lora_alpha_container").style.display = loraModelField.value ? "" : "none"
             document.querySelector("#tiling_container").style.display = ""
+            document.querySelector("#controlnet_model_container").style.display = ""
 
             document.querySelectorAll("#sampler_name option.k_diffusion-only").forEach((option) => {
-                option.disabled = true
+                option.style.display = "none"
             })
             document.querySelector("#clip_skip_config").classList.remove("displayNone")
+            document.querySelector("#embeddings-button").classList.remove("displayNone")
+            document.querySelector("#negative-embeddings-button").classList.remove("displayNone")
+            customWidthField.step = 8
+            customHeightField.step = 8
         }
 
         console.log("get config status response", config)
@@ -572,6 +612,23 @@ function setDeviceInfo(devices) {
     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>")
+
+    // tensorRT
+    if (devices.active && testDiffusers.checked && devices.enable_trt === true) {
+        let nvidiaGPUs = Object.keys(devices.active).filter((d) => {
+            let gpuName = devices.active[d].name
+            gpuName = gpuName.toLowerCase()
+            return (
+                gpuName.includes("nvidia") ||
+                gpuName.includes("geforce") ||
+                gpuName.includes("quadro") ||
+                gpuName.includes("tesla")
+            )
+        })
+        if (nvidiaGPUs.length > 0) {
+            document.querySelector("#install-extras-container").classList.remove("displayNone")
+        }
+    }
 }
 
 function setHostInfo(hosts) {
@@ -664,7 +721,7 @@ saveSettingsBtn.addEventListener("click", function() {
         update_branch: updateBranch,
     }
 
-    document.querySelectorAll('#system-settings [data-setting-id]').forEach((parameterRow) => {
+    document.querySelectorAll("#system-settings [data-setting-id]").forEach((parameterRow) => {
         if (parameterRow.dataset.saveInAppConfig === "true") {
             const parameterElement =
                 document.getElementById(parameterRow.dataset.settingId) ||
@@ -703,20 +760,41 @@ saveSettingsBtn.addEventListener("click", function() {
     Promise.all([savePromise, asyncDelay(300)]).then(() => saveSettingsBtn.classList.remove("active"))
 })
 
-listenToNetworkField.addEventListener("change", debounce( ()=>{
+listenToNetworkField.addEventListener(
-    saveSettingsBtn.click()
+    "change",
-}, 1000))
+    debounce(() => {
+        saveSettingsBtn.click()
+    }, 1000)
+)
 
-listenPortField.addEventListener("change", debounce( ()=>{
+listenPortField.addEventListener(
-    saveSettingsBtn.click()
+    "change",
-}, 1000))
+    debounce(() => {
+        saveSettingsBtn.click()
+    }, 1000)
+)
 
 let copyCloudflareAddressBtn = document.querySelector("#copy-cloudflare-address")
 let cloudflareAddressField = document.getElementById("cloudflare-address")
 
-copyCloudflareAddressBtn.addEventListener("click", (e) => {
+navigator.permissions.query({ name: "clipboard-write" }).then(function(result) {
-    navigator.clipboard.writeText(cloudflareAddressField.innerHTML)
+    if (result.state === "granted") {
-    showToast("Copied server address to clipboard")
+        // you can read from the clipboard
+        copyCloudflareAddressBtn.addEventListener("click", (e) => {
+            navigator.clipboard.writeText(cloudflareAddressField.innerHTML)
+            showToast("Copied server address to clipboard")
+        })
+    } else {
+        copyCloudflareAddressBtn.classList.add("displayNone")
+    }
 })
 
 document.addEventListener("system_info_update", (e) => setDeviceInfo(e.detail))
+
+useBetaChannelField.addEventListener("change", (e) => {
+    if (e.target.checked) {
+        getParameterSettingsEntry("test_diffusers").classList.remove("displayNone")
+    } else {
+        getParameterSettingsEntry("test_diffusers").classList.add("displayNone")
+    }
+})

ui/media/js/plugins.js

@@ -1,5 +1,8 @@
 const PLUGIN_API_VERSION = "1.0"
 
+const PLUGIN_CATALOG = 'https://raw.githubusercontent.com/easydiffusion/easydiffusion-plugins/main/plugins.json'
+const PLUGIN_CATALOG_GITHUB = 'https://github.com/easydiffusion/easydiffusion-plugins/blob/main/plugins.json'
+
 const PLUGINS = {
     /**
      * Register new buttons to show on each output image.
@@ -78,3 +81,950 @@ async function loadUIPlugins() {
         console.log("error fetching plugin paths", e)
     }
 }
+
+
+/* PLUGIN MANAGER */
+/* plugin tab */
+// document.querySelector('.tab-container')?.insertAdjacentHTML('beforeend', `
+//     <span id="tab-plugin" class="tab" style="display: none">
+//         <span><i class="fa fa-puzzle-piece icon"></i> Plugins</span>
+//     </span>
+// `)
+
+// document.querySelector('#tab-content-wrapper')?.insertAdjacentHTML('beforeend', `
+//     <div id="tab-content-plugin" class="tab-content">
+//         <div id="plugin" class="tab-content-inner">
+//             Loading...
+//         </div>
+//     </div>
+// `)
+
+// const tabPlugin = document.querySelector('#tab-plugin')
+// if (tabPlugin) {
+//     linkTabContents(tabPlugin)
+// }
+
+// const plugin = document.querySelector('#plugin')
+// plugin.innerHTML = `
+// <div id="plugin-manager" class="tab-content-inner">
+//     <i id="plugin-notification-button" class="fa-solid fa-message">
+//         <span class="plugin-notification-pill" id="notification-pill" style="display: none"></span>
+//     </i>
+//     <div id="plugin-notification-list" style="display: none">
+//         <h1>Notifications</h1>
+//         <div class="plugin-manager-intro">The latest plugin updates are listed below</div>
+//         <div class="notifications-table"></div>
+//         <div class="no-notification">No new notifications</div>
+//     </div>
+//     <div id="plugin-manager-section">
+//         <h1>Plugin Manager</h1>
+//         <div class="plugin-manager-intro">Changes take effect after reloading the page</div>
+//         <div class="plugins-table"></div>
+//     </div>
+// </div>`
+// const pluginsTable = document.querySelector("#plugin-manager-section .plugins-table")
+// const pluginNotificationTable = document.querySelector("#plugin-notification-list .notifications-table")
+// const pluginNoNotification = document.querySelector("#plugin-notification-list .no-notification")
+
+// /* notification center */
+// const pluginNotificationButton = document.getElementById("plugin-notification-button");
+// const pluginNotificationList = document.getElementById("plugin-notification-list");
+// const notificationPill = document.getElementById("notification-pill");
+// const pluginManagerSection = document.getElementById("plugin-manager-section");
+// let pluginNotifications;
+
+// // Add event listener to show/hide the action center
+// pluginNotificationButton.addEventListener("click", function () {
+//     // Hide the notification pill when the action center is opened
+//     notificationPill.style.display = "none"
+//     pluginNotifications.lastUpdated = Date.now()
+
+//     // save the notifications
+//     setStorageData('notifications', JSON.stringify(pluginNotifications))
+
+//     renderPluginNotifications()
+
+//     if (pluginNotificationList.style.display === "none") {
+//         pluginNotificationList.style.display = "block"
+//         pluginManagerSection.style.display = "none"
+//     } else {
+//         pluginNotificationList.style.display = "none"
+//         pluginManagerSection.style.display = "block"
+//     }
+// })
+
+// document.addEventListener("tabClick", (e) => {
+//     if (e.detail.name == 'plugin') {
+//         pluginNotificationList.style.display = "none"
+//         pluginManagerSection.style.display = "block"
+//     }
+// })
+
+// async function addPluginNotification(pluginNotifications, messageText, error) {
+//     const now = Date.now()
+//     pluginNotifications.entries.unshift({ date: now, text: messageText, error: error }); // add new entry to the beginning of the array
+//     if (pluginNotifications.entries.length > 50) {
+//         pluginNotifications.entries.length = 50 // limit array length to 50 entries
+//     }
+//     pluginNotifications.lastUpdated = now
+//     notificationPill.style.display = "block"
+//     // save the notifications
+//     await setStorageData('notifications', JSON.stringify(pluginNotifications))
+// }
+
+// function timeAgo(inputDate) {
+//     const now = new Date();
+//     const date = new Date(inputDate);
+//     const diffInSeconds = Math.floor((now - date) / 1000);
+//     const units = [
+//         { name: 'year', seconds: 31536000 },
+//         { name: 'month', seconds: 2592000 },
+//         { name: 'week', seconds: 604800 },
+//         { name: 'day', seconds: 86400 },
+//         { name: 'hour', seconds: 3600 },
+//         { name: 'minute', seconds: 60 },
+//         { name: 'second', seconds: 1 }
+//     ];
+
+//     for (const unit of units) {
+//         const unitValue = Math.floor(diffInSeconds / unit.seconds);
+//         if (unitValue > 0) {
+//             return `${unitValue} ${unit.name}${unitValue > 1 ? 's' : ''} ago`;
+//         }
+//     }
+
+//     return 'just now';
+// }
+
+// function convertSeconds(seconds) {
+//     const hours = Math.floor(seconds / 3600);
+//     const minutes = Math.floor((seconds % 3600) / 60);
+//     const remainingSeconds = seconds % 60;
+
+//     let timeParts = [];
+//     if (hours === 1) {
+//         timeParts.push(`${hours} hour`);
+//     } else if (hours > 1) {
+//         timeParts.push(`${hours} hours`);
+//     }
+//     if (minutes === 1) {
+//         timeParts.push(`${minutes} minute`);
+//     } else if (minutes > 1) {
+//         timeParts.push(`${minutes} minutes`);
+//     }
+//     if (remainingSeconds === 1) {
+//         timeParts.push(`${remainingSeconds} second`);
+//     } else if (remainingSeconds > 1) {
+//         timeParts.push(`${remainingSeconds} seconds`);
+//     }
+
+//     return timeParts.join(', and ');
+// }
+
+// function renderPluginNotifications() {
+//     pluginNotificationTable.innerHTML = ''
+
+//     if (pluginNotifications.entries?.length > 0) {
+//         pluginNoNotification.style.display = "none"
+//         pluginNotificationTable.style.display = "block"
+//     }
+//     else {
+//         pluginNoNotification.style.display = "block"
+//         pluginNotificationTable.style.display = "none"
+//     }
+//     for (let i = 0; i < pluginNotifications.entries?.length; i++) {
+//         const date = pluginNotifications.entries[i].date
+//         const text = pluginNotifications.entries[i].text
+//         const error = pluginNotifications.entries[i].error
+//         const newRow = document.createElement('div')
+
+//         newRow.innerHTML = `
+//             <div${error === true ? ' class="notification-error"' : ''}>${text}</div>
+//             <div><small>${timeAgo(date)}</small></div>
+//         `;
+//         pluginNotificationTable.appendChild(newRow)
+//     }
+// }
+
+// /* search box */
+// function filterPlugins() {
+//     let search = pluginFilter.value.toLowerCase();
+//     let searchTerms = search.split(' ');
+//     let labels = pluginsTable.querySelectorAll("label.plugin-name");
+
+//     for (let i = 0; i < labels.length; i++) {
+//         let label = labels[i].innerText.toLowerCase();
+//         let match = true;
+
+//         for (let j = 0; j < searchTerms.length; j++) {
+//             let term = searchTerms[j].trim();
+//             if (term && label.indexOf(term) === -1) {
+//                 match = false;
+//                 break;
+//             }
+//         }
+
+//         if (match) {
+//             labels[i].closest('.plugin-container').style.display = "flex";
+//         } else {
+//             labels[i].closest('.plugin-container').style.display = "none";
+//         }
+//     }
+// }
+
+// // Call debounce function on filterImageModifierList function with 200ms wait time. Thanks JeLuf!
+// const debouncedFilterPlugins = debounce(filterPlugins, 200);
+
+// // add the searchbox
+// pluginsTable.insertAdjacentHTML('beforebegin', `<input type="text" id="plugin-filter" placeholder="Search for..." autocomplete="off"/>`)
+// const pluginFilter = document.getElementById("plugin-filter") // search box
+
+// // Add the debounced function to the keyup event listener
+// pluginFilter.addEventListener('keyup', debouncedFilterPlugins);
+
+// // select the text on focus
+// pluginFilter.addEventListener('focus', function (event) {
+//     pluginFilter.select()
+// });
+
+// // empty the searchbox on escape                
+// pluginFilter.addEventListener('keydown', function (event) {
+//     if (event.key === 'Escape') {
+//         pluginFilter.value = '';
+//         filterPlugins();
+//     }
+// });
+
+// // focus on the search box upon tab selection
+// document.addEventListener("tabClick", (e) => {
+//     if (e.detail.name == 'plugin') {
+//         pluginFilter.focus()
+//     }
+// })
+
+// // refresh link
+// pluginsTable.insertAdjacentHTML('afterend', `<p id="refresh-plugins"><small><a id="refresh-plugins-link">Refresh plugins</a></small></p>
+//     <p><small>(Plugin developers, add your plugins to <a href='${PLUGIN_CATALOG_GITHUB}' target='_blank'>plugins.json</a>)</small></p>`)
+// const refreshPlugins = document.getElementById("refresh-plugins")
+// refreshPlugins.addEventListener("click", async function (event) {
+//     event.preventDefault()
+//     await initPlugins(true)
+// })
+
+// function showPluginToast(message, duration = 5000, error = false, addNotification = true) {
+//     if (addNotification === true) {
+//         addPluginNotification(pluginNotifications, message, error)
+//     }
+//     try {
+//         showToast(message, duration, error)
+//     } catch (error) {
+//         console.error('Error while trying to show toast:', error);
+//     }
+// }
+
+// function matchPluginFileNames(fileName1, fileName2) {
+//     const regex = /^(.+?)(?:-\d+(\.\d+)*)?\.plugin\.js$/;
+//     const match1 = fileName1.match(regex);
+//     const match2 = fileName2.match(regex);
+
+//     if (match1 && match2 && match1[1] === match2[1]) {
+//         return true; // the two file names match
+//     } else {
+//         return false; // the two file names do not match
+//     }
+// }
+
+// function extractFilename(filepath) {
+//     // Normalize the path separators to forward slashes and make the file names lowercase
+//     const normalizedFilePath = filepath.replace(/\\/g, "/").toLowerCase();
+
+//     // Strip off the path from the file name
+//     const fileName = normalizedFilePath.substring(normalizedFilePath.lastIndexOf("/") + 1);
+
+//     return fileName
+// }
+
+// function checkFileNameInArray(paths, filePath) {
+//     // Strip off the path from the file name
+//     const fileName = extractFilename(filePath);
+
+//     // Check if the file name exists in the array of paths
+//     return paths.some(path => {
+//         // Strip off the path from the file name
+//         const baseName = extractFilename(path);
+
+//         // Check if the file names match and return the result as a boolean
+//         return matchPluginFileNames(fileName, baseName);
+//     });
+// }
+
+// function isGitHub(url) {
+//     return url.startsWith("https://raw.githubusercontent.com/") === true
+// }
+
+// /* fill in the plugins table */
+// function getIncompatiblePlugins(pluginId) {
+//     const enabledPlugins = plugins.filter(plugin => plugin.enabled && plugin.id !== pluginId);
+//     const incompatiblePlugins = enabledPlugins.filter(plugin => plugin.compatIssueIds?.includes(pluginId));
+//     const pluginNames = incompatiblePlugins.map(plugin => plugin.name);
+//     if (pluginNames.length === 0) {
+//         return null;
+//     }
+//     const pluginNamesList = pluginNames.map(name => `<li>${name}</li>`).join('');
+//     return `<ul>${pluginNamesList}</ul>`;
+// }
+
+// async function initPluginTable(plugins) {
+//     pluginsTable.innerHTML = ''
+//     plugins.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }))
+//     plugins.forEach(plugin => {
+//         const name = plugin.name
+//         const author = plugin.author ? ', by ' + plugin.author : ''
+//         const version = plugin.version ? ' (version: ' + plugin.version + ')' : ''
+//         const warning = getIncompatiblePlugins(plugin.id) ? `<span class="plugin-warning${plugin.enabled ? '' : ' hide'}">This plugin might conflict with:${getIncompatiblePlugins(plugin.id)}</span>` : ''
+//         const note = plugin.description ? `<small>${plugin.description.replaceAll('\n', '<br>')}</small>` : `<small>No description</small>`;
+//         const icon = plugin.icon ? `<i class="fa ${plugin.icon}"></i>` : '<i class="fa fa-puzzle-piece"></i>';
+//         const newRow = document.createElement('div')
+//         const localPluginFound = checkFileNameInArray(localPlugins, plugin.url)
+
+//         newRow.innerHTML = `
+//             <div>${icon}</div>
+//             <div><label class="plugin-name">${name}${author}${version}</label>${warning}${note}<span class='plugin-source'>Source: <a href="${plugin.url}" target="_blank">${extractFilename(plugin.url)}</a><span></div>
+//             <div>
+//                 ${localPluginFound ? "<span class='plugin-installed-locally'>Installed locally</span>" :
+//                 (plugin.localInstallOnly ? '<span class="plugin-installed-locally">Download and<br />install manually</span>' :
+//                     (isGitHub(plugin.url) ?
+//                         '<input id="plugin-' + plugin.id + '" name="plugin-' + plugin.id + '" type="checkbox">' :
+//                         '<button id="plugin-' + plugin.id + '-install" class="tertiaryButton"></button>'
+//                     )
+//                 )
+//             }
+//             </div>`;
+//         newRow.classList.add('plugin-container')
+//         //console.log(plugin.id, plugin.localInstallOnly)
+//         pluginsTable.appendChild(newRow)
+//         const pluginManualInstall = pluginsTable.querySelector('#plugin-' + plugin.id + '-install')
+//         updateManualInstallButtonCaption()
+
+//         // checkbox event handler
+//         const pluginToggle = pluginsTable.querySelector('#plugin-' + plugin.id)
+//         if (pluginToggle !== null) {
+//             pluginToggle.checked = plugin.enabled // set initial state of checkbox
+//             pluginToggle.addEventListener('change', async () => {
+//                 const container = pluginToggle.closest(".plugin-container");
+//                 const warningElement = container.querySelector(".plugin-warning");
+
+//                 // if the plugin got enabled, download the plugin's code
+//                 plugin.enabled = pluginToggle.checked
+//                 if (plugin.enabled) {
+//                     const pluginSource = await getDocument(plugin.url);
+//                     if (pluginSource !== null) {
+//                         // Store the current scroll position before navigating away
+//                         const currentPosition = window.pageYOffset;
+//                         initPluginTable(plugins)
+//                         // When returning to the page, set the scroll position to the stored value
+//                         window.scrollTo(0, currentPosition);
+//                         warningElement?.classList.remove("hide");
+//                         plugin.code = pluginSource
+//                         loadPlugins([plugin])
+//                         console.log(`Plugin ${plugin.name} installed`);
+//                         showPluginToast("Plugin " + plugin.name + " installed");
+//                     }
+//                     else {
+//                         plugin.enabled = false
+//                         pluginToggle.checked = false
+//                         console.error(`Couldn't download plugin ${plugin.name}`);
+//                         showPluginToast("Failed to install " + plugin.name + " (Couldn't fetch " + extractFilename(plugin.url) + ")", 5000, true);
+//                     }
+//                 } else {
+//                     warningElement?.classList.add("hide");
+//                     // Store the current scroll position before navigating away
+//                     const currentPosition = window.pageYOffset;
+//                     initPluginTable(plugins)
+//                     // When returning to the page, set the scroll position to the stored value
+//                     window.scrollTo(0, currentPosition);
+//                     console.log(`Plugin ${plugin.name} uninstalled`);
+//                     showPluginToast("Plugin " + plugin.name + " uninstalled");
+//                 }
+//                 await setStorageData('plugins', JSON.stringify(plugins))
+//             })
+//         }
+
+//         // manual install event handler
+//         if (pluginManualInstall !== null) {
+//             pluginManualInstall.addEventListener('click', async () => {
+//                 pluginDialogOpenDialog(inputOK, inputCancel)
+//                 pluginDialogTextarea.value = plugin.code ? plugin.code : ''
+//                 pluginDialogTextarea.select()
+//                 pluginDialogTextarea.focus()
+//             })
+//         }
+//         // Dialog OK
+//         async function inputOK() {
+//             let pluginSource = pluginDialogTextarea.value
+//             // remove empty lines and trim existing lines
+//             plugin.code = pluginSource
+//             if (pluginSource.trim() !== '') {
+//                 plugin.enabled = true
+//                 console.log(`Plugin ${plugin.name} installed`);
+//                 showPluginToast("Plugin " + plugin.name + " installed");
+//             }
+//             else {
+//                 plugin.enabled = false
+//                 console.log(`No code provided for plugin ${plugin.name}, disabling the plugin`);
+//                 showPluginToast("No code provided for plugin " + plugin.name + ", disabling the plugin");
+//             }
+//             updateManualInstallButtonCaption()
+//             await setStorageData('plugins', JSON.stringify(plugins))
+//         }
+//         // Dialog Cancel
+//         async function inputCancel() {
+//             plugin.enabled = false
+//             console.log(`Installation of plugin ${plugin.name} cancelled`);
+//             showPluginToast("Cancelled installation of " + plugin.name);
+//         }
+//         // update button caption
+//         function updateManualInstallButtonCaption() {
+//             if (pluginManualInstall !== null) {
+//                 pluginManualInstall.innerHTML = plugin.code === undefined || plugin.code.trim() === '' ? 'Install' : 'Edit'
+//             }
+//         }
+//     })
+//     prettifyInputs(pluginsTable)
+//     filterPlugins()
+// }
+
+// /* version management. Thanks Madrang! */
+// const parseVersion = function (versionString, options = {}) {
+//     if (typeof versionString === "undefined") {
+//         throw new Error("versionString is undefined.");
+//     }
+//     if (typeof versionString !== "string") {
+//         throw new Error("versionString is not a string.");
+//     }
+//     const lexicographical = options && options.lexicographical;
+//     const zeroExtend = options && options.zeroExtend;
+//     let versionParts = versionString.split('.');
+//     function isValidPart(x) {
+//         const re = (lexicographical ? /^\d+[A-Za-z]*$/ : /^\d+$/);
+//         return re.test(x);
+//     }
+
+//     if (!versionParts.every(isValidPart)) {
+//         throw new Error("Version string is invalid.");
+//     }
+
+//     if (zeroExtend) {
+//         while (versionParts.length < 4) {
+//             versionParts.push("0");
+//         }
+//     }
+//     if (!lexicographical) {
+//         versionParts = versionParts.map(Number);
+//     }
+//     return versionParts;
+// };
+
+// const versionCompare = function (v1, v2, options = {}) {
+//     if (typeof v1 == "undefined") {
+//         throw new Error("vi is undefined.");
+//     }
+//     if (typeof v2 === "undefined") {
+//         throw new Error("v2 is undefined.");
+//     }
+
+//     let v1parts;
+//     if (typeof v1 === "string") {
+//         v1parts = parseVersion(v1, options);
+//     } else if (Array.isArray(v1)) {
+//         v1parts = [...v1];
+//         if (!v1parts.every(p => typeof p === "number" && p !== NaN)) {
+//             throw new Error("v1 part array does not only contains numbers.");
+//         }
+//     } else {
+//         throw new Error("v1 is of an unexpected type: " + typeof v1);
+//     }
+
+//     let v2parts;
+//     if (typeof v2 === "string") {
+//         v2parts = parseVersion(v2, options);
+//     } else if (Array.isArray(v2)) {
+//         v2parts = [...v2];
+//         if (!v2parts.every(p => typeof p === "number" && p !== NaN)) {
+//             throw new Error("v2 part array does not only contains numbers.");
+//         }
+//     } else {
+//         throw new Error("v2 is of an unexpected type: " + typeof v2);
+//     }
+
+//     while (v1parts.length < v2parts.length) {
+//         v1parts.push("0");
+//     }
+//     while (v2parts.length < v1parts.length) {
+//         v2parts.push("0");
+//     }
+
+//     for (let i = 0; i < v1parts.length; ++i) {
+//         if (v2parts.length == i) {
+//             return 1;
+//         }
+//         if (v1parts[i] == v2parts[i]) {
+//             continue;
+//         } else if (v1parts[i] > v2parts[i]) {
+//             return 1;
+//         } else {
+//             return -1;
+//         }
+//     }
+//     return 0;
+// };
+
+// function filterPluginsByMinEDVersion(plugins, EDVersion) {
+//     const filteredPlugins = plugins.filter(plugin => {
+//         if (plugin.minEDVersion) {
+//             return versionCompare(plugin.minEDVersion, EDVersion) <= 0;
+//         }
+//         return true;
+//     });
+
+//     return filteredPlugins;
+// }
+
+// function extractVersionNumber(elem) {
+//     const versionStr = elem.innerHTML;
+//     const regex = /v(\d+\.\d+\.\d+)/;
+//     const matches = regex.exec(versionStr);
+//     if (matches && matches.length > 1) {
+//         return matches[1];
+//     } else {
+//         return null;
+//     }
+// }
+// const EasyDiffusionVersion = extractVersionNumber(document.querySelector('#top-nav > #logo'))
+
+// /* PLUGIN MANAGEMENT */
+// let plugins
+// let localPlugins
+// let initPluginsInProgress = false
+
+// async function initPlugins(refreshPlugins = false) {
+//     let pluginsLoaded
+//     if (initPluginsInProgress === true) {
+//         return
+//     }
+//     initPluginsInProgress = true
+
+//     const res = await fetch('/get/ui_plugins')
+//     if (!res.ok) {
+//         console.error(`Error HTTP${res.status} while loading plugins list. - ${res.statusText}`)
+//     }
+//     else {
+//         localPlugins = await res.json()
+//     }
+
+//     if (refreshPlugins === false) {
+//         // load the notifications
+//         pluginNotifications = await getStorageData('notifications')            
+//         if (typeof pluginNotifications === "string") {
+//             try {
+//                 pluginNotifications = JSON.parse(pluginNotifications)
+//             } catch (e) {
+//                 console.error("Failed to parse pluginNotifications", e);
+//                 pluginNotifications = {};
+//                 pluginNotifications.entries = [];
+//             }
+//         }
+//         if (pluginNotifications !== undefined) {
+//             if (pluginNotifications.entries && pluginNotifications.entries.length > 0 && pluginNotifications.entries[0].date && pluginNotifications.lastUpdated <= pluginNotifications.entries[0].date) {
+//                 notificationPill.style.display = "block";
+//             }
+//         } else {
+//             pluginNotifications = {};
+//             pluginNotifications.entries = [];
+//         }
+
+//         // try and load plugins from local cache
+//         plugins = await getStorageData('plugins')
+//         if (plugins !== undefined) {
+//             plugins = JSON.parse(plugins)
+
+//             // remove duplicate entries if any (should not happen)
+//             plugins = deduplicatePluginsById(plugins)
+
+//             // remove plugins that don't meet the min ED version requirement
+//             plugins = filterPluginsByMinEDVersion(plugins, EasyDiffusionVersion)
+
+//             // remove from plugins the entries that don't have mandatory fields (id, name, url)
+//             plugins = plugins.filter((plugin) => { return plugin.id !== '' && plugin.name !== '' && plugin.url !== ''; });
+
+//             // populate the table
+//             initPluginTable(plugins)
+//             await loadPlugins(plugins)
+//             pluginsLoaded = true
+//         }
+//         else {
+//             plugins = []
+//             pluginsLoaded = false
+//         }
+//     }
+
+//     // update plugins asynchronously (updated versions will be available next time the UI is loaded)
+//     if (refreshAllowed()) {
+//         let pluginCatalog = await getDocument(PLUGIN_CATALOG)
+//         if (pluginCatalog !== null) {
+//             let parseError = false;
+//             try {
+//                 pluginCatalog = JSON.parse(pluginCatalog);
+//                 console.log('Plugin catalog successfully downloaded');
+//             } catch (error) {
+//                 console.error('Error parsing plugin catalog:', error);
+//                 parseError = true;
+//             }
+
+//             if (!parseError) {
+//                 await downloadPlugins(pluginCatalog, plugins, refreshPlugins)
+
+//                 // update compatIssueIds
+//                 updateCompatIssueIds()
+
+//                 // remove plugins that don't meet the min ED version requirement
+//                 plugins = filterPluginsByMinEDVersion(plugins, EasyDiffusionVersion)
+
+//                 // remove from plugins the entries that don't have mandatory fields (id, name, url)
+//                 plugins = plugins.filter((plugin) => { return plugin.id !== '' && plugin.name !== '' && plugin.url !== ''; });
+
+//                 // remove from plugins the entries that no longer exist in the catalog
+//                 plugins = plugins.filter((plugin) => { return pluginCatalog.some((p) => p.id === plugin.id) });
+
+//                 if (pluginCatalog.length > plugins.length) {
+//                     const newPlugins = pluginCatalog.filter((plugin) => {
+//                         return !plugins.some((p) => p.id === plugin.id);
+//                     });
+
+//                     newPlugins.forEach((plugin, index) => {
+//                         setTimeout(() => {
+//                             showPluginToast(`New plugin "${plugin.name}" is available.`);
+//                         }, (index + 1) * 1000);
+//                     });
+//                 }
+
+//                 let pluginsJson;
+//                 try {
+//                     pluginsJson = JSON.stringify(plugins); // attempt to parse plugins to JSON
+//                 } catch (error) {
+//                     console.error('Error converting plugins to JSON:', error);
+//                 }
+
+//                 if (pluginsJson) { // only store the data if pluginsJson is not null or undefined
+//                     await setStorageData('plugins', pluginsJson)
+//                 }
+
+//                 // refresh the display of the plugins table
+//                 initPluginTable(plugins)
+//                 if (pluginsLoaded && pluginsLoaded === false) {
+//                     loadPlugins(plugins)
+//                 }
+//             }
+//         }
+//     }
+//     else {
+//         if (refreshPlugins) {
+//             showPluginToast('Plugins have been refreshed recently, refresh will be available in ' + convertSeconds(getTimeUntilNextRefresh()), 5000, true, false)
+//         }
+//     }
+//     initPluginsInProgress = false
+// }
+
+// function updateMetaTagPlugins(plugin) {
+//     // Update the meta tag with the list of loaded plugins
+//     let metaTag = document.querySelector('meta[name="plugins"]');
+//     if (metaTag === null) {
+//         metaTag = document.createElement('meta');
+//         metaTag.name = 'plugins';
+//         document.head.appendChild(metaTag);
+//     }
+//     const pluginArray = [...(metaTag.content ? metaTag.content.split(',') : []), plugin.id];
+//     metaTag.content = pluginArray.join(',');
+// }
+
+// function updateCompatIssueIds() {
+//     // Loop through each plugin
+//     plugins.forEach(plugin => {
+//         // Check if the plugin has `compatIssueIds` property
+//         if (plugin.compatIssueIds !== undefined) {
+//             // Loop through each of the `compatIssueIds`
+//             plugin.compatIssueIds.forEach(issueId => {
+//                 // Find the plugin with the corresponding `issueId`
+//                 const issuePlugin = plugins.find(p => p.id === issueId);
+//                 // If the corresponding plugin is found, initialize its `compatIssueIds` property with an empty array if it's undefined
+//                 if (issuePlugin) {
+//                     if (issuePlugin.compatIssueIds === undefined) {
+//                         issuePlugin.compatIssueIds = [];
+//                     }
+//                     // If the current plugin's ID is not already in the `compatIssueIds` array, add it
+//                     if (!issuePlugin.compatIssueIds.includes(plugin.id)) {
+//                         issuePlugin.compatIssueIds.push(plugin.id);
+//                     }
+//                 }
+//             });
+//         } else {
+//             // If the plugin doesn't have `compatIssueIds` property, initialize it with an empty array
+//             plugin.compatIssueIds = [];
+//         }
+//     });
+// }
+
+// function deduplicatePluginsById(plugins) {
+//     const seenIds = new Set();
+//     const deduplicatedPlugins = [];
+
+//     for (const plugin of plugins) {
+//         if (!seenIds.has(plugin.id)) {
+//             seenIds.add(plugin.id);
+//             deduplicatedPlugins.push(plugin);
+//         } else {
+//             // favor dupes that have enabled == true
+//             const index = deduplicatedPlugins.findIndex(p => p.id === plugin.id);
+//             if (index >= 0) {
+//                 if (plugin.enabled) {
+//                     deduplicatedPlugins[index] = plugin;
+//                 }
+//             }
+//         }
+//     }
+
+//     return deduplicatedPlugins;
+// }
+
+// async function loadPlugins(plugins) {
+//     for (let i = 0; i < plugins.length; i++) {
+//         const plugin = plugins[i];
+//         if (plugin.enabled === true && plugin.localInstallOnly !== true) {
+//             const localPluginFound = checkFileNameInArray(localPlugins, plugin.url);
+//             if (!localPluginFound) {
+//                 try {
+//                     // Indirect eval to work around sloppy plugin implementations
+//                     const indirectEval = { eval };
+//                     console.log("Loading plugin " + plugin.name);
+//                     indirectEval.eval(plugin.code);
+//                     console.log("Plugin " + plugin.name + " loaded");
+//                     await updateMetaTagPlugins(plugin); // add plugin to the meta tag
+//                 } catch (err) {
+//                     showPluginToast("Error loading plugin " + plugin.name + " (" + err.message + ")", null, true);
+//                     console.error("Error loading plugin " + plugin.name + ": " + err.message);
+//                 }
+//             } else {
+//                 console.log("Skipping plugin " + plugin.name + " (installed locally)");
+//             }
+//         }
+//     }
+// }
+
+// async function getFileHash(url) {
+//     const regex = /^https:\/\/raw\.githubusercontent\.com\/(?<owner>[^/]+)\/(?<repo>[^/]+)\/(?<branch>[^/]+)\/(?<filePath>.+)$/;
+//     const match = url.match(regex);
+//     if (!match) {
+//         console.error('Invalid GitHub repository URL.');
+//         return Promise.resolve(null);
+//     }
+//     const owner = match.groups.owner;
+//     const repo = match.groups.repo;
+//     const branch = match.groups.branch;
+//     const filePath = match.groups.filePath;
+//     const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${filePath}?ref=${branch}`;
+
+//     try {
+//         const response = await fetch(apiUrl);
+//         if (!response.ok) {
+//             throw new Error(`HTTP error! status: ${response.status}, url: ${apiUrl}`);
+//         }
+//         const data = await response.json();
+//         return data.sha;
+//     } catch (error) {
+//         console.error('Error fetching data from url:', apiUrl, 'Error:', error);
+//         return null;
+//     }
+// }
+
+// // only allow two refresh per hour
+// function getTimeUntilNextRefresh() {
+//     const lastRuns = JSON.parse(localStorage.getItem('lastRuns') || '[]');
+//     const currentTime = new Date().getTime();
+//     const numRunsLast60Min = lastRuns.filter(run => currentTime - run <= 60 * 60 * 1000).length;
+
+//     if (numRunsLast60Min >= 2) {
+//         return 3600 - Math.round((currentTime - lastRuns[lastRuns.length - 1]) / 1000);
+//     }
+
+//     return 0;
+// }
+
+// function refreshAllowed() {
+//     const timeUntilNextRefresh = getTimeUntilNextRefresh();
+
+//     if (timeUntilNextRefresh > 0) {
+//         console.log(`Next refresh available in ${timeUntilNextRefresh} seconds`);
+//         return false;
+//     }
+
+//     const lastRuns = JSON.parse(localStorage.getItem('lastRuns') || '[]');
+//     const currentTime = new Date().getTime();
+//     lastRuns.push(currentTime);
+//     localStorage.setItem('lastRuns', JSON.stringify(lastRuns));
+//     return true;
+// }
+
+// async function downloadPlugins(pluginCatalog, plugins, refreshPlugins) {
+//     // download the plugins as needed
+//     for (const plugin of pluginCatalog) {
+//         //console.log(plugin.id, plugin.url)
+//         const existingPlugin = plugins.find(p => p.id === plugin.id);
+//         // get the file hash in the GitHub repo
+//         let sha
+//         if (isGitHub(plugin.url) && existingPlugin?.enabled === true) {
+//             sha = await getFileHash(plugin.url)
+//         }
+//         if (plugin.localInstallOnly !== true && isGitHub(plugin.url) && existingPlugin?.enabled === true && (refreshPlugins || (existingPlugin.sha !== undefined && existingPlugin.sha !== null && existingPlugin.sha !== sha) || existingPlugin?.code === undefined)) {
+//             const pluginSource = await getDocument(plugin.url);
+//             if (pluginSource !== null && pluginSource !== existingPlugin.code) {
+//                 console.log(`Plugin ${plugin.name} updated`);
+//                 showPluginToast("Plugin " + plugin.name + " updated", 5000);
+//                 // Update the corresponding plugin
+//                 const updatedPlugin = {
+//                     ...existingPlugin,
+//                     icon: plugin.icon ? plugin.icon : "fa-puzzle-piece",
+//                     id: plugin.id,
+//                     name: plugin.name,
+//                     description: plugin.description,
+//                     url: plugin.url,
+//                     localInstallOnly: Boolean(plugin.localInstallOnly),
+//                     version: plugin.version,
+//                     code: pluginSource,
+//                     author: plugin.author,
+//                     sha: sha,
+//                     compatIssueIds: plugin.compatIssueIds
+//                 };
+//                 // Replace the old plugin in the plugins array
+//                 const pluginIndex = plugins.indexOf(existingPlugin);
+//                 if (pluginIndex >= 0) {
+//                     plugins.splice(pluginIndex, 1, updatedPlugin);
+//                 } else {
+//                     plugins.push(updatedPlugin);
+//                 }
+//             }
+//         }
+//         else if (existingPlugin !== undefined) {
+//             // Update the corresponding plugin's metadata
+//             const updatedPlugin = {
+//                 ...existingPlugin,
+//                 icon: plugin.icon ? plugin.icon : "fa-puzzle-piece",
+//                 id: plugin.id,
+//                 name: plugin.name,
+//                 description: plugin.description,
+//                 url: plugin.url,
+//                 localInstallOnly: Boolean(plugin.localInstallOnly),
+//                 version: plugin.version,
+//                 author: plugin.author,
+//                 compatIssueIds: plugin.compatIssueIds
+//             };
+//             // Replace the old plugin in the plugins array
+//             const pluginIndex = plugins.indexOf(existingPlugin);
+//             plugins.splice(pluginIndex, 1, updatedPlugin);
+//         }
+//         else {
+//             plugins.push(plugin);
+//         }
+//     }
+// }
+
+// async function getDocument(url) {
+//     try {
+//         let response = await fetch(url === PLUGIN_CATALOG ? PLUGIN_CATALOG : url, { cache: "no-cache" });
+//         if (!response.ok) {
+//             throw new Error(`Response error: ${response.status} ${response.statusText}`);
+//         }
+//         let document = await response.text();
+//         return document;
+//     } catch (error) {
+//         showPluginToast("Couldn't fetch " + extractFilename(url) + " (" + error + ")", null, true);
+//         console.error(error);
+//         return null;
+//     }
+// }
+
+// /* MODAL DIALOG */
+// const pluginDialogDialog = document.createElement("div");
+// pluginDialogDialog.id = "pluginDialog-input-dialog";
+// pluginDialogDialog.style.display = "none";
+
+// pluginDialogDialog.innerHTML = `
+//     <div class="pluginDialog-dialog-overlay"></div>
+//     <div class="pluginDialog-dialog-box">
+//         <div class="pluginDialog-dialog-header">
+//             <h2>Paste the plugin's code here</h2>
+//             <button class="pluginDialog-dialog-close-button">&times;</button>
+//         </div>
+//         <div class="pluginDialog-dialog-content">
+//             <textarea id="pluginDialog-input-textarea" spellcheck="false" autocomplete="off"></textarea>
+//         </div>
+//         <div class="pluginDialog-dialog-buttons">
+//             <button id="pluginDialog-input-ok">OK</button>
+//             <button id="pluginDialog-input-cancel">Cancel</button>
+//         </div>
+//     </div>
+// `;
+
+// document.body.appendChild(pluginDialogDialog);
+
+// const pluginDialogOverlay = document.querySelector(".pluginDialog-dialog-overlay");
+// const pluginDialogOkButton = document.getElementById("pluginDialog-input-ok");
+// const pluginDialogCancelButton = document.getElementById("pluginDialog-input-cancel");
+// const pluginDialogCloseButton = document.querySelector(".pluginDialog-dialog-close-button");
+// const pluginDialogTextarea = document.getElementById("pluginDialog-input-textarea");
+// let callbackOK
+// let callbackCancel
+
+// function pluginDialogOpenDialog(inputOK, inputCancel) {
+//     pluginDialogDialog.style.display = "block";
+//     callbackOK = inputOK
+//     callbackCancel = inputCancel
+// }
+
+// function pluginDialogCloseDialog() {
+//     pluginDialogDialog.style.display = "none";
+// }
+
+// function pluginDialogHandleOkClick() {
+//     const userInput = pluginDialogTextarea.value;
+//     // Do something with the user input
+//     callbackOK()
+//     pluginDialogCloseDialog();
+// }
+
+// function pluginDialogHandleCancelClick() {
+//     callbackCancel()
+//     pluginDialogCloseDialog();
+// }
+
+// function pluginDialogHandleOverlayClick(event) {
+//     if (event.target === pluginDialogOverlay) {
+//         pluginDialogCloseDialog();
+//     }
+// }
+
+// function pluginDialogHandleKeyDown(event) {
+//     if ((event.key === "Enter" && event.ctrlKey) || event.key === "Escape") {
+//         event.preventDefault();
+//         if (event.key === "Enter" && event.ctrlKey) {
+//             pluginDialogHandleOkClick();
+//         } else {
+//             pluginDialogCloseDialog();
+//         }
+//     }
+// }
+
+// pluginDialogTextarea.addEventListener("keydown", pluginDialogHandleKeyDown);
+// pluginDialogOkButton.addEventListener("click", pluginDialogHandleOkClick);
+// pluginDialogCancelButton.addEventListener("click", pluginDialogHandleCancelClick);
+// pluginDialogCloseButton.addEventListener("click", pluginDialogCloseDialog);
+// pluginDialogOverlay.addEventListener("click", pluginDialogHandleOverlayClick);

ui/media/js/searchable-models.js

@@ -552,17 +552,23 @@ class ModelDropdown {
                     this.createModelNodeList(`${folderName || ""}/${childFolderName}`, childModels, false)
                 )
             } else {
+                let modelId = model
+                let modelName = model
+                if (typeof model === "object") {
+                    modelId = Object.keys(model)[0]
+                    modelName = model[modelId]
+                }
                 const classes = ["model-file"]
                 if (isRootFolder) {
                     classes.push("in-root-folder")
                 }
                 // Remove the leading slash from the model path
-                const fullPath = folderName ? `${folderName.substring(1)}/${model}` : model
+                const fullPath = folderName ? `${folderName.substring(1)}/${modelId}` : modelId
                 modelsMap.set(
-                    model,
+                    modelId,
                     createElement("li", { "data-path": fullPath }, classes, [
                         createElement("i", undefined, ["fa-regular", "fa-file", "icon"]),
-                        model,
+                        modelName,
                     ])
                 )
             }
@@ -627,9 +633,9 @@ class ModelDropdown {
 }
 
 /* (RE)LOAD THE MODELS */
-async function getModels() {
+async function getModels(scanForMalicious = true) {
     try {
-        modelsCache = await SD.getModels()
+        modelsCache = await SD.getModels(scanForMalicious)
         modelsOptions = modelsCache["options"]
         if ("scan-error" in modelsCache) {
             // let previewPane = document.getElementById('tab-content-wrapper')
@@ -643,22 +649,6 @@ async function getModels() {
             makeImageBtn.disabled = true
         }
 
-        /* This code should no longer be needed. Commenting out for now, will cleanup later.
-        const sd_model_setting_key = "stable_diffusion_model"
-        const vae_model_setting_key = "vae_model"
-        const hypernetwork_model_key = "hypernetwork_model"
-
-        const stableDiffusionOptions = modelsOptions['stable-diffusion']
-        const vaeOptions = modelsOptions['vae']
-        const hypernetworkOptions = modelsOptions['hypernetwork']
-
-        // TODO: set default for model here too
-        SETTINGS[sd_model_setting_key].default = stableDiffusionOptions[0]
-        if (getSetting(sd_model_setting_key) == '' || SETTINGS[sd_model_setting_key].value == '') {
-            setSetting(sd_model_setting_key, stableDiffusionOptions[0])
-        }
-        */
-
         // notify ModelDropdown objects to refresh
         document.dispatchEvent(new Event("refreshModels"))
     } catch (e) {
@@ -667,4 +657,7 @@ async function getModels() {
 }
 
 // reload models button
-document.querySelector("#reload-models").addEventListener("click", getModels)
+document.querySelector("#reload-models").addEventListener("click", (e) => {
+    e.stopPropagation()
+    getModels()
+})

ui/media/js/utils.js

@@ -129,6 +129,31 @@ function tryLoadOldCollapsibles() {
     return null
 }
 
+function collapseAll(selector) {
+    const collapsibleElems = document.querySelectorAll(selector); // needs to have ";"
+
+    [...collapsibleElems].forEach((elem) => {
+        const isActive =  elem.classList.contains("active")
+
+        if(isActive) {
+            elem?.click()
+        }
+    })
+}
+
+function expandAll(selector) {
+    const collapsibleElems = document.querySelectorAll(selector); // needs to have ";"
+
+    [...collapsibleElems].forEach((elem) => {
+        const isActive =  elem.classList.contains("active")
+
+        if (!isActive) {
+            elem?.click()
+        }
+    })
+}
+
+
 function permute(arr) {
     let permutations = []
     let n = arr.length
@@ -153,6 +178,10 @@ function permute(arr) {
     return permutations
 }
 
+function permuteNumber(arr) {
+    return Math.pow(2, arr.length)
+}
+
 // https://stackoverflow.com/a/8212878
 function millisecondsToStr(milliseconds) {
     function numberEnding(number) {
@@ -841,6 +870,7 @@ function createTab(request) {
     })
 }
 
+
 /* TOAST NOTIFICATIONS */
 function showToast(message, duration = 5000, error = false) {
     const toast = document.createElement("div")
@@ -923,3 +953,207 @@ function confirm(msg, title, fn) {
         },
     })
 }
+
+
+/* STORAGE MANAGEMENT */
+// Request persistent storage
+async function requestPersistentStorage() {
+    if (navigator.storage && navigator.storage.persist) {
+        const isPersisted = await navigator.storage.persist();
+        console.log(`Persisted storage granted: ${isPersisted}`);
+    }
+}
+requestPersistentStorage()
+
+// Open a database
+async function openDB() {
+    return new Promise((resolve, reject) => {
+        let request = indexedDB.open("EasyDiffusionSettingsDatabase", 1);
+        request.addEventListener("upgradeneeded", function () {
+            let db = request.result;
+            db.createObjectStore("EasyDiffusionSettings", { keyPath: "id" });
+        });
+        request.addEventListener("success", function () {
+            resolve(request.result);
+        });
+        request.addEventListener("error", function () {
+            reject(request.error);
+        });
+    });
+}
+
+// Function to write data to the object store
+async function setStorageData(key, value) {
+    return openDB().then(db => {
+        let tx = db.transaction("EasyDiffusionSettings", "readwrite");
+        let store = tx.objectStore("EasyDiffusionSettings");
+        let data = { id: key, value: value };
+        return new Promise((resolve, reject) => {
+            let request = store.put(data);
+            request.addEventListener("success", function () {
+                resolve(request.result);
+            });
+            request.addEventListener("error", function () {
+                reject(request.error);
+            });
+        });
+    });
+}
+
+// Function to retrieve data from the object store
+async function getStorageData(key) {
+    return openDB().then(db => {
+        let tx = db.transaction("EasyDiffusionSettings", "readonly");
+        let store = tx.objectStore("EasyDiffusionSettings");
+        return new Promise((resolve, reject) => {
+            let request = store.get(key);
+            request.addEventListener("success", function () {
+                if (request.result) {
+                    resolve(request.result.value);
+                } else {
+                    // entry not found
+                    resolve();
+                }
+            });
+            request.addEventListener("error", function () {
+                reject(request.error);
+            });
+        });
+    });
+}
+
+function insertAtCursor(field, text) {
+    if (field.selectionStart || field.selectionStart == "0") {
+        var startPos = field.selectionStart
+        var endPos = field.selectionEnd
+        var before = field.value.substring(0, startPos)
+        var after = field.value.substring(endPos, field.value.length)
+
+        if (!before.endsWith(" ")) { before += " " }
+        if (!after.startsWith(" ")) { after = " "+after }
+
+        field.value = before + text + after
+    } else {
+        field.value += text
+    }
+}
+
+// indexedDB debug functions
+async function getAllKeys() {
+    return openDB().then(db => {
+        let tx = db.transaction("EasyDiffusionSettings", "readonly");
+        let store = tx.objectStore("EasyDiffusionSettings");
+        let keys = [];
+        return new Promise((resolve, reject) => {
+            store.openCursor().onsuccess = function (event) {
+                let cursor = event.target.result;
+                if (cursor) {
+                    keys.push(cursor.key);
+                    cursor.continue();
+                } else {
+                    resolve(keys);
+                }
+            };
+        });
+    });
+}
+
+async function logAllStorageKeys() {
+    try {
+        let keys = await getAllKeys();
+        console.log("All keys:", keys);
+        for (const k of keys) {
+            console.log(k, await getStorageData(k))
+        }
+    } catch (error) {
+        console.error("Error retrieving keys:", error);
+    }
+}
+
+// USE WITH CARE - THIS MAY DELETE ALL ENTRIES
+async function deleteKeys(keyToDelete) {
+    let confirmationMessage = keyToDelete
+        ? `This will delete the template with key "${keyToDelete}". Continue?`
+        : "This will delete ALL templates. Continue?";
+    if (confirm(confirmationMessage)) {
+        return openDB().then(db => {
+            let tx = db.transaction("EasyDiffusionSettings", "readwrite");
+            let store = tx.objectStore("EasyDiffusionSettings");
+            return new Promise((resolve, reject) => {
+                store.openCursor().onsuccess = function (event) {
+                    let cursor = event.target.result;
+                    if (cursor) {
+                        if (!keyToDelete || cursor.key === keyToDelete) {
+                            cursor.delete();
+                        }
+                        cursor.continue();
+                    } else {
+                        // refresh the dropdown and resolve
+                        resolve();
+                    }
+                };
+            });
+        });
+    }
+}
+
+function modalDialogCloseOnBackdropClick(dialog) {
+    dialog.addEventListener('mousedown', function (event) {
+        // Firefox creates an event with clientX|Y = 0|0 when choosing an <option>.
+        // Test whether the element interacted with is a child of the dialog, but not the
+        // dialog itself (the backdrop would be a part of the dialog)
+        if (dialog.contains(event.target) && dialog != event.target) {
+            return
+        }
+        var rect = dialog.getBoundingClientRect()
+        var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
+          && rect.left <= event.clientX && event.clientX <= rect.left + rect.width)
+        if (!isInDialog) {
+            dialog.close()
+        }
+    })
+}
+
+function makeDialogDraggable(element) {
+    element.querySelector(".dialog-header").addEventListener('mousedown', (function() {
+        let deltaX=0
+        let deltaY=0
+        let dragStartX=0
+        let dragStartY=0
+        let oldTop=0
+        let oldLeft=0
+
+        function dlgDragStart(e) {
+            e = e || window.event;
+            const d = e.target.closest("dialog")
+            e.preventDefault();
+            dragStartX = e.clientX;
+            dragStartY = e.clientY;
+            oldTop = parseInt(d.style.top)
+            oldLeft = parseInt(d.style.left)
+            if (isNaN(oldTop)) { oldTop=0 }
+            if (isNaN(oldLeft)) { oldLeft=0 }
+            document.addEventListener('mouseup', dlgDragClose);
+            document.addEventListener('mousemove', dlgDrag);
+        }
+
+        function dlgDragClose(e) {
+            document.removeEventListener('mouseup', dlgDragClose);
+            document.removeEventListener('mousemove', dlgDrag);
+        }
+
+        function dlgDrag(e) {
+            e = e || window.event;
+            const d = e.target.closest("dialog")
+            e.preventDefault();
+            deltaX = dragStartX - e.clientX;
+            deltaY = dragStartY - e.clientY;
+            d.style.left = `${oldLeft-2*deltaX}px`
+            d.style.top  = `${oldTop-2*deltaY}px`
+        }
+
+        return dlgDragStart
+    })() )
+}
+
+

ui/plugins/ui/lora-prompt-parser.plugin.js

@@ -0,0 +1,114 @@
+/*
+    LoRA Prompt Parser 1.0
+    by Patrice
+
+    Copying and pasting a prompt with a LoRA tag will automatically select the corresponding option in the Easy Diffusion dropdown and remove the LoRA tag from the prompt. The LoRA must be already available in the corresponding Easy Diffusion dropdown (this is not a LoRA downloader).
+*/
+(function() {
+    "use strict"
+    
+    promptField.addEventListener('input', function(e) {
+        const { LoRA, prompt } = extractLoraTags(e.target.value);
+		//console.log('e.target: ' + JSON.stringify(LoRA));
+    
+        if (LoRA !== null && LoRA.length > 0) {
+            promptField.value = prompt.replace(/,+$/, ''); // remove any trailing ,
+    
+            if (testDiffusers?.checked === false) {
+                showToast("LoRA's are only supported with diffusers. Just stripping the LoRA tag from the prompt.")
+            }
+        }
+                                 
+        if (LoRA !== null && LoRA.length > 0 && testDiffusers?.checked) {
+            for (let i = 0; i < LoRA.length; i++) {
+            //if (loraModelField.value !== LoRA[0].lora_model) {
+                // Set the new LoRA value
+				//console.log("Loading info");
+				//console.log(LoRA[0].lora_model_0);
+				//console.log(JSON.stringify(LoRa));
+				
+                let lora = `lora_model_${i}`;
+                let alpha = `lora_alpha_${i}`;
+                let loramodel = document.getElementById(lora);
+                let alphavalue = document.getElementById(alpha);
+				loramodel.setAttribute("data-path", LoRA[i].lora_model_0);
+                loramodel.value = LoRA[i].lora_model_0;
+                alphavalue.value = LoRA[i].lora_alpha_0;
+                if (i != LoRA.length - 1)
+                    createLoraEntry();
+            }
+                //loraAlphaSlider.value = loraAlphaField.value * 100;
+                //TBD.value = LoRA[0].blockweights; // block weights not supported by ED at this time
+            //}
+            showToast("Prompt successfully processed", LoRA[0].lora_model_0);
+			//console.log('LoRa: ' + LoRA[0].lora_model_0);
+			//showToast("Prompt successfully processed", lora_model_0.value);
+			
+        }
+            
+        //promptField.dispatchEvent(new Event('change'));
+    });
+    
+    function isModelAvailable(array, searchString) {
+        const foundItem = array.find(function(item) {
+            item = item.toString().toLowerCase();
+            return item === searchString.toLowerCase()
+        });
+
+        return foundItem || "";
+    }
+
+    // extract LoRA tags from strings
+    function extractLoraTags(prompt) {
+        // Define the regular expression for the tags
+        const regex = /<(?:lora|lyco):([^:>]+)(?::([^:>]*))?(?::([^:>]*))?>/gi
+
+        // Initialize an array to hold the matches
+        let matches = []
+
+        // Iterate over the string, finding matches
+        for (const match of prompt.matchAll(regex)) {
+            const modelFileName = isModelAvailable(modelsCache.options.lora, match[1].trim())
+            if (modelFileName !== "") {
+                // Initialize an object to hold a match
+                let loraTag = {
+                    lora_model_0: modelFileName,
+                }
+				//console.log("Model:" +  modelFileName);
+        
+                // If weight is provided, add it to the loraTag object
+                if (match[2] !== undefined && match[2] !== '') {
+                    loraTag.lora_alpha_0 = parseFloat(match[2].trim())
+                }
+                else
+                {
+                    loraTag.lora_alpha_0 = 0.5
+                }
+				
+        
+                // If blockweights are provided, add them to the loraTag object
+                if (match[3] !== undefined && match[3] !== '') {
+                    loraTag.blockweights = match[3].trim()
+                }
+        
+                // Add the loraTag object to the array of matches
+                matches.push(loraTag);
+				//console.log(JSON.stringify(matches));
+            }
+            else
+            {
+                showToast("LoRA not found: " + match[1].trim(), 5000, true)            
+            }
+        }
+
+        // Clean up the prompt string, e.g. from "apple, banana, <lora:...>, orange, <lora:...>  , pear <lora:...>, <lora:...>" to "apple, banana, orange, pear"
+        let cleanedPrompt = prompt.replace(regex, '').replace(/(\s*,\s*(?=\s*,|$))|(^\s*,\s*)|\s+/g, ' ').trim();
+		//console.log('Matches: ' + JSON.stringify(matches));
+
+        // Return the array of matches and cleaned prompt string
+        return {
+            LoRA: matches,
+            prompt: cleanedPrompt
+        }
+    }
+})()

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

@@ -4,7 +4,7 @@
         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`
+                    `https://raw.githubusercontent.com/easydiffusion/easydiffusion/main/CHANGES.md`
                 )
                 expect(releaseNotes.status).toBe(200)
             })
@@ -36,7 +36,7 @@
                 const updateBranch = appConfig.update_branch || "main"
 
                 let releaseNotes = await fetch(
-                    `https://raw.githubusercontent.com/cmdr2/stable-diffusion-ui/${updateBranch}/CHANGES.md`
+                    `https://raw.githubusercontent.com/easydiffusion/easydiffusion/${updateBranch}/CHANGES.md`
                 )
                 if (!releaseNotes.ok) {
                     console.error("[release-notes] Failed to get CHANGES.md.")

ui/plugins/ui/tiled-image-download.plugin.js

@@ -30,7 +30,15 @@
     // ---- Add HTML
     document.getElementById('container').lastElementChild.insertAdjacentHTML("afterend",
         `<dialog id="download-tiled-image-dialog">
-            <h1>Download tiled image</h1>
+           <div class="dialog-header">
+               <div class="dialog-header-left">
+                   <h4>Download tiled image</h4>
+                   <span>Generate a larger image from this tile</span>
+               </div>
+               <div id="download-header-right">
+                   <i id="downnload-tiled-close-button" class="fa-solid fa-xmark fa-lg"></i>
+               </div>
+           </div>
             <div class="download-tiled-image dtim-container">
                 <div class="download-tiled-image-top">
                     <div class="tab-container">
@@ -130,30 +138,13 @@
 
     // ---- Close popup
     document.getElementById("dti-cancel").addEventListener("click", (e) => downloadTiledImageDialog.close())
-    downloadTiledImageDialog.addEventListener('click', function (event) {
+    document.getElementById("downnload-tiled-close-button").addEventListener("click", (e) => downloadTiledImageDialog.close())
-        var rect = downloadTiledImageDialog.getBoundingClientRect();
+    modalDialogCloseOnBackdropClick(downloadTiledImageDialog)
-        var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
+    makeDialogDraggable(downloadTiledImageDialog)
-          && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
-        if (!isInDialog) {
-            downloadTiledImageDialog.close();
-        }
-    });
 
     // ---- Stylesheet
     const styleSheet = document.createElement("style")
     styleSheet.textContent = `
-        dialog {
-          background: var(--background-color2);
-          color: var(--text-color);
-          border-radius: 7px;
-          border: 1px solid var(--background-color3);
-        }
-
-        dialog::backdrop {
-          background: rgba(0, 0, 0, 0.5);
-        }
-
-
         button[disabled] {
           opacity: 0.5;
         }