Image item refactor and redesign

ui/media/main.css

@@ -69,38 +69,28 @@ label {
     font-size: 8pt;
 }
 .imgSeedLabel {
-    position: absolute;
-    transform: translateX(-100%);
-    margin-top: 5pt;
-    margin-left: -5pt;
-    font-size: 10pt;
-
-    background-color: #333;
-    opacity: 0.8;
-    color: #ddd;
-    border-radius: 3pt;
-    padding: 1pt 3pt;
-}
-.imgUseBtn {
-    position: absolute;
-    transform: translateX(-100%);
-    margin-top: 30pt;
-    margin-left: -5pt;
-}
-.imgSaveBtn {
-    position: absolute;
-    transform: translateX(-100%);
-    margin-top: 55pt;
-    margin-left: -5pt;
+    font-size: 1.3em;
 }
 .imgItem {
-    display: inline;
-    padding-right: 10px;
+    display: inline-block;
+    width: fit-content;
+    height: fit-content;
+    padding: 0.5em;
+    border: 1px solid rgb(255 255 255 / 25%);
+    margin-top: 1em;
+    margin-right: 1em;
 }
 .imgItemInfo {
-    opacity: 0.5;
+    width: 100%;
+    height: 2em;
+    padding-bottom: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.imgInfoLeft {
+    margin-right: 1em;
 }
-
 #container {
     width: 90%;
     margin-left: auto;

ui/media/main.js

@@ -251,18 +251,74 @@ async function healthCheck() {
     }
 }
 
-function makeImageElement(width, height) {
-    let imgItem = document.createElement('div')
-    imgItem.className = 'imgItem'
+function showImages(res, req) {
+    res.output.forEach(result => {
+        if(typeof res != 'object') return;
 
-    let img = document.createElement('img')
-    img.width = parseInt(width)
-    img.height = parseInt(height)
+        const imageData = result?.data,
+            imageSeed = result?.seed,
+            imageWidth = req.width,
+            imageHeight = req.height;
 
-    imgItem.appendChild(img)
-    imagesContainer.appendChild(imgItem)
+        // don't continue if data is incorrect
+        if (!(imageData && imageSeed))
+        {
+            setStatus('request', 'invalid image', 'error');
+            console.log(imageData);
+            return;
+        }
 
-    return imgItem
+        const imageItemElem = document.createElement('div');
+        imageItemElem.className = 'imgItem';
+        imageItemElem.innerHTML = `
+            <div class="imgItemInfo">
+                <div class="imgInfoLeft">
+                    <span class="imgSeedLabel"></span>
+                </div>
+                <div>
+                    <button class="imgUseBtn">Use as Input</button>
+                    <button class="imgSaveBtn">Download</button>
+                </div>
+            </div>
+            <img/>
+        `;
+    
+        const imageElem = imageItemElem.querySelector('img'),
+            imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel'),
+            useAsInputBtn = imageItemElem.querySelector('.imgUseBtn'),
+            saveImageBtn = imageItemElem.querySelector('.imgSaveBtn');
+
+        imageElem.src = imageData;
+        imageElem.width = parseInt(imageWidth);
+        imageElem.height = parseInt(imageHeight);
+
+        imageSeedLabel.innerText = 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);
+    });
 }
 
 // makes a single image. don't call this directly, use makeImage() instead
@@ -275,14 +331,6 @@ async function doMakeImage(reqBody, batchCount) {
     let seed = reqBody['seed']
     let numOutputs = parseInt(reqBody['num_outputs'])
 
-    let images = []
-
-    function makeImageContainers(numImages) {
-        for (let i = images.length; i < numImages; i++) {
-            images.push(makeImageElement(reqBody.width, reqBody.height))
-        }
-    }
-
     try {
         res = await fetch('/image', {
             method: 'POST',
@@ -411,86 +459,13 @@ async function doMakeImage(reqBody, batchCount) {
         res = undefined
     }
 
-    if (!res) {
-        return false
-    }
+    if (!res) return false;
 
-    lastPromptUsed = reqBody['prompt']
+    lastPromptUsed = reqBody['prompt'];
 
-    makeImageContainers(res.output.length)
+    showImages(res, reqBody);
 
-    for (let idx in res.output) {
-        let imgBody = ''
-        let seed = 0
-
-        try {
-            let imgData = res.output[idx]
-            imgBody = imgData.data
-            seed = imgData.seed
-        } catch (e) {
-            console.log(imgBody)
-            setStatus('request', 'invalid image', 'error')
-            continue
-        }
-
-        let imgItem = images[idx]
-        let img = imgItem.firstChild
-
-        img.src = imgBody
-
-        let imgItemInfo = document.createElement('span')
-        imgItemInfo.className = 'imgItemInfo'
-
-        let imgSeedLabel = document.createElement('span')
-        imgSeedLabel.className = 'imgSeedLabel'
-        imgSeedLabel.innerText = 'Seed: ' + seed
-
-        let imgUseBtn = document.createElement('button')
-        imgUseBtn.className = 'imgUseBtn'
-        imgUseBtn.innerText = 'Use as Input'
-
-        let imgSaveBtn = document.createElement('button')
-        imgSaveBtn.className = 'imgSaveBtn'
-        imgSaveBtn.innerText = 'Download'
-
-        imgItem.appendChild(imgItemInfo)
-        imgItemInfo.appendChild(imgSeedLabel)
-        imgItemInfo.appendChild(imgUseBtn)
-        imgItemInfo.appendChild(imgSaveBtn)
-
-        imgUseBtn.addEventListener('click', function() {
-            initImageSelector.value = null
-            initImagePreview.src = imgBody
-
-            initImagePreviewContainer.style.display = 'block'
-            inpaintingEditorContainer.style.display = 'none'
-            promptStrengthContainer.style.display = 'block'
-            maskSetting.checked = false
-
-            // maskSetting.style.display = 'block'
-
-            randomSeedField.checked = false
-            seedField.value = seed
-            seedField.disabled = false
-        })
-
-        imgSaveBtn.addEventListener('click', function() {
-            let imgDownload = document.createElement('a')
-            imgDownload.download = createFileName();
-            imgDownload.href = imgBody
-            imgDownload.click()
-        })
-
-        imgItem.addEventListener('mouseenter', function() {
-            imgItemInfo.style.opacity = 1
-        })
-
-        imgItem.addEventListener('mouseleave', function() {
-            imgItemInfo.style.opacity = 0.5
-        })
-    }
-
-    return true
+    return true;
 }
 
 function validateInput() {
@@ -639,12 +614,11 @@ async function makeImage() {
 
 // create a file name with embedded prompt and metadata
 // for easier cateloging and comparison
-function createFileName() {
+function createFileName(seed) {
 
     // Most important information is the prompt
     let underscoreName = lastPromptUsed.replace(/[^a-zA-Z0-9]/g, '_')
     underscoreName = underscoreName.substring(0, 100)
-    const seed = seedField.value
     const steps = numInferenceStepsField.value
     const guidance =  guidanceScaleField.value
 
@@ -1215,4 +1189,4 @@ async function loadModifiers() {
     } catch (e) {
         console.log('error fetching modifiers', e)
     }
-}
+}