@gradio/gallery 0.15.35-dev.0 → 0.15.35-dev.3

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

@@ -1,59 +1,64 @@
-import { SvelteComponent } from "svelte";
 import type { SelectData } from "@gradio/utils";
 import type { GalleryImage, GalleryVideo } from "../types";
 import { FileData } from "@gradio/client";
 import type { Client } from "@gradio/client";
 import type { I18nFormatter } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        show_label?: boolean;
-        label: string;
-        value?: (GalleryImage | GalleryVideo)[] | null;
-        columns?: number | number[] | undefined;
-        rows?: number | number[] | undefined;
-        height?: number | "auto";
-        preview: boolean;
-        allow_preview?: boolean;
-        object_fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
-        show_share_button?: boolean;
-        show_download_button?: boolean;
-        i18n: I18nFormatter;
-        selected_index?: number | null;
-        interactive: boolean;
-        _fetch: typeof fetch;
-        mode?: "normal" | "minimal";
-        show_fullscreen_button?: boolean;
-        display_icon_button_wrapper_top_corner?: boolean;
-        fullscreen?: boolean;
-        root?: string;
-        file_types?: string[] | null;
-        max_file_size?: number | null;
-        upload?: Client["upload"] | undefined;
-        stream_handler?: Client["stream"] | undefined;
+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;
     };
-    events: {
-        fullscreen: CustomEvent<any>;
-        share: CustomEvent<import("@gradio/utils").ShareData>;
-        error: CustomEvent<any>;
-        change: CustomEvent<undefined>;
-        select: CustomEvent<SelectData>;
-        preview_open: CustomEvent<undefined>;
-        preview_close: CustomEvent<undefined>;
-        delete: CustomEvent<{
-            file: FileData;
-            index: number;
-        }>;
-        upload: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type GalleryProps = typeof __propDef.props;
-export type GalleryEvents = typeof __propDef.events;
-export type GallerySlots = typeof __propDef.slots;
-export default class Gallery extends SvelteComponent<GalleryProps, GalleryEvents, GallerySlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Gallery: $$__sveltets_2_IsomorphicComponent<{
+    show_label?: boolean;
+    label: string;
+    value?: (GalleryImage | GalleryVideo)[] | null;
+    columns?: number | number[] | undefined;
+    rows?: number | number[] | undefined;
+    height?: number | "auto";
+    preview: boolean;
+    allow_preview?: boolean;
+    object_fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+    show_share_button?: boolean;
+    show_download_button?: boolean;
+    i18n: I18nFormatter;
+    selected_index?: number | null;
+    interactive: boolean;
+    _fetch: typeof fetch;
+    mode?: "normal" | "minimal";
+    show_fullscreen_button?: boolean;
+    display_icon_button_wrapper_top_corner?: boolean;
+    fullscreen?: boolean;
+    root?: string;
+    file_types?: string[] | null;
+    max_file_size?: number | null;
+    upload?: Client["upload"] | undefined;
+    stream_handler?: Client["stream"] | undefined;
+    fit_columns?: boolean;
+    upload_promise?: Promise<any> | null;
+}, {
+    fullscreen: CustomEvent<any>;
+    share: CustomEvent<import("@gradio/utils").ShareData>;
+    error: CustomEvent<any>;
+    change: CustomEvent<undefined>;
+    select: CustomEvent<SelectData>;
+    preview_open: CustomEvent<undefined>;
+    preview_close: CustomEvent<undefined>;
+    delete: CustomEvent<{
+        file: FileData;
+        index: number;
+    }>;
+    upload: CustomEvent<FileData | FileData[]>;
+    clear: CustomEvent<undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Gallery = InstanceType<typeof Gallery>;
+export default Gallery;

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { FileData } from "@gradio/client";
+import type { FileData, SelectData } from "@gradio/client";
 export interface GalleryImage {
     image: FileData;
     caption: string | null;
@@ -7,3 +7,32 @@ export interface GalleryVideo {
     video: FileData;
     caption: string | null;
 }
+export type GalleryData = GalleryImage | GalleryVideo;
+export interface GalleryProps {
+    value: GalleryData[] | null;
+    file_types: string[] | null;
+    columns: number | number[] | undefined;
+    rows: number | number[] | undefined;
+    height: number | "auto";
+    preview: boolean;
+    allow_preview: boolean;
+    selected_index: number | null;
+    object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
+    buttons: string[];
+    type: "numpy" | "pil" | "filepath";
+    fit_columns: boolean;
+}
+export interface GalleryEvents {
+    change: GalleryData[] | null;
+    upload: GalleryData[] | null;
+    select: SelectData;
+    delete: {
+        file: FileData;
+        index: number;
+    };
+    preview_open: never;
+    preview_close: never;
+    clear_status: any;
+    share: any;
+    error: any;
+}

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.15.35-dev.0",
+  "version": "0.15.35-dev.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "dequal": "^2.0.2",
-    "@gradio/atoms": "^0.18.1",
-    "@gradio/client": "^2.0.0-dev.0",
-    "@gradio/icons": "^0.14.0",
-    "@gradio/image": "^0.23.2-dev.0",
-    "@gradio/upload": "^0.17.2-dev.0",
-    "@gradio/statustracker": "^0.11.1",
-    "@gradio/utils": "^0.10.2",
-    "@gradio/video": "^0.17.0-dev.0",
-    "@gradio/file": "^0.13.1-dev.0"
+    "dequal": "^2.0.3",
+    "@gradio/atoms": "^0.19.0-dev.1",
+    "@gradio/client": "^2.0.0-dev.2",
+    "@gradio/icons": "^0.15.0-dev.0",
+    "@gradio/image": "^0.24.0-dev.2",
+    "@gradio/statustracker": "^0.12.0-dev.1",
+    "@gradio/upload": "^0.17.2-dev.2",
+    "@gradio/utils": "^0.10.3-dev.0",
+    "@gradio/file": "^0.13.1-dev.2",
+    "@gradio/video": "^0.17.0-dev.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.14.0"
+    "@gradio/preview": "^0.15.0-dev.0"
   },
   "main": "./Index.svelte",
   "main_changeset": true,
@@ -42,7 +42,7 @@
     }
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.43.4"
   },
   "repository": {
     "type": "git",

package/shared/Gallery.svelte

@@ -55,6 +55,8 @@
 	export let max_file_size: number | null = null;
 	export let upload: Client["upload"] | undefined = undefined;
 	export let stream_handler: Client["stream"] | undefined = undefined;
+	export let fit_columns = true;
+	export let upload_promise: Promise<any> | null = null;
 
 	let is_full_screen = false;
 	let image_container: HTMLElement;
@@ -68,6 +70,7 @@
 		delete: { file: FileData; index: number };
 		upload: FileData | FileData[];
 		error: string;
+		clear: undefined;
 	}>();
 
 	// tracks whether the value of the gallery was reset
