Preview context menu improvements

The Save and Open options are no longer displayed when the original file
can not be served.

A new option to download the first frame png has been added.

Author: AustinMroz

videohelpersuite/nodes.py

@@ -344,8 +344,8 @@ def batched_encode(images, vae, frames_per_batch):
             output_process = None
 
         # save first frame as png to keep metadata
-        file = f"{filename}_{counter:05}.png"
-        file_path = os.path.join(full_output_folder, file)
+        first_image_file = f"{filename}_{counter:05}.png"
+        file_path = os.path.join(full_output_folder, first_image_file)
         Image.fromarray(tensor_to_bytes(first_image)).save(
             file_path,
             pnginfo=metadata,
@@ -561,19 +561,18 @@ def pad(image):
                 #It will be muted unless opened or saved with right click
                 file = output_file_with_audio
 
-        previews = [
-            {
+        preview = {
                 "filename": file,
                 "subfolder": subfolder,
                 "type": "output" if save_output else "temp",
                 "format": format,
                 "frame_rate": frame_rate,
+                "workflow": first_image_file
             }
-        ]
         if num_frames == 1 and 'png' in format and '%03d' in file:
             previews[0]['format'] = 'image/png'
             previews[0]['filename'] = file.replace('%03d', '001')
-        return {"ui": {"gifs": previews}, "result": ((save_output, output_files),)}
+        return {"ui": {"gifs": [preview]}, "result": ((save_output, output_files),)}
     @classmethod
     def VALIDATE_INPUTS(self, format, **kwargs):
         return True

web/js/VHS.core.js

@@ -896,10 +896,12 @@ function addPreviewOptions(nodeType) {
 
         let url = null
         if (previewWidget.videoEl?.hidden == false && previewWidget.videoEl.src) {
-            //Use full quality video
-            url = api.apiURL('/view?' + new URLSearchParams(previewWidget.value.params));
-            //Workaround for 16bit png: Just do first frame
-            url = url.replace('%2503d', '001')
+            if (['input', 'output', 'temp'].includes(previewWidget.value.params.type)) {
+                //Use full quality video
+                url = api.apiURL('/view?' + new URLSearchParams(previewWidget.value.params));
+                //Workaround for 16bit png: Just do first frame
+                url = url.replace('%2503d', '001')
+            }
         } else if (previewWidget.imgEl?.hidden == false && previewWidget.imgEl.src) {
             url = previewWidget.imgEl.src;
             url = new URL(url);
@@ -917,13 +919,29 @@ function addPreviewOptions(nodeType) {
                     callback: () => {
                         const a = document.createElement("a");
                         a.href = url;
-                        a.setAttribute("download", new URLSearchParams(previewWidget.value.params).get("filename"));
+                        a.setAttribute("download", previewWidget.value.params.filename);
                         document.body.append(a);
                         a.click();
                         requestAnimationFrame(() => a.remove());
                     },
                 }
             );
+            if (previewWidget.value.params.workflow) {
+                let wParams = {...previewWidget.value.params,
+                    filename: previewWidget.value.params.workflow}
+                let wUrl = api.apiURL('/view?' + new URLSearchParams(wParams));
+                optNew.push({
+                    content: "Save workflow image",
+                    callback: () => {
+                        const a = document.createElement("a");
+                        a.href = wUrl;
+                        a.setAttribute("download", previewWidget.value.params.workflow);
+                        document.body.append(a);
+                        a.click();
+                        requestAnimationFrame(() => a.remove());
+                    }
+                });
+            }
         }
         const PauseDesc = (previewWidget.value.paused ? "Resume" : "Pause") + " preview";
         if(previewWidget.videoEl.hidden == false) {