Stop the images from jumping while rendering

This commit is contained in:
cmdr2 2022-09-27 13:56:17 +05:30
parent fac8e8aa8b
commit a2b9ee5988
3 changed files with 9 additions and 8 deletions

View File

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="/media/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/media/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/media/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/media/favicon-32x32.png" sizes="32x32">
<link rel="stylesheet" href="/media/main.css?v=3"> <link rel="stylesheet" href="/media/main.css?v=4">
<link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1"> <link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="/media/drawingboard.min.css"> <link rel="stylesheet" href="/media/drawingboard.min.css">

View File

@ -56,6 +56,7 @@ label {
} }
#outputMsg { #outputMsg {
font-size: small; font-size: small;
padding-bottom: 3pt;
} }
#progressBar { #progressBar {
font-size: small; font-size: small;

View File

@ -327,12 +327,12 @@ async function doMakeImage(reqBody, batchCount) {
timeRemaining = (timeTaken === -1 ? '' : stepsRemaining * timeTaken) // ms timeRemaining = (timeTaken === -1 ? '' : stepsRemaining * timeTaken) // ms
outputMsg.innerHTML = `Batch ${batchesDone+1} of ${batchCount}` outputMsg.innerHTML = `Batch ${batchesDone+1} of ${batchCount}`
progressBar.innerHTML = `Generating image(s): ${percent}%` outputMsg.innerHTML += `. Generating image(s): ${percent}%`
if (timeTaken !== -1) { timeRemaining = (timeTaken !== -1 ? millisecondsToStr(timeRemaining) : '')
progressBar.innerHTML += `<br>Time remaining (approx): ${millisecondsToStr(timeRemaining)}`
} outputMsg.innerHTML += `. Time remaining (approx): ${timeRemaining}`
progressBar.style.display = 'block' outputMsg.style.display = 'block'
if (stepUpdate.output !== undefined) { if (stepUpdate.output !== undefined) {
makeImageContainers(numOutputs) makeImageContainers(numOutputs)
@ -381,7 +381,6 @@ async function doMakeImage(reqBody, batchCount) {
} }
res = JSON.parse(finalJSON) res = JSON.parse(finalJSON)
progressBar.style.display = 'none'
if (res.status !== 'succeeded') { if (res.status !== 'succeeded') {
let msg = '' let msg = ''
@ -609,11 +608,12 @@ async function makeImage() {
batchesDone++ batchesDone++
if (success) { if (success) {
outputMsg.innerText = 'Processed batch ' + (i+1) + '/' + batchCount
successCount++ successCount++
} }
} }
progressBar.style.display = 'none'
makeImageBtn.innerText = 'Make Image' makeImageBtn.innerText = 'Make Image'
makeImageBtn.disabled = false makeImageBtn.disabled = false
makeImageBtn.style.display = 'block' makeImageBtn.style.display = 'block'