@gradio/gallery 0.16.2 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @gradio/gallery
 
+## 0.17.0
+
+### Features
+
+- [#12804](https://github.com/gradio-app/gradio/pull/12804) [`fc366b4`](https://github.com/gradio-app/gradio/commit/fc366b485325c900b0c2b85ba05b7d23a81a0dee) - Allow webcam uploads and clipboard paste for gallery.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/atoms@0.21.0
+- @gradio/client@2.0.4
+- @gradio/statustracker@0.12.3
+- @gradio/file@0.14.2
+- @gradio/image@0.25.2
+- @gradio/upload@0.17.5
+- @gradio/video@0.20.2
+
 ## 0.16.2
 
 ### Fixes

package/Index.svelte

@@ -6,12 +6,14 @@
 <script lang="ts">
 	import { tick } from "svelte";
 	import type { FileData } from "@gradio/client";
-	import { Block, UploadText } from "@gradio/atoms";
+	import { Block, UploadText, SelectSource } from "@gradio/atoms";
 	import Gallery from "./shared/Gallery.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
 	import { Gradio } from "@gradio/utils";
 	import { BaseFileUpload } from "@gradio/file";
+	import { Webcam } from "@gradio/image";
 	import type { GalleryProps, GalleryEvents, GalleryData } from "./types";
+	import { handle_save } from "./shared/utils";
 
 	let upload_promise = $state<Promise<(FileData | null)[]>>();
 
@@ -29,15 +31,12 @@
 
 	const props = $props();
 	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props, {
-		selected_index: null
+		selected_index: null,
+		file_types: ["image", "video"]
 	});
 
 	let fullscreen = $state(false);
 
-	let no_value = $derived(
-		gradio.props.value === null ? true : gradio.props.value.length === 0
-	);
-
 	function handle_delete(
 		event: CustomEvent<{ file: FileData; index: number }>
 	): void {
@@ -71,6 +70,82 @@
 				: { image: x, caption: null }
 		);
 	}
+
+	let upload_input: BaseFileUpload;
+
+	let active_source = $state<
+		"upload" | "webcam" | "webcam-video" | "clipboard" | null
+	>(gradio.props.sources ? gradio.props.sources[0] : "upload");
+
+	let no_value = $derived(
+		gradio.props.value === null ? true : gradio.props.value.length === 0
+	);
+
+	let sources = $derived.by(() => {
+		if (
+			gradio.props.file_types?.includes("video") &&
+			gradio.props.sources.includes("webcam")
+		) {
+			return gradio.props.sources.concat(["webcam-video"]);
+		} else {
+			return gradio.props.sources;
+		}
+	});
+
+	async function paste_clipboard(): Promise<void> {
+		navigator.clipboard.read().then(async (items) => {
+			let file: File | null = null;
+			for (let i = 0; i < items.length; i++) {
+				const type = items[i].types.find((t) =>
+					(gradio.props.file_types || ["image"]).some((ft) =>
+						t.startsWith(ft + "/")
+					)
+				);
+				if (type) {
+					const blob = await items[i].getType(type);
+					file = new File([blob], `clipboard.${type.replace("image/", "")}`);
+					break;
+				}
+			}
+			if (file) {
+				const f = await handle_save(
+					file,
+					(f) => gradio.shared.client.upload(f, gradio.shared.root),
+					"clipboard_upload"
+				);
+				const processed_files = await process_upload_files(f);
+				gradio.props.value?.push(...processed_files);
+				gradio.dispatch("change", gradio.props.value);
+				active_source = null;
+			} else {
+				gradio.dispatch("warning", "No image or video found in clipboard");
+			}
+		});
+	}
+
+	async function handle_select_source(
+		source: "upload" | "webcam" | "clipboard"
+	): Promise<void> {
+		switch (source) {
+			case "clipboard":
+				await paste_clipboard();
+				break;
+			default:
+				break;
+		}
+	}
+
+	async function onsource_change(
+		source: "upload" | "webcam" | "webcam-video" | "clipboard"
+	): Promise<void> {
+		await tick();
+		if (source === "clipboard") {
+			await paste_clipboard();
+		} else {
+			active_source = source;
+			no_value = true;
+		}
+	}
 </script>
 
 <Block
