@gradio/dataset 0.4.35-dev.0 → 0.5.0
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 +48 -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/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,52 @@
|
|
|
1
1
|
# @gradio/dataset
|
|
2
|
+
## 0.5.0
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Fix Reload Mode in 6.0
|
|
7
|
+
- [#12438](https://github.com/gradio-app/gradio/pull/12438) [`25ffc03`](https://github.com/gradio-app/gradio/commit/25ffc0398f8feb43d817c02b2ab970c16de6d797) - Svelte5 migration and bugfix
|
|
8
|
+
|
|
9
|
+
### Dependencies
|
|
10
|
+
|
|
11
|
+
- @gradio/atoms@0.19.0
|
|
12
|
+
- @gradio/client@2.0.0
|
|
13
|
+
- @gradio/utils@0.10.3
|
|
14
|
+
- @gradio/upload@0.17.2
|
|
15
|
+
- @gradio/textbox@0.12.0
|
|
16
|
+
|
|
17
|
+
## 0.5.0-dev.3
|
|
18
|
+
|
|
19
|
+
### Features
|
|
20
|
+
|
|
21
|
+
- [#12383](https://github.com/gradio-app/gradio/pull/12383) [`6505763`](https://github.com/gradio-app/gradio/commit/650576399bad10f03aaa03dd9437f03b47ba378b) - Fix Reload Mode in 6.0. Thanks @freddyaboulton!
|
|
22
|
+
|
|
23
|
+
### Dependency updates
|
|
24
|
+
|
|
25
|
+
- @gradio/atoms@0.19.0-dev.1
|
|
26
|
+
- @gradio/client@2.0.0-dev.2
|
|
27
|
+
- @gradio/upload@0.17.2-dev.2
|
|
28
|
+
- @gradio/textbox@0.12.0-dev.2
|
|
29
|
+
|
|
30
|
+
## 0.4.35-dev.2
|
|
31
|
+
|
|
32
|
+
### Dependency updates
|
|
33
|
+
|
|
34
|
+
- @gradio/textbox@0.12.0-dev.1
|
|
35
|
+
|
|
36
|
+
## 0.4.35-dev.1
|
|
37
|
+
|
|
38
|
+
### Dependency updates
|
|
39
|
+
|
|
40
|
+
- @gradio/textbox@0.11.2-dev.0
|
|
41
|
+
- @gradio/atoms@0.18.2-dev.0
|
|
42
|
+
- @gradio/upload@0.17.2-dev.1
|
|
43
|
+
- @gradio/utils@0.10.3-dev.0
|
|
44
|
+
|
|
45
|
+
## 0.4.35-dev.0
|
|
46
|
+
|
|
47
|
+
### Dependency updates
|
|
48
|
+
|
|
49
|
+
- @gradio/client@2.0.0-dev.1
|
|
2
50
|
|
|
3
51
|
## 0.4.35-dev.0
|
|
4
52
|
|
package/Dataset.svelte
ADDED
|
@@ -0,0 +1,353 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Block } from "@gradio/atoms";
|
|
3
|
+
import type { SvelteComponent, ComponentType } from "svelte";
|
|
4
|
+
import type { Gradio, SelectData } from "@gradio/utils";
|
|
5
|
+
import { BaseExample } from "@gradio/textbox";
|
|
6
|
+
import type { load_component as load_component_type } from "@gradio/utils";
|
|
7
|
+
|
|
8
|
+
export let components: string[];
|
|
9
|
+
export let component_props: Record<string, any>[];
|
|
10
|
+
let component_map: Map<
|
|
11
|
+
string,
|
|
12
|
+
Promise<{
|
|
13
|
+
default: ComponentType<SvelteComponent>;
|
|
14
|
+
}>
|
|
15
|
+
> = new Map();
|
|
16
|
+
export let load_component: load_component_type;
|
|
17
|
+
export let headers: string[];
|
|
18
|
+
export let samples: any[][] | null = null;
|
|
19
|
+
let old_samples: any[][] | null = null;
|
|
20
|
+
export let sample_labels: string[] | null = null;
|
|
21
|
+
export let value: number | null = null;
|
|
22
|
+
export let root: string;
|
|
23
|
+
export let proxy_url: null | string;
|
|
24
|
+
export let samples_per_page = 10;
|
|
25
|
+
export let onclick: (data: SelectData) => void;
|
|
26
|
+
export let onselect: (data: SelectData) => void;
|
|
27
|
+
|
|
28
|
+
export let layout: "gallery" | "table" | null = null;
|
|
29
|
+
|
|
30
|
+
// Although the `samples_dir` prop is not used in any of the core Gradio component, it is kept for backward compatibility
|
|
31
|
+
// with any custom components created with gradio<=4.20.0
|
|
32
|
+
let samples_dir: string = proxy_url
|
|
33
|
+
? `/proxy=${proxy_url}file=`
|
|
34
|
+
: `${root}/file=`;
|
|
35
|
+
let page = 0;
|
|
36
|
+
|
|
37
|
+
$: gallery =
|
|
38
|
+
(components.length < 2 || sample_labels !== null) && layout !== "table";
|
|
39
|
+
let paginate = samples ? samples.length > samples_per_page : false;
|
|
40
|
+
|
|
41
|
+
let selected_samples: any[][];
|
|
42
|
+
let page_count: number;
|
|
43
|
+
let visible_pages: number[] = [];
|
|
44
|
+
|
|
45
|
+
let current_hover = -1;
|
|
46
|
+
|
|
47
|
+
function handle_mouseenter(i: number): void {
|
|
48
|
+
current_hover = i;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function handle_mouseleave(): void {
|
|
52
|
+
current_hover = -1;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
$: {
|
|
56
|
+
if (sample_labels) {
|
|
57
|
+
samples = sample_labels.map((e) => [e]);
|
|
58
|
+
} else if (!samples) {
|
|
59
|
+
samples = [];
|
|
60
|
+
}
|
|
61
|
+
if (JSON.stringify(samples) !== JSON.stringify(old_samples)) {
|
|
62
|
+
page = 0;
|
|
63
|
+
old_samples = samples;
|
|
64
|
+
}
|
|
65
|
+
paginate = samples.length > samples_per_page;
|
|
66
|
+
if (paginate) {
|
|
67
|
+
visible_pages = [];
|
|
68
|
+
selected_samples = samples.slice(
|
|
69
|
+
page * samples_per_page,
|
|
70
|
+
(page + 1) * samples_per_page
|
|
71
|
+
);
|
|
72
|
+
page_count = Math.ceil(samples.length / samples_per_page);
|
|
73
|
+
[0, page, page_count - 1].forEach((anchor) => {
|
|
74
|
+
for (let i = anchor - 2; i <= anchor + 2; i++) {
|
|
75
|
+
if (i >= 0 && i < page_count && !visible_pages.includes(i)) {
|
|
76
|
+
if (
|
|
77
|
+
visible_pages.length > 0 &&
|
|
78
|
+
i - visible_pages[visible_pages.length - 1] > 1
|
|
79
|
+
) {
|
|
80
|
+
visible_pages.push(-1);
|
|
81
|
+
}
|
|
82
|
+
visible_pages.push(i);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
} else {
|
|
87
|
+
selected_samples = samples.slice();
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
let component_meta: {
|
|
92
|
+
value: any;
|
|
93
|
+
component: ComponentType<SvelteComponent>;
|
|
94
|
+
}[][] = [];
|
|
95
|
+
|
|
96
|
+
async function get_component_meta(
|
|
97
|
+
selected_samples_json: string
|
|
98
|
+
): Promise<void> {
|
|
99
|
+
const _selected_samples: any[][] = JSON.parse(selected_samples_json);
|
|
100
|
+
console.log("+++++++++++++++++++++++++++++++++++++");
|
|
101
|
+
console.log(
|
|
102
|
+
"Getting component meta for samples:",
|
|
103
|
+
_selected_samples,
|
|
104
|
+
components
|
|
105
|
+
);
|
|
106
|
+
// @ts-ignore
|
|
107
|
+
component_meta = await Promise.all(
|
|
108
|
+
_selected_samples &&
|
|
109
|
+
_selected_samples.map(
|
|
110
|
+
async (sample_row) =>
|
|
111
|
+
await Promise.all(
|
|
112
|
+
sample_row.map(async (sample_cell, j) => {
|
|
113
|
+
console.log("Loading component:", components[j]);
|
|
114
|
+
return {
|
|
115
|
+
value: sample_cell,
|
|
116
|
+
component: load_component(components[j], "example")
|
|
117
|
+
};
|
|
118
|
+
})
|
|
119
|
+
)
|
|
120
|
+
)
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// Need to striginfiy the samples otherwise get_component_meta will trigger infinitely
|
|
125
|
+
// Saw this when rendering examples in a gr.render block
|
|
126
|
+
$: selected_samples_json = JSON.stringify(selected_samples || []);
|
|
127
|
+
|
|
128
|
+
// $: get_component_meta(selected_samples_json);
|
|
129
|
+
</script>
|
|
130
|
+
|
|
131
|
+
{#await get_component_meta(selected_samples_json) then _}
|
|
132
|
+
{#if gallery}
|
|
133
|
+
<div class="gallery">
|
|
134
|
+
{#each selected_samples as sample_row, i}
|
|
135
|
+
{#if sample_row[0] != null}
|
|
136
|
+
<button
|
|
137
|
+
class="gallery-item"
|
|
138
|
+
on:click={() => {
|
|
139
|
+
value = i + page * samples_per_page;
|
|
140
|
+
onclick({ index: value, value: sample_row });
|
|
141
|
+
onselect({ index: value, value: sample_row });
|
|
142
|
+
}}
|
|
143
|
+
on:mouseenter={() => handle_mouseenter(i)}
|
|
144
|
+
on:mouseleave={() => handle_mouseleave()}
|
|
145
|
+
>
|
|
146
|
+
{#if sample_labels}
|
|
147
|
+
<BaseExample
|
|
148
|
+
value={sample_row[0]}
|
|
149
|
+
selected={current_hover === i}
|
|
150
|
+
type="gallery"
|
|
151
|
+
/>
|
|
152
|
+
{:else if component_meta.length}
|
|
153
|
+
{#await component_meta[0][0].component then component}
|
|
154
|
+
{#key sample_row[0]}
|
|
155
|
+
<svelte:component
|
|
156
|
+
this={component.default}
|
|
157
|
+
{...component_props[0]}
|
|
158
|
+
value={sample_row[0]}
|
|
159
|
+
{samples_dir}
|
|
160
|
+
type="gallery"
|
|
161
|
+
selected={current_hover === i}
|
|
162
|
+
index={i}
|
|
163
|
+
{root}
|
|
164
|
+
/>
|
|
165
|
+
{/key}
|
|
166
|
+
{/await}
|
|
167
|
+
{/if}
|
|
168
|
+
</button>
|
|
169
|
+
{/if}
|
|
170
|
+
{/each}
|
|
171
|
+
</div>
|
|
172
|
+
{:else if selected_samples.length > 0}
|
|
173
|
+
<div class="table-wrap">
|
|
174
|
+
<table tabindex="0" role="grid">
|
|
175
|
+
<thead>
|
|
176
|
+
<tr class="tr-head">
|
|
177
|
+
{#each headers as header}
|
|
178
|
+
<th>
|
|
179
|
+
{header}
|
|
180
|
+
</th>
|
|
181
|
+
{/each}
|
|
182
|
+
</tr>
|
|
183
|
+
</thead>
|
|
184
|
+
<tbody>
|
|
185
|
+
{#each component_meta as sample_row, i}
|
|
186
|
+
<tr
|
|
187
|
+
class="tr-body"
|
|
188
|
+
on:click={() => {
|
|
189
|
+
value = i + page * samples_per_page;
|
|
190
|
+
onclick({ index: value, value: sample_row });
|
|
191
|
+
onselect({
|
|
192
|
+
index: value,
|
|
193
|
+
value: selected_samples[i]
|
|
194
|
+
});
|
|
195
|
+
}}
|
|
196
|
+
on:mouseenter={() => handle_mouseenter(i)}
|
|
197
|
+
on:mouseleave={() => handle_mouseleave()}
|
|
198
|
+
>
|
|
199
|
+
{#each sample_row as { value, component }, j}
|
|
200
|
+
{@const component_name = components[j]}
|
|
201
|
+
|
|
202
|
+
{#if component_name !== undefined}
|
|
203
|
+
<td
|
|
204
|
+
style="max-width: {component_name === 'textbox'
|
|
205
|
+
? '35ch'
|
|
206
|
+
: 'auto'}"
|
|
207
|
+
class={component_name}
|
|
208
|
+
>
|
|
209
|
+
{#await component then component}
|
|
210
|
+
<svelte:component
|
|
211
|
+
this={component.default}
|
|
212
|
+
{...component_props[j]}
|
|
213
|
+
{value}
|
|
214
|
+
{samples_dir}
|
|
215
|
+
type="table"
|
|
216
|
+
selected={current_hover === i}
|
|
217
|
+
index={i}
|
|
218
|
+
{root}
|
|
219
|
+
/>
|
|
220
|
+
{/await}
|
|
221
|
+
</td>
|
|
222
|
+
{/if}
|
|
223
|
+
{/each}
|
|
224
|
+
</tr>
|
|
225
|
+
{/each}
|
|
226
|
+
</tbody>
|
|
227
|
+
</table>
|
|
228
|
+
</div>
|
|
229
|
+
{/if}
|
|
230
|
+
{#if paginate}
|
|
231
|
+
<div class="paginate">
|
|
232
|
+
Pages:
|
|
233
|
+
{#each visible_pages as visible_page}
|
|
234
|
+
{#if visible_page === -1}
|
|
235
|
+
<div>...</div>
|
|
236
|
+
{:else}
|
|
237
|
+
<button
|
|
238
|
+
class:current-page={page === visible_page}
|
|
239
|
+
on:click={() => (page = visible_page)}
|
|
240
|
+
>
|
|
241
|
+
{visible_page + 1}
|
|
242
|
+
</button>
|
|
243
|
+
{/if}
|
|
244
|
+
{/each}
|
|
245
|
+
</div>
|
|
246
|
+
{/if}
|
|
247
|
+
{/await}
|
|
248
|
+
|
|
249
|
+
<style>
|
|
250
|
+
.wrap {
|
|
251
|
+
display: inline-block;
|
|
252
|
+
width: var(--size-full);
|
|
253
|
+
max-width: var(--size-full);
|
|
254
|
+
color: var(--body-text-color);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.hide {
|
|
258
|
+
display: none;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.gallery {
|
|
262
|
+
display: flex;
|
|
263
|
+
flex-wrap: wrap;
|
|
264
|
+
gap: var(--spacing-lg);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.gallery-item {
|
|
268
|
+
border: 1px solid var(--border-color-primary);
|
|
269
|
+
border-radius: var(--button-large-radius);
|
|
270
|
+
overflow: hidden;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.gallery-item:hover {
|
|
274
|
+
border-color: var(--border-color-accent);
|
|
275
|
+
background: var(--table-row-focus);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.table-wrap {
|
|
279
|
+
border: 1px solid var(--border-color-primary);
|
|
280
|
+
border-radius: var(--table-radius);
|
|
281
|
+
width: var(--size-full);
|
|
282
|
+
table-layout: auto;
|
|
283
|
+
overflow-x: auto;
|
|
284
|
+
line-height: var(--line-sm);
|
|
285
|
+
color: var(--table-text-color);
|
|
286
|
+
}
|
|
287
|
+
table {
|
|
288
|
+
width: var(--size-full);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.tr-head {
|
|
292
|
+
box-shadow: var(--shadow-drop-lg);
|
|
293
|
+
border-bottom: 1px solid var(--border-color-primary);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.tr-head > * + * {
|
|
297
|
+
border-right-width: 0px;
|
|
298
|
+
border-left-width: 1px;
|
|
299
|
+
border-color: var(--border-color-primary);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
th {
|
|
303
|
+
padding: var(--size-2);
|
|
304
|
+
white-space: nowrap;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.tr-body {
|
|
308
|
+
cursor: pointer;
|
|
309
|
+
border-bottom: 1px solid var(--border-color-primary);
|
|
310
|
+
background: var(--table-even-background-fill);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.tr-body:last-child {
|
|
314
|
+
border: none;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.tr-body:nth-child(odd) {
|
|
318
|
+
background: var(--table-odd-background-fill);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.tr-body:hover {
|
|
322
|
+
background: var(--table-row-focus);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.tr-body > * + * {
|
|
326
|
+
border-right-width: 0px;
|
|
327
|
+
border-left-width: 1px;
|
|
328
|
+
border-color: var(--border-color-primary);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.tr-body:hover > * + * {
|
|
332
|
+
border-color: var(--border-color-accent);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
td {
|
|
336
|
+
padding: var(--size-2);
|
|
337
|
+
text-align: center;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.paginate {
|
|
341
|
+
display: flex;
|
|
342
|
+
justify-content: center;
|
|
343
|
+
align-items: center;
|
|
344
|
+
gap: var(--spacing-sm);
|
|
345
|
+
margin-top: var(--size-2);
|
|
346
|
+
color: var(--block-label-text-color);
|
|
347
|
+
font-size: var(--text-sm);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
button.current-page {
|
|
351
|
+
font-weight: var(--weight-bold);
|
|
352
|
+
}
|
|
353
|
+
</style>
|