How to run

Unset PYTHONHOME

.github/FUNDING.yml

@@ -1,3 +1,3 @@
 # These are supported funding model platforms
 
-ko_fi: cmdr2_stablediffusion_ui
+ko_fi: easydiffusion

.gitignore

@@ -3,3 +3,4 @@ installer
 installer.tar
 dist
 .idea/*
+node_modules/*

.prettierignore

@@ -0,0 +1,9 @@
+*.min.*
+*.py
+*.json
+*.html
+/*
+!/ui
+/ui/easydiffusion
+!/ui/plugins
+!/ui/media

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "semi": false,
+    "arrowParens": "always",
+    "trailingComma": "es5"
+}

CHANGES.md

@@ -1,24 +1,135 @@
 # What's new?
 
+## v3.0
+### Major Changes
+- **ControlNet** - Full support for ControlNet, with native integration of the common ControlNet models. Just select a control image, then choose the ControlNet filter/model and run. No additional configuration or download necessary. Supports custom ControlNets as well.
+- **SDXL** - Full support for SDXL. No configuration necessary, just put the SDXL model in the `models/stable-diffusion` folder.
+- **Multiple LoRAs** - Use multiple LoRAs, including SDXL and SD2-compatible LoRAs. Put them in the `models/lora` folder.
+- **Embeddings** - Use textual inversion embeddings easily, by putting them in the `models/embeddings` folder and using their names in the prompt (or by clicking the `+ Embeddings` button to select embeddings visually). Thanks @JeLuf.
+- **Seamless Tiling** - Generate repeating textures that can be useful for games and other art projects. Works best in 512x512 resolution. Thanks @JeLuf.
+- **Inpainting Models** - Full support for inpainting models, including custom inpainting models. No configuration (or yaml files) necessary.
+- **Faster than v2.5** - Nearly 40% faster than Easy Diffusion v2.5, and can be even faster if you enable xFormers.
+- **Even less VRAM usage** - Less than 2 GB for 512x512 images on 'low' VRAM usage setting (SD 1.5). Can generate large images with SDXL.
+- **WebP images** - Supports saving images in the lossless webp format.
+- **Undo/Redo in the UI** - Remove tasks or images from the queue easily, and undo the action if you removed anything accidentally. Thanks @JeLuf.
+- **Three new samplers, and latent upscaler** - Added `DEIS`, `DDPM` and `DPM++ 2m SDE` as additional samplers. Thanks @ogmaresca and @rbertus2000.
+- **Significantly faster 'Upscale' and 'Fix Faces' buttons on the images**
+- **Major rewrite of the code** - We've switched to using diffusers under-the-hood, which allows us to release new features faster, and focus on making the UI and installer even easier to use.
+
+### Detailed changelog
+* 3.0.2 - 29 Aug 2023 - Fixed incorrect matching of embeddings from prompts.
+* 3.0.2 - 24 Aug 2023 - Fix broken seamless tiling.
+* 3.0.2 - 23 Aug 2023 - Fix styling on mobile devices.
+* 3.0.2 - 22 Aug 2023 - Full support for inpainting models, including custom models. Support SD 1.x and SD 2.x inpainting models. Does not require you to specify a yaml config file.
+* 3.0.2 - 22 Aug 2023 - Reduce VRAM consumption of controlnet in 'low' VRAM mode, and allow accelerating controlnets using xformers.
+* 3.0.2 - 22 Aug 2023 - Improve auto-detection of SD 2.0 and 2.1 models, removing the need for custom yaml files for SD 2.x models. Improve the model load time by speeding-up the black image test.
+* 3.0.1 - 18 Aug 2023 - Rotate an image if EXIF rotation is present. For e.g. this is common in images taken with a smartphone.
+* 3.0.1 - 18 Aug 2023 - Resize control images to the task dimensions, to avoid memory errors with high-res control images.
+* 3.0.1 - 18 Aug 2023 - Show controlnet filter preview in the task entry.
+* 3.0.1 - 18 Aug 2023 - Fix drag-and-drop and 'Use these Settings' for LoRA and ControlNet.
+* 3.0.1 - 18 Aug 2023 - Auto-save LoRA models and strengths.
+* 3.0.1 - 17 Aug 2023 - Automatically use the correct yaml config file for custom SDXL models, even if a yaml file isn't present in the folder.
+* 3.0.1 - 17 Aug 2023 - Fix broken embeddings with SDXL.
+* 3.0.1 - 16 Aug 2023 - Fix broken LoRA with SDXL.
+* 3.0.1 - 15 Aug 2023 - Fix broken seamless tiling.
+* 3.0.1 - 15 Aug 2023 - Fix textual inversion embeddings not working in `low` VRAM usage mode.
+* 3.0.1 - 15 Aug 2023 - Fix for custom VAEs not working in `low` VRAM usage mode.
+* 3.0.1 - 14 Aug 2023 - Slider to change the image dimensions proportionally (in Image Settings). Thanks @JeLuf.
+* 3.0.1 - 14 Aug 2023 - Show an error to the user if an embedding isn't compatible with the model, instead of failing silently without informing the user. Thanks @JeLuf.
+* 3.0.1 - 14 Aug 2023 - Disable watermarking for SDXL img2img. Thanks @AvidGameFan.
+* 3.0.0 - 3 Aug 2023 - Enabled diffusers for everyone by default. The old v2 engine can be used by disabling the "Use v3 engine" option in the Settings tab.
+
 ## v2.5
 ### Major Changes
-- **Nearly twice as fast** - significantly faster speed of image generation. We're now pretty close to automatic1111's speed. Code contributions are welcome to make our project even faster: https://github.com/easydiffusion/sdkit/#is-it-fast
+- **Nearly twice as fast** - significantly faster speed of image generation. Code contributions are welcome to make our project even faster: https://github.com/easydiffusion/sdkit/#is-it-fast
+- **Mac M1/M2 support** - Experimental support for Mac M1/M2. Thanks @michaelgallacher, @JeLuf and vishae.
+- **AMD support for Linux** - Experimental support for AMD GPUs on Linux. Thanks @DianaNites and @JeLuf.
 - **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.
-- **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
+- **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/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.
-- **Save metadata as JSON** - You can now save the metadata files as either text or json files (choose in the Settings tab).
+- **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/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.
 
 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.
+* 2.5.41 - 20 Jun 2023 - Automatically fix black images if fp32 attention precision is required in diffusers.
+* 2.5.41 - 19 Jun 2023 - Another fix for multi-gpu rendering (in all VRAM usage modes).
+* 2.5.41 - 13 Jun 2023 - Fix multi-gpu bug with "low" VRAM usage mode while generating images.
+* 2.5.41 - 12 Jun 2023 - Fix multi-gpu bug with CodeFormer.
+* 2.5.41 - 6 Jun 2023 - Allow changing the strength of CodeFormer, and slightly improved styling of the CodeFormer options.
+* 2.5.41 - 5 Jun 2023 - Allow sharing an Easy Diffusion instance via https://try.cloudflare.com/ . You can find this option at the bottom of the Settings tab. Thanks @JeLuf.
+* 2.5.41 - 5 Jun 2023 - Show an option to download for tiled images. Shows a button on the generated image. Creates larger images by tiling them with the image generated by Easy Diffusion. Thanks @JeLuf.
+* 2.5.41 - 5 Jun 2023 - (beta-only) Allow LoRA strengths between -2 and 2. Thanks @ogmaresca.
+* 2.5.40 - 5 Jun 2023 - Reduce the VRAM usage of Latent Upscaling when using "balanced" VRAM usage mode.
+* 2.5.40 - 5 Jun 2023 - Fix the "realesrgan" key error when using CodeFormer with more than 1 image in a batch.
+* 2.5.40 - 3 Jun 2023 - Added CodeFormer as another option for fixing faces and eyes. CodeFormer tends to perform better than GFPGAN for many images. Thanks @patriceac for the implementation, and for contacting the CodeFormer team (who were supportive of it being integrated into Easy Diffusion).
+* 2.5.39 - 25 May 2023 - (beta-only) Seamless Tiling - make seamlessly tiled images, e.g. rock and grass textures. Thanks @JeLuf.
+* 2.5.38 - 24 May 2023 - Better reporting of errors, and show an explanation if the user cannot disable the "Use CPU" setting.
+* 2.5.38 - 23 May 2023 - Add Latent Upscaler as another option for upscaling images. Thanks @JeLuf for the implementation of the Latent Upscaler model.
+* 2.5.37 - 19 May 2023 - (beta-only) Two more samplers: DDPM and DEIS. Also disables the samplers that aren't working yet in the Diffusers version. Thanks @ogmaresca.
+* 2.5.37 - 19 May 2023 - (beta-only) Support CLIP-Skip. You can set this option under the models dropdown. Thanks @JeLuf.
+* 2.5.37 - 19 May 2023 - (beta-only) More VRAM optimizations for all modes in diffusers. The VRAM usage for diffusers in "low" and "balanced" should now be equal or less than the non-diffusers version. Performs softmax in half precision, like sdkit does.
+* 2.5.36 - 16 May 2023 - (beta-only) More VRAM optimizations for "balanced" VRAM usage mode.
+* 2.5.36 - 11 May 2023 - (beta-only) More VRAM optimizations for "low" VRAM usage mode.
+* 2.5.36 - 10 May 2023 - (beta-only) Bug fix for "meta" error when using a LoRA in 'low' VRAM usage mode.
+* 2.5.35 - 8 May 2023 - Allow dragging a zoomed-in image (after opening an image with the "expand" button). Thanks @ogmaresca.
+* 2.5.35 - 3 May 2023 - (beta-only) First round of VRAM Optimizations for the "Test Diffusers" version. This change significantly reduces the amount of VRAM used by the diffusers version during image generation. The VRAM usage is still not equal to the "non-diffusers" version, but more optimizations are coming soon.
+* 2.5.34 - 22 Apr 2023 - Don't start the browser in an incognito new profile (on Windows). Thanks @JeLuf.
+* 2.5.33 - 21 Apr 2023 - Install PyTorch 2.0 on new installations (on Windows and Linux).
+* 2.5.32 - 19 Apr 2023 - Automatically check for black images, and set full-precision if necessary (for attn). This means custom models based on Stable Diffusion v2.1 will just work, without needing special command-line arguments or editing of yaml config files.
+* 2.5.32 - 18 Apr 2023 - Automatic support for AMD graphics cards on Linux. Thanks @DianaNites and @JeLuf.
+* 2.5.31 - 10 Apr 2023 - Reduce VRAM usage while upscaling.
+* 2.5.31 - 6 Apr 2023 - Allow seeds upto `4,294,967,295`. Thanks @ogmaresca.
+* 2.5.31 - 6 Apr 2023 - Buttons to show the previous/next image in the image popup. Thanks @ogmaresca.
+* 2.5.30 - 5 Apr 2023 - Fix a bug where the JPEG image quality wasn't being respected when embedding the metadata into it. Thanks @JeLuf.
+* 2.5.30 - 1 Apr 2023 - (beta-only) Slider to control the strength of the LoRA model.
+* 2.5.30 - 28 Mar 2023 - Refactor task entry config to use a generating method. Added ability for plugins to easily add to this. Removed confusing sentence from `contributing.md`
+* 2.5.30 - 28 Mar 2023 - Allow the user to undo the deletion of tasks or images, instead of showing a pop-up each time. The new `Undo` button will be present at the top of the UI. Thanks @JeLuf.
+* 2.5.30 - 28 Mar 2023 - Support saving lossless WEBP images. Thanks @ogmaresca.
+* 2.5.30 - 28 Mar 2023 - Lots of bug fixes for the UI (Read LoRA flag in metadata files, new prompt weight format with scrollwheel, fix overflow with lots of tabs, clear button in image editor, shorter filenames in download). Thanks @patriceac, @JeLuf and @ogmaresca.
+* 2.5.29 - 27 Mar 2023 - (beta-only) Fix a bug where some non-square images would fail while inpainting with a `The size of tensor a must match size of tensor b` error.
+* 2.5.29 - 27 Mar 2023 - (beta-only) Fix the `incorrect number of channels` error, when given a PNG image with an alpha channel in `Test Diffusers`.
+* 2.5.29 - 27 Mar 2023 - (beta-only) Fix broken inpainting in `Test Diffusers`.
+* 2.5.28 - 24 Mar 2023 - (beta-only) Support for weighted prompts and long prompt lengths (not limited to 77 tokens). This change requires enabling the `Test Diffusers` setting in beta (in the Settings tab), and restarting the program.
+* 2.5.27 - 21 Mar 2023 - (beta-only) LoRA support, accessible by enabling the `Test Diffusers` setting (in the Settings tab in the UI). This change switches the internal engine to diffusers (if the `Test Diffusers` setting is enabled). If the `Test Diffusers` flag is disabled, it'll have no impact for the user.
+* 2.5.26 - 15 Mar 2023 - Allow styling the buttons displayed on an image. Update the API to allow multiple buttons and text labels in a single row. Thanks @ogmaresca.
+* 2.5.26 - 15 Mar 2023 - View images in full-screen, by either clicking on the image, or clicking the "Full screen" icon next to the Seed number on the image. Thanks @ogmaresca for the internal API.
+* 2.5.25 - 14 Mar 2023 - Button to download all the images, and all the metadata as a zip file. This is available at the top of the UI, as well as on each image. Thanks @JeLuf.
+* 2.5.25 - 14 Mar 2023 - Lots of UI tweaks and bug fixes. Thanks @patriceac and @JeLuf.
+* 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/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.
@@ -43,7 +154,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.
@@ -72,8 +183,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
-- **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
+- **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/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`)
@@ -42,8 +42,6 @@ or for Windows
 10) Congrats, now any changes you make in your repo `ui` folder are linked to this running archive of the app and can be previewed in the browser.
 11) Please update CHANGES.md in your pull requests.
 
-Check the `ui/frontend/build/README.md` for instructions on running and building the React code.
-
 ## Development environment for Installer changes
 Build the Windows installer using Windows, and the Linux installer using Linux. Don't mix the two, and don't use WSL. An Ubuntu VM is fine for building the Linux installer on a Windows host.
 

How to install and run.txt

@@ -1,24 +1,24 @@
-Congrats on downloading Stable Diffusion UI, version 2!
+Congrats on downloading Easy Diffusion, version 3!
 
-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 Easy Diffusion yet, please download from https://github.com/easydiffusion/easydiffusion#installation
 
 After downloading, to install please follow these instructions:
 
 For Windows:
-- Please double-click the "Start Stable Diffusion UI.cmd" file inside the "stable-diffusion-ui" folder.
+- Please double-click the "Easy-Diffusion-Windows.exe" file and follow the instructions.
 
-For Linux:
-- Please open a terminal, and go to the "stable-diffusion-ui" directory. Then run ./start.sh
+For Linux and Mac:
+- Please open a terminal, and go to the "easy-diffusion" directory. Then run ./start.sh
 
-That file will automatically install everything. After that it will start the Stable Diffusion interface in a web browser.
+That file will automatically install everything. After that it will start the Easy Diffusion interface in a web browser.
 
-To start the UI in the future, please run the same command mentioned above.
+To start Easy Diffusion 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)
+cmdr2 (and contributors to the project)

NSIS/.gitignore

@@ -0,0 +1 @@
+*.exe

NSIS/nsisconf.nsh

@@ -0,0 +1 @@
+!define EXISTING_INSTALLATION_DIR "D:\path\to\installed\easy-diffusion"

NSIS/sdui.nsi

@@ -1,20 +1,24 @@
 ; Script generated by the HM NIS Edit Script Wizard.
 
-Target x86-unicode
+Target amd64-unicode
 Unicode True
-!AddPluginDir /x86-unicode "."
+SetCompressor /FINAL lzma
+RequestExecutionLevel user
+!AddPluginDir /amd64-unicode "."
 ; HM NIS Edit Wizard helper defines
-!define PRODUCT_NAME "Stable Diffusion UI"
-!define PRODUCT_VERSION "Installer 2.35"
+!define PRODUCT_NAME "Easy Diffusion"
+!define PRODUCT_VERSION "2.5"
 !define PRODUCT_PUBLISHER "cmdr2 and contributors"
 !define PRODUCT_WEB_SITE "https://stable-diffusion-ui.github.io"
-!define PRODUCT_DIR_REGKEY "Software\Microsoft\Cmdr2\App Paths\installer.exe"
+!define PRODUCT_DIR_REGKEY "Software\Microsoft\Easy Diffusion\App Paths\installer.exe"
 
 ; MUI 1.67 compatible ------
 !include "MUI.nsh"
 !include "LogicLib.nsh"
 !include "nsDialogs.nsh"
 
+!include "nsisconf.nsh"
+
 Var Dialog
 Var Label
 Var Button
@@ -106,7 +110,7 @@ Function DirectoryLeave
    StrCpy $5 $INSTDIR 3
    System::Call 'Kernel32::GetVolumeInformation(t "$5",t,i ${NSIS_MAX_STRLEN},*i,*i,*i,t.r1,i ${NSIS_MAX_STRLEN})i.r0'
    ${If} $0 <> 0
-   ${AndIf} $1 == "NTFS"
+   ${AndIf} $1 != "NTFS"
        MessageBox mb_ok "$5 has filesystem type '$1'.$\nOnly NTFS filesystems are supported.$\nPlease choose a different drive."
        Abort
    ${EndIf}
@@ -140,7 +144,7 @@ Function MediaPackDialog
 	Abort
     ${EndIf}
 
-    ${NSD_CreateLabel} 0 0 100% 48u "The Windows Media Feature Pack is missing on this computer. It is required for the Stable Diffusion UI.$\nYou can continue the installation after installing the Windows Media Feature Pack."
+    ${NSD_CreateLabel} 0 0 100% 48u "The Windows Media Feature Pack is missing on this computer. It is required for Easy Diffusion.$\nYou can continue the installation after installing the Windows Media Feature Pack."
     Pop $Label
  	
     ${NSD_CreateButton} 10% 49u 80% 12u "Download Meda Feature Pack from Microsoft"
@@ -153,16 +157,20 @@ Function MediaPackDialog
     nsDialogs::Show
 FunctionEnd
 
+Function FinishPageAction
+CreateShortCut "$DESKTOP\Easy Diffusion.lnk" "$INSTDIR\Start Stable Diffusion UI.cmd" "" "$INSTDIR\installer_files\cyborg_flower_girl.ico"
+FunctionEnd
+
 ;---------------------------------------------------------------------------------------------------------
 ; MUI Settings
 ;---------------------------------------------------------------------------------------------------------
 !define MUI_ABORTWARNING
-!define MUI_ICON "sd.ico"
+!define MUI_ICON "cyborg_flower_girl.ico"
 
-!define MUI_WELCOMEFINISHPAGE_BITMAP "astro.bmp"
+!define MUI_WELCOMEFINISHPAGE_BITMAP "cyborg_flower_girl.bmp"
 
 ; Welcome page
-!define MUI_WELCOMEPAGE_TEXT "This installer will guide you through the installation of Stable Diffusion UI.$\n$\n\
+!define MUI_WELCOMEPAGE_TEXT "This installer will guide you through the installation of Easy Diffusion.$\n$\n\
 Click Next to continue."
 !insertmacro MUI_PAGE_WELCOME
 Page custom MediaPackDialog
@@ -178,6 +186,11 @@ Page custom MediaPackDialog
 !insertmacro MUI_PAGE_INSTFILES 
 
 ; Finish page
+!define MUI_FINISHPAGE_SHOWREADME ""
+!define MUI_FINISHPAGE_SHOWREADME_NOTCHECKED
+!define MUI_FINISHPAGE_SHOWREADME_TEXT "Create Desktop Shortcut"
+!define MUI_FINISHPAGE_SHOWREADME_FUNCTION FinishPageAction
+
 !define MUI_FINISHPAGE_RUN "$INSTDIR\Start Stable Diffusion UI.cmd"
 !insertmacro MUI_PAGE_FINISH
 
@@ -188,8 +201,8 @@ Page custom MediaPackDialog
 ;---------------------------------------------------------------------------------------------------------
 
 Name "${PRODUCT_NAME} ${PRODUCT_VERSION}"
-OutFile "Install Stable Diffusion UI.exe"
-InstallDir "C:\Stable-Diffusion-UI\"
+OutFile "Install Easy Diffusion.exe"
+InstallDir "C:\EasyDiffusion\"
 InstallDirRegKey HKLM "${PRODUCT_DIR_REGKEY}" ""
 ShowInstDetails show
 
@@ -200,15 +213,42 @@ Section "MainSection" SEC01
   File "..\CreativeML Open RAIL-M License"
   File "..\How to install and run.txt"
   File "..\LICENSE"
-  File "..\Start Stable Diffusion UI.cmd"
+  File "..\scripts\Start Stable Diffusion UI.cmd"
+  File /r "${EXISTING_INSTALLATION_DIR}\installer_files"
+  File /r "${EXISTING_INSTALLATION_DIR}\profile"
+  File /r "${EXISTING_INSTALLATION_DIR}\sd-ui-files"
+  SetOutPath "$INSTDIR\installer_files"
+  File "cyborg_flower_girl.ico"
   SetOutPath "$INSTDIR\scripts"
-  File "..\scripts\bootstrap.bat"
-  File "..\scripts\install_status.txt"
+  File "${EXISTING_INSTALLATION_DIR}\scripts\install_status.txt"
   File "..\scripts\on_env_start.bat"
   File "C:\windows\system32\curl.exe"
-  CreateDirectory "$INSTDIR\profile"
-  CreateDirectory "$SMPROGRAMS\Stable Diffusion UI"
-  CreateShortCut "$SMPROGRAMS\Stable Diffusion UI\Start Stable Diffusion UI.lnk" "$INSTDIR\Start Stable Diffusion UI.cmd"
+  CreateDirectory "$INSTDIR\models"
+  CreateDirectory "$INSTDIR\models\stable-diffusion"
+  CreateDirectory "$INSTDIR\models\gfpgan"
+  CreateDirectory "$INSTDIR\models\realesrgan"
+  CreateDirectory "$INSTDIR\models\vae"
+  CreateDirectory "$SMPROGRAMS\Easy Diffusion"
+  CreateShortCut "$SMPROGRAMS\Easy Diffusion\Easy Diffusion.lnk" "$INSTDIR\Start Stable Diffusion UI.cmd" "" "$INSTDIR\installer_files\cyborg_flower_girl.ico"
+
+  DetailPrint 'Downloading the Stable Diffusion 1.4 model...'
+  NScurl::http get "https://huggingface.co/CompVis/stable-diffusion-v-1-4-original/resolve/main/sd-v1-4.ckpt" "$INSTDIR\models\stable-diffusion\sd-v1-4.ckpt" /CANCEL /INSIST /END
+
+  DetailPrint 'Downloading the GFPGAN model...'
+  NScurl::http get "https://github.com/TencentARC/GFPGAN/releases/download/v1.3.4/GFPGANv1.4.pth" "$INSTDIR\models\gfpgan\GFPGANv1.4.pth" /CANCEL /INSIST /END
+
+  DetailPrint 'Downloading the RealESRGAN_x4plus model...'
+  NScurl::http get "https://github.com/xinntao/Real-ESRGAN/releases/download/v0.1.0/RealESRGAN_x4plus.pth" "$INSTDIR\models\realesrgan\RealESRGAN_x4plus.pth" /CANCEL /INSIST /END
+
+  DetailPrint 'Downloading the RealESRGAN_x4plus_anime model...'
+  NScurl::http get "https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.2.4/RealESRGAN_x4plus_anime_6B.pth" "$INSTDIR\models\realesrgan\RealESRGAN_x4plus_anime_6B.pth" /CANCEL /INSIST /END
+
+  DetailPrint 'Downloading the default VAE (sd-vae-ft-mse-original) model...'
+  NScurl::http get "https://huggingface.co/stabilityai/sd-vae-ft-mse-original/resolve/main/vae-ft-mse-840000-ema-pruned.ckpt" "$INSTDIR\models\vae\vae-ft-mse-840000-ema-pruned.ckpt" /CANCEL /INSIST /END
+
+  DetailPrint 'Downloading the CLIP model (clip-vit-large-patch14)...'
+  NScurl::http get "https://huggingface.co/openai/clip-vit-large-patch14/resolve/8d052a0f05efbaefbc9e8786ba291cfdf93e5bff/pytorch_model.bin" "$INSTDIR\profile\.cache\huggingface\hub\models--openai--clip-vit-large-patch14\snapshots\8d052a0f05efbaefbc9e8786ba291cfdf93e5bff\pytorch_model.bin" /CANCEL /INSIST /END
+
 SectionEnd
 
 ;---------------------------------------------------------------------------------------------------------
@@ -254,7 +294,7 @@ Function .onInit
 
    ${If} $4 < "8000"
       MessageBox MB_OK|MB_ICONEXCLAMATION "Warning!$\n$\nYour system has less than 8GB of memory (RAM).$\n$\n\
-You can still try to install Stable Diffusion UI,$\nbut it might have problems to start, or run$\nvery slowly."
+You can still try to install Easy Diffusion,$\nbut it might have problems to start, or run$\nvery slowly."
    ${EndIf}
   
 FunctionEnd

PRIVACY.md

@@ -0,0 +1,9 @@
+// placeholder until a more formal and legal-sounding privacy policy document is written. but the information below is true.
+
+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/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

@@ -1,39 +1,51 @@
-# Easy Diffusion 2.5
-### The easiest way to install and use [Stable Diffusion](https://github.com/CompVis/stable-diffusion) on your own computer.
+# Easy Diffusion 3.0
+### The easiest way to install and use [Stable Diffusion](https://github.com/CompVis/stable-diffusion) on your computer.
 
 Does not require technical knowledge, does not require pre-installed software. 1-click install, powerful features, friendly community.
 
-[Installation guide](#step-1-download-and-extract-the-installer) | [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)
+---
+![262597678-11089485-2514-4a11-88fb-c3acc81fc9ec](https://github.com/easydiffusion/easydiffusion/assets/844287/050b5e15-e909-45bf-8162-a38234830e38)
 
-# Step 1: Download and extract the installer
+
+# Installation
 Click the download button for your operating system:
 
 <p float="left">
-  <a href="https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.5.15/stable-diffusion-ui-windows.zip"><img src="https://github.com/cmdr2/stable-diffusion-ui/raw/main/media/download-win.png" width="200" /></a>
-  <a href="https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.5.15/stable-diffusion-ui-linux.zip"><img src="https://github.com/cmdr2/stable-diffusion-ui/raw/main/media/download-linux.png" width="200" /></a>
+  <a href="https://github.com/cmdr2/stable-diffusion-ui/releases/latest/download/Easy-Diffusion-Linux.zip"><img src="https://github.com/cmdr2/stable-diffusion-ui/raw/main/media/download-linux.png" width="200" /></a>
+  <a href="https://github.com/cmdr2/stable-diffusion-ui/releases/latest/download/Easy-Diffusion-Mac.zip"><img src="https://github.com/cmdr2/stable-diffusion-ui/raw/main/media/download-mac.png" width="200" /></a>
+  <a href="https://github.com/cmdr2/stable-diffusion-ui/releases/latest/download/Easy-Diffusion-Windows.exe"><img src="https://github.com/cmdr2/stable-diffusion-ui/raw/main/media/download-win.png" width="200" /></a>
 </p>
 
-## On Windows:
-1. Unzip/extract the folder `stable-diffusion-ui` which should be in your downloads folder, unless you changed your default downloads destination.
-2. Move the `stable-diffusion-ui` folder to your `C:` drive (or any other drive like `D:`, at the top root level). `C:\stable-diffusion-ui` or `D:\stable-diffusion-ui` as examples. This will avoid a common problem with Windows (file path length limits).
-## On Linux:
-1. Unzip/extract the folder `stable-diffusion-ui` which should be in your downloads folder, unless you changed your default downloads destination.
-2. Open a terminal window, and navigate to the `stable-diffusion-ui` directory.
+**Hardware requirements:**
+- **Windows:** NVIDIA graphics card¹ (minimum 2 GB RAM), or run on your CPU.
+- **Linux:** NVIDIA¹ or AMD² graphics card (minimum 2 GB RAM), or run on your CPU.
+- **Mac:** M1 or M2, or run on your CPU.
+- Minimum 8 GB of system RAM.
+- Atleast 25 GB of space on the hard disk.
 
-# Step 2: Run the program
-## On Windows: 
-Double-click `Start Stable Diffusion UI.cmd`.
-If Windows SmartScreen prevents you from running the program click `More info` and then `Run anyway`.
-## On Linux: 
-Run `./start.sh` (or `bash start.sh`) in a terminal.
+¹) [CUDA Compute capability](https://en.wikipedia.org/wiki/CUDA#GPUs_supported) level of 3.7 or higher required.
+
+²) ROCm 5.2 support required.
 
 The installer will take care of whatever is needed. If you face any problems, you can join the friendly [Discord community](https://discord.com/invite/u9yhsFmEkB) and ask for assistance.
 
-# Step 3: There is no Step 3. It's that simple!
+## On Windows:
+1. Run the downloaded `Easy-Diffusion-Windows.exe` file.
+2. Run `Easy Diffusion` once the installation finishes. You can also start from your Start Menu, or from your desktop (if you created a shortcut).
 
-**To Uninstall:** Just delete the `stable-diffusion-ui` folder to uninstall all the downloaded packages.
+If Windows SmartScreen prevents you from running the program click `More info` and then `Run anyway`.
+
+**Tip:** On Windows 10, please install at the top level in your drive, e.g. `C:\EasyDiffusion` or `D:\EasyDiffusion`. This will avoid a common problem with Windows 10 (file path length limits).
+
+## On Linux/Mac:
+1. Unzip/extract the folder `easy-diffusion` which should be in your downloads folder, unless you changed your default downloads destination.
+2. Open a terminal window, and navigate to the `easy-diffusion` directory.
+3. Run `./start.sh` (or `bash start.sh`) in a terminal.
+
+# To remove/uninstall:
+Just delete the `EasyDiffusion` folder to uninstall all the downloaded packages.
 
 ----
 
@@ -52,18 +64,21 @@ The installer will take care of whatever is needed. If you face any problems, yo
 - **UI Themes**: Customize the program to your liking.
 - **Searchable models dropdown**: organize your models into sub-folders, and search through them in the UI.
 
-### Image generation
-- **Supports**: "*Text to Image*" and "*Image to Image*".
-- **19 Samplers**: `ddim`, `plms`, `heun`, `euler`, `euler_a`, `dpm2`, `dpm2_a`, `lms`, `dpm_solver_stability`, `dpmpp_2s_a`, `dpmpp_2m`, `dpmpp_sde`, `dpm_fast`, `dpm_adaptive`, `unipc_snr`, `unipc_tu`, `unipc_tq`, `unipc_snr_2`, `unipc_tu_2`.
-- **In-Painting**: Specify areas of your image to paint into.
+### Powerful image generation
+- **Supports**: "*Text to Image*", "*Image to Image*" and "*InPainting*"
+- **ControlNet**: For advanced control over the image, e.g. by setting the pose or drawing the outline for the AI to fill in.
+- **16 Samplers**: `PLMS`, `DDIM`, `DEIS`, `Heun`, `Euler`, `Euler Ancestral`, `DPM2`, `DPM2 Ancestral`, `LMS`, `DPM Solver`, `DPM++ 2s Ancestral`, `DPM++ 2m`, `DPM++ 2m SDE`, `DPM++ SDE`, `DDPM`, `UniPC`.
+- **Stable Diffusion XL and 2.1**: Generate higher-quality images using the latest Stable Diffusion XL models.
+- **Textual Inversion Embeddings**: For guiding the AI strongly towards a particular concept.
 - **Simple Drawing Tool**: Draw basic images to guide the AI, without needing an external drawing program.
 - **Face Correction (GFPGAN)**
 - **Upscaling (RealESRGAN)**
-- **Loopback**: Use the output image as the input image for the next img2img task.
+- **Loopback**: Use the output image as the input image for the next image task.
 - **Negative Prompt**: Specify aspects of the image to *remove*.
-- **Attention/Emphasis**: () in the prompt increases the model's attention to enclosed words, and [] decreases it.
-- **Weighted Prompts**: Use weights for specific words in your prompt to change their importance, e.g. `red:2.4 dragon:1.2`.
+- **Attention/Emphasis**: `+` in the prompt increases the model's attention to enclosed words, and `-` decreases it. E.g. `apple++ falling from a tree`.
+- **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*.
@@ -71,16 +86,17 @@ The installer will take care of whatever is needed. If you face any problems, yo
 
 ### Advanced features
 - **Custom Models**: Use your own `.ckpt` or `.safetensors` file, by placing it inside the `models/stable-diffusion` folder!
-- **Stable Diffusion 2.1 support**
+- **Stable Diffusion XL and 2.1 support**
 - **Merge Models**
 - **Use custom VAE models**
-- **Use pre-trained Hypernetworks**
+- **Textual Inversion Embeddings**
+- **ControlNet**
 - **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.
-- **Low Memory Usage**: Create 512x512 images with less than 3 GB of GPU RAM, and 768x768 images with less than 4 GB of GPU RAM!
+- **Low Memory Usage**: Create 512x512 images with less than 2 GB of GPU RAM, and 768x768 images with less than 3 GB of GPU RAM!
 - **Use CPU setting**: If you don't have a compatible graphics card, but still want to run it on your CPU.
 - **Multi-GPU support**: Automatically spreads your tasks across multiple GPUs (if available), for faster performance!
 - **Auto scan for malicious models**: Uses picklescan to prevent malicious models.
@@ -92,47 +108,32 @@ The installer will take care of whatever is needed. If you face any problems, yo
 
 ----
 
-## Easy for new users:
-![Screenshot of the initial UI](https://user-images.githubusercontent.com/844287/217043152-29454d15-0387-4228-b70d-9a4b84aeb8ba.png)
-
-
-## Powerful features for advanced users:
-![Screenshot of advanced settings](https://user-images.githubusercontent.com/844287/217042588-fc53c975-bacd-4a9c-af88-37408734ade3.png)
-
-
-## Live Preview
-Useful for judging (and stopping) an image quickly, without waiting for it to finish rendering.
-
-![live-512](https://user-images.githubusercontent.com/844287/192097249-729a0a1e-a677-485e-9ccc-16a9e848fabe.gif)
+## Easy for new users, powerful features for advanced users:
+![image](https://github.com/easydiffusion/easydiffusion/assets/844287/efbbac9f-42ce-4aef-8625-fd23c74a8241)
 
 ## Task Queue
 ![Screenshot of task queue](https://user-images.githubusercontent.com/844287/217043984-0b35f73b-1318-47cb-9eed-a2a91b430490.png)
 
 
-
-# System Requirements
-1. Windows 10/11, or Linux. Experimental support for Mac is coming soon.
-2. An NVIDIA graphics card, preferably with 4GB or more of VRAM. If you don't have a compatible graphics card, it'll automatically run in the slower "CPU Mode".
-3. Minimum 8 GB of RAM and 25GB of disk space.
-
-You don't need to install or struggle with Python, Anaconda, Docker etc. The installer will take care of whatever is needed.
-
 ----
 
 # 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).
-
-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)
-* [Engine](https://github.com/users/cmdr2/projects/3/views/1)
-* [Installer](https://github.com/users/cmdr2/projects/4/views/1)
-* [Documentation](https://github.com/users/cmdr2/projects/5/views/1)
+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).
 
 If you have any code contributions in mind, please feel free to say Hi to us on the [discord server](https://discord.com/invite/u9yhsFmEkB). We use the Discord server for development-related discussions, and for helping users.
 
+# Credits
+* Stable Diffusion: https://github.com/Stability-AI/stablediffusion
+* CodeFormer: https://github.com/sczhou/CodeFormer (license: https://github.com/sczhou/CodeFormer/blob/master/LICENSE)
+* GFPGAN: https://github.com/TencentARC/GFPGAN
+* RealESRGAN: https://github.com/xinntao/Real-ESRGAN
+* k-diffusion: https://github.com/crowsonkb/k-diffusion
+* Code contributors and artists on the cmdr2 UI: https://github.com/cmdr2/stable-diffusion-ui and Discord (https://discord.com/invite/u9yhsFmEkB)
+* Lots of contributors on the internet
+
 # Disclaimer
 The authors of this project are not responsible for any content generated using this interface.
 

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/

package.json

@@ -0,0 +1,9 @@
+{
+  "scripts": {
+    "prettier-fix": "npx prettier --write \"./**/*.js\"",
+    "prettier-check": "npx prettier --check \"./**/*.js\""
+  },
+  "devDependencies": {
+    "prettier": "^1.19.1"
+  }
+}

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

@@ -4,6 +4,7 @@ cd /d %~dp0
 echo Install dir: %~dp0
 
 set PATH=C:\Windows\System32;%PATH%
+set PYTHONHOME=
 
 if exist "on_sd_start.bat" (
     echo ================================================================================
@@ -25,22 +26,20 @@ if exist "on_sd_start.bat" (
 @rem set legacy installer's PATH, if it exists
 if exist "installer" set PATH=%cd%\installer;%cd%\installer\Library\bin;%cd%\installer\Scripts;%cd%\installer\Library\usr\bin;%PATH%
 
-@rem Setup the packages required for the installer
-call scripts\bootstrap.bat
-
 @rem set new installer's PATH, if it downloaded any packages
 if exist "installer_files\env" set PATH=%cd%\installer_files\env;%cd%\installer_files\env\Library\bin;%cd%\installer_files\env\Scripts;%cd%\installer_files\Library\usr\bin;%PATH%
 
 set PYTHONPATH=%cd%\installer;%cd%\installer_files\env
 
-@rem Test the bootstrap
+@rem Test the core requirements
 call where git
 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/bootstrap.sh

@@ -30,9 +30,6 @@ if ! which tar; then fail "'tar' not found. Please install tar."; fi
 if ! which bzip2; then fail "'bzip2' not found. Please install bzip2."; fi
 
 if pwd | grep ' '; then fail "The installation directory's path contains a space character. Conda will fail to install. Please change the directory."; fi
-if [ -f /proc/cpuinfo ]; then 
-    if ! cat /proc/cpuinfo | grep avx | uniq; then fail "Your CPU doesn't support AVX."; fi
-fi
 
 # https://mamba.readthedocs.io/en/latest/installation.html
 if [ "$OS_NAME" == "linux" ] && [ "$OS_ARCH" == "arm64" ]; then OS_ARCH="aarch64"; fi

scripts/check_modules.py

@@ -1,13 +1,165 @@
-'''
-This script checks if the given modules exist
-'''
+"""
+This script checks and installs the required modules.
 
-import sys
-import pkgutil
+This script runs inside the legacy "stable-diffusion" folder
 
-modules = sys.argv[1:]
-missing_modules = []
-for m in modules:
-    if pkgutil.find_loader(m) is None:
-        print('module', m, 'not found')
-        exit(1)
+TODO - Maybe replace the bulk of this script with a call to `pip install -f requirements.txt`, with
+a custom index URL depending on the platform.
+
+"""
+
+import os
+from importlib.metadata import version as pkg_version
+import platform
+import traceback
+
+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": "2.0.3",
+    "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",
+    "sqlalchemy": "2.0.19",
+    "python-multipart": "0.0.6",
+    # "xformers": "0.0.16",
+}
+modules_to_log = ["torch", "torchvision", "sdkit", "stable-diffusion-sdkit"]
+
+
+def version(module_name: str) -> str:
+    try:
+        return pkg_version(module_name)
+    except:
+        return None
+
+
+def install(module_name: str, module_version: str):
+    if module_name == "xformers" and (os_name == "Darwin" or is_amd_on_linux()):
+        return
+
+    index_url = None
+    if module_name in ("torch", "torchvision"):
+        module_version, index_url = apply_torch_install_overrides(module_version)
+
+    if is_amd_on_linux():  # hack until AMD works properly on torch 2.0 (avoids black images on some cards)
+        if module_name == "torch":
+            module_version = "1.13.1+rocm5.2"
+        elif module_name == "torchvision":
+            module_version = "0.14.1+rocm5.2"
+    elif os_name == "Darwin":
+        if module_name == "torch":
+            module_version = "1.13.1"
+        elif module_name == "torchvision":
+            module_version = "0.14.1"
+
+    install_cmd = f"python -m pip install --upgrade {module_name}=={module_version}"
+
+    if index_url:
+        install_cmd += f" --index-url {index_url}"
+    if module_name == "sdkit" and version("sdkit") is not None:
+        install_cmd += " -q"
+
+    print(">", install_cmd)
+    os.system(install_cmd)
+
+
+def init():
+    for module_name, allowed_versions in modules_to_check.items():
+        if os.path.exists(f"../src/{module_name}"):
+            print(f"Skipping {module_name} update, since it's in developer/editable mode")
+            continue
+
+        allowed_versions, latest_version = get_allowed_versions(module_name, allowed_versions)
+
+        requires_install = False
+        if module_name in ("torch", "torchvision"):
+            if version(module_name) is None:  # allow any torch version
+                requires_install = True
+            elif os_name == "Darwin" and (  # force mac to downgrade from torch 2.0
+                version("torch").startswith("2.") or version("torchvision").startswith("0.15.")
+            ):
+                requires_install = True
+        elif version(module_name) not in allowed_versions:
+            requires_install = True
+
+        if requires_install:
+            try:
+                install(module_name, latest_version)
+            except:
+                traceback.print_exc()
+                fail(module_name)
+
+        if module_name in modules_to_log:
+            print(f"{module_name}: {version(module_name)}")
+
+
+### utilities
+
+
+def get_allowed_versions(module_name: str, allowed_versions: tuple):
+    allowed_versions = (allowed_versions,) if isinstance(allowed_versions, str) else allowed_versions
+    latest_version = allowed_versions[-1]
+
+    if module_name in ("torch", "torchvision"):
+        allowed_versions = include_cuda_versions(allowed_versions)
+
+    return allowed_versions, latest_version
+
+
+def apply_torch_install_overrides(module_version: str):
+    index_url = None
+    if os_name == "Windows":
+        module_version += "+cu117"
+        index_url = "https://download.pytorch.org/whl/cu117"
+    elif is_amd_on_linux():
+        index_url = "https://download.pytorch.org/whl/rocm5.2"
+
+    return module_version, index_url
+
+
+def include_cuda_versions(module_versions: tuple) -> tuple:
+    "Adds CUDA-specific versions to the list of allowed version numbers"
+
+    allowed_versions = tuple(module_versions)
+    allowed_versions += tuple(f"{v}+cu116" for v in module_versions)
+    allowed_versions += tuple(f"{v}+cu117" for v in module_versions)
+    allowed_versions += tuple(f"{v}+rocm5.2" for v in module_versions)
+    allowed_versions += tuple(f"{v}+rocm5.4.2" for v in module_versions)
+
+    return allowed_versions
+
+
+def is_amd_on_linux():
+    if os_name == "Linux":
+        try:
+            with open("/proc/bus/pci/devices", "r") as f:
+                device_info = f.read()
+                if "amdgpu" in device_info and "nvidia" not in device_info:
+                    return True
+        except:
+            return False
+
+    return False
+
+
+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/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/easydiffusion/easydiffusion/issues
+Thanks!"""
+    )
+    exit(1)
+
+
+### start
+
+init()

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/developer_console.sh

@@ -39,6 +39,8 @@ if [ "$0" == "bash" ]; then
     export PYTHONPATH="$(pwd)/stable-diffusion/env/lib/python3.8/site-packages"
   fi
 
+  export PYTHONNOUSERSITE=y
+
   which python
   python --version
 

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!
 
@@ -31,7 +31,7 @@ EOF
 filesize() {
     case "$(uname -s)" in
         Linux*)     stat -c "%s" $1;;
-        Darwin*)    stat -f "%z" $1;;
+        Darwin*)    /usr/bin/stat -f "%z" $1;;
         *)          echo "Unknown OS: $OS_NAME! This script runs only on Linux or Mac" && exit
     esac
 }

scripts/get_config.py

@@ -0,0 +1,53 @@
+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_json = os.path.join(config_directory, "config.json")
+
+parser = argparse.ArgumentParser(description='Get values from config file')
+parser.add_argument('--default', dest='default', action='store',
+                     help='default value, to be used if the setting is not defined in the config file')
+parser.add_argument('key', metavar='key', nargs='+',
+                    help='config key to return')
+
+args = parser.parse_args()
+
+config = None
+
+# migrate the old config yaml location
+config_legacy_yaml = os.path.join(config_directory, "config.yaml")
+if os.path.isfile(config_legacy_yaml):
+    shutil.move(config_legacy_yaml, config_yaml)
+
+if os.path.isfile(config_yaml):
+    from ruamel.yaml import YAML
+    yaml = YAML(typ='safe')
+    with open(config_yaml, 'r') as configfile:
+        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)
+
+if config is None:
+    config = {}
+
+for k in args.key:
+    if k in config:
+        config = config[k]
+    else:
+        if args.default != None:
+            print(args.default)
+            exit()
+
+print(config)

scripts/on_env_start.bat

@@ -1,6 +1,6 @@
 @echo off
 
-@echo. & echo "Easy Diffusion - v2" & echo.
+@echo. & echo "Easy Diffusion - v3" & echo.
 
 set PATH=C:\Windows\System32;%PATH%
 
@@ -8,6 +8,20 @@ if exist "scripts\config.bat" (
     @call scripts\config.bat
 )
 
+if exist "scripts\user_config.bat" (
+    @call scripts\user_config.bat
+)
+
+if exist "stable-diffusion\env" (
+    @set PYTHONPATH=%PYTHONPATH%;%cd%\stable-diffusion\env\lib\site-packages
+)
+
+if exist "scripts\get_config.py" (
+    @FOR /F "tokens=* USEBACKQ" %%F IN (`python scripts\get_config.py --default=main update_branch`) DO (
+        @SET update_branch=%%F
+    )
+)
+
 if "%update_branch%"=="" (
     set update_branch=main
 )
@@ -32,6 +46,8 @@ if "%update_branch%"=="" (
 
     @cd sd-ui-files
 
+    @call git add -A .
+    @call git stash
     @call git reset --hard
     @call git -c advice.detachedHead=false checkout "%update_branch%"
     @call git pull
@@ -41,10 +57,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
     )
@@ -52,8 +68,9 @@ if "%update_branch%"=="" (
 
 @xcopy sd-ui-files\ui ui /s /i /Y /q
 @copy sd-ui-files\scripts\on_sd_start.bat scripts\ /Y
-@copy sd-ui-files\scripts\bootstrap.bat scripts\ /Y
 @copy sd-ui-files\scripts\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

@@ -2,12 +2,24 @@
 
 source ./scripts/functions.sh
 
-printf "\n\nEasy Diffusion\n\n"
+printf "\n\nEasy Diffusion - v3\n\n"
+
+export PYTHONNOUSERSITE=y
 
 if [ -f "scripts/config.sh" ]; then
     source scripts/config.sh
 fi
 
+if [ -f "scripts/user_config.sh" ]; then
+    source scripts/user_config.sh
+fi
+
+export PYTHONPATH=$(pwd)/installer_files/env/lib/python3.8/site-packages:$(pwd)/stable-diffusion/env/lib/python3.8/site-packages
+
+if [ -f "scripts/get_config.py" ]; then
+   export update_branch="$( python scripts/get_config.py --default=main update_branch )"
+fi
+
 if [ "$update_branch" == "" ]; then
     export update_branch="main"
 fi
@@ -17,6 +29,8 @@ if [ -f "scripts/install_status.txt" ] && [ `grep -c sd_ui_git_cloned scripts/in
 
     cd sd-ui-files
 
+    git add -A .
+    git stash
     git reset --hard
     git -c advice.detachedHead=false checkout "$update_branch"
     git pull
@@ -26,7 +40,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"
@@ -38,6 +52,8 @@ cp -Rf sd-ui-files/ui .
 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

@@ -4,11 +4,12 @@
 @REM Note to self: Please rewrite this in Python. For the sake of your own sanity.
 
 @copy sd-ui-files\scripts\on_env_start.bat scripts\ /Y
-@copy sd-ui-files\scripts\bootstrap.bat scripts\ /Y
 @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 USERPROFILE=%cd%\profile
+    set HF_HOME=%cd%\profile\.cache\huggingface
 )
 
 @rem set the correct installer path (current vs legacy)
@@ -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
 )
@@ -34,8 +35,6 @@ call conda activate
 @REM remove the old version of the dev console script, if it's still present
 if exist "Open Developer Console.cmd" del "Open Developer Console.cmd"
 
-@call python -c "import os; import shutil; frm = 'sd-ui-files\\ui\\hotfix\\9c24e6cd9f499d02c4f21a033736dabd365962dc80fe3aeb57a8f85ea45a20a3.26fead7ea4f0f843f6eb4055dfd25693f1a71f3c6871b184042d4b126244e142'; dst = os.path.join(os.path.expanduser('~'), '.cache', 'huggingface', 'transformers', '9c24e6cd9f499d02c4f21a033736dabd365962dc80fe3aeb57a8f85ea45a20a3.26fead7ea4f0f843f6eb4055dfd25693f1a71f3c6871b184042d4b126244e142'); shutil.copyfile(frm, dst) if os.path.exists(dst) else print(''); print('Hotfixed broken JSON file from OpenAI');"
-
 @rem create the stable-diffusion folder, to work with legacy installations
 if not exist "stable-diffusion" mkdir stable-diffusion
 cd stable-diffusion
@@ -49,117 +48,28 @@ if exist "env" (
 if exist src rename src src-old
 if exist ldm rename ldm ldm-old
 
-if not exist "..\models\stable-diffusion" mkdir "..\models\stable-diffusion"
-if not exist "..\models\gfpgan" mkdir "..\models\gfpgan"
-if not exist "..\models\realesrgan" mkdir "..\models\realesrgan"
-if not exist "..\models\vae" mkdir "..\models\vae"
-
-@rem migrate the legacy models to the correct path (if already downloaded)
-if exist "sd-v1-4.ckpt" move sd-v1-4.ckpt ..\models\stable-diffusion\
-if exist "custom-model.ckpt" move custom-model.ckpt ..\models\stable-diffusion\
-if exist "GFPGANv1.3.pth" move GFPGANv1.3.pth ..\models\gfpgan\
-if exist "RealESRGAN_x4plus.pth" move RealESRGAN_x4plus.pth ..\models\realesrgan\
-if exist "RealESRGAN_x4plus_anime_6B.pth" move RealESRGAN_x4plus_anime_6B.pth ..\models\realesrgan\
 
 if not exist "%INSTALL_ENV_DIR%\DLLs\libssl-1_1-x64.dll"    copy "%INSTALL_ENV_DIR%\Library\bin\libssl-1_1-x64.dll"    "%INSTALL_ENV_DIR%\DLLs\"
 if not exist "%INSTALL_ENV_DIR%\DLLs\libcrypto-1_1-x64.dll" copy "%INSTALL_ENV_DIR%\Library\bin\libcrypto-1_1-x64.dll" "%INSTALL_ENV_DIR%\DLLs\"
 
-@rem install torch and torchvision
-call python ..\scripts\check_modules.py torch torchvision
-if "%ERRORLEVEL%" EQU "0" (
-    echo "torch and torchvision have already been installed."
-) else (
-    echo "Installing torch and torchvision.."
-
-    @REM prevent from using packages from the user's home directory, to avoid conflicts
-    set PYTHONNOUSERSITE=1
-    set PYTHONPATH=%INSTALL_ENV_DIR%\lib\site-packages
-
-    call python -m pip install --upgrade torch torchvision --extra-index-url https://download.pytorch.org/whl/cu116 || (
-        echo "Error installing torch. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!"
-        pause
-        exit /b
-    )
-)
-
+@rem install or upgrade the required modules
 set PATH=C:\Windows\System32;%PATH%
 
-@rem install/upgrade sdkit
-call python ..\scripts\check_modules.py sdkit sdkit.models ldm transformers numpy antlr4 gfpgan realesrgan
-if "%ERRORLEVEL%" EQU "0" (
-    echo "sdkit is already installed."
+@REM prevent from using packages from the user's home directory, to avoid conflicts
+set PYTHONNOUSERSITE=1
+set PYTHONPATH=%INSTALL_ENV_DIR%\lib\site-packages
 
-    @rem skip sdkit upgrade if in developer-mode
-    if not exist "..\src\sdkit" (
-        @REM prevent from using packages from the user's home directory, to avoid conflicts
-        set PYTHONNOUSERSITE=1
-        set PYTHONPATH=%INSTALL_ENV_DIR%\lib\site-packages
-
-        call python -m pip install --upgrade sdkit==1.0.43 -q || (
-            echo "Error updating sdkit"
-        )
-    )
-) else (
-    echo "Installing sdkit: https://pypi.org/project/sdkit/"
-
-    @REM prevent from using packages from the user's home directory, to avoid conflicts
-    set PYTHONNOUSERSITE=1
-    set PYTHONPATH=%INSTALL_ENV_DIR%\lib\site-packages
-
-    call python -m pip install sdkit==1.0.43 || (
-        echo "Error installing sdkit. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!"
-        pause
-        exit /b
-    )
-)
-
-call python -c "from importlib.metadata import version; print('sdkit version:', version('sdkit'))"
-
-@rem upgrade stable-diffusion-sdkit
-call python -m pip install --upgrade stable-diffusion-sdkit==2.1.3 -q || (
-    echo "Error updating stable-diffusion-sdkit"
-)
-call python -c "from importlib.metadata import version; print('stable-diffusion version:', version('stable-diffusion-sdkit'))"
-
-@rem install rich
-call python ..\scripts\check_modules.py rich
-if "%ERRORLEVEL%" EQU "0" (
-    echo "rich has already been installed."
-) else (
-    echo "Installing rich.."
-
-    set PYTHONNOUSERSITE=1
-    set PYTHONPATH=%INSTALL_ENV_DIR%\lib\site-packages
-
-    call python -m pip install rich || (
-        echo "Error installing rich. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!"
-        pause
-        exit /b
-    )
-)
-
-set PATH=C:\Windows\System32;%PATH%
-
-call python ..\scripts\check_modules.py uvicorn fastapi
-@if "%ERRORLEVEL%" EQU "0" (
-    echo "Packages necessary for Easy Diffusion were already installed"
-) else (
-    @echo. & echo "Downloading packages necessary for Easy Diffusion..." & echo.
-
-    set PYTHONNOUSERSITE=1
-    set PYTHONPATH=%INSTALL_ENV_DIR%\lib\site-packages
-
-    @call conda install -c conda-forge -y uvicorn fastapi || (
-        echo "Error installing the packages necessary 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!"
-        pause
-        exit /b
-    )
+@rem Download the required packages
+call python ..\scripts\check_modules.py
+if "%ERRORLEVEL%" NEQ "0" (
+    pause
+    exit /b
 )
 
 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
 )
@@ -169,162 +79,6 @@ call WHERE uvicorn > .tmp
     @echo conda_sd_ui_deps_installed >> ..\scripts\install_status.txt
 )
 
-@if exist "..\models\stable-diffusion\sd-v1-4.ckpt" (
-    for %%I in ("..\models\stable-diffusion\sd-v1-4.ckpt") do if "%%~zI" EQU "4265380512" (
-        echo "Data files (weights) necessary for Stable Diffusion were already downloaded. Using the HuggingFace 4 GB Model."
-    ) else (
-        for %%J in ("..\models\stable-diffusion\sd-v1-4.ckpt") do if "%%~zJ" EQU "7703807346" (
-            echo "Data files (weights) necessary for Stable Diffusion were already downloaded. Using the HuggingFace 7 GB Model."
-        ) else (
-            for %%K in ("..\models\stable-diffusion\sd-v1-4.ckpt") do if "%%~zK" EQU "7703810927" (
-                echo "Data files (weights) necessary for Stable Diffusion were already downloaded. Using the Waifu Model."
-            ) else (
-                echo. & echo "The model file present at models\stable-diffusion\sd-v1-4.ckpt is invalid. It is only %%~zK bytes in size. Re-downloading.." & echo.
-                del "..\models\stable-diffusion\sd-v1-4.ckpt"
-            )
-        )
-    )
-)
-
-@if not exist "..\models\stable-diffusion\sd-v1-4.ckpt" (
-    @echo. & echo "Downloading data files (weights) for Stable Diffusion.." & echo.
-
-    @call curl -L -k https://huggingface.co/CompVis/stable-diffusion-v-1-4-original/resolve/main/sd-v1-4.ckpt > ..\models\stable-diffusion\sd-v1-4.ckpt
-
-    @if exist "..\models\stable-diffusion\sd-v1-4.ckpt" (
-        for %%I in ("..\models\stable-diffusion\sd-v1-4.ckpt") do if "%%~zI" NEQ "4265380512" (
-            echo. & echo "Error: The downloaded model file was invalid! Bytes downloaded: %%~zI" & echo.
-            echo. & echo "Error downloading the data files (weights) for Stable Diffusion. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-            pause
-            exit /b
-        )
-    ) else (
-        @echo. & echo "Error downloading the data files (weights) for Stable Diffusion. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-)
-
-
-
-@if exist "..\models\gfpgan\GFPGANv1.3.pth" (
-    for %%I in ("..\models\gfpgan\GFPGANv1.3.pth") do if "%%~zI" EQU "348632874" (
-        echo "Data files (weights) necessary for GFPGAN (Face Correction) were already downloaded"
-    ) else (
-        echo. & echo "The GFPGAN model file present at models\gfpgan\GFPGANv1.3.pth is invalid. It is only %%~zI bytes in size. Re-downloading.." & echo.
-        del "..\models\gfpgan\GFPGANv1.3.pth"
-    )
-)
-
-@if not exist "..\models\gfpgan\GFPGANv1.3.pth" (
-    @echo. & echo "Downloading data files (weights) for GFPGAN (Face Correction).." & echo.
-
-    @call curl -L -k https://github.com/TencentARC/GFPGAN/releases/download/v1.3.0/GFPGANv1.3.pth > ..\models\gfpgan\GFPGANv1.3.pth
-
-    @if exist "..\models\gfpgan\GFPGANv1.3.pth" (
-        for %%I in ("..\models\gfpgan\GFPGANv1.3.pth") do if "%%~zI" NEQ "348632874" (
-            echo. & echo "Error: The downloaded GFPGAN model file was invalid! Bytes downloaded: %%~zI" & echo.
-            echo. & echo "Error downloading the data files (weights) for GFPGAN (Face Correction). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-            pause
-            exit /b
-        )
-    ) else (
-        @echo. & echo "Error downloading the data files (weights) for GFPGAN (Face Correction). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-)
-
-
-
-@if exist "..\models\realesrgan\RealESRGAN_x4plus.pth" (
-    for %%I in ("..\models\realesrgan\RealESRGAN_x4plus.pth") do if "%%~zI" EQU "67040989" (
-        echo "Data files (weights) necessary for ESRGAN (Resolution Upscaling) x4plus were already downloaded"
-    ) else (
-        echo. & echo "The RealESRGAN model file present at models\realesrgan\RealESRGAN_x4plus.pth is invalid. It is only %%~zI bytes in size. Re-downloading.." & echo.
-        del "..\models\realesrgan\RealESRGAN_x4plus.pth"
-    )
-)
-
-@if not exist "..\models\realesrgan\RealESRGAN_x4plus.pth" (
-    @echo. & echo "Downloading data files (weights) for ESRGAN (Resolution Upscaling) x4plus.." & echo.
-
-    @call curl -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.1.0/RealESRGAN_x4plus.pth > ..\models\realesrgan\RealESRGAN_x4plus.pth
-
-    @if exist "..\models\realesrgan\RealESRGAN_x4plus.pth" (
-        for %%I in ("..\models\realesrgan\RealESRGAN_x4plus.pth") do if "%%~zI" NEQ "67040989" (
-            echo. & echo "Error: The downloaded ESRGAN x4plus model file was invalid! Bytes downloaded: %%~zI" & echo.
-            echo. & echo "Error downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-            pause
-            exit /b
-        )
-    ) else (
-        @echo. & echo "Error downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-)
-
-
-
-@if exist "..\models\realesrgan\RealESRGAN_x4plus_anime_6B.pth" (
-    for %%I in ("..\models\realesrgan\RealESRGAN_x4plus_anime_6B.pth") do if "%%~zI" EQU "17938799" (
-        echo "Data files (weights) necessary for ESRGAN (Resolution Upscaling) x4plus_anime were already downloaded"
-    ) else (
-        echo. & echo "The RealESRGAN model file present at models\realesrgan\RealESRGAN_x4plus_anime_6B.pth is invalid. It is only %%~zI bytes in size. Re-downloading.." & echo.
-        del "..\models\realesrgan\RealESRGAN_x4plus_anime_6B.pth"
-    )
-)
-
-@if not exist "..\models\realesrgan\RealESRGAN_x4plus_anime_6B.pth" (
-    @echo. & echo "Downloading data files (weights) for ESRGAN (Resolution Upscaling) x4plus_anime.." & echo.
-
-    @call curl -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.2.4/RealESRGAN_x4plus_anime_6B.pth > ..\models\realesrgan\RealESRGAN_x4plus_anime_6B.pth
-
-    @if exist "..\models\realesrgan\RealESRGAN_x4plus_anime_6B.pth" (
-        for %%I in ("..\models\realesrgan\RealESRGAN_x4plus_anime_6B.pth") do if "%%~zI" NEQ "17938799" (
-            echo. & echo "Error: The downloaded ESRGAN x4plus_anime model file was invalid! Bytes downloaded: %%~zI" & echo.
-            echo. & echo "Error downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus_anime. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-            pause
-            exit /b
-        )
-    ) else (
-        @echo. & echo "Error downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus_anime. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-)
-
-
-
-@if exist "..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt" (
-    for %%I in ("..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt") do if "%%~zI" EQU "334695179" (
-        echo "Data files (weights) necessary for the default VAE (sd-vae-ft-mse-original) were already downloaded"
-    ) else (
-        echo. & echo "The default VAE (sd-vae-ft-mse-original) file present at models\vae\vae-ft-mse-840000-ema-pruned.ckpt is invalid. It is only %%~zI bytes in size. Re-downloading.." & echo.
-        del "..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt"
-    )
-)
-
-@if not exist "..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt" (
-    @echo. & echo "Downloading data files (weights) for the default VAE (sd-vae-ft-mse-original).." & echo.
-
-    @call curl -L -k https://huggingface.co/stabilityai/sd-vae-ft-mse-original/resolve/main/vae-ft-mse-840000-ema-pruned.ckpt > ..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt
-
-    @if exist "..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt" (
-        for %%I in ("..\models\vae\vae-ft-mse-840000-ema-pruned.ckpt") do if "%%~zI" NEQ "334695179" (
-            echo. & echo "Error: The downloaded default VAE (sd-vae-ft-mse-original) file was invalid! Bytes downloaded: %%~zI" & echo.
-            echo. & echo "Error downloading the data files (weights) for the default VAE (sd-vae-ft-mse-original). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-            pause
-            exit /b
-        )
-    ) else (
-        @echo. & echo "Error downloading the data files (weights) for the default VAE (sd-vae-ft-mse-original). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-)
-
 @>nul findstr /m "sd_install_complete" ..\scripts\install_status.txt
 @if "%ERRORLEVEL%" NEQ "0" (
     @echo sd_weights_downloaded >> ..\scripts\install_status.txt
@@ -343,14 +97,28 @@ call python --version
 
 @cd ..
 @set SD_UI_PATH=%cd%\ui
+
+@FOR /F "tokens=* USEBACKQ" %%F IN (`python scripts\get_config.py --default=9000 net listen_port`) DO (
+    @SET ED_BIND_PORT=%%F
+)
+
+@FOR /F "tokens=* USEBACKQ" %%F IN (`python scripts\get_config.py --default=False net listen_to_network`) DO (
+    if "%%F" EQU "True" (
+        @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
 
-@if NOT DEFINED SD_UI_BIND_PORT set SD_UI_BIND_PORT=9000
-@if NOT DEFINED SD_UI_BIND_IP set SD_UI_BIND_IP=0.0.0.0
-@uvicorn main:server_api --app-dir "%SD_UI_PATH%" --port %SD_UI_BIND_PORT% --host %SD_UI_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

@@ -4,6 +4,8 @@ cp sd-ui-files/scripts/functions.sh scripts/
 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
 
@@ -18,11 +20,6 @@ if [ -e "open_dev_console.sh" ]; then
     rm "open_dev_console.sh"
 fi
 
-python -c "import os; import shutil; frm = 'sd-ui-files/ui/hotfix/9c24e6cd9f499d02c4f21a033736dabd365962dc80fe3aeb57a8f85ea45a20a3.26fead7ea4f0f843f6eb4055dfd25693f1a71f3c6871b184042d4b126244e142'; dst = os.path.join(os.path.expanduser('~'), '.cache', 'huggingface', 'transformers', '9c24e6cd9f499d02c4f21a033736dabd365962dc80fe3aeb57a8f85ea45a20a3.26fead7ea4f0f843f6eb4055dfd25693f1a71f3c6871b184042d4b126244e142'); shutil.copyfile(frm, dst) if os.path.exists(dst) else print(''); print('Hotfixed broken JSON file from OpenAI');" 
-
-# Caution, this file will make your eyes and brain bleed. It's such an unholy mess.
-# Note to self: Please rewrite this in Python. For the sake of your own sanity.
-
 # set the correct installer path (current vs legacy)
 if [ -e "installer_files/env" ]; then
     export INSTALL_ENV_DIR="$(pwd)/installer_files/env"
@@ -44,236 +41,14 @@ fi
 if [ -e "src" ]; then mv src src-old; fi
 if [ -e "ldm" ]; then mv ldm ldm-old; fi
 
-mkdir -p "../models/stable-diffusion"
-mkdir -p "../models/gfpgan"
-mkdir -p "../models/realesrgan"
-mkdir -p "../models/vae"
-
-# migrate the legacy models to the correct path (if already downloaded)
-if [ -e "sd-v1-4.ckpt" ]; then mv sd-v1-4.ckpt ../models/stable-diffusion/; fi
-if [ -e "custom-model.ckpt" ]; then mv custom-model.ckpt ../models/stable-diffusion/; fi
-if [ -e "GFPGANv1.3.pth" ]; then mv GFPGANv1.3.pth ../models/gfpgan/; fi
-if [ -e "RealESRGAN_x4plus.pth" ]; then mv RealESRGAN_x4plus.pth ../models/realesrgan/; fi
-if [ -e "RealESRGAN_x4plus_anime_6B.pth" ]; then mv RealESRGAN_x4plus_anime_6B.pth ../models/realesrgan/; fi
-
-# install torch and torchvision
-if python ../scripts/check_modules.py torch torchvision; then
-    echo "torch and torchvision have already been installed."
-else
-    echo "Installing torch and torchvision.."
-
-    export PYTHONNOUSERSITE=1
-    export PYTHONPATH="$INSTALL_ENV_DIR/lib/python3.8/site-packages"
-
-    if python -m pip install --upgrade torch torchvision --extra-index-url https://download.pytorch.org/whl/cu116 ; then
-        echo "Installed."
-    else
-        fail "torch install failed" 
-    fi
+# Download the required packages
+if ! python ../scripts/check_modules.py; then
+    read -p "Press any key to continue"
+    exit 1
 fi
 
-# install/upgrade sdkit
-if python ../scripts/check_modules.py sdkit sdkit.models ldm transformers numpy antlr4 gfpgan realesrgan ; then
-    echo "sdkit is already installed."
-
-    # skip sdkit upgrade if in developer-mode
-    if [ ! -e "../src/sdkit" ]; then
-        export PYTHONNOUSERSITE=1
-        export PYTHONPATH="$INSTALL_ENV_DIR/lib/python3.8/site-packages"
-
-        python -m pip install --upgrade sdkit==1.0.43 -q
-    fi
-else
-    echo "Installing sdkit: https://pypi.org/project/sdkit/"
-
-    export PYTHONNOUSERSITE=1
-    export PYTHONPATH="$INSTALL_ENV_DIR/lib/python3.8/site-packages"
-
-    if python -m pip install sdkit==1.0.43 ; then
-        echo "Installed."
-    else
-        fail "sdkit install failed"
-    fi
-fi
-
-python -c "from importlib.metadata import version; print('sdkit version:', version('sdkit'))"
-
-# upgrade stable-diffusion-sdkit
-python -m pip install --upgrade stable-diffusion-sdkit==2.1.3 -q
-python -c "from importlib.metadata import version; print('stable-diffusion version:', version('stable-diffusion-sdkit'))"
-
-# install rich
-if python ../scripts/check_modules.py rich; then
-    echo "rich has already been installed."
-else
-    echo "Installing rich.."
-
-    export PYTHONNOUSERSITE=1
-    export PYTHONPATH="$INSTALL_ENV_DIR/lib/python3.8/site-packages"
-
-    if python -m pip install rich ; then
-        echo "Installed."
-    else
-        fail "Install failed for rich"
-    fi
-fi
-
-if python ../scripts/check_modules.py uvicorn fastapi ; then
-    echo "Packages necessary for Easy Diffusion were already installed"
-else
-    printf "\n\nDownloading packages necessary for Easy Diffusion..\n\n"
-
-    export PYTHONNOUSERSITE=1
-    export PYTHONPATH="$INSTALL_ENV_DIR/lib/python3.8/site-packages"
-
-    if conda install -c conda-forge -y uvicorn fastapi ; then
-        echo "Installed. Testing.."
-    else
-        fail "'conda install uvicorn' failed" 
-    fi
-
-    if ! command -v uvicorn &> /dev/null; then
-        fail "UI packages not found!"
-    fi
-fi
-
-if [ -f "../models/stable-diffusion/sd-v1-4.ckpt" ]; then
-    model_size=`filesize "../models/stable-diffusion/sd-v1-4.ckpt"`
-
-    if [ "$model_size" -eq "4265380512" ] || [ "$model_size" -eq "7703807346" ] || [ "$model_size" -eq "7703810927" ]; then
-        echo "Data files (weights) necessary for Stable Diffusion were already downloaded"
-    else
-        printf "\n\nThe model file present at models/stable-diffusion/sd-v1-4.ckpt is invalid. It is only $model_size bytes in size. Re-downloading.."
-        rm ../models/stable-diffusion/sd-v1-4.ckpt
-    fi
-fi
-
-if [ ! -f "../models/stable-diffusion/sd-v1-4.ckpt" ]; then
-    echo "Downloading data files (weights) for Stable Diffusion.."
-
-    curl -L -k https://huggingface.co/CompVis/stable-diffusion-v-1-4-original/resolve/main/sd-v1-4.ckpt > ../models/stable-diffusion/sd-v1-4.ckpt
-
-    if [ -f "../models/stable-diffusion/sd-v1-4.ckpt" ]; then
-        model_size=`filesize "../models/stable-diffusion/sd-v1-4.ckpt"`
-        if [ ! "$model_size" == "4265380512" ]; then
-	    fail "The downloaded model file was invalid! Bytes downloaded: $model_size"
-        fi
-    else
-        fail "Error downloading the data files (weights) for Stable Diffusion"
-    fi
-fi
-
-
-if [ -f "../models/gfpgan/GFPGANv1.3.pth" ]; then
-    model_size=`filesize "../models/gfpgan/GFPGANv1.3.pth"`
-
-    if [ "$model_size" -eq "348632874" ]; then
-        echo "Data files (weights) necessary for GFPGAN (Face Correction) were already downloaded"
-    else
-        printf "\n\nThe model file present at models/gfpgan/GFPGANv1.3.pth is invalid. It is only $model_size bytes in size. Re-downloading.."
-        rm ../models/gfpgan/GFPGANv1.3.pth
-    fi
-fi
-
-if [ ! -f "../models/gfpgan/GFPGANv1.3.pth" ]; then
-    echo "Downloading data files (weights) for GFPGAN (Face Correction).."
-
-    curl -L -k https://github.com/TencentARC/GFPGAN/releases/download/v1.3.0/GFPGANv1.3.pth > ../models/gfpgan/GFPGANv1.3.pth
-
-    if [ -f "../models/gfpgan/GFPGANv1.3.pth" ]; then
-        model_size=`filesize "../models/gfpgan/GFPGANv1.3.pth"`
-        if [ ! "$model_size" -eq "348632874" ]; then
-            fail "The downloaded GFPGAN model file was invalid! Bytes downloaded: $model_size"
-        fi
-    else
-        fail "Error downloading the data files (weights) for GFPGAN (Face Correction)."
-    fi
-fi
-
-
-if [ -f "../models/realesrgan/RealESRGAN_x4plus.pth" ]; then
-    model_size=`filesize "../models/realesrgan/RealESRGAN_x4plus.pth"`
-
-    if [ "$model_size" -eq "67040989" ]; then
-        echo "Data files (weights) necessary for ESRGAN (Resolution Upscaling) x4plus were already downloaded"
-    else
-        printf "\n\nThe model file present at models/realesrgan/RealESRGAN_x4plus.pth is invalid. It is only $model_size bytes in size. Re-downloading.."
-        rm ../models/realesrgan/RealESRGAN_x4plus.pth
-    fi
-fi
-
-if [ ! -f "../models/realesrgan/RealESRGAN_x4plus.pth" ]; then
-    echo "Downloading data files (weights) for ESRGAN (Resolution Upscaling) x4plus.."
-
-    curl -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.1.0/RealESRGAN_x4plus.pth > ../models/realesrgan/RealESRGAN_x4plus.pth
-
-    if [ -f "../models/realesrgan/RealESRGAN_x4plus.pth" ]; then
-        model_size=`filesize "../models/realesrgan/RealESRGAN_x4plus.pth"`
-        if [ ! "$model_size" -eq "67040989" ]; then
-            fail "The downloaded ESRGAN x4plus model file was invalid! Bytes downloaded: $model_size"
-        fi
-    else
-        fail "Error downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus"
-    fi
-fi
-
-
-if [ -f "../models/realesrgan/RealESRGAN_x4plus_anime_6B.pth" ]; then
-    model_size=`filesize "../models/realesrgan/RealESRGAN_x4plus_anime_6B.pth"`
-
-    if [ "$model_size" -eq "17938799" ]; then
-        echo "Data files (weights) necessary for ESRGAN (Resolution Upscaling) x4plus_anime were already downloaded"
-    else
-        printf "\n\nThe model file present at models/realesrgan/RealESRGAN_x4plus_anime_6B.pth is invalid. It is only $model_size bytes in size. Re-downloading.."
-        rm ../models/realesrgan/RealESRGAN_x4plus_anime_6B.pth
-    fi
-fi
-
-if [ ! -f "../models/realesrgan/RealESRGAN_x4plus_anime_6B.pth" ]; then
-    echo "Downloading data files (weights) for ESRGAN (Resolution Upscaling) x4plus_anime.."
-
-    curl -L -k https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.2.4/RealESRGAN_x4plus_anime_6B.pth > ../models/realesrgan/RealESRGAN_x4plus_anime_6B.pth
-
-    if [ -f "../models/realesrgan/RealESRGAN_x4plus_anime_6B.pth" ]; then
-        model_size=`filesize "../models/realesrgan/RealESRGAN_x4plus_anime_6B.pth"`
-        if [ ! "$model_size" -eq "17938799" ]; then
-            fail "The downloaded ESRGAN x4plus_anime model file was invalid! Bytes downloaded: $model_size"
-        fi
-    else
-        fail "Error downloading the data files (weights) for ESRGAN (Resolution Upscaling) x4plus_anime."
-    fi
-fi
-
-
-if [ -f "../models/vae/vae-ft-mse-840000-ema-pruned.ckpt" ]; then
-    model_size=`filesize "../models/vae/vae-ft-mse-840000-ema-pruned.ckpt"`
-
-    if [ "$model_size" -eq "334695179" ]; then
-        echo "Data files (weights) necessary for the default VAE (sd-vae-ft-mse-original) were already downloaded"
-    else
-        printf "\n\nThe model file present at models/vae/vae-ft-mse-840000-ema-pruned.ckpt is invalid. It is only $model_size bytes in size. Re-downloading.."
-        rm ../models/vae/vae-ft-mse-840000-ema-pruned.ckpt
-    fi
-fi
-
-if [ ! -f "../models/vae/vae-ft-mse-840000-ema-pruned.ckpt" ]; then
-    echo "Downloading data files (weights) for the default VAE (sd-vae-ft-mse-original).."
-
-    curl -L -k https://huggingface.co/stabilityai/sd-vae-ft-mse-original/resolve/main/vae-ft-mse-840000-ema-pruned.ckpt > ../models/vae/vae-ft-mse-840000-ema-pruned.ckpt
-
-    if [ -f "../models/vae/vae-ft-mse-840000-ema-pruned.ckpt" ]; then
-        model_size=`filesize "../models/vae/vae-ft-mse-840000-ema-pruned.ckpt"`
-        if [ ! "$model_size" -eq "334695179" ]; then
-            printf "\n\nError: The downloaded default VAE (sd-vae-ft-mse-original) file was invalid! Bytes downloaded: $model_size\n\n"
-            printf "\n\nError downloading the data files (weights) for the default VAE (sd-vae-ft-mse-original). Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-            read -p "Press any key to continue"
-            exit
-        fi
-    else
-        printf "\n\nError downloading the data files (weights) for the default VAE (sd-vae-ft-mse-original). Sorry about that, please try to:\n  1. Run this installer again.\n  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting\n  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB\n  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues\nThanks!\n\n"
-        read -p "Press any key to continue"
-        exit
-    fi
+if ! command -v uvicorn &> /dev/null; then
+    fail "UI packages not found!"
 fi
 
 if [ `grep -c sd_install_complete ../scripts/install_status.txt` -gt "0" ]; then
@@ -285,6 +60,7 @@ printf "\n\nEasy Diffusion installation complete, starting the server!\n\n"
 
 SD_PATH=`pwd`
 
+export PYTORCH_ENABLE_MPS_FALLBACK=1
 export PYTHONPATH="$INSTALL_ENV_DIR/lib/python3.8/site-packages"
 echo "PYTHONPATH=$PYTHONPATH"
 
@@ -293,8 +69,17 @@ python --version
 
 cd ..
 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=$( python scripts/get_config.py --default=0.0.0.0 net bind_ip)
+        ;;
+    "False")
+        export ED_BIND_IP=127.0.0.1
+        ;;
+esac
 cd stable-diffusion
 
-uvicorn main:server_api --app-dir "$SD_UI_PATH" --port ${SD_UI_BIND_PORT:-9000} --host ${SD_UI_BIND_IP:-0.0.0.0} --log-level error
+uvicorn main:server_api --app-dir "$SD_UI_PATH" --port "$ED_BIND_PORT" --host "$ED_BIND_IP" --log-level error
 
 read -p "Press any key to continue"

scripts/start.sh

@@ -19,6 +19,7 @@ if [ -f "on_sd_start.bat" ]; then
     exit 1
 fi
 
+unset PYTHONHOME
 
 # set legacy installer's PATH, if it exists
 if [ -e "installer" ]; then export PATH="$(pwd)/installer/bin:$PATH"; fi

ui/easydiffusion/app.py

@@ -1,16 +1,22 @@
+import json
+import logging
 import os
+import shutil
 import socket
 import sys
-import json
 import traceback
-import logging
-import shlex
-from rich.logging import RichHandler
+import copy
+from ruamel.yaml import YAML
 
-from sdkit.utils import log as sdkit_log  # hack, so we can overwrite the log config
+import urllib
+import warnings
 
 from easydiffusion import task_manager
 from easydiffusion.utils import log
+from rich.logging import RichHandler
+from rich.console import Console
+from rich.panel import Panel
+from sdkit.utils import log as sdkit_log  # hack, so we can overwrite the log config
 
 # Remove all handlers associated with the root logger object.
 for handler in logging.root.handlers[:]:
@@ -26,10 +32,13 @@ 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"))
 MODELS_DIR = os.path.abspath(os.path.join(SD_DIR, "..", "models"))
+BUCKET_DIR = os.path.abspath(os.path.join(SD_DIR, "..", "bucket"))
 
 USER_PLUGINS_DIR = os.path.abspath(os.path.join(SD_DIR, "..", "plugins"))
 CORE_PLUGINS_DIR = os.path.abspath(os.path.join(SD_UI_DIR, "plugins"))
@@ -52,91 +61,147 @@ APP_CONFIG_DEFAULTS = {
     "ui": {
         "open_browser_on_start": True,
     },
+    "test_diffusers": True,
 }
 
+IMAGE_EXTENSIONS = [
+    ".png",
+    ".apng",
+    ".jpg",
+    ".jpeg",
+    ".jfif",
+    ".pjpeg",
+    ".pjp",
+    ".jxl",
+    ".gif",
+    ".webp",
+    ".avif",
+    ".svg",
+]
+CUSTOM_MODIFIERS_DIR = os.path.abspath(os.path.join(SD_DIR, "..", "modifiers"))
+CUSTOM_MODIFIERS_PORTRAIT_EXTENSIONS = [
+    ".portrait",
+    "_portrait",
+    " portrait",
+    "-portrait",
+]
+CUSTOM_MODIFIERS_LANDSCAPE_EXTENSIONS = [
+    ".landscape",
+    "_landscape",
+    " landscape",
+    "-landscape",
+]
+
 
 def init():
     os.makedirs(USER_UI_PLUGINS_DIR, exist_ok=True)
     os.makedirs(USER_SERVER_PLUGINS_DIR, exist_ok=True)
 
+    # 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_json_path = os.path.join(CONFIG_DIR, "config.json")
-        if not os.path.exists(config_json_path):
-            config = default_val
-        else:
+    config_yaml_path = os.path.join(CONFIG_DIR, "..", "config.yaml")
+
+    # migrate the old config yaml location
+    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)
+
+    def set_config_on_startup(config: dict):
+        if getConfig.__test_diffusers_on_startup is None:
+            getConfig.__test_diffusers_on_startup = config.get("test_diffusers", True)
+        config["config_on_startup"] = {"test_diffusers": getConfig.__test_diffusers_on_startup}
+
+    if os.path.isfile(config_yaml_path):
+        try:
+            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
+
+            set_config_on_startup(config)
+
+            return config
+        except Exception as e:
+            log.warn(traceback.format_exc())
+            set_config_on_startup(default_val)
+            return default_val
+    else:
+        try:
+            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:
-            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
-        return config
-    except Exception as e:
-        log.warn(traceback.format_exc())
-        return default_val
+            # Save config in new format
+            setConfig(config)
+
+            with open(config_json_path + ".txt", "w") as f:
+                f.write("Moved to config.yaml inside the Easy Diffusion folder. You can open it in any text editor.")
+            os.remove(config_json_path)
+
+            return getConfig(default_val)
+        except Exception as e:
+            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
-        config_json_path = os.path.join(CONFIG_DIR, "config.json")
-        with open(config_json_path, "w", encoding="utf-8") as f:
-            json.dump(config, f)
-    except:
-        log.error(traceback.format_exc())
+    try:  # config.yaml
+        config_yaml_path = os.path.join(CONFIG_DIR, "..", "config.yaml")
+        yaml = YAML()
 
-    try:  # config.bat
-        config_bat_path = os.path.join(CONFIG_DIR, "config.bat")
-        config_bat = []
+        if not hasattr(config, "_yaml_comment"):
+            config_yaml_sample_path = os.path.join(CONFIG_DIR, "config.yaml.sample")
 
-        if "update_branch" in config:
-            config_bat.append(f"@set update_branch={config['update_branch']}")
+            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)
 
-        config_bat.append(f"@set SD_UI_BIND_PORT={config['net']['listen_port']}")
-        bind_ip = "0.0.0.0" if config["net"]["listen_to_network"] else "127.0.0.1"
-        config_bat.append(f"@set SD_UI_BIND_IP={bind_ip}")
+                for k in config:
+                    commented_config[k] = config[k]
 
-        # Preserve these variables if they are set
-        for var in PRESERVE_CONFIG_VARS:
-            if os.getenv(var) is not None:
-                config_bat.append(f"@set {var}={os.getenv(var)}")
+                config = commented_config
+        yaml.indent(mapping=2, sequence=4, offset=2)
 
-        if len(config_bat) > 0:
-            with open(config_bat_path, "w", encoding="utf-8") as f:
-                f.write("\n".join(config_bat))
-    except:
-        log.error(traceback.format_exc())
+        if "config_on_startup" in config:
+            del config["config_on_startup"]
 
-    try:  # config.sh
-        config_sh_path = os.path.join(CONFIG_DIR, "config.sh")
-        config_sh = ["#!/bin/bash"]
+        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')
 
-        if "update_branch" in config:
-            config_sh.append(f"export update_branch={config['update_branch']}")
-
-        config_sh.append(f"export SD_UI_BIND_PORT={config['net']['listen_port']}")
-        bind_ip = "0.0.0.0" if config["net"]["listen_to_network"] else "127.0.0.1"
-        config_sh.append(f"export SD_UI_BIND_IP={bind_ip}")
-
-        # Preserve these variables if they are set
-        for var in PRESERVE_CONFIG_VARS:
-            if os.getenv(var) is not None:
-                config_bat.append(f'export {var}="{shlex.quote(os.getenv(var))}"')
-
-        if len(config_sh) > 1:
-            with open(config_sh_path, "w", encoding="utf-8") as f:
-                f.write("\n".join(config_sh))
+        # 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())
 
@@ -172,10 +237,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
 
@@ -228,9 +295,151 @@ def getIPConfig():
 def open_browser():
     config = getConfig()
     ui = config.get("ui", {})
-    net = config.get("net", {"listen_port": 9000})
+    net = config.get("net", {})
     port = net.get("listen_port", 9000)
+
     if ui.get("open_browser_on_start", True):
         import webbrowser
 
+        log.info("Opening browser..")
+
         webbrowser.open(f"http://localhost:{port}")
+
+    Console().print(
+        Panel(
+            "\n"
+            + "[white]Easy Diffusion is ready to serve requests.\n\n"
+            + "A new browser tab should have been opened by now.\n"
+            + f"If not, please open your web browser and navigate to [bold yellow underline]http://localhost:{port}/\n",
+            title="Easy Diffusion is ready",
+            style="bold yellow on blue",
+        )
+    )
+
+
+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/easydiffusion/easydiffusion/issues",
+    ]
+
+    if fail_type == "model_download":
+        fail_label = f"Error downloading the {data} model"
+        suggestions.insert(
+            1,
+            "If that doesn't fix it, please try to download the file manually. The address to download from, and the destination to save to are printed above this message.",
+        )
+    else:
+        fail_label = "Error while installing Easy Diffusion"
+
+    msg = [f"{fail_label}. Sorry about that, please try to:"]
+    for i, suggestion in enumerate(suggestions):
+        msg.append(f"{i+1}. {suggestion}")
+    msg.append("Thanks!")
+
+    print("\n".join(msg))
+    exit(1)
+
+
+def get_image_modifiers():
+    modifiers_json_path = os.path.join(SD_UI_DIR, "modifiers.json")
+
+    modifier_categories = {}
+    original_category_order = []
+    with open(modifiers_json_path, "r", encoding="utf-8") as f:
+        modifiers_file = json.load(f)
+
+        # The trailing slash is needed to support symlinks
+        if not os.path.isdir(f"{CUSTOM_MODIFIERS_DIR}/"):
+            return modifiers_file
+
+        # convert modifiers from a list of objects to a dict of dicts
+        for category_item in modifiers_file:
+            category_name = category_item["category"]
+            original_category_order.append(category_name)
+            category = {}
+            for modifier_item in category_item["modifiers"]:
+                modifier = {}
+                for preview_item in modifier_item["previews"]:
+                    modifier[preview_item["name"]] = preview_item["path"]
+                category[modifier_item["modifier"]] = modifier
+            modifier_categories[category_name] = category
+
+    def scan_directory(directory_path: str, category_name="Modifiers"):
+        for entry in os.scandir(directory_path):
+            if entry.is_file():
+                file_extension = list(filter(lambda e: entry.name.endswith(e), IMAGE_EXTENSIONS))
+                if len(file_extension) == 0:
+                    continue
+
+                modifier_name = entry.name[: -len(file_extension[0])]
+                modifier_path = f"custom/{entry.path[len(CUSTOM_MODIFIERS_DIR) + 1:]}"
+                # URL encode path segments
+                modifier_path = "/".join(
+                    map(
+                        lambda segment: urllib.parse.quote(segment),
+                        modifier_path.split("/"),
+                    )
+                )
+                is_portrait = True
+                is_landscape = True
+
+                portrait_extension = list(
+                    filter(
+                        lambda e: modifier_name.lower().endswith(e),
+                        CUSTOM_MODIFIERS_PORTRAIT_EXTENSIONS,
+                    )
+                )
+                landscape_extension = list(
+                    filter(
+                        lambda e: modifier_name.lower().endswith(e),
+                        CUSTOM_MODIFIERS_LANDSCAPE_EXTENSIONS,
+                    )
+                )
+
+                if len(portrait_extension) > 0:
+                    is_landscape = False
+                    modifier_name = modifier_name[: -len(portrait_extension[0])]
+                elif len(landscape_extension) > 0:
+                    is_portrait = False
+                    modifier_name = modifier_name[: -len(landscape_extension[0])]
+
+                if category_name not in modifier_categories:
+                    modifier_categories[category_name] = {}
+
+                category = modifier_categories[category_name]
+
+                if modifier_name not in category:
+                    category[modifier_name] = {}
+
+                if is_portrait or "portrait" not in category[modifier_name]:
+                    category[modifier_name]["portrait"] = modifier_path
+
+                if is_landscape or "landscape" not in category[modifier_name]:
+                    category[modifier_name]["landscape"] = modifier_path
+            elif entry.is_dir():
+                scan_directory(
+                    entry.path,
+                    entry.name if directory_path == CUSTOM_MODIFIERS_DIR else f"{category_name}/{entry.name}",
+                )
+
+    scan_directory(CUSTOM_MODIFIERS_DIR)
+
+    custom_categories = sorted(
+        [cn for cn in modifier_categories.keys() if cn not in original_category_order],
+        key=str.casefold,
+    )
+
+    # convert the modifiers back into a list of objects
+    modifier_categories_list = []
+    for category_name in [*original_category_order, *custom_categories]:
+        category = {"category": category_name, "modifiers": []}
+        for modifier_name in sorted(modifier_categories[category_name].keys(), key=str.casefold):
+            modifier = {"modifier": modifier_name, "previews": []}
+            for preview_name, preview_path in modifier_categories[category_name][modifier_name].items():
+                modifier["previews"].append({"name": preview_name, "path": preview_path})
+            category["modifiers"].append(modifier)
+        modifier_categories_list.append(category)
+
+    return modifier_categories_list

ui/easydiffusion/bucket_manager.py

@@ -0,0 +1,102 @@
+from typing import List
+
+from fastapi import Depends, FastAPI, HTTPException, Response, File
+from sqlalchemy.orm import Session
+
+from easydiffusion.easydb import crud, models, schemas
+from easydiffusion.easydb.database import SessionLocal, engine
+
+from requests.compat import urlparse
+
+import base64, json
+
+MIME_TYPES = {
+    "jpg":  "image/jpeg",
+    "jpeg": "image/jpeg",
+    "gif":  "image/gif",
+    "png":  "image/png",
+    "webp": "image/webp",
+    "js":   "text/javascript",
+    "htm":  "text/html",
+    "html": "text/html",
+    "css":  "text/css",
+    "json": "application/json",
+    "mjs":  "application/json",
+    "yaml": "application/yaml",
+    "svg":  "image/svg+xml",
+    "txt":  "text/plain",
+}
+
+def init():
+    from easydiffusion.server import server_api
+
+    models.BucketBase.metadata.create_all(bind=engine)
+
+
+    # Dependency
+    def get_db():
+        db = SessionLocal()
+        try:
+            yield db
+        finally:
+            db.close()
+
+    @server_api.get("/bucket/{obj_path:path}")
+    def bucket_get_object(obj_path: str, db: Session = Depends(get_db)):
+        filename = get_filename_from_url(obj_path)
+        path = get_path_from_url(obj_path)
+
+        if filename==None:
+            bucket = crud.get_bucket_by_path(db, path=path)
+            if bucket == None:
+                raise HTTPException(status_code=404, detail="Bucket not found")
+            bucketfiles = db.query(models.BucketFile).with_entities(models.BucketFile.filename).filter(models.BucketFile.bucket_id == bucket.id).all()
+            bucketfiles = [ x.filename for x in bucketfiles ]
+            return bucketfiles
+
+        else:
+            bucket_id = crud.get_bucket_by_path(db, path).id
+            bucketfile = db.query(models.BucketFile).filter(models.BucketFile.bucket_id == bucket_id, models.BucketFile.filename == filename).first()
+
+            suffix = get_suffix_from_filename(filename)
+
+            return Response(content=bucketfile.data, media_type=MIME_TYPES.get(suffix, "application/octet-stream")) 
+
+    @server_api.post("/bucket/{obj_path:path}")
+    def bucket_post_object(obj_path: str, file: bytes = File(), db: Session = Depends(get_db)):
+        filename = get_filename_from_url(obj_path)
+        path = get_path_from_url(obj_path)
+        bucket = crud.get_bucket_by_path(db, path)
+
+        if bucket == None:
+            bucket = crud.create_bucket(db=db, bucket=schemas.BucketCreate(path=path))
+        bucket_id = bucket.id
+
+        bucketfile = schemas.BucketFileCreate(filename=filename, data=file)
+        result = crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id)
+        result.data = base64.encodestring(result.data)
+        return result
+
+
+    @server_api.post("/buckets/{bucket_id}/items/", response_model=schemas.BucketFile)
+    def create_bucketfile_in_bucket(
+        bucket_id: int, bucketfile: schemas.BucketFileCreate, db: Session = Depends(get_db)
+    ):
+        bucketfile.data = base64.decodestring(bucketfile.data)
+        result =  crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id)
+        result.data = base64.encodestring(result.data)
+        return result
+
+
+def get_filename_from_url(url):
+    path = urlparse(url).path
+    name = path[path.rfind('/')+1:]
+    return name or None 
+
+def get_path_from_url(url):
+    path = urlparse(url).path
+    path = path[0:path.rfind('/')]
+    return path or None 
+
+def get_suffix_from_filename(filename):
+    return filename[filename.rfind('.')+1:]

ui/easydiffusion/device_manager.py

@@ -1,8 +1,9 @@
 import os
-import torch
-import traceback
+import platform
 import re
+import traceback
 
+import torch
 from easydiffusion.utils import log
 
 """
@@ -21,20 +22,20 @@ mem_free_threshold = 0
 
 def get_device_delta(render_devices, active_devices):
     """
-    render_devices: 'cpu', or 'auto' or ['cuda:N'...]
-    active_devices: ['cpu', 'cuda:N'...]
+    render_devices: 'cpu', or 'auto', or 'mps' or ['cuda:N'...]
+    active_devices: ['cpu', 'mps', 'cuda:N'...]
     """
 
-    if render_devices in ("cpu", "auto"):
+    if render_devices in ("cpu", "auto", "mps"):
         render_devices = [render_devices]
     elif render_devices is not None:
         if isinstance(render_devices, str):
             render_devices = [render_devices]
         if isinstance(render_devices, list) and len(render_devices) > 0:
-            render_devices = list(filter(lambda x: x.startswith("cuda:"), render_devices))
+            render_devices = list(filter(lambda x: x.startswith("cuda:") or x == "mps", render_devices))
             if len(render_devices) == 0:
                 raise Exception(
-                    'Invalid render_devices value in config.json. Valid: {"render_devices": ["cuda:0", "cuda:1"...]}, or {"render_devices": "cpu"} or {"render_devices": "auto"}'
+                    'Invalid render_devices value in config.json. Valid: {"render_devices": ["cuda:0", "cuda:1"...]}, or {"render_devices": "cpu"} or {"render_devices": "mps"} or {"render_devices": "auto"}'
                 )
 
             render_devices = list(filter(lambda x: is_device_compatible(x), render_devices))
@@ -63,10 +64,26 @@ def get_device_delta(render_devices, active_devices):
     return devices_to_start, devices_to_stop
 
 
+def is_mps_available():
+    return (
+        platform.system() == "Darwin"
+        and hasattr(torch.backends, "mps")
+        and torch.backends.mps.is_available()
+        and torch.backends.mps.is_built()
+    )
+
+
+def is_cuda_available():
+    return torch.cuda.is_available()
+
+
 def auto_pick_devices(currently_active_devices):
     global mem_free_threshold
 
-    if not torch.cuda.is_available():
+    if is_mps_available():
+        return ["mps"]
+
+    if not is_cuda_available():
         return ["cpu"]
 
     device_count = torch.cuda.device_count()
@@ -101,7 +118,10 @@ def auto_pick_devices(currently_active_devices):
     #    These already-running devices probably aren't terrible, since they were picked in the past.
     #    Worst case, the user can restart the program and that'll get rid of them.
     devices = list(
-        filter((lambda x: x["mem_free"] > mem_free_threshold or x["device"] in currently_active_devices), devices)
+        filter(
+            (lambda x: x["mem_free"] > mem_free_threshold or x["device"] in currently_active_devices),
+            devices,
+        )
     )
     devices = list(map(lambda x: x["device"], devices))
     return devices
@@ -115,11 +135,11 @@ def device_init(context, device):
 
     validate_device_id(device, log_prefix="device_init")
 
-    if device == "cpu":
-        context.device = "cpu"
+    if "cuda" not in device:
+        context.device = device
         context.device_name = get_processor_name()
         context.half_precision = False
-        log.debug(f"Render device CPU available as {context.device_name}")
+        log.debug(f"Render device available as {context.device_name}")
         return
 
     context.device_name = torch.cuda.get_device_name(device)
@@ -134,8 +154,6 @@ def device_init(context, device):
     log.info(f'Setting {device} as active, with precision: {"half" if context.half_precision else "full"}')
     torch.cuda.device(device)
 
-    return
-
 
 def needs_to_force_full_precision(context):
     if "FORCE_FULL_PRECISION" in os.environ:
@@ -147,6 +165,7 @@ def needs_to_force_full_precision(context):
         and (
             " 1660" in device_name
             or " 1650" in device_name
+            or " 1630" in device_name
             or " t400" in device_name
             or " t550" in device_name
             or " t600" in device_name
@@ -158,14 +177,16 @@ def needs_to_force_full_precision(context):
 
 
 def get_max_vram_usage_level(device):
-    if device != "cpu":
+    if "cuda" in device:
         _, mem_total = torch.cuda.mem_get_info(device)
-        mem_total /= float(10**9)
+    else:
+        return "high"
 
-        if mem_total < 4.5:
-            return "low"
-        elif mem_total < 6.5:
-            return "balanced"
+    mem_total /= float(10**9)
+    if mem_total < 4.5:
+        return "low"
+    elif mem_total < 6.5:
+        return "balanced"
 
     return "high"
 
@@ -174,7 +195,7 @@ def validate_device_id(device, log_prefix=""):
     def is_valid():
         if not isinstance(device, str):
             return False
-        if device == "cpu":
+        if device == "cpu" or device == "mps":
             return True
         if not device.startswith("cuda:") or not device[5:].isnumeric():
             return False
@@ -182,7 +203,7 @@ def validate_device_id(device, log_prefix=""):
 
     if not is_valid():
         raise EnvironmentError(
-            f"{log_prefix}: device id should be 'cpu', or 'cuda:N' (where N is an integer index for the GPU). Got: {device}"
+            f"{log_prefix}: device id should be 'cpu', 'mps', or 'cuda:N' (where N is an integer index for the GPU). Got: {device}"
         )
 
 
@@ -198,15 +219,15 @@ def is_device_compatible(device):
         log.error(str(e))
         return False
 
-    if device == "cpu":
+    if device in ("cpu", "mps"):
         return True
     # Memory check
     try:
         _, mem_total = torch.cuda.mem_get_info(device)
         mem_total /= float(10**9)
-        if mem_total < 3.0:
+        if mem_total < 1.9:
             if is_device_compatible.history.get(device) == None:
-                log.warn(f"GPU {device} with less than 3 GB of VRAM is not compatible with Stable Diffusion")
+                log.warn(f"GPU {device} with less than 2 GB of VRAM is not compatible with Stable Diffusion")
                 is_device_compatible.history[device] = 1
             return False
     except RuntimeError as e:
@@ -217,14 +238,14 @@ def is_device_compatible(device):
 
 def get_processor_name():
     try:
-        import platform, subprocess
+        import subprocess
 
         if platform.system() == "Windows":
             return platform.processor()
         elif platform.system() == "Darwin":
             os.environ["PATH"] = os.environ["PATH"] + os.pathsep + "/usr/sbin"
             command = "sysctl -n machdep.cpu.brand_string"
-            return subprocess.check_output(command).strip()
+            return subprocess.check_output(command, shell=True).decode().strip()
         elif platform.system() == "Linux":
             command = "cat /proc/cpuinfo"
             all_info = subprocess.check_output(command, shell=True).decode().strip()

ui/easydiffusion/easydb/crud.py

@@ -0,0 +1,24 @@
+from sqlalchemy.orm import Session
+
+from easydiffusion.easydb import models, schemas
+
+
+def get_bucket_by_path(db: Session, path: str):
+    return db.query(models.Bucket).filter(models.Bucket.path == path).first()
+
+
+def create_bucket(db: Session, bucket: schemas.BucketCreate):
+    db_bucket = models.Bucket(path=bucket.path)
+    db.add(db_bucket)
+    db.commit()
+    db.refresh(db_bucket)
+    return db_bucket
+
+
+def create_bucketfile(db: Session, bucketfile: schemas.BucketFileCreate, bucket_id: int):
+    db_bucketfile = models.BucketFile(**bucketfile.dict(), bucket_id=bucket_id)
+    db.merge(db_bucketfile)
+    db.commit()
+    db_bucketfile = db.query(models.BucketFile).filter(models.BucketFile.bucket_id==bucket_id, models.BucketFile.filename==bucketfile.filename).first()
+    return db_bucketfile
+

ui/easydiffusion/easydb/database.py

@@ -0,0 +1,14 @@
+import os
+from easydiffusion import app
+
+from sqlalchemy import create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+
+os.makedirs(app.BUCKET_DIR, exist_ok=True)
+SQLALCHEMY_DATABASE_URL = "sqlite:///"+os.path.join(app.BUCKET_DIR, "bucket.db")
+
+engine = create_engine(SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False})
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+BucketBase = declarative_base()

ui/easydiffusion/easydb/models.py

@@ -0,0 +1,25 @@
+from sqlalchemy import Boolean, Column, ForeignKey, Integer, String, BLOB
+from sqlalchemy.orm import relationship
+
+from easydiffusion.easydb.database import BucketBase
+
+
+class Bucket(BucketBase):
+    __tablename__ = "bucket"
+
+    id = Column(Integer, primary_key=True, index=True)
+    path = Column(String, unique=True, index=True)
+
+    bucketfiles = relationship("BucketFile", back_populates="bucket")
+
+
+class BucketFile(BucketBase):
+    __tablename__ = "bucketfile"
+
+    filename = Column(String, index=True, primary_key=True)
+    bucket_id = Column(Integer, ForeignKey("bucket.id"), primary_key=True)
+
+    data = Column(BLOB, index=False)
+
+    bucket = relationship("Bucket", back_populates="bucketfiles")
+

ui/easydiffusion/easydb/schemas.py

@@ -0,0 +1,36 @@
+from typing import List, Union
+
+from pydantic import BaseModel
+
+
+class BucketFileBase(BaseModel):
+    filename: str
+    data: bytes
+
+
+class BucketFileCreate(BucketFileBase):
+    pass
+
+
+class BucketFile(BucketFileBase):
+    bucket_id: int
+
+    class Config:
+        orm_mode = True
+
+
+class BucketBase(BaseModel):
+    path: str
+
+
+class BucketCreate(BucketBase):
+    pass
+
+
+class Bucket(BucketBase):
+    id: int
+    bucketfiles: List[BucketFile] = []
+
+    class Config:
+        orm_mode = True
+

ui/easydiffusion/model_manager.py

@@ -1,63 +1,125 @@
 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, unload_model, scan_model
+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
+from sdkit.models.model_loader.embeddings import get_embedding_token
 
-KNOWN_MODEL_TYPES = ["stable-diffusion", "vae", "hypernetwork", "gfpgan", "realesrgan"]
+KNOWN_MODEL_TYPES = [
+    "stable-diffusion",
+    "vae",
+    "hypernetwork",
+    "gfpgan",
+    "realesrgan",
+    "lora",
+    "codeformer",
+    "embeddings",
+    "controlnet",
+]
 MODEL_EXTENSIONS = {
     "stable-diffusion": [".ckpt", ".safetensors"],
     "vae": [".vae.pt", ".ckpt", ".safetensors"],
     "hypernetwork": [".pt", ".safetensors"],
     "gfpgan": [".pth"],
     "realesrgan": [".pth"],
+    "lora": [".ckpt", ".safetensors", ".pt"],
+    "codeformer": [".pth"],
+    "embeddings": [".pt", ".bin", ".safetensors"],
+    "controlnet": [".pth", ".safetensors"],
 }
 DEFAULT_MODELS = {
-    "stable-diffusion": [  # needed to support the legacy installations
-        "custom-model",  # only one custom model file was supported initially, creatively named 'custom-model'
-        "sd-v1-4",  # Default fallback.
+    "stable-diffusion": [
+        {"file_name": "sd-v1-4.ckpt", "model_id": "1.4"},
+    ],
+    "gfpgan": [
+        {"file_name": "GFPGANv1.4.pth", "model_id": "1.4"},
+    ],
+    "realesrgan": [
+        {"file_name": "RealESRGAN_x4plus.pth", "model_id": "x4plus"},
+        {"file_name": "RealESRGAN_x4plus_anime_6B.pth", "model_id": "x4plus_anime_6"},
+    ],
+    "vae": [
+        {"file_name": "vae-ft-mse-840000-ema-pruned.ckpt", "model_id": "vae-ft-mse-840000-ema-pruned"},
     ],
-    "gfpgan": ["GFPGANv1.3"],
-    "realesrgan": ["RealESRGAN_x4plus"],
 }
-MODELS_TO_LOAD_ON_START = ["stable-diffusion", "vae", "hypernetwork"]
+MODELS_TO_LOAD_ON_START = ["stable-diffusion", "vae", "hypernetwork", "lora"]
 
 known_models = {}
 
 
 def init():
     make_model_folders()
-    getModels()  # run this once, to cache the picklescan results
+    migrate_legacy_model_location()  # if necessary
+    download_default_models_if_necessary()
 
 
 def load_default_models(context: Context):
-    set_vram_optimizations(context)
+    from easydiffusion import runtime
+
+    runtime.set_vram_optimizations(context)
 
     # init default model paths
     for model_type in MODELS_TO_LOAD_ON_START:
-        context.model_paths[model_type] = resolve_model_to_use(model_type=model_type)
+        context.model_paths[model_type] = resolve_model_to_use(model_type=model_type, fail_if_not_found=False)
         try:
-            load_model(context, model_type)
+            load_model(
+                context,
+                model_type,
+                scan_model=context.model_paths[model_type] != None
+                and not context.model_paths[model_type].endswith(".safetensors"),
+            )
+            if model_type in context.model_load_errors:
+                del context.model_load_errors[model_type]
         except Exception as e:
             log.error(f"[red]Error while loading {model_type} model: {context.model_paths[model_type]}[/red]")
-            log.error(f"[red]Error: {e}[/red]")
-            log.error(f"[red]Consider removing the model from the model folder.[red]")
+            if "DefaultCPUAllocator: not enough memory" in str(e):
+                log.error(
+                    f"[red]Your PC is low on system RAM. Please add some virtual memory (or swap space) by following the instructions at this link: https://www.ibm.com/docs/en/opw/8.2.0?topic=tuning-optional-increasing-paging-file-size-windows-computers[/red]"
+                )
+            else:
+                log.exception(e)
+            del context.model_paths[model_type]
+
+            context.model_load_errors[model_type] = str(e)  # storing the entire Exception can lead to memory leaks
 
 
 def unload_all(context: Context):
     for model_type in KNOWN_MODEL_TYPES:
         unload_model(context, model_type)
+        if model_type in context.model_load_errors:
+            del context.model_load_errors[model_type]
 
 
-def resolve_model_to_use(model_name: str = None, model_type: str = None):
+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 = []
+    for m in model_names:
+        if model_type == "embeddings":
+            try:
+                resolve_model_to_use_single(m, model_type)
+            except FileNotFoundError:  # try with spaces
+                m = m.replace("_", " ")
+
+        path = resolve_model_to_use_single(m, model_type, fail_if_not_found)
+        model_paths.append(path)
+
+    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()
 
-    model_dirs = [os.path.join(app.MODELS_DIR, model_type), app.SD_DIR]
+    model_dir = os.path.join(app.MODELS_DIR, model_type)
     if not model_name:  # When None try user configured model.
         # config = getConfig()
         if "model" in config and model_type in config["model"]:
@@ -65,80 +127,132 @@ def resolve_model_to_use(model_name: str = None, model_type: str = None):
 
     if model_name:
         # Check models directory
-        models_dir_path = os.path.join(app.MODELS_DIR, model_type, model_name)
+        model_path = os.path.join(model_dir, model_name)
+        if os.path.exists(model_path):
+            return model_path
         for model_extension in model_extensions:
-            if os.path.exists(models_dir_path + model_extension):
-                return models_dir_path + model_extension
+            if os.path.exists(model_path + model_extension):
+                return model_path + model_extension
             if os.path.exists(model_name + model_extension):
                 return os.path.abspath(model_name + model_extension)
 
-    # Default locations
-    if model_name in default_models:
-        default_model_path = os.path.join(app.SD_DIR, model_name)
-        for model_extension in model_extensions:
-            if os.path.exists(default_model_path + model_extension):
-                return default_model_path + model_extension
-
     # Can't find requested model, check the default paths.
-    for default_model in default_models:
-        for model_dir in model_dirs:
-            default_model_path = os.path.join(model_dir, default_model)
-            for model_extension in model_extensions:
-                if os.path.exists(default_model_path + model_extension):
-                    if model_name is not None:
-                        log.warn(
-                            f"Could not find the configured custom model {model_name}{model_extension}. Using the default one: {default_model_path}{model_extension}"
-                        )
-                    return default_model_path + model_extension
+    if model_type == "stable-diffusion" and not fail_if_not_found:
+        for default_model in default_models:
+            default_model_path = os.path.join(model_dir, default_model["file_name"])
+            if os.path.exists(default_model_path):
+                if model_name is not None:
+                    log.warn(
+                        f"Could not find the configured custom model {model_name}. Using the default one: {default_model_path}"
+                    )
+                return default_model_path
 
-    return None
+    if model_name and fail_if_not_found:
+        raise FileNotFoundError(
+            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):
-    model_paths_in_req = {
-        "stable-diffusion": task_data.use_stable_diffusion_model,
-        "vae": task_data.use_vae_model,
-        "hypernetwork": task_data.use_hypernetwork_model,
-        "gfpgan": task_data.use_face_correction,
-        "realesrgan": task_data.use_upscale,
-        "nsfw_checker": True if task_data.block_nsfw else None,
-    }
+def reload_models_if_necessary(context: Context, models_data: ModelsData, models_to_force_reload: list = []):
     models_to_reload = {
         model_type: path
-        for model_type, path in model_paths_in_req.items()
-        if context.model_paths.get(model_type) != path
+        for model_type, path in models_data.model_paths.items()
+        if context.model_paths.get(model_type) != path or (path is not None and context.models.get(model_type) is None)
     }
 
-    if set_vram_optimizations(context):  # reload SD
-        models_to_reload["stable-diffusion"] = model_paths_in_req["stable-diffusion"]
+    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
+
+    for model_type in models_to_force_reload:
+        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
-        action_fn(context, model_type, scan_model=False)  # we've scanned them already
+        extra_params = models_data.model_params.get(model_type, {})
+        try:
+            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:
+            log.exception(e)
+            if action_fn == load_model:
+                context.model_load_errors[model_type] = str(e)  # storing the entire Exception can lead to memory leaks
 
 
-def resolve_model_paths(task_data: TaskData):
-    task_data.use_stable_diffusion_model = resolve_model_to_use(
-        task_data.use_stable_diffusion_model, model_type="stable-diffusion"
-    )
-    task_data.use_vae_model = resolve_model_to_use(task_data.use_vae_model, model_type="vae")
-    task_data.use_hypernetwork_model = resolve_model_to_use(task_data.use_hypernetwork_model, model_type="hypernetwork")
+def resolve_model_paths(models_data: ModelsData):
+    model_paths = models_data.model_paths
+    for model_type in model_paths:
+        skip_models = cn_filters + ["latent_upscaler", "nsfw_checker"]
+        if model_type in skip_models:  # doesn't use model paths
+            continue
+        if 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)
 
-    if task_data.use_face_correction:
-        task_data.use_face_correction = resolve_model_to_use(task_data.use_face_correction, "gfpgan")
-    if task_data.use_upscale:
-        task_data.use_upscale = resolve_model_to_use(task_data.use_upscale, "realesrgan")
+        model_paths[model_type] = resolve_model_to_use(model_paths[model_type], model_type=model_type)
 
 
-def set_vram_optimizations(context: Context):
-    config = app.getConfig()
-    vram_usage_level = config.get("vram_usage_level", "balanced")
+def fail_if_models_did_not_load(context: Context):
+    for model_type in KNOWN_MODEL_TYPES:
+        if model_type in context.model_load_errors:
+            e = context.model_load_errors[model_type]
+            raise Exception(f"Could not load the {model_type} model! Reason: " + e)
 
-    if vram_usage_level != context.vram_usage_level:
-        context.vram_usage_level = vram_usage_level
-        return True
+
+def download_default_models_if_necessary():
+    for model_type, models in DEFAULT_MODELS.items():
+        for model in models:
+            try:
+                download_if_necessary(model_type, model["file_name"], model["model_id"])
+            except:
+                traceback.print_exc()
+                app.fail_and_die(fail_type="model_download", data=model_type)
+
+        print(model_type, "model(s) found.")
+
+
+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) 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_config_if_available=False)
+
+
+def migrate_legacy_model_location():
+    'Move the models inside the legacy "stable-diffusion" folder, to their respective folders'
+
+    for model_type, models in DEFAULT_MODELS.items():
+        for model in models:
+            file_name = model["file_name"]
+            legacy_path = os.path.join(app.SD_DIR, file_name)
+            if os.path.exists(legacy_path):
+                shutil.move(legacy_path, os.path.join(app.MODELS_DIR, model_type, file_name))
+
+
+def any_model_exists(model_type: str) -> bool:
+    extensions = MODEL_EXTENSIONS.get(model_type, [])
+    for ext in extensions:
+        if any(glob(f"{app.MODELS_DIR}/{model_type}/**/*{ext}", recursive=True)):
+            return True
 
     return False
 
@@ -164,13 +278,23 @@ def is_malicious_model(file_path):
         if scan_result.issues_count > 0 or scan_result.infected_files > 0:
             log.warn(
                 ":warning: [bold red]Scan %s: %d scanned, %d issue, %d infected.[/bold red]"
-                % (file_path, scan_result.scanned_files, scan_result.issues_count, scan_result.infected_files)
+                % (
+                    file_path,
+                    scan_result.scanned_files,
+                    scan_result.issues_count,
+                    scan_result.infected_files,
+                )
             )
             return True
         else:
             log.debug(
                 "Scan %s: [green]%d scanned, %d issue, %d infected.[/green]"
-                % (file_path, scan_result.scanned_files, scan_result.issues_count, scan_result.infected_files)
+                % (
+                    file_path,
+                    scan_result.scanned_files,
+                    scan_result.issues_count,
+                    scan_result.infected_files,
+                )
             )
             return False
     except Exception as e:
@@ -178,17 +302,30 @@ def is_malicious_model(file_path):
     return False
 
 
-def getModels():
+def getModels(scan_for_malicious: bool = True):
     models = {
-        "active": {
-            "stable-diffusion": "sd-v1-4",
-            "vae": "",
-            "hypernetwork": "",
-        },
         "options": {
-            "stable-diffusion": ["sd-v1-4"],
+            "stable-diffusion": [{"sd-v1-4": "SD 1.4"}],
             "vae": [],
             "hypernetwork": [],
+            "lora": [],
+            "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"},
+                {"control_v11f1e_sd15_tile": "Tile"},
+            ],
         },
     }
 
@@ -196,13 +333,15 @@ def getModels():
 
     class MaliciousModelException(Exception):
         "Raised when picklescan reports a problem with a model"
-        pass
 
-    def scan_directory(directory, suffixes, directoriesFirst: bool = True):
+    def scan_directory(directory, suffixes, directoriesFirst: bool = True, default_entries=[], nameFilter=None):
         nonlocal models_scanned
-        tree = []
+
+        tree = list(default_entries)
+
         for entry in sorted(
-            os.scandir(directory), key=lambda entry: (entry.is_file() == directoriesFirst, entry.name.lower())
+            os.scandir(directory),
+            key=lambda entry: (entry.is_file() == directoriesFirst, entry.name.lower()),
         ):
             if entry.is_file():
                 matching_suffix = list(filter(lambda s: entry.name.endswith(s), suffixes))
@@ -214,18 +353,31 @@ 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
-                tree.append(entry.name[: -len(matching_suffix)])
+                if scan_for_malicious:
+                    known_models[entry.path] = mtime
+
+                model_id = entry.name[: -len(matching_suffix)]
+                if callable(nameFilter):
+                    model_id = nameFilter(model_id)
+
+                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)
+                scan = scan_directory(entry.path, suffixes, directoriesFirst=False, nameFilter=nameFilter)
 
                 if len(scan) != 0:
                     tree.append((entry.name, scan))
         return tree
 
-    def listModels(model_type):
+    def listModels(model_type, nameFilter=None):
         nonlocal models_scanned
 
         model_extensions = MODEL_EXTENSIONS.get(model_type, [])
@@ -234,22 +386,25 @@ 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, nameFilter=nameFilter
+            )
         except MaliciousModelException as e:
-            models["scan-error"] = e
+            models["scan-error"] = str(e)
 
+    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", nameFilter=get_embedding_token)
+    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[/]")
 
-    # legacy
-    custom_weight_path = os.path.join(app.SD_DIR, "custom-model.ckpt")
-    if os.path.exists(custom_weight_path):
-        models["options"]["stable-diffusion"].append("custom-model")
-
     return models

ui/easydiffusion/package_manager.py

@@ -0,0 +1,102 @@
+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 --pre --extra-index-url=https://pypi.nvidia.com --trusted-host pypi.nvidia.com",
+            "tensorrt-libs --pre --extra-index-url=https://pypi.nvidia.com --trusted-host pypi.nvidia.com",
+            "tensorrt --pre --extra-index-url=https://pypi.nvidia.com --trusted-host pypi.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) and os.path.isdir(trt_dir) and len(os.listdir(trt_dir)) > 0:
+        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"]
+    if module_name == "tensorrt":
+        commands += [
+            "protobuf==3.20.3 polygraphy==0.47.1 onnx==1.14.0 --extra-index-url=https://pypi.ngc.nvidia.com --trusted-host pypi.ngc.nvidia.com"
+        ]
+    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,177 +0,0 @@
-import queue
-import time
-import json
-import pprint
-
-from easydiffusion import device_manager
-from easydiffusion.types import TaskData, Response, Image as ResponseImage, UserInitiatedStop, GenerateImageRequest
-from easydiffusion.utils import get_printable_request, save_images_to_disk, log
-
-from sdkit import Context
-from sdkit.generate import generate_images
-from sdkit.filter import apply_filters
-from sdkit.utils import img_to_buffer, img_to_base64_str, latent_samples_to_images, gc
-
-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
-
-    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)).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
-    )
-    filtered_images = filter_images(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:
-            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:
-            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:
-            del context.partial_x_samples
-            context.partial_x_samples = None
-
-    return images, user_stopped
-
-
-def filter_images(task_data: TaskData, images: list, user_stopped):
-    if user_stopped:
-        return images
-
-    filters_to_apply = []
-    if task_data.block_nsfw:
-        filters_to_apply.append("nsfw_checker")
-    if task_data.use_face_correction and "gfpgan" in task_data.use_face_correction.lower():
-        filters_to_apply.append("gfpgan")
-    if task_data.use_upscale and "realesrgan" in task_data.use_upscale.lower():
-        filters_to_apply.append("realesrgan")
-
-    if len(filters_to_apply) == 0:
-        return images
-
-    return apply_filters(context, filters_to_apply, images, scale=task_data.upscale_amount)
-
-
-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),
-            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 = []
-        images = latent_samples_to_images(context, x_samples)
-        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):
-        nonlocal last_callback_time
-
-        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(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,51 @@
+"""
+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", True)
+
+    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

@@ -2,29 +2,50 @@
 Notes:
     async endpoints always run on the main thread. Without they run on the thread pool.
 """
+import datetime
+import mimetypes
 import os
 import traceback
-import datetime
 from typing import List, Union
 
+from easydiffusion import app, model_manager, task_manager, package_manager
+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
+from pydantic import BaseModel, Extra
 from starlette.responses import FileResponse, JSONResponse, StreamingResponse
-from pydantic import BaseModel
-
-from easydiffusion import app, model_manager, task_manager
-from easydiffusion.types import TaskData, GenerateImageRequest, MergeRequest
-from easydiffusion.utils import log
+from pycloudflared import try_cloudflare
 
 log.info(f"started in {app.SD_DIR}")
 log.info(f"started at {datetime.datetime.now():%x %X}")
 
 server_api = FastAPI()
 
-NOCACHE_HEADERS = {"Cache-Control": "no-cache, no-store, must-revalidate", "Pragma": "no-cache", "Expires": "0"}
+NOCACHE_HEADERS = {
+    "Cache-Control": "no-cache, no-store, must-revalidate",
+    "Pragma": "no-cache",
+    "Expires": "0",
+}
 
 
 class NoCacheStaticFiles(StaticFiles):
+    def __init__(self, directory: str):
+        # follow_symlink is only available on fastapi >= 0.92.0
+        if os.path.islink(directory):
+            super().__init__(directory=os.path.realpath(directory))
+        else:
+            super().__init__(directory=directory)
+
     def is_not_modified(self, response_headers, request_headers) -> bool:
         if "content-type" in response_headers and (
             "javascript" in response_headers["content-type"] or "css" in response_headers["content-type"]
@@ -35,21 +56,38 @@ class NoCacheStaticFiles(StaticFiles):
         return super().is_not_modified(response_headers, request_headers)
 
 
-class SetAppConfigRequest(BaseModel):
+class SetAppConfigRequest(BaseModel, extra=Extra.allow):
     update_branch: str = None
     render_devices: Union[List[str], List[int], str, int] = None
     model_vae: str = None
     ui_open_browser_on_start: bool = None
     listen_to_network: bool = None
     listen_port: int = None
+    test_diffusers: bool = True
 
 
 def init():
-    server_api.mount("/media", NoCacheStaticFiles(directory=os.path.join(app.SD_UI_DIR, "media")), name="media")
+    mimetypes.init()
+    mimetypes.add_type("text/css", ".css")
+
+    if os.path.isdir(app.CUSTOM_MODIFIERS_DIR):
+        server_api.mount(
+            "/media/modifier-thumbnails/custom",
+            NoCacheStaticFiles(directory=app.CUSTOM_MODIFIERS_DIR),
+            name="custom-thumbnails",
+        )
+
+    server_api.mount(
+        "/media",
+        NoCacheStaticFiles(directory=os.path.join(app.SD_UI_DIR, "media")),
+        name="media",
+    )
 
     for plugins_dir, dir_prefix in app.UI_PLUGINS_SOURCES:
         server_api.mount(
-            f"/plugins/{dir_prefix}", NoCacheStaticFiles(directory=plugins_dir), name=f"plugins-{dir_prefix}"
+            f"/plugins/{dir_prefix}",
+            NoCacheStaticFiles(directory=plugins_dir),
+            name=f"plugins-{dir_prefix}",
         )
 
     @server_api.post("/app_config")
@@ -57,8 +95,8 @@ def init():
         return set_app_config_internal(req)
 
     @server_api.get("/get/{key:path}")
-    def read_web_data(key: str = None):
-        return read_web_data_internal(key)
+    def read_web_data(key: str = None, scan_for_malicious: bool = True):
+        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):
@@ -68,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)
@@ -85,6 +127,22 @@ def init():
     def get_image(task_id: int, img_id: int):
         return get_image_internal(task_id, img_id)
 
+    @server_api.post("/tunnel/cloudflare/start")
+    def start_cloudflare_tunnel(req: dict):
+        return start_cloudflare_tunnel_internal(req)
+
+    @server_api.post("/tunnel/cloudflare/stop")
+    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("/sha256/{obj_path:path}")
+    def get_sha256(obj_path: str):
+        return get_sha256_internal(obj_path)
+
     @server_api.get("/")
     def read_root():
         return FileResponse(os.path.join(app.SD_UI_DIR, "index.html"), headers=NOCACHE_HEADERS)
@@ -113,6 +171,13 @@ def set_app_config_internal(req: SetAppConfigRequest):
         if "net" not in config:
             config["net"] = {}
         config["net"]["listen_port"] = int(req.listen_port)
+
+    config["test_diffusers"] = req.test_diffusers
+
+    for property, property_value in req.dict().items():
+        if property_value is not None and property not in req.__fields__:
+            config[property] = property_value
+
     try:
         app.setConfig(config)
 
@@ -135,7 +200,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":
@@ -154,9 +219,10 @@ 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 FileResponse(os.path.join(app.SD_UI_DIR, "modifiers.json"), headers=NOCACHE_HEADERS)
+        return JSONResponse(app.get_image_modifiers(), headers=NOCACHE_HEADERS)
     elif key == "ui_plugins":
         return JSONResponse(app.getUIPlugins(), headers=NOCACHE_HEADERS)
     else:
@@ -168,22 +234,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()
@@ -193,34 +273,59 @@ 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,
-            task_data.use_vae_model,
-            task_data.use_hypernetwork_model,
+            models_data.model_paths.get("stable-diffusion"),
+            models_data.model_paths.get("vae"),
+            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)}",
-            "task": id(new_task),
+            "stream": f"/image/stream/{task.id}",
+            "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):
     try:
-        from sdkit.train import merge_models
         from easydiffusion.utils.save_utils import filename_regex
+        from sdkit.train import merge_models
 
         mergeReq: MergeRequest = MergeRequest.parse_obj(req)
 
@@ -228,7 +333,11 @@ def model_merge_internal(req: dict):
             model_manager.resolve_model_to_use(mergeReq.model0, "stable-diffusion"),
             model_manager.resolve_model_to_use(mergeReq.model1, "stable-diffusion"),
             mergeReq.ratio,
-            os.path.join(app.MODELS_DIR, "stable-diffusion", filename_regex.sub("_", mergeReq.out_path)),
+            os.path.join(
+                app.MODELS_DIR,
+                "stable-diffusion",
+                filename_regex.sub("_", mergeReq.out_path),
+            ),
             mergeReq.use_fp16,
         )
         return JSONResponse({"status": "OK"}, headers=NOCACHE_HEADERS)
@@ -283,3 +392,89 @@ def get_image_internal(task_id: int, img_id: int):
         return StreamingResponse(img_data, media_type="image/jpeg")
     except KeyError as e:
         raise HTTPException(status_code=500, detail=str(e))
+
+
+# ---- Cloudflare Tunnel ----
+class CloudflareTunnel:
+    def __init__(self):
+        config = app.getConfig()
+        self.urls = None
+        self.port = config.get("net", {}).get("listen_port")
+
+    def start(self):
+        if self.port:
+            self.urls = try_cloudflare(self.port)
+
+    def stop(self):
+        if self.urls:
+            try_cloudflare.terminate(self.port)
+            self.urls = None
+
+    @property
+    def address(self):
+        if self.urls:
+            return self.urls.tunnel
+        else:
+            return None
+
+
+cloudflare = CloudflareTunnel()
+
+
+def start_cloudflare_tunnel_internal(req: dict):
+    try:
+        cloudflare.start()
+        log.info(f"- Started cloudflare tunnel. Using address: {cloudflare.address}")
+        return JSONResponse({"address": cloudflare.address})
+    except Exception as e:
+        log.error(str(e))
+        log.error(traceback.format_exc())
+        return HTTPException(status_code=500, detail=str(e))
+
+
+def stop_cloudflare_tunnel_internal(req: dict):
+    try:
+        cloudflare.stop()
+    except Exception as e:
+        log.error(str(e))
+        log.error(traceback.format_exc())
+        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))
+
+def get_sha256_internal(obj_path):
+    import hashlib
+    from easydiffusion.utils import sha256sum
+
+    path = obj_path.split("/")
+    type = path.pop(0)
+
+    try:
+        model_path = model_manager.resolve_model_to_use("/".join(path), type)
+    except Exception as e:
+        log.error(str(e))
+        log.error(traceback.format_exc())
+
+        return HTTPException(status_code=404)
+    try:
+        digest = sha256sum(model_path)
+        return {"digest": digest}
+    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

@@ -7,16 +7,18 @@ Notes:
 import json
 import traceback
 
-TASK_TTL = 15 * 60  # seconds, Discard last session's task timeout
+TASK_TTL = 30 * 60  # seconds, Discard last session's task timeout
 
-import torch
-import queue, threading, time, weakref
+import queue
+import threading
+import time
+import weakref
 from typing import Any, Hashable
 
+import torch
 from easydiffusion import device_manager
-from easydiffusion.types import TaskData, GenerateImageRequest
+from easydiffusion.tasks import Task
 from easydiffusion.utils import log
-
 from sdkit.utils import gc
 
 THREAD_NAME_PREFIX = ""
@@ -25,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.
@@ -56,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):
@@ -121,8 +84,8 @@ class DataCache:
             # Remove Items
             for key in to_delete:
                 (_, val) = self._base[key]
-                if isinstance(val, RenderTask):
-                    log.debug(f"RenderTask {key} expired. Data removed.")
+                if isinstance(val, Task):
+                    log.debug(f"Task {key} expired. Data removed.")
                 elif isinstance(val, SessionState):
                     log.debug(f"Session {key} expired. Data removed.")
                 else:
@@ -167,7 +130,7 @@ class DataCache:
             raise Exception("DataCache.put" + ERR_LOCK_FAILED)
         try:
             self._base[key] = (self._get_ttl_time(ttl), value)
-        except Exception as e:
+        except Exception:
             log.error(traceback.format_exc())
             return False
         else:
@@ -218,8 +181,8 @@ class SessionState:
                 tasks.append(task)
         return tasks
 
-    def put(self, task, ttl=TASK_TTL):
-        task_id = id(task)
+    def put(self, task: Task, ttl=TASK_TTL):
+        task_id = task.id
         self._tasks_ids.append(task_id)
         if not task_cache.put(task_id, task, ttl):
             return False
@@ -228,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()
@@ -240,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.
@@ -249,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
@@ -264,19 +232,19 @@ def thread_get_next_task():
 def thread_render(device):
     global current_state, current_state_error
 
-    from easydiffusion import renderer, model_manager
+    from easydiffusion import model_manager, runtime
 
     try:
-        renderer.init(device)
+        runtime.init(device)
 
         weak_thread_data[threading.current_thread()] = {
-            "device": renderer.context.device,
-            "device_name": renderer.context.device_name,
+            "device": runtime.context.device,
+            "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:
@@ -288,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}")
-            model_manager.unload_all(renderer.context)
+            log.info(f"Shutting down thread for device {runtime.context.device}")
+            model_manager.unload_all(runtime.context)
             return
         if isinstance(current_state_error, SystemExit):
             current_state = ServerStates.Unavailable
@@ -309,54 +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
-
-                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)
-
-            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)
-            session_cache.keep(task.task_data.session_id, TASK_TTL)
+            keep_task_alive(task)
         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(
-                f"Session {task.task_data.session_id} task {id(task)} completed by {renderer.context.device_name}."
-            )
+            log.info(f"Session {task.session_id} task {task.id} completed by {runtime.context.device_name}.")
         current_state = ServerStates.Online
 
 
@@ -385,7 +330,7 @@ def get_devices():
     }
 
     def get_device_info(device):
-        if device == "cpu":
+        if device in ("cpu", "mps"):
             return {"name": device_manager.get_processor_name()}
 
         mem_free, mem_total = torch.cuda.mem_get_info(device)
@@ -400,14 +345,17 @@ def get_devices():
         }
 
     # list the compatible devices
-    gpu_count = torch.cuda.device_count()
-    for device in range(gpu_count):
+    cuda_count = torch.cuda.device_count()
+    for device in range(cuda_count):
         device = f"cuda:{device}"
         if not device_manager.is_device_compatible(device):
             continue
 
         devices["all"].update({device: get_device_info(device)})
 
+    if device_manager.is_mps_available():
+        devices["all"].update({"mps": get_device_info("mps")})
+
     devices["all"].update({"cpu": get_device_info("cpu")})
 
     # list the activated devices
@@ -425,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
 
 
@@ -535,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(new_task, TASK_TTL):
+    if session.put(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,115 @@
+import json
+import pprint
+
+from sdkit.filter import apply_filters
+from sdkit.models import load_model
+from sdkit.utils import img_to_base64_str, get_image, 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)
+
+        if isinstance(self.request.image, list):
+            images = [get_image(img) for img in self.request.image]
+        else:
+            images = get_image(self.request.image)
+
+        images = filter_images(context, images, 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,347 @@
+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,
+    resize_img,
+    get_image,
+    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 = get_image(req.control_image)
+            req.control_image = resize_img(req.control_image.convert("RGB"), req.width, req.height, clamp_to_8=True)
+            req.control_image = filter_images(context, req.control_image, task_data.control_filter_to_apply)[0]
+
+        if req.init_image is not None and int(req.num_inference_steps * req.prompt_strength) == 0:
+            req.prompt_strength = 1 / req.num_inference_steps if req.num_inference_steps > 0 else 1
+
+        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,5 +1,6 @@
+from typing import Any, List, Dict, Union
+
 from pydantic import BaseModel
-from typing import Any
 
 
 class GenerateImageRequest(BaseModel):
@@ -16,11 +17,45 @@ 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: 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):
@@ -29,21 +64,28 @@ class TaskData(BaseModel):
     save_to_disk_path: str = None
     vram_usage_level: str = "balanced"  # or "low" or "medium"
 
-    use_face_correction: str = None  # or "GFPGANv1.3"
-    use_upscale: str = None  # or "RealESRGAN_x4plus" or "RealESRGAN_x4plus_anime_6B"
+    use_face_correction: Union[str, List[str]] = None  # or "GFPGANv1.3"
+    use_upscale: Union[str, List[str]] = None
     upscale_amount: int = 4  # or 2
-    use_stable_diffusion_model: str = "sd-v1-4"
-    # use_stable_diffusion_config: str = "v1-inference"
-    use_vae_model: str = None
-    use_hypernetwork_model: str = None
+    latent_upscaler_steps: int = 10
+    use_stable_diffusion_model: Union[str, List[str]] = "sd-v1-4"
+    use_vae_model: Union[str, List[str]] = None
+    use_hypernetwork_model: Union[str, List[str]] = None
+    use_lora_model: Union[str, List[str]] = None
+    use_controlnet_model: Union[str, List[str]] = None
+    use_embeddings_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
     metadata_output_format: str = "txt"  # or "json"
     stream_image_progress: bool = False
     stream_image_progress_interval: int = 5
+    clip_skip: bool = False
+    codeformer_upscale_faces: bool = False
+    codeformer_fidelity: float = 0.5
 
 
 class MergeRequest(BaseModel):
@@ -72,24 +114,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": [],
         }
 
@@ -99,5 +156,112 @@ 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["embeddings"] = old_req.get("use_embeddings_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/__init__.py

@@ -6,3 +6,15 @@ from .save_utils import (
     save_images_to_disk,
     get_printable_request,
 )
+
+def sha256sum(filename):
+    sha256 = hashlib.sha256()
+    with open(filename, "rb") as f:
+        while True:
+            data = f.read(8192)  # Read in chunks of 8192 bytes
+            if not data:
+                break
+            sha256.update(data)
+
+    return sha256.hexdigest()
+

ui/easydiffusion/utils/save_utils.py

@@ -1,104 +1,211 @@
 import os
-import time
-import base64
 import re
+import time
+import regex
 
-from easydiffusion.types import TaskData, GenerateImageRequest
+from datetime import datetime
+from functools import reduce
 
-from sdkit.utils import save_images, save_dicts
+from easydiffusion import app
+from easydiffusion.types import GenerateImageRequest, TaskData, OutputFormatData
+from numpy import base_repr
+from sdkit.utils import save_dicts, save_images
+from sdkit.models.model_loader.embeddings import get_embedding_token
 
 filename_regex = re.compile("[^a-zA-Z0-9._-]")
+img_number_regex = re.compile("([0-9]{5,})")
 
 # keep in sync with `ui/media/js/dnd.js`
 TASK_TEXT_MAPPING = {
     "prompt": "Prompt",
+    "negative_prompt": "Negative Prompt",
+    "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",
     "height": "Height",
-    "seed": "Seed",
     "num_inference_steps": "Steps",
     "guidance_scale": "Guidance Scale",
     "prompt_strength": "Prompt Strength",
+    "use_lora_model": "LoRA model",
+    "lora_alpha": "LoRA Strength",
+    "use_hypernetwork_model": "Hypernetwork model",
+    "hypernetwork_strength": "Hypernetwork Strength",
+    "use_embeddings_model": "Embedding models",
+    "tiling": "Seamless Tiling",
     "use_face_correction": "Use Face Correction",
     "use_upscale": "Use Upscaling",
     "upscale_amount": "Upscale By",
-    "sampler_name": "Sampler",
-    "negative_prompt": "Negative Prompt",
-    "use_stable_diffusion_model": "Stable Diffusion model",
-    "use_vae_model": "VAE model",
-    "use_hypernetwork_model": "Hypernetwork model",
-    "hypernetwork_strength": "Hypernetwork Strength",
+    "latent_upscaler_steps": "Latent Upscaler Steps",
+}
+
+time_placeholders = {
+    "$yyyy": "%Y",
+    "$MM": "%m",
+    "$dd": "%d",
+    "$HH": "%H",
+    "$mm": "%M",
+    "$ss": "%S",
+}
+
+other_placeholders = {
+    "$id": lambda req, task_data: filename_regex.sub("_", task_data.session_id),
+    "$p": lambda req, task_data: filename_regex.sub("_", req.prompt)[:50],
+    "$s": lambda req, task_data: str(req.seed),
 }
 
 
-def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageRequest, task_data: TaskData):
+class ImageNumber:
+    _factory = None
+    _evaluated = False
+
+    def __init__(self, factory):
+        self._factory = factory
+        self._evaluated = None
+
+    def __call__(self) -> int:
+        if self._evaluated is None:
+            self._evaluated = self._factory()
+        return self._evaluated
+
+
+def format_placeholders(format: str, req: GenerateImageRequest, task_data: TaskData, now=None):
+    if now is None:
+        now = time.time()
+
+    for placeholder, time_format in time_placeholders.items():
+        if placeholder in format:
+            format = format.replace(placeholder, datetime.fromtimestamp(now).strftime(time_format))
+    for placeholder, replace_func in other_placeholders.items():
+        if placeholder in format:
+            format = format.replace(placeholder, replace_func(req, task_data))
+
+    return format
+
+
+def format_folder_name(format: str, req: GenerateImageRequest, task_data: TaskData):
+    format = format_placeholders(format, req, task_data)
+    return filename_regex.sub("_", format)
+
+
+def format_file_name(
+    format: str,
+    req: GenerateImageRequest,
+    task_data: TaskData,
+    now: float,
+    batch_file_number: int,
+    folder_img_number: ImageNumber,
+):
+    format = format_placeholders(format, req, task_data, now)
+
+    if "$n" in format:
+        format = format.replace("$n", f"{folder_img_number():05}")
+
+    if "$tsb64" in format:
+        img_id = base_repr(int(now * 10000), 36)[-7:] + base_repr(
+            int(batch_file_number), 36
+        )  # Base 36 conversion, 0-9, A-Z
+        format = format.replace("$tsb64", img_id)
+
+    if "$ts" in format:
+        format = format.replace("$ts", str(int(now * 1000) + batch_file_number))
+
+    return filename_regex.sub("_", format)
+
+
+def save_images_to_disk(
+    images: list, filtered_images: list, req: GenerateImageRequest, task_data: TaskData, output_format: OutputFormatData
+):
     now = time.time()
-    save_dir_path = os.path.join(task_data.save_to_disk_path, filename_regex.sub("_", task_data.session_id))
-    metadata_entries = get_metadata_entries_for_request(req, task_data)
-    make_filename = make_filename_callback(req, now=now)
+    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, output_format)
+    file_number = calculate_img_number(save_dir_path, task_data)
+    make_filename = make_filename_callback(
+        app_config.get("filename_format", "$p_$tsb64"),
+        req,
+        task_data,
+        file_number,
+        now=now,
+    )
 
     if task_data.show_only_filtered_image or filtered_images is images:
         save_images(
             filtered_images,
             save_dir_path,
             file_name=make_filename,
-            output_format=task_data.output_format,
-            output_quality=task_data.output_quality,
+            output_format=output_format.output_format,
+            output_quality=output_format.output_quality,
+            output_lossless=output_format.output_lossless,
         )
-        if task_data.metadata_output_format.lower() in ["json", "txt", "embed"]:
-            save_dicts(
-                metadata_entries,
-                save_dir_path,
-                file_name=make_filename,
-                output_format=task_data.metadata_output_format,
-                file_format=task_data.output_format,
-            )
+        if task_data.metadata_output_format:
+            for metadata_output_format in task_data.metadata_output_format.split(","):
+                if metadata_output_format.lower() in ["json", "txt", "embed"]:
+                    save_dicts(
+                        metadata_entries,
+                        save_dir_path,
+                        file_name=make_filename,
+                        output_format=metadata_output_format,
+                        file_format=output_format.output_format,
+                    )
     else:
-        make_filter_filename = make_filename_callback(req, now=now, suffix="filtered")
+        make_filter_filename = make_filename_callback(
+            app_config.get("filename_format", "$p_$tsb64"),
+            req,
+            task_data,
+            file_number,
+            now=now,
+            suffix="filtered",
+        )
 
         save_images(
             images,
             save_dir_path,
             file_name=make_filename,
-            output_format=task_data.output_format,
-            output_quality=task_data.output_quality,
+            output_format=output_format.output_format,
+            output_quality=output_format.output_quality,
+            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_quality=task_data.output_quality,
+            output_format=output_format.output_format,
+            output_quality=output_format.output_quality,
+            output_lossless=output_format.output_lossless,
         )
-        if task_data.metadata_output_format.lower() in ["json", "txt", "embed"]:
-            save_dicts(
-                metadata_entries,
-                save_dir_path,
-                file_name=make_filter_filename,
-                output_format=task_data.metadata_output_format,
-                file_format=task_data.output_format,
-            )
+        if task_data.metadata_output_format:
+            for metadata_output_format in task_data.metadata_output_format.split(","):
+                if metadata_output_format.lower() in ["json", "txt", "embed"]:
+                    save_dicts(
+                        metadata_entries,
+                        save_dir_path,
+                        file_name=make_filter_filename,
+                        output_format=metadata_output_format,
+                        file_format=output_format.output_format,
+                    )
 
 
-def get_metadata_entries_for_request(req: GenerateImageRequest, task_data: TaskData):
-    metadata = get_printable_request(req)
-    metadata.update(
-        {
-            "use_stable_diffusion_model": task_data.use_stable_diffusion_model,
-            "use_vae_model": task_data.use_vae_model,
-            "use_hypernetwork_model": task_data.use_hypernetwork_model,
-            "use_face_correction": task_data.use_face_correction,
-            "use_upscale": task_data.use_upscale,
-        }
-    )
-    if metadata["use_upscale"] is not None:
-        metadata["upscale_amount"] = task_data.upscale_amount
-    if task_data.use_hypernetwork_model is None:
-        del metadata["hypernetwork_strength"]
+def get_metadata_entries_for_request(req: GenerateImageRequest, task_data: TaskData, output_format: OutputFormatData):
+    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.lower() == "txt"
+    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):
@@ -107,26 +214,131 @@ def get_metadata_entries_for_request(req: GenerateImageRequest, task_data: TaskD
     return entries
 
 
-def get_printable_request(req: GenerateImageRequest):
-    metadata = req.dict()
-    del metadata["init_image"]
-    del metadata["init_image_mask"]
-    if req.init_image is None:
+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", True)
+
+    # Save the metadata in the order defined in TASK_TEXT_MAPPING
+    metadata = {}
+    for key in TASK_TEXT_MAPPING.keys():
+        if key in req_metadata:
+            metadata[key] = req_metadata[key]
+        elif key in task_data_metadata:
+            metadata[key] = task_data_metadata[key]
+
+        if key == "use_embeddings_model" 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():
+                        # Check if the filename has the right extension
+                        if not any(map(lambda ext: entry.name.endswith(ext), embeddings_extensions)):
+                            continue
+                        embedding_name_regex = regex.compile(r"(^|[\s,])" + regex.escape(get_embedding_token(entry.name)) + 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_embeddings_model"] = 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"]
+    if task_data.use_upscale is None and "upscale_amount" in metadata:
+        del metadata["upscale_amount"]
+    if task_data.use_hypernetwork_model is None and "hypernetwork_strength" in metadata:
+        del metadata["hypernetwork_strength"]
+    if task_data.use_lora_model is None and "lora_alpha" in metadata:
+        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"]
+
+    if using_diffusers:
+        for key in (x for x in ["use_hypernetwork_model", "hypernetwork_strength"] if x in metadata):
+            del metadata[key]
+    else:
+        for key in (
+            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
 
 
-def make_filename_callback(req: GenerateImageRequest, suffix=None, now=None):
+def make_filename_callback(
+    filename_format: str,
+    req: GenerateImageRequest,
+    task_data: TaskData,
+    folder_img_number: int,
+    suffix=None,
+    now=None,
+):
     if now is None:
         now = time.time()
 
     def make_filename(i):
-        img_id = base64.b64encode(int(now + i).to_bytes(8, "big")).decode()  # Generate unique ID based on time.
-        img_id = img_id.translate({43: None, 47: None, 61: None})[-8:]  # Remove + / = and keep last 8 chars.
-
-        prompt_flattened = filename_regex.sub("_", req.prompt)[:50]
-        name = f"{prompt_flattened}_{img_id}"
+        name = format_file_name(filename_format, req, task_data, now, i, folder_img_number)
         name = name if suffix is None else f"{name}_{suffix}"
+
         return name
 
     return make_filename
+
+
+def _calculate_img_number(save_dir_path: str, task_data: TaskData):
+    def get_highest_img_number(accumulator: int, file: os.DirEntry) -> int:
+        if not file.is_file:
+            return accumulator
+
+        if len(list(filter(lambda e: file.name.endswith(e), app.IMAGE_EXTENSIONS))) == 0:
+            return accumulator
+
+        get_highest_img_number.number_of_images = get_highest_img_number.number_of_images + 1
+
+        number_match = img_number_regex.match(file.name)
+        if not number_match:
+            return accumulator
+
+        file_number = number_match.group().lstrip("0")
+
+        # Handle 00000
+        return int(file_number) if file_number else 0
+
+    get_highest_img_number.number_of_images = 0
+
+    highest_file_number = -1
+
+    if os.path.isdir(save_dir_path):
+        existing_files = list(os.scandir(save_dir_path))
+        highest_file_number = reduce(get_highest_img_number, existing_files, -1)
+
+    calculated_img_number = max(highest_file_number, get_highest_img_number.number_of_images - 1)
+
+    if task_data.session_id in _calculate_img_number.session_img_numbers:
+        calculated_img_number = max(
+            _calculate_img_number.session_img_numbers[task_data.session_id],
+            calculated_img_number,
+        )
+
+    calculated_img_number = calculated_img_number + 1
+
+    _calculate_img_number.session_img_numbers[task_data.session_id] = calculated_img_number
+    return calculated_img_number
+
+
+_calculate_img_number.session_img_numbers = {}
+
+
+def calculate_img_number(save_dir_path: str, task_data: TaskData):
+    return ImageNumber(lambda: _calculate_img_number(save_dir_path, task_data))

ui/hotfix/9c24e6cd9f499d02c4f21a033736dabd365962dc80fe3aeb57a8f85ea45a20a3.26fead7ea4f0f843f6eb4055dfd25693f1a71f3c6871b184042d4b126244e142

@@ -1,171 +0,0 @@
-{
-  "_name_or_path": "clip-vit-large-patch14/",
-  "architectures": [
-    "CLIPModel"
-  ],
-  "initializer_factor": 1.0,
-  "logit_scale_init_value": 2.6592,
-  "model_type": "clip",
-  "projection_dim": 768,
-  "text_config": {
-    "_name_or_path": "",
-    "add_cross_attention": false,
-    "architectures": null,
-    "attention_dropout": 0.0,
-    "bad_words_ids": null,
-    "bos_token_id": 0,
-    "chunk_size_feed_forward": 0,
-    "cross_attention_hidden_size": null,
-    "decoder_start_token_id": null,
-    "diversity_penalty": 0.0,
-    "do_sample": false,
-    "dropout": 0.0,
-    "early_stopping": false,
-    "encoder_no_repeat_ngram_size": 0,
-    "eos_token_id": 2,
-    "finetuning_task": null,
-    "forced_bos_token_id": null,
-    "forced_eos_token_id": null,
-    "hidden_act": "quick_gelu",
-    "hidden_size": 768,
-    "id2label": {
-      "0": "LABEL_0",
-      "1": "LABEL_1"
-    },
-    "initializer_factor": 1.0,
-    "initializer_range": 0.02,
-    "intermediate_size": 3072,
-    "is_decoder": false,
-    "is_encoder_decoder": false,
-    "label2id": {
-      "LABEL_0": 0,
-      "LABEL_1": 1
-    },
-    "layer_norm_eps": 1e-05,
-    "length_penalty": 1.0,
-    "max_length": 20,
-    "max_position_embeddings": 77,
-    "min_length": 0,
-    "model_type": "clip_text_model",
-    "no_repeat_ngram_size": 0,
-    "num_attention_heads": 12,
-    "num_beam_groups": 1,
-    "num_beams": 1,
-    "num_hidden_layers": 12,
-    "num_return_sequences": 1,
-    "output_attentions": false,
-    "output_hidden_states": false,
-    "output_scores": false,
-    "pad_token_id": 1,
-    "prefix": null,
-    "problem_type": null,
-    "projection_dim" : 768,
-    "pruned_heads": {},
-    "remove_invalid_values": false,
-    "repetition_penalty": 1.0,
-    "return_dict": true,
-    "return_dict_in_generate": false,
-    "sep_token_id": null,
-    "task_specific_params": null,
-    "temperature": 1.0,
-    "tie_encoder_decoder": false,
-    "tie_word_embeddings": true,
-    "tokenizer_class": null,
-    "top_k": 50,
-    "top_p": 1.0,
-    "torch_dtype": null,
-    "torchscript": false,
-    "transformers_version": "4.16.0.dev0",
-    "use_bfloat16": false,
-    "vocab_size": 49408
-  },
-  "text_config_dict": {
-    "hidden_size": 768,
-    "intermediate_size": 3072,
-    "num_attention_heads": 12,
-    "num_hidden_layers": 12,
-    "projection_dim": 768
-  },
-  "torch_dtype": "float32",
-  "transformers_version": null,
-  "vision_config": {
-    "_name_or_path": "",
-    "add_cross_attention": false,
-    "architectures": null,
-    "attention_dropout": 0.0,
-    "bad_words_ids": null,
-    "bos_token_id": null,
-    "chunk_size_feed_forward": 0,
-    "cross_attention_hidden_size": null,
-    "decoder_start_token_id": null,
-    "diversity_penalty": 0.0,
-    "do_sample": false,
-    "dropout": 0.0,
-    "early_stopping": false,
-    "encoder_no_repeat_ngram_size": 0,
-    "eos_token_id": null,
-    "finetuning_task": null,
-    "forced_bos_token_id": null,
-    "forced_eos_token_id": null,
-    "hidden_act": "quick_gelu",
-    "hidden_size": 1024,
-    "id2label": {
-      "0": "LABEL_0",
-      "1": "LABEL_1"
-    },
-    "image_size": 224,
-    "initializer_factor": 1.0,
-    "initializer_range": 0.02,
-    "intermediate_size": 4096,
-    "is_decoder": false,
-    "is_encoder_decoder": false,
-    "label2id": {
-      "LABEL_0": 0,
-      "LABEL_1": 1
-    },
-    "layer_norm_eps": 1e-05,
-    "length_penalty": 1.0,
-    "max_length": 20,
-    "min_length": 0,
-    "model_type": "clip_vision_model",
-    "no_repeat_ngram_size": 0,
-    "num_attention_heads": 16,
-    "num_beam_groups": 1,
-    "num_beams": 1,
-    "num_hidden_layers": 24,
-    "num_return_sequences": 1,
-    "output_attentions": false,
-    "output_hidden_states": false,
-    "output_scores": false,
-    "pad_token_id": null,
-    "patch_size": 14,
-    "prefix": null,
-    "problem_type": null,
-    "projection_dim" : 768,
-    "pruned_heads": {},
-    "remove_invalid_values": false,
-    "repetition_penalty": 1.0,
-    "return_dict": true,
-    "return_dict_in_generate": false,
-    "sep_token_id": null,
-    "task_specific_params": null,
-    "temperature": 1.0,
-    "tie_encoder_decoder": false,
-    "tie_word_embeddings": true,
-    "tokenizer_class": null,
-    "top_k": 50,
-    "top_p": 1.0,
-    "torch_dtype": null,
-    "torchscript": false,
-    "transformers_version": "4.16.0.dev0",
-    "use_bfloat16": false
-  },
-  "vision_config_dict": {
-    "hidden_size": 1024,
-    "intermediate_size": 4096,
-    "num_attention_heads": 16,
-    "num_hidden_layers": 24,
-    "patch_size": 14,
-    "projection_dim": 768
-  }
-}

ui/index.html

@@ -15,18 +15,27 @@
     <link rel="stylesheet" href="/media/css/fontawesome-all.min.css">
     <link rel="stylesheet" href="/media/css/image-editor.css">
     <link rel="stylesheet" href="/media/css/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="stylesheet" href="/media/css/croppr.css" rel="stylesheet"/>
     <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>
+    <script src="/media/js/jszip.min.js"></script>
+    <script src="/media/js/FileSaver.min.js"></script>
     <script src="/media/js/marked.min.js"></script>
+    <script src="/media/js/croppr.js"></script>
+    <script src="/media/js/exif-reader.js"></script>
 </head>
 <body>
 <div id="container">
     <div id="top-nav">
         <div id="logo">
             <h1>
+                <img id="logo_img" src="/media/images/icon-512x512.png" >
                 Easy Diffusion
-                <small>v2.5.22 <span id="updateBranchLabel"></span></small>
+                <small><span id="version">v3.0.2</span> <span id="updateBranchLabel"></span></small>
             </h1>
         </div>
         <div id="server-status">
@@ -51,14 +60,30 @@
         <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>
+                                <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">
+                                    You can type your prompts in the below textbox or load them from a file. You can also
+                                    reload tasks from metadata embedded in PNG, WEBP and JPEG images (enable embedding from the Settings).
+                                </span></i>
+                            </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">+ Negative 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>
@@ -66,10 +91,15 @@
 
                 <div id="editor-inputs-init-image" class="row">
                     <label for="init_image">Initial Image (img2img) <small>(optional)</small> </label>
+                    <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top">
+                        Add img2img source image using the Browse button, via drag & drop from external file or browser image (incl.
+                        rendered image) or by pasting an image from the clipboard using Ctrl+V.<br /><br />
+                        You may also reload the metadata embedded in a PNG, WEBP or JPEG image (enable embedding from the Settings).
+                    </span></i>
 
                     <div id="init_image_preview_container" class="image_preview_container">
-                        <div id="init_image_wrapper">
-                            <img id="init_image_preview" src="" />
+                        <div id="init_image_wrapper" class="preview_image_wrapper">
+                            <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>
@@ -94,11 +124,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>
 
@@ -125,19 +156,91 @@
                     <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" type="number" value="1" min="1" step="1" onkeypres"="preventNonNumericalInput(event)">
+                        <label><small>(total)</small></label>
+                        <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" type="number" value="1" min="1" step="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 id="modelConfigSelection" class="pl-5"><td><label for="model_config">Model Config:</i></label></td><td>
-                        <select id="model_config" name="model_config">
-                        </select>
-                    </td></tr> -->
-                    <tr class="pl-5"><td><label for="vae_model">Custom VAE:</i></label></td><td>
+                    <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 class="diffusers-restart-needed">
+                            <input id="clip_skip" name="clip_skip" type="checkbox">
+                            <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">
@@ -150,28 +253,30 @@
                             <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">DPM++ 2s Ancestral</option>
-                            <option value="dpmpp_2m">DPM++ 2m</option>
-                            <option value="dpmpp_sde">DPM++ SDE</option>
-                            <option value="dpm_fast">DPM Fast</option>
-                            <option value="dpm_adaptive">DPM Adaptive</option>
-                            <option value="unipc_snr">UniPC SNR</option>
+                            <option value="dpmpp_2s_a">DPM++ 2s Ancestral (Karras)</option>
+                            <option value="dpmpp_2m">DPM++ 2m (Karras)</option>
+                            <option value="dpmpp_2m_sde" class="diffusers-only">DPM++ 2m SDE (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>
+                            <option value="unipc_snr" class="k_diffusion-only">UniPC SNR</option>
                             <option value="unipc_tu">UniPC TU</option>
-                            <option value="unipc_snr_2">UniPC SNR 2</option>
-                            <option value="unipc_tu_2">UniPC TC 2</option>
-                            <option value="unipc_tq">UniPC TQ</option>
+                            <option value="unipc_snr_2" class="k_diffusion-only">UniPC SNR 2</option>
+                            <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>
@@ -185,15 +290,16 @@
                             <option value="1792">1792</option>
                             <option value="2048">2048</option>
                         </select>
-                        <label for="width"><small>(width)</small></label>
+                        <label id="widthLabel" for="width"><small><span>(width)</span></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>
@@ -207,24 +313,74 @@
                             <option value="1792">1792</option>
                             <option value="2048">2048</option>
                         </select>
-                        <label for="height"><small>(height)</small></label>
+                        <label id="heightLabel" for="height"><small><span>(height)</span></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>Resize:</small><br>
+                                <input id="resize-slider" name="resize-slider" class="editor-slider" value="1" type="range" min="0.4" max="2" step="0.005" style="width:100%;"><br>
+                                <div id="enlarge-buttons"><button data-factor="0.5" class="tertiaryButton smallButton">×0.5</button>&nbsp;<button data-factor="1.2" class="tertiaryButton smallButton">×1.2</button>&nbsp;<button data-factor="1.5" class="tertiaryButton smallButton">×1.5</button>&nbsp;<button data-factor="2" class="tertiaryButton smallButton">×2</button>&nbsp;<button data-factor="3" class="tertiaryButton smallButton">×3</button></div>
+
+                                <div class="two-column">
+                                    <div class="left-column">
+                                        <small>Recently&nbsp;used:</small><br>
+                                        <div id="recent-resolution-list">
+                                        </div>
+                                    </div>
+                                    <div class="right-column">
+                                        <small>Common&nbsp;sizes:</small><br>
+                                        <div id="common-resolution-list">
+                                        </div>
+                                    </div>
+
+                                </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 class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</i></label></td><td>
+                    <tr id="lora_model_container" class="pl-5">
+                        <td>
+                            <label for="lora_model">LoRA:</label>
+                        </td>
+                        <td class="diffusers-restart-needed">
+                            <div id="lora_model" data-path=""></div>
+                        </td>
+                    </tr>
+                    <tr id="hypernetwork_model_container" class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</label></td><td>
                         <input id="hypernetwork_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
                     </td></tr>
                     <tr id="hypernetwork_strength_container" class="pl-5">
                         <td><label for="hypernetwork_strength_slider">Hypernetwork Strength:</label></td>
                         <td> <input id="hypernetwork_strength_slider" name="hypernetwork_strength_slider" class="editor-slider" value="100" type="range" min="0" max="100"> <input id="hypernetwork_strength" name="hypernetwork_strength" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td>
                     </tr>
+                    <tr id="tiling_container" class="pl-5">
+                        <td><label for="tiling">Seamless Tiling:</label></td>
+                        <td class="diffusers-restart-needed">
+                            <select id="tiling" name="tiling">
+                                <option value="none" selected>None</option>
+                                <option value="x">Horizontal</option>
+                                <option value="y">Vertical</option>
+                                <option value="xy">Both</option>
+                            </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>
                             <option value="png">png</option>
                             <option value="webp">webp</option>
                         </select>
+                        <span id="output_lossless_container" class="displayNone">
+                            <input id="output_lossless" name="output_lossless" type="checkbox"><label for="output_lossless">Lossless</label>
+                        </span>
                     </td></tr>
                     <tr class="pl-5" id="output_quality_row"><td><label for="output_quality">Image Quality:</label></td><td>
                     <input id="output_quality_slider" name="output_quality" class="editor-slider" value="75" type="range" min="10" max="95"> <input id="output_quality" name="output_quality" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)">
@@ -234,61 +390,55 @@
                     <div><ul>
                     <li><b class="settings-subheader">Render Settings</b></li>
                     <li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview <small>(uses more VRAM, slower images)</small></label></li>
-                    <li class="pl-5"><input id="use_face_correction" name="use_face_correction" type="checkbox"> <label for="use_face_correction">Fix incorrect faces and eyes</label> <div style="display:inline-block;"><input id="gfpgan_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" /></div></li>
+                    <li class="pl-5" id="use_face_correction_container">
+                        <input id="use_face_correction" name="use_face_correction" type="checkbox"> <label for="use_face_correction">Fix incorrect faces and eyes</label> <div style="display:inline-block;"><input id="gfpgan_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" /></div>
+                        <table id="codeformer_settings" class="displayNone sub-settings">
+                            <tr class="pl-5"><td><label for="codeformer_fidelity_slider">Strength:</label></td><td><input id="codeformer_fidelity_slider" name="codeformer_fidelity_slider" class="editor-slider" value="5" type="range" min="0" max="10"> <input id="codeformer_fidelity" name="codeformer_fidelity" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>
+                            <tr class="pl-5"><td><label for="codeformer_upscale_faces">Upscale Faces:</label></td><td><input id="codeformer_upscale_faces" name="codeformer_upscale_faces" type="checkbox" checked> <label><small>(improves the resolution of faces)</small></label></td></tr>
+                        </table>
+                    </li>
                     <li class="pl-5">
                         <input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Scale up by</label> 
                         <select id="upscale_amount" name="upscale_amount">
-                            <option value="2">2x</option>
-                            <option value="4" selected>4x</option>
+                            <option id="upscale_amount_2x" value="2">2x</option>
+                            <option id="upscale_amount_4x" value="4" selected>4x</option>
                         </select>
                         with 
                         <select id="upscale_model" name="upscale_model">
                             <option value="RealESRGAN_x4plus" selected>RealESRGAN_x4plus</option>
                             <option value="RealESRGAN_x4plus_anime_6B">RealESRGAN_x4plus_anime_6B</option>
+                            <option value="latent_upscaler">Latent Upscaler 2x</option>
                         </select>
+                        <table id="latent_upscaler_settings" class="displayNone sub-settings">
+                            <tr class="pl-5"><td><label for="latent_upscaler_steps_slider">Upscaling Steps:</label></td><td><input id="latent_upscaler_steps_slider" name="latent_upscaler_steps_slider" class="editor-slider" value="10" type="range" min="1" max="50"> <input id="latent_upscaler_steps" name="latent_upscaler_steps" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>
+                        </table>
                     </li>
                     <li class="pl-5"><input id="show_only_filtered_image" name="show_only_filtered_image" type="checkbox" checked> <label for="show_only_filtered_image">Show only the corrected/upscaled image</label></li>
                     </ul></div>
                 </div>
             </div>
 
-            <div id="editor-modifiers" class="panel-box">
-                <h4 class="collapsible">
-                    Image Modifiers (art styles, tags etc)
-                    <i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
-                        <span class="simple-tooltip left">
-                            Add Custom Modifiers
-                        </span>
-                    </i>
-                </h4>
-                <div id="editor-modifiers-entries" class="collapsible-content">
-                    <div id="editor-modifiers-entries-toolbar">
-                        <label for="preview-image">Image Style:</label>
-                        <select id="preview-image" name="preview-image" value="portrait">
-                            <option value="portrait" selected="">Face</option>
-                            <option value="landscape">Landscape</option>
-                        </select>
-                        &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>
+            <label><small><b>Note:</b> The Image Modifiers section has moved to the <code>+ Image Modifiers</code> button at the top, just above the Prompt textbox.</small></label>
         </div>
 
         <div id="preview" class="col-free">
+
             <div id="initial-text">
                 Type a prompt and press the "Make Image" button.<br/><br/>You can set an "Initial Image" if you want to guide the AI.<br/><br/>
                 You can also add modifiers like "Realistic", "Pencil Sketch", "ArtStation" etc by browsing through the "Image Modifiers" section 
                 and selecting the desired modifiers.<br/><br/>
                 Click "Image Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)
             </div>
-
             <div id="preview-content">
-                <div id="preview-tools">
+                <div id="preview-tools" class="displayNone">
                     <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can icon"></i> Clear All</button>
-                    <button id="save-all-images" class="tertiaryButton"><i class="fa-solid fa-download icon"></i> Download All Images</button>
+                    <button class="tertiaryButton" id="show-download-popup"><i class="fa-solid fa-download"></i><span> Download images</span></button>
                     <div class="display-settings">
+                        <button id="undo" class="displayNone primaryButton">
+                            Undo <i class="fa-solid fa-rotate-left icon"></i>
+                            <span class="simple-tooltip left">Undo last remove</span>
+                        </button>
+                        <span class="auto-scroll"></span> <!-- hack for Rabbit Hole update -->
                         <button id="auto_scroll_btn" class="tertiaryButton">
                             <i class="fa-solid fa-arrows-up-to-line icon"></i>
                             <input id="auto_scroll" name="auto_scroll" type="checkbox" style="display: none">
@@ -311,6 +461,9 @@
                     </div>
                     <div class="clearfix" style="clear: both;"></div>
                 </div>
+                <div id="supportBanner" class="displayNone">
+                    If you found this project useful and want to help keep it alive, please consider <a href="https://ko-fi.com/easydiffusion" target="_blank">buying me a coffee</a> or <a href="https://www.patreon.com/EasyDiffusion" target="_blank">supporting me on Patreon</a> to help cover the cost of development and maintenance! Or even better, <a href="https://cmdr2.itch.io/easydiffusion" target="_blank">purchasing it at the full price</a>. Thank you for your support!
+                </div>
             </div>
         </div>
         </div>
@@ -318,9 +471,22 @@
         <div id="tab-content-settings" class="tab-content">
             <div id="system-settings" class="tab-content-inner">
                 <h1>System Settings</h1>
-                <div class="parameters-table"></div>
+                <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>
+                   <div class="parameters-table" id="system-settings-network-table">
+                   </div>
+                </div>
                 <br/><br/>
                 <div>
                     <h3><i class="fa fa-microchip icon"></i> System Info</h3>
@@ -345,23 +511,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/cmdr2/stable-diffusion-ui/wiki/UI-Overview" target="_blank"><i class="fa-solid fa-list fa-fw"></i> UI Overview</a>
-                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-Prompts" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> Writing prompts</a>
-                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Inpainting" target="_blank"><i class="fa-solid fa-paintbrush fa-fw"></i> Inpainting</a>
-                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Run-on-Multiple-GPUs" target="_blank"><i class="fa-solid fa-paintbrush fa-fw"></i> Run on Multiple GPUs</a>
+                                <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/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/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/easydiffusion/easydiffusion/wiki/Inpainting" target="_blank"><i class="fa-solid fa-paintbrush fa-fw"></i> Inpainting</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/cmdr2/stable-diffusion-ui/wiki/UI-Plugins" target="_blank"><i class="fa-solid fa-puzzle-piece fa-fw"></i> UI Plugins</a>
-                                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-hand-sparkles fa-fw"></i> VAE Variational Auto Encoder</a>
+                                <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/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/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>
@@ -371,7 +537,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>
@@ -379,7 +545,85 @@
         </div>
     </div>
     
+    <div class="popup" id="splash-screen" data-version="1">
+        <div>
+            <i class="close-button fa-solid fa-xmark"></i>
+            <img class="splash-img" src="/media/images/icon-512x512.png" width="128" height="128">
+            <h1>Diffusers Tech Preview</h1>
+            <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>
+            <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>
+            <h2>New upcoming features in our new engine</h2>
+            <ul>
+                <li><a href="https://huggingface.co/blog/lora" target="_blank">LORA</a> support - Place LORA files in the <tt>models/lora</tt> folder.</li>
+                <li><a href="https://github.com/damian0815/compel/blob/main/Reference.md" target="_blank">Compel Prompt Parser</a> - New, more powerful parser. In short:
+                    <ul>
+                        <li> no limit to the length of prompts (i.e. long prompts are supported)</li>
+                        <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>,
+                             or <tt>apple-</tt>, <tt>apple--</tt> for different weights.</li>
+                        <li> Use exact weights - 0.0 to 1.0 reduces the weight, 1.0 to 2.0 increases the weight.
+                             Think of it like a multiplier, like 1.5x or 0.5x: E.g. <tt>(apple)0.8 falling from a tree</tt>,
+                             <tt>(apple)1.5 falling from a tree</tt>, <tt>(apple falling)1.4 from a tree</tt></li>
+                        <li> You can group tokens together using parentheses/round-brackets. E.g. <tt>(apple falling)++
+                             from a tree</tt>. Nested parentheses are supported.</li>
+                    </ul>
+                    This clarifies a few things:
+                    <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>
@@ -390,16 +634,129 @@
         </div>
     </div>
 
-    <div id="modifier-settings-config" class="popup">
-        <div>
-            <i class="close-button fa-solid fa-xmark"></i>
-            <h1>Modifier Settings</h1>
-            <p>Set your custom modifiers (one per line)</p>
-            <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line"></textarea>
-            <p><small><b>Tip:</b> You can include special characters like {} () [] and |. You can also put multiple comma-separated phrases in a single line, to make a single modifier that combines all of those.</small></p>
+    <div id="editor-modifiers">
+        <div id="editor-modifiers-header" class="dialog-header">
+            <div id="modifiers-header-left" class="dialog-header-left">
+                <h4>Image Modifiers</h4>
+                <span>(drawing style, camera, etc.)</span>
+            </div>
+            <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">
+                <button id="add-embeddings-thumb" class="tertiaryButton smallButton" style="background-color: var(--background-color4);"><i class="fa-solid fa-folder-plus"></i> Add thumbnail</button>
+                <input id="add-embeddings-thumb-input" name="add-embeddings-thumb-input" type="file" class="displayNone">
+                <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...">
+            <label for="embedding-card-size-selector"><small>Thumbnail Size:</small></label>
+            <select id="embedding-card-size-selector" name="embedding-card-size-selector">
+                <option value="-2">0</option>
+                <option value="-1" selected>1</option>
+                <option value="0">2</option>
+                <option value="1">3</option>
+                <option value="2">4</option>
+                <option value="3">5</option>
+            </select>
+            <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>
+
+    <dialog id="use-as-thumb-dialog">
+        <div id="use-as-thumb-dialog-header" class="dialog-header">
+            <div id="use-as-thumb-dialog-header-left" class="dialog-header-left">
+                <h4>Use as thumbnail</h4>
+                <span>Use a pictures as thumbnail for embeddings, LORAs, etc.</span>
+            </div>
+            <div id="use-as-thumb-dialog-header-right">
+                <i id="use-as-thumb-dialog-close-button" class="fa-solid fa-xmark fa-lg"></i>
+            </div>
+        </div>
+        <div>
+            <div class="use-as-thumb-grid">
+                <div class="use-as-thumb-preview">
+                    <div id="use-as-thumb-img-container"><img id="use-as-thumb-image" src="/media/images/noimg.png" width="512" height="512"></div>
+                </div>
+                <div class="use-as-thumb-select">
+                    <label for="use-as-thumb-select">Use the thumbnail for:</label><br>
+                    <select id="use-as-thumb-select" size="16" multiple>
+                    </select>
+                </div>
+                <div class="use-as-thumb-buttons">
+                    <button class="tertiaryButton" id="use-as-thumb-save">Save thumbnail</button>
+                    <button class="tertiaryButton" id="use-as-thumb-cancel">Cancel</button>
+                </div>
+            </div>
+        </div>
+    </dialog>
+
     <div id="image-editor" class="popup image-editor-popup">
         <div>
             <i class="close-button fa-solid fa-xmark"></i>
@@ -435,11 +792,10 @@
     <div id="footer-spacer"></div>
     <div id="footer">
         <div class="line-separator">&nbsp;</div>
-        <p>If you found this project useful and want to help keep it alive, please <a href="https://ko-fi.com/cmdr2_stablediffusion_ui" target="_blank"><img src="/media/images/kofi.png" id="coffeeButton"></a> to help cover the cost of development and maintenance! Thank you for your support!</p>
-        <p>Please feel free to join the <a href="https://discord.com/invite/u9yhsFmEkB" target="_blank">discord community</a> or <a href="https://github.com/cmdr2/stable-diffusion-ui/issues" target="_blank">file an issue</a> if you have any problems or suggestions in using this interface.</p>
+        <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>
@@ -448,33 +804,42 @@
 <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/multi-model-selector.js"></script>
+<script src="media/js/task-manager.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>
+<script src="media/js/image-modal.js"></script>
 <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
+            statusChange: setServerStatus,
+            idle: onIdle,
+            ping: onPing
         }
     })
+    // splashScreen()
 
-    playSound()
+    // load models again, but scan for malicious this time
+    await getModels(true)
+
+    // playSound()
 }
 
 init()

ui/main.py

@@ -1,10 +1,14 @@
-from easydiffusion import model_manager, app, server
-from easydiffusion.server import server_api # required for uvicorn
+from easydiffusion import model_manager, app, server, bucket_manager
+from easydiffusion.server import server_api  # required for uvicorn
+
+app.init()
+
+server.init()
 
 # Init the app
 model_manager.init()
-app.init()
-server.init()
+app.init_render_threads()
+bucket_manager.init()
 
 # 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

@@ -69,13 +69,16 @@
 }
 
 .parameters-table > div:first-child {
-    border-radius: 12px 12px 0px 0px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
 }
 
 .parameters-table > div:last-child {
-    border-radius: 0px 0px 12px 12px;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
 }
 
-.parameters-table .fa-fire {
+.parameters-table .fa-fire,
+.parameters-table .fa-bolt {
     color: #F7630C;
-}
+}

ui/media/css/croppr.css

@@ -0,0 +1,58 @@
+.croppr-container * {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+.croppr-container img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.croppr {
+  position: relative;
+  display: inline-block;
+}
+
+.croppr-overlay {
+  background: rgba(0,0,0,0.5);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  cursor: crosshair;
+}
+
+.croppr-region {
+  border: 1px dashed rgba(0, 0, 0, 0.5);
+  position: absolute;
+  z-index: 3;
+  cursor: move;
+  top: 0;
+}
+
+.croppr-imageClipped {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.croppr-handle {
+  border: 1px solid black;
+  background-color: white;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  z-index: 4;
+  top: 0;
+}

ui/media/css/fonts.css

@@ -3,7 +3,7 @@
     font-family: 'Work Sans';
     font-style: normal;
     font-weight: 400;
-    src: local(''),
+    src: local('Work Sans'),
          url('/media/fonts/work-sans-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
          url('/media/fonts/work-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   }
@@ -13,7 +13,7 @@
     font-family: 'Work Sans';
     font-style: normal;
     font-weight: 600;
-    src: local(''),
+    src: local('Work Sans'),
          url('/media/fonts/work-sans-v18-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
          url('/media/fonts/work-sans-v18-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   }
@@ -23,7 +23,7 @@
     font-family: 'Work Sans';
     font-style: normal;
     font-weight: 700;
-    src: local(''),
+    src: local('Work Sans'),
          url('/media/fonts/work-sans-v18-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
          url('/media/fonts/work-sans-v18-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   }
@@ -33,8 +33,8 @@
     font-family: 'Work Sans';
     font-style: normal;
     font-weight: 800;
-    src: local(''),
+    src: local('Work Sans'),
          url('/media/fonts/work-sans-v18-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
          url('/media/fonts/work-sans-v18-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   }
-  
+  

ui/media/css/image-editor.css

@@ -96,7 +96,7 @@
 
 .editor-controls-center {
 	/* background: var(--background-color2); */
-	flex: 1;
+	flex: 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -105,6 +105,8 @@
 .editor-controls-center > div {
 	position: relative;
 	background: black;
+	margin: 20pt;
+	margin-top: 40pt;
 }
 
 .editor-controls-center canvas {
@@ -149,18 +151,25 @@
 	pointer-events: none;
 }
 
-
 .image-editor-popup {
 	--popup-margin: 16px;
 	--popup-padding: 24px;
 }
 
+@media screen and (min-width: 700px) {
+	.image-editor-popup {
+		overflow-y: auto;
+	}
+}
+
 .image-editor-popup > div {
 	margin: var(--popup-margin);
 	padding: var(--popup-padding);
-	min-height: calc(100vh - (2 * var(--popup-margin)));
-	max-width: none;
+	min-height: calc(99h - (2 * var(--popup-margin)));
+	max-width: fit-content;
 	min-width: fit-content;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .image-editor-popup h1 {
@@ -186,7 +195,7 @@
 
 
 .image-editor-popup > div > div {
-	min-height: calc(100vh - (2 * var(--popup-margin)) - (2 * var(--popup-padding)));
+	min-height: calc(99vh - (2 * var(--popup-margin)) - (2 * var(--popup-padding)));
 }
 
 .inpainter .image_editor_color {
@@ -214,3 +223,33 @@
 .image-editor-popup h4 {
 	text-align: left;
 }
+
+.image-editor-popup .load_mask {
+	display: none;
+}
+.inpainter .load_mask {
+	display: flex;
+}
+
+.editor-canvas-overlay {
+        cursor: none;
+}
+
+.image-brush-preview {
+        position: fixed;
+        background: black;
+        opacity: 0.3;
+        borderRadius: 50%;
+        cursor: none;
+        pointer-events: none;
+        transform: translate(-50%, -50%);
+}
+
+.editor-options-container > * > *:not(.active):not(.button) {
+        border: 1px dotted slategray;
+}
+
+.image_editor_opacity .editor-options-container > * > *:not(.active):not(.button) {
+        border: 1px dotted slategray;
+}
+

ui/media/css/image-modal.css

@@ -0,0 +1,96 @@
+#viewFullSizeImgModal {
+    --popup-padding: 24px;
+    position: sticky;
+    padding: var(--popup-padding);
+    pointer-events: none;
+    width: 100vw;
+    height: 100vh;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    z-index: 1001;
+}
+
+#viewFullSizeImgModal:not(.active) {
+    display: none;
+}
+
+#viewFullSizeImgModal > * {
+    pointer-events: auto;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+#viewFullSizeImgModal .backdrop {
+    max-width: unset;
+    width: 100%;
+    max-height: unset;
+    height: 100%;
+    inset: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1001;
+    opacity: .5;
+    border: none;
+    box-shadow: none;
+    overflow: hidden;
+}
+
+#viewFullSizeImgModal .content {
+    min-height: initial;
+    max-height: calc(100vh - (var(--popup-padding) * 2));
+    height: fit-content;
+    min-width: initial;
+    max-width: calc(100vw - (var(--popup-padding) * 2));
+    width: fit-content;
+    z-index: 1003;
+    overflow: visible;
+}
+
+#viewFullSizeImgModal .image-wrapper {
+    min-height: initial;
+    max-height: calc(100vh - (var(--popup-padding) * 2));
+    height: fit-content;
+    min-width: initial;
+    max-width: calc(100vw - (var(--popup-padding) * 2));
+    width: fit-content;
+    box-sizing: border-box;
+    pointer-events: auto;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+}
+
+#viewFullSizeImgModal img.natural-zoom {
+    max-width: calc(100vh - (var(--popup-padding) * 2) - 4px);
+    max-height: calc(100vh - (var(--popup-padding) * 2) - 4px);
+}
+
+#viewFullSizeImgModal img:not(.natural-zoom) {
+    cursor: grab;
+}
+
+#viewFullSizeImgModal .grabbing img:not(.natural-zoom) {
+    cursor: grabbing;
+}
+
+#viewFullSizeImgModal .content > div::-webkit-scrollbar-track, #viewFullSizeImgModal .content > div::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, .5)
+}
+
+#viewFullSizeImgModal .menu-bar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding-right: var(--scrollbar-width);
+}
+
+#viewFullSizeImgModal .menu-bar .tertiaryButton {
+    font-size: 1.2em;
+    margin: 12px 12px 0 0;
+    cursor: pointer;
+}

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;
-    height: 11.5em;
+    width: 6em;
+    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;
-}
-.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;
+    z-index: 2;
 }
 .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 {
-    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 {
+.modifier-card-size_-1 {
     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 {
-    font-size: 0.8em;
+.modifier-card-size_-1 .modifier-card-label {
+    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;
-    height: 9.5em;
-    grid-template-rows: 6em 3.5em;
+    width: 5em;
+    grid-template-rows: 5em 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,6 +146,9 @@
     position: absolute;
     z-index: 3;
 }
+.modifier-card-active .modifier-card-overlay {
+    background-color: rgb(169 78 241 / 40%);
+}
 .modifier-card:hover > .modifier-card-image-container .modifier-card-image-overlay {
     opacity: 1;
 }
@@ -163,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/searchable-models.css

@@ -58,7 +58,7 @@
     font-size: 10pt;
     font-weight: normal;
     transition: none;
-    transition:property: none;
+    transition-property: none;
     cursor: default;
 }
 

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;
@@ -33,10 +38,13 @@
     --input-height: 18px;
 	--tertiary-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
     --tertiary-border-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3 * var(--value-step))));
-    --tertiary-color: var(--input-text-color)
+    --tertiary-color: var(--input-text-color);
 
     /* Main theme color, hex color fallback. */
     --theme-color-fallback: #673AB6;
+    --status-orange: rgb(200, 139, 0);
+    --status-green: green;
+    --status-red: red;
 }
 
 .theme-light {
@@ -180,4 +188,4 @@
     border: none;
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
     border-radius: 10px;
-}
+}

ui/media/js/FileSaver.min.js

@@ -0,0 +1,2 @@
+(function(a,b){if("function"==typeof define&&define.amd)define([],b);else if("undefined"!=typeof exports)b();else{b(),a.FileSaver={exports:{}}.exports}})(this,function(){"use strict";function b(a,b){return"undefined"==typeof b?b={autoBom:!1}:"object"!=typeof b&&(console.warn("Deprecated: Expected third argument to be a object"),b={autoBom:!b}),b.autoBom&&/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(a.type)?new Blob(["\uFEFF",a],{type:a.type}):a}function c(a,b,c){var d=new XMLHttpRequest;d.open("GET",a),d.responseType="blob",d.onload=function(){g(d.response,b,c)},d.onerror=function(){console.error("could not download file")},d.send()}function d(a){var b=new XMLHttpRequest;b.open("HEAD",a,!1);try{b.send()}catch(a){}return 200<=b.status&&299>=b.status}function e(a){try{a.dispatchEvent(new MouseEvent("click"))}catch(c){var b=document.createEvent("MouseEvents");b.initMouseEvent("click",!0,!0,window,0,0,0,80,20,!1,!1,!1,!1,0,null),a.dispatchEvent(b)}}var f="object"==typeof window&&window.window===window?window:"object"==typeof self&&self.self===self?self:"object"==typeof global&&global.global===global?global:void 0,a=/Macintosh/.test(navigator.userAgent)&&/AppleWebKit/.test(navigator.userAgent)&&!/Safari/.test(navigator.userAgent),g=f.saveAs||("object"!=typeof window||window!==f?function(){}:"download"in HTMLAnchorElement.prototype&&!a?function(b,g,h){var i=f.URL||f.webkitURL,j=document.createElement("a");g=g||b.name||"download",j.download=g,j.rel="noopener","string"==typeof b?(j.href=b,j.origin===location.origin?e(j):d(j.href)?c(b,g,h):e(j,j.target="_blank")):(j.href=i.createObjectURL(b),setTimeout(function(){i.revokeObjectURL(j.href)},4E4),setTimeout(function(){e(j)},0))}:"msSaveOrOpenBlob"in navigator?function(f,g,h){if(g=g||f.name||"download","string"!=typeof f)navigator.msSaveOrOpenBlob(b(f,h),g);else if(d(f))c(f,g,h);else{var i=document.createElement("a");i.href=f,i.target="_blank",setTimeout(function(){e(i)})}}:function(b,d,e,g){if(g=g||open("","_blank"),g&&(g.document.title=g.document.body.innerText="downloading..."),"string"==typeof b)return c(b,d,e);var h="application/octet-stream"===b.type,i=/constructor/i.test(f.HTMLElement)||f.safari,j=/CriOS\/[\d]+/.test(navigator.userAgent);if((j||h&&i||a)&&"undefined"!=typeof FileReader){var k=new FileReader;k.onloadend=function(){var a=k.result;a=j?a:a.replace(/^data:[^;]*;/,"data:attachment/file;"),g?g.location.href=a:location=a,g=null},k.readAsDataURL(b)}else{var l=f.URL||f.webkitURL,m=l.createObjectURL(b);g?g.location=m:location.href=m,g=null,setTimeout(function(){l.revokeObjectURL(m)},4E4)}});f.saveAs=g.saveAs=g,"undefined"!=typeof module&&(module.exports=g)});
+

ui/media/js/auto-save.js

@@ -13,23 +13,25 @@ const SETTINGS_IDS_LIST = [
     "num_outputs_total",
     "num_outputs_parallel",
     "stable_diffusion_model",
+    "clip_skip",
     "vae_model",
-    "hypernetwork_model",
     "sampler_name",
     "width",
     "height",
     "num_inference_steps",
     "guidance_scale",
     "prompt_strength",
-    "hypernetwork_strength",
+    "tiling",
     "output_format",
     "output_quality",
+    "output_lossless",
     "negative_prompt",
     "stream_image_progress",
     "use_face_correction",
     "gfpgan_model",
     "use_upscale",
     "upscale_amount",
+    "latent_upscaler_steps",
     "block_nsfw",
     "show_only_filtered_image",
     "upscale_model",
@@ -41,32 +43,44 @@ const SETTINGS_IDS_LIST = [
     "sound_toggle",
     "vram_usage_level",
     "confirm_dangerous_actions",
+    "profileName",
     "metadata_output_format",
     "auto_save_settings",
     "apply_color_correction",
     "process_order_toggle",
     "thumbnail_size",
-    "auto_scroll"
+    "auto_scroll",
+    "zip_toggle",
+    "tree_toggle",
+    "json_toggle",
+    "extract_lora_from_prompt",
+    "embedding-card-size-selector",
+    "lora_model",
 ]
 
-const IGNORE_BY_DEFAULT = [
-    "prompt"
-]
+const IGNORE_BY_DEFAULT = ["prompt"]
 
-const SETTINGS_SECTIONS = [ // gets the "keys" property filled in with an ordered list of settings in this section via initSettings
-    { id: "editor-inputs",   name: "Prompt" },
+if (!testDiffusers.checked) {
+    SETTINGS_IDS_LIST.push("hypernetwork_model")
+    SETTINGS_IDS_LIST.push("hypernetwork_strength")
+}
+
+const SETTINGS_SECTIONS = [
+    // gets the "keys" property filled in with an ordered list of settings in this section via initSettings
+    { id: "editor-inputs", name: "Prompt" },
     { id: "editor-settings", name: "Image Settings" },
     { id: "system-settings", name: "System Settings" },
-    { id: "container",       name: "Other" }
+    { id: "container", name: "Other" },
 ]
 
 async function initSettings() {
-    SETTINGS_IDS_LIST.forEach(id => {
+    SETTINGS_IDS_LIST.forEach((id) => {
         var element = document.getElementById(id)
         if (!element) {
             console.error(`Missing settings element ${id}`)
         }
-        if (id in SETTINGS) { // don't create it again
+        if (id in SETTINGS) {
+            // don't create it again
             return
         }
         SETTINGS[id] = {
@@ -75,28 +89,28 @@ async function initSettings() {
             label: getSettingLabel(element),
             default: getSetting(element),
             value: getSetting(element),
-            ignore: IGNORE_BY_DEFAULT.includes(id)
+            ignore: IGNORE_BY_DEFAULT.includes(id),
         }
         element.addEventListener("input", settingChangeHandler)
         element.addEventListener("change", settingChangeHandler)
     })
     var unsorted_settings_ids = [...SETTINGS_IDS_LIST]
-    SETTINGS_SECTIONS.forEach(section => {
+    SETTINGS_SECTIONS.forEach((section) => {
         var name = section.name
         var element = document.getElementById(section.id)
-        var unsorted_ids = unsorted_settings_ids.map(id => `#${id}`).join(",")
-        var children = unsorted_ids == "" ? [] : Array.from(element.querySelectorAll(unsorted_ids));
+        var unsorted_ids = unsorted_settings_ids.map((id) => `#${id}`).join(",")
+        var children = unsorted_ids == "" ? [] : Array.from(element.querySelectorAll(unsorted_ids))
         section.keys = []
-        children.forEach(e => {
+        children.forEach((e) => {
             section.keys.push(e.id)
         })
-        unsorted_settings_ids = unsorted_settings_ids.filter(id => children.find(e => e.id == id) == undefined)
+        unsorted_settings_ids = unsorted_settings_ids.filter((id) => children.find((e) => e.id == id) == undefined)
     })
     loadSettings()
 }
 
 function getSetting(element) {
-    if (element.dataset && 'path' in element.dataset) {
+    if (element.dataset && "path" in element.dataset) {
         return element.dataset.path
     }
     if (typeof element === "string" || element instanceof String) {
@@ -108,7 +122,7 @@ function getSetting(element) {
     return element.value
 }
 function setSetting(element, value) {
-    if (element.dataset && 'path' in element.dataset) {
+    if (element.dataset && "path" in element.dataset) {
         element.dataset.path = value
         return // no need to dispatch any event here because the models are not loaded yet
     }
@@ -121,8 +135,7 @@ function setSetting(element, value) {
     }
     if (element.type == "checkbox") {
         element.checked = value
-    }
-    else {
+    } else {
         element.value = value
     }
     element.dispatchEvent(new Event("input"))
@@ -130,11 +143,11 @@ function setSetting(element, value) {
 }
 
 function saveSettings() {
-    var saved_settings = Object.values(SETTINGS).map(setting => {
+    var saved_settings = Object.values(SETTINGS).map((setting) => {
         return {
             key: setting.key,
             value: setting.value,
-            ignore: setting.ignore
+            ignore: setting.ignore,
         }
     })
     localStorage.setItem(SETTINGS_KEY, JSON.stringify(saved_settings))
@@ -145,16 +158,16 @@ function loadSettings() {
     var saved_settings_text = localStorage.getItem(SETTINGS_KEY)
     if (saved_settings_text) {
         var saved_settings = JSON.parse(saved_settings_text)
-        if (saved_settings.find(s => s.key == "auto_save_settings")?.value == false) {
+        if (saved_settings.find((s) => s.key == "auto_save_settings")?.value == false) {
             setSetting("auto_save_settings", false)
             return
         }
         CURRENTLY_LOADING_SETTINGS = true
-        saved_settings.forEach(saved_setting => {
+        saved_settings.forEach((saved_setting) => {
             var setting = SETTINGS[saved_setting.key]
             if (!setting) {
-                console.warn(`Attempted to load setting ${saved_setting.key}, but no setting found`);
-                return null;
+                console.warn(`Attempted to load setting ${saved_setting.key}, but no setting found`)
+                return null
             }
             setting.ignore = saved_setting.ignore
             if (!setting.ignore) {
@@ -163,10 +176,26 @@ function loadSettings() {
             }
         })
         CURRENTLY_LOADING_SETTINGS = false
-    }
-    else {
+    } else if (localStorage.length < 2) {
+        // localStorage is too short for OldSettings
+        // 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 &&
+                "active" in event.detail &&
+                "cuda:0" in event.detail.active &&
+                event.detail.active["cuda:0"].mem_total < 4.5
+            ) {
+                vramUsageLevelField.value = "low"
+                vramUsageLevelField.dispatchEvent(new Event("change"))
+            }
+            document.removeEventListener("system_info_update", initGPUProfile)
+        }
+        document.addEventListener("system_info_update", initGPUProfile)
+    } else {
         CURRENTLY_LOADING_SETTINGS = true
-        tryLoadOldSettings();
+        tryLoadOldSettings()
         CURRENTLY_LOADING_SETTINGS = false
         saveSettings()
     }
@@ -174,9 +203,9 @@ function loadSettings() {
 
 function loadDefaultSettingsSection(section_id) {
     CURRENTLY_LOADING_SETTINGS = true
-    var section = SETTINGS_SECTIONS.find(s => s.id == section_id);
-    section.keys.forEach(key => {
-        var setting = SETTINGS[key];
+    var section = SETTINGS_SECTIONS.find((s) => s.id == section_id)
+    section.keys.forEach((key) => {
+        var setting = SETTINGS[key]
         setting.value = setting.default
         setSetting(setting.element, setting.value)
     })
@@ -212,10 +241,10 @@ function getSettingLabel(element) {
 
 function fillSaveSettingsConfigTable() {
     saveSettingsConfigTable.textContent = ""
-    SETTINGS_SECTIONS.forEach(section => {
+    SETTINGS_SECTIONS.forEach((section) => {
         var section_row = `<tr><th>${section.name}</th><td></td></tr>`
         saveSettingsConfigTable.insertAdjacentHTML("beforeend", section_row)
-        section.keys.forEach(key => {
+        section.keys.forEach((key) => {
             var setting = SETTINGS[key]
             var element = setting.element
             var checkbox_id = `shouldsave_${element.id}`
@@ -228,7 +257,7 @@ function fillSaveSettingsConfigTable() {
             var newrow = `<tr><td><label for="${checkbox_id}">${setting.label}</label></td><td><input id="${checkbox_id}" name="${checkbox_id}" ${is_checked} type="checkbox" ></td><td><small>(${value})</small></td></tr>`
             saveSettingsConfigTable.insertAdjacentHTML("beforeend", newrow)
             var checkbox = document.getElementById(checkbox_id)
-            checkbox.addEventListener("input", event => {
+            checkbox.addEventListener("input", (event) => {
                 setting.ignore = !checkbox.checked
                 saveSettings()
             })
@@ -239,9 +268,6 @@ function fillSaveSettingsConfigTable() {
 
 // configureSettingsSaveBtn
 
-
-
-
 var autoSaveSettings = document.getElementById("auto_save_settings")
 var configSettingsButton = document.createElement("button")
 configSettingsButton.textContent = "Configure"
@@ -250,33 +276,32 @@ autoSaveSettings.insertAdjacentElement("beforebegin", configSettingsButton)
 autoSaveSettings.addEventListener("change", () => {
     configSettingsButton.style.display = autoSaveSettings.checked ? "block" : "none"
 })
-configSettingsButton.addEventListener('click', () => {
+configSettingsButton.addEventListener("click", () => {
     fillSaveSettingsConfigTable()
     saveSettingsConfigOverlay.classList.add("active")
 })
-resetImageSettingsButton.addEventListener('click', event => {
-    loadDefaultSettingsSection("editor-settings");
+resetImageSettingsButton.addEventListener("click", (event) => {
+    loadDefaultSettingsSection("editor-settings")
     event.stopPropagation()
 })
 
-
 function tryLoadOldSettings() {
     console.log("Loading old user settings")
     // load v1 auto-save.js settings
     var old_map = {
-        "guidance_scale_slider": "guidance_scale",
-        "prompt_strength_slider": "prompt_strength"
+        guidance_scale_slider: "guidance_scale",
+        prompt_strength_slider: "prompt_strength",
     }
     var settings_key_v1 = "user_settings"
     var saved_settings_text = localStorage.getItem(settings_key_v1)
     if (saved_settings_text) {
         var saved_settings = JSON.parse(saved_settings_text)
-        Object.keys(saved_settings.should_save).forEach(key => {
+        Object.keys(saved_settings.should_save).forEach((key) => {
             key = key in old_map ? old_map[key] : key
             if (!(key in SETTINGS)) return
             SETTINGS[key].ignore = !saved_settings.should_save[key]
-        });
-        Object.keys(saved_settings.values).forEach(key => {
+        })
+        Object.keys(saved_settings.values).forEach((key) => {
             key = key in old_map ? old_map[key] : key
             if (!(key in SETTINGS)) return
             var setting = SETTINGS[key]
@@ -284,38 +309,42 @@ function tryLoadOldSettings() {
                 setting.value = saved_settings.values[key]
                 setSetting(setting.element, setting.value)
             }
-        });
+        })
         localStorage.removeItem(settings_key_v1)
     }
 
     // load old individually stored items
-    var individual_settings_map = { // maps old localStorage-key to new SETTINGS-key
-        "soundEnabled": "sound_toggle",
-        "saveToDisk": "save_to_disk",
-        "useCPU": "use_cpu",
-        "diskPath": "diskPath",
-        "useFaceCorrection": "use_face_correction",
-        "useUpscaling": "use_upscale",
-        "showOnlyFilteredImage": "show_only_filtered_image",
-        "streamImageProgress": "stream_image_progress",
-        "outputFormat": "output_format",
-        "autoSaveSettings": "auto_save_settings",
-    };
-    Object.keys(individual_settings_map).forEach(localStorageKey => {
-        var localStorageValue = localStorage.getItem(localStorageKey);
+    var individual_settings_map = {
+        // maps old localStorage-key to new SETTINGS-key
+        soundEnabled: "sound_toggle",
+        saveToDisk: "save_to_disk",
+        useCPU: "use_cpu",
+        diskPath: "diskPath",
+        useFaceCorrection: "use_face_correction",
+        useUpscaling: "use_upscale",
+        showOnlyFilteredImage: "show_only_filtered_image",
+        streamImageProgress: "stream_image_progress",
+        outputFormat: "output_format",
+        autoSaveSettings: "auto_save_settings",
+    }
+    Object.keys(individual_settings_map).forEach((localStorageKey) => {
+        var localStorageValue = localStorage.getItem(localStorageKey)
         if (localStorageValue !== null) {
             let key = individual_settings_map[localStorageKey]
             var setting = SETTINGS[key]
             if (!setting) {
-                console.warn(`Attempted to map old setting ${key}, but no setting found`);
-                return null;
+                console.warn(`Attempted to map old setting ${key}, but no setting found`)
+                return null
             }
-            if (setting.element.type == "checkbox" && (typeof localStorageValue === "string" || localStorageValue instanceof String)) {
+            if (
+                setting.element.type == "checkbox" &&
+                (typeof localStorageValue === "string" || localStorageValue instanceof String)
+            ) {
                 localStorageValue = localStorageValue == "true"
             }
             setting.value = localStorageValue
             setSetting(setting.element, setting.value)
-            localStorage.removeItem(localStorageKey);
+            localStorage.removeItem(localStorageKey)
         }
     })
 }

ui/media/js/dnd.js

@@ -1,25 +1,25 @@
 "use strict" // Opt in to a restricted variant of JavaScript
 
 const EXT_REGEX = /(?:\.([^.]+))?$/
-const TEXT_EXTENSIONS = ['txt', 'json']
-const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'bmp', 'tiff', 'tif', 'tga', 'webp']
+const TEXT_EXTENSIONS = ["txt", "json"]
+const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "bmp", "tiff", "tif", "tga", "webp"]
 
 function parseBoolean(stringValue) {
-    if (typeof stringValue === 'boolean') {
+    if (typeof stringValue === "boolean") {
         return stringValue
     }
-    if (typeof stringValue === 'number') {
+    if (typeof stringValue === "number") {
         return stringValue !== 0
     }
-    if (typeof stringValue !== 'string') {
+    if (typeof stringValue !== "string") {
         return false
     }
-    switch(stringValue?.toLowerCase()?.trim()) {
+    switch (stringValue?.toLowerCase()?.trim()) {
         case "true":
         case "yes":
         case "on":
         case "1":
-          return true;
+            return true
 
         case "false":
         case "no":
@@ -28,67 +28,77 @@ function parseBoolean(stringValue) {
         case "none":
         case null:
         case undefined:
-          return false;
+            return false
     }
     try {
-        return Boolean(JSON.parse(stringValue));
+        return Boolean(JSON.parse(stringValue))
     } catch {
         return Boolean(stringValue)
     }
 }
 
+// keep in sync with `ui/easydiffusion/utils/save_utils.py`
 const TASK_MAPPING = {
-    prompt: { name: 'Prompt',
+    prompt: {
+        name: "Prompt",
         setUI: (prompt) => {
             promptField.value = prompt
         },
         readUI: () => promptField.value,
-        parse: (val) => val
+        parse: (val) => val,
     },
-    negative_prompt: { name: 'Negative Prompt',
+    negative_prompt: {
+        name: "Negative Prompt",
         setUI: (negative_prompt) => {
             negativePromptField.value = negative_prompt
         },
         readUI: () => negativePromptField.value,
-        parse: (val) => val
+        parse: (val) => val,
     },
-    active_tags: { name: "Image Modifiers",
+    active_tags: {
+        name: "Image Modifiers",
         setUI: (active_tags) => {
             refreshModifiersState(active_tags)
         },
-        readUI: () => activeTags.map(x => x.name),
-        parse: (val) => val
+        readUI: () => activeTags.map((x) => x.name),
+        parse: (val) => val,
     },
-    inactive_tags: { name: "Inactive Image Modifiers",
+    inactive_tags: {
+        name: "Inactive Image Modifiers",
         setUI: (inactive_tags) => {
             refreshInactiveTags(inactive_tags)
         },
-        readUI: () => activeTags.filter(tag => tag.inactive === true).map(x => x.name),
-        parse: (val) => val
+        readUI: () => activeTags.filter((tag) => tag.inactive === true).map((x) => x.name),
+        parse: (val) => val,
     },
-    width: { name: 'Width',
+    width: {
+        name: "Width",
         setUI: (width) => {
             const oldVal = widthField.value
             widthField.value = width
             if (!widthField.value) {
                 widthField.value = oldVal
             }
+            widthField.dispatchEvent(new Event("change"))
         },
         readUI: () => parseInt(widthField.value),
-        parse: (val) => parseInt(val)
+        parse: (val) => parseInt(val),
     },
-    height: { name: 'Height',
+    height: {
+        name: "Height",
         setUI: (height) => {
             const oldVal = heightField.value
             heightField.value = height
             if (!heightField.value) {
                 heightField.value = oldVal
             }
+            heightField.dispatchEvent(new Event("change"))
         },
         readUI: () => parseInt(heightField.value),
-        parse: (val) => parseInt(val)
+        parse: (val) => parseInt(val),
     },
-    seed: { name: 'Seed',
+    seed: {
+        name: "Seed",
         setUI: (seed) => {
             if (!seed) {
                 randomSeedField.checked = true
@@ -97,88 +107,108 @@ const TASK_MAPPING = {
                 return
             }
             randomSeedField.checked = false
+            randomSeedField.dispatchEvent(new Event("change")) // let plugins know that the state of the random seed toggle changed
             seedField.disabled = false
             seedField.value = seed
         },
         readUI: () => parseInt(seedField.value), // just return the value the user is seeing in the UI
-        parse: (val) => parseInt(val)
+        parse: (val) => parseInt(val),
     },
-    num_inference_steps: { name: 'Steps',
+    num_inference_steps: {
+        name: "Steps",
         setUI: (num_inference_steps) => {
             numInferenceStepsField.value = num_inference_steps
         },
         readUI: () => parseInt(numInferenceStepsField.value),
-        parse: (val) => parseInt(val)
+        parse: (val) => parseInt(val),
     },
-    guidance_scale: { name: 'Guidance Scale',
+    guidance_scale: {
+        name: "Guidance Scale",
         setUI: (guidance_scale) => {
             guidanceScaleField.value = guidance_scale
             updateGuidanceScaleSlider()
         },
         readUI: () => parseFloat(guidanceScaleField.value),
-        parse: (val) => parseFloat(val)
+        parse: (val) => parseFloat(val),
     },
-    prompt_strength: { name: 'Prompt Strength',
+    prompt_strength: {
+        name: "Prompt Strength",
         setUI: (prompt_strength) => {
             promptStrengthField.value = prompt_strength
             updatePromptStrengthSlider()
         },
         readUI: () => parseFloat(promptStrengthField.value),
-        parse: (val) => parseFloat(val)
+        parse: (val) => parseFloat(val),
     },
 
-    init_image:  { name: 'Initial Image',
+    init_image: {
+        name: "Initial Image",
         setUI: (init_image) => {
             initImagePreview.src = init_image
         },
         readUI: () => initImagePreview.src,
-        parse: (val) => val
+        parse: (val) => val,
     },
-    mask:  { name: 'Mask',
+    mask: {
+        name: "Mask",
         setUI: (mask) => {
-            setTimeout(() => { // add a delay to insure this happens AFTER the main image loads (which reloads the inpainter)
+            setTimeout(() => {
+                // add a delay to insure this happens AFTER the main image loads (which reloads the inpainter)
                 imageInpainter.setImg(mask)
             }, 250)
             maskSetting.checked = Boolean(mask)
         },
         readUI: () => (maskSetting.checked ? imageInpainter.getImg() : undefined),
-        parse: (val) => val
+        parse: (val) => val,
     },
-    preserve_init_image_color_profile: { name: 'Preserve Color Profile',
+    preserve_init_image_color_profile: {
+        name: "Preserve Color Profile",
         setUI: (preserve_init_image_color_profile) => {
             applyColorCorrectionField.checked = parseBoolean(preserve_init_image_color_profile)
         },
         readUI: () => applyColorCorrectionField.checked,
-        parse: (val) => parseBoolean(val)
+        parse: (val) => parseBoolean(val),
     },
-    
-    use_face_correction: { name: 'Use Face Correction',
+
+    use_face_correction: {
+        name: "Use Face Correction",
         setUI: (use_face_correction) => {
             const oldVal = gfpganModelField.value
-            gfpganModelField.value = getModelPath(use_face_correction, ['.pth'])
-            if (gfpganModelField.value) { // Is a valid value for the field.
-                useFaceCorrectionField.checked = true
-                gfpganModelField.disabled = false
-            } else { // Not a valid value, restore the old value and disable the filter.
+            console.log("use face correction", use_face_correction)
+            if (use_face_correction == null || use_face_correction == "None") {
                 gfpganModelField.disabled = true
-                gfpganModelField.value = oldVal
                 useFaceCorrectionField.checked = false
+            } else {
+                gfpganModelField.value = getModelPath(use_face_correction, [".pth"])
+                if (gfpganModelField.value) {
+                    // Is a valid value for the field.
+                    useFaceCorrectionField.checked = true
+                    gfpganModelField.disabled = false
+                } else {
+                    // Not a valid value, restore the old value and disable the filter.
+                    gfpganModelField.disabled = true
+                    gfpganModelField.value = oldVal
+                    useFaceCorrectionField.checked = false
+                }
             }
 
             //useFaceCorrectionField.checked = parseBoolean(use_face_correction)
         },
         readUI: () => (useFaceCorrectionField.checked ? gfpganModelField.value : undefined),
-        parse: (val) => val
+        parse: (val) => val,
     },
-    use_upscale: { name: 'Use Upscaling',
+    use_upscale: {
+        name: "Use Upscaling",
         setUI: (use_upscale) => {
             const oldVal = upscaleModelField.value
-            upscaleModelField.value = getModelPath(use_upscale, ['.pth'])
-            if (upscaleModelField.value) { // Is a valid value for the field.
+            upscaleModelField.value = getModelPath(use_upscale, [".pth"])
+            if (upscaleModelField.value) {
+                // Is a valid value for the field.
                 useUpscalingField.checked = true
                 upscaleModelField.disabled = false
                 upscaleAmountField.disabled = false
-            } else { // Not a valid value, restore the old value and disable the filter.
+            } else {
+                // Not a valid value, restore the old value and disable the filter.
                 upscaleModelField.disabled = true
                 upscaleAmountField.disabled = true
                 upscaleModelField.value = oldVal
@@ -186,27 +216,38 @@ const TASK_MAPPING = {
             }
         },
         readUI: () => (useUpscalingField.checked ? upscaleModelField.value : undefined),
-        parse: (val) => val
+        parse: (val) => val,
     },
-    upscale_amount: { name: 'Upscale By',
+    upscale_amount: {
+        name: "Upscale By",
         setUI: (upscale_amount) => {
             upscaleAmountField.value = upscale_amount
         },
         readUI: () => upscaleAmountField.value,
-        parse: (val) => val
+        parse: (val) => val,
     },
-    sampler_name: { name: 'Sampler',
+    latent_upscaler_steps: {
+        name: "Latent Upscaler Steps",
+        setUI: (latent_upscaler_steps) => {
+            latentUpscalerStepsField.value = latent_upscaler_steps
+        },
+        readUI: () => latentUpscalerStepsField.value,
+        parse: (val) => val,
+    },
+    sampler_name: {
+        name: "Sampler",
         setUI: (sampler_name) => {
             samplerField.value = sampler_name
         },
         readUI: () => samplerField.value,
-        parse: (val) => val
+        parse: (val) => val,
     },
-    use_stable_diffusion_model: { name: 'Stable Diffusion model',
+    use_stable_diffusion_model: {
+        name: "Stable Diffusion model",
         setUI: (use_stable_diffusion_model) => {
             const oldVal = stableDiffusionModelField.value
 
-            use_stable_diffusion_model = getModelPath(use_stable_diffusion_model, ['.ckpt', '.safetensors'])
+            use_stable_diffusion_model = getModelPath(use_stable_diffusion_model, [".ckpt", ".safetensors"])
             stableDiffusionModelField.value = use_stable_diffusion_model
 
             if (!stableDiffusionModelField.value) {
@@ -214,104 +255,208 @@ const TASK_MAPPING = {
             }
         },
         readUI: () => stableDiffusionModelField.value,
-        parse: (val) => val
+        parse: (val) => val,
     },
-    use_vae_model: { name: 'VAE model',
+    clip_skip: {
+        name: "Clip Skip",
+        setUI: (value) => {
+            clip_skip.checked = value
+        },
+        readUI: () => clip_skip.checked,
+        parse: (val) => Boolean(val),
+    },
+    tiling: {
+        name: "Tiling",
+        setUI: (val) => {
+            tilingField.value = val
+        },
+        readUI: () => tilingField.value,
+        parse: (val) => val,
+    },
+    use_vae_model: {
+        name: "VAE model",
         setUI: (use_vae_model) => {
             const oldVal = vaeModelField.value
-            use_vae_model = (use_vae_model === undefined || use_vae_model === null || use_vae_model === 'None' ? '' : use_vae_model)
+            use_vae_model =
+                use_vae_model === undefined || use_vae_model === null || use_vae_model === "None" ? "" : use_vae_model
 
-            if (use_vae_model !== '') {
-                use_vae_model = getModelPath(use_vae_model, ['.vae.pt', '.ckpt'])
-                use_vae_model = use_vae_model !== '' ? use_vae_model : oldVal
+            if (use_vae_model !== "") {
+                use_vae_model = getModelPath(use_vae_model, [".vae.pt", ".ckpt"])
+                use_vae_model = use_vae_model !== "" ? use_vae_model : oldVal
             }
             vaeModelField.value = use_vae_model
         },
         readUI: () => vaeModelField.value,
-        parse: (val) => val
+        parse: (val) => val,
     },
-    use_hypernetwork_model: { name: 'Hypernetwork model',
+    use_controlnet_model: {
+        name: "ControlNet model",
+        setUI: (use_controlnet_model) => {
+            controlnetModelField.value = getModelPath(use_controlnet_model, [".pth", ".safetensors"])
+        },
+        readUI: () => controlnetModelField.value,
+        parse: (val) => val,
+    },
+    control_filter_to_apply: {
+        name: "ControlNet Filter",
+        setUI: (control_filter_to_apply) => {
+            controlImageFilterField.value = control_filter_to_apply
+        },
+        readUI: () => controlImageFilterField.value,
+        parse: (val) => val,
+    },
+    use_lora_model: {
+        name: "LoRA model",
+        setUI: (use_lora_model) => {
+            let modelPaths = []
+            use_lora_model = Array.isArray(use_lora_model) ? use_lora_model : [use_lora_model]
+            use_lora_model.forEach((m) => {
+                if (m.includes("models\\lora\\")) {
+                    m = m.split("models\\lora\\")[1]
+                } else if (m.includes("models\\\\lora\\\\")) {
+                    m = m.split("models\\\\lora\\\\")[1]
+                } else if (m.includes("models/lora/")) {
+                    m = m.split("models/lora/")[1]
+                }
+                m = m.replaceAll("\\\\", "/")
+                m = getModelPath(m, [".ckpt", ".safetensors"])
+                modelPaths.push(m)
+            })
+            loraModelField.modelNames = modelPaths
+        },
+        readUI: () => {
+            return loraModelField.modelNames
+        },
+        parse: (val) => {
+            val = !val || val === "None" ? "" : val
+            if (typeof val === "string" && val.includes(",")) {
+                val = val.split(",")
+                val = val.map((v) => v.trim())
+                val = val.map((v) => v.replaceAll("\\", "\\\\"))
+                val = val.map((v) => v.replaceAll('"', ""))
+                val = val.map((v) => v.replaceAll("'", ""))
+                val = val.map((v) => '"' + v + '"')
+                val = "[" + val + "]"
+                val = JSON.parse(val)
+            }
+            val = Array.isArray(val) ? val : [val]
+            return val
+        },
+    },
+    lora_alpha: {
+        name: "LoRA Strength",
+        setUI: (lora_alpha) => {
+            lora_alpha = Array.isArray(lora_alpha) ? lora_alpha : [lora_alpha]
+            loraModelField.modelWeights = lora_alpha
+        },
+        readUI: () => {
+            return loraModelField.modelWeights
+        },
+        parse: (val) => {
+            if (typeof val === "string" && val.includes(",")) {
+                val = "[" + val.replaceAll("'", '"') + "]"
+                val = JSON.parse(val)
+            }
+            val = Array.isArray(val) ? val : [val]
+            val = val.map((e) => parseFloat(e))
+            return val
+        },
+    },
+    use_hypernetwork_model: {
+        name: "Hypernetwork model",
         setUI: (use_hypernetwork_model) => {
             const oldVal = hypernetworkModelField.value
-            use_hypernetwork_model = (use_hypernetwork_model === undefined || use_hypernetwork_model === null || use_hypernetwork_model === 'None' ? '' : use_hypernetwork_model)
+            use_hypernetwork_model =
+                use_hypernetwork_model === undefined ||
+                use_hypernetwork_model === null ||
+                use_hypernetwork_model === "None"
+                    ? ""
+                    : use_hypernetwork_model
 
-            if (use_hypernetwork_model !== '') {
-                use_hypernetwork_model = getModelPath(use_hypernetwork_model, ['.pt'])
-                use_hypernetwork_model = use_hypernetwork_model !== '' ? use_hypernetwork_model : oldVal
+            if (use_hypernetwork_model !== "") {
+                use_hypernetwork_model = getModelPath(use_hypernetwork_model, [".pt"])
+                use_hypernetwork_model = use_hypernetwork_model !== "" ? use_hypernetwork_model : oldVal
             }
             hypernetworkModelField.value = use_hypernetwork_model
-            hypernetworkModelField.dispatchEvent(new Event('change'))
+            hypernetworkModelField.dispatchEvent(new Event("change"))
         },
         readUI: () => hypernetworkModelField.value,
-        parse: (val) => val
+        parse: (val) => val,
     },
-    hypernetwork_strength: { name: 'Hypernetwork Strength',
+    hypernetwork_strength: {
+        name: "Hypernetwork Strength",
         setUI: (hypernetwork_strength) => {
             hypernetworkStrengthField.value = hypernetwork_strength
             updateHypernetworkStrengthSlider()
         },
         readUI: () => parseFloat(hypernetworkStrengthField.value),
-        parse: (val) => parseFloat(val)
+        parse: (val) => parseFloat(val),
     },
 
-    num_outputs: { name: 'Parallel Images',
+    num_outputs: {
+        name: "Parallel Images",
         setUI: (num_outputs) => {
             numOutputsParallelField.value = num_outputs
         },
         readUI: () => parseInt(numOutputsParallelField.value),
-        parse: (val) => val
+        parse: (val) => val,
     },
 
-    use_cpu: { name: 'Use CPU',
+    use_cpu: {
+        name: "Use CPU",
         setUI: (use_cpu) => {
             useCPUField.checked = use_cpu
         },
         readUI: () => useCPUField.checked,
-        parse: (val) => val
+        parse: (val) => val,
     },
 
-    stream_image_progress: { name: 'Stream Image Progress',
+    stream_image_progress: {
+        name: "Stream Image Progress",
         setUI: (stream_image_progress) => {
-            streamImageProgressField.checked = (parseInt(numOutputsTotalField.value) > 50 ? false : stream_image_progress)
+            streamImageProgressField.checked = parseInt(numOutputsTotalField.value) > 50 ? false : stream_image_progress
         },
         readUI: () => streamImageProgressField.checked,
-        parse: (val) => Boolean(val)
+        parse: (val) => Boolean(val),
     },
-    show_only_filtered_image: { name: 'Show only the corrected/upscaled image',
+    show_only_filtered_image: {
+        name: "Show only the corrected/upscaled image",
         setUI: (show_only_filtered_image) => {
             showOnlyFilteredImageField.checked = show_only_filtered_image
         },
         readUI: () => showOnlyFilteredImageField.checked,
-        parse: (val) => Boolean(val)
+        parse: (val) => Boolean(val),
     },
-    output_format: { name: 'Output Format',
+    output_format: {
+        name: "Output Format",
         setUI: (output_format) => {
             outputFormatField.value = output_format
         },
         readUI: () => outputFormatField.value,
-        parse: (val) => val
+        parse: (val) => val,
     },
-    save_to_disk_path: { name: 'Save to disk path',
+    save_to_disk_path: {
+        name: "Save to disk path",
         setUI: (save_to_disk_path) => {
             saveToDiskField.checked = Boolean(save_to_disk_path)
             diskPathField.value = save_to_disk_path
         },
         readUI: () => diskPathField.value,
-        parse: (val) => val
-    }
+        parse: (val) => val,
+    },
 }
 
 function restoreTaskToUI(task, fieldsToSkip) {
     fieldsToSkip = fieldsToSkip || []
 
-    if ('numOutputsTotal' in task) {
+    if ("numOutputsTotal" in task) {
         numOutputsTotalField.value = task.numOutputsTotal
     }
-    if ('seed' in task) {
+    if ("seed" in task) {
         randomSeedField.checked = false
         seedField.value = task.seed
     }
-    if (!('reqBody' in task)) {
+    if (!("reqBody" in task)) {
         return
     }
     for (const key in TASK_MAPPING) {
@@ -321,26 +466,32 @@ function restoreTaskToUI(task, fieldsToSkip) {
     }
 
     // properly reset fields not present in the task
-    if (!('use_hypernetwork_model' in task.reqBody)) {
+    if (!("use_hypernetwork_model" in task.reqBody)) {
         hypernetworkModelField.value = ""
         hypernetworkModelField.dispatchEvent(new Event("change"))
     }
 
+    if (!("use_lora_model" in task.reqBody)) {
+        loraModelField.modelNames = []
+        loraModelField.modelWeights = []
+    }
+
     // restore the original prompt if provided (e.g. use settings), fallback to prompt as needed (e.g. copy/paste or d&d)
     promptField.value = task.reqBody.original_prompt
-    if (!('original_prompt' in task.reqBody)) {
+    if (!("original_prompt" in task.reqBody)) {
         promptField.value = task.reqBody.prompt
     }
-    
+    promptField.dispatchEvent(new Event("input"))
+
     // properly reset checkboxes
-    if (!('use_face_correction' in task.reqBody)) {
+    if (!("use_face_correction" in task.reqBody)) {
         useFaceCorrectionField.checked = false
         gfpganModelField.disabled = true
     }
-    if (!('use_upscale' in task.reqBody)) {
+    if (!("use_upscale" in task.reqBody)) {
         useUpscalingField.checked = false
     }
-    if (!('mask' in task.reqBody) && maskSetting.checked) {
+    if (!("mask" in task.reqBody) && maskSetting.checked) {
         maskSetting.checked = false
         maskSetting.dispatchEvent(new Event("click"))
     }
@@ -351,46 +502,60 @@ function restoreTaskToUI(task, fieldsToSkip) {
     if (IMAGE_REGEX.test(initImagePreview.src) && task.reqBody.init_image == undefined) {
         // hide source image
         initImageClearBtn.dispatchEvent(new Event("click"))
-    }
-    else if (task.reqBody.init_image !== undefined) {
+    } else if (task.reqBody.init_image !== undefined) {
         // listen for inpainter loading event, which happens AFTER the main image loads (which reloads the inpainter)
-        initImagePreview.addEventListener('load', function() {
-            if (Boolean(task.reqBody.mask)) {
-                imageInpainter.setImg(task.reqBody.mask)
-                maskSetting.checked = true
-            }
-        }, { once: true })
+        initImagePreview.addEventListener(
+            "load",
+            function() {
+                if (Boolean(task.reqBody.mask)) {
+                    imageInpainter.setImg(task.reqBody.mask)
+                    maskSetting.checked = true
+                }
+            },
+            { once: true }
+        )
         initImagePreview.src = task.reqBody.init_image
     }
+
+    // hide/show controlnet picture as needed
+    if (IMAGE_REGEX.test(controlImagePreview.src) && task.reqBody.control_image == undefined) {
+        // hide source image
+        controlImageClearBtn.dispatchEvent(new Event("click"))
+    } else if (task.reqBody.control_image !== undefined) {
+        // listen for inpainter loading event, which happens AFTER the main image loads (which reloads the inpai
+        controlImagePreview.src = task.reqBody.control_image
+    }
 }
 function readUI() {
     const reqBody = {}
     for (const key in TASK_MAPPING) {
+        if (testDiffusers.checked && (key === "use_hypernetwork_model" || key === "hypernetwork_strength")) {
+            continue
+        }
+
         reqBody[key] = TASK_MAPPING[key].readUI()
     }
     return {
-        'numOutputsTotal': parseInt(numOutputsTotalField.value),
-        'seed': TASK_MAPPING['seed'].readUI(),
-        'reqBody': reqBody
+        numOutputsTotal: parseInt(numOutputsTotalField.value),
+        seed: TASK_MAPPING["seed"].readUI(),
+        reqBody: reqBody,
     }
 }
-function getModelPath(filename, extensions)
-{
+function getModelPath(filename, extensions) {
     if (typeof filename !== "string") {
         return
     }
-    
+
     let pathIdx
-    if (filename.includes('/models/stable-diffusion/')) {
-        pathIdx = filename.indexOf('/models/stable-diffusion/') + 25 // Linux, Mac paths
-    }
-    else if (filename.includes('\\models\\stable-diffusion\\')) {
-        pathIdx = filename.indexOf('\\models\\stable-diffusion\\') + 25 // Linux, Mac paths
+    if (filename.includes("/models/stable-diffusion/")) {
+        pathIdx = filename.indexOf("/models/stable-diffusion/") + 25 // Linux, Mac paths
+    } else if (filename.includes("\\models\\stable-diffusion\\")) {
+        pathIdx = filename.indexOf("\\models\\stable-diffusion\\") + 25 // Linux, Mac paths
     }
     if (pathIdx >= 0) {
         filename = filename.slice(pathIdx)
     }
-    extensions.forEach(ext => {
+    extensions.forEach((ext) => {
         if (filename.endsWith(ext)) {
             filename = filename.slice(0, filename.length - ext.length)
         }
@@ -399,26 +564,30 @@ function getModelPath(filename, extensions)
 }
 
 const TASK_TEXT_MAPPING = {
-    prompt: 'Prompt',
-    width: 'Width',
-    height: 'Height',
-    seed: 'Seed',
-    num_inference_steps: 'Steps',
-    guidance_scale: 'Guidance Scale',
-    prompt_strength: 'Prompt Strength',
-    use_face_correction: 'Use Face Correction',
-    use_upscale: 'Use Upscaling',
-    upscale_amount: 'Upscale By',
-    sampler_name: 'Sampler',
-    negative_prompt: 'Negative Prompt',
-    use_stable_diffusion_model: 'Stable Diffusion model',
-    use_hypernetwork_model: 'Hypernetwork model',
-    hypernetwork_strength: 'Hypernetwork Strength'
+    prompt: "Prompt",
+    width: "Width",
+    height: "Height",
+    seed: "Seed",
+    num_inference_steps: "Steps",
+    guidance_scale: "Guidance Scale",
+    prompt_strength: "Prompt Strength",
+    use_face_correction: "Use Face Correction",
+    use_upscale: "Use Upscaling",
+    upscale_amount: "Upscale By",
+    sampler_name: "Sampler",
+    negative_prompt: "Negative Prompt",
+    use_stable_diffusion_model: "Stable Diffusion model",
+    use_hypernetwork_model: "Hypernetwork model",
+    hypernetwork_strength: "Hypernetwork Strength",
+    use_lora_model: "LoRA model",
+    lora_alpha: "LoRA Strength",
+    use_controlnet_model: "ControlNet model",
+    control_filter_to_apply: "ControlNet Filter",
 }
 function parseTaskFromText(str) {
     const taskReqBody = {}
 
-    const lines = str.split('\n')
+    const lines = str.split("\n")
     if (lines.length === 0) {
         return
     }
@@ -426,14 +595,14 @@ function parseTaskFromText(str) {
     // Prompt
     let knownKeyOnFirstLine = false
     for (let key in TASK_TEXT_MAPPING) {
-        if (lines[0].startsWith(TASK_TEXT_MAPPING[key] + ':')) {
+        if (lines[0].startsWith(TASK_TEXT_MAPPING[key] + ":")) {
             knownKeyOnFirstLine = true
             break
         }
     }
     if (!knownKeyOnFirstLine) {
         taskReqBody.prompt = lines[0]
-        console.log('Prompt:', taskReqBody.prompt)
+        console.log("Prompt:", taskReqBody.prompt)
     }
 
     for (const key in TASK_TEXT_MAPPING) {
@@ -441,18 +610,18 @@ function parseTaskFromText(str) {
             continue
         }
 
-        const name = TASK_TEXT_MAPPING[key];
+        const name = TASK_TEXT_MAPPING[key]
         let val = undefined
 
-        const reName = new RegExp(`${name}\\ *:\\ *(.*)(?:\\r\\n|\\r|\\n)*`, 'igm')
-        const match = reName.exec(str);
+        const reName = new RegExp(`${name}\\ *:\\ *(.*)(?:\\r\\n|\\r|\\n)*`, "igm")
+        const match = reName.exec(str)
         if (match) {
             str = str.slice(0, match.index) + str.slice(match.index + match[0].length)
             val = match[1]
         }
         if (val !== undefined) {
             taskReqBody[key] = TASK_MAPPING[key].parse(val.trim())
-            console.log(TASK_MAPPING[key].name + ':', taskReqBody[key])
+            console.log(TASK_MAPPING[key].name + ":", taskReqBody[key])
             if (!str) {
                 break
             }
@@ -462,18 +631,19 @@ function parseTaskFromText(str) {
         return undefined
     }
     const task = { reqBody: taskReqBody }
-    if ('seed' in taskReqBody) {
+    if ("seed" in taskReqBody) {
         task.seed = taskReqBody.seed
     }
     return task
 }
 
 async function parseContent(text) {
-    text = text.trim();
-    if (text.startsWith('{') && text.endsWith('}')) {
+    text = text.trim()
+    if (text.startsWith("{") && text.endsWith("}")) {
         try {
             const task = JSON.parse(text)
-            if (!('reqBody' in task)) { // support the format saved to the disk, by the UI
+            if (!("reqBody" in task)) {
+                // support the format saved to the disk, by the UI
                 task.reqBody = Object.assign({}, task)
             }
             restoreTaskToUI(task)
@@ -485,11 +655,13 @@ async function parseContent(text) {
     }
     // Normal txt file.
     const task = parseTaskFromText(text)
-    if (text.toLowerCase().includes('seed:') && task) { // only parse valid task content
+    if (text.toLowerCase().includes("seed:") && task) {
+        // only parse valid task content
         restoreTaskToUI(task)
         return true
     } else {
         console.warn(`Raw text content couldn't be parsed.`)
+        promptField.value = text
         return false
     }
 }
@@ -501,21 +673,25 @@ async function readFile(file, i) {
 }
 
 function dropHandler(ev) {
-    console.log('Content dropped...')
+    console.log("Content dropped...")
     let items = []
 
-    if (ev?.dataTransfer?.items) { // Use DataTransferItemList interface
+    if (ev?.dataTransfer?.items) {
+        // Use DataTransferItemList interface
         items = Array.from(ev.dataTransfer.items)
-        items = items.filter(item => item.kind === 'file')
-        items = items.map(item => item.getAsFile())
-    } else if (ev?.dataTransfer?.files) { // Use DataTransfer interface
+        items = items.filter((item) => item.kind === "file")
+        items = items.map((item) => item.getAsFile())
+    } else if (ev?.dataTransfer?.files) {
+        // Use DataTransfer interface
         items = Array.from(ev.dataTransfer.files)
     }
 
-    items.forEach(item => {item.file_ext = EXT_REGEX.exec(item.name.toLowerCase())[1]})
+    items.forEach((item) => {
+        item.file_ext = EXT_REGEX.exec(item.name.toLowerCase())[1]
+    })
 
-    let text_items = items.filter(item => TEXT_EXTENSIONS.includes(item.file_ext))
-    let image_items = items.filter(item => IMAGE_EXTENSIONS.includes(item.file_ext))
+    let text_items = items.filter((item) => TEXT_EXTENSIONS.includes(item.file_ext))
+    let image_items = items.filter((item) => IMAGE_EXTENSIONS.includes(item.file_ext))
 
     if (image_items.length > 0 && ev.target == initImageSelector) {
         return // let the event bubble up, so that the Init Image filepicker can receive this
@@ -525,7 +701,7 @@ function dropHandler(ev) {
     text_items.forEach(readFile)
 }
 function dragOverHandler(ev) {
-    console.log('Content in drop zone')
+    console.log("Content in drop zone")
 
     // Prevent default behavior (Prevent file/content from being opened)
     ev.preventDefault()
@@ -533,73 +709,72 @@ function dragOverHandler(ev) {
     ev.dataTransfer.dropEffect = "copy"
 
     let img = new Image()
-    img.src = '//' + location.host + '/media/images/favicon-32x32.png'
+    img.src = "//" + location.host + "/media/images/favicon-32x32.png"
     ev.dataTransfer.setDragImage(img, 16, 16)
 }
 
 document.addEventListener("drop", dropHandler)
 document.addEventListener("dragover", dragOverHandler)
 
-const TASK_REQ_NO_EXPORT = [
-    "use_cpu",
-    "save_to_disk_path"
-]
-const resetSettings = document.getElementById('reset-image-settings')
+const TASK_REQ_NO_EXPORT = ["use_cpu", "save_to_disk_path"]
+const resetSettings = document.getElementById("reset-image-settings")
 
-function checkReadTextClipboardPermission (result) {
+function checkReadTextClipboardPermission(result) {
     if (result.state != "granted" && result.state != "prompt") {
         return
     }
     // PASTE ICON
-    const pasteIcon = document.createElement('i')
-    pasteIcon.className = 'fa-solid fa-paste section-button'
+    const pasteIcon = document.createElement("i")
+    pasteIcon.className = "fa-solid fa-paste section-button"
     pasteIcon.innerHTML = `<span class="simple-tooltip top-left">Paste Image Settings</span>`
-    pasteIcon.addEventListener('click', async (event) => {
+    pasteIcon.addEventListener("click", async (event) => {
         event.stopPropagation()
         // Add css class 'active'
-        pasteIcon.classList.add('active')
+        pasteIcon.classList.add("active")
         // In 350 ms remove the 'active' class
-        asyncDelay(350).then(() => pasteIcon.classList.remove('active'))
+        asyncDelay(350).then(() => pasteIcon.classList.remove("active"))
 
         // Retrieve clipboard content and try to parse it
-        const text = await navigator.clipboard.readText();
+        const text = await navigator.clipboard.readText()
         await parseContent(text)
     })
     resetSettings.parentNode.insertBefore(pasteIcon, resetSettings)
 }
-navigator.permissions.query({ name: "clipboard-read" }).then(checkReadTextClipboardPermission, (reason) => console.log('clipboard-read is not available. %o', reason))
+navigator.permissions
+    .query({ name: "clipboard-read" })
+    .then(checkReadTextClipboardPermission, (reason) => console.log("clipboard-read is not available. %o", reason))
 
-document.addEventListener('paste', async (event) => {
+document.addEventListener("paste", async (event) => {
     if (event.target) {
         const targetTag = event.target.tagName.toLowerCase()
         // Disable when targeting input elements.
-        if (targetTag === 'input' || targetTag === 'textarea') {
+        if (targetTag === "input" || targetTag === "textarea") {
             return
         }
     }
-    const paste = (event.clipboardData || window.clipboardData).getData('text')
+    const paste = (event.clipboardData || window.clipboardData).getData("text")
     const selection = window.getSelection()
-    if (selection.toString().trim().length <= 0 && await parseContent(paste)) {
+    if (paste != "" && selection.toString().trim().length <= 0 && (await parseContent(paste))) {
         event.preventDefault()
         return
     }
 })
 
 // Adds a copy and a paste icon if the browser grants permission to write to clipboard.
-function checkWriteToClipboardPermission (result) {
+function checkWriteToClipboardPermission(result) {
     if (result.state != "granted" && result.state != "prompt") {
         return
     }
     // COPY ICON
-    const copyIcon = document.createElement('i')
-    copyIcon.className = 'fa-solid fa-clipboard section-button'
+    const copyIcon = document.createElement("i")
+    copyIcon.className = "fa-solid fa-clipboard section-button"
     copyIcon.innerHTML = `<span class="simple-tooltip top-left">Copy Image Settings</span>`
-    copyIcon.addEventListener('click', (event) => {
+    copyIcon.addEventListener("click", (event) => {
         event.stopPropagation()
         // Add css class 'active'
-        copyIcon.classList.add('active')
+        copyIcon.classList.add("active")
         // In 350 ms remove the 'active' class
-        asyncDelay(350).then(() => copyIcon.classList.remove('active'))
+        asyncDelay(350).then(() => copyIcon.classList.remove("active"))
         const uiState = readUI()
         TASK_REQ_NO_EXPORT.forEach((key) => delete uiState.reqBody[key])
         if (uiState.reqBody.init_image && !IMAGE_REGEX.test(uiState.reqBody.init_image)) {
@@ -612,8 +787,8 @@ function checkWriteToClipboardPermission (result) {
 }
 // Determine which access we have to the clipboard. Clipboard access is only available on localhost or via TLS.
 navigator.permissions.query({ name: "clipboard-write" }).then(checkWriteToClipboardPermission, (e) => {
-    if (e instanceof TypeError && typeof navigator?.clipboard?.writeText === 'function') {
+    if (e instanceof TypeError && typeof navigator?.clipboard?.writeText === "function") {
         // Fix for firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1560373
-        checkWriteToClipboardPermission({state:"granted"})
+        checkWriteToClipboardPermission({ state: "granted" })
     }
 })

ui/media/js/image-modal.js

@@ -0,0 +1,228 @@
+"use strict"
+
+/**
+ * @typedef {object} ImageModalRequest
+ * @property {string} src
+ * @property {ImageModalRequest | () => ImageModalRequest | undefined} previous
+ * @property {ImageModalRequest | () => ImageModalRequest | undefined} next
+ */
+
+/**
+ * @type {(() => (string | ImageModalRequest) | string | ImageModalRequest) => {}}
+ */
+const imageModal = (function() {
+    const backElem = createElement("i", undefined, ["fa-solid", "fa-arrow-left", "tertiaryButton"])
+
+    const forwardElem = createElement("i", undefined, ["fa-solid", "fa-arrow-right", "tertiaryButton"])
+
+    const zoomElem = createElement("i", undefined, ["fa-solid", "tertiaryButton"])
+
+    const closeElem = createElement("i", undefined, ["fa-solid", "fa-xmark", "tertiaryButton"])
+
+    const menuBarElem = createElement("div", undefined, "menu-bar", [backElem, forwardElem, zoomElem, closeElem])
+
+    const imageContainer = createElement("div", undefined, "image-wrapper")
+
+    const backdrop = createElement("div", undefined, "backdrop")
+
+    const modalContainer = createElement("div", undefined, "content", [menuBarElem, imageContainer])
+
+    const modalElem = createElement("div", { id: "viewFullSizeImgModal" }, ["popup"], [backdrop, modalContainer])
+    document.body.appendChild(modalElem)
+
+    const setZoomLevel = (value) => {
+        const img = imageContainer.querySelector("img")
+
+        if (value) {
+            zoomElem.classList.remove("fa-magnifying-glass-plus")
+            zoomElem.classList.add("fa-magnifying-glass-minus")
+            if (img) {
+                img.classList.remove("natural-zoom")
+
+                let zoomLevel = typeof value === "number" ? value : img.dataset.zoomLevel
+                if (!zoomLevel) {
+                    zoomLevel = 100
+                }
+
+                img.dataset.zoomLevel = zoomLevel
+                img.width = img.naturalWidth * (+zoomLevel / 100)
+                img.height = img.naturalHeight * (+zoomLevel / 100)
+            }
+        } else {
+            zoomElem.classList.remove("fa-magnifying-glass-minus")
+            zoomElem.classList.add("fa-magnifying-glass-plus")
+            if (img) {
+                img.classList.add("natural-zoom")
+                img.removeAttribute("width")
+                img.removeAttribute("height")
+            }
+        }
+    }
+
+    zoomElem.addEventListener("click", () =>
+        setZoomLevel(imageContainer.querySelector("img")?.classList?.contains("natural-zoom"))
+    )
+
+    const initialState = () => ({
+        previous: undefined,
+        next: undefined,
+
+        start: {
+            x: 0,
+            y: 0,
+        },
+
+        scroll: {
+            x: 0,
+            y: 0,
+        },
+    })
+
+    const state = initialState()
+
+    // Allow grabbing the image to scroll
+    const stopGrabbing = (e) => {
+        if(imageContainer.classList.contains("grabbing")) {
+            imageContainer.classList.remove("grabbing")
+            e?.preventDefault()
+            console.log(`stopGrabbing()`, e)
+        }
+    }
+
+    const addImageGrabbing = (image) => {
+        image?.addEventListener('mousedown', (e) => {
+            if (!image.classList.contains("natural-zoom")) {
+                e.stopPropagation()
+                e.stopImmediatePropagation()
+                e.preventDefault()
+
+                imageContainer.classList.add("grabbing")
+                state.start.x = e.pageX - imageContainer.offsetLeft
+                state.scroll.x = imageContainer.scrollLeft
+                state.start.y = e.pageY - imageContainer.offsetTop
+                state.scroll.y = imageContainer.scrollTop
+            }
+        })
+
+        image?.addEventListener('mouseup', stopGrabbing)
+        image?.addEventListener('mouseleave', stopGrabbing)
+        image?.addEventListener('mousemove', (e) => {
+            if(imageContainer.classList.contains("grabbing")) {
+                e.stopPropagation()
+                e.stopImmediatePropagation()
+                e.preventDefault()
+
+                // Might need to increase this multiplier based on the image size to window size ratio
+                // The default 1:1 is pretty slow
+                const multiplier = 1.0
+
+                const deltaX = e.pageX - imageContainer.offsetLeft - state.start.x
+                imageContainer.scrollLeft = state.scroll.x - (deltaX * multiplier)
+                const deltaY = e.pageY - imageContainer.offsetTop - state.start.y
+                imageContainer.scrollTop = state.scroll.y - (deltaY * multiplier)
+            }
+        })
+    }
+
+    const clear = () => {
+        imageContainer.innerHTML = ""
+
+        Object.entries(initialState()).forEach(([key, value]) => state[key] = value)
+
+        stopGrabbing()
+    }
+
+    const close = () => {
+        clear()
+        modalElem.classList.remove("active")
+        document.body.style.overflow = "initial"
+    }
+
+    /**
+     * @param {() => (string | ImageModalRequest) | string | ImageModalRequest} optionsFactory
+     */
+    function init(optionsFactory) {
+        if (!optionsFactory) {
+            close()
+            return
+        }
+
+        clear()
+
+        const options = typeof optionsFactory === "function" ? optionsFactory() : optionsFactory
+        const src = typeof options === "string" ? options : options.src
+
+        const imgElem = createElement("img", { src }, "natural-zoom")
+        addImageGrabbing(imgElem)
+        imageContainer.appendChild(imgElem)
+        modalElem.classList.add("active")
+        document.body.style.overflow = "hidden"
+        setZoomLevel(false)
+
+        if (typeof options === "object" && options.previous) {
+            state.previous = options.previous
+            backElem.style.display = "unset"
+        } else {
+            backElem.style.display = "none"
+        }
+
+        if (typeof options === "object" && options.next) {
+            state.next = options.next
+            forwardElem.style.display = "unset"
+        } else {
+            forwardElem.style.display = "none"
+        }
+    }
+
+    const back = () => {
+        if (state.previous) {
+            init(state.previous)
+        } else {
+            backElem.style.display = "none"
+        }
+    }
+
+    const forward = () => {
+        if (state.next) {
+            init(state.next)
+        } else {
+            forwardElem.style.display = "none"
+        }
+    }
+
+    window.addEventListener("keydown", (e) => {
+        if (modalElem.classList.contains("active")) {
+            switch (e.key) {
+                case "Escape":
+                    close()
+                    break
+                case "ArrowLeft":
+                    back()
+                    break
+                case "ArrowRight":
+                    forward()
+                    break
+            }
+        }
+    })
+    window.addEventListener("click", (e) => {
+        if (modalElem.classList.contains("active")) {
+            if (e.target === backdrop || e.target === closeElem) {
+                close()
+            }
+
+            e.stopPropagation()
+            e.stopImmediatePropagation()
+            e.preventDefault()
+        }
+    })
+
+    backElem.addEventListener("click", back)
+
+    forwardElem.addEventListener("click", forward)
+
+    /**
+     * @param {() => (string | ImageModalRequest) | string | ImageModalRequest} optionsFactory
+     */
+    return (optionsFactory) => init(optionsFactory)
+})()

ui/media/js/image-modifiers.js

@@ -1,252 +1,303 @@
 let activeTags = []
 let modifiers = []
 let customModifiersGroupElement = undefined
+let customModifiersInitialContent = ""
+let modifierPanelFreezed = false
 
-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 customModifiersTextBox = document.querySelector('#custom-modifiers-input')
-let customModifierEntriesToolbar = document.querySelector('#editor-modifiers-entries-toolbar')
+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 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-subheader")
+let modifierSettingsCloseBtn = document.querySelector("#modifier-settings-close-button")
 
-const modifierThumbnailPath = 'media/modifier-thumbnails'
-const activeCardClass = 'modifier-card-active'
+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')
-    modifierCard.className = 'modifier-card'
+    let cardPreviewImageType = previewImageField.value
+
+    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 label = modifierCard.querySelector('.modifier-card-label')
+    const image = modifierCard.querySelector(".modifier-card-image")
+    const longLabel = modifierCard.querySelector(".modifier-card-label span.long-label")
+    const regularLabel = modifierCard.querySelector(".modifier-card-label p.regular-label")
 
-    errorText.innerText = 'No Image'
-
-    if (typeof previews == 'object') {
-        image.src = previews[0]; // portrait
-        image.setAttribute('preview-type', 'portrait')
+    if (typeof previews == "object") {
+        image.src = previews[cardPreviewImageType == "portrait" ? 0 : 1] // 0 index is portrait, 1 landscape
+        image.setAttribute("preview-type", cardPreviewImageType)
     } else {
         image.remove()
     }
 
     const maxLabelLength = 30
-    const cardLabel = removeBy ? name.replace('by ', '') : name
+    const cardLabel = removeBy ? name.replace("by ", "") : name
 
-    if(cardLabel.length <= maxLabelLength) {
-        label.querySelector('p').innerText = cardLabel
-    } else {
-        const tooltipText = document.createElement('span')
-        tooltipText.className = 'tooltip-text'
-        tooltipText.innerText = name
-
-        label.classList.add('tooltip')
-        label.appendChild(tooltipText)
-
-        label.querySelector('p').innerText = cardLabel.substring(0, maxLabelLength) + '...'
+    function getFormattedLabel(length) {
+        if (cardLabel?.length <= length) {
+            return cardLabel
+        } else {
+            return cardLabel.substring(0, length) + "..."
+        }
     }
-    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
 
-    const titleEl = document.createElement('h5')
-    titleEl.className = 'collapsible'
+    const titleEl = document.createElement("h5")
+    titleEl.className = "collapsible"
     titleEl.innerText = title
 
-    const modifiersEl = document.createElement('div')
-    modifiersEl.classList.add('collapsible-content', 'editor-modifiers-leaf')
+    const modifiersEl = document.createElement("div")
+    modifiersEl.classList.add("collapsible-content", "editor-modifiers-leaf")
 
-    if (initiallyExpanded === true) {
-        titleEl.className += ' active'
+    if (isInitiallyOpen === true) {
+        titleEl.classList.add("active")
     }
 
-    modifiers.forEach(modObj => {
+    modifiers.forEach((modObj) => {
         const modifierName = modObj.modifier
-        const modifierPreviews = modObj?.previews?.map(preview => `${IMAGE_REGEX.test(preview.image) ? preview.image : modifierThumbnailPath + '/' + preview.path}`)
+        const modifierPreviews = modObj?.previews?.map(
+            (preview) =>
+                `${IMAGE_REGEX.test(preview.image) ? preview.image : modifierThumbnailPath + "/" + preview.path}`
+        )
 
         const modifierCard = createModifierCard(modifierName, modifierPreviews, removeBy)
 
-        if(typeof modifierCard == 'object') {
+        if (typeof modifierCard == "object") {
             modifiersEl.appendChild(modifierCard)
             const trimmedName = trimModifiers(modifierName)
 
-            modifierCard.addEventListener('click', () => {
-                if (activeTags.map(x => trimModifiers(x.name)).includes(trimmedName)) {
+            modifierCard.addEventListener("click", () => {
+                if (activeTags.map((x) => trimModifiers(x.name)).includes(trimmedName)) {
                     // remove modifier from active array
-                    activeTags = activeTags.filter(x => trimModifiers(x.name) != trimmedName)
+                    activeTags = activeTags.filter((x) => trimModifiers(x.name) != trimmedName)
                     toggleCardState(trimmedName, false)
                 } else {
                     // add modifier to active array
                     activeTags.push({
-                        'name': modifierName,
-                        'element': modifierCard.cloneNode(true),
-                        'originElement': modifierCard,
-                        'previews': modifierPreviews
+                        name: modifierName,
+                        element: modifierCard.cloneNode(true),
+                        originElement: modifierCard,
+                        previews: modifierPreviews,
                     })
                     toggleCardState(trimmedName, true)
                 }
 
                 refreshTagsList()
-                document.dispatchEvent(new Event('refreshImageModifiers'))
+                document.dispatchEvent(new Event("refreshImageModifiers"))
             })
         }
     })
 
-    let brk = document.createElement('br')
-    brk.style.clear = 'both'
+    let brk = document.createElement("br")
+    brk.style.clear = "both"
     modifiersEl.appendChild(brk)
 
-    let e = document.createElement('div')
-    e.className = 'modifier-category'
+    let e = document.createElement("div")
+    e.className = "modifier-category"
     e.appendChild(titleEl)
     e.appendChild(modifiersEl)
 
-    editorModifierEntries.insertBefore(e, customModifierEntriesToolbar.nextSibling)
+    editorModifierEntries.prepend(e)
 
     return e
 }
 
 function trimModifiers(tag) {
-    return tag.replace(/^\(+|\)+$/g, '').replace(/^\[+|\]+$/g, '')
+    // Remove trailing '-' and/or '+'
+    tag = tag.replace(/[-+]+$/, "")
+    // Remove parentheses at beginning and end
+    return tag.replace(/^[(]+|[\s)]+$/g, "")
 }
 
 async function loadModifiers() {
     try {
-        let res = await fetch('/get/modifiers')
+        let res = await fetch("/get/modifiers")
         if (res.status === 200) {
             res = await res.json()
 
-            modifiers = res; // update global variable
+            modifiers = res // update global variable
 
             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)
         }
     } catch (e) {
-        console.log('error fetching modifiers', e)
+        console.error("error fetching modifiers", e)
     }
 
     loadCustomModifiers()
-    document.dispatchEvent(new Event('loadImageModifiers'))
+    resizeModifierCards(modifierCardSizeSlider.value)
+    document.dispatchEvent(new Event("loadImageModifiers"))
 }
 
-function refreshModifiersState(newTags) {
+function refreshModifiersState(newTags, inactiveTags) {
     // clear existing modifiers
-    document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(modifierCard => {
-        const modifierName = modifierCard.querySelector('.modifier-card-label p').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 = '+'
-        }
-    })
+    document
+        .querySelector("#editor-modifiers")
+        .querySelectorAll(".modifier-card")
+        .forEach((modifierCard) => {
+            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 = "+"
+            }
+        })
     activeTags = []
 
     // set new modifiers
-    newTags.forEach(tag => {
+    newTags.forEach((tag) => {
         let found = false
-        document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(modifierCard => {
-            const modifierName = modifierCard.querySelector('.modifier-card-label p').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)) { // only add each tag once even if several custom modifier cards share the same tag
-                    const imageModifierCard = modifierCard.cloneNode(true)
-                    imageModifierCard.querySelector('.modifier-card-label p').innerText = shortModifierName
-                    activeTags.push({
-                        'name': modifierName,
-                        'element': imageModifierCard,
-                        'originElement': modifierCard
-                    })
+        document
+            .querySelector("#editor-modifiers")
+            .querySelectorAll(".modifier-card")
+            .forEach((modifierCard) => {
+                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)) {
+                        // only add each tag once even if several custom modifier cards share the same tag
+                        const imageModifierCard = modifierCard.cloneNode(true)
+                        imageModifierCard.querySelector(".modifier-card-label p").innerText = tag.replace(
+                            modifierName,
+                            shortModifierName
+                        )
+                        activeTags.push({
+                            name: tag,
+                            element: imageModifierCard,
+                            originElement: modifierCard,
+                        })
+                    }
+                    modifierCard.classList.add(activeCardClass)
+                    modifierCard.querySelector(".modifier-card-image-overlay").innerText = "-"
+                    found = true
                 }
-                modifierCard.classList.add(activeCardClass)
-                modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-'
-                found = true
-            }
-        })
-        if (found == false) { // custom tag went missing, create one here
+            })
+        if (found == false) {
+            // custom tag went missing, create one here
             let modifierCard = createModifierCard(tag, undefined, false) // create a modifier card for the missing tag, no image
-            
-            modifierCard.addEventListener('click', () => {
-                if (activeTags.map(x => x.name).includes(tag)) {
+
+            modifierCard.addEventListener("click", () => {
+                if (activeTags.map((x) => x.name).includes(tag)) {
                     // remove modifier from active array
-                    activeTags = activeTags.filter(x => x.name != tag)
+                    activeTags = activeTags.filter((x) => x.name != tag)
                     modifierCard.classList.remove(activeCardClass)
 
-                    modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+'
+                    modifierCard.querySelector(".modifier-card-image-overlay").innerText = "+"
                 }
                 refreshTagsList()
             })
 
             activeTags.push({
-                'name': tag,
-                'element': modifierCard,
-                'originElement': undefined  // no origin element for missing tags
+                name: tag,
+                element: modifierCard,
+                originElement: undefined, // no origin element for missing tags
             })
         }
     })
-    refreshTagsList()
+    refreshTagsList(inactiveTags)
 }
 
 function refreshInactiveTags(inactiveTags) {
     // update inactive tags
     if (inactiveTags !== undefined && inactiveTags.length > 0) {
-        activeTags.forEach (tag => {
-            if (inactiveTags.find(element => element === tag.name) !== undefined) {
+        activeTags.forEach((tag) => {
+            if (inactiveTags.find((element) => element === tag.name) !== undefined) {
                 tag.inactive = true
             }
         })
     }
-    
+
     // update cards
-    let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay')
-    overlays.forEach (i => {
-        let modifierName = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText
-        if (inactiveTags.find(element => element === modifierName) !== undefined) {
-            i.parentElement.classList.add('modifier-toggle-inactive')
+    let overlays = editorModifierTagsList.querySelectorAll(".modifier-card-overlay")
+    overlays.forEach((i) => {
+        let modifierName = i.parentElement.dataset.fullName
+
+        if (inactiveTags?.find((element) => trimModifiers(element) === modifierName) !== undefined) {
+            i.parentElement.classList.add("modifier-toggle-inactive")
         }
     })
 }
 
-function refreshTagsList() {
-    editorModifierTagsList.innerHTML = ''
+function refreshTagsList(inactiveTags) {
+    editorModifierTagsList.innerHTML = ""
 
     if (activeTags.length == 0) {
-        editorTagsContainer.style.display = 'none'
+        editorTagsContainer.style.display = "none"
         return
     } else {
-        editorTagsContainer.style.display = 'block'
+        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')
+        tag.element.querySelector(".modifier-card-image-overlay").innerText = "-"
+        tag.element.classList.add("modifier-card-tiny")
 
         editorModifierTagsList.appendChild(tag.element)
 
-        tag.element.addEventListener('click', () => {
-            let idx = activeTags.findIndex(o => { return o.name === tag.name })            
+        tag.element.addEventListener("click", () => {
+            let idx = activeTags.findIndex((o) => {
+                return o.name === tag.name
+            })
 
             if (idx !== -1) {
                 toggleCardState(activeTags[idx].name, false)
@@ -254,99 +305,90 @@ function refreshTagsList() {
                 activeTags.splice(idx, 1)
                 refreshTagsList()
             }
-            document.dispatchEvent(new Event('refreshImageModifiers'))
+            document.dispatchEvent(new Event("refreshImageModifiers"))
         })
     })
 
-    let brk = document.createElement('br')
-    brk.style.clear = 'both'
+    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.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(card => {
-        const name = card.querySelector('.modifier-card-label').innerText
-        if (   trimModifiers(modifierName) == trimModifiers(name)
-            || trimModifiers(modifierName) == 'by ' + trimModifiers(name)) {
-            if(makeActive) {
-                card.classList.add(activeCardClass)
-                card.querySelector('.modifier-card-image-overlay').innerText = '-'
-            }
-            else{
-                card.classList.remove(activeCardClass)
-                card.querySelector('.modifier-card-image-overlay').innerText = '+'
-            }
+    const cards = [...document.querySelectorAll("#editor-modifiers .modifier-card")]
+        .filter(cardElem => trimModifiers(cardElem.dataset.fullName) == trimModifiers(modifierName))
+
+    const cardExists = typeof cards == "object" && cards?.length > 0
+
+    if (cardExists) {
+        const card = cards[0]
+    
+        if (makeActive) {
+            card.classList.add(activeCardClass)
+            card.querySelector(".modifier-card-image-overlay").innerText = "-"
+        } else {
+            card.classList.remove(activeCardClass)
+            card.querySelector(".modifier-card-image-overlay").innerText = "+"
         }
-    })
+    }
 }
 
 function changePreviewImages(val) {
-    const previewImages = document.querySelectorAll('.modifier-card-image-container img')
+    const previewImages = document.querySelectorAll(".modifier-card-image-container img")
 
-    let previewArr = []
-
-    modifiers.map(x => x.modifiers).forEach(x => previewArr.push(...x.map(m => m.previews)))
-    
-    previewArr = previewArr.map(x => {
-        let obj = {}
-
-        x.forEach(preview => {
+    const previewArr = modifiers.flatMap((x) => x.modifiers.map((m) => m.previews))
+        .map((x) => x.reduce((obj, preview) => {
             obj[preview.name] = preview.path
-        })
-        
-        return obj
-    })
 
-    previewImages.forEach(previewImage => {
-        const currentPreviewType = previewImage.getAttribute('preview-type')
-        const relativePreviewPath = previewImage.src.split(modifierThumbnailPath + '/').pop()
+            return obj
+        }, {}))
 
-        const previews = previewArr.find(preview => relativePreviewPath == preview[currentPreviewType])
+    previewImages.forEach((previewImage) => {
+        const currentPreviewType = previewImage.getAttribute("preview-type")
+        const relativePreviewPath = previewImage.src.split(modifierThumbnailPath + "/").pop()
 
-        if(typeof previews == 'object') {
+        const previews = previewArr.find((preview) => relativePreviewPath == preview[currentPreviewType])
+
+        if (typeof previews == "object") {
             let preview = null
 
-            if (val == 'portrait') {
+            if (val == "portrait") {
                 preview = previews.portrait
-            }
-            else if (val == 'landscape') {
+            } else if (val == "landscape") {
                 preview = previews.landscape
             }
 
-            if(preview != null) {
+            if (preview) {
                 previewImage.src = `${modifierThumbnailPath}/${preview}`
-                previewImage.setAttribute('preview-type', val)
+                previewImage.setAttribute("preview-type", val)
             }
         }
     })
 }
 
 function resizeModifierCards(val) {
-    const cardSizePrefix = 'modifier-card-size_'
-    const modifierCardClass = 'modifier-card'
+    const cardSizePrefix = "modifier-card-size_"
+    const modifierCardClass = "modifier-card"
 
     const modifierCards = document.querySelectorAll(`.${modifierCardClass}`)
-    const cardSize = n => `${cardSizePrefix}${n}`
+    const cardSize = (n) => `${cardSizePrefix}${n}`
 
-    modifierCards.forEach(card => {
+    modifierCards.forEach((card) => {
         // remove existing size classes
-        const classes = card.className.split(' ').filter(c => !c.startsWith(cardSizePrefix))
-        card.className = classes.join(' ').trim()
+        const classes = card.className.split(" ").filter((c) => !c.startsWith(cardSizePrefix))
+        card.className = classes.join(" ").trim()
 
-        if(val != 0) {
+        if (val != 0) {
             card.classList.add(cardSize(val))
         }
     })
 }
 
-modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value)
-previewImageField.onchange = () => changePreviewImages(previewImageField.value)
-
-modifierSettingsBtn.addEventListener('click', function(e) {
-    modifierSettingsOverlay.classList.add("active")
-    e.stopPropagation()
-})
-
 function saveCustomModifiers() {
     localStorage.setItem(CUSTOM_MODIFIERS_KEY, customModifiersTextBox.value.trim())
 
@@ -354,7 +396,159 @@ function saveCustomModifiers() {
 }
 
 function loadCustomModifiers() {
-    PLUGINS['MODIFIERS_LOAD'].forEach(fn=>fn.loader.call())
+    PLUGINS["MODIFIERS_LOAD"].forEach((fn) => fn.loader.call())
 }
 
-customModifiersTextBox.addEventListener('change', saveCustomModifiers)
+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/multi-model-selector.js

@@ -0,0 +1,256 @@
+/**
+ * A component consisting of multiple model dropdowns, along with a "weight" field per model.
+ *
+ * Behaves like a single input element, giving an object in response to the .value field.
+ *
+ * Inspired by the design of the ModelDropdown component (searchable-models.js).
+ */
+
+class MultiModelSelector {
+    root
+    modelType
+    modelNameFriendly
+    defaultWeight
+    weightStep
+
+    modelContainer
+    addNewButton
+
+    counter = 0
+
+    /* MIMIC A REGULAR INPUT FIELD */
+    get id() {
+        return this.root.id
+    }
+    get parentElement() {
+        return this.root.parentElement
+    }
+    get parentNode() {
+        return this.root.parentNode
+    }
+    get value() {
+        return { modelNames: this.modelNames, modelWeights: this.modelWeights }
+    }
+    set value(modelData) {
+        if (typeof modelData !== "object") {
+            throw new Error("Multi-model selector expects an object containing modelNames and modelWeights as keys!")
+        }
+        if (!("modelNames" in modelData) || !("modelWeights" in modelData)) {
+            throw new Error("modelNames or modelWeights not present in the data passed to the multi-model selector")
+        }
+
+        let newModelNames = modelData["modelNames"]
+        let newModelWeights = modelData["modelWeights"]
+        if (newModelNames.length !== newModelWeights.length) {
+            throw new Error("Need to pass an equal number of modelNames and modelWeights!")
+        }
+
+        // update weight first, name second.
+        // for some unholy reason this order matters for dispatch chains
+        // the root of all this unholiness is because searchable-models automatically dispatches an update event
+        // as soon as the value is updated via JS, which is against the DOM pattern of not dispatching an event automatically
+        // unless the caller explicitly dispatches the event.
+        this.modelWeights = newModelWeights
+        this.modelNames = newModelNames
+    }
+    get disabled() {
+        return false
+    }
+    set disabled(state) {
+        // do nothing
+    }
+    getModelElements(ignoreEmpty = false) {
+        let entries = this.root.querySelectorAll(".model_entry")
+        entries = [...entries]
+        let elements = entries.map((e) => {
+            let modelName = e.querySelector(".model_name").field
+            let modelWeight = e.querySelector(".model_weight")
+            if (ignoreEmpty && modelName.value.trim() === "") {
+                return null
+            }
+
+            return { name: modelName, weight: modelWeight }
+        })
+        elements = elements.filter((e) => e !== null)
+        return elements
+    }
+    addEventListener(type, listener, options) {
+        // do nothing
+    }
+    dispatchEvent(event) {
+        // do nothing
+    }
+    appendChild(option) {
+        // do nothing
+    }
+
+    // remember 'this' - http://blog.niftysnippets.org/2008/04/you-must-remember-this.html
+    bind(f, obj) {
+        return function() {
+            return f.apply(obj, arguments)
+        }
+    }
+
+    constructor(root, modelType, modelNameFriendly = undefined, defaultWeight = 0.5, weightStep = 0.02) {
+        this.root = root
+        this.modelType = modelType
+        this.modelNameFriendly = modelNameFriendly || modelType
+        this.defaultWeight = defaultWeight
+        this.weightStep = weightStep
+
+        let self = this
+        document.addEventListener("refreshModels", function() {
+            setTimeout(self.bind(self.populateModels, self), 1)
+        })
+
+        this.createStructure()
+        this.populateModels()
+    }
+
+    createStructure() {
+        this.modelContainer = document.createElement("div")
+        this.modelContainer.className = "model_entries"
+        this.root.appendChild(this.modelContainer)
+
+        this.addNewButton = document.createElement("button")
+        this.addNewButton.className = "add_model_entry"
+        this.addNewButton.innerHTML = '<i class="fa-solid fa-plus"></i> add another ' + this.modelNameFriendly
+        this.addNewButton.addEventListener("click", this.bind(this.addModelEntry, this))
+        this.root.appendChild(this.addNewButton)
+    }
+
+    populateModels() {
+        if (this.root.dataset.path === "") {
+            if (this.length === 0) {
+                this.addModelEntry() // create a single blank entry
+            }
+        } else {
+            this.value = JSON.parse(this.root.dataset.path)
+        }
+    }
+
+    addModelEntry() {
+        let idx = this.counter++
+        let currLength = this.length
+
+        const modelElement = document.createElement("div")
+        modelElement.className = "model_entry"
+        modelElement.innerHTML = `
+            <input id="${this.modelType}_${idx}" class="model_name model-filter" type="text" spellcheck="false" autocomplete="off" data-path="" />
+            <input class="model_weight" type="number" step="${this.weightStep}" value="${this.defaultWeight}" pattern="^-?[0-9]*\.?[0-9]*$" onkeypress="preventNonNumericalInput(event)">
+        `
+        this.modelContainer.appendChild(modelElement)
+
+        let modelNameEl = modelElement.querySelector(".model_name")
+        modelNameEl.field = new ModelDropdown(modelNameEl, this.modelType, "None")
+        let modelWeightEl = modelElement.querySelector(".model_weight")
+
+        let self = this
+
+        function makeUpdateEvent(type) {
+            return function(e) {
+                e.stopPropagation()
+
+                let modelData = self.value
+                self.root.dataset.path = JSON.stringify(modelData)
+
+                self.root.dispatchEvent(new Event(type))
+            }
+        }
+
+        modelNameEl.addEventListener("change", makeUpdateEvent("change"))
+        modelNameEl.addEventListener("input", makeUpdateEvent("input"))
+        modelWeightEl.addEventListener("change", makeUpdateEvent("change"))
+        modelWeightEl.addEventListener("input", makeUpdateEvent("input"))
+
+        let removeBtn = document.createElement("button")
+        removeBtn.className = "remove_model_btn"
+        removeBtn.setAttribute("title", "Remove model")
+        removeBtn.innerHTML = '<i class="fa-solid fa-minus"></i>'
+
+        if (currLength === 0) {
+            removeBtn.classList.add("displayNone")
+        }
+
+        removeBtn.addEventListener(
+            "click",
+            this.bind(function(e) {
+                this.modelContainer.removeChild(modelElement)
+
+                makeUpdateEvent("change")(e)
+            }, this)
+        )
+
+        modelElement.appendChild(removeBtn)
+    }
+
+    removeModelEntry() {
+        if (this.length === 0) {
+            return
+        }
+
+        let lastEntry = this.modelContainer.lastElementChild
+        lastEntry.remove()
+    }
+
+    get length() {
+        return this.getModelElements().length
+    }
+
+    get modelNames() {
+        return this.getModelElements(true).map((e) => e.name.value)
+    }
+
+    set modelNames(newModelNames) {
+        this.resizeEntryList(newModelNames.length)
+
+        if (newModelNames.length === 0) {
+            this.getModelElements()[0].name.value = ""
+        }
+
+        // assign to the corresponding elements
+        let currElements = this.getModelElements()
+        for (let i = 0; i < newModelNames.length; i++) {
+            let curr = currElements[i]
+
+            curr.name.value = newModelNames[i]
+        }
+    }
+
+    get modelWeights() {
+        return this.getModelElements(true).map((e) => e.weight.value)
+    }
+
+    set modelWeights(newModelWeights) {
+        this.resizeEntryList(newModelWeights.length)
+
+        if (newModelWeights.length === 0) {
+            this.getModelElements()[0].weight.value = this.defaultWeight
+        }
+
+        // assign to the corresponding elements
+        let currElements = this.getModelElements()
+        for (let i = 0; i < newModelWeights.length; i++) {
+            let curr = currElements[i]
+
+            curr.weight.value = newModelWeights[i]
+        }
+    }
+
+    resizeEntryList(newLength) {
+        if (newLength === 0) {
+            newLength = 1
+        }
+
+        let currLength = this.length
+        if (currLength < newLength) {
+            for (let i = currLength; i < newLength; i++) {
+                this.addModelEntry()
+            }
+        } else {
+            for (let i = newLength; i < currLength; i++) {
+                this.removeModelEntry()
+            }
+        }
+    }
+}

ui/media/js/parameters.js

@@ -3,25 +3,34 @@
  * @readonly
  * @enum {string}
  */
- var ParameterType = {
+var ParameterType = {
     checkbox: "checkbox",
     select: "select",
     select_multiple: "select_multiple",
     slider: "slider",
     custom: "custom",
-};
+}
+
+/**
+ * Element shortcuts
+ */
+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
  * @typedef {object} Parameter
  * @property {string} id
- * @property {ParameterType} type
- * @property {string} label
- * @property {?string} note
+ * @property {keyof ParameterType} type
+ * @property {string | (parameter: Parameter) => (HTMLElement | string)} label
+ * @property {string | (parameter: Parameter) => (HTMLElement | string) | undefined} note
+ * @property {(parameter: Parameter) => (HTMLElement | string) | undefined} render
+ * @property {string | undefined} icon
  * @property {number|boolean|string} default
+ * @property {boolean?} saveInAppConfig
  */
 
-
 /** @type {Array.<Parameter>} */
 var PARAMETERS = [
     {
@@ -30,13 +39,14 @@ var PARAMETERS = [
         label: "Theme",
         default: "theme-default",
         note: "customize the look and feel of the ui",
-        options: [ // Note: options expanded dynamically
+        options: [
+            // Note: options expanded dynamically
             {
                 value: "theme-default",
-                label: "Default"
-            }
+                label: "Default",
+            },
         ],
-        icon: "fa-palette"
+        icon: "fa-palette",
     },
     {
         id: "save_to_disk",
@@ -52,7 +62,7 @@ var PARAMETERS = [
         label: "Save Location",
         render: (parameter) => {
             return `<input id="${parameter.id}" name="${parameter.id}" size="30" disabled>`
-        }
+        },
     },
     {
         id: "metadata_output_format",
@@ -63,20 +73,28 @@ var PARAMETERS = [
         options: [
             {
                 value: "none",
-                label: "none"
+                label: "none",
             },
             {
                 value: "txt",
-                label: "txt"
+                label: "txt",
             },
             {
                 value: "json",
-                label: "json"
+                label: "json",
             },
             {
                 value: "embed",
-                label: "embed"
-            }
+                label: "embed",
+            },
+            {
+                value: "embed,txt",
+                label: "embed & txt",
+            },
+            {
+                value: "embed,json",
+                label: "embed & json",
+            },
         ],
     },
     {
@@ -103,6 +121,15 @@ var PARAMETERS = [
         icon: "fa-arrow-down-short-wide",
         default: false,
     },
+    {
+        id: "extract_lora_from_prompt",
+        type: ParameterType.checkbox,
+        label: "Extract LoRA tags from the prompt",
+        note:
+            "Automatically extract lora tags like &lt;lora:name:0.4&gt; from the prompt, and apply the correct LoRA (if present)",
+        icon: "fa-code",
+        default: true,
+    },
     {
         id: "ui_open_browser_on_start",
         type: ParameterType.checkbox,
@@ -110,21 +137,23 @@ var PARAMETERS = [
         note: "starts the default browser on startup",
         icon: "fa-window-restore",
         default: true,
+        saveInAppConfig: true,
     },
     {
         id: "vram_usage_level",
         type: ParameterType.select,
         label: "GPU Memory Usage",
-        note: "Faster performance requires more GPU memory (VRAM)<br/><br/>" +
-              "<b>Balanced:</b> nearly as fast as High, much lower VRAM usage<br/>" +
-              "<b>High:</b> fastest, maximum GPU memory usage</br>" +
-              "<b>Low:</b> slowest, recommended for GPUs with 3 to 4 GB memory",
+        note:
+            "Faster performance requires more GPU memory (VRAM)<br/><br/>" +
+            "<b>Balanced:</b> nearly as fast as High, much lower VRAM usage<br/>" +
+            "<b>High:</b> fastest, maximum GPU memory usage</br>" +
+            "<b>Low:</b> slowest, recommended for GPUs with 3 to 4 GB memory",
         icon: "fa-forward",
         default: "balanced",
         options: [
-            {value: "balanced", label: "Balanced"},
-            {value: "high", label: "High"},
-            {value: "low", label: "Low"}
+            { value: "balanced", label: "Balanced" },
+            { value: "high", label: "High" },
+            { value: "low", label: "Low" },
         ],
     },
     {
@@ -160,40 +189,106 @@ var PARAMETERS = [
         id: "confirm_dangerous_actions",
         type: ParameterType.checkbox,
         label: "Confirm dangerous actions",
-        note: "Actions that might lead to data loss must either be clicked with the shift key pressed, or confirmed in an 'Are you sure?' dialog",
+        note:
+            "Actions that might lead to data loss must either be clicked with the shift key pressed, or confirmed in an 'Are you sure?' dialog",
         icon: "fa-check-double",
         default: true,
     },
+    {
+        id: "profileName",
+        type: ParameterType.custom,
+        label: "Profile Name",
+        note:
+            "Name of the profile for model manager settings, e.g. thumbnails for embeddings. Use this to have different settings for different users.",
+        render: (parameter) => {
+            return `<input id="${parameter.id}" name="${parameter.id}" value="default" size="12">`
+        },
+        icon: "fa-user-gear",
+    },
     {
         id: "listen_to_network",
         type: ParameterType.checkbox,
         label: "Make Stable Diffusion available on your network",
-        note: "Other devices on your network can access this web page",
+        note: "Other devices on your network can access this web page. Please restart the program after changing this.",
         icon: "fa-network-wired",
         default: true,
+        saveInAppConfig: true,
+        table: networkParametersTable,
     },
     {
         id: "listen_port",
         type: ParameterType.custom,
         label: "Network port",
-        note: "Port that this server listens to. The '9000' part in 'http://localhost:9000'",
+        note:
+            "Port that this server listens to. The '9000' part in 'http://localhost:9000'. Please restart the program after changing this.",
         icon: "fa-anchor",
         render: (parameter) => {
             return `<input id="${parameter.id}" name="${parameter.id}" size="6" value="9000" onkeypress="preventNonNumericalInput(event)">`
-        }
+        },
+        saveInAppConfig: true,
+        table: networkParametersTable,
     },
     {
         id: "use_beta_channel",
         type: ParameterType.checkbox,
         label: "Beta channel",
-        note: "Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
+        note:
+            "Get the latest features immediately (but could be less stable). Please restart the program after changing this.",
         icon: "fa-fire",
         default: false,
     },
-];
+    {
+        id: "test_diffusers",
+        type: ParameterType.checkbox,
+        label: "Use the new v3 engine (diffusers)",
+        note:
+            "Use our new v3 engine, with additional features like LoRA, ControlNet, SDXL, Embeddings, Tiling and lots more! Please press Save, then restart the program after changing this.",
+        icon: "fa-bolt",
+        default: true,
+        saveInAppConfig: true,
+    },
+    {
+        id: "cloudflare",
+        type: ParameterType.custom,
+        label: "Cloudflare tunnel",
+        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><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) {
-    let parameter = PARAMETERS.filter(p => p.id === id)
+    let parameter = PARAMETERS.filter((p) => p.id === id)
     if (parameter.length === 0) {
         return
     }
@@ -201,95 +296,161 @@ function getParameterSettingsEntry(id) {
 }
 
 function sliderUpdate(event) {
-    if (event.srcElement.id.endsWith('-input')) {
-        let slider = document.getElementById(event.srcElement.id.slice(0,-6))
+    if (event.srcElement.id.endsWith("-input")) {
+        let slider = document.getElementById(event.srcElement.id.slice(0, -6))
         slider.value = event.srcElement.value
         slider.dispatchEvent(new Event("change"))
     } else {
-        let field = document.getElementById(event.srcElement.id+'-input')
+        let field = document.getElementById(event.srcElement.id + "-input")
         field.value = event.srcElement.value
         field.dispatchEvent(new Event("change"))
     }
 }
 
+/**
+ * @param {Parameter} parameter
+ * @returns {string | HTMLElement}
+ */
 function getParameterElement(parameter) {
     switch (parameter.type) {
         case ParameterType.checkbox:
-            var is_checked = parameter.default ? " checked" : "";
+            var is_checked = parameter.default ? " checked" : ""
             return `<input id="${parameter.id}" name="${parameter.id}"${is_checked} type="checkbox">`
         case ParameterType.select:
         case ParameterType.select_multiple:
-            var options = (parameter.options || []).map(option => `<option value="${option.value}">${option.label}</option>`).join("")
-            var multiple = (parameter.type == ParameterType.select_multiple ? 'multiple' : '')
+            var options = (parameter.options || [])
+                .map((option) => `<option value="${option.value}">${option.label}</option>`)
+                .join("")
+            var multiple = parameter.type == ParameterType.select_multiple ? "multiple" : ""
             return `<select id="${parameter.id}" name="${parameter.id}" ${multiple}>${options}</select>`
         case ParameterType.slider:
             return `<input id="${parameter.id}" name="${parameter.id}" class="editor-slider" type="range" value="${parameter.default}" min="${parameter.slider_min}" max="${parameter.slider_max}" oninput="sliderUpdate(event)"> <input id="${parameter.id}-input" name="${parameter.id}-input" size="4" value="${parameter.default}" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)" oninput="sliderUpdate(event)">&nbsp;${parameter.slider_unit}`
         case ParameterType.custom:
             return parameter.render(parameter)
         default:
-            console.error(`Invalid type for parameter ${parameter.id}`);
+            console.error(`Invalid type ${parameter.type} for parameter ${parameter.id}`)
             return "ERROR: Invalid Type"
     }
 }
 
-let parametersTable = document.querySelector("#system-settings .parameters-table")
-/* fill in the system settings popup table */
-function initParameters() {
-    PARAMETERS.forEach(parameter => {
-        var element = getParameterElement(parameter)
-        var note = parameter.note ? `<small>${parameter.note}</small>` : "";
-        var icon = parameter.icon ? `<i class="fa ${parameter.icon}"></i>` : "";
-        var newrow = document.createElement('div')
-        newrow.innerHTML = `
-            <div>${icon}</div>
-            <div><label for="${parameter.id}">${parameter.label}</label>${note}</div>
-            <div>${element}</div>`
-        parametersTable.appendChild(newrow)
+/**
+ * fill in the system settings popup table
+ * @param {Array<Parameter> | undefined} parameters
+ * */
+function initParameters(parameters) {
+    parameters.forEach((parameter) => {
+        const element = getParameterElement(parameter)
+        const elementWrapper = createElement("div")
+        if (element instanceof Node) {
+            elementWrapper.appendChild(element)
+        } else {
+            elementWrapper.innerHTML = element
+        }
+
+        const note = typeof parameter.note === "function" ? parameter.note(parameter) : parameter.note
+        const noteElements = []
+        if (note) {
+            const noteElement = createElement("small")
+            if (note instanceof Node) {
+                noteElement.appendChild(note)
+            } else {
+                noteElement.innerHTML = note || ""
+            }
+            noteElements.push(noteElement)
+        }
+
+        if (typeof parameter.icon == "string") {
+            parameter.icon = [parameter.icon]
+        }
+        const icon = parameter.icon ? [createElement("i", undefined, ["fa", ...parameter.icon])] : []
+
+        const label = typeof parameter.label === "function" ? parameter.label(parameter) : parameter.label
+        const labelElement = createElement("label", { for: parameter.id })
+        if (label instanceof Node) {
+            labelElement.appendChild(label)
+        } else {
+            labelElement.innerHTML = label
+        }
+
+        const newrow = createElement(
+            "div",
+            { "data-setting-id": parameter.id, "data-save-in-app-config": parameter.saveInAppConfig },
+            undefined,
+            [
+                createElement("div", undefined, undefined, icon),
+                createElement("div", undefined, undefined, [labelElement, ...noteElements]),
+                elementWrapper,
+            ]
+        )
+
+        let p = parametersTable
+        if (parameter.table) {
+            p = parameter.table
+        }
+        p.appendChild(newrow)
+
         parameter.settingsEntry = newrow
     })
 }
 
-initParameters()
+initParameters(PARAMETERS)
 
-let vramUsageLevelField = document.querySelector('#vram_usage_level')
-let useCPUField = document.querySelector('#use_cpu')
-let autoPickGPUsField = document.querySelector('#auto_pick_gpus')
-let useGPUsField = document.querySelector('#use_gpus')
-let saveToDiskField = document.querySelector('#save_to_disk')
-let diskPathField = document.querySelector('#diskPath')
-let metadataOutputFormatField = document.querySelector('#metadata_output_format')
+// listen to parameters from plugins
+PARAMETERS.addEventListener("push", (...items) => {
+    initParameters(items)
+
+    if (items.find((item) => item.saveInAppConfig)) {
+        console.log(
+            "Reloading app config for new parameters",
+            items.map((p) => p.id)
+        )
+        getAppConfig()
+    }
+})
+
+let vramUsageLevelField = document.querySelector("#vram_usage_level")
+let useCPUField = document.querySelector("#use_cpu")
+let autoPickGPUsField = document.querySelector("#auto_pick_gpus")
+let useGPUsField = document.querySelector("#use_gpus")
+let saveToDiskField = document.querySelector("#save_to_disk")
+let diskPathField = document.querySelector("#diskPath")
+let metadataOutputFormatField = document.querySelector("#metadata_output_format")
 let listenToNetworkField = document.querySelector("#listen_to_network")
 let listenPortField = document.querySelector("#listen_port")
 let useBetaChannelField = document.querySelector("#use_beta_channel")
 let uiOpenBrowserOnStartField = document.querySelector("#ui_open_browser_on_start")
 let confirmDangerousActionsField = document.querySelector("#confirm_dangerous_actions")
+let testDiffusers = document.querySelector("#test_diffusers")
+let profileNameField = document.querySelector("#profileName")
 
-let saveSettingsBtn = document.querySelector('#save-system-settings-btn')
-
+let saveSettingsBtn = document.querySelector("#save-system-settings-btn")
 
 async function changeAppConfig(configDelta) {
     try {
-        let res = await fetch('/app_config', {
-            method: 'POST',
+        let res = await fetch("/app_config", {
+            method: "POST",
             headers: {
-                'Content-Type': 'application/json'
+                "Content-Type": "application/json",
             },
-            body: JSON.stringify(configDelta)
+            body: JSON.stringify(configDelta),
         })
         res = await res.json()
 
-        console.log('set config status response', res)
+        console.log("set config status response", res)
     } catch (e) {
-        console.log('set config status error', e)
+        console.log("set config status error", e)
     }
 }
 
 async function getAppConfig() {
     try {
-        let res = await fetch('/get/app_config')
+        let res = await fetch("/get/app_config")
         const config = await res.json()
 
-        if (config.update_branch === 'beta') {
+        applySettingsFromConfig(config)
+
+        // custom overrides
+        if (config.update_branch === "beta") {
             useBetaChannelField.checked = true
             document.querySelector("#updateBranchLabel").innerText = "(beta)"
         }
@@ -303,81 +464,170 @@ async function getAppConfig() {
             listenPortField.value = config.net.listen_port
         }
 
-        console.log('get config status response', config)
+        let testDiffusersEnabled = true
+        if (config.test_diffusers === false) {
+            testDiffusersEnabled = false
+        }
+        testDiffusers.checked = testDiffusersEnabled
+
+        if (config.config_on_startup) {
+            if (config.config_on_startup?.test_diffusers) {
+                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("#tiling_container").style.display = "none"
+            document.querySelector("#controlnet_model_container").style.display = "none"
+            document.querySelector("#hypernetwork_model_container").style.display = ""
+            document.querySelector("#hypernetwork_strength_container").style.display = ""
+            document.querySelector("#negative-embeddings-button").style.display = "none"
+
+            document.querySelectorAll("#sampler_name option.diffusers-only").forEach((option) => {
+                option.style.display = "none"
+            })
+            IMAGE_STEP_SIZE = 64
+            customWidthField.step = IMAGE_STEP_SIZE
+            customHeightField.step = IMAGE_STEP_SIZE
+        } else {
+            document.querySelector("#lora_model_container").style.display = ""
+            document.querySelector("#tiling_container").style.display = ""
+            document.querySelector("#controlnet_model_container").style.display = ""
+            document.querySelector("#hypernetwork_model_container").style.display = "none"
+            document.querySelector("#hypernetwork_strength_container").style.display = "none"
+
+            document.querySelectorAll("#sampler_name option.k_diffusion-only").forEach((option) => {
+                option.style.display = "none"
+            })
+            document.querySelector("#clip_skip_config").classList.remove("displayNone")
+            document.querySelector("#embeddings-button").classList.remove("displayNone")
+            IMAGE_STEP_SIZE = 8
+            customWidthField.step = IMAGE_STEP_SIZE
+            customHeightField.step = IMAGE_STEP_SIZE
+        }
+
+        console.log("get config status response", config)
+
+        return config
     } catch (e) {
-        console.log('get config status error', e)
+        console.log("get config status error", e)
+
+        return {}
     }
 }
 
-saveToDiskField.addEventListener('change', function(e) {
+function applySettingsFromConfig(config) {
+    Array.from(parametersTable.children).forEach((parameterRow) => {
+        if (parameterRow.dataset.settingId in config && parameterRow.dataset.saveInAppConfig === "true") {
+            const configValue = config[parameterRow.dataset.settingId]
+            const parameterElement =
+                document.getElementById(parameterRow.dataset.settingId) ||
+                parameterRow.querySelector("input") ||
+                parameterRow.querySelector("select")
+
+            switch (parameterElement?.tagName) {
+                case "INPUT":
+                    if (parameterElement.type === "checkbox") {
+                        parameterElement.checked = configValue
+                    } else {
+                        parameterElement.value = configValue
+                    }
+                    parameterElement.dispatchEvent(new Event("change"))
+                    break
+                case "SELECT":
+                    if (Array.isArray(configValue)) {
+                        Array.from(parameterElement.options).forEach((option) => {
+                            if (configValue.includes(option.value || option.text)) {
+                                option.selected = true
+                            }
+                        })
+                    } else {
+                        parameterElement.value = configValue
+                    }
+                    parameterElement.dispatchEvent(new Event("change"))
+                    break
+            }
+        }
+    })
+}
+
+saveToDiskField.addEventListener("change", function(e) {
     diskPathField.disabled = !this.checked
     metadataOutputFormatField.disabled = !this.checked
 })
 
 function getCurrentRenderDeviceSelection() {
-    let selectedGPUs = $('#use_gpus').val()
+    let selectedGPUs = $("#use_gpus").val()
 
     if (useCPUField.checked && !autoPickGPUsField.checked) {
-        return 'cpu'
+        return "cpu"
     }
     if (autoPickGPUsField.checked || selectedGPUs.length == 0) {
-        return 'auto'
+        return "auto"
     }
 
-    return selectedGPUs.join(',')
+    return selectedGPUs.join(",")
 }
 
-useCPUField.addEventListener('click', function() {
-    let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
-    let autoPickGPUSettingEntry = getParameterSettingsEntry('auto_pick_gpus')
+useCPUField.addEventListener("click", function() {
+    let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
+    let autoPickGPUSettingEntry = getParameterSettingsEntry("auto_pick_gpus")
     if (this.checked) {
-        gpuSettingEntry.style.display = 'none'
-        autoPickGPUSettingEntry.style.display = 'none'
-        autoPickGPUsField.setAttribute('data-old-value', autoPickGPUsField.checked)
+        gpuSettingEntry.style.display = "none"
+        autoPickGPUSettingEntry.style.display = "none"
+        autoPickGPUsField.setAttribute("data-old-value", autoPickGPUsField.checked)
         autoPickGPUsField.checked = false
     } else if (useGPUsField.options.length >= MIN_GPUS_TO_SHOW_SELECTION) {
-        gpuSettingEntry.style.display = ''
-        autoPickGPUSettingEntry.style.display = ''
-        let oldVal = autoPickGPUsField.getAttribute('data-old-value')
-        if (oldVal === null || oldVal === undefined) { // the UI started with CPU selected by default
+        gpuSettingEntry.style.display = ""
+        autoPickGPUSettingEntry.style.display = ""
+        let oldVal = autoPickGPUsField.getAttribute("data-old-value")
+        if (oldVal === null || oldVal === undefined) {
+            // the UI started with CPU selected by default
             autoPickGPUsField.checked = true
         } else {
-            autoPickGPUsField.checked = (oldVal === 'true')
+            autoPickGPUsField.checked = oldVal === "true"
         }
-        gpuSettingEntry.style.display = (autoPickGPUsField.checked ? 'none' : '')
+        gpuSettingEntry.style.display = autoPickGPUsField.checked ? "none" : ""
     }
 })
 
-useGPUsField.addEventListener('click', function() {
-    let selectedGPUs = $('#use_gpus').val()
-    autoPickGPUsField.checked = (selectedGPUs.length === 0)
+useGPUsField.addEventListener("click", function() {
+    let selectedGPUs = $("#use_gpus").val()
+    autoPickGPUsField.checked = selectedGPUs.length === 0
 })
 
-autoPickGPUsField.addEventListener('click', function() {
+autoPickGPUsField.addEventListener("click", function() {
     if (this.checked) {
-        $('#use_gpus').val([])
+        $("#use_gpus").val([])
     }
 
-    let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
-    gpuSettingEntry.style.display = (this.checked ? 'none' : '')
+    let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
+    gpuSettingEntry.style.display = this.checked ? "none" : ""
 })
 
-async function setDiskPath(defaultDiskPath, force=false) {
+async function setDiskPath(defaultDiskPath, force = false) {
     var diskPath = getSetting("diskPath")
-    if (force || diskPath == '' || diskPath == undefined || diskPath == "undefined") {
+    if (force || diskPath == "" || diskPath == undefined || diskPath == "undefined") {
         setSetting("diskPath", defaultDiskPath)
     }
 }
 
 function setDeviceInfo(devices) {
     let cpu = devices.all.cpu.name
-    let allGPUs = Object.keys(devices.all).filter(d => d != 'cpu')
+    let allGPUs = Object.keys(devices.all).filter((d) => d != "cpu")
     let activeGPUs = Object.keys(devices.active)
 
     function ID_TO_TEXT(d) {
         let info = devices.all[d]
         if ("mem_free" in info && "mem_total" in info) {
-            return `${info.name} <small>(${d}) (${info.mem_free.toFixed(1)}Gb free / ${info.mem_total.toFixed(1)} Gb total)</small>`
+            return `${info.name} <small>(${d}) (${info.mem_free.toFixed(1)}Gb free / ${info.mem_total.toFixed(
+                1
+            )} Gb total)</small>`
         } else {
             return `${info.name} <small>(${d}) (no memory info)</small>`
         }
@@ -386,94 +636,185 @@ function setDeviceInfo(devices) {
     allGPUs = allGPUs.map(ID_TO_TEXT)
     activeGPUs = activeGPUs.map(ID_TO_TEXT)
 
-    let systemInfoEl = document.querySelector('#system-info')
-    systemInfoEl.querySelector('#system-info-cpu').innerText = cpu
-    systemInfoEl.querySelector('#system-info-gpus-all').innerHTML = allGPUs.join('</br>')
-    systemInfoEl.querySelector('#system-info-rendering-devices').innerHTML = activeGPUs.join('</br>')
+    let systemInfoEl = document.querySelector("#system-info")
+    systemInfoEl.querySelector("#system-info-cpu").innerText = cpu
+    systemInfoEl.querySelector("#system-info-gpus-all").innerHTML = allGPUs.join("</br>")
+    systemInfoEl.querySelector("#system-info-rendering-devices").innerHTML = activeGPUs.join("</br>")
+
+    // 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) {
     let port = listenPortField.value
-    hosts = hosts.map(addr => `http://${addr}:${port}/`).map(url => `<div><a href="${url}">${url}</a></div>`)
-    document.querySelector('#system-info-server-hosts').innerHTML = hosts.join('')
+    hosts = hosts.map((addr) => `http://${addr}:${port}/`).map((url) => `<div><a href="${url}">${url}</a></div>`)
+    document.querySelector("#system-info-server-hosts").innerHTML = hosts.join("")
 }
 
 async function getSystemInfo() {
     try {
         const res = await SD.getSystemInfo()
-        let devices = res['devices']
+        let devices = res["devices"]
 
-        let allDeviceIds = Object.keys(devices['all']).filter(d => d !== 'cpu')
-        let activeDeviceIds = Object.keys(devices['active']).filter(d => d !== 'cpu')
+        let allDeviceIds = Object.keys(devices["all"]).filter((d) => d !== "cpu")
+        let activeDeviceIds = Object.keys(devices["active"]).filter((d) => d !== "cpu")
 
         if (activeDeviceIds.length === 0) {
             useCPUField.checked = true
         }
 
         if (allDeviceIds.length < MIN_GPUS_TO_SHOW_SELECTION || useCPUField.checked) {
-            let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
-            gpuSettingEntry.style.display = 'none'
-            let autoPickGPUSettingEntry = getParameterSettingsEntry('auto_pick_gpus')
-            autoPickGPUSettingEntry.style.display = 'none'
+            let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
+            gpuSettingEntry.style.display = "none"
+            let autoPickGPUSettingEntry = getParameterSettingsEntry("auto_pick_gpus")
+            autoPickGPUSettingEntry.style.display = "none"
         }
 
         if (allDeviceIds.length === 0) {
             useCPUField.checked = true
             useCPUField.disabled = true // no compatible GPUs, so make the CPU mandatory
+
+            getParameterSettingsEntry("use_cpu").addEventListener("click", function() {
+                alert(
+                    "Sorry, we could not find a compatible graphics card! Easy Diffusion supports graphics cards with minimum 2 GB of RAM. " +
+                        "Only NVIDIA cards are supported on Windows. NVIDIA and AMD cards are supported on Linux.<br/><br/>" +
+                        "If you have a compatible graphics card, please try updating to the latest drivers.<br/><br/>" +
+                        "Only the CPU can be used for generating images, without a compatible graphics card.",
+                    "No compatible graphics card found!"
+                )
+            })
         }
 
-        autoPickGPUsField.checked = (devices['config'] === 'auto')
+        autoPickGPUsField.checked = devices["config"] === "auto"
 
-        useGPUsField.innerHTML = ''
-        allDeviceIds.forEach(device => {
-            let deviceName = devices['all'][device]['name']
+        useGPUsField.innerHTML = ""
+        allDeviceIds.forEach((device) => {
+            let deviceName = devices["all"][device]["name"]
             let deviceOption = `<option value="${device}">${deviceName} (${device})</option>`
-            useGPUsField.insertAdjacentHTML('beforeend', deviceOption)
+            useGPUsField.insertAdjacentHTML("beforeend", deviceOption)
         })
 
         if (autoPickGPUsField.checked) {
-            let gpuSettingEntry = getParameterSettingsEntry('use_gpus')
-            gpuSettingEntry.style.display = 'none'
+            let gpuSettingEntry = getParameterSettingsEntry("use_gpus")
+            gpuSettingEntry.style.display = "none"
         } else {
-            $('#use_gpus').val(activeDeviceIds)
+            $("#use_gpus").val(activeDeviceIds)
         }
 
-        setDeviceInfo(devices)
-        setHostInfo(res['hosts'])
+        document.dispatchEvent(new CustomEvent("system_info_update", { detail: devices }))
+        setHostInfo(res["hosts"])
         let force = false
-        if (res['enforce_output_dir'] !== undefined) {
-            force = res['enforce_output_dir']
+        if (res["enforce_output_dir"] !== undefined) {
+            force = res["enforce_output_dir"]
             if (force == true) {
-               saveToDiskField.checked = true
-               metadataOutputFormatField.disabled = false
+                saveToDiskField.checked = true
+                metadataOutputFormatField.disabled = false
             }
             saveToDiskField.disabled = force
             diskPathField.disabled = force
         }
-        setDiskPath(res['default_output_dir'], force)
+        setDiskPath(res["default_output_dir"], force)
     } catch (e) {
-        console.log('error fetching devices', e)
+        console.log("error fetching devices", e)
     }
 }
 
-saveSettingsBtn.addEventListener('click', function() {
-    if (listenPortField.value == '') {
-        alert('The network port field must not be empty.')
+saveSettingsBtn.addEventListener("click", function() {
+    if (listenPortField.value == "") {
+        alert("The network port field must not be empty.")
         return
     }
     if (listenPortField.value < 1 || listenPortField.value > 65535) {
-        alert('The network port must be a number from 1 to 65535')
+        alert("The network port must be a number from 1 to 65535")
         return
     }
-    let updateBranch = (useBetaChannelField.checked ? 'beta' : 'main')
-    changeAppConfig({
-        'render_devices': getCurrentRenderDeviceSelection(),
-        'update_branch': updateBranch,
-        'ui_open_browser_on_start': uiOpenBrowserOnStartField.checked,
-        'listen_to_network': listenToNetworkField.checked,
-        'listen_port': listenPortField.value
+    const updateBranch = useBetaChannelField.checked ? "beta" : "main"
+
+    const updateAppConfigRequest = {
+        render_devices: getCurrentRenderDeviceSelection(),
+        update_branch: updateBranch,
+    }
+
+    document.querySelectorAll("#system-settings [data-setting-id]").forEach((parameterRow) => {
+        if (parameterRow.dataset.saveInAppConfig === "true") {
+            const parameterElement =
+                document.getElementById(parameterRow.dataset.settingId) ||
+                parameterRow.querySelector("input") ||
+                parameterRow.querySelector("select")
+
+            switch (parameterElement?.tagName) {
+                case "INPUT":
+                    if (parameterElement.type === "checkbox") {
+                        updateAppConfigRequest[parameterRow.dataset.settingId] = parameterElement.checked
+                    } else {
+                        updateAppConfigRequest[parameterRow.dataset.settingId] = parameterElement.value
+                    }
+                    break
+                case "SELECT":
+                    if (parameterElement.multiple) {
+                        updateAppConfigRequest[parameterRow.dataset.settingId] = Array.from(parameterElement.options)
+                            .filter((option) => option.selected)
+                            .map((option) => option.value || option.text)
+                    } else {
+                        updateAppConfigRequest[parameterRow.dataset.settingId] = parameterElement.value
+                    }
+                    break
+                default:
+                    console.error(
+                        `Setting parameter ${parameterRow.dataset.settingId} couldn't be saved to app.config - element #${parameter.id} is a <${parameterElement?.tagName} /> instead of a <input /> or a <select />!`
+                    )
+                    break
+            }
+        }
     })
-    saveSettingsBtn.classList.add('active')
-    asyncDelay(300).then(() => saveSettingsBtn.classList.remove('active'))
+
+    const savePromise = changeAppConfig(updateAppConfigRequest)
+    showToast("Settings saved")
+    saveSettingsBtn.classList.add("active")
+    Promise.all([savePromise, asyncDelay(300)]).then(() => saveSettingsBtn.classList.remove("active"))
 })
 
+listenToNetworkField.addEventListener(
+    "change",
+    debounce(() => {
+        saveSettingsBtn.click()
+    }, 1000)
+)
+
+listenPortField.addEventListener(
+    "change",
+    debounce(() => {
+        saveSettingsBtn.click()
+    }, 1000)
+)
+
+let copyCloudflareAddressBtn = document.querySelector("#copy-cloudflare-address")
+let cloudflareAddressField = document.getElementById("cloudflare-address")
+
+navigator.permissions.query({ name: "clipboard-write" }).then(function(result) {
+    if (result.state === "granted") {
+        // 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))

ui/media/js/searchable-models.js

@@ -21,14 +21,13 @@ let hypernetworkModelField = new ModelDropdown(document.querySelector('#hypernet
 
 3) Model dropdowns will be refreshed automatically when the reload models button is invoked.
 */
-class ModelDropdown
-{
+class ModelDropdown {
     modelFilter //= document.querySelector("#model-filter")
     modelFilterArrow //= document.querySelector("#model-filter-arrow")
     modelList //= document.querySelector("#model-list")
     modelResult //= document.querySelector("#model-result")
     modelNoResult //= document.querySelector("#model-no-result")
-    
+
     currentSelection //= { elem: undefined, value: '', path: ''}
     highlightedModelEntry //= undefined
     activeModel //= undefined
@@ -39,6 +38,8 @@ class ModelDropdown
     noneEntry //= ''
     modelFilterInitialized //= undefined
 
+    sorted //= true
+
     /* MIMIC A REGULAR INPUT FIELD */
     get parentElement() {
         return this.modelFilter.parentElement
@@ -59,11 +60,11 @@ class ModelDropdown
     set disabled(state) {
         this.modelFilter.disabled = state
         if (this.modelFilterArrow) {
-            this.modelFilterArrow.style.color = state ? 'dimgray' : ''
+            this.modelFilterArrow.style.color = state ? "dimgray" : ""
         }
     }
     get modelElements() {
-        return this.modelList.querySelectorAll('.model-file')
+        return this.modelList.querySelectorAll(".model-file")
     }
     addEventListener(type, listener, options) {
         return this.modelFilter.addEventListener(type, listener, options)
@@ -82,36 +83,57 @@ class ModelDropdown
         }
     }
 
-    /* SEARCHABLE INPUT */    
-    constructor (input, modelKey, noneEntry = '') {
+    /* SEARCHABLE INPUT */
+
+    constructor(input, modelKey, noneEntry = "", sorted = true) {
         this.modelFilter = input
         this.noneEntry = noneEntry
         this.modelKey = modelKey
+        this.sorted = sorted
 
-        if (modelsOptions !== undefined) { // reuse models from cache (only useful for plugins, which are loaded after models)
-            this.inputModels = modelsOptions[this.modelKey]
+        if (modelsOptions !== undefined) {
+            // reuse models from cache (only useful for plugins, which are loaded after models)
+            this.inputModels = []
+            let modelKeys = Array.isArray(this.modelKey) ? this.modelKey : [this.modelKey]
+            for (let i = 0; i < modelKeys.length; i++) {
+                let key = modelKeys[i]
+                let k = Array.isArray(modelsOptions[key]) ? modelsOptions[key] : [modelsOptions[key]]
+                this.inputModels.push(...k)
+            }
             this.populateModels()
         }
-        document.addEventListener("refreshModels", this.bind(function(e) {
-            // reload the models
-            this.inputModels = modelsOptions[this.modelKey]
-            this.populateModels()
-        }, this))
+        document.addEventListener(
+            "refreshModels",
+            this.bind(function(e) {
+                // reload the models
+                this.inputModels = []
+                let modelKeys = Array.isArray(this.modelKey) ? this.modelKey : [this.modelKey]
+                for (let i = 0; i < modelKeys.length; i++) {
+                    let key = modelKeys[i]
+                    let k = Array.isArray(modelsOptions[key]) ? modelsOptions[key] : [modelsOptions[key]]
+                    this.inputModels.push(...k)
+                }
+                this.populateModels()
+            }, this)
+        )
     }
 
-    saveCurrentSelection(elem, value, path) {
+    saveCurrentSelection(elem, value, path, dispatchEvent = true) {
         this.currentSelection.elem = elem
         this.currentSelection.value = value
         this.currentSelection.path = path
         this.modelFilter.dataset.path = path
         this.modelFilter.value = value
-        this.modelFilter.dispatchEvent(new Event('change'))
+
+        if (dispatchEvent) {
+            this.modelFilter.dispatchEvent(new Event("change"))
+        }
     }
-    
+
     processClick(e) {
         e.preventDefault()
-        if (e.srcElement.classList.contains('model-file') || e.srcElement.classList.contains('fa-file')) {
-            const elem = e.srcElement.classList.contains('model-file') ? e.srcElement : e.srcElement.parentElement
+        if (e.srcElement.classList.contains("model-file") || e.srcElement.classList.contains("fa-file")) {
+            const elem = e.srcElement.classList.contains("model-file") ? e.srcElement : e.srcElement.parentElement
             this.saveCurrentSelection(elem, elem.innerText, elem.dataset.path)
             this.hideModelList()
             this.modelFilter.focus()
@@ -126,66 +148,67 @@ class ModelDropdown
             return undefined
         }
 
-        return modelElements.slice(0, index).reverse().find(e => e.style.display === 'list-item')
+        return modelElements
+            .slice(0, index)
+            .reverse()
+            .find((e) => e.style.display === "list-item")
     }
 
     getLastVisibleChild(elem) {
         let lastElementChild = elem.lastElementChild
-        if (lastElementChild.style.display == 'list-item') return lastElementChild
+        if (lastElementChild.style.display == "list-item") return lastElementChild
         return this.getPreviousVisibleSibling(lastElementChild)
     }
-    
+
     getNextVisibleSibling(elem) {
         const modelElements = Array.from(this.modelElements)
         const index = modelElements.indexOf(elem)
-        return modelElements.slice(index + 1).find(e => e.style.display === 'list-item')
+        return modelElements.slice(index + 1).find((e) => e.style.display === "list-item")
     }
-    
+
     getFirstVisibleChild(elem) {
         let firstElementChild = elem.firstElementChild
-        if (firstElementChild.style.display == 'list-item') return firstElementChild
+        if (firstElementChild.style.display == "list-item") return firstElementChild
         return this.getNextVisibleSibling(firstElementChild)
     }
-    
+
     selectModelEntry(elem) {
         if (elem) {
             if (this.highlightedModelEntry !== undefined) {
-                this.highlightedModelEntry.classList.remove('selected')
+                this.highlightedModelEntry.classList.remove("selected")
             }
             this.saveCurrentSelection(elem, elem.innerText, elem.dataset.path)
-            elem.classList.add('selected')
-            elem.scrollIntoView({block: 'nearest'})
+            elem.classList.add("selected")
+            elem.scrollIntoView({ block: "nearest" })
             this.highlightedModelEntry = elem
         }
     }
-    
+
     selectPreviousFile() {
         const elem = this.getPreviousVisibleSibling(this.highlightedModelEntry)
         if (elem) {
             this.selectModelEntry(elem)
-        }
-        else
-        {
+        } else {
             //this.highlightedModelEntry.parentElement.parentElement.scrollIntoView({block: 'nearest'})
-            this.highlightedModelEntry.closest('.model-list').scrollTop = 0
+            this.highlightedModelEntry.closest(".model-list").scrollTop = 0
         }
         this.modelFilter.select()
     }
-    
+
     selectNextFile() {
         this.selectModelEntry(this.getNextVisibleSibling(this.highlightedModelEntry))
         this.modelFilter.select()
     }
-    
+
     selectFirstFile() {
-        this.selectModelEntry(this.modelList.querySelector('.model-file'))
-        this.highlightedModelEntry.scrollIntoView({block: 'nearest'})
+        this.selectModelEntry(this.modelList.querySelector(".model-file"))
+        this.highlightedModelEntry.scrollIntoView({ block: "nearest" })
         this.modelFilter.select()
     }
-    
+
     selectLastFile() {
-        const elems = this.modelList.querySelectorAll('.model-file:last-child')
-        this.selectModelEntry(elems[elems.length -1])
+        const elems = this.modelList.querySelectorAll(".model-file:last-child")
+        this.selectModelEntry(elems[elems.length - 1])
         this.modelFilter.select()
     }
 
@@ -198,57 +221,57 @@ class ModelDropdown
     }
 
     validEntrySelected() {
-        return (this.modelNoResult.style.display === 'none')
+        return this.modelNoResult.style.display === "none"
     }
-    
+
     processKey(e) {
         switch (e.key) {
-            case 'Escape':
+            case "Escape":
                 e.preventDefault()
                 this.resetSelection()
                 break
-            case 'Enter':
+            case "Enter":
                 e.preventDefault()
                 if (this.validEntrySelected()) {
-                    if (this.modelList.style.display != 'block') {
+                    if (this.modelList.style.display != "block") {
                         this.showModelList()
-                    }
-                    else
-                    {
-                        this.saveCurrentSelection(this.highlightedModelEntry, this.highlightedModelEntry.innerText, this.highlightedModelEntry.dataset.path)
+                    } else {
+                        this.saveCurrentSelection(
+                            this.highlightedModelEntry,
+                            this.highlightedModelEntry.innerText,
+                            this.highlightedModelEntry.dataset.path
+                        )
                         this.hideModelList()
                         this.showAllEntries()
                     }
                     this.modelFilter.focus()
-                }
-                else
-                {
+                } else {
                     this.resetSelection()
                 }
                 break
-            case 'ArrowUp':
+            case "ArrowUp":
                 e.preventDefault()
                 if (this.validEntrySelected()) {
                     this.selectPreviousFile()
                 }
                 break
-            case 'ArrowDown':
+            case "ArrowDown":
                 e.preventDefault()
                 if (this.validEntrySelected()) {
                     this.selectNextFile()
                 }
                 break
-            case 'ArrowLeft':
-                if (this.modelList.style.display != 'block') {
+            case "ArrowLeft":
+                if (this.modelList.style.display != "block") {
                     e.preventDefault()
                 }
                 break
-            case 'ArrowRight':
-                if (this.modelList.style.display != 'block') {
+            case "ArrowRight":
+                if (this.modelList.style.display != "block") {
                     e.preventDefault()
                 }
                 break
-            case 'PageUp':
+            case "PageUp":
                 e.preventDefault()
                 if (this.validEntrySelected()) {
                     this.selectPreviousFile()
@@ -261,7 +284,7 @@ class ModelDropdown
                     this.selectPreviousFile()
                 }
                 break
-            case 'PageDown':
+            case "PageDown":
                 e.preventDefault()
                 if (this.validEntrySelected()) {
                     this.selectNextFile()
@@ -274,201 +297,195 @@ class ModelDropdown
                     this.selectNextFile()
                 }
                 break
-            case 'Home':
+            case "Home":
                 //if (this.modelList.style.display != 'block') {
-                    e.preventDefault()
-                    if (this.validEntrySelected()) {
-                        this.selectFirstFile()
-                    }
+                e.preventDefault()
+                if (this.validEntrySelected()) {
+                    this.selectFirstFile()
+                }
                 //}
                 break
-            case 'End':
+            case "End":
                 //if (this.modelList.style.display != 'block') {
-                    e.preventDefault()
-                    if (this.validEntrySelected()) {
-                        this.selectLastFile()
-                    }
+                e.preventDefault()
+                if (this.validEntrySelected()) {
+                    this.selectLastFile()
+                }
                 //}
                 break
             default:
-                //console.log(e.key)
+            //console.log(e.key)
         }
     }
-    
+
     modelListFocus() {
         this.selectEntry()
         this.showAllEntries()
     }
-    
+
     showModelList() {
-        this.modelList.style.display = 'block'
+        this.modelList.style.display = "block"
         this.selectEntry()
         this.showAllEntries()
         //this.modelFilter.value = ''
         this.modelFilter.select() // preselect the entire string so user can just start typing.
         this.modelFilter.focus()
-        this.modelFilter.style.cursor = 'auto'
+        this.modelFilter.style.cursor = "auto"
     }
-    
+
     hideModelList() {
-        this.modelList.style.display = 'none'
+        this.modelList.style.display = "none"
         this.modelFilter.value = this.currentSelection.value
-        this.modelFilter.style.cursor = ''
+        this.modelFilter.style.cursor = ""
     }
-    
+
     toggleModelList(e) {
         e.preventDefault()
         if (!this.modelFilter.disabled) {
-            if (this.modelList.style.display != 'block') {
+            if (this.modelList.style.display != "block") {
                 this.showModelList()
-            }
-            else
-            {
+            } else {
                 this.hideModelList()
                 this.modelFilter.select()
             }
         }
     }
-    
-    selectEntry(path) {
+
+    selectEntry(path, dispatchEvent = true) {
         if (path !== undefined) {
-            const entries = this.modelElements;
+            const entries = this.modelElements
 
             for (const elem of entries) {
                 if (elem.dataset.path == path) {
-                    this.saveCurrentSelection(elem, elem.innerText, elem.dataset.path)
+                    this.saveCurrentSelection(elem, elem.innerText, elem.dataset.path, dispatchEvent)
                     this.highlightedModelEntry = elem
-                    elem.scrollIntoView({block: 'nearest'})
+                    elem.scrollIntoView({ block: "nearest" })
                     break
                 }
             }
         }
-        
+
         if (this.currentSelection.elem !== undefined) {
             // select the previous element
             if (this.highlightedModelEntry !== undefined && this.highlightedModelEntry != this.currentSelection.elem) {
-                this.highlightedModelEntry.classList.remove('selected')
+                this.highlightedModelEntry.classList.remove("selected")
             }
-            this.currentSelection.elem.classList.add('selected')
+            this.currentSelection.elem.classList.add("selected")
             this.highlightedModelEntry = this.currentSelection.elem
-            this.currentSelection.elem.scrollIntoView({block: 'nearest'})
-        }
-        else
-        {
+            this.currentSelection.elem.scrollIntoView({ block: "nearest" })
+        } else {
             this.selectFirstFile()
         }
     }
-    
+
     highlightModelAtPosition(e) {
         let elem = document.elementFromPoint(e.clientX, e.clientY)
-        
-        if (elem.classList.contains('model-file')) {
+
+        if (elem.classList.contains("model-file")) {
             this.highlightModel(elem)
         }
     }
-    
+
     highlightModel(elem) {
-        if (elem.classList.contains('model-file')) {
+        if (elem.classList.contains("model-file")) {
             if (this.highlightedModelEntry !== undefined && this.highlightedModelEntry != elem) {
-                this.highlightedModelEntry.classList.remove('selected')
+                this.highlightedModelEntry.classList.remove("selected")
             }
-            elem.classList.add('selected')
+            elem.classList.add("selected")
             this.highlightedModelEntry = elem
         }
     }
-    
+
     showAllEntries() {
-        this.modelList.querySelectorAll('li').forEach(function(li) {
-            if (li.id !== 'model-no-result') {
-                li.style.display = 'list-item'
+        this.modelList.querySelectorAll("li").forEach(function(li) {
+            if (li.id !== "model-no-result") {
+                li.style.display = "list-item"
             }
         })
-        this.modelNoResult.style.display = 'none'
+        this.modelNoResult.style.display = "none"
     }
-    
+
     filterList(e) {
         const filter = this.modelFilter.value.toLowerCase()
         let found = false
         let showAllChildren = false
-        
-        this.modelList.querySelectorAll('li').forEach(function(li) {
-            if (li.classList.contains('model-folder')) {
+
+        this.modelList.querySelectorAll("li").forEach(function(li) {
+            if (li.classList.contains("model-folder")) {
                 showAllChildren = false
             }
-            if (filter == '') {
-                li.style.display = 'list-item'
+            if (filter == "") {
+                li.style.display = "list-item"
                 found = true
             } else if (showAllChildren || li.textContent.toLowerCase().match(filter)) {
-                li.style.display = 'list-item'
-                if (li.classList.contains('model-folder') && li.firstChild.textContent.toLowerCase().match(filter)) {
+                li.style.display = "list-item"
+                if (li.classList.contains("model-folder") && li.firstChild.textContent.toLowerCase().match(filter)) {
                     showAllChildren = true
                 }
                 found = true
             } else {
-                li.style.display = 'none'
+                li.style.display = "none"
             }
         })
-    
+
         if (found) {
-            this.modelResult.style.display = 'list-item'
-            this.modelNoResult.style.display = 'none'
-            const elem = this.getNextVisibleSibling(this.modelList.querySelector('.model-file'))
+            this.modelResult.style.display = "list-item"
+            this.modelNoResult.style.display = "none"
+            const elem = this.getNextVisibleSibling(this.modelList.querySelector(".model-file"))
             this.highlightModel(elem)
-            elem.scrollIntoView({block: 'nearest'})
+            elem.scrollIntoView({ block: "nearest" })
+        } else {
+            this.modelResult.style.display = "none"
+            this.modelNoResult.style.display = "list-item"
         }
-        else
-        {
-            this.modelResult.style.display = 'none'
-            this.modelNoResult.style.display = 'list-item'
-        }
-        this.modelList.style.display = 'block'
+        this.modelList.style.display = "block"
     }
 
     /* MODEL LOADER */
     getElementDimensions(element) {
         // Clone the element
         const clone = element.cloneNode(true)
-        
+
         // Copy the styles of the original element to the cloned element
         const originalStyles = window.getComputedStyle(element)
         for (let i = 0; i < originalStyles.length; i++) {
             const property = originalStyles[i]
             clone.style[property] = originalStyles.getPropertyValue(property)
         }
-        
+
         // Set its visibility to hidden and display to inline-block
         clone.style.visibility = "hidden"
         clone.style.display = "inline-block"
-        
+
         // Put the cloned element next to the original element
         element.parentNode.insertBefore(clone, element.nextSibling)
-        
+
         // Get its width and height
         const width = clone.offsetWidth
         const height = clone.offsetHeight
-        
+
         // Remove it from the DOM
         clone.remove()
-        
+
         // Return its width and height
         return { width, height }
     }
-    
+
     /**
-     * @param {Array<string>} models 
+     * @param {Array<string>} models
      */
     sortStringArray(models) {
-        models.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
+        models.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
     }
 
     populateModels() {
         this.activeModel = this.modelFilter.dataset.path
-        
-        this.currentSelection = { elem: undefined, value: '', path: ''}
+
+        this.currentSelection = { elem: undefined, value: "", path: "" }
         this.highlightedModelEntry = undefined
         this.flatModelList = []
 
-        if(this.modelList !== undefined) {
+        if (this.modelList !== undefined) {
             this.modelList.remove()
             this.modelFilterArrow.remove()
         }
@@ -478,126 +495,114 @@ class ModelDropdown
     createDropdown() {
         // create dropdown entries
         let rootModelList = this.createRootModelList(this.inputModels)
-        this.modelFilter.insertAdjacentElement('afterend', rootModelList)
+        this.modelFilter.insertAdjacentElement("afterend", rootModelList)
         this.modelFilter.insertAdjacentElement(
-            'afterend',
-            this.createElement(
-                'i',
-                { id: `${this.modelFilter.id}-model-filter-arrow` },
-                ['model-selector-arrow', 'fa-solid', 'fa-angle-down'],
-            ),
+            "afterend",
+            createElement("i", { id: `${this.modelFilter.id}-model-filter-arrow` }, [
+                "model-selector-arrow",
+                "fa-solid",
+                "fa-angle-down",
+            ])
         )
-        this.modelFilter.classList.add('model-selector')
+        this.modelFilter.classList.add("model-selector")
         this.modelFilterArrow = document.querySelector(`#${this.modelFilter.id}-model-filter-arrow`)
         if (this.modelFilterArrow) {
-            this.modelFilterArrow.style.color = this.modelFilter.disabled ? 'dimgray' : ''
+            this.modelFilterArrow.style.color = this.modelFilter.disabled ? "dimgray" : ""
         }
         this.modelList = document.querySelector(`#${this.modelFilter.id}-model-list`)
         this.modelResult = document.querySelector(`#${this.modelFilter.id}-model-result`)
         this.modelNoResult = document.querySelector(`#${this.modelFilter.id}-model-no-result`)
-        
+
         if (this.modelFilterInitialized !== true) {
-            this.modelFilter.addEventListener('input', this.bind(this.filterList, this))
-            this.modelFilter.addEventListener('focus', this.bind(this.modelListFocus, this))
-            this.modelFilter.addEventListener('blur', this.bind(this.hideModelList, this))
-            this.modelFilter.addEventListener('click', this.bind(this.showModelList, this))
-            this.modelFilter.addEventListener('keydown', this.bind(this.processKey, this))
+            this.modelFilter.addEventListener("input", this.bind(this.filterList, this))
+            this.modelFilter.addEventListener("focus", this.bind(this.modelListFocus, this))
+            this.modelFilter.addEventListener("blur", this.bind(this.hideModelList, this))
+            this.modelFilter.addEventListener("click", this.bind(this.showModelList, this))
+            this.modelFilter.addEventListener("keydown", this.bind(this.processKey, this))
 
             this.modelFilterInitialized = true
         }
-        this.modelFilterArrow.addEventListener('mousedown', this.bind(this.toggleModelList, this))
-        this.modelList.addEventListener('mousemove', this.bind(this.highlightModelAtPosition, this))
-        this.modelList.addEventListener('mousedown', this.bind(this.processClick, this))
+        this.modelFilterArrow.addEventListener("mousedown", this.bind(this.toggleModelList, this))
+        this.modelList.addEventListener("mousemove", this.bind(this.highlightModelAtPosition, this))
+        this.modelList.addEventListener("mousedown", this.bind(this.processClick, this))
 
         let mf = this.modelFilter
-        this.modelFilter.addEventListener('focus', function() {
+        this.modelFilter.addEventListener("focus", function() {
             let modelFilterStyle = window.getComputedStyle(mf)
             rootModelList.style.minWidth = modelFilterStyle.width
         })
 
-        this.selectEntry(this.activeModel)
-    }
-
-    /**
-     * 
-     * @param {string} tag 
-     * @param {object} attributes
-     * @param {Array<string>} classes
-     * @returns {HTMLElement}
-     */
-    createElement(tagName, attributes, classes, text, icon) {
-        const element = document.createElement(tagName)
-        if (attributes) {
-            Object.entries(attributes).forEach(([key, value]) => {
-                element.setAttribute(key, value)
-            })
-        }
-        if (classes) {
-            classes.forEach(className => element.classList.add(className))
-        }
-        if (icon) {
-            let iconEl = document.createElement('i')
-            iconEl.className = icon + ' icon'
-            element.appendChild(iconEl)
-        }
-        if (text) {
-            element.appendChild(document.createTextNode(text))
-        }
-        return element
+        this.selectEntry(this.activeModel, false)
     }
 
     /**
      * @param {Array<string | object} modelTree
-     * @param {string} folderName 
-     * @param {boolean} isRootFolder 
+     * @param {string} folderName
+     * @param {boolean} isRootFolder
      * @returns {HTMLElement}
      */
     createModelNodeList(folderName, modelTree, isRootFolder) {
-        const listElement = this.createElement('ul')
+        const listElement = createElement("ul")
 
         const foldersMap = new Map()
         const modelsMap = new Map()
 
-        modelTree.forEach(model => {
+        modelTree.forEach((model) => {
             if (Array.isArray(model)) {
                 const [childFolderName, childModels] = model
                 foldersMap.set(
                     childFolderName,
-                    this.createModelNodeList(
-                        `${folderName || ''}/${childFolderName}`,
-                        childModels,
-                        false,
-                    ),
+                    this.createModelNodeList(`${folderName || ""}/${childFolderName}`, childModels, false)
                 )
             } else {
-                const classes = ['model-file']
+                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')
+                    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,
-                    this.createElement('li', { 'data-path': fullPath }, classes, model, 'fa-regular fa-file'),
+                    modelId,
+                    createElement("li", { "data-path": fullPath }, classes, [
+                        createElement("i", undefined, ["fa-regular", "fa-file", "icon"]),
+                        modelName,
+                    ])
                 )
             }
         })
 
         const childFolderNames = Array.from(foldersMap.keys())
-        this.sortStringArray(childFolderNames)
-        const folderElements = childFolderNames.map(name => foldersMap.get(name))
+        if (this.sorted) {
+            this.sortStringArray(childFolderNames)
+        }
+        const folderElements = childFolderNames.map((name) => foldersMap.get(name))
 
         const modelNames = Array.from(modelsMap.keys())
-        this.sortStringArray(modelNames)
-        const modelElements = modelNames.map(name => modelsMap.get(name))
+        if (this.sorted) {
+            this.sortStringArray(modelNames)
+        }
+        const modelElements = modelNames.map((name) => modelsMap.get(name))
 
         if (modelElements.length && folderName) {
-            listElement.appendChild(this.createElement('li', undefined, ['model-folder'], folderName.substring(1), 'fa-solid fa-folder-open'))
+            listElement.appendChild(
+                createElement(
+                    "li",
+                    undefined,
+                    ["model-folder"],
+                    [createElement("i", undefined, ["fa-regular", "fa-folder-open", "icon"]), folderName.substring(1)]
+                )
+            )
         }
 
         // const allModelElements = isRootFolder ? [...folderElements, ...modelElements] : [...modelElements, ...folderElements]
         const allModelElements = [...modelElements, ...folderElements]
-        allModelElements.forEach(e => listElement.appendChild(e))
+        allModelElements.forEach((e) => listElement.appendChild(e))
         return listElement
     }
 
@@ -606,37 +611,21 @@ class ModelDropdown
      * @returns {HTMLElement}
      */
     createRootModelList(modelTree) {
-        const rootList = this.createElement(
-            'ul',
-            { id: `${this.modelFilter.id}-model-list` },
-            ['model-list'],
-        )
+        const rootList = createElement("ul", { id: `${this.modelFilter.id}-model-list` }, ["model-list"])
         rootList.appendChild(
-            this.createElement(
-                'li',
-                { id: `${this.modelFilter.id}-model-no-result` },
-                ['model-no-result'],
-                'No result'
-            ),
+            createElement("li", { id: `${this.modelFilter.id}-model-no-result` }, ["model-no-result"], "No result")
         )
 
         if (this.noneEntry) {
             rootList.appendChild(
-                this.createElement(
-                    'li',
-                    { 'data-path': '' },
-                    ['model-file', 'in-root-folder'],
-                    this.noneEntry,
-                ),
+                createElement("li", { "data-path": "" }, ["model-file", "in-root-folder"], this.noneEntry)
             )
         }
 
         if (modelTree.length > 0) {
-            const containerListItem = this.createElement(
-                'li',
-                { id: `${this.modelFilter.id}-model-result` },
-                ['model-result'],
-            )
+            const containerListItem = createElement("li", { id: `${this.modelFilter.id}-model-result` }, [
+                "model-result",
+            ])
             //console.log(containerListItem)
             containerListItem.appendChild(this.createModelNodeList(undefined, modelTree, true))
             rootList.appendChild(containerListItem)
@@ -647,41 +636,31 @@ class ModelDropdown
 }
 
 /* (RE)LOAD THE MODELS */
-async function getModels() {
+async function getModels(scanForMalicious = true) {
     try {
-        modelsCache = await SD.getModels()
-        modelsOptions = modelsCache['options']
+        modelsCache = await SD.getModels(scanForMalicious)
+        modelsOptions = modelsCache["options"]
         if ("scan-error" in modelsCache) {
             // let previewPane = document.getElementById('tab-content-wrapper')
-            let previewPane = document.getElementById('preview')
-            previewPane.style.background="red"
-            previewPane.style.textAlign="center"
-            previewPane.innerHTML = '<H1>🔥Malware alert!🔥</H1><h2>The file <i>' + modelsCache['scan-error'] + '</i> in your <tt>models/stable-diffusion</tt> folder is probably malware infected.</h2><h2>Please delete this file from the folder before proceeding!</h2>After deleting the file, reload this page.<br><br><button onClick="window.location.reload();">Reload Page</button>'
+            let previewPane = document.getElementById("preview")
+            previewPane.style.background = "red"
+            previewPane.style.textAlign = "center"
+            previewPane.innerHTML =
+                "<H1>🔥Malware alert!🔥</H1><h2>The file <i>" +
+                modelsCache["scan-error"] +
+                '</i> in your <tt>models/stable-diffusion</tt> folder is probably malware infected.</h2><h2>Please delete this file from the folder before proceeding!</h2>After deleting the file, reload this page.<br><br><button onClick="window.location.reload();">Reload Page</button>'
             makeImageBtn.disabled = true
         }
 
-        /* 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'))
+        document.dispatchEvent(new Event("refreshModels"))
     } catch (e) {
-        console.log('get models error', e)
+        console.log("get models error", e)
     }
 }
 
 // reload models button
-document.querySelector('#reload-models').addEventListener('click', getModels)
+document.querySelector("#reload-models").addEventListener("click", (e) => {
+    e.stopPropagation()
+    getModels()
+})

ui/media/js/task-manager.js

@@ -0,0 +1,409 @@
+const htmlTaskMap = new WeakMap()
+
+const pauseBtn = document.querySelector("#pause")
+const resumeBtn = document.querySelector("#resume")
+const processOrder = document.querySelector("#process_order_toggle")
+
+let pauseClient = false
+
+async function onIdle() {
+    const serverCapacity = SD.serverCapacity
+    if (pauseClient === true) {
+        await resumeClient()
+    }
+
+    for (const taskEntry of getUncompletedTaskEntries()) {
+        if (SD.activeTasks.size >= serverCapacity) {
+            break
+        }
+        const task = htmlTaskMap.get(taskEntry)
+        if (!task) {
+            const taskStatusLabel = taskEntry.querySelector(".taskStatusLabel")
+            taskStatusLabel.style.display = "none"
+            continue
+        }
+        await onTaskStart(task)
+    }
+}
+
+function getUncompletedTaskEntries() {
+    const taskEntries = Array.from(document.querySelectorAll("#preview .imageTaskContainer .taskStatusLabel"))
+        .filter((taskLabel) => taskLabel.style.display !== "none")
+        .map(function(taskLabel) {
+            let imageTaskContainer = taskLabel.parentNode
+            while (!imageTaskContainer.classList.contains("imageTaskContainer") && imageTaskContainer.parentNode) {
+                imageTaskContainer = imageTaskContainer.parentNode
+            }
+            return imageTaskContainer
+        })
+    if (!processOrder.checked) {
+        taskEntries.reverse()
+    }
+    return taskEntries
+}
+
+async function onTaskStart(task) {
+    if (!task.isProcessing || task.batchesDone >= task.batchCount) {
+        return
+    }
+
+    if (typeof task.startTime !== "number") {
+        task.startTime = Date.now()
+    }
+    if (!("instances" in task)) {
+        task["instances"] = []
+    }
+
+    task["stopTask"].innerHTML = '<i class="fa-solid fa-circle-stop"></i> Stop'
+    task["taskStatusLabel"].innerText = "Starting"
+    task["taskStatusLabel"].classList.add("waitingTaskLabel")
+
+    if (task.previewTaskReq !== undefined) {
+        let controlImagePreview = task.taskConfig.querySelector(".controlnet-img-preview > img")
+        try {
+            let result = await SD.filter(task.previewTaskReq)
+
+            controlImagePreview.src = result.output[0]
+            let controlImageLargePreview = task.taskConfig.querySelector(
+                ".controlnet-img-preview .task-fs-initimage img"
+            )
+            controlImageLargePreview.src = controlImagePreview.src
+        } catch (error) {
+            console.log("filter error", error)
+        }
+
+        delete task.previewTaskReq
+    }
+
+    let newTaskReqBody = task.reqBody
+    if (task.batchCount > 1) {
+        // Each output render batch needs it's own task reqBody instance to avoid altering the other runs after they are completed.
+        newTaskReqBody = Object.assign({}, task.reqBody)
+        if (task.batchesDone == task.batchCount - 1) {
+            // Last batch of the task
+            // If the number of parallel jobs is no factor of the total number of images, the last batch must create less than "parallel jobs count" images
+            // E.g. with numOutputsTotal = 6 and num_outputs = 5, the last batch shall only generate 1 image.
+            newTaskReqBody.num_outputs = task.numOutputsTotal - task.reqBody.num_outputs * (task.batchCount - 1)
+        }
+    }
+
+    const startSeed = task.seed || newTaskReqBody.seed
+    const genSeeds = Boolean(
+        typeof newTaskReqBody.seed !== "number" || (newTaskReqBody.seed === task.seed && task.numOutputsTotal > 1)
+    )
+    if (genSeeds) {
+        newTaskReqBody.seed = parseInt(startSeed) + task.batchesDone * task.reqBody.num_outputs
+    }
+
+    const outputContainer = document.createElement("div")
+    outputContainer.className = "img-batch"
+    task.outputContainer.insertBefore(outputContainer, task.outputContainer.firstChild)
+
+    const eventInfo = { reqBody: newTaskReqBody }
+    const callbacksPromises = PLUGINS["TASK_CREATE"].map((hook) => {
+        if (typeof hook !== "function") {
+            console.error("The provided TASK_CREATE hook is not a function. Hook: %o", hook)
+            return Promise.reject(new Error("hook is not a function."))
+        }
+        try {
+            return Promise.resolve(hook.call(task, eventInfo))
+        } catch (err) {
+            console.error(err)
+            return Promise.reject(err)
+        }
+    })
+    await Promise.allSettled(callbacksPromises)
+    let instance = eventInfo.instance
+    if (!instance) {
+        const factory = PLUGINS.OUTPUTS_FORMATS.get(eventInfo.reqBody?.output_format || newTaskReqBody.output_format)
+        if (factory) {
+            instance = await Promise.resolve(factory(eventInfo.reqBody || newTaskReqBody))
+        }
+        if (!instance) {
+            console.error(
+                `${factory ? "Factory " + String(factory) : "No factory defined"} for output format ${eventInfo.reqBody
+                    ?.output_format || newTaskReqBody.output_format}. Instance is ${instance ||
+                    "undefined"}. Using default renderer.`
+            )
+            instance = new SD.RenderTask(eventInfo.reqBody || newTaskReqBody)
+        }
+    }
+
+    task["instances"].push(instance)
+    task.batchesDone++
+
+    document.dispatchEvent(new CustomEvent("before_task_start", { detail: { task: task } }))
+
+    instance.enqueue(getTaskUpdater(task, newTaskReqBody, outputContainer)).then(
+        (renderResult) => {
+            onRenderTaskCompleted(task, newTaskReqBody, instance, outputContainer, renderResult)
+        },
+        (reason) => {
+            onTaskErrorHandler(task, newTaskReqBody, instance, reason)
+        }
+    )
+
+    document.dispatchEvent(new CustomEvent("after_task_start", { detail: { task: task } }))
+}
+
+function getTaskUpdater(task, reqBody, outputContainer) {
+    const outputMsg = task["outputMsg"]
+    const progressBar = task["progressBar"]
+    const progressBarInner = progressBar.querySelector("div")
+
+    const batchCount = task.batchCount
+    let lastStatus = undefined
+    return async function(event) {
+        if (this.status !== lastStatus) {
+            lastStatus = this.status
+            switch (this.status) {
+                case SD.TaskStatus.pending:
+                    task["taskStatusLabel"].innerText = "Pending"
+                    task["taskStatusLabel"].classList.add("waitingTaskLabel")
+                    break
+                case SD.TaskStatus.waiting:
+                    task["taskStatusLabel"].innerText = "Waiting"
+                    task["taskStatusLabel"].classList.add("waitingTaskLabel")
+                    task["taskStatusLabel"].classList.remove("activeTaskLabel")
+                    break
+                case SD.TaskStatus.processing:
+                case SD.TaskStatus.completed:
+                    task["taskStatusLabel"].innerText = "Processing"
+                    task["taskStatusLabel"].classList.add("activeTaskLabel")
+                    task["taskStatusLabel"].classList.remove("waitingTaskLabel")
+                    break
+                case SD.TaskStatus.stopped:
+                    break
+                case SD.TaskStatus.failed:
+                    if (!SD.isServerAvailable()) {
+                        logError(
+                            "Stable Diffusion is still starting up, please wait. If this goes on beyond a few minutes, Stable Diffusion has probably crashed. Please check the error message in the command-line window.",
+                            event,
+                            outputMsg
+                        )
+                    } else if (typeof event?.response === "object") {
+                        let msg = "Stable Diffusion had an error reading the response:<br/><pre>"
+                        if (this.exception) {
+                            msg += `Error: ${this.exception.message}<br/>`
+                        }
+                        try {
+                            // 'Response': body stream already read
+                            msg += "Read: " + (await event.response.text())
+                        } catch (e) {
+                            msg += "Unexpected end of stream. "
+                        }
+                        const bufferString = event.reader.bufferedString
+                        if (bufferString) {
+                            msg += "Buffered data: " + bufferString
+                        }
+                        msg += "</pre>"
+                        logError(msg, event, outputMsg)
+                    }
+                    break
+            }
+        }
+        if ("update" in event) {
+            const stepUpdate = event.update
+            if (!("step" in stepUpdate)) {
+                return
+            }
+            // task.instances can be a mix of different tasks with uneven number of steps (Render Vs Filter Tasks)
+            const instancesWithProgressUpdates = task.instances.filter((instance) => instance.step !== undefined)
+            const overallStepCount =
+                instancesWithProgressUpdates.reduce(
+                    (sum, instance) =>
+                        sum +
+                        (instance.isPending
+                            ? Math.max(0, instance.step || stepUpdate.step) /
+                              (instance.total_steps || stepUpdate.total_steps)
+                            : 1),
+                    0 // Initial value
+                ) * stepUpdate.total_steps // Scale to current number of steps.
+            const totalSteps = instancesWithProgressUpdates.reduce(
+                (sum, instance) => sum + (instance.total_steps || stepUpdate.total_steps),
+                stepUpdate.total_steps * (batchCount - task.batchesDone) // Initial value at (unstarted task count * Nbr of steps)
+            )
+            const percent = Math.min(100, 100 * (overallStepCount / totalSteps)).toFixed(0)
+
+            const timeTaken = stepUpdate.step_time // sec
+            const stepsRemaining = Math.max(0, totalSteps - overallStepCount)
+            const timeRemaining = timeTaken < 0 ? "" : millisecondsToStr(stepsRemaining * timeTaken * 1000)
+            outputMsg.innerHTML = `Batch ${task.batchesDone} of ${batchCount}. Generating image(s): ${percent}%. Time remaining (approx): ${timeRemaining}`
+            outputMsg.style.display = "block"
+            progressBarInner.style.width = `${percent}%`
+
+            if (stepUpdate.output) {
+                document.dispatchEvent(
+                    new CustomEvent("on_task_step", {
+                        detail: {
+                            task: task,
+                            reqBody: reqBody,
+                            stepUpdate: stepUpdate,
+                            outputContainer: outputContainer,
+                        },
+                    })
+                )
+            }
+        }
+    }
+}
+
+function onRenderTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
+    if (typeof stepUpdate === "object") {
+        if (stepUpdate.status === "succeeded") {
+            document.dispatchEvent(
+                new CustomEvent("on_render_task_success", {
+                    detail: {
+                        task: task,
+                        reqBody: reqBody,
+                        stepUpdate: stepUpdate,
+                        outputContainer: outputContainer,
+                    },
+                })
+            )
+        } else {
+            task.isProcessing = false
+            document.dispatchEvent(
+                new CustomEvent("on_render_task_fail", {
+                    detail: {
+                        task: task,
+                        reqBody: reqBody,
+                        stepUpdate: stepUpdate,
+                        outputContainer: outputContainer,
+                    },
+                })
+            )
+        }
+    }
+    if (task.isProcessing && task.batchesDone < task.batchCount) {
+        task["taskStatusLabel"].innerText = "Pending"
+        task["taskStatusLabel"].classList.add("waitingTaskLabel")
+        task["taskStatusLabel"].classList.remove("activeTaskLabel")
+        return
+    }
+    if ("instances" in task && task.instances.some((ins) => ins != instance && ins.isPending)) {
+        return
+    }
+
+    task.isProcessing = false
+    task["stopTask"].innerHTML = '<i class="fa-solid fa-trash-can"></i> Remove'
+    task["taskStatusLabel"].style.display = "none"
+
+    let time = millisecondsToStr(Date.now() - task.startTime)
+
+    if (task.batchesDone == task.batchCount) {
+        if (!task.outputMsg.innerText.toLowerCase().includes("error")) {
+            task.outputMsg.innerText = `Processed ${task.numOutputsTotal} images in ${time}`
+        }
+        task.progressBar.style.height = "0px"
+        task.progressBar.style.border = "0px solid var(--background-color3)"
+        task.progressBar.classList.remove("active")
+        // setStatus("request", "done", "success")
+    } else {
+        task.outputMsg.innerText += `. Task ended after ${time}`
+    }
+
+    // if (randomSeedField.checked) { // we already update this before the task starts
+    //     seedField.value = task.seed
+    // }
+
+    if (SD.activeTasks.size > 0) {
+        return
+    }
+    const uncompletedTasks = getUncompletedTaskEntries()
+    if (uncompletedTasks && uncompletedTasks.length > 0) {
+        return
+    }
+
+    if (pauseClient) {
+        resumeBtn.click()
+    }
+
+    document.dispatchEvent(
+        new CustomEvent("on_all_tasks_complete", {
+            detail: {},
+        })
+    )
+}
+
+function resumeClient() {
+    if (pauseClient) {
+        document.body.classList.remove("wait-pause")
+        document.body.classList.add("pause")
+    }
+    return new Promise((resolve) => {
+        let playbuttonclick = function() {
+            resumeBtn.removeEventListener("click", playbuttonclick)
+            resolve("resolved")
+        }
+        resumeBtn.addEventListener("click", playbuttonclick)
+    })
+}
+
+function abortTask(task) {
+    if (!task.isProcessing) {
+        return false
+    }
+    task.isProcessing = false
+    task.progressBar.classList.remove("active")
+    task["taskStatusLabel"].style.display = "none"
+    task["stopTask"].innerHTML = '<i class="fa-solid fa-trash-can"></i> Remove'
+    if (!task.instances?.some((r) => r.isPending)) {
+        return
+    }
+    task.instances.forEach((instance) => {
+        try {
+            instance.abort()
+        } catch (e) {
+            console.error(e)
+        }
+    })
+}
+
+async function stopAllTasks() {
+    getUncompletedTaskEntries().forEach((taskEntry) => {
+        const taskStatusLabel = taskEntry.querySelector(".taskStatusLabel")
+        if (taskStatusLabel) {
+            taskStatusLabel.style.display = "none"
+        }
+        const task = htmlTaskMap.get(taskEntry)
+        if (!task) {
+            return
+        }
+        abortTask(task)
+    })
+}
+
+function onTaskErrorHandler(task, reqBody, instance, reason) {
+    if (!task.isProcessing) {
+        return
+    }
+    console.log("Render request %o, Instance: %o, Error: %s", reqBody, instance, reason)
+    abortTask(task)
+    const outputMsg = task["outputMsg"]
+    logError(
+        "Stable Diffusion had an error. Please check the logs in the command-line window. <br/><br/>" +
+            reason +
+            "<br/><pre>" +
+            reason.stack +
+            "</pre>",
+        task,
+        outputMsg
+    )
+    // setStatus("request", "error", "error")
+}
+
+pauseBtn.addEventListener("click", function() {
+    pauseClient = true
+    pauseBtn.style.display = "none"
+    resumeBtn.style.display = "inline"
+    document.body.classList.add("wait-pause")
+})
+
+resumeBtn.addEventListener("click", function() {
+    pauseClient = false
+    resumeBtn.style.display = "none"
+    pauseBtn.style.display = "inline"
+    document.body.classList.remove("pause")
+    document.body.classList.remove("wait-pause")
+})

ui/media/js/themes.js

@@ -1,82 +1,85 @@
-const themeField = document.getElementById("theme");
-var DEFAULT_THEME = {};
-var THEMES = []; // initialized in initTheme from data in css
+const themeField = document.getElementById("theme")
+var DEFAULT_THEME = {}
+var THEMES = [] // initialized in initTheme from data in css
 
 function getThemeName(theme) {
-    theme = theme.replace("theme-", "");
-    theme = theme.split("-").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
-    return theme;
+    theme = theme.replace("theme-", "")
+    theme = theme
+        .split("-")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ")
+    return theme
 }
 // init themefield
 function initTheme() {
     Array.from(document.styleSheets)
-        .filter(sheet => sheet.href?.startsWith(window.location.origin))
-        .flatMap(sheet => Array.from(sheet.cssRules))
-        .forEach(rule => {
-            var selector = rule.selectorText;
+        .filter((sheet) => sheet.href?.startsWith(window.location.origin))
+        .flatMap((sheet) => Array.from(sheet.cssRules))
+        .forEach((rule) => {
+            var selector = rule.selectorText
             if (selector && selector.startsWith(".theme-") && !selector.includes(" ")) {
-                if (DEFAULT_THEME) { // re-add props that dont change (css needs this so they update correctly)
+                if (DEFAULT_THEME) {
+                    // re-add props that dont change (css needs this so they update correctly)
                     Array.from(DEFAULT_THEME.rule.style)
-                        .filter(cssVariable => !Array.from(rule.style).includes(cssVariable))
-                        .forEach(cssVariable => {
-                        rule.style.setProperty(cssVariable, DEFAULT_THEME.rule.style.getPropertyValue(cssVariable));
-                    });
+                        .filter((cssVariable) => !Array.from(rule.style).includes(cssVariable))
+                        .forEach((cssVariable) => {
+                            rule.style.setProperty(cssVariable, DEFAULT_THEME.rule.style.getPropertyValue(cssVariable))
+                        })
                 }
-                var theme_key = selector.substring(1);
+                var theme_key = selector.substring(1)
                 THEMES.push({
                     key: theme_key,
                     name: getThemeName(theme_key),
-                    rule: rule
+                    rule: rule,
                 })
             }
             if (selector && selector == ":root") {
                 DEFAULT_THEME = {
                     key: "theme-default",
                     name: "Default",
-                    rule: rule
-                };
+                    rule: rule,
+                }
             }
-    });
-    
-    THEMES.forEach(theme => {
-        var new_option = document.createElement("option");
-        new_option.setAttribute("value", theme.key);
-        new_option.innerText = theme.name;
-        themeField.appendChild(new_option);
-    });
+        })
+
+    THEMES.forEach((theme) => {
+        var new_option = document.createElement("option")
+        new_option.setAttribute("value", theme.key)
+        new_option.innerText = theme.name
+        themeField.appendChild(new_option)
+    })
 
-    
     // setup the style transitions a second after app initializes, so initial style is instant
     setTimeout(() => {
-        var body = document.querySelector("body");
-        var style = document.createElement('style');
-        style.innerHTML = "* { transition: background 0.5s, color 0.5s, background-color 0.5s; }";
-        body.appendChild(style);
-    }, 1000);
+        var body = document.querySelector("body")
+        var style = document.createElement("style")
+        style.innerHTML = "* { transition: background 0.5s, color 0.5s, background-color 0.5s; }"
+        body.appendChild(style)
+    }, 1000)
 }
-initTheme();
+initTheme()
 
 function themeFieldChanged() {
-    var theme_key = themeField.value;
+    var theme_key = themeField.value
 
-    var body = document.querySelector("body");
-    body.classList.remove(...THEMES.map(theme => theme.key));
-    body.classList.add(theme_key);
-    
-    // 
+    var body = document.querySelector("body")
+    body.classList.remove(...THEMES.map((theme) => theme.key))
+    body.classList.add(theme_key)
 
-    body.style = "";
-    var theme = THEMES.find(t => t.key == theme_key);
+    //
+
+    body.style = ""
+    var theme = THEMES.find((t) => t.key == theme_key)
     let borderColor = undefined
     if (theme) {
-        borderColor = theme.rule.style.getPropertyValue('--input-border-color').trim()
-        if (!borderColor.startsWith('#')) {
-            borderColor = theme.rule.style.getPropertyValue('--theme-color-fallback')
+        borderColor = theme.rule.style.getPropertyValue("--input-border-color").trim()
+        if (!borderColor.startsWith("#")) {
+            borderColor = theme.rule.style.getPropertyValue("--theme-color-fallback")
         }
     } else {
-        borderColor = DEFAULT_THEME.rule.style.getPropertyValue('--theme-color-fallback')
+        borderColor = DEFAULT_THEME.rule.style.getPropertyValue("--theme-color-fallback")
     }
     document.querySelector('meta[name="theme-color"]').setAttribute("content", borderColor)
 }
 
-themeField.addEventListener('change', themeFieldChanged);
+themeField.addEventListener("change", themeFieldChanged)

ui/modifiers.json

@@ -2428,6 +2428,19 @@
             "path": "artist/by_yoshitaka_amano/landscape-0.jpg"
           }
         ]
+      },
+      {
+        "modifier": "by Zdzislaw Beksinski",
+        "previews": [
+          {
+            "name": "portrait",
+            "path": "artist/by_zdzislaw_beksinski/portrait-0.jpg"
+          },
+          {
+            "name": "landscape",
+            "path": "artist/by_zdzislaw_beksinski/landscape-0.jpg"
+          }
+        ]
       }
     ]
   },

ui/plugins/ui/Autoscroll.plugin.js

@@ -1,28 +1,32 @@
-(function () {
+;(function() {
     "use strict"
 
     let autoScroll = document.querySelector("#auto_scroll")
 
     // observe for changes in the preview pane
-    var observer = new MutationObserver(function (mutations) {
-        mutations.forEach(function (mutation) {
-            if (mutation.target.className == 'img-batch') {
+    var observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.target.className == "img-batch") {
                 Autoscroll(mutation.target)
             }
         })
     })
-    
-    observer.observe(document.getElementById('preview'), {
-            childList: true,
-            subtree: true
+
+    observer.observe(document.getElementById("preview"), {
+        childList: true,
+        subtree: true,
     })
 
     function Autoscroll(target) {
         if (autoScroll.checked && target !== null) {
-            const img = target.querySelector('img')
-            img.addEventListener('load', function() {
-                img.closest('.imageTaskContainer').scrollIntoView()
-            }, { once: true })
+            const img = target.querySelector("img")
+            img.addEventListener(
+                "load",
+                function() {
+                    img?.closest(".imageTaskContainer").scrollIntoView()
+                },
+                { once: true }
+            )
         }
     }
 })()