changelog

CHANGES.md

@@ -22,14 +22,6 @@
 Our focus continues to remain on an easy installation experience, and an easy user-interface. While still remaining pretty powerful, in terms of features and speed.
 
 ### Detailed changelog
-* 2.5.41 - 13 Jun 2023 - Fix multi-gpu bug with "low" VRAM usage mode while generating images.
-* 2.5.41 - 12 Jun 2023 - Fix multi-gpu bug with CodeFormer.
-* 2.5.41 - 6 Jun 2023 - Allow changing the strength of CodeFormer, and slightly improved styling of the CodeFormer options.
-* 2.5.41 - 5 Jun 2023 - Allow sharing an Easy Diffusion instance via https://try.cloudflare.com/ . You can find this option at the bottom of the Settings tab. Thanks @JeLuf.
-* 2.5.41 - 5 Jun 2023 - Show an option to download for tiled images. Shows a button on the generated image. Creates larger images by tiling them with the image generated by Easy Diffusion. Thanks @JeLuf.
-* 2.5.41 - 5 Jun 2023 - (beta-only) Allow LoRA strengths between -2 and 2. Thanks @ogmaresca.
-* 2.5.40 - 5 Jun 2023 - Reduce the VRAM usage of Latent Upscaling when using "balanced" VRAM usage mode.
-* 2.5.40 - 5 Jun 2023 - Fix the "realesrgan" key error when using CodeFormer with more than 1 image in a batch.
 * 2.5.40 - 3 Jun 2023 - Added CodeFormer as another option for fixing faces and eyes. CodeFormer tends to perform better than GFPGAN for many images. Thanks @patriceac for the implementation, and for contacting the CodeFormer team (who were supportive of it being integrated into Easy Diffusion).
 * 2.5.39 - 25 May 2023 - (beta-only) Seamless Tiling - make seamlessly tiled images, e.g. rock and grass textures. Thanks @JeLuf.
 * 2.5.38 - 24 May 2023 - Better reporting of errors, and show an explanation if the user cannot disable the "Use CPU" setting.

How to install and run.txt

@@ -5,10 +5,10 @@ If you haven't downloaded Stable Diffusion UI yet, please download from https://
 After downloading, to install please follow these instructions:
 
 For Windows:
-- Please double-click the "Easy-Diffusion-Windows.exe" file and follow the instructions.
+- Please double-click the "Start Stable Diffusion UI.cmd" file inside the "stable-diffusion-ui" folder.
 
 For Linux:
-- Please open a terminal, unzip the Easy-Diffusion-Linux.zip file and go to the "easy-diffusion" directory. Then run ./start.sh
+- Please open a terminal, and go to the "stable-diffusion-ui" directory. Then run ./start.sh
 
 That file will automatically install everything. After that it will start the Stable Diffusion interface in a web browser.
 
@@ -21,4 +21,4 @@ If you have any problems, please:
 3. Or, file an issue at https://github.com/cmdr2/stable-diffusion-ui/issues
 
 Thanks
-cmdr2 (and contributors to the project)
+cmdr2 (and contributors to the project)

README.md

@@ -23,7 +23,6 @@ Click the download button for your operating system:
 - Minimum 8 GB of system RAM.
 - Atleast 25 GB of space on the hard disk.
 
