@gradio/image 0.26.3 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @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
+
+- [#13526](https://github.com/gradio-app/gradio/pull/13526) [`53cb4ca`](https://github.com/gradio-app/gradio/commit/53cb4cae1ec3521e9170d12867253516413ba37a) - Run `pnpm lint` and `pnpm ts:check` on CI.  Thanks @abidlabs!
+
+### Fixes
+
+- [#13532](https://github.com/gradio-app/gradio/pull/13532) [`0a933b4`](https://github.com/gradio-app/gradio/commit/0a933b428f5b2158cb8c764f38abf0da2312d58a) - Fix `gr.SelectData` coordinates when the image in `gr.Image` does not fill its container.  Thanks @hysts!
+- [#13533](https://github.com/gradio-app/gradio/pull/13533) [`e5ec1ca`](https://github.com/gradio-app/gradio/commit/e5ec1ca66c45e7e3a057b75ac2b8b86660b2827b) - Fix fullscreen button not working in ImageSlider, interactive Image, native plots, and AnnotatedImage.  Thanks @hysts!
+
+### Dependency updates
+
+- @gradio/atoms@0.25.0
+- @gradio/statustracker@0.15.0
+- @gradio/utils@0.13.0
+- @gradio/client@2.3.0
+- @gradio/upload@0.18.0
+
+## 0.26.3
+
+### Dependency updates
+
+- @gradio/client@2.2.2
+
+## 0.26.3
+
+### Dependency updates
+
+- @gradio/client@2.2.1
+- @gradio/upload@0.17.10
+
 ## 0.26.3
 
 ### Dependency updates

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/Image.stories.svelte

@@ -1,7 +1,6 @@
 <script module>
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import StaticImage from "./Index.svelte";
-	import { userEvent, within, expect } from "storybook/test";
 	import { allModes } from "../storybook/modes";
 	import { wrapProps } from "../storybook/wrapProps";
 
@@ -37,13 +36,6 @@
 		buttons: ["fullscreen", "download"],
 		webcam_options: { mirror: true, constraints: null }
 	}}
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		const expand_btn = await canvas.findByRole("button", {
-			name: "Fullscreen"
-		});
-		expect(expand_btn).toBeTruthy();
-	}}
 >
 	{#snippet template(args)}
 		<div
@@ -146,41 +138,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="interactive with upload, clipboard, and webcam"
-	args={{
-		sources: ["upload", "clipboard", "webcam"],
-		value: {
-			path: cheetah,
-			url: cheetah,
-			orig_name: "cheetah.jpg"
-		},
-		show_label: false,
-		interactive: true,
-		placeholder: md,
-		buttons: [],
-		webcam_options: { mirror: true, constraints: null }
-	}}
-	parameters={{ chromatic: { disableSnapshot: true } }}
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		const webcamButton = await canvas.findByLabelText("Capture from camera");
-		userEvent.click(webcamButton);
-		userEvent.click(await canvas.findByTitle("grant webcam access"));
-		userEvent.click(await canvas.findByLabelText("Upload file"));
-		userEvent.click(await canvas.findByLabelText("Paste from clipboard"));
-	}}
->
-	{#snippet template(args)}
-		<div
-			class="image-container"
-			style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
-		>
-			<StaticImage {...wrapProps(args)} />
-		</div>
-	{/snippet}
-</Story>
-
 <Story
 	name="interactive with webcam"
 	args={{
@@ -217,28 +174,3 @@
 		</div>
 	{/snippet}
 </Story>
-
-<Story
-	name="interactive webcam with streaming"
-	args={{
-		sources: ["webcam"],
-		interactive: true,
-		value: {
-			path: cheetah,
-			url: cheetah,
-			orig_name: "cheetah.jpg"
-		},
-		streaming: true,
-		buttons: ["download"],
-		webcam_options: { mirror: true, constraints: null }
-	}}
->
-	{#snippet template(args)}
-		<div
-			class="image-container"
-			style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
-		>
-			<StaticImage {...wrapProps(args)} />
-		</div>
-	{/snippet}
-</Story>

package/Image.test.ts

@@ -326,6 +326,25 @@ describe("Props: buttons (static mode)", () => {
 		expect(getByLabelText("Fullscreen")).toBeTruthy();
 	});
 
+	test("clicking the fullscreen button toggles fullscreen in interactive mode", async () => {
+		const { getByLabelText } = await render(Image, {
+			...default_props,
+			interactive: true,
+			value: fake_value,
+			buttons: ["fullscreen"]
+		});
+
+		await fireEvent.click(getByLabelText("Fullscreen"));
+		await waitFor(() => {
+			expect(getByLabelText("Exit fullscreen mode")).toBeVisible();
+		});
+
+		await fireEvent.click(getByLabelText("Exit fullscreen mode"));
+		await waitFor(() => {
+			expect(getByLabelText("Fullscreen")).toBeVisible();
+		});
+	});
+
 	test("empty buttons array shows no action buttons", async () => {
 		const { queryByLabelText } = await render(Image, {
 			...default_props,
@@ -635,6 +654,52 @@ describe("get_coordinates_of_clicked_image", () => {
 		expect(result).toEqual([100, 200]);
 	});
 
+	test("handles image shown at natural size with empty space on both axes", () => {
+		// `object-fit: scale-down` never upscales: a 100x100 natural image in
+		// a 400x300 box is drawn at natural size, centered at offset (150, 100).
+		// Click at (150, 100) = top-left corner of the drawn image.
+		const evt = make_mock_event(
+			150,
+			100,
+			{
+				naturalWidth: 100,
+				naturalHeight: 100
+			},
+			{
+				left: 0,
+				top: 0,
+				width: 400,
+				height: 300
+			}
+		);
+
+		const result = get_coordinates_of_clicked_image(evt);
+		expect(result).toEqual([0, 0]);
+	});
+
+	test("returns null when click is in the empty space around a natural-size image", () => {
+		// 100x100 natural image in a 1920x1080 box: drawn at natural size,
+		// centered at offset (910, 490). A click at (500, 540) is inside the
+		// box but left of the drawn image, so no image pixel is under it.
+		const evt = make_mock_event(
+			500,
+			540,
+			{
+				naturalWidth: 100,
+				naturalHeight: 100
+			},
+			{
+				left: 0,
+				top: 0,
+				width: 1920,
+				height: 1080
+			}
+		);
+
+		const result = get_coordinates_of_clicked_image(evt);
+		expect(result).toBeNull();
+	});
+
 	test("returns [NaN, NaN] when currentTarget is not an Element", () => {
 		const evt = {
 			currentTarget: {},

package/ImageExample.stories.svelte

@@ -24,14 +24,3 @@
 		<Image {...args} />
 	{/snippet}
 </Story>
-
-<Story
-	name="Null"
-	args={{
-		value: null
-	}}
->
-	{#snippet template(args)}
-		<Image {...args} />
-	{/snippet}
-</Story>

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");
 		}
 	});
@@ -100,7 +84,7 @@
 		width={gradio.props.width}
 		allow_overflow={false}
 		container={gradio.shared.container}
-		scale{gradio.shared.scale}
+		scale={gradio.shared.scale}
 		min_width={gradio.shared.min_width}
 		bind:fullscreen
 	>
@@ -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");
 		}
 	});
@@ -100,7 +84,7 @@
 		width={gradio.props.width}
 		allow_overflow={false}
 		container={gradio.shared.container}
-		scale{gradio.shared.scale}
+		scale={gradio.shared.scale}
 		min_width={gradio.shared.min_width}
 		bind:fullscreen
 	>
@@ -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,24 +1,44 @@
 <script lang="ts">
+	import type { HTMLImgAttributes } from "svelte/elements";
+
 	let {
-		src,
-		restProps,
+		src = "",
+		restProps = {},
 		data_testid,
-		class_names
+		class_names = [],
+		onload,
+		...imgProps
 	}: {
-		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;
 	} = $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}
-	on:load
+	{...rest_img_props}
+	{...direct_img_props}
+	{onload}
 />
 
 <style>