@@ -96,31 +171,96 @@
 			gradio.dispatch("clear_status", gradio.shared.loading_status)}
 	/>
 	{#if gradio.shared.interactive && no_value}
-		<BaseFileUpload
-			bind:upload_promise
-			value={null}
-			root={gradio.shared.root}
-			label={gradio.shared.label}
-			max_file_size={gradio.shared.max_file_size}
-			file_count={"multiple"}
-			file_types={gradio.props.file_types}
-			i18n={gradio.i18n}
-			upload={(...args) => gradio.shared.client.upload(...args)}
-			stream_handler={(...args) => gradio.shared.client.stream(...args)}
-			onupload={async (event_data) => {
-				const files = Array.isArray(event_data) ? event_data : [event_data];
-				gradio.props.value = await process_upload_files(files);
-				gradio.dispatch("upload", gradio.props.value);
-				gradio.dispatch("change", gradio.props.value);
-			}}
-			onerror={(event_data) => {
-				gradio.shared.loading_status = gradio.shared.loading_status || {};
-				gradio.shared.loading_status.status = "error";
-				gradio.dispatch("error", event_data);
-			}}
+		<div
+			class={!gradio.props.value ||
+			(active_source && active_source.includes("webcam"))
+				? "hidden-upload-input"
+				: ""}
 		>
-			<UploadText i18n={gradio.i18n} type="gallery" />
-		</BaseFileUpload>
+			<BaseFileUpload
+				bind:upload_promise
+				bind:this={upload_input}
+				value={null}
+				root={gradio.shared.root}
+				label={gradio.shared.label}
+				max_file_size={gradio.shared.max_file_size}
+				file_count={"multiple"}
+				file_types={gradio.props.file_types}
+				i18n={gradio.i18n}
+				upload={(...args) => gradio.shared.client.upload(...args)}
+				stream_handler={(...args) => gradio.shared.client.stream(...args)}
+				onupload={async (e) => {
+					const files = Array.isArray(e) ? e : [e];
+					gradio.props.value = await process_upload_files(files);
+					active_source = null;
+					gradio.dispatch("upload", gradio.props.value);
+					gradio.dispatch("change", gradio.props.value);
+				}}
+				onerror={({ detail }) => {
+					gradio.shared.loading_status = gradio.shared.loading_status || {};
+					gradio.shared.loading_status.status = "error";
+					gradio.dispatch("error", detail);
+				}}
+			>
+				<UploadText i18n={gradio.i18n} type="gallery" />
+			</BaseFileUpload>
+		</div>
+		{#if active_source === "webcam"}
+			<Webcam
+				root={gradio.shared.root}
+				value={null}
+				on:capture={async (e) => {
+					const f = await handle_save(
+						e.detail,
+						(f) => gradio.shared.client.upload(f, gradio.shared.root),
+						"webcam_upload"
+					);
+					const processed_files = await process_upload_files(f);
+					gradio.props.value?.push(...processed_files);
+					active_source = null;
+					gradio.dispatch("change", gradio.props.value);
+				}}
+				on:error
+				on:drag
+				on:close_stream
+				mirror_webcam={true}
+				streaming={false}
+				mode="image"
+				include_audio={false}
+				i18n={gradio.i18n}
+				upload={(...args) => gradio.shared.client.upload(...args)}
+			/>
+		{:else if active_source === "webcam-video"}
+			<Webcam
+				root={gradio.shared.root}
+				value={null}
+				on:capture={async (e) => {
+					const f = { ...e.detail };
+					f.mime_type = "video/webm";
+					const processed_files = await process_upload_files([f]);
+					gradio.props.value?.push(...processed_files);
+					active_source = null;
+					gradio.dispatch("change", gradio.props.value);
+				}}
+				on:error
+				on:drag
+				on:close_stream
+				mirror_webcam={true}
+				streaming={false}
+				mode="video"
+				include_audio={false}
+				i18n={gradio.i18n}
+				upload={(...args) => gradio.shared.client.upload(...args)}
+			/>
+		{/if}
+		{#if sources.length > 1 || sources.includes("clipboard")}
+			<SelectSource
+				{sources}
+				bind:active_source
+				handle_clear={() => gradio.dispatch("clear")}
+				handle_select={handle_select_source}
+			/>
+		{/if}
 	{:else}
 		<Gallery
 			onchange={() => gradio.dispatch("change")}
@@ -145,6 +285,8 @@
 				gradio.dispatch("upload", new_value);
 				gradio.dispatch("change", gradio.props.value);
 			}}
+			{sources}
+			{onsource_change}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			columns={gradio.props.columns}
@@ -181,3 +323,9 @@
 		/>
 	{/if}
 </Block>
+
+<style>
+	.hidden-upload-input {
+		display: none;
+	}
+</style>

package/dist/Index.svelte

@@ -6,12 +6,14 @@
 <script lang="ts">
 	import { tick } from "svelte";
 	import type { FileData } from "@gradio/client";
-	import { Block, UploadText } from "@gradio/atoms";
+	import { Block, UploadText, SelectSource } from "@gradio/atoms";
 	import Gallery from "./shared/Gallery.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
 	import { Gradio } from "@gradio/utils";
 	import { BaseFileUpload } from "@gradio/file";
+	import { Webcam } from "@gradio/image";
 	import type { GalleryProps, GalleryEvents, GalleryData } from "./types";
+	import { handle_save } from "./shared/utils";
 
 	let upload_promise = $state<Promise<(FileData | null)[]>>();
 
@@ -29,15 +31,12 @@
 
 	const props = $props();
 	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props, {
-		selected_index: null
+		selected_index: null,
+		file_types: ["image", "video"]
 	});
 
 	let fullscreen = $state(false);
 
