File size: 7,383 Bytes
a5619c2 d37f803 a5619c2 29a4c23 a5619c2 29a4c23 a5619c2 29a4c23 a5619c2 29a4c23 a5619c2 29a4c23 a5619c2 1f51adc a5619c2 1f51adc a5619c2 1f51adc a5619c2 1f51adc a5619c2 |
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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 |
<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>
|