Added upscale button with matching 'getStartUpscaleHandler' function.

This commit is contained in:
Marc-Andre Ferland 2022-10-09 07:19:00 -04:00
parent d3e49cf1e9
commit 3753fb3ea4

View File

@ -335,21 +335,24 @@ function showImages(req, res, outputContainer, livePreview) {
<span class="imgSeedLabel"></span> <span class="imgSeedLabel"></span>
<button class="imgUseBtn">Use as Input</button> <button class="imgUseBtn">Use as Input</button>
<button class="imgSaveBtn">Download</button> <button class="imgSaveBtn">Download</button>
<button class="upscaleBtn">Upscale</button>
</div> </div>
</div> </div>
` `
const useAsInputBtn = imageItemElem.querySelector('.imgUseBtn'), const useAsInputBtn = imageItemElem.querySelector('.imgUseBtn')
saveImageBtn = imageItemElem.querySelector('.imgSaveBtn'); const saveImageBtn = imageItemElem.querySelector('.imgSaveBtn')
const upscaleImageBtn = imageItemElem.querySelector('.upscaleBtn')
useAsInputBtn.addEventListener('click', getUseAsInputHandler(imageItemElem)) useAsInputBtn.addEventListener('click', getUseAsInputHandler(imageItemElem))
saveImageBtn.addEventListener('click', getSaveImageHandler(imageItemElem, req['output_format'])) saveImageBtn.addEventListener('click', getSaveImageHandler(imageItemElem, req['output_format']))
upscaleImageBtn.addEventListener('click', getStartUpscaleHandler(req, imageItemElem))
outputContainer.appendChild(imageItemElem) outputContainer.appendChild(imageItemElem)
} }
const imageElem = imageItemElem.querySelector('img'), const imageElem = imageItemElem.querySelector('img')
imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel'); const imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel')
imageElem.src = imageData imageElem.src = imageData
imageElem.width = parseInt(imageWidth) imageElem.width = parseInt(imageWidth)
@ -398,6 +401,29 @@ function getSaveImageHandler(imageItemElem, outputFormat) {
imgDownload.click() imgDownload.click()
} }
} }
function getStartUpscaleHandler(reqBody, imageItemElem) {
return function() {
if (serverStatus !== 'online') {
alert('The server is still starting up..')
return
}
const imageElem = imageItemElem.querySelector('img')
const newTaskRequest = getCurrentUserRequest()
newTaskRequest.reqBody = Object.assign({}, reqBody, {
num_outputs: 1,
width: reqBody.width * 2,
height: reqBody.height * 2,
init_image: imageElem.src,
sampler: 'ddim',
prompt_strength: '0.5',
num_inference_steps: Math.min(100, reqBody.num_inference_steps * 2)
})
newTaskRequest.seed = newTaskRequest.reqBody.seed
newTaskRequest.numOutputsTotal = 1
newTaskRequest.batchCount = 1
createTask(newTaskRequest)
}
}
// 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(task) { async function doMakeImage(task) {