-	let no_value = $derived(
-		gradio.props.value === null ? true : gradio.props.value.length === 0
-	);
-
 	function handle_delete(
 		event: CustomEvent<{ file: FileData; index: number }>
 	): void {
@@ -71,6 +70,82 @@
 				: { image: x, caption: null }
 		);
 	}
+
+	let upload_input: BaseFileUpload;
+
+	let active_source = $state<
+		"upload" | "webcam" | "webcam-video" | "clipboard" | null
+	>(gradio.props.sources ? gradio.props.sources[0] : "upload");
+
+	let no_value = $derived(
+		gradio.props.value === null ? true : gradio.props.value.length === 0
+	);
+
+	let sources = $derived.by(() => {
+		if (
+			gradio.props.file_types?.includes("video") &&
+			gradio.props.sources.includes("webcam")
+		) {
+			return gradio.props.sources.concat(["webcam-video"]);
+		} else {
+			return gradio.props.sources;
+		}
+	});
+
+	async function paste_clipboard(): Promise<void> {
+		navigator.clipboard.read().then(async (items) => {
+			let file: File | null = null;
+			for (let i = 0; i < items.length; i++) {
+				const type = items[i].types.find((t) =>
+					(gradio.props.file_types || ["image"]).some((ft) =>
+						t.startsWith(ft + "/")
+					)
+				);
+				if (type) {
+					const blob = await items[i].getType(type);
+					file = new File([blob], `clipboard.${type.replace("image/", "")}`);
+					break;
+				}
+			}
+			if (file) {
+				const f = await handle_save(
+					file,
+					(f) => gradio.shared.client.upload(f, gradio.shared.root),
+					"clipboard_upload"
+				);
+				const processed_files = await process_upload_files(f);
+				gradio.props.value?.push(...processed_files);
+				gradio.dispatch("change", gradio.props.value);
+				active_source = null;
+			} else {
+				gradio.dispatch("warning", "No image or video found in clipboard");
+			}
+		});
+	}
+
+	async function handle_select_source(
+		source: "upload" | "webcam" | "clipboard"
+	): Promise<void> {
+		switch (source) {
+			case "clipboard":
+				await paste_clipboard();
+				break;
+			default:
+				break;
+		}
+	}
+
+	async function onsource_change(
+		source: "upload" | "webcam" | "webcam-video" | "clipboard"
+	): Promise<void> {
+		await tick();
+		if (source === "clipboard") {
+			await paste_clipboard();
+		} else {
+			active_source = source;
+			no_value = true;
+		}
+	}
 </script>
 
 <Block
