@gradio/gallery 0.5.0 → 0.6.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 (5) hide show
  1. package/CHANGELOG.md +23 -3
  2. package/Gallery.stories.svelte +70 -61
  3. package/Index.svelte +46 -26
  4. package/package.json +9 -8
  5. package/shared/Gallery.svelte +10 -0
package/CHANGELOG.md CHANGED
@@ -1,16 +1,36 @@
1
1
  # @gradio/gallery
2
2
 
3
+ ## 0.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`572e360`](https://github.com/gradio-app/gradio/commit/572e360fff4a03c335b86e1a7517a44cb6af2bcd), [`733ca26`](https://github.com/gradio-app/gradio/commit/733ca266bb1ba9049ed7309b8f0614199682e173), [`68a54a7`](https://github.com/gradio-app/gradio/commit/68a54a7a310d8d7072fdae930bf1cfdf12c45a7f), [`2e6672c`](https://github.com/gradio-app/gradio/commit/2e6672c815e39fd6af78353e66661100b9102cd4), [`fdd1521`](https://github.com/gradio-app/gradio/commit/fdd15213c24b9cbc58bbc1b6beb4af7c18f48557), [`200e251`](https://github.com/gradio-app/gradio/commit/200e2518e4d449aa82819a8d119e912bd1d95c15), [`c3e61e4`](https://github.com/gradio-app/gradio/commit/c3e61e4f70696a71aede67b65d28447eb67daf16), [`cae05c0`](https://github.com/gradio-app/gradio/commit/cae05c05ecde56c4d92c6b5ed8d13353505cbd14), [`05d8a3c`](https://github.com/gradio-app/gradio/commit/05d8a3c8030b733bd47250f5db6f89f230f9a707), [`8dd6f4b`](https://github.com/gradio-app/gradio/commit/8dd6f4bc1901792f05cd59e86df7b1dbab692739)]:
8
+ - @gradio/upload@0.7.1
9
+ - @gradio/image@0.8.0
10
+ - @gradio/client@0.11.0
11
+ - @gradio/utils@0.2.2
12
+ - @gradio/file@0.4.9
13
+ - @gradio/wasm@0.6.0
14
+ - @gradio/atoms@0.5.1
15
+ - @gradio/statustracker@0.4.5
16
+
17
+ ## 0.6.0
18
+
19
+ ### Features
20
+
21
+ - [#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)!
22
+
3
23
  ## 0.5.0
4
24
 
5
25
  ### Features
6
26
 
7
- - [#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)!
27
+ - [#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)!
8
28
 
9
29
  ## 0.4.17
10
30
 
11
31
  ### Fixes
12
32
 
13
- - [#6967](https://github.com/gradio-app/gradio/pull/6967) [`5e00162`](https://github.com/gradio-app/gradio/commit/5e0016267f1d683e2daab82ee4a33d2f09513a34) - Make <Gallery /> Wasm-compatible. Thanks [@whitphx](https://github.com/whitphx)!
33
+ - [#6967](https://github.com/gradio-app/gradio/pull/6967) [`5e00162`](https://github.com/gradio-app/gradio/commit/5e0016267f1d683e2daab82ee4a33d2f09513a34) - Make <Gallery /> Wasm-compatible. Thanks [@whitphx](https://github.com/whitphx)!
14
34
 
15
35
  ## 0.4.16
16
36
 
@@ -305,4 +325,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
305
325
 
306
326
  ### Features
307
327
 
308
- - [#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)!
328
+ - [#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 CHANGED
@@ -1,68 +1,77 @@
1
- <script>
2
- import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
1
+ <script context="module">
2
+ import { Template, Story } from "@storybook/addon-svelte-csf";
3
3
  import Gallery from "./Index.svelte";
4
- </script>
4
+ import { allModes } from "../storybook/modes";
5
5
 
6
- <Meta
7
- title="Components/Gallery"
8
- component={Gallery}
9
- argTypes={{
10
- label: {
11
- control: "text",
12
- description: "The gallery label",
13
- name: "label",
14
- value: "Gradio Button"
15
- },
16
- show_label: {
17
- options: [true, false],
18
- description: "Whether to show the label",
19
- control: { type: "boolean" },
20
- defaultValue: true
21
- },
22
- columns: {
23
- options: [1, 2, 3, 4],
24
- description: "The number of columns to show in grid",
25
- control: { type: "select" },
26
- defaultValue: 2
27
- },
28
- rows: {
29
- options: [1, 2, 3, 4],
30
- description: "The number of rows to show in grid",
31
- control: { type: "select" },
32
- defaultValue: 2
33
- },
34
- height: {
35
- options: ["auto", 500, 600],
36
- description: "The height of the grid",
37
- control: { type: "select" },
38
- defaultValue: "auto"
39
- },
40
- preview: {
41
- options: [true, false],
42
- description: "Whether to start the gallery in preview mode",
43
- control: { type: "boolean" },
44
- defaultValue: true
45
- },
46
- allow_preview: {
47
- options: [true, false],
48
- description: "Whether to allow a preview mode in the gallery",
49
- control: { type: "boolean" },
50
- defaultValue: true
51
- },
52
- object_fit: {
53
- options: ["contain", "cover", "fill", "none", "scale-down"],
54
- description: "How to display each indivial image in the grid",
55
- control: { type: "select" },
56
- defaultValue: "contain"
6
+ export const meta = {
7
+ title: "Components/Gallery",
8
+ component: Gallery,
9
+ argTypes: {
10
+ label: {
11
+ control: "text",
12
+ description: "The gallery label",
13
+ name: "label",
14
+ value: "Gradio Button"
15
+ },
16
+ show_label: {
17
+ options: [true, false],
18
+ description: "Whether to show the label",
19
+ control: { type: "boolean" },
20
+ defaultValue: true
21
+ },
22
+ columns: {
23
+ options: [1, 2, 3, 4],
24
+ description: "The number of columns to show in grid",
25
+ control: { type: "select" },
26
+ defaultValue: 2
27
+ },
28
+ rows: {
29
+ options: [1, 2, 3, 4],
30
+ description: "The number of rows to show in grid",
31
+ control: { type: "select" },
32
+ defaultValue: 2
33
+ },
34
+ height: {
35
+ options: ["auto", 500, 600],
36
+ description: "The height of the grid",
37
+ control: { type: "select" },
38
+ defaultValue: "auto"
39
+ },
40
+ preview: {
41
+ options: [true, false],
42
+ description: "Whether to start the gallery in preview mode",
43
+ control: { type: "boolean" },
44
+ defaultValue: true
45
+ },
46
+ allow_preview: {
47
+ options: [true, false],
48
+ description: "Whether to allow a preview mode in the gallery",
49
+ control: { type: "boolean" },
50
+ defaultValue: true
51
+ },
52
+ object_fit: {
53
+ options: ["contain", "cover", "fill", "none", "scale-down"],
54
+ description: "How to display each indivial image in the grid",
55
+ control: { type: "select" },
56
+ defaultValue: "contain"
57
+ },
58
+ show_share_button: {
59
+ options: [true, false],
60
+ description: "Whether to show the share button in the gallery",
61
+ control: { type: "boolean" },
62
+ defaultValue: false
63
+ }
57
64
  },
58
- show_share_button: {
59
- options: [true, false],
60
- description: "Whether to show the share button in the gallery",
61
- control: { type: "boolean" },
62
- defaultValue: false
65
+ parameters: {
66
+ chromatic: {
67
+ modes: {
68
+ desktop: allModes["desktop"],
69
+ mobile: allModes["mobile"]
70
+ }
71
+ }
63
72
  }
64
- }}
65
- />
73
+ };
74
+ </script>
66
75
 
67
76
  <Template let:args>
68
77
  <Gallery
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.5.0",
3
+ "version": "0.6.1",
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",
12
- "@gradio/client": "^0.10.1",
11
+ "@gradio/atoms": "^0.5.1",
12
+ "@gradio/client": "^0.11.0",
13
+ "@gradio/image": "^0.8.0",
14
+ "@gradio/statustracker": "^0.4.5",
13
15
  "@gradio/icons": "^0.3.2",
14
- "@gradio/statustracker": "^0.4.3",
15
- "@gradio/image": "^0.7.0",
16
- "@gradio/upload": "^0.6.1",
17
- "@gradio/utils": "^0.2.0",
18
- "@gradio/wasm": "^0.5.0"
16
+ "@gradio/upload": "^0.7.1",
17
+ "@gradio/utils": "^0.2.2",
18
+ "@gradio/file": "^0.4.9",
19
+ "@gradio/wasm": "^0.6.0"
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