holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add and remove buttons for arbitrary number of LoRA models

Browse Source
This commit is contained in:
cmdr2 2023-07-16 02:12:42 +05:30
parent 6f065918e9
commit ef1e42dd7b
5 changed files with 73 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/index.html
View File

@ -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="" />

6
ui/media/css/main.css
View File

@ -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%;
}

6
ui/media/js/auto-save.js
View File

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

21
ui/media/js/dnd.js
View File

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

62
ui/media/js/main.js
View File

@ -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 = `
<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 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 = '<i class="fa-solid fa-minus"></i>'
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) {