Merge branch 'beta' into pause

ui/media/js/dnd.js

@@ -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'

ui/media/js/engine.js

@@ -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)

ui/media/js/main.js

@@ -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')

ui/media/js/utils.js

@@ -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)
+            }
+        }))
     }
 }