@gradio/gallery 0.16.1 → 0.17.0

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 (15) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/Gallery.stories.svelte +209 -115
  3. package/Gallery.test.ts +3 -0
  4. package/Index.svelte +194 -42
  5. package/dist/Index.svelte +194 -42
  6. package/dist/Index.svelte.d.ts +21 -2
  7. package/dist/shared/Gallery.svelte +207 -116
  8. package/dist/shared/Gallery.svelte.d.ts +38 -57
  9. package/dist/shared/utils.d.ts +2 -1
  10. package/dist/shared/utils.js +16 -0
  11. package/dist/types.d.ts +2 -0
  12. package/package.json +12 -12
  13. package/shared/Gallery.svelte +207 -116
  14. package/shared/utils.ts +21 -1
  15. package/types.ts +2 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,43 @@
1
1
  # @gradio/gallery
2
2
 
3
+ ## 0.17.0
4
+
5
+ ### Features
6
+
7
+ - [#12804](https://github.com/gradio-app/gradio/pull/12804) [`fc366b4`](https://github.com/gradio-app/gradio/commit/fc366b485325c900b0c2b85ba05b7d23a81a0dee) - Allow webcam uploads and clipboard paste for gallery. Thanks @freddyaboulton!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/atoms@0.21.0
12
+ - @gradio/client@2.0.4
13
+ - @gradio/statustracker@0.12.3
14
+ - @gradio/file@0.14.2
15
+ - @gradio/image@0.25.2
16
+ - @gradio/upload@0.17.5
17
+ - @gradio/video@0.20.2
18
+
19
+ ## 0.16.2
20
+
21
+ ### Fixes
22
+
23
+ - [#12800](https://github.com/gradio-app/gradio/pull/12800) [`7a1c321`](https://github.com/gradio-app/gradio/commit/7a1c321b6546ba05a353488f5133e8262c4a8a39) - Bump svelte/kit for security reasons. Thanks @freddyaboulton!
24
+ - [#12698](https://github.com/gradio-app/gradio/pull/12698) [`db86165`](https://github.com/gradio-app/gradio/commit/db86165535386991701ea89b2083ef5e60cd23e8) - Migrates gr.File. Thanks @aliabid94!
25
+ - [#12806](https://github.com/gradio-app/gradio/pull/12806) [`3b3b035`](https://github.com/gradio-app/gradio/commit/3b3b0350e90756e937fc0908446f66ae1412c89f) - Fix Gallery upload after it has been populated. Thanks @freddyaboulton!
26
+ - [#12779](https://github.com/gradio-app/gradio/pull/12779) [`ea2d3e9`](https://github.com/gradio-app/gradio/commit/ea2d3e985a8b42d188e551f517c5825c00790628) - Migrate Audio + Upload + Atoms to Svelte 5. Thanks @dawoodkhan82!
27
+ - [#12684](https://github.com/gradio-app/gradio/pull/12684) [`1373713`](https://github.com/gradio-app/gradio/commit/1373713646e34078188265eb07c4bff5a048e9a2) - Migrate Gallery to Svelte 5. Thanks @freddyaboulton!
28
+
29
+ ### Dependency updates
30
+
31
+ - @gradio/statustracker@0.12.2
32
+ - @gradio/atoms@0.20.1
33
+ - @gradio/utils@0.11.2
34
+ - @gradio/icons@0.15.1
35
+ - @gradio/upload@0.17.4
36
+ - @gradio/client@2.0.3
37
+ - @gradio/image@0.25.1
38
+ - @gradio/file@0.14.1
39
+ - @gradio/video@0.20.1
40
+
3
41
  ## 0.16.1
4
42
 
5
43
  ### Dependency updates
package/Gallery.stories.svelte CHANGED
@@ -1,11 +1,17 @@
1
- <script context="module">
2
- import { Template, Story } from "@storybook/addon-svelte-csf";
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
3
  import Gallery from "./Index.svelte";
4
4
  import { allModes } from "../storybook/modes";
5
5
  import { within } from "@testing-library/dom";
6
- import { userEvent } from "@storybook/test";
6
+ import { userEvent } from "storybook/test";
7
+ import { wrapProps } from "../storybook/wrapProps";
7
8
 
8
- export const meta = {
9
+ const cheetah = "/cheetah.jpg";
10
+ const lion = "/lion.jpg";
11
+ const bus = "/bus.png";
12
+ const video_sample = "/video_sample.mp4";
13
+
14
+ const { Story } = defineMeta({
9
15
  title: "Components/Gallery",
10
16
  component: Gallery,
11
17
  argTypes: {
@@ -79,181 +85,243 @@
79
85
  }
80
86
  }
81
87
  }
82
- };
83
- </script>
88
+ });
84
89
 
85
- <Template let:args>
86
- <Gallery
87
- value={[
88
- {
89
- image: {
90
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
91
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
92
- orig_name: "cheetah_running.avif"
93
- },
94
- caption: "A fast cheetah"
95
- },
96
- {
97
- video: {
98
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/world.mp4",
99
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/world.mp4",
100
- orig_name: "world.mp4"
101
- },
102
- caption: "The world"
103
- },
104
- {
105
- image: {
106
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
107
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
108
- orig_name: "cheetah-002.jpg"
109
- }
110
- },
111
- {
112
- image: {
113
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
114
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
115
- orig_name: "cheetah-003.jpg"
116
- }
90
+ const galleryValue = [
91
+ {
92
+ image: {
93
+ path: cheetah,
94
+ url: cheetah,
95
+ orig_name: "cheetah.jpg"
117
96
  },
118
- {
119
- image: {
120
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp",
121
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp",
122
- orig_name: "cheetah3.webp"
123
- }
124
- },
125
- {
126
- image: {
127
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
128
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
129
- orig_name: "ghepardo-primo-piano.jpg"
130
- }
131
- },
132
- {
133
- image: {
134
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg",
135
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg",
136
- orig_name: "main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg"
137
- }
97
+ caption: "A fast cheetah"
98
+ },
99
+ {
100
+ video: {
101
+ path: video_sample,
102
+ url: video_sample,
103
+ orig_name: "video_sample.mp4"
138
104
  },
139
- {
140
- image: {
141
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg",
142
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg",
143
- orig_name: "TheCheethcat.jpg"
144
- }
105
+ caption: "Sample video"
106
+ },
107
+ {
108
+ image: {
109
+ path: lion,
110
+ url: lion,
111
+ orig_name: "lion.jpg"
112
+ }
113
+ },
114
+ {
115
+ image: {
116
+ path: bus,
117
+ url: bus,
118
+ orig_name: "bus.png"
119
+ }
120
+ },
121
+ {
122
+ image: {
123
+ path: cheetah,
124
+ url: cheetah,
125
+ orig_name: "cheetah.jpg"
126
+ }
127
+ },
128
+ {
129
+ image: {
130
+ path: lion,
131
+ url: lion,
132
+ orig_name: "lion.jpg"
145
133
  }
146
- ]}
147
- {...args}
148
- />
149
- </Template>
134
+ },
135
+ {
136
+ image: {
137
+ path: bus,
138
+ url: bus,
139
+ orig_name: "bus.png"
140
+ }
141
+ },
142
+ {
143
+ image: {
144
+ path: cheetah,
145
+ url: cheetah,
146
+ orig_name: "cheetah.jpg"
147
+ }
148
+ }
149
+ ];
150
+ </script>
150
151
 
151
152
  <Story
152
153
  name="Gallery with label"
153
- args={{ label: "My Cheetah Gallery", show_label: true }}
154
+ args={{
155
+ label: "My Cheetah Gallery",
156
+ show_label: true,
157
+ buttons: ["fullscreen", "download", "share"]
158
+ }}
154
159
  play={async ({ canvasElement }) => {
155
160
  const canvas = within(canvasElement);
156
-
157
161
  const image = canvas.getByLabelText("Thumbnail 1 of 8");
158
162
  await userEvent.click(image);
159
- const expand_btn = canvas.getByRole("button", {
160
- name: "Fullscreen"
161
- });
163
+ const expand_btn = canvas.getByRole("button", { name: "Fullscreen" });
162
164
  await userEvent.click(expand_btn);
163
165
  }}
164
- />
166
+ >
167
+ {#snippet template(args)}
168
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
169
+ {/snippet}
170
+ </Story>
171
+
165
172
  <Story
166
173
  name="Gallery without label"
167
- args={{ label: "My Cheetah Gallery", show_label: false }}
168
- />
174
+ args={{ label: "My Cheetah Gallery", show_label: false, buttons: [] }}
175
+ >
176
+ {#snippet template(args)}
177
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
178
+ {/snippet}
179
+ </Story>
180
+
169
181
  <Story
170
182
  name="Gallery with rows=3 and columns=3"
171
183
  args={{
172
184
  label: "My Cheetah Gallery",
173
185
  show_label: true,
174
186
  rows: 3,
175
- columns: 3
187
+ columns: 3,
188
+ buttons: []
176
189
  }}
177
- />
190
+ >
191
+ {#snippet template(args)}
192
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
193
+ {/snippet}
194
+ </Story>
195
+
178
196
  <Story
179
197
  name="Gallery with columns=4"
180
198
  args={{
181
199
  label: "My Cheetah Gallery",
182
200
  show_label: true,
183
- columns: 4
201
+ columns: 4,
202
+ buttons: []
184
203
  }}
185
- />
204
+ >
205
+ {#snippet template(args)}
206
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
207
+ {/snippet}
208
+ </Story>
209
+
186
210
  <Story
187
211
  name="Gallery with height=600"
188
- args={{
189
- label: "My Cheetah Gallery",
190
- height: 600
191
- }}
192
- />
212
+ args={{ label: "My Cheetah Gallery", height: 600, buttons: [] }}
213
+ >
214
+ {#snippet template(args)}
215
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
216
+ {/snippet}
217
+ </Story>
218
+
193
219
  <Story
194
220
  name="Gallery with allow_preview=false"
195
221
  args={{
196
222
  label: "My Cheetah Gallery",
197
223
  show_label: true,
198
- allow_preview: false
224
+ allow_preview: false,
225
+ buttons: []
199
226
  }}
200
- />
227
+ >
228
+ {#snippet template(args)}
229
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
230
+ {/snippet}
231
+ </Story>
232
+
201
233
  <Story
202
234
  name="Gallery with preview"
203
235
  args={{
204
236
  label: "My Cheetah Gallery",
205
237
  show_label: true,
206
- preview: true
238
+ preview: true,
239
+ buttons: []
207
240
  }}
208
- />
241
+ >
242
+ {#snippet template(args)}
243
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
244
+ {/snippet}
245
+ </Story>
246
+
209
247
  <Story
210
248
  name="Gallery with object_fit=scale-down"
211
249
  args={{
212
250
  label: "My Cheetah Gallery",
213
251
  show_label: true,
214
- object_fit: "scale-down"
252
+ object_fit: "scale-down",
253
+ buttons: []
215
254
  }}
216
- />
255
+ >
256
+ {#snippet template(args)}
257
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
258
+ {/snippet}
259
+ </Story>
260
+
217
261
  <Story
218
262
  name="Gallery with object_fit=contain"
219
263
  args={{
220
264
  label: "My Cheetah Gallery",
221
265
  show_label: true,
222
- object_fit: "contain"
266
+ object_fit: "contain",
267
+ buttons: []
223
268
  }}
224
- />
269
+ >
270
+ {#snippet template(args)}
271
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
272
+ {/snippet}
273
+ </Story>
274
+
225
275
  <Story
226
276
  name="Gallery with object_fit=cover"
227
277
  args={{
228
278
  label: "My Cheetah Gallery",
229
279
  show_label: true,
230
- object_fit: "cover"
280
+ object_fit: "cover",
281
+ buttons: []
231
282
  }}
232
- />
283
+ >
284
+ {#snippet template(args)}
285
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
286
+ {/snippet}
287
+ </Story>
288
+
233
289
  <Story
234
290
  name="Gallery with object_fit=none"
235
291
  args={{
236
292
  label: "My Cheetah Gallery",
237
293
  show_label: true,
238
- object_fit: "none"
294
+ object_fit: "none",
295
+ buttons: []
239
296
  }}
240
- />
297
+ >
298
+ {#snippet template(args)}
299
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
300
+ {/snippet}
301
+ </Story>
302
+
241
303
  <Story
242
304
  name="Gallery with object_fit=fill"
243
305
  args={{
244
306
  label: "My Cheetah Gallery",
245
307
  show_label: true,
246
- object_fit: "fill"
308
+ object_fit: "fill",
309
+ buttons: []
247
310
  }}
248
- />
311
+ >
312
+ {#snippet template(args)}
313
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
314
+ {/snippet}
315
+ </Story>
316
+
249
317
  <Story
250
318
  name="Gallery with share button"
251
- args={{
252
- label: "My Cheetah Gallery",
253
- show_label: true,
254
- show_share_button: true
255
- }}
256
- />
319
+ args={{ label: "My Cheetah Gallery", show_label: true, buttons: ["share"] }}
320
+ >
321
+ {#snippet template(args)}
322
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
323
+ {/snippet}
324
+ </Story>
257
325
 
258
326
  <Story
259
327
  name="Gallery with overflow of images"
@@ -262,9 +330,15 @@
262
330
  show_label: true,
263
331
  rows: 2,
264
332
  columns: 2,
265
- height: 400
333
+ height: 400,
334
+ buttons: []
266
335
  }}
267
- />
336
+ >
337
+ {#snippet template(args)}
338
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
339
+ {/snippet}
340
+ </Story>
341
+
268
342
  <Story
269
343
  name="Gallery with overflow of images and short height"
270
344
  args={{
@@ -272,33 +346,53 @@
272
346
  show_label: true,
273
347
  rows: 2,
274
348
  columns: 2,
275
- height: 200
349
+ height: 200,
350
+ buttons: []
276
351
  }}
277
- />
352
+ >
353
+ {#snippet template(args)}
354
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
355
+ {/snippet}
356
+ </Story>
357
+
278
358
  <Story
279
359
  name="Gallery with download button"
280
360
  args={{
281
361
  label: "My Cheetah Gallery",
282
362
  rows: 2,
283
363
  height: 400,
284
- show_download_button: true
364
+ buttons: ["download"]
285
365
  }}
286
- />
366
+ >
367
+ {#snippet template(args)}
368
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
369
+ {/snippet}
370
+ </Story>
371
+
287
372
  <Story
288
373
  name="Gallery with fit_columns false"
289
374
  args={{
290
375
  label: "My Cheetah Gallery",
291
376
  columns: 10,
292
- show_download_button: true,
377
+ buttons: ["download"],
293
378
  fit_columns: false
294
379
  }}
295
- />
380
+ >
381
+ {#snippet template(args)}
382
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
383
+ {/snippet}
384
+ </Story>
385
+
296
386
  <Story
297
387
  name="Gallery with fit_columns true"
298
388
  args={{
299
389
  label: "My Cheetah Gallery",
300
390
  columns: 10,
301
- show_download_button: true,
391
+ buttons: ["download"],
302
392
  fit_columns: true
303
393
  }}
304
- />
394
+ >
395
+ {#snippet template(args)}
396
+ <Gallery {...wrapProps({ value: galleryValue, ...args })} />
397
+ {/snippet}
398
+ </Story>
package/Gallery.test.ts CHANGED
@@ -31,6 +31,7 @@ describe("Gallery", () => {
31
31
  loading_status: loading_status,
32
32
  preview: true,
33
33
  buttons: ["share", "download", "fullscreen"],
34
+ selected_index: 0,
34
35
  value: [
35
36
  {
36
37
  image: {
@@ -55,6 +56,7 @@ describe("Gallery", () => {
55
56
  loading_status: loading_status,
56
57
  preview: true,
57
58
  buttons: ["share", "download", "fullscreen"],
59
+ selected_index: 0,
58
60
  value: [
59
61
  {
60
62
  video: {
@@ -112,6 +114,7 @@ describe("Gallery", () => {
112
114
  loading_status: loading_status,
113
115
  preview: true,
114
116
  buttons: ["share", "download", "fullscreen"],
117
+ selected_index: 0,
115
118
  value: [
116
119
  {
117
120
  image: {