Merge branch 'beta' into pause

This commit is contained in:
JeLuF 2022-12-11 11:19:48 +01:00
commit e6346775e7
8 changed files with 124 additions and 65 deletions

View File

@ -27,6 +27,7 @@
- Support loading models in the safetensor format, for improved safety
### Detailed changelog
* 2.4.19 - 10 Dec 2022 - Show init img in task list
* 2.4.19 - 7 Dec 2022 - Use pre-trained hypernetworks while generating images. Thanks @C0bra5
* 2.4.19 - 6 Dec 2022 - Allow processing new tasks first. Thanks @madrang
* 2.4.19 - 6 Dec 2022 - Allow reordering the task queue (by dragging tasks). Thanks @madrang

View File

@ -57,7 +57,7 @@
<input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
<label for="negative_prompt" class="collapsible" id="negative_prompt_handle">
Negative Prompt
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about Negative Prompts</span></i></a>
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about Negative Prompts</span></i></a>
<small>(optional)</small>
</label>
<div class="collapsible-content">
@ -97,7 +97,7 @@
</div>
<div id="editor-inputs-tags-container" class="row">
<label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">click an Image Modifier to remove it, use Ctrl+Mouse Wheel to adjust its weight</span></i>:</label>
<label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">click an Image Modifier to remove it, use Ctrl+Mouse Wheel to adjust its weight</span></i>:</label>
<div id="editor-inputs-tags-list"></div>
</div>
@ -111,7 +111,7 @@
<h4 class="collapsible">
Image Settings
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button">
<span class="simple-tooltip right">
<span class="simple-tooltip top-left">
Reset Image Settings
</span>
</i>
@ -125,13 +125,13 @@
<select id="stable_diffusion_model" name="stable_diffusion_model">
<!-- <option value="sd-v1-4" selected>sd-v1-4</option> -->
</select>
<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 right">Click to learn more about custom models</span></i></a>
<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>
<tr class="pl-5"><td><label for="vae_model">Custom VAE:</i></label></td><td>
<select id="vae_model" name="vae_model">
<!-- <option value="" selected>None</option> -->
</select>
<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 right">Click to learn more about VAEs</span></i></a>
<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 class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</i></label></td><td>
<select id="hypernetwork_model" name="hypernetwork_model">
@ -150,7 +150,7 @@
<option value="dpm2_a">dpm2_a</option>
<option value="lms">lms</option>
</select>
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/How-to-Use#samplers" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about samplers</span></i></a>
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/How-to-Use#samplers" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about samplers</span></i></a>
</td></tr>
<tr class="pl-5"><td><label>Image Size: </label></td><td>
<select id="width" name="width" value="512">
@ -280,7 +280,7 @@
<tr><td><label>Compatible Graphics Cards (all):</label></td><td id="system-info-gpus-all" class="value"></td></tr>
<tr><td></td><td>&nbsp;</td></tr>
<tr><td><label>Used for rendering 🔥:</label></td><td id="system-info-rendering-devices" class="value"></td></tr>
<tr><td><label>Server Addresses <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">You can access Stable Diffusion UI from other devices using these addresses</span></i> :</label></td><td id="system-info-server-hosts" class="value"></td></tr>
<tr><td><label>Server Addresses <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">You can access Stable Diffusion UI from other devices using these addresses</span></i> :</label></td><td id="system-info-server-hosts" class="value"></td></tr>
</table>
</div>
</div>

View File

