mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-11-25 17:55:09 +01:00
Image item refactor and redesign
This commit is contained in:
Haka
parent
489aae7a46
commit
62048c68f0
@ -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;
|
||||
|
||||
166
ui/media/main.js
166
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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user