Fix for live preview

ui/media/main.js

@@ -251,25 +251,29 @@ 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;
 
-        const imageData = result?.data,
+        const imageData = result?.data || result?.path,
-            imageSeed = result?.seed,
+            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');
+        let imageItemElem = document.querySelector('#' + imageIdentifier);
+
+        if(!imageItemElem) {
+            imageItemElem = document.createElement('div');
             imageItemElem.className = 'imgItem';
+            imageItemElem.id = imageIdentifier;
             imageItemElem.innerHTML = `
                 <div class="imgContainer">
                     <img/>
@@ -281,16 +285,8 @@ function showImages(res, req) {
                 </div>
             `;
 
-        const imageElem = imageItemElem.querySelector('img'),
+            const useAsInputBtn = imageItemElem.querySelector('.imgUseBtn');
-            imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel'),
+            const saveImageBtn = imageItemElem.querySelector('.imgSaveBtn');
-            useAsInputBtn = imageItemElem.querySelector('.imgUseBtn'),
-            saveImageBtn = imageItemElem.querySelector('.imgSaveBtn');
-
-        imageElem.src = imageData;
-        imageElem.width = parseInt(imageWidth);
-        imageElem.height = parseInt(imageHeight);
-
-        imageSeedLabel.innerText = 'Seed: ' + imageSeed;
 
             useAsInputBtn.addEventListener('click', () => {
                 initImageSelector.value = null;
@@ -316,6 +312,20 @@ function showImages(res, req) {
             });
 
             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 = livePreview
+            ? '(Live Preview)'
+            : 'Seed: ' + imageSeed;
     });
 }
 
@@ -381,14 +391,7 @@ async function doMakeImage(reqBody, batchCount) {
                         progressBar.style.display = 'block'
 
                         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) {
@@ -461,7 +464,7 @@ async function doMakeImage(reqBody, batchCount) {
 
     lastPromptUsed = reqBody['prompt'];
 
-    showImages(res, reqBody);
+    showImages(reqBody, res, false);
 
     return true;
 }