|
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index c897549a..afe5726a 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -906,6 +906,10 @@ div.img-preview img {
white-space: nowrap;
}
+#editor-settings-entries table {
+ width: 93%;
+}
+
#negative_prompt {
width: 100%;
}
@@ -1680,7 +1684,7 @@ body.wait-pause {
}
.model_entry .model_name {
- width: 70%;
+ width: 65%;
}
.diffusers-disabled-on-startup .diffusers-restart-needed {
diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js
index 1ff51e2e..670fee0d 100644
--- a/ui/media/js/auto-save.js
+++ b/ui/media/js/auto-save.js
@@ -16,9 +16,6 @@ const SETTINGS_IDS_LIST = [
"clip_skip",
"vae_model",
"hypernetwork_model",
- "lora_model_0",
- "lora_model_1",
- "lora_model_2",
"sampler_name",
"width",
"height",
@@ -26,9 +23,6 @@ const SETTINGS_IDS_LIST = [
"guidance_scale",
"prompt_strength",
"hypernetwork_strength",
- "lora_alpha_0",
- "lora_alpha_1",
- "lora_alpha_2",
"tiling",
"output_format",
"output_quality",
diff --git a/ui/media/js/dnd.js b/ui/media/js/dnd.js
index 7128bc69..3cca985d 100644
--- a/ui/media/js/dnd.js
+++ b/ui/media/js/dnd.js
@@ -292,6 +292,11 @@ const TASK_MAPPING = {
use_lora_model: {
name: "LoRA model",
setUI: (use_lora_model) => {
+ // create rows
+ for (let i = loraModels.length; i < use_lora_model.length; i++) {
+ createLoraEntry()
+ }
+
use_lora_model.forEach((model_name, i) => {
let field = loraModels[i][0]
const oldVal = field.value
@@ -304,9 +309,13 @@ const TASK_MAPPING = {
})
// clear the remaining entries
+ let container = document.querySelector("#lora_model_container .model_entries")
for (let i = use_lora_model.length; i < loraModels.length; i++) {
- loraModels[i][0].value = ""
+ let modelEntry = loraModels[i][2]
+ container.removeChild(modelEntry)
}
+
+ loraModels.splice(use_lora_model.length)
},
readUI: () => {
let values = loraModels.map((e) => e[0].value)
@@ -323,15 +332,23 @@ const TASK_MAPPING = {
lora_alpha: {
name: "LoRA Strength",
setUI: (lora_alpha) => {
+ for (let i = loraModels.length; i < lora_alpha.length; i++) {
+ createLoraEntry()
+ }
+
lora_alpha.forEach((model_strength, i) => {
let field = loraModels[i][1]
field.value = model_strength
})
// clear the remaining entries
+ let container = document.querySelector("#lora_model_container .model_entries")
for (let i = lora_alpha.length; i < loraModels.length; i++) {
- loraModels[i][1].value = 0
+ let modelEntry = loraModels[i][2]
+ container.removeChild(modelEntry)
}
+
+ loraModels.splice(lora_alpha.length)
},
readUI: () => {
let models = loraModels.filter((e) => e[0].value.trim() !== "")
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 70d27fd5..d2412a43 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -2242,41 +2242,69 @@ promptField.focus()
promptField.selectionStart = promptField.value.length
// multi-models
-function addModelEntry(i, modelContainer, modelsList, modelType, defaultValue, strengthStep) {
- let nameId = modelType + "_model_" + i
- let strengthId = modelType + "_alpha_" + i
+let modelCount = 0
- const modelEntry = document.createElement("div")
- modelEntry.className = "model_entry"
- modelEntry.innerHTML = `
+function addModelEntry(modelContainer, modelsList, modelType, defaultValue, strengthStep) {
+ let idx = modelCount++
+ let nameId = modelType + "_model_" + idx
+ let strengthId = modelType + "_alpha_" + idx
+
+ const modelElement = document.createElement("div")
+ modelElement.className = "model_entry"
+ modelElement.innerHTML = `
-
+
`
+ modelContainer.appendChild(modelElement)
- let modelName = new ModelDropdown(modelEntry.querySelector(".model_name"), modelType, "None")
- let modelStrength = modelEntry.querySelector(".model_strength")
+ let modelName = new ModelDropdown(modelElement.querySelector(".model_name"), modelType, "None")
+ let modelStrength = modelElement.querySelector(".model_strength")
+ let entry = [modelName, modelStrength, modelElement]
- modelContainer.appendChild(modelEntry)
- modelsList.push([modelName, modelStrength])
-}
+ let removeBtn = document.createElement("button")
+ removeBtn.innerHTML = ''
-function createLoRAEntries() {
- let container = document.querySelector("#lora_model_container .model_entries")
- for (let i = 0; i < 3; i++) {
- addModelEntry(i, container, loraModels, "lora", 0.5, 0.02)
+ if (modelsList.length === 0) {
+ removeBtn.classList.add("displayNone")
}
+
+ removeBtn.addEventListener("click", function() {
+ let entryIdx = modelsList.indexOf(entry)
+ modelsList.splice(entryIdx, 1)
+ modelContainer.removeChild(modelElement)
+ })
+
+ modelElement.appendChild(removeBtn)
+
+ modelsList.push(entry)
+
+ return modelElement
}
-createLoRAEntries()
+
+function createLoraEntry() {
+ let container = document.querySelector("#lora_model_container .model_entries")
+ return addModelEntry(container, loraModels, "lora", 0.5, 0.02)
+}
+
+function createLoraEntries() {
+ let firstEntry = createLoraEntry()
+
+ let addLoraBtn = document.querySelector("#lora_model_container .add_model_entry")
+ addLoraBtn.addEventListener("click", () => {
+ createLoraEntry()
+ })
+}
+createLoraEntries()
// chrome-like spinners only on hover
-function showSpinnerOnlyOnHover(e) {
- e.addEventListener("mouseenter", () => {
- e.setAttribute("type", "number")
- })
- e.addEventListener("mouseleave", () => {
- e.removeAttribute("type")
- })
- e.removeAttribute("type")
-}
+// function showSpinnerOnlyOnHover(e) {
+// e.addEventListener("mouseenter", () => {
+// e.setAttribute("type", "number")
+// })
+// e.addEventListener("mouseleave", () => {
+// e.removeAttribute("type")
+// })
+// e.removeAttribute("type")
+// }
-document.querySelectorAll("input[type=number]").forEach(showSpinnerOnlyOnHover)
+// document.querySelectorAll("input[type=number]").forEach(showSpinnerOnlyOnHover)
|