@gradio/file 0.2.0-beta.6 → 0.2.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 (9) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/Example.svelte +1 -1
  3. package/Index.svelte +43 -119
  4. package/README.md +39 -5
  5. package/package.json +8 -7
  6. package/shared/File.svelte +2 -2
  7. package/shared/FilePreview.svelte +5 -7
  8. package/shared/FileUpload.svelte +5 -4
  9. package/shared/utils.ts +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,38 @@
1
1
  # @gradio/file
2
2
 
3
+ ## 0.2.0
4
+
5
+ ### Features
6
+
7
+ - [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - fix circular dependency with client + upload. Thanks [@pngwn](https://github.com/pngwn)!
8
+ - [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - Clean root url. Thanks [@pngwn](https://github.com/pngwn)!
9
+ - [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - Fix selectable prop in the backend. Thanks [@pngwn](https://github.com/pngwn)!
10
+ - [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - Image v4. Thanks [@pngwn](https://github.com/pngwn)!
11
+ - [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - Publish all components to npm. Thanks [@pngwn](https://github.com/pngwn)!
12
+ - [#5498](https://github.com/gradio-app/gradio/pull/5498) [`287fe6782`](https://github.com/gradio-app/gradio/commit/287fe6782825479513e79a5cf0ba0fbfe51443d7) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
13
+ - [#6171](https://github.com/gradio-app/gradio/pull/6171) [`28322422c`](https://github.com/gradio-app/gradio/commit/28322422cb9d8d3e471e439ad602959662e79312) - strip dangling svelte imports. Thanks [@pngwn](https://github.com/pngwn)!
14
+
15
+ ## 0.2.0-beta.8
16
+
17
+ ### Features
18
+
19
+ - [#6143](https://github.com/gradio-app/gradio/pull/6143) [`e4f7b4b40`](https://github.com/gradio-app/gradio/commit/e4f7b4b409323b01aa01b39e15ce6139e29aa073) - fix circular dependency with client + upload. Thanks [@pngwn](https://github.com/pngwn)!
20
+ - [#6136](https://github.com/gradio-app/gradio/pull/6136) [`667802a6c`](https://github.com/gradio-app/gradio/commit/667802a6cdbfb2ce454a3be5a78e0990b194548a) - JS Component Documentation. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
21
+ - [#6094](https://github.com/gradio-app/gradio/pull/6094) [`c476bd5a5`](https://github.com/gradio-app/gradio/commit/c476bd5a5b70836163b9c69bf4bfe068b17fbe13) - Image v4. Thanks [@pngwn](https://github.com/pngwn)!
22
+ - [#6149](https://github.com/gradio-app/gradio/pull/6149) [`90318b1dd`](https://github.com/gradio-app/gradio/commit/90318b1dd118ae08a695a50e7c556226234ab6dc) - swap `mode` on the frontned to `interactive` to match the backend. Thanks [@pngwn](https://github.com/pngwn)!
23
+ - [#6135](https://github.com/gradio-app/gradio/pull/6135) [`bce37ac74`](https://github.com/gradio-app/gradio/commit/bce37ac744496537e71546d2bb889bf248dcf5d3) - Fix selectable prop in the backend. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
24
+
25
+ ## 0.2.0-beta.7
26
+
27
+ ### Features
28
+
29
+ - [#6016](https://github.com/gradio-app/gradio/pull/6016) [`83e947676`](https://github.com/gradio-app/gradio/commit/83e947676d327ca2ab6ae2a2d710c78961c771a0) - Format js in v4 branch. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
30
+ - [#6044](https://github.com/gradio-app/gradio/pull/6044) [`9053c95a1`](https://github.com/gradio-app/gradio/commit/9053c95a10de12aef572018ee37c71106d2da675) - Simplify File Component. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
31
+
32
+ ### Fixes
33
+
34
+ - [#6046](https://github.com/gradio-app/gradio/pull/6046) [`dbb7de5e0`](https://github.com/gradio-app/gradio/commit/dbb7de5e02c53fee05889d696d764d212cb96c74) - fix tests. Thanks [@pngwn](https://github.com/pngwn)!
35
+
3
36
  ## 0.2.0-beta.6
4
37
 
5
38
  ### Features
package/Example.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import type { FileData } from "@gradio/upload";
2
+ import type { FileData } from "@gradio/client";
3
3
 
4
4
  export let value: FileData;
5
5
  export let type: "gallery" | "table";
package/Index.svelte CHANGED
@@ -2,20 +2,18 @@
2
2
 
3
3
  <script context="module" lang="ts">
4
4
  export { default as FilePreview } from "./shared/FilePreview.svelte";
5
+ export { default as BaseFileUpload } from "./shared/FileUpload.svelte";
6
+ export { default as BaseFile } from "./shared/File.svelte";
7
+ export { default as BaseExample } from "./Example.svelte";
5
8
  </script>
6
9
 
7
10
  <script lang="ts">
8
11
  import type { Gradio, SelectData } from "@gradio/utils";
9
- import { getContext } from "svelte";
10
12
  import File from "./shared/File.svelte";
11
13
  import FileUpload from "./shared/FileUpload.svelte";
12
- import { blobToBase64 } from "@gradio/upload";
13
- import type { FileData } from "@gradio/upload";
14
- import { normalise_file } from "@gradio/upload";
14
+ import { normalise_file, type FileData } from "@gradio/client";
15
15
  import { Block, UploadText } from "@gradio/atoms";
16
16
 
17
- import { upload_files as default_upload_files } from "@gradio/client";
18
-
19
17
  import { StatusTracker } from "@gradio/statustracker";
20
18
  import type { LoadingStatus } from "@gradio/statustracker";
21
19
 
@@ -23,16 +21,15 @@
23
21
  export let elem_classes: string[] = [];
24
22
  export let visible = true;
25
23
  export let value: null | FileData | FileData[];
26
- let old_value: null | FileData | FileData[];
27
24
 
28
- export let mode: "static" | "interactive";
25
+ export let interactive: boolean;
29
26
  export let root: string;
30
27
  export let label: string;
31
28
  export let show_label: boolean;
32
29
  export let height: number | undefined = undefined;
33
30
 
34
- export let root_url: null | string;
35
- export let selectable = false;
31
+ export let proxy_url: null | string;
32
+ export let _selectable = false;
36
33
  export let loading_status: LoadingStatus;
37
34
  export let container = true;
38
35
  export let scale: number | null = null;
@@ -46,141 +43,68 @@
46
43
  }>;
47
44
  export let file_count: string;
48
45
  export let file_types: string[] = ["file"];
46
+ $: _value = normalise_file(value, root, proxy_url);
49
47
 
50
- const upload_files =
51
- getContext<typeof default_upload_files>("upload_files") ??
52
- default_upload_files;
53
-
54
- $: _value = normalise_file(value, root, root_url);
48
+ let old_value = _value;
49
+ $: if (JSON.stringify(old_value) !== JSON.stringify(_value)) {
50
+ gradio.dispatch("change");
51
+ old_value = _value;
52
+ }
55
53
 
56
54
  let dragging = false;
57
55
  let pending_upload = false;
58
-
59
- $: {
60
- if (JSON.stringify(_value) !== JSON.stringify(old_value)) {
61
- old_value = _value;
62
- if (_value === null) {
63
- gradio.dispatch("change");
64
- pending_upload = false;
65
- } else if (
66
- !(Array.isArray(_value) ? _value : [_value]).every(
67
- (file_data) => file_data.blob
68
- )
69
- ) {
70
- pending_upload = false;
71
- gradio.dispatch("change");
72
- } else if (mode === "interactive") {
73
- let files = (Array.isArray(_value) ? _value : [_value]).map(
74
- (file_data) => file_data.blob!
75
- );
76
- let upload_value = _value;
77
- pending_upload = true;
78
- upload_files(root, files).then((response) => {
79
- if (upload_value !== _value) {
80
- // value has changed since upload started
81
- return;
82
- }
83
-
84
- pending_upload = false;
85
- if (response.error) {
86
- (Array.isArray(_value) ? _value : [_value]).forEach(
87
- async (file_data, i) => {
88
- file_data.data = await blobToBase64(file_data.blob!);
89
- file_data.blob = undefined;
90
- }
91
- );
92
- } else {
93
- (Array.isArray(_value) ? _value : [_value]).forEach(
94
- (file_data, i) => {
95
- if (response.files) {
96
- file_data.orig_name = file_data.name;
97
- file_data.name = response.files[i];
98
- file_data.is_file = true;
99
- file_data.blob = undefined;
100
- }
101
- }
102
- );
103
- old_value = _value = normalise_file(value, root, root_url);
104
- }
105
- gradio.dispatch("change");
106
- gradio.dispatch("upload");
107
- });
108
- }
109
- }
110
- }
111
56
  </script>
112
57
 
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
- />
134
-
58
+ <Block
59
+ {visible}
60
+ variant={value === null ? "dashed" : "solid"}
61
+ border_mode={dragging ? "focus" : "base"}
62
+ padding={false}
63
+ {elem_id}
64
+ {elem_classes}
65
+ {container}
66
+ {scale}
67
+ {min_width}
68
+ allow_overflow={false}
69
+ >
70
+ <StatusTracker
71
+ autoscroll={gradio.autoscroll}
72
+ i18n={gradio.i18n}
73
+ {...loading_status}
74
+ status={pending_upload
75
+ ? "generating"
76
+ : loading_status?.status || "complete"}
77
+ />
78
+ {#if !interactive}
135
79
  <File
136
80
  on:select={({ detail }) => gradio.dispatch("select", detail)}
137
- {selectable}
81
+ selectable={_selectable}
138
82
  value={_value}
139
83
  {label}
140
84
  {show_label}
141
85
  {height}
142
86
  i18n={gradio.i18n}
143
87
  />
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}
156
- {height}
157
- allow_overflow={false}
158
- >
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
-
88
+ {:else}
168
89
  <FileUpload
169
90
  {label}
170
91
  {show_label}
171
92
  value={_value}
172
93
  {file_count}
173
94
  {file_types}
174
- {selectable}
95
+ selectable={_selectable}
175
96
  {root}
176
97
  {height}
177
- on:change={({ detail }) => (value = detail)}
98
+ on:change={({ detail }) => {
99
+ value = detail;
100
+ }}
178
101
  on:drag={({ detail }) => (dragging = detail)}
179
102
  on:clear={() => gradio.dispatch("clear")}
180
103
  on:select={({ detail }) => gradio.dispatch("select", detail)}
104
+ on:upload={() => gradio.dispatch("upload")}
181
105
  i18n={gradio.i18n}
182
106
  >
183
107
  <UploadText i18n={gradio.i18n} type="file" />
184
108
  </FileUpload>
185
- </Block>
186
- {/if}
109
+ {/if}
110
+ </Block>
package/README.md CHANGED
@@ -1,11 +1,45 @@
1
- # `@gradio/button`
1
+ # `@gradio/file`
2
2
 
3
3
  ```html
4
4
  <script>
5
- import { Button } from "@gradio/button";
5
+ import { BaseFile, BaseFileUpload, FilePreview, BaseExample } from "@gradio/file";
6
6
  </script>
7
+ ```
8
+
9
+ BaseFile
10
+ ```javascript
11
+ export let value: FileData | FileData[] | null = null;
12
+ export let label: string;
13
+ export let show_label = true;
14
+ export let selectable = false;
15
+ export let height: number | undefined = undefined;
16
+ export let i18n: I18nFormatter;
17
+ ```
7
18
 
8
- <button type="primary|secondary" href="string" on:click="{e.detail === href}">
9
- content
10
- </button>
19
+ BaseFileUpload
20
+ ```javascript
21
+ export let value: null | FileData | FileData[];
22
+ export let label: string;
23
+ export let show_label = true;
24
+ export let file_count = "single";
25
+ export let file_types: string[] | null = null;
26
+ export let selectable = false;
27
+ export let root: string;
28
+ export let height: number | undefined = undefined;
29
+ export let i18n: I18nFormatter;
11
30
  ```
31
+
32
+ FilePreview
33
+ ```javascript
34
+ export let value: FileData | FileData[];
35
+ export let selectable = false;
36
+ export let height: number | undefined = undefined;
37
+ export let i18n: I18nFormatter;
38
+ ```
39
+
40
+ BaseExample
41
+ ```javascript
42
+ export let value: FileData;
43
+ export let type: "gallery" | "table";
44
+ export let selected = false;
45
+ ```
package/package.json CHANGED
@@ -1,19 +1,20 @@
1
1
  {
2
2
  "name": "@gradio/file",
3
- "version": "0.2.0-beta.6",
3
+ "version": "0.2.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
7
7
  "license": "ISC",
8
8
  "private": false,
9
9
  "dependencies": {
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"
10
+ "@gradio/atoms": "^0.2.0",
11
+ "@gradio/client": "^0.7.0",
12
+ "@gradio/icons": "^0.2.0",
13
+ "@gradio/statustracker": "^0.3.0",
14
+ "@gradio/upload": "^0.3.0",
15
+ "@gradio/utils": "^0.2.0"
16
16
  },
17
+ "main": "./Index.svelte",
17
18
  "main_changeset": true,
18
19
  "exports": {
19
20
  ".": "./Index.svelte",
package/shared/File.svelte CHANGED
@@ -1,9 +1,9 @@
1
1
  <script lang="ts">
2
- import type { FileData } from "@gradio/upload";
2
+ import type { FileData } from "@gradio/client";
3
3
  import { BlockLabel, Empty } from "@gradio/atoms";
4
4
  import { File } from "@gradio/icons";
5
5
  import FilePreview from "./FilePreview.svelte";
6
- import type { I18nFormatter } from "js/utils/src";
6
+ import type { I18nFormatter } from "@gradio/utils";
7
7
 
8
8
  export let value: FileData | FileData[] | null = null;
9
9
  export let label: string;
package/shared/FilePreview.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import type { FileData } from "@gradio/upload";
2
+ import type { FileData } from "@gradio/client";
3
3
  import { display_file_name, display_file_size } from "./utils";
4
4
  import { createEventDispatcher } from "svelte";
5
5
  import type { I18nFormatter, SelectData } from "@gradio/utils";
@@ -25,7 +25,7 @@
25
25
  class:selectable
26
26
  on:click={() =>
27
27
  dispatch("select", {
28
- value: file.orig_name || file.name,
28
+ value: file.orig_name,
29
29
  index: i
30
30
  })}
31
31
  >
@@ -34,13 +34,11 @@
34
34
  </td>
35
35
 
36
36
  <td class="download">
37
- {#if file.data}
37
+ {#if file.url}
38
38
  <a
39
- href={file.data}
39
+ href={file.url}
40
40
  target="_blank"
41
- download={window.__is_colab__
42
- ? null
43
- : file.orig_name || file.name}
41
+ download={window.__is_colab__ ? null : file.orig_name}
44
42
  >
45
43
  {@html display_file_size(file)}&nbsp;&#8675;
46
44
  </a>
package/shared/FileUpload.svelte CHANGED
@@ -1,12 +1,12 @@
1
1
  <script lang="ts">
2
2
  import { createEventDispatcher, tick } from "svelte";
3
3
  import { Upload, ModifyUpload } from "@gradio/upload";
4
- import type { FileData } from "@gradio/upload";
4
+ import type { FileData } from "@gradio/client";
5
5
  import { BlockLabel } from "@gradio/atoms";
6
6
  import { File } from "@gradio/icons";
7
7
 
8
8
  import FilePreview from "./FilePreview.svelte";
9
- import type { I18nFormatter } from "js/utils/src";
9
+ import type { I18nFormatter } from "@gradio/utils";
10
10
 
11
11
  export let value: null | FileData | FileData[];
12
12
 
@@ -28,9 +28,9 @@
28
28
  dispatch("upload", detail);
29
29
  }
30
30
 
31
- function handle_clear({ detail }: CustomEvent<null>): void {
31
+ function handle_clear(): void {
32
32
  value = null;
33
- dispatch("change", value);
33
+ dispatch("change", null);
34
34
  dispatch("clear");
35
35
  }
36
36
 
@@ -39,6 +39,7 @@
39
39
  clear: undefined;
40
40
  drag: boolean;
41
41
  upload: FileData[] | FileData;
42
+ load: FileData[] | FileData;
42
43
  error: string;
43
44
  }>();
44
45
 
package/shared/utils.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { FileData } from "@gradio/upload";
1
+ import type { FileData } from "@gradio/client";
2
2
 
3
3
  export const prettyBytes = (bytes: number): string => {
4
4
  let units = ["B", "KB", "MB", "GB", "PB"];
@@ -13,7 +13,7 @@ export const prettyBytes = (bytes: number): string => {
13
13
 
14
14
  export const display_file_name = (value: FileData): string => {
15
15
  var str: string;
16
- str = value.orig_name || value.name;
16
+ str = value.orig_name;
17
17
  const max_length = 30;
18
18
 
19
19
  if (str.length > max_length) {