@gradio/image 0.14.0 → 0.16.0-beta.1

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

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+import type { I18nFormatter } from "@gradio/utils";
+import { type FileData, type Client } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        modify_stream?: ((state: "open" | "closed" | "waiting") => void) | undefined;
+        set_time_limit?: ((time: number) => void) | undefined;
+        streaming?: boolean | undefined;
+        pending?: boolean | undefined;
+        root?: string | undefined;
+        stream_every?: number | undefined;
+        mode?: ("image" | "video") | undefined;
+        mirror_webcam: boolean;
+        include_audio: boolean;
+        i18n: I18nFormatter;
+        upload: Client["upload"];
+        value?: (FileData | null) | undefined;
+        click_outside?: ((node: Node, cb: any) => any) | undefined;
+    };
+    events: {
+        stream: CustomEvent<undefined>;
+        capture: CustomEvent<Blob | FileData | null>;
+        error: CustomEvent<string>;
+        start_recording: CustomEvent<undefined>;
+        stop_recording: CustomEvent<undefined>;
+        close_stream: CustomEvent<undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WebcamProps = typeof __propDef.props;
+export type WebcamEvents = typeof __propDef.events;
+export type WebcamSlots = typeof __propDef.slots;
+export default class Webcam extends SvelteComponent<WebcamProps, WebcamEvents, WebcamSlots> {
+    get modify_stream(): (state: "open" | "closed" | "waiting") => void;
+    get set_time_limit(): (time: number) => void;
+    get click_outside(): (node: Node, cb: any) => any;
+}
+export {};

package/dist/shared/WebcamPermissions.svelte

@@ -0,0 +1,42 @@
+<script>import { Webcam } from "@gradio/icons";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+</script>
+
+<button style:height="100%" on:click={() => dispatch("click")}>
+	<div class="wrap">
+		<span class="icon-wrap">
+			<Webcam />
+		</span>
+		{"Click to Access Webcam"}
+	</div>
+</button>
+
+<style>
+	button {
+		cursor: pointer;
+		width: var(--size-full);
+	}
+
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		min-height: var(--size-60);
+		color: var(--block-label-text-color);
+		height: 100%;
+		padding-top: var(--size-3);
+	}
+
+	.icon-wrap {
+		width: 30px;
+		margin-bottom: var(--spacing-lg);
+	}
+
+	@media (--screen-md) {
+		.wrap {
+			font-size: var(--text-lg);
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        click: CustomEvent<undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WebcamPermissionsProps = typeof __propDef.props;
+export type WebcamPermissionsEvents = typeof __propDef.events;
+export type WebcamPermissionsSlots = typeof __propDef.slots;
+export default class WebcamPermissions extends SvelteComponent<WebcamPermissionsProps, WebcamPermissionsEvents, WebcamPermissionsSlots> {
+}
+export {};

package/dist/shared/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Image } from "./Image.svelte";
+export { default as StaticImage } from "./ImagePreview.svelte";

package/dist/shared/index.js

@@ -0,0 +1,2 @@
+export { default as Image } from "./Image.svelte";
+export { default as StaticImage } from "./ImagePreview.svelte";

package/dist/shared/stream_utils.d.ts

@@ -0,0 +1,5 @@
+export declare function get_devices(): Promise<MediaDeviceInfo[]>;
+export declare function handle_error(error: string): void;
+export declare function set_local_stream(local_stream: MediaStream | null, video_source: HTMLVideoElement): void;
+export declare function get_video_stream(include_audio: boolean, video_source: HTMLVideoElement, device_id?: string): Promise<MediaStream>;
+export declare function set_available_devices(devices: MediaDeviceInfo[]): MediaDeviceInfo[];

package/dist/shared/stream_utils.js

@@ -0,0 +1,31 @@
+export function get_devices() {
+    return navigator.mediaDevices.enumerateDevices();
+}
+export function handle_error(error) {
+    throw new Error(error);
+}
+export function set_local_stream(local_stream, video_source) {
+    video_source.srcObject = local_stream;
+    video_source.muted = true;
+    video_source.play();
+}
+export async function get_video_stream(include_audio, video_source, device_id) {
+    const size = {
+        width: { ideal: 1920 },
+        height: { ideal: 1440 }
+    };
+    const constraints = {
+        video: device_id ? { deviceId: { exact: device_id }, ...size } : size,
+        audio: include_audio
+    };
+    return navigator.mediaDevices
+        .getUserMedia(constraints)
+        .then((local_stream) => {
+        set_local_stream(local_stream, video_source);
+        return local_stream;
+    });
+}
+export function set_available_devices(devices) {
+    const cameras = devices.filter((device) => device.kind === "videoinput");
+    return cameras;
+}

package/dist/shared/utils.d.ts

@@ -0,0 +1 @@
+export declare const get_coordinates_of_clicked_image: (evt: MouseEvent) => [number, number] | null;

package/dist/shared/utils.js

@@ -0,0 +1,28 @@
+export const get_coordinates_of_clicked_image = (evt) => {
+    let image;
+    if (evt.currentTarget instanceof Element) {
+        image = evt.currentTarget.querySelector("img");
+    }
+    else {
+        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);
+    }
+    if (x < 0 || x >= image.naturalWidth || y < 0 || y >= image.naturalHeight) {
+        return null;
+    }
+    return [x, y];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.14.0",
+  "version": "0.16.0-beta.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,24 +10,48 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.7.9",
-    "@gradio/icons": "^0.7.0",
-    "@gradio/statustracker": "^0.7.4",
-    "@gradio/client": "^1.5.0",
-    "@gradio/upload": "^0.12.2",
-    "@gradio/utils": "^0.5.2",
-    "@gradio/wasm": "^0.12.0"
+    "@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.10.2"
+    "@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",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/image"
   }
 }

