Merge branch 'beta' into textualinv

scripts/get_config.py

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

ui/easydiffusion/app.py

@@ -102,7 +102,13 @@ def init():
 
 
 def getConfig(default_val=APP_CONFIG_DEFAULTS):
-    config_yaml_path = os.path.join(CONFIG_DIR, "config.yaml")
+    config_yaml_path = os.path.join(CONFIG_DIR, "..", "config.yaml")
+
+    # migrate the old config yaml location
+    config_legacy_yaml = os.path.join(CONFIG_DIR, "config.yaml")
+    if os.path.isfile(config_legacy_yaml):
+        shutil.move(config_legacy_yaml, config_yaml_path)
+
     if os.path.isfile(config_yaml_path):
         try:
             yaml = YAML()
@@ -133,8 +139,11 @@ def getConfig(default_val=APP_CONFIG_DEFAULTS):
                 config = json.load(f)
             # Save config in new format
             setConfig(config)
-            shutil.move(config_json_path, config_json_path + ".bak")
-            log.info("Saved old config.json as config.json.bak")
+
+            with open(config_json_path + ".txt", "w") as f:
+                f.write("Moved to config.yaml inside the Easy Diffusion folder. You can open it in any text editor.")
+            os.remove(config_json_path)
+
             return getConfig(default_val)
         except Exception as e:
             log.warn(traceback.format_exc())
@@ -143,7 +152,7 @@ def getConfig(default_val=APP_CONFIG_DEFAULTS):
 
 def setConfig(config):
     try:  # config.yaml
-        config_yaml_path = os.path.join(CONFIG_DIR, "config.yaml")
+        config_yaml_path = os.path.join(CONFIG_DIR, "..", "config.yaml")
         yaml = YAML()
 
         if not hasattr(config, "_yaml_comment"):
@@ -158,8 +167,19 @@ def setConfig(config):
 
                 config = commented_config
         yaml.indent(mapping=2, sequence=4, offset=2)
-        with open(config_yaml_path, "w", encoding="utf-8") as f:
+
+        try:
+            f = open(config_yaml_path + ".tmp", "w", encoding="utf-8")
             yaml.dump(config, f)
+        finally:
+            f.close()  # do this explicitly to avoid NUL bytes (possible rare bug when using 'with')
+
+        # verify that the new file is valid, and only then overwrite the old config file
+        # helps prevent the rare NUL bytes error from corrupting the config file
+        yaml = YAML()
+        with open(config_yaml_path + ".tmp", "r", encoding="utf-8") as f:
+            yaml.load(f)
+        shutil.move(config_yaml_path + ".tmp", config_yaml_path)
     except:
         log.error(traceback.format_exc())
 

ui/index.html

@@ -316,7 +316,7 @@
             <div id="preview-content">
                 <div id="preview-tools" class="displayNone">
                     <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can icon"></i> Clear All</button>
-                    <button class="tertiaryButton" id="show-download-popup"><i class="fa-solid fa-download"></i> Download images</button>
+                    <button class="tertiaryButton" id="show-download-dialog"><i class="fa-solid fa-download"></i> Download images</button>
                     <div class="display-settings">
                         <button id="undo" class="displayNone primaryButton">
                             Undo <i class="fa-solid fa-rotate-left icon"></i>
@@ -467,31 +467,37 @@
         </div>
     </div>
 
