@gradio/image 0.25.0 → 0.25.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/Image.stories.svelte +136 -87
  3. package/ImageExample.stories.svelte +20 -11
  4. package/Index.svelte +1 -1
  5. package/dist/Index.svelte +1 -1
  6. package/dist/shared/ImageUploader.svelte +5 -6
  7. package/dist/shared/ImageUploader.svelte.d.ts +3 -2
  8. package/package.json +9 -9
  9. package/shared/ImageUploader.svelte +5 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,37 @@
1
1
  # @gradio/image
2
2
 
3
+ ## 0.25.2
4
+
5
+ ### Dependency updates
6
+
7
+ - @gradio/atoms@0.21.0
8
+ - @gradio/client@2.0.4
9
+ - @gradio/statustracker@0.12.3
10
+ - @gradio/upload@0.17.5
11
+
12
+ ## 0.25.1
13
+
14
+ ### Fixes
15
+
16
+ - [#12800](https://github.com/gradio-app/gradio/pull/12800) [`7a1c321`](https://github.com/gradio-app/gradio/commit/7a1c321b6546ba05a353488f5133e8262c4a8a39) - Bump svelte/kit for security reasons. Thanks @freddyaboulton!
17
+ - [#12779](https://github.com/gradio-app/gradio/pull/12779) [`ea2d3e9`](https://github.com/gradio-app/gradio/commit/ea2d3e985a8b42d188e551f517c5825c00790628) - Migrate Audio + Upload + Atoms to Svelte 5. Thanks @dawoodkhan82!
18
+
19
+ ### Dependency updates
20
+
21
+ - @gradio/statustracker@0.12.2
22
+ - @gradio/atoms@0.20.1
23
+ - @gradio/utils@0.11.2
24
+ - @gradio/icons@0.15.1
25
+ - @gradio/upload@0.17.4
26
+ - @gradio/client@2.0.3
27
+
28
+ ## 0.25.0
29
+
30
+ ### Dependency updates
31
+
32
+ - @gradio/utils@0.11.1
33
+ - @gradio/client@2.0.2
34
+
3
35
  ## 0.25.0
4
36
 
5
37
  ### Features
package/Image.stories.svelte CHANGED
@@ -1,12 +1,14 @@
1
- <script context="module">
2
- import { Template, Story } from "@storybook/addon-svelte-csf";
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
3
  import StaticImage from "./Index.svelte";
4
- import { userEvent, within } from "@storybook/test";
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
+ import { wrapProps } from "../storybook/wrapProps";
8
7
 
9
- export const meta = {
8
+ const cheetah = "/cheetah.jpg";
9
+ const lion = "/lion.jpg";
10
+
11
+ const { Story } = defineMeta({
10
12
  title: "Components/Image",
11
13
  component: StaticImage,
12
14
  parameters: {
@@ -17,177 +19,224 @@
17
19
  }
18
20
  }
19
21
  }
20
- };
22
+ });
21
23
 
22
24
  let md = `# a heading! /n a new line! `;
23
25
  </script>
24
26
 
25
- <Template let:args>
26
- <div
27
- class="image-container"
28
- style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
29
- >
30
- <StaticImage {...args} />
31
- </div>
32
- </Template>
33
-
34
27
  <Story
35
28
  name="static with label, info and download button"
36
29
  args={{
37
30
  value: {
38
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
39
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
31
+ path: cheetah,
32
+ url: cheetah,
40
33
  orig_name: "cheetah.jpg"
41
34
  },
42
35
  show_label: true,
43
36
  placeholder: "This is a cheetah",
44
- show_download_button: true,
45
- webcam_options: {
46
- mirror: true,
47
- constraints: null
48
- }
37
+ buttons: ["fullscreen", "download"],
38
+ webcam_options: { mirror: true, constraints: null }
49
39
  }}
