@gradio/multimodaltextbox 0.6.0-beta.1 → 0.6.0-beta.3
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 +41 -9
- package/Index.svelte +2 -10
- package/dist/Index.svelte +2 -10
- package/dist/shared/MultimodalTextbox.svelte +13 -25
- package/dist/shared/utils.js +6 -4
- package/package.json +10 -10
- package/shared/MultimodalTextbox.svelte +13 -25
- package/shared/utils.ts +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# @gradio/multimodaltextbox
|
|
2
2
|
|
|
3
|
+
## 0.6.0-beta.3
|
|
4
|
+
|
|
5
|
+
### Dependency updates
|
|
6
|
+
|
|
7
|
+
- @gradio/upload@0.13.0-beta.3
|
|
8
|
+
- @gradio/video@0.11.0-beta.3
|
|
9
|
+
- @gradio/client@1.6.0-beta.3
|
|
10
|
+
- @gradio/image@0.16.0-beta.3
|
|
11
|
+
|
|
12
|
+
## 0.6.0-beta.2
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
- [#8966](https://github.com/gradio-app/gradio/pull/8966) [`8e52b6a`](https://github.com/gradio-app/gradio/commit/8e52b6a3e75957462bc7fdbf6ff9c280084d5f08) - Chatbot Examples. Thanks @dawoodkhan82!
|
|
17
|
+
- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2. Thanks @pngwn!
|
|
18
|
+
- [#9280](https://github.com/gradio-app/gradio/pull/9280) [`7122420`](https://github.com/gradio-app/gradio/commit/712242047fde3a594dfde7f48a44c7ea16239dc8) - Match style of textbox stop button to submit button. Thanks @freddyaboulton!
|
|
19
|
+
|
|
20
|
+
### Fixes
|
|
21
|
+
|
|
22
|
+
- [#9393](https://github.com/gradio-app/gradio/pull/9393) [`53ed0f0`](https://github.com/gradio-app/gradio/commit/53ed0f030551ad876a1fea28a9db9015ba6ec33e) - Fix File Types for MultimodalTextbox. Thanks @dawoodkhan82!
|
|
23
|
+
|
|
24
|
+
### Dependency updates
|
|
25
|
+
|
|
26
|
+
- @gradio/atoms@0.9.0-beta.2
|
|
27
|
+
- @gradio/upload@0.13.0-beta.2
|
|
28
|
+
- @gradio/client@1.6.0-beta.2
|
|
29
|
+
- @gradio/icons@0.8.0-beta.2
|
|
30
|
+
- @gradio/statustracker@0.8.0-beta.2
|
|
31
|
+
- @gradio/utils@0.7.0-beta.2
|
|
32
|
+
- @gradio/image@0.16.0-beta.2
|
|
33
|
+
- @gradio/video@0.11.0-beta.2
|
|
34
|
+
|
|
3
35
|
## 0.6.0-beta.1
|
|
4
36
|
|
|
5
37
|
### Features
|
|
@@ -17,7 +49,7 @@
|
|
|
17
49
|
- @gradio/image@0.16.0-beta.1
|
|
18
50
|
- @gradio/upload@0.12.4-beta.1
|
|
19
51
|
|
|
20
|
-
## 0.5.7
|
|
52
|
+
## 0.5.7
|
|
21
53
|
|
|
22
54
|
### Fixes
|
|
23
55
|
|
|
@@ -25,14 +57,14 @@
|
|
|
25
57
|
|
|
26
58
|
### Dependency updates
|
|
27
59
|
|
|
28
|
-
- @gradio/utils@0.
|
|
29
|
-
- @gradio/statustracker@0.
|
|
30
|
-
- @gradio/atoms@0.8.1
|
|
31
|
-
- @gradio/
|
|
32
|
-
- @gradio/
|
|
33
|
-
- @gradio/upload@0.12.4
|
|
34
|
-
- @gradio/image@0.
|
|
35
|
-
- @gradio/video@0.
|
|
60
|
+
- @gradio/utils@0.6.1
|
|
61
|
+
- @gradio/statustracker@0.7.6
|
|
62
|
+
- @gradio/atoms@0.8.1
|
|
63
|
+
- @gradio/icons@0.7.2
|
|
64
|
+
- @gradio/client@1.5.2
|
|
65
|
+
- @gradio/upload@0.12.4
|
|
66
|
+
- @gradio/image@0.15.1
|
|
67
|
+
- @gradio/video@0.10.4
|
|
36
68
|
|
|
37
69
|
## 0.5.6
|
|
38
70
|
|
package/Index.svelte
CHANGED
|
@@ -107,15 +107,7 @@
|
|
|
107
107
|
gradio.dispatch("error", detail);
|
|
108
108
|
}}
|
|
109
109
|
disabled={!interactive}
|
|
110
|
-
upload={gradio.client.upload}
|
|
111
|
-
stream_handler={gradio.client.stream}
|
|
110
|
+
upload={(...args) => gradio.client.upload(...args)}
|
|
111
|
+
stream_handler={(...args) => gradio.client.stream(...args)}
|
|
112
112
|
/>
|
|
113
113
|
</Block>
|
|
114
|
-
|
|
115
|
-
<style>
|
|
116
|
-
:global(.form .block.multimodal-textbox) {
|
|
117
|
-
box-shadow: var(--block-shadow) !important;
|
|
118
|
-
border-width: var(--block-border-width) !important;
|
|
119
|
-
border-radius: var(--block-radius) !important;
|
|
120
|
-
}
|
|
121
|
-
</style>
|
package/dist/Index.svelte
CHANGED
|
@@ -90,15 +90,7 @@ let dragging;
|
|
|
90
90
|
gradio.dispatch("error", detail);
|
|
91
91
|
}}
|
|
92
92
|
disabled={!interactive}
|
|
93
|
-
upload={gradio.client.upload}
|
|
94
|
-
stream_handler={gradio.client.stream}
|
|
93
|
+
upload={(...args) => gradio.client.upload(...args)}
|
|
94
|
+
stream_handler={(...args) => gradio.client.stream(...args)}
|
|
95
95
|
/>
|
|
96
96
|
</Block>
|
|
97
|
-
|
|
98
|
-
<style>
|
|
99
|
-
:global(.form .block.multimodal-textbox) {
|
|
100
|
-
box-shadow: var(--block-shadow) !important;
|
|
101
|
-
border-width: var(--block-border-width) !important;
|
|
102
|
-
border-radius: var(--block-radius) !important;
|
|
103
|
-
}
|
|
104
|
-
</style>
|
|
@@ -59,18 +59,6 @@ $:
|
|
|
59
59
|
dispatch("change", value);
|
|
60
60
|
oldValue = value.text;
|
|
61
61
|
}
|
|
62
|
-
let accept_file_types;
|
|
63
|
-
if (file_types == null) {
|
|
64
|
-
accept_file_types = null;
|
|
65
|
-
} else {
|
|
66
|
-
file_types = file_types.map((x) => {
|
|
67
|
-
if (x.startsWith(".")) {
|
|
68
|
-
return x;
|
|
69
|
-
}
|
|
70
|
-
return x + "/*";
|
|
71
|
-
});
|
|
72
|
-
accept_file_types = file_types.join(", ");
|
|
73
|
-
}
|
|
74
62
|
$:
|
|
75
63
|
if (value === null)
|
|
76
64
|
value = { text: "", files: [] };
|
|
@@ -261,6 +249,7 @@ function handle_drop(event) {
|
|
|
261
249
|
bind:this={upload_component}
|
|
262
250
|
on:load={handle_upload}
|
|
263
251
|
{file_count}
|
|
252
|
+
filetype={file_types}
|
|
264
253
|
{root}
|
|
265
254
|
{max_file_size}
|
|
266
255
|
bind:dragging
|
|
@@ -286,6 +275,7 @@ function handle_drop(event) {
|
|
|
286
275
|
max_lines: max_lines
|
|
287
276
|
}}
|
|
288
277
|
class="scroll-hide"
|
|
278
|
+
class:no-label={!show_label}
|
|
289
279
|
dir={rtl ? "rtl" : "ltr"}
|
|
290
280
|
bind:value={value.text}
|
|
291
281
|
bind:this={el}
|
|
@@ -321,7 +311,7 @@ function handle_drop(event) {
|
|
|
321
311
|
on:click={handle_stop}
|
|
322
312
|
>
|
|
323
313
|
{#if stop_btn === true}
|
|
324
|
-
<Square />
|
|
314
|
+
<Square fill={"none"} stroke_width={2.5} />
|
|
325
315
|
{:else}
|
|
326
316
|
{stop_btn}
|
|
327
317
|
{/if}
|
|
@@ -369,6 +359,10 @@ function handle_drop(event) {
|
|
|
369
359
|
position: relative;
|
|
370
360
|
z-index: 1;
|
|
371
361
|
}
|
|
362
|
+
textarea.no-label {
|
|
363
|
+
padding-top: 5px;
|
|
364
|
+
padding-bottom: 5px;
|
|
365
|
+
}
|
|
372
366
|
|
|
373
367
|
textarea:disabled {
|
|
374
368
|
-webkit-opacity: 1;
|
|
@@ -394,24 +388,25 @@ function handle_drop(event) {
|
|
|
394
388
|
display: flex;
|
|
395
389
|
justify-content: center;
|
|
396
390
|
align-items: center;
|
|
397
|
-
margin-bottom: 5px;
|
|
398
391
|
z-index: var(--layer-1);
|
|
399
392
|
}
|
|
400
393
|
.padded-button {
|
|
401
394
|
padding: 0 10px;
|
|
402
395
|
}
|
|
403
396
|
|
|
397
|
+
.stop-button,
|
|
404
398
|
.upload-button,
|
|
405
399
|
.submit-button {
|
|
406
400
|
background: var(--button-secondary-background-fill);
|
|
407
|
-
color: var(--button-secondary-text-color);
|
|
408
401
|
}
|
|
409
402
|
|
|
403
|
+
.stop-button:hover,
|
|
410
404
|
.upload-button:hover,
|
|
411
405
|
.submit-button:hover {
|
|
412
406
|
background: var(--button-secondary-background-fill-hover);
|
|
413
407
|
}
|
|
414
408
|
|
|
409
|
+
.stop-button:active,
|
|
415
410
|
.upload-button:active,
|
|
416
411
|
.submit-button:active {
|
|
417
412
|
box-shadow: var(--button-shadow-active);
|
|
@@ -426,17 +421,9 @@ function handle_drop(event) {
|
|
|
426
421
|
width: 17px;
|
|
427
422
|
}
|
|
428
423
|
|
|
429
|
-
.stop-button {
|
|
430
|
-
background: var(--button-cancel-background-fill);
|
|
431
|
-
color: var(--button-cancel-text-color);
|
|
432
|
-
}
|
|
433
|
-
.stop-button:hover {
|
|
434
|
-
background: var(--button-cancel-background-fill-hover);
|
|
435
|
-
color: var(--button-cancel-text-color-hover);
|
|
436
|
-
}
|
|
437
424
|
.stop-button :global(svg) {
|
|
438
|
-
height:
|
|
439
|
-
width:
|
|
425
|
+
height: 16px;
|
|
426
|
+
width: 16px;
|
|
440
427
|
}
|
|
441
428
|
|
|
442
429
|
.loader {
|
|
@@ -475,6 +462,7 @@ function handle_drop(event) {
|
|
|
475
462
|
gap: var(--spacing-lg);
|
|
476
463
|
overflow-x: scroll;
|
|
477
464
|
padding-top: var(--spacing-sm);
|
|
465
|
+
margin-bottom: 6px;
|
|
478
466
|
}
|
|
479
467
|
|
|
480
468
|
.thumbnail-item {
|
package/dist/shared/utils.js
CHANGED
|
@@ -3,12 +3,14 @@ export async function resize(target, lines, max_lines) {
|
|
|
3
3
|
await tick();
|
|
4
4
|
if (lines === max_lines)
|
|
5
5
|
return;
|
|
6
|
+
const computed_styles = window.getComputedStyle(target);
|
|
7
|
+
const padding_top = parseFloat(computed_styles.paddingTop);
|
|
8
|
+
const padding_bottom = parseFloat(computed_styles.paddingBottom);
|
|
9
|
+
const line_height = parseFloat(computed_styles.lineHeight);
|
|
6
10
|
let max = max_lines === undefined
|
|
7
11
|
? false
|
|
8
|
-
:
|
|
9
|
-
|
|
10
|
-
: 21 * (max_lines + 1);
|
|
11
|
-
let min = 21 * (lines + 1);
|
|
12
|
+
: padding_top + padding_bottom + line_height * max_lines;
|
|
13
|
+
let min = padding_top + padding_bottom + lines * line_height;
|
|
12
14
|
target.style.height = "1px";
|
|
13
15
|
let scroll_height;
|
|
14
16
|
if (max && target.scrollHeight > max) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/multimodaltextbox",
|
|
3
|
-
"version": "0.6.0-beta.
|
|
3
|
+
"version": "0.6.0-beta.3",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -22,17 +22,17 @@
|
|
|
22
22
|
"./package.json": "./package.json"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@gradio/atoms": "^0.
|
|
26
|
-
"@gradio/icons": "^0.8.0-beta.
|
|
27
|
-
"@gradio/statustracker": "^0.8.0-beta.
|
|
28
|
-
"@gradio/utils": "^0.7.0-beta.
|
|
29
|
-
"@gradio/upload": "^0.
|
|
30
|
-
"@gradio/
|
|
31
|
-
"@gradio/
|
|
32
|
-
"@gradio/
|
|
25
|
+
"@gradio/atoms": "^0.9.0-beta.2",
|
|
26
|
+
"@gradio/icons": "^0.8.0-beta.2",
|
|
27
|
+
"@gradio/statustracker": "^0.8.0-beta.2",
|
|
28
|
+
"@gradio/utils": "^0.7.0-beta.2",
|
|
29
|
+
"@gradio/upload": "^0.13.0-beta.3",
|
|
30
|
+
"@gradio/video": "^0.11.0-beta.3",
|
|
31
|
+
"@gradio/client": "^1.6.0-beta.3",
|
|
32
|
+
"@gradio/image": "^0.16.0-beta.3"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@gradio/preview": "^0.11.1
|
|
35
|
+
"@gradio/preview": "^0.11.1"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"svelte": "^4.0.0"
|
|
@@ -65,18 +65,6 @@
|
|
|
65
65
|
dispatch("change", value);
|
|
66
66
|
oldValue = value.text;
|
|
67
67
|
}
|
|
68
|
-
let accept_file_types: string | null;
|
|
69
|
-
if (file_types == null) {
|
|
70
|
-
accept_file_types = null;
|
|
71
|
-
} else {
|
|
72
|
-
file_types = file_types.map((x) => {
|
|
73
|
-
if (x.startsWith(".")) {
|
|
74
|
-
return x;
|
|
75
|
-
}
|
|
76
|
-
return x + "/*";
|
|
77
|
-
});
|
|
78
|
-
accept_file_types = file_types.join(", ");
|
|
79
|
-
}
|
|
80
68
|
|
|
81
69
|
$: if (value === null) value = { text: "", files: [] };
|
|
82
70
|
$: value, el && lines !== max_lines && resize(el, lines, max_lines);
|
|
@@ -306,6 +294,7 @@
|
|
|
306
294
|
bind:this={upload_component}
|
|
307
295
|
on:load={handle_upload}
|
|
308
296
|
{file_count}
|
|
297
|
+
filetype={file_types}
|
|
309
298
|
{root}
|
|
310
299
|
{max_file_size}
|
|
311
300
|
bind:dragging
|
|
@@ -331,6 +320,7 @@
|
|
|
331
320
|
max_lines: max_lines
|
|
332
321
|
}}
|
|
333
322
|
class="scroll-hide"
|
|
323
|
+
class:no-label={!show_label}
|
|
334
324
|
dir={rtl ? "rtl" : "ltr"}
|
|
335
325
|
bind:value={value.text}
|
|
336
326
|
bind:this={el}
|
|
@@ -366,7 +356,7 @@
|
|
|
366
356
|
on:click={handle_stop}
|
|
367
357
|
>
|
|
368
358
|
{#if stop_btn === true}
|
|
369
|
-
<Square />
|
|
359
|
+
<Square fill={"none"} stroke_width={2.5} />
|
|
370
360
|
{:else}
|
|
371
361
|
{stop_btn}
|
|
372
362
|
{/if}
|
|
@@ -414,6 +404,10 @@
|
|
|
414
404
|
position: relative;
|
|
415
405
|
z-index: 1;
|
|
416
406
|
}
|
|
407
|
+
textarea.no-label {
|
|
408
|
+
padding-top: 5px;
|
|
409
|
+
padding-bottom: 5px;
|
|
410
|
+
}
|
|
417
411
|
|
|
418
412
|
textarea:disabled {
|
|
419
413
|
-webkit-opacity: 1;
|
|
@@ -439,24 +433,25 @@
|
|
|
439
433
|
display: flex;
|
|
440
434
|
justify-content: center;
|
|
441
435
|
align-items: center;
|
|
442
|
-
margin-bottom: 5px;
|
|
443
436
|
z-index: var(--layer-1);
|
|
444
437
|
}
|
|
445
438
|
.padded-button {
|
|
446
439
|
padding: 0 10px;
|
|
447
440
|
}
|
|
448
441
|
|
|
442
|
+
.stop-button,
|
|
449
443
|
.upload-button,
|
|
450
444
|
.submit-button {
|
|
451
445
|
background: var(--button-secondary-background-fill);
|
|
452
|
-
color: var(--button-secondary-text-color);
|
|
453
446
|
}
|
|
454
447
|
|
|
448
|
+
.stop-button:hover,
|
|
455
449
|
.upload-button:hover,
|
|
456
450
|
.submit-button:hover {
|
|
457
451
|
background: var(--button-secondary-background-fill-hover);
|
|
458
452
|
}
|
|
459
453
|
|
|
454
|
+
.stop-button:active,
|
|
460
455
|
.upload-button:active,
|
|
461
456
|
.submit-button:active {
|
|
462
457
|
box-shadow: var(--button-shadow-active);
|
|
@@ -471,17 +466,9 @@
|
|
|
471
466
|
width: 17px;
|
|
472
467
|
}
|
|
473
468
|
|
|
474
|
-
.stop-button {
|
|
475
|
-
background: var(--button-cancel-background-fill);
|
|
476
|
-
color: var(--button-cancel-text-color);
|
|
477
|
-
}
|
|
478
|
-
.stop-button:hover {
|
|
479
|
-
background: var(--button-cancel-background-fill-hover);
|
|
480
|
-
color: var(--button-cancel-text-color-hover);
|
|
481
|
-
}
|
|
482
469
|
.stop-button :global(svg) {
|
|
483
|
-
height:
|
|
484
|
-
width:
|
|
470
|
+
height: 16px;
|
|
471
|
+
width: 16px;
|
|
485
472
|
}
|
|
486
473
|
|
|
487
474
|
.loader {
|
|
@@ -520,6 +507,7 @@
|
|
|
520
507
|
gap: var(--spacing-lg);
|
|
521
508
|
overflow-x: scroll;
|
|
522
509
|
padding-top: var(--spacing-sm);
|
|
510
|
+
margin-bottom: 6px;
|
|
523
511
|
}
|
|
524
512
|
|
|
525
513
|
.thumbnail-item {
|
package/shared/utils.ts
CHANGED
|
@@ -14,13 +14,16 @@ export async function resize(
|
|
|
14
14
|
await tick();
|
|
15
15
|
if (lines === max_lines) return;
|
|
16
16
|
|
|
17
|
+
const computed_styles = window.getComputedStyle(target);
|
|
18
|
+
const padding_top = parseFloat(computed_styles.paddingTop);
|
|
19
|
+
const padding_bottom = parseFloat(computed_styles.paddingBottom);
|
|
20
|
+
const line_height = parseFloat(computed_styles.lineHeight);
|
|
21
|
+
|
|
17
22
|
let max =
|
|
18
23
|
max_lines === undefined
|
|
19
24
|
? false
|
|
20
|
-
:
|
|
21
|
-
|
|
22
|
-
: 21 * (max_lines + 1);
|
|
23
|
-
let min = 21 * (lines + 1);
|
|
25
|
+
: padding_top + padding_bottom + line_height * max_lines;
|
|
26
|
+
let min = padding_top + padding_bottom + lines * line_height;
|
|
24
27
|
|
|
25
28
|
target.style.height = "1px";
|
|
26
29
|
|