@gradio/image 0.26.3 → 0.28.0

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

@@ -1,26 +1,12 @@
+import type { HTMLImgAttributes } from "svelte/elements";
 type $$ComponentProps = {
-    src: string;
-    restProps: object;
-    data_testid: string;
-    class_names: string[];
+    src?: string;
+    restProps?: Record<string, any>;
+    data_testid?: string;
+    class_names?: string[];
+    onload?: HTMLImgAttributes["onload"];
+    [key: string]: any;
 };
-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;
-}
-declare const Image: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
-    load: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Image = InstanceType<typeof Image>;
+declare const Image: import("svelte").Component<$$ComponentProps, {}, "">;
+type Image = ReturnType<typeof Image>;
 export default Image;

package/dist/shared/ImagePreview.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
 	import type { SelectData } from "@gradio/utils";
 	import { uploadToHuggingFace } from "@gradio/utils";
 	import {
@@ -19,27 +18,44 @@
 	import type { I18nFormatter } from "@gradio/utils";
 	import type { FileData } from "@gradio/client";
 
-	export let value: null | FileData;
-	export let label: string | undefined = undefined;
-	export let show_label: boolean;
-	export let buttons: (string | CustomButtonType)[] = [];
-	export let on_custom_button_click: ((id: number) => void) | null = null;
-	export let selectable = false;
-	export let i18n: I18nFormatter;
-	export let display_icon_button_wrapper_top_corner = false;
-	export let fullscreen = false;
-	export let show_button_background = true;
-
-	const dispatch = createEventDispatcher<{
-		change: string;
-		select: SelectData;
-		fullscreen: boolean;
-	}>();
+	let {
+		value,
+		label = undefined,
+		show_label,
+		buttons = [],
+		on_custom_button_click = null,
+		selectable = false,
+		i18n,
+		display_icon_button_wrapper_top_corner = false,
+		fullscreen = $bindable(false),
+		show_button_background = true,
+		onselect,
+		onfullscreen,
+		onshare,
+		onerror,
+		onload
+	}: {
+		value: null | FileData;
+		label?: string;
+		show_label: boolean;
+		buttons?: (string | CustomButtonType)[];
+		on_custom_button_click?: ((id: number) => void) | null;
+		selectable?: boolean;
+		i18n: I18nFormatter;
+		display_icon_button_wrapper_top_corner?: boolean;
+		fullscreen?: boolean;
+		show_button_background?: boolean;
+		onselect?: (value: SelectData) => void;
+		onfullscreen?: (fullscreen: boolean) => void;
+		onshare?: (detail: unknown) => void;
+		onerror?: (error: string) => void;
+		onload?: () => void;
+	} = $props();
 
 	const handle_click = (evt: MouseEvent): void => {
 		let coordinates = get_coordinates_of_clicked_image(evt);
 		if (coordinates) {
-			dispatch("select", { index: coordinates, value: null });
+			onselect?.({ index: coordinates, value: null });
 		}
 	};
 
@@ -66,7 +82,7 @@
 					{fullscreen}
 					onclick={(is_fullscreen) => {
 						fullscreen = is_fullscreen;
-						dispatch("fullscreen", is_fullscreen);
+						onfullscreen?.(is_fullscreen);
 					}}
 				/>
 			{/if}
@@ -78,8 +94,8 @@
 			{#if buttons.some((btn) => typeof btn === "string" && btn === "share")}
 				<ShareButton
 					{i18n}
-					on:share
-					on:error
+					onshare={(detail) => onshare?.(detail)}
+					onerror={(detail) => onerror?.(detail)}
 					formatter={async (value) => {
 						if (!value) return "";
 						let url = await uploadToHuggingFace(value, "url");
@@ -89,12 +105,12 @@
 				/>
 			{/if}
 		</IconButtonWrapper>
-		<button on:click={handle_click}>
+		<button onclick={handle_click}>
 			<div class:selectable class="image-frame">
 				<Image
 					src={value.url}
 					restProps={{ loading: "lazy", alt: "" }}
-					on:load
+					{onload}
 				/>
 			</div>
 		</button>

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

@@ -2,22 +2,9 @@ import type { SelectData } from "@gradio/utils";
 import type { CustomButton as CustomButtonType } from "@gradio/utils";
 import type { I18nFormatter } from "@gradio/utils";
 import type { FileData } from "@gradio/client";
-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;
-}
-declare const ImagePreview: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value: null | FileData;
-    label?: string | undefined;
+    label?: string;
     show_label: boolean;
     buttons?: (string | CustomButtonType)[];
     on_custom_button_click?: ((id: number) => void) | null;
@@ -26,15 +13,12 @@ declare const ImagePreview: $$__sveltets_2_IsomorphicComponent<{
     display_icon_button_wrapper_top_corner?: boolean;
     fullscreen?: boolean;
     show_button_background?: boolean;
-}, {
-    share: CustomEvent<import("@gradio/utils").ShareData>;
-    error: CustomEvent<string>;
-    load: Event;
-    change: CustomEvent<string>;
-    select: CustomEvent<SelectData>;
-    fullscreen: CustomEvent<boolean>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ImagePreview = InstanceType<typeof ImagePreview>;
+    onselect?: (value: SelectData) => void;
+    onfullscreen?: (fullscreen: boolean) => void;
+    onshare?: (detail: unknown) => void;
+    onerror?: (error: string) => void;
+    onload?: () => void;
+};
+declare const ImagePreview: import("svelte").Component<$$ComponentProps, {}, "fullscreen">;
+type ImagePreview = ReturnType<typeof ImagePreview>;
 export default ImagePreview;

package/dist/shared/ImageUploader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, tick } from "svelte";
+	import { tick, type Snippet } from "svelte";
 	import { BlockLabel, IconButtonWrapper, IconButton } from "@gradio/atoms";
 	import { Clear, Image as ImageIcon } from "@gradio/icons";
 	import { FullscreenButton } from "@gradio/atoms";
@@ -17,36 +17,80 @@
 	import Image from "./Image.svelte";
 	import type { Base64File, WebcamOptions } from "./types";
 
-	export let value: null | FileData | Base64File = null;
-	export let label: string | undefined = undefined;
-	export let show_label: boolean;
-
 	type source_type = "upload" | "webcam" | "clipboard" | "microphone" | null;
 
-	export let sources: source_type[] = ["upload", "clipboard", "webcam"];
-	export let streaming = false;
-	export let pending = false;
-	export let webcam_options: WebcamOptions;
-	export let selectable = false;
-	export let root: string;
-	export let i18n: I18nFormatter;
-	export let max_file_size: number | null = null;
-	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let stream_every: number;
-	export let time_limit: number;
-	export let show_fullscreen_button = true;
-	export let stream_state: "open" | "waiting" | "closed" = "closed";
-	export let upload_promise: Promise<any> | null = null;
-	export let onerror: ((error: string) => void) | undefined = undefined;
+	let {
+		value = $bindable<null | FileData | Base64File>(null),
+		label = undefined,
+		show_label,
+		sources = ["upload", "clipboard", "webcam"],
+		streaming = false,
+		pending = $bindable(false),
+		webcam_options,
+		selectable = false,
+		root,
+		i18n,
+		max_file_size = null,
+		upload,
+		stream_handler,
+		stream_every,
+		time_limit,
+		show_fullscreen_button = true,
+		stream_state = "closed",
+		upload_promise = $bindable<Promise<any> | null>(null),
+		onerror,
+		uploading = $bindable(false),
+		active_source = $bindable<source_type>(null),
+		fullscreen = $bindable(false),
+		dragging = $bindable(false),
+		onchange,
+		onstream,
+		onclear,
+		ondrag,
+		onupload,
+		onselect,
+		onfullscreen,
+		onclose_stream,
+		children
+	}: {
+		value?: null | FileData | Base64File;
+		label?: string;
+		show_label: boolean;
+		sources?: source_type[];
+		streaming?: boolean;
+		pending?: boolean;
+		webcam_options: WebcamOptions;
+		selectable?: boolean;
+		root: string;
+		i18n: I18nFormatter;
+		max_file_size?: number | null;
+		upload: Client["upload"];
+		stream_handler: Client["stream"];
+		stream_every: number;
+		time_limit: number;
+		show_fullscreen_button?: boolean;
+		stream_state?: "open" | "waiting" | "closed";
+		upload_promise?: Promise<any> | null;
+		onerror?: (error: string) => void;
+		uploading?: boolean;
+		active_source?: source_type;
+		fullscreen?: boolean;
+		dragging?: boolean;
+		onchange?: (value?: null | FileData | Base64File) => void;
+		onstream?: (value: ValueData) => void;
+		onclear?: () => void;
+		ondrag?: (dragging: boolean) => void;
+		onupload?: () => void;
+		onselect?: (value: SelectData) => void;
+		onfullscreen?: (fullscreen: boolean) => void;
+		onclose_stream?: () => void;
+		children?: Snippet;
+	} = $props();
 
 	let upload_input: Upload;
-	export let uploading = false;
-	export let active_source: source_type = null;
-	export let fullscreen = false;
 
-	let files: FileData[] = [];
-	let upload_id: string;
+	let files = $state<FileData[]>([]);
+	let upload_id = $state("");
 
 	async function handle_upload(detail: FileData): Promise<void> {
 		if (!streaming) {
@@ -62,14 +106,14 @@
 			}
 
 			await tick();
-			dispatch("upload");
+			onupload?.();
 		}
 	}
 
 	function handle_clear(): void {
 		value = null;
-		dispatch("clear");
-		dispatch("change", null);
+		onclear?.();
+		onchange?.(null);
 	}
 
 	function handle_remove_image_click(event: MouseEvent): void {
@@ -82,7 +126,7 @@
 		event: "change" | "stream" | "upload"
 	): Promise<void> {
 		if (event === "stream") {
-			dispatch("stream", {
+			onstream?.({
 				value: { url: img_blob } as Base64File,
 				is_value_data: true
 			});
@@ -105,38 +149,31 @@
 		if (event === "change" || event === "upload") {
 			value = f?.[0] || null;
 			await tick();
-			dispatch("change");
+			onchange?.();
 		}
 		pending = false;
 	}
 
-	$: active_streaming = streaming && active_source === "webcam";
-	$: if (uploading && !active_streaming) value = null;
-
-	const dispatch = createEventDispatcher<{
-		change?: never;
-		stream: ValueData;
-		clear?: never;
-		drag: boolean;
-		upload?: never;
-		select: SelectData;
-		end_stream: never;
-	}>();
-
-	export let dragging = false;
-
-	$: dispatch("drag", dragging);
+	let active_streaming = $derived(streaming && active_source === "webcam");
+	$effect(() => {
+		if (uploading && !active_streaming) value = null;
+	});
+	$effect(() => {
+		ondrag?.(dragging);
+	});
 
 	function handle_click(evt: MouseEvent): void {
 		let coordinates = get_coordinates_of_clicked_image(evt);
 		if (coordinates) {
-			dispatch("select", { index: coordinates, value: null });
+			onselect?.({ index: coordinates, value: null });
 		}
 	}
 
-	$: if (!active_source && sources) {
-		active_source = sources[0];
-	}
+	$effect(() => {
+		if (!active_source && sources) {
+			active_source = sources[0];
+		}
+	});
 
 	async function handle_select_source(
 		source: (typeof sources)[number]
@@ -184,7 +221,13 @@
 	<IconButtonWrapper>
 		{#if value?.url && !active_streaming}
 			{#if show_fullscreen_button}
-				<FullscreenButton {fullscreen} on:fullscreen />
+				<FullscreenButton
+					{fullscreen}
+					onclick={(is_fullscreen) => {
+						fullscreen = is_fullscreen;
+						onfullscreen?.(is_fullscreen);
+					}}
+				/>
 			{/if}
 			<IconButton
 				Icon={Clear}
@@ -198,8 +241,8 @@
 		class="upload-container"
 		class:reduced-height={sources.length > 1}
 		style:width={value ? "auto" : "100%"}
-		on:dragover={on_drag_over}
-		on:drop={on_drop}
+		ondragover={on_drag_over}
+		ondrop={on_drop}
 	>
 		<Upload
 			bind:upload_promise
@@ -218,7 +261,7 @@
 			aria_label={i18n("image.drop_to_upload")}
 		>
 			{#if value === null}
-				<slot />
+				{#if children}{@render children()}{/if}
 			{/if}
 		</Upload>
 		{#if active_source === "webcam" && !streaming && pending}
@@ -227,12 +270,10 @@
 			<Webcam
 				{root}
 				{value}
-				on:capture={(e) => handle_save(e.detail, "change")}
-				on:stream={(e) => handle_save(e.detail, "stream")}
-				on:error
-				on:drag
-				on:upload={(e) => handle_save(e.detail, "upload")}
-				on:close_stream
+				oncapture={(detail) => handle_save(detail, "change")}
+				onstream={(detail) => handle_save(detail, "stream")}
+				{onerror}
+				{onclose_stream}
 				{stream_state}
 				mirror_webcam={webcam_options.mirror}
 				{stream_every}
@@ -247,7 +288,7 @@
 		{:else if value !== null && !streaming}
 			<!-- svelte-ignore a11y-click-events-have-key-events-->
 			<!-- svelte-ignore a11y-no-static-element-interactions-->
-			<div class:selectable class="image-frame" on:click={handle_click}>
+			<div class:selectable class="image-frame" onclick={handle_click}>
 				<Image src={value.url} restProps={{ alt: value.alt_text }} />
 			</div>
 		{/if}
@@ -257,7 +298,7 @@
 			{sources}
 			bind:active_source
 			{handle_clear}
-			handle_select={handle_select_source}
+			handle_select={(source) => handle_select_source(source as source_type)}
 		/>
 	{/if}
 </div>

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

@@ -1,29 +1,13 @@
+import { type Snippet } from "svelte";
 import { type SelectData, type I18nFormatter, type ValueData } from "@gradio/utils";
 import { FileData, type Client } from "@gradio/client";
 import type { Base64File, WebcamOptions } from "./types";
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ImageUploader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+type source_type = "upload" | "webcam" | "clipboard" | "microphone" | null;
+type $$ComponentProps = {
     value?: null | FileData | Base64File;
-    label?: string | undefined;
+    label?: string;
     show_label: boolean;
-    sources?: ("upload" | "clipboard" | "microphone" | "webcam" | null)[];
+    sources?: source_type[];
     streaming?: boolean;
     pending?: boolean;
     webcam_options: WebcamOptions;
@@ -38,28 +22,21 @@ declare const ImageUploader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
     show_fullscreen_button?: boolean;
     stream_state?: "open" | "waiting" | "closed";
     upload_promise?: Promise<any> | null;
-    onerror?: ((error: string) => void) | undefined;
+    onerror?: (error: string) => void;
     uploading?: boolean;
-    active_source?: "upload" | "clipboard" | "microphone" | "webcam" | null;
+    active_source?: source_type;
     fullscreen?: boolean;
     dragging?: boolean;
-}, {
-    default: {};
-}>, {
-    fullscreen: any;
-    error: CustomEvent<string>;
-    drag: CustomEvent<any>;
-    close_stream: CustomEvent<undefined>;
-    change?: CustomEvent<undefined> | undefined;
-    stream: CustomEvent<ValueData>;
-    clear?: CustomEvent<undefined> | undefined;
-    upload?: CustomEvent<undefined> | undefined;
-    select: CustomEvent<SelectData>;
-    end_stream: CustomEvent<never>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ImageUploader = InstanceType<typeof ImageUploader>;
+    onchange?: (value?: null | FileData | Base64File) => void;
+    onstream?: (value: ValueData) => void;
+    onclear?: () => void;
+    ondrag?: (dragging: boolean) => void;
+    onupload?: () => void;
+    onselect?: (value: SelectData) => void;
+    onfullscreen?: (fullscreen: boolean) => void;
+    onclose_stream?: () => void;
+    children?: Snippet;
+};
+declare const ImageUploader: import("svelte").Component<$$ComponentProps, {}, "pending" | "value" | "active_source" | "fullscreen" | "uploading" | "dragging" | "upload_promise">;
+type ImageUploader = ReturnType<typeof ImageUploader>;
 export default ImageUploader;