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

Merge pull request #1041 from JeLuF/undo

Browse Source 
Add undo support
This commit is contained in:
cmdr2 2023-03-28 15:52:20 +05:30 committed by GitHub
commit 72d991afaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 86 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/index.html
View File

@ -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>

1
ui/media/css/main.css
View File

@ -558,7 +558,6 @@ div.img-preview img {
float: right;
}
#preview-tools {
display: none;
padding: 4pt;
}
#preview-tools .display-settings .dropdown-content {

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

@ -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,21 +333,19 @@ 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'
let allHidden = true;
let children = parentTaskContainer.querySelectorAll('.imgItem');
for(let x = 0; x < children.length; x++) {
let child = children[x];
if(child.style.display != "none") {
allHidden = false;
}
undoableRemove(imageItemElem)
let allHidden = true;
let children = parentTaskContainer.querySelectorAll('.imgItem');
for(let x = 0; x < children.length; x++) {
let child = children[x];
if(child.style.display != "none") {
allHidden = false;
}
if(allHidden === true) {
const req = htmlTaskMap.get(parentTaskContainer)
if(!req.isProcessing || req.batchesDone == req.batchCount) {parentTaskContainer.parentNode.removeChild(parentTaskContainer)}
}
})
}
if(allHidden === true) {
const req = htmlTaskMap.get(parentTaskContainer)
if(!req.isProcessing || req.batchesDone == req.batchCount) { undoableRemove(parentTaskContainer, true) }
}
})
}
const imageElem = imageItemElem.querySelector('img')
@ -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.batchesDone <= 0 || !task.isProcessing) {
removeTask(taskEntry)
}
abortTask(task)
})
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,15 +1256,23 @@ 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() {
await stopAllTasks()