50
40
  play={async ({ canvasElement }) => {
51
41
  const canvas = within(canvasElement);
52
-
53
- const expand_btn = canvas.getByRole("button", {
54
- name: "Fullscreen"
55
- });
42
+ const expand_btn = canvas.getByRole("button", { name: "Fullscreen" });
56
43
  await userEvent.click(expand_btn);
57
44
  }}
58
- />
45
+ >
46
+ {#snippet template(args)}
47
+ <div
48
+ class="image-container"
49
+ style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
50
+ >
51
+ <StaticImage {...wrapProps(args)} />
52
+ </div>
53
+ {/snippet}
54
+ </Story>
59
55
 
60
56
  <Story
61
57
  name="static with no label or download button"
62
58
  args={{
63
59
  value: {
64
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
65
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
60
+ path: cheetah,
61
+ url: cheetah,
66
62
  orig_name: "cheetah.jpg"
67
63
  },
68
64
  show_label: false,
69
- show_download_button: false,
70
- webcam_options: {
71
- mirror: true,
72
- constraints: null
73
- }
65
+ buttons: [],
66
+ webcam_options: { mirror: true, constraints: null }
74
67
  }}
75
- />
68
+ >
69
+ {#snippet template(args)}
70
+ <div
71
+ class="image-container"
72
+ style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
73
+ >
74
+ <StaticImage {...wrapProps(args)} />
75
+ </div>
76
+ {/snippet}
77
+ </Story>
76
78
 
77
79
  <Story
78
80
  name="static with a vertically long image"
79
81
  args={{
80
82
  value: {
81
- path: image_file_100x1000,
82
- url: image_file_100x1000,
83
- orig_name: "image.webp"
83
+ path: lion,
84
+ url: lion,
85
+ orig_name: "lion.jpg"
84
86
  },
85
- webcam_options: {
86
- mirror: true,
87
- constraints: null
88
- }
87
+ buttons: [],
88
+ webcam_options: { mirror: true, constraints: null }
89
89
  }}
90
- />
90
+ >
91
+ {#snippet template(args)}
92
+ <div
93
+ class="image-container"
94
+ style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
95
+ >
96
+ <StaticImage {...wrapProps(args)} />
97
+ </div>
98
+ {/snippet}
99
+ </Story>
91
100
 
92
101
  <Story
93
102
  name="static with a vertically long image and a fixed height"
94
103
  args={{
95
104
  value: {
96
- path: image_file_100x1000,
97
- url: image_file_100x1000,
98
- orig_name: "image.webp"
105
+ path: lion,
106
+ url: lion,
107
+ orig_name: "lion.jpg"
99
108
  },
100
109
  height: "500px",
101
- webcam_options: {
102
- mirror: true,
103
- constraints: null
104
- }
110
+ buttons: [],
111
+ webcam_options: { mirror: true, constraints: null }
105
112
  }}
106
- />
113
+ >
114
+ {#snippet template(args)}
115
+ <div
116
+ class="image-container"
117
+ style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
118
+ >
119
+ <StaticImage {...wrapProps(args)} />
120
+ </div>
121
+ {/snippet}
122
+ </Story>
107
123
 
108
124
  <Story
109
125
  name="static with a small image and a fixed height"
110
126
  args={{
111
127
  value: {
112
- path: image_file_100x100,
113
- url: image_file_100x100,
114
- orig_name: "image.webp"
128
+ path: cheetah,
129
+ url: cheetah,
130
+ orig_name: "cheetah.jpg"
115
131
  },
116
132
  height: "500px",
117
- webcam_options: {
118
- mirror: true,
119
- constraints: null
120
- }
133
+ buttons: [],
134
+ webcam_options: { mirror: true, constraints: null }
121
135
  }}
122
- />
136
+ >
137
+ {#snippet template(args)}
138
+ <div
139
+ class="image-container"
140
+ style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
141
+ >
142
+ <StaticImage {...wrapProps(args)} />
143
+ </div>
144
+ {/snippet}
145
+ </Story>
123
146
 
124
147
  <Story
125
148
  name="interactive with upload, clipboard, and webcam"
126
149
  args={{
127
150
  sources: ["upload", "clipboard", "webcam"],
128
151
  value: {
129
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
130
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
152
+ path: cheetah,
153
+ url: cheetah,
131
154
  orig_name: "cheetah.jpg"
132
155
  },
133
156
  show_label: false,
134
- show_download_button: false,
135
157
  interactive: true,
136
158
  placeholder: md,
137
- webcam_options: {
138
- mirror: true,
139
- constraints: null
140
- }
159
+ buttons: [],
160
+ webcam_options: { mirror: true, constraints: null }
141
161
  }}
162
+ parameters={{ chromatic: { disableSnapshot: true } }}
142
163
  play={async ({ canvasElement }) => {
143
164
  const canvas = within(canvasElement);
144
-
145
165
  const webcamButton = await canvas.findByLabelText("Capture from camera");
146
166
  userEvent.click(webcamButton);
147
-
148
167
  userEvent.click(await canvas.findByTitle("grant webcam access"));
149
168
  userEvent.click(await canvas.findByLabelText("Upload file"));
150
169
  userEvent.click(await canvas.findByLabelText("Paste from clipboard"));
151
170
  }}
152
- />
171
+ >
172
+ {#snippet template(args)}
173
+ <div
174
+ class="image-container"
175
+ style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
176
+ >
177
+ <StaticImage {...wrapProps(args)} />
178
+ </div>
179
+ {/snippet}
180
+ </Story>
153
181
 
154
182
  <Story
155
183
  name="interactive with webcam"
156
184
  args={{
157
185
  sources: ["webcam"],
158
- show_download_button: true,
159
186
  interactive: true,
160
- webcam_options: {
161
- mirror: true,
162
- constraints: null
163
- }
187
+ buttons: ["download"],
188
+ webcam_options: { mirror: true, constraints: null }
164
189
  }}
165
- />
190
+ >
191
+ {#snippet template(args)}
192
+ <div
193
+ class="image-container"
194
+ style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
195
+ >
196
+ <StaticImage {...wrapProps(args)} />
197
+ </div>
198
+ {/snippet}
199
+ </Story>
166
200
 
167
201
  <Story
168
202
  name="interactive with clipboard"
169
203
  args={{
170
204
  sources: ["clipboard"],
171
- show_download_button: true,
172
- interactive: true
205
+ interactive: true,
206
+ buttons: ["download"]
173
207
  }}
174
- />
208
+ >
209
+ {#snippet template(args)}
210
+ <div
211
+ class="image-container"
212
+ style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
213
+ >
214
+ <StaticImage {...wrapProps(args)} />
215
+ </div>
216
+ {/snippet}
217
+ </Story>
175
218
 
176
219
  <Story
177
220
  name="interactive webcam with streaming"
178
221
  args={{
179
222
  sources: ["webcam"],
180
- show_download_button: true,
181
223
  interactive: true,
182
224
  value: {
183
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
184
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
225
+ path: cheetah,
226
+ url: cheetah,
185
227
  orig_name: "cheetah.jpg"
186
228
  },
187
229
  streaming: true,
188
- webcam_options: {
189
- mirror: true,
190
- constraints: null
191
- }
230
+ buttons: ["download"],
231
+ webcam_options: { mirror: true, constraints: null }
192
232
  }}
193
- />
233
+ >
234
+ {#snippet template(args)}
235
+ <div
236
+ class="image-container"
237
+ style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
238
+ >
239
+ <StaticImage {...wrapProps(args)} />
240
+ </div>
241
+ {/snippet}
242
+ </Story>
package/ImageExample.stories.svelte CHANGED
@@ -1,28 +1,37 @@
1
- <script>
2
- import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
3
  import Image from "./Example.svelte";
4
- </script>
5
4
 
6
- <Meta title="Components/Image/Example" component={Image} />
5
+ const cheetah = "/cheetah.jpg";
7
6
 
8
- <Template let:args>
9
- <Image {...args} />
10
- </Template>
7
+ const { Story } = defineMeta({
8
+ title: "Components/Image/Example",
9
+ component: Image
10
+ });
11
+ </script>
11
12
 
12
13
  <Story
13
14
  name="Image file"
14
15
  args={{
15
16
  value: {
16
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
17
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
17
+ path: cheetah,
18
+ url: cheetah,
18
19
  orig_name: "cheetah.jpg"
19
20
  }
20
21
  }}
21
- />
22
+ >
23
+ {#snippet template(args)}
24
+ <Image {...args} />
25
+ {/snippet}
26
+ </Story>
22
27
 
23
28
  <Story
24
29
  name="Null"
25
30
  args={{
26
31
  value: null
27
32
  }}
28
- />
33
+ >
34
+ {#snippet template(args)}
35
+ <Image {...args} />
36
+ {/snippet}
37
+ </Story>
package/Index.svelte CHANGED
@@ -185,7 +185,7 @@
185
185
  }}
186
186
  on:select={({ detail }) => gradio.dispatch("select", detail)}
187
187
  on:share={({ detail }) => gradio.dispatch("share", detail)}
188
- on:error={({ detail }) => {
188
+ onerror={(detail) => {
189
189
  gradio.shared.loading_status.status = "error";
190
190
  gradio.dispatch("error", detail);
191
191
  }}
package/dist/Index.svelte CHANGED
@@ -185,7 +185,7 @@
185
185
  }}
186
186
  on:select={({ detail }) => gradio.dispatch("select", detail)}
187
187
  on:share={({ detail }) => gradio.dispatch("share", detail)}
188
- on:error={({ detail }) => {
188
+ onerror={(detail) => {
189
189
  gradio.shared.loading_status.status = "error";
190
190
  gradio.dispatch("error", detail);
191
191
  }}
package/dist/shared/ImageUploader.svelte CHANGED
@@ -38,6 +38,7 @@
38
38
  export let show_fullscreen_button = true;
39
39
  export let stream_state: "open" | "waiting" | "closed" = "closed";
40
40
  export let upload_promise: Promise<any> | null = null;
41
+ export let onerror: ((error: string) => void) | undefined = undefined;
41
42
 
42
43
  let upload_input: Upload;
43
44
  export let uploading = false;
@@ -47,9 +48,7 @@
47
48
  let files: FileData[] = [];
48
49
  let upload_id: string;
49
50
 
50
- async function handle_upload({
51
- detail
52
- }: CustomEvent<FileData>): Promise<void> {
51
+ async function handle_upload(detail: FileData): Promise<void> {
53
52
  if (!streaming) {
54
53
  if (detail.path?.toLowerCase().endsWith(".svg") && detail.url) {
55
54
  const response = await fetch(detail.url);
@@ -190,7 +189,7 @@
190
189
  <IconButton
191
190
  Icon={Clear}
192
191
  label="Remove Image"
193
- on:click={handle_remove_image_click}
192
+ onclick={handle_remove_image_click}
194
193
  />
195
194
  {/if}
196
195
  </IconButtonWrapper>
@@ -209,8 +208,8 @@
209
208
  bind:uploading
210
209
  bind:dragging
211
210
  filetype={active_source === "clipboard" ? "clipboard" : "image/*"}
212
- on:load={handle_upload}
213
- on:error
211
+ onload={handle_upload}
212
+ {onerror}
214
213
  {root}
215
214
  {max_file_size}
216
215
  disable_click={!sources.includes("upload") || value !== null}
package/dist/shared/ImageUploader.svelte.d.ts CHANGED
@@ -38,6 +38,7 @@ declare const ImageUploader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
38
38
  show_fullscreen_button?: boolean;
39
39
  stream_state?: "open" | "waiting" | "closed";
40
40
  upload_promise?: Promise<any> | null;
41
+ onerror?: ((error: string) => void) | undefined;
41
42
  uploading?: boolean;
42
43
  active_source?: "upload" | "clipboard" | "microphone" | "webcam" | null;
43
44
  fullscreen?: boolean;
@@ -45,8 +46,8 @@ declare const ImageUploader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
45
46
  }, {
46
47
  default: {};
47
48
  }>, {
48
- fullscreen: CustomEvent<boolean>;
49
- error: CustomEvent<any> | CustomEvent<string>;
49
+ fullscreen: any;
50
+ error: CustomEvent<string>;
50
51
  drag: CustomEvent<any>;
51
52
  close_stream: CustomEvent<undefined>;
52
53
  change?: CustomEvent<undefined> | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/image",
3
- "version": "0.25.0",
3
+ "version": "0.25.2",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -10,15 +10,15 @@
10
10
  "cropperjs": "^2.0.1",
11
11
  "lazy-brush": "^2.0.2",
12
12
  "resize-observer-polyfill": "^1.5.1",
13
- "@gradio/atoms": "^0.20.0",
14
- "@gradio/upload": "^0.17.3",
15
- "@gradio/icons": "^0.15.0",
16
- "@gradio/statustracker": "^0.12.1",
17
- "@gradio/utils": "^0.11.0",
18
- "@gradio/client": "^2.0.1"
13
+ "@gradio/atoms": "^0.21.0",
14
+ "@gradio/client": "^2.0.4",
15
+ "@gradio/icons": "^0.15.1",
16
+ "@gradio/upload": "^0.17.5",
17
+ "@gradio/statustracker": "^0.12.3",
18
+ "@gradio/utils": "^0.11.2"
19
19
  },
20
20
  "devDependencies": {
21
- "@gradio/preview": "^0.15.1"
21
+ "@gradio/preview": "^0.15.2"
22
22
  },
23
23
  "main_changeset": true,
24
24
  "main": "./Index.svelte",
@@ -46,7 +46,7 @@
46
46
  }
47
47
  },
48
48
  "peerDependencies": {
49
- "svelte": "^5.43.4"
49
+ "svelte": "^5.48.0"
50
50
  },
51
51
  "repository": {
52
52
  "type": "git",
package/shared/ImageUploader.svelte CHANGED
@@ -38,6 +38,7 @@
38
38
  export let show_fullscreen_button = true;
39
39
  export let stream_state: "open" | "waiting" | "closed" = "closed";
40
40
  export let upload_promise: Promise<any> | null = null;
41
+ export let onerror: ((error: string) => void) | undefined = undefined;
41
42
 
42
43
  let upload_input: Upload;
43
44
  export let uploading = false;
@@ -47,9 +48,7 @@
47
48
  let files: FileData[] = [];
48
49
  let upload_id: string;
49
50
 
50
- async function handle_upload({
51
- detail
52
- }: CustomEvent<FileData>): Promise<void> {
51
+ async function handle_upload(detail: FileData): Promise<void> {
53
52
  if (!streaming) {
54
53
  if (detail.path?.toLowerCase().endsWith(".svg") && detail.url) {
55
54
  const response = await fetch(detail.url);
@@ -190,7 +189,7 @@
190
189
  <IconButton
191
190
  Icon={Clear}
192
191
  label="Remove Image"
193
- on:click={handle_remove_image_click}
192
+ onclick={handle_remove_image_click}
194
193
  />
195
194
  {/if}
196
195
  </IconButtonWrapper>
@@ -209,8 +208,8 @@
209
208
  bind:uploading
210
209
  bind:dragging
211
210
  filetype={active_source === "clipboard" ? "clipboard" : "image/*"}
212
- on:load={handle_upload}
213
- on:error
211
+ onload={handle_upload}
212
+ {onerror}
214
213
  {root}
215
214
  {max_file_size}
216
215
  disable_click={!sources.includes("upload") || value !== null}