@gradio/image 0.3.0-beta.5 → 0.3.0-beta.7
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 -30
- package/{example/Image.svelte → Example.svelte} +11 -13
- package/Image.stories.svelte +1 -1
- package/Index.svelte +155 -0
- package/package.json +10 -11
- package/shared/Image.svelte +24 -0
- package/{interactive/Image.svelte → shared/ImageEditor.svelte} +3 -3
- package/{static → shared}/ImagePreview.svelte +4 -5
- package/{interactive → shared}/Sketch.svelte +0 -2
- package/{interactive → shared}/Webcam.svelte +10 -6
- package/example/index.ts +0 -1
- package/interactive/InteractiveImage.svelte +0 -108
- package/interactive/index.ts +0 -2
- package/src/Image.svelte +0 -0
- package/static/StaticImage.svelte +0 -76
- package/static/index.ts +0 -1
- /package/{interactive → shared}/Cropper.svelte +0 -0
- /package/{interactive → shared}/ModifySketch.svelte +0 -0
- /package/{interactive → shared}/SketchSettings.svelte +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,53 +1,51 @@
|
|
|
1
1
|
# @gradio/image
|
|
2
2
|
|
|
3
|
-
## 0.3.0-beta.
|
|
4
|
-
|
|
5
|
-
### Features
|
|
6
|
-
|
|
7
|
-
- [#5648](https://github.com/gradio-app/gradio/pull/5648) [`c573e2339`](https://github.com/gradio-app/gradio/commit/c573e2339b86c85b378dc349de5e9223a3c3b04a) - Publish all components to npm. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
|
|
8
|
-
|
|
9
|
-
## 0.3.0-beta.4
|
|
3
|
+
## 0.3.0-beta.7
|
|
10
4
|
|
|
11
5
|
### Patch Changes
|
|
12
6
|
|
|
13
|
-
- Updated dependencies [[`
|
|
14
|
-
- @gradio/
|
|
15
|
-
- @gradio/atoms@0.2.0-beta.3
|
|
16
|
-
- @gradio/statustracker@0.3.0-beta.4
|
|
17
|
-
- @gradio/upload@0.3.0-beta.3
|
|
7
|
+
- Updated dependencies [[`174b73619`](https://github.com/gradio-app/gradio/commit/174b736194756e23f51bbaf6f850bac5f1ca95b5), [`5fbda0bd2`](https://github.com/gradio-app/gradio/commit/5fbda0bd2b2bbb2282249b8875d54acf87cd7e84)]:
|
|
8
|
+
- @gradio/wasm@0.2.0-beta.1
|
|
18
9
|
|
|
19
|
-
## 0.3.0-beta.
|
|
10
|
+
## 0.3.0-beta.6
|
|
20
11
|
|
|
21
|
-
###
|
|
12
|
+
### Features
|
|
22
13
|
|
|
23
|
-
-
|
|
24
|
-
|
|
25
|
-
- @gradio/atoms@0.2.0-beta.2
|
|
26
|
-
- @gradio/statustracker@0.3.0-beta.3
|
|
27
|
-
- @gradio/upload@0.3.0-beta.2
|
|
14
|
+
- [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files. Thanks [@pngwn](https://github.com/pngwn)!
|
|
15
|
+
- [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
|
|
28
16
|
|
|
29
|
-
## 0.
|
|
17
|
+
## 0.4.0
|
|
30
18
|
|
|
31
19
|
### Features
|
|
32
20
|
|
|
33
|
-
- [#
|
|
21
|
+
- [#5627](https://github.com/gradio-app/gradio/pull/5627) [`b67115e8e`](https://github.com/gradio-app/gradio/commit/b67115e8e6e489fffd5271ea830211863241ddc5) - Lite: Make the Examples component display media files using pseudo HTTP requests to the Wasm server. Thanks [@whitphx](https://github.com/whitphx)!
|
|
22
|
+
- [#5934](https://github.com/gradio-app/gradio/pull/5934) [`8d909624f`](https://github.com/gradio-app/gradio/commit/8d909624f61a49536e3c0f71cb2d9efe91216219) - Fix styling issues with Audio, Image and Video components. Thanks [@aliabd](https://github.com/aliabd)!
|
|
34
23
|
|
|
35
|
-
## 0.3.
|
|
24
|
+
## 0.3.2
|
|
36
25
|
|
|
37
26
|
### Patch Changes
|
|
38
27
|
|
|
39
28
|
- Updated dependencies []:
|
|
40
|
-
- @gradio/utils@0.2
|
|
41
|
-
- @gradio/atoms@0.
|
|
42
|
-
- @gradio/statustracker@0.
|
|
43
|
-
- @gradio/upload@0.3.
|
|
29
|
+
- @gradio/utils@0.1.2
|
|
30
|
+
- @gradio/atoms@0.1.4
|
|
31
|
+
- @gradio/statustracker@0.2.2
|
|
32
|
+
- @gradio/upload@0.3.2
|
|
33
|
+
|
|
34
|
+
## 0.3.1
|
|
35
|
+
|
|
36
|
+
### Patch Changes
|
|
37
|
+
|
|
38
|
+
- Updated dependencies [[`8f0fed857`](https://github.com/gradio-app/gradio/commit/8f0fed857d156830626eb48b469d54d211a582d2)]:
|
|
39
|
+
- @gradio/icons@0.2.0
|
|
40
|
+
- @gradio/atoms@0.1.3
|
|
41
|
+
- @gradio/statustracker@0.2.1
|
|
42
|
+
- @gradio/upload@0.3.1
|
|
44
43
|
|
|
45
|
-
## 0.3.0
|
|
44
|
+
## 0.3.0
|
|
46
45
|
|
|
47
46
|
### Features
|
|
48
47
|
|
|
49
|
-
- [#
|
|
50
|
-
- [#5589](https://github.com/gradio-app/gradio/pull/5589) [`af1b2f9ba`](https://github.com/gradio-app/gradio/commit/af1b2f9bafbacf2804fcfe68af6bb4b921442aca) - image fixes. Thanks [@pngwn](https://github.com/pngwn)!
|
|
48
|
+
- [#5554](https://github.com/gradio-app/gradio/pull/5554) [`75ddeb390`](https://github.com/gradio-app/gradio/commit/75ddeb390d665d4484667390a97442081b49a423) - Accessibility Improvements. Thanks [@hannahblair](https://github.com/hannahblair)!
|
|
51
49
|
|
|
52
50
|
## 0.2.4
|
|
53
51
|
|
|
@@ -119,4 +117,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
|
|
|
119
117
|
|
|
120
118
|
### Features
|
|
121
119
|
|
|
122
|
-
- [#4979](https://github.com/gradio-app/gradio/pull/4979) [`44ac8ad0`](https://github.com/gradio-app/gradio/commit/44ac8ad08d82ea12c503dde5c78f999eb0452de2) - Allow setting sketch color default. Thanks [@aliabid94](https://github.com/aliabid94)!
|
|
120
|
+
- [#4979](https://github.com/gradio-app/gradio/pull/4979) [`44ac8ad0`](https://github.com/gradio-app/gradio/commit/44ac8ad08d82ea12c503dde5c78f999eb0452de2) - Allow setting sketch color default. Thanks [@aliabid94](https://github.com/aliabid94)!
|
|
@@ -1,30 +1,27 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import Image from "./shared/Image.svelte";
|
|
3
|
+
|
|
2
4
|
export let value: string;
|
|
3
5
|
export let samples_dir: string;
|
|
4
6
|
export let type: "gallery" | "table";
|
|
5
7
|
export let selected = false;
|
|
6
8
|
</script>
|
|
7
9
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<img
|
|
11
|
-
src={samples_dir + value}
|
|
10
|
+
<div
|
|
11
|
+
class="container"
|
|
12
12
|
class:table={type === "table"}
|
|
13
13
|
class:gallery={type === "gallery"}
|
|
14
14
|
class:selected
|
|
15
|
-
|
|
15
|
+
>
|
|
16
|
+
<Image src={samples_dir + value} alt="" />
|
|
17
|
+
</div>
|
|
16
18
|
|
|
17
19
|
<style>
|
|
18
|
-
|
|
19
|
-
border-radius: var(--radius-lg);
|
|
20
|
-
max-width: none;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
img.selected {
|
|
20
|
+
.container.selected {
|
|
24
21
|
border-color: var(--border-color-accent);
|
|
25
22
|
}
|
|
26
23
|
|
|
27
|
-
.table {
|
|
24
|
+
.container.table {
|
|
28
25
|
margin: 0 auto;
|
|
29
26
|
border: 2px solid var(--border-color-primary);
|
|
30
27
|
border-radius: var(--radius-lg);
|
|
@@ -33,8 +30,9 @@
|
|
|
33
30
|
object-fit: cover;
|
|
34
31
|
}
|
|
35
32
|
|
|
36
|
-
.gallery {
|
|
33
|
+
.container.gallery {
|
|
37
34
|
border: 2px solid var(--border-color-primary);
|
|
35
|
+
height: var(--size-20);
|
|
38
36
|
max-height: var(--size-20);
|
|
39
37
|
object-fit: cover;
|
|
40
38
|
}
|
package/Image.stories.svelte
CHANGED
package/Index.svelte
ADDED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
<svelte:options accessors={true} />
|
|
2
|
+
|
|
3
|
+
<script context="module" lang="ts">
|
|
4
|
+
export { default as Webcam } from "./shared/Webcam.svelte";
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<script lang="ts">
|
|
8
|
+
import type { Gradio, SelectData } from "@gradio/utils";
|
|
9
|
+
import StaticImage from "./shared/ImagePreview.svelte";
|
|
10
|
+
import Image from "./shared/ImageEditor.svelte";
|
|
11
|
+
|
|
12
|
+
import { Block, UploadText } from "@gradio/atoms";
|
|
13
|
+
|
|
14
|
+
import { StatusTracker } from "@gradio/statustracker";
|
|
15
|
+
import type { FileData } from "js/upload/src";
|
|
16
|
+
import type { LoadingStatus } from "@gradio/statustracker";
|
|
17
|
+
|
|
18
|
+
export let elem_id = "";
|
|
19
|
+
export let elem_classes: string[] = [];
|
|
20
|
+
export let visible = true;
|
|
21
|
+
export let value: null | FileData = null;
|
|
22
|
+
export let label: string;
|
|
23
|
+
export let show_label: boolean;
|
|
24
|
+
export let show_download_button: boolean;
|
|
25
|
+
export let root: string;
|
|
26
|
+
|
|
27
|
+
export let height: number | undefined;
|
|
28
|
+
export let width: number | undefined;
|
|
29
|
+
|
|
30
|
+
export let selectable = false;
|
|
31
|
+
export let container = true;
|
|
32
|
+
export let scale: number | null = null;
|
|
33
|
+
export let min_width: number | undefined = undefined;
|
|
34
|
+
export let loading_status: LoadingStatus;
|
|
35
|
+
export let show_share_button = false;
|
|
36
|
+
|
|
37
|
+
export let mode: "static" | "interactive";
|
|
38
|
+
export let source: "canvas" | "webcam" | "upload" = "upload";
|
|
39
|
+
export let tool: "editor" | "select" | "sketch" | "color-sketch" = "editor";
|
|
40
|
+
export let streaming: boolean;
|
|
41
|
+
export let pending: boolean;
|
|
42
|
+
export let mirror_webcam: boolean;
|
|
43
|
+
export let shape: [number, number];
|
|
44
|
+
export let brush_radius: number;
|
|
45
|
+
export let brush_color: string;
|
|
46
|
+
export let mask_opacity: number;
|
|
47
|
+
|
|
48
|
+
export let gradio: Gradio<{
|
|
49
|
+
change: never;
|
|
50
|
+
error: string;
|
|
51
|
+
edit: never;
|
|
52
|
+
stream: never;
|
|
53
|
+
drag: never;
|
|
54
|
+
upload: never;
|
|
55
|
+
clear: never;
|
|
56
|
+
select: SelectData;
|
|
57
|
+
share: ShareData;
|
|
58
|
+
}>;
|
|
59
|
+
|
|
60
|
+
$: value, gradio.dispatch("change");
|
|
61
|
+
let dragging: boolean;
|
|
62
|
+
|
|
63
|
+
$: value = !value ? null : value;
|
|
64
|
+
|
|
65
|
+
const FIXED_HEIGHT = 240;
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
{#if mode === "static"}
|
|
69
|
+
<Block
|
|
70
|
+
{visible}
|
|
71
|
+
variant={"solid"}
|
|
72
|
+
border_mode={dragging ? "focus" : "base"}
|
|
73
|
+
padding={false}
|
|
74
|
+
{elem_id}
|
|
75
|
+
{elem_classes}
|
|
76
|
+
height={height || undefined}
|
|
77
|
+
{width}
|
|
78
|
+
allow_overflow={false}
|
|
79
|
+
{container}
|
|
80
|
+
{scale}
|
|
81
|
+
{min_width}
|
|
82
|
+
>
|
|
83
|
+
<StatusTracker
|
|
84
|
+
autoscroll={gradio.autoscroll}
|
|
85
|
+
i18n={gradio.i18n}
|
|
86
|
+
{...loading_status}
|
|
87
|
+
/>
|
|
88
|
+
<StaticImage
|
|
89
|
+
on:select={({ detail }) => gradio.dispatch("select", detail)}
|
|
90
|
+
on:share={({ detail }) => gradio.dispatch("share", detail)}
|
|
91
|
+
on:error={({ detail }) => gradio.dispatch("error", detail)}
|
|
92
|
+
{root}
|
|
93
|
+
{value}
|
|
94
|
+
{label}
|
|
95
|
+
{show_label}
|
|
96
|
+
{show_download_button}
|
|
97
|
+
{selectable}
|
|
98
|
+
{show_share_button}
|
|
99
|
+
i18n={gradio.i18n}
|
|
100
|
+
/>
|
|
101
|
+
</Block>
|
|
102
|
+
{:else}
|
|
103
|
+
<Block
|
|
104
|
+
{visible}
|
|
105
|
+
variant={value === null && source === "upload" ? "dashed" : "solid"}
|
|
106
|
+
border_mode={dragging ? "focus" : "base"}
|
|
107
|
+
padding={false}
|
|
108
|
+
{elem_id}
|
|
109
|
+
{elem_classes}
|
|
110
|
+
height={height || (source === "webcam" ? undefined : FIXED_HEIGHT)}
|
|
111
|
+
{width}
|
|
112
|
+
allow_overflow={false}
|
|
113
|
+
{container}
|
|
114
|
+
{scale}
|
|
115
|
+
{min_width}
|
|
116
|
+
>
|
|
117
|
+
<StatusTracker
|
|
118
|
+
autoscroll={gradio.autoscroll}
|
|
119
|
+
i18n={gradio.i18n}
|
|
120
|
+
{...loading_status}
|
|
121
|
+
/>
|
|
122
|
+
|
|
123
|
+
<Image
|
|
124
|
+
{brush_radius}
|
|
125
|
+
{brush_color}
|
|
126
|
+
{shape}
|
|
127
|
+
bind:value
|
|
128
|
+
{source}
|
|
129
|
+
{tool}
|
|
130
|
+
{selectable}
|
|
131
|
+
{mask_opacity}
|
|
132
|
+
{root}
|
|
133
|
+
on:edit={() => gradio.dispatch("edit")}
|
|
134
|
+
on:clear={() => gradio.dispatch("clear")}
|
|
135
|
+
on:stream={() => gradio.dispatch("stream")}
|
|
136
|
+
on:drag={({ detail }) => (dragging = detail)}
|
|
137
|
+
on:upload={() => gradio.dispatch("upload")}
|
|
138
|
+
on:select={({ detail }) => gradio.dispatch("select", detail)}
|
|
139
|
+
on:share={({ detail }) => gradio.dispatch("share", detail)}
|
|
140
|
+
on:error={({ detail }) => {
|
|
141
|
+
loading_status = loading_status || {};
|
|
142
|
+
loading_status.status = "error";
|
|
143
|
+
gradio.dispatch("error", detail);
|
|
144
|
+
}}
|
|
145
|
+
{label}
|
|
146
|
+
{show_label}
|
|
147
|
+
{pending}
|
|
148
|
+
{streaming}
|
|
149
|
+
{mirror_webcam}
|
|
150
|
+
i18n={gradio.i18n}
|
|
151
|
+
>
|
|
152
|
+
<UploadText i18n={gradio.i18n} type="image" />
|
|
153
|
+
</Image>
|
|
154
|
+
</Block>
|
|
155
|
+
{/if}
|
package/package.json
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/image",
|
|
3
|
-
"version": "0.3.0-beta.
|
|
3
|
+
"version": "0.3.0-beta.7",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "./index.svelte",
|
|
7
6
|
"author": "",
|
|
8
7
|
"license": "ISC",
|
|
9
8
|
"private": false,
|
|
@@ -11,17 +10,17 @@
|
|
|
11
10
|
"cropperjs": "^1.5.12",
|
|
12
11
|
"lazy-brush": "^1.0.1",
|
|
13
12
|
"resize-observer-polyfill": "^1.5.1",
|
|
14
|
-
"@gradio/atoms": "^0.2.0-beta.
|
|
15
|
-
"@gradio/icons": "^0.2.0-beta.
|
|
16
|
-
"@gradio/statustracker": "^0.3.0-beta.
|
|
17
|
-
"@gradio/upload": "^0.3.0-beta.
|
|
18
|
-
"@gradio/utils": "^0.2.0-beta.
|
|
13
|
+
"@gradio/atoms": "^0.2.0-beta.4",
|
|
14
|
+
"@gradio/icons": "^0.2.0-beta.1",
|
|
15
|
+
"@gradio/statustracker": "^0.3.0-beta.6",
|
|
16
|
+
"@gradio/upload": "^0.3.0-beta.4",
|
|
17
|
+
"@gradio/utils": "^0.2.0-beta.4",
|
|
18
|
+
"@gradio/wasm": "^0.2.0-beta.1"
|
|
19
19
|
},
|
|
20
20
|
"main_changeset": true,
|
|
21
21
|
"exports": {
|
|
22
|
-
"
|
|
23
|
-
"./
|
|
24
|
-
"./
|
|
25
|
-
"./example": "./example/index.ts"
|
|
22
|
+
".": "./Index.svelte",
|
|
23
|
+
"./example": "./Example.svelte",
|
|
24
|
+
"./package.json": "./package.json"
|
|
26
25
|
}
|
|
27
26
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLImgAttributes } from "svelte/elements";
|
|
3
|
+
type $$Props = HTMLImgAttributes;
|
|
4
|
+
|
|
5
|
+
import { resolve_wasm_src } from "@gradio/wasm/svelte";
|
|
6
|
+
|
|
7
|
+
export let src: HTMLImgAttributes["src"] = undefined;
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
{#await resolve_wasm_src(src) then resolved_src}
|
|
11
|
+
<!-- svelte-ignore a11y-missing-attribute -->
|
|
12
|
+
<img src={resolved_src} {...$$restProps} />
|
|
13
|
+
{:catch error}
|
|
14
|
+
<p style="color: red;">{error.message}</p>
|
|
15
|
+
{/await}
|
|
16
|
+
|
|
17
|
+
<style>
|
|
18
|
+
img {
|
|
19
|
+
max-width: 100%;
|
|
20
|
+
max-height: 100%;
|
|
21
|
+
border-radius: var(--radius-lg);
|
|
22
|
+
max-width: none;
|
|
23
|
+
}
|
|
24
|
+
</style>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { BlockLabel } from "@gradio/atoms";
|
|
5
5
|
import { Image, Sketch as SketchIcon } from "@gradio/icons";
|
|
6
6
|
import type { SelectData, I18nFormatter } from "@gradio/utils";
|
|
7
|
-
import { get_coordinates_of_clicked_image } from "
|
|
7
|
+
import { get_coordinates_of_clicked_image } from "./utils";
|
|
8
8
|
|
|
9
9
|
import Cropper from "./Cropper.svelte";
|
|
10
10
|
import Sketch from "./Sketch.svelte";
|
|
@@ -301,8 +301,8 @@
|
|
|
301
301
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
302
302
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions-->
|
|
303
303
|
<img
|
|
304
|
-
src={value.image || value
|
|
305
|
-
alt="
|
|
304
|
+
src={value.image || value}
|
|
305
|
+
alt=""
|
|
306
306
|
class:webcam={source === "webcam" && mirror_webcam}
|
|
307
307
|
class:selectable
|
|
308
308
|
on:click={handle_click}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { uploadToHuggingFace } from "@gradio/utils";
|
|
5
5
|
import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
|
|
6
6
|
import { Download } from "@gradio/icons";
|
|
7
|
-
import { get_coordinates_of_clicked_image } from "
|
|
7
|
+
import { get_coordinates_of_clicked_image } from "./utils";
|
|
8
8
|
|
|
9
9
|
import { Image } from "@gradio/icons";
|
|
10
10
|
import { type FileData, normalise_file } from "@gradio/upload";
|
|
@@ -68,10 +68,9 @@
|
|
|
68
68
|
/>
|
|
69
69
|
{/if}
|
|
70
70
|
</div>
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<img src={value_.data} alt="" class:selectable on:click={handle_click} loading="lazy"/>
|
|
71
|
+
<button on:click={handle_click}>
|
|
72
|
+
<img src={value_.data} alt="" class:selectable loading="lazy" />
|
|
73
|
+
</button>
|
|
75
74
|
{/if}
|
|
76
75
|
|
|
77
76
|
<style>
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
try {
|
|
35
35
|
stream = await navigator.mediaDevices.getUserMedia({
|
|
36
36
|
video: true,
|
|
37
|
-
audio: include_audio
|
|
37
|
+
audio: include_audio,
|
|
38
38
|
});
|
|
39
39
|
video_source.srcObject = stream;
|
|
40
40
|
video_source.muted = true;
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
return;
|
|
106
106
|
}
|
|
107
107
|
media_recorder = new MediaRecorder(stream, {
|
|
108
|
-
mimeType: mimeType
|
|
108
|
+
mimeType: mimeType,
|
|
109
109
|
});
|
|
110
110
|
media_recorder.addEventListener("dataavailable", function (e) {
|
|
111
111
|
recorded_blobs.push(e.data);
|
|
@@ -128,21 +128,25 @@
|
|
|
128
128
|
|
|
129
129
|
<div class="wrap">
|
|
130
130
|
<!-- svelte-ignore a11y-media-has-caption -->
|
|
131
|
+
<!-- need to suppress for video streaming https://github.com/sveltejs/svelte/issues/5967 -->
|
|
131
132
|
<video bind:this={video_source} class:flip={mirror_webcam} />
|
|
132
133
|
{#if !streaming}
|
|
133
|
-
<button
|
|
134
|
+
<button
|
|
135
|
+
on:click={mode === "image" ? take_picture : take_recording}
|
|
136
|
+
aria-label={mode === "image" ? "capture photo" : "start recording"}
|
|
137
|
+
>
|
|
134
138
|
{#if mode === "video"}
|
|
135
139
|
{#if recording}
|
|
136
|
-
<div class="icon">
|
|
140
|
+
<div class="icon" title="stop recording">
|
|
137
141
|
<Square />
|
|
138
142
|
</div>
|
|
139
143
|
{:else}
|
|
140
|
-
<div class="icon">
|
|
144
|
+
<div class="icon" title="start recording">
|
|
141
145
|
<Circle />
|
|
142
146
|
</div>
|
|
143
147
|
{/if}
|
|
144
148
|
{:else}
|
|
145
|
-
<div class="icon">
|
|
149
|
+
<div class="icon" title="capture photo">
|
|
146
150
|
<Camera />
|
|
147
151
|
</div>
|
|
148
152
|
{/if}
|
package/example/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./Image.svelte";
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
<svelte:options accessors={true} />
|
|
2
|
-
|
|
3
|
-
<script lang="ts">
|
|
4
|
-
import type { Gradio, SelectData, ShareData } from "@gradio/utils";
|
|
5
|
-
import Image from "./Image.svelte";
|
|
6
|
-
|
|
7
|
-
import { Block } from "@gradio/atoms";
|
|
8
|
-
|
|
9
|
-
import { StatusTracker } from "@gradio/statustracker";
|
|
10
|
-
import type { LoadingStatus } from "@gradio/statustracker";
|
|
11
|
-
import { UploadText } from "@gradio/atoms";
|
|
12
|
-
import type { FileData } from "js/upload/src";
|
|
13
|
-
|
|
14
|
-
export let elem_id = "";
|
|
15
|
-
export let elem_classes: string[] = [];
|
|
16
|
-
export let visible = true;
|
|
17
|
-
export let value: null | FileData = null;
|
|
18
|
-
export let source: "canvas" | "webcam" | "upload" = "upload";
|
|
19
|
-
export let tool: "editor" | "select" | "sketch" | "color-sketch" = "editor";
|
|
20
|
-
export let label: string;
|
|
21
|
-
export let show_label: boolean;
|
|
22
|
-
export let streaming: boolean;
|
|
23
|
-
export let pending: boolean;
|
|
24
|
-
export let height: number | undefined;
|
|
25
|
-
export let width: number | undefined;
|
|
26
|
-
export let mirror_webcam: boolean;
|
|
27
|
-
export let shape: [number, number];
|
|
28
|
-
export let brush_radius: number;
|
|
29
|
-
export let brush_color: string;
|
|
30
|
-
export let mask_opacity: number;
|
|
31
|
-
export let selectable = false;
|
|
32
|
-
export let container = true;
|
|
33
|
-
export let scale: number | null = null;
|
|
34
|
-
export let min_width: number | undefined = undefined;
|
|
35
|
-
export let loading_status: LoadingStatus;
|
|
36
|
-
export let root: string;
|
|
37
|
-
|
|
38
|
-
export let gradio: Gradio<{
|
|
39
|
-
change: never;
|
|
40
|
-
error: string;
|
|
41
|
-
edit: never;
|
|
42
|
-
stream: never;
|
|
43
|
-
drag: never;
|
|
44
|
-
upload: never;
|
|
45
|
-
clear: never;
|
|
46
|
-
select: SelectData;
|
|
47
|
-
share: ShareData;
|
|
48
|
-
}>;
|
|
49
|
-
|
|
50
|
-
$: value, gradio.dispatch("change");
|
|
51
|
-
let dragging: boolean;
|
|
52
|
-
const FIXED_HEIGHT = 240;
|
|
53
|
-
|
|
54
|
-
$: value = !value ? null : value;
|
|
55
|
-
</script>
|
|
56
|
-
|
|
57
|
-
<Block
|
|
58
|
-
{visible}
|
|
59
|
-
variant={value === null && source === "upload" ? "dashed" : "solid"}
|
|
60
|
-
border_mode={dragging ? "focus" : "base"}
|
|
61
|
-
padding={false}
|
|
62
|
-
{elem_id}
|
|
63
|
-
{elem_classes}
|
|
64
|
-
height={height || (source === "webcam" ? undefined : FIXED_HEIGHT)}
|
|
65
|
-
{width}
|
|
66
|
-
allow_overflow={false}
|
|
67
|
-
{container}
|
|
68
|
-
{scale}
|
|
69
|
-
{min_width}
|
|
70
|
-
>
|
|
71
|
-
<StatusTracker
|
|
72
|
-
autoscroll={gradio.autoscroll}
|
|
73
|
-
i18n={gradio.i18n}
|
|
74
|
-
{...loading_status}
|
|
75
|
-
/>
|
|
76
|
-
|
|
77
|
-
<Image
|
|
78
|
-
{brush_radius}
|
|
79
|
-
{brush_color}
|
|
80
|
-
{shape}
|
|
81
|
-
bind:value
|
|
82
|
-
{source}
|
|
83
|
-
{tool}
|
|
84
|
-
{selectable}
|
|
85
|
-
{mask_opacity}
|
|
86
|
-
{root}
|
|
87
|
-
on:edit={() => gradio.dispatch("edit")}
|
|
88
|
-
on:clear={() => gradio.dispatch("clear")}
|
|
89
|
-
on:stream={() => gradio.dispatch("stream")}
|
|
90
|
-
on:drag={({ detail }) => (dragging = detail)}
|
|
91
|
-
on:upload={() => gradio.dispatch("upload")}
|
|
92
|
-
on:select={({ detail }) => gradio.dispatch("select", detail)}
|
|
93
|
-
on:share={({ detail }) => gradio.dispatch("share", detail)}
|
|
94
|
-
on:error={({ detail }) => {
|
|
95
|
-
loading_status = loading_status || {};
|
|
96
|
-
loading_status.status = "error";
|
|
97
|
-
gradio.dispatch("error", detail);
|
|
98
|
-
}}
|
|
99
|
-
{label}
|
|
100
|
-
{show_label}
|
|
101
|
-
{pending}
|
|
102
|
-
{streaming}
|
|
103
|
-
{mirror_webcam}
|
|
104
|
-
i18n={gradio.i18n}
|
|
105
|
-
>
|
|
106
|
-
<UploadText i18n={gradio.i18n} type="image" />
|
|
107
|
-
</Image>
|
|
108
|
-
</Block>
|
package/interactive/index.ts
DELETED
package/src/Image.svelte
DELETED
|
File without changes
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
<svelte:options accessors={true} />
|
|
2
|
-
|
|
3
|
-
<script lang="ts">
|
|
4
|
-
import type { Gradio, SelectData } from "@gradio/utils";
|
|
5
|
-
import StaticImage from "./ImagePreview.svelte";
|
|
6
|
-
|
|
7
|
-
import { Block } from "@gradio/atoms";
|
|
8
|
-
|
|
9
|
-
import { StatusTracker } from "@gradio/statustracker";
|
|
10
|
-
import type { FileData } from "js/upload/src";
|
|
11
|
-
import type { LoadingStatus } from "@gradio/statustracker";
|
|
12
|
-
|
|
13
|
-
export let elem_id = "";
|
|
14
|
-
export let elem_classes: string[] = [];
|
|
15
|
-
export let visible = true;
|
|
16
|
-
export let value: null | FileData = null;
|
|
17
|
-
export let label: string;
|
|
18
|
-
export let show_label: boolean;
|
|
19
|
-
export let show_download_button: boolean;
|
|
20
|
-
export let root: string;
|
|
21
|
-
|
|
22
|
-
export let height: number | undefined;
|
|
23
|
-
export let width: number | undefined;
|
|
24
|
-
|
|
25
|
-
export let selectable = false;
|
|
26
|
-
export let container = true;
|
|
27
|
-
export let scale: number | null = null;
|
|
28
|
-
export let min_width: number | undefined = undefined;
|
|
29
|
-
export let loading_status: LoadingStatus;
|
|
30
|
-
export let show_share_button = false;
|
|
31
|
-
export let gradio: Gradio<{
|
|
32
|
-
change: never;
|
|
33
|
-
error: string;
|
|
34
|
-
select: SelectData;
|
|
35
|
-
share: ShareData;
|
|
36
|
-
}>;
|
|
37
|
-
|
|
38
|
-
$: value, gradio.dispatch("change");
|
|
39
|
-
let dragging: boolean;
|
|
40
|
-
|
|
41
|
-
$: value = !value ? null : value;
|
|
42
|
-
</script>
|
|
43
|
-
|
|
44
|
-
<Block
|
|
45
|
-
{visible}
|
|
46
|
-
variant={"solid"}
|
|
47
|
-
border_mode={dragging ? "focus" : "base"}
|
|
48
|
-
padding={false}
|
|
49
|
-
{elem_id}
|
|
50
|
-
{elem_classes}
|
|
51
|
-
height={height || undefined}
|
|
52
|
-
{width}
|
|
53
|
-
allow_overflow={false}
|
|
54
|
-
{container}
|
|
55
|
-
{scale}
|
|
56
|
-
{min_width}
|
|
57
|
-
>
|
|
58
|
-
<StatusTracker
|
|
59
|
-
autoscroll={gradio.autoscroll}
|
|
60
|
-
i18n={gradio.i18n}
|
|
61
|
-
{...loading_status}
|
|
62
|
-
/>
|
|
63
|
-
<StaticImage
|
|
64
|
-
on:select={({ detail }) => gradio.dispatch("select", detail)}
|
|
65
|
-
on:share={({ detail }) => gradio.dispatch("share", detail)}
|
|
66
|
-
on:error={({ detail }) => gradio.dispatch("error", detail)}
|
|
67
|
-
{root}
|
|
68
|
-
{value}
|
|
69
|
-
{label}
|
|
70
|
-
{show_label}
|
|
71
|
-
{show_download_button}
|
|
72
|
-
{selectable}
|
|
73
|
-
{show_share_button}
|
|
74
|
-
i18n={gradio.i18n}
|
|
75
|
-
/>
|
|
76
|
-
</Block>
|
package/static/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./StaticImage.svelte";
|
|
File without changes
|
|
File without changes
|
|
File without changes
|