From 755add449a2726a80d95d627b6cdc0c68902e70d Mon Sep 17 00:00:00 2001
From: "Lt.Dr.Data" <lt.dr.data@gmail.com>
Date: Mon, 5 Jun 2023 14:15:12 +0900
Subject: [PATCH] * add settings for preview_format * default value is ''(=
 don't reencode)

---
 web/extensions/core/maskeditor.js |  2 +-
 web/scripts/app.js                | 22 ++++++++--------------
 web/scripts/ui.js                 | 19 +++++++++++++++++++
 web/scripts/widgets.js            |  2 +-
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/web/extensions/core/maskeditor.js b/web/extensions/core/maskeditor.js
index 555d74e83..764164d5e 100644
--- a/web/extensions/core/maskeditor.js
+++ b/web/extensions/core/maskeditor.js
@@ -41,7 +41,7 @@ async function uploadMask(filepath, formData) {
 	});
 
 	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']] = new Image();
-	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src = "/view?" + new URLSearchParams(filepath).toString() + "&preview="+app.preview_format;
+	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src = "/view?" + new URLSearchParams(filepath).toString() + app.getPreviewFormatParam();
 
 	if(ComfyApp.clipspace.images)
 		ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']] = filepath;
diff --git a/web/scripts/app.js b/web/scripts/app.js
index a85eb31de..95447ffa0 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -49,20 +49,14 @@ export class ComfyApp {
 		 * @type {boolean}
 		 */
 		this.shiftDown = false;
+	}
 
-		/**
-		 * 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}
-		 */
-		this.preview_format = "webp";
+	getPreviewFormatParam() {
+		let preview_format = this.ui.settings.getSettingValue("Comfy.PreviewFormat");
+		if(preview_format)
+			return `&preview=${preview_format}`;
+		else
+			return "";
 	}
 
 	static isImageNode(node) {
@@ -385,7 +379,7 @@ export class ComfyApp {
 									const img = new Image();
 									img.onload = () => r(img);
 									img.onerror = () => r(null);
-									img.src = "/view?" + new URLSearchParams(src).toString() + "&preview="+app.preview_format;
+									img.src = "/view?" + new URLSearchParams(src).toString() + app.getPreviewFormatParam();
 								});
 							})
 						).then((imgs) => {
diff --git a/web/scripts/ui.js b/web/scripts/ui.js
index 2c9043d00..6b764d43c 100644
--- a/web/scripts/ui.js
+++ b/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",
diff --git a/web/scripts/widgets.js b/web/scripts/widgets.js
index fd50ce36f..d6faaddbf 100644
--- a/web/scripts/widgets.js
+++ b/web/scripts/widgets.js
@@ -303,7 +303,7 @@ export const ComfyWidgets = {
 				subfolder = name.substring(0, folder_separator);
 				name = name.substring(folder_separator + 1);
 			}
-			img.src = `/view?filename=${name}&type=input&subfolder=${subfolder}&preview=${app.preview_format}`;
+			img.src = `/view?filename=${name}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}`;
 			node.setSizeForImage?.();
 		}