@@ -96,31 +171,96 @@
 			gradio.dispatch("clear_status", gradio.shared.loading_status)}
 	/>
 	{#if gradio.shared.interactive && no_value}
-		<BaseFileUpload
-			bind:upload_promise
-			value={null}
-			root={gradio.shared.root}
-			label={gradio.shared.label}
-			max_file_size={gradio.shared.max_file_size}
-			file_count={"multiple"}
-			file_types={gradio.props.file_types}
-			i18n={gradio.i18n}
-			upload={(...args) => gradio.shared.client.upload(...args)}
-			stream_handler={(...args) => gradio.shared.client.stream(...args)}
-			onupload={async (event_data) => {
-				const files = Array.isArray(event_data) ? event_data : [event_data];
-				gradio.props.value = await process_upload_files(files);
-				gradio.dispatch("upload", gradio.props.value);
-				gradio.dispatch("change", gradio.props.value);
-			}}
-			onerror={(event_data) => {
-				gradio.shared.loading_status = gradio.shared.loading_status || {};
-				gradio.shared.loading_status.status = "error";
-				gradio.dispatch("error", event_data);
-			}}
+		<div
+			class={!gradio.props.value ||
+			(active_source && active_source.includes("webcam"))
+				? "hidden-upload-input"
+				: ""}
 		>
-			<UploadText i18n={gradio.i18n} type="gallery" />
-		</BaseFileUpload>
+			<BaseFileUpload
+				bind:upload_promise
+				bind:this={upload_input}
+				value={null}
+				root={gradio.shared.root}
+				label={gradio.shared.label}
+				max_file_size={gradio.shared.max_file_size}
+				file_count={"multiple"}
+				file_types={gradio.props.file_types}
+				i18n={gradio.i18n}
+				upload={(...args) => gradio.shared.client.upload(...args)}
+				stream_handler={(...args) => gradio.shared.client.stream(...args)}
+				onupload={async (e) => {
+					const files = Array.isArray(e) ? e : [e];
+					gradio.props.value = await process_upload_files(files);
+					active_source = null;
+					gradio.dispatch("upload", gradio.props.value);
+					gradio.dispatch("change", gradio.props.value);
+				}}
+				onerror={({ detail }) => {
+					gradio.shared.loading_status = gradio.shared.loading_status || {};
+					gradio.shared.loading_status.status = "error";
+					gradio.dispatch("error", detail);
+				}}
+			>
+				<UploadText i18n={gradio.i18n} type="gallery" />
+			</BaseFileUpload>
+		</div>
+		{#if active_source === "webcam"}
+			<Webcam
+				root={gradio.shared.root}
+				value={null}
+				on:capture={async (e) => {
+					const f = await handle_save(
+						e.detail,
+						(f) => gradio.shared.client.upload(f, gradio.shared.root),
+						"webcam_upload"
+					);
+					const processed_files = await process_upload_files(f);
+					gradio.props.value?.push(...processed_files);
+					active_source = null;
+					gradio.dispatch("change", gradio.props.value);
+				}}
+				on:error
+				on:drag
+				on:close_stream
+				mirror_webcam={true}
+				streaming={false}
+				mode="image"
+				include_audio={false}
+				i18n={gradio.i18n}
+				upload={(...args) => gradio.shared.client.upload(...args)}
+			/>
+		{:else if active_source === "webcam-video"}
+			<Webcam
+				root={gradio.shared.root}
+				value={null}
+				on:capture={async (e) => {
+					const f = { ...e.detail };
+					f.mime_type = "video/webm";
+					const processed_files = await process_upload_files([f]);
+					gradio.props.value?.push(...processed_files);
+					active_source = null;
+					gradio.dispatch("change", gradio.props.value);
+				}}
+				on:error
+				on:drag
+				on:close_stream
+				mirror_webcam={true}
+				streaming={false}
+				mode="video"
+				include_audio={false}
+				i18n={gradio.i18n}
+				upload={(...args) => gradio.shared.client.upload(...args)}
+			/>
+		{/if}
+		{#if sources.length > 1 || sources.includes("clipboard")}
+			<SelectSource
+				{sources}
+				bind:active_source
+				handle_clear={() => gradio.dispatch("clear")}
+				handle_select={handle_select_source}
+			/>
+		{/if}
 	{:else}
 		<Gallery
 			onchange={() => gradio.dispatch("change")}
@@ -145,6 +285,8 @@
 				gradio.dispatch("upload", new_value);
 				gradio.dispatch("change", gradio.props.value);
 			}}
+			{sources}
+			{onsource_change}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			columns={gradio.props.columns}
@@ -181,3 +323,9 @@
 		/>
 	{/if}
 </Block>
+
+<style>
+	.hidden-upload-input {
+		display: none;
+	}
+</style>

package/dist/Index.svelte.d.ts

@@ -1,5 +1,24 @@
 export { default as BaseGallery } from "./shared/Gallery.svelte";
 export { default as BaseExample } from "./Example.svelte";
-declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
-type Index = ReturnType<typeof Index>;
+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 Index: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
+    error: CustomEvent<string>;
+    drag: CustomEvent<any>;
+    close_stream: CustomEvent<undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Index = InstanceType<typeof Index>;
 export default Index;

package/dist/shared/Gallery.svelte

@@ -7,7 +7,7 @@
 		IconButtonWrapper,
 		FullscreenButton
 	} from "@gradio/atoms";
