@gradio/image 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @gradio/image
 
+## 0.28.0
+
+### Features
+
+- [#13543](https://github.com/gradio-app/gradio/pull/13543) [`0533483`](https://github.com/gradio-app/gradio/commit/0533483bccdee38f334a598f18297e8c02966343) - Migrate Image components to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.15.1
+- @gradio/icons@0.16.0
+- @gradio/atoms@0.26.0
+- @gradio/client@2.3.1
+- @gradio/upload@0.18.1
+
 ## 0.27.0
 
 ### Features

package/Example.svelte

@@ -2,9 +2,15 @@
 	import Image from "./shared/Image.svelte";
 	import type { FileData } from "@gradio/client";
 
-	export let value: null | FileData;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	let {
+		value,
+		type,
+		selected = false
+	}: {
+		value: null | FileData;
+		type: "gallery" | "table";
+		selected?: boolean;
+	} = $props();
 </script>
 
 <div

package/Index.svelte

@@ -19,7 +19,7 @@
 	import type { ImageProps, ImageEvents } from "./shared/types";
 
 	let stream_data = { value: null };
-	let upload_promise = $state<Promise<any>>();
+	let upload_promise = $state<Promise<any> | null>(null);
 	class ImageGradio extends Gradio<ImageEvents, ImageProps> {
 		async get_data() {
 			if (upload_promise) {
@@ -37,50 +37,34 @@
 	}
 
 	const props = $props();
-	const gradio = new ImageGradio(props);
+	const gradio = new ImageGradio(props, { value: null });
 
+	let value = $state(gradio.props.value ?? null);
 	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;
+	$effect(() => {
+		value = gradio.props.value ?? null;
+	});
 
-			if (upload_component) {
-				upload_component.loadFilesFromDrop(drop_event);
-			}
-		}
-	};
+	$effect(() => {
+		gradio.props.value = value;
+	});
 
-	let old_value = gradio.props.value;
+	let old_value = value;
 	let mounted = false;
 
 	$effect(() => {
 		if (!mounted) {
-			old_value = gradio.props.value;
+			old_value = value;
 			mounted = true;
 			return;
 		}
-		if (old_value !== gradio.props.value) {
-			old_value = gradio.props.value;
+		if (old_value !== value) {
+			old_value = value;
 			gradio.dispatch("change");
 		}
 	});
@@ -112,14 +96,14 @@
 				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 		<StaticImage
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => gradio.dispatch("error", detail)}
-			on:fullscreen={({ detail }) => {
+			onselect={(detail) => gradio.dispatch("select", detail)}
+			onshare={(detail) => gradio.dispatch("share", detail)}
+			onerror={(detail) => gradio.dispatch("error", detail)}
+			onfullscreen={(detail) => {
 				fullscreen = detail;
 			}}
 			{fullscreen}
-			value={gradio.props.value}
+			{value}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			selectable={gradio.props._selectable}
@@ -145,10 +129,6 @@
 		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}
 	>
 		{#if gradio.shared.loading_status.type === "output" || gradio.shared.loading_status.validation_error}
 			<StatusTracker
@@ -161,9 +141,8 @@
 		{/if}
 		<ImageUploader
 			bind:upload_promise
-			bind:this={upload_component}
 			bind:active_source
-			bind:value={gradio.props.value}
+			bind:value
 			bind:dragging
 			selectable={gradio.props._selectable}
 			root={gradio.shared.root}
@@ -174,31 +153,29 @@
 				: gradio.props.buttons.some(
 						(btn) => typeof btn === "string" && btn === "fullscreen"
 					)}
-			on:edit={() => gradio.dispatch("edit")}
-			on:clear={() => {
+			onclear={() => {
 				fullscreen = false;
 				gradio.dispatch("clear");
 				gradio.dispatch("input");
 			}}
-			on:stream={({ detail }) => {
+			onstream={(detail) => {
 				stream_data = detail;
 				gradio.dispatch("stream", detail);
 			}}
-			on:drag={({ detail }) => (dragging = detail)}
-			on:upload={() => {
+			ondrag={(detail) => (dragging = detail)}
+			onupload={() => {
 				gradio.dispatch("upload");
 				gradio.dispatch("input");
 			}}
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
+			onselect={(detail) => gradio.dispatch("select", detail)}
 			onerror={(detail) => {
 				gradio.shared.loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
-			on:close_stream={() => {
+			onclose_stream={() => {
 				gradio.dispatch("close_stream");
 			}}
-			on:fullscreen={({ detail }) => {
+			onfullscreen={(detail) => {
 				fullscreen = detail;
 			}}
 			label={gradio.shared.label}

package/dist/Example.svelte

@@ -2,9 +2,15 @@
 	import Image from "./shared/Image.svelte";
 	import type { FileData } from "@gradio/client";
 
-	export let value: null | FileData;
-	export let type: "gallery" | "table";
-	export let selected = false;
+	let {
+		value,
+		type,
+		selected = false
+	}: {
+		value: null | FileData;
+		type: "gallery" | "table";
+		selected?: boolean;
+	} = $props();
 </script>
 
 <div

package/dist/Example.svelte.d.ts

@@ -1,23 +1,9 @@
 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 Example: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value: null | FileData;
     type: "gallery" | "table";
     selected?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Example = InstanceType<typeof Example>;
+};
+declare const Example: import("svelte").Component<$$ComponentProps, {}, "">;
+type Example = ReturnType<typeof Example>;
 export default Example;

package/dist/Index.svelte

@@ -19,7 +19,7 @@
 	import type { ImageProps, ImageEvents } from "./shared/types";
 
 	let stream_data = { value: null };
-	let upload_promise = $state<Promise<any>>();
+	let upload_promise = $state<Promise<any> | null>(null);
 	class ImageGradio extends Gradio<ImageEvents, ImageProps> {
 		async get_data() {
 			if (upload_promise) {
@@ -37,50 +37,34 @@
 	}
 
 	const props = $props();
-	const gradio = new ImageGradio(props);
+	const gradio = new ImageGradio(props, { value: null });
 
+	let value = $state(gradio.props.value ?? null);
 	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;
+	$effect(() => {
+		value = gradio.props.value ?? null;
+	});
 
-			if (upload_component) {
-				upload_component.loadFilesFromDrop(drop_event);
-			}
-		}
-	};
+	$effect(() => {
+		gradio.props.value = value;
+	});
 
-	let old_value = gradio.props.value;
+	let old_value = value;
 	let mounted = false;
 
 	$effect(() => {
 		if (!mounted) {
-			old_value = gradio.props.value;
+			old_value = value;
 			mounted = true;
 			return;
 		}
-		if (old_value !== gradio.props.value) {
-			old_value = gradio.props.value;
+		if (old_value !== value) {
+			old_value = value;
 			gradio.dispatch("change");
 		}
 	});
@@ -112,14 +96,14 @@
 				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 		<StaticImage
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => gradio.dispatch("error", detail)}
-			on:fullscreen={({ detail }) => {
+			onselect={(detail) => gradio.dispatch("select", detail)}
+			onshare={(detail) => gradio.dispatch("share", detail)}
+			onerror={(detail) => gradio.dispatch("error", detail)}
+			onfullscreen={(detail) => {
 				fullscreen = detail;
 			}}
 			{fullscreen}
-			value={gradio.props.value}
+			{value}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			selectable={gradio.props._selectable}
@@ -145,10 +129,6 @@
 		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}
 	>
 		{#if gradio.shared.loading_status.type === "output" || gradio.shared.loading_status.validation_error}
 			<StatusTracker
@@ -161,9 +141,8 @@
 		{/if}
 		<ImageUploader
 			bind:upload_promise
-			bind:this={upload_component}
 			bind:active_source
-			bind:value={gradio.props.value}
+			bind:value
 			bind:dragging
 			selectable={gradio.props._selectable}
 			root={gradio.shared.root}
@@ -174,31 +153,29 @@
 				: gradio.props.buttons.some(
 						(btn) => typeof btn === "string" && btn === "fullscreen"
 					)}
-			on:edit={() => gradio.dispatch("edit")}
-			on:clear={() => {
+			onclear={() => {
 				fullscreen = false;
 				gradio.dispatch("clear");
 				gradio.dispatch("input");
 			}}
-			on:stream={({ detail }) => {
+			onstream={(detail) => {
 				stream_data = detail;
 				gradio.dispatch("stream", detail);
 			}}
-			on:drag={({ detail }) => (dragging = detail)}
-			on:upload={() => {
+			ondrag={(detail) => (dragging = detail)}
+			onupload={() => {
 				gradio.dispatch("upload");
 				gradio.dispatch("input");
 			}}
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
+			onselect={(detail) => gradio.dispatch("select", detail)}
 			onerror={(detail) => {
 				gradio.shared.loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
-			on:close_stream={() => {
+			onclose_stream={() => {
 				gradio.dispatch("close_stream");
 			}}
-			on:fullscreen={({ detail }) => {
+			onfullscreen={(detail) => {
 				fullscreen = detail;
 			}}
 			label={gradio.shared.label}

package/dist/shared/Image.svelte

@@ -1,27 +1,44 @@
 <script lang="ts">
+	import type { HTMLImgAttributes } from "svelte/elements";
+
 	let {
 		src = "",
 		restProps = {},
 		data_testid,
 		class_names = [],
+		onload,
 		...imgProps
 	}: {
 		src?: string;
 		restProps?: Record<string, any>;
 		data_testid?: string;
 		class_names?: string[];
+		onload?: HTMLImgAttributes["onload"];
 		[key: string]: any;
 	} = $props();
+
+	const without_class = ({
+		class: _class,
+		...props
+	}: Record<string, any>): Record<string, any> => props;
+
+	let rest_img_props = $derived(without_class(restProps));
+	let direct_img_props = $derived(without_class(imgProps));
+	let classes = $derived(
+		[class_names.join(" "), restProps.class, imgProps.class]
+			.filter(Boolean)
+			.join(" ")
+	);
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <img
 	{src}
-	class={class_names.join(" ")}
+	class={classes}
 	data-testid={data_testid}
-	{...restProps}
-	{...imgProps}
-	on:load
+	{...rest_img_props}
+	{...direct_img_props}
+	{onload}
 />
 
 <style>

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

@@ -1,27 +1,12 @@
+import type { HTMLImgAttributes } from "svelte/elements";
 type $$ComponentProps = {
     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;