@gradio/annotatedimage 0.10.1-dev.0 → 0.10.1-dev.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 (8) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/Index.svelte +43 -85
  3. package/dist/Index.svelte +71 -90
  4. package/dist/Index.svelte.d.ts +3 -45
  5. package/dist/types.d.ts +24 -0
  6. package/dist/types.js +1 -0
  7. package/package.json +9 -9
  8. package/types.ts +25 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @gradio/annotatedimage
2
2
 
3
+ ## 0.10.1-dev.2
4
+
5
+ ### Dependency updates
6
+
7
+ - @gradio/atoms@0.19.0-dev.1
8
+ - @gradio/client@2.0.0-dev.2
9
+ - @gradio/statustracker@0.12.0-dev.1
10
+ - @gradio/upload@0.17.2-dev.2
11
+
12
+ ## 0.10.1-dev.1
13
+
14
+ ### Dependency updates
15
+
16
+ - @gradio/atoms@0.18.2-dev.0
17
+ - @gradio/upload@0.17.2-dev.1
18
+ - @gradio/utils@0.10.3-dev.0
19
+ - @gradio/statustracker@0.12.0-dev.0
20
+ - @gradio/icons@0.15.0-dev.0
21
+
22
+ ## 0.10.1-dev.0
23
+
24
+ ### Dependency updates
25
+
26
+ - @gradio/client@2.0.0-dev.1
27
+
3
28
  ## 0.10.1-dev.0
4
29
 
5
30
  ### Dependency updates
package/Index.svelte CHANGED
@@ -1,6 +1,4 @@
1
1
  <script lang="ts">
2
- import type { Gradio, SelectData } from "@gradio/utils";
3
-
4
2
  import {
5
3
  Block,
6
4
  BlockLabel,
@@ -10,112 +8,70 @@
10
8
  } from "@gradio/atoms";
11
9
  import { Image } from "@gradio/icons";
12
10
  import { StatusTracker } from "@gradio/statustracker";
13
- import type { LoadingStatus } from "@gradio/statustracker";
14
- import { type FileData } from "@gradio/client";
11
+ import { Gradio } from "@gradio/utils";
12
+ import type { AnnotatedImageProps, AnnotatedImageEvents } from "./types";
15
13
 
16
- export let elem_id = "";
17
- export let elem_classes: string[] = [];
18
- export let visible: boolean | "hidden" = true;
19
- export let value: {
20
- image: FileData;
21
- annotations: { image: FileData; label: string }[] | [];
22
- } | null = null;
23
- let old_value: {
24
- image: FileData;
25
- annotations: { image: FileData; label: string }[] | [];
26
- } | null = null;
27
- let _value: {
28
- image: FileData;
29
- annotations: { image: FileData; label: string }[];
30
- } | null = null;
31
- export let gradio: Gradio<{
32
- change: undefined;
33
- select: SelectData;
34
- }>;
35
- export let label = gradio.i18n("annotated_image.annotated_image");
36
- export let show_label = true;
37
- export let show_legend = true;
38
- export let height: number | undefined;
39
- export let width: number | undefined;
40
- export let color_map: Record<string, string>;
41
- export let container = true;
42
- export let scale: number | null = null;
43
- export let min_width: number | undefined = undefined;
44
- let active: string | null = null;
45
- export let loading_status: LoadingStatus;
46
- export let buttons: string[] | null = null;
14
+ const props = $props();
15
+ const gradio = new Gradio<AnnotatedImageEvents, AnnotatedImageProps>(props);
47
16
 
17
+ let old_value = $state(gradio.props.value);
18
+ let active: string | null = $state(null);
48
19
  let image_container: HTMLElement;
49
- let fullscreen = false;
20
+ let fullscreen = $state(false);
21
+ let label = $derived(
22
+ gradio.shared.label || gradio.i18n("annotated_image.annotated_image")
23
+ );
50
24
 