-	import type { CustomButton as CustomButtonType } from "@gradio/utils";
+	import { type CustomButton as CustomButtonType } from "@gradio/utils";
 	import { ModifyUpload, Upload as UploadComponent } from "@gradio/upload";
 	import { Image } from "@gradio/image/shared";
 	import { Video } from "@gradio/video/shared";
@@ -21,13 +21,15 @@
 		Image as ImageIcon,
 		Clear,
 		Play,
-		Upload as UploadIcon
+		Upload as UploadIcon,
+		Webcam,
+		Video as VideoIcon,
+		ImagePaste
 	} from "@gradio/icons";
 	import { FileData } from "@gradio/client";
 	import type { Client } from "@gradio/client";
 	import { format_gallery_for_sharing } from "./utils";
 	import type { I18nFormatter } from "@gradio/utils";
-	import { on } from "svelte/events";
 
 	type GalleryData = GalleryImage | GalleryVideo;
 
@@ -51,6 +53,7 @@
 		fullscreen = false,
 		root = "",
 		file_types = ["image", "video"],
+		sources,
 		max_file_size = null,
 		upload,
 		stream_handler,
@@ -66,7 +69,8 @@
 		onpreview_close = () => {},
 		onfullscreen = (data) => {},
 		ondelete = () => {},
