Initial version that works with the lstein fork. The only things not working are: CPU mode, streaming updates (live and progress bar), Turbo Mode, and keeps the model in VRAM instead of RAM

Image item refactor

README.md

@@ -6,7 +6,7 @@
   <a href="#installation"><img src="https://github.com/cmdr2/stable-diffusion-ui/raw/develop/media/download-linux.png" width="200" /></a>
 </p>
 
-[![Discord Server](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.com/invite/u9yhsFmEkB) (for support, and development discussion) | [Troubleshooting guide for common problems](Troubleshooting.md)
+[![Discord Server](https://img.shields.io/discord/1014774730907209781?label=Discord)](https://discord.com/invite/u9yhsFmEkB) (for support, and development discussion) | [Troubleshooting guide for common problems](Troubleshooting.md)
 
 ️‍🔥🎉 **New!** Live Preview, More Samplers, In-Painting, Face Correction (GFPGAN) and Upscaling (RealESRGAN) have been added!
 
@@ -17,25 +17,30 @@ This distribution currently uses Stable Diffusion 1.4. Once the model for 1.5 be
 - **Face Correction (GFPGAN) and Upscaling (RealESRGAN)**
 - **In-Painting**
 - **Live Preview**: See the image as the AI is drawing it
-- **Lots of Samplers**
+- **Lots of Samplers:** ddim, plms, heun, euler, euler_a, dpm2, dpm2_a, lms
 - **Image Modifiers**: A library of *modifier tags* like *"Realistic"*, *"Pencil Sketch"*, *"ArtStation"* etc. Experiment with various styles quickly.
 - **New UI**: with cleaner design
+- **Waifu Model Support**: Just replace the `stable-diffusion\sd-v1-4.ckpt` file after installation with the Waifu model
 - Supports "*Text to Image*" and "*Image to Image*"
 - **NSFW Setting**: A setting in the UI to control *NSFW content*
 - **Use CPU setting**: If you don't have a compatible graphics card, but still want to run it on your CPU.
 - **Auto-updater**: Gets you the latest improvements and bug-fixes to a rapidly evolving project.
 - **Low Memory Usage**: Creates 512x512 images with less than 4GB of VRAM!
 
-![Screenshot](media/shot-v8.jpg?raw=true)
+![Screenshot of advanced settings](media/shot-v9.jpg?raw=true)
+
+## Live Preview
+![live-512](https://user-images.githubusercontent.com/844287/192097249-729a0a1e-a677-485e-9ccc-16a9e848fabe.gif)
+
 
 # System Requirements
 1. Windows 10/11, or Linux. Experimental support for Mac is coming soon.
-2. An NVIDIA graphics card, preferably with 6GB or more of VRAM. But if you don't have a compatible graphics card, you can still use it with a "Use CPU" setting. It'll be very slow, but it should still work.
+2. An NVIDIA graphics card, preferably with 4GB or more of VRAM. But if you don't have a compatible graphics card, you can still use it with a "Use CPU" setting. It'll be very slow, but it should still work.
 
 You do not need anything else. You do not need WSL, Docker or Conda. The installer will take care of it.
 
 # Installation
-1. **Download** [for Windows](https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.05/stable-diffusion-ui-win64.zip) or [for Linux](https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.05/stable-diffusion-ui-linux.tar.xz).
+1. **Download** [for Windows](https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.16/stable-diffusion-ui-win64.zip) or [for Linux](https://github.com/cmdr2/stable-diffusion-ui/releases/download/v2.16/stable-diffusion-ui-linux.tar.xz).
 
 2. **Extract**:
   - For Windows: After unzipping the file, please move the `stable-diffusion-ui` folder to your `C:` (or any drive like D:, at the top root level), e.g. `C:\stable-diffusion-ui`. This will avoid a common problem with Windows (file path length limits).
@@ -72,19 +77,21 @@ You can use Face Correction or Upscaling to improve the image further.
 ## Problems? Troubleshooting
 Please try the common [troubleshooting](Troubleshooting.md) steps. If that doesn't fix it, please ask on the [discord server](https://discord.com/invite/u9yhsFmEkB), or [file an issue](https://github.com/cmdr2/stable-diffusion-ui/issues).
 
-# Advanced Settings
-You can also set the configuration like `seed`, `width`, `height`, `num_outputs`, `num_inference_steps` and `guidance_scale` using the 'show' button next to 'Advanced settings'.
+# Image Settings
+You can also set the configuration like `seed`, `width`, `height`, `num_outputs`, `num_inference_steps` and `guidance_scale` using the 'show' button next to 'Image settings'.
 
 Use the same `seed` number to get the same image for a certain prompt. This is useful for refining a prompt without losing the basic image design. Enable the `random images` checkbox to get random images.
 
-![Screenshot of advanced settings](media/config-v6.png?raw=true)
+![Screenshot of advanced settings](media/config-v6.jpg?raw=true)
 
-# What is this? Why no Docker?
-This version is a 1-click installer. You don't need WSL or Docker or anything beyond a working NVIDIA GPU with an updated driver. You don't need to use the command-line at all. Even if you don't have a compatible GPU, you can run it on your CPU (albeit very slowly).
+# System Settings
+The system settings are reachable via the cogwheel symbol on the top right. It can be used to configure whether all generated images should 
+saved be automically, or to tune the Stable Diffusion image generation.
 
-It'll download the necessary files from the original [Stable Diffusion](https://github.com/CompVis/stable-diffusion) git repository, and set it up. It'll then start the browser-based interface like before.
+![Screenshot of advanced settings](media/system-settings-v2.jpg?raw=true)
 
-The NSFW option is currently off (temporarily), so it'll allow NSFW images, for those people who are unable to run their prompts without hitting the NSFW filter incorrectly.
+# Image Modifiers
+![Screenshot of advanced settings](media/modifiers-v1.jpg?raw=true)
 
 # 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).

build.bat

@@ -8,6 +8,8 @@
 set /p answer=Are you a developer of this project (Y/N)?
 if /i "%answer:~,1%" NEQ "Y" exit /b
 
+@set PYTHONNOUSERSITE=1
+
 @mkdir dist\stable-diffusion-ui
 
 @echo "Downloading components for the installer.."
@@ -15,11 +17,6 @@ if /i "%answer:~,1%" NEQ "Y" exit /b
 @call conda env create --prefix installer -f environment.yaml
 @call conda activate .\installer
 
-@echo "Setting up startup scripts.."
-
-@mkdir installer\etc\conda\activate.d
-@copy scripts\post_activate.bat installer\etc\conda\activate.d\
-
 @echo "Creating a distributable package.."
 
 @call conda install -c conda-forge -y conda-pack
@@ -37,6 +34,7 @@ if /i "%answer:~,1%" NEQ "Y" exit /b
 @copy ..\..\LICENSE .
 @copy "..\..\CreativeML Open RAIL-M License" .
 @copy "..\..\How to install and run.txt" .
+@echo. > scripts\install_status.txt
 
 @echo "Build ready. Zip the 'dist\stable-diffusion-ui' folder."
 

build.sh

@@ -11,6 +11,8 @@ case $yn in
     * ) exit;;
 esac
 
+export PYTHONNOUSERSITE=1
+
 mkdir -p dist/stable-diffusion-ui
 
 echo "Downloading components for the installer.."
@@ -38,6 +40,7 @@ cp ../../scripts/start.sh .
 cp ../../LICENSE .
 cp "../../CreativeML Open RAIL-M License" .
 cp "../../How to install and run.txt" .
+echo "" > scripts/install_status.txt
 
 chmod u+x start.sh
 

scripts/Start Stable Diffusion UI.cmd

@@ -1 +1,19 @@
-installer\Scripts\activate.bat
+@echo off
+
+@REM Delete the post-activate hook from the old installer
+if exist "installer\etc\conda\activate.d\post_activate.bat" (
+    echo. > installer\etc\conda\activate.d\post_activate.bat
+)
+
+@call installer\Scripts\activate.bat
+
+@call conda-unpack
+
+@call conda --version
+@call git --version
+
+@cd installer
+
+@call ..\scripts\on_env_start.bat
+
+@pause

scripts/on_sd_start.bat

@@ -15,16 +15,17 @@
 
     @call git reset --hard
     @call git pull
-    @call git checkout f6cfebffa752ee11a7b07497b8529d5971de916c
+    @call git checkout d87bd29a6862996d8a0980c1343b6f0d4eb718b4
 
-    @call git apply ..\ui\sd_internal\ddim_callback.patch
-    @call git apply ..\ui\sd_internal\env_yaml.patch
+    @REM @call git apply ..\ui\sd_internal\ddim_callback.patch
+    @REM @call git apply ..\ui\sd_internal\env_yaml.patch
+    @call git apply ..\ui\sd_internal\custom_sd.patch
 
     @cd ..
 ) else (
     @echo. & echo "Downloading Stable Diffusion.." & echo.
 
-    @call git clone https://github.com/basujindal/stable-diffusion.git && (
+    @call git clone https://github.com/invoke-ai/InvokeAI.git stable-diffusion && (
         @echo sd_git_cloned >> scripts\install_status.txt
     ) || (
         @echo "Error downloading Stable Diffusion. Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/blob/main/Troubleshooting.md" & 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!"
@@ -33,10 +34,11 @@
     )
 
     @cd stable-diffusion
-    @call git checkout f6cfebffa752ee11a7b07497b8529d5971de916c
+    @call git checkout d87bd29a6862996d8a0980c1343b6f0d4eb718b4
 
-    @call git apply ..\ui\sd_internal\ddim_callback.patch
-    @call git apply ..\ui\sd_internal\env_yaml.patch
+    @REM @call git apply ..\ui\sd_internal\ddim_callback.patch
+    @REM @call git apply ..\ui\sd_internal\env_yaml.patch
+    @call git apply ..\ui\sd_internal\custom_sd.patch
 
     @cd ..
 )
@@ -81,58 +83,6 @@
 
 set PATH=C:\Windows\System32;%PATH%
 
-@>nul grep -c "conda_sd_gfpgan_deps_installed" ..\scripts\install_status.txt
-@if "%ERRORLEVEL%" EQU "0" (
-    @echo "Packages necessary for GFPGAN (Face Correction) were already installed"
-) else (
-    @echo. & echo "Downloading packages necessary for GFPGAN (Face Correction).." & echo.
-
-    @set PYTHONNOUSERSITE=1
-
-    @call pip install -e git+https://github.com/TencentARC/GFPGAN#egg=GFPGAN || (
-        @echo. & echo "Error installing the packages necessary for GFPGAN (Face Correction). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/blob/main/Troubleshooting.md" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-
-    @call pip install basicsr==1.4.2 || (
-        @echo. & echo "Error installing the basicsr package necessary for GFPGAN (Face Correction). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/blob/main/Troubleshooting.md" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-
-    for /f "tokens=*" %%a in ('python -c "from gfpgan import GFPGANer; print(42)"') do if "%%a" NEQ "42" (
-        @echo. & echo "Dependency test failed! Error installing the packages necessary for GFPGAN (Face Correction). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/blob/main/Troubleshooting.md" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-
-    @echo conda_sd_gfpgan_deps_installed >> ..\scripts\install_status.txt
-)
-
-@>nul grep -c "conda_sd_esrgan_deps_installed" ..\scripts\install_status.txt
-@if "%ERRORLEVEL%" EQU "0" (
-    @echo "Packages necessary for ESRGAN (Resolution Upscaling) were already installed"
-) else (
-    @echo. & echo "Downloading packages necessary for ESRGAN (Resolution Upscaling).." & echo.
-
-    @set PYTHONNOUSERSITE=1
-
-    @call pip install -e git+https://github.com/xinntao/Real-ESRGAN#egg=realesrgan || (
-        @echo. & echo "Error installing the packages necessary for ESRGAN (Resolution Upscaling). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/blob/main/Troubleshooting.md" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-
-    for /f "tokens=*" %%a in ('python -c "from basicsr.archs.rrdbnet_arch import RRDBNet; from realesrgan import RealESRGANer; print(42)"') do if "%%a" NEQ "42" (
-        @echo. & echo "Dependency test failed! Error installing the packages necessary for ESRGAN (Resolution Upscaling). Sorry about that, please try to:" & echo "  1. Run this installer again." & echo "  2. If that doesn't fix it, please try the common troubleshooting steps at https://github.com/cmdr2/stable-diffusion-ui/blob/main/Troubleshooting.md" & echo "  3. If those steps don't help, please copy *all* the error messages in this window, and ask the community at https://discord.com/invite/u9yhsFmEkB" & echo "  4. If that doesn't solve the problem, please file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues" & echo "Thanks!" & echo.
-        pause
-        exit /b
-    )
-
-    @echo conda_sd_esrgan_deps_installed >> ..\scripts\install_status.txt
-)
-
 @>nul grep -c "conda_sd_ui_deps_installed" ..\scripts\install_status.txt
 @if "%ERRORLEVEL%" EQU "0" (
     echo "Packages necessary for Stable Diffusion UI were already installed"
@@ -165,13 +115,13 @@ call WHERE uvicorn > .tmp
 
 @if exist "sd-v1-4.ckpt" (
     for %%I in ("sd-v1-4.ckpt") do if "%%~zI" EQU "4265380512" (
-        echo "Data files (weights) necessary for Stable Diffusion were already downloaded"
+        echo "Data files (weights) necessary for Stable Diffusion were already downloaded. Using the HuggingFace 4 GB Model."
     ) else (
         for %%J in ("sd-v1-4.ckpt") do if "%%~zJ" EQU "7703807346" (
-            echo "Data files (weights) necessary for Stable Diffusion were already downloaded"
+            echo "Data files (weights) necessary for Stable Diffusion were already downloaded. Using the HuggingFace 7 GB Model."
         ) else (
             for %%K in ("sd-v1-4.ckpt") do if "%%~zK" EQU "7703810927" (
-                echo "Data files (weights) necessary for Stable Diffusion were already downloaded"
+                echo "Data files (weights) necessary for Stable Diffusion were already downloaded. Using the Waifu Model."
             ) else (
                 echo. & echo "The model file present at %cd%\sd-v1-4.ckpt is invalid. It is only %%~zK bytes in size. Re-downloading.." & echo.
                 del "sd-v1-4.ckpt"

scripts/start.sh

@@ -4,4 +4,7 @@ source installer/bin/activate
 
 conda-unpack
 
+conda --version
+git --version
+
 scripts/on_env_start.sh

ui/media/main.css

@@ -0,0 +1,413 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 11pt;
+    background-color: rgb(32, 33, 36);
+    color: #eee;
+}
+a {
+    color: rgb(0, 102, 204);
+}
+a:visited {
+    color: rgb(0, 102, 204);
+}
+label {
+    font-size: 10pt;
+}
+#prompt {
+    width: 100%;
+    height: 65pt;
+    box-sizing: border-box;
+}
+@media screen and (max-width: 600px) {
+    #prompt {
+        width: 95%;
+    }
+}
+.image_preview_container {
+    /* display: none; */
+    margin-top: 10pt;
+}
+.image_clear_btn {
+    position: absolute;
+    transform: translateX(-50%) translateY(-35%);
+    background: black;
+    color: white;
+    border: 2pt solid #ccc;
+    padding: 0;
+    cursor: pointer;
+    outline: inherit;
+    border-radius: 8pt;
+    width: 16pt;
+    height: 16pt;
+    font-family: Verdana;
+    font-size: 8pt;
+}
+.settings-box ul {
+    font-size: 9pt;
+    margin-bottom: 5px;
+    padding-left: 10px;
+    list-style-type: none;
+}
+.settings-box li {
+    padding-bottom: 4pt;
+}
+.editor-slider {
+    vertical-align: middle;
+}
+.outputMsg {
+    font-size: small;
+    padding-bottom: 3pt;
+}
+#progressBar {
+    font-size: small;
+}
+#footer {
+    font-size: small;
+    padding-left: 10pt;
+    background: none;
+}
+#footer-legal {
+    font-size: 8pt;
+}
+.imgSeedLabel {
+    font-size: 0.8em;
+    background-color: rgb(44, 45, 48);
+    border-radius: 3px;
+    padding: 5px;
+}
+.imgItem {
+    display: inline-block;
+    margin-top: 1em;
+    margin-right: 1em;
+}
+.imgContainer {
+    display: flex;
+    justify-content: flex-end;
+}
+.imgItemInfo {
+    padding-bottom: 0.5em;
+    display: flex;
+    align-items: flex-end;
+    flex-direction: column;
+    position: absolute;
+    padding: 5px;
+    opacity: 0;
+    transition: 0.1s all;
+}
+.imgContainer:hover > .imgItemInfo {
+    opacity: 1;
+}
+.imgItemInfo * {
+    margin-bottom: 7px;
+}
+#container {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+}
+@media screen and (max-width: 1800px) {
+    #container {
+        width: 100%;
+    }
+}
+#logo small {
+    font-size: 11pt;
+}
+#editor {
+    padding: 5px;
+}
+#editor label {
+    font-weight: normal;
+}
+.settings-box label small {
+    color: rgb(153, 153, 153);
+}
+#preview {
+    padding: 5px;
+}
+#editor-inputs {
+    margin-bottom: 20px;
+}
+#editor-inputs-prompt {
+    flex: 1;
+}
+#editor-inputs .row {
+    padding-bottom: 10px;
+}
+#makeImage {
+    border-radius: 6px;
+}
+#editor-modifiers h5 {
+    padding: 5pt 0;
+    margin: 0;
+}
+#makeImage {
+    flex: 0 0 70px;
+    background: rgb(80, 0, 185);
+    border: 2px solid rgb(40, 0, 78);
+    color: rgb(255, 221, 255);
+    width: 100%;
+    height: 30pt;
+}
+#makeImage:hover {
+    background: rgb(93, 0, 214);
+}
+#stopImage {
+    flex: 0 0 70px;
+    background: rgb(132, 8, 0);
+    border: 2px solid rgb(122, 29, 0);
+    color: rgb(255, 221, 255);
+    width: 100%;
+    height: 30pt;
+    border-radius: 6px;
+    display: none;
+}
+#stopImage:hover {
+    background: rgb(177, 27, 0);
+}
+.flex-container {
+    display: flex;
+}
+.col-50 {
+    flex: 50%;
+}
+.col-fixed-10 {
+    flex: 0 0 380pt;
+}
+.col-free {
+    flex: 1;
+}
+.collapsible {
+    cursor: pointer;
+}
+.collapsible-content {
+    display: none;
+    padding-left: 15px;
+}
+.collapsible-content h5 {
+    padding: 5pt 0pt;
+    margin: 0;
+    font-size: 10pt;
+}
+.collapsible-handle {
+    color: white;
+    padding-right: 5px;
+}
+.panel-box {
+    background: rgb(44, 45, 48);
+    border: 1px solid rgb(47, 49, 53);
+    border-radius: 7px;
+    padding: 5px;
+    margin-bottom: 15px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
+}
+.panel-box h4 {
+    margin: 0;
+    padding: 2px 0;
+}
+#editor-modifiers .editor-modifiers-leaf {
+    padding-top: 10pt;
+    padding-bottom: 10pt;
+}
+#preview {
+    margin-left: 10pt;
+}
+img {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
+}
+.line-separator {
+    background: rgb(56, 56, 56);
+    height: 1pt;
+    margin: 15pt 0;
+}
+#editor-inputs-tags-container {
+    margin-top: 5pt;
+    display: none;
+}
+#server-status {
+    display: inline;
+    float: right;
+    transform: translateY(-5pt);
+}
+#server-status-color {
+    /* width: 8pt;
+    height: 8pt;
+    border-radius: 4pt; */
+    font-size: 14pt;
+    color: rgb(128, 87, 0);
+    /* background-color: rgb(197, 1, 1); */
+    /* transform: translateY(15%); */
+    display: inline;
+}
+#server-status-msg {
+    color: rgb(128, 87, 0);
+    padding-left: 2pt;
+    font-size: 10pt;
+}
+.preview-prompt {
+    font-size: 16pt;
+    margin-bottom: 10pt;
+}
+#coffeeButton {
+    height: 23px;
+    transform: translateY(25%);
+}
+
+#inpaintingEditor {
+    width: 300pt;
+    height: 300pt;
+    margin-top: 5pt;
+}
+.drawing-board-canvas-wrapper {
+    background-size: 100% 100%;
+}
+.drawing-board-control > button {
+    background-color: #eee;
+    border-radius: 3pt;
+}
+.drawing-board-control-inner {
+    background-color: #eee;
+    border-radius: 3pt;
+}
+#inpaintingEditor canvas {
+    opacity: 0.6;
+}
+#enable_mask {
+    margin-top: 8pt;
+}
+
+#top-nav {
+    padding-top: 3pt;
+    padding-bottom: 15pt;
+}
+#top-nav .icon {
+    padding-right: 4pt;
+    font-size: 14pt;
+    transform: translateY(1pt);
+}
+#logo {
+    display: inline;
+}
+#logo h1 {
+    display: inline;
+}
+#top-nav-items {
+    list-style-type: none;
+    display: inline;
+    float: right;
+}
+#top-nav-items > li {
+    float: left;
+    display: inline;
+    padding-left: 20pt;
+    cursor: default;
+}
+#initial-text {
+    padding-top: 15pt;
+    padding-left: 4pt;
+}
+.settings-subheader {
+    font-size: 10pt;
+    font-weight: bold;
+}
+.pl-5 {
+    padding-left: 5pt;
+}
+#system-settings {
+    width: 360pt;
+    transform: translateX(-100%) translateX(70pt);
+
+    padding-top: 10pt;
+    padding-bottom: 10pt;
+}
+#system-settings ul {
+    margin: 0;
+    padding: 0;
+}
+#system-settings li {
+    padding-left: 5pt;
+}
+#community-links {
+    list-style-type: none;
+    margin: 0;
+    padding: 12pt;
+    padding-bottom: 0pt;
+    transform: translateX(-15%);
+}
+#community-links li {
+    padding-bottom: 12pt;
+    display: block;
+    font-size: 10pt;
+}
+#community-links li .fa-fw {
+    padding-right: 2pt;
+}
+#community-links li a {
+    color: white;
+    text-decoration: none;
+}
+.dropdown {
+    overflow: hidden;
+}
+.dropdown-content {
+    display: none;
+    position: absolute;
+    z-index: 2;
+
+    background: rgb(18, 18, 19);
+    border: 2px solid rgb(37, 38, 41);
+    border-radius: 7px;
+    padding: 5px;
+    margin-bottom: 15px;
+    box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
+}
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.imageTaskContainer {
+    border: 1px solid #333;
+    margin-bottom: 10pt;
+    padding: 5pt;
+    border-radius: 5pt;
+    box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
+}
+.taskStatusLabel {
+    float: left;
+    font-size: 8pt;
+    background:rgb(44, 45, 48);
+    border: 1px solid rgb(61, 62, 66);
+    padding: 2pt 4pt;
+    border-radius: 2pt;
+    margin-right: 5pt;
+}
+.activeTaskLabel {
+    background:rgb(0, 90, 30);
+    border: 1px solid rgb(0, 75, 19);
+    color:rgb(204, 255, 217)
+}
+.secondaryButton {
+    background: rgb(132, 8, 0);
+    border: 1px solid rgb(122, 29, 0);
+    color: rgb(255, 221, 255);
+    padding: 3pt 6pt;
+    border-radius: 5px;
+}
+.secondaryButton:hover {
+    background: rgb(177, 27, 0);
+}
+.stopTask {
+    float: right;
+}
+#preview-tools {
+    display: none;
+    padding: 4pt;
+}
+.taskConfig {
+    font-size: 10pt;
+    color: #aaa;
+    margin-bottom: 5pt;
+}
+.img-batch {
+    display: inline;
+}

