@gradio/gallery 0.17.8 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @gradio/gallery
 
+## 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/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);
@@ -206,6 +206,7 @@
 				root={gradio.shared.root}
 				value={null}
 				on:capture={async (e) => {
+					if (!(e.detail instanceof Blob)) return;
 					const f = await handle_save(
 						e.detail,
 						(f) => gradio.shared.client.upload(f, gradio.shared.root),
@@ -231,7 +232,8 @@
 				root={gradio.shared.root}
 				value={null}
 				on:capture={async (e) => {
-					const f = { ...e.detail };
+					if (!e.detail) return;
+					const f = { ...(e.detail as FileData) };
 					f.mime_type = "video/webm";
 					const processed_files = await process_upload_files([f]);
 					gradio.props.value?.push(...processed_files);
@@ -254,7 +256,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 +284,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}

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);
@@ -206,6 +206,7 @@
 				root={gradio.shared.root}
 				value={null}
 				on:capture={async (e) => {
+					if (!(e.detail instanceof Blob)) return;
 					const f = await handle_save(
 						e.detail,
 						(f) => gradio.shared.client.upload(f, gradio.shared.root),
@@ -231,7 +232,8 @@
 				root={gradio.shared.root}
 				value={null}
 				on:capture={async (e) => {
-					const f = { ...e.detail };
+					if (!e.detail) return;
+					const f = { ...(e.detail as FileData) };
 					f.mime_type = "video/webm";
 					const processed_files = await process_upload_files([f]);
 					gradio.props.value?.push(...processed_files);
@@ -254,7 +256,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 +284,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}

package/dist/shared/Gallery.svelte

@@ -112,7 +112,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;

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;
@@ -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.18.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/atoms": "^0.25.0",
+    "@gradio/file": "^0.15.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/client": "^2.3.0",
+    "@gradio/image": "^0.27.0",
+    "@gradio/statustracker": "^0.15.0",
+    "@gradio/utils": "^0.13.0",
+    "@gradio/upload": "^0.18.0",
+    "@gradio/video": "^0.21.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

package/shared/Gallery.svelte

@@ -112,7 +112,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;

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;
@@ -36,6 +36,7 @@ export interface GalleryEvents {
 	delete: { file: FileData; index: number };
 	preview_open: never;
 	preview_close: never;
+	clear: never;
 	clear_status: any;
 	share: any;
 	error: any;