@gradio/image 0.14.0 → 0.16.0-beta.1

package/dist/Index.svelte.d.ts

@@ -0,0 +1,176 @@
+import { SvelteComponent } from "svelte";
+export { default as Webcam } from "./shared/Webcam.svelte";
+export { default as BaseImageUploader } from "./shared/ImageUploader.svelte";
+export { default as BaseStaticImage } from "./shared/ImagePreview.svelte";
+export { default as BaseExample } from "./Example.svelte";
+export { default as BaseImage } from "./shared/Image.svelte";
+import type { Gradio, SelectData, ValueData } from "@gradio/utils";
+import type { FileData } from "@gradio/client";
+import type { LoadingStatus } from "@gradio/statustracker";
+declare const __propDef: {
+    props: {
+        modify_stream_state?: ((state: "open" | "closed" | "waiting") => void) | undefined;
+        get_stream_state?: (() => void) | undefined;
+        set_time_limit: (arg0: number) => void;
+        value_is_output?: boolean | undefined;
+        elem_id?: string | undefined;
+        elem_classes?: string[] | undefined;
+        visible?: boolean | undefined;
+        value?: (null | FileData) | undefined;
+        label: string;
+        show_label: boolean;
+        show_download_button: boolean;
+        root: string;
+        height: number | undefined;
+        width: number | undefined;
+        stream_every: number;
+        _selectable?: boolean | undefined;
+        container?: boolean | undefined;
+        scale?: (number | null) | undefined;
+        min_width?: number | undefined;
+        loading_status: LoadingStatus;
+        show_share_button?: boolean | undefined;
+        sources?: ("clipboard" | "webcam" | "upload")[] | undefined;
+        interactive: boolean;
+        streaming: boolean;
+        pending: boolean;
+        mirror_webcam: boolean;
+        placeholder?: string | undefined;
+        show_fullscreen_button: boolean;
+        gradio: Gradio<{
+            input: never;
+            change: never;
+            error: string;
+            edit: never;
+            stream: ValueData;
+            drag: never;
+            upload: never;
+            clear: never;
+            select: SelectData;
+            share: ShareData;
+            clear_status: LoadingStatus;
+            close_stream: string;
+        }>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+    get modify_stream_state(): (state: "open" | "closed" | "waiting") => void;
+    get get_stream_state(): () => void;
+    get undefined(): any;
+    /**accessor*/
+    set undefined(_: any);
+    get set_time_limit(): (arg0: number) => void;
+    /**accessor*/
+    set set_time_limit(_: (arg0: number) => void);
+    get value_is_output(): boolean | undefined;
+    /**accessor*/
+    set value_is_output(_: boolean | undefined);
+    get elem_id(): string | undefined;
+    /**accessor*/
+    set elem_id(_: string | undefined);
+    get elem_classes(): string[] | undefined;
+    /**accessor*/
+    set elem_classes(_: string[] | undefined);
+    get visible(): boolean | undefined;
+    /**accessor*/
+    set visible(_: boolean | undefined);
+    get value(): FileData | null | undefined;
+    /**accessor*/
+    set value(_: FileData | null | undefined);
+    get label(): string;
+    /**accessor*/
+    set label(_: string);
+    get show_label(): boolean;
+    /**accessor*/
+    set show_label(_: boolean);
+    get show_download_button(): boolean;
+    /**accessor*/
+    set show_download_button(_: boolean);
+    get root(): string;
+    /**accessor*/
+    set root(_: string);
+    get height(): number | undefined;
+    /**accessor*/
+    set height(_: number | undefined);
+    get width(): number | undefined;
+    /**accessor*/
+    set width(_: number | undefined);
+    get stream_every(): number;
+    /**accessor*/
+    set stream_every(_: number);
+    get _selectable(): boolean | undefined;
+    /**accessor*/
+    set _selectable(_: boolean | undefined);
+    get container(): boolean | undefined;
+    /**accessor*/
+    set container(_: boolean | undefined);
+    get scale(): number | null | undefined;
+    /**accessor*/
+    set scale(_: number | null | undefined);
+    get min_width(): number | undefined;
+    /**accessor*/
+    set min_width(_: number | undefined);
+    get loading_status(): LoadingStatus;
+    /**accessor*/
+    set loading_status(_: LoadingStatus);
+    get show_share_button(): boolean | undefined;
+    /**accessor*/
+    set show_share_button(_: boolean | undefined);
+    get sources(): ("upload" | "clipboard" | "webcam")[] | undefined;
+    /**accessor*/
+    set sources(_: ("upload" | "clipboard" | "webcam")[] | undefined);
+    get interactive(): boolean;
+    /**accessor*/
+    set interactive(_: boolean);
+    get streaming(): boolean;
+    /**accessor*/
+    set streaming(_: boolean);
+    get pending(): boolean;
+    /**accessor*/
+    set pending(_: boolean);
+    get mirror_webcam(): boolean;
+    /**accessor*/
+    set mirror_webcam(_: boolean);
+    get placeholder(): string | undefined;
+    /**accessor*/
+    set placeholder(_: string | undefined);
+    get show_fullscreen_button(): boolean;
+    /**accessor*/
+    set show_fullscreen_button(_: boolean);
+    get gradio(): Gradio<{
+        input: never;
+        change: never;
+        error: string;
+        edit: never;
+        stream: ValueData;
+        drag: never;
+        upload: never;
+        clear: never;
+        select: SelectData;
+        share: ShareData;
+        clear_status: LoadingStatus;
+        close_stream: string;
+    }>;
+    /**accessor*/
+    set gradio(_: Gradio<{
+        input: never;
+        change: never;
+        error: string;
+        edit: never;
+        stream: ValueData;
+        drag: never;
+        upload: never;
+        clear: never;
+        select: SelectData;
+        share: ShareData;
+        clear_status: LoadingStatus;
+        close_stream: string;
+    }>);
+}

package/dist/shared/ClearImage.svelte

@@ -0,0 +1,28 @@
+<script>import { createEventDispatcher } from "svelte";
+import { IconButton } from "@gradio/atoms";
+import { Clear } from "@gradio/icons";
+const dispatch = createEventDispatcher();
+</script>
+
+<div>
+	<IconButton
+		Icon={Clear}
+		label="Remove Image"
+		on:click={(event) => {
+			dispatch("remove_image");
+			event.stopPropagation();
+		}}
+	/>
+</div>
+
+<style>
+	div {
+		display: flex;
+		position: absolute;
+		top: var(--size-2);
+		right: var(--size-2);
+		justify-content: flex-end;
+		gap: var(--spacing-sm);
+		z-index: var(--layer-5);
+	}
+</style>

package/dist/shared/ClearImage.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        remove_image: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ClearImageProps = typeof __propDef.props;
+export type ClearImageEvents = typeof __propDef.events;
+export type ClearImageSlots = typeof __propDef.slots;
+export default class ClearImage extends SvelteComponent<ClearImageProps, ClearImageEvents, ClearImageSlots> {
+}
+export {};

package/dist/shared/Image.svelte

@@ -0,0 +1,26 @@
+<script>import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+import { resolve_wasm_src } from "@gradio/wasm/svelte";
+export let src = void 0;
+let resolved_src;
+let latest_src;
+$: {
+  resolved_src = src;
+  latest_src = src;
+  const resolving_src = src;
+  resolve_wasm_src(resolving_src).then((s) => {
+    if (latest_src === resolving_src) {
+      resolved_src = s;
+    }
+  });
+}
+</script>
+
+<!-- svelte-ignore a11y-missing-attribute -->
+<img src={resolved_src} {...$$restProps} on:load={() => dispatch("load")} />
+
+<style>
+	img {
+		object-fit: cover;
+	}
+</style>

package/dist/shared/Image.svelte.d.ts

@@ -0,0 +1,247 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: `data-${string}`]: any;
+        alt?: string | undefined | null;
+        crossorigin?: "anonymous" | "use-credentials" | "" | undefined | null;
+        decoding?: "async" | "auto" | "sync" | undefined | null;
+        fetchpriority?: "auto" | "high" | "low" | undefined | null;
+        height?: number | string | undefined | null;
+        ismap?: boolean | undefined | null;
+        loading?: "eager" | "lazy" | undefined | null;
+        referrerpolicy?: ReferrerPolicy | undefined | null;
+        sizes?: string | undefined | null;
+        src?: string | undefined | null;
+        srcset?: string | undefined | null;
+        usemap?: string | undefined | null;
+        width?: number | string | undefined | null;
+        readonly 'bind:naturalWidth'?: number | undefined | null;
+        readonly 'bind:naturalHeight'?: number | undefined | null;
+        accesskey?: string | undefined | null;
+        autofocus?: boolean | undefined | null;
+        class?: string | undefined | null;
+        contenteditable?: import("svelte/elements").Booleanish | "inherit" | "plaintext-only" | undefined | null;
+        contextmenu?: string | undefined | null;
+        dir?: string | undefined | null;
+        draggable?: import("svelte/elements").Booleanish | undefined | null;
+        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | null;
+        hidden?: boolean | undefined | null;
+        id?: string | undefined | null;
+        lang?: string | undefined | null;
+        part?: string | undefined | null;
+        placeholder?: string | undefined | null;
+        slot?: string | undefined | null;
+        spellcheck?: import("svelte/elements").Booleanish | undefined | null;
+        style?: string | undefined | null;
+        tabindex?: number | undefined | null;
+        title?: string | undefined | null;
+        translate?: "yes" | "no" | "" | undefined | null;
+        inert?: boolean | undefined | null;
+        popover?: "auto" | "manual" | "" | undefined | null;
+        radiogroup?: string | undefined | null;
+        role?: import("svelte/elements").AriaRole | undefined | null;
+        about?: string | undefined | null;
+        datatype?: string | undefined | null;
+        inlist?: any;
+        prefix?: string | undefined | null;
+        property?: string | undefined | null;
+        resource?: string | undefined | null;
+        typeof?: string | undefined | null;
+        vocab?: string | undefined | null;
+        autocapitalize?: string | undefined | null;
+        autocorrect?: string | undefined | null;
+        autosave?: string | undefined | null;
+        color?: string | undefined | null;
+        itemprop?: string | undefined | null;
+        itemscope?: boolean | undefined | null;
+        itemtype?: string | undefined | null;
+        itemid?: string | undefined | null;
+        itemref?: string | undefined | null;
+        results?: number | undefined | null;
+        security?: string | undefined | null;
+        unselectable?: "on" | "off" | undefined | null;
+        inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | null;
+        is?: string | undefined | null;
+        'bind:innerHTML'?: string | undefined | null;
+        'bind:textContent'?: string | undefined | null;
+        'bind:innerText'?: string | undefined | null;
+        readonly 'bind:contentRect'?: DOMRectReadOnly | undefined | null;
+        readonly 'bind:contentBoxSize'?: ResizeObserverSize[] | undefined | null;
+        readonly 'bind:borderBoxSize'?: ResizeObserverSize[] | undefined | null;
+        readonly 'bind:devicePixelContentBoxSize'?: ResizeObserverSize[] | undefined | null;
+        'data-sveltekit-keepfocus'?: true | "" | "off" | undefined | null;
+        'data-sveltekit-noscroll'?: true | "" | "off" | undefined | null;
+        'data-sveltekit-preload-code'?: true | "" | "eager" | "viewport" | "hover" | "tap" | "off" | undefined | null;
+        'data-sveltekit-preload-data'?: true | "" | "hover" | "tap" | "off" | undefined | null;
+        'data-sveltekit-reload'?: true | "" | "off" | undefined | null;
+        'data-sveltekit-replacestate'?: true | "" | "off" | undefined | null;
+        'aria-activedescendant'?: string | undefined | null;
+        'aria-atomic'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | null;
+        'aria-busy'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-checked'?: boolean | "false" | "mixed" | "true" | undefined | null;
+        'aria-colcount'?: number | undefined | null;
+        'aria-colindex'?: number | undefined | null;
+        'aria-colspan'?: number | undefined | null;
+        'aria-controls'?: string | undefined | null;
+        'aria-current'?: import("svelte/elements").Booleanish | "page" | "step" | "location" | "date" | "time" | undefined | null;
+        'aria-describedby'?: string | undefined | null;
+        'aria-details'?: string | undefined | null;
+        'aria-disabled'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | null;
+        'aria-errormessage'?: string | undefined | null;
+        'aria-expanded'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-flowto'?: string | undefined | null;
+        'aria-grabbed'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-haspopup'?: import("svelte/elements").Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | null;
+        'aria-hidden'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-invalid'?: import("svelte/elements").Booleanish | "grammar" | "spelling" | undefined | null;
+        'aria-keyshortcuts'?: string | undefined | null;
+        'aria-label'?: string | undefined | null;
+        'aria-labelledby'?: string | undefined | null;
+        'aria-level'?: number | undefined | null;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined | null;
+        'aria-modal'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-multiline'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-multiselectable'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined | null;
+        'aria-owns'?: string | undefined | null;
+        'aria-placeholder'?: string | undefined | null;
+        'aria-posinset'?: number | undefined | null;
+        'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined | null;
+        'aria-readonly'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | null;
+        'aria-required'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-roledescription'?: string | undefined | null;
+        'aria-rowcount'?: number | undefined | null;
+        'aria-rowindex'?: number | undefined | null;
+        'aria-rowspan'?: number | undefined | null;
+        'aria-selected'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-setsize'?: number | undefined | null;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | null;
+        'aria-valuemax'?: number | undefined | null;
+        'aria-valuemin'?: number | undefined | null;
+        'aria-valuenow'?: number | undefined | null;
+        'aria-valuetext'?: string | undefined | null;
+        'on:copy'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:cut'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:paste'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:compositionend'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
+        'on:compositionstart'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
+        'on:compositionupdate'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
+        'on:focus'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
+        'on:focusin'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
+        'on:focusout'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
+        'on:blur'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
+        'on:change'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
+        'on:beforeinput'?: import("svelte/elements").EventHandler<InputEvent, HTMLImageElement> | null | undefined;
+        'on:input'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
+        'on:reset'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
+        'on:submit'?: import("svelte/elements").EventHandler<SubmitEvent, HTMLImageElement> | null | undefined;
+        'on:invalid'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:formdata'?: import("svelte/elements").EventHandler<FormDataEvent, HTMLImageElement> | null | undefined;
+        'on:load'?: import("svelte/elements").EventHandler | undefined | null;
+        'on:error'?: import("svelte/elements").EventHandler | undefined | null;
+        'on:beforetoggle'?: import("svelte/elements").ToggleEventHandler<HTMLImageElement> | null | undefined;
+        'on:toggle'?: import("svelte/elements").ToggleEventHandler<HTMLImageElement> | null | undefined;
+        'on:keydown'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:keypress'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:keyup'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:abort'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:canplay'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:canplaythrough'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:cuechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:durationchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:emptied'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:encrypted'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:ended'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:loadeddata'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:loadedmetadata'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:loadstart'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:pause'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:play'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:playing'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:progress'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:ratechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:seeked'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:seeking'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:stalled'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:suspend'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:timeupdate'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:volumechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:waiting'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:auxclick'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:click'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:contextmenu'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:dblclick'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:drag'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragend'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragenter'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragexit'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragleave'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragover'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragstart'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:drop'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:mousedown'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mouseenter'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mouseleave'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mousemove'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mouseout'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mouseover'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mouseup'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:select'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:selectionchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:selectstart'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:touchcancel'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
+        'on:touchend'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
+        'on:touchmove'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
+        'on:touchstart'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
+        'on:gotpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointercancel'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerdown'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerenter'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerleave'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointermove'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerout'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerover'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerup'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:lostpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:gamepadconnected'?: import("svelte/elements").GamepadEventHandler<HTMLImageElement> | null | undefined;
+        'on:gamepaddisconnected'?: import("svelte/elements").GamepadEventHandler<HTMLImageElement> | null | undefined;
+        'on:scroll'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
+        'on:scrollend'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
+        'on:resize'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
+        'on:wheel'?: import("svelte/elements").WheelEventHandler<HTMLImageElement> | null | undefined;
+        'on:animationstart'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
+        'on:animationend'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
+        'on:animationiteration'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
+        'on:transitionstart'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
+        'on:transitionrun'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
+        'on:transitionend'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
+        'on:transitioncancel'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
+        'on:outrostart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
+        'on:outroend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
+        'on:introstart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
+        'on:introend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
+        'on:message'?: import("svelte/elements").MessageEventHandler<HTMLImageElement> | null | undefined;
+        'on:messageerror'?: import("svelte/elements").MessageEventHandler<HTMLImageElement> | null | undefined;
+        'on:visibilitychange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:cancel'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:close'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        "data-testid"?: string | undefined;
+    };
+    events: {
+        load?: CustomEvent<void | undefined> | undefined;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImageProps = typeof __propDef.props;
+export type ImageEvents = typeof __propDef.events;
+export type ImageSlots = typeof __propDef.slots;
+export default class Image extends SvelteComponent<ImageProps, ImageEvents, ImageSlots> {
+}
+export {};

package/dist/shared/ImagePreview.svelte

@@ -0,0 +1,155 @@
+<script>import { createEventDispatcher, onMount } from "svelte";
+import { uploadToHuggingFace } from "@gradio/utils";
+import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
+import { Download } from "@gradio/icons";
+import { get_coordinates_of_clicked_image } from "./utils";
+import Image from "./Image.svelte";
+import { DownloadLink } from "@gradio/wasm/svelte";
+import { Maximize, Minimize } from "@gradio/icons";
+import { Image as ImageIcon } from "@gradio/icons";
+import {} from "@gradio/client";
+export let value;
+export let label = void 0;
+export let show_label;
+export let show_download_button = true;
+export let selectable = false;
+export let show_share_button = false;
+export let i18n;
+export let show_fullscreen_button = true;
+const dispatch = createEventDispatcher();
+const handle_click = (evt) => {
+  let coordinates = get_coordinates_of_clicked_image(evt);
+  if (coordinates) {
+    dispatch("select", { index: coordinates, value: null });
+  }
+};
+let is_full_screen = false;
+let image_container;
+onMount(() => {
+  document.addEventListener("fullscreenchange", () => {
+    is_full_screen = !!document.fullscreenElement;
+  });
+});
+const toggle_full_screen = async () => {
+  if (!is_full_screen) {
+    await image_container.requestFullscreen();
+  } else {
+    await document.exitFullscreen();
+    is_full_screen = !is_full_screen;
+  }
+};
+</script>
+
+<BlockLabel
+	{show_label}
+	Icon={ImageIcon}
+	label={!show_label ? "" : label || i18n("image.image")}
+/>
+{#if value === null || !value.url}
+	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
+{:else}
+	<div class="image-container" bind:this={image_container}>
+		<div class="icon-buttons">
+			{#if !is_full_screen && show_fullscreen_button}
+				<IconButton
+					Icon={Maximize}
+					label={is_full_screen ? "Exit full screen" : "View in full screen"}
+					on:click={toggle_full_screen}
+				/>
+			{/if}
+
+			{#if is_full_screen && show_fullscreen_button}
+				<IconButton
+					Icon={Minimize}
+					label={is_full_screen ? "Exit full screen" : "View in full screen"}
+					on:click={toggle_full_screen}
+				/>
+			{/if}
+
+			{#if show_download_button}
+				<DownloadLink href={value.url} download={value.orig_name || "image"}>
+					<IconButton Icon={Download} label={i18n("common.download")} />
+				</DownloadLink>
+			{/if}
+			{#if show_share_button}
+				<ShareButton
+					{i18n}
+					on:share
+					on:error
+					formatter={async (value) => {
+						if (!value) return "";
+						let url = await uploadToHuggingFace(value, "url");
+						return `<img src="${url}" />`;
+					}}
+					{value}
+				/>
+			{/if}
+		</div>
+		<button on:click={handle_click}>
+			<div class:selectable class="image-frame">
+				<Image src={value.url} alt="" loading="lazy" on:load />
+			</div>
+		</button>
+	</div>
+{/if}
+
+<style>
+	.image-container {
+		height: 100%;
+		position: relative;
+	}
+
+	.image-container button {
+		width: var(--size-full);
+		height: var(--size-full);
+		border-radius: var(--radius-lg);
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.image-frame {
+		width: auto;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.image-frame :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: scale-down;
+	}
+
+	.selectable {
+		cursor: crosshair;
+	}
+
+	.icon-buttons {
+		display: flex;
+		position: absolute;
+		top: 6px;
+		right: 6px;
+		gap: var(--size-1);
+		z-index: 1;
+	}
+
+	:global(.fullscreen-controls svg) {
+		position: relative;
+		top: 0px;
+	}
+
+	:global(.image-container:fullscreen) {
+		background-color: black;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	:global(.image-container:fullscreen img) {
+		max-width: 90vw;
+		max-height: 90vh;
+		object-fit: scale-down;
+	}
+</style>