package/shared/ImagePreview.svelte

@@ -99,7 +99,7 @@
 			{/if}
 		</div>
 		<button on:click={handle_click}>
-			<div class:selectable>
+			<div class:selectable class="image-frame">
 				<Image src={value.url} alt="" loading="lazy" on:load />
 			</div>
 		</button>
@@ -111,12 +111,10 @@
 		height: 100%;
 		position: relative;
 	}
-	.image-container :global(img),
-	button {
+
+	.image-container button {
 		width: var(--size-full);
 		height: var(--size-full);
-		object-fit: contain;
-		display: block;
 		border-radius: var(--radius-lg);
 
 		display: flex;
@@ -124,6 +122,19 @@
 		justify-content: center;
 	}
 
+	.image-frame {
+		width: auto;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.image-frame :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: scale-down;
+	}
+
 	.selectable {
 		cursor: crosshair;
 	}
@@ -152,6 +163,6 @@
 	:global(.image-container:fullscreen img) {
 		max-width: 90vw;
 		max-height: 90vh;
-		object-fit: contain;
+		object-fit: scale-down;
 	}
 </style>

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,14 +79,15 @@
 
 	const dispatch = createEventDispatcher<{
 		change?: never;
-		stream?: never;
+		stream: ValueData;
 		clear?: never;
 		drag: boolean;
 		upload?: never;
 		select: SelectData;
+		end_stream: never;
 	}>();
 
-	let dragging = false;
+	export let dragging = false;
 
 	$: dispatch("drag", dragging);
 
@@ -109,7 +126,11 @@
 			}}
 		/>
 	{/if}
-	<div class="upload-container" class:reduced-height={sources.length > 1}>
+	<div
+		class="upload-container"
+		class:reduced-height={sources.length > 1}
+		style:width={value ? "auto" : "100%"}
+	>
 		<Upload
 			hidden={value !== null || active_source === "webcam"}
 			bind:this={upload_input}
@@ -120,7 +141,7 @@
 			on:error
 			{root}
 			{max_file_size}
-			disable_click={!sources.includes("upload")}
+			disable_click={!sources.includes("upload") || value !== null}
 			{upload}
 			{stream_handler}
 		>
@@ -131,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-->
@@ -165,7 +191,7 @@
 	.image-frame :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);
-		object-fit: contain;
+		object-fit: scale-down;
 	}
 
 	.image-frame {
@@ -175,10 +201,13 @@
 	}
 
 	.upload-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
 		height: 100%;
 		flex-shrink: 1;
 		max-height: 100%;
-		width: 100%;
 	}
 
 	.reduced-height {

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 {