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

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @gradio/gallery
 
+## 0.15.35-dev.3
+
+### Dependency updates
+
+- @gradio/atoms@0.19.0-dev.1
+- @gradio/client@2.0.0-dev.2
+- @gradio/statustracker@0.12.0-dev.1
+- @gradio/upload@0.17.2-dev.2
+- @gradio/image@0.24.0-dev.2
+- @gradio/video@0.17.0-dev.2
+- @gradio/file@0.13.1-dev.2
+
+## 0.15.35-dev.2
+
+### Dependency updates
+
+- @gradio/atoms@0.18.2-dev.0
+- @gradio/upload@0.17.2-dev.1
+- @gradio/utils@0.10.3-dev.0
+- @gradio/image@0.23.2-dev.1
+- @gradio/statustracker@0.12.0-dev.0
+- @gradio/icons@0.15.0-dev.0
+- @gradio/video@0.17.0-dev.1
+- @gradio/file@0.13.1-dev.1
+
+## 0.15.35-dev.1
+
+### Fixes
+
+- [#12066](https://github.com/gradio-app/gradio/pull/12066) [`6a4757a`](https://github.com/gradio-app/gradio/commit/6a4757ab289e8e53b5503eb6887333d7ad26c9eb) - Gallery: Allow empty columns when items < columns.  Thanks @missionfloyd!
+
+### Dependency updates
+
+- @gradio/client@2.0.0-dev.1
+
 ## 0.15.35-dev.0
 
 ### Dependency updates

package/Gallery.stories.svelte

@@ -62,6 +62,13 @@
 				description: "Whether to show the share button in the gallery",
 				control: { type: "boolean" },
 				defaultValue: false
+			},
+			fit_columns: {
+				options: [true, false],
+				description:
+					"Whether the columns should fit the width of the container",
+				control: { type: "boolean" },
+				defaultValue: true
 			}
 		},
 		parameters: {
@@ -277,3 +284,21 @@
 		show_download_button: true
 	}}
 />
+<Story
+	name="Gallery with fit_columns false"
+	args={{
+		label: "My Cheetah Gallery",
+		columns: 10,
+		show_download_button: true,
+		fit_columns: false
+	}}
+/>
+<Story
+	name="Gallery with fit_columns true"
+	args={{
+		label: "My Cheetah Gallery",
+		columns: 10,
+		show_download_button: true,
+		fit_columns: true
+	}}
+/>

package/Index.svelte

@@ -4,68 +4,47 @@
 </script>
 
 <script lang="ts">
-	import type { GalleryImage, GalleryVideo } from "./types";
+	import { tick } from "svelte";
 	import type { FileData } from "@gradio/client";
-	import type { Gradio, ShareData, SelectData } from "@gradio/utils";
 	import { Block, UploadText } from "@gradio/atoms";
 	import Gallery from "./shared/Gallery.svelte";
-	import type { LoadingStatus } from "@gradio/statustracker";
 	import { StatusTracker } from "@gradio/statustracker";
-	import { createEventDispatcher } from "svelte";
+	import { Gradio } from "@gradio/utils";
 	import { BaseFileUpload } from "@gradio/file";
+	import type { GalleryProps, GalleryEvents, GalleryData } from "./types";
 
-	type GalleryData = GalleryImage | GalleryVideo;
+	let upload_promise = $state<Promise<any>>();
 
-	export let loading_status: LoadingStatus;
-	export let show_label: boolean;
-	export let label: string;
-	export let root: string;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let value: GalleryData[] | null = null;
-	export let file_types: string[] | null = ["image", "video"];
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let columns: number | number[] | undefined = [2];
-	export let rows: number | number[] | undefined = undefined;
-	export let height: number | "auto" = "auto";
-	export let preview: boolean;
-	export let allow_preview = true;
-	export let selected_index: number | null = null;
-	export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
-		"cover";
-	export let buttons: string[] | null = null;
-	export let interactive: boolean;
-	export let gradio: Gradio<{
-		change: typeof value;
-		upload: typeof value;
-		select: SelectData;
-		share: ShareData;
-		error: string;
-		delete: { file: FileData; index: number };
-		prop_change: Record<string, any>;
-		clear_status: LoadingStatus;
-		preview_open: never;
-		preview_close: never;
-	}>;
-	export let fullscreen = false;
+	class GalleryGradio extends Gradio<GalleryEvents, GalleryProps> {
+		async get_data() {
+			if (upload_promise) {
+				await upload_promise;
+				await tick();
+			}
+			const data = await super.get_data();
 
-	const dispatch = createEventDispatcher();
+			return data;
+		}
+	}
+
+	const props = $props();
+	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props);
+
+	let fullscreen = $state(false);
 
