From 903acff924af4531bff907710c69a91265a0347d Mon Sep 17 00:00:00 2001 From: patriceac <48073125+patriceac@users.noreply.github.com> Date: Thu, 10 Nov 2022 18:36:39 -0800 Subject: [PATCH] Adding Use Settings --- ui/media/css/main.css | 10 ++++++ ui/media/js/image-modifiers.js | 54 +++++++++++++++++++++++++++++++- ui/media/js/main.js | 57 +++++++++++++++++++++++++++++----- 3 files changed, 113 insertions(+), 8 deletions(-) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index da87216d..33d18177 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -428,6 +428,16 @@ img { .secondaryButton:hover { background: rgb(177, 27, 0); } +.useSettings { + background: var(--accent-color); + border: var(--make-image-border); + color: rgb(255, 221, 255); + margin-right: 6pt; + float: right; +} +.useSettings:hover { + background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%)); +} .stopTask { float: right; } diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js index 12bdd65f..8cf26a49 100644 --- a/ui/media/js/image-modifiers.js +++ b/ui/media/js/image-modifiers.js @@ -148,6 +148,58 @@ async function loadModifiers() { loadCustomModifiers() } +function refreshModifiersState(newTags) { + // clear existing modifiers + document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(modifierCard => { + const modifierName = modifierCard.querySelector('.modifier-card-label').innerText + if (activeTags.map(x => x.name).includes(modifierName)) { + modifierCard.classList.remove(activeCardClass) + modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+' + } + }) + activeTags = [] + + // set new modifiers + newTags.forEach(tag => { + let found = false + document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(modifierCard => { + const modifierName = modifierCard.querySelector('.modifier-card-label').innerText + if (tag == modifierName) { + // add modifier to active array + activeTags.push({ + 'name': modifierName, + 'element': modifierCard.cloneNode(true), + 'originElement': modifierCard + }) + modifierCard.classList.add(activeCardClass) + modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-' + found = true + } + }) + if (found == false) { // custom tag went missing, create one here + let modifierCard = createModifierCard(tag, undefined) // create a modifier card for the missing tag, no image + + modifierCard.addEventListener('click', () => { + if (activeTags.map(x => x.name).includes(tag)) { + // remove modifier from active array + activeTags = activeTags.filter(x => x.name != tag) + modifierCard.classList.remove(activeCardClass) + + modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+' + } + refreshTagsList() + }) + + activeTags.push({ + 'name': tag, + 'element': modifierCard, + 'originElement': undefined // no origin element for missing tags + }) + } + }) + refreshTagsList() +} + function refreshTagsList() { editorModifierTagsList.innerHTML = '' @@ -167,7 +219,7 @@ function refreshTagsList() { tag.element.addEventListener('click', () => { let idx = activeTags.indexOf(tag) - if (idx !== -1) { + if (idx !== -1 && activeTags[idx].originElement !== undefined) { activeTags[idx].originElement.classList.remove(activeCardClass) activeTags[idx].originElement.querySelector('.modifier-card-image-overlay').innerText = '+' diff --git a/ui/media/js/main.js b/ui/media/js/main.js index b326dee3..f6103eba 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -780,7 +780,9 @@ function getCurrentUserRequest() { stream_progress_updates: true, stream_image_progress: (numOutputsTotal > 50 ? false : streamImageProgressField.checked), show_only_filtered_image: showOnlyFilteredImageField.checked, - output_format: outputFormatField.value + output_format: outputFormatField.value, + original_prompt: promptField.value, + active_tags: (activeTags.map(x => x.name)) } } if (IMAGE_REGEX.test(initImagePreview.src)) { @@ -855,6 +857,7 @@ function createTask(task) { taskEntry.innerHTML = `
Enqueued
+
${taskConfig}
@@ -893,6 +896,47 @@ function createTask(task) { } }) + task['useSettings'] = taskEntry.querySelector('.useSettings') + task['useSettings'].addEventListener('click', async function(e) { + TASK_REQ_NO_EXPORT.forEach((key) => delete task.reqBody[key]) // don't restore system settings when restoring tasks + restoreTaskToUI(task) + e.stopPropagation(); + + // restore the original tag + promptField.value = task.reqBody.original_prompt + + // Restore modifiers + refreshModifiersState(task.reqBody.active_tags) + + // properly reset checkboxes + if (!('use_face_correction' in task.reqBody)) { + useFaceCorrectionField.checked = false + } + if (!('use_upscale' in task.reqBody)) { + useUpscalingField.checked = false + } + if (!('mask' in task.reqBody)) { + maskSetting.checked = false + } + + // Show the source picture if present + initImagePreview.src = (task.reqBody.init_image == undefined ? '' : task.reqBody.init_image) + if (IMAGE_REGEX.test(initImagePreview.src)) { + Boolean(task.reqBody.mask) ? inpaintingEditor.setImg(task.reqBody.mask) : inpaintingEditor.resetBackground() + initImagePreviewContainer.style.display = 'block' + inpaintingEditorContainer.style.display = 'none' + promptStrengthContainer.style.display = 'table-row' + //samplerSelectionContainer.style.display = 'none' + // maskSetting.checked = false + inpaintingEditorContainer.style.display = maskSetting.checked ? 'block' : 'none' + } else { + initImagePreviewContainer.style.display = 'none' + // inpaintingEditorContainer.style.display = 'none' + promptStrengthContainer.style.display = 'none' + // maskSetting.style.display = 'none' + } + }) + imagePreview.insertBefore(taskEntry, previewTools.nextSibling) task.previewPrompt.innerText = task.reqBody.prompt @@ -913,15 +957,14 @@ function getPrompts() { prompts = prompts.map(prompt => prompt.trim()) prompts = prompts.filter(prompt => prompt !== '') + if (activeTags.length > 0) { + const promptTags = activeTags.map(x => x.name).join(", ") + prompts = prompts.map((prompt) => `${prompt}, ${promptTags}`) + } let promptsToMake = applySetOperator(prompts) promptsToMake = applyPermuteOperator(promptsToMake) - if (activeTags.length <= 0) { - return promptsToMake - } - - const promptTags = activeTags.map(x => x.name).join(", ") - return promptsToMake.map((prompt) => `${prompt}, ${promptTags}`) + return promptsToMake } function applySetOperator(prompts) {