@gradio/image 0.23.2-dev.0 → 0.24.0-dev.2

package/dist/shared/types.d.ts

@@ -1,3 +1,5 @@
+import type { LoadingStatus } from "@gradio/statustracker";
+import type { FileData } from "@gradio/client";
 export interface Base64File {
     url: string;
     alt_text: string;
@@ -6,3 +8,31 @@ export interface WebcamOptions {
     mirror: boolean;
     constraints: MediaStreamConstraints;
 }
+export interface ImageProps {
+    _selectable: boolean;
+    sources: ("clipboard" | "webcam" | "upload")[];
+    height: number;
+    width: number;
+    webcam_options: WebcamOptions;
+    value: FileData | null;
+    buttons: string[];
+    pending: boolean;
+    streaming: boolean;
+    stream_every: number;
+    input_ready: boolean;
+    placeholder: string;
+    watermark: FileData | null;
+}
+export interface ImageEvents {
+    clear: void;
+    change: any;
+    stream: any;
+    select: any;
+    upload: any;
+    input: any;
+    clear_status: LoadingStatus;
+    share: any;
+    error: any;
+    close_stream: void;
+    edit: void;
+}

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "@gradio/image",
-  "version": "0.23.2-dev.0",
+  "version": "0.24.0-dev.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "cropperjs": "^1.5.12",
-    "lazy-brush": "^1.0.1",
+    "cropperjs": "^2.0.1",
+    "lazy-brush": "^2.0.2",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.18.1",
-    "@gradio/statustracker": "^0.11.1",
-    "@gradio/icons": "^0.14.0",
-    "@gradio/client": "^2.0.0-dev.0",
-    "@gradio/utils": "^0.10.2",
-    "@gradio/upload": "^0.17.2-dev.0"
+    "@gradio/atoms": "^0.19.0-dev.1",
+    "@gradio/client": "^2.0.0-dev.2",
+    "@gradio/statustracker": "^0.12.0-dev.1",
+    "@gradio/upload": "^0.17.2-dev.2",
+    "@gradio/utils": "^0.10.3-dev.0",
+    "@gradio/icons": "^0.15.0-dev.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.14.0"
+    "@gradio/preview": "^0.15.0-dev.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
@@ -46,7 +46,7 @@
     }
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.43.4"
   },
   "repository": {
     "type": "git",

package/shared/Image.svelte

@@ -1,16 +1,25 @@
 <script lang="ts">
-	import type { HTMLImgAttributes } from "svelte/elements";
-
-	interface Props extends HTMLImgAttributes {
-		"data-testid"?: string;
-	}
-	type $$Props = Props;
-
-	export let src: HTMLImgAttributes["src"] = undefined;
+	let {
+		src,
+		restProps,
+		data_testid,
+		class_names
+	}: {
+		src: string;
+		restProps: object;
+		data_testid: string;
+		class_names: string[];
+	} = $props();
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
-<img {src} {...$$restProps} on:load />
+<img
+	{src}
+	class={(class_names || []).join(" ")}
+	data-testid={data_testid}
+	{...restProps}
+	on:load
+/>
 
 <style>
 	img {

package/shared/ImagePreview.svelte

@@ -26,6 +26,7 @@
 	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;
@@ -48,12 +49,13 @@
 	Icon={ImageIcon}
 	label={!show_label ? "" : label || i18n("image.image")}
 />
-{#if value === null || !value.url}
+{#if value == null || !value?.url}
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	<div class="image-container" bind:this={image_container}>
 		<IconButtonWrapper
 			display_top_corner={display_icon_button_wrapper_top_corner}
+			show_background={show_button_background}
 		>
 			{#if buttons === null ? true : buttons.includes("fullscreen")}
 				<FullscreenButton {fullscreen} on:fullscreen />
@@ -80,7 +82,11 @@
 		</IconButtonWrapper>
 		<button on:click={handle_click}>
 			<div class:selectable class="image-frame">
-				<Image src={value.url} alt="" loading="lazy" on:load />
+				<Image
+					src={value.url}
+					restProps={{ loading: "lazy", alt: "" }}
+					on:load
+				/>
 			</div>
 		</button>
 	</div>

package/shared/ImageUploader.svelte

@@ -34,10 +34,10 @@
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let stream_every: number;
-
-	export let modify_stream: (state: "open" | "closed" | "waiting") => void;
-	export let set_time_limit: (arg0: number) => void;
+	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;
 
 	let upload_input: Upload;
 	export let uploading = false;
@@ -82,6 +82,7 @@
 		img_blob: Blob | any,
 		event: "change" | "stream" | "upload"
 	): Promise<void> {
+		console.log("handle_save", { event, img_blob });
 		if (event === "stream") {
 			dispatch("stream", {
 				value: { url: img_blob } as Base64File,
@@ -103,6 +104,7 @@
 		];
 		pending = true;
 		const f = await upload_input.load_files([f_], upload_id);
+		console.log("uploaded file", f);
 		if (event === "change" || event === "upload") {
 			value = f?.[0] || null;
 			await tick();
@@ -203,6 +205,7 @@
 		on:drop={on_drop}
 	>
 		<Upload
+			bind:upload_promise
 			hidden={value !== null || active_source === "webcam"}
 			bind:this={upload_input}
 			bind:uploading
@@ -233,6 +236,7 @@
 				on:drag
 				on:upload={(e) => handle_save(e.detail, "upload")}
 				on:close_stream
+				{stream_state}
 				mirror_webcam={webcam_options.mirror}
 				{stream_every}
 				{streaming}
@@ -240,15 +244,14 @@
 				include_audio={false}
 				{i18n}
 				{upload}
-				bind:modify_stream
-				bind:set_time_limit
+				{time_limit}
 				webcam_constraints={webcam_options.constraints}
 			/>
 		{: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}>
-				<Image src={value.url} alt={value.alt_text} />
+				<Image src={value.url} restProps={{ alt: value.alt_text }} />
 			</div>
 		{/if}
 	</div>

package/shared/Webcam.svelte

@@ -22,26 +22,8 @@
 	let video_source: HTMLVideoElement;
 	let available_video_devices: MediaDeviceInfo[] = [];
 	let selected_device: MediaDeviceInfo | null = null;
-	let time_limit: number | null = null;
-	let stream_state: "open" | "waiting" | "closed" = "closed";
-
-	export const modify_stream: (state: "open" | "closed" | "waiting") => void = (
-		state: "open" | "closed" | "waiting"
-	) => {
-		if (state === "closed") {
-			time_limit = null;
-			stream_state = "closed";
-			value = null;
-		} else if (state === "waiting") {
-			stream_state = "waiting";
-		} else {
-			stream_state = "open";
-		}
-	};
 
-	export const set_time_limit = (time: number): void => {
-		if (recording) time_limit = time;
-	};
+	export let stream_state: "open" | "waiting" | "closed" = "closed";
 
 	let canvas: HTMLCanvasElement;
 	export let streaming = false;
@@ -56,7 +38,7 @@
 	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;
@@ -131,12 +113,13 @@
 	}
 
 	function take_picture(): void {
-		var context = canvas.getContext("2d")!;
 		if (
 			(!streaming || (streaming && recording)) &&
 			video_source.videoWidth &&
 			video_source.videoHeight
 		) {
+			console.log("Taking picture from webcam");
+			var context = canvas.getContext("2d")!;
 			canvas.width = video_source.videoWidth;
 			canvas.height = video_source.videoHeight;
 			context.drawImage(
@@ -241,13 +224,6 @@
 
 		if (!recording && stream) {
 			dispatch("close_stream");
-			stream.getTracks().forEach((track) => track.stop());
-			video_source.srcObject = null;
-			webcam_accessed = false;
-			window.setTimeout(() => {
-				value = null;
-			}, 500);
-			value = null;
 		}
 	}
 
@@ -360,12 +336,12 @@
 				use:click_outside={handle_click_outside}
 				on:change={handle_device_change}
 			>
-				<button
+				<!-- <button
 					class="inset-icon"
 					on:click|stopPropagation={() => (options_open = false)}
 				>
 					<DropdownArrow />
-				</button>
+				</button> -->
 				{#if available_video_devices.length === 0}
 					<option value="">{i18n("common.no_devices")}</option>
 				{:else}

package/shared/types.ts

@@ -1,3 +1,6 @@
+import type { LoadingStatus } from "@gradio/statustracker";
+import type { FileData } from "@gradio/client";
+
 export interface Base64File {
 	url: string;
 	alt_text: string;
@@ -7,3 +10,33 @@ export interface WebcamOptions {
 	mirror: boolean;
 	constraints: MediaStreamConstraints;
 }
+
+export interface ImageProps {
+	_selectable: boolean;
+	sources: ("clipboard" | "webcam" | "upload")[];
+	height: number;
+	width: number;
+	webcam_options: WebcamOptions;
+	value: FileData | null;
+	buttons: string[];
+	pending: boolean;
+	streaming: boolean;
+	stream_every: number;
+	input_ready: boolean;
+	placeholder: string;
+	watermark: FileData | null;
+}
+
+export interface ImageEvents {
+	clear: void;
+	change: any;
+	stream: any;
+	select: any;
+	upload: any;
+	input: any;
+	clear_status: LoadingStatus;
+	share: any;
+	error: any;
+	close_stream: void;
+	edit: void;
+}