Add and remove buttons for arbitrary number of LoRA models

ui/index.html

@@ -232,7 +232,10 @@
                         <td>
                             <label for="lora_model">LoRA:</label>
                         </td>
-                        <td class="model_entries"></td>
+                        <td>
+                            <div class="model_entries"></div>
+                            <button class="add_model_entry"><i class="fa-solid fa-plus"></i> add another LoRA</button>
+                        </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="" />

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,5 +1684,5 @@ body.wait-pause {
 }
 
 .model_entry .model_name {
-    width: 70%;
+    width: 65%;
 }

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",

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() !== "")

ui/media/js/main.js

@@ -2242,31 +2242,59 @@ promptField.focus()
 promptField.selectionStart = promptField.value.length
 
 // multi-models
-function addModelEntry(i, modelContainer, modelsList, modelType, defaultValue, strengthStep) {
+let modelCount = 0
-    let nameId = modelType + "_model_" + i
-    let strengthId = modelType + "_alpha_" + i
 
-    const modelEntry = document.createElement("div")
+function addModelEntry(modelContainer, modelsList, modelType, defaultValue, strengthStep) {
-    modelEntry.className = "model_entry"
+    let idx = modelCount++
-    modelEntry.innerHTML = `
+    let nameId = modelType + "_model_" + idx
+    let strengthId = modelType + "_alpha_" + idx
+
+    const modelElement = document.createElement("div")
+    modelElement.className = "model_entry"
+    modelElement.innerHTML = `
         <input id="${nameId}" class="model_name" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
-        <input id="${strengthId}" class="model_strength" type="number" step="${strengthStep}" style="width: 50pt" value="${defaultValue}" pattern="^-?[0-9]*\.?[0-9]*$" onkeypress="preventNonNumericalInput(event)"><br/>
+        <input id="${strengthId}" class="model_strength" type="number" step="${strengthStep}" style="width: 50pt" value="${defaultValue}" pattern="^-?[0-9]*\.?[0-9]*$" onkeypress="preventNonNumericalInput(event)">
     `
+    modelContainer.appendChild(modelElement)
 
-    let modelName = new ModelDropdown(modelEntry.querySelector(".model_name"), modelType, "None")
+    let modelName = new ModelDropdown(modelElement.querySelector(".model_name"), modelType, "None")
-    let modelStrength = modelEntry.querySelector(".model_strength")
+    let modelStrength = modelElement.querySelector(".model_strength")
+    let entry = [modelName, modelStrength, modelElement]
 
-    modelContainer.appendChild(modelEntry)
+    let removeBtn = document.createElement("button")
-    modelsList.push([modelName, modelStrength])
+    removeBtn.innerHTML = '<i class="fa-solid fa-minus"></i>'
-}
 
-function createLoRAEntries() {
+    if (modelsList.length === 0) {
-    let container = document.querySelector("#lora_model_container .model_entries")
+        removeBtn.classList.add("displayNone")
-    for (let i = 0; i < 3; i++) {
-        addModelEntry(i, container, loraModels, "lora", 0.5, 0.02)
     }
+
+    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) {