extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-12-29 10:29:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'beta' into textualinv

Browse Source
This commit is contained in:
JeLuF 2023-06-28 19:55:25 +02:00
commit 7306ac0168
31 changed files with 5312 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
CHANGES.md
View File

@ -8,13 +8,13 @@
- **Full support for Stable Diffusion 2.1 (including CPU)** - supports loading v1.4 or v2.0 or v2.1 models seamlessly. No need to enable "Test SD2", and no need to add `sd2_` to your SD 2.0 model file names. Works on CPU as well. - **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. - **Memory optimized Stable Diffusion 2.1** - you can now use Stable Diffusion 2.1 models, with the same low VRAM optimizations that we've always had for SD 1.4. Please note, the SD 2.0 and 2.1 models require more GPU and System RAM, as compared to the SD 1.4 and 1.5 models.
- **11 new samplers!** - explore the new samplers, some of which can generate great images in less than 10 inference steps! We've added the Karras and UniPC samplers. Thanks @Schorny for the UniPC samplers. - **11 new samplers!** - explore the new samplers, some of which can generate great images in less than 10 inference steps! We've added the Karras and UniPC samplers. Thanks @Schorny for the UniPC samplers.
- **Model Merging** - You can now merge two models (`.ckpt` or `.safetensors`) and output `.ckpt` or `.safetensors` models, optionally in `fp16` precision. Details: https://github.com/cmdr2/stable-diffusion-ui/wiki/Model-Merging . Thanks @JeLuf. - **Model Merging** - You can now merge two models (`.ckpt` or `.safetensors`) and output `.ckpt` or `.safetensors` models, optionally in `fp16` precision. Details: https://github.com/easydiffusion/easydiffusion/wiki/Model-Merging . Thanks @JeLuf.
- **Fast loading/unloading of VAEs** - No longer needs to reload the entire Stable Diffusion model, each time you change the VAE - **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). - **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. - **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. - **Three GPU Memory Usage Settings** - `High` (fastest, maximum VRAM usage), `Balanced` (default - almost as fast, significantly lower VRAM usage), `Low` (slowest, very low VRAM usage). The `Low` setting is applied automatically for GPUs with less than 4 GB of VRAM.
- **Find models in sub-folders** - This allows you to organize your models into sub-folders inside `models/stable-diffusion`, instead of keeping them all in a single folder. Thanks @patriceac and @ogmaresca. - **Find models in sub-folders** - This allows you to organize your models into sub-folders inside `models/stable-diffusion`, instead of keeping them all in a single folder. Thanks @patriceac and @ogmaresca.
- **Custom Modifier Categories** - Ability to create custom modifiers with thumbnails, and custom categories (and hierarchy of categories). Details: https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Modifiers . Thanks @ogmaresca. - **Custom Modifier Categories** - Ability to create custom modifiers with thumbnails, and custom categories (and hierarchy of categories). Details: https://github.com/easydiffusion/easydiffusion/wiki/Custom-Modifiers . Thanks @ogmaresca.
- **Embed metadata, or save as TXT/JSON** - You can now embed the metadata directly into the images, or save them as text or json files (choose in the Settings tab). Thanks @patriceac. - **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/ - **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. - **Name change** - Last, and probably the least, the UI is now called "Easy Diffusion". It indicates the focus of this project - an easy way for people to play with Stable Diffusion.
@ -22,6 +22,10 @@
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. 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 ### Detailed changelog
* 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 - 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 - 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 - 12 Jun 2023 - Fix multi-gpu bug with CodeFormer.
@ -68,7 +72,7 @@ Our focus continues to remain on an easy installation experience, and an easy us
* 2.5.24 - 11 Mar 2023 - Button to load an image mask from a file. * 2.5.24 - 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.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 - Experimental support for Mac M1/M2. Thanks @michaelgallacher, @JeLuf and vishae!
* 2.5.23 - 8 Mar 2023 - Ability to create custom modifiers with thumbnails, and custom categories (and hierarchy of categories). More details - https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Modifiers . Thanks @ogmaresca. * 2.5.23 - 8 Mar 2023 - Ability to create custom modifiers with thumbnails, and custom categories (and hierarchy of categories). More details - https://github.com/easydiffusion/easydiffusion/wiki/Custom-Modifiers . Thanks @ogmaresca.
* 2.5.22 - 28 Feb 2023 - Minor styling changes to UI buttons, and the models dropdown. * 2.5.22 - 28 Feb 2023 - 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.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. * 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.
@ -93,7 +97,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.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.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.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.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 - 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. * 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.
@ -122,8 +126,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 - **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 - **Image Editor** - for drawing simple images for guiding the AI. Thanks @mdiller
- **Use pre-trained hypernetworks** - for improving the quality of images. Thanks @C0bra5 - **Use pre-trained hypernetworks** - for improving the quality of images. Thanks @C0bra5
- **Support for custom VAE models**. You can place your VAE files in the `models/vae` folder, and refresh the browser page to use them. More info: https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder - **Support for custom VAE models**. You can place your VAE files in the `models/vae` folder, and refresh the browser page to use them. More info: https://github.com/easydiffusion/easydiffusion/wiki/VAE-Variational-Auto-Encoder
- **Experimental support for multiple GPUs!** It should work automatically. Just open one browser tab per GPU, and spread your tasks across your GPUs. For e.g. open our UI in two browser tabs if you have two GPUs. You can customize which GPUs it should use in the "Settings" tab, otherwise let it automatically pick the best GPUs. Thanks @madrang . More info: https://github.com/cmdr2/stable-diffusion-ui/wiki/Run-on-Multiple-GPUs - **Experimental support for multiple GPUs!** It should work automatically. Just open one browser tab per GPU, and spread your tasks across your GPUs. For e.g. open our UI in two browser tabs if you have two GPUs. You can customize which GPUs it should use in the "Settings" tab, otherwise let it automatically pick the best GPUs. Thanks @madrang . More info: https://github.com/easydiffusion/easydiffusion/wiki/Run-on-Multiple-GPUs
- **Cleaner UI design** - Show settings and help in new tabs, instead of dropdown popups (which were buggy). Thanks @mdiller - **Cleaner UI design** - Show settings and help in new tabs, instead of dropdown popups (which were buggy). Thanks @mdiller
- **Progress bar.** 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 `{}, (), [], |` - **Custom Image Modifiers** - You can now save your custom image modifiers! Your saved modifiers can include special characters like `{}, (), [], |`

4
CONTRIBUTING.md
View File

@ -1,6 +1,6 @@
Hi there, these instructions are meant for the developers of this project. 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 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: 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) (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` 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`) 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`) 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`)

6
How to install and run.txt
View File

@ -1,6 +1,6 @@
Congrats on downloading Stable Diffusion UI, version 2! Congrats on downloading Stable Diffusion UI, version 2!
If you haven't downloaded Stable Diffusion UI yet, please download from https://github.com/cmdr2/stable-diffusion-ui#installation If you haven't downloaded Stable Diffusion UI yet, please download from https://github.com/easydiffusion/easydiffusion#installation
After downloading, to install please follow these instructions: After downloading, to install please follow these instructions:
@ -16,9 +16,9 @@ To start the UI in the future, please run the same command mentioned above.
If you have any problems, please: 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 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 Thanks
cmdr2 (and contributors to the project) cmdr2 (and contributors to the project)

2
PRIVACY.md
View File

