@gradio/dataset 0.2.4 → 0.2.5-beta.1
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 -0
- package/Index.svelte +2 -0
- package/dist/Index.svelte +339 -0
- package/dist/Index.svelte.d.ts +39 -0
- package/package.json +15 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,33 @@
|
|
|
1
1
|
# @gradio/dataset
|
|
2
2
|
|
|
3
|
+
## 0.2.5-beta.1
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible. Thanks @pngwn!
|
|
8
|
+
|
|
9
|
+
### Dependency updates
|
|
10
|
+
|
|
11
|
+
- @gradio/atoms@0.8.1-beta.1
|
|
12
|
+
- @gradio/utils@0.7.0-beta.1
|
|
13
|
+
- @gradio/client@1.6.0-beta.1
|
|
14
|
+
- @gradio/upload@0.12.4-beta.1
|
|
15
|
+
- @gradio/textbox@0.7.0-beta.1
|
|
16
|
+
|
|
17
|
+
## 0.2.5-beta.0
|
|
18
|
+
|
|
19
|
+
### Fixes
|
|
20
|
+
|
|
21
|
+
- [#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!
|
|
22
|
+
|
|
23
|
+
### Dependency updates
|
|
24
|
+
|
|
25
|
+
- @gradio/utils@0.7.0-beta.0
|
|
26
|
+
- @gradio/atoms@0.8.1-beta.0
|
|
27
|
+
- @gradio/client@1.6.0-beta.0
|
|
28
|
+
- @gradio/upload@0.12.4-beta.0
|
|
29
|
+
- @gradio/textbox@0.7.0-beta.0
|
|
30
|
+
|
|
3
31
|
## 0.2.4
|
|
4
32
|
|
|
5
33
|
### Features
|
package/Index.svelte
CHANGED
|
@@ -173,6 +173,7 @@
|
|
|
173
173
|
type="gallery"
|
|
174
174
|
selected={current_hover === i}
|
|
175
175
|
index={i}
|
|
176
|
+
{root}
|
|
176
177
|
/>
|
|
177
178
|
{/if}
|
|
178
179
|
</button>
|
|
@@ -219,6 +220,7 @@
|
|
|
219
220
|
type="table"
|
|
220
221
|
selected={current_hover === i}
|
|
221
222
|
index={i}
|
|
223
|
+
{root}
|
|
222
224
|
/>
|
|
223
225
|
</td>
|
|
224
226
|
{/if}
|
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
<script>import { Block } from "@gradio/atoms";
|
|
2
|
+
import { BaseExample } from "@gradio/textbox";
|
|
3
|
+
export let components;
|
|
4
|
+
export let component_props;
|
|
5
|
+
export let component_map;
|
|
6
|
+
export let label = "Examples";
|
|
7
|
+
export let headers;
|
|
8
|
+
export let samples = null;
|
|
9
|
+
let old_samples = null;
|
|
10
|
+
export let sample_labels = null;
|
|
11
|
+
export let elem_id = "";
|
|
12
|
+
export let elem_classes = [];
|
|
13
|
+
export let visible = true;
|
|
14
|
+
export let value = null;
|
|
15
|
+
export let root;
|
|
16
|
+
export let proxy_url;
|
|
17
|
+
export let samples_per_page = 10;
|
|
18
|
+
export let scale = null;
|
|
19
|
+
export let min_width = void 0;
|
|
20
|
+
export let gradio;
|
|
21
|
+
let samples_dir = proxy_url ? `/proxy=${proxy_url}file=` : `${root}/file=`;
|
|
22
|
+
let page = 0;
|
|
23
|
+
$:
|
|
24
|
+
gallery = components.length < 2 || sample_labels !== null;
|
|
25
|
+
let paginate = samples ? samples.length > samples_per_page : false;
|
|
26
|
+
let selected_samples;
|
|
27
|
+
let page_count;
|
|
28
|
+
let visible_pages = [];
|
|
29
|
+
let current_hover = -1;
|
|
30
|
+
function handle_mouseenter(i) {
|
|
31
|
+
current_hover = i;
|
|
32
|
+
}
|
|
33
|
+
function handle_mouseleave() {
|
|
34
|
+
current_hover = -1;
|
|
35
|
+
}
|
|
36
|
+
$: {
|
|
37
|
+
if (sample_labels) {
|
|
38
|
+
samples = sample_labels.map((e) => [e]);
|
|
39
|
+
} else if (!samples) {
|
|
40
|
+
samples = [];
|
|
41
|
+
}
|
|
42
|
+
if (samples !== old_samples) {
|
|
43
|
+
page = 0;
|
|
44
|
+
old_samples = samples;
|
|
45
|
+
}
|
|
46
|
+
paginate = samples.length > samples_per_page;
|
|
47
|
+
if (paginate) {
|
|
48
|
+
visible_pages = [];
|
|
49
|
+
selected_samples = samples.slice(
|
|
50
|
+
page * samples_per_page,
|
|
51
|
+
(page + 1) * samples_per_page
|
|
52
|
+
);
|
|
53
|
+
page_count = Math.ceil(samples.length / samples_per_page);
|
|
54
|
+
[0, page, page_count - 1].forEach((anchor) => {
|
|
55
|
+
for (let i = anchor - 2; i <= anchor + 2; i++) {
|
|
56
|
+
if (i >= 0 && i < page_count && !visible_pages.includes(i)) {
|
|
57
|
+
if (visible_pages.length > 0 && i - visible_pages[visible_pages.length - 1] > 1) {
|
|
58
|
+
visible_pages.push(-1);
|
|
59
|
+
}
|
|
60
|
+
visible_pages.push(i);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
} else {
|
|
65
|
+
selected_samples = samples.slice();
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
let component_meta = [];
|
|
69
|
+
async function get_component_meta(selected_samples2) {
|
|
70
|
+
component_meta = await Promise.all(
|
|
71
|
+
selected_samples2 && selected_samples2.map(
|
|
72
|
+
async (sample_row) => await Promise.all(
|
|
73
|
+
sample_row.map(async (sample_cell, j) => {
|
|
74
|
+
return {
|
|
75
|
+
value: sample_cell,
|
|
76
|
+
component: (await component_map.get(components[j]))?.default
|
|
77
|
+
};
|
|
78
|
+
})
|
|
79
|
+
)
|
|
80
|
+
)
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
$:
|
|
84
|
+
component_map, get_component_meta(selected_samples);
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<Block
|
|
88
|
+
{visible}
|
|
89
|
+
padding={false}
|
|
90
|
+
{elem_id}
|
|
91
|
+
{elem_classes}
|
|
92
|
+
{scale}
|
|
93
|
+
{min_width}
|
|
94
|
+
allow_overflow={false}
|
|
95
|
+
container={false}
|
|
96
|
+
>
|
|
97
|
+
<div class="label">
|
|
98
|
+
<svg
|
|
99
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
100
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
101
|
+
aria-hidden="true"
|
|
102
|
+
role="img"
|
|
103
|
+
width="1em"
|
|
104
|
+
height="1em"
|
|
105
|
+
preserveAspectRatio="xMidYMid meet"
|
|
106
|
+
viewBox="0 0 32 32"
|
|
107
|
+
>
|
|
108
|
+
<path
|
|
109
|
+
fill="currentColor"
|
|
110
|
+
d="M10 6h18v2H10zm0 18h18v2H10zm0-9h18v2H10zm-6 0h2v2H4zm0-9h2v2H4zm0 18h2v2H4z"
|
|
111
|
+
/>
|
|
112
|
+
</svg>
|
|
113
|
+
{label}
|
|
114
|
+
</div>
|
|
115
|
+
{#if gallery}
|
|
116
|
+
<div class="gallery">
|
|
117
|
+
{#each selected_samples as sample_row, i}
|
|
118
|
+
{#if sample_row[0]}
|
|
119
|
+
<button
|
|
120
|
+
class="gallery-item"
|
|
121
|
+
on:click={() => {
|
|
122
|
+
value = i + page * samples_per_page;
|
|
123
|
+
gradio.dispatch("click", value);
|
|
124
|
+
gradio.dispatch("select", { index: value, value: sample_row });
|
|
125
|
+
}}
|
|
126
|
+
on:mouseenter={() => handle_mouseenter(i)}
|
|
127
|
+
on:mouseleave={() => handle_mouseleave()}
|
|
128
|
+
>
|
|
129
|
+
{#if sample_labels}
|
|
130
|
+
<BaseExample
|
|
131
|
+
value={sample_row[0]}
|
|
132
|
+
selected={current_hover === i}
|
|
133
|
+
type="gallery"
|
|
134
|
+
/>
|
|
135
|
+
{:else if component_meta.length && component_map.get(components[0])}
|
|
136
|
+
<svelte:component
|
|
137
|
+
this={component_meta[0][0].component}
|
|
138
|
+
{...component_props[0]}
|
|
139
|
+
value={sample_row[0]}
|
|
140
|
+
{samples_dir}
|
|
141
|
+
type="gallery"
|
|
142
|
+
selected={current_hover === i}
|
|
143
|
+
index={i}
|
|
144
|
+
{root}
|
|
145
|
+
/>
|
|
146
|
+
{/if}
|
|
147
|
+
</button>
|
|
148
|
+
{/if}
|
|
149
|
+
{/each}
|
|
150
|
+
</div>
|
|
151
|
+
{:else}
|
|
152
|
+
<div class="table-wrap">
|
|
153
|
+
<table tabindex="0" role="grid">
|
|
154
|
+
<thead>
|
|
155
|
+
<tr class="tr-head">
|
|
156
|
+
{#each headers as header}
|
|
157
|
+
<th>
|
|
158
|
+
{header}
|
|
159
|
+
</th>
|
|
160
|
+
{/each}
|
|
161
|
+
</tr>
|
|
162
|
+
</thead>
|
|
163
|
+
<tbody>
|
|
164
|
+
{#each component_meta as sample_row, i}
|
|
165
|
+
<tr
|
|
166
|
+
class="tr-body"
|
|
167
|
+
on:click={() => {
|
|
168
|
+
value = i + page * samples_per_page;
|
|
169
|
+
gradio.dispatch("click", value);
|
|
170
|
+
}}
|
|
171
|
+
on:mouseenter={() => handle_mouseenter(i)}
|
|
172
|
+
on:mouseleave={() => handle_mouseleave()}
|
|
173
|
+
>
|
|
174
|
+
{#each sample_row as { value, component }, j}
|
|
175
|
+
{@const component_name = components[j]}
|
|
176
|
+
{#if component_name !== undefined && component_map.get(component_name) !== undefined}
|
|
177
|
+
<td
|
|
178
|
+
style="max-width: {component_name === 'textbox'
|
|
179
|
+
? '35ch'
|
|
180
|
+
: 'auto'}"
|
|
181
|
+
class={component_name}
|
|
182
|
+
>
|
|
183
|
+
<svelte:component
|
|
184
|
+
this={component}
|
|
185
|
+
{...component_props[j]}
|
|
186
|
+
{value}
|
|
187
|
+
{samples_dir}
|
|
188
|
+
type="table"
|
|
189
|
+
selected={current_hover === i}
|
|
190
|
+
index={i}
|
|
191
|
+
{root}
|
|
192
|
+
/>
|
|
193
|
+
</td>
|
|
194
|
+
{/if}
|
|
195
|
+
{/each}
|
|
196
|
+
</tr>
|
|
197
|
+
{/each}
|
|
198
|
+
</tbody>
|
|
199
|
+
</table>
|
|
200
|
+
</div>
|
|
201
|
+
{/if}
|
|
202
|
+
{#if paginate}
|
|
203
|
+
<div class="paginate">
|
|
204
|
+
Pages:
|
|
205
|
+
{#each visible_pages as visible_page}
|
|
206
|
+
{#if visible_page === -1}
|
|
207
|
+
<div>...</div>
|
|
208
|
+
{:else}
|
|
209
|
+
<button
|
|
210
|
+
class:current-page={page === visible_page}
|
|
211
|
+
on:click={() => (page = visible_page)}
|
|
212
|
+
>
|
|
213
|
+
{visible_page + 1}
|
|
214
|
+
</button>
|
|
215
|
+
{/if}
|
|
216
|
+
{/each}
|
|
217
|
+
</div>
|
|
218
|
+
{/if}
|
|
219
|
+
</Block>
|
|
220
|
+
|
|
221
|
+
<style>
|
|
222
|
+
.wrap {
|
|
223
|
+
display: inline-block;
|
|
224
|
+
width: var(--size-full);
|
|
225
|
+
max-width: var(--size-full);
|
|
226
|
+
color: var(--body-text-color);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.hide {
|
|
230
|
+
display: none;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.label {
|
|
234
|
+
display: flex;
|
|
235
|
+
align-items: center;
|
|
236
|
+
margin-bottom: var(--size-2);
|
|
237
|
+
color: var(--block-label-text-color);
|
|
238
|
+
font-weight: var(--block-label-text-weight);
|
|
239
|
+
font-size: var(--block-label-text-size);
|
|
240
|
+
line-height: var(--line-sm);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
svg {
|
|
244
|
+
margin-right: var(--size-1);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.gallery {
|
|
248
|
+
display: flex;
|
|
249
|
+
flex-wrap: wrap;
|
|
250
|
+
gap: var(--spacing-lg);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.gallery-item {
|
|
254
|
+
border: 1px solid var(--border-color-primary);
|
|
255
|
+
border-radius: var(--button-large-radius);
|
|
256
|
+
overflow: hidden;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.gallery-item:hover {
|
|
260
|
+
border-color: var(--border-color-accent);
|
|
261
|
+
background: var(--table-row-focus);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.table-wrap {
|
|
265
|
+
border: 1px solid var(--border-color-primary);
|
|
266
|
+
border-radius: var(--table-radius);
|
|
267
|
+
width: var(--size-full);
|
|
268
|
+
table-layout: auto;
|
|
269
|
+
overflow-x: auto;
|
|
270
|
+
line-height: var(--line-sm);
|
|
271
|
+
color: var(--table-text-color);
|
|
272
|
+
}
|
|
273
|
+
table {
|
|
274
|
+
width: var(--size-full);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.tr-head {
|
|
278
|
+
box-shadow: var(--shadow-drop-lg);
|
|
279
|
+
border-bottom: 1px solid var(--border-color-primary);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.tr-head > * + * {
|
|
283
|
+
border-right-width: 0px;
|
|
284
|
+
border-left-width: 1px;
|
|
285
|
+
border-color: var(--border-color-primary);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
th {
|
|
289
|
+
padding: var(--size-2);
|
|
290
|
+
white-space: nowrap;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.tr-body {
|
|
294
|
+
cursor: pointer;
|
|
295
|
+
border-bottom: 1px solid var(--border-color-primary);
|
|
296
|
+
background: var(--table-even-background-fill);
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.tr-body:last-child {
|
|
300
|
+
border: none;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.tr-body:nth-child(odd) {
|
|
304
|
+
background: var(--table-odd-background-fill);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.tr-body:hover {
|
|
308
|
+
background: var(--table-row-focus);
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.tr-body > * + * {
|
|
312
|
+
border-right-width: 0px;
|
|
313
|
+
border-left-width: 1px;
|
|
314
|
+
border-color: var(--border-color-primary);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.tr-body:hover > * + * {
|
|
318
|
+
border-color: var(--border-color-accent);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
td {
|
|
322
|
+
padding: var(--size-2);
|
|
323
|
+
text-align: center;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.paginate {
|
|
327
|
+
display: flex;
|
|
328
|
+
justify-content: center;
|
|
329
|
+
align-items: center;
|
|
330
|
+
gap: var(--spacing-sm);
|
|
331
|
+
margin-top: var(--size-2);
|
|
332
|
+
color: var(--block-label-text-color);
|
|
333
|
+
font-size: var(--text-sm);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
button.current-page {
|
|
337
|
+
font-weight: var(--weight-bold);
|
|
338
|
+
}
|
|
339
|
+
</style>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { ComponentType } from "svelte";
|
|
3
|
+
import type { Gradio, SelectData } from "@gradio/utils";
|
|
4
|
+
declare const __propDef: {
|
|
5
|
+
props: {
|
|
6
|
+
components: string[];
|
|
7
|
+
component_props: Record<string, any>[];
|
|
8
|
+
component_map: Map<string, Promise<{
|
|
9
|
+
default: ComponentType<SvelteComponent>;
|
|
10
|
+
}>>;
|
|
11
|
+
label?: string | undefined;
|
|
12
|
+
headers: string[];
|
|
13
|
+
samples?: (any[][] | null) | undefined;
|
|
14
|
+
sample_labels?: (string[] | null) | undefined;
|
|
15
|
+
elem_id?: string | undefined;
|
|
16
|
+
elem_classes?: string[] | undefined;
|
|
17
|
+
visible?: boolean | undefined;
|
|
18
|
+
value?: (number | null) | undefined;
|
|
19
|
+
root: string;
|
|
20
|
+
proxy_url: null | string;
|
|
21
|
+
samples_per_page?: number | undefined;
|
|
22
|
+
scale?: (number | null) | undefined;
|
|
23
|
+
min_width?: number | undefined;
|
|
24
|
+
gradio: Gradio<{
|
|
25
|
+
click: number;
|
|
26
|
+
select: SelectData;
|
|
27
|
+
}>;
|
|
28
|
+
};
|
|
29
|
+
events: {
|
|
30
|
+
[evt: string]: CustomEvent<any>;
|
|
31
|
+
};
|
|
32
|
+
slots: {};
|
|
33
|
+
};
|
|
34
|
+
export type IndexProps = typeof __propDef.props;
|
|
35
|
+
export type IndexEvents = typeof __propDef.events;
|
|
36
|
+
export type IndexSlots = typeof __propDef.slots;
|
|
37
|
+
export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
|
|
38
|
+
}
|
|
39
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/dataset",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.5-beta.1",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -8,18 +8,25 @@
|
|
|
8
8
|
"private": false,
|
|
9
9
|
"main_changeset": true,
|
|
10
10
|
"exports": {
|
|
11
|
-
".":
|
|
11
|
+
".": {
|
|
12
|
+
"gradio": "./Index.svelte",
|
|
13
|
+
"svelte": "./dist/Index.svelte",
|
|
14
|
+
"types": "./dist/Index.svelte.d.ts"
|
|
15
|
+
},
|
|
12
16
|
"./package.json": "./package.json"
|
|
13
17
|
},
|
|
14
18
|
"dependencies": {
|
|
15
|
-
"@gradio/
|
|
16
|
-
"@gradio/
|
|
17
|
-
"@gradio/
|
|
18
|
-
"@gradio/
|
|
19
|
-
"@gradio/
|
|
19
|
+
"@gradio/atoms": "^0.8.1-beta.1",
|
|
20
|
+
"@gradio/client": "^1.6.0-beta.1",
|
|
21
|
+
"@gradio/upload": "^0.12.4-beta.1",
|
|
22
|
+
"@gradio/textbox": "^0.7.0-beta.1",
|
|
23
|
+
"@gradio/utils": "^0.7.0-beta.1"
|
|
20
24
|
},
|
|
21
25
|
"devDependencies": {
|
|
22
|
-
"@gradio/preview": "^0.11.0"
|
|
26
|
+
"@gradio/preview": "^0.11.1-beta.0"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"svelte": "^4.0.0"
|
|
23
30
|
},
|
|
24
31
|
"repository": {
|
|
25
32
|
"type": "git",
|