Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
| <script lang="ts" module> | |
| let open = $state(false); | |
| 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"; | |
| import { fade, scale } from "svelte/transition"; | |
| let dialog: HTMLDialogElement | undefined = $state(); | |
| $effect(() => { | |
| if (open) { | |
| dialog?.showModal(); | |
| } else { | |
| setTimeout(() => dialog?.close(), 250); | |
| } | |
| }); | |
| </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 class="backdrop:bg-transparent" bind:this={dialog} onclose={() => (open = false)}> | |
| {#if open} | |
| <div | |
| class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm" | |
| transition:fade={{ duration: 150 }} | |
| > | |
| <div | |
| class="relative w-3xl rounded-lg bg-white shadow-sm dark:bg-gray-900" | |
| use:clickOutside={() => (open = false)} | |
| transition:scale={{ start: 0.975, duration: 250 }} | |
| > | |
| <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> | |
| <div | |
| 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" | |
| > | |
| <ul class="grid gap-1"> | |
| <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> | |
| </ul> | |
| <ul class="grid gap-1"> | |
| <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> | |
| </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> | |