extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-02-02 11:40:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Integrate with beta; Use the outputContainer for the task; Don't show the info while a live preview is generating; Use the local task container reference instead of a seed-based identifier (will fail if the seed is same across two tasks)

Browse Source
This commit is contained in:
cmdr2 2022-09-29 13:01:18 +05:30
parent a3b0cde59d
commit a28f1294e2
3 changed files with 55 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/index.html
View File

@ -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=10">
<link rel="stylesheet" href="/media/main.css?v=20">
<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">
@ -213,7 +213,7 @@
</div>
</body>
<script src="media/main.js?v=14"></script>
<script src="media/main.js?v=20"></script>
<script>
async function init() {
await loadModifiers()

6
ui/media/main.css
View File

@ -70,9 +70,9 @@ label {
font-size: 8pt;
}
.imgSeedLabel {
font-size: 1em;
font-size: 0.8em;
background-color: rgb(44, 45, 48);
border-radius: 5px;
border-radius: 3px;
padding: 5px;
}
.imgItem {
@ -91,7 +91,7 @@ label {
flex-direction: column;
position: absolute;
padding: 5px;
opacity: 0.25;
opacity: 0;
transition: 0.1s all;
}
.imgContainer:hover > .imgItemInfo {

87
ui/media/main.js
View File

@ -259,15 +259,16 @@ async function healthCheck() {
}
}
function showImages(req, res, livePreview) {
function showImages(req, res, outputContainer, livePreview) {
let imageItemElements = outputContainer.querySelectorAll('.imgItem');
res.output.forEach((result, index) => {
if(typeof res != 'object') return;
const imageData = result?.data || result?.path + '?t=' + new Date().getTime(),
imageSeed = req.seed,
imageWidth = req.width,
imageHeight = req.height,
imageIdentifier = 'IMG_ID_' + (imageSeed + '').replace(/\d/g, c => 'SUOMIPERKL'[c]) + 'X'.repeat(index);
imageHeight = req.height;
if (!imageData.includes('/')) {
// res contained no data for the image, stop execution
@ -276,12 +277,11 @@ function showImages(req, res, livePreview) {
return;
}
let imageItemElem = document.querySelector('#' + imageIdentifier);
let imageItemElem = (index < imageItemElements.length ? imageItemElements[index] : null)
if(!imageItemElem) {
imageItemElem = document.createElement('div');
imageItemElem.className = 'imgItem';
imageItemElem.id = imageIdentifier;
imageItemElem.innerHTML = `
<div class="imgContainer">
<img/>
@ -296,34 +296,10 @@ function showImages(req, res, livePreview) {
const useAsInputBtn = imageItemElem.querySelector('.imgUseBtn'),
saveImageBtn = imageItemElem.querySelector('.imgSaveBtn');
useAsInputBtn.addEventListener('click', e => {
const imgData = e.path.find(x => x == imageItemElem).querySelector('img').src;
useAsInputBtn.addEventListener('click', getUseAsInputHandler(imageItemElem));
saveImageBtn.addEventListener('click', getSaveImageHandler(imageItemElem));
initImageSelector.value = null;
initImagePreview.src = imgData;
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', e => {
const imgData = e.path.find(x => x == imageItemElem).querySelector('img').src;
const imgDownload = document.createElement('a');
imgDownload.download = createFileName(imageSeed);
imgDownload.href = imgData;
imgDownload.click();
});
imagesContainer.appendChild(imageItemElem);
outputContainer.appendChild(imageItemElem);
}
const imageElem = imageItemElem.querySelector('img'),
@ -332,13 +308,50 @@ function showImages(req, res, livePreview) {
imageElem.src = imageData;
imageElem.width = parseInt(imageWidth);
imageElem.height = parseInt(imageHeight);
imageElem.setAttribute('data-seed', imageSeed)
imageSeedLabel.innerText = livePreview
? '(Live Preview)'
: 'Seed: ' + imageSeed;
const imageInfo = imageItemElem.querySelector('.imgItemInfo')
imageInfo.style.visibility = (livePreview ? 'hidden' : 'visible')
imageSeedLabel.innerText = 'Seed: ' + imageSeed;
});
}
function getUseAsInputHandler(imageItemElem) {
return function() {
const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src;
const imageSeed = imageElem.getAttribute('data-seed')
initImageSelector.value = null;
initImagePreview.src = imgData;
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;
}
}
function getSaveImageHandler(imageItemElem) {
return function() {
const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src;
const imageSeed = imageElem.getAttribute('data-seed')
const imgDownload = document.createElement('a');
imgDownload.download = createFileName(imageSeed);
imgDownload.href = imgData;
imgDownload.click();
}
}
// makes a single image. don't call this directly, use makeImage() instead
async function doMakeImage(task) {
if (task.stopped) {
@ -409,7 +422,7 @@ async function doMakeImage(task) {
outputMsg.style.display = 'block'
if (stepUpdate.output !== undefined) {
showImages(reqBody, stepUpdate, true);
showImages(reqBody, stepUpdate, outputContainer, true);
}
}
} catch (e) {
@ -481,7 +494,7 @@ async function doMakeImage(task) {
lastPromptUsed = reqBody['prompt'];
showImages(reqBody, res, false);
showImages(reqBody, res, outputContainer, false);
return true;
}