src/lib/components/ImageModal.svelte

<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>