@gradio/image 0.14.0 → 0.15.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 +22 -0
- package/Image.stories.svelte +43 -15
- package/Image.test.ts +1 -2
- package/Index.svelte +32 -1
- package/package.json +14 -9
- package/shared/ImagePreview.svelte +17 -6
- package/shared/ImageUploader.svelte +12 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @gradio/image
|
|
2
2
|
|
|
3
|
+
## 0.15.0
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- [#9031](https://github.com/gradio-app/gradio/pull/9031) [`04b7d32`](https://github.com/gradio-app/gradio/commit/04b7d327ec1227a693fc2dfea51b1e2729851bde) - Allow drag and replace image in `gr.Image` and Multimodal textbox. Thanks @hannahblair!
|
|
8
|
+
- [#8930](https://github.com/gradio-app/gradio/pull/8930) [`41d5ab9`](https://github.com/gradio-app/gradio/commit/41d5ab987ba9728753be4509490c79041655809b) - Add `placeholder` param to Image and ImageEditor to replace upload image text. Thanks @hannahblair!
|
|
9
|
+
- [#9118](https://github.com/gradio-app/gradio/pull/9118) [`e1c404d`](https://github.com/gradio-app/gradio/commit/e1c404da1143fb52b659d03e028bdba1badf443d) - setup npm-previews of all packages. Thanks @pngwn!
|
|
10
|
+
|
|
11
|
+
### Fixes
|
|
12
|
+
|
|
13
|
+
- [#9116](https://github.com/gradio-app/gradio/pull/9116) [`ba6322e`](https://github.com/gradio-app/gradio/commit/ba6322ec2bb975f15389fe0700816bf671c6819d) - Fix image height content fit. Thanks @hannahblair!
|
|
14
|
+
|
|
15
|
+
### Dependency updates
|
|
16
|
+
|
|
17
|
+
- @gradio/utils@0.6.0
|
|
18
|
+
- @gradio/upload@0.12.3
|
|
19
|
+
- @gradio/atoms@0.8.0
|
|
20
|
+
- @gradio/client@1.5.1
|
|
21
|
+
- @gradio/statustracker@0.7.5
|
|
22
|
+
- @gradio/wasm@0.13.0
|
|
23
|
+
- @gradio/icons@0.7.1
|
|
24
|
+
|
|
3
25
|
## 0.14.0
|
|
4
26
|
|
|
5
27
|
### Features
|
package/Image.stories.svelte
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
import StaticImage from "./Index.svelte";
|
|
4
4
|
import { userEvent, within } from "@storybook/test";
|
|
5
5
|
import { allModes } from "../storybook/modes";
|
|
6
|
+
import image_file_100x100 from "../storybook/test_files/image_100x100.webp";
|
|
7
|
+
import image_file_100x1000 from "../storybook/test_files/image_100x100.webp";
|
|
6
8
|
|
|
7
9
|
export const meta = {
|
|
8
10
|
title: "Components/Image",
|
|
@@ -16,6 +18,8 @@
|
|
|
16
18
|
}
|
|
17
19
|
}
|
|
18
20
|
};
|
|
21
|
+
|
|
22
|
+
let md = `# a heading! /n a new line! `;
|
|
19
23
|
</script>
|
|
20
24
|
|
|
21
25
|
<Template let:args>
|
|
@@ -28,20 +32,7 @@
|
|
|
28
32
|
</Template>
|
|
29
33
|
|
|
30
34
|
<Story
|
|
31
|
-
name="static with label and download button"
|
|
32
|
-
args={{
|
|
33
|
-
value: {
|
|
34
|
-
path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
|
35
|
-
url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
|
36
|
-
orig_name: "cheetah.jpg"
|
|
37
|
-
},
|
|
38
|
-
show_label: true,
|
|
39
|
-
show_download_button: true
|
|
40
|
-
}}
|
|
41
|
-
/>
|
|
42
|
-
|
|
43
|
-
<Story
|
|
44
|
-
name="static with label and download button"
|
|
35
|
+
name="static with label, info and download button"
|
|
45
36
|
args={{
|
|
46
37
|
value: {
|
|
47
38
|
path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
|
@@ -49,6 +40,7 @@
|
|
|
49
40
|
orig_name: "cheetah.jpg"
|
|
50
41
|
},
|
|
51
42
|
show_label: true,
|
|
43
|
+
placeholder: "This is a cheetah",
|
|
52
44
|
show_download_button: true
|
|
53
45
|
}}
|
|
54
46
|
play={async ({ canvasElement }) => {
|
|
@@ -74,6 +66,41 @@
|
|
|
74
66
|
}}
|
|
75
67
|
/>
|
|
76
68
|
|
|
69
|
+
<Story
|
|
70
|
+
name="static with a vertically long image"
|
|
71
|
+
args={{
|
|
72
|
+
value: {
|
|
73
|
+
path: image_file_100x1000,
|
|
74
|
+
url: image_file_100x1000,
|
|
75
|
+
orig_name: "image.webp"
|
|
76
|
+
}
|
|
77
|
+
}}
|
|
78
|
+
/>
|
|
79
|
+
|
|
80
|
+
<Story
|
|
81
|
+
name="static with a vertically long image and a fixed height"
|
|
82
|
+
args={{
|
|
83
|
+
value: {
|
|
84
|
+
path: image_file_100x1000,
|
|
85
|
+
url: image_file_100x1000,
|
|
86
|
+
orig_name: "image.webp"
|
|
87
|
+
},
|
|
88
|
+
height: "500px"
|
|
89
|
+
}}
|
|
90
|
+
/>
|
|
91
|
+
|
|
92
|
+
<Story
|
|
93
|
+
name="static with a small image and a fixed height"
|
|
94
|
+
args={{
|
|
95
|
+
value: {
|
|
96
|
+
path: image_file_100x100,
|
|
97
|
+
url: image_file_100x100,
|
|
98
|
+
orig_name: "image.webp"
|
|
99
|
+
},
|
|
100
|
+
height: "500px"
|
|
101
|
+
}}
|
|
102
|
+
/>
|
|
103
|
+
|
|
77
104
|
<Story
|
|
78
105
|
name="interactive with upload, clipboard, and webcam"
|
|
79
106
|
args={{
|
|
@@ -85,7 +112,8 @@
|
|
|
85
112
|
},
|
|
86
113
|
show_label: false,
|
|
87
114
|
show_download_button: false,
|
|
88
|
-
interactive: true
|
|
115
|
+
interactive: true,
|
|
116
|
+
placeholder: md
|
|
89
117
|
}}
|
|
90
118
|
play={async ({ canvasElement }) => {
|
|
91
119
|
const canvas = within(canvasElement);
|
package/Image.test.ts
CHANGED
|
@@ -7,9 +7,8 @@ import {
|
|
|
7
7
|
beforeAll,
|
|
8
8
|
beforeEach
|
|
9
9
|
} from "vitest";
|
|
10
|
-
import { spy } from "tinyspy";
|
|
11
10
|
import { cleanup, render } from "@gradio/tootils";
|
|
12
|
-
import { setupi18n } from "../
|
|
11
|
+
import { setupi18n } from "../core/src/i18n";
|
|
13
12
|
|
|
14
13
|
import Image from "./Index.svelte";
|
|
15
14
|
import type { LoadingStatus } from "@gradio/statustracker";
|
package/Index.svelte
CHANGED
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
export let streaming: boolean;
|
|
52
52
|
export let pending: boolean;
|
|
53
53
|
export let mirror_webcam: boolean;
|
|
54
|
+
export let placeholder: string | undefined = undefined;
|
|
54
55
|
export let show_fullscreen_button: boolean;
|
|
55
56
|
|
|
56
57
|
export let gradio: Gradio<{
|
|
@@ -82,6 +83,30 @@
|
|
|
82
83
|
|
|
83
84
|
let dragging: boolean;
|
|
84
85
|
let active_source: sources = null;
|
|
86
|
+
let upload_component: ImageUploader;
|
|
87
|
+
const handle_drag_event = (event: Event): void => {
|
|
88
|
+
const drag_event = event as DragEvent;
|
|
89
|
+
drag_event.preventDefault();
|
|
90
|
+
drag_event.stopPropagation();
|
|
91
|
+
if (drag_event.type === "dragenter" || drag_event.type === "dragover") {
|
|
92
|
+
dragging = true;
|
|
93
|
+
} else if (drag_event.type === "dragleave") {
|
|
94
|
+
dragging = false;
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
const handle_drop = (event: Event): void => {
|
|
99
|
+
if (interactive) {
|
|
100
|
+
const drop_event = event as DragEvent;
|
|
101
|
+
drop_event.preventDefault();
|
|
102
|
+
drop_event.stopPropagation();
|
|
103
|
+
dragging = false;
|
|
104
|
+
|
|
105
|
+
if (upload_component) {
|
|
106
|
+
upload_component.loadFilesFromDrop(drop_event);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
};
|
|
85
110
|
</script>
|
|
86
111
|
|
|
87
112
|
{#if !interactive}
|
|
@@ -132,6 +157,10 @@
|
|
|
132
157
|
{container}
|
|
133
158
|
{scale}
|
|
134
159
|
{min_width}
|
|
160
|
+
on:dragenter={handle_drag_event}
|
|
161
|
+
on:dragleave={handle_drag_event}
|
|
162
|
+
on:dragover={handle_drag_event}
|
|
163
|
+
on:drop={handle_drop}
|
|
135
164
|
>
|
|
136
165
|
<StatusTracker
|
|
137
166
|
autoscroll={gradio.autoscroll}
|
|
@@ -141,8 +170,10 @@
|
|
|
141
170
|
/>
|
|
142
171
|
|
|
143
172
|
<ImageUploader
|
|
173
|
+
bind:this={upload_component}
|
|
144
174
|
bind:active_source
|
|
145
175
|
bind:value
|
|
176
|
+
bind:dragging
|
|
146
177
|
selectable={_selectable}
|
|
147
178
|
{root}
|
|
148
179
|
{sources}
|
|
@@ -171,7 +202,7 @@
|
|
|
171
202
|
stream_handler={gradio.client.stream}
|
|
172
203
|
>
|
|
173
204
|
{#if active_source === "upload" || !active_source}
|
|
174
|
-
<UploadText i18n={gradio.i18n} type="image" />
|
|
205
|
+
<UploadText i18n={gradio.i18n} type="image" {placeholder} />
|
|
175
206
|
{:else if active_source === "clipboard"}
|
|
176
207
|
<UploadText i18n={gradio.i18n} type="clipboard" mode="short" />
|
|
177
208
|
{:else}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/image",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0",
|
|
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/icons": "^0.7.
|
|
15
|
-
"@gradio/statustracker": "^0.7.
|
|
16
|
-
"@gradio/client": "^1.5.
|
|
17
|
-
"@gradio/
|
|
18
|
-
"@gradio/
|
|
19
|
-
"@gradio/
|
|
13
|
+
"@gradio/atoms": "^0.8.0",
|
|
14
|
+
"@gradio/icons": "^0.7.1",
|
|
15
|
+
"@gradio/statustracker": "^0.7.5",
|
|
16
|
+
"@gradio/client": "^1.5.1",
|
|
17
|
+
"@gradio/utils": "^0.6.0",
|
|
18
|
+
"@gradio/wasm": "^0.13.0",
|
|
19
|
+
"@gradio/upload": "^0.12.3"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@gradio/preview": "^0.
|
|
22
|
+
"@gradio/preview": "^0.11.0"
|
|
23
23
|
},
|
|
24
24
|
"main_changeset": true,
|
|
25
25
|
"main": "./Index.svelte",
|
|
@@ -29,5 +29,10 @@
|
|
|
29
29
|
"./example": "./Example.svelte",
|
|
30
30
|
"./base": "./shared/ImagePreview.svelte",
|
|
31
31
|
"./package.json": "./package.json"
|
|
32
|
+
},
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "git+https://github.com/gradio-app/gradio.git",
|
|
36
|
+
"directory": "js/image"
|
|
32
37
|
}
|
|
33
38
|
}
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
{/if}
|
|
100
100
|
</div>
|
|
101
101
|
<button on:click={handle_click}>
|
|
102
|
-
<div class:selectable>
|
|
102
|
+
<div class:selectable class="image-frame">
|
|
103
103
|
<Image src={value.url} alt="" loading="lazy" on:load />
|
|
104
104
|
</div>
|
|
105
105
|
</button>
|
|
@@ -111,12 +111,10 @@
|
|
|
111
111
|
height: 100%;
|
|
112
112
|
position: relative;
|
|
113
113
|
}
|
|
114
|
-
|
|
115
|
-
button {
|
|
114
|
+
|
|
115
|
+
.image-container button {
|
|
116
116
|
width: var(--size-full);
|
|
117
117
|
height: var(--size-full);
|
|
118
|
-
object-fit: contain;
|
|
119
|
-
display: block;
|
|
120
118
|
border-radius: var(--radius-lg);
|
|
121
119
|
|
|
122
120
|
display: flex;
|
|
@@ -124,6 +122,19 @@
|
|
|
124
122
|
justify-content: center;
|
|
125
123
|
}
|
|
126
124
|
|
|
125
|
+
.image-frame {
|
|
126
|
+
width: auto;
|
|
127
|
+
height: 100%;
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
justify-content: center;
|
|
131
|
+
}
|
|
132
|
+
.image-frame :global(img) {
|
|
133
|
+
width: var(--size-full);
|
|
134
|
+
height: var(--size-full);
|
|
135
|
+
object-fit: scale-down;
|
|
136
|
+
}
|
|
137
|
+
|
|
127
138
|
.selectable {
|
|
128
139
|
cursor: crosshair;
|
|
129
140
|
}
|
|
@@ -152,6 +163,6 @@
|
|
|
152
163
|
:global(.image-container:fullscreen img) {
|
|
153
164
|
max-width: 90vw;
|
|
154
165
|
max-height: 90vh;
|
|
155
|
-
object-fit:
|
|
166
|
+
object-fit: scale-down;
|
|
156
167
|
}
|
|
157
168
|
</style>
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
select: SelectData;
|
|
71
71
|
}>();
|
|
72
72
|
|
|
73
|
-
let dragging = false;
|
|
73
|
+
export let dragging = false;
|
|
74
74
|
|
|
75
75
|
$: dispatch("drag", dragging);
|
|
76
76
|
|
|
@@ -109,7 +109,11 @@
|
|
|
109
109
|
}}
|
|
110
110
|
/>
|
|
111
111
|
{/if}
|
|
112
|
-
<div
|
|
112
|
+
<div
|
|
113
|
+
class="upload-container"
|
|
114
|
+
class:reduced-height={sources.length > 1}
|
|
115
|
+
style:width={value ? "auto" : "100%"}
|
|
116
|
+
>
|
|
113
117
|
<Upload
|
|
114
118
|
hidden={value !== null || active_source === "webcam"}
|
|
115
119
|
bind:this={upload_input}
|
|
@@ -120,7 +124,7 @@
|
|
|
120
124
|
on:error
|
|
121
125
|
{root}
|
|
122
126
|
{max_file_size}
|
|
123
|
-
disable_click={!sources.includes("upload")}
|
|
127
|
+
disable_click={!sources.includes("upload") || value !== null}
|
|
124
128
|
{upload}
|
|
125
129
|
{stream_handler}
|
|
126
130
|
>
|
|
@@ -165,7 +169,7 @@
|
|
|
165
169
|
.image-frame :global(img) {
|
|
166
170
|
width: var(--size-full);
|
|
167
171
|
height: var(--size-full);
|
|
168
|
-
object-fit:
|
|
172
|
+
object-fit: scale-down;
|
|
169
173
|
}
|
|
170
174
|
|
|
171
175
|
.image-frame {
|
|
@@ -175,10 +179,13 @@
|
|
|
175
179
|
}
|
|
176
180
|
|
|
177
181
|
.upload-container {
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
justify-content: center;
|
|
185
|
+
|
|
178
186
|
height: 100%;
|
|
179
187
|
flex-shrink: 1;
|
|
180
188
|
max-height: 100%;
|
|
181
|
-
width: 100%;
|
|
182
189
|
}
|
|
183
190
|
|
|
184
191
|
.reduced-height {
|