extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-04-21 09:58:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix for live preview

Browse Source
This commit is contained in:
Haka 2022-09-27 17:23:19 +03:00
parent 5ba802dc68
commit c1dea44fa6
1 changed files with 65 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
ui/media/main.js
View File

@ -251,71 +251,81 @@ async function healthCheck() {
} }
} }
function showImages(res, req) { function showImages(req, res, livePreview) {
res.output.forEach(result => { res.output.forEach((result, index) => {
if(typeof res != 'object') return; if(typeof res != 'object') return;
const imageData = result?.data, const imageData = result?.data || result?.path,
imageSeed = result?.seed, imageSeed = req.seed + index,
imageWidth = req.width, imageWidth = req.width,
imageHeight = req.height; imageHeight = req.height,
imageIdentifier = 'IMG_' + (imageSeed + '').replace(/\d/g, c => 'SUOMIPERKL'[c]);
if (!imageData) {
// res contained no data for the image, stop execution
// don't continue if data is incorrect
if (!(imageData && imageSeed))
{
setStatus('request', 'invalid image', 'error'); setStatus('request', 'invalid image', 'error');
console.log(imageData);
return; return;
} }
const imageItemElem = document.createElement('div'); let imageItemElem = document.querySelector('#' + imageIdentifier);
imageItemElem.className = 'imgItem';
imageItemElem.innerHTML = `
<div class="imgContainer">
<img/>
<div class="imgItemInfo">
<span class="imgSeedLabel"></span>
<button class="imgUseBtn">Use as Input</button>
<button class="imgSaveBtn">Download</button>
</div>
</div>
`;
const imageElem = imageItemElem.querySelector('img'),
imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel'),
useAsInputBtn = imageItemElem.querySelector('.imgUseBtn'),
saveImageBtn = imageItemElem.querySelector('.imgSaveBtn');
imageElem.src = imageData; if(!imageItemElem) {
imageItemElem = document.createElement('div');
imageItemElem.className = 'imgItem';
imageItemElem.id = imageIdentifier;
imageItemElem.innerHTML = `
<div class="imgContainer">
<img/>
<div class="imgItemInfo">
<span class="imgSeedLabel"></span>
<button class="imgUseBtn">Use as Input</button>
<button class="imgSaveBtn">Download</button>
</div>
</div>
`;
const useAsInputBtn = imageItemElem.querySelector('.imgUseBtn');
const saveImageBtn = imageItemElem.querySelector('.imgSaveBtn');
useAsInputBtn.addEventListener('click', () => {
initImageSelector.value = null;
initImagePreview.src = imageData;
initImagePreviewContainer.style.display = 'block';
inpaintingEditorContainer.style.display = 'none';
promptStrengthContainer.style.display = 'block';
maskSetting.checked = false;
// maskSetting.style.display = 'block';
randomSeedField.checked = false;
seedField.value = imageSeed;
seedField.disabled = false;
});
saveImageBtn.addEventListener('click', () => {
const imgDownload = document.createElement('a');
imgDownload.download = createFileName(imageSeed);
imgDownload.href = imageData;
imgDownload.click();
});
imagesContainer.appendChild(imageItemElem);
}
const imageElem = imageItemElem.querySelector('img');
const imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel');
imageElem.src = livePreview
? imageData + '?t=' + new Date().getTime()
: imageData;
imageElem.width = parseInt(imageWidth); imageElem.width = parseInt(imageWidth);
imageElem.height = parseInt(imageHeight); imageElem.height = parseInt(imageHeight);
imageSeedLabel.innerText = 'Seed: ' + imageSeed; imageSeedLabel.innerText = livePreview
? '(Live Preview)'
useAsInputBtn.addEventListener('click', () => { : 'Seed: ' + imageSeed;
initImageSelector.value = null;
initImagePreview.src = imageData;
initImagePreviewContainer.style.display = 'block';
inpaintingEditorContainer.style.display = 'none';
promptStrengthContainer.style.display = 'block';
maskSetting.checked = false;
// maskSetting.style.display = 'block';
randomSeedField.checked = false;
seedField.value = imageSeed;
seedField.disabled = false;
});
saveImageBtn.addEventListener('click', () => {
const imgDownload = document.createElement('a');
imgDownload.download = createFileName(imageSeed);
imgDownload.href = imageData;
imgDownload.click();
});
imagesContainer.appendChild(imageItemElem);
}); });
} }
@ -381,14 +391,7 @@ async function doMakeImage(reqBody, batchCount) {
progressBar.style.display = 'block' progressBar.style.display = 'block'
if (stepUpdate.output !== undefined) { if (stepUpdate.output !== undefined) {
makeImageContainers(numOutputs) showImages(reqBody, stepUpdate, true);
for (idx in stepUpdate.output) {
let imgItem = images[idx]
let img = imgItem.firstChild
let tmpImageData = stepUpdate.output[idx]
img.src = tmpImageData['path'] + '?t=' + new Date().getTime()
}
} }
} }
} catch (e) { } catch (e) {
@ -461,7 +464,7 @@ async function doMakeImage(reqBody, batchCount) {
lastPromptUsed = reqBody['prompt']; lastPromptUsed = reqBody['prompt'];
showImages(res, reqBody); showImages(reqBody, res, false);
return true; return true;
} }