diff --git a/ui/index.html b/ui/index.html index 7a1cbab2..e1177a56 100644 --- a/ui/index.html +++ b/ui/index.html @@ -232,7 +232,10 @@ - + +
+ + diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 0297228f..b22a45d4 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,5 +1684,5 @@ body.wait-pause { } .model_entry .model_name { - width: 70%; + width: 65%; } \ No newline at end of file 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 c31a890b..d2412a43 100644 --- a/ui/media/js/main.js +++ b/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 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) {