@gradio/gallery 0.4.0-beta.6 → 0.4.0-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +27 -2
  2. package/Gallery.stories.svelte +54 -16
  3. package/Gallery.test.ts +17 -10
  4. package/Index.svelte +5 -1
  5. package/README.md +22 -6
  6. package/package.json +9 -7
  7. package/shared/Gallery.svelte +10 -9
  8. package/shared/utils.ts +3 -3
package/CHANGELOG.md CHANGED
@@ -1,11 +1,36 @@
1
1
  # @gradio/gallery
2
2
 
3
+ ## 0.4.0-beta.9
4
+
5
+ ### Features
6
+
7
+ - [#6143](https://github.com/gradio-app/gradio/pull/6143) [`e4f7b4b40`](https://github.com/gradio-app/gradio/commit/e4f7b4b409323b01aa01b39e15ce6139e29aa073) - fix circular dependency with client + upload. Thanks [@pngwn](https://github.com/pngwn)!
8
+ - [#6136](https://github.com/gradio-app/gradio/pull/6136) [`667802a6c`](https://github.com/gradio-app/gradio/commit/667802a6cdbfb2ce454a3be5a78e0990b194548a) - JS Component Documentation. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
9
+ - [#6094](https://github.com/gradio-app/gradio/pull/6094) [`c476bd5a5`](https://github.com/gradio-app/gradio/commit/c476bd5a5b70836163b9c69bf4bfe068b17fbe13) - Image v4. Thanks [@pngwn](https://github.com/pngwn)!
10
+
11
+ ## 0.4.0-beta.8
12
+
13
+ ### Features
14
+
15
+ - [#6016](https://github.com/gradio-app/gradio/pull/6016) [`83e947676`](https://github.com/gradio-app/gradio/commit/83e947676d327ca2ab6ae2a2d710c78961c771a0) - Format js in v4 branch. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
16
+
17
+ ### Fixes
18
+
19
+ - [#6046](https://github.com/gradio-app/gradio/pull/6046) [`dbb7de5e0`](https://github.com/gradio-app/gradio/commit/dbb7de5e02c53fee05889d696d764d212cb96c74) - fix tests. Thanks [@pngwn](https://github.com/pngwn)!
20
+
21
+ ## 0.4.0-beta.7
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies []:
26
+ - @gradio/image@0.3.0-beta.7
27
+
3
28
  ## 0.4.0-beta.6
4
29
 
5
30
  ### Features
6
31
 
7
- - [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files. Thanks [@pngwn](https://github.com/pngwn)!
8
- - [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
32
+ - [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files. Thanks [@pngwn](https://github.com/pngwn)!
33
+ - [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
9
34
 
10
35
  ## 0.5.1
11
36
 
package/Gallery.stories.svelte CHANGED
@@ -67,16 +67,34 @@
67
67
  <Template let:args>
68
68
  <Gallery
69
69
  value={[
70
- [
71
- "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
72
- "A fast cheetah"
73
- ],
74
- "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
75
- "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
76
- "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp",
77
- "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
78
- "https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg",
79
- "https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg"
70
+ {
71
+ image:
72
+ "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
73
+ caption: "A fast cheetah"
74
+ },
75
+ {
76
+ image:
77
+ "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg"
78
+ },
79
+ {
80
+ image:
81
+ "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg"
82
+ },
83
+ {
84
+ image: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp"
85
+ },
86
+ {
87
+ image:
88
+ "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
89
+ },
90
+ {
91
+ image:
92
+ "https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg"
93
+ },
94
+ {
95
+ image:
96
+ "https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg"
97
+ }
80
98
  ]}
81
99
  {...args}
82
100
  />
@@ -188,11 +206,26 @@
188
206
  columns: 2,
189
207
  height: 400,
190
208
  value: [
191
- "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
192
- "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
193
- "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
194
- "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
195
- "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg"
209
+ {
210
+ image:
211
+ "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg"
212
+ },
213
+ {
214
+ image:
215
+ "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg"
216
+ },
217
+ {
218
+ image:
219
+ "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
220
+ },
221
+ {
222
+ image:
223
+ "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
224
+ },
225
+ {
226
+ image:
227
+ "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg"
228
+ }
196
229
  ]
197
230
  }}
198
231
  />
@@ -204,6 +237,11 @@
204
237
  rows: 2,
205
238
  height: 400,
206
239
  show_download_button: true,
207
- value: ["https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg"]
240
+ value: [
241
+ {
242
+ image:
243
+ "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg"
244
+ }
245
+ ]
208
246
  }}
209
247
  />
package/Gallery.test.ts CHANGED
@@ -2,7 +2,7 @@ import { test, describe, assert, afterEach, vi } from "vitest";
2
2
  import { cleanup, render } from "@gradio/tootils";
3
3
  import { setupi18n } from "../app/src/i18n";
4
4
 
5
- import Gallery from "./static";
5
+ import Gallery from "./Index.svelte";
6
6
  import type { LoadingStatus } from "@gradio/statustracker";
7
7
 
8
8
  const loading_status: LoadingStatus = {
@@ -33,13 +33,17 @@ describe("Gallery", () => {
33
33
  root: "",
34
34
  root_url: "",
35
35
  value: [
36
- "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg"
36
+ {
37
+ image: {
38
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
39
+ }
40
+ }
37
41
  ]
38
42
  });
39
43
  let item = getByTestId("detailed-image") as HTMLImageElement;
40
44
  assert.equal(
41
45
  item.src,
42
- "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg"
46
+ "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
43
47
  );
44
48
  });
45
49
 
@@ -52,21 +56,24 @@ describe("Gallery", () => {
52
56
  root: "",
53
57
  root_url: "",
54
58
  value: [
55
- "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg"
59
+ {
60
+ image: {
61
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
62
+ }
63
+ }
56
64
  ]
57
65
  });
58
66
  const change_event = listen("change");
59
67
 
60
68
  await component.$set({
61
69
  value: [
62
- "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg"
70
+ {
71
+ image: {
72
+ path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
73
+ }
74
+ }
63
75
  ]
64
76
  });
65
77
  assert.equal(change_event.callCount, 0);
66
-
67
- await component.$set({
68
- value: ["https://gradio-static-files.s3.us-west-2.amazonaws.com/lion.jpg"]
69
- });
70
- assert.equal(change_event.callCount, 1);
71
78
  });
72
79
  });
package/Index.svelte CHANGED
@@ -1,10 +1,14 @@
1
+ <script context="module" lang="ts">
2
+ export { default as BaseGallery } from "./shared/Gallery.svelte";
3
+ </script>
4
+
1
5
  <script lang="ts">
2
6
  import type { Gradio, ShareData, SelectData } from "@gradio/utils";
3
7
  import { Block } from "@gradio/atoms";
4
8
  import Gallery from "./shared/Gallery.svelte";
5
9
  import type { LoadingStatus } from "@gradio/statustracker";
6
10
  import { StatusTracker } from "@gradio/statustracker";
7
- import type { FileData } from "@gradio/upload";
11
+ import type { FileData } from "@gradio/client";
8
12
 
9
13
  export let loading_status: LoadingStatus;
10
14
  export let show_label: boolean;
package/README.md CHANGED
@@ -1,11 +1,27 @@
1
- # `@gradio/button`
1
+ # `@gradio/gallery`
2
2
 
3
3
  ```html
4
4
  <script>
5
- import { Button } from "@gradio/button";
5
+ import { BaseGallery } from "@gradio/gallery";
6
6
  </script>
7
-
8
- <button type="primary|secondary" href="string" on:click="{e.detail === href}">
9
- content
10
- </button>
11
7
  ```
8
+
9
+ BaseGallery
10
+ ```javascript
11
+ export let show_label = true;
12
+ export let label: string;
13
+ export let root = "";
14
+ export let root_url: null | string = null;
15
+ export let value: { image: FileData; caption: string | null }[] | null = null;
16
+ export let columns: number | number[] | undefined = [2];
17
+ export let rows: number | number[] | undefined = undefined;
18
+ export let height: number | "auto" = "auto";
19
+ export let preview: boolean;
20
+ export let allow_preview = true;
21
+ export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
22
+ "cover";
23
+ export let show_share_button = false;
24
+ export let show_download_button = false;
25
+ export let i18n: I18nFormatter;
26
+ export let selected_index: number | null = null;
27
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/gallery",
3
- "version": "0.4.0-beta.6",
3
+ "version": "0.4.0-beta.9",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -8,13 +8,15 @@
8
8
  "private": false,
9
9
  "dependencies": {
10
10
  "dequal": "^2.0.2",
11
- "@gradio/atoms": "^0.2.0-beta.4",
12
- "@gradio/icons": "^0.2.0-beta.1",
13
- "@gradio/image": "^0.3.0-beta.6",
14
- "@gradio/statustracker": "^0.3.0-beta.6",
15
- "@gradio/upload": "^0.3.0-beta.4",
16
- "@gradio/utils": "^0.2.0-beta.4"
11
+ "@gradio/atoms": "^0.2.0-beta.6",
12
+ "@gradio/client": "^0.7.0-beta.1",
13
+ "@gradio/icons": "^0.2.0-beta.3",
14
+ "@gradio/image": "^0.3.0-beta.9",
15
+ "@gradio/statustracker": "^0.3.0-beta.8",
16
+ "@gradio/upload": "^0.3.0-beta.6",
17
+ "@gradio/utils": "^0.2.0-beta.6"
17
18
  },
19
+ "main": "./Index.svelte",
18
20
  "main_changeset": true,
19
21
  "exports": {
20
22
  ".": "./Index.svelte",
package/shared/Gallery.svelte CHANGED
@@ -7,8 +7,7 @@
7
7
  import { tick } from "svelte";
8
8
 
9
9
  import { Download, Image } from "@gradio/icons";
10
- import type { FileData } from "@gradio/upload";
11
- import { normalise_file } from "@gradio/upload";
10
+ import { normalise_file, type FileData } from "@gradio/client";
12
11
  import { format_gallery_for_sharing } from "./utils";
13
12
  import { IconButton } from "@gradio/atoms";
14
13
  import type { I18nFormatter } from "@gradio/utils";
@@ -118,7 +117,7 @@
118
117
 
119
118
  function getHrefValue(selected: any): string {
120
119
  if (isFileData(selected)) {
121
- return selected.data;
120
+ return selected.path;
122
121
  } else if (typeof selected === "string") {
123
122
  return selected;
124
123
  } else if (Array.isArray(selected)) {
@@ -150,7 +149,9 @@
150
149
  if (typeof index !== "number") return;
151
150
  await tick();
152
151
 
153
- el[index].focus();
152
+ if (el[index] === undefined) return;
153
+
154
+ el[index]?.focus();
154
155
 
155
156
  const { left: container_left, width: container_width } =
156
157
  container_element.getBoundingClientRect();
@@ -213,14 +214,14 @@
213
214
  >
214
215
  <img
215
216
  data-testid="detailed-image"
216
- src={_value[selected_index].image.data}
217
+ src={_value[selected_index].image.path}
217
218
  alt={_value[selected_index].caption || ""}
218
219
  title={_value[selected_index].caption || null}
219
220
  class:with-caption={!!_value[selected_index].caption}
220
221
  loading="lazy"
221
222
  />
222
223
  </button>
223
- {#if _value[selected_index].caption}
224
+ {#if _value[selected_index]?.caption}
224
225
  <caption class="caption">
225
226
  {_value[selected_index].caption}
226
227
  </caption>
@@ -239,7 +240,7 @@
239
240
  aria-label={"Thumbnail " + (i + 1) + " of " + _value.length}
240
241
  >
241
242
  <img
242
- src={image.image.data}
243
+ src={image.image.path}
243
244
  title={image.caption || null}
244
245
  alt=""
245
246
  loading="lazy"
@@ -282,7 +283,7 @@
282
283
  alt={entry.caption || ""}
283
284
  src={typeof entry.image === "string"
284
285
  ? entry.image
285
- : entry.image.data}
286
+ : entry.image.url}
286
287
  loading="lazy"
287
288
  />
288
289
  {#if entry.caption}
@@ -466,4 +467,4 @@
466
467
  .icon-buttons a {
467
468
  margin: var(--size-1) 0;
468
469
  }
469
- </style>
470
+ </style>
package/shared/utils.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { uploadToHuggingFace } from "@gradio/utils";
2
- import type { FileData } from "@gradio/upload";
2
+ import type { FileData } from "@gradio/client";
3
3
 
4
4
  export async function format_gallery_for_sharing(
5
5
  value: [FileData, string | null][] | null
@@ -7,8 +7,8 @@ export async function format_gallery_for_sharing(
7
7
  if (!value) return "";
8
8
  let urls = await Promise.all(
9
9
  value.map(async ([image, _]) => {
10
- if (image === null) return "";
11
- return await uploadToHuggingFace(image.data, "url");
10
+ if (image === null || !image.url) return "";
11
+ return await uploadToHuggingFace(image.url, "url");
12
12
  })
13
13
  );
14
14