@gradio/file 0.2.0-beta.5 → 0.2.0-beta.6

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 (12) hide show
  1. package/CHANGELOG.md +52 -26
  2. package/{interactive/InteractiveFile.svelte → Index.svelte} +83 -45
  3. package/package.json +10 -12
  4. package/{static → shared}/File.svelte +1 -1
  5. package/{interactive → shared}/FileUpload.svelte +1 -1
  6. package/example/index.ts +0 -1
  7. package/interactive/index.ts +0 -1
  8. package/shared/index.ts +0 -1
  9. package/static/StaticFile.svelte +0 -136
  10. package/static/index.ts +0 -1
  11. package/static/utils.ts +0 -33
  12. /package/{example/File.svelte → Example.svelte} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,52 +1,78 @@
1
1
  # @gradio/file
2
2
 
3
- ## 0.2.0-beta.5
3
+ ## 0.2.0-beta.6
4
4
 
5
5
  ### Features
6
6
 
7
- - [#5648](https://github.com/gradio-app/gradio/pull/5648) [`c573e2339`](https://github.com/gradio-app/gradio/commit/c573e2339b86c85b378dc349de5e9223a3c3b04a) - Publish all components to npm. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
7
+ - [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files. Thanks [@pngwn](https://github.com/pngwn)!
8
+ - [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
8
9
 
9
- ## 0.2.0-beta.4
10
+ ## 0.2.2
10
11
 
11
12
  ### Patch Changes
12
13
 
13
- - Updated dependencies [[`0b4fd5b6d`](https://github.com/gradio-app/gradio/commit/0b4fd5b6db96fc95a155e5e935e17e1ab11d1161)]:
14
- - @gradio/utils@0.2.0-beta.3
15
- - @gradio/atoms@0.2.0-beta.3
16
- - @gradio/statustracker@0.3.0-beta.4
17
- - @gradio/upload@0.3.0-beta.3
14
+ - Updated dependencies [[`4e62b8493`](https://github.com/gradio-app/gradio/commit/4e62b8493dfce50bafafe49f1a5deb929d822103), [`e70805d54`](https://github.com/gradio-app/gradio/commit/e70805d54cc792452545f5d8eccc1aa0212a4695)]:
15
+ - @gradio/client@0.5.2
16
+ - @gradio/atoms@0.2.0
17
+ - @gradio/statustracker@0.2.3
18
+ - @gradio/upload@0.3.3
18
19
 
19
- ## 0.2.0-beta.3
20
+ ## 0.2.1
20
21
 
21
22
  ### Patch Changes
22
23
 
23
- - Updated dependencies [[`14fc612d8`](https://github.com/gradio-app/gradio/commit/14fc612d84bf6b1408eccd3a40fab41f25477571)]:
24
- - @gradio/utils@0.2.0-beta.2
25
- - @gradio/atoms@0.2.0-beta.2
26
- - @gradio/statustracker@0.3.0-beta.3
27
- - @gradio/upload@0.3.0-beta.2
24
+ - Updated dependencies [[`796145e2c`](https://github.com/gradio-app/gradio/commit/796145e2c48c4087bec17f8ec0be4ceee47170cb)]:
25
+ - @gradio/client@0.5.1
28
26
 
29
- ## 0.2.0-beta.2
27
+ ## 0.2.0
30
28
 
31
- ### Features
29
+ ### Highlights
30
+
31
+ #### new `FileExplorer` component ([#5672](https://github.com/gradio-app/gradio/pull/5672) [`e4a307ed6`](https://github.com/gradio-app/gradio/commit/e4a307ed6cde3bbdf4ff2f17655739addeec941e))
32
+
33
+ Thanks to a new capability that allows components to communicate directly with the server _without_ passing data via the value, we have created a new `FileExplorer` component.
34
+
35
+ This component allows you to populate the explorer by passing a glob, but only provides the selected file(s) in your prediction function.
32
36
 
33
- - [#5620](https://github.com/gradio-app/gradio/pull/5620) [`c4c25ecdf`](https://github.com/gradio-app/gradio/commit/c4c25ecdf8c2fab5e3c41b519564e3b6a9ebfce3) - fix build and broken imports. Thanks [@pngwn](https://github.com/pngwn)!
37
+ Users can then navigate the virtual filesystem and select files which will be accessible in your predict function. This component will allow developers to build more complex spaces, with more flexible input options.
34
38
 
35
- ## 0.2.0-beta.1
39
+ ![output](https://github.com/pngwn/MDsveX/assets/12937446/ef108f0b-0e84-4292-9984-9dc66b3e144d)
40
+
41
+ For more information check the [`FileExplorer` documentation](https://gradio.app/docs/fileexplorer).
42
+
43
+ Thanks [@aliabid94](https://github.com/aliabid94)!
44
+
45
+ ## 0.1.6
36
46
 
37
47
  ### Patch Changes
38
48
 
39
- - Updated dependencies []:
40
- - @gradio/utils@0.2.0-beta.1
41
- - @gradio/atoms@0.2.0-beta.1
42
- - @gradio/statustracker@0.3.0-beta.1
43
- - @gradio/upload@0.3.0-beta.1
49
+ - Updated dependencies [[`6e56a0d9b`](https://github.com/gradio-app/gradio/commit/6e56a0d9b0c863e76c69e1183d9d40196922b4cd)]:
50
+ - @gradio/client@0.4.2
44
51
 
45
- ## 0.2.0-beta.0
52
+ ## 0.1.5
46
53
 
47
- ### Features
54
+ ### Patch Changes
55
+
56
+ - Updated dependencies [[`8f0fed857`](https://github.com/gradio-app/gradio/commit/8f0fed857d156830626eb48b469d54d211a582d2)]:
57
+ - @gradio/icons@0.2.0
58
+ - @gradio/atoms@0.1.3
59
+ - @gradio/statustracker@0.2.1
60
+ - @gradio/upload@0.3.1
61
+
62
+ ## 0.1.4
63
+
64
+ ### Patch Changes
65
+
66
+ - Updated dependencies [[`78e7cf516`](https://github.com/gradio-app/gradio/commit/78e7cf5163e8d205e8999428fce4c02dbdece25f)]:
67
+ - @gradio/client@0.4.1
68
+
69
+ ## 0.1.3
70
+
71
+ ### Patch Changes
48
72
 
49
- - [#5507](https://github.com/gradio-app/gradio/pull/5507) [`1385dc688`](https://github.com/gradio-app/gradio/commit/1385dc6881f2d8ae7a41106ec21d33e2ef04d6a9) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
73
+ - Updated dependencies [[`c57f1b75e`](https://github.com/gradio-app/gradio/commit/c57f1b75e272c76b0af4d6bd0c7f44743ff34f26), [`40de3d217`](https://github.com/gradio-app/gradio/commit/40de3d2178b61ebe424b6f6228f94c0c6f679bea), [`ea0e00b20`](https://github.com/gradio-app/gradio/commit/ea0e00b207b4b90a10e9d054c4202d4e705a29ba), [`75ddeb390`](https://github.com/gradio-app/gradio/commit/75ddeb390d665d4484667390a97442081b49a423)]:
74
+ - @gradio/client@0.4.0
75
+ - @gradio/upload@0.3.0
50
76
 
51
77
  ## 0.1.2
52
78
 
package/{interactive/InteractiveFile.svelte → Index.svelte} RENAMED
@@ -1,21 +1,24 @@
1
1
  <svelte:options accessors={true} />
2
2
 
3
+ <script context="module" lang="ts">
4
+ export { default as FilePreview } from "./shared/FilePreview.svelte";
5
+ </script>
6
+
3
7
  <script lang="ts">
4
8
  import type { Gradio, SelectData } from "@gradio/utils";
5
9
  import { getContext } from "svelte";
6
- import FileUpload from "./FileUpload.svelte";
10
+ import File from "./shared/File.svelte";
11
+ import FileUpload from "./shared/FileUpload.svelte";
7
12
  import { blobToBase64 } from "@gradio/upload";
8
13
  import type { FileData } from "@gradio/upload";
9
14
  import { normalise_file } from "@gradio/upload";
10
- import { Block } from "@gradio/atoms";
11
- import { UploadText } from "@gradio/atoms";
15
+ import { Block, UploadText } from "@gradio/atoms";
16
+
12
17
  import { upload_files as default_upload_files } from "@gradio/client";
13
18
 
14
19
  import { StatusTracker } from "@gradio/statustracker";
15
20
  import type { LoadingStatus } from "@gradio/statustracker";
16
21
 
17
- import type { S } from "@storybook/theming/dist/create-c2b2ce6d";
18
-
19
22
  export let elem_id = "";
20
23
  export let elem_classes: string[] = [];
21
24
  export let visible = true;
@@ -26,15 +29,14 @@
26
29
  export let root: string;
27
30
  export let label: string;
28
31
  export let show_label: boolean;
29
- export let file_count: string;
30
- export let file_types: string[] = ["file"];
32
+ export let height: number | undefined = undefined;
33
+
31
34
  export let root_url: null | string;
32
35
  export let selectable = false;
33
36
  export let loading_status: LoadingStatus;
34
37
  export let container = true;
35
38
  export let scale: number | null = null;
36
39
  export let min_width: number | undefined = undefined;
37
- export let height: number | undefined = undefined;
38
40
  export let gradio: Gradio<{
39
41
  change: never;
40
42
  error: string;
@@ -42,6 +44,8 @@
42
44
  clear: never;
43
45
  select: SelectData;
44
46
  }>;
47
+ export let file_count: string;
48
+ export let file_types: string[] = ["file"];
45
49
 
46
50
  const upload_files =
47
51
  getContext<typeof default_upload_files>("upload_files") ??
@@ -106,43 +110,77 @@
106
110
  }
107
111
  </script>
108
112
 
109
- <Block
110
- {visible}
111
- variant={value === null ? "dashed" : "solid"}
112
- border_mode={dragging ? "focus" : "base"}
113
- padding={false}
114
- {elem_id}
115
- {elem_classes}
116
- {container}
117
- {scale}
118
- {min_width}
119
- {height}
120
- allow_overflow={false}
121
- >
122
- <StatusTracker
123
- autoscroll={gradio.autoscroll}
124
- i18n={gradio.i18n}
125
- {...loading_status}
126
- status={pending_upload
127
- ? "generating"
128
- : loading_status?.status || "complete"}
129
- />
113
+ {#if mode === "static"}
114
+ <Block
115
+ {visible}
116
+ variant={value === null ? "dashed" : "solid"}
117
+ border_mode={dragging ? "focus" : "base"}
118
+ padding={false}
119
+ {elem_id}
120
+ {elem_classes}
121
+ {container}
122
+ {scale}
123
+ {min_width}
124
+ allow_overflow={false}
125
+ >
126
+ <StatusTracker
127
+ autoscroll={gradio.autoscroll}
128
+ i18n={gradio.i18n}
129
+ {...loading_status}
130
+ status={pending_upload
131
+ ? "generating"
132
+ : loading_status?.status || "complete"}
133
+ />
130
134
 
131
- <FileUpload
132
- {label}
133
- {show_label}
134
- value={_value}
135
- {file_count}
136
- {file_types}
137
- {selectable}
138
- {root}
135
+ <File
136
+ on:select={({ detail }) => gradio.dispatch("select", detail)}
137
+ {selectable}
138
+ value={_value}
139
+ {label}
140
+ {show_label}
141
+ {height}
142
+ i18n={gradio.i18n}
143
+ />
144
+ </Block>
145
+ {:else}
146
+ <Block
147
+ {visible}
148
+ variant={value === null ? "dashed" : "solid"}
149
+ border_mode={dragging ? "focus" : "base"}
150
+ padding={false}
151
+ {elem_id}
152
+ {elem_classes}
153
+ {container}
154
+ {scale}
155
+ {min_width}
139
156
  {height}
140
- on:change={({ detail }) => (value = detail)}
141
- on:drag={({ detail }) => (dragging = detail)}
142
- on:clear={() => gradio.dispatch("clear")}
143
- on:select={({ detail }) => gradio.dispatch("select", detail)}
144
- i18n={gradio.i18n}
157
+ allow_overflow={false}
145
158
  >
146
- <UploadText i18n={gradio.i18n} type="file" />
147
- </FileUpload>
148
- </Block>
159
+ <StatusTracker
160
+ autoscroll={gradio.autoscroll}
161
+ i18n={gradio.i18n}
162
+ {...loading_status}
163
+ status={pending_upload
164
+ ? "generating"
165
+ : loading_status?.status || "complete"}
166
+ />
167
+
168
+ <FileUpload
169
+ {label}
170
+ {show_label}
171
+ value={_value}
172
+ {file_count}
173
+ {file_types}
174
+ {selectable}
175
+ {root}
176
+ {height}
177
+ on:change={({ detail }) => (value = detail)}
178
+ on:drag={({ detail }) => (dragging = detail)}
179
+ on:clear={() => gradio.dispatch("clear")}
180
+ on:select={({ detail }) => gradio.dispatch("select", detail)}
181
+ i18n={gradio.i18n}
182
+ >
183
+ <UploadText i18n={gradio.i18n} type="file" />
184
+ </FileUpload>
185
+ </Block>
186
+ {/if}
package/package.json CHANGED
@@ -1,25 +1,23 @@
1
1
  {
2
2
  "name": "@gradio/file",
3
- "version": "0.2.0-beta.5",
3
+ "version": "0.2.0-beta.6",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
- "main": "./index.svelte",
7
6
  "author": "",
8
7
  "license": "ISC",
9
8
  "private": false,
10
9
  "dependencies": {
11
- "@gradio/atoms": "^0.2.0-beta.3",
12
- "@gradio/client": "^0.3.1",
13
- "@gradio/icons": "^0.2.0-beta.0",
14
- "@gradio/statustracker": "^0.3.0-beta.5",
15
- "@gradio/upload": "^0.3.0-beta.3",
16
- "@gradio/utils": "^0.2.0-beta.3"
10
+ "@gradio/atoms": "^0.2.0-beta.4",
11
+ "@gradio/client": "^0.5.2",
12
+ "@gradio/icons": "^0.2.0-beta.1",
13
+ "@gradio/statustracker": "^0.3.0-beta.6",
14
+ "@gradio/upload": "^0.3.0-beta.4",
15
+ "@gradio/utils": "^0.2.0-beta.4"
17
16
  },
18
17
  "main_changeset": true,
19
18
  "exports": {
20
- "./package.json": "./package.json",
21
- "./interactive": "./interactive/index.ts",
22
- "./static": "./static/index.ts",
23
- "./example": "./example/index.ts"
19
+ ".": "./Index.svelte",
20
+ "./example": "./Example.svelte",
21
+ "./package.json": "./package.json"
24
22
  }
25
23
  }
package/{static → shared}/File.svelte RENAMED
@@ -2,7 +2,7 @@
2
2
  import type { FileData } from "@gradio/upload";
3
3
  import { BlockLabel, Empty } from "@gradio/atoms";
4
4
  import { File } from "@gradio/icons";
5
- import { FilePreview } from "../shared";
5
+ import FilePreview from "./FilePreview.svelte";
6
6
  import type { I18nFormatter } from "js/utils/src";
7
7
 
8
8
  export let value: FileData | FileData[] | null = null;
package/{interactive → shared}/FileUpload.svelte RENAMED
@@ -5,7 +5,7 @@
5
5
  import { BlockLabel } from "@gradio/atoms";
6
6
  import { File } from "@gradio/icons";
7
7
 
8
- import { FilePreview } from "../shared";
8
+ import FilePreview from "./FilePreview.svelte";
9
9
  import type { I18nFormatter } from "js/utils/src";
10
10
 
11
11
  export let value: null | FileData | FileData[];
package/example/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from "./File.svelte";
package/interactive/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from "./InteractiveFile.svelte";
package/shared/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default as FilePreview } from "./FilePreview.svelte";
package/static/StaticFile.svelte DELETED
@@ -1,136 +0,0 @@
1
- <svelte:options accessors={true} />
2
-
3
- <script lang="ts">
4
- import type { Gradio, SelectData } from "@gradio/utils";
5
- import { getContext } from "svelte";
6
- import File from "./File.svelte";
7
- import { blobToBase64 } from "@gradio/upload";
8
- import type { FileData } from "@gradio/upload";
9
- import { normalise_file } from "@gradio/upload";
10
- import { Block } from "@gradio/atoms";
11
-
12
- import { upload_files as default_upload_files } from "@gradio/client";
13
-
14
- import { StatusTracker } from "@gradio/statustracker";
15
- import type { LoadingStatus } from "@gradio/statustracker";
16
-
17
- export let elem_id = "";
18
- export let elem_classes: string[] = [];
19
- export let visible = true;
20
- export let value: null | FileData | FileData[];
21
- let old_value: null | FileData | FileData[];
22
-
23
- export let mode: "static" | "interactive";
24
- export let root: string;
25
- export let label: string;
26
- export let show_label: boolean;
27
- export let height: number | undefined = undefined;
28
-
29
- export let root_url: null | string;
30
- export let selectable = false;
31
- export let loading_status: LoadingStatus;
32
- export let container = true;
33
- export let scale: number | null = null;
34
- export let min_width: number | undefined = undefined;
35
- export let gradio: Gradio<{
36
- change: never;
37
- error: string;
38
- upload: never;
39
- clear: never;
40
- select: SelectData;
41
- }>;
42
-
43
- const upload_files =
44
- getContext<typeof default_upload_files>("upload_files") ??
45
- default_upload_files;
46
-
47
- $: _value = normalise_file(value, root, root_url);
48
-
49
- let dragging = false;
50
- let pending_upload = false;
51
-
52
- $: {
53
- if (JSON.stringify(_value) !== JSON.stringify(old_value)) {
54
- old_value = _value;
55
- if (_value === null) {
56
- gradio.dispatch("change");
57
- pending_upload = false;
58
- } else if (
59
- !(Array.isArray(_value) ? _value : [_value]).every(
60
- (file_data) => file_data.blob
61
- )
62
- ) {
63
- pending_upload = false;
64
- gradio.dispatch("change");
65
- } else if (mode === "interactive") {
66
- let files = (Array.isArray(_value) ? _value : [_value]).map(
67
- (file_data) => file_data.blob!
68
- );
69
- let upload_value = _value;
70
- pending_upload = true;
71
- upload_files(root, files).then((response) => {
72
- if (upload_value !== _value) {
73
- // value has changed since upload started
74
- return;
75
- }
76
-
77
- pending_upload = false;
78
- if (response.error) {
79
- (Array.isArray(_value) ? _value : [_value]).forEach(
80
- async (file_data, i) => {
81
- file_data.data = await blobToBase64(file_data.blob!);
82
- file_data.blob = undefined;
83
- }
84
- );
85
- } else {
86
- (Array.isArray(_value) ? _value : [_value]).forEach(
87
- (file_data, i) => {
88
- if (response.files) {
89
- file_data.orig_name = file_data.name;
90
- file_data.name = response.files[i];
91
- file_data.is_file = true;
92
- file_data.blob = undefined;
93
- }
94
- }
95
- );
96
- old_value = _value = normalise_file(value, root, root_url);
97
- }
98
- gradio.dispatch("change");
99
- gradio.dispatch("upload");
100
- });
101
- }
102
- }
103
- }
104
- </script>
105
-
106
- <Block
107
- {visible}
108
- variant={value === null ? "dashed" : "solid"}
109
- border_mode={dragging ? "focus" : "base"}
110
- padding={false}
111
- {elem_id}
112
- {elem_classes}
113
- {container}
114
- {scale}
115
- {min_width}
116
- allow_overflow={false}
117
- >
118
- <StatusTracker
119
- autoscroll={gradio.autoscroll}
120
- i18n={gradio.i18n}
121
- {...loading_status}
122
- status={pending_upload
123
- ? "generating"
124
- : loading_status?.status || "complete"}
125
- />
126
-
127
- <File
128
- on:select={({ detail }) => gradio.dispatch("select", detail)}
129
- {selectable}
130
- value={_value}
131
- {label}
132
- {show_label}
133
- {height}
134
- i18n={gradio.i18n}
135
- />
136
- </Block>
package/static/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from "./StaticFile.svelte";
package/static/utils.ts DELETED
@@ -1,33 +0,0 @@
1
- import type { FileData } from "@gradio/upload";
2
-
3
- export const prettyBytes = (bytes: number): string => {
4
- let units = ["B", "KB", "MB", "GB", "PB"];
5
- let i = 0;
6
- while (bytes > 1024) {
7
- bytes /= 1024;
8
- i++;
9
- }
10
- let unit = units[i];
11
- return bytes.toFixed(1) + " " + unit;
12
- };
13
-
14
- export const display_file_name = (value: FileData): string => {
15
- var str: string;
16
- str = value.orig_name || value.name;
17
- if (str.length > 30) {
18
- return `${str.substr(0, 30)}...`;
19
- }
20
- return str;
21
- };
22
-
23
- export const display_file_size = (value: FileData | FileData[]): string => {
24
- var total_size = 0;
25
- if (Array.isArray(value)) {
26
- for (var file of value) {
27
- if (file.size !== undefined) total_size += file.size;
28
- }
29
- } else {
30
- total_size = value.size || 0;
31
- }
32
- return prettyBytes(total_size);
33
- };
/package/{example/File.svelte → Example.svelte} RENAMED
File without changes