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

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

@ -367,13 +367,14 @@ function showImages(reqBody, res, outputContainer, livePreview) {
imageSeedLabel.innerText = 'Seed: ' + req.seed imageSeedLabel.innerText = 'Seed: ' + req.seed
const buttons = { const buttons = {
'imgUseBtn': { html: 'Use as Input', click: getUseAsInputHandler(imageItemElem) }, 'imgUseBtn': { html: 'Use as Input', click: onUseAsInputClick },
'imgSaveBtn': { html: 'Download', click: getSaveImageHandler(imageItemElem, req['output_format']) }, 'imgSaveBtn': { html: 'Download', click: onDownloadImageClick },
'imgX2Btn': { html: 'Double Size', click: getStartNewTaskHandler(req, imageItemElem, 'img2img_X2') }, 'imgX2Btn': { html: 'Double Size', click: getStartNewTaskHandler('img2img_X2') },
'imgRedoBtn': { html: 'Redo', click: getStartNewTaskHandler(req, imageItemElem, 'img2img') }, 'imgRedoBtn': { html: 'Redo', click: getStartNewTaskHandler('img2img') },
'makeSimilarBtn': { html: 'Make Similar Images', click: onMakeSimilarClick },
} }
if (!req.use_upscale) { 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 imgItemInfo = imageItemElem.querySelector('.imgItemInfo')
const createButton = function(name, btnInfo) { const createButton = function(name, btnInfo) {
@ -381,7 +382,9 @@ function showImages(reqBody, res, outputContainer, livePreview) {
newButton.classList.add(name) newButton.classList.add(name)
newButton.classList.add('tasksBtns') newButton.classList.add('tasksBtns')
newButton.innerHTML = btnInfo.html newButton.innerHTML = btnInfo.html
newButton.addEventListener('click', btnInfo.click) newButton.addEventListener('click', function() {
btnInfo.click(req, imageItemElem)
})
imgItemInfo.appendChild(newButton) imgItemInfo.appendChild(newButton)
} }
Object.keys(buttons).forEach((name) => createButton(name, buttons[name])) Object.keys(buttons).forEach((name) => createButton(name, buttons[name]))
@ -389,11 +392,9 @@ function showImages(reqBody, res, outputContainer, livePreview) {
}) })
} }
function getUseAsInputHandler(imageItemElem) { function onUseAsInputClick(req, imageItemElem) {
return function() {
const imageElem = imageItemElem.querySelector('img') const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src const imgData = imageElem.src
const imageSeed = imageElem.getAttribute('data-seed')
initImageSelector.value = null initImageSelector.value = null
initImagePreview.src = imgData initImagePreview.src = imgData
@ -403,17 +404,9 @@ function getUseAsInputHandler(imageItemElem) {
promptStrengthContainer.style.display = 'table-row' promptStrengthContainer.style.display = 'table-row'
maskSetting.checked = false maskSetting.checked = false
samplerSelectionContainer.style.display = 'none' samplerSelectionContainer.style.display = 'none'
// maskSetting.style.display = 'block'
// randomSeedField.checked = false
// seedField.value = imageSeed
// seedField.disabled = false
}
} }
function getSaveImageHandler(imageItemElem, outputFormat) { function onDownloadImageClick(req, imageItemElem) {
return function() {
const imageElem = imageItemElem.querySelector('img') const imageElem = imageItemElem.querySelector('img')
const imgData = imageElem.src const imgData = imageElem.src
const imageSeed = imageElem.getAttribute('data-seed') const imageSeed = imageElem.getAttribute('data-seed')
@ -422,13 +415,13 @@ function getSaveImageHandler(imageItemElem, outputFormat) {
const imageGuidanceScale = imageElem.getAttribute('data-guidance') const imageGuidanceScale = imageElem.getAttribute('data-guidance')
const imgDownload = document.createElement('a') const imgDownload = document.createElement('a')
imgDownload.download = createFileName(imagePrompt, imageSeed, imageInferenceSteps, imageGuidanceScale, outputFormat) imgDownload.download = createFileName(imagePrompt, imageSeed, imageInferenceSteps, imageGuidanceScale, req['output_format'])
imgDownload.href = imgData imgDownload.href = imgData
imgDownload.click() imgDownload.click()
}
} }
function getStartNewTaskHandler(reqBody, imageItemElem, mode) {
return function() { function getStartNewTaskHandler(mode) {
return function(reqBody, imageItemElem) {
if (!isServerAvailable()) { if (!isServerAvailable()) {
alert('The server is not available.') alert('The server is not available.')
return 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 // makes a single image. don't call this directly, use makeImage() instead
async function doMakeImage(task) { async function doMakeImage(task) {
if (task.stopped) { if (task.stopped) {