extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-12-25 08:28:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #869 from patriceac/searchable-models-fixes

Browse Source 
Model search bug fixes
This commit is contained in:
cmdr2 2023-02-13 15:16:22 +05:30 committed by GitHub
commit b7391652ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 102 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/index.html
View File

@ -127,7 +127,7 @@
<tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="0" onkeypress="preventNonNumericalInput(event)"> <input id="random_seed" name="random_seed" type="checkbox" checked><label for="random_seed">Random</label></td></tr>
<tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td><td><input id="num_outputs_total" name="num_outputs_total" value="1" size="1" onkeypress="preventNonNumericalInput(event)"> <label><small>(total)</small></label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1" onkeypress="preventNonNumericalInput(event)"> <label for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr>
<tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td class="model-input">
<input id="stable_diffusion_model" type="text" spellcheck="false" class="model-filter" data-path="" />
<input id="stable_diffusion_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
<button id="reload-models" class="secondaryButton reloadModels"><i class='fa-solid fa-rotate'></i></button>
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about custom models</span></i></a>
</td></tr>
@ -136,7 +136,7 @@
</select>
</td></tr> -->
<tr class="pl-5"><td><label for="vae_model">Custom VAE:</i></label></td><td>
<input id="vae_model" type="text" spellcheck="false" class="model-filter" data-path="" />
<input id="vae_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about VAEs</span></i></a>
</td></tr>
<tr id="samplerSelection" class="pl-5"><td><label for="sampler_name">Sampler:</label></td><td>
@ -208,7 +208,7 @@
<tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="11" max="500"> <input id="guidance_scale" name="guidance_scale" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>
<tr id="prompt_strength_container" class="pl-5"><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"><br/></td></tr>
<tr class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</i></label></td><td>
<input id="hypernetwork_model" type="text" spellcheck="false" class="model-filter" data-path="" />
<input id="hypernetwork_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
</td></tr>
<tr id="hypernetwork_strength_container" class="pl-5">
<td><label for="hypernetwork_strength_slider">Hypernetwork Strength:</label></td>

116
ui/media/js/searchable-models.js
View File

