@gradio/gallery 0.17.8 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @gradio/gallery
 
+## 0.19.0
+
+### Features
+
+- [#13566](https://github.com/gradio-app/gradio/pull/13566) [`79b9171`](https://github.com/gradio-app/gradio/commit/79b91718b5c972c174ed042d8b04443bc2274076) - Gallery Download All.  Thanks @dawoodkhan82!
+- [#13543](https://github.com/gradio-app/gradio/pull/13543) [`0533483`](https://github.com/gradio-app/gradio/commit/0533483bccdee38f334a598f18297e8c02966343) - Migrate Image components to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.15.1
+- @gradio/icons@0.16.0
+- @gradio/atoms@0.26.0
+- @gradio/image@0.28.0
+- @gradio/video@0.22.0
+- @gradio/client@2.3.1
+- @gradio/upload@0.18.1
+- @gradio/file@0.15.1
+
+## 0.18.0
+
+### Features
+
+- [#13526](https://github.com/gradio-app/gradio/pull/13526) [`53cb4ca`](https://github.com/gradio-app/gradio/commit/53cb4cae1ec3521e9170d12867253516413ba37a) - Run `pnpm lint` and `pnpm ts:check` on CI.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.25.0
+- @gradio/statustracker@0.15.0
+- @gradio/utils@0.13.0
+- @gradio/client@2.3.0
+- @gradio/upload@0.18.0
+- @gradio/image@0.27.0
+- @gradio/file@0.15.0
+- @gradio/video@0.21.0
+
+## 0.17.8
+
+### Dependency updates
+
+- @gradio/client@2.2.2
+
+## 0.17.8
+
+### Dependency updates
+
+- @gradio/client@2.2.1
+- @gradio/upload@0.17.10
+
 ## 0.17.8
 
 ### Fixes

package/Gallery.stories.svelte

@@ -2,8 +2,6 @@
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import Gallery from "./Index.svelte";
 	import { allModes } from "../storybook/modes";
-	import { within } from "@testing-library/dom";
-	import { userEvent } from "storybook/test";
 	import { wrapProps } from "../storybook/wrapProps";
 
 	const cheetah = "/cheetah.jpg";
@@ -157,15 +155,6 @@
 		buttons: ["fullscreen", "download", "share"],
 		sources: ["upload"]
 	}}
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		const image = await canvas.findByLabelText("Thumbnail 1 of 8");
-		await userEvent.click(image);
-		const expand_btn = await canvas.findByRole("button", {
-			name: "Fullscreen"
-		});
-		await userEvent.click(expand_btn);
-	}}
 >
 	{#snippet template(args)}
 		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
@@ -186,37 +175,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="Gallery with rows=3 and columns=3"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		rows: 3,
-		columns: 3,
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
-<Story
-	name="Gallery with columns=4"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		columns: 4,
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
 <Story
 	name="Gallery with height=600"
 	args={{
@@ -231,21 +189,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="Gallery with allow_preview=false"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		allow_preview: false,
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
 <Story
 	name="Gallery with preview"
 	args={{
@@ -261,36 +204,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="Gallery with object_fit=scale-down"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		object_fit: "scale-down",
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
-<Story
-	name="Gallery with object_fit=contain"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		object_fit: "contain",
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
 <Story
 	name="Gallery with object_fit=cover"
 	args={{
@@ -306,21 +219,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="Gallery with object_fit=none"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		object_fit: "none",
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
 <Story
 	name="Gallery with object_fit=fill"
 	args={{
@@ -336,69 +234,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="Gallery with share button"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		buttons: ["share"],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
-<Story
-	name="Gallery with overflow of images"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		rows: 2,
-		columns: 2,
-		height: 400,
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
-<Story
-	name="Gallery with overflow of images and short height"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		rows: 2,
-		columns: 2,
-		height: 200,
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
-<Story
-	name="Gallery with download button"
-	args={{
-		label: "My Cheetah Gallery",
-		rows: 2,
-		height: 400,
-		buttons: ["download"],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
 <Story
 	name="Gallery with fit_columns false"
 	args={{
@@ -413,18 +248,3 @@
 		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
 	{/snippet}
 </Story>
-
-<Story
-	name="Gallery with fit_columns true"
-	args={{
-		label: "My Cheetah Gallery",
-		columns: 10,
-		buttons: ["download"],
-		fit_columns: true,
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>

package/Gallery.test.ts

@@ -1,5 +1,13 @@
 import { test, describe, afterEach, expect, vi } from "vitest";
-import { cleanup, render, fireEvent, waitFor } from "@self/tootils/render";
+import {
+	cleanup,
+	render,
+	fireEvent,
+	waitFor,
+	upload_file,
+	mock_client,
+	TEST_JPG
+} from "@self/tootils/render";
 import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
 
 import Gallery from "./Index.svelte";
@@ -376,6 +384,84 @@ describe("Props: buttons", () => {
 		expect(getByRole("button", { name: "common.download" })).toBeVisible();
 	});
 
+	test("buttons=['download_all'] downloads gallery files as a zip from grid view", async () => {
+		const fetch = vi.fn(async () => new Response(new Blob(["file"])));
+		const blobs: Blob[] = [];
+		const clicked_names: string[] = [];
+		const create_object_url = vi
+			.spyOn(URL, "createObjectURL")
+			.mockImplementation((object: Blob | MediaSource) => {
+				blobs.push(object as Blob);
+				return "blob:gallery";
+			});
+		const revoke_object_url = vi
+			.spyOn(URL, "revokeObjectURL")
+			.mockImplementation(() => {});
+		const click = vi
+			.spyOn(HTMLAnchorElement.prototype, "click")
+			.mockImplementation(function (this: HTMLAnchorElement) {
+				clicked_names.push(this.download);
+			});
+
+		try {
+			const value = [img("cat"), vid("clip"), img("dog")];
+			const { queryByRole } = await render(Gallery, {
+				...preview_props,
+				value,
+				buttons: ["download_all"],
+				client: { fetch }
+			});
+
+			expect(
+				queryByRole("button", { name: "common.download_all" })
+			).not.toBeInTheDocument();
+
+			cleanup();
+
+			const { getByRole } = await render(Gallery, {
+				...default_props,
+				value,
+				buttons: ["download_all"],
+				client: { fetch }
+			});
+
+			await fireEvent.click(
+				getByRole("button", { name: "common.download_all" })
+			);
+
+			await waitFor(() => {
+				expect(fetch).toHaveBeenCalledTimes(3);
+				expect(click).toHaveBeenCalledTimes(1);
+			});
+
+			expect(fetch).toHaveBeenNthCalledWith(1, "https://example.com/cat.png");
+			expect(fetch).toHaveBeenNthCalledWith(2, "https://example.com/clip.mp4");
+			expect(fetch).toHaveBeenNthCalledWith(3, "https://example.com/dog.png");
+			expect(create_object_url).toHaveBeenCalledTimes(1);
+			expect(revoke_object_url).toHaveBeenCalledWith("blob:gallery");
+			expect(clicked_names).toEqual(["gallery.zip"]);
+			expect(blobs[0].type).toBe("application/zip");
+
+			const zip = new Uint8Array(await blobs[0].arrayBuffer());
+			expect(Array.from(zip.slice(0, 4))).toEqual([0x50, 0x4b, 0x03, 0x04]);
+			const zip_view = new DataView(zip.buffer);
+			expect(zip_view.getUint16(6, true)).toBe(0x0800);
+			const central_header_index = zip.findIndex((_, index) =>
+				[0x50, 0x4b, 0x01, 0x02].every(
+					(byte, offset) => zip[index + offset] === byte
+				)
+			);
+			expect(central_header_index).toBeGreaterThan(-1);
+			expect(zip_view.getUint16(central_header_index + 8, true)).toBe(0x0800);
+			const zip_text = new TextDecoder().decode(zip);
+			expect(zip_text).toContain("cat.png");
+			expect(zip_text).toContain("clip.mp4");
+			expect(zip_text).toContain("dog.png");
+		} finally {
+			vi.restoreAllMocks();
+		}
+	});
+
 	test("buttons=['fullscreen'] shows fullscreen button in preview", async () => {
 		const { getByLabelText } = await render(Gallery, {
 			...preview_props,
@@ -610,6 +696,30 @@ describe("Events: change", () => {
 	});
 });
 
+describe("Events: upload", () => {
+	afterEach(() => cleanup());
+
+	test("upload: file input dispatches upload and change events", async () => {
+		const { listen } = await render(Gallery, {
+			...default_props,
+			interactive: true,
+			value: null,
+			root: "https://example.com",
+			client: mock_client()
+		});
+
+		const upload = listen("upload");
+		const change = listen("change");
+
+		await upload_file(TEST_JPG);
+
+		await waitFor(() => {
+			expect(upload).toHaveBeenCalledTimes(1);
+		});
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+});
+
 describe("Events: select", () => {
 	afterEach(() => cleanup());
 

package/Index.svelte

@@ -30,7 +30,7 @@
 	}
 
 	const props = $props();
-	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props, {
+	const gradio = new GalleryGradio(props, {
 		selected_index: null,
 		file_types: ["image", "video"]
 	});
@@ -192,7 +192,7 @@
 					gradio.dispatch("upload", gradio.props.value);
 					gradio.dispatch("change", gradio.props.value);
 				}}
-				onerror={({ detail }) => {
+				onerror={(detail) => {
 					gradio.shared.loading_status = gradio.shared.loading_status || {};
 					gradio.shared.loading_status.status = "error";
 					gradio.dispatch("error", detail);
@@ -205,9 +205,10 @@
 			<Webcam
 				root={gradio.shared.root}
 				value={null}
-				on:capture={async (e) => {
+				oncapture={async (detail) => {
+					if (!(detail instanceof Blob)) return;
 					const f = await handle_save(
-						e.detail,
+						detail,
 						(f) => gradio.shared.client.upload(f, gradio.shared.root),
 						"webcam_upload"
 					);
@@ -216,9 +217,6 @@
 					active_source = null;
 					gradio.dispatch("change", gradio.props.value);
 				}}
-				on:error
-				on:drag
-				on:close_stream
 				mirror_webcam={true}
 				streaming={false}
 				mode="image"
@@ -230,17 +228,15 @@
 			<Webcam
 				root={gradio.shared.root}
 				value={null}
-				on:capture={async (e) => {
-					const f = { ...e.detail };
+				oncapture={async (detail) => {
+					if (!detail) return;
+					const f = { ...(detail as FileData) };
 					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"
@@ -254,7 +250,7 @@
 				{sources}
 				bind:active_source
 				handle_clear={() => gradio.dispatch("clear")}
-				handle_select={handle_select_source}
+				handle_select={(source) => handle_select_source(source as any)}
 			/>
 		{/if}
 	{:else}
@@ -282,7 +278,7 @@
 				gradio.dispatch("change", gradio.props.value);
 			}}
 			{sources}
-			{onsource_change}
+			onsource_change={(source) => onsource_change(source as any)}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			columns={gradio.props.columns}
@@ -300,6 +296,9 @@
 			show_download_button={gradio.props.buttons.some(
 				(btn) => typeof btn === "string" && btn === "download"
 			)}
+			show_download_all_button={gradio.props.buttons.some(
+				(btn) => typeof btn === "string" && btn === "download_all"
+			)}
 			fit_columns={gradio.props.fit_columns}
 			i18n={gradio.i18n}
 			_fetch={(...args) => gradio.shared.client.fetch(...args)}

package/dist/Index.svelte

@@ -30,7 +30,7 @@
 	}
 
 	const props = $props();
-	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props, {
+	const gradio = new GalleryGradio(props, {
 		selected_index: null,
 		file_types: ["image", "video"]
 	});
@@ -192,7 +192,7 @@
 					gradio.dispatch("upload", gradio.props.value);
 					gradio.dispatch("change", gradio.props.value);
 				}}
-				onerror={({ detail }) => {
+				onerror={(detail) => {
 					gradio.shared.loading_status = gradio.shared.loading_status || {};
 					gradio.shared.loading_status.status = "error";
 					gradio.dispatch("error", detail);
@@ -205,9 +205,10 @@
 			<Webcam
 				root={gradio.shared.root}
 				value={null}
-				on:capture={async (e) => {
+				oncapture={async (detail) => {
+					if (!(detail instanceof Blob)) return;
 					const f = await handle_save(
-						e.detail,
+						detail,
 						(f) => gradio.shared.client.upload(f, gradio.shared.root),
 						"webcam_upload"
 					);
@@ -216,9 +217,6 @@
 					active_source = null;
 					gradio.dispatch("change", gradio.props.value);
 				}}
-				on:error
-				on:drag
-				on:close_stream
 				mirror_webcam={true}
 				streaming={false}
 				mode="image"
@@ -230,17 +228,15 @@
 			<Webcam
 				root={gradio.shared.root}
 				value={null}
-				on:capture={async (e) => {
-					const f = { ...e.detail };
+				oncapture={async (detail) => {
+					if (!detail) return;
+					const f = { ...(detail as FileData) };
 					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"
@@ -254,7 +250,7 @@
 				{sources}
 				bind:active_source
 				handle_clear={() => gradio.dispatch("clear")}
-				handle_select={handle_select_source}
+				handle_select={(source) => handle_select_source(source as any)}
 			/>
 		{/if}
 	{:else}
@@ -282,7 +278,7 @@
 				gradio.dispatch("change", gradio.props.value);
 			}}
 			{sources}
-			{onsource_change}
+			onsource_change={(source) => onsource_change(source as any)}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			columns={gradio.props.columns}
@@ -300,6 +296,9 @@
 			show_download_button={gradio.props.buttons.some(
 				(btn) => typeof btn === "string" && btn === "download"
 			)}
+			show_download_all_button={gradio.props.buttons.some(
+				(btn) => typeof btn === "string" && btn === "download_all"
+			)}
 			fit_columns={gradio.props.fit_columns}
 			i18n={gradio.i18n}
 			_fetch={(...args) => gradio.shared.client.fetch(...args)}

package/dist/Index.svelte.d.ts

@@ -1,24 +1,5 @@
 export { default as BaseGallery } from "./shared/Gallery.svelte";
 export { default as BaseExample } from "./Example.svelte";
-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>;
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
 export default Index;

package/dist/shared/Gallery.svelte

@@ -18,6 +18,7 @@
 
 	import {
 		Download,
+		DownloadAll,
 		Image as ImageIcon,
 		Clear,
 		Play,
@@ -45,6 +46,7 @@
 		object_fit = "cover",
 		show_share_button = false,
 		show_download_button = false,
+		show_download_all_button = false,
 		i18n,
 		selected_index = $bindable(),
 		interactive,
@@ -83,6 +85,7 @@
 		object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
 		show_share_button: boolean;
 		show_download_button: boolean;
+		show_download_all_button: boolean;
 		i18n: I18nFormatter;
 		selected_index: number | null;
 		interactive: boolean;
@@ -112,7 +115,7 @@
 	} = $props();
 
 	let upload_promise: Promise<any> | null = null;
-	let mode: "normal" | "minimal" = "normal";
+	let mode = $state<"normal" | "minimal">("normal");
 	let display_icon_button_wrapper_top_corner = false;
 	let is_full_screen = false;
 	let image_container: HTMLElement;
@@ -307,6 +310,184 @@
 		URL.revokeObjectURL(url);
 	}
 
+	const crc_table = new Uint32Array(
+		Array.from({ length: 256 }, (_, i) => {
+			let c = i;
+			for (let k = 0; k < 8; k++) {
+				c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+			}
+			return c >>> 0;
+		})
+	);
+
+	function crc32(data: Uint8Array): number {
+		let c = 0xffffffff;
+		for (const byte of data) {
+			c = crc_table[(c ^ byte) & 0xff] ^ (c >>> 8);
+		}
+		return (c ^ 0xffffffff) >>> 0;
+	}
+
+	function write_uint16(view: DataView, offset: number, value: number): void {
+		view.setUint16(offset, value, true);
+	}
+
+	function write_uint32(view: DataView, offset: number, value: number): void {
+		view.setUint32(offset, value, true);
+	}
+
+	function zip_header(size: number): Uint8Array {
+		return new Uint8Array(size);
+	}
+
+	function get_unique_name(
+		file: FileData,
+		fallback: string,
+		used_names: Map<string, number>
+	): string {
+		const raw_name = file.orig_name || file.path || fallback;
+		const name = raw_name.split(/[/\\]/).pop() || fallback;
+		const count = used_names.get(name) ?? 0;
+		used_names.set(name, count + 1);
+		if (count === 0) return name;
+
+		const dot_index = name.lastIndexOf(".");
+		const base = dot_index > 0 ? name.slice(0, dot_index) : name;
+		const ext = dot_index > 0 ? name.slice(dot_index) : "";
+		return `${base}-${count + 1}${ext}`;
+	}
+
+	function create_zip(files: { name: string; data: Uint8Array }[]): Uint8Array {
+		const encoder = new TextEncoder();
+		const parts: Uint8Array[] = [];
+		const central_parts: Uint8Array[] = [];
+		const utf8_flag = 0x0800;
+		let offset = 0;
+
+		for (const file of files) {
+			const name = encoder.encode(file.name);
+			const checksum = crc32(file.data);
+			const local_header = zip_header(30 + name.length);
+			const local_view = new DataView(local_header.buffer);
+			write_uint32(local_view, 0, 0x04034b50);
+			write_uint16(local_view, 4, 20);
+			write_uint16(local_view, 6, utf8_flag);
+			write_uint16(local_view, 8, 0);
+			write_uint16(local_view, 10, 0);
+			write_uint16(local_view, 12, 33);
+			write_uint32(local_view, 14, checksum);
+			write_uint32(local_view, 18, file.data.length);
+			write_uint32(local_view, 22, file.data.length);
+			write_uint16(local_view, 26, name.length);
+			write_uint16(local_view, 28, 0);
+			local_header.set(name, 30);
+			parts.push(local_header, file.data);
+
+			const central_header = zip_header(46 + name.length);
+			const central_view = new DataView(central_header.buffer);
+			write_uint32(central_view, 0, 0x02014b50);
+			write_uint16(central_view, 4, 20);
+			write_uint16(central_view, 6, 20);
+			write_uint16(central_view, 8, utf8_flag);
+			write_uint16(central_view, 10, 0);
+			write_uint16(central_view, 12, 0);
+			write_uint16(central_view, 14, 33);
+			write_uint32(central_view, 16, checksum);
+			write_uint32(central_view, 20, file.data.length);
+			write_uint32(central_view, 24, file.data.length);
+			write_uint16(central_view, 28, name.length);
+			write_uint16(central_view, 30, 0);
+			write_uint16(central_view, 32, 0);
+			write_uint16(central_view, 34, 0);
+			write_uint16(central_view, 36, 0);
+			write_uint32(central_view, 38, 0);
+			write_uint32(central_view, 42, offset);
+			central_header.set(name, 46);
+			central_parts.push(central_header);
+
+			offset += local_header.length + file.data.length;
+		}
+
+		const central_offset = offset;
+		const central_size = central_parts.reduce(
+			(sum, part) => sum + part.length,
+			0
+		);
+		const end = zip_header(22);
+		const end_view = new DataView(end.buffer);
+		write_uint32(end_view, 0, 0x06054b50);
+		write_uint16(end_view, 4, 0);
+		write_uint16(end_view, 6, 0);
+		write_uint16(end_view, 8, files.length);
+		write_uint16(end_view, 10, files.length);
+		write_uint32(end_view, 12, central_size);
+		write_uint32(end_view, 16, central_offset);
+		write_uint16(end_view, 20, 0);
+
+		const zip = new Uint8Array(central_offset + central_size + end.length);
+		let cursor = 0;
+		for (const part of [...parts, ...central_parts, end]) {
+			zip.set(part, cursor);
+			cursor += part.length;
+		}
+		return zip;
+	}
+
+	async function get_zip_file(
+		url: string,
+		name: string
+	): Promise<{ name: string; data: Uint8Array } | null> {
+		let response;
+		try {
+			response = await _fetch(url);
+		} catch (error) {
+			if (error instanceof TypeError) {
+				window.open(url, "_blank", "noreferrer");
+			}
+			return null;
+		}
+		if (!response.ok) return null;
+		return {
+			name,
+			data: new Uint8Array(await response.arrayBuffer())
+		};
+	}
+
+	async function download_all(media: GalleryData[]): Promise<void> {
+		const used_names = new Map<string, number>();
+		const files = await Promise.all(
+			media.flatMap((item, index) => {
+				const file = "image" in item ? item.image : item.video;
+				const fallback =
+					"image" in item ? `image-${index + 1}` : `video-${index + 1}`;
+				if (!file.url) return [];
+				const name = get_unique_name(file, fallback, used_names);
+				return [get_zip_file(file.url, name)];
+			})
+		);
+		const valid_files = files.filter(
+			(file): file is { name: string; data: Uint8Array } => file !== null
+		);
+
+		if (valid_files.length === 0) return;
+
+		const zip = create_zip(valid_files);
+		const url = URL.createObjectURL(
+			new Blob([zip.buffer as ArrayBuffer], { type: "application/zip" })
+		);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = "gallery.zip";
+		link.click();
+		URL.revokeObjectURL(url);
+	}
+
+	function handle_download_all(): void {
+		if (resolved_value) {
+			download_all(resolved_value);
+		}
+	}
+
 	let selected_media = $derived.by(() =>
 		selected_index != null && resolved_value != null
 			? resolved_value[selected_index]
@@ -418,11 +599,11 @@
 						<div class="icon-button">
 							<ShareButton
 								{i18n}
-								on:share={(detail) => {
-									onshare(detail);
+								onshare={(detail) => {
+									onshare({ detail } as CustomEvent);
 								}}
-								on:error={(detail) => {
-									onerror(detail);
+								onerror={(detail) => {
+									onerror({ detail } as CustomEvent);
 								}}
 								value={resolved_value}
 								formatter={format_gallery_for_sharing}
@@ -550,6 +731,13 @@
 						onclear();
 					}}
 				>
+					{#if show_download_all_button}
+						<IconButton
+							Icon={DownloadAll}
+							label={i18n("common.download_all")}
+							onclick={handle_download_all}
+						/>
+					{/if}
 					{#if upload && stream_handler}
 						<IconButton
 							Icon={UploadIcon}
@@ -598,6 +786,14 @@
 						/>
 					{/if}
 				</ModifyUpload>
+			{:else if show_download_all_button && !(selected_media && allow_preview)}
+				<IconButtonWrapper>
+					<IconButton
+						Icon={DownloadAll}
+						label={i18n("common.download_all")}
+						onclick={handle_download_all}
+					/>
+				</IconButtonWrapper>
 			{/if}
 			<div
 				class="grid-container"

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

@@ -16,6 +16,7 @@ type $$ComponentProps = {
     object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
     show_share_button: boolean;
     show_download_button: boolean;
+    show_download_all_button: boolean;
     i18n: I18nFormatter;
     selected_index: number | null;
     interactive: boolean;

package/dist/shared/utils.d.ts

@@ -1,3 +1,3 @@
-import { FileData, Client } from "@gradio/client";
+import { FileData } 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[]>;
+export declare function handle_save(img_blob: Blob, upload: (files: FileData[]) => Promise<(FileData | null)[] | null>, filename?: string): Promise<FileData[]>;

package/dist/shared/utils.js

@@ -1,5 +1,5 @@
 import { uploadToHuggingFace } from "@gradio/utils";
-import { FileData, Client } from "@gradio/client";
+import { FileData } from "@gradio/client";
 export async function format_gallery_for_sharing(value) {
     if (!value)
         return "";
@@ -25,5 +25,5 @@ export async function handle_save(img_blob, upload, filename = "uploaded_file")
             is_stream: false
         })
     ];
-    return (await upload(...files));
+    return ((await upload(files)) ?? []).filter((file) => file !== null);
 }

package/dist/types.d.ts

@@ -1,5 +1,5 @@
-import type { FileData, SelectData } from "@gradio/client";
-import type { CustomButton } from "@gradio/utils";
+import type { FileData } from "@gradio/client";
+import type { CustomButton, SelectData } from "@gradio/utils";
 export interface GalleryImage {
     image: FileData;
     caption: string | null;
@@ -19,7 +19,7 @@ export interface GalleryProps {
     allow_preview: boolean;
     selected_index: number | null;
     object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
-    buttons: (string | CustomButton)[];
+    buttons: ("share" | "download" | "download_all" | "fullscreen" | CustomButton)[];
     type: "numpy" | "pil" | "filepath";
     fit_columns: boolean;
     sources: ("upload" | "webcam-video" | "webcam" | "clipboard")[];
@@ -34,6 +34,7 @@ export interface GalleryEvents {
     };
     preview_open: never;
     preview_close: never;
+    clear: never;
     clear_status: any;
     share: any;
     error: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.17.8",
+  "version": "0.19.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,15 +8,15 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.3",
-    "@gradio/atoms": "^0.24.0",
-    "@gradio/file": "^0.14.8",
-    "@gradio/client": "^2.2.0",
-    "@gradio/icons": "^0.15.1",
-    "@gradio/image": "^0.26.3",
-    "@gradio/statustracker": "^0.14.1",
-    "@gradio/utils": "^0.12.2",
-    "@gradio/upload": "^0.17.9",
-    "@gradio/video": "^0.20.8"
+    "@gradio/atoms": "^0.26.0",
+    "@gradio/client": "^2.3.1",
+    "@gradio/file": "^0.15.1",
+    "@gradio/icons": "^0.16.0",
+    "@gradio/image": "^0.28.0",
+    "@gradio/statustracker": "^0.15.1",
+    "@gradio/upload": "^0.18.1",
+    "@gradio/utils": "^0.13.0",
+    "@gradio/video": "^0.22.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

package/shared/Gallery.svelte

@@ -18,6 +18,7 @@
 
 	import {
 		Download,
+		DownloadAll,
 		Image as ImageIcon,
 		Clear,
 		Play,
@@ -45,6 +46,7 @@
 		object_fit = "cover",
 		show_share_button = false,
 		show_download_button = false,
+		show_download_all_button = false,
 		i18n,
 		selected_index = $bindable(),
 		interactive,
@@ -83,6 +85,7 @@
 		object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
 		show_share_button: boolean;
 		show_download_button: boolean;
+		show_download_all_button: boolean;
 		i18n: I18nFormatter;
 		selected_index: number | null;
 		interactive: boolean;
@@ -112,7 +115,7 @@
 	} = $props();
 
 	let upload_promise: Promise<any> | null = null;
-	let mode: "normal" | "minimal" = "normal";
+	let mode = $state<"normal" | "minimal">("normal");
 	let display_icon_button_wrapper_top_corner = false;
 	let is_full_screen = false;
 	let image_container: HTMLElement;
@@ -307,6 +310,184 @@
 		URL.revokeObjectURL(url);
 	}
 
+	const crc_table = new Uint32Array(
+		Array.from({ length: 256 }, (_, i) => {
+			let c = i;
+			for (let k = 0; k < 8; k++) {
+				c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+			}
+			return c >>> 0;
+		})
+	);
+
+	function crc32(data: Uint8Array): number {
+		let c = 0xffffffff;
+		for (const byte of data) {
+			c = crc_table[(c ^ byte) & 0xff] ^ (c >>> 8);
+		}
+		return (c ^ 0xffffffff) >>> 0;
+	}
+
+	function write_uint16(view: DataView, offset: number, value: number): void {
+		view.setUint16(offset, value, true);
+	}
+
+	function write_uint32(view: DataView, offset: number, value: number): void {
+		view.setUint32(offset, value, true);
+	}
+
+	function zip_header(size: number): Uint8Array {
+		return new Uint8Array(size);
+	}
+
+	function get_unique_name(
+		file: FileData,
+		fallback: string,
+		used_names: Map<string, number>
+	): string {
+		const raw_name = file.orig_name || file.path || fallback;
+		const name = raw_name.split(/[/\\]/).pop() || fallback;
+		const count = used_names.get(name) ?? 0;
+		used_names.set(name, count + 1);
+		if (count === 0) return name;
+
+		const dot_index = name.lastIndexOf(".");
+		const base = dot_index > 0 ? name.slice(0, dot_index) : name;
+		const ext = dot_index > 0 ? name.slice(dot_index) : "";
+		return `${base}-${count + 1}${ext}`;
+	}
+
+	function create_zip(files: { name: string; data: Uint8Array }[]): Uint8Array {
+		const encoder = new TextEncoder();
+		const parts: Uint8Array[] = [];
+		const central_parts: Uint8Array[] = [];
+		const utf8_flag = 0x0800;
+		let offset = 0;
+
+		for (const file of files) {
+			const name = encoder.encode(file.name);
+			const checksum = crc32(file.data);
+			const local_header = zip_header(30 + name.length);
+			const local_view = new DataView(local_header.buffer);
+			write_uint32(local_view, 0, 0x04034b50);
+			write_uint16(local_view, 4, 20);
+			write_uint16(local_view, 6, utf8_flag);
+			write_uint16(local_view, 8, 0);
+			write_uint16(local_view, 10, 0);
+			write_uint16(local_view, 12, 33);
+			write_uint32(local_view, 14, checksum);
+			write_uint32(local_view, 18, file.data.length);
+			write_uint32(local_view, 22, file.data.length);
+			write_uint16(local_view, 26, name.length);
+			write_uint16(local_view, 28, 0);
+			local_header.set(name, 30);
+			parts.push(local_header, file.data);
+
+			const central_header = zip_header(46 + name.length);
+			const central_view = new DataView(central_header.buffer);
+			write_uint32(central_view, 0, 0x02014b50);
+			write_uint16(central_view, 4, 20);
+			write_uint16(central_view, 6, 20);
+			write_uint16(central_view, 8, utf8_flag);
+			write_uint16(central_view, 10, 0);
+			write_uint16(central_view, 12, 0);
+			write_uint16(central_view, 14, 33);
+			write_uint32(central_view, 16, checksum);
+			write_uint32(central_view, 20, file.data.length);
+			write_uint32(central_view, 24, file.data.length);
+			write_uint16(central_view, 28, name.length);
+			write_uint16(central_view, 30, 0);
+			write_uint16(central_view, 32, 0);
+			write_uint16(central_view, 34, 0);
+			write_uint16(central_view, 36, 0);
+			write_uint32(central_view, 38, 0);
+			write_uint32(central_view, 42, offset);
+			central_header.set(name, 46);
+			central_parts.push(central_header);
+
+			offset += local_header.length + file.data.length;
+		}
+
+		const central_offset = offset;
+		const central_size = central_parts.reduce(
+			(sum, part) => sum + part.length,
+			0
+		);
+		const end = zip_header(22);
+		const end_view = new DataView(end.buffer);
+		write_uint32(end_view, 0, 0x06054b50);
+		write_uint16(end_view, 4, 0);
+		write_uint16(end_view, 6, 0);
+		write_uint16(end_view, 8, files.length);
+		write_uint16(end_view, 10, files.length);
+		write_uint32(end_view, 12, central_size);
+		write_uint32(end_view, 16, central_offset);
+		write_uint16(end_view, 20, 0);
+
+		const zip = new Uint8Array(central_offset + central_size + end.length);
+		let cursor = 0;
+		for (const part of [...parts, ...central_parts, end]) {
+			zip.set(part, cursor);
+			cursor += part.length;
+		}
+		return zip;
+	}
+
+	async function get_zip_file(
+		url: string,
+		name: string
+	): Promise<{ name: string; data: Uint8Array } | null> {
+		let response;
+		try {
+			response = await _fetch(url);
+		} catch (error) {
+			if (error instanceof TypeError) {
+				window.open(url, "_blank", "noreferrer");
+			}
+			return null;
+		}
+		if (!response.ok) return null;
+		return {
+			name,
+			data: new Uint8Array(await response.arrayBuffer())
+		};
+	}
+
+	async function download_all(media: GalleryData[]): Promise<void> {
+		const used_names = new Map<string, number>();
+		const files = await Promise.all(
+			media.flatMap((item, index) => {
+				const file = "image" in item ? item.image : item.video;
+				const fallback =
+					"image" in item ? `image-${index + 1}` : `video-${index + 1}`;
+				if (!file.url) return [];
+				const name = get_unique_name(file, fallback, used_names);
+				return [get_zip_file(file.url, name)];
+			})
+		);
+		const valid_files = files.filter(
+			(file): file is { name: string; data: Uint8Array } => file !== null
+		);
+
+		if (valid_files.length === 0) return;
+
+		const zip = create_zip(valid_files);
+		const url = URL.createObjectURL(
+			new Blob([zip.buffer as ArrayBuffer], { type: "application/zip" })
+		);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = "gallery.zip";
+		link.click();
+		URL.revokeObjectURL(url);
+	}
+
+	function handle_download_all(): void {
+		if (resolved_value) {
+			download_all(resolved_value);
+		}
+	}
+
 	let selected_media = $derived.by(() =>
 		selected_index != null && resolved_value != null
 			? resolved_value[selected_index]
@@ -418,11 +599,11 @@
 						<div class="icon-button">
 							<ShareButton
 								{i18n}
-								on:share={(detail) => {
-									onshare(detail);
+								onshare={(detail) => {
+									onshare({ detail } as CustomEvent);
 								}}
-								on:error={(detail) => {
-									onerror(detail);
+								onerror={(detail) => {
+									onerror({ detail } as CustomEvent);
 								}}
 								value={resolved_value}
 								formatter={format_gallery_for_sharing}
@@ -550,6 +731,13 @@
 						onclear();
 					}}
 				>
+					{#if show_download_all_button}
+						<IconButton
+							Icon={DownloadAll}
+							label={i18n("common.download_all")}
+							onclick={handle_download_all}
+						/>
+					{/if}
 					{#if upload && stream_handler}
 						<IconButton
 							Icon={UploadIcon}
@@ -598,6 +786,14 @@
 						/>
 					{/if}
 				</ModifyUpload>
+			{:else if show_download_all_button && !(selected_media && allow_preview)}
+				<IconButtonWrapper>
+					<IconButton
+						Icon={DownloadAll}
+						label={i18n("common.download_all")}
+						onclick={handle_download_all}
+					/>
+				</IconButtonWrapper>
 			{/if}
 			<div
 				class="grid-container"

package/shared/utils.ts

@@ -1,5 +1,5 @@
 import { uploadToHuggingFace } from "@gradio/utils";
-import { FileData, Client } from "@gradio/client";
+import { FileData } from "@gradio/client";
 
 export async function format_gallery_for_sharing(
 	value: [FileData, string | null][] | null
@@ -19,8 +19,8 @@ export async function format_gallery_for_sharing(
 
 export async function handle_save(
 	img_blob: Blob,
-	upload: Client["upload"],
-	filename: string = "uploaded_file"
+	upload: (files: FileData[]) => Promise<(FileData | null)[] | null>,
+	filename = "uploaded_file"
 ): Promise<FileData[]> {
 	const ext = img_blob.type.split("/")[1] || "png";
 	const f_ = new File([img_blob], `${filename}.${ext}`);
@@ -34,5 +34,7 @@ export async function handle_save(
 			is_stream: false
 		})
 	];
-	return (await upload(...files)) as FileData[];
+	return ((await upload(files)) ?? []).filter(
+		(file): file is FileData => file !== null
+	);
 }

package/types.ts

@@ -1,5 +1,5 @@
-import type { FileData, SelectData } from "@gradio/client";
-import type { CustomButton } from "@gradio/utils";
+import type { FileData } from "@gradio/client";
+import type { CustomButton, SelectData } from "@gradio/utils";
 
 export interface GalleryImage {
 	image: FileData;
@@ -23,7 +23,13 @@ export interface GalleryProps {
 	allow_preview: boolean;
 	selected_index: number | null;
 	object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
-	buttons: (string | CustomButton)[];
+	buttons: (
+		| "share"
+		| "download"
+		| "download_all"
+		| "fullscreen"
+		| CustomButton
+	)[];
 	type: "numpy" | "pil" | "filepath";
 	fit_columns: boolean;
 	sources: ("upload" | "webcam-video" | "webcam" | "clipboard")[];
@@ -36,6 +42,7 @@ export interface GalleryEvents {
 	delete: { file: FileData; index: number };
 	preview_open: never;
 	preview_close: never;
+	clear: never;
 	clear_status: any;
 	share: any;
 	error: any;