Spaces:
Running
Running
File size: 3,002 Bytes
88f4632 50015a0 465df5b 50015a0 88f4632 50015a0 465df5b 50015a0 465df5b 88f4632 465df5b 88f4632 465df5b 88f4632 50015a0 88f4632 50015a0 88f4632 50015a0 6cb1365 50015a0 6cb1365 50015a0 6cb1365 50015a0 88f4632 6cb1365 465df5b 6cb1365 465df5b 88f4632 465df5b 88f4632 465df5b 88f4632 465df5b 88f4632 465df5b |
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 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
import Modal from "./Modal.svelte";
import JsonView from "./JsonView.svelte";
export let active: any;
export let availableModels: string[];
export let selectedModel: string;
export let availableOCRModels: string[];
export let selectedOCRModel: string;
$: currentPrediction =
active.predictions?.[selectedModel] || active.prediction;
$: currentOCRText =
active.ocr?.[selectedOCRModel] ||
active.ocr?.[Object.keys(active.ocr || {})[0]];
</script>
<Modal on:close={() => dispatch("close")}>
<div
class="bg-white rounded-2xl w-full max-w-[80vw] shadow-xl max-h-[90vh] overflow-hidden flex flex-col"
role="document"
tabindex="-1"
>
<div
class="flex items-center justify-between p-3 border-b sticky top-0 bg-white z-20"
>
<h2 class="font-semibold">{active.file}</h2>
<button class="btn btn-sm" on:click={() => dispatch("close")}
>Close</button
>
</div>
<div
class="flex flex-col lg:grid p-4 lg:grid-cols-3 gap-4 h-full flex-1 overflow-auto"
>
<div class=" flex items-center justify-center bg-neutral-50">
<img
src={active.full}
alt={active.file}
class="w-full object-contain max-h-[60vh] lg:max-h-[80vh]"
/>
</div>
<div
class="flex items-center gap-4 justify-start flex-col w-full lg:mt-0"
>
<div class="flex flex-col gap-2">
<h3 class="font-semibold text-lg text-center">OCR text</h3>
<select class="select select-info">
{#each availableOCRModels as model}
<option
value={model}
selected={model === selectedOCRModel}
on:click={() => (selectedOCRModel = model)}
>{model}</option
>
{/each}
</select>
</div>
<section>
<div class="card bg-base-100 w-full shadow-sm">
<div class="card-body">
<h2 class="card-title">{selectedOCRModel}</h2>
<span class="whitespace-pre-wrap"
>{currentOCRText}</span
>
</div>
</div>
</section>
</div>
<div class="gap-4 flex flex-col min-h-0 mt-4 lg:mt-0">
<div class="flex flex-col items-center gap-2">
<h3 class="font-semibold text-lg">Model Predictions</h3>
<select class="select select-info">
{#each availableModels as model}
<option
value={model}
selected={model === selectedModel}
on:click={() => (selectedModel = model)}
>{model}</option
>
{/each}
</select>
</div>
<section>
<JsonView
card_title={`Prediction: ${selectedModel}`}
data={active.predictions?.[selectedModel]}
/>
</section>
<section>
<JsonView
card_title="Ground truth"
data={active.ground_truth}
/>
</section>
{#if active.score}
<section>
<h3 class="font-semibold mb-1">Scores</h3>
<JsonView card_title="Scores" data={active.score} />
</section>
{/if}
</div>
</div>
</div>
</Modal>
|