Merge branch 'beta' into mvemb

scripts/check_modules.py

@@ -18,7 +18,7 @@ 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.131",
+    "sdkit": "1.0.134",
     "stable-diffusion-sdkit": "2.1.4",
     "rich": "12.6.0",
     "uvicorn": "0.19.0",

ui/index.html

@@ -584,6 +584,10 @@
             </div>
         </div>
         <div>
+            <button id="embeddings-action-collapsibles-btn" class="tertiaryButton smallButton">
+                <i class="embeddings-action-icon fa-solid fa-square-plus"></i>
+                <span class="embeddings-action-text">Expand Categories</span>
+            </button>
             <i class="fa-solid fa-magnifying-glass"></i>
             <input id="embeddings-search-box" type="text" spellcheck="false" autocomplete="off" placeholder="Search...">
             <span style="float:right;"><label>Mode:</label>&nbsp;<select id="embeddings-mode"><option value="insert">Insert at cursor position</option><option value="append">Append at the end</option></select>

ui/media/css/main.css

@@ -1656,7 +1656,11 @@ body.wait-pause {
 
 #embeddings-list {
     height: 70vH;
-    width: 40vW;
+    width: 50vW;
+    margin-left: 0px;
+    margin-right: 0px;
+    padding-left: 0px;
+    padding-right: 0px;
     overflow-y: scroll;
 }
 
@@ -1665,12 +1669,46 @@ body.wait-pause {
     margin-bottom: 2px;
 }
 
+#embeddings-list .collapsible {
+    background: var(--background-color3);
+    margin: 0px;
+    padding: 0.5em;
+    position: sticky;
+}
+
+#embeddings-list .embedding-category:nth-child(odd) .collapsible::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.02);
+    opacity: 1;
+    pointer-events: none;
+}
+
+#embeddings-list .collapsible-content {
+    padding-top:    0.4em;
+    padding-bottom: 0.4em;
+}
+
 #embeddings-list::-webkit-scrollbar-thumb {
     background: var(--background-color3);
 }
 
 .model_entry .model_name {
-    width: 65%;
+    width: 73%;
+}
+
+.model_entry {
+    position: relative;
+}
+
+.model_entry .remove_model_btn {
+    position: absolute;
+    left: -23pt;
+    top: 4pt;
 }
 
 .split-toolbar {  display: grid;

ui/media/js/image-modifiers.js

@@ -425,27 +425,11 @@ function checkIfClickedOutsideDropdownElem(e) {
 }
 
 function collapseAllModifierCategory() {
-    const collapsibleElems = editorModifierEntries.querySelectorAll(".modifier-category .collapsible"); // needs to have ";"
-
-    [...collapsibleElems].forEach((elem) => {
-        const isActive =  elem.classList.contains("active")
-
-        if(isActive) {
-            elem?.click()
-        }
-    })
+    collapseAll(".modifier-category .collapsible")
 }
 
 function expandAllModifierCategory() {
-    const collapsibleElems = editorModifierEntries.querySelectorAll(".modifier-category .collapsible"); // needs to have ";"
-
-    [...collapsibleElems].forEach((elem) => {
-        const isActive =  elem.classList.contains("active")
-
-        if (!isActive) {
-            elem?.click()
-        }
-    })
+    expandAll(".modifier-category .collapsible")
 }
 
 customModifiersTextBox.addEventListener("change", saveCustomModifiers)

ui/media/js/main.js

@@ -120,8 +120,10 @@ let embeddingsDialogCloseBtn = embeddingsDialog.querySelector("#embeddings-dialo
 let embeddingsSearchBox = document.querySelector("#embeddings-search-box")
 let embeddingsList = document.querySelector("#embeddings-list")
 let embeddingsModeField = document.querySelector("#embeddings-mode")
+
 let positiveEmbeddingText = document.querySelector("#positive-embedding-text")
 let negativeEmbeddingText = document.querySelector("#negative-embedding-text")
+let embeddingsCollapsiblesBtn = document.querySelector("#embeddings-action-collapsibles-btn")
 
 let makeImageBtn = document.querySelector("#makeImage")
 let stopImageBtn = document.querySelector("#stopImage")
@@ -907,6 +909,22 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
                              <a href="https://www.ibm.com/docs/en/opw/8.2.0?topic=tuning-optional-increasing-paging-file-size-windows-computers" target="_blank">Windows</a> or
                              <a href="https://linuxhint.com/increase-swap-space-linux/" target="_blank">Linux</a>.<br/>
                             3. Try restarting your computer.<br/>`
+                } else if (msg.includes("RuntimeError: output with shape [320, 320] doesn't match the broadcast shape")) {
+                    msg += `<br/><br/>
+                            <b>Reason</b>: You tried to use a LORA that was trained for a different Stable Diffusion model version!
+                            <br/><br/>
+                            <b>Suggestions</b>:
+                            <br/>
+                            Try to use a different model or a different LORA.`
+                } else if (msg.includes("Tensor on device cuda:0 is not on the expected device meta")) {
+                    msg += `<br/><br/>
+                            <b>Reason</b>: Due to some software issues, embeddings currently don't work with the "Low" memory profile.
+                            <br/><br/>
+                            <b>Suggestions</b>:
+                            <br/>
+                            1. Set the memory profile to "Balanced"<br/>
+                            2. Remove the embeddings from the prompt and the negative prompt<br/>
+                            3. Check whether the plugins you're using change the memory profile automatically.`
                 }
             } else {
                 msg = `Unexpected Read Error:<br/><pre>StepUpdate: ${JSON.stringify(stepUpdate, undefined, 4)}</pre>`
@@ -2153,7 +2171,7 @@ function updateEmbeddingsList(filter = "") {
             } else {
                 let subdir = html(m[1], prefix + m[0] + "/", filter)
                 if (subdir != "") {
-                    folders += `<h4>${prefix}${m[0]}</h4>` + subdir
+                    folders += `<div class="embedding-category"><h4 class="collapsible">${prefix}${m[0]}</h4><div class="collapsible-content">` + subdir + '</div></div>'
                 }
             }
         })
