From 05a4701d985932c5c0982a44032cee755cb51792 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Tue, 27 Sep 2022 18:09:07 +0530
Subject: [PATCH] Allow queuing up of tasks

---
 ui/index.html     |  20 ++-
 ui/media/main.css |  49 ++++++-
 ui/media/main.js  | 325 ++++++++++++++++++++++++++++++++++------------
 3 files changed, 291 insertions(+), 103 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 906576f1..1b1557b7 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -4,7 +4,7 @@
     <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-32x32.png" sizes="32x32">
-    <link rel="stylesheet" href="/media/main.css?v=4">
+    <link rel="stylesheet" href="/media/main.css?v=10">
     <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="/media/drawingboard.min.css">
@@ -78,7 +78,7 @@
                 </div>
 
                 <button id="makeImage">Make Image</button>
-                <button id="stopImage">Stop</button>
+                <button id="stopImage" class="secondaryButton">Stop All</button>
             </div>
 
             <div class="line-separator">&nbsp;</div>
@@ -154,7 +154,7 @@
                     <br/>
 
                     <li><b class="settings-subheader">Render Settings</b></li>
-                    <li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview of the image <small>(consumes more VRAM, slightly slower image generation)</small></label></li>
+                    <li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview of the image <small>(uses more VRAM, slightly slower image creation)</small></label></li>
                     <li class="pl-5"><input id="use_face_correction" name="use_face_correction" type="checkbox" checked> <label for="use_face_correction">Fix incorrect faces and eyes <small>(uses GFPGAN)</small></label></li>
                     <li class="pl-5">
                         <input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Upscale the image to 4x resolution using </label>
@@ -185,15 +185,11 @@
         </div>
 
         <div id="preview" class="col-free">
-            <div id="preview-prompt">
-                <div id="initial-text">
-                    Type a prompt and press the "Make Image" button.<br/><br/>You can set an "Initial Image" if you want to guide the AI.<br/><br/>You can also add modifiers like "Realistic", "Pencil Sketch", "ArtStation" etc by browsing through the "Image Modifiers" section and selecting the desired modifiers.<br/><br/>Click "Advanced Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)
-                </div>
+            <div id="initial-text">
+                Type a prompt and press the "Make Image" button.<br/><br/>You can set an "Initial Image" if you want to guide the AI.<br/><br/>You can also add modifiers like "Realistic", "Pencil Sketch", "ArtStation" etc by browsing through the "Image Modifiers" section and selecting the desired modifiers.<br/><br/>Click "Advanced Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)
             </div>
-
-            <div id="outputMsg"></div>
-            <div id="progressBar"></div>
-            <div id="current-images" class="img-preview">
+            <div id="preview-tools">
+                <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
             </div>
         </div>
     </div>
@@ -212,7 +208,7 @@
 </div>
 </body>
 
