From c568bca69eea62becb2e830644046c4971a12fc5 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Sun, 11 Dec 2022 02:31:23 +0100 Subject: [PATCH 1/3] Pause button --- ui/index.html | 2 ++ ui/media/css/main.css | 14 ++++++++++++++ ui/media/js/engine.js | 17 ++++++++++------- ui/media/js/main.js | 29 +++++++++++++++++++++++++++++ 4 files changed, 55 insertions(+), 7 deletions(-) diff --git a/ui/index.html b/ui/index.html index d0aef771..a35504b2 100644 --- a/ui/index.html +++ b/ui/index.html @@ -29,6 +29,8 @@
+ +
●
Stable Diffusion is starting..
diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 6390a229..5090d975 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1138,3 +1138,17 @@ button#save-system-settings-btn { background: var(--background-color2); border-radius: var(--scrollbar-radius); } + +body.pause { + border: solid 12px var(--accent-color); +} + +body.wait-pause { + animation: blinker 2s linear infinite; +} + +@keyframes blinker { + 0% { border: solid 12px var(--accent-color); } + 50% { border: solid 12px var(--background-color1); } + 100% { border: solid 12px var(--accent-color); } +} diff --git a/ui/media/js/engine.js b/ui/media/js/engine.js index dd34ddb1..ed5ed2d5 100644 --- a/ui/media/js/engine.js +++ b/ui/media/js/engine.js @@ -10,8 +10,8 @@ const IDLE_COOLDOWN = 2500 // ms const CONCURRENT_TASK_INTERVAL = 500 // ms - /** Connects to an endpoint and resumes connexion after reaching end of stream until all data is received. - * Allows closing the connexion while the server buffers more data. + /** Connects to an endpoint and resumes connection after reaching end of stream until all data is received. + * Allows closing the connection while the server buffers more data. */ class ChunkedStreamReader { #bufferedString = '' // Data received waiting to be read. @@ -248,7 +248,7 @@ setServerStatus('busy', 'rendering..') break default: // Unavailable - console.error('Ping received an unexpedted server status. Status: %s', serverState.status) + console.error('Ping received an unexpected server status. Status: %s', serverState.status) setServerStatus('error', serverState.status.toLowerCase()) break } @@ -264,11 +264,11 @@ function isServerAvailable() { if (typeof serverState !== 'object') { - console.error('serverState not set to a value. Connexion to server could be lost...') + console.error('serverState not set to a value. Connection to server could be lost...') return false } if (Date.now() >= serverState.time + SERVER_STATE_VALIDITY_DURATION) { - console.warn('SERVER_STATE_VALIDITY_DURATION elapsed. Connexion to server could be lost...') + console.warn('SERVER_STATE_VALIDITY_DURATION elapsed. Connection to server could be lost...') return false } switch (serverState.status) { @@ -277,7 +277,7 @@ case ServerStates.online: return true default: - console.warn('Unexpedted server status. Server could be unavailable... Status: %s', serverState.status) + console.warn('Unexpected server status. Server could be unavailable... Status: %s', serverState.status) return false } } @@ -306,7 +306,7 @@ if (await healthCheck() && isServerAvailable()) { // Force a recheck of server status before failure... continue // Continue waiting if last healthCheck confirmed the server is still alive. } - throw new Error('Connexion with server lost.') + throw new Error('Connection with server lost.') } } if (Date.now() >= serverState.time + SERVER_STATE_VALIDITY_DURATION) { @@ -437,6 +437,9 @@ * @memberof Task */ async post(url, timeout=-1) { + if (typeof pauseClient != 'undefined' && pauseClient===true) { + await resumeClient() + } if(this.status !== TaskStatus.init && this.status !== TaskStatus.pending) { throw new Error(`Task status ${this.status} is not valid for post.`) } diff --git a/ui/media/js/main.js b/ui/media/js/main.js index d16b8b88..4ac29820 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -45,6 +45,8 @@ let streamImageProgressField = document.querySelector("#stream_image_progress") let makeImageBtn = document.querySelector('#makeImage') let stopImageBtn = document.querySelector('#stopImage') +let pauseBtn = document.querySelector('#pause') +let resumeBtn = document.querySelector('#resume') let imagesContainer = document.querySelector('#current-images') let initImagePreviewContainer = document.querySelector('#init_image_preview_container') @@ -1365,6 +1367,33 @@ function linkTabContents(tab) { tab.addEventListener("click", event => selectTab(tab.id)) } +let pauseClient = false + +function resumeClient() { + if (pauseClient) { + resumeBtn.style.display = "inline" + document.body.classList.remove('wait-pause') + document.body.classList.add('pause') + } + return new Promise(resolve => { + let playbuttonclick = function () { + resumeBtn.removeEventListener("click", playbuttonclick); + resumeBtn.style.display = "none" + pauseBtn.style.display = "inline" + document.body.classList.remove('pause') + pauseClient = false + resolve("resolved"); + } + resumeBtn.addEventListener("click", playbuttonclick) + }) +} + +pauseBtn.addEventListener("click", function () { + pauseClient = true + pauseBtn.style.display="none" + document.body.classList.add('wait-pause') +}) + document.querySelectorAll(".tab").forEach(linkTabContents) window.addEventListener("beforeunload", function(e) { From 38951f55811b72f0ca7b1c2cfda643e2e6706906 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Sun, 11 Dec 2022 02:49:49 +0100 Subject: [PATCH 2/3] Pause button - check whether function is defined before calling it --- ui/media/js/engine.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/media/js/engine.js b/ui/media/js/engine.js index ed5ed2d5..11d88e3b 100644 --- a/ui/media/js/engine.js +++ b/ui/media/js/engine.js @@ -437,7 +437,7 @@ * @memberof Task */ async post(url, timeout=-1) { - if (typeof pauseClient != 'undefined' && pauseClient===true) { + if (typeof pauseClient != 'undefined' && pauseClient===true && typeof resumeClient === 'function') { await resumeClient() } if(this.status !== TaskStatus.init && this.status !== TaskStatus.pending) { From bd1bc789536658891ee6a13447f4040750c9fd7e Mon Sep 17 00:00:00 2001 From: JeLuF Date: Sun, 11 Dec 2022 14:57:01 +0100 Subject: [PATCH 3/3] Use onIdle(), move pause button, quick resume without using the promise --- ui/index.html | 8 +++++--- ui/media/css/main.css | 20 +++++++++++++++++--- ui/media/js/engine.js | 3 --- ui/media/js/main.js | 23 ++++++++++++++++------- 4 files changed, 38 insertions(+), 16 deletions(-) diff --git a/ui/index.html b/ui/index.html index 4868cad3..b5c0abcc 100644 --- a/ui/index.html +++ b/ui/index.html @@ -29,8 +29,6 @@
- -
●
Stable Diffusion is starting..
@@ -102,7 +100,11 @@ - +
+ + + +
diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 51557000..1ef7bf18 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -191,15 +191,29 @@ code { background: rgb(132, 8, 0); border: 2px solid rgb(122, 29, 0); color: rgb(255, 221, 255); - width: 100%; height: 30pt; border-radius: 6px; - display: none; - margin-top: 2pt; + flex-grow: 2; } #stopImage:hover { background: rgb(177, 27, 0); } + +div#render-buttons { + gap: 3px; + margin-top: 4px; + display: none; +} +button#pause { + flex-grow: 1; + background: var(--accent-color); +} +button#resume { + flex-grow: 1; + background: var(--accent-color); + display: none; +} + .flex-container { display: flex; width: 100%; diff --git a/ui/media/js/engine.js b/ui/media/js/engine.js index 33b487ba..34420e3b 100644 --- a/ui/media/js/engine.js +++ b/ui/media/js/engine.js @@ -437,9 +437,6 @@ * @memberof Task */ async post(url, timeout=-1) { - if (typeof pauseClient != 'undefined' && pauseClient===true && typeof resumeClient === 'function') { - await resumeClient() - } if(this.status !== TaskStatus.init && this.status !== TaskStatus.pending) { throw new Error(`Task status ${this.status} is not valid for post.`) } diff --git a/ui/media/js/main.js b/ui/media/js/main.js index bc32e274..acb86211 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -47,6 +47,7 @@ let makeImageBtn = document.querySelector('#makeImage') let stopImageBtn = document.querySelector('#stopImage') let pauseBtn = document.querySelector('#pause') let resumeBtn = document.querySelector('#resume') +let renderButtons = document.querySelector('#render-buttons') let imagesContainer = document.querySelector('#current-images') let initImagePreviewContainer = document.querySelector('#init_image_preview_container') @@ -477,6 +478,10 @@ function makeImage() { async function onIdle() { const serverCapacity = SD.serverCapacity + if (pauseClient===true) { + await resumeClient() + } + for (const taskEntry of getUncompletedTaskEntries()) { if (SD.activeTasks.size >= serverCapacity) { break @@ -669,7 +674,7 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) { return } - stopImageBtn.style.display = 'none' + renderButtons.style.display = 'none' renameMakeImageButton() if (isSoundEnabled()) { @@ -754,7 +759,7 @@ async function onTaskStart(task) { ) setStatus('request', 'fetching..') - stopImageBtn.style.display = 'block' + renderButtons.style.display = 'flex' renameMakeImageButton() previewTools.style.display = 'block' } @@ -1405,17 +1410,12 @@ let pauseClient = false function resumeClient() { if (pauseClient) { - resumeBtn.style.display = "inline" document.body.classList.remove('wait-pause') document.body.classList.add('pause') } return new Promise(resolve => { let playbuttonclick = function () { resumeBtn.removeEventListener("click", playbuttonclick); - resumeBtn.style.display = "none" - pauseBtn.style.display = "inline" - document.body.classList.remove('pause') - pauseClient = false resolve("resolved"); } resumeBtn.addEventListener("click", playbuttonclick) @@ -1425,9 +1425,18 @@ function resumeClient() { pauseBtn.addEventListener("click", function () { pauseClient = true pauseBtn.style.display="none" + resumeBtn.style.display = "inline" document.body.classList.add('wait-pause') }) +resumeBtn.addEventListener("click", function () { + pauseClient = false + resumeBtn.style.display = "none" + pauseBtn.style.display = "inline" + document.body.classList.remove('pause') + document.body.classList.remove('wait-pause') +}) + document.querySelectorAll(".tab").forEach(linkTabContents) window.addEventListener("beforeunload", function(e) {