51
- // `value` can be updated before the Promises from `resolve_wasm_src` are resolved.
52
- // In such a case, the resolved values for the old `value` have to be discarded,
53
- // This variable `latest_promise` is used to pick up only the values resolved for the latest `value`.
54
- let latest_promise: Promise<unknown> | null = null;
55
- $: {
56
- if (value !== old_value) {
57
- old_value = value;
25
+ $effect(() => {
26
+ if (old_value != gradio.props.value) {
27
+ old_value = gradio.props.value;
58
28
  gradio.dispatch("change");
59
29
  }
60
- if (value) {
61
- const normalized_value = {
62
- image: value.image as FileData,
63
- annotations: value.annotations.map((ann) => ({
64
- image: ann.image as FileData,
65
- label: ann.label
66
- }))
67
- };
68
- _value = normalized_value;
69
- } else {
70
- _value = null;
71
- }
72
- }
30
+ });
31
+
73
32
  function handle_mouseover(_label: string): void {
74
33
  active = _label;
75
34
  }
35
+
76
36
  function handle_mouseout(): void {
77
37
  active = null;
78
38
  }
79
39
 
80
40
  function handle_click(i: number, value: string): void {
81
41
  gradio.dispatch("select", {
82
- value: label,
42
+ value: value,
83
43
  index: i
84
44
  });
85
45
  }
86
46
  </script>
87
47
 
88
48
  <Block
89
- {visible}
90
- {elem_id}
91
- {elem_classes}
49
+ visible={gradio.shared.visible}
50
+ elem_id={gradio.shared.elem_id}
51
+ elem_classes={gradio.shared.elem_classes}
92
52
  padding={false}
93
- {height}
94
- {width}
53
+ height={gradio.props.height}
54
+ width={gradio.props.width}
95
55
  allow_overflow={false}
96
- {container}
97
- {scale}
98
- {min_width}
56
+ container={gradio.shared.container}
57
+ scale={gradio.shared.scale}
58
+ min_width={gradio.shared.min_width}
99
59
  bind:fullscreen
100
60
  >
101
61
  <StatusTracker
102
- autoscroll={gradio.autoscroll}
62
+ autoscroll={gradio.shared.autoscroll}
103
63
  i18n={gradio.i18n}
104
- {...loading_status}
105
- />
106
- <BlockLabel
107
- {show_label}
108
- Icon={Image}
109
- label={label || gradio.i18n("image.image")}
64
+ {...gradio.shared.loading_status}
110
65
  />
66
+ <BlockLabel show_label={gradio.shared.show_label} Icon={Image} {label} />
111
67
 
112
68
  <div class="container">
113
- {#if _value == null}
69
+ {#if gradio.props.value == null}
114
70
  <Empty size="large" unpadded_box={true}><Image /></Empty>
115
71
  {:else}
116
72
  <div class="image-container" bind:this={image_container}>
117
73
  <IconButtonWrapper>
118
- {#if buttons?.includes("fullscreen") ?? true}
74
+ {#if gradio.props.buttons.includes("fullscreen") ?? true}
119
75
  <FullscreenButton
120
76
  {fullscreen}
121
77
  on:fullscreen={({ detail }) => {
@@ -127,35 +83,37 @@
127
83
 
128
84
  <img
129
85
  class="base-image"
130
- class:fit-height={height && !fullscreen}
131
- src={_value ? _value.image.url : null}
86
+ class:fit-height={gradio.props.height && !fullscreen}
87
+ src={gradio.props.value ? gradio.props.value.image.url : null}
132
88
  alt="the base file that is annotated"
133
89
  />
134
- {#each _value ? _value?.annotations : [] as ann, i}
90
+ {#each gradio.props.value ? gradio.props.value.annotations : [] as ann, i}
135
91
  <img
136
- alt="segmentation mask identifying {label} within the uploaded file"
92
+ alt="segmentation mask identifying {gradio.shared
93
+ .label} within the uploaded file"
137
94
  class="mask fit-height"
138
95
  class:fit-height={!fullscreen}
139
96
  class:active={active == ann.label}
140
97
  class:inactive={active != ann.label && active != null}
141
98
  src={ann.image.url}
142
- style={color_map && ann.label in color_map
99
+ style={gradio.props.color_map && ann.label in gradio.props.color_map
143
100
  ? null
144
101
  : `filter: hue-rotate(${Math.round(
145
- (i * 360) / _value?.annotations.length
102
+ (i * 360) / (gradio.props.value?.annotations.length ?? 1)
146
103
  )}deg);`}
147
104
  />
148
105
  {/each}
149
106
  </div>
150
- {#if show_legend && _value}
107
+ {#if gradio.props.show_legend && gradio.props.value}
151
108
  <div class="legend">
152
- {#each _value.annotations as ann, i}
109
+ {#each gradio.props.value.annotations as ann, i}
153
110
  <button
154
111
  class="legend-item"
155
- style="background-color: {color_map && ann.label in color_map
156
- ? color_map[ann.label] + '88'
112
+ style="background-color: {gradio.props.color_map &&
113
+ ann.label in gradio.props.color_map
114
+ ? gradio.props.color_map[ann.label] + '88'
157
115
  : `hsla(${Math.round(
158
- (i * 360) / _value.annotations.length
116
+ (i * 360) / gradio.props.value.annotations.length
159
117
  )}, 100%, 50%, 0.3)`}"
160
118
  on:mouseover={() => handle_mouseover(ann.label)}
161
119
  on:focus={() => handle_mouseover(ann.label)}
package/dist/Index.svelte CHANGED
@@ -1,98 +1,77 @@
1
- <script>import {
2
- Block,
3
- BlockLabel,
4
- Empty,
5
- IconButtonWrapper,
6
- FullscreenButton
7
- } from "@gradio/atoms";
8
- import { Image } from "@gradio/icons";
9
- import { StatusTracker } from "@gradio/statustracker";
10
- import {} from "@gradio/client";
11
- export let elem_id = "";
12
- export let elem_classes = [];
13
- export let visible = true;
14
- export let value = null;
15
- let old_value = null;
16
- let _value = null;
17
- export let gradio;
18
- export let label = gradio.i18n("annotated_image.annotated_image");
19
- export let show_label = true;
20
- export let show_legend = true;
21
- export let height;
22
- export let width;
23
- export let color_map;
24
- export let container = true;
25
- export let scale = null;
26
- export let min_width = void 0;
27
- let active = null;
28
- export let loading_status;
29
- export let buttons = null;
30
- let image_container;
31
- let fullscreen = false;
32
- let latest_promise = null;
33
- $: {
34
- if (value !== old_value) {
35
- old_value = value;
36
- gradio.dispatch("change");
37
- }
38
- if (value) {
39
- const normalized_value = {
40
- image: value.image,
41
- annotations: value.annotations.map((ann) => ({
42
- image: ann.image,
43
- label: ann.label
44
- }))
45
- };
46
- _value = normalized_value;
47
- } else {
48
- _value = null;
49
- }
50
- }
51
- function handle_mouseover(_label) {
52
- active = _label;
53
- }
54
- function handle_mouseout() {
55
- active = null;
56
- }
57
- function handle_click(i, value2) {
58
- gradio.dispatch("select", {
59
- value: label,
60
- index: i
61
- });
62
- }
1
+ <script lang="ts">
2
+ import {
3
+ Block,
4
+ BlockLabel,
5
+ Empty,
6
+ IconButtonWrapper,
7
+ FullscreenButton
8
+ } from "@gradio/atoms";
9
+ import { Image } from "@gradio/icons";
10
+ import { StatusTracker } from "@gradio/statustracker";
11
+ import { Gradio } from "@gradio/utils";
12
+ import type { AnnotatedImageProps, AnnotatedImageEvents } from "./types";
13
+
14
+ const props = $props();
15
+ const gradio = new Gradio<AnnotatedImageEvents, AnnotatedImageProps>(props);
16
+
17
+ let old_value = $state(gradio.props.value);
18
+ let active: string | null = $state(null);
19
+ let image_container: HTMLElement;
20
+ let fullscreen = $state(false);
21
+ let label = $derived(
22
+ gradio.shared.label || gradio.i18n("annotated_image.annotated_image")
23
+ );
24
+
25
+ $effect(() => {
26
+ if (old_value != gradio.props.value) {
27
+ old_value = gradio.props.value;
28
+ gradio.dispatch("change");
29
+ }
30
+ });
31
+
32
+ function handle_mouseover(_label: string): void {
33
+ active = _label;
34
+ }
35
+
36
+ function handle_mouseout(): void {
37
+ active = null;
38
+ }
39
+
40
+ function handle_click(i: number, value: string): void {
41
+ gradio.dispatch("select", {
42
+ value: value,
43
+ index: i
44
+ });
45
+ }
63
46
  </script>
64
47
 
65
48
  <Block
66
- {visible}
67
- {elem_id}
68
- {elem_classes}
49
+ visible={gradio.shared.visible}
50
+ elem_id={gradio.shared.elem_id}
51
+ elem_classes={gradio.shared.elem_classes}
69
52
  padding={false}
70
- {height}
71
- {width}
53
+ height={gradio.props.height}
54
+ width={gradio.props.width}
72
55
  allow_overflow={false}
73
- {container}
74
- {scale}
75
- {min_width}
56
+ container={gradio.shared.container}
57
+ scale={gradio.shared.scale}
58
+ min_width={gradio.shared.min_width}
76
59
  bind:fullscreen
77
60
  >
78
61
  <StatusTracker
79
- autoscroll={gradio.autoscroll}
62
+ autoscroll={gradio.shared.autoscroll}
80
63
  i18n={gradio.i18n}
81
- {...loading_status}
82
- />
83
- <BlockLabel
84
- {show_label}
85
- Icon={Image}
86
- label={label || gradio.i18n("image.image")}
64
+ {...gradio.shared.loading_status}
87
65
  />
66
+ <BlockLabel show_label={gradio.shared.show_label} Icon={Image} {label} />
88
67
 
89
68
  <div class="container">
90
- {#if _value == null}
69
+ {#if gradio.props.value == null}
91
70
  <Empty size="large" unpadded_box={true}><Image /></Empty>
92
71
  {:else}
93
72
  <div class="image-container" bind:this={image_container}>
94
73
  <IconButtonWrapper>
95
- {#if buttons?.includes("fullscreen") ?? true}
74
+ {#if gradio.props.buttons.includes("fullscreen") ?? true}
96
75
  <FullscreenButton
97
76
  {fullscreen}
98
77
  on:fullscreen={({ detail }) => {
@@ -104,35 +83,37 @@ function handle_click(i, value2) {
104
83
 
105
84
  <img
106
85
  class="base-image"
107
- class:fit-height={height && !fullscreen}
108
- src={_value ? _value.image.url : null}
86
+ class:fit-height={gradio.props.height && !fullscreen}
87
+ src={gradio.props.value ? gradio.props.value.image.url : null}
109
88
  alt="the base file that is annotated"
110
89
  />
111
- {#each _value ? _value?.annotations : [] as ann, i}
90
+ {#each gradio.props.value ? gradio.props.value.annotations : [] as ann, i}
112
91
  <img
113
- alt="segmentation mask identifying {label} within the uploaded file"
92
+ alt="segmentation mask identifying {gradio.shared
93
+ .label} within the uploaded file"
114
94
  class="mask fit-height"
115
95
  class:fit-height={!fullscreen}
116
96
  class:active={active == ann.label}
117
97
  class:inactive={active != ann.label && active != null}
118
98
  src={ann.image.url}
119
- style={color_map && ann.label in color_map
99
+ style={gradio.props.color_map && ann.label in gradio.props.color_map
120
100
  ? null
121
101
  : `filter: hue-rotate(${Math.round(
122
- (i * 360) / _value?.annotations.length
102
+ (i * 360) / (gradio.props.value?.annotations.length ?? 1)
123
103
  )}deg);`}
124
104
  />
125
105
  {/each}
126
106
  </div>
127
- {#if show_legend && _value}
107
+ {#if gradio.props.show_legend && gradio.props.value}
128
108
  <div class="legend">
129
- {#each _value.annotations as ann, i}
109
+ {#each gradio.props.value.annotations as ann, i}
130
110
  <button
131
111
  class="legend-item"
132
- style="background-color: {color_map && ann.label in color_map
133
- ? color_map[ann.label] + '88'
112
+ style="background-color: {gradio.props.color_map &&
113
+ ann.label in gradio.props.color_map
114
+ ? gradio.props.color_map[ann.label] + '88'
134
115
  : `hsla(${Math.round(
135
- (i * 360) / _value.annotations.length
116
+ (i * 360) / gradio.props.value.annotations.length
136
117
  )}, 100%, 50%, 0.3)`}"
137
118
  on:mouseover={() => handle_mouseover(ann.label)}
138
119
  on:focus={() => handle_mouseover(ann.label)}
package/dist/Index.svelte.d.ts CHANGED
@@ -1,45 +1,3 @@
1
- import { SvelteComponent } from "svelte";
2
- import type { Gradio, SelectData } from "@gradio/utils";
3
- import type { LoadingStatus } from "@gradio/statustracker";
4
- import { type FileData } from "@gradio/client";
5
- declare const __propDef: {
6
- props: {
7
- elem_id?: string;
8
- elem_classes?: string[];
9
- visible?: boolean | "hidden";
10
- value?: {
11
- image: FileData;
12
- annotations: {
13
- image: FileData;
14
- label: string;
15
- }[] | [];
16
- } | null;
17
- gradio: Gradio<{
18
- change: undefined;
19
- select: SelectData;
20
- }>;
21
- label?: any;
22
- show_label?: boolean;
23
- show_legend?: boolean;
24
- height: number | undefined;
25
- width: number | undefined;
26
- color_map: Record<string, string>;
27
- container?: boolean;
28
- scale?: number | null;
29
- min_width?: number | undefined;
30
- loading_status: LoadingStatus;
31
- buttons?: string[] | null;
32
- };
33
- events: {
34
- [evt: string]: CustomEvent<any>;
35
- };
36
- slots: {};
37
- exports?: {} | undefined;
38
- bindings?: string | undefined;
39
- };
40
- export type IndexProps = typeof __propDef.props;
41
- export type IndexEvents = typeof __propDef.events;
42
- export type IndexSlots = typeof __propDef.slots;
43
- export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
44
- }
45
- export {};
1
+ declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
2
+ type Index = ReturnType<typeof Index>;
3
+ export default Index;
package/dist/types.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import type { FileData } from "@gradio/client";
2
+ export interface Annotation {
3
+ image: FileData;
4
+ label: string;
5
+ }
6
+ export interface AnnotatedImageValue {
7
+ image: FileData;
8
+ annotations: Annotation[];
9
+ }
10
+ export interface AnnotatedImageProps {
11
+ value: AnnotatedImageValue | null;
12
+ show_legend: boolean;
13
+ height: number | undefined;
14
+ width: number | undefined;
15
+ color_map: Record<string, string>;
16
+ buttons: string[];
17
+ }
18
+ export interface AnnotatedImageEvents {
19
+ change: never;
20
+ select: {
21
+ index: number;
22
+ value: string;
23
+ };
24
+ }
package/dist/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/annotatedimage",
3
- "version": "0.10.1-dev.0",
3
+ "version": "0.10.1-dev.2",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -16,18 +16,18 @@
16
16
  "./package.json": "./package.json"
17
17
  },
18
18
  "devDependencies": {
19
- "@gradio/preview": "^0.14.0"
19
+ "@gradio/preview": "^0.15.0-dev.0"
20
20
  },
21
21
  "peerDependencies": {
22
- "svelte": "^4.0.0"
22
+ "svelte": "^5.43.4"
23
23
  },
24
24
  "dependencies": {
25
- "@gradio/atoms": "^0.18.1",
26
- "@gradio/statustracker": "^0.11.1",
27
- "@gradio/upload": "^0.17.2-dev.0",
28
- "@gradio/utils": "^0.10.2",
29
- "@gradio/icons": "^0.14.0",
30
- "@gradio/client": "^2.0.0-dev.0"
25
+ "@gradio/atoms": "^0.19.0-dev.1",
26
+ "@gradio/utils": "^0.10.3-dev.0",
27
+ "@gradio/statustracker": "^0.12.0-dev.1",
28
+ "@gradio/icons": "^0.15.0-dev.0",
29
+ "@gradio/client": "^2.0.0-dev.2",
30
+ "@gradio/upload": "^0.17.2-dev.2"
31
31
  },
32
32
  "repository": {
33
33
  "type": "git",
package/types.ts ADDED
@@ -0,0 +1,25 @@
1
+ import type { FileData } from "@gradio/client";
2
+
3
+ export interface Annotation {
4
+ image: FileData;
5
+ label: string;
6
+ }
7
+
8
+ export interface AnnotatedImageValue {
9
+ image: FileData;
10
+ annotations: Annotation[];
11
+ }
12
+
13
+ export interface AnnotatedImageProps {
14
+ value: AnnotatedImageValue | null;
15
+ show_legend: boolean;
16
+ height: number | undefined;
17
+ width: number | undefined;
18
+ color_map: Record<string, string>;
19
+ buttons: string[];
20
+ }
21
+
22
+ export interface AnnotatedImageEvents {
23
+ change: never;
24
+ select: { index: number; value: string };
25
+ }