add quota modal

src/lib/actions/autofocus.ts

@@ -1,3 +1,7 @@
+import { tick } from "svelte";
+
 export function autofocus(node: HTMLElement) {
-	node.focus();
+	tick().then(() => {
+		node.focus();
+	});
 }

src/lib/components/debug-menu.svelte

@@ -7,6 +7,7 @@
 	import { compareStr } from "$lib/utils/compare.js";
 	import type { ToastData } from "./toaster.svelte.js";
 	import { addToast } from "./toaster.svelte.js";
+	import { showQuotaModal } from "./quota-modal.svelte";
 
 	let innerWidth = $state<number>();
 	let innerHeight = $state<number>();
@@ -38,6 +39,12 @@
 				console.log(await prompt("Test prompt"));
 			},
 		},
+		{
+			label: "Show quota modal",
+			cb: () => {
+				showQuotaModal();
+			},
+		},
 		{
 			label: "Show token modal",
 			cb: () => {

src/lib/components/inference-playground/conversation.svelte

@@ -1,5 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
-https://svelte.dev/e/bind_invalid_expression -->
 <script lang="ts">
 	import { run } from "svelte/legacy";
 

src/lib/components/prompts.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" module>
+	import { autofocus } from "$lib/actions/autofocus.js";
 	import { clickOutside } from "$lib/actions/click-outside.js";
-	import { writable } from "svelte/store";
 	import IconCross from "~icons/carbon/close";
-	import { autofocus } from "$lib/actions/autofocus.js";
 
 	type Prompt = {
 		label: string;
@@ -11,30 +10,26 @@
 		callback: (value: string) => void;
 	};
 
-	const prompts = writable<Prompt[]>([]);
+	let prompts = $state<Prompt[]>([]);
+	const current = $derived(prompts[0]);
 
 	export function resolvePrompt() {
-		prompts.update(p => {
-			p[0]?.callback(p[0]?.value ?? "");
-			return p.slice(1);
-		});
+		if (!current) return;
+		current.callback(current.value ?? "");
+		prompts.splice(0, 1);
 	}
 
-	export async function prompt(label: string, defaultVAlue?: string): Promise<string> {
+	export async function prompt(label: string, defaultValue?: string): Promise<string> {
 		return new Promise(res => {
-			prompts.update(p => [...p, { label, value: defaultVAlue, callback: res }]);
+			prompts.push({ label, value: defaultValue, callback: res });
 		});
 	}
 </script>
 
 <script lang="ts">
-	import { run } from "svelte/legacy";
-
-	let current = $derived($prompts?.[0]);
-
 	let dialog: HTMLDialogElement | undefined = $state();
 
-	run(() => {
+	$effect(() => {
 		if (current) {
 			dialog?.showModal();
 		} else {

src/lib/components/quota-modal.svelte

@@ -0,0 +1,172 @@
+<script lang="ts" module>
+	let open = $state(true);
+
+	export function showQuotaModal() {
+		open = true;
+	}
+</script>
+
+<script lang="ts">
+	import { clickOutside } from "$lib/actions/click-outside.js";
+	import IconCross from "~icons/carbon/close";
+	import IconCheck from "~icons/carbon/checkmark";
+	import IconExternal from "~icons/carbon/arrow-up-right";
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	$effect(() => {
+		if (open) {
+			dialog?.showModal();
+		} else {
+			dialog?.close();
+		}
+	});
+</script>
+
+{#snippet pro()}
+	<span
+		class="inline-block -skew-x-12 rounded-md border border-gray-200 bg-linear-to-br from-pink-300 via-green-200 to-yellow-200 px-1.5 py-0 text-sm font-bold text-black shadow-lg shadow-green-500/10 dark:border-gray-800 dark:from-pink-500 dark:via-green-500 dark:to-yellow-500 dark:text-black dark:shadow-green-500/20"
+	>
+		PRO
+	</span>
+{/snippet}
+
+<dialog bind:this={dialog} onclose={() => (open = false)}>
+	{#if open}
+		<div class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85">
+			<div
+				class="relative w-3xl rounded-lg bg-white shadow-sm dark:bg-gray-900"
+				use:clickOutside={() => (open = false)}
+			>
+				<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
+					<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">
+						<img
+							alt="Hugging Face's logo"
+							class="w-7"
+							src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
+						/> Increase your usage limits
+					</h3>
+					<button
+						type="button"
+						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"
+						onclick={() => (open = false)}
+					>
+						<div class="text-xl">
+							<IconCross />
+						</div>
+						<span class="sr-only">Close modal</span>
+					</button>
+				</div>
+				<!-- Modal body -->
+				<div class="flex flex-col gap-2 p-4 text-white md:p-5">
+					<p>
+						It seems you have reached your usage limits. If you want to continue using the playground, please consider
+						creating a {@render pro()} account!
+					</p>
+					<p>You'll also gain access to:</p>
+					<ul
+						class="grid grid-cols-1 flex-col gap-2 text-base text-gray-500 md:col-span-3 md:grid-cols-2 md:flex-row dark:text-gray-400"
+					>
+						<li class="flex items-start">
+							<IconCheck class="text-md shrink-0 pt-2" />
+							<p>
+								<a
+									href="/spaces/enzostvs/zero-gpu-spaces"
+									class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
+									target="_blank">ZeroGPU</a
+								>: Get 5x usage quota and highest GPU queue priority
+							</p>
+						</li>
+						<li class="flex items-start">
+							<IconCheck class="text-md shrink-0 pt-2" />
+							<p>
+								<a
+									href="/docs/hub/spaces-zerogpu"
+									class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
+									target="_blank">Spaces Hosting</a
+								>: Create ZeroGPU Spaces with A100 hardware
+							</p>
+						</li>
+						<li class="flex items-start">
+							<IconCheck class="text-md shrink-0 pt-2" />
+							<p>
+								<a
+									href="/docs/hub/spaces-dev-mode"
+									class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
+									target="_blank">Spaces Dev Mode</a
+								>: Fast iterations via SSH/VS Code for Spaces
+							</p>
+						</li>
+
+						<li class="flex items-start">
+							<IconCheck class="text-md shrink-0 pt-2" />
+							<p>
+								<a
+									href="https://huggingface.co/blog/inference-providers"
+									class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
+									target="_blank">Inference Providers</a
+								>: Get $2 included credits across all Inference Providers
+							</p>
+						</li>
+						<li class="flex items-start">
+							<IconCheck class="text-md shrink-0 pt-2" />
+							<p>
+								<a
+									href="/docs/hub/datasets-viewer"
+									class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
+									target="_blank">Dataset Viewer</a
+								>: Activate it on private datasets
+							</p>
+						</li>
+						<li class="flex items-start">
+							<IconCheck class="text-md shrink-0 pt-2" />
+							<p>
+								<a
+									href="/blog"
+									class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
+									target="_blank">Blog Articles</a
+								>: Publish articles to the Hugging Face blog
+							</p>
+						</li>
+						<li class="flex items-start">
+							<IconCheck class="text-md shrink-0 pt-2" />
+							<p>
+								<a
+									href="/posts"
+									class="font-semibold whitespace-nowrap text-gray-700 underline decoration-gray-400 hover:text-gray-900 hover:decoration-gray-600 dark:text-gray-200 dark:hover:text-gray-200 dark:hover:decoration-gray-300"
+									target="_blank">Social Posts</a
+								>: Share short updates with the community
+							</p>
+						</li>
+
+						<li class="flex items-start">
+							<IconCheck class="text-md shrink-0 pt-2" />
+							<p>
+								<span class="font-semibold text-gray-700 dark:text-gray-200">Features Preview</span>: Get early access
+								to upcoming features
+							</p>
+						</li>
+						<li class="flex items-start">
+							<IconCheck class="text-md shrink-0 pt-2" />
+							<p>
+								{@render pro()}<span class="ml-1.5 font-semibold text-gray-700 dark:text-gray-200">Badge</span>: Show
+								your support on your profile
+							</p>
+						</li>
+					</ul>
+				</div>
+
+				<!-- Modal footer -->
+				<div class="flex rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800">
+					<a
+						class="ml-auto flex items-center gap-1.5 rounded-lg bg-black px-4 py-2.5 pl-3 text-sm font-medium text-white hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+						href="https://huggingface.co/settings/billing/subscription#subscribe"
+						target="_blank"
+					>
+						<IconExternal />
+						Get Pro ($9/month)
+					</a>
+				</div>
+			</div>
+		</div>
+	{/if}
+</dialog>

src/lib/components/toaster.svelte.ts

@@ -1,4 +1,4 @@
-import { Toaster, type AddToastProps } from "melt/builders";
+import { Toaster } from "melt/builders";
 
 export type ToastData = {
 	title: string;

src/routes/+layout.svelte

@@ -3,8 +3,9 @@
 	import DebugMenu from "$lib/components/debug-menu.svelte";
 	import Prompts from "$lib/components/prompts.svelte";
 	import Toaster from "$lib/components/toaster.svelte";
+	import QuotaModal from "$lib/components/quota-modal.svelte";
 	interface Props {
-		children?: import('svelte').Snippet;
+		children?: import("svelte").Snippet;
 	}
 
 	let { children }: Props = $props();
@@ -14,3 +15,4 @@
 <DebugMenu />
 <Prompts />
 <Toaster />
+<QuotaModal />