wangbo/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2026-02-10 05:22:34 +08:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

support batch images on clipspace, maskeditor

Browse Source
This commit is contained in:
ltdrdata 2023-04-28 21:47:16 +09:00
parent 1ce7350304
commit 8d454f4785
3 changed files with 51 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/extensions/core/clipspace.js
View File

@ -17,11 +17,20 @@ export class ClipspaceDialog extends ComfyDialog {
ClipspaceDialog.items.push(item);
}
static invalidatePreview() {
const img_preview = document.getElementById("clipspace_preview");
img_preview.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
img_preview.style.height = "100px";
}
constructor() {
super();
this.element =
$el("div.comfy-modal", { parent: document.body },
[$el("div.comfy-modal-content",[...this.createButtons()]),]
[$el("div.comfy-modal-content",[
this.createImgSelector(),
this.createImgPreview(),
...this.createButtons()]),]
);
}
@ -47,8 +56,41 @@ export class ClipspaceDialog extends ComfyDialog {
return buttons;
}
createImgSelector() {
if(ComfyApp.clipspace.imgs != undefined) {
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 combo = $el("select",
{id:"clipspace_img_selector", onchange:(event) => {
ComfyApp.clipspace['selectedIndex'] = event.target.selectedIndex;
ClipspaceDialog.invalidatePreview();
} }, combo_items);
return combo;
}
else {
return [];
}
}
createImgPreview() {
if(ComfyApp.clipspace.imgs != undefined) {
return $el("img",{id:"clipspace_preview"});
}
else
return [];
}
show() {
ClipspaceDialog.is_opened = true;
const img_preview = document.getElementById("clipspace_preview");
img_preview.src = ComfyApp.clipspace.imgs[0].src;
img_preview.style.height = "100px";
this.element.style.display = "block";
}
}

10
web/extensions/core/maskeditor.js
View File

@ -40,9 +40,11 @@ async function uploadMask(filepath, formData) {
console.error('Error:', error);
});
ComfyApp.clipspace.imgs[0] = new Image();
ComfyApp.clipspace.imgs[0].src = `view?filename=${filepath.filename}&type=${filepath.type}`;
ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']] = new Image();
ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src = `view?filename=${filepath.filename}&type=${filepath.type}`;
ComfyApp.clipspace.images = [filepath];
ClipspaceDialog.invalidatePreview();
}
function prepareRGB(image, backupCanvas, backupCtx) {
@ -276,7 +278,7 @@ class MaskEditorDialog extends ComfyDialog {
prepareRGB(touched_image, backupCanvas, backupCtx);
};
const alpha_url = new URL(ComfyApp.clipspace.imgs[0].src)
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;
@ -286,7 +288,7 @@ class MaskEditorDialog extends ComfyDialog {
window.dispatchEvent(new Event('resize'));
};
const rgb_url = new URL(ComfyApp.clipspace.imgs[0].src);
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;

3
web/scripts/app.js
View File

@ -163,7 +163,8 @@ export class ComfyApp {
'widgets': widgets,
'imgs': imgs,
'original_imgs': orig_imgs,
'images': this.images
'images': this.images,
'selectedIndex': 0
};
}
});