@gradio/gallery 0.4.17 → 0.6.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 (4) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/Index.svelte +46 -26
  3. package/package.json +9 -8
  4. package/shared/Gallery.svelte +16 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @gradio/gallery
2
2
 
3
+ ## 0.6.0
4
+
5
+ ### Features
6
+
7
+ - [#7148](https://github.com/gradio-app/gradio/pull/7148) [`c60ad4d`](https://github.com/gradio-app/gradio/commit/c60ad4d34ab5b56a89bf6796822977e51e7a4a32) - Use Gallery as input component. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
8
+
9
+ ## 0.5.0
10
+
11
+ ### Features
12
+
13
+ - [#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)!
14
+
3
15
  ## 0.4.17
4
16
 
5
17
  ### Fixes
package/Index.svelte CHANGED
@@ -4,12 +4,13 @@
4
4
 
5
5
  <script lang="ts">
6
6
  import type { Gradio, ShareData, SelectData } from "@gradio/utils";
7
- import { Block } from "@gradio/atoms";
7
+ import { Block, UploadText } from "@gradio/atoms";
8
8
  import Gallery from "./shared/Gallery.svelte";
9
9
  import type { LoadingStatus } from "@gradio/statustracker";
10
10
  import { StatusTracker } from "@gradio/statustracker";
11
11
  import type { FileData } from "@gradio/client";
12
12
  import { createEventDispatcher } from "svelte";
13
+ import { BaseFileUpload } from "@gradio/file";
13
14
 
14
15
  export let loading_status: LoadingStatus;
15
16
  export let show_label: boolean;
@@ -19,10 +20,7 @@
19
20
  export let elem_id = "";
20
21
  export let elem_classes: string[] = [];
21
22
  export let visible = true;
22
- export let value:
23
- | { image: FileData; caption: string | null }[]
24
- | null
25
- | null = null;
23
+ export let value: { image: FileData; caption: string | null }[] | null = null;
26
24
  export let container = true;
27
25
  export let scale: number | null = null;
28
26
  export let min_width: number | undefined = undefined;
@@ -35,9 +33,11 @@
35
33
  export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
36
34
  "cover";
37
35
  export let show_share_button = false;
36
+ export let interactive: boolean;
38
37
  export let show_download_button = false;
39
38
  export let gradio: Gradio<{
40
39
  change: typeof value;
40
+ upload: typeof value;
41
41
  select: SelectData;
42
42
  share: ShareData;
43
43
  error: string;
@@ -46,6 +46,7 @@
46
46
 
47
47
  const dispatch = createEventDispatcher();
48
48
 
49
+ $: no_value = Array.isArray(value) ? value.length === 0 : !value;
49
50
  $: selected_index, dispatch("prop_change", { selected_index });
50
51
  </script>
51
52
 
@@ -66,25 +67,44 @@
66
67
  i18n={gradio.i18n}
67
68
  {...loading_status}
68
69
  />
69
- <Gallery
70
- on:change={() => gradio.dispatch("change", value)}
71
- on:select={(e) => gradio.dispatch("select", e.detail)}
72
- on:share={(e) => gradio.dispatch("share", e.detail)}
73
- on:error={(e) => gradio.dispatch("error", e.detail)}
74
- {label}
75
- {value}
76
- {show_label}
77
- {root}
78
- {proxy_url}
79
- {columns}
80
- {rows}
81
- {height}
82
- {preview}
83
- {object_fit}
84
- {allow_preview}
85
- bind:selected_index
86
- {show_share_button}
87
- {show_download_button}
88
- i18n={gradio.i18n}
89
- />
70
+ {#if interactive && no_value}
71
+ <BaseFileUpload
72
+ value={null}
73
+ {root}
74
+ {label}
75
+ file_count={"multiple"}
76
+ file_types={["image"]}
77
+ i18n={gradio.i18n}
78
+ on:upload={(e) => {
79
+ const files = Array.isArray(e.detail) ? e.detail : [e.detail];
80
+ value = files.map((x) => ({ image: x, caption: null }));
81
+ gradio.dispatch("upload", value);
82
+ }}
83
+ >
84
+ <UploadText i18n={gradio.i18n} type="gallery" />
85
+ </BaseFileUpload>
86
+ {:else}
87
+ <Gallery
88
+ on:change={() => gradio.dispatch("change", value)}
89
+ on:select={(e) => gradio.dispatch("select", e.detail)}
90
+ on:share={(e) => gradio.dispatch("share", e.detail)}
91
+ on:error={(e) => gradio.dispatch("error", e.detail)}
92
+ {label}
93
+ {show_label}
94
+ {root}
95
+ {proxy_url}
96
+ {columns}
97
+ {rows}
98
+ {height}
99
+ {preview}
100
+ {object_fit}
101
+ {interactive}
102
+ {allow_preview}
103
+ bind:selected_index
104
+ bind:value
105
+ {show_share_button}
106
+ {show_download_button}
107
+ i18n={gradio.i18n}
108
+ />
109
+ {/if}
90
110
  </Block>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/gallery",
3
- "version": "0.4.17",
3
+ "version": "0.6.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -8,14 +8,15 @@
8
8
  "private": false,
9
9
  "dependencies": {
10
10
  "dequal": "^2.0.2",
11
- "@gradio/atoms": "^0.4.1",
11
+ "@gradio/atoms": "^0.5.0",
12
12
  "@gradio/icons": "^0.3.2",
13
- "@gradio/image": "^0.6.1",
14
- "@gradio/statustracker": "^0.4.3",
15
- "@gradio/utils": "^0.2.0",
16
- "@gradio/client": "^0.10.0",
17
- "@gradio/wasm": "^0.5.0",
18
- "@gradio/upload": "^0.6.0"
13
+ "@gradio/image": "^0.7.1",
14
+ "@gradio/upload": "^0.7.0",
15
+ "@gradio/utils": "^0.2.1",
16
+ "@gradio/client": "^0.10.1",
17
+ "@gradio/wasm": "^0.5.1",
18
+ "@gradio/statustracker": "^0.4.4",
19
+ "@gradio/file": "^0.4.8"
19
20
  },
20
21
  "main": "./Index.svelte",
21
22
  "main_changeset": true,
package/shared/Gallery.svelte CHANGED
@@ -32,6 +32,7 @@
32
32
  export let show_download_button = false;
33
33
  export let i18n: I18nFormatter;
34
34
  export let selected_index: number | null = null;
35
+ export let interactive: boolean;
35
36
 
36
37
  const dispatch = createEventDispatcher<{
37
38
  change: undefined;
@@ -290,6 +291,15 @@
290
291
  style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
291
292
  class:pt-6={show_label}
292
293
  >
294
+ {#if interactive}
295
+ <div class="icon-button">
296
+ <ModifyUpload
297
+ {i18n}
298
+ absolute={false}
299
+ on:clear={() => (value = null)}
300
+ />
301
+ </div>
302
+ {/if}
293
303
  {#if show_share_button}
294
304
  <div class="icon-button">
295
305
  <ShareButton
@@ -357,12 +367,16 @@
357
367
  width: 100%;
358
368
  display: flex;
359
369
  }
360
- .preview :global(img) {
370
+ .image-button :global(img) {
361
371
  width: var(--size-full);
362
372
  height: var(--size-full);
363
373
  object-fit: contain;
364
374
  }
365
-
375
+ .thumbnails :global(img) {
376
+ object-fit: cover;
377
+ width: var(--size-full);
378
+ height: var(--size-full);
379
+ }
366
380
  .preview :global(img.with-caption) {
367
381
  height: var(--size-full);
368
382
  }