@gradio/dataset 0.4.35-dev.0 → 0.5.0-dev.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 +34 -0
- package/Dataset.svelte +353 -0
- package/Index.svelte +25 -331
- package/dist/Dataset.svelte +353 -0
- package/dist/Dataset.svelte.d.ts +34 -0
- package/dist/Index.svelte +32 -303
- package/dist/Index.svelte.d.ts +3 -43
- package/dist/types.d.ts +17 -0
- package/dist/types.js +1 -0
- package/package.json +8 -8
- package/types.ts +20 -0
package/Index.svelte
CHANGED
|
@@ -1,135 +1,30 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { Block } from "@gradio/atoms";
|
|
3
3
|
import type { SvelteComponent, ComponentType } from "svelte";
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
export let components: string[];
|
|
7
|
-
export let component_props: Record<string, any>[];
|
|
8
|
-
export let component_map: Map<
|
|
9
|
-
string,
|
|
10
|
-
Promise<{
|
|
11
|
-
default: ComponentType<SvelteComponent>;
|
|
12
|
-
}>
|
|
13
|
-
>;
|
|
14
|
-
export let label = "Examples";
|
|
15
|
-
export let show_label = true;
|
|
16
|
-
export let headers: string[];
|
|
17
|
-
export let samples: any[][] | null = null;
|
|
18
|
-
let old_samples: any[][] | null = null;
|
|
19
|
-
export let sample_labels: string[] | null = null;
|
|
20
|
-
export let elem_id = "";
|
|
21
|
-
export let elem_classes: string[] = [];
|
|
22
|
-
export let visible: boolean | "hidden" = true;
|
|
23
|
-
export let value: number | null = null;
|
|
24
|
-
export let root: string;
|
|
25
|
-
export let proxy_url: null | string;
|
|
26
|
-
export let samples_per_page = 10;
|
|
27
|
-
export let scale: number | null = null;
|
|
28
|
-
export let min_width: number | undefined = undefined;
|
|
29
|
-
export let gradio: Gradio<{
|
|
30
|
-
click: number;
|
|
31
|
-
select: SelectData;
|
|
32
|
-
}>;
|
|
33
|
-
export let layout: "gallery" | "table" | null = null;
|
|
4
|
+
import { Gradio } from "@gradio/utils";
|
|
5
|
+
import type { DatasetProps, DatasetEvents } from "./types";
|
|
34
6
|
|
|
35
|
-
|
|
36
|
-
// with any custom components created with gradio<=4.20.0
|
|
37
|
-
let samples_dir: string = proxy_url
|
|
38
|
-
? `/proxy=${proxy_url}file=`
|
|
39
|
-
: `${root}/file=`;
|
|
40
|
-
let page = 0;
|
|
7
|
+
import Dataset from "./Dataset.svelte";
|
|
41
8
|
|
|
42
|
-
|
|
43
|
-
(components.length < 2 || sample_labels !== null) && layout !== "table";
|
|
44
|
-
let paginate = samples ? samples.length > samples_per_page : false;
|
|
9
|
+
let props = $props();
|
|
45
10
|
|
|
46
|
-
|
|
47
|
-
let page_count: number;
|
|
48
|
-
let visible_pages: number[] = [];
|
|
11
|
+
const gradio = new Gradio<DatasetEvents, DatasetProps>(props);
|
|
49
12
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
function handle_mouseenter(i: number): void {
|
|
53
|
-
current_hover = i;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
function handle_mouseleave(): void {
|
|
57
|
-
current_hover = -1;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
$: {
|
|
61
|
-
if (sample_labels) {
|
|
62
|
-
samples = sample_labels.map((e) => [e]);
|
|
63
|
-
} else if (!samples) {
|
|
64
|
-
samples = [];
|
|
65
|
-
}
|
|
66
|
-
if (JSON.stringify(samples) !== JSON.stringify(old_samples)) {
|
|
67
|
-
page = 0;
|
|
68
|
-
old_samples = samples;
|
|
69
|
-
}
|
|
70
|
-
paginate = samples.length > samples_per_page;
|
|
71
|
-
if (paginate) {
|
|
72
|
-
visible_pages = [];
|
|
73
|
-
selected_samples = samples.slice(
|
|
74
|
-
page * samples_per_page,
|
|
75
|
-
(page + 1) * samples_per_page
|
|
76
|
-
);
|
|
77
|
-
page_count = Math.ceil(samples.length / samples_per_page);
|
|
78
|
-
[0, page, page_count - 1].forEach((anchor) => {
|
|
79
|
-
for (let i = anchor - 2; i <= anchor + 2; i++) {
|
|
80
|
-
if (i >= 0 && i < page_count && !visible_pages.includes(i)) {
|
|
81
|
-
if (
|
|
82
|
-
visible_pages.length > 0 &&
|
|
83
|
-
i - visible_pages[visible_pages.length - 1] > 1
|
|
84
|
-
) {
|
|
85
|
-
visible_pages.push(-1);
|
|
86
|
-
}
|
|
87
|
-
visible_pages.push(i);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
});
|
|
91
|
-
} else {
|
|
92
|
-
selected_samples = samples.slice();
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
let component_meta: {
|
|
97
|
-
value: any;
|
|
98
|
-
component: ComponentType<SvelteComponent>;
|
|
99
|
-
}[][] = [];
|
|
100
|
-
|
|
101
|
-
async function get_component_meta(selected_samples: any[][]): Promise<void> {
|
|
102
|
-
component_meta = await Promise.all(
|
|
103
|
-
selected_samples &&
|
|
104
|
-
selected_samples.map(
|
|
105
|
-
async (sample_row) =>
|
|
106
|
-
await Promise.all(
|
|
107
|
-
sample_row.map(async (sample_cell, j) => {
|
|
108
|
-
return {
|
|
109
|
-
value: sample_cell,
|
|
110
|
-
component: (await component_map.get(components[j]))
|
|
111
|
-
?.default as ComponentType<SvelteComponent>
|
|
112
|
-
};
|
|
113
|
-
})
|
|
114
|
-
)
|
|
115
|
-
)
|
|
116
|
-
);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
$: component_map, get_component_meta(selected_samples);
|
|
13
|
+
// Need to mark samples as state, otherwise get_component_meta constantly triggers
|
|
14
|
+
let samples = $derived(gradio.props.samples ?? []);
|
|
120
15
|
</script>
|
|
121
16
|
|
|
122
17
|
<Block
|
|
123
|
-
{visible}
|
|
18
|
+
visible={gradio.shared.visible}
|
|
124
19
|
padding={false}
|
|
125
|
-
{elem_id}
|
|
126
|
-
{elem_classes}
|
|
127
|
-
{scale}
|
|
128
|
-
{min_width}
|
|
20
|
+
elem_id={gradio.shared.elem_id}
|
|
21
|
+
elem_classes={gradio.shared.elem_classes}
|
|
22
|
+
scale={gradio.shared.scale}
|
|
23
|
+
min_width={gradio.shared.min_width}
|
|
129
24
|
allow_overflow={false}
|
|
130
25
|
container={false}
|
|
131
26
|
>
|
|
132
|
-
{#if show_label}
|
|
27
|
+
{#if gradio.shared.show_label}
|
|
133
28
|
<div class="label">
|
|
134
29
|
<svg
|
|
135
30
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -146,131 +41,23 @@
|
|
|
146
41
|
d="M10 6h18v2H10zm0 18h18v2H10zm0-9h18v2H10zm-6 0h2v2H4zm0-9h2v2H4zm0 18h2v2H4z"
|
|
147
42
|
/>
|
|
148
43
|
</svg>
|
|
149
|
-
{label}
|
|
150
|
-
</div>
|
|
151
|
-
{/if}
|
|
152
|
-
{#if gallery}
|
|
153
|
-
<div class="gallery">
|
|
154
|
-
{#each selected_samples as sample_row, i}
|
|
155
|
-
{#if sample_row[0] != null}
|
|
156
|
-
<button
|
|
157
|
-
class="gallery-item"
|
|
158
|
-
on:click={() => {
|
|
159
|
-
value = i + page * samples_per_page;
|
|
160
|
-
gradio.dispatch("click", value);
|
|
161
|
-
gradio.dispatch("select", { index: value, value: sample_row });
|
|
162
|
-
}}
|
|
163
|
-
on:mouseenter={() => handle_mouseenter(i)}
|
|
164
|
-
on:mouseleave={() => handle_mouseleave()}
|
|
165
|
-
>
|
|
166
|
-
{#if sample_labels}
|
|
167
|
-
<BaseExample
|
|
168
|
-
value={sample_row[0]}
|
|
169
|
-
selected={current_hover === i}
|
|
170
|
-
type="gallery"
|
|
171
|
-
/>
|
|
172
|
-
{:else if component_meta.length && component_map.get(components[0])}
|
|
173
|
-
<svelte:component
|
|
174
|
-
this={component_meta[0][0].component}
|
|
175
|
-
{...component_props[0]}
|
|
176
|
-
value={sample_row[0]}
|
|
177
|
-
{samples_dir}
|
|
178
|
-
type="gallery"
|
|
179
|
-
selected={current_hover === i}
|
|
180
|
-
index={i}
|
|
181
|
-
{root}
|
|
182
|
-
/>
|
|
183
|
-
{/if}
|
|
184
|
-
</button>
|
|
185
|
-
{/if}
|
|
186
|
-
{/each}
|
|
187
|
-
</div>
|
|
188
|
-
{:else if selected_samples.length > 0}
|
|
189
|
-
<div class="table-wrap">
|
|
190
|
-
<table tabindex="0" role="grid">
|
|
191
|
-
<thead>
|
|
192
|
-
<tr class="tr-head">
|
|
193
|
-
{#each headers as header}
|
|
194
|
-
<th>
|
|
195
|
-
{header}
|
|
196
|
-
</th>
|
|
197
|
-
{/each}
|
|
198
|
-
</tr>
|
|
199
|
-
</thead>
|
|
200
|
-
<tbody>
|
|
201
|
-
{#each component_meta as sample_row, i}
|
|
202
|
-
<tr
|
|
203
|
-
class="tr-body"
|
|
204
|
-
on:click={() => {
|
|
205
|
-
value = i + page * samples_per_page;
|
|
206
|
-
gradio.dispatch("click", value);
|
|
207
|
-
gradio.dispatch("select", {
|
|
208
|
-
index: value,
|
|
209
|
-
value: selected_samples[i]
|
|
210
|
-
});
|
|
211
|
-
}}
|
|
212
|
-
on:mouseenter={() => handle_mouseenter(i)}
|
|
213
|
-
on:mouseleave={() => handle_mouseleave()}
|
|
214
|
-
>
|
|
215
|
-
{#each sample_row as { value, component }, j}
|
|
216
|
-
{@const component_name = components[j]}
|
|
217
|
-
{#if component_name !== undefined && component_map.get(component_name) !== undefined}
|
|
218
|
-
<td
|
|
219
|
-
style="max-width: {component_name === 'textbox'
|
|
220
|
-
? '35ch'
|
|
221
|
-
: 'auto'}"
|
|
222
|
-
class={component_name}
|
|
223
|
-
>
|
|
224
|
-
<svelte:component
|
|
225
|
-
this={component}
|
|
226
|
-
{...component_props[j]}
|
|
227
|
-
{value}
|
|
228
|
-
{samples_dir}
|
|
229
|
-
type="table"
|
|
230
|
-
selected={current_hover === i}
|
|
231
|
-
index={i}
|
|
232
|
-
{root}
|
|
233
|
-
/>
|
|
234
|
-
</td>
|
|
235
|
-
{/if}
|
|
236
|
-
{/each}
|
|
237
|
-
</tr>
|
|
238
|
-
{/each}
|
|
239
|
-
</tbody>
|
|
240
|
-
</table>
|
|
241
|
-
</div>
|
|
242
|
-
{/if}
|
|
243
|
-
{#if paginate}
|
|
244
|
-
<div class="paginate">
|
|
245
|
-
Pages:
|
|
246
|
-
{#each visible_pages as visible_page}
|
|
247
|
-
{#if visible_page === -1}
|
|
248
|
-
<div>...</div>
|
|
249
|
-
{:else}
|
|
250
|
-
<button
|
|
251
|
-
class:current-page={page === visible_page}
|
|
252
|
-
on:click={() => (page = visible_page)}
|
|
253
|
-
>
|
|
254
|
-
{visible_page + 1}
|
|
255
|
-
</button>
|
|
256
|
-
{/if}
|
|
257
|
-
{/each}
|
|
44
|
+
{gradio.shared.label || "Examples"}
|
|
258
45
|
</div>
|
|
259
46
|
{/if}
|
|
47
|
+
|
|
48
|
+
<Dataset
|
|
49
|
+
onclick={(d) => (
|
|
50
|
+
(gradio.props.value = d.index),
|
|
51
|
+
gradio.dispatch("click", gradio.props.value)
|
|
52
|
+
)}
|
|
53
|
+
onselect={(data) => gradio.dispatch("select", data)}
|
|
54
|
+
load_component={gradio.shared.load_component}
|
|
55
|
+
{samples}
|
|
56
|
+
{...gradio.props}
|
|
57
|
+
/>
|
|
260
58
|
</Block>
|
|
261
59
|
|
|
262
60
|
<style>
|
|
263
|
-
.wrap {
|
|
264
|
-
display: inline-block;
|
|
265
|
-
width: var(--size-full);
|
|
266
|
-
max-width: var(--size-full);
|
|
267
|
-
color: var(--body-text-color);
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
.hide {
|
|
271
|
-
display: none;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
61
|
.label {
|
|
275
62
|
display: flex;
|
|
276
63
|
align-items: center;
|
|
@@ -284,97 +71,4 @@
|
|
|
284
71
|
svg {
|
|
285
72
|
margin-right: var(--size-1);
|
|
286
73
|
}
|
|
287
|
-
|
|
288
|
-
.gallery {
|
|
289
|
-
display: flex;
|
|
290
|
-
flex-wrap: wrap;
|
|
291
|
-
gap: var(--spacing-lg);
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
.gallery-item {
|
|
295
|
-
border: 1px solid var(--border-color-primary);
|
|
296
|
-
border-radius: var(--button-large-radius);
|
|
297
|
-
overflow: hidden;
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
.gallery-item:hover {
|
|
301
|
-
border-color: var(--border-color-accent);
|
|
302
|
-
background: var(--table-row-focus);
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
.table-wrap {
|
|
306
|
-
border: 1px solid var(--border-color-primary);
|
|
307
|
-
border-radius: var(--table-radius);
|
|
308
|
-
width: var(--size-full);
|
|
309
|
-
table-layout: auto;
|
|
310
|
-
overflow-x: auto;
|
|
311
|
-
line-height: var(--line-sm);
|
|
312
|
-
color: var(--table-text-color);
|
|
313
|
-
}
|
|
314
|
-
table {
|
|
315
|
-
width: var(--size-full);
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
.tr-head {
|
|
319
|
-
box-shadow: var(--shadow-drop-lg);
|
|
320
|
-
border-bottom: 1px solid var(--border-color-primary);
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
.tr-head > * + * {
|
|
324
|
-
border-right-width: 0px;
|
|
325
|
-
border-left-width: 1px;
|
|
326
|
-
border-color: var(--border-color-primary);
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
th {
|
|
330
|
-
padding: var(--size-2);
|
|
331
|
-
white-space: nowrap;
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
.tr-body {
|
|
335
|
-
cursor: pointer;
|
|
336
|
-
border-bottom: 1px solid var(--border-color-primary);
|
|
337
|
-
background: var(--table-even-background-fill);
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
.tr-body:last-child {
|
|
341
|
-
border: none;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
.tr-body:nth-child(odd) {
|
|
345
|
-
background: var(--table-odd-background-fill);
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
.tr-body:hover {
|
|
349
|
-
background: var(--table-row-focus);
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
.tr-body > * + * {
|
|
353
|
-
border-right-width: 0px;
|
|
354
|
-
border-left-width: 1px;
|
|
355
|
-
border-color: var(--border-color-primary);
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
.tr-body:hover > * + * {
|
|
359
|
-
border-color: var(--border-color-accent);
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
td {
|
|
363
|
-
padding: var(--size-2);
|
|
364
|
-
text-align: center;
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
.paginate {
|
|
368
|
-
display: flex;
|
|
369
|
-
justify-content: center;
|
|
370
|
-
align-items: center;
|
|
371
|
-
gap: var(--spacing-sm);
|
|
372
|
-
margin-top: var(--size-2);
|
|
373
|
-
color: var(--block-label-text-color);
|
|
374
|
-
font-size: var(--text-sm);
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
button.current-page {
|
|
378
|
-
font-weight: var(--weight-bold);
|
|
379
|
-
}
|
|
380
74
|
</style>
|