holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a 'Make Similar Images' button

Browse Source
This commit is contained in:
cmdr2 2022-10-19 17:26:35 +05:30
parent 083f9dd29b
commit 50741c70c0
1 changed files with 58 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
ui/media/js/main.js
View File

@ -367,13 +367,14 @@ function showImages(reqBody, res, outputContainer, livePreview) {
imageSeedLabel.innerText = 'Seed: ' + req.seed
const buttons = {
'imgUseBtn': { html: 'Use as Input', click: getUseAsInputHandler(imageItemElem) },
'imgSaveBtn': { html: 'Download', click: getSaveImageHandler(imageItemElem, req['output_format']) },
'imgX2Btn': { html: 'Double Size', click: getStartNewTaskHandler(req, imageItemElem, 'img2img_X2') },
'imgRedoBtn': { html: 'Redo', click: getStartNewTaskHandler(req, imageItemElem, 'img2img') },
'imgUseBtn': { html: 'Use as Input', click: onUseAsInputClick },
'imgSaveBtn': { html: 'Download', click: onDownloadImageClick },
'imgX2Btn': { html: 'Double Size', click: getStartNewTaskHandler('img2img_X2') },
'imgRedoBtn': { html: 'Redo', click: getStartNewTaskHandler('img2img') },
'makeSimilarBtn': { html: 'Make Similar Images', click: onMakeSimilarClick },
}
if (!req.use_upscale) {
buttons.upscaleBtn = { html: 'Upscale', click: getStartNewTaskHandler(req, imageItemElem, 'upscale') }
buttons.upscaleBtn = { html: 'Upscale', click: getStartNewTaskHandler('upscale') }
}
const imgItemInfo = imageItemElem.querySelector('.imgItemInfo')
const createButton = function(name, btnInfo) {
@ -381,7 +382,9 @@ function showImages(reqBody, res, outputContainer, livePreview) {
newButton.classList.add(name)
newButton.classList.add('tasksBtns')
newButton.innerHTML = btnInfo.html
newButton.addEventListener('click', btnInfo.click)
newButton.addEventListener('click', function() {
btnInfo.click(req, imageItemElem)
})
imgItemInfo.appendChild(newButton)
}
Object.keys(buttons).forEach((name) => createButton(name, buttons[name]))
@ -389,46 +392,36 @@ function showImages(reqBody, res, outputContainer, livePreview) {
})
}
function getUseAsInputHandler(imageItemElem) {
return function() {
const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src
const imageSeed = imageElem.getAttribute('data-seed')
function onUseAsInputClick(req, imageItemElem) {
const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src
initImageSelector.value = null
initImagePreview.src = imgData
initImageSelector.value = null
initImagePreview.src = imgData
initImagePreviewContainer.style.display = 'block'
inpaintingEditorContainer.style.display = 'none'
promptStrengthContainer.style.display = 'table-row'
maskSetting.checked = false
samplerSelectionContainer.style.display = 'none'
// maskSetting.style.display = 'block'
// randomSeedField.checked = false
// seedField.value = imageSeed
// seedField.disabled = false
}
initImagePreviewContainer.style.display = 'block'
inpaintingEditorContainer.style.display = 'none'
promptStrengthContainer.style.display = 'table-row'
maskSetting.checked = false
samplerSelectionContainer.style.display = 'none'
}
function getSaveImageHandler(imageItemElem, outputFormat) {
return function() {
const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src
const imageSeed = imageElem.getAttribute('data-seed')
const imagePrompt = imageElem.getAttribute('data-prompt')
const imageInferenceSteps = imageElem.getAttribute('data-steps')
const imageGuidanceScale = imageElem.getAttribute('data-guidance')
function onDownloadImageClick(req, imageItemElem) {
const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src
const imageSeed = imageElem.getAttribute('data-seed')
const imagePrompt = imageElem.getAttribute('data-prompt')
const imageInferenceSteps = imageElem.getAttribute('data-steps')
const imageGuidanceScale = imageElem.getAttribute('data-guidance')
const imgDownload = document.createElement('a')
imgDownload.download = createFileName(imagePrompt, imageSeed, imageInferenceSteps, imageGuidanceScale, outputFormat)
imgDownload.href = imgData
imgDownload.click()
}
const imgDownload = document.createElement('a')
imgDownload.download = createFileName(imagePrompt, imageSeed, imageInferenceSteps, imageGuidanceScale, req['output_format'])
imgDownload.href = imgData
imgDownload.click()
}
function getStartNewTaskHandler(reqBody, imageItemElem, mode) {
return function() {
function getStartNewTaskHandler(mode) {
return function(reqBody, imageItemElem) {
if (!isServerAvailable()) {
alert('The server is not available.')
return
@ -478,6 +471,31 @@ function getStartNewTaskHandler(reqBody, imageItemElem, mode) {
}
}
function onMakeSimilarClick(req, imageItemElem) {
const similarImagesCount = 5
const imageElem = imageItemElem.querySelector('img')
let newTaskRequest = getCurrentUserRequest()
newTaskRequest.reqBody = Object.assign({}, req, {
num_outputs: 1,
use_cpu: useCPUField.checked,
num_inference_steps: 50,
guidance_scale: 7.5,
prompt_strength: 0.7,
init_image: imageElem.src,
seed: Math.floor(Math.random() * 10000000)
})
newTaskRequest.numOutputsTotal = 5
newTaskRequest.batchCount = 5
newTaskRequest.seed = newTaskRequest.reqBody.seed
delete newTaskRequest.reqBody.mask
createTask(newTaskRequest)
}
// makes a single image. don't call this directly, use makeImage() instead
async function doMakeImage(task) {
if (task.stopped) {