Allow saving generated ControlNet previews

src/BuiltinExtensions/ComfyUIBackend/WorkflowGeneratorSteps.cs

@@ -1094,6 +1094,10 @@ bool getBestFor(string phrase)
                         {
                             g.CurrentMedia = imageNodeActual;
                             g.CurrentMedia.SaveOutput(g.CurrentVae, g.CurrentAudioVae, id: "9");
+                            if (imageNodeActual.AttachedAudio is not null)
+                            {
+                                g.Workflow["9"]["inputs"]["fps"] = NodePath((string)imageNodeActual.AttachedAudio.Path[0], 2);
+                            }
                             g.SkipFurtherSteps = true;
                             return;
                         }

src/Text2Image/T2IParamTypes.cs

@@ -1125,7 +1125,7 @@ public static string ValidateParam(T2IParamType type, string val, Session sessio
 
     public static string FilePathToDataString(Session session, string filePath, string errorContext)
     {
-        string root = WebServer.GetUserOutputRoot(session.User);
+        string root = Utilities.CombinePathWithAbsolute(Environment.CurrentDirectory, session.User.OutputDirectory);
         (string path, string consoleError, string userError) = WebServer.CheckFilePath(root, filePath);
         if (consoleError is not null)
         {

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) {