-		onupload = () => {}
+		onupload = () => {},
+		onsource_change = () => {}
 	}: {
 		show_label: boolean;
 		label: string;
@@ -87,6 +91,7 @@
 		fullscreen: boolean;
 		root: string;
 		file_types: string[] | null;
+		sources: ("upload" | "webcam" | "clipboard" | "webcam-video")[];
 		max_file_size: number | null;
 		upload: Client["upload"] | undefined;
 		stream_handler: Client["stream"] | undefined;
@@ -103,6 +108,7 @@
 		onfullscreen: (data: any) => void;
 		ondelete: (data: any) => void;
 		onupload: (data: FileData | FileData[]) => void;
+		onsource_change: (source: string) => void;
 	} = $props();
 
 	let upload_promise: Promise<any> | null = null;
@@ -189,8 +195,6 @@
 		() => ((selected_index ?? 0) + 1) % (resolved_value?.length ?? 0)
 	);
 
-	$inspect("selected_index", selected_index);
-
 	function handle_preview_click(event: MouseEvent): void {
 		const element = event.target as HTMLElement;
 		const x = event.offsetX;
@@ -410,10 +414,7 @@
 					{/if}
 
 					{#if show_fullscreen_button}
-						<FullscreenButton
-							{fullscreen}
-							on:fullscreen={(e) => onfullscreen(e)}
-						/>
+						<FullscreenButton {fullscreen} onclick={(e) => onfullscreen(e)} />
 					{/if}
 
 					{#if show_share_button}
@@ -541,6 +542,7 @@
 					{i18n}
 					onclear={() => {
 						value = [];
+						onsource_change("upload");
 						onclear();
 					}}
 				>
@@ -564,6 +566,33 @@
 							/>
 						</IconButton>
 					{/if}
+					{#if sources.includes("webcam")}
+						<IconButton
+							Icon={Webcam}
+							label={i18n("common.webcam")}
+							onclick={() => {
+								onsource_change("webcam");
+							}}
+						/>
+					{/if}
+					{#if sources.includes("webcam-video")}
+						<IconButton
+							Icon={VideoIcon}
+							label={i18n("common.video")}
+							onclick={() => {
+								onsource_change("webcam-video");
+							}}
+						/>
+					{/if}
+					{#if sources.includes("clipboard")}
+						<IconButton
+							label={i18n("upload_text.paste_clipboard")}
+							onclick={() => {
+								onsource_change("clipboard");
+							}}
+							Icon={ImagePaste}
+						/>
+					{/if}
 				</ModifyUpload>
 			{/if}
 			<div

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

@@ -1,4 +1,4 @@
-import type { CustomButton as CustomButtonType } from "@gradio/utils";
+import { type CustomButton as CustomButtonType } from "@gradio/utils";
 import type { GalleryImage, GalleryVideo } from "../types";
 import { FileData } from "@gradio/client";
 import type { Client } from "@gradio/client";
@@ -24,6 +24,7 @@ type $$ComponentProps = {
     fullscreen: boolean;
     root: string;
     file_types: string[] | null;
+    sources: ("upload" | "webcam" | "clipboard" | "webcam-video")[];
     max_file_size: number | null;
     upload: Client["upload"] | undefined;
     stream_handler: Client["stream"] | undefined;
@@ -40,6 +41,7 @@ type $$ComponentProps = {
     onfullscreen: (data: any) => void;
     ondelete: (data: any) => void;
     onupload: (data: FileData | FileData[]) => void;
+    onsource_change: (source: string) => void;
 };
 declare const Gallery: import("svelte").Component<$$ComponentProps, {}, "value" | "selected_index">;
 type Gallery = ReturnType<typeof Gallery>;

package/dist/shared/utils.d.ts

@@ -1,2 +1,3 @@
-import type { FileData } from "@gradio/client";
+import { FileData, Client } from "@gradio/client";
 export declare function format_gallery_for_sharing(value: [FileData, string | null][] | null): Promise<string>;
+export declare function handle_save(img_blob: Blob, upload: Client["upload"], filename?: string): Promise<FileData[]>;

package/dist/shared/utils.js

@@ -1,4 +1,5 @@
 import { uploadToHuggingFace } from "@gradio/utils";
+import { FileData, Client } from "@gradio/client";
 export async function format_gallery_for_sharing(value) {
     if (!value)
         return "";
@@ -11,3 +12,18 @@ export async function format_gallery_for_sharing(value) {
         .map((url) => `<img src="${url}" style="height: 400px" />`)
         .join("")}</div>`;
 }
+export async function handle_save(img_blob, upload, filename = "uploaded_file") {
+    const ext = img_blob.type.split("/")[1] || "png";
+    const f_ = new File([img_blob], `${filename}.${ext}`);
+    const files = [
+        new FileData({
+            path: f_.name,
+            orig_name: f_.name,
+            blob: f_,
+            size: f_.size,
+            mime_type: f_.type,
+            is_stream: false
+        })
+    ];
+    return (await upload(...files));
+}

package/dist/types.d.ts

@@ -22,6 +22,7 @@ export interface GalleryProps {
     buttons: (string | CustomButton)[];
     type: "numpy" | "pil" | "filepath";
     fit_columns: boolean;
+    sources: ("upload" | "webcam-video" | "webcam" | "clipboard")[];
 }
 export interface GalleryEvents {
     change: GalleryData[] | null;
@@ -39,4 +40,5 @@ export interface GalleryEvents {
     custom_button_click: {
         id: number;
     };
+    warning: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,15 +8,15 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.3",
-    "@gradio/atoms": "^0.20.1",
-    "@gradio/client": "^2.0.3",
+    "@gradio/atoms": "^0.21.0",
+    "@gradio/client": "^2.0.4",
+    "@gradio/file": "^0.14.2",
+    "@gradio/image": "^0.25.2",
+    "@gradio/statustracker": "^0.12.3",
     "@gradio/icons": "^0.15.1",
-    "@gradio/file": "^0.14.1",
-    "@gradio/statustracker": "^0.12.2",
-    "@gradio/image": "^0.25.1",
-    "@gradio/upload": "^0.17.4",
     "@gradio/utils": "^0.11.2",
-    "@gradio/video": "^0.20.1"
+    "@gradio/video": "^0.20.2",
+    "@gradio/upload": "^0.17.5"
   },
   "devDependencies": {
     "@gradio/preview": "^0.15.2"

package/shared/Gallery.svelte

@@ -7,7 +7,7 @@
 		IconButtonWrapper,
 		FullscreenButton
 	} from "@gradio/atoms";
-	import type { CustomButton as CustomButtonType } from "@gradio/utils";
+	import { type CustomButton as CustomButtonType } from "@gradio/utils";
 	import { ModifyUpload, Upload as UploadComponent } from "@gradio/upload";
 	import { Image } from "@gradio/image/shared";
 	import { Video } from "@gradio/video/shared";
@@ -21,13 +21,15 @@
 		Image as ImageIcon,
 		Clear,
 		Play,
-		Upload as UploadIcon
+		Upload as UploadIcon,
+		Webcam,
+		Video as VideoIcon,
+		ImagePaste
 	} from "@gradio/icons";
 	import { FileData } from "@gradio/client";
 	import type { Client } from "@gradio/client";
 	import { format_gallery_for_sharing } from "./utils";
 	import type { I18nFormatter } from "@gradio/utils";
-	import { on } from "svelte/events";
 
 	type GalleryData = GalleryImage | GalleryVideo;
 
@@ -51,6 +53,7 @@
 		fullscreen = false,
 		root = "",
 		file_types = ["image", "video"],
+		sources,
 		max_file_size = null,
 		upload,
 		stream_handler,
@@ -66,7 +69,8 @@
 		onpreview_close = () => {},
 		onfullscreen = (data) => {},
 		ondelete = () => {},
-		onupload = () => {}
+		onupload = () => {},
+		onsource_change = () => {}
 	}: {
 		show_label: boolean;
 		label: string;
@@ -87,6 +91,7 @@
 		fullscreen: boolean;
 		root: string;
 		file_types: string[] | null;
+		sources: ("upload" | "webcam" | "clipboard" | "webcam-video")[];
 		max_file_size: number | null;
 		upload: Client["upload"] | undefined;
 		stream_handler: Client["stream"] | undefined;
@@ -103,6 +108,7 @@
 		onfullscreen: (data: any) => void;
 		ondelete: (data: any) => void;
 		onupload: (data: FileData | FileData[]) => void;
+		onsource_change: (source: string) => void;
 	} = $props();
 
 	let upload_promise: Promise<any> | null = null;
@@ -189,8 +195,6 @@
 		() => ((selected_index ?? 0) + 1) % (resolved_value?.length ?? 0)
 	);
 
-	$inspect("selected_index", selected_index);
-
 	function handle_preview_click(event: MouseEvent): void {
 		const element = event.target as HTMLElement;
 		const x = event.offsetX;
@@ -410,10 +414,7 @@
 					{/if}
 
 					{#if show_fullscreen_button}
-						<FullscreenButton
-							{fullscreen}
-							on:fullscreen={(e) => onfullscreen(e)}
-						/>
+						<FullscreenButton {fullscreen} onclick={(e) => onfullscreen(e)} />
 					{/if}
 
 					{#if show_share_button}
@@ -541,6 +542,7 @@
 					{i18n}
 					onclear={() => {
 						value = [];
+						onsource_change("upload");
 						onclear();
 					}}
 				>
@@ -564,6 +566,33 @@
 							/>
 						</IconButton>
 					{/if}
+					{#if sources.includes("webcam")}
+						<IconButton
+							Icon={Webcam}
+							label={i18n("common.webcam")}
+							onclick={() => {
+								onsource_change("webcam");
+							}}
+						/>
+					{/if}
+					{#if sources.includes("webcam-video")}
+						<IconButton
+							Icon={VideoIcon}
+							label={i18n("common.video")}
+							onclick={() => {
+								onsource_change("webcam-video");
+							}}
+						/>
+					{/if}
+					{#if sources.includes("clipboard")}
+						<IconButton
+							label={i18n("upload_text.paste_clipboard")}
+							onclick={() => {
+								onsource_change("clipboard");
+							}}
+							Icon={ImagePaste}
+						/>
+					{/if}
 				</ModifyUpload>
 			{/if}
 			<div

package/shared/utils.ts

@@ -1,5 +1,5 @@
 import { uploadToHuggingFace } from "@gradio/utils";
-import type { FileData } from "@gradio/client";
+import { FileData, Client } from "@gradio/client";
 
 export async function format_gallery_for_sharing(
 	value: [FileData, string | null][] | null
@@ -16,3 +16,23 @@ export async function format_gallery_for_sharing(
 		.map((url) => `<img src="${url}" style="height: 400px" />`)
 		.join("")}</div>`;
 }
+
+export async function handle_save(
+	img_blob: Blob,
+	upload: Client["upload"],
+	filename: string = "uploaded_file"
+): Promise<FileData[]> {
+	const ext = img_blob.type.split("/")[1] || "png";
+	const f_ = new File([img_blob], `${filename}.${ext}`);
+	const files = [
+		new FileData({
+			path: f_.name,
+			orig_name: f_.name,
+			blob: f_,
+			size: f_.size,
+			mime_type: f_.type,
+			is_stream: false
+		})
+	];
+	return (await upload(...files)) as FileData[];
+}

package/types.ts

@@ -26,6 +26,7 @@ export interface GalleryProps {
 	buttons: (string | CustomButton)[];
 	type: "numpy" | "pil" | "filepath";
 	fit_columns: boolean;
+	sources: ("upload" | "webcam-video" | "webcam" | "clipboard")[];
 }
 
 export interface GalleryEvents {
@@ -39,4 +40,5 @@ export interface GalleryEvents {
 	share: any;
 	error: any;
 	custom_button_click: { id: number };
+	warning: string;
 }