-	$: no_value = value === null ? true : value.length === 0;
+	let no_value = $derived(
+		gradio.props.value === null ? true : gradio.props.value.length === 0
+	);
 
 	function handle_delete(
 		event: CustomEvent<{ file: FileData; index: number }>
 	): void {
-		if (!value) return;
+		if (!gradio.props.value) return;
 		const { index } = event.detail;
 		gradio.dispatch("delete", event.detail);
-		value = value.filter((_, i) => i !== index);
-		gradio.dispatch("change", value);
+		gradio.props.value = gradio.props.value.filter((_, i) => i !== index);
+		gradio.dispatch("change", gradio.props.value);
 	}
-	$: selected_index, dispatch("prop_change", { selected_index });
 
 	async function process_upload_files(
 		files: FileData[]
@@ -93,44 +72,48 @@
 </script>
 
 <Block
-	{visible}
+	visible={gradio.shared.visible}
 	variant="solid"
 	padding={false}
-	{elem_id}
-	{elem_classes}
-	{container}
-	{scale}
-	{min_width}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={gradio.shared.elem_classes}
+	container={gradio.shared.container}
+	scale={gradio.shared.scale}
+	min_width={gradio.shared.min_width}
 	allow_overflow={false}
-	height={typeof height === "number" ? height : undefined}
+	height={typeof gradio.props.height === "number"
+		? gradio.props.height
+		: undefined}
 	bind:fullscreen
 >
 	<StatusTracker
-		autoscroll={gradio.autoscroll}
+		autoscroll={gradio.shared.autoscroll}
 		i18n={gradio.i18n}
-		{...loading_status}
-		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		{...gradio.shared.loading_status}
+		on:clear_status={() =>
+			gradio.dispatch("clear_status", gradio.shared.loading_status)}
 	/>
-	{#if interactive && no_value}
+	{#if gradio.shared.interactive && no_value}
 		<BaseFileUpload
+			bind:upload_promise
 			value={null}
-			{root}
-			{label}
-			max_file_size={gradio.max_file_size}
+			root={gradio.shared.root}
+			label={gradio.shared.label}
+			max_file_size={gradio.shared.max_file_size}
 			file_count={"multiple"}
-			{file_types}
+			file_types={gradio.props.file_types}
 			i18n={gradio.i18n}
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={(...args) => gradio.client.stream(...args)}
+			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];
-				value = await process_upload_files(files);
-				gradio.dispatch("upload", value);
-				gradio.dispatch("change", value);
+				gradio.props.value = await process_upload_files(files);
+				gradio.dispatch("upload", gradio.props.value);
+				gradio.dispatch("change", gradio.props.value);
 			}}
 			on:error={({ detail }) => {
-				loading_status = loading_status || {};
-				loading_status.status = "error";
+				gradio.shared.loading_status = gradio.shared.loading_status || {};
+				gradio.shared.loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
 		>
@@ -138,7 +121,8 @@
 		</BaseFileUpload>
 	{:else}
 		<Gallery
-			on:change={() => gradio.dispatch("change", value)}
+			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)}
@@ -151,32 +135,35 @@
 			on:upload={async (e) => {
 				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
 				const new_value = await process_upload_files(files);
-				value = value ? [...value, ...new_value] : new_value;
+				gradio.props.value = gradio.props.value
+					? [...gradio.props.value, ...new_value]
+					: new_value;
 				gradio.dispatch("upload", new_value);
-				gradio.dispatch("change", value);
+				gradio.dispatch("change", gradio.props.value);
 			}}
-			{label}
-			{show_label}
-			{columns}
-			{rows}
-			{height}
-			{preview}
-			{object_fit}
-			{interactive}
-			{allow_preview}
-			bind:selected_index
-			bind:value
-			show_share_button={buttons?.includes("share") ?? true}
-			show_download_button={buttons?.includes("download") ?? true}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			columns={gradio.props.columns}
+			rows={gradio.props.rows}
+			height={gradio.props.height}
+			preview={gradio.props.preview}
+			object_fit={gradio.props.object_fit}
+			interactive={gradio.shared.interactive}
+			allow_preview={gradio.props.allow_preview}
+			bind:selected_index={gradio.props.selected_index}
+			bind:value={gradio.props.value}
+			show_share_button={gradio.props.buttons.includes("share")}
+			show_download_button={gradio.props.buttons.includes("download")}
+			fit_columns={gradio.props.fit_columns}
 			i18n={gradio.i18n}
-			_fetch={(...args) => gradio.client.fetch(...args)}
-			show_fullscreen_button={buttons?.includes("fullscreen") ?? true}
+			_fetch={(...args) => gradio.shared.client.fetch(...args)}
+			show_fullscreen_button={gradio.props.buttons.includes("fullscreen")}
 			{fullscreen}
