@gradio/gallery 0.13.10 → 0.14.1

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 (7) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/Index.svelte +27 -6
  3. package/dist/Index.svelte +20 -6
  4. package/dist/shared/Gallery.svelte +16 -27
  5. package/dist/shared/Gallery.svelte.d.ts +1 -0
  6. package/package.json +10 -10
  7. package/shared/Gallery.svelte +16 -28
package/CHANGELOG.md CHANGED
@@ -1,5 +1,38 @@
1
1
  # @gradio/gallery
2
2
 
3
+ ## 0.14.1
4
+
5
+ ### Fixes
6
+
7
+ - [#10269](https://github.com/gradio-app/gradio/pull/10269) [`890eaa3`](https://github.com/gradio-app/gradio/commit/890eaa3a9e53dab5bcb16c5d017ae0470109b8fb) - Allow displaying SVG images securely in `gr.Image` and `gr.Gallery` components. Thanks @abidlabs!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/atoms@0.13.0
12
+ - @gradio/utils@0.10.0
13
+ - @gradio/upload@0.14.4
14
+ - @gradio/client@1.9.0
15
+ - @gradio/icons@0.9.0
16
+ - @gradio/statustracker@0.10.0
17
+ - @gradio/image@0.20.0
18
+ - @gradio/video@0.13.0
19
+ - @gradio/file@0.12.0
20
+
21
+ ## 0.14.0
22
+
23
+ ### Features
24
+
25
+ - [#10098](https://github.com/gradio-app/gradio/pull/10098) [`9a6ce6f`](https://github.com/gradio-app/gradio/commit/9a6ce6f6b089d94c06da0b8620f28967f39f8383) - Refactor full screen logic to be reusable. Thanks @hannahblair!
26
+
27
+ ### Dependency updates
28
+
29
+ - @gradio/video@0.12.1
30
+ - @gradio/statustracker@0.9.7
31
+ - @gradio/upload@0.14.3
32
+ - @gradio/atoms@0.12.0
33
+ - @gradio/image@0.19.0
34
+ - @gradio/file@0.11.3
35
+
3
36
  ## 0.13.10
4
37
 
5
38
  ### Dependency updates
package/Index.svelte CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  <script lang="ts">
6
6
  import type { GalleryImage, GalleryVideo } from "./types";
7
+ import type { FileData } from "@gradio/client";
7
8
  import type { Gradio, ShareData, SelectData } from "@gradio/utils";
8
9
  import { Block, UploadText } from "@gradio/atoms";
9
10
  import Gallery from "./shared/Gallery.svelte";
@@ -52,6 +53,30 @@
52
53
 
53
54
  $: no_value = value === null ? true : value.length === 0;
54
55
  $: selected_index, dispatch("prop_change", { selected_index });
56
+
57
+ async function process_upload_files(
58
+ files: FileData[]
59
+ ): Promise<GalleryData[]> {
60
+ const processed_files = await Promise.all(
61
+ files.map(async (x) => {
62
+ if (x.path?.toLowerCase().endsWith(".svg") && x.url) {
63
+ const response = await fetch(x.url);
64
+ const svgContent = await response.text();
65
+ return {
66
+ ...x,
67
+ url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`
68
+ };
69
+ }
70
+ return x;
71
+ })
72
+ );
73
+
74
+ return processed_files.map((x) =>
75
+ x.mime_type?.includes("video")
76
+ ? { video: x, caption: null }
77
+ : { image: x, caption: null }
78
+ );
79
+ }
55
80
  </script>
56
81
 
57
82
  <Block
@@ -83,13 +108,9 @@
83
108
  i18n={gradio.i18n}
84
109
  upload={(...args) => gradio.client.upload(...args)}
85
110
  stream_handler={(...args) => gradio.client.stream(...args)}
86
- on:upload={(e) => {
111
+ on:upload={async (e) => {
87
112
  const files = Array.isArray(e.detail) ? e.detail : [e.detail];
88
- value = files.map((x) =>
89
- x.mime_type?.includes("video")
90
- ? { video: x, caption: null }
91
- : { image: x, caption: null }
92
- );
113
+ value = await process_upload_files(files);
93
114
  gradio.dispatch("upload", value);
94
115
  }}
95
116
  on:error={({ detail }) => {
package/dist/Index.svelte CHANGED
@@ -35,6 +35,24 @@ $:
35
35
  no_value = value === null ? true : value.length === 0;
36
36
  $:
37
37
  selected_index, dispatch("prop_change", { selected_index });
38
+ async function process_upload_files(files) {
39
+ const processed_files = await Promise.all(
40
+ files.map(async (x) => {
41
+ if (x.path?.toLowerCase().endsWith(".svg") && x.url) {
42
+ const response = await fetch(x.url);
43
+ const svgContent = await response.text();
44
+ return {
45
+ ...x,
46
+ url: `data:image/svg+xml,${encodeURIComponent(svgContent)}`
47
+ };
48
+ }
49
+ return x;
50
+ })
51
+ );
52
+ return processed_files.map(
53
+ (x) => x.mime_type?.includes("video") ? { video: x, caption: null } : { image: x, caption: null }
54
+ );
55
+ }
38
56
  </script>
39
57
 
40
58
  <Block
@@ -66,13 +84,9 @@ $:
66
84
  i18n={gradio.i18n}
67
85
  upload={(...args) => gradio.client.upload(...args)}
68
86
  stream_handler={(...args) => gradio.client.stream(...args)}
69
- on:upload={(e) => {
87
+ on:upload={async (e) => {
70
88
  const files = Array.isArray(e.detail) ? e.detail : [e.detail];
71
- value = files.map((x) =>
72
- x.mime_type?.includes("video")
73
- ? { video: x, caption: null }
74
- : { image: x, caption: null }
75
- );
89
+ value = await process_upload_files(files);
76
90
  gradio.dispatch("upload", value);
77
91
  }}
78
92
  on:error={({ detail }) => {
package/dist/shared/Gallery.svelte CHANGED
@@ -1,4 +1,11 @@
1
- <script>import { BlockLabel, Empty, ShareButton } from "@gradio/atoms";
1
+ <script>import {
2
+ BlockLabel,
3
+ Empty,
4
+ ShareButton,
5
+ IconButton,
6
+ IconButtonWrapper,
7
+ FullscreenButton
8
+ } from "@gradio/atoms";
2
9
  import { ModifyUpload } from "@gradio/upload";
3
10
  import { Image } from "@gradio/image/shared";
4
11
  import { Video } from "@gradio/video/shared";
@@ -15,7 +22,6 @@ import {
15
22
  } from "@gradio/icons";
16
23
  import { FileData } from "@gradio/client";
17
24
  import { format_gallery_for_sharing } from "./utils";
18
- import { IconButton, IconButtonWrapper } from "@gradio/atoms";
19
25
  export let show_label = true;
20
26
  export let label;
21
27
  export let value = null;
@@ -33,8 +39,9 @@ export let interactive;
33
39
  export let _fetch;
34
40
  export let mode = "normal";
35
41
  export let show_fullscreen_button = true;
42
+ export let display_icon_button_wrapper_top_corner = false;
36
43
  let is_full_screen = false;
37
- let gallery_container;
44
+ let image_container;
38
45
  const dispatch = createEventDispatcher();
39
46
  let was_reset = true;
40
47
  $:
@@ -163,13 +170,6 @@ onMount(() => {
163
170
  is_full_screen = !!document.fullscreenElement;
164
171
  });
165
172
  });
166
- const toggle_full_screen = async () => {
167
- if (!is_full_screen) {
168
- await gallery_container.requestFullscreen();
169
- } else {
170
- await document.exitFullscreen();
171
- }
172
- };
173
173
  </script>
174
174
 
175
175
  <svelte:window bind:innerHeight={window_height} />
@@ -180,14 +180,16 @@ const toggle_full_screen = async () => {
180
180
  {#if value == null || resolved_value == null || resolved_value.length === 0}
181
181
  <Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
182
182
  {:else}
183
- <div class="gallery-container" bind:this={gallery_container}>
183
+ <div class="gallery-container" bind:this={image_container}>
184
184
  {#if selected_media && allow_preview}
185
185
  <button
186
186
  on:keydown={on_keydown}
187
187
  class="preview"
188
188
  class:minimal={mode === "minimal"}
189
189
  >
190
- <IconButtonWrapper>
190
+ <IconButtonWrapper
191
+ display_top_corner={display_icon_button_wrapper_top_corner}
192
+ >
191
193
  {#if show_download_button}
192
194
  <IconButton
193
195
  Icon={Download}
@@ -208,23 +210,10 @@ const toggle_full_screen = async () => {
208
210
  />
209
211
  {/if}
210
212
 
211
- {#if show_fullscreen_button && !is_full_screen}
212
- <IconButton
213
- Icon={is_full_screen ? Minimize : Maximize}
214
- label={is_full_screen
215
- ? "Exit full screen"
216
- : "View in full screen"}
217
- on:click={toggle_full_screen}
218
- />
213
+ {#if show_fullscreen_button}
214
+ <FullscreenButton container={image_container} />
219
215
  {/if}
220
216
 
221
- {#if show_fullscreen_button && is_full_screen}
222
- <IconButton
223
- Icon={Minimize}
224
- label="Exit full screen"
225
- on:click={toggle_full_screen}
226
- />
227
- {/if}
228
217
  {#if show_share_button}
229
218
  <div class="icon-button">
230
219
  <ShareButton
package/dist/shared/Gallery.svelte.d.ts CHANGED
@@ -21,6 +21,7 @@ declare const __propDef: {
21
21
  _fetch: typeof fetch;
22
22
  mode?: ("normal" | "minimal") | undefined;
23
23
  show_fullscreen_button?: boolean | undefined;
24
+ display_icon_button_wrapper_top_corner?: boolean | undefined;
24
25
  };
25
26
  events: {
26
27
  share: CustomEvent<import("@gradio/utils").ShareData>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/gallery",
3
- "version": "0.13.10",
3
+ "version": "0.14.1",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -8,15 +8,15 @@
8
8
  "private": false,
9
9
  "dependencies": {
10
10
  "dequal": "^2.0.2",
11
- "@gradio/atoms": "^0.11.2",
12
- "@gradio/client": "^1.8.0",
13
- "@gradio/icons": "^0.8.1",
14
- "@gradio/image": "^0.18.0",
15
- "@gradio/statustracker": "^0.9.6",
16
- "@gradio/upload": "^0.14.2",
17
- "@gradio/utils": "^0.9.0",
18
- "@gradio/file": "^0.11.2",
19
- "@gradio/video": "^0.12.0"
11
+ "@gradio/client": "^1.9.0",
12
+ "@gradio/atoms": "^0.13.0",
13
+ "@gradio/icons": "^0.9.0",
14
+ "@gradio/image": "^0.20.0",
15
+ "@gradio/statustracker": "^0.10.0",
16
+ "@gradio/utils": "^0.10.0",
17
+ "@gradio/video": "^0.13.0",
18
+ "@gradio/upload": "^0.14.4",
19
+ "@gradio/file": "^0.12.0"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@gradio/preview": "^0.13.0"
package/shared/Gallery.svelte CHANGED
@@ -1,5 +1,12 @@
1
1
  <script lang="ts">
2
- import { BlockLabel, Empty, ShareButton } from "@gradio/atoms";
2
+ import {
3
+ BlockLabel,
4
+ Empty,
5
+ ShareButton,
6
+ IconButton,
7
+ IconButtonWrapper,
8
+ FullscreenButton
9
+ } from "@gradio/atoms";
3
10
  import { ModifyUpload } from "@gradio/upload";
4
11
  import type { SelectData } from "@gradio/utils";
5
12
  import { Image } from "@gradio/image/shared";
@@ -19,7 +26,6 @@
19
26
  } from "@gradio/icons";
20
27
  import { FileData } from "@gradio/client";
21
28
  import { format_gallery_for_sharing } from "./utils";
22
- import { IconButton, IconButtonWrapper } from "@gradio/atoms";
23
29
  import type { I18nFormatter } from "@gradio/utils";
24
30
 
25
31
  type GalleryData = GalleryImage | GalleryVideo;
@@ -42,9 +48,10 @@
42
48
  export let _fetch: typeof fetch;
43
49
  export let mode: "normal" | "minimal" = "normal";
44
50
  export let show_fullscreen_button = true;
51
+ export let display_icon_button_wrapper_top_corner = false;
45
52
 
46
53
  let is_full_screen = false;
47
- let gallery_container: HTMLElement;
54
+ let image_container: HTMLElement;
48
55
 
49
56
  const dispatch = createEventDispatcher<{
50
57
  change: undefined;
@@ -221,14 +228,6 @@
221
228
  is_full_screen = !!document.fullscreenElement;
222
229
  });
223
230
  });
224
-
225
- const toggle_full_screen = async (): Promise<void> => {
226
- if (!is_full_screen) {
227
- await gallery_container.requestFullscreen();
228
- } else {
229
- await document.exitFullscreen();
230
- }
231
- };
232
231
  </script>
233
232
 
234
233
  <svelte:window bind:innerHeight={window_height} />
@@ -239,14 +238,16 @@
239
238
  {#if value == null || resolved_value == null || resolved_value.length === 0}
240
239
  <Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
241
240
  {:else}
242
- <div class="gallery-container" bind:this={gallery_container}>
241
+ <div class="gallery-container" bind:this={image_container}>
243
242
  {#if selected_media && allow_preview}
244
243
  <button
245
244
  on:keydown={on_keydown}
246
245
  class="preview"
247
246
  class:minimal={mode === "minimal"}
248
247
  >
249
- <IconButtonWrapper>
248
+ <IconButtonWrapper
249
+ display_top_corner={display_icon_button_wrapper_top_corner}
250
+ >
250
251
  {#if show_download_button}
251
252
  <IconButton
252
253
  Icon={Download}
@@ -267,23 +268,10 @@
267
268
  />
268
269
  {/if}
269
270
 
270
- {#if show_fullscreen_button && !is_full_screen}
271
- <IconButton
272
- Icon={is_full_screen ? Minimize : Maximize}
273
- label={is_full_screen
274
- ? "Exit full screen"
275
- : "View in full screen"}
276
- on:click={toggle_full_screen}
277
- />
271
+ {#if show_fullscreen_button}
272
+ <FullscreenButton container={image_container} />
278
273
  {/if}
279
274
 
280
- {#if show_fullscreen_button && is_full_screen}
281
- <IconButton
282
- Icon={Minimize}
283
- label="Exit full screen"
284
- on:click={toggle_full_screen}
285
- />
286
- {/if}
287
275
  {#if show_share_button}
288
276
  <div class="icon-button">
289
277
  <ShareButton