+ ![]()
`;
const imageElem = imageItemElem.querySelector('img'),
@@ -292,7 +290,7 @@ function showImages(res, req) {
imageElem.width = parseInt(imageWidth);
imageElem.height = parseInt(imageHeight);
- imageSeedLabel.innerText = imageSeed;
+ imageSeedLabel.innerText = 'Seed: ' + imageSeed;
useAsInputBtn.addEventListener('click', () => {
initImageSelector.value = null;
From c1dea44fa6581a48a0f3123b5a27ac3a87b5ee1c Mon Sep 17 00:00:00 2001
From: Haka <76921756+Hakorr@users.noreply.github.com>
Date: Tue, 27 Sep 2022 17:23:19 +0300
Subject: [PATCH 03/20] Fix for live preview
---
ui/media/main.js | 127 ++++++++++++++++++++++++-----------------------
1 file changed, 65 insertions(+), 62 deletions(-)
diff --git a/ui/media/main.js b/ui/media/main.js
index 171545a1..334947c0 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -251,71 +251,81 @@ async function healthCheck() {
}
}
-function showImages(res, req) {
- res.output.forEach(result => {
+function showImages(req, res, livePreview) {
+ res.output.forEach((result, index) => {
if(typeof res != 'object') return;
- const imageData = result?.data,
- imageSeed = result?.seed,
+ const imageData = result?.data || result?.path,
+ imageSeed = req.seed + index,
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');
- console.log(imageData);
return;
}
- const imageItemElem = document.createElement('div');
- imageItemElem.className = 'imgItem';
- imageItemElem.innerHTML = `
-
`;
- const useAsInputBtn = imageItemElem.querySelector('.imgUseBtn');
- const saveImageBtn = imageItemElem.querySelector('.imgSaveBtn');
+ 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', () => {
initImageSelector.value = null;
- initImagePreview.src = imageData;
+ initImagePreview.src = imgData;
initImagePreviewContainer.style.display = 'block';
inpaintingEditorContainer.style.display = 'none';
@@ -303,23 +305,23 @@ function showImages(req, res, livePreview) {
seedField.value = imageSeed;
seedField.disabled = false;
});
-
- saveImageBtn.addEventListener('click', () => {
+
+ 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 = imageData;
+ imgDownload.href = imgData;
imgDownload.click();
});
imagesContainer.appendChild(imageItemElem);
}
- const imageElem = imageItemElem.querySelector('img');
- const imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel');
+ const imageElem = imageItemElem.querySelector('img'),
+ imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel');
- imageElem.src = livePreview
- ? imageData + '?t=' + new Date().getTime()
- : imageData;
+ imageElem.src = imageData;
imageElem.width = parseInt(imageWidth);
imageElem.height = parseInt(imageHeight);
From a28f1294e28faef98f54bfdff9f16339a9f6433c Mon Sep 17 00:00:00 2001
From: cmdr2
+ ![]()
+
-
-
-
- ![]()
-
- `;
-
- const imageElem = imageItemElem.querySelector('img'),
- imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel'),
- useAsInputBtn = imageItemElem.querySelector('.imgUseBtn'),
- saveImageBtn = imageItemElem.querySelector('.imgSaveBtn');
+ let imageItemElem = document.querySelector('#' + imageIdentifier);
- imageElem.src = imageData;
+ if(!imageItemElem) {
+ imageItemElem = document.createElement('div');
+ imageItemElem.className = 'imgItem';
+ imageItemElem.id = imageIdentifier;
+ imageItemElem.innerHTML = `
+
-
-
-
-
-
+ ![]()
+
+ `;
+
+ 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.height = parseInt(imageHeight);
- imageSeedLabel.innerText = 'Seed: ' + imageSeed;
-
- 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);
+ imageSeedLabel.innerText = livePreview
+ ? '(Live Preview)'
+ : 'Seed: ' + imageSeed;
});
}
@@ -381,14 +391,7 @@ async function doMakeImage(reqBody, batchCount) {
progressBar.style.display = 'block'
if (stepUpdate.output !== undefined) {
- makeImageContainers(numOutputs)
-
- 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()
- }
+ showImages(reqBody, stepUpdate, true);
}
}
} catch (e) {
@@ -461,7 +464,7 @@ async function doMakeImage(reqBody, batchCount) {
lastPromptUsed = reqBody['prompt'];
- showImages(res, reqBody);
+ showImages(reqBody, res, false);
return true;
}
From 10c4bee1e501322b679c8db5251d7c8b6bcffc2e Mon Sep 17 00:00:00 2001
From: Haka <76921756+Hakorr@users.noreply.github.com>
Date: Wed, 28 Sep 2022 00:05:34 +0300
Subject: [PATCH 04/20] Fix for show all images
---
ui/media/main.js | 34 ++++++++++++++++++----------------
1 file changed, 18 insertions(+), 16 deletions(-)
diff --git a/ui/media/main.js b/ui/media/main.js
index 334947c0..fe5652f1 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -255,13 +255,13 @@ function showImages(req, res, livePreview) {
res.output.forEach((result, index) => {
if(typeof res != 'object') return;
- const imageData = result?.data || result?.path,
- imageSeed = req.seed + index,
+ const imageData = result?.data || result?.path + '?t=' + new Date().getTime(),
+ imageSeed = req.seed,
imageWidth = req.width,
imageHeight = req.height,
- imageIdentifier = 'IMG_' + (imageSeed + '').replace(/\d/g, c => 'SUOMIPERKL'[c]);
+ imageIdentifier = 'IMG_ID_' + (imageSeed + '').replace(/\d/g, c => 'SUOMIPERKL'[c]) + 'X'.repeat(index);
- if (!imageData) {
+ if (!imageData.includes('/')) {
// res contained no data for the image, stop execution
setStatus('request', 'invalid image', 'error');
@@ -285,12 +285,14 @@ function showImages(req, res, livePreview) {
+
+
+
+
+