@ -3,7 +3,7 @@
This is a summary of whether Easy Diffusion uses your data or tracks you: 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. * 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 does not send your prompts or usage or analytics to anyone. There is no tracking. We don't even know how many people use Easy Diffusion, let alone their prompts.
* Easy Diffusion fetches updates to the code whenever it starts up. It does this by contacting GitHub directly, via SSL (secure connection). Only your computer and GitHub and [this repository](https://github.com/cmdr2/stable-diffusion-ui) are involved, and no third party is involved. Some countries intercepts SSL connections, that's not something we can do much about. GitHub does *not* share statistics (even with me) about how many people fetched code updates. * Easy Diffusion fetches updates to the code whenever it starts up. It does this by contacting GitHub directly, via SSL (secure connection). Only your computer and GitHub and [this repository](https://github.com/easydiffusion/easydiffusion) are involved, and no third party is involved. Some countries intercepts SSL connections, that's not something we can do much about. GitHub does *not* share statistics (even with me) about how many people fetched code updates.
* Easy Diffusion fetches the models from huggingface.co and github.com, if they don't exist on your PC. For e.g. if the safety checker (NSFW) model doesn't exist, it'll try to download it. * Easy Diffusion fetches 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. * 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 * 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

2
README BEFORE YOU RUN THIS.txt
View File

@ -3,6 +3,6 @@ Hi there,
What you have downloaded is meant for the developers of this project, not for users. 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. 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 Thanks

15
README.md
View File

@ -3,7 +3,7 @@
Does not require technical knowledge, does not require pre-installed software. 1-click install, powerful features, friendly community. Does not require technical knowledge, does not require pre-installed software. 1-click install, powerful features, friendly community.
[Installation guide](#installation) | [Troubleshooting guide](https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting) | <sub>[![Discord Server](https://img.shields.io/discord/1014774730907209781?label=Discord)](https://discord.com/invite/u9yhsFmEkB)</sub> <sup>(for support queries, and development discussions)</sup> [Installation guide](#installation) | [Troubleshooting guide](https://github.com/easydiffusion/easydiffusion/wiki/Troubleshooting) | <sub>[![Discord Server](https://img.shields.io/discord/1014774730907209781?label=Discord)](https://discord.com/invite/u9yhsFmEkB)</sub> <sup>(for support queries, and development discussions)</sup>
![t2i](https://raw.githubusercontent.com/Stability-AI/stablediffusion/main/assets/stable-samples/txt2img/768/merged-0006.png) ![t2i](https://raw.githubusercontent.com/Stability-AI/stablediffusion/main/assets/stable-samples/txt2img/768/merged-0006.png)
@ -11,9 +11,9 @@ Does not require technical knowledge, does not require pre-installed software. 1
Click the download button for your operating system: Click the download button for your operating system:
<p float="left"> <p float="left">
<a href="https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.5.24/Easy-Diffusion-Windows.exe"><img src="https://github.com/cmdr2/stable-diffusion-ui/raw/main/media/download-win.png" width="200" /></a> <a href="https://github.com/easydiffusion/easydiffusion/releases/download/v2.5.24/Easy-Diffusion-Windows.exe"><img src="https://github.com/easydiffusion/easydiffusion/raw/main/media/download-win.png" width="200" /></a>
<a href="https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.5.24/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/easydiffusion/easydiffusion/releases/download/v2.5.24/Easy-Diffusion-Linux.zip"><img src="https://github.com/easydiffusion/easydiffusion/raw/main/media/download-linux.png" width="200" /></a>
<a href="https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.5.24/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/easydiffusion/easydiffusion/releases/download/v2.5.24/Easy-Diffusion-Mac.zip"><img src="https://github.com/easydiffusion/easydiffusion/raw/main/media/download-mac.png" width="200" /></a>
</p> </p>
**Hardware requirements:** **Hardware requirements:**
@ -70,6 +70,7 @@ Just delete the `EasyDiffusion` folder to uninstall all the downloaded packages.
- **Attention/Emphasis**: () in the prompt increases the model's attention to enclosed words, and [] decreases it. - **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`. - **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 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. - **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. - **Make Similar Images**: Click to generate multiple variations of a generated image.
- **NSFW Setting**: A setting in the UI to control *NSFW content*. - **NSFW Setting**: A setting in the UI to control *NSFW content*.
@ -82,7 +83,7 @@ Just delete the `EasyDiffusion` folder to uninstall all the downloaded packages.
- **Use custom VAE models** - **Use custom VAE models**
- **Use pre-trained Hypernetworks** - **Use pre-trained Hypernetworks**
- **Use custom GFPGAN models** - **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 ### Performance and security
- **Fast**: Creates a 512x512 image with euler_a in 5 seconds, on an NVIDIA 3060 12GB. - **Fast**: Creates a 512x512 image with euler_a in 5 seconds, on an NVIDIA 3060 12GB.
@ -118,10 +119,10 @@ Useful for judging (and stopping) an image quickly, without waiting for it to fi
---- ----
# How to use? # 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 # Bugs reports and code contributions welcome
If there are any problems or suggestions, please feel free to ask on the [discord server](https://discord.com/invite/u9yhsFmEkB) or [file an issue](https://github.com/cmdr2/stable-diffusion-ui/issues). If there are any problems or suggestions, please feel free to ask on the [discord server](https://discord.com/invite/u9yhsFmEkB) or [file an issue](https://github.com/easydiffusion/easydiffusion/issues).
We could really use help on these aspects (click to view tasks that need your help): 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) * [User Interface](https://github.com/users/cmdr2/projects/1/views/1)

3
build.bat
View File

@ -2,7 +2,7 @@
@echo "Hi there, what you are running is meant for the developers of this project, not for users." & echo. @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 "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. @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)? 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\on_env_start.bat dist\win\stable-diffusion-ui\scripts\
copy scripts\bootstrap.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 "scripts\Start Stable Diffusion UI.cmd" dist\win\stable-diffusion-ui\
copy LICENSE dist\win\stable-diffusion-ui\ copy LICENSE dist\win\stable-diffusion-ui\
copy "CreativeML Open RAIL-M License" dist\win\stable-diffusion-ui\ copy "CreativeML Open RAIL-M License" dist\win\stable-diffusion-ui\

3
build.sh
View File

@ -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 "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 "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" 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 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/on_env_start.sh dist/linux-mac/stable-diffusion-ui/scripts/
cp scripts/bootstrap.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/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 scripts/start.sh dist/linux-mac/stable-diffusion-ui/
cp LICENSE 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/ cp "CreativeML Open RAIL-M License" dist/linux-mac/stable-diffusion-ui/

4
scripts/Developer Console.cmd
View File

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

3
scripts/Start Stable Diffusion UI.cmd
View File

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

2
scripts/bootstrap.bat
View File

@ -11,7 +11,7 @@ setlocal enabledelayedexpansion
set MAMBA_ROOT_PREFIX=%cd%\installer_files\mamba set MAMBA_ROOT_PREFIX=%cd%\installer_files\mamba
set INSTALL_ENV_DIR=%cd%\installer_files\env set INSTALL_ENV_DIR=%cd%\installer_files\env
set LEGACY_INSTALL_ENV_DIR=%cd%\installer 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 umamba_exists=F
set OLD_APPDATA=%APPDATA% set OLD_APPDATA=%APPDATA%

7
scripts/check_modules.py
View File

@ -18,12 +18,13 @@ os_name = platform.system()
modules_to_check = { modules_to_check = {
"torch": ("1.11.0", "1.13.1", "2.0.0"), "torch": ("1.11.0", "1.13.1", "2.0.0"),
"torchvision": ("0.12.0", "0.14.1", "0.15.1"), "torchvision": ("0.12.0", "0.14.1", "0.15.1"),
"sdkit": "1.0.108", "sdkit": "1.0.112",
"stable-diffusion-sdkit": "2.1.4", "stable-diffusion-sdkit": "2.1.4",
"rich": "12.6.0", "rich": "12.6.0",
"uvicorn": "0.19.0", "uvicorn": "0.19.0",
"fastapi": "0.85.1", "fastapi": "0.85.1",
"pycloudflared": "0.2.0", "pycloudflared": "0.2.0",
"ruamel.yaml": "0.17.21",
# "xformers": "0.0.16", # "xformers": "0.0.16",
} }
modules_to_log = ["torch", "torchvision", "sdkit", "stable-diffusion-sdkit"] modules_to_log = ["torch", "torchvision", "sdkit", "stable-diffusion-sdkit"]
@ -148,9 +149,9 @@ def fail(module_name):
print( print(
f"""Error installing {module_name}. Sorry about that, please try to: f"""Error installing {module_name}. Sorry about that, please try to:
1. Run this installer again. 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 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!""" Thanks!"""
) )
exit(1) exit(1)

24
scripts/config.yaml.sample Normal file
View File

@ -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/

4
scripts/functions.sh
View File

@ -15,9 +15,9 @@ fail() {
Error downloading Stable Diffusion UI. Sorry about that, please try to: Error downloading Stable Diffusion UI. Sorry about that, please try to:
1. Run this installer again. 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 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! Thanks!

4
scripts/on_env_start.bat
View File

@ -55,10 +55,10 @@ if "%update_branch%"=="" (
@echo. & echo "Downloading Easy Diffusion..." & echo. @echo. & echo "Downloading Easy Diffusion..." & echo.
@echo "Using the %update_branch% channel" & 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 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 pause
@exit /b @exit /b
) )

2
scripts/on_env_start.sh
View File

@ -38,7 +38,7 @@ else
printf "\n\nDownloading Easy Diffusion..\n\n" printf "\n\nDownloading Easy Diffusion..\n\n"
printf "Using the $update_branch channel\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 echo sd_ui_git_cloned >> scripts/install_status.txt
else else
fail "git clone failed" fail "git clone failed"

4
scripts/on_sd_start.bat
View File

@ -26,7 +26,7 @@ if exist "%cd%\stable-diffusion\env" (
@rem activate the installer env @rem activate the installer env
call conda activate call conda activate
@if "%ERRORLEVEL%" NEQ "0" ( @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 pause
exit /b exit /b
) )
@ -68,7 +68,7 @@ if "%ERRORLEVEL%" NEQ "0" (
call WHERE uvicorn > .tmp call WHERE uvicorn > .tmp
@>nul findstr /m "uvicorn" .tmp @>nul findstr /m "uvicorn" .tmp
@if "%ERRORLEVEL%" NEQ "0" ( @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 pause
exit /b exit /b
) )

53
ui/easydiffusion/app.py
View File

@ -4,6 +4,9 @@ import os
import socket import socket
import sys import sys
import traceback import traceback
import shlex
from ruamel.yaml import YAML
import urllib import urllib
import warnings import warnings
@ -14,6 +17,8 @@ from rich.console import Console
from rich.panel import Panel from rich.panel import Panel
from sdkit.utils import log as sdkit_log # hack, so we can overwrite the log config from sdkit.utils import log as sdkit_log # hack, so we can overwrite the log config
yaml = YAML()
# Remove all handlers associated with the root logger object. # Remove all handlers associated with the root logger object.
for handler in logging.root.handlers[:]: for handler in logging.root.handlers[:]:
logging.root.removeHandler(handler) logging.root.removeHandler(handler)
@ -98,30 +103,50 @@ def init():
def getConfig(default_val=APP_CONFIG_DEFAULTS): def getConfig(default_val=APP_CONFIG_DEFAULTS):
config_yaml_path = os.path.join(CONFIG_DIR, "config.yaml")
if os.path.isfile(config_yaml_path):
try: try:
config_json_path = os.path.join(CONFIG_DIR, "config.json") with open(config_yaml_path, "r", encoding="utf-8") as f:
if not os.path.exists(config_json_path): config = yaml.load(f)
config = default_val
else:
with open(config_json_path, "r", encoding="utf-8") as f:
config = json.load(f)
if "net" not in config: if "net" not in config:
config["net"] = {} config["net"] = {}
if os.getenv("SD_UI_BIND_PORT") is not None: if os.getenv("SD_UI_BIND_PORT") is not None:
config["net"]["listen_port"] = int(os.getenv("SD_UI_BIND_PORT")) 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: 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" config["net"]["listen_to_network"] = os.getenv("SD_UI_BIND_IP") == "0.0.0.0"
else:
config["net"]["listen_to_network"] = True
return config return config
except Exception: except Exception as e:
log.warn(traceback.format_exc())
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
else:
log.info("Converting old json config file to yaml")
with open(config_json_path, "r", encoding="utf-8") as f:
config = json.load(f)
# Save config in new format
setConfig(config)
os.rename(config_json_path, config_json_path + ".bak")
log.info("Saved old config.json as config.json.bak")
return getConfig(default_val)
except Exception as e:
log.warn(traceback.format_exc()) log.warn(traceback.format_exc())
return default_val return default_val
def setConfig(config): def setConfig(config):
try: # config.json try: # config.yaml
config_json_path = os.path.join(CONFIG_DIR, "config.json") config_yaml_path = os.path.join(CONFIG_DIR, "config.yaml")
with open(config_json_path, "w", encoding="utf-8") as f: yaml.indent(mapping=2, sequence=4, offset=2)
json.dump(config, f) with open(config_yaml_path, "w", encoding="utf-8") as f:
yaml.dump(config, f)
except: except:
log.error(traceback.format_exc()) log.error(traceback.format_exc())
@ -157,10 +182,12 @@ def update_render_threads():
def getUIPlugins(): def getUIPlugins():
plugins = [] plugins = []
file_names = set()
for plugins_dir, dir_prefix in UI_PLUGINS_SOURCES: for plugins_dir, dir_prefix in UI_PLUGINS_SOURCES:
for file in os.listdir(plugins_dir): 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}") plugins.append(f"/plugins/{dir_prefix}/{file}")
file_names.add(file)
return plugins return plugins
@ -237,7 +264,7 @@ def fail_and_die(fail_type: str, data: str):
suggestions = [ suggestions = [
"Run this installer again.", "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 those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB",
"If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues", "If that doesn't solve the problem, please file an issue at https://github.com/easydiffusion/easydiffusion/issues",
] ]
if fail_type == "model_download": if fail_type == "model_download":

178
ui/index.html
View File

@ -16,6 +16,7 @@
<link rel="stylesheet" href="/media/css/image-editor.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/searchable-models.css">
<link rel="stylesheet" href="/media/css/image-modal.css"> <link rel="stylesheet" href="/media/css/image-modal.css">
<link rel="stylesheet" href="/media/css/plugins.css">
<link rel="manifest" href="/media/manifest.webmanifest"> <link rel="manifest" href="/media/manifest.webmanifest">
<script src="/media/js/jquery-3.6.1.min.js"></script> <script src="/media/js/jquery-3.6.1.min.js"></script>
<script src="/media/js/jquery-confirm.min.js"></script> <script src="/media/js/jquery-confirm.min.js"></script>
@ -30,7 +31,7 @@
<h1> <h1>
<img id="logo_img" src="/media/images/icon-512x512.png" > <img id="logo_img" src="/media/images/icon-512x512.png" >
Easy Diffusion Easy Diffusion
<small>v2.5.41 <span id="updateBranchLabel"></span></small> <small><span id="version">v2.5.42</span> <span id="updateBranchLabel"></span></small>
</h1> </h1>
</div> </div>
<div id="server-status"> <div id="server-status">
@ -60,7 +61,11 @@
<input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden --> <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
<label for="negative_prompt" class="collapsible" id="negative_prompt_handle"> <label for="negative_prompt" class="collapsible" id="negative_prompt_handle">
Negative Prompt 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>
<label for="image-modifiers" data-active="false" id="image-modifier-dropdown">
Image Modifiers
<small>(optional)</small> <small>(optional)</small>
</label> </label>
<div class="collapsible-content"> <div class="collapsible-content">
@ -102,7 +107,7 @@
</div> </div>
<div id="editor-inputs-tags-container" class="row"> <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 id="editor-inputs-tags-list"></div>
</div> </div>
@ -133,18 +138,18 @@
<tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td class="model-input"> <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="" /> <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> <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> </td></tr>
<tr class="pl-5 displayNone" id="clip_skip_config"> <tr class="pl-5 displayNone" id="clip_skip_config">
<td><label for="clip_skip">Clip Skip:</label></td> <td><label for="clip_skip">Clip Skip:</label></td>
<td> <td>
<input id="clip_skip" name="clip_skip" type="checkbox"> <input id="clip_skip" name="clip_skip" type="checkbox">
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Clip-Skip" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about Clip Skip</span></i></a> <a href="https://github.com/easydiffusion/easydiffusion/wiki/Clip-Skip" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about Clip Skip</span></i></a>
</td> </td>
</tr> </tr>
<tr class="pl-5"><td><label for="vae_model">Custom VAE:</label></td><td> <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="" /> <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> </td></tr>
<tr id="samplerSelection" class="pl-5"><td><label for="sampler_name">Sampler:</label></td><td> <tr id="samplerSelection" class="pl-5"><td><label for="sampler_name">Sampler:</label></td><td>
<select id="sampler_name" name="sampler_name"> <select id="sampler_name" name="sampler_name">
@ -170,7 +175,7 @@
<option value="unipc_tu_2" class="k_diffusion-only">UniPC TU 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> <option value="unipc_tq" class="k_diffusion-only">UniPC TQ</option>
</select> </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> </td></tr>
<tr class="pl-5"><td><label>Image Size: </label></td><td> <tr class="pl-5"><td><label>Image Size: </label></td><td>
<select id="width" name="width" value="512"> <select id="width" name="width" value="512">
@ -246,7 +251,7 @@
<option value="y">Vertical</option> <option value="y">Vertical</option>
<option value="xy">Both</option> <option value="xy">Both</option>
</select> </select>
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Seamless-Tiling" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about Seamless Tiling</span></i></a> <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> </td></tr>
<tr class="pl-5"><td><label for="output_format">Output Format:</label></td><td> <tr class="pl-5"><td><label for="output_format">Output Format:</label></td><td>
<select id="output_format" name="output_format"> <select id="output_format" name="output_format">
@ -294,28 +299,7 @@
</div> </div>
</div> </div>
<div id="editor-modifiers" class="panel-box"> <label><small><b>Note:</b> The Image Modifiers section has moved to the <code>+ Image Modifiers</code> button at the top, just below the Prompt textbox.</small></label>
<h4 class="collapsible">
Image Modifiers (art styles, tags etc)
<i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
<span class="simple-tooltip left">
Add Custom Modifiers
</span>
</i>
</h4>
<div id="editor-modifiers-entries" class="collapsible-content">
<div id="editor-modifiers-entries-toolbar">
<label for="preview-image">Image Style:</label>
<select id="preview-image" name="preview-image" value="portrait">
<option value="portrait" selected="">Face</option>
<option value="landscape">Landscape</option>
</select>
&nbsp;
<label for="modifier-card-size-slider">Thumbnail Size:</label>
<input id="modifier-card-size-slider" name="modifier-card-size-slider" value="0" type="range" min="-3" max="5">
</div>
</div>
</div>
</div> </div>
<div id="preview" class="col-free"> <div id="preview" class="col-free">
@ -398,23 +382,23 @@
<ul id="help-links"> <ul id="help-links">
<li><span class="help-section">Using the software</span> <li><span class="help-section">Using the software</span>
<ul> <ul>
<li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/How-To-Use" target="_blank"><i class="fa-solid fa-book fa-fw"></i> How to use</a> <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/How-To-Use" target="_blank"><i class="fa-solid fa-book fa-fw"></i> How to use</a>
<li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/UI-Overview" target="_blank"><i class="fa-solid fa-list fa-fw"></i> UI Overview</a> <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/UI-Overview" target="_blank"><i class="fa-solid fa-list fa-fw"></i> UI Overview</a>
<li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-Prompts" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> Writing prompts</a> <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/Writing-Prompts" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> Writing prompts</a>
<li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Inpainting" target="_blank"><i class="fa-solid fa-paintbrush fa-fw"></i> Inpainting</a> <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/Inpainting" target="_blank"><i class="fa-solid fa-paintbrush fa-fw"></i> Inpainting</a>
<li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Run-on-Multiple-GPUs" target="_blank"><i class="fa-solid fa-paintbrush fa-fw"></i> Run on Multiple GPUs</a> <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/Run-on-Multiple-GPUs" target="_blank"><i class="fa-solid fa-paintbrush fa-fw"></i> Run on Multiple GPUs</a>
</ul> </ul>
<li><span class="help-section">Installation</span> <li><span class="help-section">Installation</span>
<ul> <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> </ul>
<li><span class="help-section">Downloadable Content</span> <li><span class="help-section">Downloadable Content</span>
<ul> <ul>
<li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-images fa-fw"></i> Custom Models</a> <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-images fa-fw"></i> Custom Models</a>
<li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/UI-Plugins" target="_blank"><i class="fa-solid fa-puzzle-piece fa-fw"></i> UI Plugins</a> <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/UI-Plugins" target="_blank"><i class="fa-solid fa-puzzle-piece fa-fw"></i> UI Plugins</a>
<li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-hand-sparkles fa-fw"></i> VAE Variational Auto Encoder</a> <li> <a href="https://github.com/easydiffusion/easydiffusion/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-hand-sparkles fa-fw"></i> VAE Variational Auto Encoder</a>
</ul> </ul>
</ul> </ul>
</div> </div>
@ -424,7 +408,7 @@
<ul id="community-links"> <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://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://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> </ul>
</div> </div>
</div> </div>
@ -432,6 +416,53 @@
</div> </div>
</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>
<div class="popup" id="download-images-popup"> <div class="popup" id="download-images-popup">
<div> <div>
@ -468,15 +499,62 @@
</div> </div>
</div> </div>
<div id="modifier-settings-config" class="popup" tabindex="0"> <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> <div>
<i class="close-button fa-solid fa-xmark"></i> <label for="preview-image">Image Style:</label>
<h1>Modifier Settings</h1> <select id="preview-image" name="preview-image" value="portrait">
<p>Set your custom modifiers (one per line)</p> <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> <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line" spellcheck="false"></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>
</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> </div>
</dialog>
<div id="image-editor" class="popup image-editor-popup"> <div id="image-editor" class="popup image-editor-popup">
<div> <div>
@ -514,10 +592,10 @@
<div id="footer"> <div id="footer">
<div class="line-separator">&nbsp;</div> <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>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"> <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><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> <p>By using this software, you consent to the terms and conditions of the license.</p>
</div> </div>
</div> </div>
@ -526,13 +604,13 @@
<script src="media/js/utils.js"></script> <script src="media/js/utils.js"></script>
<script src="media/js/engine.js"></script> <script src="media/js/engine.js"></script>
<script src="media/js/parameters.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/image-modifiers.js"></script>
<script src="media/js/auto-save.js"></script> <script src="media/js/auto-save.js"></script>
<script src="media/js/searchable-models.js"></script> <script src="media/js/searchable-models.js"></script>
<script src="media/js/main.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/themes.js"></script>
<script src="media/js/dnd.js"></script> <script src="media/js/dnd.js"></script>
<script src="media/js/image-editor.js"></script> <script src="media/js/image-editor.js"></script>
@ -545,6 +623,7 @@ async function init() {
await loadUIPlugins() await loadUIPlugins()
await loadModifiers() await loadModifiers()
await getSystemInfo() await getSystemInfo()
// await initPlugins()
SD.init({ SD.init({
events: { events: {
@ -553,6 +632,7 @@ async function init() {
ping: tunnelUpdate ping: tunnelUpdate
} }
}) })
splashScreen()
// playSound() // playSound()
} }

293
ui/media/css/main.css
View File

@ -14,10 +14,10 @@ body {
color: var(--text-color); color: var(--text-color);
} }
a { a {
color: rgb(0, 102, 204); color: var(--link-color);
} }
a:visited { a:visited {
color: rgb(0, 102, 204); color: var(--link-color);
} }
label { label {
font-size: 10pt; font-size: 10pt;
@ -144,7 +144,7 @@ code {
opacity: 0; opacity: 0;
} }
.imgPreviewItemClearBtn:hover { .imgPreviewItemClearBtn:hover {
background: rgb(177, 27, 0); background: var(--button-hover-background);
} }
.imgContainer:hover > .imgItemInfo { .imgContainer:hover > .imgItemInfo {
opacity: 1; opacity: 1;
@ -184,7 +184,7 @@ code {
#editor label { #editor label {
font-weight: normal; font-weight: normal;
} }
#editor h4 { .dialog-header h4 {
margin: 0px; margin: 0px;
white-space: nowrap; white-space: nowrap;
} }
@ -192,7 +192,7 @@ code {
width: 100%; width: 100%;
} }
.settings-box label small { .settings-box label small {
color: rgb(153, 153, 153); color: var(--small-label-color);
margin-right: 10px; margin-right: 10px;
} }
#preview { #preview {
@ -211,10 +211,6 @@ code {
#makeImage { #makeImage {
border-radius: 6px; border-radius: 6px;
} }
#editor-modifiers h5 {
padding: 5pt 0;
margin: 0;
}
#makeImage { #makeImage {
flex: 0 0 70px; flex: 0 0 70px;
background: var(--accent-color); background: var(--accent-color);
@ -224,11 +220,11 @@ code {
height: 30pt; height: 30pt;
} }
#makeImage:hover { #makeImage:hover {
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); background: var(--button-hover-background);
} }
#stopImage { #stopImage {
flex: 0 0 70px; flex: 0 0 70px;
background: rgb(132, 8, 0); background: var(--secondary-button-background);
border: 2px solid rgb(122, 29, 0); border: 2px solid rgb(122, 29, 0);
color: rgb(255, 221, 255); color: rgb(255, 221, 255);
height: 30pt; height: 30pt;
@ -236,7 +232,7 @@ code {
flex-grow: 2; flex-grow: 2;
} }
#stopImage:hover { #stopImage:hover {
background: rgb(177, 27, 0); background: var(--secondary-button-hover-background);
} }
#undo { #undo {
float: right; float: right;
@ -284,14 +280,218 @@ button#resume {
.collapsible:not(.active) ~ .collapsible-content { .collapsible:not(.active) ~ .collapsible-content {
display: none !important; display: none !important;
} }
#image-modifier-dropdown {
margin-left: 1em;
position: relative;
cursor: pointer;
}
#image-modifier-dropdown[data-active="true"]::before {
content: "➖";
}
#image-modifier-dropdown[data-active="false"]::before {
content: "➕";
}
#editor-modifiers { #editor-modifiers {
overflow-y: auto; max-width: 75vw;
min-width: 50vw;
max-height: fit-content;
overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
display: none;
background: var(--background-color1);
border: solid 1px var(--background-color3);
z-index: 1999;
border-radius: 6px;
box-shadow: 0px 0px 30px black;
border: 2px solid rgb(255 255 255 / 10%);
margin-top: 150pt;
}
@media screen and (max-height: 500px) {
#editor-modifiers {
margin-top: 50pt;
}
}
#editor-modifiers.active {
display: flex;
flex-direction: column;
position: absolute;
left: 5vw;
}
.modifiers-maximized {
position: fixed !important;
top: 0 !important;
bottom: 0px !important;
left: 0px !important;
right: 0px !important;
margin: 0px !important;
max-width: unset !important;
max-height: unset !important;
border: 0px !important;
border-radius: 0px !important;
}
.modifiers-maximized #editor-modifiers-entries {
max-height: 100%;
flex: 1;
}
.dialog-header {
background-color: var(--background-color4);
padding: 0.5em;
border-bottom: 1px solid rgb(255 255 255 / 10%);
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#editor-modifiers-subheader {
background-color: var(--background-color4);
padding: 0.5em;
border-bottom: 1px solid rgb(255 255 255 / 10%);
display: flex;
align-items: center;
grid-gap: 0.8em;
flex-direction: row;
position: relative;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
transition: all 0.1s ease;
}
#editor-modifiers-subheader::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.02);
opacity: 1;
pointer-events: none;
}
#modifiers-header-left {
display: flex;
flex-direction: column;
grid-gap: 0.1em;
}
.dialog-header-left span {
font-size: 0.8em;
color: rgb(127 127 127);
font-weight: 200;
}
#modifiers-header-right {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
grid-gap: 0.8em;
margin-right: 0.3em;
}
#editor-modifiers-subheader i,
#modifiers-header-right i {
cursor: pointer;
margin: 0;
padding: 0;
}
#modifiers-header-right .section-button,
#editor-modifiers-subheader .section-button {
margin-top: 0.3em;
}
#modifiers-action-collapsibles-btn {
display: flex;
grid-gap: 0.5em;
cursor: pointer;
}
.modifiers-action-text {
font-size: 0.8em;
color: rgb(192 192 192);
}
#modifiers-expand-btn {
z-index: 2;
}
#modifiers-expand-btn .simple-tooltip {
background-color: var(--background-color3);
border-radius: 50px;
}
.modifier-category .collapsible {
position: relative;
}
.modifier-category .collapsible::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
opacity: 0;
transition: opacity 0.1s ease;
pointer-events: none;
}
.modifier-category:hover .collapsible::after {
opacity: 1;
pointer-events: none;
}
#editor-modifiers-entries {
overflow: auto scroll;
max-height: 50vh;
height: fit-content;
margin-bottom: 0.1em;
padding-left: 0px;
}
#editor-modifiers-entries .collapsible {
transition: opacity 0.1s ease;
padding-left: 0.5em;
}
#editor-modifiers-entries .modifier-category:nth-child(odd) .collapsible::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.02);
opacity: 1;
pointer-events: none;
} }
#editor-modifiers .editor-modifiers-leaf { #editor-modifiers .editor-modifiers-leaf {
padding-top: 10pt; padding-top: 10pt;
padding-bottom: 10pt; padding-bottom: 10pt;
} }
#editor-modifiers h5 {
padding: 5pt 0;
margin: 0;
position: sticky;
top: -2px;
z-index: 10;
background-color: var(--background-color3);
border-bottom: 1px solid rgb(255 255 255 / 4%);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
dialog {
background: var(--background-color2);
color: var(--text-color);
border-radius: 6px;
border: 2px solid rgb(255 255 255 / 10%);
padding: 0px;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
dialog > div {
padding: 0.5em;
}
img { img {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
} }
@ -310,6 +510,9 @@ div.img-preview img {
margin-top: 5pt; margin-top: 5pt;
display: none; display: none;
} }
#editor-inputs-tags-list {
max-height: 30em;
}
#server-status { #server-status {
position: absolute; position: absolute;
right: 16px; right: 16px;
@ -318,11 +521,11 @@ div.img-preview img {
} }
#server-status-color { #server-status-color {
font-size: 14pt; font-size: 14pt;
color: rgb(200, 139, 0); color: var(--status-orange);
display: inline; display: inline;
} }
#server-status-msg { #server-status-msg {
color: rgb(200, 139, 0); color: var(--status-orange);
padding-left: 2pt; padding-left: 2pt;
font-size: 10pt; font-size: 10pt;
} }
@ -529,14 +732,14 @@ div.img-preview img {
padding: 3pt 6pt; padding: 3pt 6pt;
} }
.secondaryButton { .secondaryButton {
background: rgb(132, 8, 0); background: var(--secondary-button-background);
border: 1px solid rgb(122, 29, 0); border: 1px solid rgb(122, 29, 0);
color: rgb(255, 221, 255); color: rgb(255, 221, 255);
padding: 3pt 6pt; padding: 3pt 6pt;
border-radius: 5px; border-radius: 5px;
} }
.secondaryButton:hover { .secondaryButton:hover {
background: rgb(177, 27, 0); background: var(--secondary-button-hover-background);
} }
.tertiaryButton { .tertiaryButton {
background: var(--tertiary-background-color); background: var(--tertiary-background-color);
@ -546,12 +749,12 @@ div.img-preview img {
border-radius: 5px; border-radius: 5px;
} }
.tertiaryButton:hover { .tertiaryButton:hover {
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); background: var(--button-hover-background);
color: var(--accent-text-color); color: var(--accent-text-color);
} }
.tertiaryButton.pressed { .tertiaryButton.pressed {
border-style: inset; border-style: inset;
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); background: var(--button-hover-background);
color: var(--accent-text-color); color: var(--accent-text-color);
} }
.useSettings { .useSettings {
@ -672,6 +875,9 @@ div.img-preview img {
#editor-settings { #editor-settings {
min-width: 350px; min-width: 350px;
} }
.panel-box > h4 {
margin: 0;
}
#editor-settings-entries { #editor-settings-entries {
display: flex; display: flex;
@ -771,7 +977,7 @@ input::file-selector-button,
button:hover, button:hover,
.button:hover { .button:hover {
transition-duration: 0.1s; transition-duration: 0.1s;
background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); background: var(--button-hover-background);
} }
input::file-selector-button { input::file-selector-button {
@ -779,7 +985,6 @@ input::file-selector-button {
height: 19px; height: 19px;
} }
.input-toggle { .input-toggle {
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -1083,12 +1288,13 @@ input::file-selector-button {
/* POPUPS */ /* POPUPS */
.popup:not(.active) { .popup:not(.active) {
visibility: hidden; visibility: hidden;
overflow-x: hidden; /* fix overflow from body */
opacity: 0; opacity: 0;
} }
.popup { .popup {
position: absolute; position: absolute;
background: rgba(32, 33, 36, 50%); background: var(--backdrop-color);
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
@ -1292,6 +1498,49 @@ body.wait-pause {
100% { border: solid 12px var(--accent-color); } 100% { border: solid 12px var(--accent-color); }
} }
#splash-screen div {
text-align: left;
max-width: 70vw;
}
#splash-screen .splash-img {
float: right;
box-shadow: none;
margin-left: 6px;
}
#splash-screen tt {
font-family: monospace;
background: var(--input-background-color);
padding: 1px 4px 1px 4px;
border-radius: 5px;
}
#splash-screen li {
margin-bottom: 6px;
}
#splash-screen a
{
color: #ccf;
text-decoration: none;
font-weight: bold;
}
#splash-screen a[href^="http"]::after,
#splash-screen a[href^="https://"]::after
{
content: "";
width: 11px;
height: 11px;
margin-left: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='lightblue' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c { .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c {
color: var(--button-text-color); color: var(--button-text-color);
} }

149
ui/media/css/modifier-thumbnails.css
View File

@ -1,14 +1,16 @@
.modifier-card { .modifier-card {
position: relative;
box-sizing: content-box; /* fixes border misalignment */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.1s; transition: 0.1s;
border-radius: 7px; border-radius: 7px;
margin: 3pt 3pt; margin: 3pt 3pt;
float: left; float: left;
width: 8em; width: 6em;
height: 11.5em; height: 9.5em;
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 8em 3.5em; grid-template-rows: 6em 3.5em;
gap: 0px 0px; gap: 0px 0px;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-areas: grid-template-areas:
@ -16,82 +18,71 @@
"modifier-card-container"; "modifier-card-container";
border: 2px solid rgba(255, 255, 255, .05); border: 2px solid rgba(255, 255, 255, .05);
cursor: pointer; cursor: pointer;
} z-index: 2;
.modifier-card-size_5 {
width: 18em;
grid-template-rows: 18em 3.5em;
height: 21.5em;
}
.modifier-card-size_5 .modifier-card-image-overlay {
font-size: 8em;
}
.modifier-card-size_4 {
width: 14em;
grid-template-rows: 14em 3.5em;
height: 17.5em;
}
.modifier-card-size_4 .modifier-card-image-overlay {
font-size: 7em;
} }
.modifier-card-size_3 { .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; width: 10em;
grid-template-rows: 10em 3.5em; grid-template-rows: 10em 3.5em;
height: 13.5em; height: 13.5em;
} }
.modifier-card-size_2 .modifier-card-image-overlay { .modifier-card-size_3 .modifier-card-image-overlay {
font-size: 6em; font-size: 6em;
} }
.modifier-card-size_1 { .modifier-card-size_3 .modifier-card-label {
font-size: 1.2em;
}
.modifier-card-size_2 {
width: 9em; width: 9em;
grid-template-rows: 9em 3.5em; grid-template-rows: 9em 3.5em;
height: 12.5em; height: 12.5em;
} }
.modifier-card-size_1 .modifier-card-image-overlay { .modifier-card-size_2 .modifier-card-image-overlay {
font-size: 5em; font-size: 5em;
} }
.modifier-card-size_-1 { .modifier-card-size_2 .modifier-card-label {
font-size: 1.1em;
}
.modifier-card-size_1 {
width: 7em; width: 7em;
grid-template-rows: 7em 3.5em; grid-template-rows: 7em 3.5em;
height: 10.5em; height: 10.5em;
} }
.modifier-card-size_-1 .modifier-card-image-overlay { .modifier-card-size_1 .modifier-card-image-overlay {
font-size: 4em; font-size: 4em;
} }
.modifier-card-size_-2 { .modifier-card-size_-1 {
width: 6em;
grid-template-rows: 6em 3.5em;
height: 9.5em;
}
.modifier-card-size_-2 .modifier-card-image-overlay {
font-size: 3em;
}
.modifier-card-size_-3 {
width: 5em; width: 5em;
grid-template-rows: 5em 3.5em; grid-template-rows: 5em 3.5em;
height: 8.5em; height: 8.5em;
} }
.modifier-card-size_-3 .modifier-card-image-overlay { .modifier-card-size_-1 .modifier-card-image-overlay {
font-size: 3em; font-size: 3em;
} }
.modifier-card-size_-3 .modifier-card-label { .modifier-card-size_-1 .modifier-card-label {
font-size: 0.8em; font-size: 0.9em;
}
.modifier-card-size_-2 {
width: 4em;
grid-template-rows: 3.5em 3em;
height: 6.5em;
}
.modifier-card-size_-2 .modifier-card-image-overlay {
font-size: 2em;
}
.modifier-card-size_-2 .modifier-card-label {
font-size: 0.7em;
} }
.modifier-card-tiny { .modifier-card-tiny {
width: 6em; width: 5em;
height: 9.5em; grid-template-rows: 5em 3.5em;
grid-template-rows: 6em 3.5em; height: 8.5em;
} }
.modifier-card-tiny .modifier-card-image-overlay { .modifier-card-tiny .modifier-card-image-overlay {
font-size: 4em; font-size: 4em;
} }
.modifier-card-tiny .modifier-card-label {
font-size: 0.9em;
}
.modifier-card:hover { .modifier-card:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.25);
@ -115,6 +106,7 @@
} }
.modifier-card-image-container * { .modifier-card-image-container * {
position: absolute; position: absolute;
text-align: center;
} }
.modifier-card-container { .modifier-card-container {
text-align: center; text-align: center;
@ -131,6 +123,7 @@
.modifier-card-label { .modifier-card-label {
padding: 4px; padding: 4px;
word-break: break-word; word-break: break-word;
text-transform: capitalize;
} }
.modifier-card-image-overlay { .modifier-card-image-overlay {
width: inherit; width: inherit;
@ -140,7 +133,7 @@
position: absolute; position: absolute;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
opacity: 0; opacity: 0;
font-size: 5em; font-size: 4em;
font-weight: 900; font-weight: 900;
color: rgb(255 255 255 / 50%); color: rgb(255 255 255 / 50%);
display: flex; display: flex;
@ -153,9 +146,8 @@
position: absolute; position: absolute;
z-index: 3; z-index: 3;
} }
.modifier-card-overlay:hover ~ .modifier-card-container .modifier-card-label.tooltip .tooltip-text { .modifier-card-active .modifier-card-overlay {
visibility: visible; background-color: rgb(169 78 241 / 40%);
opacity: 1;
} }
.modifier-card:hover > .modifier-card-image-container .modifier-card-image-overlay { .modifier-card:hover > .modifier-card-image-container .modifier-card-image-overlay {
opacity: 1; opacity: 1;
@ -175,53 +167,26 @@
border: 2px solid rgb(179 82 255 / 94%); border: 2px solid rgb(179 82 255 / 94%);
box-shadow: 0 0px 10px 0 rgb(170 0 229 / 58%); 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 { #modifier-card-size-slider {
width: 6em; width: 6em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
vertical-align: middle; vertical-align: middle;
} }
#modifier-settings-btn {
float: right;
}
#modifier-settings-config textarea { #modifier-settings-config textarea {
margin-left: 5%;
margin-top: 2ex;
width: 90%; width: 90%;
height: 150px; 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;
}

288
ui/media/css/plugins.css Normal file
View File

@ -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;
}

