diff --git a/folder_paths.py b/folder_paths.py
index e5b89492..0acd2267 100644
--- a/folder_paths.py
+++ b/folder_paths.py
@@ -57,6 +57,10 @@ def get_input_directory():
     global input_directory
     return input_directory
 
+def get_clipspace_directory():
+    global input_directory
+    return input_directory+"/clipspace"
+
 
 #NOTE: used in http server so don't put folders that should not be accessed remotely
 def get_directory_by_type(type_name):
@@ -66,6 +70,8 @@ def get_directory_by_type(type_name):
         return get_temp_directory()
     if type_name == "input":
         return get_input_directory()
+    if type_name == "clipspace":
+        return get_clipspace_directory()
     return None
 
 
@@ -81,6 +87,9 @@ def annotated_filepath(name):
     elif name.endswith("[temp]"):
         base_dir = get_temp_directory()
         name = name[:-7]
+    elif name.endswith("[clipspace]"):
+        base_dir = get_clipspace_directory()
+        name = name[:-12]
     else:
         return name, None
 
diff --git a/nodes.py b/nodes.py
index ca0769ba..1d9a5c87 100644
--- a/nodes.py
+++ b/nodes.py
@@ -973,8 +973,9 @@ class LoadImage:
     @classmethod
     def INPUT_TYPES(s):
         input_dir = folder_paths.get_input_directory()
+        input_dir = [f for f in os.listdir(input_dir) if os.path.isfile(os.path.join(input_dir, f))]
         return {"required":
-                    {"image": (sorted(os.listdir(input_dir)), )},
+                    {"image": ("FILE_COMBO", {"base_dir": "input", "files": sorted(input_dir)}, )},
                 }
 
     CATEGORY = "image"
@@ -1014,9 +1015,10 @@ class LoadImageMask:
     @classmethod
     def INPUT_TYPES(s):
         input_dir = folder_paths.get_input_directory()
+        input_dir = [f for f in os.listdir(input_dir) if os.path.isfile(os.path.join(input_dir, f))]
         return {"required":
-                    {"image": (sorted(os.listdir(input_dir)), ),
-                    "channel": (s._color_channels, ),}
+                    {"image": ("FILE_COMBO", {"base_dir": "input", "files": sorted(input_dir)}, ),
+                     "channel": (s._color_channels, ), }
                 }
 
     CATEGORY = "mask"
diff --git a/server.py b/server.py
index 1c5c1791..48644d83 100644
--- a/server.py
+++ b/server.py
@@ -7,6 +7,9 @@ import execution
 import uuid
 import json
 import glob
+from PIL import Image
+from io import BytesIO
+
 try:
     import aiohttp
     from aiohttp import web
@@ -110,19 +113,26 @@ class PromptServer():
             files = glob.glob(os.path.join(self.web_root, 'extensions/**/*.js'), recursive=True)
             return web.json_response(list(map(lambda f: "/" + os.path.relpath(f, self.web_root).replace("\\", "/"), files)))
 
+        def get_dir_by_type(dir_type):
+            if dir_type is None:
+                type_dir = folder_paths.get_input_directory()
+            elif dir_type == "input":
+                type_dir = folder_paths.get_input_directory()
+            elif dir_type == "clipspace":
+                type_dir = folder_paths.get_clipspace_directory()
+            elif dir_type == "temp":
+                type_dir = folder_paths.get_temp_directory()
+            elif dir_type == "output":
+                type_dir = folder_paths.get_output_directory()
+
+            return type_dir
+
         @routes.post("/upload/image")
         async def upload_image(request):
             post = await request.post()
             image = post.get("image")
 
-            if post.get("type") is None:
-                upload_dir = folder_paths.get_input_directory()
-            elif post.get("type") == "input":
-                upload_dir = folder_paths.get_input_directory()
-            elif post.get("type") == "temp":
-                upload_dir = folder_paths.get_temp_directory()
-            elif post.get("type") == "output":
-                upload_dir = folder_paths.get_output_directory()
+            upload_dir = get_dir_by_type(post.get("type"))
 
             if not os.path.exists(upload_dir):
                 os.makedirs(upload_dir)
@@ -147,12 +157,62 @@ class PromptServer():
             else:
                 return web.Response(status=400)
 
+        @routes.post("/upload/mask")
+        async def upload_mask(request):
+            post = await request.post()
+            image = post.get("image")
+            original_image = post.get("original_image")
+
+            upload_dir = get_dir_by_type(post.get("type"))
+
+            if not os.path.exists(upload_dir):
+                os.makedirs(upload_dir)
+
+            if image and image.file:
+                filename = image.filename
+                if not filename:
+                    return web.Response(status=400)
+
+                split = os.path.splitext(filename)
+                i = 1
+                while os.path.exists(os.path.join(upload_dir, filename)):
+                    filename = f"{split[0]} ({i}){split[1]}"
+                    i += 1
+
+                filepath = os.path.join(upload_dir, filename)
+
+                original_pil = Image.open(original_image.file).convert('RGBA')
+                mask_pil = Image.open(image.file).convert('RGBA')
+
+                # alpha copy
+                new_alpha = mask_pil.getchannel('A')
+                original_pil.putalpha(new_alpha)
+
+                original_pil.save(filepath)
+
+                return web.json_response({"name": filename})
+            else:
+                return web.Response(status=400)
+
 
         @routes.get("/view")
         async def view_image(request):
             if "filename" in request.rel_url.query:
-                type = request.rel_url.query.get("type", "output")
-                output_dir = folder_paths.get_directory_by_type(type)
+                filename = request.rel_url.query["filename"]
+                filename,output_dir = folder_paths.annotated_filepath(filename)
+
+                if request.rel_url.query.get("type", "input") and filename.startswith("clipspace/"):
+                    output_dir = folder_paths.get_clipspace_directory()
+                    filename = filename[10:]
+
+                # validation for security: prevent accessing arbitrary path
+                if filename[0] == '/' or '..' in filename:
+                    return web.Response(status=400)
+
+                if output_dir is None:
+                    type = request.rel_url.query.get("type", "output")
+                    output_dir = folder_paths.get_directory_by_type(type)
+
                 if output_dir is None:
                     return web.Response(status=400)
 
@@ -162,13 +222,49 @@ class PromptServer():
                         return web.Response(status=403)
                     output_dir = full_output_dir
 
-                filename = request.rel_url.query["filename"]
                 filename = os.path.basename(filename)
                 file = os.path.join(output_dir, filename)
 
                 if os.path.isfile(file):
-                    return web.FileResponse(file, headers={"Content-Disposition": f"filename=\"{filename}\""})
-                
+                    if 'channel' not in request.rel_url.query:
+                        channel = 'rgba'
+                    else:
+                        channel = request.rel_url.query["channel"]
+
+                    if channel == 'rgb':
+                        with Image.open(file) as img:
+                            if img.mode == "RGBA":
+                                r, g, b, a = img.split()
+                                new_img = Image.merge('RGB', (r, g, b))
+                            else:
+                                new_img = img.convert("RGB")
+
+                            buffer = BytesIO()
+                            new_img.save(buffer, format='PNG')
+                            buffer.seek(0)
+
+                            return web.Response(body=buffer.read(), content_type='image/png',
+                                                headers={"Content-Disposition": f"filename=\"{filename}\""})
+
+                    elif channel == 'a':
+                        with Image.open(file) as img:
+                            if img.mode == "RGBA":
+                                _, _, _, a = img.split()
+                            else:
+                                a = Image.new('L', img.size, 255)
+
+                            # alpha img
+                            alpha_img = Image.new('RGBA', img.size)
+                            alpha_img.putalpha(a)
+                            alpha_buffer = BytesIO()
+                            alpha_img.save(alpha_buffer, format='PNG')
+                            alpha_buffer.seek(0)
+
+                            return web.Response(body=alpha_buffer.read(), content_type='image/png',
+                                                headers={"Content-Disposition": f"filename=\"{filename}\""})
+                    else:
+                        return web.FileResponse(file, headers={"Content-Disposition": f"filename=\"{filename}\""})
+
             return web.Response(status=404)
 
         @routes.get("/prompt")