-    <div class="popup" id="download-images-popup">
-        <div>
-            <i class="close-button fa-solid fa-xmark"></i>
-            <h1>Download all images</h1>
-            <div class="parameters-table">
-                <div>
-                    <div><i class="fa fa-file-zipper"></i></div>
-                    <div><label for="theme">Download as a ZIP file</label><small>Instead of downloading individual files, generate one zip file with all images</small></div>
-                    <div><div class="input-toggle"><input id="zip_toggle" name="zip_toggle" checked="" type="checkbox"><label for="zip_toggle"></label></div></div>
-                </div>
-                <div id="download-add-folders">
-                    <div><i class="fa fa-folder-tree"></i></div>
-                    <div><label for="theme">Add per-job folders</label><small>Place images into job folders</small></div>
-                    <div><div class="input-toggle"><input id="tree_toggle" name="tree_toggle" checked="" type="checkbox"><label for="tree_toggle"></label></div></div>
-                </div>
-                <div>
-                    <div><i class="fa fa-sliders"></i></div>
-                    <div><label for="theme">Add metadata files</label><small>For each image, also download a JSON file with all the settings used to generate the image</small></div>
-                    <div><div class="input-toggle"><input id="json_toggle" name="json_toggle" checked="" type="checkbox"><label for="json_toggle"></label></div></div>
-                </div>
+    <dialog id="download-images-dialog">
+        <div class="dialog-header">
+            <div class="dialog-header-left">
+                <h4>Download all images</h4>
+                <span></span>
             </div>
-            <br/>
+            <div>
+                <i id="download-images-close-button" class="fa-solid fa-xmark fa-lg"></i>
+            </div>
+        </div>
+        <div class="parameters-table">
+            <div>
+                <div><i class="fa fa-file-zipper"></i></div>
+                <div><label for="theme">Download as a ZIP file</label><small>Instead of downloading individual files, generate one zip file with all images</small></div>
+                <div><div class="input-toggle"><input id="zip_toggle" name="zip_toggle" checked="" type="checkbox"><label for="zip_toggle"></label></div></div>
+            </div>
+            <div id="download-add-folders">
+                <div><i class="fa fa-folder-tree"></i></div>
+                <div><label for="theme">Add per-job folders</label><small>Place images into job folders</small></div>
+                <div><div class="input-toggle"><input id="tree_toggle" name="tree_toggle" checked="" type="checkbox"><label for="tree_toggle"></label></div></div>
+            </div>
+            <div>
+                <div><i class="fa fa-sliders"></i></div>
+                <div><label for="theme">Add metadata files</label><small>For each image, also download a JSON file with all the settings used to generate the image</small></div>
+                <div><div class="input-toggle"><input id="json_toggle" name="json_toggle" checked="" type="checkbox"><label for="json_toggle"></label></div></div>
+            </div>
+        </div>
+        <div class="center">
             <button id="save-all-images" class="primaryButton"><i class="fa-solid fa-images"></i> Start download</button>
         </div>
-    </div>
+    </dialog>
     <div id="save-settings-config" class="popup">
         <div>
             <i class="close-button fa-solid fa-xmark"></i>

ui/media/css/main.css

@@ -485,7 +485,7 @@ dialog {
 }
 
 dialog::backdrop {
-    background: rgba(0, 0, 0, 0.5);
+    background: var(--backdrop-color);
 }
 
 dialog > div {
@@ -1448,10 +1448,18 @@ button#save-system-settings-btn {
     line-height: 200%;
 }
 
-#download-images-popup .parameters-table > div {
+#download-images-dialog .parameters-table > div {
     background: var(--background-color1);
 }
 
+.center {
+    text-align: center;
+}
+
+.fa-xmark {
+    cursor: pointer;;
+}
+
 /* SCROLLBARS */
 :root {
     --scrollbar-width: 14px;

ui/media/css/themes.css

@@ -1,4 +1,4 @@
-:root {
+:root, ::backdrop {
     --main-hue: 222;
 	--main-saturation: 4%;
 	--value-base: 13%;

ui/media/js/image-modifiers.js

@@ -565,12 +565,6 @@ 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();
-    }
-});
+modalDialogCloseOnBackdropClick(modifierSettingsDialog)
+makeDialogDraggable(modifierSettingsDialog)
 

ui/media/js/main.js

@@ -138,9 +138,10 @@ let initialText = document.querySelector("#initial-text")
 let versionText = document.querySelector("#version")
 let previewTools = document.querySelector("#preview-tools")
 let clearAllPreviewsBtn = document.querySelector("#clear-all-previews")
