File size: 3,110 Bytes
a03b3ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<script lang="ts">
import { csvParseRows, tsvParseRows } from "d3-dsv";
import type { Gradio } from "@gradio/utils";
export let gradio: Gradio;
export let value: (string | number)[][] | string;
export let samples_dir: string;
export let type: "gallery" | "table";
export let selected = false;
export let index: number;
let hovered = false;
let loaded_value: (string | number)[][] | string = value;
let loaded = Array.isArray(loaded_value);
$: if (!loaded && typeof value === "string" && /\.[a-zA-Z]+$/.test(value)) {
fetch(samples_dir + value)
.then((v) => v.text())
.then((v) => {
try {
if ((value as string).endsWith("csv")) {
const small_df = v
.split("\n")
.slice(0, 4)
.map((v) => v.split(",").slice(0, 4).join(","))
.join("\n");
loaded_value = csvParseRows(small_df);
} else if ((value as string).endsWith("tsv")) {
const small_df = v
.split("\n")
.slice(0, 4)
.map((v) => v.split("\t").slice(0, 4).join("\t"))
.join("\n");
loaded_value = tsvParseRows(small_df);
} else {
throw new Error(gradio.i18n("dataframe.incorrect_format"));
}
loaded = true;
} catch (e) {
console.error(e);
}
})
.catch((e) => {
loaded_value = value;
loaded = true;
});
}
</script>
{#if loaded}
<!-- TODO: fix-->
<!-- svelte-ignore a11y-no-static-element-interactions-->
<div
class:table={type === "table"}
class:gallery={type === "gallery"}
class:selected
on:mouseenter={() => (hovered = true)}
on:mouseleave={() => (hovered = false)}
>
{#if typeof loaded_value === "string"}
{loaded_value}
{:else}
<table class="">
{#each loaded_value.slice(0, 3) as row, i}
<tr>
{#each row.slice(0, 3) as cell, j}
<td>{cell}</td>
{/each}
{#if row.length > 3}
<td>…</td>
{/if}
</tr>
{/each}
{#if value.length > 3}
<div
class="overlay"
class:odd={index % 2 != 0}
class:even={index % 2 == 0}
class:button={type === "gallery"}
/>
{/if}
</table>
{/if}
</div>
{/if}
<style>
table {
position: relative;
}
td {
border: 1px solid var(--table-border-color);
padding: var(--size-2);
font-size: var(--text-sm);
font-family: var(--font-mono);
}
.selected td {
border-color: var(--border-color-accent);
}
.table {
display: inline-block;
margin: 0 auto;
}
.gallery td:first-child {
border-left: none;
}
.gallery tr:first-child td {
border-top: none;
}
.gallery td:last-child {
border-right: none;
}
.gallery tr:last-child td {
border-bottom: none;
}
.overlay {
--gradient-to: transparent;
position: absolute;
bottom: 0;
background: linear-gradient(to bottom, transparent, var(--gradient-to));
width: var(--size-full);
height: 50%;
}
/* i dont know what i've done here but it is what it is */
.odd {
--gradient-to: var(--table-even-background-fill);
}
.even {
--gradient-to: var(--table-odd-background-fill);
}
.button {
--gradient-to: var(--background-fill-primary);
}
</style>
|