Image upload widget
This commit is contained in:
space-nuko
231
src/lib/widgets/ImageUploadWidget.svelte
Normal file
231
src/lib/widgets/ImageUploadWidget.svelte
Normal file
@@ -0,0 +1,231 @@
|
||||
<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 type { WidgetLayout } from "$lib/stores/layoutState";
|
||||
import type { Writable } from "svelte/store";
|
||||
import type { ComfyGalleryNode, ComfyImageUploadNode, GalleryOutputEntry } from "$lib/nodes/ComfyWidgetNodes";
|
||||
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";
|
||||
|
||||
export let widget: WidgetLayout | null = null;
|
||||
export let isMobile: boolean = false;
|
||||
let node: ComfyImageUploadNode | null = null;
|
||||
let nodeValue: Writable<Array<GradioFileData>> | null = null;
|
||||
let propsChanged: Writable<number> | null = null;
|
||||
let dragging = false;
|
||||
let pending_upload = false;
|
||||
let old_value: Array<GradioFileData> | null = null;
|
||||
|
||||
$: 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;
|
||||
}
|
||||
};
|
||||
|
||||
function onChange() {
|
||||
console.warn("CHANGED", _value)
|
||||
$nodeValue = _value || []
|
||||
}
|
||||
|
||||
function onUpload() {
|
||||
console.warn("UPLOADED", _value)
|
||||
}
|
||||
|
||||
function onClear() {
|
||||
console.warn("CLEARED", _value)
|
||||
}
|
||||
|
||||
interface GradioUploadResponse {
|
||||
error?: string;
|
||||
files?: Array<string>;
|
||||
}
|
||||
|
||||
async function upload_files(root: string, files: Array<File>): Promise<GradioUploadResponse> {
|
||||
console.warn("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;
|
||||
console.warn(_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, null, "error")
|
||||
}
|
||||
|
||||
$nodeValue = 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
|
||||
console.warn(image)
|
||||
const params = new URLSearchParams({ filename: image.name, subfolder: "", type: "input" })
|
||||
return `${baseUrl}/view?${params}`
|
||||
}
|
||||
</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} />
|
||||
{: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>
|
||||
{/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