@ -937,6 +937,15 @@ input::file-selector-button {
transform: translate(-50%, 100%);
}
.simple-tooltip.top-left {
top: 0px;
left: 0px;
transform: translate(calc(-100% + 15%), calc(-100% + 15%));
}
:hover > .simple-tooltip.top-left {
transform: translate(-80%, -100%);
}
/* PROGRESS BAR */
.progress-bar {
background: var(--background-color3);
@ -945,6 +954,7 @@ input::file-selector-button {
height: 16px;
position: relative;
transition: 0.25s 1s border, 0.25s 1s height;
clear: both;
}
.progress-bar > div {
background: var(--accent-color);
@ -1096,6 +1106,15 @@ button:active {
left: 1px;
}
div.task-initimg > img {
margin-right: 6px;
display: block;
}
div.task-fs-initimage {
display: none;
position: absolute;
}
button#save-system-settings-btn {
padding: 4pt 8pt;
}

View File

@ -465,7 +465,7 @@ function checkReadTextClipboardPermission (result) {
// PASTE ICON
const pasteIcon = document.createElement('i')
pasteIcon.className = 'fa-solid fa-paste section-button'
pasteIcon.innerHTML = `<span class="simple-tooltip right">Paste Image Settings</span>`
pasteIcon.innerHTML = `<span class="simple-tooltip top-left">Paste Image Settings</span>`
pasteIcon.addEventListener('click', async (event) => {
event.stopPropagation()
// Add css class 'active'
@ -505,7 +505,7 @@ function checkWriteToClipboardPermission (result) {
// COPY ICON
const copyIcon = document.createElement('i')
copyIcon.className = 'fa-solid fa-clipboard section-button'
copyIcon.innerHTML = `<span class="simple-tooltip right">Copy Image Settings</span>`
copyIcon.innerHTML = `<span class="simple-tooltip top-left">Copy Image Settings</span>`
copyIcon.addEventListener('click', (event) => {
event.stopPropagation()
// Add css class 'active'

View File

@ -196,7 +196,7 @@
const eventSource = new GenericEventSource(EVENTS_TYPES)
function setServerStatus(msgType, msg) {
eventSource.fireEvent(EVENT_STATUS_CHANGED, {type: msgType, message: msg})
return eventSource.fireEvent(EVENT_STATUS_CHANGED, {type: msgType, message: msg})
}
const ServerStates = {
@ -628,7 +628,7 @@
}
this._setStatus(TaskStatus.pending)
task_queue.set(this, promiseGenerator)
eventSource.fireEvent(EVENT_TASK_QUEUED, {task:this})
await eventSource.fireEvent(EVENT_TASK_QUEUED, {task:this})
await Task.enqueue(promiseGenerator, ...args)
await this.waitUntil({status: TaskStatus.completed})
if (this.exception) {
@ -846,7 +846,7 @@
if (typeof jsonResponse?.task !== 'number') {
console.warn('Endpoint error response: ', jsonResponse)
const event = Object.assign({task:this}, jsonResponse)
eventSource.fireEvent(EVENT_UNEXPECTED_RESPONSE, event)
await eventSource.fireEvent(EVENT_UNEXPECTED_RESPONSE, event)
if ('continueWith' in event) {
jsonResponse = await Promise.resolve(event.continueWith)
}
@ -1084,12 +1084,13 @@
function getServerCapacity() {
let activeDevicesCount = Object.keys(serverState?.devices?.active || {}).length
if (window.document.visibilityState === 'hidden') {
if (typeof window === "object" && window.document.visibilityState === 'hidden') {
activeDevicesCount = 1 + activeDevicesCount
}
return activeDevicesCount
}
let idleEventPromise = undefined
function continueTasks() {
if (typeof navigator?.scheduling?.isInputPending === 'function') {
const inputPendingOptions = {
@ -1104,14 +1105,18 @@
}
const serverCapacity = getServerCapacity()
if (task_queue.size <= 0 && concurrent_generators.size <= 0) {
eventSource.fireEvent(EVENT_IDLE, {capacity: serverCapacity, idle: true})
if (!idleEventPromise?.isPending) {
idleEventPromise = makeQuerablePromise(eventSource.fireEvent(EVENT_IDLE, {capacity: serverCapacity, idle: true}))
}
// Calling idle could result in task being added to queue.
if (task_queue.size <= 0 && concurrent_generators.size <= 0) {
return asyncDelay(IDLE_COOLDOWN)
return idleEventPromise.then(() => asyncDelay(IDLE_COOLDOWN))
}
}
if (task_queue.size < serverCapacity) {
eventSource.fireEvent(EVENT_IDLE, {capacity: serverCapacity - task_queue.size})
if (!idleEventPromise?.isPending) {
idleEventPromise = makeQuerablePromise(eventSource.fireEvent(EVENT_IDLE, {capacity: serverCapacity - task_queue.size}))
}
}
const completedTasks = []
for (let [generator, promise] of concurrent_generators.entries()) {
@ -1178,8 +1183,8 @@
continue
}
const event = {task, generator};
eventSource.fireEvent(EVENT_TASK_START, event) // optional beforeStart promise to wait on before starting task.
const promise = makeQuerablePromise(Promise.resolve(event.beforeStart))
const beforeStart = eventSource.fireEvent(EVENT_TASK_START, event) // optional beforeStart promise to wait on before starting task.
const promise = makeQuerablePromise(beforeStart.then(() => Promise.resolve(event.beforeStart)))
concurrent_generators.set(event.generator, promise)
task_queue.set(task, event.generator)
}
@ -1204,7 +1209,7 @@
}
const continuePromise = continueTasks().catch(async function(err) {
console.error(err)
eventSource.fireEvent(EVENT_UNHANDLED_REJECTION, {reason: err})
await eventSource.fireEvent(EVENT_UNHANDLED_REJECTION, {reason: err})
await asyncDelay(RETRY_DELAY_ON_ERROR)
})
taskPromise = makeQuerablePromise(continuePromise)

View File

@ -475,7 +475,7 @@ function makeImage() {
initialText.style.display = 'none'
}
function onIdle() {
async function onIdle() {
const serverCapacity = SD.serverCapacity
for (const taskEntry of getUncompletedTaskEntries()) {
if (SD.activeTasks.size >= serverCapacity) {
@ -487,7 +487,7 @@ function onIdle() {
taskStatusLabel.style.display = 'none'
continue
}
onTaskStart(task)
await onTaskStart(task)
}
}
@ -607,29 +607,29 @@ function onTaskErrorHandler(task, reqBody, instance, reason) {
}
function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
if (typeof stepUpdate !== 'object') {
return
}
if (stepUpdate.status !== 'succeeded') {
const outputMsg = task['outputMsg']
let msg = ''
if ('detail' in stepUpdate && typeof stepUpdate.detail === 'string' && stepUpdate.detail.length > 0) {
msg = stepUpdate.detail
if (msg.toLowerCase().includes('out of memory')) {
msg += `<br/><br/>
<b>Suggestions</b>:
<br/>
1. If you have set an initial image, please try reducing its dimension to ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION} or smaller.<br/>
2. Try disabling the '<em>Turbo mode</em>' under '<em>Advanced Settings</em>'.<br/>
3. Try generating a smaller image.<br/>`
}
if (typeof stepUpdate === 'object') {
if (stepUpdate.status === 'succeeded') {
showImages(reqBody, stepUpdate, outputContainer, false)
} else {
msg = `Unexpected Read Error:<br/><pre>StepUpdate: ${JSON.stringify(stepUpdate, undefined, 4)}</pre>`
task.isProcessing = false
const outputMsg = task['outputMsg']
let msg = ''
if ('detail' in stepUpdate && typeof stepUpdate.detail === 'string' && stepUpdate.detail.length > 0) {
msg = stepUpdate.detail
if (msg.toLowerCase().includes('out of memory')) {
msg += `<br/><br/>
<b>Suggestions</b>:
<br/>
1. If you have set an initial image, please try reducing its dimension to ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION} or smaller.<br/>
2. Try disabling the '<em>Turbo mode</em>' under '<em>Advanced Settings</em>'.<br/>
3. Try generating a smaller image.<br/>`
}
} else {
msg = `Unexpected Read Error:<br/><pre>StepUpdate: ${JSON.stringify(stepUpdate, undefined, 4)}</pre>`
}
logError(msg, stepUpdate, outputMsg)
}
logError(msg, stepUpdate, outputMsg)
return false
}
showImages(reqBody, stepUpdate, outputContainer, false)
if (task.isProcessing && task.batchesDone < task.batchCount) {
task['taskStatusLabel'].innerText = "Pending"
task['taskStatusLabel'].classList.add('waitingTaskLabel')
@ -640,8 +640,6 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
return
}
setStatus('request', 'done', 'success')
task.isProcessing = false
task['stopTask'].innerHTML = '<i class="fa-solid fa-trash-can"></i> Remove'
task['taskStatusLabel'].style.display = 'none'
@ -680,7 +678,7 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
}
function onTaskStart(task) {
async function onTaskStart(task) {
if (!task.isProcessing || task.batchesDone >= task.batchCount) {
return
}
@ -718,22 +716,24 @@ function onTaskStart(task) {
task.outputContainer.insertBefore(outputContainer, task.outputContainer.firstChild)
const eventInfo = {reqBody:newTaskReqBody}
PLUGINS['TASK_CREATE'].forEach((hook) => {
const callbacksPromises = PLUGINS['TASK_CREATE'].map((hook) => {
if (typeof hook !== 'function') {
console.error('The provided TASK_CREATE hook is not a function. Hook: %o', hook)
return
return Promise.reject(new Error('hook is not a function.'))
}
try {
hook.call(task, eventInfo)
return Promise.resolve(hook.call(task, eventInfo))
} catch (err) {
console.error(err)
return Promise.reject(err)
}
})
await Promise.allSettled(callbacksPromises)
let instance = eventInfo.instance
if (!instance) {
const factory = PLUGINS.OUTPUTS_FORMATS.get(eventInfo.reqBody?.output_format || newTaskReqBody.output_format)
if (factory) {
instance = factory(eventInfo.reqBody || newTaskReqBody)
instance = await Promise.resolve(factory(eventInfo.reqBody || newTaskReqBody))
}
if (!instance) {
console.error(`${factory ? "Factory " + String(factory) : 'No factory defined'} for output format ${eventInfo.reqBody?.output_format || newTaskReqBody.output_format}. Instance is ${instance || 'undefined'}. Using default renderer.`)
@ -759,8 +759,37 @@ function onTaskStart(task) {
previewTools.style.display = 'block'
}
/* Hover effect for the init image in the task list */
function createInitImageHover(taskEntry) {
var $tooltip = $( taskEntry.querySelector('.task-fs-initimage') )
$( taskEntry.querySelector('div.task-initimg > img') ).on('mouseenter', function() {
var img = this,
$img = $(img),
offset = $img.offset();
$tooltip
.css({
'top': offset.top,
'left': offset.left,
'z-index': 99999,
'display': 'block'
})
.append($img.clone().css({width:"", height:""}));
})
$tooltip.on('mouseleave', function() {
$tooltip.empty().addClass('hidden');
});
}
function createTask(task) {
let taskConfig = `<b>Seed:</b> ${task.seed}, <b>Sampler:</b> ${task.reqBody.sampler}, <b>Inference Steps:</b> ${task.reqBody.num_inference_steps}, <b>Guidance Scale:</b> ${task.reqBody.guidance_scale}, <b>Model:</b> ${task.reqBody.use_stable_diffusion_model}`
let taskConfig = ''
if (task.reqBody.init_image !== undefined) {
let h = 80
let w = task.reqBody.width * h / task.reqBody.height >>0
taskConfig += `<div class="task-initimg" style="float:left;"><img style="width:${w}px;height:${h}px;" src="${task.reqBody.init_image}"><div class="task-fs-initimage"></div></div>`
}
taskConfig += `<b>Seed:</b> ${task.seed}, <b>Sampler:</b> ${task.reqBody.sampler}, <b>Inference Steps:</b> ${task.reqBody.num_inference_steps}, <b>Guidance Scale:</b> ${task.reqBody.guidance_scale}, <b>Model:</b> ${task.reqBody.use_stable_diffusion_model}`
if (task.reqBody.use_vae_model.trim() !== '') {
taskConfig += `, <b>VAE:</b> ${task.reqBody.use_vae_model}`
}
@ -799,6 +828,11 @@ function createTask(task) {
createCollapsibles(taskEntry)
if (task.reqBody.init_image !== undefined) {
createInitImageHover(taskEntry)
}
task['taskStatusLabel'] = taskEntry.querySelector('.taskStatusLabel')
task['outputContainer'] = taskEntry.querySelector('.img-preview')
task['outputMsg'] = taskEntry.querySelector('.outputMsg')

View File

@ -561,16 +561,22 @@ class GenericEventSource {
throw new Error(`Event ${String(name)} missing from Events.types`)
}
if (!this.#events.hasOwnProperty(name)) {
return
return Promise.resolve()
}
if (!args || !args.length) {
args = []
}
const evs = this.#events[name]
const len = evs.length
for (let i = 0; i < len; ++i) {
evs[i].apply(SD, args)
if (evs.length <= 0) {
return Promise.resolve()
}
return Promise.allSettled(evs.map((callback) => {
try {
return Promise.resolve(callback.apply(SD, args))
} catch (ex) {
return Promise.reject(ex)
}
}))
}
}

View File

@ -16,18 +16,12 @@
clearAllPreviewsBtn.parentNode.insertBefore(autoScrollControl, clearAllPreviewsBtn.nextSibling)
prettifyInputs(document);
let autoScroll = document.querySelector("#auto_scroll")
/**
* the use of initSettings() in the autoscroll plugin seems to be breaking the models dropdown and the save-to-disk folder field
* in the settings tab. They're both blank, because they're being re-initialized. Their earlier values came from the API call,
* but those values aren't stored in localStorage, since they aren't user-specified.
* So when initSettings() is called a second time, it overwrites the values with an empty string.
*
* We could either rework how new components can register themselves to be auto-saved, without having to call initSettings() again.
* Or we could move the autoscroll code into the main code, and include it in the list of fields in auto-save.js
*/
// SETTINGS_IDS_LIST.push("auto_scroll")
// initSettings()
// save/restore the toggle state
autoScroll.addEventListener('click', (e) => {
localStorage.setItem('auto_scroll', autoScroll.checked)
})
autoScroll.checked = localStorage.getItem('auto_scroll') == "true"
// observe for changes in the preview pane
var observer = new MutationObserver(function (mutations) {