Merge pull request #406 from mdiller/mdiller_progressbar

Fixed/Implemented Progressbar

ui/media/css/main.css

@@ -64,9 +64,6 @@ label {
     font-size: small;
     padding-bottom: 3pt;
 }
-#progressBar {
-    font-size: small;
-}
 #footer {
     font-size: small;
     padding-left: 10pt;
@@ -132,6 +129,9 @@ label {
 #preview {
     padding: 5px;
 }
+#preview .collapsible-content {
+    padding: 0px 15px;
+}
 #editor-inputs {
     margin-bottom: 20px;
 }
@@ -641,3 +641,40 @@ input::file-selector-button {
 :hover > .simple-tooltip.bottom {
     transform: translate(-50%, 100%);
 }
+.progress-bar {
+    background: var(--background-color3);
+    border-radius: 4px;
+    border: 2px solid var(--background-color3);
+    height: 16px;
+    position: relative;
+    transition: 0.25s 1s border, 0.25s 1s height;
+}
+.progress-bar > div {
+    background: var(--accent-color);
+    border-radius: 4px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 0%;
+    transition: width 1s ease-in-out;
+}
+/* animated progress-bar */
+.progress-bar.active {
+    background: repeating-linear-gradient(-65deg, 
+        var(--background-color2), 
+        var(--background-color2) 4px, 
+        var(--background-color3) 5px, 
+        var(--background-color3) 9px, 
+        var(--background-color2) 10px);
+    background-size: 200% auto;
+    background-position: 0 100%;
+    animation: progress-anim 2s infinite;
+    animation-fill-mode: forwards;
+    animation-timing-function: linear;
+}
+
+@keyframes progress-anim { 
+    0%   { background-position: -55px 0; }
+    100% { background-position: 0 0; }
+}

ui/media/js/main.js

@@ -68,7 +68,6 @@ let imagePreview = document.querySelector("#preview")
 let showConfigToggle = document.querySelector('#configToggleBtn')
 // let configBox = document.querySelector('#config')
 // let outputMsg = document.querySelector('#outputMsg')
-// let progressBar = document.querySelector("#progressBar")
 
 let soundToggle = document.querySelector('#sound_toggle')
 
@@ -422,6 +421,7 @@ async function doMakeImage(task) {
     const outputMsg = task['outputMsg']
     const previewPrompt = task['previewPrompt']
     const progressBar = task['progressBar']
+    const progressBarInner = progressBar.querySelector("div")
 
     let res = undefined
     try {
@@ -561,6 +561,13 @@ async function doMakeImage(task) {
                 outputMsg.innerHTML += `. Time remaining (approx): ${timeRemaining}`
                 outputMsg.style.display = 'block'
 
+                progressBarInner.style.width = `${percent}%`
+                if (percent == 100) {
+                    task.progressBar.style.height = "0px"
+                    task.progressBar.style.border = "0px solid var(--background-color3)"
+                    task['progressBar'].classList.remove("active")
+                }
+
                 if (stepUpdate.output !== undefined) {
                     showImages(reqBody, stepUpdate, outputContainer, true)
                 }
@@ -620,7 +627,6 @@ async function doMakeImage(task) {
                 let msg = `Unexpected Read Error:<br/><pre>Response: ${res}<br/>StepUpdate: ${typeof stepUpdate === 'object' ? JSON.stringify(stepUpdate, undefined, 4) : stepUpdate}</pre>`
                 logError(msg, res, outputMsg)
             }
-            progressBar.style.display = 'none'
             return false
         }
 
@@ -630,7 +636,6 @@ async function doMakeImage(task) {
         console.log('request error', e)
         logError('Stable Diffusion had an error. Please check the logs in the command-line window. <br/><br/>' + e + '<br/><pre>' + e.stack + '</pre>', res, outputMsg)
         setStatus('request', 'error', 'error')
-        progressBar.style.display = 'none'
         return false
     }
     return true
@@ -835,7 +840,7 @@ function createTask(task) {
                             <div class="taskConfig">${taskConfig}</div>
                             <div class="collapsible-content" style="display: block">
                                 <div class="outputMsg"></div>
-                                <div class="progressBar"></div>
+                                <div class="progress-bar active"><div></div></div>
                                 <div class="img-preview">
                             </div>`
 
@@ -845,12 +850,13 @@ function createTask(task) {
     task['outputContainer'] = taskEntry.querySelector('.img-preview')
     task['outputMsg'] = taskEntry.querySelector('.outputMsg')
     task['previewPrompt'] = taskEntry.querySelector('.preview-prompt')
-    task['progressBar'] = taskEntry.querySelector('.progressBar')
+    task['progressBar'] = taskEntry.querySelector('.progress-bar')
     task['stopTask'] = taskEntry.querySelector('.stopTask')
 
     task['stopTask'].addEventListener('click', async function() {
         if (task['isProcessing']) {
             task.isProcessing = false
+            task['progressBar'].classList.remove("active")
             try {
                 let res = await fetch('/image/stop?session_id=' + sessionId)
             } catch (e) {