Image upload widget
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
import { Block, BlockLabel, Empty } from "@gradio/atoms";
|
||||
import { Gallery } from "@gradio/gallery";
|
||||
import { Image } from "@gradio/icons";
|
||||
import { StaticImage } from "@gradio/image";
|
||||
import type { Styles } from "@gradio/utils";
|
||||
import type { WidgetLayout } from "$lib/stores/layoutState";
|
||||
import type { Writable } from "svelte/store";
|
||||
@@ -38,7 +39,7 @@
|
||||
let style: Styles = {
|
||||
grid_cols: [4],
|
||||
grid_rows: [4],
|
||||
// object_fit: "cover",
|
||||
object_fit: "cover",
|
||||
}
|
||||
let element: HTMLDivElement;
|
||||
|
||||
@@ -126,24 +127,21 @@
|
||||
|
||||
{#if widget && node && nodeValue && $nodeValue != null}
|
||||
{#if widget.attrs.variant === "image"}
|
||||
<div class="wrapper comfy-image-widget" style="height: {widget.attrs.height || 'auto'}" bind:this={element}>
|
||||
<div class="wrapper comfy-image-widget" style={widget.attrs.style || ""} bind:this={element}>
|
||||
<Block variant="solid" padding={false}>
|
||||
{#if widget.attrs.title}
|
||||
<BlockLabel
|
||||
show_label={true}
|
||||
Icon={Image}
|
||||
label={widget.attrs.title || "Image"}
|
||||
/>
|
||||
{/if}
|
||||
{#if $nodeValue.length > 0}
|
||||
<img src={$nodeValue[$nodeValue.length-1].data}/>
|
||||
<StaticImage
|
||||
value={$nodeValue[$nodeValue.length-1].data}
|
||||
show_label={widget.attrs.title != ""}
|
||||
label={widget.attrs.title}
|
||||
/>
|
||||
{:else}
|
||||
<Empty size="large" unpadded_box={true}><Image /></Empty>
|
||||
{/if}
|
||||
</Block>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="wrapper comfy-gallery-widget gradio-gallery" bind:this={element}>
|
||||
<div class="wrapper comfy-gallery-widget gradio-gallery" style={widget.attrs.style || ""} bind:this={element}>
|
||||
<Block variant="solid" padding={false}>
|
||||
<div class="padding">
|
||||
<Gallery
|
||||
|
||||
Reference in New Issue
Block a user