@gradio/upload 0.4.1 → 0.5.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 +57 -1
- package/package.json +4 -4
- package/src/Upload.svelte +16 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,61 @@
|
|
|
1
1
|
# @gradio/upload
|
|
2
2
|
|
|
3
|
+
## 0.5.0
|
|
4
|
+
|
|
5
|
+
### Highlights
|
|
6
|
+
|
|
7
|
+
#### New `ImageEditor` component ([#6169](https://github.com/gradio-app/gradio/pull/6169) [`9caddc17b`](https://github.com/gradio-app/gradio/commit/9caddc17b1dea8da1af8ba724c6a5eab04ce0ed8))
|
|
8
|
+
|
|
9
|
+
A brand new component, completely separate from `Image` that provides simple editing capabilities.
|
|
10
|
+
|
|
11
|
+
- Set background images from file uploads, webcam, or just paste!
|
|
12
|
+
- Crop images with an improved cropping UI. App authors can event set specific crop size, or crop ratios (`1:1`, etc)
|
|
13
|
+
- Paint on top of any image (or no image) and erase any mistakes!
|
|
14
|
+
- The ImageEditor supports layers, confining draw and erase actions to that layer.
|
|
15
|
+
- More flexible access to data. The image component returns a composite image representing the final state of the canvas as well as providing the background and all layers as individual images.
|
|
16
|
+
- Fully customisable. All features can be enabled and disabled. Even the brush color swatches can be customised.
|
|
17
|
+
|
|
18
|
+
<video src="https://user-images.githubusercontent.com/12937446/284027169-31188926-fd16-4a1c-8718-998e7aae4695.mp4" autoplay muted></video>
|
|
19
|
+
|
|
20
|
+
```py
|
|
21
|
+
|
|
22
|
+
def fn(im):
|
|
23
|
+
im["composite"] # the full canvas
|
|
24
|
+
im["background"] # the background image
|
|
25
|
+
im["layers"] # a list of individual layers
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
im = gr.ImageEditor(
|
|
29
|
+
# decide which sources you'd like to accept
|
|
30
|
+
sources=["upload", "webcam", "clipboard"],
|
|
31
|
+
# set a cropsize constraint, can either be a ratio or a concrete [width, height]
|
|
32
|
+
crop_size="1:1",
|
|
33
|
+
# enable crop (or disable it)
|
|
34
|
+
transforms=["crop"],
|
|
35
|
+
# customise the brush
|
|
36
|
+
brush=Brush(
|
|
37
|
+
default_size="25", # or leave it as 'auto'
|
|
38
|
+
color_mode="fixed", # 'fixed' hides the user swatches and colorpicker, 'defaults' shows it
|
|
39
|
+
default_color="hotpink", # html names are supported
|
|
40
|
+
colors=[
|
|
41
|
+
"rgba(0, 150, 150, 1)", # rgb(a)
|
|
42
|
+
"#fff", # hex rgb
|
|
43
|
+
"hsl(360, 120, 120)" # in fact any valid colorstring
|
|
44
|
+
]
|
|
45
|
+
),
|
|
46
|
+
brush=Eraser(default_size="25")
|
|
47
|
+
)
|
|
48
|
+
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Thanks [@pngwn](https://github.com/pngwn)!
|
|
52
|
+
|
|
53
|
+
## 0.4.2
|
|
54
|
+
|
|
55
|
+
### Fixes
|
|
56
|
+
|
|
57
|
+
- [#6441](https://github.com/gradio-app/gradio/pull/6441) [`2f805a7dd`](https://github.com/gradio-app/gradio/commit/2f805a7dd3d2b64b098f659dadd5d01258290521) - Small but important bugfixes for gr.Image: The upload event was not triggering at all. The paste-from-clipboard was not triggering an upload event. The clear button was not triggering a change event. The change event was triggering infinitely. Uploaded images were not preserving their original names. Uploading a new image should clear out the previous image. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
|
|
58
|
+
|
|
3
59
|
## 0.4.1
|
|
4
60
|
|
|
5
61
|
### Patch Changes
|
|
@@ -182,4 +238,4 @@ From the backend, streamed outputs are served from the `/stream/` endpoint inste
|
|
|
182
238
|
### Patch Changes
|
|
183
239
|
|
|
184
240
|
- Updated dependencies []:
|
|
185
|
-
- @gradio/atoms@0.0.2
|
|
241
|
+
- @gradio/atoms@0.0.2
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/upload",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "src/index.ts",
|
|
7
7
|
"author": "",
|
|
8
8
|
"license": "ISC",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@gradio/atoms": "^0.
|
|
10
|
+
"@gradio/atoms": "^0.3.0",
|
|
11
|
+
"@gradio/icons": "^0.3.0",
|
|
11
12
|
"@gradio/client": "^0.8.1",
|
|
12
|
-
"@gradio/
|
|
13
|
-
"@gradio/upload": "^0.4.1",
|
|
13
|
+
"@gradio/upload": "^0.5.0",
|
|
14
14
|
"@gradio/utils": "^0.2.0"
|
|
15
15
|
},
|
|
16
16
|
"main_changeset": true,
|
package/src/Upload.svelte
CHANGED
|
@@ -14,9 +14,10 @@
|
|
|
14
14
|
export let disable_click = false;
|
|
15
15
|
export let root: string;
|
|
16
16
|
export let hidden = false;
|
|
17
|
+
export let format: "blob" | "file" = "file";
|
|
17
18
|
export let include_sources = false;
|
|
19
|
+
export let uploading = false;
|
|
18
20
|
|
|
19
|
-
let uploading = false;
|
|
20
21
|
let upload_id: string;
|
|
21
22
|
let file_data: FileData[];
|
|
22
23
|
|
|
@@ -63,7 +64,15 @@
|
|
|
63
64
|
async function load_files_from_upload(e: Event): Promise<void> {
|
|
64
65
|
const target = e.target as HTMLInputElement;
|
|
65
66
|
if (!target.files) return;
|
|
66
|
-
|
|
67
|
+
if (format != "blob") {
|
|
68
|
+
await load_files(Array.from(target.files));
|
|
69
|
+
} else {
|
|
70
|
+
if (file_count === "single") {
|
|
71
|
+
dispatch("load", target.files[0]);
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
dispatch("load", target.files);
|
|
75
|
+
}
|
|
67
76
|
}
|
|
68
77
|
|
|
69
78
|
function is_valid_mimetype(
|
|
@@ -107,6 +116,7 @@
|
|
|
107
116
|
class:boundedheight
|
|
108
117
|
class:flex
|
|
109
118
|
style:height={include_sources ? "calc(100% - 40px" : "100%"}
|
|
119
|
+
tabindex={hidden ? -1 : 0}
|
|
110
120
|
on:drag|preventDefault|stopPropagation
|
|
111
121
|
on:dragstart|preventDefault|stopPropagation
|
|
112
122
|
on:dragend|preventDefault|stopPropagation
|
|
@@ -121,6 +131,7 @@
|
|
|
121
131
|
>
|
|
122
132
|
<slot />
|
|
123
133
|
<input
|
|
134
|
+
aria-label="file upload"
|
|
124
135
|
type="file"
|
|
125
136
|
bind:this={hidden_upload}
|
|
126
137
|
on:change={load_files_from_upload}
|
|
@@ -140,8 +151,10 @@
|
|
|
140
151
|
|
|
141
152
|
.hidden {
|
|
142
153
|
display: none;
|
|
143
|
-
height: 0;
|
|
154
|
+
height: 0 !important;
|
|
144
155
|
position: absolute;
|
|
156
|
+
width: 0;
|
|
157
|
+
flex-grow: 0;
|
|
145
158
|
}
|
|
146
159
|
|
|
147
160
|
.center {
|