From a28f1294e28faef98f54bfdff9f16339a9f6433c Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Thu, 29 Sep 2022 13:01:18 +0530
Subject: [PATCH] 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)

---
 ui/index.html     |  4 +--
 ui/media/main.css |  6 ++--
 ui/media/main.js  | 87 +++++++++++++++++++++++++++--------------------
 3 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index ed35db3c..5e2d94dc 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -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()
diff --git a/ui/media/main.css b/ui/media/main.css
index c3d2e254..d92776b2 100644
--- a/ui/media/main.css
+++ b/ui/media/main.css
@@ -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 {
diff --git a/ui/media/main.js b/ui/media/main.js
index 46862f96..9a92b774 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -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;
 }