diff --git a/web/extensions/core/clipspace.js b/web/extensions/core/clipspace.js
new file mode 100644
index 00000000..adb5877e
--- /dev/null
+++ b/web/extensions/core/clipspace.js
@@ -0,0 +1,166 @@
+import { app } from "/scripts/app.js";
+import { ComfyDialog, $el } from "/scripts/ui.js";
+import { ComfyApp } from "/scripts/app.js";
+
+export class ClipspaceDialog extends ComfyDialog {
+	static items = [];
+	static instance = null;
+
+	static registerButton(name, contextPredicate, callback) {
+		const item =
+			$el("button", {
+				type: "button",
+				textContent: name,
+				contextPredicate: contextPredicate,
+				onclick: callback
+			})
+
+		ClipspaceDialog.items.push(item);
+	}
+
+	static invalidatePreview() {
+		if(ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0) {
+			const img_preview = document.getElementById("clipspace_preview");
+			if(img_preview) {
+				img_preview.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
+				img_preview.style.maxHeight = "100%";
+				img_preview.style.maxWidth = "100%";
+			}
+		}
+	}
+
+	static invalidate() {
+		if(ClipspaceDialog.instance) {
+			const self = ClipspaceDialog.instance;
+			// allow reconstruct controls when copying from non-image to image content.
+			const children = $el("div.comfy-modal-content", [ self.createImgSettings(), ...self.createButtons() ]);
+
+			if(self.element) {
+				// update
+				self.element.removeChild(self.element.firstChild);
+				self.element.appendChild(children);
+			}
+			else {
+				// new
+				self.element = $el("div.comfy-modal", { parent: document.body }, [children,]);
+			}
+
+			if(self.element.children[0].children.length <= 1) {
+				self.element.children[0].appendChild($el("p", {}, ["Unable to find the features to edit content of a format stored in the current Clipspace."]));
+			}
+
+			ClipspaceDialog.invalidatePreview();
+		}
+	}
+
+	constructor() {
+		super();
+	}
+
+	createButtons(self) {
+		const buttons = [];
+
+		for(let idx in ClipspaceDialog.items) {
+			const item = ClipspaceDialog.items[idx];
+			if(!item.contextPredicate || item.contextPredicate())
+				buttons.push(ClipspaceDialog.items[idx]);
+		}
+
+		buttons.push(
+			$el("button", {
+				type: "button",
+				textContent: "Close",
+				onclick: () => { this.close(); }
+			})
+		);
+
+		return buttons;
+	}
+
+	createImgSettings() {
+		if(ComfyApp.clipspace.imgs) {
+			const combo_items = [];
+			const imgs = ComfyApp.clipspace.imgs;
+
+			for(let i=0; i < imgs.length; i++) {
+				combo_items.push($el("option", {value:i}, [`${i}`]));
+			}
+
+			const combo1 = $el("select",
+				{id:"clipspace_img_selector", onchange:(event) => {
+					ComfyApp.clipspace['selectedIndex'] = event.target.selectedIndex;
+					ClipspaceDialog.invalidatePreview();
+				} }, combo_items);
+
+			const row1 =
+				$el("tr", {},
+						[
+							$el("td", {}, [$el("font", {color:"white"}, ["Select Image"])]),
+							$el("td", {}, [combo1])
+						]);
+
+
+			const combo2 = $el("select",
+								{id:"clipspace_img_paste_mode", onchange:(event) => {
+									ComfyApp.clipspace['img_paste_mode'] = event.target.value;
+								} },
+								[
+									$el("option", {value:'selected'}, 'selected'),
+									$el("option", {value:'all'}, 'all')
+								]);
+			combo2.value = ComfyApp.clipspace['img_paste_mode'];
+
+			const row2 =
+				$el("tr", {},
+						[
+							$el("td", {}, [$el("font", {color:"white"}, ["Paste Mode"])]),
+							$el("td", {}, [combo2])
+						]);
+
+			const td = $el("td", {align:'center', width:'100px', height:'100px', colSpan:'2'},
+								[ $el("img",{id:"clipspace_preview", ondragstart:() => false},[]) ]);
+
+			const row3 =
+				$el("tr", {}, [td]);
+
+			return $el("table", {}, [row1, row2, row3]);
+		}
+		else {
+			return [];
+		}
+	}
+
+	createImgPreview() {
+		if(ComfyApp.clipspace.imgs) {
+			return $el("img",{id:"clipspace_preview", ondragstart:() => false});
+		}
+		else
+			return [];
+	}
+
+	show() {
+		const img_preview = document.getElementById("clipspace_preview");
+		ClipspaceDialog.invalidate();
+		
+		this.element.style.display = "block";
+	}
+}
+
+app.registerExtension({
+	name: "Comfy.Clipspace",
+	init(app) {
+		app.openClipspace =
+			function () {
+				if(!ClipspaceDialog.instance) {
+					ClipspaceDialog.instance = new ClipspaceDialog(app);
+					ComfyApp.clipspace_invalidate_handler = ClipspaceDialog.invalidate;
+				}
+
+				if(ComfyApp.clipspace) {
+					ClipspaceDialog.instance.show();
+				}
+				else
+					app.ui.dialog.show("Clipspace is Empty!");
+			};
+	}
+});
\ No newline at end of file
diff --git a/web/extensions/core/maskeditor.js b/web/extensions/core/maskeditor.js
new file mode 100644
index 00000000..c55f841b
--- /dev/null
+++ b/web/extensions/core/maskeditor.js
@@ -0,0 +1,589 @@
+import { app } from "/scripts/app.js";
+import { ComfyDialog, $el } from "/scripts/ui.js";
+import { ComfyApp } from "/scripts/app.js";
+import { ClipspaceDialog } from "/extensions/core/clipspace.js";
+
+// Helper function to convert a data URL to a Blob object
+function dataURLToBlob(dataURL) {
+	const parts = dataURL.split(';base64,');
+	const contentType = parts[0].split(':')[1];
+	const byteString = atob(parts[1]);
+	const arrayBuffer = new ArrayBuffer(byteString.length);
+	const uint8Array = new Uint8Array(arrayBuffer);
+	for (let i = 0; i < byteString.length; i++) {
+		uint8Array[i] = byteString.charCodeAt(i);
+	}
+	return new Blob([arrayBuffer], { type: contentType });
+}
+
+function loadedImageToBlob(image) {
+	const canvas = document.createElement('canvas');
+
+	canvas.width = image.width;
+	canvas.height = image.height;
+
+	const ctx = canvas.getContext('2d');
+
+	ctx.drawImage(image, 0, 0);
+
+	const dataURL = canvas.toDataURL('image/png', 1);
+	const blob = dataURLToBlob(dataURL);
+
+	return blob;
+}
+
+async function uploadMask(filepath, formData) {
+	await fetch('/upload/mask', {
+		method: 'POST',
+		body: formData
+	}).then(response => {}).catch(error => {
+		console.error('Error:', error);
+	});
+
+	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']] = new Image();
+	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src = `view?filename=${filepath.filename}&type=${filepath.type}`;
+
+	if(ComfyApp.clipspace.images)
+		ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']] = filepath;
+
+	ClipspaceDialog.invalidatePreview();
+}
+
+function prepareRGB(image, backupCanvas, backupCtx) {
+	// paste mask data into alpha channel
+	backupCtx.drawImage(image, 0, 0, backupCanvas.width, backupCanvas.height);
+	const backupData = backupCtx.getImageData(0, 0, backupCanvas.width, backupCanvas.height);
+
+	// refine mask image
+	for (let i = 0; i < backupData.data.length; i += 4) {
+		if(backupData.data[i+3] == 255)
+			backupData.data[i+3] = 0;
+		else
+			backupData.data[i+3] = 255;
+
+		backupData.data[i] = 0;
+		backupData.data[i+1] = 0;
+		backupData.data[i+2] = 0;
+	}
+
+	backupCtx.globalCompositeOperation = 'source-over';
+	backupCtx.putImageData(backupData, 0, 0);
+}
+
+class MaskEditorDialog extends ComfyDialog {
+	static instance = null;
+	constructor() {
+		super();
+		this.element = $el("div.comfy-modal", { parent: document.body }, 
+			[ $el("div.comfy-modal-content", 
+				[...this.createButtons()]),
+			]);
+		MaskEditorDialog.instance = this;
+	}
+
+	createButtons() {
+		return [];
+	}
+
+	clearMask(self) {
+	}
+
+	createButton(name, callback) {
+		var button = document.createElement("button");
+		button.innerText = name;
+		button.addEventListener("click", callback);
+		return button;
+	}
+	createLeftButton(name, callback) {
+		var button = this.createButton(name, callback);
+		button.style.cssFloat = "left";
+		button.style.marginRight = "4px";
+		return button;
+	}
+	createRightButton(name, callback) {
+		var button = this.createButton(name, callback);
+		button.style.cssFloat = "right";
+		button.style.marginLeft = "4px";
+		return button;
+	}
+	createLeftSlider(self, name, callback) {
+		const divElement = document.createElement('div');
+		divElement.id = "maskeditor-slider";
+		divElement.style.cssFloat = "left";
+		divElement.style.fontFamily = "sans-serif";
+		divElement.style.marginRight = "4px";
+		divElement.style.color = "var(--input-text)";
+		divElement.style.backgroundColor = "var(--comfy-input-bg)";
+		divElement.style.borderRadius = "8px";
+		divElement.style.borderColor = "var(--border-color)";
+		divElement.style.borderStyle = "solid";
+		divElement.style.fontSize = "15px";
+		divElement.style.height = "21px";
+		divElement.style.padding = "1px 6px";
+		divElement.style.display = "flex";
+		divElement.style.position = "relative";
+		divElement.style.top = "2px";
+		self.brush_slider_input = document.createElement('input');
+		self.brush_slider_input.setAttribute('type', 'range');
+		self.brush_slider_input.setAttribute('min', '1');
+		self.brush_slider_input.setAttribute('max', '100');
+		self.brush_slider_input.setAttribute('value', '10');
+		const labelElement = document.createElement("label");
+		labelElement.textContent = name;
+
+		divElement.appendChild(labelElement);
+		divElement.appendChild(self.brush_slider_input);
+
+		self.brush_slider_input.addEventListener("change", callback);
+
+		return divElement;
+	}
+
+	setlayout(imgCanvas, maskCanvas) {
+		const self = this;
+
+		// If it is specified as relative, using it only as a hidden placeholder for padding is recommended
+		// to prevent anomalies where it exceeds a certain size and goes outside of the window.
+		var placeholder = document.createElement("div");
+		placeholder.style.position = "relative";
+		placeholder.style.height = "50px";
+
+		var bottom_panel = document.createElement("div");
+		bottom_panel.style.position = "absolute";
+		bottom_panel.style.bottom = "0px";
+		bottom_panel.style.left = "20px";
+		bottom_panel.style.right = "20px";
+		bottom_panel.style.height = "50px";
+
+		var brush = document.createElement("div");
+		brush.id = "brush";
+		brush.style.backgroundColor = "transparent";
+		brush.style.outline = "1px dashed black";
+		brush.style.boxShadow = "0 0 0 1px white";
+		brush.style.borderRadius = "50%";
+		brush.style.MozBorderRadius = "50%";
+		brush.style.WebkitBorderRadius = "50%";
+		brush.style.position = "absolute";
+		brush.style.zIndex = 100;
+		brush.style.pointerEvents = "none";
+		this.brush = brush;
+		this.element.appendChild(imgCanvas);
+		this.element.appendChild(maskCanvas);
+		this.element.appendChild(placeholder); // must below z-index than bottom_panel to avoid covering button
+		this.element.appendChild(bottom_panel);
+		document.body.appendChild(brush);
+
+		var brush_size_slider = this.createLeftSlider(self, "Thickness", (event) => {
+			self.brush_size = event.target.value;
+			self.updateBrushPreview(self, null, null);
+		});
+		var clearButton = this.createLeftButton("Clear",
+			() => {
+				self.maskCtx.clearRect(0, 0, self.maskCanvas.width, self.maskCanvas.height);
+				self.backupCtx.clearRect(0, 0, self.backupCanvas.width, self.backupCanvas.height);
+			});
+		var cancelButton = this.createRightButton("Cancel", () => {
+			document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
+			document.removeEventListener("keydown", MaskEditorDialog.handleKeyDown);
+			self.close();
+		});
+		var saveButton = this.createRightButton("Save", () => {
+			document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
+			document.removeEventListener("keydown", MaskEditorDialog.handleKeyDown);
+				self.save();
+			});
+
+		this.element.appendChild(imgCanvas);
+		this.element.appendChild(maskCanvas);
+		this.element.appendChild(placeholder); // must below z-index than bottom_panel to avoid covering button
+		this.element.appendChild(bottom_panel);
+
+		bottom_panel.appendChild(clearButton);
+		bottom_panel.appendChild(saveButton);
+		bottom_panel.appendChild(cancelButton);
+		bottom_panel.appendChild(brush_size_slider);
+
+		this.element.style.display = "block";
+		imgCanvas.style.position = "relative";
+		imgCanvas.style.top = "200";
+		imgCanvas.style.left = "0";
+
+		maskCanvas.style.position = "absolute";
+	}
+
+	show() {
+		// layout
+		const imgCanvas = document.createElement('canvas');
+		const maskCanvas = document.createElement('canvas');
+		const backupCanvas = document.createElement('canvas');
+
+		imgCanvas.id = "imageCanvas";
+		maskCanvas.id = "maskCanvas";
+		backupCanvas.id = "backupCanvas";
+
+		this.setlayout(imgCanvas, maskCanvas);
+
+		// prepare content
+		this.maskCanvas = maskCanvas;
+		this.backupCanvas = backupCanvas;
+		this.maskCtx = maskCanvas.getContext('2d');
+		this.backupCtx = backupCanvas.getContext('2d');
+
+		this.setImages(imgCanvas, backupCanvas);
+		this.setEventHandler(maskCanvas);
+	}
+
+	setImages(imgCanvas, backupCanvas) {
+		const imgCtx = imgCanvas.getContext('2d');
+		const backupCtx = backupCanvas.getContext('2d');
+		const maskCtx = this.maskCtx;
+		const maskCanvas = this.maskCanvas;
+
+		// image load
+		const orig_image = new Image();
+		window.addEventListener("resize", () => {
+			// repositioning
+			imgCanvas.width = window.innerWidth - 250;
+			imgCanvas.height = window.innerHeight - 200;
+
+			// redraw image
+			let drawWidth = orig_image.width;
+			let drawHeight = orig_image.height;
+			if (orig_image.width > imgCanvas.width) {
+				drawWidth = imgCanvas.width;
+				drawHeight = (drawWidth / orig_image.width) * orig_image.height;
+			}
+
+			if (drawHeight > imgCanvas.height) {
+				drawHeight = imgCanvas.height;
+				drawWidth = (drawHeight / orig_image.height) * orig_image.width;
+			}
+
+			imgCtx.drawImage(orig_image, 0, 0, drawWidth, drawHeight);
+
+			// update mask
+			backupCtx.drawImage(maskCanvas, 0, 0, maskCanvas.width, maskCanvas.height, 0, 0, backupCanvas.width, backupCanvas.height);
+			maskCanvas.width = drawWidth;
+			maskCanvas.height = drawHeight;
+			maskCanvas.style.top = imgCanvas.offsetTop + "px";
+			maskCanvas.style.left = imgCanvas.offsetLeft + "px";
+			maskCtx.drawImage(backupCanvas, 0, 0, backupCanvas.width, backupCanvas.height, 0, 0, maskCanvas.width, maskCanvas.height);
+		});
+
+		const filepath = ComfyApp.clipspace.images;
+
+		const touched_image = new Image();
+
+		touched_image.onload = function() {
+			backupCanvas.width = touched_image.width;
+			backupCanvas.height = touched_image.height;
+
+			prepareRGB(touched_image, backupCanvas, backupCtx);
+		};
+
+		const alpha_url = new URL(ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src)
+		alpha_url.searchParams.delete('channel');
+		alpha_url.searchParams.set('channel', 'a');
+		touched_image.src = alpha_url;
+
+		// original image load
+		orig_image.onload = function() {
+			window.dispatchEvent(new Event('resize'));
+		};
+
+		const rgb_url = new URL(ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src);
+		rgb_url.searchParams.delete('channel');
+		rgb_url.searchParams.set('channel', 'rgb');
+		orig_image.src = rgb_url;
+		this.image = orig_image;
+	}g
+
+
+	setEventHandler(maskCanvas) {
+		maskCanvas.addEventListener("contextmenu", (event) => {
+			event.preventDefault();
+		});
+
+		const self = this;
+		maskCanvas.addEventListener('wheel', (event) => this.handleWheelEvent(self,event));
+		maskCanvas.addEventListener('pointerdown', (event) => this.handlePointerDown(self,event));
+		document.addEventListener('pointerup', MaskEditorDialog.handlePointerUp);
+		maskCanvas.addEventListener('pointermove', (event) => this.draw_move(self,event));
+		maskCanvas.addEventListener('touchmove', (event) => this.draw_move(self,event));
+		maskCanvas.addEventListener('pointerover', (event) => { this.brush.style.display = "block"; });
+		maskCanvas.addEventListener('pointerleave', (event) => { this.brush.style.display = "none"; });
+		document.addEventListener('keydown', MaskEditorDialog.handleKeyDown);
+	}
+
+	brush_size = 10;
+	drawing_mode = false;
+	lastx = -1;
+	lasty = -1;
+	lasttime = 0;
+
+	static handleKeyDown(event) {
+		const self = MaskEditorDialog.instance;
+		if (event.key === ']') {
+			self.brush_size = Math.min(self.brush_size+2, 100);
+		} else if (event.key === '[') {
+			self.brush_size = Math.max(self.brush_size-2, 1);
+		}
+
+		self.updateBrushPreview(self);
+	}
+
+	static handlePointerUp(event) {
+		event.preventDefault();
+		MaskEditorDialog.instance.drawing_mode = false;
+	}
+
+	updateBrushPreview(self) {
+		const brush = self.brush;
+
+		var centerX = self.cursorX;
+		var centerY = self.cursorY;
+
+		brush.style.width = self.brush_size * 2 + "px";
+		brush.style.height = self.brush_size * 2 + "px";
+		brush.style.left = (centerX - self.brush_size) + "px";
+		brush.style.top = (centerY - self.brush_size) + "px";
+	}
+
+	handleWheelEvent(self, event) {
+		if(event.deltaY < 0)
+			self.brush_size = Math.min(self.brush_size+2, 100);
+		else
+			self.brush_size = Math.max(self.brush_size-2, 1);
+
+		self.brush_slider_input.value = self.brush_size;
+
+		self.updateBrushPreview(self);
+	}
+
+	draw_move(self, event) {
+		event.preventDefault();
+
+		this.cursorX = event.pageX;
+		this.cursorY = event.pageY;
+
+		self.updateBrushPreview(self);
+
+		if (event instanceof TouchEvent || event.buttons == 1) {
+			var diff = performance.now() - self.lasttime;
+
+			const maskRect = self.maskCanvas.getBoundingClientRect();
+
+			var x = event.offsetX;
+			var y = event.offsetY
+
+			if(event.offsetX == null) {
+				x = event.targetTouches[0].clientX - maskRect.left;
+			}
+
+			if(event.offsetY == null) {
+				y = event.targetTouches[0].clientY - maskRect.top;
+			}
+
+			var brush_size = this.brush_size;
+			if(event instanceof PointerEvent && event.pointerType == 'pen') {
+				brush_size *= event.pressure;
+				this.last_pressure = event.pressure;
+			}
+			else if(event instanceof TouchEvent && diff < 20){
+				// The firing interval of PointerEvents in Pen is unreliable, so it is supplemented by TouchEvents.
+				brush_size *= this.last_pressure;
+			}
+			else {
+				brush_size = this.brush_size;
+			}
+
+			if(diff > 20 && !this.drawing_mode)
+				requestAnimationFrame(() => {
+					self.maskCtx.beginPath();
+					self.maskCtx.fillStyle = "rgb(0,0,0)";
+					self.maskCtx.globalCompositeOperation = "source-over";
+					self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
+					self.maskCtx.fill();
+					self.lastx = x;
+					self.lasty = y;
+				});
+			else
+				requestAnimationFrame(() => {
+					self.maskCtx.beginPath();
+					self.maskCtx.fillStyle = "rgb(0,0,0)";
+					self.maskCtx.globalCompositeOperation = "source-over";
+
+					var dx = x - self.lastx;
+					var dy = y - self.lasty;
+
+					var distance = Math.sqrt(dx * dx + dy * dy);
+					var directionX = dx / distance;
+					var directionY = dy / distance;
+
+					for (var i = 0; i < distance; i+=5) {
+						var px = self.lastx + (directionX * i);
+						var py = self.lasty + (directionY * i);
+						self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false);
+						self.maskCtx.fill();
+					}
+					self.lastx = x;
+					self.lasty = y;
+				});
+
+			self.lasttime = performance.now();
+		}
+		else if(event.buttons == 2 || event.buttons == 5 || event.buttons == 32) {
+			const maskRect = self.maskCanvas.getBoundingClientRect();
+			const x = event.offsetX || event.targetTouches[0].clientX - maskRect.left;
+			const y = event.offsetY || event.targetTouches[0].clientY - maskRect.top;
+
+			var brush_size = this.brush_size;
+			if(event instanceof PointerEvent && event.pointerType == 'pen') {
+				brush_size *= event.pressure;
+				this.last_pressure = event.pressure;
+			}
+			else if(event instanceof TouchEvent && diff < 20){
+				brush_size *= this.last_pressure;
+			}
+			else {
+				brush_size = this.brush_size;
+			}
+
+			if(diff > 20 && !drawing_mode) // cannot tracking drawing_mode for touch event
+				requestAnimationFrame(() => {
+					self.maskCtx.beginPath();
+					self.maskCtx.globalCompositeOperation = "destination-out";
+					self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
+					self.maskCtx.fill();
+					self.lastx = x;
+					self.lasty = y;
+				});
+			else
+				requestAnimationFrame(() => {
+					self.maskCtx.beginPath();
+					self.maskCtx.globalCompositeOperation = "destination-out";
+					
+					var dx = x - self.lastx;
+					var dy = y - self.lasty;
+
+					var distance = Math.sqrt(dx * dx + dy * dy);
+					var directionX = dx / distance;
+					var directionY = dy / distance;
+
+					for (var i = 0; i < distance; i+=5) {
+						var px = self.lastx + (directionX * i);
+						var py = self.lasty + (directionY * i);
+						self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false);
+						self.maskCtx.fill();
+					}
+					self.lastx = x;
+					self.lasty = y;
+				});
+
+				self.lasttime = performance.now();
+		}
+	}
+
+	handlePointerDown(self, event) {
+		var brush_size = this.brush_size;
+		if(event instanceof PointerEvent && event.pointerType == 'pen') {
+			brush_size *= event.pressure;
+			this.last_pressure = event.pressure;
+		}
+
+		if ([0, 2, 5].includes(event.button)) {
+			self.drawing_mode = true;
+
+			event.preventDefault();
+			const maskRect = self.maskCanvas.getBoundingClientRect();
+			const x = event.offsetX || event.targetTouches[0].clientX - maskRect.left;
+			const y = event.offsetY || event.targetTouches[0].clientY - maskRect.top;
+
+			self.maskCtx.beginPath();
+			if (event.button == 0) {
+				self.maskCtx.fillStyle = "rgb(0,0,0)";
+				self.maskCtx.globalCompositeOperation = "source-over";
+			} else {
+				self.maskCtx.globalCompositeOperation = "destination-out";
+			}
+			self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
+			self.maskCtx.fill();
+			self.lastx = x;
+			self.lasty = y;
+			self.lasttime = performance.now();
+		}
+	}
+
+	save() {
+		const backupCtx = this.backupCanvas.getContext('2d', {willReadFrequently:true});
+
+		backupCtx.clearRect(0,0,this.backupCanvas.width,this.backupCanvas.height);
+		backupCtx.drawImage(this.maskCanvas,
+			0, 0, this.maskCanvas.width, this.maskCanvas.height,
+			0, 0, this.backupCanvas.width, this.backupCanvas.height);
+
+		// paste mask data into alpha channel
+		const backupData = backupCtx.getImageData(0, 0, this.backupCanvas.width, this.backupCanvas.height);
+
+		// refine mask image
+		for (let i = 0; i < backupData.data.length; i += 4) {
+			if(backupData.data[i+3] == 255)
+				backupData.data[i+3] = 0;
+			else
+				backupData.data[i+3] = 255;
+
+			backupData.data[i] = 0;
+			backupData.data[i+1] = 0;
+			backupData.data[i+2] = 0;
+		}
+
+		backupCtx.globalCompositeOperation = 'source-over';
+		backupCtx.putImageData(backupData, 0, 0);
+
+		const formData = new FormData();
+		const filename = "clipspace-mask-" + performance.now() + ".png";
+
+		const item =
+			{
+				"filename": filename,
+				"subfolder": "",
+				"type": "clipspace",
+			};
+
+		if(ComfyApp.clipspace.images)
+			ComfyApp.clipspace.images[0] = item;
+
+		if(ComfyApp.clipspace.widgets) {
+			const index = ComfyApp.clipspace.widgets.findIndex(obj => obj.name === 'image');
+
+			if(index >= 0)
+				ComfyApp.clipspace.widgets[index].value = item;
+		}
+
+		const dataURL = this.backupCanvas.toDataURL();
+		const blob = dataURLToBlob(dataURL);
+
+		const original_blob = loadedImageToBlob(this.image);
+
+		formData.append('image', blob, filename);
+		formData.append('original_image', original_blob);
+		formData.append('type', "clipspace");
+
+		uploadMask(item, formData);
+		this.close();
+	}
+}
+
+app.registerExtension({
+	name: "Comfy.MaskEditor",
+	init(app) {
+		const callback =
+			function () {
+				let dlg = new MaskEditorDialog(app);
+				dlg.show();
+			};
+
+		const context_predicate = () => ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0
+		ClipspaceDialog.registerButton("MaskEditor", context_predicate, callback);
+	}
+});
\ No newline at end of file
diff --git a/web/scripts/app.js b/web/scripts/app.js
index 24560548..f4f7272d 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -25,6 +25,7 @@ export class ComfyApp {
 	 * @type {serialized node object}
 	 */
 	static clipspace = null;
+	static clipspace_invalidate_handler = null;
 
 	constructor() {
 		this.ui = new ComfyUI(this);
@@ -143,22 +144,34 @@ export class ComfyApp {
 					callback: (obj) => {
 						var widgets = null;
 						if(this.widgets) {
-						    widgets = this.widgets.map(({ type, name, value }) => ({ type, name, value }));
+							widgets = this.widgets.map(({ type, name, value }) => ({ type, name, value }));
 						}
 						
-						let img = new Image();
 						var imgs = undefined;
+						var orig_imgs = undefined;
 						if(this.imgs != undefined) {
-							img.src = this.imgs[0].src;
-							imgs = [img];
+							imgs = [];
+							orig_imgs = [];
+
+							for (let i = 0; i < this.imgs.length; i++) {
+								imgs[i] = new Image();
+								imgs[i].src = this.imgs[i].src;
+								orig_imgs[i] = imgs[i];
+							}
 						}
 
 						ComfyApp.clipspace = {
 							'widgets': widgets,
 							'imgs': imgs,
-							'original_imgs': imgs,
-							'images': this.images
+							'original_imgs': orig_imgs,
+							'images': this.images,
+							'selectedIndex': 0,
+							'img_paste_mode': 'selected' // reset to default im_paste_mode state on copy action
 							};
+
+						if(ComfyApp.clipspace_invalidate_handler) {
+							ComfyApp.clipspace_invalidate_handler();
+						}
 					}
 				});
 
@@ -167,48 +180,82 @@ export class ComfyApp {
 					{
 						content: "Paste (Clipspace)",
 						callback: () => {
-							if(ComfyApp.clipspace != null) {
-								if(ComfyApp.clipspace.widgets != null && this.widgets != null) {
-									ComfyApp.clipspace.widgets.forEach(({ type, name, value }) => {
-										const prop = Object.values(this.widgets).find(obj => obj.type === type && obj.name === name);
-											if (prop) {
-												prop.callback(value);
-											}
-									});
-								}
-
+							if(ComfyApp.clipspace) {
 								// image paste
-								if(ComfyApp.clipspace.imgs != undefined && this.imgs != undefined && this.widgets != null) {
+								if(ComfyApp.clipspace.imgs && this.imgs) {
 									var filename = "";
 									if(this.images && ComfyApp.clipspace.images) {
-										this.images = ComfyApp.clipspace.images;
+										if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
+											app.nodeOutputs[this.id + ""].images = this.images = [ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]];
+
+										}
+										else
+											app.nodeOutputs[this.id + ""].images = this.images = ComfyApp.clipspace.images;
 									}
 
-									if(ComfyApp.clipspace.images != undefined) {
-										const clip_image = ComfyApp.clipspace.images[0];
+									if(ComfyApp.clipspace.imgs) {
+										// deep-copy to cut link with clipspace
+										if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
+												const img = new Image();
+												img.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
+												this.imgs = [img];
+										}
+										else {
+											const imgs = [];
+											for(let i=0; i<ComfyApp.clipspace.imgs.length; i++) {
+												imgs[i] = new Image();
+												imgs[i].src = ComfyApp.clipspace.imgs[i].src;
+												this.imgs = imgs;
+											}
+										}
+									}
+
+									if(ComfyApp.clipspace.images) {
+										const clip_image = ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']];
 										if(clip_image.subfolder != '')
 											filename = `${clip_image.subfolder}/`;
 										filename += `${clip_image.filename} [${clip_image.type}]`;
 									}
-									else if(ComfyApp.clipspace.widgets != undefined) {
+									else if(ComfyApp.clipspace.widgets) {
 										const index_in_clip = ComfyApp.clipspace.widgets.findIndex(obj => obj.name === 'image');
 										if(index_in_clip >= 0) {
-											filename = `${ComfyApp.clipspace.widgets[index_in_clip].value}`;
+											const item = ComfyApp.clipspace.widgets[index_in_clip].value;
+											if(item.type)
+												filename = `${item.filename} [${item.type}]`;
+											else
+												filename = item.filename;
 										}
 									}
 
-									const index = this.widgets.findIndex(obj => obj.name === 'image');
-									if(index >= 0 && filename != "" && ComfyApp.clipspace.imgs != undefined) {
-										this.imgs = ComfyApp.clipspace.imgs;
+									// for Load Image node.
+									if(this.widgets) {
+										const index = this.widgets.findIndex(obj => obj.name === 'image');
+										if(index >= 0 && filename != "") {
+											const postfix = ' [clipspace]';
+											if(filename.endsWith(postfix) && this.widgets[index].options.base_dir == 'input') {
+												filename = "clipspace/" + filename.slice(0, filename.indexOf(postfix));
+											}
 
-										this.widgets[index].value = filename;
-										if(this.widgets_values != undefined) {
-											this.widgets_values[index] = filename;
+											this.widgets[index].value = filename;
+											if(this.widgets_values != undefined) {
+												this.widgets_values[index] = filename;
+											}
 										}
 									}
 								}
-								this.trigger('changed');
+
+								// ensure render after update widget_value
+								if(ComfyApp.clipspace.widgets && this.widgets) {
+									ComfyApp.clipspace.widgets.forEach(({ type, name, value }) => {
+										const prop = Object.values(this.widgets).find(obj => obj.type === type && obj.name === name);
+											if (prop && prop.type != 'button') {
+												prop.callback(value);
+											}
+									});
+								}
 							}
+
+							app.graph.setDirtyCanvas(true);
 						}
 					}
 				);
@@ -1275,12 +1322,17 @@ export class ComfyApp {
 
 			for(const widgetNum in node.widgets) {
 				const widget = node.widgets[widgetNum]
-
 				if(widget.type == "combo" && def["input"]["required"][widget.name] !== undefined) {
-					widget.options.values = def["input"]["required"][widget.name][0];
+					if(def["input"]["required"][widget.name][0] == "FILE_COMBO") {
+						console.log(widget.options.values = def["input"]["required"][widget.name][1].files);
+						widget.options.values = def["input"]["required"][widget.name][1].files;
+					}
+					else
+						widget.options.values = def["input"]["required"][widget.name][0];
 
 					if(!widget.options.values.includes(widget.value)) {
 						widget.value = widget.options.values[0];
+						widget.callback(widget.value);
 					}
 				}
 			}
diff --git a/web/scripts/ui.js b/web/scripts/ui.js
index 5accc9d8..77517aec 100644
--- a/web/scripts/ui.js
+++ b/web/scripts/ui.js
@@ -581,6 +581,7 @@ export class ComfyUI {
 			}),
 			$el("button", { id: "comfy-load-button", textContent: "Load", onclick: () => fileInput.click() }),
 			$el("button", { id: "comfy-refresh-button", textContent: "Refresh", onclick: () => app.refreshComboInNodes() }),
+			$el("button", { id: "comfy-clipspace-button", textContent: "Clipspace", onclick: () => app.openClipspace() }),
 			$el("button", { id: "comfy-clear-button", textContent: "Clear", onclick: () => {
 				if (!confirmClear.value || confirm("Clear workflow?")) {
 					app.clean();
diff --git a/web/scripts/widgets.js b/web/scripts/widgets.js
index cd471bc9..4a72246d 100644
--- a/web/scripts/widgets.js
+++ b/web/scripts/widgets.js
@@ -256,6 +256,20 @@ export const ComfyWidgets = {
 		}
 		return { widget: node.addWidget("combo", inputName, defaultValue, () => {}, { values: type }) };
 	},
+	FILE_COMBO(node, inputName, inputData) {
+		const base_dir = inputData[1].base_dir;
+		let defaultValue = inputData[1].files[0];
+
+		const files = []
+		for(let i in inputData[1].files) {
+			files[i] = inputData[1].files[i];
+			const postfix = ' [clipspace]';
+			if(base_dir == 'input' && files[i].endsWith(postfix))
+				files[i] = "clipspace/" + files[i].slice(0, files[i].indexOf(postfix));
+		}
+
+		return { widget: node.addWidget("combo", inputName, defaultValue, () => {}, { base_dir:base_dir, values: files }) };
+	},
 	IMAGEUPLOAD(node, inputName, inputData, app) {
 		const imageWidget = node.widgets.find((w) => w.name === "image");
 		let uploadWidget;