@gradio/image 0.26.3 → 0.28.0

package/dist/shared/Webcam.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onDestroy, onMount } from "svelte";
+	import { onDestroy, onMount } from "svelte";
 	import {
 		Camera,
 		Circle,
@@ -20,33 +20,51 @@
 	import type { Base64File } from "./types";
 
 	let video_source: HTMLVideoElement;
-	let available_video_devices: MediaDeviceInfo[] = [];
-	let selected_device: MediaDeviceInfo | null = null;
-
-	export let stream_state: "open" | "waiting" | "closed" = "closed";
+	let available_video_devices = $state<MediaDeviceInfo[]>([]);
+	let selected_device = $state<MediaDeviceInfo | null>(null);
 
 	let canvas: HTMLCanvasElement;
-	export let streaming = false;
-	export let pending = false;
-	export let root = "";
-	export let stream_every = 1;
-
-	export let mode: "image" | "video" = "image";
-	export let mirror_webcam: boolean;
-	export let include_audio: boolean;
-	export let webcam_constraints: { [key: string]: any } | null = null;
-	export let i18n: I18nFormatter;
-	export let upload: Client["upload"];
-	export let value: FileData | null | Base64File = null;
-	export let time_limit: number | null = null;
-	const dispatch = createEventDispatcher<{
-		stream: Blob | string;
-		capture: FileData | Blob | null;
-		error: string;
-		start_recording: undefined;
-		stop_recording: undefined;
-		close_stream: undefined;
-	}>();
+	let {
+		stream_state = "closed",
+		streaming = false,
+		pending = false,
+		root = "",
+		stream_every = 1,
+		mode = "image",
+		mirror_webcam,
+		include_audio,
+		webcam_constraints = null,
+		i18n,
+		upload,
+		value = null,
+		time_limit = null,
+		onstream,
+		oncapture,
+		onerror,
+		onstart_recording,
+		onstop_recording,
+		onclose_stream
+	}: {
+		stream_state?: "open" | "waiting" | "closed";
+		streaming?: boolean;
+		pending?: boolean;
+		root?: string;
+		stream_every?: number;
+		mode?: "image" | "video";
+		mirror_webcam: boolean;
+		include_audio: boolean;
+		webcam_constraints?: { [key: string]: any } | null;
+		i18n: I18nFormatter;
+		upload: Client["upload"];
+		value?: FileData | null | Base64File;
+		time_limit?: number | null;
+		onstream?: (value: Blob | string) => void;
+		oncapture?: (value: FileData | Blob | null) => void;
+		onerror?: (error: string) => void;
+		onstart_recording?: () => void;
+		onstop_recording?: () => void;
+		onclose_stream?: () => void;
+	} = $props();
 
 	onMount(() => {
 		canvas = document.createElement("canvas");
@@ -101,11 +119,11 @@
 				});
 
 			if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-				dispatch("error", i18n("image.no_webcam_support"));
+				onerror?.(i18n("image.no_webcam_support"));
 			}
 		} catch (err) {
 			if (err instanceof DOMException && err.name == "NotAllowedError") {
-				dispatch("error", i18n("image.allow_webcam_access"));
+				onerror?.(i18n("image.allow_webcam_access"));
 			} else {
 				throw err;
 			}
@@ -139,13 +157,17 @@
 			}
 			if (streaming) {
 				const image_data = canvas.toDataURL("image/jpeg");
-				dispatch("stream", image_data);
+				onstream?.(image_data);
 				return;
 			}
 
 			canvas.toBlob(
 				(blob) => {
-					dispatch(streaming ? "stream" : "capture", blob);
+					if (streaming) {
+						onstream?.(blob as Blob);
+					} else {
+						oncapture?.(blob);
+					}
 				},
 				`image/${streaming ? "jpeg" : "png"}`,
 				0.8
@@ -153,7 +175,7 @@
 		}
 	}
 
