Show the approximate time remaining

ui/index.html

@@ -657,13 +657,18 @@ async function doMakeImage(reqBody, batchCount) {
         let reader = res.body.getReader()
         let textDecoder = new TextDecoder()
         let finalJSON = ''
+        let prevTime = -1
         while (true) {
             try {
+                let t = new Date().getTime()
+
                 const {value, done} = await reader.read()
                 if (done) {
                     break
                 }
 
+                let timeTaken = (prevTime === -1 ? -1 : t - prevTime)
+
                 let jsonStr = textDecoder.decode(value)
 
                 try {
@@ -677,13 +682,23 @@ async function doMakeImage(reqBody, batchCount) {
                         let totalSteps = batchCount * batchSize
                         let percent = 100 * (overallStepCount / totalSteps)
                         percent = percent.toFixed(0)
+
+                        stepsRemaining = totalSteps - overallStepCount
+                        timeRemaining = (timeTaken === -1 ? '' : stepsRemaining * timeTaken) // ms
+
                         outputMsg.innerHTML = `Batch ${batchesDone+1} of ${batchCount}`
                         progressBar.innerHTML = `Generating image(s): ${percent}%`
+
+                        if (timeTaken !== -1) {
+                            progressBar.innerHTML += `<br>Time remaining (approx): ${millisecondsToStr(timeRemaining)}`
+                        }
                         progressBar.style.display = 'block'
                     }
                 } catch (e) {
                     finalJSON += jsonStr
                 }
+
+                prevTime = t
             } catch (e) {
                 logError('Stable Diffusion had an error. Please check the logs in the command-line window. This happens sometimes. Maybe modify the prompt or seed a little bit?', res)
                 res = undefined
@@ -1209,6 +1224,30 @@ initImageClearBtn.addEventListener('click', function() {
 //     maskImagePreview.src = ''
 //     maskImagePreviewContainer.style.display = 'none'
 // })
+
+// https://stackoverflow.com/a/8212878
+function millisecondsToStr(milliseconds) {
+    function numberEnding (number) {
+        return (number > 1) ? 's' : '';
+    }
+
+    var temp = Math.floor(milliseconds / 1000);
+    var hours = Math.floor((temp %= 86400) / 3600);
+    var s = ''
+    if (hours) {
+        s += hours + ' hour' + numberEnding(hours) + ' ';
+    }
+    var minutes = Math.floor((temp %= 3600) / 60);
+    if (minutes) {
+        s += minutes + ' minute' + numberEnding(minutes) + ' ';
+    }
+    var seconds = temp % 60;
+    if (!hours && minutes < 4 && seconds) {
+        s += seconds + ' second' + numberEnding(seconds);
+    }
+
+    return s;
+}
 </script>
 <script>
 function createCollapsibles(node) {