-<script src="media/main.js?v=6"></script>
+<script src="media/main.js?v=10"></script>
 <script>
 async function init() {
     await loadModifiers()
diff --git a/ui/media/main.css b/ui/media/main.css
index 840bf6f4..77c09a88 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -54,7 +54,7 @@ label {
 .editor-slider {
     vertical-align: middle;
 }
-#outputMsg {
+.outputMsg {
     font-size: small;
     padding-bottom: 3pt;
 }
@@ -165,7 +165,7 @@ label {
     display: none;
 }
 #stopImage:hover {
-    background: rgb(214, 32, 0);
+    background: rgb(177, 27, 0);
 }
 .flex-container {
     display: flex;
@@ -174,7 +174,7 @@ label {
     flex: 50%;
 }
 .col-fixed-10 {
-    flex: 0 0 400pt;
+    flex: 0 0 380pt;
 }
 .col-free {
     flex: 1;
@@ -212,7 +212,7 @@ label {
     padding-bottom: 10pt;
 }
 #preview {
-    margin-left: 20pt;
+    margin-left: 10pt;
 }
 img {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
@@ -246,7 +246,7 @@ img {
     padding-left: 2pt;
     font-size: 10pt;
 }
-#preview-prompt {
+.preview-prompt {
     font-size: 16pt;
     margin-bottom: 10pt;
 }
@@ -365,4 +365,43 @@ img {
 }
 .dropdown:hover .dropdown-content {
     display: block;
+}
+
+.imageTaskContainer {
+    border: 1px solid #333;
+    margin-bottom: 10pt;
+    padding: 5pt;
+    border-radius: 5pt;
+    box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
+}
+.taskStatusLabel {
+    float: left;
+    font-size: 8pt;
+    background:rgb(44, 45, 48);
+    border: 1px solid rgb(61, 62, 66);
+    padding: 2pt 4pt;
+    border-radius: 2pt;
+    margin-right: 5pt;
+}
+.secondaryButton {
+    background: rgb(132, 8, 0);
+    border: 1px solid rgb(122, 29, 0);
+    color: rgb(255, 221, 255);
+    padding: 3pt 6pt;
+    border-radius: 5px;
+}
+.secondaryButton:hover {
+    background: rgb(177, 27, 0);
+}
+.stopTask {
+    float: right;
+}
+#preview-tools {
+    display: none;
+    padding: 4pt;
+}
+.taskConfig {
+    font-size: 10pt;
+    color: #aaa;
+    margin-bottom: 5pt;
 }
\ No newline at end of file
diff --git a/ui/media/main.js b/ui/media/main.js
index bc9fe29f..b0ee0610 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -57,6 +57,10 @@ let initImagePreviewContainer = document.querySelector('#init_image_preview_cont
 let initImageClearBtn = document.querySelector('.init_image_clear')
 let promptStrengthContainer = document.querySelector('#prompt_strength_container')
 
+let initialText = document.querySelector("#initial-text")
+let previewTools = document.querySelector("#preview-tools")
+let clearAllPreviewsBtn = document.querySelector("#clear-all-previews")
+
 // let maskSetting = document.querySelector('#editor-inputs-mask_setting')
 // let maskImagePreviewContainer = document.querySelector('#mask_preview_container')
 // let maskImageClearBtn = document.querySelector('#mask_clear')
@@ -66,18 +70,19 @@ let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
 let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
 let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
 
+let imagePreview = document.querySelector("#preview")
 let previewImageField = document.querySelector('#preview-image')
 previewImageField.onchange = () => changePreviewImages(previewImageField.value);
 
 let modifierCardSizeSlider = document.querySelector('#modifier-card-size-slider')
 modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value);
 
-let previewPrompt = document.querySelector('#preview-prompt')
+// let previewPrompt = document.querySelector('#preview-prompt')
 
 let showConfigToggle = document.querySelector('#configToggleBtn')
 // let configBox = document.querySelector('#config')
-let outputMsg = document.querySelector('#outputMsg')
-let progressBar = document.querySelector("#progressBar")
+// let outputMsg = document.querySelector('#outputMsg')
+// let progressBar = document.querySelector("#progressBar")
 
 let soundToggle = document.querySelector('#sound_toggle')
 
@@ -108,8 +113,8 @@ let serverStatus = 'offline'
 let activeTags = []
 let modifiers = []
 let lastPromptUsed = ''
-let taskStopped = true
-let batchesDone = 0
+
+let taskQueue = []
 
 const modifierThumbnailPath = 'media/modifier-thumbnails';
 const activeCardClass = 'modifier-card-active';
@@ -211,7 +216,7 @@ function setStatus(statusType, msg, msgType) {
     }
 }
 
-function logMsg(msg, level) {
+function logMsg(msg, level, outputMsg) {
     if (level === 'error') {
         outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>'
     } else if (level === 'warn') {
@@ -223,8 +228,8 @@ function logMsg(msg, level) {
     console.log(level, msg)
 }
 
-function logError(msg, res) {
-    logMsg(msg, 'error')
+function logError(msg, res, outputMsg) {
+    logMsg(msg, 'error', outputMsg)
 
     console.log('request error', res)
     setStatus('request', 'error', 'error')
@@ -251,7 +256,7 @@ async function healthCheck() {
     }
 }
 
-function makeImageElement(width, height) {
+function makeImageElement(width, height, outputContainer) {
     let imgItem = document.createElement('div')
     imgItem.className = 'imgItem'
 
@@ -260,17 +265,25 @@ function makeImageElement(width, height) {
     img.height = parseInt(height)
 
     imgItem.appendChild(img)
-    imagesContainer.insertBefore(imgItem, imagesContainer.firstChild)
+    outputContainer.insertBefore(imgItem, outputContainer.firstChild)
 
     return imgItem
 }
 
 // makes a single image. don't call this directly, use makeImage() instead
-async function doMakeImage(reqBody, batchCount) {
-    if (taskStopped) {
+async function doMakeImage(task) {
+    if (task.stopped) {
         return
     }
 
+    const reqBody = task.reqBody
+    const batchCount = task.batchCount
+    const outputContainer = task.outputContainer
+
+    const outputMsg = task['outputMsg']
+    const previewPrompt = task['previewPrompt']
+    const progressBar = task['progressBar']
+
     let res = ''
     let seed = reqBody['seed']
     let numOutputs = parseInt(reqBody['num_outputs'])
@@ -279,7 +292,7 @@ async function doMakeImage(reqBody, batchCount) {
 
     function makeImageContainers(numImages) {
         for (let i = images.length; i < numImages; i++) {
-            images.push(makeImageElement(reqBody.width, reqBody.height))
+            images.push(makeImageElement(reqBody.width, reqBody.height, outputContainer))
         }
     }
 
@@ -316,7 +329,7 @@ async function doMakeImage(reqBody, batchCount) {
                         finalJSON += jsonStr
                     } else {
                         let batchSize = stepUpdate.total_steps
-                        let overallStepCount = stepUpdate.step + batchesDone * batchSize
+                        let overallStepCount = stepUpdate.step + task.batchesDone * batchSize
                         let totalSteps = batchCount * batchSize
                         let percent = 100 * (overallStepCount / totalSteps)
                         percent = (percent > 100 ? 100 : percent)
@@ -326,7 +339,7 @@ async function doMakeImage(reqBody, batchCount) {
                         stepsRemaining = (stepsRemaining < 0 ? 0 : stepsRemaining)
                         timeRemaining = (timeTaken === -1 ? '' : stepsRemaining * timeTaken) // ms
 
-                        outputMsg.innerHTML = `Batch ${batchesDone+1} of ${batchCount}`
+                        outputMsg.innerHTML = `Batch ${task.batchesDone+1} of ${batchCount}`
                         outputMsg.innerHTML += `. Generating image(s): ${percent}%`
 
                         timeRemaining = (timeTaken !== -1 ? millisecondsToStr(timeRemaining) : '')
@@ -351,7 +364,7 @@ async function doMakeImage(reqBody, batchCount) {
 
                 prevTime = t
             } catch (e) {
-                logError('Stable Diffusion had an error. Please check the logs in the command-line window.', res)
+                logError('Stable Diffusion had an error. Please check the logs in the command-line window.', res, outputMsg)
                 res = undefined
                 throw e
             }
@@ -359,9 +372,9 @@ async function doMakeImage(reqBody, batchCount) {
 
         if (res.status != 200) {
             if (serverStatus === 'online') {
-                logError('Stable Diffusion had an error: ' + await res.text(), res)
+                logError('Stable Diffusion had an error: ' + await res.text(), res, outputMsg)
             } else {
-                logError("Stable Diffusion is still starting up, please wait. If this goes on beyond a few minutes, Stable Diffusion has probably crashed. Please check the error message in the command-line window.", res)
+                logError("Stable Diffusion is still starting up, please wait. If this goes on beyond a few minutes, Stable Diffusion has probably crashed. Please check the error message in the command-line window.", res, outputMsg)
             }
             res = undefined
             progressBar.style.display = 'none'
@@ -398,13 +411,13 @@ async function doMakeImage(reqBody, batchCount) {
                 } else {
                     msg = res
                 }
-                logError(msg, res)
+                logError(msg, res, outputMsg)
                 res = undefined
             }
         }
     } catch (e) {
         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)
+        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'
         res = undefined
@@ -493,48 +506,107 @@ async function doMakeImage(reqBody, batchCount) {
     return true
 }
 
-function validateInput() {
-    let width = parseInt(widthField.value)
-    let height = parseInt(heightField.value)
+// function validateInput() {
+//     let width = parseInt(widthField.value)
+//     let height = parseInt(heightField.value)
 
-    if (IMAGE_REGEX.test(initImagePreview.src)) {
-        if (initImagePreview.naturalWidth > MAX_INIT_IMAGE_DIMENSION || initImagePreview.naturalHeight > MAX_INIT_IMAGE_DIMENSION) {
-            return {'isValid': false, 'warning': `The dimensions of your initial image are very large, and can cause 'Out of Memory' errors! Please ensure that its dimensions are equal (or smaller) than the desired output image.
-                    <br/><br/>
-                    Your initial image size is ${initImagePreview.naturalWidth}x${initImagePreview.naturalHeight} pixels. Please try to keep it smaller than ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION}.`}
-        }
-    }
+//     if (IMAGE_REGEX.test(initImagePreview.src)) {
+//         if (initImagePreview.naturalWidth > MAX_INIT_IMAGE_DIMENSION || initImagePreview.naturalHeight > MAX_INIT_IMAGE_DIMENSION) {
+//             return {'isValid': false, 'warning': `The dimensions of your initial image are very large, and can cause 'Out of Memory' errors! Please ensure that its dimensions are equal (or smaller) than the desired output image.
+//                     <br/><br/>
+//                     Your initial image size is ${initImagePreview.naturalWidth}x${initImagePreview.naturalHeight} pixels. Please try to keep it smaller than ${MAX_INIT_IMAGE_DIMENSION}x${MAX_INIT_IMAGE_DIMENSION}.`}
+//         }
+//     }
 
-    return {'isValid': true}
-}
+//     return {'isValid': true}
+// }
 
-async function makeImage() {
-    if (serverStatus !== 'online') {
-        logError('The server is still starting up..')
+async function checkTasks() {
+    if (taskQueue.length === 0) {
+        setStatus('request', 'done', 'success')
+        setTimeout(checkTasks, 500)
+        stopImageBtn.style.display = 'none'
+        makeImageBtn.innerHTML = 'Make Image'
         return
     }
 
-    let validation = validateInput()
-    if (validation['isValid']) {
-        outputMsg.innerHTML = 'Starting..'
-    } else {
-        if (validation['error']) {
-            logError(validation['error'])
-            return
-        } else if (validation['warning']) {
-            logMsg(validation['warning'], 'warn')
-        }
-    }
-
     setStatus('request', 'fetching..')
 
-    makeImageBtn.innerHTML = 'Processing..'
-    makeImageBtn.disabled = true
-    makeImageBtn.style.display = 'none'
     stopImageBtn.style.display = 'block'
+    makeImageBtn.innerHTML = 'Enqueue Next Image'
 
-    taskStopped = false
-    batchesDone = 0
+    previewTools.style.display = 'block'
+
+    let task = taskQueue.pop()
+
+    let time = new Date().getTime()
+
+    let successCount = 0
+
+    task.isProcessing = true
+    task['stopTask'].innerHTML = '<i class="fa-solid fa-circle-stop"></i> Stop'
+    task['taskStatusLabel'].style.display = 'none'
+
+    for (let i = 0; i < task.batchCount; i++) {
+        task.reqBody['seed'] = task.seed + (i * task.reqBody['num_outputs'])
+
+        let success = await doMakeImage(task)
+        task.batchesDone++
+
+        if (success) {
+            successCount++
+        }
+    }
+
+    task.isProcessing = false
+    task['stopTask'].innerHTML = '<i class="fa-solid fa-trash-can"></i> Remove'
+
+    time = new Date().getTime() - time
+    time /= 1000
+
+    if (successCount === task.batchCount) {
+        task.outputMsg.innerText = 'Processed ' + task.numOutputsTotal + ' images in ' + time + ' seconds'
+
+        // setStatus('request', 'done', 'success')
+    }
+
+    if (randomSeedField.checked) {
+        seedField.value = task.seed
+    }
+
+    setTimeout(checkTasks, 10)
+}
+setTimeout(checkTasks, 0)
+
+async function makeImage() {
+    if (serverStatus !== 'online') {
+        alert('The server is still starting up..')
+        return
+    }
+
+    // let validation = validateInput()
+    // if (validation['isValid']) {
+    //     // outputMsg.innerHTML = 'Starting..'
+    // } else {
+    //     if (validation['error']) {
+    //         logError(validation['error'])
+    //         return
+    //     } else if (validation['warning']) {
+    //         logMsg(validation['warning'], 'warn')
+    //     }
+    // }
+
+    // setStatus('request', 'fetching..')
+
+    // makeImageBtn.innerHTML = 'Processing..'
+    // makeImageBtn.disabled = true
+    // makeImageBtn.style.display = 'none'
+    // stopImageBtn.style.display = 'block'
+
+    let task = {
+        stopped: false,
+        batchesDone: 0
+    }
 
     let seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000000) : parseInt(seedField.value))
     let numOutputsTotal = parseInt(numOutputsTotalField.value)
@@ -550,8 +622,6 @@ async function makeImage() {
         prompt += ", " + promptTags;
     }
 
-    previewPrompt.innerText = prompt
-
     let reqBody = {
         session_id: sessionId,
         prompt: prompt,
@@ -597,45 +667,107 @@ async function makeImage() {
         reqBody['use_upscale'] = upscaleModelField.value
     }
 
-    let time = new Date().getTime()
-    imagesContainer.innerHTML = ''
+    let taskConfig = `Seed: ${seed}, Sampler: ${reqBody['sampler']}, Inference Steps: ${numInferenceStepsField.value}, Guidance Scale: ${guidanceScaleField.value}`
 
-    let successCount = 0
+    if (reqBody['init_image'] !== undefined) {
+        taskConfig += `, Prompt Strength: ${promptStrengthField.value}`
+    }
 
-    for (let i = 0; i < batchCount; i++) {
-        reqBody['seed'] = seed + (i * batchSize)
+    if (useFaceCorrectionField.checked) {
+        taskConfig += `, Fix Faces: ${reqBody['use_face_correction']}`
+    }
 
-        let success = await doMakeImage(reqBody, batchCount)
-        batchesDone++
+    if (useUpscalingField.checked) {
+        taskConfig += `, Upscale: ${reqBody['use_upscale']}`
+    }
 
-        if (success) {
-            successCount++
+    task['reqBody'] = reqBody
+    task['seed'] = seed
+    task['batchCount'] = batchCount
+    task['isProcessing'] = false
+
+    let taskEntry = document.createElement('div')
+    taskEntry.className = 'imageTaskContainer'
+    taskEntry.innerHTML = ` <div class="taskStatusLabel">Enqueued</div>
+                            <button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
+                            <div class="preview-prompt"></div>
+                            <div class="taskConfig">${taskConfig}</div>
+                            <div class="outputMsg"></div>
+                            <div class="progressBar"></div>
+                            <div class="img-preview">`
+
+    task['numOutputsTotal'] = numOutputsTotal
+    task['taskStatusLabel'] = taskEntry.querySelector('.taskStatusLabel')
+    task['outputContainer'] = taskEntry.querySelector('.img-preview')
+    task['outputMsg'] = taskEntry.querySelector('.outputMsg')
+    task['previewPrompt'] = taskEntry.querySelector('.preview-prompt')
+    task['progressBar'] = taskEntry.querySelector('.progressBar')
+    task['stopTask'] = taskEntry.querySelector('.stopTask')
+
+    task['stopTask'].addEventListener('click', async function() {
+        if (task['isProcessing']) {
+            try {
+                let res = await fetch('/image/stop')
+            } catch (e) {
+                console.log(e)
+            }
+        } else {
+            let idx = taskQueue.indexOf(task)
+            if (idx >= 0) {
+                taskQueue.splice(idx, 1)
+            }
+
+            taskEntry.remove()
         }
-    }
+    })
 
-    progressBar.style.display = 'none'
+    imagePreview.insertBefore(taskEntry, previewTools.nextSibling)
 
-    makeImageBtn.innerText = 'Make Image'
-    makeImageBtn.disabled = false
-    makeImageBtn.style.display = 'block'
-    stopImageBtn.style.display = 'none'
+    task['previewPrompt'].innerText = prompt
 
-    if (isSoundEnabled()) {
-        playSound()
-    }
+    taskQueue.unshift(task)
 
-    time = new Date().getTime() - time
-    time /= 1000
+    initialText.style.display = 'none'
 
-    if (successCount === batchCount) {
-        outputMsg.innerText = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
+    // let time = new Date().getTime()
+    // imagesContainer.innerHTML = ''
 
-        setStatus('request', 'done', 'success')
-    }
+    // let successCount = 0
 
-    if (randomSeedField.checked) {
-        seedField.value = seed
-    }
+    // for (let i = 0; i < batchCount; i++) {
+    //     reqBody['seed'] = seed + (i * batchSize)
+
+    //     let success = await doMakeImage(reqBody, batchCount)
+    //     batchesDone++
+
+    //     if (success) {
+    //         successCount++
+    //     }
+    // }
+
+    // progressBar.style.display = 'none'
+
+    // makeImageBtn.innerText = 'Make Image'
+    // makeImageBtn.disabled = false
+    // makeImageBtn.style.display = 'block'
+    // stopImageBtn.style.display = 'none'
+
+    // if (isSoundEnabled()) {
+    //     playSound()
+    // }
+
+    // time = new Date().getTime() - time
+    // time /= 1000
+
+    // if (successCount === batchCount) {
+    //     outputMsg.innerText = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
+
+    //     setStatus('request', 'done', 'success')
+    // }
+
+    // if (randomSeedField.checked) {
+    //     seedField.value = seed
+    // }
 }
 
 // create a file name with embedded prompt and metadata
@@ -674,17 +806,38 @@ function createFileName() {
     return fileName
 }
 
-stopImageBtn.addEventListener('click', async function() {
+async function stopAllTasks() {
+    taskQueue.forEach(task => {
+        task.isProcessing = false
+    })
+    taskQueue = []
+
     try {
         let res = await fetch('/image/stop')
     } catch (e) {
         console.log(e)
     }
+}
 
-    stopImageBtn.style.display = 'none'
-    makeImageBtn.style.display = 'block'
+clearAllPreviewsBtn.addEventListener('click', async function() {
+    await stopAllTasks()
 
-    taskStopped = true
+    let taskEntries = document.querySelectorAll('.imageTaskContainer')
+    taskEntries.forEach(task => {
+        task.remove()
+    })
+
+    previewTools.style.display = 'none'
+    initialText.style.display = 'block'
+})
+
+stopImageBtn.addEventListener('click', async function() {
+    await stopAllTasks()
+
+    // stopImageBtn.style.display = 'none'
+    // makeImageBtn.style.display = 'block'
+
+    // taskStopped = true
 })
 
 soundToggle.addEventListener('click', handleBoolSettingChange(SOUND_ENABLED_KEY))
@@ -781,7 +934,7 @@ updatePromptStrength()
 
 useBetaChannelField.addEventListener('click', async function(e) {
     if (serverStatus !== 'online') {
-        logError('The server is still starting up..')
+        // logError('The server is still starting up..')
         alert('The server is still starting up..')
         e.preventDefault()
         return false