improve: lightweight preview to reduce network traffic (#733)

* To reduce bandwidth traffic in a remote environment, a lossy compression-based preview mode is provided for displaying simple visualizations in node-based widgets.

* Added 'preview=[image format]' option to the '/view' API.
* Updated node to use preview for displaying images as widgets.
* Excluded preview usage in the open image, save image, mask editor where the original data is required.

* Made preview_format parameterizable for extensibility.

* default preview format changed: jpeg -> webp

* Support advanced preview_format option.
- grayscale option for visual debugging
- quality option for aggressive reducing

L?;format;quality?

ex)
jpeg => rgb, jpeg, quality 90
L;webp;80 => grayscale, webp, quality 80
L;png => grayscale, png, quality 90
webp;50 => rgb, webp, quality 50

* move comment

* * add settings for preview_format
* default value is ''(= don't reencode)

---------

Co-authored-by: Lt.Dr.Data <lt.dr.data@gmail.com>

web/scripts/ui.js

@@ -462,6 +462,25 @@ export class ComfyUI {
 			defaultValue: true,
 		});
 
+		/**
+		 * file format for preview
+		 *
+		 * L?;format;quality
+		 *
+		 * ex)
+		 * L;webp;50 -> grayscale, webp, quality 50
+		 * jpeg;80 -> rgb, jpeg, quality 80
+		 * png -> rgb, png, default quality(=90)
+		 *
+		 * @type {string}
+		 */
+		const previewImage = this.settings.addSetting({
+			id: "Comfy.PreviewFormat",
+			name: "When displaying a preview in the image widget, convert it to a lightweight image. (webp, jpeg, webp;50, ...)",
+			type: "string",
+			defaultValue: "",
+		});
+
 		const fileInput = $el("input", {
 			id: "comfy-file-input",
 			type: "file",