-			{root}
-			{file_types}
-			max_file_size={gradio.max_file_size}
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={(...args) => gradio.client.stream(...args)}
+			root={gradio.shared.root}
+			file_types={gradio.props.file_types}
+			max_file_size={gradio.shared.max_file_size}
+			upload={(...args) => gradio.shared.client.upload(...args)}
+			stream_handler={(...args) => gradio.shared.client.stream(...args)}
 		/>
 	{/if}
 </Block>

package/dist/Example.svelte

@@ -1,6 +1,9 @@
-<script>export let value;
-export let type;
-export let selected = false;
+<script lang="ts">
+	import type { GalleryImage, GalleryVideo } from "./types";
+
+	export let value: (GalleryImage | GalleryVideo)[] | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
 </script>
 
 <div

package/dist/Example.svelte.d.ts

@@ -1,21 +1,23 @@
-import { SvelteComponent } from "svelte";
 import type { GalleryImage, GalleryVideo } from "./types";
-declare const __propDef: {
-    props: {
-        value: (GalleryImage | GalleryVideo)[] | null;
-        type: "gallery" | "table";
-        selected?: boolean;
+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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ExampleProps = typeof __propDef.props;
-export type ExampleEvents = typeof __propDef.events;
-export type ExampleSlots = typeof __propDef.slots;
-export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Example: $$__sveltets_2_IsomorphicComponent<{
+    value: (GalleryImage | GalleryVideo)[] | null;
+    type: "gallery" | "table";
+    selected?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Example = InstanceType<typeof Example>;
+export default Example;

package/dist/Index.svelte

@@ -1,104 +1,119 @@
-<script context="module">export { default as BaseGallery } from "./shared/Gallery.svelte";
-export { default as BaseExample } from "./Example.svelte";
+<script context="module" lang="ts">
+	export { default as BaseGallery } from "./shared/Gallery.svelte";
+	export { default as BaseExample } from "./Example.svelte";
 </script>
 
-<script>import { Block, UploadText } from "@gradio/atoms";
-import Gallery from "./shared/Gallery.svelte";
-import { StatusTracker } from "@gradio/statustracker";
-import { createEventDispatcher } from "svelte";
-import { BaseFileUpload } from "@gradio/file";
-export let loading_status;
-export let show_label;
-export let label;
-export let root;
-export let elem_id = "";
-export let elem_classes = [];
-export let visible = true;
-export let value = null;
-export let file_types = ["image", "video"];
-export let container = true;
-export let scale = null;
-export let min_width = void 0;
-export let columns = [2];
-export let rows = void 0;
-export let height = "auto";
-export let preview;
-export let allow_preview = true;
-export let selected_index = null;
-export let object_fit = "cover";
-export let buttons = null;
-export let interactive;
-export let gradio;
-export let fullscreen = false;
-const dispatch = createEventDispatcher();
-$: no_value = value === null ? true : value.length === 0;
-function handle_delete(event) {
-  if (!value) return;
-  const { index } = event.detail;
-  gradio.dispatch("delete", event.detail);
-  value = value.filter((_, i) => i !== index);
-  gradio.dispatch("change", value);
-}
-$: selected_index, dispatch("prop_change", { selected_index });
-async function process_upload_files(files) {
-  const processed_files = await Promise.all(
-    files.map(async (x) => {
-      if (x.path?.toLowerCase().endsWith(".svg") && x.url) {
-        const response = await fetch(x.url);
-        const svgContent = await response.text();
-        return {
-          ...x,
-          url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`
-        };
-      }
-      return x;
-    })
-  );
-  return processed_files.map(
-    (x) => x.mime_type?.includes("video") ? { video: x, caption: null } : { image: x, caption: null }
-  );
-}
+<script lang="ts">
+	import { tick } from "svelte";
+	import type { FileData } from "@gradio/client";
+	import { Block, UploadText } 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 type { GalleryProps, GalleryEvents, GalleryData } from "./types";
+
+	let upload_promise = $state<Promise<any>>();
+
+	class GalleryGradio extends Gradio<GalleryEvents, GalleryProps> {
+		async get_data() {
+			if (upload_promise) {
+				await upload_promise;
+				await tick();
+			}
+			const data = await super.get_data();
+
+			return data;
+		}
+	}
+
+	const props = $props();
+	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props);
+
+	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 {
+		if (!gradio.props.value) return;
+		const { index } = event.detail;
+		gradio.dispatch("delete", event.detail);
+		gradio.props.value = gradio.props.value.filter((_, i) => i !== index);
+		gradio.dispatch("change", gradio.props.value);
+	}
+
+	async function process_upload_files(
+		files: FileData[]
+	): Promise<GalleryData[]> {
+		const processed_files = await Promise.all(
+			files.map(async (x) => {
+				if (x.path?.toLowerCase().endsWith(".svg") && x.url) {
+					const response = await fetch(x.url);
+					const svgContent = await response.text();
+					return {
+						...x,
+						url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`
+					};
+				}
+				return x;
+			})
+		);
+
+		return processed_files.map((x) =>
+			x.mime_type?.includes("video")
+				? { video: x, caption: null }
+				: { image: x, caption: null }
+		);
+	}
 </script>
 
 <Block
-	{visible}
+	visible={gradio.shared.visible}
 	variant="solid"
 	padding={false}
-	{elem_id}
-	{elem_classes}
-	{container}
-	{scale}
-	{min_width}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={gradio.shared.elem_classes}
+	container={gradio.shared.container}
+	scale={gradio.shared.scale}
+	min_width={gradio.shared.min_width}
 	allow_overflow={false}
-	height={typeof height === "number" ? height : undefined}
+	height={typeof gradio.props.height === "number"
+		? gradio.props.height
+		: undefined}
 	bind:fullscreen
 >
 	<StatusTracker
-		autoscroll={gradio.autoscroll}
+		autoscroll={gradio.shared.autoscroll}
 		i18n={gradio.i18n}
-		{...loading_status}
-		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		{...gradio.shared.loading_status}
+		on:clear_status={() =>
+			gradio.dispatch("clear_status", gradio.shared.loading_status)}
 	/>
-	{#if interactive && no_value}
+	{#if gradio.shared.interactive && no_value}
 		<BaseFileUpload
+			bind:upload_promise
 			value={null}
-			{root}
-			{label}
-			max_file_size={gradio.max_file_size}
+			root={gradio.shared.root}
+			label={gradio.shared.label}
+			max_file_size={gradio.shared.max_file_size}
 			file_count={"multiple"}
-			{file_types}
+			file_types={gradio.props.file_types}
 			i18n={gradio.i18n}
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={(...args) => gradio.client.stream(...args)}
+			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];
-				value = await process_upload_files(files);
-				gradio.dispatch("upload", value);
-				gradio.dispatch("change", value);
+				gradio.props.value = await process_upload_files(files);
+				gradio.dispatch("upload", gradio.props.value);
+				gradio.dispatch("change", gradio.props.value);
 			}}
 			on:error={({ detail }) => {
-				loading_status = loading_status || {};
-				loading_status.status = "error";
+				gradio.shared.loading_status = gradio.shared.loading_status || {};
+				gradio.shared.loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
 		>
@@ -106,7 +121,8 @@ async function process_upload_files(files) {
 		</BaseFileUpload>
 	{:else}
 		<Gallery
-			on:change={() => gradio.dispatch("change", value)}
+			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)}
@@ -119,32 +135,35 @@ async function process_upload_files(files) {
 			on:upload={async (e) => {
 				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
 				const new_value = await process_upload_files(files);
-				value = value ? [...value, ...new_value] : new_value;
+				gradio.props.value = gradio.props.value
+					? [...gradio.props.value, ...new_value]
+					: new_value;
 				gradio.dispatch("upload", new_value);
-				gradio.dispatch("change", value);
+				gradio.dispatch("change", gradio.props.value);
 			}}
-			{label}
-			{show_label}
-			{columns}
-			{rows}
-			{height}
-			{preview}
-			{object_fit}
-			{interactive}
-			{allow_preview}
-			bind:selected_index
-			bind:value
-			show_share_button={buttons?.includes("share") ?? true}
-			show_download_button={buttons?.includes("download") ?? true}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			columns={gradio.props.columns}
+			rows={gradio.props.rows}
+			height={gradio.props.height}
+			preview={gradio.props.preview}
+			object_fit={gradio.props.object_fit}
+			interactive={gradio.shared.interactive}
+			allow_preview={gradio.props.allow_preview}
+			bind:selected_index={gradio.props.selected_index}
+			bind:value={gradio.props.value}
+			show_share_button={gradio.props.buttons.includes("share")}
+			show_download_button={gradio.props.buttons.includes("download")}
+			fit_columns={gradio.props.fit_columns}
 			i18n={gradio.i18n}
-			_fetch={(...args) => gradio.client.fetch(...args)}
-			show_fullscreen_button={buttons?.includes("fullscreen") ?? true}
+			_fetch={(...args) => gradio.shared.client.fetch(...args)}
+			show_fullscreen_button={gradio.props.buttons.includes("fullscreen")}
 			{fullscreen}
-			{root}
-			{file_types}
-			max_file_size={gradio.max_file_size}
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={(...args) => gradio.client.stream(...args)}
+			root={gradio.shared.root}
+			file_types={gradio.props.file_types}
+			max_file_size={gradio.shared.max_file_size}
+			upload={(...args) => gradio.shared.client.upload(...args)}
+			stream_handler={(...args) => gradio.shared.client.stream(...args)}
 		/>
 	{/if}
 </Block>