-let showDownloadPopupBtn = document.querySelector("#show-download-popup")
-let saveAllImagesPopup = document.querySelector("#download-images-popup")
+let showDownloadDialogBtn = document.querySelector("#show-download-dialog")
+let saveAllImagesDialog = document.querySelector("#download-images-dialog")
 let saveAllImagesBtn = document.querySelector("#save-all-images")
+let saveAllImagesCloseBtn = document.querySelector("#download-images-close-button")
 let saveAllZipToggle = document.querySelector("#zip_toggle")
 let saveAllTreeToggle = document.querySelector("#tree_toggle")
 let saveAllJSONToggle = document.querySelector("#json_toggle")
@@ -1509,9 +1510,10 @@ clearAllPreviewsBtn.addEventListener("click", (e) => {
 })
 
 /* Download images popup */
-showDownloadPopupBtn.addEventListener("click", (e) => {
-    saveAllImagesPopup.classList.add("active")
-})
+showDownloadDialogBtn.addEventListener("click", (e) => { saveAllImagesDialog.showModal() }) 
+saveAllImagesCloseBtn.addEventListener("click", (e) => { saveAllImagesDialog.close() })
+modalDialogCloseOnBackdropClick(saveAllImagesDialog)
+makeDialogDraggable(saveAllImagesDialog)
 
 saveAllZipToggle.addEventListener("change", (e) => {
     if (saveAllZipToggle.checked) {

ui/media/js/utils.js

@@ -1071,3 +1071,58 @@ async function deleteKeys(keyToDelete) {
         });
     }
 }
+
+function modalDialogCloseOnBackdropClick(dialog) {
+    dialog.addEventListener('mousedown', function (event) {
+        var rect = dialog.getBoundingClientRect()
+        var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
+          && rect.left <= event.clientX && event.clientX <= rect.left + rect.width)
+        if (!isInDialog) {
+            dialog.close()
+        }
+    })
+}
+
+function makeDialogDraggable(element) {
+    element.querySelector(".dialog-header").addEventListener('mousedown', (function() {
+        let deltaX=0
+        let deltaY=0
+        let dragStartX=0
+        let dragStartY=0
+        let oldTop=0
+        let oldLeft=0
+
+        function dlgDragStart(e) {
+            e = e || window.event;
+            const d = e.target.closest("dialog")
+            e.preventDefault();
+            dragStartX = e.clientX;
+            dragStartY = e.clientY;
+            oldTop = parseInt(d.style.top)
+            oldLeft = parseInt(d.style.left)
+            if (isNaN(oldTop)) { oldTop=0 }
+            if (isNaN(oldLeft)) { oldLeft=0 }
+            document.addEventListener('mouseup', dlgDragClose);
+            document.addEventListener('mousemove', dlgDrag);
+        }
+
+        function dlgDragClose(e) {
+            document.removeEventListener('mouseup', dlgDragClose);
+            document.removeEventListener('mousemove', dlgDrag);
+        }
+
+        function dlgDrag(e) {
+            e = e || window.event;
+            const d = e.target.closest("dialog")
+            e.preventDefault();
+            deltaX = dragStartX - e.clientX;
+            deltaY = dragStartY - e.clientY;
+            d.style.left = `${oldLeft-2*deltaX}px`
+            d.style.top  = `${oldTop-2*deltaY}px`
+        }
+
+        return dlgDragStart
+    })() )
+}
+
+

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

@@ -35,7 +35,7 @@
                    <h4>Download tiled image</h4>
                    <span>Generate a larger image from this tile</span>
                </div>
-               <div id="modifier-settings-header-right">
+               <div id="download-header-right">
                    <i id="downnload-tiled-close-button" class="fa-solid fa-xmark fa-lg"></i>
                </div>
            </div>
@@ -139,14 +139,8 @@
     // ---- Close popup
     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) {
-        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();
-        }
-    });
+    modalDialogCloseOnBackdropClick(downloadTiledImageDialog)
+    makeDialogDraggable(downloadTiledImageDialog)
 
     // ---- Stylesheet
     const styleSheet = document.createElement("style")