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