Imagefilethings
This commit is contained in:
space-nuko
@@ -6,12 +6,11 @@
|
||||
import { Button } from "@gradio/button";
|
||||
import type { ComfyImageEditorNode, ComfyImageLocation, MultiImageData } from "$lib/nodes/ComfyWidgetNodes";
|
||||
import { Embed as Klecks, KL, KlApp, klHistory, type KlAppOptionsEmbed } from "klecks";
|
||||
import type { FileData as GradioFileData } from "@gradio/upload";
|
||||
|
||||
import "klecks/style/style.scss";
|
||||
import ImageUpload from "$lib/components/ImageUpload.svelte";
|
||||
import { uploadImageToComfyUI, type ComfyUploadImageAPIResponse, convertComfyOutputToComfyURL, type ComfyBoxImageMetadata, comfyFileToComfyBoxMetadata } from "$lib/utils";
|
||||
import notify from "$lib/notify";
|
||||
import ImageUpload from "$lib/components/ImageUpload.svelte";
|
||||
import { uploadImageToComfyUI, type ComfyUploadImageAPIResponse, convertComfyOutputToComfyURL, type ComfyBoxImageMetadata, comfyFileToComfyBoxMetadata, comfyBoxImageToComfyURL, comfyBoxImageToComfyFile } from "$lib/utils";
|
||||
import notify from "$lib/notify";
|
||||
|
||||
export let widget: WidgetLayout | null = null;
|
||||
export let isMobile: boolean = false;
|
||||
@@ -44,29 +43,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
@@ -190,60 +166,81 @@
|
||||
let uploadError = null;
|
||||
|
||||
function onUploading() {
|
||||
console.warn("UPLOADING!!!")
|
||||
uploadError = null;
|
||||
status = "uploading"
|
||||
}
|
||||
|
||||
function onUploaded(e: CustomEvent<ComfyImageLocation[]>) {
|
||||
console.warn("UPLOADED!!!")
|
||||
uploadError = null;
|
||||
status = "uploaded"
|
||||
$nodeValue = e.detail;
|
||||
$nodeValue = e.detail.map(comfyFileToComfyBoxMetadata);
|
||||
}
|
||||
|
||||
function onClear() {
|
||||
console.warn("CLEAR!!!")
|
||||
uploadError = null;
|
||||
status = "none"
|
||||
}
|
||||
|
||||
function onUploadError(e: CustomEvent<any>) {
|
||||
console.warn("ERROR!!!")
|
||||
status = "error"
|
||||
uploadError = e.detail
|
||||
notify(`Failed to upload image to ComfyUI: ${err}`, { type: "error", timeout: 10000 })
|
||||
}
|
||||
|
||||
function onChange(e: CustomEvent<ComfyImageLocation[]>) {
|
||||
// $nodeValue = e.detail;
|
||||
}
|
||||
|
||||
$: canEdit = status === "none" || status === "uploaded";
|
||||
let _value: ComfyImageLocation[] = []
|
||||
$: if ($nodeValue)
|
||||
_value = $nodeValue.map(comfyBoxImageToComfyFile)
|
||||
else
|
||||
_value = []
|
||||
|
||||
$: canEdit = status === "none" || status === "uploaded";
|
||||
</script>
|
||||
|
||||
<div class="wrapper comfy-image-editor">
|
||||
{#if isMobile}
|
||||
<span>TODO mask editor</span>
|
||||
{#if widget.attrs.variant === "fileUpload" || isMobile}
|
||||
<ImageUpload value={_value}
|
||||
bind:imgWidth
|
||||
bind:imgHeight
|
||||
fileCount={"single"}
|
||||
elem_classes={[]}
|
||||
style={""}
|
||||
label={widget.attrs.title}
|
||||
on:uploading={onUploading}
|
||||
on:uploaded={onUploaded}
|
||||
on:upload_error={onUploadError}
|
||||
on:clear={onClear}
|
||||
on:change={onChange}
|
||||
/>
|
||||
{:else}
|
||||
<Modal bind:showModal closeOnClick={false} on:close={disposeEditor}>
|
||||
<div>
|
||||
<div id="klecks-loading-screen">
|
||||
<span id="klecks-loading-screen-text"></span>
|
||||
</div>
|
||||
<div class="image-editor-root" bind:this={editorRoot} />
|
||||
</div>
|
||||
</Modal>
|
||||
<div class="comfy-image-editor-panel">
|
||||
<ImageUpload value={$nodeValue}
|
||||
<ImageUpload value={_value}
|
||||
bind:imgWidth
|
||||
bind:imgHeight
|
||||
fileCount={"single"}
|
||||
elem_classes={[]}
|
||||
style={""}
|
||||
label={"Image"}
|
||||
label={widget.attrs.title}
|
||||
on:uploading={onUploading}
|
||||
on:uploaded={onUploaded}
|
||||
on:upload_error={onUploadError}
|
||||
on:clear={onClear}
|
||||
on:change={onChange}
|
||||
/>
|
||||
<Modal bind:showModal closeOnClick={false} on:close={disposeEditor}>
|
||||
<div>
|
||||
<div id="klecks-loading-screen">
|
||||
<span id="klecks-loading-screen-text"></span>
|
||||
</div>
|
||||
<div class="image-editor-root" bind:this={editorRoot} />
|
||||
</div>
|
||||
</Modal>
|
||||
<Block>
|
||||
<Button variant="primary" disabled={!canEdit} on:click={openImageEditor}>
|
||||
Edit Image
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
<script lang="ts">
|
||||
import ImageUpload from "$lib/components/ImageUpload.svelte"
|
||||
import type { WidgetLayout } from "$lib/stores/layoutState";
|
||||
import type { Writable } from "svelte/store";
|
||||
import type { ComfyGalleryNode, ComfyImageUploadNode, ComfyImageLocation, MultiImageData } from "$lib/nodes/ComfyWidgetNodes";
|
||||
import notify from "$lib/notify";
|
||||
import { comfyFileToComfyBoxMetadata, type ComfyBoxImageMetadata } from "$lib/utils";
|
||||
|
||||
export let widget: WidgetLayout | null = null;
|
||||
export let isMobile: boolean = false;
|
||||
let node: ComfyImageUploadNode | null = null;
|
||||
let nodeValue: Writable<ComfyBoxImageMetadata[]> | null = null;
|
||||
let propsChanged: Writable<number> | null = null;
|
||||
let imgWidth: number = 1;
|
||||
let imgHeight: number = 1;
|
||||
|
||||
$: widget && setNodeValue(widget);
|
||||
|
||||
$: if ($nodeValue && $nodeValue.length > 0) {
|
||||
// TODO improve
|
||||
if (imgWidth > 0 && imgHeight > 0) {
|
||||
$nodeValue[0].width = imgWidth
|
||||
$nodeValue[0].height = imgHeight
|
||||
}
|
||||
else {
|
||||
$nodeValue[0].width = 0
|
||||
$nodeValue[0].height = 0
|
||||
}
|
||||
}
|
||||
|
||||
function setNodeValue(widget: WidgetLayout) {
|
||||
if (widget) {
|
||||
node = widget.node as ComfyImageUploadNode
|
||||
nodeValue = node.value;
|
||||
propsChanged = node.propsChanged;
|
||||
}
|
||||
};
|
||||
|
||||
function onUploading() {
|
||||
console.warn("ONUPLOAD!!!")
|
||||
$nodeValue = []
|
||||
}
|
||||
|
||||
function onChange(e: CustomEvent<ComfyImageLocation[]>) {
|
||||
console.warn("ONCHANGE!!!", e.detail)
|
||||
$nodeValue = (e.detail || []).map(comfyFileToComfyBoxMetadata)
|
||||
}
|
||||
|
||||
function onUploaded(e: CustomEvent<ComfyImageLocation[]>) {
|
||||
console.warn("ONUPLOADED!!!", e.detail)
|
||||
$nodeValue = (e.detail || []).map(comfyFileToComfyBoxMetadata)
|
||||
}
|
||||
|
||||
function onUploadError(e: CustomEvent<any>) {
|
||||
console.warn("ONUPLOADERRO!!!", e.detail)
|
||||
notify(`Error uploading image to ComfyUI: ${e.detail}`)
|
||||
$nodeValue = []
|
||||
}
|
||||
|
||||
function onClear(e: CustomEvent<ComfyImageLocation[]>) {
|
||||
console.warn("ONCLEAR!!!", e.detail)
|
||||
$nodeValue = []
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="wrapper gradio-file comfy-image-upload" style={widget.attrs.style}>
|
||||
{#if widget && node}
|
||||
<ImageUpload value={$nodeValue || []}
|
||||
bind:imgWidth
|
||||
bind:imgHeight
|
||||
bind:fileCount={node.properties.fileCount}
|
||||
elem_classes={widget.attrs.classes.split(",")}
|
||||
style={widget.attrs.style}
|
||||
label={widget.attrs.title}
|
||||
on:uploading={onUploading}
|
||||
on:uploaded={onUploaded}
|
||||
on:upload_error={onUploadError}
|
||||
on:clear={onClear}
|
||||
on:change={onChange}/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.comfy-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>
|
||||
|
||||
Reference in New Issue
Block a user