@gradio/image 0.15.0 → 0.16.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.15.0",
+  "version": "0.16.0-beta.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,25 +10,44 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.8.0",
-    "@gradio/icons": "^0.7.1",
-    "@gradio/statustracker": "^0.7.5",
-    "@gradio/client": "^1.5.1",
-    "@gradio/utils": "^0.6.0",
-    "@gradio/wasm": "^0.13.0",
-    "@gradio/upload": "^0.12.3"
+    "@gradio/atoms": "^0.8.1-beta.1",
+    "@gradio/icons": "^0.8.0-beta.1",
+    "@gradio/client": "^1.6.0-beta.1",
+    "@gradio/utils": "^0.7.0-beta.1",
+    "@gradio/wasm": "^0.13.1-beta.1",
+    "@gradio/upload": "^0.12.4-beta.1",
+    "@gradio/statustracker": "^0.8.0-beta.1"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.11.0"
+    "@gradio/preview": "^0.11.1-beta.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
   "exports": {
-    ".": "./Index.svelte",
-    "./shared": "./shared/index.ts",
-    "./example": "./Example.svelte",
-    "./base": "./shared/ImagePreview.svelte",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./base": {
+      "gradio": "./shared/ImagePreview.svelte",
+      "svelte": "./dist/shared/ImagePreview.svelte",
+      "types": "./dist/shared/ImagePreview.svelte.d.ts"
+    },
+    "./shared": {
+      "gradio": "./shared/index.ts",
+      "svelte": "./dist/shared/index.js",
+      "types": "./dist/shared/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
   },
   "repository": {
     "type": "git",

package/shared/ImageUploader.svelte

@@ -2,12 +2,16 @@
 	import { createEventDispatcher, tick } from "svelte";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Image as ImageIcon } from "@gradio/icons";
-	import type { SelectData, I18nFormatter } from "@gradio/utils";
+	import {
+		type SelectData,
+		type I18nFormatter,
+		type ValueData
+	} from "@gradio/utils";
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import Webcam from "./Webcam.svelte";
 
 	import { Upload } from "@gradio/upload";
-	import type { FileData, Client } from "@gradio/client";
+	import { FileData, type Client } from "@gradio/client";
 	import ClearImage from "./ClearImage.svelte";
 	import { SelectSource } from "@gradio/atoms";
 	import Image from "./Image.svelte";
@@ -28,14 +32,21 @@
 	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 modify_stream: (state: "open" | "closed" | "waiting") => void;
+	export let set_time_limit: (arg0: number) => void;
 
 	let upload_input: Upload;
 	let uploading = false;
 	export let active_source: source_type = null;
 
 	function handle_upload({ detail }: CustomEvent<FileData>): void {
-		value = detail;
-		dispatch("upload");
+		// only trigger streaming event if streaming
+		if (!streaming) {
+			value = detail;
+			dispatch("upload");
+		}
 	}
 
 	function handle_clear(): void {
@@ -44,17 +55,22 @@
 		dispatch("change", null);
 	}
 
-	async function handle_save(img_blob: Blob | any): Promise<void> {
+	async function handle_save(
+		img_blob: Blob | any,
+		event: "change" | "stream" | "upload"
+	): Promise<void> {
 		pending = true;
 		const f = await upload_input.load_files([
-			new File([img_blob], `webcam.png`)
+			new File([img_blob], `image/${streaming ? "jpeg" : "png"}`)
 		]);
 
-		value = f?.[0] || null;
-
-		await tick();
-
-		dispatch(streaming ? "stream" : "change");
+		if (event === "change" || event === "upload") {
+			value = f?.[0] || null;
+			await tick();
+			dispatch("change");
+		} else {
+			dispatch("stream", { value: f?.[0] || null, is_value_data: true });
+		}
 		pending = false;
 	}
 
@@ -63,11 +79,12 @@
 
 	const dispatch = createEventDispatcher<{
 		change?: never;
-		stream?: never;
+		stream: ValueData;
 		clear?: never;
 		drag: boolean;
 		upload?: never;
 		select: SelectData;
+		end_stream: never;
 	}>();
 
 	export let dragging = false;
@@ -135,17 +152,22 @@
 		{#if active_source === "webcam" && (streaming || (!streaming && !value))}
 			<Webcam
 				{root}
-				on:capture={(e) => handle_save(e.detail)}
-				on:stream={(e) => handle_save(e.detail)}
+				{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)}
+				on:upload={(e) => handle_save(e.detail, "upload")}
+				on:close_stream
 				{mirror_webcam}
+				{stream_every}
 				{streaming}
 				mode="image"
 				include_audio={false}
 				{i18n}
 				{upload}
+				bind:modify_stream
+				bind:set_time_limit
 			/>
 		{:else if value !== null && !streaming}
 			<!-- svelte-ignore a11y-click-events-have-key-events-->

package/shared/Webcam.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from "svelte";
-	import { Camera, Circle, Square, DropdownArrow } from "@gradio/icons";
+	import {
+		Camera,
+		Circle,
+		Square,
+		DropdownArrow,
+		Spinner
+	} from "@gradio/icons";
 	import type { I18nFormatter } from "@gradio/utils";
+	import { StreamingBar } from "@gradio/statustracker";
 	import { type FileData, type Client, prepare_files } from "@gradio/client";
 	import WebcamPermissions from "./WebcamPermissions.svelte";
 	import { fade } from "svelte/transition";
@@ -14,17 +21,39 @@
 	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;
+	};
 
 	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 i18n: I18nFormatter;
 	export let upload: Client["upload"];
