@gradio/gallery 0.4.0-beta.5

package/CHANGELOG.md

@@ -0,0 +1,126 @@
+# @gradio/gallery
+
+## 0.4.0-beta.5
+
+### Features
+
+- [#5648](https://github.com/gradio-app/gradio/pull/5648) [`c573e2339`](https://github.com/gradio-app/gradio/commit/c573e2339b86c85b378dc349de5e9223a3c3b04a) - Publish all components to npm.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
+## 0.4.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`0b4fd5b6d`](https://github.com/gradio-app/gradio/commit/0b4fd5b6db96fc95a155e5e935e17e1ab11d1161)]:
+  - @gradio/utils@0.2.0-beta.3
+  - @gradio/atoms@0.2.0-beta.3
+  - @gradio/image@0.3.0-beta.4
+  - @gradio/statustracker@0.3.0-beta.4
+  - @gradio/upload@0.3.0-beta.3
+
+## 0.4.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies [[`14fc612d8`](https://github.com/gradio-app/gradio/commit/14fc612d84bf6b1408eccd3a40fab41f25477571)]:
+  - @gradio/utils@0.2.0-beta.2
+  - @gradio/atoms@0.2.0-beta.2
+  - @gradio/image@0.3.0-beta.3
+  - @gradio/statustracker@0.3.0-beta.3
+  - @gradio/upload@0.3.0-beta.2
+
+## 0.4.0-beta.2
+
+### Features
+
+- [#5620](https://github.com/gradio-app/gradio/pull/5620) [`c4c25ecdf`](https://github.com/gradio-app/gradio/commit/c4c25ecdf8c2fab5e3c41b519564e3b6a9ebfce3) - fix build and broken imports. Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.4.0-beta.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @gradio/utils@0.2.0-beta.1
+  - @gradio/atoms@0.2.0-beta.1
+  - @gradio/image@0.3.0-beta.1
+  - @gradio/statustracker@0.3.0-beta.1
+  - @gradio/upload@0.3.0-beta.1
+
+## 0.4.0-beta.0
+
+### Features
+
+- [#5507](https://github.com/gradio-app/gradio/pull/5507) [`1385dc688`](https://github.com/gradio-app/gradio/commit/1385dc6881f2d8ae7a41106ec21d33e2ef04d6a9) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.3.4
+
+### Patch Changes
+
+- Updated dependencies [[`e0d61b8ba`](https://github.com/gradio-app/gradio/commit/e0d61b8baa0f6293f53b9bdb1647d42f9ae2583a)]:
+  - @gradio/image@0.2.4
+
+## 0.3.3
+
+### Fixes
+
+- [#5528](https://github.com/gradio-app/gradio/pull/5528) [`dc86e4a7`](https://github.com/gradio-app/gradio/commit/dc86e4a7e1c40b910c74558e6f88fddf9b3292bc) - Lazy load all images. Thanks [@aliabid94](https://github.com/aliabid94)!
+
+## 0.3.2
+
+### Patch Changes
+
+- Updated dependencies [[`afac0006`](https://github.com/gradio-app/gradio/commit/afac0006337ce2840cf497cd65691f2f60ee5912)]:
+  - @gradio/statustracker@0.2.0
+  - @gradio/image@0.2.2
+  - @gradio/utils@0.1.1
+  - @gradio/atoms@0.1.2
+  - @gradio/upload@0.2.1
+
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`abf1c57d`](https://github.com/gradio-app/gradio/commit/abf1c57d7d85de0df233ee3b38aeb38b638477db), [`79d8f9d8`](https://github.com/gradio-app/gradio/commit/79d8f9d891901683c5a1b7486efb44eab2478c96)]:
+  - @gradio/icons@0.1.0
+  - @gradio/utils@0.1.0
+  - @gradio/upload@0.2.0
+  - @gradio/atoms@0.1.1
+  - @gradio/image@0.2.1
+  - @gradio/statustracker@0.1.1
+
+## 0.3.0
+
+### Highlights
+
+#### Improve startup performance and markdown support ([#5279](https://github.com/gradio-app/gradio/pull/5279) [`fe057300`](https://github.com/gradio-app/gradio/commit/fe057300f0672c62dab9d9b4501054ac5d45a4ec))
+
+##### Improved markdown support
+
+We now have better support for markdown in `gr.Markdown` and `gr.Dataframe`. Including syntax highlighting and Github Flavoured Markdown. We also have more consistent markdown behaviour and styling.
+
+##### Various performance improvements
+
+These improvements will be particularly beneficial to large applications.
+
+- Rather than attaching events manually, they are now delegated, leading to a significant performance improvement and addressing a performance regression introduced in a recent version of Gradio. App startup for large applications is now around twice as fast.
+- Optimised the mounting of individual components, leading to a modest performance improvement during startup (~30%).
+- Corrected an issue that was causing markdown to re-render infinitely.
+- Ensured that the `gr.3DModel` does re-render prematurely.
+
+Thanks [@pngwn](https://github.com/pngwn)!
+
+### Features
+
+- [#5215](https://github.com/gradio-app/gradio/pull/5215) [`fbdad78a`](https://github.com/gradio-app/gradio/commit/fbdad78af4c47454cbb570f88cc14bf4479bbceb) - Lazy load interactive or static variants of a component individually, rather than loading both variants regardless. This change will improve performance for many applications. Thanks [@pngwn](https://github.com/pngwn)!
+- [#5216](https://github.com/gradio-app/gradio/pull/5216) [`4b58ea6d`](https://github.com/gradio-app/gradio/commit/4b58ea6d98e7a43b3f30d8a4cb6f379bc2eca6a8) - Update i18n tokens and locale files. Thanks [@hannahblair](https://github.com/hannahblair)!
+
+## 0.2.0
+
+### Features
+
+- [#5025](https://github.com/gradio-app/gradio/pull/5025) [`6693660a`](https://github.com/gradio-app/gradio/commit/6693660a790996f8f481feaf22a8c49130d52d89) - Add download button to selected images in `Gallery`. Thanks [@hannahblair](https://github.com/hannahblair)!
+
+## 0.1.0
+
+### 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)!

package/Gallery.stories.svelte

@@ -0,0 +1,209 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Gallery from "./static/";
+</script>
+
+<Meta
+	title="Components/Gallery"
+	component={Gallery}
+	argTypes={{
+		label: {
+			control: "text",
+			description: "The gallery label",
+			name: "label",
+			value: "Gradio Button"
+		},
+		show_label: {
+			options: [true, false],
+			description: "Whether to show the label",
+			control: { type: "boolean" },
+			defaultValue: true
+		},
+		grid_cols: {
+			options: [1, 2, 3, 4],
+			description: "The number of columns to show in grid",
+			control: { type: "select" },
+			defaultValue: 2
+		},
+		grid_rows: {
+			options: [1, 2, 3, 4],
+			description: "The number of rows to show in grid",
+			control: { type: "select" },
+			defaultValue: 2
+		},
+		height: {
+			options: ["auto", 500, 600],
+			description: "The height of the grid",
+			control: { type: "select" },
+			defaultValue: "auto"
+		},
+		preview: {
+			options: [true, false],
+			description: "Whether to start the gallery in preview mode",
+			control: { type: "boolean" },
+			defaultValue: true
+		},
+		allow_preview: {
+			options: [true, false],
+			description: "Whether to allow a preview mode in the gallery",
+			control: { type: "boolean" },
+			defaultValue: true
+		},
+		object_fit: {
+			options: ["contain", "cover", "fill", "none", "scale-down"],
+			description: "How to display each indivial image in the grid",
+			control: { type: "select" },
+			defaultValue: "contain"
+		},
+		show_share_button: {
+			options: [true, false],
+			description: "Whether to show the share button in the gallery",
+			control: { type: "boolean" },
+			defaultValue: false
+		}
+	}}
+/>
+
+<Template let:args>
+	<Gallery
+		value={[
+			[
+				"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
+				"A fast cheetah"
+			],
+			"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg"
+		]}
+		{...args}
+	/>
+</Template>
+
+<Story
+	name="Gallery with label"
+	args={{ label: "My Cheetah Gallery", show_label: true }}
+/>
+<Story
+	name="Gallery without label"
+	args={{ label: "My Cheetah Gallery", show_label: false }}
+/>
+<Story
+	name="Gallery with grid_rows=3 and grid_cols=3"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		grid_rows: 3,
+		grid_cols: 3
+	}}
+/>
+<Story
+	name="Gallery with grid_cols=4"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		grid_cols: 4
+	}}
+/>
+<Story
+	name="Gallery with height=600"
+	args={{
+		label: "My Cheetah Gallery",
+		height: 600
+	}}
+/>
+<Story
+	name="Gallery with allow_preview=false"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		allow_preview: false
+	}}
+/>
+<Story
+	name="Gallery with preview"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		preview: true
+	}}
+/>
+<Story
+	name="Gallery with object_fit=scale-down"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		object_fit: "scale-down"
+	}}
+/>
+<Story
+	name="Gallery with object_fit=contain"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		object_fit: "contain"
+	}}
+/>
+<Story
+	name="Gallery with object_fit=cover"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		object_fit: "cover"
+	}}
+/>
+<Story
+	name="Gallery with object_fit=none"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		object_fit: "none"
+	}}
+/>
+<Story
+	name="Gallery with object_fit=fill"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		object_fit: "fill"
+	}}
+/>
+<Story
+	name="Gallery with share button"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		show_share_button: true
+	}}
+/>
+
+<Story
+	name="Gallery with overflow of images"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		grid_rows: 2,
+		grid_cols: 2,
+		height: 400,
+		value: [
+			"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg"
+		]
+	}}
+/>
+
+<Story
+	name="Gallery with download button"
+	args={{
+		label: "My Cheetah Gallery",
+		grid_rows: 2,
+		height: 400,
+		show_download_button: true,
+		value: ["https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg"]
+	}}
+/>

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@gradio/gallery",
+  "version": "0.4.0-beta.5",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "main": "./static/index.ts",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "^0.2.0-beta.3",
+    "@gradio/icons": "^0.2.0-beta.0",
+    "@gradio/image": "^0.3.0-beta.5",
+    "@gradio/statustracker": "^0.3.0-beta.5",
+    "@gradio/upload": "^0.3.0-beta.3",
+    "@gradio/utils": "^0.2.0-beta.3"
+  },
+  "main_changeset": true,
+  "exports": {
+    ".": "./static/index.ts",
+    "./package.json": "./package.json",
+    "./interactive": "./interactive/index.ts",
+    "./static": "./static/index.ts",
+    "./example": "./example/index.ts"
+  }
+}

