Integrate klecks
This commit is contained in:
space-nuko
239
src/lib/components/ImageUpload.svelte
Normal file
239
src/lib/components/ImageUpload.svelte
Normal file
@@ -0,0 +1,239 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { Block, BlockLabel, Empty } from "@gradio/atoms";
|
||||
import { File as FileIcon } from "@gradio/icons";
|
||||
import { ModifyUpload, Upload, blobToBase64, normalise_file } from "@gradio/upload";
|
||||
import type { FileData as GradioFileData } from "@gradio/upload";
|
||||
import UploadText from "$lib/components/gradio/app/UploadText.svelte";
|
||||
import { tick } from "svelte";
|
||||
import notify from "$lib/notify";
|
||||
import type { ComfyUploadImageAPIResponse } from "$lib/utils";
|
||||
|
||||
export let value: GradioFileData[] | null = null;
|
||||
export let isMobile: boolean = false;
|
||||
export let imgWidth: number = 0;
|
||||
export let imgHeight: number = 0;
|
||||
export let imgElem: HTMLImageElement | null = null
|
||||
export let fileCount: "single" | "multiple" = "single"
|
||||
export let elem_classes: string[] = []
|
||||
export let style: string = ""
|
||||
export let label: string = ""
|
||||
// let propsChanged: Writable<number> | null = null;
|
||||
let dragging = false;
|
||||
let pending_upload = false;
|
||||
let old_value: Array<GradioFileData> | null = null;
|
||||
|
||||
let _value: GradioFileData[] | null = null;
|
||||
const root = "comf"
|
||||
const root_url = "https//ComfyUI!"
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
change: GradioFileData[];
|
||||
upload: undefined;
|
||||
clear: undefined;
|
||||
}>();
|
||||
|
||||
$: _value = normalise_file(value, root, root_url);
|
||||
|
||||
$: if (!(_value && _value.length > 0 && imgElem)) {
|
||||
imgWidth = 1
|
||||
imgHeight = 1
|
||||
}
|
||||
|
||||
function onChange() {
|
||||
value = _value || []
|
||||
dispatch("change", value)
|
||||
}
|
||||
|
||||
function onUpload() {
|
||||
dispatch("upload")
|
||||
}
|
||||
|
||||
function onClear() {
|
||||
dispatch("clear")
|
||||
}
|
||||
|
||||
interface GradioUploadResponse {
|
||||
error?: string;
|
||||
files?: Array<string>;
|
||||
}
|
||||
|
||||
async function upload_files(root: string, files: Array<File>): Promise<GradioUploadResponse> {
|
||||
console.debug("UPLOADILFES", root, files);
|
||||
|
||||
const url = `http://${location.hostname}:8188` // TODO make configurable
|
||||
|
||||
const requests = files.map(async (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append("image", file, file.name);
|
||||
return fetch(new Request(url + "/upload/image", {
|
||||
body: formData,
|
||||
method: 'POST'
|
||||
}))
|
||||
.then(r => r.json())
|
||||
.catch(error => error);
|
||||
});
|
||||
|
||||
return Promise.all(requests)
|
||||
.then( (results) => {
|
||||
const errors = []
|
||||
const files = []
|
||||
|
||||
for (const r of results) {
|
||||
if (r instanceof Error) {
|
||||
errors.push(r.cause)
|
||||
}
|
||||
else {
|
||||
// bare filename of image
|
||||
files.push((r as ComfyUploadImageAPIResponse).name)
|
||||
}
|
||||
}
|
||||
|
||||
let error = null;
|
||||
if (errors && errors.length > 0)
|
||||
error = "Upload error(s):\n" + errors.join("\n");
|
||||
|
||||
return { error, files }
|
||||
})
|
||||
}
|
||||
|
||||
$: {
|
||||
if (JSON.stringify(_value) !== JSON.stringify(old_value)) {
|
||||
pending_upload = true;
|
||||
|
||||
old_value = _value;
|
||||
|
||||
if (_value == null)
|
||||
_value = []
|
||||
else if (!Array.isArray(_value))
|
||||
_value = [_value]
|
||||
|
||||
const allBlobs = _value.map((file_data: GradioFileData) => file_data.blob)
|
||||
|
||||
if (allBlobs == null || allBlobs.length === 0) {
|
||||
_value = null;
|
||||
onChange();
|
||||
pending_upload = false;
|
||||
}
|
||||
else if (!allBlobs.every(b => b != null)) {
|
||||
_value = null;
|
||||
pending_upload = false;
|
||||
}
|
||||
else {
|
||||
let files = (Array.isArray(_value) ? _value : [_value]).map(
|
||||
(file_data) => file_data.blob!
|
||||
);
|
||||
let upload_value = _value;
|
||||
pending_upload = true;
|
||||
upload_files(root, files).then((response) => {
|
||||
if (JSON.stringify(upload_value) !== JSON.stringify(_value)) {
|
||||
// value has changed since upload started
|
||||
console.error("[ImageUpload] value has changed since upload started", upload_value, _value)
|
||||
return;
|
||||
}
|
||||
|
||||
pending_upload = false;
|
||||
_value.forEach(
|
||||
(file_data: GradioFileData, i: number) => {
|
||||
if (response.files) {
|
||||
file_data.orig_name = file_data.name;
|
||||
file_data.name = response.files[i];
|
||||
file_data.is_file = true;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (response.error) {
|
||||
notify(response.error, { type: "error" })
|
||||
}
|
||||
|
||||
value = normalise_file(_value, root, root_url) as GradioFileData[];
|
||||
onChange();
|
||||
onUpload();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_upload({ detail }: CustomEvent<GradioFileData | Array<GradioFileData>>) {
|
||||
_value = Array.isArray(detail) ? detail : [detail];
|
||||
await tick();
|
||||
onChange();
|
||||
onUpload();
|
||||
}
|
||||
|
||||
function handle_clear(_e: CustomEvent<null>) {
|
||||
_value = null;
|
||||
onChange();
|
||||
onClear();
|
||||
}
|
||||
|
||||
function getImageUrl(image: GradioFileData) {
|
||||
const baseUrl = `http://${location.hostname}:8188` // TODO make configurable
|
||||
const params = new URLSearchParams({ filename: image.name, subfolder: "", type: "input" })
|
||||
return `${baseUrl}/view?${params}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="image-upload" {style}>
|
||||
{#if value}
|
||||
<Block
|
||||
visible={true}
|
||||
variant={(value === null || value.length === 0) ? "dashed" : "solid"}
|
||||
border_mode={dragging ? "focus" : "base"}
|
||||
padding={true}
|
||||
elem_id="comfy-image-upload-block"
|
||||
{elem_classes}
|
||||
>
|
||||
<BlockLabel
|
||||
label={label}
|
||||
show_label={label != ""}
|
||||
Icon={FileIcon}
|
||||
float={label != ""}
|
||||
/>
|
||||
{#if _value && _value.length > 0 && !pending_upload}
|
||||
{@const firstImage = _value[0]}
|
||||
<ModifyUpload on:clear={handle_clear} absolute />
|
||||
<img src={getImageUrl(firstImage)}
|
||||
alt={firstImage.orig_name}
|
||||
bind:this={imgElem}
|
||||
bind:naturalWidth={imgWidth}
|
||||
bind:naturalHeight={imgHeight}
|
||||
/>
|
||||
{:else}
|
||||
<Upload
|
||||
file_count={fileCount}
|
||||
filetype="image/*"
|
||||
on:change={({ detail }) => (value = detail)}
|
||||
on:load={handle_upload}
|
||||
bind:dragging
|
||||
on:clear
|
||||
on:select
|
||||
parse_to_data_url={false}
|
||||
>
|
||||
<UploadText type="file" />
|
||||
</Upload>
|
||||
{/if}
|
||||
</Block>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.image-upload {
|
||||
height: var(--size-96);
|
||||
|
||||
:global(.block) {
|
||||
height: inherit;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,22 +1,33 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
export let showModal; // boolean
|
||||
|
||||
let dialog; // HTMLDialogElement
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
close: undefined;
|
||||
}>();
|
||||
|
||||
$: if (dialog && showModal) dialog.showModal();
|
||||
|
||||
function close() {
|
||||
dialog.close();
|
||||
dispatch("close")
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<dialog
|
||||
bind:this={dialog}
|
||||
on:close={() => (showModal = false)}
|
||||
on:click|self={() => dialog.close()}
|
||||
on:close={close}
|
||||
on:click|self={close}
|
||||
>
|
||||
<div on:click|stopPropagation>
|
||||
<slot name="header" />
|
||||
<slot />
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<button autofocus on:click={() => dialog.close()}>Close</button>
|
||||
<button autofocus on:click={close}>Close</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ import ButtonWidget from "$lib/widgets/ButtonWidget.svelte";
|
||||
import CheckboxWidget from "$lib/widgets/CheckboxWidget.svelte";
|
||||
import RadioWidget from "$lib/widgets/RadioWidget.svelte";
|
||||
import ImageUploadWidget from "$lib/widgets/ImageUploadWidget.svelte";
|
||||
import ImageCompareWidget from "$lib/widgets/ImageCompareWidget.svelte";
|
||||
import ImageEditorWidget from "$lib/widgets/ImageEditorWidget.svelte";
|
||||
|
||||
export type AutoConfigOptions = {
|
||||
includeProperties?: Set<string> | null,
|
||||
@@ -33,7 +33,7 @@ export type AutoConfigOptions = {
|
||||
* - Go to layoutState, look for `ALL_ATTRIBUTES,` insert or find a "variant"
|
||||
* attribute and set `validNodeTypes` to the type of the litegraph node
|
||||
* - Add a new entry in the `values` array, like "knob" or "dial" for ComfySliderWidget
|
||||
* - Add an {#if widget.attrs.variant === <...>} statement in the corresponding Svelte component
|
||||
* - Add an {#if widget.attrs.variant === <...>} statement in the existing Svelte component
|
||||
*
|
||||
* Also, BEWARE of calling setOutputData() and triggerSlot() on the same frame!
|
||||
* You will have to either implement an internal delay on the event triggering
|
||||
@@ -965,80 +965,59 @@ LiteGraph.registerNodeType({
|
||||
type: "ui/image_upload"
|
||||
})
|
||||
|
||||
export interface ComfyImageCompareNodeProperties extends ComfyWidgetProperties {
|
||||
export type FileNameOrGalleryData = string | GalleryOutputEntry;
|
||||
export type MultiImageData = FileNameOrGalleryData[];
|
||||
|
||||
export interface ComfyImageEditorNodeProperties extends ComfyWidgetProperties {
|
||||
}
|
||||
|
||||
export type FileNameOrGalleryData = string | GalleryOutputEntry;
|
||||
export type ImageCompareData = [FileNameOrGalleryData, FileNameOrGalleryData]
|
||||
|
||||
export class ComfyImageCompareNode extends ComfyWidgetNode<ImageCompareData> {
|
||||
override properties: ComfyImageCompareNodeProperties = {
|
||||
export class ComfyImageEditorNode extends ComfyWidgetNode<MultiImageData> {
|
||||
override properties: ComfyImageEditorNodeProperties = {
|
||||
defaultValue: [],
|
||||
tags: [],
|
||||
}
|
||||
|
||||
static slotLayout: SlotLayout = {
|
||||
inputs: [
|
||||
{ name: "store", type: BuiltInSlotType.ACTION },
|
||||
{ name: "left_image", type: "string" },
|
||||
{ name: "right_image", type: "string" },
|
||||
{ name: "store", type: BuiltInSlotType.ACTION }
|
||||
],
|
||||
outputs: [
|
||||
]
|
||||
}
|
||||
|
||||
override svelteComponentType = ImageCompareWidget;
|
||||
override defaultValue: ImageCompareData = ["", ""];
|
||||
override svelteComponentType = ImageEditorWidget;
|
||||
override defaultValue: MultiImageData = [];
|
||||
override outputIndex = null;
|
||||
override changedIndex = 3;
|
||||
override changedIndex = null;
|
||||
override storeActionName = "store";
|
||||
override saveUserState = false;
|
||||
|
||||
constructor(name?: string) {
|
||||
super(name, ["", ""])
|
||||
super(name, [])
|
||||
}
|
||||
|
||||
override onExecute() {
|
||||
const valueA = this.getInputData(1)
|
||||
const valueB = this.getInputData(2)
|
||||
let current = get(this.value)
|
||||
let changed = false;
|
||||
if (valueA != null && current[0] != valueA) {
|
||||
current[0] = valueA
|
||||
changed = true;
|
||||
}
|
||||
if (valueB != null && current[1] != valueB) {
|
||||
current[1] = valueB
|
||||
changed = true;
|
||||
}
|
||||
if (changed)
|
||||
this.value.set(current)
|
||||
}
|
||||
_value = null;
|
||||
|
||||
override parseValue(value: any): ImageCompareData {
|
||||
override parseValue(value: any): MultiImageData {
|
||||
if (value == null) {
|
||||
return ["", ""]
|
||||
return []
|
||||
}
|
||||
else if (typeof value === "string" && value !== "") { // Single filename
|
||||
const prevValue = get(this.value)
|
||||
prevValue.push(value)
|
||||
if (prevValue.length > 2)
|
||||
prevValue.splice(0, 1)
|
||||
return prevValue as ImageCompareData
|
||||
return prevValue as MultiImageData
|
||||
}
|
||||
else if (typeof value === "object" && "images" in value && value.images.length > 0) {
|
||||
const output = value as GalleryOutput
|
||||
const prevValue = get(this.value)
|
||||
prevValue.push(output.images[0].filename)
|
||||
if (prevValue.length > 2)
|
||||
prevValue.splice(0, 1)
|
||||
return prevValue as ImageCompareData
|
||||
return [value]
|
||||
}
|
||||
else if (Array.isArray(value) && typeof value[0] === "string" && typeof value[1] === "string") {
|
||||
return value as ImageCompareData
|
||||
else if (Array.isArray(value) && value.every(s => typeof s === "string")) {
|
||||
return value as MultiImageData
|
||||
}
|
||||
else {
|
||||
return ["", ""]
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1048,8 +1027,8 @@ export class ComfyImageCompareNode extends ComfyWidgetNode<ImageCompareData> {
|
||||
}
|
||||
|
||||
LiteGraph.registerNodeType({
|
||||
class: ComfyImageCompareNode,
|
||||
title: "UI.ImageCompare",
|
||||
desc: "Widget that lets you compare two images",
|
||||
type: "ui/image_compare"
|
||||
class: ComfyImageEditorNode,
|
||||
title: "UI.ImageEditor",
|
||||
desc: "Widget that lets edit a multi-layered image",
|
||||
type: "ui/image_editor"
|
||||
})
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { type WidgetLayout } from "$lib/stores/layoutState";
|
||||
import { Block } from "@gradio/atoms";
|
||||
import ImageComparison from "$lib/components/ImageComparison.svelte";
|
||||
import { get, type Writable, writable } from "svelte/store";
|
||||
import { isDisabled } from "./utils"
|
||||
import type { SelectData } from "@gradio/utils";
|
||||
import type { ComfyImageCompareNode, ImageCompareData } from "$lib/nodes/ComfyWidgetNodes";
|
||||
import { convertFilenameToComfyURL } from "$lib/utils";
|
||||
import { TabItem, Tabs } from "@gradio/tabs";
|
||||
|
||||
export let widget: WidgetLayout | null = null;
|
||||
export let isMobile: boolean = false;
|
||||
let node: ComfyImageCompareNode | null = null;
|
||||
let nodeValue: Writable<ImageCompareData> | null = null;
|
||||
let attrsChanged: Writable<number> | null = null;
|
||||
let leftUrl: string = ""
|
||||
let rightUrl: string = ""
|
||||
|
||||
$: widget && setNodeValue(widget);
|
||||
|
||||
function setNodeValue(widget: WidgetLayout) {
|
||||
if (widget) {
|
||||
node = widget.node as ComfyImageCompareNode
|
||||
nodeValue = node.value;
|
||||
attrsChanged = widget.attrsChanged;
|
||||
}
|
||||
};
|
||||
|
||||
const urlPattern = /^((http|https|ftp):\/\/)/;
|
||||
|
||||
$: updateUrls($nodeValue);
|
||||
|
||||
function updateUrls(value: ImageCompareData) {
|
||||
leftUrl = ""
|
||||
rightUrl = ""
|
||||
console.warn("UPD", value)
|
||||
|
||||
if (typeof value[0] === "string") {
|
||||
if (urlPattern.test(value[0]))
|
||||
leftUrl = value[0]
|
||||
else
|
||||
leftUrl = convertFilenameToComfyURL(value[0])
|
||||
}
|
||||
if (typeof value[1] === "string") {
|
||||
if (urlPattern.test(value[1]))
|
||||
rightUrl = value[1]
|
||||
else
|
||||
rightUrl = convertFilenameToComfyURL(value[1])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="wrapper comfy-compare-widget">
|
||||
<Block>
|
||||
<Tabs elem_classes={["gradio-tabs"]}>
|
||||
<TabItem name="Slider">
|
||||
<ImageComparison>
|
||||
{#if leftUrl && leftUrl != ""}
|
||||
{@const props = { slot: "first" }}
|
||||
<img {...props} alt="Left" src={leftUrl} />
|
||||
{/if}
|
||||
{#if rightUrl && leftUrl != ""}
|
||||
{@const props = { slot: "second" }}
|
||||
<img {...props} alt="Right" src={rightUrl} />
|
||||
{/if}
|
||||
</ImageComparison>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.comfy-compare-widget {
|
||||
max-width: 40rem;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
148
src/lib/widgets/ImageEditorWidget.svelte
Normal file
148
src/lib/widgets/ImageEditorWidget.svelte
Normal file
@@ -0,0 +1,148 @@
|
||||
<script lang="ts">
|
||||
import { type WidgetLayout } from "$lib/stores/layoutState";
|
||||
import { Block, BlockTitle } from "@gradio/atoms";
|
||||
import { get, type Writable, writable } from "svelte/store";
|
||||
import Modal from "$lib/components/Modal.svelte";
|
||||
import { Button } from "@gradio/button";
|
||||
import type { ComfyImageEditorNode, MultiImageData } from "$lib/nodes/ComfyWidgetNodes";
|
||||
import { Embed as Klecks, KL, KlApp, klHistory, type KlAppOptionsEmbed } from "klecks";
|
||||
|
||||
import "klecks/style/style.scss";
|
||||
|
||||
export let widget: WidgetLayout | null = null;
|
||||
export let isMobile: boolean = false;
|
||||
let node: ComfyImageEditorNode | null = null;
|
||||
let nodeValue: Writable<MultiImageData> | null = null;
|
||||
let attrsChanged: Writable<number> | null = null;
|
||||
let leftUrl: string = ""
|
||||
let rightUrl: string = ""
|
||||
|
||||
$: widget && setNodeValue(widget);
|
||||
|
||||
function setNodeValue(widget: WidgetLayout) {
|
||||
if (widget) {
|
||||
node = widget.node as ComfyImageEditorNode
|
||||
nodeValue = node.value;
|
||||
attrsChanged = widget.attrsChanged;
|
||||
}
|
||||
};
|
||||
|
||||
const urlPattern = /^((http|https|ftp):\/\/)/;
|
||||
|
||||
$: updateUrls($nodeValue);
|
||||
|
||||
function updateUrls(value: MultiImageData) {
|
||||
// leftUrl = ""
|
||||
// rightUrl = ""
|
||||
// console.warn("UPD", value)
|
||||
//
|
||||
// if (typeof value[0] === "string") {
|
||||
// if (urlPattern.test(value[0]))
|
||||
// leftUrl = value[0]
|
||||
// else
|
||||
// leftUrl = convertFilenameToComfyURL(value[0])
|
||||
// }
|
||||
// if (typeof value[1] === "string") {
|
||||
// if (urlPattern.test(value[1]))
|
||||
// rightUrl = value[1]
|
||||
// else
|
||||
// rightUrl = convertFilenameToComfyURL(value[1])
|
||||
// }
|
||||
}
|
||||
|
||||
let editorRoot: HTMLDivElement | null = null;
|
||||
let showModal = false;
|
||||
let kl: Klecks | null = null;
|
||||
|
||||
function disposeEditor() {
|
||||
if (editorRoot) {
|
||||
while (editorRoot.firstChild) {
|
||||
editorRoot.removeChild(editorRoot.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
kl = null;
|
||||
showModal = false;
|
||||
}
|
||||
|
||||
function submitKlecksToComfyUI(onSuccess: () => void, onError: () => void) {
|
||||
const data = kl.getPNG();
|
||||
}
|
||||
|
||||
function generateBlankImage(fill: string = "#fff"): HTMLCanvasElement {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 512;
|
||||
canvas.height = 512;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.save();
|
||||
ctx.fillStyle = fill,
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.restore();
|
||||
return canvas;
|
||||
}
|
||||
|
||||
function openImageEditor() {
|
||||
if (!editorRoot)
|
||||
return;
|
||||
|
||||
showModal = true;
|
||||
|
||||
const url = `http://${location.hostname}:8188` // TODO make configurable
|
||||
|
||||
kl = new Klecks({
|
||||
embedUrl: url,
|
||||
onSubmit: submitKlecksToComfyUI,
|
||||
targetEl: editorRoot.parentElement.parentElement
|
||||
});
|
||||
|
||||
kl.openProject({
|
||||
width: 512,
|
||||
height: 512,
|
||||
layers: [{
|
||||
name: 'Image',
|
||||
opacity: 1,
|
||||
mixModeStr: 'source-over',
|
||||
image: generateBlankImage(),
|
||||
}]
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
kl.klApp?.out("yo");
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="wrapper comfy-image-editor">
|
||||
{#if isMobile}
|
||||
<span>TODO mask editor</span>
|
||||
{:else}
|
||||
<Modal bind:showModal on:close={disposeEditor}>
|
||||
<div id="klecks-loading-screen">
|
||||
<span id="klecks-loading-screen-text"></span>
|
||||
</div>
|
||||
<div class="image-editor-root" bind:this={editorRoot} />
|
||||
</Modal>
|
||||
<div class="comfy-image-editor-panel">
|
||||
<Block>
|
||||
<BlockTitle>Image editor.</BlockTitle>
|
||||
<Button variant="secondary" on:click={openImageEditor}>
|
||||
Open
|
||||
</Button>
|
||||
</Block>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.image-editor-root {
|
||||
width: 75vw;
|
||||
height: 75vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comfy-image-editor {
|
||||
:global(> dialog) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { Block, BlockLabel, Empty } from "@gradio/atoms";
|
||||
import { File as FileIcon } from "@gradio/icons";
|
||||
import { ModifyUpload, Upload, blobToBase64, normalise_file } from "@gradio/upload";
|
||||
import ImageUpload from "$lib/components/ImageUpload.svelte"
|
||||
import type { WidgetLayout } from "$lib/stores/layoutState";
|
||||
import type { Writable } from "svelte/store";
|
||||
import type { ComfyGalleryNode, ComfyImageUploadNode, GalleryOutputEntry } from "$lib/nodes/ComfyWidgetNodes";
|
||||
@@ -19,29 +19,12 @@
|
||||
let dragging = false;
|
||||
let pending_upload = false;
|
||||
let old_value: Array<GradioFileData> | null = null;
|
||||
let imgElem: HTMLImageElement | null = null
|
||||
let imgWidth: number = 1;
|
||||
let imgHeight: number = 1;
|
||||
|
||||
$: widget && setNodeValue(widget);
|
||||
|
||||
let _value: GradioFileData[] | null = null;
|
||||
const root = "comf"
|
||||
const root_url = "https//ComfyUI!"
|
||||
|
||||
$: _value = normalise_file($nodeValue, root, root_url);
|
||||
|
||||
function setNodeValue(widget: WidgetLayout) {
|
||||
if (widget) {
|
||||
node = widget.node as ComfyImageUploadNode
|
||||
nodeValue = node.value;
|
||||
propsChanged = node.propsChanged;
|
||||
}
|
||||
};
|
||||
|
||||
$: if (!(node && _value && _value.length > 0 && imgElem)) {
|
||||
imgWidth = 1
|
||||
imgHeight = 1
|
||||
$: if (!(node && $nodeValue && $nodeValue.length > 0)) {
|
||||
node.imageSize = [1, 1]
|
||||
}
|
||||
else if (imgWidth > 1 || imgHeight > 1) {
|
||||
@@ -51,178 +34,30 @@
|
||||
node.imageSize = [1, 1]
|
||||
}
|
||||
|
||||
function onChange() {
|
||||
$nodeValue = _value || []
|
||||
}
|
||||
|
||||
function onUpload() {
|
||||
}
|
||||
|
||||
function onClear() {
|
||||
}
|
||||
|
||||
interface GradioUploadResponse {
|
||||
error?: string;
|
||||
files?: Array<string>;
|
||||
}
|
||||
|
||||
async function upload_files(root: string, files: Array<File>): Promise<GradioUploadResponse> {
|
||||
console.debug("UPLOADILFES", root, files);
|
||||
|
||||
const url = `http://${location.hostname}:8188` // TODO make configurable
|
||||
|
||||
const requests = files.map(async (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append("image", file, file.name);
|
||||
return fetch(new Request(url + "/upload/image", {
|
||||
body: formData,
|
||||
method: 'POST'
|
||||
}))
|
||||
.then(r => r.json())
|
||||
.catch(error => error);
|
||||
});
|
||||
|
||||
return Promise.all(requests)
|
||||
.then( (results) => {
|
||||
const errors = []
|
||||
const files = []
|
||||
|
||||
for (const r of results) {
|
||||
if (r instanceof Error) {
|
||||
errors.push(r.cause)
|
||||
}
|
||||
else {
|
||||
// bare filename of image
|
||||
files.push((r as ComfyUploadImageAPIResponse).name)
|
||||
}
|
||||
}
|
||||
|
||||
let error = null;
|
||||
if (errors && errors.length > 0)
|
||||
error = "Upload error(s):\n" + errors.join("\n");
|
||||
|
||||
return { error, files }
|
||||
})
|
||||
}
|
||||
|
||||
$: {
|
||||
if (JSON.stringify(_value) !== JSON.stringify(old_value)) {
|
||||
pending_upload = true;
|
||||
|
||||
old_value = _value;
|
||||
|
||||
if (_value == null)
|
||||
_value = []
|
||||
else if (!Array.isArray(_value))
|
||||
_value = [_value]
|
||||
|
||||
const allBlobs = _value.map((file_data: GradioFileData) => file_data.blob)
|
||||
|
||||
if (allBlobs == null || allBlobs.length === 0) {
|
||||
_value = null;
|
||||
onChange();
|
||||
pending_upload = false;
|
||||
}
|
||||
else if (!allBlobs.every(b => b != null)) {
|
||||
_value = null;
|
||||
pending_upload = false;
|
||||
}
|
||||
else {
|
||||
let files = (Array.isArray(_value) ? _value : [_value]).map(
|
||||
(file_data) => file_data.blob!
|
||||
);
|
||||
let upload_value = _value;
|
||||
pending_upload = true;
|
||||
upload_files(root, files).then((response) => {
|
||||
if (JSON.stringify(upload_value) !== JSON.stringify(_value)) {
|
||||
// value has changed since upload started
|
||||
console.error("[ImageUploadWidget] value has changed since upload started", upload_value, _value)
|
||||
return;
|
||||
}
|
||||
|
||||
pending_upload = false;
|
||||
_value.forEach(
|
||||
(file_data: GradioFileData, i: number) => {
|
||||
if (response.files) {
|
||||
file_data.orig_name = file_data.name;
|
||||
file_data.name = response.files[i];
|
||||
file_data.is_file = true;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (response.error) {
|
||||
notify(response.error, { type: "error" })
|
||||
}
|
||||
|
||||
$nodeValue = normalise_file(_value, root, root_url) as GradioFileData[];
|
||||
onChange();
|
||||
onUpload();
|
||||
});
|
||||
}
|
||||
function setNodeValue(widget: WidgetLayout) {
|
||||
if (widget) {
|
||||
node = widget.node as ComfyImageUploadNode
|
||||
nodeValue = node.value;
|
||||
propsChanged = node.propsChanged;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
async function handle_upload({ detail }: CustomEvent<GradioFileData | Array<GradioFileData>>) {
|
||||
_value = Array.isArray(detail) ? detail : [detail];
|
||||
await tick();
|
||||
onChange();
|
||||
onUpload();
|
||||
}
|
||||
|
||||
function handle_clear(_e: CustomEvent<null>) {
|
||||
_value = null;
|
||||
onChange();
|
||||
onClear();
|
||||
}
|
||||
|
||||
function getImageUrl(image: GradioFileData) {
|
||||
const baseUrl = `http://${location.hostname}:8188` // TODO make configurable
|
||||
const params = new URLSearchParams({ filename: image.name, subfolder: "", type: "input" })
|
||||
return `${baseUrl}/view?${params}`
|
||||
function onChange(e: CustomEvent<GradioFileData[]>) {
|
||||
$nodeValue = e.detail || []
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="wrapper gradio-file comfy-image-upload" style={widget.attrs.style}>
|
||||
{#if widget && node && nodeValue}
|
||||
<Block
|
||||
visible={true}
|
||||
variant={($nodeValue === null || $nodeValue.length === 0) ? "dashed" : "solid"}
|
||||
border_mode={dragging ? "focus" : "base"}
|
||||
padding={true}
|
||||
elem_id="comfy-image-upload-block"
|
||||
elem_classes={widget.attrs.classes.split(",")}
|
||||
>
|
||||
<BlockLabel
|
||||
label={widget.attrs.title}
|
||||
show_label={widget.attrs.title != ""}
|
||||
Icon={FileIcon}
|
||||
float={widget.attrs.title != ""}
|
||||
/>
|
||||
{#if _value && _value.length > 0 && !pending_upload}
|
||||
{@const firstImage = _value[0]}
|
||||
<ModifyUpload on:clear={handle_clear} absolute />
|
||||
<img src={getImageUrl(firstImage)}
|
||||
alt={firstImage.orig_name}
|
||||
bind:this={imgElem}
|
||||
bind:naturalWidth={imgWidth}
|
||||
bind:naturalHeight={imgHeight}
|
||||
/>
|
||||
{:else}
|
||||
<Upload
|
||||
file_count={node.properties.fileCount}
|
||||
filetype="image/*"
|
||||
on:change={({ detail }) => ($nodeValue = detail)}
|
||||
on:load={handle_upload}
|
||||
bind:dragging
|
||||
on:clear
|
||||
on:select
|
||||
parse_to_data_url={false}
|
||||
>
|
||||
<UploadText type="file" />
|
||||
</Upload>
|
||||
{/if}
|
||||
</Block>
|
||||
<ImageUpload value={$nodeValue}
|
||||
{isMobile}
|
||||
bind:imgWidth
|
||||
bind:imgHeight
|
||||
bind:fileCount={node.properties.fileCount}
|
||||
elem_classes={widget.attrs.classes.split(",")}
|
||||
style={widget.attrs.style}
|
||||
label={widget.attrs.title}
|
||||
on:change={onChange}/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user