forked from extern/easydiffusion
commit
72d991afaa
@ -292,18 +292,16 @@
|
||||
</div>
|
||||
|
||||
<div id="preview" class="col-free">
|
||||
<div id="initial-text">
|
||||
Type a prompt and press the "Make Image" button.<br/><br/>You can set an "Initial Image" if you want to guide the AI.<br/><br/>
|
||||
You can also add modifiers like "Realistic", "Pencil Sketch", "ArtStation" etc by browsing through the "Image Modifiers" section
|
||||
and selecting the desired modifiers.<br/><br/>
|
||||
Click "Image Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)
|
||||
</div>
|
||||
|
||||
<div id="preview-content">
|
||||
<div id="preview-tools">
|
||||
<div id="preview-tools" class="displayNone">
|
||||
<button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can icon"></i> Clear All</button>
|
||||
<button class="tertiaryButton" id="show-download-popup"><i class="fa-solid fa-download"></i> Download images</button>
|
||||
<div class="display-settings">
|
||||
<button id="undo" class="displayNone tertiaryButton">
|
||||
Undo <i class="fa-solid fa-rotate-left icon"></i>
|
||||
<span class="simple-tooltip left">Undo last remove</span>
|
||||
</button>
|
||||
<span class="auto-scroll"></span> <!-- hack for Rabbit Hole update -->
|
||||
<button id="auto_scroll_btn" class="tertiaryButton">
|
||||
<i class="fa-solid fa-arrows-up-to-line icon"></i>
|
||||
@ -328,6 +326,12 @@
|
||||
<div class="clearfix" style="clear: both;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="initial-text">
|
||||
Type a prompt and press the "Make Image" button.<br/><br/>You can set an "Initial Image" if you want to guide the AI.<br/><br/>
|
||||
You can also add modifiers like "Realistic", "Pencil Sketch", "ArtStation" etc by browsing through the "Image Modifiers" section
|
||||
and selecting the desired modifiers.<br/><br/>
|
||||
Click "Image Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -558,7 +558,6 @@ div.img-preview img {
|
||||
float: right;
|
||||
}
|
||||
#preview-tools {
|
||||
display: none;
|
||||
padding: 4pt;
|
||||
}
|
||||
#preview-tools .display-settings .dropdown-content {
|
||||
|
@ -88,6 +88,11 @@ const processOrder = document.querySelector('#process_order_toggle')
|
||||
|
||||
let imagePreview = document.querySelector("#preview")
|
||||
let imagePreviewContent = document.querySelector("#preview-content")
|
||||
|
||||
let undoButton = document.querySelector("#undo")
|
||||
let undoBuffer = []
|
||||
const UNDO_LIMIT = 20
|
||||
|
||||
imagePreview.addEventListener('drop', function(ev) {
|
||||
const data = ev.dataTransfer?.getData("text/plain");
|
||||
if (!data) {
|
||||
@ -256,6 +261,39 @@ function playSound() {
|
||||
}
|
||||
}
|
||||
|
||||
function undoableRemove(element, doubleUndo=false) {
|
||||
let data = { 'element': element, 'parent': element.parentNode, 'prev': element.previousSibling, 'next': element.nextSibling, 'doubleUndo': doubleUndo }
|
||||
undoBuffer.push(data)
|
||||
if (undoBuffer.length > UNDO_LIMIT) {
|
||||
// Remove item from memory and also remove it from the data structures
|
||||
let item = undoBuffer.shift()
|
||||
htmlTaskMap.delete(item.element)
|
||||
item.element.querySelectorAll('[data-imagecounter]').forEach( (img) => { delete imageRequest[img.dataset['imagecounter']] })
|
||||
}
|
||||
element.remove()
|
||||
if (undoBuffer.length != 0) {
|
||||
undoButton.classList.remove('displayNone')
|
||||
}
|
||||
}
|
||||
|
||||
function undoRemove() {
|
||||
let data = undoBuffer.pop()
|
||||
if (data.next == null) {
|
||||
data.parent.appendChild(data.element)
|
||||
} else {
|
||||
data.parent.insertBefore(data.element, data.next)
|
||||
}
|
||||
if (data.doubleUndo) {
|
||||
undoRemove()
|
||||
}
|
||||
if (undoBuffer.length == 0) {
|
||||
undoButton.classList.add('displayNone')
|
||||
}
|
||||
updateInitialText()
|
||||
}
|
||||
|
||||
undoButton.addEventListener('click', () => { undoRemove() })
|
||||
|
||||
function showImages(reqBody, res, outputContainer, livePreview) {
|
||||
let imageItemElements = outputContainer.querySelectorAll('.imgItem')
|
||||
if(typeof res != 'object') return
|
||||
@ -295,8 +333,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
|
||||
const imageRemoveBtn = imageItemElem.querySelector('.imgPreviewItemClearBtn')
|
||||
let parentTaskContainer = imageRemoveBtn.closest('.imageTaskContainer')
|
||||
imageRemoveBtn.addEventListener('click', (e) => {
|
||||
shiftOrConfirm(e, "Remove the image from the results?", () => {
|
||||
imageItemElem.style.display = 'none'
|
||||
undoableRemove(imageItemElem)
|
||||
let allHidden = true;
|
||||
let children = parentTaskContainer.querySelectorAll('.imgItem');
|
||||
for(let x = 0; x < children.length; x++) {
|
||||
@ -307,10 +344,9 @@ function showImages(reqBody, res, outputContainer, livePreview) {
|
||||
}
|
||||
if(allHidden === true) {
|
||||
const req = htmlTaskMap.get(parentTaskContainer)
|
||||
if(!req.isProcessing || req.batchesDone == req.batchCount) {parentTaskContainer.parentNode.removeChild(parentTaskContainer)}
|
||||
if(!req.isProcessing || req.batchesDone == req.batchCount) { undoableRemove(parentTaskContainer, true) }
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const imageElem = imageItemElem.querySelector('img')
|
||||
imageElem.src = imageData
|
||||
@ -571,7 +607,7 @@ function makeImage() {
|
||||
}))
|
||||
newTaskRequests.forEach(createTask)
|
||||
|
||||
initialText.style.display = 'none'
|
||||
updateInitialText()
|
||||
}
|
||||
|
||||
async function onIdle() {
|
||||
@ -869,7 +905,7 @@ async function onTaskStart(task) {
|
||||
setStatus('request', 'fetching..')
|
||||
renderButtons.style.display = 'flex'
|
||||
renameMakeImageButton()
|
||||
previewTools.style.display = 'block'
|
||||
updateInitialText()
|
||||
}
|
||||
|
||||
/* Hover effect for the init image in the task list */
|
||||
@ -1001,13 +1037,16 @@ function createTask(task) {
|
||||
task['stopTask'].addEventListener('click', (e) => {
|
||||
e.stopPropagation()
|
||||
|
||||
let question = (task['isProcessing'] ? "Stop this task?" : "Remove this task?")
|
||||
shiftOrConfirm(e, question, async function(e) {
|
||||
if (task['isProcessing']) {
|
||||
shiftOrConfirm(e, "Stop this task?", async function(e) {
|
||||
if (task.batchesDone <= 0 || !task.isProcessing) {
|
||||
removeTask(taskEntry)
|
||||
}
|
||||
abortTask(task)
|
||||
})
|
||||
} else {
|
||||
removeTask(taskEntry)
|
||||
}
|
||||
})
|
||||
|
||||
task['useSettings'] = taskEntry.querySelector('.useSettings')
|
||||
@ -1217,13 +1256,21 @@ async function stopAllTasks() {
|
||||
})
|
||||
}
|
||||
|
||||
function removeTask(taskToRemove) {
|
||||
taskToRemove.remove()
|
||||
|
||||
function updateInitialText() {
|
||||
if (document.querySelector('.imageTaskContainer') === null) {
|
||||
previewTools.style.display = 'none'
|
||||
initialText.style.display = 'block'
|
||||
if (undoBuffer.length == 0) {
|
||||
previewTools.classList.add('displayNone')
|
||||
}
|
||||
initialText.classList.remove('displayNone')
|
||||
} else {
|
||||
initialText.classList.add('displayNone')
|
||||
previewTools.classList.remove('displayNone')
|
||||
}
|
||||
}
|
||||
|
||||
function removeTask(taskToRemove) {
|
||||
undoableRemove(taskToRemove)
|
||||
updateInitialText()
|
||||
}
|
||||
|
||||
clearAllPreviewsBtn.addEventListener('click', (e) => { shiftOrConfirm(e, "Clear all the results and tasks in this window?", async function() {
|
||||
|
Loading…
Reference in New Issue
Block a user