package/static/Gallery.svelte

@@ -0,0 +1,450 @@
+<script lang="ts">
+	import { BlockLabel, Empty, ShareButton } from "@gradio/atoms";
+	import { ModifyUpload } from "@gradio/upload";
+	import type { SelectData } from "@gradio/utils";
+
+	import { createEventDispatcher } from "svelte";
+	import { tick } from "svelte";
+
+	import { Download, Image } from "@gradio/icons";
+	import type { FileData } from "@gradio/upload";
+	import { normalise_file } from "@gradio/upload";
+	import { format_gallery_for_sharing } from "./utils";
+	import { IconButton } from "@gradio/atoms";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	export let show_label = true;
+	export let label: string;
+	export let root = "";
+	export let root_url: null | string = null;
+	export let value: { image: FileData; caption: string | null }[] | null = null;
+	export let grid_cols: number | number[] | undefined = [2];
+	export let grid_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;
+
+	const dispatch = createEventDispatcher<{
+		select: SelectData;
+	}>();
+
+	// tracks whether the value of the gallery was reset
+	let was_reset = true;
+
+	$: was_reset = value == null || value.length == 0 ? true : was_reset;
+
+	let _value: { image: FileData; caption: string | null }[] | null = null;
+	$: _value =
+		value === null
+			? null
+			: value.map((data) => ({
+					image: normalise_file(data.image, root, root_url) as FileData,
+					caption: data.caption
+			  }));
+
+	let prevValue: { image: FileData; caption: string | null }[] | null | null =
+		value;
+	let selected_image = preview && value?.length ? 0 : null;
+	let old_selected_image: number | null = selected_image;
+
+	$: if (prevValue !== value) {
+		// When value is falsy (clear button or first load),
+		// preview determines the selected image
+		if (was_reset) {
+			selected_image = preview && value?.length ? 0 : null;
+			was_reset = false;
+			// Otherwise we keep the selected_image the same if the
+			// gallery has at least as many elements as it did before
+		} else {
+			selected_image =
+				selected_image !== null &&
+				value !== null &&
+				selected_image < value.length
+					? selected_image
+					: null;
+		}
+		prevValue = value;
+	}
+
+	$: previous =
+		((selected_image ?? 0) + (_value?.length ?? 0) - 1) % (_value?.length ?? 0);
+	$: next = ((selected_image ?? 0) + 1) % (_value?.length ?? 0);
+
+	function handle_preview_click(event: MouseEvent): void {
+		const element = event.target as HTMLElement;
+		const x = event.clientX;
+		const width = element.offsetWidth;
+		const centerX = width / 2;
+
+		if (x < centerX) {
+			selected_image = previous;
+		} else {
+			selected_image = next;
+		}
+	}
+
+	function on_keydown(e: KeyboardEvent): void {
+		switch (e.code) {
+			case "Escape":
+				e.preventDefault();
+				selected_image = null;
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				selected_image = previous;
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				selected_image = next;
+				break;
+			default:
+				break;
+		}
+	}
+
+	function isFileData(obj: any): obj is FileData {
+		return typeof obj === "object" && obj !== null && "data" in obj;
+	}
+
+	function getHrefValue(selected: any): string {
+		if (isFileData(selected)) {
+			return selected.data;
+		} else if (typeof selected === "string") {
+			return selected;
+		}
+		return "";
+	}
+
+	$: {
+		if (selected_image !== old_selected_image) {
+			old_selected_image = selected_image;
+			if (selected_image !== null) {
+				dispatch("select", {
+					index: selected_image,
+					value: _value?.[selected_image].caption
+				});
+			}
+		}
+	}
+
+	$: if (allow_preview) {
+		scroll_to_img(selected_image);
+	}
+
+	let el: HTMLButtonElement[] = [];
+	let container_element: HTMLDivElement;
+
+	async function scroll_to_img(index: number | null): Promise<void> {
+		if (typeof index !== "number") return;
+		await tick();
+
+		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;
+
+		container_element?.scrollTo({
+			left: pos < 0 ? 0 : pos,
+			behavior: "smooth"
+		});
+	}
+
+	let client_height = 0;
+	let window_height = 0;
+</script>
+
+<svelte:window bind:innerHeight={window_height} />
+
+{#if show_label}
+	<BlockLabel {show_label} Icon={Image} label={label || "Gallery"} />
+{/if}
+{#if value === null || _value === null || _value.length === 0}
+	<Empty unpadded_box={true} size="large"><Image /></Empty>
+{:else}
+	{#if selected_image !== null && allow_preview}
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div on:keydown={on_keydown} class="preview">
+			<div class="icon-buttons">
+				{#if show_download_button}
+					<a
+						href={getHrefValue(value[selected_image])}
+						target={window.__is_colab__ ? "_blank" : null}
+						download="image"
+					>
+						<IconButton Icon={Download} label={i18n("common.download")} />
+					</a>
+				{/if}
+
+				<ModifyUpload
+					{i18n}
+					absolute={false}
+					on:clear={() => (selected_image = null)}
+				/>
+			</div>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+			<img
+				data-testid="detailed-image"
+				on:click={(event) => handle_preview_click(event)}
+				src={_value[selected_image].image.data}
+				alt={_value[selected_image].caption || ""}
+				title={_value[selected_image].caption || null}
+				class:with-caption={!!_value[selected_image].caption}
+				style="height: calc(100% - {_value[selected_image].caption}
+					? '80px'
+					: '60px'})"
+				loading="lazy"
+			/>
+			{#if _value[selected_image].caption}
+				<div class="caption">
+					{_value[selected_image].caption}
+				</div>
+			{/if}
+			<div
+				bind:this={container_element}
+				class="thumbnails scroll-hide"
+				data-testid="container_el"
+			>
+				{#each _value as image, i}
+					<button
+						bind:this={el[i]}
+						on:click={() => (selected_image = i)}
+						class="thumbnail-item thumbnail-small"
+						class:selected={selected_image === i}
+					>
+						<img
+							src={image.image.data}
+							title={image.caption || null}
+							alt={image.caption || null}
+							loading="lazy"
+						/>
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<div
+		bind:clientHeight={client_height}
+		class="grid-wrap"
+		class:fixed-height={!height || height == "auto"}
+	>
+		<div
+			class="grid-container"
+			style="--grid-cols:{grid_cols}; --grid-rows:{grid_rows}; --object-fit: {object_fit}; height: {height};"
+			class:pt-6={show_label}
+		>
+			{#if show_share_button}
+				<div class="icon-button">
+					<ShareButton
+						{i18n}
+						on:share
+						on:error
+						value={_value}
+						formatter={format_gallery_for_sharing}
+					/>
+				</div>
+			{/if}
+			{#each _value as entry, i}
+				<button
+					class="thumbnail-item thumbnail-lg"
+					class:selected={selected_image === i}
+					on:click={() => (selected_image = i)}
+				>
+					<img
+						alt={entry.caption || ""}
+						src={typeof entry.image === "string"
+							? entry.image
+							: entry.image.data}
+						loading="lazy"
+					/>
+					{#if entry.caption}
+						<div class="caption-label">
+							{entry.caption}
+						</div>
+					{/if}
+				</button>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<style lang="postcss">
+	.preview {
+		display: flex;
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		bottom: 0px;
+		left: 0px;
+		flex-direction: column;
+		z-index: var(--layer-2);
+		backdrop-filter: blur(8px);
+		background: var(--background-fill-primary);
+		height: var(--size-full);
+	}
+
+	.fixed-height {
+		min-height: var(--size-80);
+		max-height: 55vh;
+	}
+
+	@media (--screen-xl) {
+		.fixed-height {
+			min-height: 450px;
+		}
+	}
+
+	.preview img {
+		width: var(--size-full);
+		height: calc(var(--size-full) - 60px);
+		object-fit: contain;
+	}
+
+	.preview img.with-caption {
+		height: calc(var(--size-full) - 80px);
+	}
+
+	.caption {
+		padding: var(--size-2) var(--size-3);
+		overflow: hidden;
+		color: var(--block-label-text-color);
+		font-weight: var(--weight-semibold);
+		text-align: center;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.thumbnails {
+		display: flex;
+		position: absolute;
+		bottom: 0;
+		justify-content: center;
+		align-items: center;
+		gap: var(--spacing-lg);
+		width: var(--size-full);
+		height: var(--size-14);
+		overflow-x: scroll;
+	}
+
+	.thumbnail-item {
+		--ring-color: transparent;
+		position: relative;
+		box-shadow:
+			0 0 0 2px var(--ring-color),
+			var(--shadow-drop);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--button-small-radius);
+		background: var(--background-fill-secondary);
+		aspect-ratio: var(--ratio-square);
+		width: var(--size-full);
+		height: var(--size-full);
+		overflow: clip;
+	}
+
+	.thumbnail-item:hover {
+		--ring-color: var(--color-accent);
+		filter: brightness(1.1);
+	}
+
+	.thumbnail-item.selected {
+		--ring-color: var(--color-accent);
+	}
+
+	.thumbnail-small {
+		flex: none;
+		transform: scale(0.9);
+		transition: 0.075s;
+		width: var(--size-9);
+		height: var(--size-9);
+	}
+
+	.thumbnail-small.selected {
+		--ring-color: var(--color-accent);
+		transform: scale(1);
+		border-color: var(--color-accent);
+	}
+
+	.thumbnail-small > img {
+		width: var(--size-full);
+		height: var(--size-full);
+		overflow: hidden;
+		object-fit: var(--object-fit);
+	}
+
+	.grid-wrap {
+		position: relative;
+		padding: var(--size-2);
+		height: var(--size-full);
+		overflow-y: scroll;
+	}
+
+	.grid-container {
+		display: grid;
+		position: relative;
+		grid-template-rows: repeat(var(--grid-rows), minmax(100px, 1fr));
+		grid-template-columns: repeat(var(--grid-cols), minmax(100px, 1fr));
+		grid-auto-rows: minmax(100px, 1fr);
+		gap: var(--spacing-lg);
+	}
+
+	.thumbnail-lg > img {
+		width: var(--size-full);
+		height: var(--size-full);
+		overflow: hidden;
+		object-fit: var(--object-fit);
+	}
+
+	.thumbnail-lg:hover .caption-label {
+		opacity: 0.5;
+	}
+
+	.caption-label {
+		position: absolute;
+		right: var(--block-label-margin);
+		bottom: var(--block-label-margin);
+		z-index: var(--layer-1);
+		border-top: 1px solid var(--border-color-primary);
+		border-left: 1px solid var(--border-color-primary);
+		border-radius: var(--block-label-radius);
+		background: var(--background-fill-secondary);
+		padding: var(--block-label-padding);
+		max-width: 80%;
+		overflow: hidden;
+		font-size: var(--block-label-text-size);
+		text-align: left;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.icon-button {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		z-index: var(--layer-1);
+	}
+
+	.icon-buttons {
+		display: flex;
+		position: absolute;
+		right: 0;
+	}
+
+	.icon-buttons a {
+		margin: var(--size-1) 0;
+	}
+</style>

package/static/StaticGallery.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { Gradio, ShareData, SelectData } from "@gradio/utils";
+	import { Block } from "@gradio/atoms";
+	import Gallery from "./Gallery.svelte";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { FileData } from "@gradio/upload";
+
+	export let loading_status: LoadingStatus;
+	export let show_label: boolean;
+	export let label: string;
+	export let root: string;
+	export let root_url: null | string;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value:
+		| { image: FileData; caption: string | null }[]
+		| null
+		| null = null;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let grid_cols: number | number[] | undefined = [2];
+	export let grid_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 gradio: Gradio<{
+		select: SelectData;
+		share: ShareData;
+		error: string;
+	}>;
+</script>
+
+<Block
+	{visible}
+	variant="solid"
+	padding={false}
+	{elem_id}
+	{elem_classes}
+	{container}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+	height={typeof height === "number" ? height : undefined}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
+	<Gallery
+		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:share={(e) => gradio.dispatch("share", e.detail)}
+		on:error={(e) => gradio.dispatch("error", e.detail)}
+		{label}
+		{value}
+		{show_label}
+		{root}
+		{root_url}
+		{grid_cols}
+		{grid_rows}
+		{height}
+		{preview}
+		{object_fit}
+		{allow_preview}
+		{show_share_button}
+		{show_download_button}
+		i18n={gradio.i18n}
+	/>
+</Block>

package/static/index.ts

@@ -0,0 +1 @@
+export { default } from "./StaticGallery.svelte";

package/static/utils.ts

@@ -0,0 +1,18 @@
+import { uploadToHuggingFace } from "@gradio/utils";
+import type { FileData } from "@gradio/upload";
+
+export async function format_gallery_for_sharing(
+	value: [FileData, string | null][] | null
+): Promise<string> {
+	if (!value) return "";
+	let urls = await Promise.all(
+		value.map(async ([image, _]) => {
+			if (image === null) return "";
+			return await uploadToHuggingFace(image.data, "url");
+		})
+	);
+
+	return `<div style="display: flex; flex-wrap: wrap; gap: 16px">${urls
+		.map((url) => `<img src="${url}" style="height: 400px" />`)
+		.join("")}</div>`;
+}