mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-11-25 09:44:25 +01:00
Allow queuing up of tasks
This commit is contained in:
cmdr2
parent
864fc84899
commit
05a4701d98
@ -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"> </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()
|
||||
|
||||
@ -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;
|
||||
}
|
||||
325
ui/media/main.js
325
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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user