Thomas G. Lopes
commited on
Commit
·
6946d18
1
Parent(s):
c6f83f5
style quota modal
Browse files
src/lib/components/label-pro.svelte
ADDED
@@ -0,0 +1,23 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script lang="ts">
|
2 |
+
interface Props {
|
3 |
+
class?: string;
|
4 |
+
size?: "xs" | "sm" | "md";
|
5 |
+
}
|
6 |
+
|
7 |
+
let { class: classNames = "", size = "md" }: Props = $props();
|
8 |
+
|
9 |
+
const sizeClasses: Record<string, string> = {
|
10 |
+
xs: "rounded-md px-1 py-0",
|
11 |
+
sm: "rounded-md px-1.5 py-0",
|
12 |
+
md: "rounded-lg px-2.5 py-0.5",
|
13 |
+
};
|
14 |
+
</script>
|
15 |
+
|
16 |
+
<span
|
17 |
+
class="inline-block -skew-x-12 border border-gray-200 bg-linear-to-br from-pink-300 via-emerald-200 to-yellow-200
|
18 |
+
text-sm font-bold text-black shadow-lg shadow-emerald-500/10 dark:border-gray-800
|
19 |
+
dark:from-pink-500 dark:via-emerald-500 dark:to-yellow-500 dark:text-black dark:shadow-emerald-500/20
|
20 |
+
{sizeClasses[size]} {classNames}"
|
21 |
+
>
|
22 |
+
PRO
|
23 |
+
</span>
|
src/lib/components/quota-modal.svelte
CHANGED
@@ -1,5 +1,5 @@
|
|
1 |
<script lang="ts" module>
|
2 |
-
let open = $state(
|
3 |
|
4 |
export function showQuotaModal() {
|
5 |
open = true;
|
@@ -12,6 +12,7 @@
|
|
12 |
import IconCheck from "~icons/carbon/checkmark";
|
13 |
import IconExternal from "~icons/carbon/arrow-up-right";
|
14 |
import { fade, scale } from "svelte/transition";
|
|
|
15 |
let dialog: HTMLDialogElement | undefined = $state();
|
16 |
|
17 |
$effect(() => {
|
@@ -21,158 +22,79 @@
|
|
21 |
setTimeout(() => dialog?.close(), 250);
|
22 |
}
|
23 |
});
|
24 |
-
</script>
|
25 |
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
|
34 |
<dialog class="backdrop:bg-transparent" bind:this={dialog} onclose={() => (open = false)}>
|
35 |
{#if open}
|
|
|
36 |
<div
|
37 |
class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm"
|
38 |
transition:fade={{ duration: 150 }}
|
39 |
>
|
|
|
40 |
<div
|
41 |
-
class="relative w-
|
42 |
use:clickOutside={() => (open = false)}
|
43 |
transition:scale={{ start: 0.975, duration: 250 }}
|
44 |
>
|
45 |
-
<
|
46 |
-
|
47 |
-
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
-
|
54 |
-
|
55 |
-
|
56 |
-
|
57 |
-
|
58 |
-
|
59 |
-
|
60 |
-
|
61 |
-
<span class="sr-only">Close modal</span>
|
62 |
-
</button>
|
63 |
-
</div>
|
64 |
<!-- Modal body -->
|
65 |
-
<div class="
|
66 |
-
<p>
|
67 |
-
|
68 |
-
|
69 |
</p>
|
70 |
-
<p
|
71 |
-
|
72 |
-
|
73 |
-
>
|
74 |
-
|
75 |
-
|
76 |
-
|
77 |
-
<
|
78 |
-
|
79 |
-
|
80 |
-
|
81 |
-
|
82 |
-
|
83 |
-
</p>
|
84 |
-
</li>
|
85 |
-
<li class="flex items-start">
|
86 |
-
<IconCheck class="text-md shrink-0 pt-2" />
|
87 |
-
<p>
|
88 |
-
<a
|
89 |
-
href="/docs/hub/spaces-zerogpu"
|
90 |
-
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"
|
91 |
-
target="_blank">Spaces Hosting</a
|
92 |
-
>: Create ZeroGPU Spaces with A100 hardware
|
93 |
-
</p>
|
94 |
-
</li>
|
95 |
-
<li class="flex items-start">
|
96 |
-
<IconCheck class="text-md shrink-0 pt-2" />
|
97 |
-
<p>
|
98 |
-
<a
|
99 |
-
href="/docs/hub/spaces-dev-mode"
|
100 |
-
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"
|
101 |
-
target="_blank">Spaces Dev Mode</a
|
102 |
-
>: Fast iterations via SSH/VS Code for Spaces
|
103 |
-
</p>
|
104 |
-
</li>
|
105 |
-
|
106 |
-
<li class="flex items-start">
|
107 |
-
<IconCheck class="text-md shrink-0 pt-2" />
|
108 |
-
<p>
|
109 |
-
<a
|
110 |
-
href="https://huggingface.co/blog/inference-providers"
|
111 |
-
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"
|
112 |
-
target="_blank">Inference Providers</a
|
113 |
-
>: Get $2 included credits across all Inference Providers
|
114 |
-
</p>
|
115 |
-
</li>
|
116 |
-
</ul>
|
117 |
-
<ul class="grid gap-1">
|
118 |
-
<li class="flex items-start">
|
119 |
-
<IconCheck class="text-md shrink-0 pt-2" />
|
120 |
-
<p>
|
121 |
-
<a
|
122 |
-
href="/docs/hub/datasets-viewer"
|
123 |
-
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"
|
124 |
-
target="_blank">Dataset Viewer</a
|
125 |
-
>: Activate it on private datasets
|
126 |
-
</p>
|
127 |
-
</li>
|
128 |
-
<li class="flex items-start">
|
129 |
-
<IconCheck class="text-md shrink-0 pt-2" />
|
130 |
-
<p>
|
131 |
-
<a
|
132 |
-
href="/blog"
|
133 |
-
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"
|
134 |
-
target="_blank">Blog Articles</a
|
135 |
-
>: Publish articles to the Hugging Face blog
|
136 |
-
</p>
|
137 |
-
</li>
|
138 |
-
<li class="flex items-start">
|
139 |
-
<IconCheck class="text-md shrink-0 pt-2" />
|
140 |
-
<p>
|
141 |
-
<a
|
142 |
-
href="/posts"
|
143 |
-
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"
|
144 |
-
target="_blank">Social Posts</a
|
145 |
-
>: Share short updates with the community
|
146 |
-
</p>
|
147 |
-
</li>
|
148 |
-
|
149 |
-
<li class="flex items-start">
|
150 |
-
<IconCheck class="text-md shrink-0 pt-2" />
|
151 |
-
<p>
|
152 |
-
<span class="font-semibold text-gray-700 dark:text-gray-200">Features Preview</span>: Get early access
|
153 |
-
to upcoming features
|
154 |
-
</p>
|
155 |
-
</li>
|
156 |
-
<li class="flex items-start">
|
157 |
-
<IconCheck class="text-md shrink-0 pt-2" />
|
158 |
-
<p>
|
159 |
-
{@render pro()}<span class="ml-1.5 font-semibold text-gray-700 dark:text-gray-200">Badge</span>: Show
|
160 |
-
your support on your profile
|
161 |
-
</p>
|
162 |
</li>
|
163 |
-
|
164 |
-
</
|
165 |
</div>
|
166 |
|
167 |
<!-- Modal footer -->
|
168 |
-
<div class="flex rounded-b
|
169 |
<a
|
170 |
-
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"
|
171 |
href="https://huggingface.co/settings/billing/subscription#subscribe"
|
172 |
-
|
173 |
>
|
|
|
|
|
|
|
|
|
174 |
<IconExternal />
|
175 |
-
Get Pro ($9/month)
|
176 |
</a>
|
177 |
</div>
|
178 |
</div>
|
|
|
1 |
<script lang="ts" module>
|
2 |
+
let open = $state(true);
|
3 |
|
4 |
export function showQuotaModal() {
|
5 |
open = true;
|
|
|
12 |
import IconCheck from "~icons/carbon/checkmark";
|
13 |
import IconExternal from "~icons/carbon/arrow-up-right";
|
14 |
import { fade, scale } from "svelte/transition";
|
15 |
+
import LabelPro from "./label-pro.svelte";
|
16 |
let dialog: HTMLDialogElement | undefined = $state();
|
17 |
|
18 |
$effect(() => {
|
|
|
22 |
setTimeout(() => dialog?.close(), 250);
|
23 |
}
|
24 |
});
|
|
|
25 |
|
26 |
+
const actions: string[] = [
|
27 |
+
"Exchange a million words with leading models",
|
28 |
+
"Use the fastest inference providers",
|
29 |
+
"Compare 80+ conversational models",
|
30 |
+
"Process hundreds of images",
|
31 |
+
];
|
32 |
+
</script>
|
33 |
|
34 |
<dialog class="backdrop:bg-transparent" bind:this={dialog} onclose={() => (open = false)}>
|
35 |
{#if open}
|
36 |
+
<!-- Backdrop -->
|
37 |
<div
|
38 |
class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm"
|
39 |
transition:fade={{ duration: 150 }}
|
40 |
>
|
41 |
+
<!-- Content -->
|
42 |
<div
|
43 |
+
class="relative w-lg rounded-xl bg-white shadow-sm dark:bg-gray-900"
|
44 |
use:clickOutside={() => (open = false)}
|
45 |
transition:scale={{ start: 0.975, duration: 250 }}
|
46 |
>
|
47 |
+
<h2 class="mt-8 text-center text-2xl font-semibold text-balance text-white sm:text-3xl">
|
48 |
+
Upgrade Your AI Experience with a <LabelPro
|
49 |
+
class="mx-0.5 -translate-y-px align-middle leading-6 max-sm:py-0! sm:text-xl"
|
50 |
+
/> Account
|
51 |
+
</h2>
|
52 |
+
<button
|
53 |
+
type="button"
|
54 |
+
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"
|
55 |
+
onclick={() => (open = false)}
|
56 |
+
aria-label="Close modal"
|
57 |
+
>
|
58 |
+
<div class="text-xl">
|
59 |
+
<IconCross />
|
60 |
+
</div>
|
61 |
+
</button>
|
62 |
+
|
|
|
|
|
|
|
63 |
<!-- Modal body -->
|
64 |
+
<div class="p-4 text-white md:p-5">
|
65 |
+
<p class="rounded-xl border border-amber-900 bg-amber-800/25 p-4 font-medium text-amber-200">
|
66 |
+
You have reached your usage limits. To continue using the playground, please consider creating a PRO
|
67 |
+
account!
|
68 |
</p>
|
69 |
+
<p class="mt-4 text-gray-400">
|
70 |
+
By subscribing to PRO, you get <span class="text-white">$2 worth of Inference credits every month.</span> Meaning
|
71 |
+
you could:
|
72 |
+
</p>
|
73 |
+
<ul class="mt-4 flex flex-col gap-2">
|
74 |
+
{#each actions as action}
|
75 |
+
<li class="flex items-center justify-start gap-2.5">
|
76 |
+
<div
|
77 |
+
class="flex size-5 items-center justify-center rounded-full border border-green-500/15 bg-green-500/10 dark:bg-green-500/20"
|
78 |
+
>
|
79 |
+
<IconCheck class="text-xs text-green-600 dark:text-green-300" />
|
80 |
+
</div>
|
81 |
+
{action}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
82 |
</li>
|
83 |
+
{/each}
|
84 |
+
</ul>
|
85 |
</div>
|
86 |
|
87 |
<!-- Modal footer -->
|
88 |
+
<div class="flex rounded-b p-4 !pb-8 md:p-5 dark:border-gray-800">
|
89 |
<a
|
|
|
90 |
href="https://huggingface.co/settings/billing/subscription#subscribe"
|
91 |
+
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"
|
92 |
>
|
93 |
+
<p>
|
94 |
+
Subscribe to PRO
|
95 |
+
<span class="text-gray-400 dark:text-gray-500">($9/month)</span>
|
96 |
+
</p>
|
97 |
<IconExternal />
|
|
|
98 |
</a>
|
99 |
</div>
|
100 |
</div>
|