@gradio/gallery 0.8.8 → 0.10.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.
- package/CHANGELOG.md +66 -0
- package/Index.svelte +11 -0
- package/package.json +11 -8
- package/shared/Gallery.svelte +5 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,71 @@
|
|
|
1
1
|
# @gradio/gallery
|
|
2
2
|
|
|
3
|
+
## 0.10.0
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- [#8121](https://github.com/gradio-app/gradio/pull/8121) [`f5b710c`](https://github.com/gradio-app/gradio/commit/f5b710c919b0ce604ea955f0d5f4faa91095ca4a) - chore(deps): update dependency eslint to v9. Thanks @renovate!
|
|
8
|
+
- [#8209](https://github.com/gradio-app/gradio/pull/8209) [`b9afe93`](https://github.com/gradio-app/gradio/commit/b9afe93915401df5bd6737c89395c2477acfa585) - Rename `eventSource_Factory` and `fetch_implementation`. Thanks @hannahblair!
|
|
9
|
+
|
|
10
|
+
### Fixes
|
|
11
|
+
|
|
12
|
+
- [#8179](https://github.com/gradio-app/gradio/pull/8179) [`6a218b4`](https://github.com/gradio-app/gradio/commit/6a218b4148095aaa0c58d8c20973ba01c8764fc2) - rework upload to be a class method + pass client into each component. Thanks @pngwn!
|
|
13
|
+
|
|
14
|
+
### Dependency updates
|
|
15
|
+
|
|
16
|
+
- @gradio/atoms@0.7.2
|
|
17
|
+
- @gradio/client@0.18.0
|
|
18
|
+
- @gradio/upload@0.10.0
|
|
19
|
+
- @gradio/utils@0.4.1
|
|
20
|
+
- @gradio/statustracker@0.5.1
|
|
21
|
+
- @gradio/image@0.11.0
|
|
22
|
+
- @gradio/file@0.7.0
|
|
23
|
+
|
|
24
|
+
## 0.9.0
|
|
25
|
+
|
|
26
|
+
### Highlights
|
|
27
|
+
|
|
28
|
+
#### Setting File Upload Limits ([#7909](https://github.com/gradio-app/gradio/pull/7909) [`2afca65`](https://github.com/gradio-app/gradio/commit/2afca6541912b37dc84f447c7ad4af21607d7c72))
|
|
29
|
+
|
|
30
|
+
We have added a `max_file_size` size parameter to `launch()` that limits to size of files uploaded to the server. This limit applies to each individual file. This parameter can be specified as a string or an integer (corresponding to the size in bytes).
|
|
31
|
+
|
|
32
|
+
The following code snippet sets a max file size of 5 megabytes.
|
|
33
|
+
|
|
34
|
+
```python
|
|
35
|
+
import gradio as gr
|
|
36
|
+
|
|
37
|
+
demo = gr.Interface(lambda x: x, "image", "image")
|
|
38
|
+
|
|
39
|
+
demo.launch(max_file_size="5mb")
|
|
40
|
+
# or
|
|
41
|
+
demo.launch(max_file_size=5 * gr.FileSize.MB)
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
#### Error states can now be cleared
|
|
48
|
+
|
|
49
|
+
When a component encounters an error, the error state shown in the UI can now be cleared by clicking on the `x` icon in the top right of the component. This applies to all types of errors, whether it's raised in the UI or the server.
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
Thanks @freddyaboulton!
|
|
54
|
+
|
|
55
|
+
### Fixes
|
|
56
|
+
|
|
57
|
+
- [#8066](https://github.com/gradio-app/gradio/pull/8066) [`624f9b9`](https://github.com/gradio-app/gradio/commit/624f9b9477f74a581a6c14119234f9efdfcda398) - make gradio dev tools a local dependency rather than bundling. Thanks @pngwn!
|
|
58
|
+
|
|
59
|
+
### Dependency updates
|
|
60
|
+
|
|
61
|
+
- @gradio/atoms@0.7.1
|
|
62
|
+
- @gradio/client@0.17.0
|
|
63
|
+
- @gradio/file@0.6.0
|
|
64
|
+
- @gradio/image@0.10.0
|
|
65
|
+
- @gradio/statustracker@0.5.0
|
|
66
|
+
- @gradio/upload@0.9.0
|
|
67
|
+
- @gradio/utils@0.4.0
|
|
68
|
+
|
|
3
69
|
## 0.8.8
|
|
4
70
|
|
|
5
71
|
### Dependency updates
|
package/Index.svelte
CHANGED
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
share: ShareData;
|
|
42
42
|
error: string;
|
|
43
43
|
prop_change: Record<string, any>;
|
|
44
|
+
clear_status: LoadingStatus;
|
|
44
45
|
}>;
|
|
45
46
|
|
|
46
47
|
const dispatch = createEventDispatcher();
|
|
@@ -65,20 +66,29 @@
|
|
|
65
66
|
autoscroll={gradio.autoscroll}
|
|
66
67
|
i18n={gradio.i18n}
|
|
67
68
|
{...loading_status}
|
|
69
|
+
on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
|
|
68
70
|
/>
|
|
69
71
|
{#if interactive && no_value}
|
|
70
72
|
<BaseFileUpload
|
|
71
73
|
value={null}
|
|
72
74
|
{root}
|
|
73
75
|
{label}
|
|
76
|
+
max_file_size={gradio.max_file_size}
|
|
74
77
|
file_count={"multiple"}
|
|
75
78
|
file_types={["image"]}
|
|
76
79
|
i18n={gradio.i18n}
|
|
80
|
+
upload={gradio.client.upload}
|
|
81
|
+
stream_handler={gradio.client.stream_factory}
|
|
77
82
|
on:upload={(e) => {
|
|
78
83
|
const files = Array.isArray(e.detail) ? e.detail : [e.detail];
|
|
79
84
|
value = files.map((x) => ({ image: x, caption: null }));
|
|
80
85
|
gradio.dispatch("upload", value);
|
|
81
86
|
}}
|
|
87
|
+
on:error={({ detail }) => {
|
|
88
|
+
loading_status = loading_status || {};
|
|
89
|
+
loading_status.status = "error";
|
|
90
|
+
gradio.dispatch("error", detail);
|
|
91
|
+
}}
|
|
82
92
|
>
|
|
83
93
|
<UploadText i18n={gradio.i18n} type="gallery" />
|
|
84
94
|
</BaseFileUpload>
|
|
@@ -102,6 +112,7 @@
|
|
|
102
112
|
{show_share_button}
|
|
103
113
|
{show_download_button}
|
|
104
114
|
i18n={gradio.i18n}
|
|
115
|
+
_fetch={gradio.client.fetch}
|
|
105
116
|
/>
|
|
106
117
|
{/if}
|
|
107
118
|
</Block>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/gallery",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -8,14 +8,17 @@
|
|
|
8
8
|
"private": false,
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"dequal": "^2.0.2",
|
|
11
|
-
"@gradio/atoms": "^0.7.0",
|
|
12
|
-
"@gradio/client": "^0.16.0",
|
|
13
11
|
"@gradio/icons": "^0.4.0",
|
|
14
|
-
"@gradio/
|
|
15
|
-
"@gradio/
|
|
16
|
-
"@gradio/
|
|
17
|
-
"@gradio/statustracker": "^0.
|
|
18
|
-
"@gradio/file": "^0.
|
|
12
|
+
"@gradio/atoms": "^0.7.2",
|
|
13
|
+
"@gradio/client": "^0.18.0",
|
|
14
|
+
"@gradio/image": "^0.11.0",
|
|
15
|
+
"@gradio/statustracker": "^0.5.1",
|
|
16
|
+
"@gradio/file": "^0.7.0",
|
|
17
|
+
"@gradio/upload": "^0.10.0",
|
|
18
|
+
"@gradio/utils": "^0.4.1"
|
|
19
|
+
},
|
|
20
|
+
"devDependencies": {
|
|
21
|
+
"@gradio/preview": "^0.9.0"
|
|
19
22
|
},
|
|
20
23
|
"main": "./Index.svelte",
|
|
21
24
|
"main_changeset": true,
|
package/shared/Gallery.svelte
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import type { SelectData } from "@gradio/utils";
|
|
5
5
|
import { Image } from "@gradio/image/shared";
|
|
6
6
|
import { dequal } from "dequal";
|
|
7
|
-
import { createEventDispatcher
|
|
7
|
+
import { createEventDispatcher } from "svelte";
|
|
8
8
|
import { tick } from "svelte";
|
|
9
9
|
|
|
10
10
|
import { Download, Image as ImageIcon } from "@gradio/icons";
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
export let i18n: I18nFormatter;
|
|
32
32
|
export let selected_index: number | null = null;
|
|
33
33
|
export let interactive: boolean;
|
|
34
|
+
export let _fetch: typeof fetch;
|
|
34
35
|
|
|
35
36
|
const dispatch = createEventDispatcher<{
|
|
36
37
|
change: undefined;
|
|
@@ -49,7 +50,7 @@
|
|
|
49
50
|
: value.map((data) => ({
|
|
50
51
|
image: data.image as FileData,
|
|
51
52
|
caption: data.caption
|
|
52
|
-
|
|
53
|
+
}));
|
|
53
54
|
|
|
54
55
|
let prev_value: GalleryData | null = value;
|
|
55
56
|
if (selected_index == null && preview && value?.length) {
|
|
@@ -159,18 +160,16 @@
|
|
|
159
160
|
}
|
|
160
161
|
}
|
|
161
162
|
|
|
162
|
-
let client_height = 0;
|
|
163
163
|
let window_height = 0;
|
|
164
164
|
|
|
165
165
|
// Unlike `gr.Image()`, images specified via remote URLs are not cached in the server
|
|
166
166
|
// and their remote URLs are directly passed to the client as `value[].image.url`.
|
|
167
167
|
// The `download` attribute of the <a> tag doesn't work for remote URLs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download),
|
|
168
168
|
// so we need to download the image via JS as below.
|
|
169
|
-
const fetch_implementation = getContext<typeof fetch>("fetch_implementation");
|
|
170
169
|
async function download(file_url: string, name: string): Promise<void> {
|
|
171
170
|
let response;
|
|
172
171
|
try {
|
|
173
|
-
response = await
|
|
172
|
+
response = await _fetch(file_url);
|
|
174
173
|
} catch (error) {
|
|
175
174
|
if (error instanceof TypeError) {
|
|
176
175
|
// If CORS is not allowed (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful),
|
|
@@ -279,11 +278,7 @@
|
|
|
279
278
|
</button>
|
|
280
279
|
{/if}
|
|
281
280
|
|
|
282
|
-
<div
|
|
283
|
-
bind:clientHeight={client_height}
|
|
284
|
-
class="grid-wrap"
|
|
285
|
-
class:fixed-height={!height || height == "auto"}
|
|
286
|
-
>
|
|
281
|
+
<div class="grid-wrap" class:fixed-height={!height || height == "auto"}>
|
|
287
282
|
<div
|
|
288
283
|
class="grid-container"
|
|
289
284
|
style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
|