@gradio/gallery 0.16.1 → 0.17.0

package/Index.svelte

@@ -6,14 +6,16 @@
 <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<any>>();
+	let upload_promise = $state<Promise<(FileData | null)[]>>();
 
 	class GalleryGradio extends Gradio<GalleryEvents, GalleryProps> {
 		async get_data() {
@@ -28,14 +30,13 @@
 	}
 
 	const props = $props();
-	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props);
+	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props, {
+		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 {
@@ -69,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
@@ -94,46 +171,113 @@
 			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)}
-			on:upload={async (e) => {
-				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
-				gradio.props.value = await process_upload_files(files);
-				gradio.dispatch("upload", gradio.props.value);
-				gradio.dispatch("change", gradio.props.value);
-			}}
-			on:error={({ detail }) => {
-				gradio.shared.loading_status = gradio.shared.loading_status || {};
-				gradio.shared.loading_status.status = "error";
-				gradio.dispatch("error", detail);
-			}}
+		<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
-			on:change={() => gradio.dispatch("change")}
-			on:clear={() => gradio.dispatch("change")}
-			on:select={(e) => gradio.dispatch("select", e.detail)}
-			on:share={(e) => gradio.dispatch("share", e.detail)}
-			on:error={(e) => gradio.dispatch("error", e.detail)}
-			on:preview_open={() => gradio.dispatch("preview_open")}
-			on:preview_close={() => gradio.dispatch("preview_close")}
-			on:fullscreen={({ detail }) => {
+			onchange={() => gradio.dispatch("change")}
+			onclear={() => gradio.dispatch("change")}
+			onselect={(e) => gradio.dispatch("select", e)}
+			onshare={(e) => gradio.dispatch("share", e.detail)}
+			onerror={(e) => gradio.dispatch("error", e.detail)}
+			onpreview_open={() => {
+				gradio.dispatch("preview_open");
+			}}
+			onpreview_close={() => gradio.dispatch("preview_close")}
+			onfullscreen={({ detail }) => {
 				fullscreen = detail;
 			}}
-			on:delete={handle_delete}
-			on:upload={async (e) => {
-				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
+			ondelete={handle_delete}
+			onupload={async (e) => {
+				const files = Array.isArray(e) ? e : [e];
 				const new_value = await process_upload_files(files);
 				gradio.props.value = gradio.props.value
 					? [...gradio.props.value, ...new_value]
@@ -141,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}
@@ -177,3 +323,9 @@
 		/>
 	{/if}
 </Block>
+
+<style>
+	.hidden-upload-input {
+		display: none;
+	}
+</style>

package/dist/Index.svelte

@@ -6,14 +6,16 @@
 <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<any>>();
+	let upload_promise = $state<Promise<(FileData | null)[]>>();
 
 	class GalleryGradio extends Gradio<GalleryEvents, GalleryProps> {
 		async get_data() {
@@ -28,14 +30,13 @@
 	}
 
 	const props = $props();
-	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props);
+	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props, {
+		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 {
@@ -69,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
@@ -94,46 +171,113 @@
 			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)}
-			on:upload={async (e) => {
-				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
-				gradio.props.value = await process_upload_files(files);
-				gradio.dispatch("upload", gradio.props.value);
-				gradio.dispatch("change", gradio.props.value);
-			}}
-			on:error={({ detail }) => {
-				gradio.shared.loading_status = gradio.shared.loading_status || {};
-				gradio.shared.loading_status.status = "error";
-				gradio.dispatch("error", detail);
-			}}
+		<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
-			on:change={() => gradio.dispatch("change")}
-			on:clear={() => gradio.dispatch("change")}
-			on:select={(e) => gradio.dispatch("select", e.detail)}
-			on:share={(e) => gradio.dispatch("share", e.detail)}
-			on:error={(e) => gradio.dispatch("error", e.detail)}
-			on:preview_open={() => gradio.dispatch("preview_open")}
-			on:preview_close={() => gradio.dispatch("preview_close")}
-			on:fullscreen={({ detail }) => {
+			onchange={() => gradio.dispatch("change")}
+			onclear={() => gradio.dispatch("change")}
+			onselect={(e) => gradio.dispatch("select", e)}
+			onshare={(e) => gradio.dispatch("share", e.detail)}
+			onerror={(e) => gradio.dispatch("error", e.detail)}
+			onpreview_open={() => {
+				gradio.dispatch("preview_open");
+			}}
+			onpreview_close={() => gradio.dispatch("preview_close")}
+			onfullscreen={({ detail }) => {
 				fullscreen = detail;
 			}}
-			on:delete={handle_delete}
-			on:upload={async (e) => {
-				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
+			ondelete={handle_delete}
+			onupload={async (e) => {
+				const files = Array.isArray(e) ? e : [e];
 				const new_value = await process_upload_files(files);
 				gradio.props.value = gradio.props.value
 					? [...gradio.props.value, ...new_value]
@@ -141,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}
@@ -177,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;