ui/media/modifier-thumbnails.css

@@ -0,0 +1,216 @@
+.modifier-card {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.1s;
+    border-radius: 7px;
+    margin: 3pt 3pt;
+    float: left;
+    width: 8em;
+    height: 11.5em;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 8em 3.5em;
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "modifier-card-image-container"
+        "modifier-card-container";
+    border: 2px solid rgba(255, 255, 255, .05);
+    cursor: pointer;
+}
+.modifier-card-size_5 {
+    width: 18em;
+    grid-template-rows: 18em 3.5em;
+    height: 21.5em;
+}
+.modifier-card-size_5 .modifier-card-image-overlay {
+    font-size: 8em;
+}
+.modifier-card-size_4 {
+    width: 14em;
+    grid-template-rows: 14em 3.5em;
+    height: 17.5em;
+}
+.modifier-card-size_4 .modifier-card-image-overlay {
+    font-size: 7em;
+}
+.modifier-card-size_3 {
+    width: 11em;
+    grid-template-rows: 11em 3.5em;
+    height: 14.5em;
+}
+.modifier-card-size_3 .modifier-card-image-overlay {
+    font-size: 6em;
+}
+.modifier-card-size_2 {
+    width: 10em;
+    grid-template-rows: 10em 3.5em;
+    height: 13.5em;
+}
+.modifier-card-size_2 .modifier-card-image-overlay {
+    font-size: 6em;
+}
+.modifier-card-size_1 {
+    width: 9em;
+    grid-template-rows: 9em 3.5em;
+    height: 12.5em;
+}
+.modifier-card-size_1 .modifier-card-image-overlay {
+    font-size: 5em;
+}
+.modifier-card-size_-1 {
+    width: 7em;
+    grid-template-rows: 7em 3.5em;
+    height: 10.5em;
+}
+.modifier-card-size_-1 .modifier-card-image-overlay {
+    font-size: 4em;
+}
+.modifier-card-size_-2 {
+    width: 6em;
+    grid-template-rows: 6em 3.5em;
+    height: 9.5em;
+}
+.modifier-card-size_-2 .modifier-card-image-overlay {
+    font-size: 3em;
+}
+.modifier-card-size_-3 {
+    width: 5em;
+    grid-template-rows: 5em 3.5em;
+    height: 8.5em;
+}
+.modifier-card-size_-3 .modifier-card-image-overlay {
+    font-size: 3em;
+}
+.modifier-card-size_-3 .modifier-card-label {
+    font-size: 0.8em;
+}
+.modifier-card-tiny {
+    width: 6em;
+    height: 9.5em;
+    grid-template-rows: 6em 3.5em;
+}
+.modifier-card-tiny .modifier-card-image-overlay {
+    font-size: 4em;
+}
+.modifier-card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.25);
+}
+.modifier-card-image-container {
+    border-radius: 5px 5px 0 0;
+    width: inherit;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .2);
+    grid-area: modifier-card-image-container;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgb(255 255 255 / 8%);
+}
+.modifier-card-image-container img {
+    width: inherit;
+    height: 100%;
+    border-radius: 5px 5px 0 0;
+}
+.modifier-card-image-container * {
+    position: absolute;
+}
+.modifier-card-container {
+    text-align: center;
+    background-color: rgba(0,0,0,0.5);
+    border-radius: 0 0 5px 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    grid-area: modifier-card-container;
+    font-weight: 100;
+    font-size: .9em;
+    width: inherit;
+}
+.modifier-card-label {
+    padding: 4px;
+    word-break: break-word;
+}
+.modifier-card-image-overlay {
+    width: inherit;
+    height: inherit;
+    background-color: rgb(0 0 0 / 50%);
+    z-index: 2;
+    position: absolute;
+    border-radius: 5px 5px 0 0;
+    opacity: 0;
+    font-size: 5em;
+    font-weight: 900;
+    color: rgb(255 255 255 / 50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.modifier-card-overlay {
+    width: inherit;
+    height: inherit;
+    position: absolute;
+    z-index: 3;
+}
+.modifier-card:hover > .modifier-card-image-container .modifier-card-image-overlay {
+    opacity: 1;
+}
+.modifier-card:hover > .modifier-card-image-container img {
+    filter: blur(.1em);
+}
+.modifier-card:active {
+    transform: scale(0.95);
+    box-shadow: 0 5px 16px 5px rgba(0, 0, 0, 0.5);
+}
+#preview-image {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+.modifier-card-active {
+    border: 2px solid rgb(179 82 255 / 94%);
+    box-shadow: 0 0px 10px 0 rgb(170 0 229 / 58%);
+}
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: 120px;
+    background: rgb(101,97,181);
+    background: linear-gradient(180deg, rgba(101,97,181,1) 0%, rgba(47,45,85,1) 100%);
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    top: 105%;
+    left: 39%;
+    margin-left: -60px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    border: 2px solid rgb(90 100 177 / 94%);
+    box-shadow: 0px 10px 20px 5px rgb(11 0 58 / 55%);
+    width: 10em;
+}
+.tooltip .tooltip-text::after {
+    content: "";
+    position: absolute;
+    top: -0.9em;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent rgb(90 100 177 / 94%) transparent;
+}
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+#modifier-card-size-slider {
+    width: 6em;
+    margin-bottom: 0.5em;
+    vertical-align: middle;
+}