@gradio/image 0.16.0-beta.1 → 0.16.0-beta.2
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 +28 -7
- package/Index.svelte +8 -5
- package/dist/Index.svelte +10 -3
- package/dist/Index.svelte.d.ts +5 -1
- package/dist/shared/ClearImage.svelte +3 -15
- package/dist/shared/ImagePreview.svelte +9 -12
- package/dist/shared/ImageUploader.svelte +1 -1
- package/dist/shared/ImageUploader.svelte.d.ts +1 -0
- package/dist/shared/Webcam.svelte +1 -0
- package/package.json +9 -9
- package/shared/ClearImage.svelte +3 -15
- package/shared/ImagePreview.svelte +9 -12
- package/shared/ImageUploader.svelte +1 -1
- package/shared/Webcam.svelte +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @gradio/image
|
|
2
2
|
|
|
3
|
+
## 0.16.0-beta.2
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2. Thanks @pngwn!
|
|
8
|
+
- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency. Thanks @hannahblair!
|
|
9
|
+
- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading. Thanks @dawoodkhan82!
|
|
10
|
+
- [#9270](https://github.com/gradio-app/gradio/pull/9270) [`b0b8500`](https://github.com/gradio-app/gradio/commit/b0b850081d8d10c1287b5d179b8db37482e21c8d) - Fix stop recording button colors. Thanks @freddyaboulton!
|
|
11
|
+
|
|
12
|
+
### Dependency updates
|
|
13
|
+
|
|
14
|
+
- @gradio/atoms@0.9.0-beta.2
|
|
15
|
+
- @gradio/upload@0.13.0-beta.2
|
|
16
|
+
- @gradio/wasm@0.14.0-beta.2
|
|
17
|
+
- @gradio/client@1.6.0-beta.2
|
|
18
|
+
- @gradio/icons@0.8.0-beta.2
|
|
19
|
+
- @gradio/statustracker@0.8.0-beta.2
|
|
20
|
+
- @gradio/utils@0.7.0-beta.2
|
|
21
|
+
|
|
3
22
|
## 0.16.0-beta.1
|
|
4
23
|
|
|
5
24
|
### Dependency updates
|
|
@@ -20,19 +39,21 @@
|
|
|
20
39
|
- [#9173](https://github.com/gradio-app/gradio/pull/9173) [`66349fe`](https://github.com/gradio-app/gradio/commit/66349fe26827e3a3c15b738a1177e95fec7f5554) - Streaming Guides. Thanks @freddyaboulton!
|
|
21
40
|
- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0. Thanks @freddyaboulton!
|
|
22
41
|
|
|
42
|
+
## 0.15.1
|
|
43
|
+
|
|
23
44
|
### Fixes
|
|
24
45
|
|
|
25
46
|
- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types. Thanks @pngwn!
|
|
26
47
|
|
|
27
48
|
### Dependency updates
|
|
28
49
|
|
|
29
|
-
- @gradio/utils@0.
|
|
30
|
-
- @gradio/statustracker@0.
|
|
31
|
-
- @gradio/atoms@0.8.1
|
|
32
|
-
- @gradio/
|
|
33
|
-
- @gradio/
|
|
34
|
-
- @gradio/
|
|
35
|
-
- @gradio/
|
|
50
|
+
- @gradio/utils@0.6.1
|
|
51
|
+
- @gradio/statustracker@0.7.6
|
|
52
|
+
- @gradio/atoms@0.8.1
|
|
53
|
+
- @gradio/icons@0.7.2
|
|
54
|
+
- @gradio/wasm@0.13.1
|
|
55
|
+
- @gradio/client@1.5.2
|
|
56
|
+
- @gradio/upload@0.12.4
|
|
36
57
|
|
|
37
58
|
## 0.15.0
|
|
38
59
|
|
package/Index.svelte
CHANGED
|
@@ -17,13 +17,13 @@
|
|
|
17
17
|
import { Block, Empty, UploadText } from "@gradio/atoms";
|
|
18
18
|
import { Image } from "@gradio/icons";
|
|
19
19
|
import { StatusTracker } from "@gradio/statustracker";
|
|
20
|
-
import type
|
|
20
|
+
import { upload, type FileData } from "@gradio/client";
|
|
21
21
|
import type { LoadingStatus } from "@gradio/statustracker";
|
|
22
22
|
|
|
23
23
|
type sources = "upload" | "webcam" | "clipboard" | null;
|
|
24
24
|
|
|
25
25
|
let stream_state = "closed";
|
|
26
|
-
let _modify_stream: (state: "open" | "closed" | "waiting") => void;
|
|
26
|
+
let _modify_stream: (state: "open" | "closed" | "waiting") => void = () => {};
|
|
27
27
|
export function modify_stream_state(
|
|
28
28
|
state: "open" | "closed" | "waiting"
|
|
29
29
|
): void {
|
|
@@ -64,7 +64,9 @@
|
|
|
64
64
|
export let mirror_webcam: boolean;
|
|
65
65
|
export let placeholder: string | undefined = undefined;
|
|
66
66
|
export let show_fullscreen_button: boolean;
|
|
67
|
-
|
|
67
|
+
export let input_ready: boolean;
|
|
68
|
+
let uploading = false;
|
|
69
|
+
$: input_ready = !uploading;
|
|
68
70
|
export let gradio: Gradio<{
|
|
69
71
|
input: never;
|
|
70
72
|
change: never;
|
|
@@ -184,6 +186,7 @@
|
|
|
184
186
|
|
|
185
187
|
<ImageUploader
|
|
186
188
|
bind:this={upload_component}
|
|
189
|
+
bind:uploading
|
|
187
190
|
bind:active_source
|
|
188
191
|
bind:value
|
|
189
192
|
bind:dragging
|
|
@@ -217,8 +220,8 @@
|
|
|
217
220
|
bind:set_time_limit
|
|
218
221
|
max_file_size={gradio.max_file_size}
|
|
219
222
|
i18n={gradio.i18n}
|
|
220
|
-
upload={gradio.client.upload}
|
|
221
|
-
stream_handler={gradio.client
|
|
223
|
+
upload={(...args) => gradio.client.upload(...args)}
|
|
224
|
+
stream_handler={gradio.client?.stream}
|
|
222
225
|
>
|
|
223
226
|
{#if active_source === "upload" || !active_source}
|
|
224
227
|
<UploadText i18n={gradio.i18n} type="image" {placeholder} />
|
package/dist/Index.svelte
CHANGED
|
@@ -13,8 +13,10 @@ import { afterUpdate } from "svelte";
|
|
|
13
13
|
import { Block, Empty, UploadText } from "@gradio/atoms";
|
|
14
14
|
import { Image } from "@gradio/icons";
|
|
15
15
|
import { StatusTracker } from "@gradio/statustracker";
|
|
16
|
+
import { upload } from "@gradio/client";
|
|
16
17
|
let stream_state = "closed";
|
|
17
|
-
let _modify_stream
|
|
18
|
+
let _modify_stream = () => {
|
|
19
|
+
};
|
|
18
20
|
export function modify_stream_state(state) {
|
|
19
21
|
stream_state = state;
|
|
20
22
|
_modify_stream(state);
|
|
@@ -51,6 +53,10 @@ export let pending;
|
|
|
51
53
|
export let mirror_webcam;
|
|
52
54
|
export let placeholder = void 0;
|
|
53
55
|
export let show_fullscreen_button;
|
|
56
|
+
export let input_ready;
|
|
57
|
+
let uploading = false;
|
|
58
|
+
$:
|
|
59
|
+
input_ready = !uploading;
|
|
54
60
|
export let gradio;
|
|
55
61
|
$: {
|
|
56
62
|
if (JSON.stringify(value) !== JSON.stringify(old_value)) {
|
|
@@ -152,6 +158,7 @@ const handle_drop = (event) => {
|
|
|
152
158
|
|
|
153
159
|
<ImageUploader
|
|
154
160
|
bind:this={upload_component}
|
|
161
|
+
bind:uploading
|
|
155
162
|
bind:active_source
|
|
156
163
|
bind:value
|
|
157
164
|
bind:dragging
|
|
@@ -185,8 +192,8 @@ const handle_drop = (event) => {
|
|
|
185
192
|
bind:set_time_limit
|
|
186
193
|
max_file_size={gradio.max_file_size}
|
|
187
194
|
i18n={gradio.i18n}
|
|
188
|
-
upload={gradio.client.upload}
|
|
189
|
-
stream_handler={gradio.client
|
|
195
|
+
upload={(...args) => gradio.client.upload(...args)}
|
|
196
|
+
stream_handler={gradio.client?.stream}
|
|
190
197
|
>
|
|
191
198
|
{#if active_source === "upload" || !active_source}
|
|
192
199
|
<UploadText i18n={gradio.i18n} type="image" {placeholder} />
|
package/dist/Index.svelte.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ export { default as BaseStaticImage } from "./shared/ImagePreview.svelte";
|
|
|
5
5
|
export { default as BaseExample } from "./Example.svelte";
|
|
6
6
|
export { default as BaseImage } from "./shared/Image.svelte";
|
|
7
7
|
import type { Gradio, SelectData, ValueData } from "@gradio/utils";
|
|
8
|
-
import type
|
|
8
|
+
import { type FileData } from "@gradio/client";
|
|
9
9
|
import type { LoadingStatus } from "@gradio/statustracker";
|
|
10
10
|
declare const __propDef: {
|
|
11
11
|
props: {
|
|
@@ -37,6 +37,7 @@ declare const __propDef: {
|
|
|
37
37
|
mirror_webcam: boolean;
|
|
38
38
|
placeholder?: string | undefined;
|
|
39
39
|
show_fullscreen_button: boolean;
|
|
40
|
+
input_ready: boolean;
|
|
40
41
|
gradio: Gradio<{
|
|
41
42
|
input: never;
|
|
42
43
|
change: never;
|
|
@@ -144,6 +145,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
|
|
|
144
145
|
get show_fullscreen_button(): boolean;
|
|
145
146
|
/**accessor*/
|
|
146
147
|
set show_fullscreen_button(_: boolean);
|
|
148
|
+
get input_ready(): boolean;
|
|
149
|
+
/**accessor*/
|
|
150
|
+
set input_ready(_: boolean);
|
|
147
151
|
get gradio(): Gradio<{
|
|
148
152
|
input: never;
|
|
149
153
|
change: never;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<script>import { createEventDispatcher } from "svelte";
|
|
2
|
-
import { IconButton } from "@gradio/atoms";
|
|
2
|
+
import { IconButton, IconButtonWrapper } from "@gradio/atoms";
|
|
3
3
|
import { Clear } from "@gradio/icons";
|
|
4
4
|
const dispatch = createEventDispatcher();
|
|
5
5
|
</script>
|
|
6
6
|
|
|
7
|
-
<
|
|
7
|
+
<IconButtonWrapper>
|
|
8
8
|
<IconButton
|
|
9
9
|
Icon={Clear}
|
|
10
10
|
label="Remove Image"
|
|
@@ -13,16 +13,4 @@ const dispatch = createEventDispatcher();
|
|
|
13
13
|
event.stopPropagation();
|
|
14
14
|
}}
|
|
15
15
|
/>
|
|
16
|
-
</
|
|
17
|
-
|
|
18
|
-
<style>
|
|
19
|
-
div {
|
|
20
|
-
display: flex;
|
|
21
|
-
position: absolute;
|
|
22
|
-
top: var(--size-2);
|
|
23
|
-
right: var(--size-2);
|
|
24
|
-
justify-content: flex-end;
|
|
25
|
-
gap: var(--spacing-sm);
|
|
26
|
-
z-index: var(--layer-5);
|
|
27
|
-
}
|
|
28
|
-
</style>
|
|
16
|
+
</IconButtonWrapper>
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
<script>import { createEventDispatcher, onMount } from "svelte";
|
|
2
2
|
import { uploadToHuggingFace } from "@gradio/utils";
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
BlockLabel,
|
|
5
|
+
Empty,
|
|
6
|
+
IconButton,
|
|
7
|
+
ShareButton,
|
|
8
|
+
IconButtonWrapper
|
|
9
|
+
} from "@gradio/atoms";
|
|
4
10
|
import { Download } from "@gradio/icons";
|
|
5
11
|
import { get_coordinates_of_clicked_image } from "./utils";
|
|
6
12
|
import Image from "./Image.svelte";
|
|
@@ -49,7 +55,7 @@ const toggle_full_screen = async () => {
|
|
|
49
55
|
<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
|
|
50
56
|
{:else}
|
|
51
57
|
<div class="image-container" bind:this={image_container}>
|
|
52
|
-
<
|
|
58
|
+
<IconButtonWrapper>
|
|
53
59
|
{#if !is_full_screen && show_fullscreen_button}
|
|
54
60
|
<IconButton
|
|
55
61
|
Icon={Maximize}
|
|
@@ -84,7 +90,7 @@ const toggle_full_screen = async () => {
|
|
|
84
90
|
{value}
|
|
85
91
|
/>
|
|
86
92
|
{/if}
|
|
87
|
-
</
|
|
93
|
+
</IconButtonWrapper>
|
|
88
94
|
<button on:click={handle_click}>
|
|
89
95
|
<div class:selectable class="image-frame">
|
|
90
96
|
<Image src={value.url} alt="" loading="lazy" on:load />
|
|
@@ -126,15 +132,6 @@ const toggle_full_screen = async () => {
|
|
|
126
132
|
cursor: crosshair;
|
|
127
133
|
}
|
|
128
134
|
|
|
129
|
-
.icon-buttons {
|
|
130
|
-
display: flex;
|
|
131
|
-
position: absolute;
|
|
132
|
-
top: 6px;
|
|
133
|
-
right: 6px;
|
|
134
|
-
gap: var(--size-1);
|
|
135
|
-
z-index: 1;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
135
|
:global(.fullscreen-controls svg) {
|
|
139
136
|
position: relative;
|
|
140
137
|
top: 0px;
|
|
@@ -27,7 +27,7 @@ export let stream_every;
|
|
|
27
27
|
export let modify_stream;
|
|
28
28
|
export let set_time_limit;
|
|
29
29
|
let upload_input;
|
|
30
|
-
let uploading = false;
|
|
30
|
+
export let uploading = false;
|
|
31
31
|
export let active_source = null;
|
|
32
32
|
function handle_upload({ detail }) {
|
|
33
33
|
if (!streaming) {
|
|
@@ -19,6 +19,7 @@ declare const __propDef: {
|
|
|
19
19
|
stream_every: number;
|
|
20
20
|
modify_stream: (state: "open" | "closed" | "waiting") => void;
|
|
21
21
|
set_time_limit: (arg0: number) => void;
|
|
22
|
+
uploading?: boolean | undefined;
|
|
22
23
|
active_source?: ("upload" | "clipboard" | "microphone" | "webcam" | null) | undefined;
|
|
23
24
|
dragging?: boolean | undefined;
|
|
24
25
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/image",
|
|
3
|
-
"version": "0.16.0-beta.
|
|
3
|
+
"version": "0.16.0-beta.2",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -10,16 +10,16 @@
|
|
|
10
10
|
"cropperjs": "^1.5.12",
|
|
11
11
|
"lazy-brush": "^1.0.1",
|
|
12
12
|
"resize-observer-polyfill": "^1.5.1",
|
|
13
|
-
"@gradio/atoms": "^0.
|
|
14
|
-
"@gradio/
|
|
15
|
-
"@gradio/
|
|
16
|
-
"@gradio/
|
|
17
|
-
"@gradio/
|
|
18
|
-
"@gradio/
|
|
19
|
-
"@gradio/
|
|
13
|
+
"@gradio/atoms": "^0.9.0-beta.2",
|
|
14
|
+
"@gradio/client": "^1.6.0-beta.2",
|
|
15
|
+
"@gradio/icons": "^0.8.0-beta.2",
|
|
16
|
+
"@gradio/statustracker": "^0.8.0-beta.2",
|
|
17
|
+
"@gradio/utils": "^0.7.0-beta.2",
|
|
18
|
+
"@gradio/wasm": "^0.14.0-beta.2",
|
|
19
|
+
"@gradio/upload": "^0.13.0-beta.2"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@gradio/preview": "^0.11.1
|
|
22
|
+
"@gradio/preview": "^0.11.1"
|
|
23
23
|
},
|
|
24
24
|
"main_changeset": true,
|
|
25
25
|
"main": "./Index.svelte",
|
package/shared/ClearImage.svelte
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { createEventDispatcher } from "svelte";
|
|
3
|
-
import { IconButton } from "@gradio/atoms";
|
|
3
|
+
import { IconButton, IconButtonWrapper } from "@gradio/atoms";
|
|
4
4
|
import { Clear } from "@gradio/icons";
|
|
5
5
|
|
|
6
6
|
const dispatch = createEventDispatcher();
|
|
7
7
|
</script>
|
|
8
8
|
|
|
9
|
-
<
|
|
9
|
+
<IconButtonWrapper>
|
|
10
10
|
<IconButton
|
|
11
11
|
Icon={Clear}
|
|
12
12
|
label="Remove Image"
|
|
@@ -15,16 +15,4 @@
|
|
|
15
15
|
event.stopPropagation();
|
|
16
16
|
}}
|
|
17
17
|
/>
|
|
18
|
-
</
|
|
19
|
-
|
|
20
|
-
<style>
|
|
21
|
-
div {
|
|
22
|
-
display: flex;
|
|
23
|
-
position: absolute;
|
|
24
|
-
top: var(--size-2);
|
|
25
|
-
right: var(--size-2);
|
|
26
|
-
justify-content: flex-end;
|
|
27
|
-
gap: var(--spacing-sm);
|
|
28
|
-
z-index: var(--layer-5);
|
|
29
|
-
}
|
|
30
|
-
</style>
|
|
18
|
+
</IconButtonWrapper>
|
|
@@ -2,7 +2,13 @@
|
|
|
2
2
|
import { createEventDispatcher, onMount } from "svelte";
|
|
3
3
|
import type { SelectData } from "@gradio/utils";
|
|
4
4
|
import { uploadToHuggingFace } from "@gradio/utils";
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
BlockLabel,
|
|
7
|
+
Empty,
|
|
8
|
+
IconButton,
|
|
9
|
+
ShareButton,
|
|
10
|
+
IconButtonWrapper
|
|
11
|
+
} from "@gradio/atoms";
|
|
6
12
|
import { Download } from "@gradio/icons";
|
|
7
13
|
import { get_coordinates_of_clicked_image } from "./utils";
|
|
8
14
|
import Image from "./Image.svelte";
|
|
@@ -62,7 +68,7 @@
|
|
|
62
68
|
<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
|
|
63
69
|
{:else}
|
|
64
70
|
<div class="image-container" bind:this={image_container}>
|
|
65
|
-
<
|
|
71
|
+
<IconButtonWrapper>
|
|
66
72
|
{#if !is_full_screen && show_fullscreen_button}
|
|
67
73
|
<IconButton
|
|
68
74
|
Icon={Maximize}
|
|
@@ -97,7 +103,7 @@
|
|
|
97
103
|
{value}
|
|
98
104
|
/>
|
|
99
105
|
{/if}
|
|
100
|
-
</
|
|
106
|
+
</IconButtonWrapper>
|
|
101
107
|
<button on:click={handle_click}>
|
|
102
108
|
<div class:selectable class="image-frame">
|
|
103
109
|
<Image src={value.url} alt="" loading="lazy" on:load />
|
|
@@ -139,15 +145,6 @@
|
|
|
139
145
|
cursor: crosshair;
|
|
140
146
|
}
|
|
141
147
|
|
|
142
|
-
.icon-buttons {
|
|
143
|
-
display: flex;
|
|
144
|
-
position: absolute;
|
|
145
|
-
top: 6px;
|
|
146
|
-
right: 6px;
|
|
147
|
-
gap: var(--size-1);
|
|
148
|
-
z-index: 1;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
148
|
:global(.fullscreen-controls svg) {
|
|
152
149
|
position: relative;
|
|
153
150
|
top: 0px;
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
export let set_time_limit: (arg0: number) => void;
|
|
39
39
|
|
|
40
40
|
let upload_input: Upload;
|
|
41
|
-
let uploading = false;
|
|
41
|
+
export let uploading = false;
|
|
42
42
|
export let active_source: source_type = null;
|
|
43
43
|
|
|
44
44
|
function handle_upload({ detail }: CustomEvent<FileData>): void {
|