@gradio/gallery 0.4.16 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/gallery
 
+## 0.5.0
+
+### Features
+
+- [#7024](https://github.com/gradio-app/gradio/pull/7024) [`f2d69fc`](https://github.com/gradio-app/gradio/commit/f2d69fc7d0c1c3457112e702b53e38a0255fc1b7) - Fix gallery thumbnail design regression.  Thanks [@hannahblair](https://github.com/hannahblair)!
+
+## 0.4.17
+
+### Fixes
+
+- [#6967](https://github.com/gradio-app/gradio/pull/6967) [`5e00162`](https://github.com/gradio-app/gradio/commit/5e0016267f1d683e2daab82ee4a33d2f09513a34) - Make <Gallery /> Wasm-compatible.  Thanks [@whitphx](https://github.com/whitphx)!
+
 ## 0.4.16
 
 ### Patch Changes
@@ -293,4 +305,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
 
 ### Features
 
-- [#4995](https://github.com/gradio-app/gradio/pull/4995) [`3f8c210b`](https://github.com/gradio-app/gradio/commit/3f8c210b01ef1ceaaf8ee73be4bf246b5b745bbf) - Implement left and right click in `Gallery` component and show implicit images in `Gallery` grid. Thanks [@hannahblair](https://github.com/hannahblair)!
+- [#4995](https://github.com/gradio-app/gradio/pull/4995) [`3f8c210b`](https://github.com/gradio-app/gradio/commit/3f8c210b01ef1ceaaf8ee73be4bf246b5b745bbf) - Implement left and right click in `Gallery` component and show implicit images in `Gallery` grid. Thanks [@hannahblair](https://github.com/hannahblair)!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.4.16",
+  "version": "0.5.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -9,12 +9,13 @@
   "dependencies": {
     "dequal": "^2.0.2",
     "@gradio/atoms": "^0.4.1",
+    "@gradio/client": "^0.10.1",
     "@gradio/icons": "^0.3.2",
-    "@gradio/client": "^0.10.0",
-    "@gradio/image": "^0.6.0",
     "@gradio/statustracker": "^0.4.3",
+    "@gradio/image": "^0.7.0",
+    "@gradio/upload": "^0.6.1",
     "@gradio/utils": "^0.2.0",
-    "@gradio/upload": "^0.5.8"
+    "@gradio/wasm": "^0.5.0"
   },
   "main": "./Index.svelte",
   "main_changeset": true,

package/shared/Gallery.svelte

@@ -2,11 +2,12 @@
 	import { BlockLabel, Empty, ShareButton } from "@gradio/atoms";
 	import { ModifyUpload } from "@gradio/upload";
 	import type { SelectData } from "@gradio/utils";
+	import { Image } from "@gradio/image/shared";
 	import { dequal } from "dequal";
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher, getContext } from "svelte";
 	import { tick } from "svelte";
 
-	import { Download, Image } from "@gradio/icons";
+	import { Download, Image as ImageIcon } from "@gradio/icons";
 	import { normalise_file, type FileData } from "@gradio/client";
 	import { format_gallery_for_sharing } from "./utils";
 	import { IconButton } from "@gradio/atoms";
@@ -166,10 +167,11 @@
 	// 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.
+	const fetch_implementation = getContext<typeof fetch>("fetch_implementation");
 	async function download(file_url: string, name: string): Promise<void> {
 		let response;
 		try {
-			response = await fetch(file_url);
+			response = await fetch_implementation(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),
@@ -199,10 +201,10 @@
 <svelte:window bind:innerHeight={window_height} />
 
 {#if show_label}
-	<BlockLabel {show_label} Icon={Image} label={label || "Gallery"} />
+	<BlockLabel {show_label} Icon={ImageIcon} label={label || "Gallery"} />
 {/if}
 {#if value == null || resolved_value == null || resolved_value.length === 0}
-	<Empty unpadded_box={true} size="large"><Image /></Empty>
+	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	{#if selected_image && allow_preview}
 		<button on:keydown={on_keydown} class="preview">
@@ -238,12 +240,12 @@
 				style="height: calc(100% - {selected_image.caption ? '80px' : '60px'})"
 				aria-label="detailed view of selected image"
 			>
-				<img
+				<Image
 					data-testid="detailed-image"
 					src={selected_image.image.url}
 					alt={selected_image.caption || ""}
 					title={selected_image.caption || null}
-					class:with-caption={!!selected_image.caption}
+					class={selected_image.caption && "with-caption"}
 					loading="lazy"
 				/>
 			</button>
@@ -265,7 +267,7 @@
 						class:selected={selected_index === i}
 						aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
 					>
-						<img
+						<Image
 							src={image.image.url}
 							title={image.caption || null}
 							data-testid={"thumbnail " + (i + 1)}
@@ -306,7 +308,7 @@
 					on:click={() => (selected_index = i)}
 					aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
 				>
-					<img
+					<Image
 						alt={entry.caption || ""}
 						src={typeof entry.image === "string"
 							? entry.image
@@ -355,13 +357,17 @@
 		width: 100%;
 		display: flex;
 	}
-	.preview img {
+	.image-button :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);
 		object-fit: contain;
 	}
-
-	.preview img.with-caption {
+	.thumbnails :global(img) {
+		object-fit: cover;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+	.preview :global(img.with-caption) {
 		height: var(--size-full);
 	}
 
@@ -449,7 +455,7 @@
 		gap: var(--spacing-lg);
 	}
 
-	.thumbnail-lg > img {
+	.thumbnail-lg > :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);
 		overflow: hidden;