Allow saving generated ControlNet previews

src/Text2Image/T2IEngine.cs

@@ -289,6 +289,18 @@ string format(long t)
                 backend?.Dispose();
                 return;
             }
+            if (user_input.Get(T2IParamTypes.ControlNetPreviewOnly, false))
+            {
+                string controlNetInputFolder = $"inputs/_comfy{backend.Data.ID}/";
+                if (!UserImageHistoryHelper.SharedSpecialFolders.ContainsKey(controlNetInputFolder) && backend.Data.Parent is not null)
+                {
+                    controlNetInputFolder = $"inputs/_comfy{backend.Data.Parent.ID}/";
+                }
+                if (UserImageHistoryHelper.SharedSpecialFolders.ContainsKey(controlNetInputFolder))
+                {
+                    user_input.ExtraMeta["controlnet_preview_input_folder"] = controlNetInputFolder;
+                }
+            }
             try
             {
                 claim.Extend(liveGens: 1);

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);
             }
@@ -1451,8 +1451,17 @@ function debugShowHiddenParams() {
     }
 }
 
+/** Clears any shown or stored ControlNet preview. */
+function controlnetClearPreview(previewArea) {
+    for (let result of previewArea.querySelectorAll('.controlnet-preview-result, .controlnet-save-result')) {
+        result.remove();
+    }
+    delete previewArea.dataset.controlnetPreviewImage;
+    delete previewArea.dataset.controlnetPreviewMetadata;
+}
+
 /** 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;
@@ -1464,18 +1473,12 @@ function controlnetShowPreview() {
             return;
         }
         let previewArea = getRequiredElementById('controlnet_button_preview');
-        let clearPreview = () => {
-            let lastResult = previewArea.querySelector('.controlnet-preview-result');
-            if (lastResult) {
-                lastResult.remove();
-            }
-        };
-        clearPreview();
+        controlnetClearPreview(previewArea);
         let imgInput = getRequiredElementById('input_controlnetimageinput');
         if (!imgInput || !imgInput.dataset.filedata) {
             let secondaryImageOption = getRequiredElementById('input_initimage');
             if (!secondaryImageOption || !secondaryImageOption.dataset.filedata) {
-                clearPreview();
+                controlnetClearPreview(previewArea);
                 previewArea.append(createDiv(null, 'controlnet-preview-result', 'Must select an image.'));
                 return;
             }
@@ -1509,12 +1512,95 @@ function controlnetShowPreview() {
                 imgElem.src = data.image;
                 resultBox.append(imgElem);
             }
-            clearPreview();
+            controlnetClearPreview(previewArea);
+            previewArea.dataset.controlnetPreviewImage = data.image;
+            previewArea.dataset.controlnetPreviewMetadata = data.metadata ?? '';
             previewArea.append(resultBox);
+            if (callback) {
+                callback(data);
+            }
         });
     });
 }
 
+/** Gets the target input folder for saved ControlNet previews. */
+function controlnetGetPreviewInputFolder(metadata) {
+    if (metadata) {
+        try {
+            let parsed = JSON.parse(metadata);
+            let extraData = parsed.sui_extra_data;
+            if (extraData && extraData.controlnet_preview_input_folder) {
+                return `${extraData.controlnet_preview_input_folder}`.replace(/\/$/, '');
+            }
+        }
+        catch (ex) {
+        }
+    }
+    let exactBackendInput = document.getElementById('input_exactbackendid');
+    let exactBackendToggle = document.getElementById('input_exactbackendid_toggle');
+    if (exactBackendInput && (!exactBackendToggle || exactBackendToggle.checked)) {
+        let parsedId = parseInt(exactBackendInput.value);
+        if (!Number.isNaN(parsedId)) {
+            return `inputs/_comfy${parsedId}`;
+        }
+    }
+    return 'inputs';
+}
+
+/** Gets a timestamped base file name for a saved ControlNet preview. */
+function controlnetGetPreviewSaveName() {
+    let now = new Date();
+    let pad = (val) => `${val}`.padStart(2, '0');
+    let millis = `${now.getMilliseconds()}`.padStart(3, '0');
+    return `controlnet-preview-${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}-${millis}`;
+}
+
+/** Saves a ControlNet preview data URL through the existing history save route. */
+function controlnetSavePreviewDataToServer(image, metadata) {
+    let targetFolder = `${controlnetGetPreviewInputFolder(metadata)}/controlnet`;
+    let data = {
+        image: image,
+        ['Override Outpath Format']: `${targetFolder}/${controlnetGetPreviewSaveName()}`.replaceAll('[', '')
+    };
+    let imageFormatsByMimeType = { 'image/png': 'PNG', 'image/jpeg': 'JPG', 'image/webp': 'WEBP' };
+    let mimeType = guessMimeTypeForExtension(image);
+    if (mimeType in imageFormatsByMimeType) {
+        data['Image Format'] = imageFormatsByMimeType[mimeType];
+    }
+    genericRequest('AddImageToHistory', data, res => {
+        if (inputBrowserHelper.inputImageBrowser) {
+            inputBrowserHelper.inputImageBrowser.lightRefresh();
+        }
+        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;
+    let metadata = previewArea.dataset.controlnetPreviewMetadata ?? '';
+    if (image) {
+        controlnetSavePreviewDataToServer(image, metadata);
+        return;
+    }
+    controlnetShowPreview(data => {
+        if (!data || !data.image) {
+            return;
+        }
+        controlnetSavePreviewDataToServer(data.image, data.metadata ?? '');
+    });
+}
+
 /** 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) {