@gradio/image 0.23.1 → 0.24.0-dev.2

package/dist/Index.svelte

@@ -1,121 +1,107 @@
 <svelte:options accessors={true} />
 
-<script context="module">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";
+<script context="module" lang="ts">
+	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";
 </script>
 
-<script>import StaticImage from "./shared/ImagePreview.svelte";
-import ImageUploader from "./shared/ImageUploader.svelte";
-import { afterUpdate } from "svelte";
-import { Block, Empty, UploadText } from "@gradio/atoms";
-import { Image } from "@gradio/icons";
-import { StatusTracker } from "@gradio/statustracker";
-import { upload } from "@gradio/client";
-let stream_state = "closed";
-let _modify_stream = () => {
-};
-export function modify_stream_state(state) {
-  stream_state = state;
-  _modify_stream(state);
-}
-export const get_stream_state = () => stream_state;
-export let set_time_limit;
-export let value_is_output = false;
-export let elem_id = "";
-export let elem_classes = [];
-export let visible = true;
-export let value = null;
-let old_value = null;
-export let label;
-export let show_label;
-export let show_download_button;
-export let root;
-export let height;
-export let width;
-export let stream_every;
-export let _selectable = false;
-export let container = true;
-export let scale = null;
-export let min_width = void 0;
-export let loading_status;
-export let show_share_button = false;
-export let sources = [
-  "upload",
-  "clipboard",
-  "webcam"
-];
-export let interactive;
-export let streaming;
-export let pending;
-export let placeholder = void 0;
-export let show_fullscreen_button;
-export let input_ready;
-export let webcam_options;
-let fullscreen = false;
-let uploading = false;
-$: input_ready = !uploading;
-export let gradio;
-$: {
-  if (JSON.stringify(value) !== JSON.stringify(old_value)) {
-    old_value = value;
-    gradio.dispatch("change");
-    if (!value_is_output) {
-      gradio.dispatch("input");
-    }
-  }
-}
-afterUpdate(() => {
-  value_is_output = false;
-});
-let dragging;
-let active_source = null;
-let upload_component;
-const handle_drag_event = (event) => {
-  const drag_event = event;
-  drag_event.preventDefault();
-  drag_event.stopPropagation();
-  if (drag_event.type === "dragenter" || drag_event.type === "dragover") {
-    dragging = true;
-  } else if (drag_event.type === "dragleave") {
-    dragging = false;
-  }
-};
-const handle_drop = (event) => {
-  if (interactive) {
-    const drop_event = event;
-    drop_event.preventDefault();
-    drop_event.stopPropagation();
-    dragging = false;
-    if (upload_component) {
-      upload_component.loadFilesFromDrop(drop_event);
-    }
-  }
-};
+<script lang="ts">
+	import { tick } from "svelte";
+	import { Gradio } from "@gradio/utils";
+	import StaticImage from "./shared/ImagePreview.svelte";
+	import ImageUploader from "./shared/ImageUploader.svelte";
+	import { Block, Empty, UploadText } from "@gradio/atoms";
+	import { Image } from "@gradio/icons";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { ImageProps, ImageEvents } from "./shared/types";
+
+	let stream_data = { value: null };
+	let upload_promise = $state<Promise<any>>();
+	class ImageGradio extends Gradio<ImageEvents, ImageProps> {
+		async get_data() {
+			if (upload_promise) {
+				await upload_promise;
+				await tick();
+			}
+
+			const data = await super.get_data();
+			if (props.props.streaming) {
+				data.value = stream_data.value;
+			}
+
+			return data;
+		}
+	}
+
+	const props = $props();
+	const gradio = new ImageGradio(props);
+
+	let fullscreen = $state(false);
+	let dragging = $state(false);
+	let active_source = $derived.by(() =>
+		gradio.props.sources ? gradio.props.sources[0] : null
+	);
+
+	let upload_component: ImageUploader;
+	const handle_drag_event = (event: Event): void => {
+		const drag_event = event as DragEvent;
+		drag_event.preventDefault();
+		drag_event.stopPropagation();
+		if (drag_event.type === "dragenter" || drag_event.type === "dragover") {
+			dragging = true;
+		} else if (drag_event.type === "dragleave") {
+			dragging = false;
+		}
+	};
+
+	const handle_drop = (event: Event): void => {
+		if (gradio.shared.interactive) {
+			const drop_event = event as DragEvent;
+			drop_event.preventDefault();
+			drop_event.stopPropagation();
+			dragging = false;
+
+			if (upload_component) {
+				upload_component.loadFilesFromDrop(drop_event);
+			}
+		}
+	};
+
+	let old_value = $state(gradio.props.value);
+
+	$effect(() => {
+		if (old_value != gradio.props.value) {
+			old_value = gradio.props.value;
+			gradio.dispatch("change");
+		}
+	});
+
+	let status = $derived(gradio?.shared?.loading_status.stream_state);
 </script>
 
