From 62048c68f0ce27a0e63429efe8687d5b42b7a44d Mon Sep 17 00:00:00 2001 From: Haka <76921756+Hakorr@users.noreply.github.com> Date: Sun, 25 Sep 2022 02:55:11 +0300 Subject: [PATCH] Image item refactor and redesign --- ui/media/main.css | 44 +++++------- ui/media/main.js | 168 ++++++++++++++++++++-------------------------- 2 files changed, 88 insertions(+), 124 deletions(-) diff --git a/ui/media/main.css b/ui/media/main.css index 388c8ccd..7b01e14b 100644 --- a/ui/media/main.css +++ b/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; diff --git a/ui/media/main.js b/ui/media/main.js index 7633b7ee..fb394981 100644 --- a/ui/media/main.js +++ b/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 = ` +
+
+ +
+
+ + +
+
+ + `; + + 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) } -} +} \ No newline at end of file