File size: 3,460 Bytes
31d3580
 
 
15d8696
 
95e3d2a
e355be5
31d3580
e355be5
 
31d3580
95e3d2a
e355be5
6d55c38
 
e355be5
 
 
 
 
 
 
 
 
 
 
 
 
 
6d55c38
 
 
 
 
 
 
 
 
e355be5
31d3580
 
8899818
95e3d2a
 
 
8899818
95e3d2a
 
 
 
31d3580
 
 
6d55c38
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31d3580
 
 
 
 
95e3d2a
31d3580
 
 
95e3d2a
31d3580
 
95e3d2a
31d3580
 
 
95e3d2a
31d3580
95e3d2a
 
 
 
 
 
 
31d3580
 
 
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
<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import * as Tooltip from '$lib/components/ui/tooltip';
	import SunIcon from 'phosphor-svelte/lib/SunIcon';
	import MoonIcon from 'phosphor-svelte/lib/MoonIcon';
	import CaretLeftIcon from 'phosphor-svelte/lib/CaretLeftIcon';
	import ListChecksIcon from 'phosphor-svelte/lib/ListChecksIcon';
	import { mode, toggleMode } from 'mode-watcher';
	import { goto } from '$app/navigation';
	import { page } from '$app/state';
	import HfLogo from '$lib/components/hf-logo.svelte';
	import { site } from '$lib/site';
	import type { Match } from '$lib/types';
	import { buildEvalQueue, evalUrl, firstUnreviewed, EVAL_ENABLED } from '$lib/eval';
	import { toast } from 'svelte-sonner';

	const inEval = $derived(page.url.searchParams.get('eval') === '1');
	const matches = $derived((page.data?.matches ?? []) as Match[]);

	function toggleEval() {
		if (inEval) {
			const url = new URL(page.url);
			url.searchParams.delete('eval');
			url.searchParams.delete('i');
			goto(url.pathname + (url.searchParams.size ? '?' + url.searchParams.toString() : ''));
			return;
		}
		const queue = buildEvalQueue(matches);
		if (!queue.length) return;
		// Resume on the first un-reviewed candidate so prior sessions aren't replayed.
		const start = firstUnreviewed(queue);
		if (start < 0) {
			toast.success('All eval candidates already reviewed', {
				description: `${queue.length} total. Clear local data in the Flag dialog to redo.`
			});
			return;
		}
		goto(evalUrl(queue[start], start));
	}
</script>

<header class="border-b border-border/60">
	<div class="mx-auto flex h-12 w-full max-w-[1600px] items-center gap-3 px-4">
		<a
			href="/"
			class="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition hover:text-foreground"
			aria-label="Back to dataset home"
		>
			<CaretLeftIcon size={12} weight="bold" />
			<span>{site.name}</span>
		</a>

		<div class="ml-auto flex items-center gap-1">
			{#if EVAL_ENABLED}
				<Tooltip.Root>
					<Tooltip.Trigger>
						{#snippet child({ props })}
							<Button
								{...props}
								variant="ghost"
								size="icon-sm"
								onclick={toggleEval}
								disabled={!matches.length}
								data-active={inEval || undefined}
								class="data-active:bg-amber-500/15 data-active:text-amber-700 dark:data-active:text-amber-300"
								aria-label={inEval ? 'Exit evaluation' : 'Start evaluation'}
							>
								<ListChecksIcon size={16} weight="duotone" />
							</Button>
						{/snippet}
					</Tooltip.Trigger>
					<Tooltip.Content side="bottom">
						{inEval ? 'Exit evaluation' : 'Start evaluation'}
					</Tooltip.Content>
				</Tooltip.Root>
			{/if}
			<Tooltip.Root>
				<Tooltip.Trigger>
					{#snippet child({ props })}
						<Button
							{...props}
							href={site.datasetUrl}
							target="_blank"
							rel="noreferrer noopener"
							variant="ghost"
							size="icon-sm"
							aria-label="Dataset on Hugging Face"
						>
							<HfLogo class="size-4" />
						</Button>
					{/snippet}
				</Tooltip.Trigger>
				<Tooltip.Content side="bottom">View on Hugging Face</Tooltip.Content>
			</Tooltip.Root>
			<Button variant="ghost" size="icon-sm" onclick={toggleMode} aria-label="Toggle theme">
				{#if mode.current === 'dark'}
					<SunIcon size={16} weight="duotone" />
				{:else}
					<MoonIcon size={16} weight="duotone" />
				{/if}
			</Button>
		</div>
	</div>
</header>