token modal

src/lib/components/Playground/Playground.svelte

@@ -5,6 +5,7 @@
 	import PlaygroundCode from './PlaygroundCode.svelte';
 	import PlaygroundMessage from '$lib/components/Playground/PlaygroundMessage.svelte';
 	import PlaygroundOptions from '$lib/components/Playground/PlaygroundOptions.svelte';
+	import PlaygroundTokenModal from './PlaygroundTokenModal.svelte';
 
 	type Message = {
 		role: 'user' | 'assistant' | 'system';
@@ -40,6 +41,7 @@
 
 	let hfToken: string | null = '';
 	let viewCode = false;
+	let showTokenModal = false;
 	let loading = false;
 	let streamingMessage: Message | null = null;
 	let latency = 0;
@@ -69,11 +71,8 @@
 
 	async function submit() {
 		if (!hfToken) {
-			const token = prompt(
-				'Please enter your Hugging Face API token (with `inference` permission):'
-			);
-			if (!token) return;
-			hfToken = token;
+			showTokenModal = true;
+			return;
 		}
 		(document.activeElement as HTMLElement).blur();
 		loading = true;
@@ -145,6 +144,10 @@
 
 <svelte:window on:keydown={onKeydown} />
 
+{#if showTokenModal}
+	<PlaygroundTokenModal on:close={() => (showTokenModal = false)} />
+{/if}
+
 <div
 	class="w-dvh maxdivide-gray-200 grid h-dvh overflow-hidden max-md:grid-cols-1 max-md:divide-y md:grid-cols-[260px,minmax(0,1fr),260px] md:divide-x dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300"
 >

src/lib/components/Playground/PlaygroundOptions.svelte

@@ -8,9 +8,11 @@
 
 <div>
 	<div>
-		<label for="countries" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-			>Model</label
-		>
+		<label
+			for="countries"
+			class="mb-2 flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
+			>models<span class="ml-4 font-normal text-gray-400">{compatibleModels.length}</span>
+		</label>
 		<select
 			bind:value={currentModel}
 			class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"

src/lib/components/Playground/PlaygroundTokenModal.svelte

@@ -0,0 +1,129 @@
+<!-- Main modal -->
+<script lang="ts">
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+	import { browser } from '$app/environment';
+
+	let backdropEl: HTMLDivElement;
+	let modalEl: HTMLDivElement;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+
+	function handleKeydown(event: KeyboardEvent) {
+		// close on ESC
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			dispatch('close');
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (window?.getSelection()?.toString()) {
+			return;
+		}
+		if (event.target === backdropEl) {
+			dispatch('close');
+		}
+	}
+
+	onMount(() => {
+		document.getElementById('app')?.setAttribute('inert', 'true');
+		modalEl.focus();
+	});
+
+	onDestroy(() => {
+		if (!browser) return;
+		// remove inert attribute if this is the last modal
+		if (document.querySelectorAll('[role="dialog"]:not(#app *)').length === 1) {
+			document.getElementById('app')?.removeAttribute('inert');
+		}
+	});
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<div
+	id="default-modal"
+	tabindex="-1"
+	aria-hidden="true"
+	class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85"
+	bind:this={backdropEl}
+	on:click|stopPropagation={handleBackdropClick}
+>
+	<div
+		role="dialog"
+		tabindex="-1"
+		class="relative max-h-full w-full max-w-xl p-4"
+		bind:this={modalEl}
+		on:keydown={handleKeydown}
+	>
+		<div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
+			<div
+				class="flex items-center justify-between rounded-t border-b p-4 md:p-5 dark:border-gray-600"
+			>
+				<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+					Add a Hugging Face Token
+				</h3>
+				<button
+					type="button"
+					on:click={() => dispatch('close')}
+					class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+				>
+					<svg
+						class="h-3 w-3"
+						aria-hidden="true"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 14 14"
+					>
+						<path
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+						/>
+					</svg>
+					<span class="sr-only">Close modal</span>
+				</button>
+			</div>
+			<!-- Modal body -->
+			<div class="space-y-6 p-4 md:p-5">
+				<p class="text-base leading-relaxed text-gray-700 2xl:text-balance dark:text-gray-400">
+					You need a free Hugging Face token to use this application. <strong class="font-semibold"
+						>Make sure you create a token with Inference API permission.</strong
+					><br /> Your token is kept safe by only being used from your browser.
+				</p>
+				<div class="mb-6">
+					<label
+						for="default-input"
+						class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
+						>Hugging Face Token</label
+					>
+					<input
+						type="text"
+						id="default-input"
+						class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+					/>
+				</div>
+			</div>
+
+			<!-- Modal footer -->
+			<div
+				class="flex items-center justify-between rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-600"
+			>
+				<a
+					href="https://huggingface.co/settings/tokens?new_token=true"
+					tabindex="-1"
+					target="_blank"
+					class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+					>Create new token</a
+				>
+
+				<button
+					type="button"
+					class="mb-2 me-2 rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+					>Submit</button
+				>
+			</div>
+		</div>
+	</div>
+</div>