@@ -95,7 +98,7 @@
 	let effective_columns: number | number[] | undefined = columns;
 
 	$: {
-		if (resolved_value && columns) {
+		if (resolved_value && columns && fit_columns) {
 			const item_count = resolved_value.length;
 			if (Array.isArray(columns)) {
 				effective_columns = columns.map((col) => Math.min(col, item_count));
@@ -279,7 +282,7 @@
 			window.removeEventListener("resize", check_thumbnails_overflow);
 	});
 
-	$: resolved_value, check_thumbnails_overflow();
+	$: (resolved_value, check_thumbnails_overflow());
 	$: if (container_element) {
 		check_thumbnails_overflow();
 	}
@@ -320,7 +323,7 @@
 {:else}
 	<div class="gallery-container" bind:this={image_container}>
 		{#if selected_media && allow_preview}
-			<button
+			<span
 				on:keydown={on_keydown}
 				class="preview"
 				class:minimal={mode === "minimal"}
@@ -386,12 +389,14 @@
 				>
 					{#if "image" in selected_media}
 						<Image
-							data-testid="detailed-image"
+							restProps={{
+								alt: selected_media.caption || "",
+								title: selected_media.caption || null,
+								class: selected_media.caption && "with-caption",
+								loading: "lazy"
+							}}
 							src={selected_media.image.url}
-							alt={selected_media.caption || ""}
-							title={selected_media.caption || null}
-							class={selected_media.caption && "with-caption"}
-							loading="lazy"
+							data_testid="detailed-image"
 						/>
 					{:else}
 						<Video
@@ -433,10 +438,13 @@
 							{#if "image" in media}
 								<Image
 									src={media.image.url}
-									title={media.caption || null}
-									data-testid={"thumbnail " + (i + 1)}
-									alt=""
-									loading="lazy"
+									restProps={{
+										title: media.caption || null,
+										alt: "",
+										class: "with-caption",
+										loading: "lazy"
+									}}
+									data_testid={`thumbnail ${i + 1}`}
 								/>
 							{:else}
 								<Play />
@@ -453,7 +461,7 @@
 						</button>
 					{/each}
 				</div>
-			</button>
+			</span>
 		{/if}
 
 		<div
@@ -464,10 +472,17 @@
 			style:height={height !== "auto" ? height + "px" : null}
 		>
 			{#if interactive && selected_index === null}
-				<ModifyUpload {i18n} on:clear={() => (value = [])}>
+				<ModifyUpload
+					{i18n}
+					on:clear={() => {
+						value = [];
+						dispatch("clear");
+					}}
+				>
 					{#if upload && stream_handler}
 						<IconButton Icon={UploadIcon} label={i18n("common.upload")}>
 							<UploadComponent
+								bind:upload_promise
 								icon_upload={true}
 								on:load={(e) => dispatch("upload", e.detail)}
 								filetype={file_types}

package/types.ts

@@ -1,4 +1,4 @@
-import type { FileData } from "@gradio/client";
+import type { FileData, SelectData } from "@gradio/client";
 
 export interface GalleryImage {
 	image: FileData;
@@ -9,3 +9,32 @@ export interface GalleryVideo {
 	video: FileData;
 	caption: string | null;
 }
+
+export type GalleryData = GalleryImage | GalleryVideo;
+
+export interface GalleryProps {
+	value: GalleryData[] | null;
+	file_types: string[] | null;
+	columns: number | number[] | undefined;
+	rows: number | number[] | undefined;
+	height: number | "auto";
+	preview: boolean;
+	allow_preview: boolean;
+	selected_index: number | null;
+	object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
+	buttons: string[];
+	type: "numpy" | "pil" | "filepath";
+	fit_columns: boolean;
+}
+
+export interface GalleryEvents {
+	change: GalleryData[] | null;
+	upload: GalleryData[] | null;
+	select: SelectData;
+	delete: { file: FileData; index: number };
+	preview_open: never;
+	preview_close: never;
+	clear_status: any;
+	share: any;
+	error: any;
+}