-	let recording = false;
+	let recording = $state(false);
 	let recorded_blobs: BlobPart[] = [];
 	let stream: MediaStream;
 	let mimeType: string;
@@ -174,13 +196,13 @@
 					let val_ = (
 						(await upload(val, root))?.filter(Boolean) as FileData[]
 					)[0];
-					dispatch("capture", val_);
-					dispatch("stop_recording");
+					oncapture?.(val_);
+					onstop_recording?.();
 				}
 			};
 			ReaderObj.readAsDataURL(video_blob);
 		} else if (typeof MediaRecorder !== "undefined") {
-			dispatch("start_recording");
+			onstart_recording?.();
 			recorded_blobs = [];
 			let validMimeTypes = ["video/webm", "video/mp4"];
 			for (let validMimeType of validMimeTypes) {
@@ -204,7 +226,7 @@
 		recording = !recording;
 	}
 
-	let webcam_accessed = false;
+	let webcam_accessed = $state(false);
 
 	function record_video_or_photo({
 		destroy
@@ -222,11 +244,11 @@
 		}
 
 		if (!recording && stream) {
-			dispatch("close_stream");
+			onclose_stream?.();
 		}
 	}
 
-	let options_open = false;
+	let options_open = $state(false);
 
 	export function click_outside(node: Node, cb: any): any {
 		const handle_click = (event: MouseEvent): void => {
@@ -281,12 +303,12 @@
 			title="grant webcam access"
 			style="height: 100%"
 		>
-			<WebcamPermissions on:click={async () => access_webcam()} />
+			<WebcamPermissions onclick={async () => access_webcam()} />
 		</div>
 	{:else}
 		<div class="button-wrap">
 			<button
-				on:click={() => record_video_or_photo()}
+				onclick={() => record_video_or_photo()}
 				aria-label={mode === "image" ? "capture photo" : "start recording"}
 			>
 				{#if mode === "video" || streaming}
@@ -321,7 +343,7 @@
 			{#if !recording}
 				<button
 					class="icon"
-					on:click={() => (options_open = true)}
+					onclick={() => (options_open = true)}
 					aria-label="select input source"
 				>
 					<DropdownArrow />
@@ -333,14 +355,8 @@
 				class="select-wrap"
 				aria-label="select source"
 				use:click_outside={handle_click_outside}
-				on:change={handle_device_change}
+				onchange={handle_device_change}
 			>
-				<!-- <button
-					class="inset-icon"
-					on:click|stopPropagation={() => (options_open = false)}
-				>
-					<DropdownArrow />
-				</button> -->
 				{#if available_video_devices.length === 0}
 					<option value="">{i18n("common.no_devices")}</option>
 				{:else}

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

@@ -1,20 +1,7 @@
 import type { I18nFormatter } from "@gradio/utils";
 import { type FileData, type Client } from "@gradio/client";
 import type { Base64File } 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;
-}
-declare const Webcam: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     stream_state?: "open" | "waiting" | "closed";
     streaming?: boolean;
     pending?: boolean;
@@ -30,18 +17,15 @@ declare const Webcam: $$__sveltets_2_IsomorphicComponent<{
     upload: Client["upload"];
     value?: FileData | null | Base64File;
     time_limit?: number | null;
-    click_outside?: (node: Node, cb: any) => any;
-}, {
-    stream: CustomEvent<string | Blob>;
-    capture: CustomEvent<Blob | FileData | null>;
-    error: CustomEvent<string>;
-    start_recording: CustomEvent<undefined>;
-    stop_recording: CustomEvent<undefined>;
-    close_stream: CustomEvent<undefined>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+    onstream?: (value: Blob | string) => void;
+    oncapture?: (value: FileData | Blob | null) => void;
+    onerror?: (error: string) => void;
+    onstart_recording?: () => void;
+    onstop_recording?: () => void;
+    onclose_stream?: () => void;
+};
+declare const Webcam: import("svelte").Component<$$ComponentProps, {
     click_outside: (node: Node, cb: any) => any;
-}, string>;
-type Webcam = InstanceType<typeof Webcam>;
+}, "">;
+type Webcam = ReturnType<typeof Webcam>;
 export default Webcam;

package/dist/shared/WebcamPermissions.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
 	import { Webcam } from "@gradio/icons";
-	import { createEventDispatcher } from "svelte";
 
-	const dispatch = createEventDispatcher<{
-		click: undefined;
-	}>();
+	let { onclick }: { onclick?: () => void } = $props();
 </script>
 
-<button style:height="100%" on:click={() => dispatch("click")}>
+<button style:height="100%" {onclick}>
 	<div class="wrap">
 		<span class="icon-wrap">
 			<Webcam />

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

@@ -1,20 +1,6 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const WebcamPermissions: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    click: CustomEvent<undefined>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type WebcamPermissions = InstanceType<typeof WebcamPermissions>;
+type $$ComponentProps = {
+    onclick?: () => void;
+};
+declare const WebcamPermissions: import("svelte").Component<$$ComponentProps, {}, "">;
+type WebcamPermissions = ReturnType<typeof WebcamPermissions>;
 export default WebcamPermissions;

package/dist/shared/types.d.ts

@@ -1,4 +1,4 @@
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { FileData } from "@gradio/client";
 import type { CustomButton } from "@gradio/utils";
 export interface Base64File {

package/dist/shared/utils.js

@@ -7,20 +7,13 @@ export const get_coordinates_of_clicked_image = (evt) => {
         return [NaN, NaN];
     }
     const imageRect = image.getBoundingClientRect();
-    const xScale = image.naturalWidth / imageRect.width;
-    const yScale = image.naturalHeight / imageRect.height;
-    if (xScale > yScale) {
-        const displayed_height = image.naturalHeight / xScale;
-        const y_offset = (imageRect.height - displayed_height) / 2;
-        var x = Math.round((evt.clientX - imageRect.left) * xScale);
-        var y = Math.round((evt.clientY - imageRect.top - y_offset) * xScale);
-    }
-    else {
-        const displayed_width = image.naturalWidth / yScale;
-        const x_offset = (imageRect.width - displayed_width) / 2;
-        var x = Math.round((evt.clientX - imageRect.left - x_offset) * yScale);
-        var y = Math.round((evt.clientY - imageRect.top) * yScale);
-    }
+    // The image is rendered with `object-fit: scale-down`: centered, never
+    // scaled above its natural size, so empty space can appear on both axes.
+    const scale = Math.min(imageRect.width / image.naturalWidth, imageRect.height / image.naturalHeight, 1);
+    const x_offset = (imageRect.width - image.naturalWidth * scale) / 2;
+    const y_offset = (imageRect.height - image.naturalHeight * scale) / 2;
+    const x = Math.round((evt.clientX - imageRect.left - x_offset) / scale);
+    const y = Math.round((evt.clientY - imageRect.top - y_offset) / scale);
     if (x < 0 || x >= image.naturalWidth || y < 0 || y >= image.naturalHeight) {
         return null;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.26.3",
+  "version": "0.28.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,12 +10,12 @@
     "cropperjs": "^2.0.1",
     "lazy-brush": "^2.0.2",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.24.0",
-    "@gradio/icons": "^0.15.1",
-    "@gradio/statustracker": "^0.14.1",
-    "@gradio/upload": "^0.17.9",
-    "@gradio/utils": "^0.12.2",
-    "@gradio/client": "^2.2.0"
+    "@gradio/atoms": "^0.26.0",
+    "@gradio/statustracker": "^0.15.1",
+    "@gradio/client": "^2.3.1",
+    "@gradio/icons": "^0.16.0",
+    "@gradio/upload": "^0.18.1",
+    "@gradio/utils": "^0.13.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

package/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>

package/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>