File size: 3,572 Bytes
a5619c2 ddebbc2 a5619c2 29a4c23 6946d18 a5619c2 29a4c23 a5619c2 6946d18 a5619c2 29a4c23 a5619c2 6946d18 29a4c23 6946d18 a5619c2 6946d18 a5619c2 29a4c23 a5619c2 19d1d46 6946d18 a5619c2 5500bfc 6946d18 a5619c2 5500bfc 6946d18 1f51adc 6946d18 a5619c2 6946d18 a5619c2 6946d18 a5619c2 6946d18 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 |
<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";
import LabelPro from "./label-pro.svelte";
let dialog: HTMLDialogElement | undefined = $state();
$effect(() => {
if (open) {
dialog?.showModal();
} else {
setTimeout(() => dialog?.close(), 250);
}
});
const actions: string[] = [
"Exchange a million words with leading models",
"Use the fastest inference providers",
"Compare 80+ conversational models",
"Process hundreds of images",
];
</script>
<dialog class="backdrop:bg-transparent" bind:this={dialog} onclose={() => (open = false)}>
{#if open}
<!-- Backdrop -->
<div
class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm"
transition:fade={{ duration: 150 }}
>
<!-- Content -->
<div
class="relative w-lg rounded-xl bg-white shadow-sm dark:bg-gray-900"
use:clickOutside={() => (open = false)}
transition:scale={{ start: 0.975, duration: 250 }}
>
<h2 class="mt-8 text-center text-2xl font-semibold text-balance sm:text-3xl dark:text-white">
Upgrade Your AI Experience with a <LabelPro
class="mx-0.5 -translate-y-px align-middle leading-6 max-sm:py-0! sm:text-xl"
/> Account
</h2>
<button
type="button"
class="absolute top-3 right-3 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)}
aria-label="Close modal"
>
<div class="text-xl">
<IconCross />
</div>
</button>
<!-- Modal body -->
<div class="p-4 md:p-5 dark:text-white">
<p
class="rounded-xl border border-amber-900 bg-amber-700/25 p-4 font-medium text-amber-800 dark:bg-amber-800/25 dark:text-amber-200"
>
You have reached your usage limits. To continue using the playground, please consider creating a PRO
account!
</p>
<p class="mt-4 text-gray-600 dark:text-gray-400">
By subscribing to PRO, you get <span class="text-black dark:text-white"
>$2 worth of Inference credits every month.</span
> Meaning you could:
</p>
<ul class="mt-4 flex flex-col gap-2">
{#each actions as action}
<li class="flex items-center justify-start gap-2.5">
<div
class="flex size-5 items-center justify-center rounded-full border border-green-500/15 bg-green-500/10 dark:bg-green-500/20"
>
<IconCheck class="text-xs text-green-600 dark:text-green-300" />
</div>
{action}
</li>
{/each}
</ul>
</div>
<!-- Modal footer -->
<div class="flex rounded-b p-4 !pb-8 md:p-5 dark:border-gray-800">
<a
href="https://huggingface.co/settings/billing/subscription#subscribe"
class="mx-auto mt-1 flex w-fit items-center justify-between gap-6 rounded-full bg-black py-2.5 pr-4 pl-5 text-white hover:bg-gray-900 dark:bg-white/85 dark:text-black dark:hover:bg-white"
>
<p>
Subscribe to PRO
<span class="text-gray-400 dark:text-gray-500">($9/month)</span>
</p>
<IconExternal />
</a>
</div>
</div>
</div>
{/if}
</dialog>
|