-{#if !interactive}
+{#if !gradio.shared.interactive}
 	<Block
-		{visible}
+		visible={gradio.shared.visible}
 		variant={"solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
-		{elem_id}
-		{elem_classes}
-		height={height || undefined}
-		{width}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		height={gradio.props.height || undefined}
+		width={gradio.props.width}
 		allow_overflow={false}
-		{container}
-		{scale}
-		{min_width}
+		container={gradio.shared.container}
+		scale{gradio.shared.scale}
+		min_width={gradio.shared.min_width}
 		bind:fullscreen
 	>
 		<StatusTracker
-			autoscroll={gradio.autoscroll}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
+			{...gradio.shared.loading_status}
 		/>
 		<StaticImage
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
@@ -125,89 +111,103 @@ const handle_drop = (event) => {
 				fullscreen = detail;
 			}}
 			{fullscreen}
-			{value}
-			{label}
-			{show_label}
-			{show_download_button}
-			selectable={_selectable}
-			{show_share_button}
+			value={gradio.props.value}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			selectable={gradio.props._selectable}
 			i18n={gradio.i18n}
-			{show_fullscreen_button}
+			buttons={gradio.props.buttons}
 		/>
 	</Block>
 {:else}
 	<Block
-		{visible}
-		variant={value === null ? "dashed" : "solid"}
+		visible={gradio.shared.visible}
+		variant={gradio.props.value === null ? "dashed" : "solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
-		{elem_id}
-		{elem_classes}
-		height={height || undefined}
-		{width}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		height={gradio.props.height || undefined}
+		width={gradio.props.width}
 		allow_overflow={false}
-		{container}
-		{scale}
-		{min_width}
+		container={gradio.shared.container}
+		scale={gradio.shared.scale}
+		min_width={gradio.shared.min_width}
 		bind:fullscreen
 		on:dragenter={handle_drag_event}
 		on:dragleave={handle_drag_event}
 		on:dragover={handle_drag_event}
 		on:drop={handle_drop}
 	>
-		<StatusTracker
-			autoscroll={gradio.autoscroll}
-			i18n={gradio.i18n}
-			{...loading_status}
-			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
-		/>
-
+		{#if gradio.shared.loading_status.type === "output"}
+			<StatusTracker
+				autoscroll={gradio.shared.autoscroll}
+				i18n={gradio.i18n}
+				{...gradio.shared.loading_status}
+				on:clear_status={() =>
+					gradio.dispatch("clear_status", gradio.shared.loading_status)}
+			/>
+		{/if}
 		<ImageUploader
+			bind:upload_promise
 			bind:this={upload_component}
-			bind:uploading
 			bind:active_source
-			bind:value
+			bind:value={gradio.props.value}
 			bind:dragging
-			selectable={_selectable}
-			{root}
-			{sources}
+			selectable={gradio.props._selectable}
+			root={gradio.shared.root}
+			sources={gradio.props.sources}
 			{fullscreen}
+			show_fullscreen_button={gradio.props.buttons === null
+				? true
+				: gradio.props.buttons.includes("fullscreen")}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
 				fullscreen = false;
 				gradio.dispatch("clear");
+				gradio.dispatch("input");
+			}}
+			on:stream={({ detail }) => {
+				stream_data = detail;
+				gradio.dispatch("stream", detail);
 			}}
-			on:stream={({ detail }) => gradio.dispatch("stream", detail)}
 			on:drag={({ detail }) => (dragging = detail)}
-			on:upload={() => gradio.dispatch("upload")}
+			on:upload={() => {
+				gradio.dispatch("upload");
+				gradio.dispatch("input");
+			}}
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => {
-				loading_status = loading_status || {};
-				loading_status.status = "error";
+				gradio.shared.loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
 			on:close_stream={() => {
-				gradio.dispatch("close_stream", "stream");
+				gradio.dispatch("close_stream");
 			}}
 			on:fullscreen={({ detail }) => {
 				fullscreen = detail;
 			}}
-			{label}
-			{show_label}
-			{pending}
-			{streaming}
-			{webcam_options}
-			{stream_every}
-			bind:modify_stream={_modify_stream}
-			bind:set_time_limit
-			max_file_size={gradio.max_file_size}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			pending={gradio.shared.loading_status?.status === "pending" ||
+				gradio.shared.loading_status?.status === "streaming"}
+			streaming={gradio.props.streaming}
+			webcam_options={gradio.props.webcam_options}
+			stream_every={gradio.props.stream_every}
+			time_limit={gradio.shared.loading_status?.time_limit}
+			max_file_size={gradio.shared.max_file_size}
 			i18n={gradio.i18n}
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={gradio.client?.stream}
+			upload={(...args) => gradio.shared.client.upload(...args)}
+			stream_handler={gradio.shared.client?.stream}
+			stream_state={status}
 		>
 			{#if active_source === "upload" || !active_source}
-				<UploadText i18n={gradio.i18n} type="image" {placeholder} />
+				<UploadText
+					i18n={gradio.i18n}
+					type="image"
+					placeholder={gradio.props.placeholder}
+				/>
 			{:else if active_source === "clipboard"}
 				<UploadText i18n={gradio.i18n} type="clipboard" mode="short" />
 			{:else}

package/dist/Index.svelte.d.ts

@@ -1,183 +1,8 @@
-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 { WebcamOptions } from "./shared/types";
-import { type FileData } from "@gradio/client";
-import type { LoadingStatus } from "@gradio/statustracker";
-declare const __propDef: {
-    props: {
-        modify_stream_state?: (state: "open" | "closed" | "waiting") => void;
-        get_stream_state?: () => void;
-        set_time_limit: (arg0: number) => void;
-        value_is_output?: boolean;
-        elem_id?: string;
-        elem_classes?: string[];
-        visible?: boolean | "hidden";
-        value?: null | FileData;
-        label: string;
-        show_label: boolean;
-        show_download_button: boolean;
-        root: string;
-        height: number | undefined;
-        width: number | undefined;
-        stream_every: number;
-        _selectable?: boolean;
-        container?: boolean;
-        scale?: number | null;
-        min_width?: number | undefined;
-        loading_status: LoadingStatus;
-        show_share_button?: boolean;
-        sources?: ("clipboard" | "webcam" | "upload")[];
-        interactive: boolean;
-        streaming: boolean;
-        pending: boolean;
-        placeholder?: string | undefined;
-        show_fullscreen_button: boolean;
-        input_ready: boolean;
-        webcam_options: WebcamOptions;
-        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: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-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 | "hidden" | undefined;
-    /**accessor*/
-    set visible(_: boolean | "hidden" | undefined);
-    get value(): any;
-    /**accessor*/
-    set value(_: any);
-    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(): ("clipboard" | "upload" | "webcam")[] | undefined;
-    /**accessor*/
-    set sources(_: ("clipboard" | "upload" | "webcam")[] | undefined);
-    get interactive(): boolean;
-    /**accessor*/
-    set interactive(_: boolean);
-    get streaming(): boolean;
-    /**accessor*/
-    set streaming(_: boolean);
-    get pending(): boolean;
-    /**accessor*/
-    set pending(_: boolean);
-    get placeholder(): string | undefined;
-    /**accessor*/
-    set placeholder(_: string | undefined);
-    get show_fullscreen_button(): boolean;
-    /**accessor*/
-    set show_fullscreen_button(_: boolean);
-    get input_ready(): boolean;
-    /**accessor*/
-    set input_ready(_: boolean);
-    get webcam_options(): WebcamOptions;
-    /**accessor*/
-    set webcam_options(_: WebcamOptions);
-    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;
-    }>);
-}
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/shared/Image.svelte

@@ -1,8 +1,25 @@
-<script>export let src = void 0;
+<script lang="ts">
+	let {
+		src,
+		restProps,
+		data_testid,
+		class_names
+	}: {
+		src: string;
+		restProps: object;
+		data_testid: string;
+		class_names: string[];
+	} = $props();
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
-<img {src} {...$$restProps} on:load />
+<img
+	{src}
+	class={(class_names || []).join(" ")}
+	data-testid={data_testid}
+	{...restProps}
+	on:load
+/>
 
 <style>
 	img {

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

@@ -1,21 +1,26 @@
-import { SvelteComponent } from "svelte";
-import type { HTMLImgAttributes } from "svelte/elements";
-declare const __propDef: {
-    props: HTMLImgAttributes & {
-        "data-testid"?: string;
-    };
-    events: {
-        load: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
+type $$ComponentProps = {
+    src: string;
+    restProps: object;
+    data_testid: string;
+    class_names: string[];
 };
-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> {
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Image: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
+    load: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Image = InstanceType<typeof Image>;
+export default Image;