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(false);
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
- {#snippet pro()}
27
- <span
28
- 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"
29
- >
30
- PRO
31
- </span>
32
- {/snippet}
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-3xl rounded-lg bg-white shadow-sm dark:bg-gray-900"
42
  use:clickOutside={() => (open = false)}
43
  transition:scale={{ start: 0.975, duration: 250 }}
44
  >
45
- <div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
46
- <h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">
47
- <img
48
- alt="Hugging Face's logo"
49
- class="w-7"
50
- src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
51
- /> Increase your usage limits
52
- </h3>
53
- <button
54
- type="button"
55
- 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"
56
- onclick={() => (open = false)}
57
- >
58
- <div class="text-xl">
59
- <IconCross />
60
- </div>
61
- <span class="sr-only">Close modal</span>
62
- </button>
63
- </div>
64
  <!-- Modal body -->
65
- <div class="flex flex-col gap-2 p-4 text-white md:p-5">
66
- <p>
67
- It seems you have reached your usage limits. If you want to continue using the playground, please consider
68
- creating a {@render pro()} account!
69
  </p>
70
- <p>You'll also gain access to:</p>
71
- <div
72
- 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"
73
- >
74
- <ul class="grid gap-1">
75
- <li class="flex items-start">
76
- <IconCheck class="text-md shrink-0 pt-2" />
77
- <p>
78
- <a
79
- href="/spaces/enzostvs/zero-gpu-spaces"
80
- 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"
81
- target="_blank">ZeroGPU</a
82
- >: Get 5x usage quota and highest GPU queue priority
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
- </ul>
164
- </div>
165
  </div>
166
 
167
  <!-- Modal footer -->
168
- <div class="flex rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800">
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
- target="_blank"
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>