Allow saving generated ControlNet previews

src/wwwroot/js/genpage/gentab/params.js

@@ -814,7 +814,7 @@ function genInputs(delay_final = false) {
         let controlnetGroup = document.getElementById('input_group_content_controlnet');
         if (controlnetGroup) {
             let firstGroup = controlnetGroup.querySelector('.input-group');
-            let buttonDiv = createDiv(`controlnet_button_preview`, null, `<button class="basic-button" onclick="controlnetShowPreview()">Preview</button>`);
+            let buttonDiv = createDiv(`controlnet_button_preview`, null, `<button class="basic-button" onclick="controlnetShowPreview()">Preview</button> <button class="basic-button" onclick="controlnetSavePreviewToServer()">Save to Server</button>`);
             if (firstGroup) {
                 controlnetGroup.insertBefore(buttonDiv, firstGroup);
             }
@@ -1452,7 +1452,7 @@ function debugShowHiddenParams() {
 }
 
 /** Loads and shows a preview of ControlNet preprocessing to the user. */
-function controlnetShowPreview() {
+function controlnetShowPreview(callback) {
     let toggler = getRequiredElementById('input_group_content_controlnet_toggle');
     if (!toggler.checked) {
         toggler.checked = true;
@@ -1465,10 +1465,10 @@ function controlnetShowPreview() {
         }
         let previewArea = getRequiredElementById('controlnet_button_preview');
         let clearPreview = () => {
-            let lastResult = previewArea.querySelector('.controlnet-preview-result');
-            if (lastResult) {
-                lastResult.remove();
+            for (let result of previewArea.querySelectorAll('.controlnet-preview-result, .controlnet-save-result')) {
+                result.remove();
             }
+            delete previewArea.dataset.controlnetPreviewImage;
         };
         clearPreview();
         let imgInput = getRequiredElementById('input_controlnetimageinput');
@@ -1510,11 +1510,55 @@ function controlnetShowPreview() {
                 resultBox.append(imgElem);
             }
             clearPreview();
+            previewArea.dataset.controlnetPreviewImage = data.image;
             previewArea.append(resultBox);
+            if (callback) {
+                callback(data);
+            }
         });
     });
 }
 
+/** Saves a ControlNet preview data URL through the existing history save route. */
+function controlnetSavePreviewDataToServer(image) {
+    let now = new Date();
+    let pad = (val) => `${val}`.padStart(2, '0');
+    let millis = `${now.getMilliseconds()}`.padStart(3, '0');
+    let name = `controlnet-preview-${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}-${millis}`;
+    let data = {
+        image: image,
+        ['Override Outpath Format']: `inputs/controlnet/${name}`
+    };
+    genericRequest('AddImageToHistory', data, res => {
+        let previewArea = getRequiredElementById('controlnet_button_preview');
+        let oldSaveResult = previewArea.querySelector('.controlnet-save-result');
+        if (oldSaveResult) {
+            oldSaveResult.remove();
+        }
+        let saveResult = createDiv(null, 'controlnet-save-result modal_success_bottom', 'Saved ControlNet preview.');
+        previewArea.append(saveResult);
+        setTimeout(() => {
+            saveResult.remove();
+        }, 5000);
+    });
+}
+
+/** Saves the current ControlNet preview, generating it first if needed. */
+function controlnetSavePreviewToServer() {
+    let previewArea = getRequiredElementById('controlnet_button_preview');
+    let image = previewArea.dataset.controlnetPreviewImage;
+    if (image) {
+        controlnetSavePreviewDataToServer(image);
+        return;
+    }
+    controlnetShowPreview(data => {
+        if (!data || !data.image) {
+            return;
+        }
+        controlnetSavePreviewDataToServer(data.image);
+    });
+}
+
 /** Gets the parameter with a given ID, from either the current param set, or the raw set from server. If unavailable, returns null. */
 function getParamById(id) {
     if (!gen_param_types) {