@ -12,7 +12,7 @@ Merely calling getModels() makes all the magic happen behind the scene to refres
HOW TO CREATE A MODEL DROPDOWN:
1) Create an input element. Make sure to add a data-path property, as this is how model dropdowns are identified in auto-save.js.
<input id="stable_diffusion_model" type="text" spellcheck="false" class="model-filter" data-path="" />
<input id="stable_diffusion_model" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
2) Just declare one of these for your own dropdown (remember to change the element id, e.g. #stable_diffusion_models to your own input's id).
let stableDiffusionModelField = new ModelDropdown(document.querySelector('#stable_diffusion_model'), 'stable-diffusion')
@ -37,6 +37,7 @@ class ModelDropdown
modelKey //= undefined
flatModelList //= []
noneEntry //= ''
modelFilterInitialized //= undefined
/* MIMIC A REGULAR INPUT FIELD */
get parentElement() {
@ -84,6 +85,14 @@ class ModelDropdown
this.inputModels = modelsOptions[this.modelKey]
this.populateModels()
}, this))
document.addEventListener("collapsibleClick", this.bind(function(e) {
// update the input size when the element becomes visible
this.updateInputSize()
}, this))
document.addEventListener("tabClick", this.bind(function(e) {
// update the input size when the tab changes
this.updateInputSize()
}, this))
}
saveCurrentSelection(elem, value, path) {
@ -105,9 +114,24 @@ class ModelDropdown
}
}
getPreviousVisibleSibling(elem) {
let prevSibling = elem.previousElementSibling
while (prevSibling && prevSibling.classList.contains('model-file')) {
if (prevSibling.style.display == 'list-item') return prevSibling
prevSibling = prevSibling.previousElementSibling
}
if (prevSibling && prevSibling.style.display == 'list-item') return prevSibling
}
getLastVisibleChild(elem) {
let lastElementChild = elem.lastElementChild
if (lastElementChild.style.display == 'list-item') return lastElementChild
return this.getPreviousVisibleSibling(lastElementChild)
}
findPreviousSibling(elem) {
// is there an immediate sibling?
let prevSibling = elem.previousElementSibling
let prevSibling = this.getPreviousVisibleSibling(elem)
if (prevSibling) {
// if the previous sibling is a model file, just select it
if (prevSibling.classList.contains('model-file')) return prevSibling
@ -117,19 +141,34 @@ class ModelDropdown
}
// no sibling model file and no sibling model folder. look for siblings around the parent element.
prevSibling = elem.parentElement.parentElement.previousElementSibling
prevSibling = this.getPreviousVisibleSibling(elem.parentElement.parentElement)
if (prevSibling) {
// if the previous entry is a model file, select it
if (prevSibling.classList.contains('model-file')) return prevSibling
// is there another model folder to jump to before the current one?
if (prevSibling.classList.contains('model-folder')) return prevSibling.firstElementChild.lastElementChild
if (prevSibling.classList.contains('model-folder')) return this.getLastVisibleChild(prevSibling.firstElementChild)
}
}
getNextVisibleSibling(elem) {
let nextSibling = elem.nextElementSibling
while (nextSibling && nextSibling.classList.contains('model-file')) {
if (nextSibling.style.display == 'list-item') return nextSibling
nextSibling = nextSibling.nextElementSibling
}
if (nextSibling && nextSibling.style.display == 'list-item') return nextSibling
}
getFirstVisibleChild(elem) {
let firstElementChild = elem.firstElementChild
if (firstElementChild.style.display == 'list-item') return firstElementChild
return this.getNextVisibleSibling(firstElementChild)
}
findNextSibling(elem) {
// is there an immediate sibling?
let nextSibling = elem.nextElementSibling
let nextSibling = this.getNextVisibleSibling(elem)
if (nextSibling) {
// if the next sibling is a model file, just select it
if (nextSibling.classList.contains('model-file')) return nextSibling
@ -139,13 +178,13 @@ class ModelDropdown
}
// no sibling model file and no sibling model folder. look for siblings around the parent element.
nextSibling = elem.parentElement.parentElement.nextElementSibling
nextSibling = this.getNextVisibleSibling(elem.parentElement.parentElement)
if (nextSibling) {
// if the next entry is a model file, select it
if (nextSibling.classList.contains('model-file')) return nextSibling
// is there another model folder to jump to after the current one?
if (nextSibling.classList.contains('model-folder')) return nextSibling.firstElementChild.firstElementChild
if (nextSibling.classList.contains('model-folder')) return this.getFirstVisibleChild(nextSibling.firstElementChild)
}
}
@ -219,6 +258,7 @@ class ModelDropdown
{
this.saveCurrentSelection(this.highlightedModelEntry, this.highlightedModelEntry.innerText, this.highlightedModelEntry.dataset.path)
this.hideModelList()
this.showAllEntries()
}
this.modelFilter.focus()
}
@ -423,6 +463,47 @@ class ModelDropdown
}
/* MODEL LOADER */
getElementDimensions(element) {
// Clone the element
const clone = element.cloneNode(true)
// Copy the styles of the original element to the cloned element
const originalStyles = window.getComputedStyle(element)
for (let i = 0; i < originalStyles.length; i++) {
const property = originalStyles[i]
clone.style[property] = originalStyles.getPropertyValue(property)
}
// Set its visibility to hidden and display to inline-block
clone.style.visibility = "hidden"
clone.style.display = "inline-block"
// Put the cloned element next to the original element
element.parentNode.insertBefore(clone, element.nextSibling)
// Get its width and height
const width = clone.offsetWidth
const height = clone.offsetHeight
// Remove it from the DOM
clone.remove()
// Return its width and height
return { width, height }
}
updateInputSize() {
if (this.modelList !== undefined) {
const dimensions = this.getElementDimensions(this.modelList)
this.modelFilter.style.width = dimensions.width + 'px'
this.modelList.style.width = dimensions.width + 'px'
this.modelFilterArrow.style.height = dimensions.height + 'px'
if (this.modelFilter.offsetLeft > 0) {
this.modelList.style.left = this.modelFilter.offsetLeft + 'px'
}
}
}
flattenModelList(models, path) {
models.forEach(entry => {
if (Array.isArray(entry)) {
@ -489,16 +570,17 @@ class ModelDropdown
this.modelList = document.querySelector(`#${this.modelFilter.id}-model-list`)
this.modelResult = document.querySelector(`#${this.modelFilter.id}-model-result`)
this.modelNoResult = document.querySelector(`#${this.modelFilter.id}-model-no-result`)
this.modelList.style.display = 'block'
this.modelFilter.style.width = this.modelList.offsetWidth + 'px'
this.modelFilterArrow.style.height = this.modelFilter.offsetHeight + 'px'
this.modelList.style.display = 'none'
this.modelFilter.addEventListener('input', this.bind(this.filterList, this))
this.modelFilter.addEventListener('focus', this.bind(this.modelListFocus, this))
this.modelFilter.addEventListener('blur', this.bind(this.hideModelList, this))
this.modelFilter.addEventListener('click', this.bind(this.showModelList, this))
this.modelFilter.addEventListener('keydown', this.bind(this.processKey, this))
this.updateInputSize()
if (this.modelFilterInitialized !== true) {
this.modelFilter.addEventListener('input', this.bind(this.filterList, this))
this.modelFilter.addEventListener('focus', this.bind(this.modelListFocus, this))
this.modelFilter.addEventListener('blur', this.bind(this.hideModelList, this))
this.modelFilter.addEventListener('click', this.bind(this.showModelList, this))
this.modelFilter.addEventListener('keydown', this.bind(this.processKey, this))
this.modelFilterInitialized = true
}
this.modelFilterArrow.addEventListener('mousedown', this.bind(this.toggleModelList, this))
this.modelList.addEventListener('mousemove', this.bind(this.highlightModelAtPosition, this))
this.modelList.addEventListener('mousedown', this.bind(this.processClick, this))