@gradio/gallery 0.15.35-dev.1 → 0.15.35

package/dist/shared/Gallery.svelte

@@ -1,231 +1,316 @@
-<script>import {
-  BlockLabel,
-  Empty,
-  ShareButton,
-  IconButton,
-  IconButtonWrapper,
-  FullscreenButton
-} from "@gradio/atoms";
-import { ModifyUpload, Upload as UploadComponent } from "@gradio/upload";
-import { Image } from "@gradio/image/shared";
-import { Video } from "@gradio/video/shared";
-import { dequal } from "dequal";
-import { createEventDispatcher, onMount } from "svelte";
-import { tick } from "svelte";
-import {
-  Download,
-  Image as ImageIcon,
-  Clear,
-  Play,
-  Upload as UploadIcon
-} from "@gradio/icons";
-import { FileData } from "@gradio/client";
-import { format_gallery_for_sharing } from "./utils";
-export let show_label = true;
-export let label;
-export let value = null;
-export let columns = [2];
-export let rows = void 0;
-export let height = "auto";
-export let preview;
-export let allow_preview = true;
-export let object_fit = "cover";
-export let show_share_button = false;
-export let show_download_button = false;
-export let i18n;
-export let selected_index = null;
-export let interactive;
-export let _fetch;
-export let mode = "normal";
-export let show_fullscreen_button = true;
-export let display_icon_button_wrapper_top_corner = false;
-export let fullscreen = false;
-export let root = "";
-export let file_types = ["image", "video"];
-export let max_file_size = null;
-export let upload = void 0;
-export let stream_handler = void 0;
-export let fit_columns = true;
-let is_full_screen = false;
-let image_container;
-const dispatch = createEventDispatcher();
-let was_reset = true;
-$: was_reset = value == null || value.length === 0 ? true : was_reset;
-let resolved_value = null;
-$: resolved_value = value == null ? null : value.map((data) => {
-  if ("video" in data) {
-    return {
-      video: data.video,
-      caption: data.caption
-    };
-  } else if ("image" in data) {
-    return { image: data.image, caption: data.caption };
-  }
-  return {};
-});
-let effective_columns = 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));
-    } else {
-      effective_columns = Math.min(columns, item_count);
-    }
-  } else {
-    effective_columns = columns;
-  }
-}
-let prev_value = value;
-if (selected_index == null && preview && value?.length) {
-  selected_index = 0;
-}
-let old_selected_index = selected_index;
-$: if (!dequal(prev_value, value)) {
-  if (was_reset) {
-    selected_index = preview && value?.length ? 0 : null;
-    was_reset = false;
-  } else {
-    if (selected_index !== null && value !== null) {
-      selected_index = Math.max(
-        0,
-        Math.min(selected_index, value.length - 1)
-      );
-    } else {
-      selected_index = null;
-    }
-  }
-  dispatch("change");
-  prev_value = value;
-}
-$: previous = ((selected_index ?? 0) + (resolved_value?.length ?? 0) - 1) % (resolved_value?.length ?? 0);
-$: next = ((selected_index ?? 0) + 1) % (resolved_value?.length ?? 0);
-function handle_preview_click(event) {
-  const element = event.target;
-  const x = event.offsetX;
-  const width = element.offsetWidth;
-  const centerX = width / 2;
-  if (x < centerX) {
-    selected_index = previous;
-  } else {
-    selected_index = next;
-  }
-}
-function on_keydown(e) {
-  switch (e.code) {
-    case "Escape":
-      e.preventDefault();
-      selected_index = null;
-      break;
-    case "ArrowLeft":
-      e.preventDefault();
-      selected_index = previous;
-      break;
-    case "ArrowRight":
-      e.preventDefault();
-      selected_index = next;
-      break;
-    default:
-      break;
-  }
-}
-$: {
-  if (selected_index !== old_selected_index) {
-    old_selected_index = selected_index;
-    if (selected_index !== null) {
-      if (resolved_value != null) {
-        selected_index = Math.max(
-          0,
-          Math.min(selected_index, resolved_value.length - 1)
-        );
-      }
-      dispatch("select", {
-        index: selected_index,
-        value: resolved_value?.[selected_index]
-      });
-    }
-  }
-}
-$: if (allow_preview) {
-  scroll_to_img(selected_index);
-}
-let el = [];
-let container_element;
-async function scroll_to_img(index) {
-  if (typeof index !== "number") return;
-  await tick();
-  if (el[index] === void 0) return;
-  el[index]?.focus();
-  const { left: container_left, width: container_width } = container_element.getBoundingClientRect();
-  const { left, width } = el[index].getBoundingClientRect();
-  const relative_left = left - container_left;
-  const pos = relative_left + width / 2 - container_width / 2 + container_element.scrollLeft;
-  if (container_element && typeof container_element.scrollTo === "function") {
-    container_element.scrollTo({
-      left: pos < 0 ? 0 : pos,
-      behavior: "smooth"
-    });
-  }
-}
-let window_height = 0;
-async function download(file_url, name) {
-  let response;
-  try {
-    response = await _fetch(file_url);
-  } catch (error) {
-    if (error instanceof TypeError) {
-      window.open(file_url, "_blank", "noreferrer");
-      return;
-    }
-    throw error;
-  }
-  const blob = await response.blob();
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = name;
-  link.click();
-  URL.revokeObjectURL(url);
-}
-$: selected_media = selected_index != null && resolved_value != null ? resolved_value[selected_index] : null;
-let thumbnails_overflow = false;
-function check_thumbnails_overflow() {
-  if (container_element) {
-    thumbnails_overflow = container_element.scrollWidth > container_element.clientWidth;
-  }
-}
-onMount(() => {
-  check_thumbnails_overflow();
-  document.addEventListener("fullscreenchange", () => {
-    is_full_screen = !!document.fullscreenElement;
-  });
-  window.addEventListener("resize", check_thumbnails_overflow);
-  return () => window.removeEventListener("resize", check_thumbnails_overflow);
-});
-$: resolved_value, check_thumbnails_overflow();
-$: if (container_element) {
-  check_thumbnails_overflow();
-}
-function handle_item_delete(index) {
-  if (!value || !resolved_value) return;
-  const deleted_item = resolved_value[index];
-  let deleted_file_data;
-  if ("image" in deleted_item) {
-    deleted_file_data = {
-      file: deleted_item.image,
-      index
-    };
-  } else if ("video" in deleted_item) {
-    deleted_file_data = {
-      file: deleted_item.video,
-      index
-    };
-  }
-  if (deleted_file_data) {
-    dispatch("delete", deleted_file_data);
-  }
-}
-let uploading = false;
+<script lang="ts">
+	import {
+		BlockLabel,
+		Empty,
+		ShareButton,
+		IconButton,
+		IconButtonWrapper,
+		FullscreenButton
+	} from "@gradio/atoms";
+	import { ModifyUpload, Upload as UploadComponent } from "@gradio/upload";
+	import type { SelectData } from "@gradio/utils";
+	import { Image } from "@gradio/image/shared";
+	import { Video } from "@gradio/video/shared";
+	import { dequal } from "dequal";
+	import { createEventDispatcher, onMount } from "svelte";
+	import { tick } from "svelte";
+	import type { GalleryImage, GalleryVideo } from "../types";
+
+	import {
+		Download,
+		Image as ImageIcon,
+		Clear,
+		Play,
+		Upload as UploadIcon
+	} from "@gradio/icons";
+	import { FileData } from "@gradio/client";
+	import type { Client } from "@gradio/client";
+	import { format_gallery_for_sharing } from "./utils";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	type GalleryData = GalleryImage | GalleryVideo;
+
+	export let show_label = true;
+	export let label: string;
+	export let value: GalleryData[] | null = null;
+	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 object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
+		"cover";
+	export let show_share_button = false;
+	export let show_download_button = false;
+	export let i18n: I18nFormatter;
+	export let selected_index: number | null = null;
+	export let interactive: boolean;
+	export let _fetch: typeof fetch;
+	export let mode: "normal" | "minimal" = "normal";
+	export let show_fullscreen_button = true;
+	export let display_icon_button_wrapper_top_corner = false;
+	export let fullscreen = false;
+	export let root = "";
+	export let file_types: string[] | null = ["image", "video"];
+	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;
+
+	const dispatch = createEventDispatcher<{
+		change: undefined;
+		select: SelectData;
+		preview_open: undefined;
+		preview_close: undefined;
+		fullscreen: boolean;
+		delete: { file: FileData; index: number };
+		upload: FileData | FileData[];
+		error: string;
+		clear: undefined;
+	}>();
+
+	// tracks whether the value of the gallery was reset
+	let was_reset = true;
+
+	$: was_reset = value == null || value.length === 0 ? true : was_reset;
+
+	let resolved_value: GalleryData[] | null = null;
+
+	$: resolved_value =
+		value == null
+			? null
+			: (value.map((data) => {
+					if ("video" in data) {
+						return {
+							video: data.video as FileData,
+							caption: data.caption
+						};
+					} else if ("image" in data) {
+						return { image: data.image as FileData, caption: data.caption };
+					}
+					return {};
+				}) as GalleryData[]);
+
+	let effective_columns: number | number[] | undefined = 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));
+			} else {
+				effective_columns = Math.min(columns, item_count);
+			}
+		} else {
+			effective_columns = columns;
+		}
+	}
+
+	let prev_value: GalleryData[] | null = value;
+	if (selected_index == null && preview && value?.length) {
+		selected_index = 0;
+	}
+	let old_selected_index: number | null = selected_index;
+
+	$: if (!dequal(prev_value, value)) {
+		// When value is falsy (clear button or first load),
+		// preview determines the selected image
+		if (was_reset) {
+			selected_index = preview && value?.length ? 0 : null;
+			was_reset = false;
+			// Otherwise we keep the selected_index the same if the
+			// gallery has at least as many elements as it did before
+		} else {
+			if (selected_index !== null && value !== null) {
+				selected_index = Math.max(
+					0,
+					Math.min(selected_index, value.length - 1)
+				);
+			} else {
+				selected_index = null;
+			}
+		}
+		dispatch("change");
+		prev_value = value;
+	}
+
+	$: previous =
+		((selected_index ?? 0) + (resolved_value?.length ?? 0) - 1) %
+		(resolved_value?.length ?? 0);
+	$: next = ((selected_index ?? 0) + 1) % (resolved_value?.length ?? 0);
+
+	function handle_preview_click(event: MouseEvent): void {
+		const element = event.target as HTMLElement;
+		const x = event.offsetX;
+		const width = element.offsetWidth;
+		const centerX = width / 2;
+
+		if (x < centerX) {
+			selected_index = previous;
+		} else {
+			selected_index = next;
+		}
+	}
+
+	function on_keydown(e: KeyboardEvent): void {
+		switch (e.code) {
+			case "Escape":
+				e.preventDefault();
+				selected_index = null;
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				selected_index = previous;
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				selected_index = next;
+				break;
+			default:
+				break;
+		}
+	}
+
+	$: {
+		if (selected_index !== old_selected_index) {
+			old_selected_index = selected_index;
+			if (selected_index !== null) {
+				if (resolved_value != null) {
+					selected_index = Math.max(
+						0,
+						Math.min(selected_index, resolved_value.length - 1)
+					);
+				}
+				dispatch("select", {
+					index: selected_index,
+					value: resolved_value?.[selected_index]
+				});
+			}
+		}
+	}
+
+	$: if (allow_preview) {
+		scroll_to_img(selected_index);
+	}
+
+	let el: HTMLButtonElement[] = [];
+	let container_element: HTMLDivElement;
+
+	async function scroll_to_img(index: number | null): Promise<void> {
+		if (typeof index !== "number") return;
+		await tick();
+
+		if (el[index] === undefined) return;
+
+		el[index]?.focus();
+
+		const { left: container_left, width: container_width } =
+			container_element.getBoundingClientRect();
+		const { left, width } = el[index].getBoundingClientRect();
+
+		const relative_left = left - container_left;
+
+		const pos =
+			relative_left +
+			width / 2 -
+			container_width / 2 +
+			container_element.scrollLeft;
+
+		if (container_element && typeof container_element.scrollTo === "function") {
+			container_element.scrollTo({
+				left: pos < 0 ? 0 : pos,
+				behavior: "smooth"
+			});
+		}
+	}
+
+	let window_height = 0;
+
+	// Unlike `gr.Image()`, images specified via remote URLs are not cached in the server
+	// and their remote URLs are directly passed to the client as `value[].image.url`.
+	// The `download` attribute of the <a> tag doesn't work for remote URLs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download),
+	// so we need to download the image via JS as below.
+	async function download(file_url: string, name: string): Promise<void> {
+		let response;
+		try {
+			response = await _fetch(file_url);
+		} catch (error) {
+			if (error instanceof TypeError) {
+				// If CORS is not allowed (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful),
+				// open the link in a new tab instead, mimicing the behavior of the `download` attribute for remote URLs,
+				// which is not ideal, but a reasonable fallback.
+				window.open(file_url, "_blank", "noreferrer");
+				return;
+			}
+
+			throw error;
+		}
+		const blob = await response.blob();
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.href = url;
+		link.download = name;
+		link.click();
+		URL.revokeObjectURL(url);
+	}
+
+	$: selected_media =
+		selected_index != null && resolved_value != null
+			? resolved_value[selected_index]
+			: null;
+
+	let thumbnails_overflow = false;
+
+	function check_thumbnails_overflow(): void {
+		if (container_element) {
+			thumbnails_overflow =
+				container_element.scrollWidth > container_element.clientWidth;
+		}
+	}
+
+	onMount(() => {
+		check_thumbnails_overflow();
+		document.addEventListener("fullscreenchange", () => {
+			is_full_screen = !!document.fullscreenElement;
+		});
+		window.addEventListener("resize", check_thumbnails_overflow);
+		return () =>
+			window.removeEventListener("resize", check_thumbnails_overflow);
+	});
+
+	$: (resolved_value, check_thumbnails_overflow());
+	$: if (container_element) {
+		check_thumbnails_overflow();
+	}
+
+	function handle_item_delete(index: number): void {
+		if (!value || !resolved_value) return;
+
+		const deleted_item = resolved_value[index];
+		let deleted_file_data;
+
+		if ("image" in deleted_item) {
+			deleted_file_data = {
+				file: deleted_item.image,
+				index: index
+			};
+		} else if ("video" in deleted_item) {
+			deleted_file_data = {
+				file: deleted_item.video,
+				index: index
+			};
+		}
+
+		if (deleted_file_data) {
+			dispatch("delete", deleted_file_data);
+		}
+	}
+
+	let uploading = false;
 </script>
 
 <svelte:window bind:innerHeight={window_height} />
@@ -238,7 +323,7 @@ let uploading = false;
 {: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"}
@@ -304,12 +389,14 @@ let uploading = false;
 				>
 					{#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
@@ -351,10 +438,13 @@ let uploading = false;
 							{#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 />
@@ -371,7 +461,7 @@ let uploading = false;
 						</button>
 					{/each}
 				</div>
-			</button>
+			</span>
 		{/if}
 
 		<div
@@ -382,10 +472,17 @@ let uploading = false;
 			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}
@@ -464,7 +561,7 @@ let uploading = false;
 	</div>
 {/if}
 
-<style>
+<style lang="postcss">
 	.image-container {
 		height: 100%;
 		position: relative;