extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-25 17:55:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Allow queuing up of tasks

Browse Source
This commit is contained in:
cmdr2 2022-09-27 18:09:07 +05:30
parent 864fc84899
commit 05a4701d98
3 changed files with 291 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui/index.html
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=4"> <link rel="stylesheet" href="/media/main.css?v=10">
<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">
@ -78,7 +78,7 @@
</div> </div>
<button id="makeImage">Make Image</button> <button id="makeImage">Make Image</button>
<button id="stopImage">Stop</button> <button id="stopImage" class="secondaryButton">Stop All</button>
</div> </div>
<div class="line-separator">&nbsp;</div> <div class="line-separator">&nbsp;</div>
@ -154,7 +154,7 @@
<br/> <br/>
<li><b class="settings-subheader">Render Settings</b></li> <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_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"> <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> <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>
<div id="preview" class="col-free"> <div id="preview" class="col-free">
<div id="preview-prompt">
<div id="initial-text"> <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! :) 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>
</div> <div id="preview-tools">
<button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
<div id="outputMsg"></div>
<div id="progressBar"></div>
<div id="current-images" class="img-preview">
</div> </div>
</div> </div>
</div> </div>
@ -212,7 +208,7 @@
</div> </div>
</body> </body>
<script src="media/main.js?v=6"></script> <script src="media/main.js?v=10"></script>
<script> <script>
async function init() { async function init() {
await loadModifiers() await loadModifiers()

49
ui/media/main.css
View File

@ -54,7 +54,7 @@ label {
.editor-slider { .editor-slider {
vertical-align: middle; vertical-align: middle;
} }
#outputMsg { .outputMsg {
font-size: small; font-size: small;
padding-bottom: 3pt; padding-bottom: 3pt;
} }
@ -165,7 +165,7 @@ label {
display: none; display: none;
} }
#stopImage:hover { #stopImage:hover {
background: rgb(214, 32, 0); background: rgb(177, 27, 0);
} }
.flex-container { .flex-container {
display: flex; display: flex;
@ -174,7 +174,7 @@ label {
flex: 50%; flex: 50%;
} }
.col-fixed-10 { .col-fixed-10 {
flex: 0 0 400pt; flex: 0 0 380pt;
} }
.col-free { .col-free {
flex: 1; flex: 1;
@ -212,7 +212,7 @@ label {
padding-bottom: 10pt; padding-bottom: 10pt;
} }
#preview { #preview {
margin-left: 20pt; margin-left: 10pt;
} }
img { img {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); 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; padding-left: 2pt;
font-size: 10pt; font-size: 10pt;
} }
#preview-prompt { .preview-prompt {
font-size: 16pt; font-size: 16pt;
margin-bottom: 10pt; margin-bottom: 10pt;
} }
@ -366,3 +366,42 @@ img {
.dropdown:hover .dropdown-content { .dropdown:hover .dropdown-content {
display: block; 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;
}

333
ui/media/main.js
View File

@ -57,6 +57,10 @@ let initImagePreviewContainer = document.querySelector('#init_image_preview_cont
let initImageClearBtn = document.querySelector('.init_image_clear') let initImageClearBtn = document.querySelector('.init_image_clear')
let promptStrengthContainer = document.querySelector('#prompt_strength_container') 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 maskSetting = document.querySelector('#editor-inputs-mask_setting')
// let maskImagePreviewContainer = document.querySelector('#mask_preview_container') // let maskImagePreviewContainer = document.querySelector('#mask_preview_container')
// let maskImageClearBtn = document.querySelector('#mask_clear') // 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 editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
let editorTagsContainer = document.querySelector('#editor-inputs-tags-container') let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
let imagePreview = document.querySelector("#preview")
let previewImageField = document.querySelector('#preview-image') let previewImageField = document.querySelector('#preview-image')
previewImageField.onchange = () => changePreviewImages(previewImageField.value); previewImageField.onchange = () => changePreviewImages(previewImageField.value);
let modifierCardSizeSlider = document.querySelector('#modifier-card-size-slider') let modifierCardSizeSlider = document.querySelector('#modifier-card-size-slider')
modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value); modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value);
let previewPrompt = document.querySelector('#preview-prompt') // let previewPrompt = document.querySelector('#preview-prompt')
let showConfigToggle = document.querySelector('#configToggleBtn') let showConfigToggle = document.querySelector('#configToggleBtn')
// let configBox = document.querySelector('#config') // let configBox = document.querySelector('#config')
let outputMsg = document.querySelector('#outputMsg') // let outputMsg = document.querySelector('#outputMsg')
let progressBar = document.querySelector("#progressBar") // let progressBar = document.querySelector("#progressBar")
let soundToggle = document.querySelector('#sound_toggle') let soundToggle = document.querySelector('#sound_toggle')
@ -108,8 +113,8 @@ let serverStatus = 'offline'
let activeTags = [] let activeTags = []
let modifiers = [] let modifiers = []
let lastPromptUsed = '' let lastPromptUsed = ''
let taskStopped = true
let batchesDone = 0 let taskQueue = []
const modifierThumbnailPath = 'media/modifier-thumbnails'; const modifierThumbnailPath = 'media/modifier-thumbnails';
const activeCardClass = 'modifier-card-active'; 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') { if (level === 'error') {
outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>' outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>'
} else if (level === 'warn') { } else if (level === 'warn') {
@ -223,8 +228,8 @@ function logMsg(msg, level) {
console.log(level, msg) console.log(level, msg)
} }
function logError(msg, res) { function logError(msg, res, outputMsg) {
logMsg(msg, 'error') logMsg(msg, 'error', outputMsg)
console.log('request error', res) console.log('request error', res)
setStatus('request', 'error', 'error') 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') let imgItem = document.createElement('div')
imgItem.className = 'imgItem' imgItem.className = 'imgItem'
@ -260,17 +265,25 @@ function makeImageElement(width, height) {
img.height = parseInt(height) img.height = parseInt(height)
imgItem.appendChild(img) imgItem.appendChild(img)
imagesContainer.insertBefore(imgItem, imagesContainer.firstChild) outputContainer.insertBefore(imgItem, outputContainer.firstChild)
return imgItem return imgItem
} }
// makes a single image. don't call this directly, use makeImage() instead // makes a single image. don't call this directly, use makeImage() instead
async function doMakeImage(reqBody, batchCount) { async function doMakeImage(task) {
if (taskStopped) { if (task.stopped) {
return 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 res = ''
let seed = reqBody['seed'] let seed = reqBody['seed']
let numOutputs = parseInt(reqBody['num_outputs']) let numOutputs = parseInt(reqBody['num_outputs'])
@ -279,7 +292,7 @@ async function doMakeImage(reqBody, batchCount) {
function makeImageContainers(numImages) { function makeImageContainers(numImages) {
for (let i = images.length; i < numImages; i++) { 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 finalJSON += jsonStr
} else { } else {
let batchSize = stepUpdate.total_steps let batchSize = stepUpdate.total_steps
let overallStepCount = stepUpdate.step + batchesDone * batchSize let overallStepCount = stepUpdate.step + task.batchesDone * batchSize
let totalSteps = batchCount * batchSize let totalSteps = batchCount * batchSize
let percent = 100 * (overallStepCount / totalSteps) let percent = 100 * (overallStepCount / totalSteps)
percent = (percent > 100 ? 100 : percent) percent = (percent > 100 ? 100 : percent)
@ -326,7 +339,7 @@ async function doMakeImage(reqBody, batchCount) {
stepsRemaining = (stepsRemaining < 0 ? 0 : stepsRemaining) stepsRemaining = (stepsRemaining < 0 ? 0 : stepsRemaining)
timeRemaining = (timeTaken === -1 ? '' : stepsRemaining * timeTaken) // ms 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}%` outputMsg.innerHTML += `. Generating image(s): ${percent}%`
timeRemaining = (timeTaken !== -1 ? millisecondsToStr(timeRemaining) : '') timeRemaining = (timeTaken !== -1 ? millisecondsToStr(timeRemaining) : '')
@ -351,7 +364,7 @@ async function doMakeImage(reqBody, batchCount) {
prevTime = t prevTime = t
} catch (e) { } 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 res = undefined
throw e throw e
} }
@ -359,9 +372,9 @@ async function doMakeImage(reqBody, batchCount) {
if (res.status != 200) { if (res.status != 200) {
if (serverStatus === 'online') { 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 { } 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 res = undefined
progressBar.style.display = 'none' progressBar.style.display = 'none'
@ -398,13 +411,13 @@ async function doMakeImage(reqBody, batchCount) {
} else { } else {
msg = res msg = res
} }
logError(msg, res) logError(msg, res, outputMsg)
res = undefined res = undefined
} }
} }
} catch (e) { } catch (e) {
console.log('request error', 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') setStatus('request', 'error', 'error')
progressBar.style.display = 'none' progressBar.style.display = 'none'
res = undefined res = undefined
@ -493,48 +506,107 @@ async function doMakeImage(reqBody, batchCount) {
return true return true
} }
function validateInput() { // function validateInput() {
let width = parseInt(widthField.value) // let width = parseInt(widthField.value)
let height = parseInt(heightField.value) // let height = parseInt(heightField.value)
if (IMAGE_REGEX.test(initImagePreview.src)) { // if (IMAGE_REGEX.test(initImagePreview.src)) {
if (initImagePreview.naturalWidth > MAX_INIT_IMAGE_DIMENSION || initImagePreview.naturalHeight > MAX_INIT_IMAGE_DIMENSION) { // 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. // 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/> // <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}.`} // 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() { async function checkTasks() {
if (serverStatus !== 'online') { if (taskQueue.length === 0) {
logError('The server is still starting up..') setStatus('request', 'done', 'success')
setTimeout(checkTasks, 500)
stopImageBtn.style.display = 'none'
makeImageBtn.innerHTML = 'Make Image'
return 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..') setStatus('request', 'fetching..')
makeImageBtn.innerHTML = 'Processing..'
makeImageBtn.disabled = true
makeImageBtn.style.display = 'none'
stopImageBtn.style.display = 'block' stopImageBtn.style.display = 'block'
makeImageBtn.innerHTML = 'Enqueue Next Image'
taskStopped = false previewTools.style.display = 'block'
batchesDone = 0
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 seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000000) : parseInt(seedField.value))
let numOutputsTotal = parseInt(numOutputsTotalField.value) let numOutputsTotal = parseInt(numOutputsTotalField.value)
@ -550,8 +622,6 @@ async function makeImage() {
prompt += ", " + promptTags; prompt += ", " + promptTags;
} }
previewPrompt.innerText = prompt
let reqBody = { let reqBody = {
session_id: sessionId, session_id: sessionId,
prompt: prompt, prompt: prompt,
@ -597,45 +667,107 @@ async function makeImage() {
reqBody['use_upscale'] = upscaleModelField.value reqBody['use_upscale'] = upscaleModelField.value
} }
let time = new Date().getTime() let taskConfig = `Seed: ${seed}, Sampler: ${reqBody['sampler']}, Inference Steps: ${numInferenceStepsField.value}, Guidance Scale: ${guidanceScaleField.value}`
imagesContainer.innerHTML = ''
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)
let success = await doMakeImage(reqBody, batchCount)
batchesDone++
if (success) {
successCount++
}
} }
progressBar.style.display = 'none' if (useFaceCorrectionField.checked) {
taskConfig += `, Fix Faces: ${reqBody['use_face_correction']}`
makeImageBtn.innerText = 'Make Image'
makeImageBtn.disabled = false
makeImageBtn.style.display = 'block'
stopImageBtn.style.display = 'none'
if (isSoundEnabled()) {
playSound()
} }
time = new Date().getTime() - time if (useUpscalingField.checked) {
time /= 1000 taskConfig += `, Upscale: ${reqBody['use_upscale']}`
if (successCount === batchCount) {
outputMsg.innerText = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
setStatus('request', 'done', 'success')
} }
if (randomSeedField.checked) { task['reqBody'] = reqBody
seedField.value = seed 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()
}
})
imagePreview.insertBefore(taskEntry, previewTools.nextSibling)
task['previewPrompt'].innerText = prompt
taskQueue.unshift(task)
initialText.style.display = 'none'
// let time = new Date().getTime()
// imagesContainer.innerHTML = ''
// let successCount = 0
// 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 // create a file name with embedded prompt and metadata
@ -674,17 +806,38 @@ function createFileName() {
return fileName return fileName
} }
stopImageBtn.addEventListener('click', async function() { async function stopAllTasks() {
taskQueue.forEach(task => {
task.isProcessing = false
})
taskQueue = []
try { try {
let res = await fetch('/image/stop') let res = await fetch('/image/stop')
} catch (e) { } catch (e) {
console.log(e) console.log(e)
} }
}
stopImageBtn.style.display = 'none' clearAllPreviewsBtn.addEventListener('click', async function() {
makeImageBtn.style.display = 'block' 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)) soundToggle.addEventListener('click', handleBoolSettingChange(SOUND_ENABLED_KEY))
@ -781,7 +934,7 @@ updatePromptStrength()
useBetaChannelField.addEventListener('click', async function(e) { useBetaChannelField.addEventListener('click', async function(e) {
if (serverStatus !== 'online') { if (serverStatus !== 'online') {
logError('The server is still starting up..') // logError('The server is still starting up..')
alert('The server is still starting up..') alert('The server is still starting up..')
e.preventDefault() e.preventDefault()
return false return false