@@ -2200,6 +2218,10 @@ function updateEmbeddingsList(filter = "") {
     embeddingsList.querySelectorAll("button").forEach((b) => {
         b.addEventListener("click", onButtonClick)
     })
+    createCollapsibles(embeddingsList)
+    if (filter != "") {
+        embeddingsExpandAll()
+    }
 }
 
 function showEmbeddingDialog() {
@@ -2227,6 +2249,51 @@ embeddingsSearchBox.addEventListener("input", (e) => {
 modalDialogCloseOnBackdropClick(embeddingsDialog)
 makeDialogDraggable(embeddingsDialog)
 
+const collapseText = "Collapse Categories"
+const expandText = "Expand Categories"
+
+const collapseIconClasses = ["fa-solid", "fa-square-minus"]
+const expandIconClasses = ["fa-solid", "fa-square-plus"]
+
+function embeddingsCollapseAll() {
+    const btnElem = embeddingsCollapsiblesBtn
+
+    const iconElem = btnElem.querySelector(".embeddings-action-icon")
+    const textElem = btnElem.querySelector(".embeddings-action-text")
+    collapseAll("#embeddings-list .collapsible")
+
+    collapsiblesBtnState = false
+
+    collapseIconClasses.forEach((c) => iconElem.classList.remove(c))
+    expandIconClasses.forEach((c) => iconElem.classList.add(c))
+
+    textElem.innerText = expandText
+}
+
+function embeddingsExpandAll() {
+    const btnElem = embeddingsCollapsiblesBtn
+
+    const iconElem = btnElem.querySelector(".embeddings-action-icon")
+    const textElem = btnElem.querySelector(".embeddings-action-text")
+    expandAll("#embeddings-list .collapsible")
+
+    collapsiblesBtnState = true
+
+    expandIconClasses.forEach((c) => iconElem.classList.remove(c))
+    collapseIconClasses.forEach((c) => iconElem.classList.add(c))
+
+    textElem.innerText = collapseText
+}
+
+embeddingsCollapsiblesBtn.addEventListener("click", (e) => {
+    if (collapsiblesBtnState) {
+        embeddingsCollapseAll()
+    } else {
+        embeddingsExpandAll()
+    }
+})
+
+
 if (testDiffusers.checked) {
     document.getElementById("embeddings-container").classList.remove("displayNone")
 }
@@ -2275,6 +2342,8 @@ function addModelEntry(modelContainer, modelsList, modelType, defaultValue, stre
     let entry = [modelName, modelStrength, modelElement]
 
     let removeBtn = document.createElement("button")
+    removeBtn.className = "remove_model_btn"
+    removeBtn.setAttribute("title", "Remove model")
     removeBtn.innerHTML = '<i class="fa-solid fa-minus"></i>'
 
     if (modelsList.length === 0) {

ui/media/js/utils.js

@@ -129,6 +129,31 @@ function tryLoadOldCollapsibles() {
     return null
 }
 
+function collapseAll(selector) {
+    const collapsibleElems = document.querySelectorAll(selector); // needs to have ";"
+
+    [...collapsibleElems].forEach((elem) => {
+        const isActive =  elem.classList.contains("active")
+
+        if(isActive) {
+            elem?.click()
+        }
+    })
+}
+
+function expandAll(selector) {
+    const collapsibleElems = document.querySelectorAll(selector); // needs to have ";"
+
+    [...collapsibleElems].forEach((elem) => {
+        const isActive =  elem.classList.contains("active")
+
+        if (!isActive) {
+            elem?.click()
+        }
+    })
+}
+
+
 function permute(arr) {
     let permutations = []
     let n = arr.length