-
 The installer will take care of whatever is needed. If you face any problems, you can join the friendly [Discord community](https://discord.com/invite/u9yhsFmEkB) and ask for assistance.
 
 ## On Windows:

scripts/check_modules.py

@@ -18,15 +18,13 @@ os_name = platform.system()
 modules_to_check = {
     "torch": ("1.11.0", "1.13.1", "2.0.0"),
     "torchvision": ("0.12.0", "0.14.1", "0.15.1"),
-    "sdkit": "1.0.106",
+    "sdkit": "1.0.101",
     "stable-diffusion-sdkit": "2.1.4",
     "rich": "12.6.0",
     "uvicorn": "0.19.0",
     "fastapi": "0.85.1",
-    "pycloudflared": "0.2.0",
     # "xformers": "0.0.16",
 }
-modules_to_log = ["torch", "torchvision", "sdkit", "stable-diffusion-sdkit"]
 
 
 def version(module_name: str) -> str:
@@ -91,8 +89,7 @@ def init():
                 traceback.print_exc()
                 fail(module_name)
 
-        if module_name in modules_to_log:
+        print(f"{module_name}: {version(module_name)}")
-            print(f"{module_name}: {version(module_name)}")
 
 
 ### utilities

scripts/developer_console.sh

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

scripts/on_env_start.bat

@@ -67,6 +67,7 @@ if "%update_branch%"=="" (
 @xcopy sd-ui-files\ui ui /s /i /Y /q
 @copy sd-ui-files\scripts\on_sd_start.bat scripts\ /Y
 @copy sd-ui-files\scripts\check_modules.py scripts\ /Y
+@copy sd-ui-files\scripts\check_models.py scripts\ /Y
 @copy sd-ui-files\scripts\get_config.py scripts\ /Y
 @copy "sd-ui-files\scripts\Start Stable Diffusion UI.cmd" . /Y
 @copy "sd-ui-files\scripts\Developer Console.cmd" . /Y

scripts/on_env_start.sh

@@ -50,6 +50,7 @@ cp -Rf sd-ui-files/ui .
 cp sd-ui-files/scripts/on_sd_start.sh scripts/
 cp sd-ui-files/scripts/bootstrap.sh scripts/
 cp sd-ui-files/scripts/check_modules.py scripts/
+cp sd-ui-files/scripts/check_models.py scripts/
 cp sd-ui-files/scripts/get_config.py scripts/
 cp sd-ui-files/scripts/start.sh .
 cp sd-ui-files/scripts/developer_console.sh .

scripts/on_sd_start.bat

@@ -5,6 +5,7 @@
 
 @copy sd-ui-files\scripts\on_env_start.bat scripts\ /Y
 @copy sd-ui-files\scripts\check_modules.py scripts\ /Y
+@copy sd-ui-files\scripts\check_models.py scripts\ /Y
 @copy sd-ui-files\scripts\get_config.py scripts\ /Y
 
 if exist "%cd%\profile" (

scripts/on_sd_start.sh

@@ -4,6 +4,7 @@ cp sd-ui-files/scripts/functions.sh scripts/
 cp sd-ui-files/scripts/on_env_start.sh scripts/
 cp sd-ui-files/scripts/bootstrap.sh scripts/
 cp sd-ui-files/scripts/check_modules.py scripts/
+cp sd-ui-files/scripts/check_models.py scripts/
 cp sd-ui-files/scripts/get_config.py scripts/
 
 source ./scripts/functions.sh

ui/easydiffusion/model_manager.py

@@ -60,7 +60,7 @@ def load_default_models(context: Context):
 
     # init default model paths
     for model_type in MODELS_TO_LOAD_ON_START:
-        context.model_paths[model_type] = resolve_model_to_use(model_type=model_type, fail_if_not_found=False)
+        context.model_paths[model_type] = resolve_model_to_use(model_type=model_type)
         try:
             load_model(
                 context,
@@ -72,12 +72,7 @@ def load_default_models(context: Context):
                 del context.model_load_errors[model_type]
         except Exception as e:
             log.error(f"[red]Error while loading {model_type} model: {context.model_paths[model_type]}[/red]")
-            if "DefaultCPUAllocator: not enough memory" in str(e):
+            log.exception(e)
-                log.error(
-                    f"[red]Your PC is low on system RAM. Please add some virtual memory (or swap space) by following the instructions at this link: https://www.ibm.com/docs/en/opw/8.2.0?topic=tuning-optional-increasing-paging-file-size-windows-computers[/red]"
-                )
-            else:
-                log.exception(e)
             del context.model_paths[model_type]
 
             context.model_load_errors[model_type] = str(e)  # storing the entire Exception can lead to memory leaks
@@ -90,7 +85,7 @@ def unload_all(context: Context):
             del context.model_load_errors[model_type]
 
 
-def resolve_model_to_use(model_name: str = None, model_type: str = None, fail_if_not_found: bool = True):
+def resolve_model_to_use(model_name: str = None, model_type: str = None):
     model_extensions = MODEL_EXTENSIONS.get(model_type, [])
     default_models = DEFAULT_MODELS.get(model_type, [])
     config = app.getConfig()
@@ -113,7 +108,7 @@ def resolve_model_to_use(model_name: str = None, model_type: str = None, fail_if
                 return os.path.abspath(model_name + model_extension)
 
     # Can't find requested model, check the default paths.
-    if model_type == "stable-diffusion" and not fail_if_not_found:
+    if model_type == "stable-diffusion":
         for default_model in default_models:
             default_model_path = os.path.join(model_dir, default_model["file_name"])
             if os.path.exists(default_model_path):
@@ -123,8 +118,7 @@ def resolve_model_to_use(model_name: str = None, model_type: str = None, fail_if
                     )
                 return default_model_path
 
-    if model_name and fail_if_not_found:
+    return None
-        raise Exception(f"Could not find the desired model {model_name}! Is it present in the {model_dir} folder?")
 
 
 def reload_models_if_necessary(context: Context, task_data: TaskData):
@@ -148,12 +142,10 @@ def reload_models_if_necessary(context: Context, task_data: TaskData):
         if context.model_paths.get(model_type) != path
     }
 
-    if task_data.codeformer_upscale_faces:
+    if task_data.codeformer_upscale_faces and "realesrgan" not in models_to_reload.keys():
-        if "realesrgan" not in models_to_reload and "realesrgan" not in context.models:
+        models_to_reload["realesrgan"] = resolve_model_to_use(
-            default_realesrgan = DEFAULT_MODELS["realesrgan"][0]["file_name"]
+            DEFAULT_MODELS["realesrgan"][0]["file_name"], "realesrgan"
-            models_to_reload["realesrgan"] = resolve_model_to_use(default_realesrgan, "realesrgan")
+        )
-        elif "realesrgan" in models_to_reload and models_to_reload["realesrgan"] is None:
-            del models_to_reload["realesrgan"]  # don't unload realesrgan
 
     if set_vram_optimizations(context) or set_clip_skip(context, task_data):  # reload SD
         models_to_reload["stable-diffusion"] = model_paths_in_req["stable-diffusion"]

ui/easydiffusion/renderer.py

@@ -7,12 +7,10 @@ from easydiffusion import device_manager
 from easydiffusion.types import GenerateImageRequest
 from easydiffusion.types import Image as ResponseImage
 from easydiffusion.types import Response, TaskData, UserInitiatedStop
-from easydiffusion.model_manager import DEFAULT_MODELS, resolve_model_to_use
 from easydiffusion.utils import get_printable_request, log, save_images_to_disk
 from sdkit import Context
 from sdkit.filter import apply_filters
 from sdkit.generate import generate_images
-from sdkit.models import load_model
 from sdkit.utils import (
     diffusers_latent_samples_to_images,
     gc,
@@ -159,51 +157,36 @@ def filter_images(req: GenerateImageRequest, task_data: TaskData, images: list,
     if user_stopped:
         return images
 
+    filters_to_apply = []
+    filter_params = {}
     if task_data.block_nsfw:
-        images = apply_filters(context, "nsfw_checker", images)
+        filters_to_apply.append("nsfw_checker")
-
     if task_data.use_face_correction and "codeformer" in task_data.use_face_correction.lower():
-        default_realesrgan = DEFAULT_MODELS["realesrgan"][0]["file_name"]
+        filters_to_apply.append("codeformer")
-        prev_realesrgan_path = None
-        if task_data.codeformer_upscale_faces and default_realesrgan not in context.model_paths["realesrgan"]:
-            prev_realesrgan_path = context.model_paths["realesrgan"]
-            context.model_paths["realesrgan"] = resolve_model_to_use(default_realesrgan, "realesrgan")
-            load_model(context, "realesrgan")
 
-        try:
+        filter_params["upscale_faces"] = task_data.codeformer_upscale_faces
-            images = apply_filters(
-                context,
-                "codeformer",
-                images,
-                upscale_faces=task_data.codeformer_upscale_faces,
-                codeformer_fidelity=task_data.codeformer_fidelity,
-            )
-        finally:
-            if prev_realesrgan_path:
-                context.model_paths["realesrgan"] = prev_realesrgan_path
-                load_model(context, "realesrgan")
     elif task_data.use_face_correction and "gfpgan" in task_data.use_face_correction.lower():
-        images = apply_filters(context, "gfpgan", images)
+        filters_to_apply.append("gfpgan")
-
     if task_data.use_upscale:
         if "realesrgan" in task_data.use_upscale.lower():
-            images = apply_filters(context, "realesrgan", images, scale=task_data.upscale_amount)
+            filters_to_apply.append("realesrgan")
         elif task_data.use_upscale == "latent_upscaler":
-            images = apply_filters(
+            filters_to_apply.append("latent_upscaler")
-                context,
-                "latent_upscaler",
-                images,
-                scale=task_data.upscale_amount,
-                latent_upscaler_options={
-                    "prompt": req.prompt,
-                    "negative_prompt": req.negative_prompt,
-                    "seed": req.seed,
-                    "num_inference_steps": task_data.latent_upscaler_steps,
-                    "guidance_scale": 0,
-                },
-            )
 
-    return images
+            filter_params["latent_upscaler_options"] = {
+                "prompt": req.prompt,
+                "negative_prompt": req.negative_prompt,
+                "seed": req.seed,
+                "num_inference_steps": task_data.latent_upscaler_steps,
+                "guidance_scale": 0,
+            }
+
+        filter_params["scale"] = task_data.upscale_amount
+
+    if len(filters_to_apply) == 0:
+        return images
+
+    return apply_filters(context, filters_to_apply, images, **filter_params)
 
 
 def construct_response(images: list, seeds: list, task_data: TaskData, base_seed: int):

ui/easydiffusion/server.py

@@ -15,7 +15,6 @@ from fastapi import FastAPI, HTTPException
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel, Extra
 from starlette.responses import FileResponse, JSONResponse, StreamingResponse
-from pycloudflared import try_cloudflare
 
 log.info(f"started in {app.SD_DIR}")
 log.info(f"started at {datetime.datetime.now():%x %X}")
@@ -114,14 +113,6 @@ def init():
     def get_image(task_id: int, img_id: int):
         return get_image_internal(task_id, img_id)
 
-    @server_api.post("/tunnel/cloudflare/start")
-    def start_cloudflare_tunnel(req: dict):
-        return start_cloudflare_tunnel_internal(req)
-
-    @server_api.post("/tunnel/cloudflare/stop")
-    def stop_cloudflare_tunnel(req: dict):
-        return stop_cloudflare_tunnel_internal(req)
-
     @server_api.get("/")
     def read_root():
         return FileResponse(os.path.join(app.SD_UI_DIR, "index.html"), headers=NOCACHE_HEADERS)
@@ -220,8 +211,6 @@ def ping_internal(session_id: str = None):
         session = task_manager.get_cached_session(session_id, update_ttl=True)
         response["tasks"] = {id(t): t.status for t in session.tasks}
     response["devices"] = task_manager.get_devices()
-    if cloudflare.address != None:
-        response["cloudflare"] = cloudflare.address
     return JSONResponse(response, headers=NOCACHE_HEADERS)
 
 
@@ -333,47 +322,3 @@ def get_image_internal(task_id: int, img_id: int):
         return StreamingResponse(img_data, media_type="image/jpeg")
     except KeyError as e:
         raise HTTPException(status_code=500, detail=str(e))
-
-#---- Cloudflare Tunnel ----
-class CloudflareTunnel:
-    def __init__(self):
-        config = app.getConfig()
-        self.urls = None
-        self.port = config.get("net", {}).get("listen_port")
-
-    def start(self):
-        if self.port:
-            self.urls = try_cloudflare(self.port)
-
-    def stop(self):
-        if self.urls:
-            try_cloudflare.terminate(self.port)
-            self.urls = None
-
-    @property
-    def address(self):
-        if self.urls:
-            return self.urls.tunnel
-        else:
-            return None
-
-cloudflare = CloudflareTunnel()
-
-def start_cloudflare_tunnel_internal(req: dict):
-   try:
-      cloudflare.start()
-      log.info(f"- Started cloudflare tunnel. Using address: {cloudflare.address}")
-      return JSONResponse({"address":cloudflare.address})
-   except Exception as e:
-      log.error(str(e))
-      log.error(traceback.format_exc())
-      return HTTPException(status_code=500, detail=str(e))
-
-def stop_cloudflare_tunnel_internal(req: dict):
-   try:
-      cloudflare.stop()
-   except Exception as e:
-      log.error(str(e))
-      log.error(traceback.format_exc())
-      return HTTPException(status_code=500, detail=str(e))
-

ui/easydiffusion/types.py

@@ -52,7 +52,6 @@ class TaskData(BaseModel):
     stream_image_progress_interval: int = 5
     clip_skip: bool = False
     codeformer_upscale_faces: bool = False
-    codeformer_fidelity: float = 0.5
 
 
 class MergeRequest(BaseModel):

ui/index.html

@@ -30,7 +30,7 @@
             <h1>
                 <img id="logo_img" src="/media/images/icon-512x512.png" >
                 Easy Diffusion
-                <small>v2.5.41 <span id="updateBranchLabel"></span></small>
+                <small>v2.5.40 <span id="updateBranchLabel"></span></small>
             </h1>
         </div>
         <div id="server-status">
@@ -227,10 +227,7 @@
                     </td></tr>
                     <tr id="lora_alpha_container" class="pl-5">
                         <td><label for="lora_alpha_slider">LoRA Strength:</label></td>
-                        <td>
+                        <td> <input id="lora_alpha_slider" name="lora_alpha_slider" class="editor-slider" value="50" type="range" min="0" max="100"> <input id="lora_alpha" name="lora_alpha" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td>
-                            <small>-2</small> <input id="lora_alpha_slider" name="lora_alpha_slider" class="editor-slider" value="50" type="range" min="-200" max="200"> <small>2</small> &nbsp;
-                            <input id="lora_alpha" name="lora_alpha" size="4" pattern="^-?[0-9]*\.?[0-9]*$" onkeypress="preventNonNumericalInput(event)"><br/>
-                        </td>
                     </tr>
                     <tr class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</label></td><td>
                         <input id="hypernetwork_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
@@ -266,12 +263,11 @@
                     <div><ul>
                     <li><b class="settings-subheader">Render Settings</b></li>
                     <li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview <small>(uses more VRAM, slower images)</small></label></li>
-                    <li class="pl-5" id="use_face_correction_container">
+                    <li class="pl-5">
                         <input id="use_face_correction" name="use_face_correction" type="checkbox"> <label for="use_face_correction">Fix incorrect faces and eyes</label> <div style="display:inline-block;"><input id="gfpgan_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" /></div>
-                        <table id="codeformer_settings" class="displayNone sub-settings">
+                        <div id="codeformer_settings" class="displayNone sub-settings">
-                            <tr class="pl-5"><td><label for="codeformer_fidelity_slider">Strength:</label></td><td><input id="codeformer_fidelity_slider" name="codeformer_fidelity_slider" class="editor-slider" value="5" type="range" min="0" max="10"> <input id="codeformer_fidelity" name="codeformer_fidelity" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>
+                            <input id="codeformer_upscale_faces" name="codeformer_upscale_faces" type="checkbox"><label for="codeformer_upscale_faces">Upscale Faces <small>(improves the resolution of faces)</small></label>
-                            <tr class="pl-5"><td><label for="codeformer_upscale_faces">Upscale Faces:</label></td><td><input id="codeformer_upscale_faces" name="codeformer_upscale_faces" type="checkbox" checked> <label><small>(improves the resolution of faces)</small></label></td></tr>
+                        </div>
-                        </table>
                     </li>
                     <li class="pl-5">
                         <input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Scale up by</label> 
@@ -285,9 +281,9 @@
                             <option value="RealESRGAN_x4plus_anime_6B">RealESRGAN_x4plus_anime_6B</option>
                             <option value="latent_upscaler">Latent Upscaler 2x</option>
                         </select>
-                        <table id="latent_upscaler_settings" class="displayNone sub-settings">
+                        <div id="latent_upscaler_settings" class="displayNone sub-settings">
-                            <tr class="pl-5"><td><label for="latent_upscaler_steps_slider">Upscaling Steps:</label></td><td><input id="latent_upscaler_steps_slider" name="latent_upscaler_steps_slider" class="editor-slider" value="10" type="range" min="1" max="50"> <input id="latent_upscaler_steps" name="latent_upscaler_steps" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>
+                            <label for="latent_upscaler_steps_slider">Upscaling Steps:</label></td><td> <input id="latent_upscaler_steps_slider" name="latent_upscaler_steps_slider" class="editor-slider" value="10" type="range" min="1" max="50"> <input id="latent_upscaler_steps" name="latent_upscaler_steps" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)">
-                        </table>
+                        </div>
                     </li>
                     <li class="pl-5"><input id="show_only_filtered_image" name="show_only_filtered_image" type="checkbox" checked> <label for="show_only_filtered_image">Show only the corrected/upscaled image</label></li>
                     </ul></div>
@@ -365,16 +361,10 @@
         <div id="tab-content-settings" class="tab-content">
             <div id="system-settings" class="tab-content-inner">
                 <h1>System Settings</h1>
-                <div class="parameters-table" id="system-settings-table"></div>
+                <div class="parameters-table"></div>
                 <br/>
                 <button id="save-system-settings-btn" class="primaryButton">Save</button>
                 <br/><br/>
-                <div id="share-easy-diffusion">
-                   <h3><i class="fa fa-user-group"></i> Share Easy Diffusion</h3>
-                   <div class="parameters-table" id="system-settings-network-table">
-                   </div>
-                </div>
-                <br/><br/>
                 <div>
                     <h3><i class="fa fa-microchip icon"></i> System Info</h3>
                     <div id="system-info">
@@ -549,8 +539,7 @@ async function init() {
     SD.init({
         events: {
             statusChange: setServerStatus,
-            idle: onIdle,
+            idle: onIdle
-            ping: tunnelUpdate
         }
     })
 

ui/media/css/auto-save.css

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

ui/media/css/image-editor.css

@@ -96,7 +96,7 @@
 
 .editor-controls-center {
 	/* background: var(--background-color2); */
-	flex: 0;
+	flex: 1;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -105,8 +105,6 @@
 .editor-controls-center > div {
 	position: relative;
 	background: black;
-	margin: 20pt;
-	margin-top: 40pt;
 }
 
 .editor-controls-center canvas {
@@ -166,10 +164,8 @@
 	margin: var(--popup-margin);
 	padding: var(--popup-padding);
 	min-height: calc(99h - (2 * var(--popup-margin)));
-	max-width: fit-content;
+	max-width: none;
 	min-width: fit-content;
-	margin-left: auto;
-	margin-right: auto;
 }
 
 .image-editor-popup h1 {

ui/media/css/main.css

@@ -1309,29 +1309,6 @@ body.wait-pause {
     padding-left: 5pt;
 }
 
-#cloudflare-address {
-    background-color: var(--background-color3);
-    padding: 6px;
-    border-radius: var(--input-border-radius);
-    border: var(--input-border-size) solid var(--input-border-color);
-    margin-top: 0.2em;
-    margin-bottom: 0.2em;
-    display: inline-block;
-}
-
-#copy-cloudflare-address {
-    padding: 4px 8px;
-    margin-left: 0.5em;
-}
-
-.expandedSettingRow {
-    background: var(--background-color1);
-    width: 95%;
-    border-radius: 4pt;
-    margin-top: 5pt;
-    margin-bottom: 3pt;
-}
-
 /* TOAST NOTIFICATIONS */
 .toast-notification {
     position: fixed;

ui/media/js/engine.js

@@ -186,7 +186,6 @@
     const EVENT_TASK_START = "taskStart"
     const EVENT_TASK_END = "taskEnd"
     const EVENT_TASK_ERROR = "task_error"
-    const EVENT_PING = "ping"
     const EVENT_UNEXPECTED_RESPONSE = "unexpectedResponse"
     const EVENTS_TYPES = [
         EVENT_IDLE,
@@ -197,7 +196,6 @@
         EVENT_TASK_START,
         EVENT_TASK_END,
         EVENT_TASK_ERROR,
-        EVENT_PING,
 
         EVENT_UNEXPECTED_RESPONSE,
     ]
@@ -242,7 +240,6 @@
                 setServerStatus("error", "offline")
                 return false
             }
-
             // Set status
             switch (serverState.status) {
                 case ServerStates.init:
@@ -264,7 +261,6 @@
                     break
             }
             serverState.time = Date.now()
-            await eventSource.fireEvent(EVENT_PING, serverState)
             return true
         } catch (e) {
             console.error(e)

ui/media/js/main.js

@@ -87,15 +87,13 @@ let promptStrengthField = document.querySelector("#prompt_strength")
 let samplerField = document.querySelector("#sampler_name")
 let samplerSelectionContainer = document.querySelector("#samplerSelection")
 let useFaceCorrectionField = document.querySelector("#use_face_correction")
-let gfpganModelField = new ModelDropdown(document.querySelector("#gfpgan_model"), ["gfpgan", "codeformer"], "", false)
+let gfpganModelField = new ModelDropdown(document.querySelector("#gfpgan_model"), ["codeformer", "gfpgan"])
 let useUpscalingField = document.querySelector("#use_upscale")
 let upscaleModelField = document.querySelector("#upscale_model")
 let upscaleAmountField = document.querySelector("#upscale_amount")
 let latentUpscalerSettings = document.querySelector("#latent_upscaler_settings")
 let latentUpscalerStepsSlider = document.querySelector("#latent_upscaler_steps_slider")
 let latentUpscalerStepsField = document.querySelector("#latent_upscaler_steps")
-let codeformerFidelitySlider = document.querySelector("#codeformer_fidelity_slider")
-let codeformerFidelityField = document.querySelector("#codeformer_fidelity")
 let stableDiffusionModelField = new ModelDropdown(document.querySelector("#stable_diffusion_model"), "stable-diffusion")
 let clipSkipField = document.querySelector("#clip_skip")
 let tilingField = document.querySelector("#tiling")
@@ -1268,7 +1266,6 @@ function getCurrentUserRequest() {
 
         if (gfpganModelField.value.includes("codeformer")) {
             newTask.reqBody.codeformer_upscale_faces = document.querySelector("#codeformer_upscale_faces").checked
-            newTask.reqBody.codeformer_fidelity = 1 - parseFloat(codeformerFidelityField.value)
         }
     }
     if (useUpscalingField.checked) {
@@ -1591,10 +1588,8 @@ function onFixFaceModelChange() {
     let codeformerSettings = document.querySelector("#codeformer_settings")
     if (gfpganModelField.value === "codeformer" && !gfpganModelField.disabled) {
         codeformerSettings.classList.remove("displayNone")
-        codeformerSettings.classList.add("expandedSettingRow")
     } else {
         codeformerSettings.classList.add("displayNone")
-        codeformerSettings.classList.remove("expandedSettingRow")
     }
 }
 gfpganModelField.addEventListener("change", onFixFaceModelChange)
@@ -1615,11 +1610,9 @@ function onUpscaleModelChange() {
         upscale4x.disabled = true
         upscaleAmountField.value = "2"
         latentUpscalerSettings.classList.remove("displayNone")
-        latentUpscalerSettings.classList.add("expandedSettingRow")
     } else {
         upscale4x.disabled = false
         latentUpscalerSettings.classList.add("displayNone")
-        latentUpscalerSettings.classList.remove("expandedSettingRow")
     }
 }
 upscaleModelField.addEventListener("change", onUpscaleModelChange)
@@ -1634,27 +1627,6 @@ document.onkeydown = function(e) {
     }
 }
 
-/********************* CodeFormer Fidelity **************************/
-function updateCodeformerFidelity() {
-    codeformerFidelityField.value = codeformerFidelitySlider.value / 10
-    codeformerFidelityField.dispatchEvent(new Event("change"))
-}
-
-function updateCodeformerFidelitySlider() {
-    if (codeformerFidelityField.value < 0) {
-        codeformerFidelityField.value = 0
-    } else if (codeformerFidelityField.value > 1) {
-        codeformerFidelityField.value = 1
-    }
-
-    codeformerFidelitySlider.value = codeformerFidelityField.value * 10
-    codeformerFidelitySlider.dispatchEvent(new Event("change"))
-}
-
-codeformerFidelitySlider.addEventListener("input", updateCodeformerFidelity)
-codeformerFidelityField.addEventListener("input", updateCodeformerFidelitySlider)
-updateCodeformerFidelity()
-
 /********************* Latent Upscaler Steps **************************/
 function updateLatentUpscalerSteps() {
     latentUpscalerStepsField.value = latentUpscalerStepsSlider.value
@@ -1753,10 +1725,10 @@ function updateLoraAlpha() {
 }
 
 function updateLoraAlphaSlider() {
-    if (loraAlphaField.value < -2) {
+    if (loraAlphaField.value < 0) {
-        loraAlphaField.value = -2
+        loraAlphaField.value = 0
-    } else if (loraAlphaField.value > 2) {
+    } else if (loraAlphaField.value > 1) {
-        loraAlphaField.value = 2
+        loraAlphaField.value = 1
     }
 
     loraAlphaSlider.value = loraAlphaField.value * 100
@@ -2007,38 +1979,6 @@ resumeBtn.addEventListener("click", function() {
     document.body.classList.remove("wait-pause")
 })
 
-function tunnelUpdate(event) {
-    if ("cloudflare" in event) {
-        document.getElementById("cloudflare-off").classList.add("displayNone")
-        document.getElementById("cloudflare-on").classList.remove("displayNone")
-        cloudflareAddressField.innerHTML = event.cloudflare
-        document.getElementById("toggle-cloudflare-tunnel").innerHTML = "Stop"
-    } else {
-        document.getElementById("cloudflare-on").classList.add("displayNone")
-        document.getElementById("cloudflare-off").classList.remove("displayNone")
-        document.getElementById("toggle-cloudflare-tunnel").innerHTML = "Start"
-    }
-}
-
-document.getElementById("toggle-cloudflare-tunnel").addEventListener("click", async function() {
-    let command = "stop"
-    if (document.getElementById("toggle-cloudflare-tunnel").innerHTML == "Start") {
-        command = "start"
-    }
-    showToast(`Cloudflare tunnel ${command} initiated. Please wait.`)
-
-    let res = await fetch("/tunnel/cloudflare/" + command, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify({}),
-    })
-    res = await res.json()
-
-    console.log(`Cloudflare tunnel ${command} result:`, res)
-})
-
 /* Pause function */
 document.querySelectorAll(".tab").forEach(linkTabContents)
 

ui/media/js/parameters.js

@@ -11,12 +11,6 @@ var ParameterType = {
     custom: "custom",
 }
 
-/**
- * Element shortcuts
- */
-let parametersTable = document.querySelector("#system-settings-table")
-let networkParametersTable = document.querySelector("#system-settings-network-table")
-
 /**
  * JSDoc style
  * @typedef {object} Parameter
@@ -192,7 +186,6 @@ var PARAMETERS = [
         icon: "fa-network-wired",
         default: true,
         saveInAppConfig: true,
-        table: networkParametersTable,
     },
     {
         id: "listen_port",
@@ -205,7 +198,6 @@ var PARAMETERS = [
             return `<input id="${parameter.id}" name="${parameter.id}" size="6" value="9000" onkeypress="preventNonNumericalInput(event)">`
         },
         saveInAppConfig: true,
-        table: networkParametersTable,
     },
     {
         id: "use_beta_channel",
@@ -226,21 +218,6 @@ var PARAMETERS = [
         default: false,
         saveInAppConfig: true,
     },
-    {
-        id: "cloudflare",
-        type: ParameterType.custom,
-        label: "Cloudflare tunnel",
-        note: `<span id="cloudflare-off">Create a VPN tunnel to share your Easy Diffusion instance with your friends. This will
-               generate a web server address on the public Internet for your Easy Diffusion instance. </span>
-               <div id="cloudflare-on" class="displayNone"><div>This Easy Diffusion server is available on the Internet using the
-               address:</div><div><div id="cloudflare-address"></div><button id="copy-cloudflare-address">Copy</button></div></div>
-               <b>Anyone knowing this address can access your server.</b> The address of your server will change each time
-               you share a session.<br>
-               Uses <a href="https://try.cloudflare.com/" target="_blank">Cloudflare services</a>.`,
-        icon: ["fa-brands", "fa-cloudflare"],
-        render: () => '<button id="toggle-cloudflare-tunnel" class="primaryButton">Start</button>',
-        table: networkParametersTable,
-    }
 ]
 
 function getParameterSettingsEntry(id) {
@@ -289,6 +266,7 @@ function getParameterElement(parameter) {
     }
 }
 
+let parametersTable = document.querySelector("#system-settings .parameters-table")
 /**
  * fill in the system settings popup table
  * @param {Array<Parameter> | undefined} parameters
@@ -315,10 +293,7 @@ function initParameters(parameters) {
             noteElements.push(noteElement)
         }
 
-        if (typeof(parameter.icon) == "string") {
+        const icon = parameter.icon ? [createElement("i", undefined, ["fa", parameter.icon])] : []
-            parameter.icon = [parameter.icon]
-        }
-        const icon = parameter.icon ? [createElement("i", undefined, ["fa", ...parameter.icon])] : []
 
         const label = typeof parameter.label === "function" ? parameter.label(parameter) : parameter.label
         const labelElement = createElement("label", { for: parameter.id })
@@ -338,13 +313,7 @@ function initParameters(parameters) {
                 elementWrapper,
             ]
         )
-
+        parametersTable.appendChild(newrow)
-        let p = parametersTable
-        if (parameter.table) {
-            p = parameter.table
-        } 
-        p.appendChild(newrow)
-
         parameter.settingsEntry = newrow
     })
 }
@@ -698,25 +667,8 @@ saveSettingsBtn.addEventListener("click", function() {
     })
 
     const savePromise = changeAppConfig(updateAppConfigRequest)
-    showToast("Settings saved")
     saveSettingsBtn.classList.add("active")
     Promise.all([savePromise, asyncDelay(300)]).then(() => saveSettingsBtn.classList.remove("active"))
 })
 
-listenToNetworkField.addEventListener("change", debounce( ()=>{
-    saveSettingsBtn.click()
-}, 1000))
-
-listenPortField.addEventListener("change", debounce( ()=>{
-    saveSettingsBtn.click()
-}, 1000))
-
-let copyCloudflareAddressBtn = document.querySelector("#copy-cloudflare-address")
-let cloudflareAddressField = document.getElementById("cloudflare-address")
-
-copyCloudflareAddressBtn.addEventListener("click", (e) => {
-    navigator.clipboard.writeText(cloudflareAddressField.innerHTML)
-    showToast("Copied server address to clipboard")
-})
-
 document.addEventListener("system_info_update", (e) => setDeviceInfo(e.detail))

ui/media/js/searchable-models.js

@@ -38,8 +38,6 @@ class ModelDropdown {
     noneEntry //= ''
     modelFilterInitialized //= undefined
 
-    sorted //= true
-
     /* MIMIC A REGULAR INPUT FIELD */
     get parentElement() {
         return this.modelFilter.parentElement
@@ -85,11 +83,10 @@ class ModelDropdown {
 
     /* SEARCHABLE INPUT */
 
-    constructor(input, modelKey, noneEntry = "", sorted = true) {
+    constructor(input, modelKey, noneEntry = "") {
         this.modelFilter = input
         this.noneEntry = noneEntry
         this.modelKey = modelKey
-        this.sorted = sorted
 
         if (modelsOptions !== undefined) {
             // reuse models from cache (only useful for plugins, which are loaded after models)
@@ -97,8 +94,7 @@ class ModelDropdown {
             let modelKeys = Array.isArray(this.modelKey) ? this.modelKey : [this.modelKey]
             for (let i = 0; i < modelKeys.length; i++) {
                 let key = modelKeys[i]
-                let k = Array.isArray(modelsOptions[key]) ? modelsOptions[key] : [modelsOptions[key]]
+                this.inputModels.push(...modelsOptions[key])
-                this.inputModels.push(...k)
             }
             this.populateModels()
         }
@@ -106,12 +102,12 @@ class ModelDropdown {
             "refreshModels",
             this.bind(function(e) {
                 // reload the models
+                this.inputModels = modelsOptions[this.modelKey]
                 this.inputModels = []
                 let modelKeys = Array.isArray(this.modelKey) ? this.modelKey : [this.modelKey]
                 for (let i = 0; i < modelKeys.length; i++) {
                     let key = modelKeys[i]
-                    let k = Array.isArray(modelsOptions[key]) ? modelsOptions[key] : [modelsOptions[key]]
+                    this.inputModels.push(...modelsOptions[key])
-                    this.inputModels.push(...k)
                 }
                 this.populateModels()
             }, this)
@@ -569,15 +565,11 @@ class ModelDropdown {
         })
 
         const childFolderNames = Array.from(foldersMap.keys())
-        if (this.sorted) {
+        this.sortStringArray(childFolderNames)
-            this.sortStringArray(childFolderNames)
-        }
         const folderElements = childFolderNames.map((name) => foldersMap.get(name))
 
         const modelNames = Array.from(modelsMap.keys())
-        if (this.sorted) {
+        this.sortStringArray(modelNames)
-            this.sortStringArray(modelNames)
-        }
         const modelElements = modelNames.map((name) => modelsMap.get(name))
 
         if (modelElements.length && folderName) {

ui/media/js/utils.js

@@ -402,12 +402,12 @@ function debounce(func, wait, immediate) {
 
 function preventNonNumericalInput(e) {
     e = e || window.event
-    const charCode = typeof e.which == "undefined" ? e.keyCode : e.which
+    let charCode = typeof e.which == "undefined" ? e.keyCode : e.which
-    const charStr = String.fromCharCode(charCode)
+    let charStr = String.fromCharCode(charCode)
-    const newInputValue = `${e.target.value}${charStr}`
+    let re = e.target.getAttribute("pattern") || "^[0-9]+$"
-    const re = new RegExp(e.target.getAttribute("pattern") || "^[0-9]+$")
+    re = new RegExp(re)
 
-    if (!re.test(charStr) && !re.test(newInputValue)) {
+    if (!charStr.match(re)) {
         e.preventDefault()
     }
 }

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

@@ -1,326 +0,0 @@
-;(function(){
-    "use strict";
-    const PAPERSIZE = [
-        {id: "a3p",  width: 297, height: 420, unit: "mm"},
-        {id: "a3l",  width: 420, height: 297, unit: "mm"},
-        {id: "a4p",  width: 210, height: 297, unit: "mm"},
-        {id: "a4l",  width: 297, height: 210, unit: "mm"},
-        {id: "ll", width: 279, height: 216, unit: "mm"},
-        {id: "lp",  width: 216, height: 279, unit: "mm"},
-        {id: "hd", width: 1920, height: 1080, unit: "pixels"},
-        {id: "4k", width: 3840, height: 2160, unit: "pixels"},
-    ]
-
-    // ---- Register plugin
-    PLUGINS['IMAGE_INFO_BUTTONS'].push({ 
-        html: '<i class="fa-solid fa-table-cells-large"></i> Download tiled image',
-        on_click: onDownloadTiledImage,
-        filter: (req, img) => req.tiling != "none",
-    })
-
-    var thisImage
-
-    function onDownloadTiledImage(req, img) {
-        document.getElementById("download-tiled-image-dialog").showModal()
-        thisImage = new Image()
-        thisImage.src = img.src
-        thisImage.dataset["prompt"] = img.dataset["prompt"]
-    }
-
-    // ---- Add HTML
-    document.getElementById('container').lastElementChild.insertAdjacentHTML("afterend",
-        `<dialog id="download-tiled-image-dialog">
-            <h1>Download tiled image</h1>
-            <div class="download-tiled-image dtim-container">
-                <div class="download-tiled-image-top">
-                    <div class="tab-container">
-                       <span id="tab-image-tiles" class="tab active">
-                           <span>Number of tiles</small></span>
-                       </span>
-                       <span id="tab-image-size" class="tab">
-                           <span>Image dimensions</span>
-                       </span>
-                    </div>
-                    <div>
-                        <div id="tab-content-image-tiles" class="tab-content active">
-                            <div class="tab-content-inner">
-                                <label for="dtim1-width">Width:</label> <input id="dtim1-width" min="1" max="99" type="number" value="2">
-                                <label for="dtim1-height">Height:</label> <input id="dtim1-height" min="1" max="99" type="number" value="2">
-                            </div>
-                        </div>
-                        <div id="tab-content-image-size" class="tab-content">
-                            <div class="tab-content-inner">
-                                <div class="method-2-options">
-                                    <label for="dtim2-width">Width:</label> <input id="dtim2-width" size="3" value="1920">
-                                    <label for="dtim2-height">Height:</label> <input id="dtim2-height" size="3" value="1080">
-                                    <select id="dtim2-unit">
-                                        <option>pixels</option>
-                                        <option>mm</option>
-                                        <option>inches</option>
-                                    </select>
-                                </div>
-                                <div class="method-2-dpi">
-                                    <label for="dtim2-dpi">DPI:</label> <input id="dtim2-dpi" size="3" value="72">
-                                </div>
-                                <div class="method-2-paper">
-                                    <i>Some standard sizes:</i><br>
-                                    <button id="dtim2-a3p">A3 portrait</button><button id="dtim2-a3l">A3 landscape</button><br>
-                                    <button id="dtim2-a4p">A4 portrait</button><button id="dtim2-a4l">A4 landscape</button><br>
-                                    <button id="dtim2-lp">Letter portrait</button><button id="dtim2-ll">Letter landscape</button><br>
-                                    <button id="dtim2-hd">Full HD</button><button id="dtim2-4k">4K</button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="download-tiled-image-placement">
-                    <div class="tab-container">
-                        <span id="tab-image-placement" class="tab active">
-                            <span>Tile placement</span>
-                        </span>
-                    </div>
-                    <div>
-                        <div id="tab-content-image-placement" class="tab-content active">
-                            <div class="tab-content-inner">
-                                <img id="dtim-1tl" class="active" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA3BAMAAACiFTSCAAAAMFBMVEUCAgKIhobRz89vMJ7s6uo9PDx4d3ewra0bHR1dXV19NrLa2Nj+/f29u7uWlJQuLi7ws27qAAAACXBIWXMAAAsTAAALEwEAmpwYAAABlUlEQVQ4y7VUMU7DQBCckpYCJEpS0ByhcecuUZQUtvIHGku0vICSDtHkA9eltCylOEBKFInCRworXToK3kDJ7jpn2SYmgGESeWyPRuudvTugHTyC72momKDGMMJDLIhmgK+nWmuPXxtlxkhjExszRKqU6uRuTW7TYTwh6HTpR25+JLcngBJ5jL5wIecqu9nFbid3t27N7vhrtypqV2SfP4zc5pfu/Msb3P6U4fru1eXpVg7tcmnDZ1gb0s1ceAEcSPI3uM2B9xLf7Z3YLlfJ/WCppF1QbbqxeW0brlztjXzprBhJrW8nu4HWGlt/xz1qcrervfmT2ma3WxpTjfK5ZUioNg+VsUL+tiXuI8YJLrd8KHyENyaqPWC8QGiwwlJ4LtyvNtb9vFKrqZXXeebkrEiN3ZUNXHJnO3aJkxt2aH2gDRNTLdyzJvee1CZXUTSJrhA55itlfszUdqDrxCQmGIEu9KfFFCRJYnpIgyB4JJlPWM6cY6MjN+UW5MjdM7FKavF/pFbfRD9zv8rjBa6FT5EJn0HoA8lOiD4+8B3mAAAAAElFTkSuQmCC" />
-                                <img id="dtim-1tr" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA3BAMAAACiFTSCAAAAMFBMVEUCAgKIhobRz89vMJ7s6uo9PDx4d3ewra0bHR1dXV19NrLa2Nj+/f29u7uWlJQuLi7ws27qAAAACXBIWXMAAAsTAAALEwEAmpwYAAABoUlEQVQ4y61UsU7CUBQ9o6uGmJgwNSQOLS7dOndrGfwEDWnC4tQNB8duxoUfYGN86fZgIWy+iVUnwwYf4Oi9lxa0tFSpB9IDXM6775773gUaYWjbtoO+IrI1VsIKnjt2CYCllJqir7Wt7SlWWmn+m+t53sQbU5hAamtJrxRr/mppUnuZOgszOlgJK7gCUS93YVbzKqx2q9U2q71Mbf1Qbxc/qqadu7y509W7nX8Pt/K6JwwKO+HCGLRNKPy4oA9mkYUnwGeSJM9IBDknOJN+PNV2rEy9XyXLvaGcktuY0FBux9AP5rVYd96SofCsWFje0NJwUd2rUse/UTfLPTspd83iFFZZYY4xbKoRsKlmaypjjoaICA+4ZYrO8SJ8mfEV0PF9P0Tb94U3wj7eheaHJ3VZLKxbcs4P6uartz/nMYlKbFnzYtWe5ze0wtSjDd1Ph7iReheucS0aRYM78pwoiiDPUc6Dpg19S9N0ipYOgiClw5TqgN6I6aGD7S2RkcsbppnKbLPnPHt7VZOpxvN/cq1cHf9BbeFeqIsL4Wt8CN/gC1XPfwv6U6jJAAAAAElFTkSuQmCC" /><br>
-                                <img id="dtim-1bl" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA3BAMAAACiFTSCAAAAMFBMVEUCAgKIhobRz89vMJ7s6uo9PDx4d3ewra0bHR1dXV19NrLa2Nj+/f29u7uWlJQuLi7ws27qAAAACXBIWXMAAAsTAAALEwEAmpwYAAABjElEQVQ4y7WUsU7DMBCG/5GVoUiMMLC4ZcmWrVXVDq7yDiyRuvIEjGyIpS/graMVKYMBqVUkhoYOUTc2Bp6BEd+5qdI2SasGLpE/KZc/d76LD/i6JrvFPfMKGfMGDOCTGUMwA/SYA8yL7iEM8w2yzH1AHderh9D1alGuXmmtBaVGchFgQe8J69bOHZnIyCHsYu8AUkZRZLpYSClf0dAm4zCchGOEOWkNW7ggAO0+2QcY/SUS5ozZ+6uqNVHHR9Q8q1Bnm9+B1B17HdGxbDe1zn7sA1V7DskucbfmObOFb0LThrZTsjlGzHcw0iXcU6woQxFv9i3rah5UdSxvSa/+EMn6hp6iroy9+s/YL2mSjlxRE1fUkX2wZNqiPjrDTwmfDnbsjNeH0q9Y9ZRN2diJjeliJ+ksj+2v3W5j3d2N+R5b4T/fcjuvqppMvqfsdbqaxF7VCc3Vho9eUd0pZi6q1cpThemwdYB9NVVK2cy1NsLYmaqNNmZgZ6sQa7VPmWuavQG9ZkkjV+u42QH8BWe+iD71TSARAAAAAElFTkSuQmCC" />
-                                <img id="dtim-1br" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA3BAMAAACiFTSCAAAAMFBMVEUCAgKIhobRz89vMJ7s6uo9PDx4d3ewra0bHR1dXV19NrLa2Nj+/f29u7uWlJQuLi7ws27qAAAACXBIWXMAAAsTAAALEwEAmpwYAAABkklEQVQ4y7VULU/DUBQ9EgtZSEimliWIt2Lmnq5rJ/gJkKXJDGquCGQdwewPzE2+PPeGWeaomgVF6tgPmOTe2zWkox8LC6dLT/ZuTs9957UXPQbuhTxcCF/jU/gGYBpgLH/7yIQNYuHXctniS9hhWlU+Wh03qVX1wwt1+eGKyoZXl8iYFbdmlFIj4N1au0THBUFgLTLrAvphSjcXUPk0RLNocodbpiiC3GcFT4C+7/shur4vvBX28SG0+o/UTHNqrZnXe3uVrW3oKtScuVeUvZYTK3lvyq21pBYRHihzxjlehC/3fHXqgQ5SArapAI9C63w1XR3GUuw75neuN6otV++78SOyza9Dv/lAj1Yf5T061XsQrjnUdSpMoYZ5qLSQvgG7JEmekQgOOWk9sV2l6kxqT4V3Nw1zb7IMyVsvBIcb6+w3lpfn1V+Jw1Awr5tMOq/XqzVdf1Mr9tZ7701JzZ+ia1ab352z6mc6cGO52hiapWPnlFM0U51ximbqUGu90KSOabTyyCWi5UyYO5/n6pPwDYr8fwvXgN7jAAAAAElFTkSuQmCC" /> <br>
-                                <img id="dtim-1center" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA3BAMAAACiFTSCAAAAMFBMVEUBAQGPjY3Rz89DQ0O0sbHz8vJZJoFwbm6+vLxBHV10MqY6ODifnZ1XV1cdHR3c2trZIbFLAAAACXBIWXMAAAsTAAALEwEAmpwYAAACCElEQVQ4y7VVPWvjQBCVnZXt5JRT1LsQwwnS7YHrgLg6hTBsva4MSeUurX5CqqtTuXCVn6CAf0DgimvvJ4iFredmd2VZcqTYIWSap2V4+/HezMgDSAdgIw0cFhVeMQAPIAuUWfF44jAdOix8k8YsmCNXyEuGynzkQ4u68BE8LbKJsJGFDkvfYe6Lufe5ePi7unywUePY4Suhl4iMCaGlFOWQQGiRhw5Tc3b9MIiZe1Deehhkg3nXu5MirGW5NmnmkNjX9EFs1VKN7djgNg+bovae3a15cpg+ZIfquGP97J2h0viJ5cT6SoZaX+lspYyoX2doFBXjlyiaRtHV+XL5++5u+TiITExXQRR5XGeBQIkoyouNjadQSqm1Tn2pmg8bbe5NelFb0nQMKL25XxO7tsSoxmu/q80XbdXK/eZrs/2iR/OR4a53m1eO8ayPfWDJqHU2VuwywNbVnt6czflbttucVGOkmUbdUI2WSG0g0ZvepuNbiu22IM1NPAZ2uV2x7csnDf3FywFdhQPmttYUT6kkubv5D4+bWlOoFNWa5BRJHiJNDzTDQzUd21fqoaHdPaaO1/kp/d1mwwkdunfsIx2K7Q6lapmDIrVihqAsG41qiZ0tbq7ZFhw6jKsWtHPtz+z128zGT4c3z2cVXs5ujjn2773k9472j5vtf/pkYp2TKe/7E00A/gO7G7pwJRGqtAAAAABJRU5ErkJggg==" />
-                                <img id="dtim-4center" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA3BAMAAACiFTSCAAAAMFBMVEUBAQGbmppqLZZ8fHzRz8+LPMZ0MqXs6upTUVE+G1q5ublubm6iRedQInH9/Pze3NzAiv2WAAAACXBIWXMAAAsTAAALEwEAmpwYAAABuUlEQVQ4y6VVvU7CUBSmCEVQao0vQDrcWWcWhiYkDsICc3OS3pmhSbfiI7C6MfgAJo4sPoCDcSdhMGFDBhI24zn3tBjh2DTy3eEj9+P0/Pa05BtMrZQbzG7KJaZFIyLqrS82hqfOnszXnUquLFv3dvLOeiP57uT69teFfHcP5CKJ+QdyN0YsF5Ul8WpUI06SjmM4Ks0Mrk+Zn86Y70+YS8fha0VY2K8GL1XmwDHXnxj54y1GXgbwwNOBrT2lPNWiyFHIEitrhYdkDaB1ay/vsjY6yiiCJJMVykq0pkt+OPoQH44gGX8IskqtFYjWgODQQAwt8y1aAygPdN8GCkHt5LSoaTH75ylnRT0ON5cEtz4nvL81Dc8nlrm+wmEax9t4YQ/0MNRhn1iHYcuJt+PxOMoib5p8uGpySzAfUxbQKqcsSov9VmlRqSPyOHBR6Q9Sx9haKci3lvsNPGtyv8Hogc3c+nkFl3iwasNBOBz0q8yBk8RJvMRXsE3HrT8YTDK2Zs942kc29I6npbZi5ilZjZg/DpaHL++WqNDiypfzt+LfO3VTaO39c6dmsp9nPZJ9Z18i19r8+hJ9A3EAErhB3eXkAAAAAElFTkSuQmCC" /> <br>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="dtim-ok">
-                    <button class="primaryButton" id="dti-ok">Download</button>
-                </div>
-                <div class="dtim-newtab">
-                    <button class="primaryButton" id="dti-newtab">Open in new tab</button>
-                </div>
-                <div class="dtim-cancel">
-                    <button class="primaryButton" id="dti-cancel">Cancel</button>
-                </div>
-            </div>
-         </dialog>`)
-
-    let downloadTiledImageDialog = document.getElementById("download-tiled-image-dialog")
-    let dtim1_width = document.getElementById("dtim1-width")
-    let dtim1_height = document.getElementById("dtim1-height")
-    let dtim2_width = document.getElementById("dtim2-width")
-    let dtim2_height = document.getElementById("dtim2-height")
-    let dtim2_unit = document.getElementById("dtim2-unit")
-    let dtim2_dpi = document.getElementById("dtim2-dpi")
-    let tabTiledTilesOptions = document.getElementById("tab-image-tiles")
-    let tabTiledSizeOptions = document.getElementById("tab-image-size")
-
-    linkTabContents(tabTiledTilesOptions)
-    linkTabContents(tabTiledSizeOptions)
-
-    prettifyInputs(downloadTiledImageDialog)
-
-    // ---- Predefined image dimensions
-    PAPERSIZE.forEach( function(p) {
-        document.getElementById("dtim2-" + p.id).addEventListener("click", (e) => {
-            dtim2_unit.value = p.unit
-            dtim2_width.value = p.width
-            dtim2_height.value = p.height
-        })
-    })
-
-    // ---- Close popup
-    document.getElementById("dti-cancel").addEventListener("click", (e) => downloadTiledImageDialog.close())
-    downloadTiledImageDialog.addEventListener('click', function (event) {
-        var rect = downloadTiledImageDialog.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) {
-            downloadTiledImageDialog.close();
-        }
-    });
-
-    // ---- Stylesheet
-    const styleSheet = document.createElement("style")
-    styleSheet.textContent = `
-        dialog {
-          background: var(--background-color2);
-          color: var(--text-color);
-          border-radius: 7px;
-          border: 1px solid var(--background-color3);
-        }
-
-        dialog::backdrop {
-          background: rgba(0, 0, 0, 0.5);
-        }
-
-
-        button[disabled] {
-          opacity: 0.5;
-        }
-
-        .method-2-dpi {
-          margin-top: 1em;
-          margin-bottom: 1em;
-        }
-
-        .method-2-paper button {
-          width: 10em;
-          padding: 4px;
-          margin: 4px;
-        }
-        
-        .download-tiled-image .tab-content {
-          background: var(--background-color1);
-          border-radius: 3pt;
-        }
-
-        .dtim-container {  display: grid;
-          grid-template-columns: auto auto;
-          grid-template-rows: auto auto;
-          gap: 1em 0px;
-          grid-auto-flow: row;
-          grid-template-areas:
-            "dtim-tab dtim-tab dtim-plc"
-            "dtim-ok dtim-newtab dtim-cancel";
-        }
-
-        .download-tiled-image-top {
-          justify-self: center;
-          grid-area: dtim-tab;
-        }
-
-        .download-tiled-image-placement {
-          justify-self: center;
-          grid-area: dtim-plc;
-          margin-left: 1em;
-        }
-
-        .dtim-ok {
-          justify-self: center;
-          align-self: start;
-          grid-area: dtim-ok;
-        }
-
-        .dtim-newtab {
-          justify-self: center;
-          align-self: start;
-          grid-area: dtim-newtab;
-        }
-
-        .dtim-cancel {
-          justify-self: center;
-          align-self: start;
-          grid-area: dtim-cancel;
-        }
-
-        #tab-content-image-placement img {
-          margin: 4px;
-          opacity: 0.3;
-          border: solid 2px var(--background-color1);
-        }
-
-        #tab-content-image-placement img:hover {
-          margin: 4px;
-          opacity: 1;
-          border: solid 2px var(--accent-color);
-          filter: brightness(2);
-        }
-
-        #tab-content-image-placement img.active {
-          margin: 4px;
-          opacity: 1;
-          border: solid 2px var(--background-color1);
-        }
-
-    `
-    document.head.appendChild(styleSheet)
-
-    // ---- Placement widget
-
-    function updatePlacementWidget(event) {
-        document.querySelector("#tab-content-image-placement img.active").classList.remove("active")
-        event.target.classList.add("active")
-    }
-
-    document.querySelectorAll("#tab-content-image-placement img").forEach(
-        (i) => i.addEventListener("click", updatePlacementWidget)
-    )
-
-    function getPlacement() {
-        return document.querySelector("#tab-content-image-placement img.active").id.substr(5)
-    }
-        
-    // ---- Make the image
-    function downloadTiledImage(image, width, height, offsetX=0, offsetY=0, new_tab=false) {
-
-        const canvas = document.createElement('canvas')
-        canvas.width = width
-        canvas.height = height
-        const context = canvas.getContext('2d')
-
-        const w = image.width
-        const h = image.height
-
-        for (var x = offsetX; x < width; x += w) {
-            for (var y = offsetY; y < height; y += h) {
-                context.drawImage(image, x, y, w, h)
-            }
-        }
-        if (new_tab) {
-            var newTab = window.open("")
-            newTab.document.write(`<html><head><title>${width}×${height}, "${image.dataset["prompt"]}"</title></head><body><img src="${canvas.toDataURL()}"></body></html>`)
-        } else {
-            const link = document.createElement('a')
-            link.href = canvas.toDataURL()
-            link.download = image.dataset["prompt"].replace(/[^a-zA-Z0-9]+/g, "-").substr(0,22)+crypto.randomUUID()+".png"
-            link.click()
-        }
-    }
-
-    function onDownloadTiledImageClick(e, newtab=false) {
-        var width, height, offsetX, offsetY
-
-        if (isTabActive(tabTiledTilesOptions)) {
-            width = thisImage.width * dtim1_width.value
-            height = thisImage.height * dtim1_height.value
-        } else {
-            if ( dtim2_unit.value == "pixels" ) {
-                width = dtim2_width.value
-                height= dtim2_height.value
-            } else if ( dtim2_unit.value == "mm" ) {
-                width = Math.floor( dtim2_width.value * dtim2_dpi.value / 25.4 )
-                height = Math.floor( dtim2_height.value * dtim2_dpi.value / 25.4 )
-            } else { // inch
-                width = Math.floor( dtim2_width.value * dtim2_dpi.value )
-                height = Math.floor( dtim2_height.value * dtim2_dpi.value )
-            }
-        }
-
-        var placement = getPlacement()
-        if (placement == "1tl") {
-            offsetX = 0
-            offsetY = 0
-        } else if (placement == "1tr") {
-            offsetX = width - thisImage.width * Math.ceil( width / thisImage.width )
-            offsetY = 0
-        } else if (placement == "1bl") {
-            offsetX = 0
-            offsetY = height - thisImage.height * Math.ceil( height / thisImage.height )
-        } else if (placement == "1br") {
-            offsetX = width - thisImage.width * Math.ceil( width / thisImage.width )
-            offsetY = height - thisImage.height * Math.ceil( height / thisImage.height )
-        } else if (placement == "4center") {
-            offsetX = width/2 - thisImage.width * Math.ceil( width/2 / thisImage.width )
-            offsetY = height/2 - thisImage.height * Math.ceil( height/2 / thisImage.height )
-        } else if (placement == "1center") {
-            offsetX = width/2 - thisImage.width/2 - thisImage.width * Math.ceil( (width/2 - thisImage.width/2) / thisImage.width )
-            offsetY = height/2 - thisImage.height/2 - thisImage.height * Math.ceil( (height/2 - thisImage.height/2) / thisImage.height )
-        }
-        downloadTiledImage(thisImage, width, height, offsetX, offsetY, newtab)
-        downloadTiledImageDialog.close()
-    }
-
-    document.getElementById("dti-ok").addEventListener("click", onDownloadTiledImageClick)
-    document.getElementById("dti-newtab").addEventListener("click", (e) => onDownloadTiledImageClick(e,true))
-
-})()