holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow generating an arbitrary number of output images, with parallel batches of 1 or 4 depending on the GPU's capabilities

Browse Source
This commit is contained in:
cmdr2 2022-08-27 10:53:46 +05:30
parent 75a9466232
commit 6b55f385c7
1 changed files with 91 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
index.html
View File

@ -66,16 +66,29 @@
padding-top: 10px;
font-size: small;
}
.imgUseBtn {
.imgSeedLabel {
position: absolute;
transform: translateX(-100%);
margin-top: 5pt;
margin-left: -5pt;
font-size: 10pt;
background-color: #333;
opacity: 0.8;
color: #ddd;
border-radius: 3pt;
padding: 1pt 3pt;
}
.imgUseBtn {
position: absolute;
transform: translateX(-100%);
margin-top: 30pt;
margin-left: -5pt;
}
.imgSaveBtn {
position: absolute;
transform: translateX(-100%);
margin-top: 30pt;
margin-top: 55pt;
margin-left: -5pt;
}
.imgItem {
@ -108,11 +121,11 @@
<div id="configHeader"><b>Advanced settings:</b> [<a id="configToggleBtn" href="#">show</a>]</div>
<div id="config">
<label for="seed">Seed:</label> <input id="seed" name="seed" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random Image</label> <br/>
<label for="num_outputs">Number of outputs:</label> <select id="num_outputs" name="num_outputs" value="1"><option value="1" selected>1</option><option value="4">4</option></select><br/>
<label for="seed">Seed:</label> <input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random Image</label> <br/>
<label for="num_outputs_total">Number of outputs:</label> <input id="num_outputs_total" name="num_outputs_total" value="1" size="4"> <label for="num_outputs_parallel">Generate in parallel:</label> <select id="num_outputs_parallel" name="num_outputs_parallel" value="1"><option value="1" selected>1 image at a time</option><option value="4">4 images at a time</option></select><br/>
<label for="width">Width:</label> <select id="width" name="width" value="512"><option value="128">128</option><option value="256">256</option><option value="512" selected>512</option><option value="768">768</option><option value="1024">1024</option></select><br/>
<label for="height">Height:</label> <select id="height" name="height" value="512"><option value="128">128</option><option value="256">256</option><option value="512" selected>512</option><option value="768">768</option></select><br/>
<label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" value="50"><br/>
<label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" size="4" value="50"><br/>
<label for="guidance_scale">Guidance Scale:</label> <input id="guidance_scale" name="guidance_scale" value="75" type="range" min="10" max="200"> <span id="guidance_scale_value"></span><br/>
<span id="prompt_strength_container"><label for="prompt_strength">Prompt Strength:</label> <input id="prompt_strength" name="prompt_strength" value="8" type="range" min="0" max="10"> <span id="prompt_strength_value"></span><br/></span><br/>
<input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Play sound on task completion</label><br/>
@ -137,7 +150,8 @@ const SOUND_ENABLED_KEY = "soundEnabled"
const HEALTH_PING_INTERVAL = 5 // seconds
let promptField = document.querySelector('#prompt')
let numOutputsField = document.querySelector('#num_outputs')
let numOutputsTotalField = document.querySelector('#num_outputs_total')
let numOutputsParallelField = document.querySelector('#num_outputs_parallel')
let numInferenceStepsField = document.querySelector('#num_inference_steps')
let guidanceScaleField = document.querySelector('#guidance_scale')
let guidanceScaleValueLabel = document.querySelector('#guidance_scale_value')
@ -199,6 +213,12 @@ function setStatus(statusType, msg, msgType) {
}
}
function logError(msg, res) {
outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>'
console.log('request error', res)
setStatus('request', 'error', 'error')
}
function playSound() {
const audio = new Audio('/media/ding.mp3')
audio.volume = 0.2
@ -220,43 +240,10 @@ async function healthCheck() {
}
}
async function makeImage() {
setStatus('request', 'fetching..')
makeImageBtn.innerHTML = 'Processing..'
makeImageBtn.disabled = true
outputMsg.innerHTML = 'Fetching..'
function logError(msg, res) {
outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>'
console.log('request error', res)
setStatus('request', 'error', 'error')
}
let seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000) : seedField.value)
let reqBody = {
prompt: promptField.value,
num_outputs: numOutputsField.value,
num_inference_steps: numInferenceStepsField.value,
guidance_scale: guidanceScaleField.value / 10,
width: widthField.value,
height: heightField.value,
seed: seed,
}
if (initImagePreview.src.indexOf('data:image/png;base64') !== -1) {
reqBody['init_image'] = initImagePreview.src
reqBody['prompt_strength'] = promptStrengthField.value / 10
if (maskImagePreview.src.indexOf('data:image/png;base64') !== -1) {
reqBody['mask'] = maskImagePreview.src
}
}
// makes a single image. don't call this directly, use makeImage() instead
async function doMakeImage(reqBody) {
let res = ''
let time = new Date().getTime()
let seed = reqBody['seed']
try {
res = await fetch('/image', {
@ -293,24 +280,10 @@ async function makeImage() {
setStatus('request', 'error', 'error')
}
makeImageBtn.innerHTML = 'Make Image'
makeImageBtn.disabled = false
if (isSoundEnabled()) {
playSound()
}
if (!res) {
return
}
time = new Date().getTime() - time
time /= 1000
outputMsg.innerHTML = 'Processed in ' + time + ' seconds. Seed: ' + seed
imagesContainer.innerHTML = ''
for (let idx in res.output) {
let imgBody = ''
@ -319,7 +292,7 @@ async function makeImage() {
} catch (e) {
console.log(imgBody)
setStatus('request', 'invalid image', 'error')
return
continue
}
let imgItem = document.createElement('div')
@ -330,6 +303,10 @@ async function makeImage() {
img.height = parseInt(reqBody.height)
img.src = imgBody
let imgSeedLabel = document.createElement('span')
imgSeedLabel.className = 'imgSeedLabel'
imgSeedLabel.innerHTML = 'Seed: ' + seed
let imgUseBtn = document.createElement('button')
imgUseBtn.className = 'imgUseBtn'
imgUseBtn.innerHTML = 'Use as Input'
@ -339,6 +316,7 @@ async function makeImage() {
imgSaveBtn.innerHTML = 'Download'
imgItem.appendChild(img)
imgItem.appendChild(imgSeedLabel)
imgItem.appendChild(imgUseBtn)
imgItem.appendChild(imgSaveBtn)
imagesContainer.appendChild(imgItem)
@ -364,6 +342,62 @@ async function makeImage() {
imgDownload.click()
})
}
}
async function makeImage() {
setStatus('request', 'fetching..')
makeImageBtn.innerHTML = 'Processing..'
makeImageBtn.disabled = true
outputMsg.innerHTML = 'Fetching..'
let seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000) : parseInt(seedField.value))
let numOutputsTotal = parseInt(numOutputsTotalField.value)
let numOutputsParallel = parseInt(numOutputsParallelField.value)
let batchCount = Math.ceil(numOutputsTotal / numOutputsParallel)
let batchSize = numOutputsParallel
let reqBody = {
prompt: promptField.value,
num_outputs: batchSize,
num_inference_steps: numInferenceStepsField.value,
guidance_scale: parseInt(guidanceScaleField.value) / 10,
width: widthField.value,
height: heightField.value,
}
if (initImagePreview.src.indexOf('data:image/png;base64') !== -1) {
reqBody['init_image'] = initImagePreview.src
reqBody['prompt_strength'] = parseInt(promptStrengthField.value) / 10
if (maskImagePreview.src.indexOf('data:image/png;base64') !== -1) {
reqBody['mask'] = maskImagePreview.src
}
}
let time = new Date().getTime()
imagesContainer.innerHTML = ''
for (let i = 0; i < batchCount; i++) {
reqBody['seed'] = seed + i
await doMakeImage(reqBody)
outputMsg.innerHTML = 'Processed batch ' + (i+1) + '/' + batchCount
}
makeImageBtn.innerHTML = 'Make Image'
makeImageBtn.disabled = false
if (isSoundEnabled()) {
playSound()
}
time = new Date().getTime() - time
time /= 1000
outputMsg.innerHTML = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'
setStatus('request', 'done', 'success')