6
ui/media/css/themes.css
View File

@ -13,6 +13,8 @@
--accent-lightness-hover: 40%; --accent-lightness-hover: 40%;
--text-color: #eee; --text-color: #eee;
--link-color: rgb(0, 102, 204);
--small-label-color: rgb(153, 153, 153);
--input-text-color: #eee; --input-text-color: #eee;
--input-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.7 * var(--value-step)))); --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-text-color: var(--input-text-color);
--button-color: var(--input-background-color); --button-color: var(--input-background-color);
--button-border: none; --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 */ /* other */
--input-border-radius: 4px; --input-border-radius: 4px;
@ -40,6 +45,7 @@
--status-orange: rgb(200, 139, 0); --status-orange: rgb(200, 139, 0);
--status-green: green; --status-green: green;
--status-red: red; --status-red: red;
--backdrop-color: rgba(32, 33, 36, 50%);
} }
.theme-light { .theme-light {

330
ui/media/js/image-modifiers.js
View File

@ -1,48 +1,56 @@
let activeTags = [] let activeTags = []
let modifiers = [] let modifiers = []
let customModifiersGroupElement = undefined let customModifiersGroupElement = undefined
let customModifiersInitialContent let customModifiersInitialContent = ""
let modifierPanelFreezed = false
let modifiersMainContainer = document.querySelector("#editor-modifiers")
let modifierDropdown = document.querySelector("#image-modifier-dropdown")
let editorModifiersContainer = document.querySelector("#editor-modifiers")
let editorModifierEntries = document.querySelector("#editor-modifiers-entries") let editorModifierEntries = document.querySelector("#editor-modifiers-entries")
let editorModifierTagsList = document.querySelector("#editor-inputs-tags-list") let editorModifierTagsList = document.querySelector("#editor-inputs-tags-list")
let editorTagsContainer = document.querySelector("#editor-inputs-tags-container") let editorTagsContainer = document.querySelector("#editor-inputs-tags-container")
let modifierCardSizeSlider = document.querySelector("#modifier-card-size-slider") let modifierCardSizeSlider = document.querySelector("#modifier-card-size-slider")
let previewImageField = document.querySelector("#preview-image") let previewImageField = document.querySelector("#preview-image")
let modifierSettingsBtn = document.querySelector("#modifier-settings-btn") let modifierSettingsBtn = document.querySelector("#modifier-settings-btn")
let modifierSettingsOverlay = document.querySelector("#modifier-settings-config") let modifiersContainerSizeBtn = document.querySelector("#modifiers-container-size-btn")
let modifiersCloseBtn = document.querySelector("#modifiers-close-button")
let modifiersCollapsiblesBtn = document.querySelector("#modifiers-action-collapsibles-btn")
let modifierSettingsDialog = document.querySelector("#modifier-settings-config")
let customModifiersTextBox = document.querySelector("#custom-modifiers-input") let customModifiersTextBox = document.querySelector("#custom-modifiers-input")
let customModifierEntriesToolbar = document.querySelector("#editor-modifiers-entries-toolbar") let customModifierEntriesToolbar = document.querySelector("#editor-modifiers-entries-toolbar")
let modifierSettingsCloseBtn = document.querySelector("#modifier-settings-close-button")
const modifierThumbnailPath = "media/modifier-thumbnails" const modifierThumbnailPath = "media/modifier-thumbnails"
const activeCardClass = "modifier-card-active" const activeCardClass = "modifier-card-active"
const CUSTOM_MODIFIERS_KEY = "customModifiers" const CUSTOM_MODIFIERS_KEY = "customModifiers"
function createModifierCard(name, previews, removeBy) { function createModifierCard(name, previews, removeBy) {
const modifierCard = document.createElement("div") let cardPreviewImageType = previewImageField.value
let style = previewImageField.value
let styleIndex = style == "portrait" ? 0 : 1
const modifierCard = document.createElement("div")
modifierCard.className = "modifier-card" modifierCard.className = "modifier-card"
modifierCard.innerHTML = ` modifierCard.innerHTML = `
<div class="modifier-card-overlay"></div> <div class="modifier-card-overlay"></div>
<div class="modifier-card-image-container"> <div class="modifier-card-image-container">
<div class="modifier-card-image-overlay">+</div> <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"> <img onerror="this.remove()" alt="Modifier Image" class="modifier-card-image">
</div> </div>
<div class="modifier-card-container"> <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>` </div>`
const image = modifierCard.querySelector(".modifier-card-image") const image = modifierCard.querySelector(".modifier-card-image")
const errorText = modifierCard.querySelector(".modifier-card-error-label") const longLabel = modifierCard.querySelector(".modifier-card-label span.long-label")
const label = modifierCard.querySelector(".modifier-card-label") const regularLabel = modifierCard.querySelector(".modifier-card-label p.regular-label")
errorText.innerText = "No Image"
if (typeof previews == "object") { if (typeof previews == "object") {
image.src = previews[styleIndex] // portrait image.src = previews[cardPreviewImageType == "portrait" ? 0 : 1] // 0 index is portrait, 1 landscape
image.setAttribute("preview-type", style) image.setAttribute("preview-type", cardPreviewImageType)
} else { } else {
image.remove() image.remove()
} }
@ -50,24 +58,32 @@ function createModifierCard(name, previews, removeBy) {
const maxLabelLength = 30 const maxLabelLength = 30
const cardLabel = removeBy ? name.replace("by ", "") : name const cardLabel = removeBy ? name.replace("by ", "") : name
if (cardLabel.length <= maxLabelLength) { function getFormattedLabel(length) {
label.querySelector("p").innerText = cardLabel if (cardLabel?.length <= length) {
return cardLabel
} else { } else {
const tooltipText = document.createElement("span") return cardLabel.substring(0, length) + "..."
tooltipText.className = "tooltip-text" }
tooltipText.innerText = name }
label.classList.add("tooltip") modifierCard.dataset.fullName = name // preserve the full name
label.appendChild(tooltipText) regularLabel.dataset.fullName = name // preserve the full name, legacy support for older plugins
label.querySelector("p").innerText = cardLabel.substring(0, maxLabelLength) + "..." 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}"`
}
} }
label.querySelector("p").dataset.fullName = name // preserve the full name
return modifierCard return modifierCard
} }
function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) { function createModifierGroup(modifierGroup, isInitiallyOpen, removeBy) {
const title = modifierGroup.category const title = modifierGroup.category
const modifiers = modifierGroup.modifiers const modifiers = modifierGroup.modifiers
@ -78,8 +94,8 @@ function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
const modifiersEl = document.createElement("div") const modifiersEl = document.createElement("div")
modifiersEl.classList.add("collapsible-content", "editor-modifiers-leaf") modifiersEl.classList.add("collapsible-content", "editor-modifiers-leaf")
if (initiallyExpanded === true) { if (isInitiallyOpen === true) {
titleEl.className += " active" titleEl.classList.add("active")
} }
modifiers.forEach((modObj) => { modifiers.forEach((modObj) => {
@ -126,7 +142,7 @@ function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
e.appendChild(titleEl) e.appendChild(titleEl)
e.appendChild(modifiersEl) e.appendChild(modifiersEl)
editorModifierEntries.insertBefore(e, customModifierEntriesToolbar.nextSibling) editorModifierEntries.prepend(e)
return e return e
} }
@ -149,7 +165,10 @@ async function loadModifiers() {
res.reverse() res.reverse()
res.forEach((modifierGroup, idx) => { 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) createCollapsibles(editorModifierEntries)
@ -169,7 +188,7 @@ function refreshModifiersState(newTags, inactiveTags) {
.querySelector("#editor-modifiers") .querySelector("#editor-modifiers")
.querySelectorAll(".modifier-card") .querySelectorAll(".modifier-card")
.forEach((modifierCard) => { .forEach((modifierCard) => {
const modifierName = modifierCard.querySelector(".modifier-card-label p").dataset.fullName // pick the full modifier name const modifierName = modifierCard.dataset.fullName // pick the full modifier name
if (activeTags.map((x) => x.name).includes(modifierName)) { if (activeTags.map((x) => x.name).includes(modifierName)) {
modifierCard.classList.remove(activeCardClass) modifierCard.classList.remove(activeCardClass)
modifierCard.querySelector(".modifier-card-image-overlay").innerText = "+" modifierCard.querySelector(".modifier-card-image-overlay").innerText = "+"
@ -184,8 +203,9 @@ function refreshModifiersState(newTags, inactiveTags) {
.querySelector("#editor-modifiers") .querySelector("#editor-modifiers")
.querySelectorAll(".modifier-card") .querySelectorAll(".modifier-card")
.forEach((modifierCard) => { .forEach((modifierCard) => {
const modifierName = modifierCard.querySelector(".modifier-card-label p").dataset.fullName const modifierName = modifierCard.dataset.fullName
const shortModifierName = modifierCard.querySelector(".modifier-card-label p").innerText const shortModifierName = modifierCard.querySelector(".modifier-card-label p").innerText
if (trimModifiers(tag) == trimModifiers(modifierName)) { if (trimModifiers(tag) == trimModifiers(modifierName)) {
// add modifier to active array // add modifier to active array
if (!activeTags.map((x) => x.name).includes(tag)) { if (!activeTags.map((x) => x.name).includes(tag)) {
@ -242,10 +262,10 @@ function refreshInactiveTags(inactiveTags) {
} }
// update cards // update cards
let overlays = document.querySelector("#editor-inputs-tags-list").querySelectorAll(".modifier-card-overlay") let overlays = editorModifierTagsList.querySelectorAll(".modifier-card-overlay")
overlays.forEach((i) => { overlays.forEach((i) => {
let modifierName = i.parentElement.getElementsByClassName("modifier-card-label")[0].getElementsByTagName("p")[0] let modifierName = i.parentElement.dataset.fullName
.dataset.fullName
if (inactiveTags?.find((element) => trimModifiers(element) === modifierName) !== undefined) { if (inactiveTags?.find((element) => trimModifiers(element) === modifierName) !== undefined) {
i.parentElement.classList.add("modifier-toggle-inactive") i.parentElement.classList.add("modifier-toggle-inactive")
} }
@ -262,6 +282,12 @@ function refreshTagsList(inactiveTags) {
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) => { activeTags.forEach((tag, index) => {
tag.element.querySelector(".modifier-card-image-overlay").innerText = "-" tag.element.querySelector(".modifier-card-image-overlay").innerText = "-"
tag.element.classList.add("modifier-card-tiny") tag.element.classList.add("modifier-card-tiny")
@ -285,21 +311,23 @@ function refreshTagsList(inactiveTags) {
let brk = document.createElement("br") let brk = document.createElement("br")
brk.style.clear = "both" brk.style.clear = "both"
editorModifierTagsList.appendChild(brk) editorModifierTagsList.appendChild(brk)
refreshInactiveTags(inactiveTags) refreshInactiveTags(inactiveTags)
document.dispatchEvent(new Event("refreshImageModifiers")) // notify plugins that the image tags have been refreshed document.dispatchEvent(new Event("refreshImageModifiers")) // notify plugins that the image tags have been refreshed
} }
function toggleCardState(modifierName, makeActive) { function toggleCardState(modifierName, makeActive) {
document const cards = [...document.querySelectorAll("#editor-modifiers .modifier-card")]
.querySelector("#editor-modifiers") .filter(cardElem => trimModifiers(cardElem.dataset.fullName) == trimModifiers(modifierName))
.querySelectorAll(".modifier-card")
.forEach((card) => { const cardExists = typeof cards == "object" && cards?.length > 0
const name = card.querySelector(".modifier-card-label").innerText
if ( if (cardExists) {
trimModifiers(modifierName) == trimModifiers(name) || const card = cards[0]
trimModifiers(modifierName) == "by " + trimModifiers(name)
) {
if (makeActive) { if (makeActive) {
card.classList.add(activeCardClass) card.classList.add(activeCardClass)
card.querySelector(".modifier-card-image-overlay").innerText = "-" card.querySelector(".modifier-card-image-overlay").innerText = "-"
@ -308,25 +336,17 @@ function toggleCardState(modifierName, makeActive) {
card.querySelector(".modifier-card-image-overlay").innerText = "+" card.querySelector(".modifier-card-image-overlay").innerText = "+"
} }
} }
})
} }
function changePreviewImages(val) { function changePreviewImages(val) {
const previewImages = document.querySelectorAll(".modifier-card-image-container img") const previewImages = document.querySelectorAll(".modifier-card-image-container img")
let previewArr = [] const previewArr = modifiers.flatMap((x) => x.modifiers.map((m) => m.previews))
.map((x) => x.reduce((obj, preview) => {
modifiers.map((x) => x.modifiers).forEach((x) => previewArr.push(...x.map((m) => m.previews)))
previewArr = previewArr.map((x) => {
let obj = {}
x.forEach((preview) => {
obj[preview.name] = preview.path obj[preview.name] = preview.path
})
return obj return obj
}) }, {}))
previewImages.forEach((previewImage) => { previewImages.forEach((previewImage) => {
const currentPreviewType = previewImage.getAttribute("preview-type") const currentPreviewType = previewImage.getAttribute("preview-type")
@ -369,34 +389,6 @@ function resizeModifierCards(val) {
}) })
} }
modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value)
previewImageField.onchange = () => changePreviewImages(previewImageField.value)
modifierSettingsBtn.addEventListener("click", function(e) {
modifierSettingsOverlay.classList.add("active")
customModifiersTextBox.setSelectionRange(0, 0)
customModifiersTextBox.focus()
customModifiersInitialContent = customModifiersTextBox.value // preserve the initial content
e.stopPropagation()
})
modifierSettingsOverlay.addEventListener("keydown", function(e) {
switch (e.key) {
case "Escape": // Escape to cancel
customModifiersTextBox.value = customModifiersInitialContent // undo the changes
modifierSettingsOverlay.classList.remove("active")
e.stopPropagation()
break
case "Enter":
if (e.ctrlKey) {
// Ctrl+Enter to confirm
modifierSettingsOverlay.classList.remove("active")
e.stopPropagation()
break
}
}
})
function saveCustomModifiers() { function saveCustomModifiers() {
localStorage.setItem(CUSTOM_MODIFIERS_KEY, customModifiersTextBox.value.trim()) localStorage.setItem(CUSTOM_MODIFIERS_KEY, customModifiersTextBox.value.trim())
@ -407,4 +399,178 @@ function loadCustomModifiers() {
PLUGINS["MODIFIERS_LOAD"].forEach((fn) => fn.loader.call()) PLUGINS["MODIFIERS_LOAD"].forEach((fn) => fn.loader.call())
} }
function showModifierContainer() {
document.addEventListener("mousedown", checkIfClickedOutsideDropdownElem)
modifierDropdown.dataset.active = true
editorModifiersContainer.classList.add("active")
}
function hideModifierContainer() {
document.removeEventListener("click", checkIfClickedOutsideDropdownElem)
modifierDropdown.dataset.active = false
editorModifiersContainer.classList.remove("active")
}
function checkIfClickedOutsideDropdownElem(e) {
const clickedElement = e.target
const clickedInsideSpecificElems = [modifierDropdown, editorModifiersContainer, modifierSettingsDialog].some((div) =>
div && (div.contains(clickedElement) || div === clickedElement))
if (!clickedInsideSpecificElems && !modifierPanelFreezed) {
hideModifierContainer()
}
}
function collapseAllModifierCategory() {
const collapsibleElems = editorModifierEntries.querySelectorAll(".modifier-category .collapsible"); // needs to have ";"
[...collapsibleElems].forEach((elem) => {
const isActive = elem.classList.contains("active")
if(isActive) {
elem?.click()
}
})
}
function expandAllModifierCategory() {
const collapsibleElems = editorModifierEntries.querySelectorAll(".modifier-category .collapsible"); // needs to have ";"
[...collapsibleElems].forEach((elem) => {
const isActive = elem.classList.contains("active")
if (!isActive) {
elem?.click()
}
})
}
customModifiersTextBox.addEventListener("change", saveCustomModifiers) 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()
})
modifierSettingsDialog.addEventListener('mousedown', function (event) {
var rect = modifierSettingsDialog.getBoundingClientRect();
var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
&& rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
if (!isInDialog) {
modifierSettingsDialog.close();
}
});

94
ui/media/js/main.js
View File

@ -129,6 +129,7 @@ let initImageClearBtn = document.querySelector(".init_image_clear")
let promptStrengthContainer = document.querySelector("#prompt_strength_container") let promptStrengthContainer = document.querySelector("#prompt_strength_container")
let initialText = document.querySelector("#initial-text") let initialText = document.querySelector("#initial-text")
let versionText = document.querySelector("#version")
let previewTools = document.querySelector("#preview-tools") let previewTools = document.querySelector("#preview-tools")
let clearAllPreviewsBtn = document.querySelector("#clear-all-previews") let clearAllPreviewsBtn = document.querySelector("#clear-all-previews")
let showDownloadPopupBtn = document.querySelector("#show-download-popup") let showDownloadPopupBtn = document.querySelector("#show-download-popup")
@ -138,6 +139,7 @@ let saveAllZipToggle = document.querySelector("#zip_toggle")
let saveAllTreeToggle = document.querySelector("#tree_toggle") let saveAllTreeToggle = document.querySelector("#tree_toggle")
let saveAllJSONToggle = document.querySelector("#json_toggle") let saveAllJSONToggle = document.querySelector("#json_toggle")
let saveAllFoldersOption = document.querySelector("#download-add-folders") let saveAllFoldersOption = document.querySelector("#download-add-folders")
let splashScreenPopup = document.querySelector("#splash-screen")
let maskSetting = document.querySelector("#enable_mask") let maskSetting = document.querySelector("#enable_mask")
@ -1327,6 +1329,53 @@ function getPrompts(prompts) {
return promptsToMake return promptsToMake
} }
function getPromptsNumber(prompts) {
if (typeof prompts === "undefined") {
prompts = promptField.value
}
if (prompts.trim() === "" && activeTags.length === 0) {
return [""]
}
let promptsToMake = []
let numberOfPrompts = 0
if (prompts.trim() !== "") { // this needs to stay sort of the same, as the prompts have to be passed through to the other functions
prompts = prompts.split("\n")
prompts = prompts.map((prompt) => prompt.trim())
prompts = prompts.filter((prompt) => prompt !== "")
// estimate number of prompts
let estimatedNumberOfPrompts = 0
prompts.forEach((prompt) => {
estimatedNumberOfPrompts += (prompt.match(/{[^}]*}/g) || []).map((e) => (e.match(/,/g) || []).length + 1).reduce( (p,a) => p*a, 1) * (2**(prompt.match(/\|/g) || []).length)
})
if (estimatedNumberOfPrompts >= 10000) {
return 10000
}
promptsToMake = applySetOperator(prompts) // switched those around as Set grows in a linear fashion and permute in 2^n, and one has to be computed for the other to be calculated
numberOfPrompts = applyPermuteOperatorNumber(promptsToMake)
}
const newTags = activeTags.filter((tag) => tag.inactive === undefined || tag.inactive === false)
if (newTags.length > 0) {
const promptTags = newTags.map((x) => x.name).join(", ")
if (numberOfPrompts > 0) {
// promptsToMake = promptsToMake.map((prompt) => `${prompt}, ${promptTags}`)
// nothing changes, as all prompts just get modified
} else {
// promptsToMake.push(promptTags)
numberOfPrompts = 1
}
}
// Why is this applied twice? It does not do anything here, as everything should have already been done earlier
// promptsToMake = applyPermuteOperator(promptsToMake)
// promptsToMake = applySetOperator(promptsToMake)
return numberOfPrompts
}
function applySetOperator(prompts) { function applySetOperator(prompts) {
let promptsToMake = [] let promptsToMake = []
let braceExpander = new BraceExpander() let braceExpander = new BraceExpander()
@ -1338,7 +1387,7 @@ function applySetOperator(prompts) {
return promptsToMake return promptsToMake
} }
function applyPermuteOperator(prompts) { function applyPermuteOperator(prompts) { // prompts is array of input, trimmed, filtered and split by \n
let promptsToMake = [] let promptsToMake = []
prompts.forEach((prompt) => { prompts.forEach((prompt) => {
let promptMatrix = prompt.split("|") let promptMatrix = prompt.split("|")
@ -1357,6 +1406,26 @@ function applyPermuteOperator(prompts) {
return promptsToMake return promptsToMake
} }
// returns how many prompts would have to be made with the given prompts
function applyPermuteOperatorNumber(prompts) { // prompts is array of input, trimmed, filtered and split by \n
let numberOfPrompts = 0
prompts.forEach((prompt) => {
let promptCounter = 1
let promptMatrix = prompt.split("|")
promptMatrix.shift()
promptMatrix = promptMatrix.map((p) => p.trim())
promptMatrix = promptMatrix.filter((p) => p !== "")
if (promptMatrix.length > 0) {
promptCounter *= permuteNumber(promptMatrix)
}
numberOfPrompts += promptCounter
})
return numberOfPrompts
}
function permutePrompts(promptBase, promptMatrix) { function permutePrompts(promptBase, promptMatrix) {
let prompts = [] let prompts = []
let permutations = permute(promptMatrix) let permutations = permute(promptMatrix)
@ -1546,14 +1615,20 @@ heightField.addEventListener("change", onDimensionChange)
function renameMakeImageButton() { function renameMakeImageButton() {
let totalImages = let totalImages =
Math.max(parseInt(numOutputsTotalField.value), parseInt(numOutputsParallelField.value)) * getPrompts().length Math.max(parseInt(numOutputsTotalField.value), parseInt(numOutputsParallelField.value)) * getPromptsNumber()
let imageLabel = "Image" let imageLabel = "Image"
if (totalImages > 1) { if (totalImages > 1) {
imageLabel = totalImages + " Images" imageLabel = totalImages + " Images"
} }
if (SD.activeTasks.size == 0) { if (SD.activeTasks.size == 0) {
if (totalImages >= 10000)
makeImageBtn.innerText = "Make 10000+ images"
else
makeImageBtn.innerText = "Make " + imageLabel makeImageBtn.innerText = "Make " + imageLabel
} else { } else {
if (totalImages >= 10000)
makeImageBtn.innerText = "Enqueue 10000+ images"
else
makeImageBtn.innerText = "Enqueue Next " + imageLabel makeImageBtn.innerText = "Enqueue Next " + imageLabel
} }
} }
@ -1990,6 +2065,21 @@ function resumeClient() {
}) })
} }
function splashScreen(force = false) {
const splashVersion = splashScreenPopup.dataset['version']
const lastSplash = localStorage.getItem("lastSplashScreenVersion") || 0
if (testDiffusers.checked) {
if (force || lastSplash < splashVersion) {
splashScreenPopup.classList.add("active")
localStorage.setItem("lastSplashScreenVersion", splashVersion)
}
}
}
document.getElementById("logo_img").addEventListener("click", (e) => { splashScreen(true) })
promptField.addEventListener("input", debounce(renameMakeImageButton, 1000)) promptField.addEventListener("input", debounce(renameMakeImageButton, 1000))
pauseBtn.addEventListener("click", function() { pauseBtn.addEventListener("click", function() {

2
ui/media/js/parameters.js
View File

@ -664,7 +664,7 @@ saveSettingsBtn.addEventListener("click", function() {
update_branch: updateBranch, update_branch: updateBranch,
} }
Array.from(parametersTable.children).forEach((parameterRow) => { document.querySelectorAll('#system-settings [data-setting-id]').forEach((parameterRow) => {
if (parameterRow.dataset.saveInAppConfig === "true") { if (parameterRow.dataset.saveInAppConfig === "true") {
const parameterElement = const parameterElement =
document.getElementById(parameterRow.dataset.settingId) || document.getElementById(parameterRow.dataset.settingId) ||

950
ui/media/js/plugins.js
View File

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

132
ui/media/js/utils.js
View File

@ -153,6 +153,10 @@ function permute(arr) {
return permutations return permutations
} }
function permuteNumber(arr) {
return Math.pow(2, arr.length)
}
// https://stackoverflow.com/a/8212878 // https://stackoverflow.com/a/8212878
function millisecondsToStr(milliseconds) { function millisecondsToStr(milliseconds) {
function numberEnding(number) { function numberEnding(number) {
@ -841,6 +845,7 @@ function createTab(request) {
}) })
} }
/* TOAST NOTIFICATIONS */ /* TOAST NOTIFICATIONS */
function showToast(message, duration = 5000, error = false) { function showToast(message, duration = 5000, error = false) {
const toast = document.createElement("div") const toast = document.createElement("div")
@ -923,3 +928,130 @@ function confirm(msg, title, fn) {
}, },
}) })
} }
/* STORAGE MANAGEMENT */
// Request persistent storage
async function requestPersistentStorage() {
if (navigator.storage && navigator.storage.persist) {
const isPersisted = await navigator.storage.persist();
console.log(`Persisted storage granted: ${isPersisted}`);
}
}
requestPersistentStorage()
// Open a database
async function openDB() {
return new Promise((resolve, reject) => {
let request = indexedDB.open("EasyDiffusionSettingsDatabase", 1);
request.addEventListener("upgradeneeded", function () {
let db = request.result;
db.createObjectStore("EasyDiffusionSettings", { keyPath: "id" });
});
request.addEventListener("success", function () {
resolve(request.result);
});
request.addEventListener("error", function () {
reject(request.error);
});
});
}
// Function to write data to the object store
async function setStorageData(key, value) {
return openDB().then(db => {
let tx = db.transaction("EasyDiffusionSettings", "readwrite");
let store = tx.objectStore("EasyDiffusionSettings");
let data = { id: key, value: value };
return new Promise((resolve, reject) => {
let request = store.put(data);
request.addEventListener("success", function () {
resolve(request.result);
});
request.addEventListener("error", function () {
reject(request.error);
});
});
});
}
// Function to retrieve data from the object store
async function getStorageData(key) {
return openDB().then(db => {
let tx = db.transaction("EasyDiffusionSettings", "readonly");
let store = tx.objectStore("EasyDiffusionSettings");
return new Promise((resolve, reject) => {
let request = store.get(key);
request.addEventListener("success", function () {
if (request.result) {
resolve(request.result.value);
} else {
// entry not found
resolve();
}
});
request.addEventListener("error", function () {
reject(request.error);
});
});
});
}
// indexedDB debug functions
async function getAllKeys() {
return openDB().then(db => {
let tx = db.transaction("EasyDiffusionSettings", "readonly");
let store = tx.objectStore("EasyDiffusionSettings");
let keys = [];
return new Promise((resolve, reject) => {
store.openCursor().onsuccess = function (event) {
let cursor = event.target.result;
if (cursor) {
keys.push(cursor.key);
cursor.continue();
} else {
resolve(keys);
}
};
});
});
}
async function logAllStorageKeys() {
try {
let keys = await getAllKeys();
console.log("All keys:", keys);
for (const k of keys) {
console.log(k, await getStorageData(k))
}
} catch (error) {
console.error("Error retrieving keys:", error);
}
}
// USE WITH CARE - THIS MAY DELETE ALL ENTRIES
async function deleteKeys(keyToDelete) {
let confirmationMessage = keyToDelete
? `This will delete the template with key "${keyToDelete}". Continue?`
: "This will delete ALL templates. Continue?";
if (confirm(confirmationMessage)) {
return openDB().then(db => {
let tx = db.transaction("EasyDiffusionSettings", "readwrite");
let store = tx.objectStore("EasyDiffusionSettings");
return new Promise((resolve, reject) => {
store.openCursor().onsuccess = function (event) {
let cursor = event.target.result;
if (cursor) {
if (!keyToDelete || cursor.key === keyToDelete) {
cursor.delete();
}
cursor.continue();
} else {
// refresh the dropdown and resolve
resolve();
}
};
});
});
}
}

2992
ui/plugins/ui/image-editor-improvements.plugin.js Normal file
View File

File diff suppressed because it is too large Load Diff

4
ui/plugins/ui/release-notes.plugin.js
View File

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

23
ui/plugins/ui/tiled-image-download.plugin.js
View File

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