@gradio/image 0.15.1 → 0.16.0-beta.2

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @gradio/image
 
+## 0.16.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading.  Thanks @dawoodkhan82!
+- [#9270](https://github.com/gradio-app/gradio/pull/9270) [`b0b8500`](https://github.com/gradio-app/gradio/commit/b0b850081d8d10c1287b5d179b8db37482e21c8d) - Fix stop recording button colors.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.16.0-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.16.0-beta.0
+
+### Features
+
+- [#9149](https://github.com/gradio-app/gradio/pull/9149) [`3d7a9b8`](https://github.com/gradio-app/gradio/commit/3d7a9b81f6fef06187eca832471dc1692eb493a0) - Open audio/image input stream only when queue is ready.  Thanks @freddyaboulton!
+- [#9173](https://github.com/gradio-app/gradio/pull/9173) [`66349fe`](https://github.com/gradio-app/gradio/commit/66349fe26827e3a3c15b738a1177e95fec7f5554) - Streaming Guides.  Thanks @freddyaboulton!
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
+
 ## 0.15.1
 
 ### Fixes

package/Index.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
+	import type { Gradio, SelectData, ValueData } from "@gradio/utils";
 	import StaticImage from "./shared/ImagePreview.svelte";
 	import ImageUploader from "./shared/ImageUploader.svelte";
 	import { afterUpdate } from "svelte";
@@ -17,11 +17,21 @@
 	import { Block, Empty, UploadText } from "@gradio/atoms";
 	import { Image } from "@gradio/icons";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { FileData } from "@gradio/client";
+	import { upload, type FileData } from "@gradio/client";
 	import type { LoadingStatus } from "@gradio/statustracker";
 
 	type sources = "upload" | "webcam" | "clipboard" | null;
 
+	let stream_state = "closed";
+	let _modify_stream: (state: "open" | "closed" | "waiting") => void = () => {};
+	export function modify_stream_state(
+		state: "open" | "closed" | "waiting"
+	): void {
+		stream_state = state;
+		_modify_stream(state);
+	}
+	export const get_stream_state: () => void = () => stream_state;
+	export let set_time_limit: (arg0: number) => void;
 	export let value_is_output = false;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -35,6 +45,7 @@
 
 	export let height: number | undefined;
 	export let width: number | undefined;
+	export let stream_every: number;
 
 	export let _selectable = false;
 	export let container = true;
@@ -53,19 +64,22 @@
 	export let mirror_webcam: boolean;
 	export let placeholder: string | undefined = undefined;
 	export let show_fullscreen_button: boolean;
-
+	export let input_ready: boolean;
+	let uploading = false;
+	$: input_ready = !uploading;
 	export let gradio: Gradio<{
 		input: never;
 		change: never;
 		error: string;
 		edit: never;
-		stream: never;
+		stream: ValueData;
 		drag: never;
 		upload: never;
 		clear: never;
 		select: SelectData;
 		share: ShareData;
 		clear_status: LoadingStatus;
+		close_stream: string;
 	}>;
 
 	$: {
@@ -77,6 +91,7 @@
 			}
 		}
 	}
+
 	afterUpdate(() => {
 		value_is_output = false;
 	});
@@ -171,6 +186,7 @@
 
 		<ImageUploader
 			bind:this={upload_component}
+			bind:uploading
 			bind:active_source
 			bind:value
 			bind:dragging
@@ -181,7 +197,7 @@
 			on:clear={() => {
 				gradio.dispatch("clear");
 			}}
-			on:stream={() => gradio.dispatch("stream")}
+			on:stream={({ detail }) => gradio.dispatch("stream", detail)}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:upload={() => gradio.dispatch("upload")}
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
@@ -191,15 +207,21 @@
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
+			on:close_stream={() => {
+				gradio.dispatch("close_stream", "stream");
+			}}
 			{label}
 			{show_label}
 			{pending}
 			{streaming}
 			{mirror_webcam}
+			{stream_every}
+			bind:modify_stream={_modify_stream}
+			bind:set_time_limit
 			max_file_size={gradio.max_file_size}
 			i18n={gradio.i18n}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={gradio.client?.stream}
 		>
 			{#if active_source === "upload" || !active_source}
 				<UploadText i18n={gradio.i18n} type="image" {placeholder} />

package/dist/Index.svelte

@@ -13,6 +13,16 @@ import { afterUpdate } from "svelte";
 import { Block, Empty, UploadText } from "@gradio/atoms";
 import { Image } from "@gradio/icons";
 import { StatusTracker } from "@gradio/statustracker";
+import { upload } from "@gradio/client";
+let stream_state = "closed";
+let _modify_stream = () => {
+};
+export function modify_stream_state(state) {
+  stream_state = state;
+  _modify_stream(state);
+}
+export const get_stream_state = () => stream_state;
+export let set_time_limit;
 export let value_is_output = false;
 export let elem_id = "";
 export let elem_classes = [];
@@ -25,6 +35,7 @@ export let show_download_button;
 export let root;
 export let height;
 export let width;
+export let stream_every;
 export let _selectable = false;
 export let container = true;
 export let scale = null;
@@ -42,6 +53,10 @@ export let pending;
 export let mirror_webcam;
 export let placeholder = void 0;
 export let show_fullscreen_button;
+export let input_ready;
+let uploading = false;
+$:
+  input_ready = !uploading;
 export let gradio;
 $: {
   if (JSON.stringify(value) !== JSON.stringify(old_value)) {
@@ -143,6 +158,7 @@ const handle_drop = (event) => {
 
 		<ImageUploader
 			bind:this={upload_component}
+			bind:uploading
 			bind:active_source
 			bind:value
 			bind:dragging
@@ -153,7 +169,7 @@ const handle_drop = (event) => {
 			on:clear={() => {
 				gradio.dispatch("clear");
 			}}
-			on:stream={() => gradio.dispatch("stream")}
+			on:stream={({ detail }) => gradio.dispatch("stream", detail)}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:upload={() => gradio.dispatch("upload")}
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
@@ -163,15 +179,21 @@ const handle_drop = (event) => {
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
+			on:close_stream={() => {
+				gradio.dispatch("close_stream", "stream");
+			}}
 			{label}
 			{show_label}
 			{pending}
 			{streaming}
 			{mirror_webcam}
+			{stream_every}
+			bind:modify_stream={_modify_stream}
+			bind:set_time_limit
 			max_file_size={gradio.max_file_size}
 			i18n={gradio.i18n}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={gradio.client?.stream}
 		>
 			{#if active_source === "upload" || !active_source}
 				<UploadText i18n={gradio.i18n} type="image" {placeholder} />

package/dist/Index.svelte.d.ts

@@ -4,11 +4,14 @@ export { default as BaseImageUploader } from "./shared/ImageUploader.svelte";
 export { default as BaseStaticImage } from "./shared/ImagePreview.svelte";
 export { default as BaseExample } from "./Example.svelte";
 export { default as BaseImage } from "./shared/Image.svelte";
-import type { Gradio, SelectData } from "@gradio/utils";
-import type { FileData } from "@gradio/client";
+import type { Gradio, SelectData, ValueData } from "@gradio/utils";
+import { type FileData } from "@gradio/client";
 import type { LoadingStatus } from "@gradio/statustracker";
 declare const __propDef: {
     props: {
+        modify_stream_state?: ((state: "open" | "closed" | "waiting") => void) | undefined;
+        get_stream_state?: (() => void) | undefined;
+        set_time_limit: (arg0: number) => void;
         value_is_output?: boolean | undefined;
         elem_id?: string | undefined;
         elem_classes?: string[] | undefined;
@@ -20,6 +23,7 @@ declare const __propDef: {
         root: string;
         height: number | undefined;
         width: number | undefined;
+        stream_every: number;
         _selectable?: boolean | undefined;
         container?: boolean | undefined;
         scale?: (number | null) | undefined;
@@ -33,18 +37,20 @@ declare const __propDef: {
         mirror_webcam: boolean;
         placeholder?: string | undefined;
         show_fullscreen_button: boolean;
+        input_ready: boolean;
         gradio: Gradio<{
             input: never;
             change: never;
             error: string;
             edit: never;
-            stream: never;
+            stream: ValueData;
             drag: never;
             upload: never;
             clear: never;
             select: SelectData;
             share: ShareData;
             clear_status: LoadingStatus;
+            close_stream: string;
         }>;
     };
     events: {
@@ -56,6 +62,14 @@ export type IndexProps = typeof __propDef.props;
 export type IndexEvents = typeof __propDef.events;
 export type IndexSlots = typeof __propDef.slots;
 export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+    get modify_stream_state(): (state: "open" | "closed" | "waiting") => void;
+    get get_stream_state(): () => void;
+    get undefined(): any;
+    /**accessor*/
+    set undefined(_: any);
+    get set_time_limit(): (arg0: number) => void;
+    /**accessor*/
+    set set_time_limit(_: (arg0: number) => void);
     get value_is_output(): boolean | undefined;
     /**accessor*/
     set value_is_output(_: boolean | undefined);
@@ -89,6 +103,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get width(): number | undefined;
     /**accessor*/
     set width(_: number | undefined);
+    get stream_every(): number;
+    /**accessor*/
+    set stream_every(_: number);
     get _selectable(): boolean | undefined;
     /**accessor*/
     set _selectable(_: boolean | undefined);
@@ -128,18 +145,22 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get show_fullscreen_button(): boolean;
     /**accessor*/
     set show_fullscreen_button(_: boolean);
+    get input_ready(): boolean;
+    /**accessor*/
+    set input_ready(_: boolean);
     get gradio(): Gradio<{
         input: never;
         change: never;
         error: string;
         edit: never;
-        stream: never;
+        stream: ValueData;
         drag: never;
         upload: never;
         clear: never;
         select: SelectData;
         share: ShareData;
         clear_status: LoadingStatus;
+        close_stream: string;
     }>;
     /**accessor*/
     set gradio(_: Gradio<{
@@ -147,12 +168,13 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
         change: never;
         error: string;
         edit: never;
-        stream: never;
+        stream: ValueData;
         drag: never;
         upload: never;
         clear: never;
         select: SelectData;
         share: ShareData;
         clear_status: LoadingStatus;
+        close_stream: string;
     }>);
 }

package/dist/shared/ClearImage.svelte

@@ -1,10 +1,10 @@
 <script>import { createEventDispatcher } from "svelte";
-import { IconButton } from "@gradio/atoms";
+import { IconButton, IconButtonWrapper } from "@gradio/atoms";
 import { Clear } from "@gradio/icons";
 const dispatch = createEventDispatcher();
 </script>
 
-<div>
+<IconButtonWrapper>
 	<IconButton
 		Icon={Clear}
 		label="Remove Image"
@@ -13,16 +13,4 @@ const dispatch = createEventDispatcher();
 			event.stopPropagation();
 		}}
 	/>
-</div>
-
-<style>
-	div {
-		display: flex;
-		position: absolute;
-		top: var(--size-2);
-		right: var(--size-2);
-		justify-content: flex-end;
-		gap: var(--spacing-sm);
-		z-index: var(--layer-5);
-	}
-</style>
+</IconButtonWrapper>

package/dist/shared/ImagePreview.svelte

@@ -1,6 +1,12 @@
 <script>import { createEventDispatcher, onMount } from "svelte";
 import { uploadToHuggingFace } from "@gradio/utils";
-import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
+import {
+  BlockLabel,
+  Empty,
+  IconButton,
+  ShareButton,
+  IconButtonWrapper
+} from "@gradio/atoms";
 import { Download } from "@gradio/icons";
 import { get_coordinates_of_clicked_image } from "./utils";
 import Image from "./Image.svelte";
@@ -49,7 +55,7 @@ const toggle_full_screen = async () => {
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	<div class="image-container" bind:this={image_container}>
-		<div class="icon-buttons">
+		<IconButtonWrapper>
 			{#if !is_full_screen && show_fullscreen_button}
 				<IconButton
 					Icon={Maximize}
@@ -84,7 +90,7 @@ const toggle_full_screen = async () => {
 					{value}
 				/>
 			{/if}
-		</div>
+		</IconButtonWrapper>
 		<button on:click={handle_click}>
 			<div class:selectable class="image-frame">
 				<Image src={value.url} alt="" loading="lazy" on:load />
@@ -126,15 +132,6 @@ const toggle_full_screen = async () => {
 		cursor: crosshair;
 	}
 
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-		z-index: 1;
-	}
-
 	:global(.fullscreen-controls svg) {
 		position: relative;
 		top: 0px;

package/dist/shared/ImageUploader.svelte

@@ -1,9 +1,12 @@
 <script>import { createEventDispatcher, tick } from "svelte";
 import { BlockLabel } from "@gradio/atoms";
 import { Image as ImageIcon } from "@gradio/icons";
+import {
+} from "@gradio/utils";
 import { get_coordinates_of_clicked_image } from "./utils";
 import Webcam from "./Webcam.svelte";
 import { Upload } from "@gradio/upload";
+import { FileData } from "@gradio/client";
 import ClearImage from "./ClearImage.svelte";
 import { SelectSource } from "@gradio/atoms";
 import Image from "./Image.svelte";
@@ -20,26 +23,35 @@ export let i18n;
 export let max_file_size = null;
 export let upload;
 export let stream_handler;
+export let stream_every;
+export let modify_stream;
+export let set_time_limit;
 let upload_input;
-let uploading = false;
+export let uploading = false;
 export let active_source = null;
 function handle_upload({ detail }) {
-  value = detail;
-  dispatch("upload");
+  if (!streaming) {
+    value = detail;
+    dispatch("upload");
+  }
 }
 function handle_clear() {
   value = null;
   dispatch("clear");
   dispatch("change", null);
 }
-async function handle_save(img_blob) {
+async function handle_save(img_blob, event) {
   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;
 }
 $:
@@ -109,17 +121,22 @@ async function handle_select_source(source) {
 		{#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/dist/shared/ImageUploader.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { SelectData, I18nFormatter } from "@gradio/utils";
-import type { FileData, Client } from "@gradio/client";
+import { type SelectData, type I18nFormatter, type ValueData } from "@gradio/utils";
+import { FileData, type Client } from "@gradio/client";
 declare const __propDef: {
     props: {
         value: null | FileData;
@@ -16,17 +16,23 @@ declare const __propDef: {
         max_file_size?: (number | null) | undefined;
         upload: Client["upload"];
         stream_handler: Client["stream"];
+        stream_every: number;
+        modify_stream: (state: "open" | "closed" | "waiting") => void;
+        set_time_limit: (arg0: number) => void;
+        uploading?: boolean | undefined;
         active_source?: ("upload" | "clipboard" | "microphone" | "webcam" | null) | undefined;
         dragging?: boolean | undefined;
     };
     events: {
         error: CustomEvent<string> | CustomEvent<any>;
         drag: CustomEvent<any>;
+        close_stream: CustomEvent<undefined>;
         change?: CustomEvent<undefined> | undefined;
-        stream?: CustomEvent<undefined> | undefined;
+        stream: CustomEvent<ValueData>;
         clear?: CustomEvent<undefined> | undefined;
         upload?: CustomEvent<undefined> | undefined;
         select: CustomEvent<SelectData>;
+        end_stream: CustomEvent<never>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/Webcam.svelte

@@ -1,5 +1,12 @@
 <script>import { createEventDispatcher, onMount } from "svelte";
-import { Camera, Circle, Square, DropdownArrow } from "@gradio/icons";
+import {
+  Camera,
+  Circle,
+  Square,
+  DropdownArrow,
+  Spinner
+} from "@gradio/icons";
+import { StreamingBar } from "@gradio/statustracker";
 import { prepare_files } from "@gradio/client";
 import WebcamPermissions from "./WebcamPermissions.svelte";
 import { fade } from "svelte/transition";
@@ -11,15 +18,34 @@ import {
 let video_source;
 let available_video_devices = [];
 let selected_device = null;
+let time_limit = null;
+let stream_state = "closed";
+export const modify_stream = (state) => {
+  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) => {
+  if (recording)
+    time_limit = time;
+};
 let canvas;
 export let streaming = false;
 export let pending = false;
 export let root = "";
+export let stream_every = 1;
 export let mode = "image";
 export let mirror_webcam;
 export let include_audio;
 export let i18n;
 export let upload;
+export let value = null;
 const dispatch = createEventDispatcher();
 onMount(() => canvas = document.createElement("canvas"));
 const handle_device_change = async (event) => {
@@ -73,11 +99,14 @@ function take_picture() {
       context.scale(-1, 1);
       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
     );
   }
@@ -99,8 +128,8 @@ function take_recording() {
           "sample." + mimeType.substring(6)
         );
         const val = await prepare_files([_video_blob]);
-        let value = ((await upload(val, root))?.filter(Boolean))[0];
-        dispatch("capture", value);
+        let val_ = ((await upload(val, root))?.filter(Boolean))[0];
+        dispatch("capture", val_);
         dispatch("stop_recording");
       }
     };
@@ -140,9 +169,14 @@ function record_video_or_photo() {
     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;
   }
 }
 if (streaming && mode === "image") {
@@ -150,7 +184,7 @@ if (streaming && mode === "image") {
     if (video_source && !pending) {
       take_picture();
     }
-  }, 500);
+  }, stream_every * 1e3);
 }
 let options_open = false;
 export function click_outside(node, cb) {
@@ -174,12 +208,18 @@ function handle_click_outside(event) {
 </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
@@ -196,13 +236,26 @@ function handle_click_outside(event) {
 				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}
@@ -284,6 +337,14 @@ function handle_click_outside(event) {
 		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);
@@ -297,7 +358,6 @@ function handle_click_outside(event) {
 	}
 
 	.icon {
-		opacity: 0.8;
 		width: 18px;
 		height: 18px;
 		display: flex;
@@ -305,9 +365,10 @@ function handle_click_outside(event) {
 		align-items: center;
 	}
 
-	.red {
-		fill: red;
-		stroke: red;
+	.color-primary {
+		fill: var(--primary-600);
+		stroke: var(--primary-600);
+		color: var(--primary-600);
 	}
 
 	.flip {

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

@@ -3,14 +3,18 @@ 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: {
@@ -19,6 +23,7 @@ declare const __propDef: {
         error: CustomEvent<string>;
         start_recording: CustomEvent<undefined>;
         stop_recording: CustomEvent<undefined>;
+        close_stream: CustomEvent<undefined>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -28,6 +33,8 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.15.1",
+  "version": "0.16.0-beta.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,13 +10,13 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.8.1",
-    "@gradio/client": "^1.5.2",
-    "@gradio/icons": "^0.7.2",
-    "@gradio/statustracker": "^0.7.6",
-    "@gradio/utils": "^0.6.1",
-    "@gradio/upload": "^0.12.4",
-    "@gradio/wasm": "^0.13.1"
+    "@gradio/atoms": "^0.9.0-beta.2",
+    "@gradio/client": "^1.6.0-beta.2",
+    "@gradio/icons": "^0.8.0-beta.2",
+    "@gradio/statustracker": "^0.8.0-beta.2",
+    "@gradio/utils": "^0.7.0-beta.2",
+    "@gradio/wasm": "^0.14.0-beta.2",
+    "@gradio/upload": "^0.13.0-beta.2"
   },
   "devDependencies": {
     "@gradio/preview": "^0.11.1"

package/shared/ClearImage.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import { IconButton } from "@gradio/atoms";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
 	import { Clear } from "@gradio/icons";
 
 	const dispatch = createEventDispatcher();
 </script>
 
-<div>
+<IconButtonWrapper>
 	<IconButton
 		Icon={Clear}
 		label="Remove Image"
@@ -15,16 +15,4 @@
 			event.stopPropagation();
 		}}
 	/>
-</div>
-
-<style>
-	div {
-		display: flex;
-		position: absolute;
-		top: var(--size-2);
-		right: var(--size-2);
-		justify-content: flex-end;
-		gap: var(--spacing-sm);
-		z-index: var(--layer-5);
-	}
-</style>
+</IconButtonWrapper>

package/shared/ImagePreview.svelte

@@ -2,7 +2,13 @@
 	import { createEventDispatcher, onMount } from "svelte";
 	import type { SelectData } from "@gradio/utils";
 	import { uploadToHuggingFace } from "@gradio/utils";
-	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		ShareButton,
+		IconButtonWrapper
+	} from "@gradio/atoms";
 	import { Download } from "@gradio/icons";
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import Image from "./Image.svelte";
@@ -62,7 +68,7 @@
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	<div class="image-container" bind:this={image_container}>
-		<div class="icon-buttons">
+		<IconButtonWrapper>
 			{#if !is_full_screen && show_fullscreen_button}
 				<IconButton
 					Icon={Maximize}
@@ -97,7 +103,7 @@
 					{value}
 				/>
 			{/if}
-		</div>
+		</IconButtonWrapper>
 		<button on:click={handle_click}>
 			<div class:selectable class="image-frame">
 				<Image src={value.url} alt="" loading="lazy" on:load />
@@ -139,15 +145,6 @@
 		cursor: crosshair;
 	}
 
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-		z-index: 1;
-	}
-
 	:global(.fullscreen-controls svg) {
 		position: relative;
 		top: 0px;

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 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,10 @@
 		align-items: center;
 	}
 
-	.red {
-		fill: red;
-		stroke: red;
+	.color-primary {
+		fill: var(--primary-600);
+		stroke: var(--primary-600);
+		color: var(--primary-600);
 	}
 
 	.flip {