Adding Use Settings

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;
 }

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 = '+'
 

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 = ` <div class="header-content panel collapsible active">
                                 <div class="taskStatusLabel">Enqueued</div>
                                 <button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
+                            <button class="secondaryButton useSettings"><i class="fa-solid fa-redo"></i> Use Settings</button>
                                 <div class="preview-prompt collapsible active"></div>
                                 <div class="taskConfig">${taskConfig}</div>
                                 <div class="outputMsg"></div>
@@ -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,17 +957,16 @@ 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}`)
-}
-
 function applySetOperator(prompts) {
     let promptsToMake = []
     let braceExpander = new BraceExpander()