@gradio/multimodaltextbox 0.5.5 → 0.5.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 +35 -0
- package/Index.svelte +13 -1
- package/MultimodalTextbox.test.ts +1 -2
- package/dist/Example.svelte +96 -0
- package/dist/Example.svelte.d.ts +22 -0
- package/dist/Index.svelte +101 -0
- package/dist/Index.svelte.d.ts +164 -0
- package/dist/shared/MultimodalTextbox.svelte +500 -0
- package/dist/shared/MultimodalTextbox.svelte.d.ts +58 -0
- package/dist/shared/utils.d.ts +8 -0
- package/dist/shared/utils.js +36 -0
- package/package.json +28 -12
- package/shared/MultimodalTextbox.svelte +161 -97
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,40 @@
|
|
|
1
1
|
# @gradio/multimodaltextbox
|
|
2
2
|
|
|
3
|
+
## 0.5.7
|
|
4
|
+
|
|
5
|
+
### Fixes
|
|
6
|
+
|
|
7
|
+
- [#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!
|
|
8
|
+
|
|
9
|
+
### Dependency updates
|
|
10
|
+
|
|
11
|
+
- @gradio/utils@0.6.1
|
|
12
|
+
- @gradio/statustracker@0.7.6
|
|
13
|
+
- @gradio/atoms@0.8.1
|
|
14
|
+
- @gradio/icons@0.7.2
|
|
15
|
+
- @gradio/client@1.5.2
|
|
16
|
+
- @gradio/upload@0.12.4
|
|
17
|
+
- @gradio/image@0.15.1
|
|
18
|
+
- @gradio/video@0.10.4
|
|
19
|
+
|
|
20
|
+
## 0.5.6
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
- [#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!
|
|
25
|
+
- [#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!
|
|
26
|
+
|
|
27
|
+
### Dependency updates
|
|
28
|
+
|
|
29
|
+
- @gradio/utils@0.6.0
|
|
30
|
+
- @gradio/upload@0.12.3
|
|
31
|
+
- @gradio/atoms@0.8.0
|
|
32
|
+
- @gradio/client@1.5.1
|
|
33
|
+
- @gradio/statustracker@0.7.5
|
|
34
|
+
- @gradio/icons@0.7.1
|
|
35
|
+
- @gradio/image@0.15.0
|
|
36
|
+
- @gradio/video@0.10.3
|
|
37
|
+
|
|
3
38
|
## 0.5.5
|
|
4
39
|
|
|
5
40
|
### Dependency updates
|
package/Index.svelte
CHANGED
|
@@ -50,16 +50,19 @@
|
|
|
50
50
|
export let interactive: boolean;
|
|
51
51
|
export let root: string;
|
|
52
52
|
export let file_count: "single" | "multiple" | "directory";
|
|
53
|
+
|
|
54
|
+
let dragging: boolean;
|
|
53
55
|
</script>
|
|
54
56
|
|
|
55
57
|
<Block
|
|
56
58
|
{visible}
|
|
57
59
|
{elem_id}
|
|
58
|
-
{elem_classes}
|
|
60
|
+
elem_classes={[...elem_classes, "multimodal-textbox"]}
|
|
59
61
|
{scale}
|
|
60
62
|
{min_width}
|
|
61
63
|
allow_overflow={false}
|
|
62
64
|
padding={container}
|
|
65
|
+
border_mode={dragging ? "focus" : "base"}
|
|
63
66
|
>
|
|
64
67
|
{#if loading_status}
|
|
65
68
|
<StatusTracker
|
|
@@ -73,6 +76,7 @@
|
|
|
73
76
|
<MultimodalTextbox
|
|
74
77
|
bind:value
|
|
75
78
|
bind:value_is_output
|
|
79
|
+
bind:dragging
|
|
76
80
|
{file_types}
|
|
77
81
|
{root}
|
|
78
82
|
{label}
|
|
@@ -103,3 +107,11 @@
|
|
|
103
107
|
stream_handler={gradio.client.stream}
|
|
104
108
|
/>
|
|
105
109
|
</Block>
|
|
110
|
+
|
|
111
|
+
<style>
|
|
112
|
+
:global(.form .block.multimodal-textbox) {
|
|
113
|
+
box-shadow: var(--block-shadow) !important;
|
|
114
|
+
border-width: var(--block-border-width) !important;
|
|
115
|
+
border-radius: var(--block-radius) !important;
|
|
116
|
+
}
|
|
117
|
+
</style>
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { test, describe, assert, afterEach } from "vitest";
|
|
2
|
-
import {
|
|
3
|
-
import { cleanup, fireEvent, render, get_text, wait } from "@gradio/tootils";
|
|
2
|
+
import { cleanup, render } from "@self/tootils";
|
|
4
3
|
import event from "@testing-library/user-event";
|
|
5
4
|
|
|
6
5
|
import MultimodalTextbox from "./Index.svelte";
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
<script>import { onMount } from "svelte";
|
|
2
|
+
import { Image } from "@gradio/image/shared";
|
|
3
|
+
import { Video } from "@gradio/video/shared";
|
|
4
|
+
export let value = {
|
|
5
|
+
text: "",
|
|
6
|
+
files: []
|
|
7
|
+
};
|
|
8
|
+
export let type;
|
|
9
|
+
export let selected = false;
|
|
10
|
+
let size;
|
|
11
|
+
let el;
|
|
12
|
+
function set_styles(element, el_width) {
|
|
13
|
+
if (!element || !el_width)
|
|
14
|
+
return;
|
|
15
|
+
el.style.setProperty(
|
|
16
|
+
"--local-text-width",
|
|
17
|
+
`${el_width < 150 ? el_width : 200}px`
|
|
18
|
+
);
|
|
19
|
+
el.style.whiteSpace = "unset";
|
|
20
|
+
}
|
|
21
|
+
onMount(() => {
|
|
22
|
+
set_styles(el, size);
|
|
23
|
+
});
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<div
|
|
27
|
+
class="container"
|
|
28
|
+
bind:clientWidth={size}
|
|
29
|
+
bind:this={el}
|
|
30
|
+
class:table={type === "table"}
|
|
31
|
+
class:gallery={type === "gallery"}
|
|
32
|
+
class:selected
|
|
33
|
+
class:border={value}
|
|
34
|
+
>
|
|
35
|
+
<p>{value.text ? value.text : ""}</p>
|
|
36
|
+
{#each value.files as file}
|
|
37
|
+
{#if file.mime_type && file.mime_type.includes("image")}
|
|
38
|
+
<Image src={file.url} alt="" />
|
|
39
|
+
{:else if file.mime_type && file.mime_type.includes("video")}
|
|
40
|
+
<Video src={file.url} alt="" loop={true} />
|
|
41
|
+
{:else if file.mime_type && file.mime_type.includes("audio")}
|
|
42
|
+
<audio src={file.url} controls />
|
|
43
|
+
{:else}
|
|
44
|
+
{file.orig_name}
|
|
45
|
+
{/if}
|
|
46
|
+
{/each}
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
<style>
|
|
50
|
+
.gallery {
|
|
51
|
+
padding: var(--size-1) var(--size-2);
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
gap: 20px;
|
|
55
|
+
overflow-x: auto;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
div {
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
min-width: var(--local-text-width);
|
|
61
|
+
white-space: nowrap;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.container :global(img),
|
|
65
|
+
.container :global(video) {
|
|
66
|
+
object-fit: contain;
|
|
67
|
+
width: 100px;
|
|
68
|
+
height: 100px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.container.selected {
|
|
72
|
+
border-color: var(--border-color-accent);
|
|
73
|
+
}
|
|
74
|
+
.border.table {
|
|
75
|
+
border: 2px solid var(--border-color-primary);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.container.table {
|
|
79
|
+
margin: 0 auto;
|
|
80
|
+
border-radius: var(--radius-lg);
|
|
81
|
+
overflow-x: auto;
|
|
82
|
+
width: max-content;
|
|
83
|
+
height: max-content;
|
|
84
|
+
object-fit: cover;
|
|
85
|
+
padding: var(--size-2);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.container.gallery {
|
|
89
|
+
object-fit: cover;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
div > :global(p) {
|
|
93
|
+
font-size: var(--text-lg);
|
|
94
|
+
white-space: normal;
|
|
95
|
+
}
|
|
96
|
+
</style>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { FileData } from "@gradio/client";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
value?: {
|
|
6
|
+
text: string;
|
|
7
|
+
files: FileData[];
|
|
8
|
+
} | undefined;
|
|
9
|
+
type: "gallery" | "table";
|
|
10
|
+
selected?: boolean | undefined;
|
|
11
|
+
};
|
|
12
|
+
events: {
|
|
13
|
+
[evt: string]: CustomEvent<any>;
|
|
14
|
+
};
|
|
15
|
+
slots: {};
|
|
16
|
+
};
|
|
17
|
+
export type ExampleProps = typeof __propDef.props;
|
|
18
|
+
export type ExampleEvents = typeof __propDef.events;
|
|
19
|
+
export type ExampleSlots = typeof __propDef.slots;
|
|
20
|
+
export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
<svelte:options accessors={true} />
|
|
2
|
+
|
|
3
|
+
<script context="module">export { default as BaseMultimodalTextbox } from "./shared/MultimodalTextbox.svelte";
|
|
4
|
+
export { default as BaseExample } from "./Example.svelte";
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<script>import MultimodalTextbox from "./shared/MultimodalTextbox.svelte";
|
|
8
|
+
import { Block } from "@gradio/atoms";
|
|
9
|
+
import { StatusTracker } from "@gradio/statustracker";
|
|
10
|
+
export let gradio;
|
|
11
|
+
export let elem_id = "";
|
|
12
|
+
export let elem_classes = [];
|
|
13
|
+
export let visible = true;
|
|
14
|
+
export let value = {
|
|
15
|
+
text: "",
|
|
16
|
+
files: []
|
|
17
|
+
};
|
|
18
|
+
export let file_types = null;
|
|
19
|
+
export let lines;
|
|
20
|
+
export let placeholder = "";
|
|
21
|
+
export let label = "MultimodalTextbox";
|
|
22
|
+
export let info = void 0;
|
|
23
|
+
export let show_label;
|
|
24
|
+
export let max_lines;
|
|
25
|
+
export let container = true;
|
|
26
|
+
export let scale = null;
|
|
27
|
+
export let min_width = void 0;
|
|
28
|
+
export let submit_btn = null;
|
|
29
|
+
export let loading_status = void 0;
|
|
30
|
+
export let value_is_output = false;
|
|
31
|
+
export let rtl = false;
|
|
32
|
+
export let text_align = void 0;
|
|
33
|
+
export let autofocus = false;
|
|
34
|
+
export let autoscroll = true;
|
|
35
|
+
export let interactive;
|
|
36
|
+
export let root;
|
|
37
|
+
export let file_count;
|
|
38
|
+
let dragging;
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<Block
|
|
42
|
+
{visible}
|
|
43
|
+
{elem_id}
|
|
44
|
+
elem_classes={[...elem_classes, "multimodal-textbox"]}
|
|
45
|
+
{scale}
|
|
46
|
+
{min_width}
|
|
47
|
+
allow_overflow={false}
|
|
48
|
+
padding={container}
|
|
49
|
+
border_mode={dragging ? "focus" : "base"}
|
|
50
|
+
>
|
|
51
|
+
{#if loading_status}
|
|
52
|
+
<StatusTracker
|
|
53
|
+
autoscroll={gradio.autoscroll}
|
|
54
|
+
i18n={gradio.i18n}
|
|
55
|
+
{...loading_status}
|
|
56
|
+
on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
|
|
57
|
+
/>
|
|
58
|
+
{/if}
|
|
59
|
+
|
|
60
|
+
<MultimodalTextbox
|
|
61
|
+
bind:value
|
|
62
|
+
bind:value_is_output
|
|
63
|
+
bind:dragging
|
|
64
|
+
{file_types}
|
|
65
|
+
{root}
|
|
66
|
+
{label}
|
|
67
|
+
{info}
|
|
68
|
+
{show_label}
|
|
69
|
+
{lines}
|
|
70
|
+
{rtl}
|
|
71
|
+
{text_align}
|
|
72
|
+
max_lines={!max_lines ? lines + 1 : max_lines}
|
|
73
|
+
{placeholder}
|
|
74
|
+
{submit_btn}
|
|
75
|
+
{autofocus}
|
|
76
|
+
{container}
|
|
77
|
+
{autoscroll}
|
|
78
|
+
{file_count}
|
|
79
|
+
max_file_size={gradio.max_file_size}
|
|
80
|
+
on:change={() => gradio.dispatch("change", value)}
|
|
81
|
+
on:input={() => gradio.dispatch("input")}
|
|
82
|
+
on:submit={() => gradio.dispatch("submit")}
|
|
83
|
+
on:blur={() => gradio.dispatch("blur")}
|
|
84
|
+
on:select={(e) => gradio.dispatch("select", e.detail)}
|
|
85
|
+
on:focus={() => gradio.dispatch("focus")}
|
|
86
|
+
on:error={({ detail }) => {
|
|
87
|
+
gradio.dispatch("error", detail);
|
|
88
|
+
}}
|
|
89
|
+
disabled={!interactive}
|
|
90
|
+
upload={gradio.client.upload}
|
|
91
|
+
stream_handler={gradio.client.stream}
|
|
92
|
+
/>
|
|
93
|
+
</Block>
|
|
94
|
+
|
|
95
|
+
<style>
|
|
96
|
+
:global(.form .block.multimodal-textbox) {
|
|
97
|
+
box-shadow: var(--block-shadow) !important;
|
|
98
|
+
border-width: var(--block-border-width) !important;
|
|
99
|
+
border-radius: var(--block-radius) !important;
|
|
100
|
+
}
|
|
101
|
+
</style>
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
export { default as BaseMultimodalTextbox } from "./shared/MultimodalTextbox.svelte";
|
|
3
|
+
export { default as BaseExample } from "./Example.svelte";
|
|
4
|
+
import type { Gradio, SelectData } from "@gradio/utils";
|
|
5
|
+
import type { LoadingStatus } from "@gradio/statustracker";
|
|
6
|
+
import type { FileData } from "@gradio/client";
|
|
7
|
+
declare const __propDef: {
|
|
8
|
+
props: {
|
|
9
|
+
gradio: Gradio<{
|
|
10
|
+
change: {
|
|
11
|
+
text: string;
|
|
12
|
+
files: FileData[];
|
|
13
|
+
};
|
|
14
|
+
submit: never;
|
|
15
|
+
blur: never;
|
|
16
|
+
select: SelectData;
|
|
17
|
+
input: never;
|
|
18
|
+
focus: never;
|
|
19
|
+
error: string;
|
|
20
|
+
clear_status: LoadingStatus;
|
|
21
|
+
}>;
|
|
22
|
+
elem_id?: string | undefined;
|
|
23
|
+
elem_classes?: string[] | undefined;
|
|
24
|
+
visible?: boolean | undefined;
|
|
25
|
+
value?: {
|
|
26
|
+
text: string;
|
|
27
|
+
files: FileData[];
|
|
28
|
+
} | undefined;
|
|
29
|
+
file_types?: (string[] | null) | undefined;
|
|
30
|
+
lines: number;
|
|
31
|
+
placeholder?: string | undefined;
|
|
32
|
+
label?: string | undefined;
|
|
33
|
+
info?: string | undefined;
|
|
34
|
+
show_label: boolean;
|
|
35
|
+
max_lines: number;
|
|
36
|
+
container?: boolean | undefined;
|
|
37
|
+
scale?: (number | null) | undefined;
|
|
38
|
+
min_width?: number | undefined;
|
|
39
|
+
submit_btn?: (string | null) | undefined;
|
|
40
|
+
loading_status?: LoadingStatus | undefined;
|
|
41
|
+
value_is_output?: boolean | undefined;
|
|
42
|
+
rtl?: boolean | undefined;
|
|
43
|
+
text_align?: "left" | "right" | undefined;
|
|
44
|
+
autofocus?: boolean | undefined;
|
|
45
|
+
autoscroll?: boolean | undefined;
|
|
46
|
+
interactive: boolean;
|
|
47
|
+
root: string;
|
|
48
|
+
file_count: "single" | "multiple" | "directory";
|
|
49
|
+
};
|
|
50
|
+
events: {
|
|
51
|
+
[evt: string]: CustomEvent<any>;
|
|
52
|
+
};
|
|
53
|
+
slots: {};
|
|
54
|
+
};
|
|
55
|
+
export type IndexProps = typeof __propDef.props;
|
|
56
|
+
export type IndexEvents = typeof __propDef.events;
|
|
57
|
+
export type IndexSlots = typeof __propDef.slots;
|
|
58
|
+
export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
|
|
59
|
+
get gradio(): Gradio<{
|
|
60
|
+
change: {
|
|
61
|
+
text: string;
|
|
62
|
+
files: FileData[];
|
|
63
|
+
};
|
|
64
|
+
submit: never;
|
|
65
|
+
blur: never;
|
|
66
|
+
select: SelectData;
|
|
67
|
+
input: never;
|
|
68
|
+
focus: never;
|
|
69
|
+
error: string;
|
|
70
|
+
clear_status: LoadingStatus;
|
|
71
|
+
}>;
|
|
72
|
+
/**accessor*/
|
|
73
|
+
set gradio(_: Gradio<{
|
|
74
|
+
change: {
|
|
75
|
+
text: string;
|
|
76
|
+
files: FileData[];
|
|
77
|
+
};
|
|
78
|
+
submit: never;
|
|
79
|
+
blur: never;
|
|
80
|
+
select: SelectData;
|
|
81
|
+
input: never;
|
|
82
|
+
focus: never;
|
|
83
|
+
error: string;
|
|
84
|
+
clear_status: LoadingStatus;
|
|
85
|
+
}>);
|
|
86
|
+
get elem_id(): string | undefined;
|
|
87
|
+
/**accessor*/
|
|
88
|
+
set elem_id(_: string | undefined);
|
|
89
|
+
get elem_classes(): string[] | undefined;
|
|
90
|
+
/**accessor*/
|
|
91
|
+
set elem_classes(_: string[] | undefined);
|
|
92
|
+
get visible(): boolean | undefined;
|
|
93
|
+
/**accessor*/
|
|
94
|
+
set visible(_: boolean | undefined);
|
|
95
|
+
get value(): {
|
|
96
|
+
text: string;
|
|
97
|
+
files: FileData[];
|
|
98
|
+
} | undefined;
|
|
99
|
+
/**accessor*/
|
|
100
|
+
set value(_: {
|
|
101
|
+
text: string;
|
|
102
|
+
files: FileData[];
|
|
103
|
+
} | undefined);
|
|
104
|
+
get file_types(): string[] | null | undefined;
|
|
105
|
+
/**accessor*/
|
|
106
|
+
set file_types(_: string[] | null | undefined);
|
|
107
|
+
get lines(): number;
|
|
108
|
+
/**accessor*/
|
|
109
|
+
set lines(_: number);
|
|
110
|
+
get placeholder(): string | undefined;
|
|
111
|
+
/**accessor*/
|
|
112
|
+
set placeholder(_: string | undefined);
|
|
113
|
+
get label(): string | undefined;
|
|
114
|
+
/**accessor*/
|
|
115
|
+
set label(_: string | undefined);
|
|
116
|
+
get info(): string | undefined;
|
|
117
|
+
/**accessor*/
|
|
118
|
+
set info(_: string | undefined);
|
|
119
|
+
get show_label(): boolean;
|
|
120
|
+
/**accessor*/
|
|
121
|
+
set show_label(_: boolean);
|
|
122
|
+
get max_lines(): number;
|
|
123
|
+
/**accessor*/
|
|
124
|
+
set max_lines(_: number);
|
|
125
|
+
get container(): boolean | undefined;
|
|
126
|
+
/**accessor*/
|
|
127
|
+
set container(_: boolean | undefined);
|
|
128
|
+
get scale(): number | null | undefined;
|
|
129
|
+
/**accessor*/
|
|
130
|
+
set scale(_: number | null | undefined);
|
|
131
|
+
get min_width(): number | undefined;
|
|
132
|
+
/**accessor*/
|
|
133
|
+
set min_width(_: number | undefined);
|
|
134
|
+
get submit_btn(): string | null | undefined;
|
|
135
|
+
/**accessor*/
|
|
136
|
+
set submit_btn(_: string | null | undefined);
|
|
137
|
+
get loading_status(): LoadingStatus | undefined;
|
|
138
|
+
/**accessor*/
|
|
139
|
+
set loading_status(_: LoadingStatus | undefined);
|
|
140
|
+
get value_is_output(): boolean | undefined;
|
|
141
|
+
/**accessor*/
|
|
142
|
+
set value_is_output(_: boolean | undefined);
|
|
143
|
+
get rtl(): boolean | undefined;
|
|
144
|
+
/**accessor*/
|
|
145
|
+
set rtl(_: boolean | undefined);
|
|
146
|
+
get text_align(): "left" | "right" | undefined;
|
|
147
|
+
/**accessor*/
|
|
148
|
+
set text_align(_: "left" | "right" | undefined);
|
|
149
|
+
get autofocus(): boolean | undefined;
|
|
150
|
+
/**accessor*/
|
|
151
|
+
set autofocus(_: boolean | undefined);
|
|
152
|
+
get autoscroll(): boolean | undefined;
|
|
153
|
+
/**accessor*/
|
|
154
|
+
set autoscroll(_: boolean | undefined);
|
|
155
|
+
get interactive(): boolean;
|
|
156
|
+
/**accessor*/
|
|
157
|
+
set interactive(_: boolean);
|
|
158
|
+
get root(): string;
|
|
159
|
+
/**accessor*/
|
|
160
|
+
set root(_: string);
|
|
161
|
+
get file_count(): "multiple" | "single" | "directory";
|
|
162
|
+
/**accessor*/
|
|
163
|
+
set file_count(_: "multiple" | "single" | "directory");
|
|
164
|
+
}
|