+	export let value: FileData | null = null;
 
 	const dispatch = createEventDispatcher<{
 		stream: undefined;
@@ -32,6 +61,7 @@
 		error: string;
 		start_recording: undefined;
 		stop_recording: undefined;
+		close_stream: undefined;
 	}>();
 
 	onMount(() => (canvas = document.createElement("canvas")));
@@ -108,11 +138,15 @@
 				context.drawImage(video_source, -video_source.videoWidth, 0);
 			}
 
+			if (streaming && (!recording || stream_state === "waiting")) {
+				return;
+			}
+
 			canvas.toBlob(
 				(blob) => {
 					dispatch(streaming ? "stream" : "capture", blob);
 				},
-				"image/png",
+				`image/${streaming ? "jpeg" : "png"}`,
 				0.8
 			);
 		}
@@ -136,10 +170,10 @@
 						"sample." + mimeType.substring(6)
 					);
 					const val = await prepare_files([_video_blob]);
-					let value = (
+					let val_ = (
 						(await upload(val, root))?.filter(Boolean) as FileData[]
 					)[0];
-					dispatch("capture", value);
+					dispatch("capture", val_);
 					dispatch("stop_recording");
 				}
 			};
@@ -181,9 +215,14 @@
 			take_recording();
 		}
 		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;
 		}
 	}
 
@@ -192,7 +231,7 @@
 			if (video_source && !pending) {
 				take_picture();
 			}
-		}, 500);
+		}, stream_every * 1000);
 	}
 
 	let options_open = false;
@@ -225,12 +264,18 @@
 </script>
 
 <div class="wrap">
+	<StreamingBar {time_limit} />
 	<!-- svelte-ignore a11y-media-has-caption -->
 	<!-- need to suppress for video streaming https://github.com/sveltejs/svelte/issues/5967 -->
 	<video
 		bind:this={video_source}
 		class:flip={mirror_webcam}
-		class:hide={!webcam_accessed}
+		class:hide={!webcam_accessed || (webcam_accessed && !!value)}
+	/>
+	<!-- svelte-ignore a11y-missing-attribute -->
+	<img
+		src={value?.url}
+		class:hide={!webcam_accessed || (webcam_accessed && !value)}
 	/>
 	{#if !webcam_accessed}
 		<div
@@ -247,13 +292,26 @@
 				aria-label={mode === "image" ? "capture photo" : "start recording"}
 			>
 				{#if mode === "video" || streaming}
-					{#if recording}
-						<div class="icon red" title="stop recording">
-							<Square />
+					{#if streaming && stream_state === "waiting"}
+						<div class="icon-with-text" style="width:var(--size-24);">
+							<div class="icon color-primary" title="spinner">
+								<Spinner />
+							</div>
+							{i18n("audio.waiting")}
+						</div>
+					{:else if (streaming && stream_state === "open") || (!streaming && recording)}
+						<div class="icon-with-text">
+							<div class="icon color-primary" title="stop recording">
+								<Square />
+							</div>
+							{i18n("audio.stop")}
 						</div>
 					{:else}
-						<div class="icon red" title="start recording">
-							<Circle />
+						<div class="icon-with-text">
+							<div class="icon color-primary" title="start recording">
+								<Circle />
+							</div>
+							{i18n("audio.record")}
 						</div>
 					{/if}
 				{:else}
@@ -335,6 +393,14 @@
 		color: var(--button-secondary-text-color);
 	}
 
+	.icon-with-text {
+		width: var(--size-20);
+		align-items: center;
+		margin: 0 var(--spacing-xl);
+		display: flex;
+		justify-content: space-evenly;
+	}
+
 	@media (--screen-md) {
 		button {
 			bottom: var(--size-4);
@@ -348,7 +414,6 @@
 	}
 
 	.icon {
-		opacity: 0.8;
 		width: 18px;
 		height: 18px;
 		display: flex;
@@ -356,9 +421,9 @@
 		align-items: center;
 	}
 
-	.red {
-		fill: red;
-		stroke: red;
+	.color-primary {
+		fill: var(--primary-600);
+		stroke: var(--primary-600);
 	}
 
 	.flip {