@gradio/image 0.26.3 → 0.28.0

package/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/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/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/shared/types.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";
 

package/shared/utils.ts

@@ -9,19 +9,17 @@ export const get_coordinates_of_clicked_image = (
 	}
 
 	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;
 	}