jinx/ComfyUI
1
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2025-08-02 23:14:49 +08:00
Code Issues Activity

Clipspace Menu and MaskEditor application. (#548)

Browse Source 
* Add clipspace feature.
* feat: copy content to clipspace
* feat: paste content from clipspace

Extend validation to allow for validating annotated_path in addition to other parameters.

Add support for annotated_filepath in folder_paths function.

Generalize the '/upload/image' API to allow for uploading images to the 'input', 'temp', or 'output' directories.

* rename contentClipboard -> clipspace

* Do deep copy for imgs on copy to clipspace.

* mask painting on clipspace

* add original_imgs into clipspace
* Preserve the original image when 'imgs' are modified

* robust patch & refactoring folder_paths about annotated_filepath

* wip

* Only show the Paste menu if the ComfyApp.clipspace is not empty

* clipspace feature added
maskeditor feature added

* instant refresh on paste

force triggering 'changed' on paste action

* enhance mask painting

smooth drawing
add brush_size +/- button

* robust patch

use mouseup event

* robust patch

again...

* subfolder fix on paste logic

attach subfolder if subfolder isn't empty

* event listener patch

add ], [ key event for brush size
remove listener on close

* Fix button positioning issue related to window height.
Change brush size from button to slider.

* clean commit

* clean code

* various bug fixes

* paste action
- prevent opening upload popup
- ensure rendering after widget_value update

* view api update
- support annotated_filepath

* maskeditor layout
- prevent covering button by hidden div

* remove dbg message

* Add cursor functionality to display brush size

* refactor: Replace brush preview feature with missionfloyd implementation

* missionfloyd implementation
* hiding brush preview off the canvas
* change brush size on wheel event

* keyup -> keydown event

* Update web/extensions/core/maskeditor.js

Co-authored-by: missionfloyd <missionfloyd@users.noreply.github.com>

* Add support for channel-specific image data retrieval in /view API to fix alpha mask loading issue

When loading an image with an alpha mask in JavaScript canvas, there is an issue where the alpha and RGB channels are premultiplied. To avoid reliance on JavaScript canvas, I added support for channel-specific image data retrieval in the "/view" API. This allows us to retrieve data for each channel separately and fix the alpha mask loading issue. The changes have been committed to the repository.

* Enable brush preview for key and slider events

* optimize

* preview fix

* robust patch

* fix copy (clipspace) action
imgs[0] copy -> whole imgs copy

* support batch images on clipspace, maskeditor

* copy/paste bug fixes for batch images
enhance selector preview on clipspace menu
add img_paste_mode option into clipspace menu

* crash fix

* print message if clipspace content cannot editable

* Update web/extensions/core/maskeditor.js

Co-authored-by: missionfloyd <missionfloyd@users.noreply.github.com>

* make default img_paste_mode to 'selected'

refactor space -> tab

* save clipspace files to input/clipspace instead of temp

* show "clipspace/filename.png" instead of 'filename.png [clipspace]' in LoadImage/LoadImageMask

* refresh fix related to FILE_COMBO

* Update web/extensions/core/maskeditor.js

Co-authored-by: missionfloyd <missionfloyd@users.noreply.github.com>

* Update web/extensions/core/maskeditor.js

Co-authored-by: missionfloyd <missionfloyd@users.noreply.github.com>

* adjust margin based on missionfloyd impelements

* mouse event -> pointer event

* pen, touch, mouse drawing patched and tested

* Update web/extensions/core/maskeditor.js

Co-authored-by: missionfloyd <missionfloyd@users.noreply.github.com>

* add comment about touch event.

---------

Co-authored-by: Lt.Dr.Data <lt.dr.data@gmail.com>
Co-authored-by: missionfloyd <missionfloyd@users.noreply.github.com>
This commit is contained in:
Dr.Lt.Data
2023-05-09 03:37:36 +09:00
committed by GitHub
parent a1f12e370d
commit ae08fdb999
8 changed files with 976 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
server.py
View File

@@ -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")