@gradio/image 0.27.0 → 0.28.0

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,39 +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;
-		fullscreen: boolean;
-	}>();
-
-	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]
@@ -189,7 +225,7 @@
 					{fullscreen}
 					onclick={(is_fullscreen) => {
 						fullscreen = is_fullscreen;
-						dispatch("fullscreen", is_fullscreen);
+						onfullscreen?.(is_fullscreen);
 					}}
 				/>
 			{/if}
@@ -205,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
@@ -225,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}
@@ -234,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}
@@ -254,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}

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: {};
-}>, {
-    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>;
-    fullscreen: CustomEvent<boolean>;
-} & {
-    [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;

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

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.27.0",
+  "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.25.0",
-    "@gradio/client": "^2.3.0",
-    "@gradio/icons": "^0.15.1",
-    "@gradio/statustracker": "^0.15.0",
-    "@gradio/utils": "^0.13.0",
-    "@gradio/upload": "^0.18.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"