diff --git a/scripts/check_modules.py b/scripts/check_modules.py index 8de1ff09..03e50db0 100644 --- a/scripts/check_modules.py +++ b/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", diff --git a/ui/index.html b/ui/index.html index e89ef1d4..ea244f93 100644 --- a/ui/index.html +++ b/ui/index.html @@ -584,6 +584,10 @@
+   diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 53eb1a6d..7506c46f 100644 --- a/ui/media/css/main.css +++ b/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; diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js index 03dc8b56..12952cad 100644 --- a/ui/media/js/image-modifiers.js +++ b/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) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 58614831..0b936066 100644 --- a/ui/media/js/main.js +++ b/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) { Windows or Linux.
3. Try restarting your computer.
` + } else if (msg.includes("RuntimeError: output with shape [320, 320] doesn't match the broadcast shape")) { + msg += `

+ Reason: You tried to use a LORA that was trained for a different Stable Diffusion model version! +

+ Suggestions: +
+ 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 += `

+ Reason: Due to some software issues, embeddings currently don't work with the "Low" memory profile. +

+ Suggestions: +
+ 1. Set the memory profile to "Balanced"
+ 2. Remove the embeddings from the prompt and the negative prompt
+ 3. Check whether the plugins you're using change the memory profile automatically.` } } else { msg = `Unexpected Read Error:
StepUpdate: ${JSON.stringify(stepUpdate, undefined, 4)}
` @@ -2153,7 +2171,7 @@ function updateEmbeddingsList(filter = "") { } else { let subdir = html(m[1], prefix + m[0] + "/", filter) if (subdir != "") { - folders += `

${prefix}${m[0]}

` + subdir + folders += `

${prefix}${m[0]}

` + subdir + '
' } } }) @@ -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 = '' if (modelsList.length === 0) { diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js index bbacbb47..9db0d1cc 100644 --- a/ui/media/js/utils.js +++ b/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