File size: 4,536 Bytes
f144646 967ff1b f144646 967ff1b f144646 0a37ac6 f144646 0a37ac6 f144646 967ff1b f144646 967ff1b f144646 967ff1b f144646 967ff1b f144646 967ff1b f144646 967ff1b f144646 |
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 |
<!-- Main modal -->
<script lang="ts">
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import { browser } from '$app/environment';
let backdropEl: HTMLDivElement;
let modalEl: HTMLDivElement;
const dispatch = createEventDispatcher<{ close: void }>();
function handleKeydown(event: KeyboardEvent) {
// close on ESC
if (event.key === 'Escape') {
event.preventDefault();
dispatch('close');
}
}
function handleBackdropClick(event: MouseEvent) {
if (window?.getSelection()?.toString()) {
return;
}
if (event.target === backdropEl) {
dispatch('close');
}
}
onMount(() => {
document.getElementById('app')?.setAttribute('inert', 'true');
modalEl.focus();
});
onDestroy(() => {
if (!browser) return;
// remove inert attribute if this is the last modal
if (document.querySelectorAll('[role="dialog"]:not(#app *)').length === 1) {
document.getElementById('app')?.removeAttribute('inert');
}
});
</script>
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div
id="default-modal"
aria-hidden="true"
class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/85"
bind:this={backdropEl}
on:click|stopPropagation={handleBackdropClick}
>
<div
role="dialog"
tabindex="-1"
class="relative max-h-full w-full max-w-xl p-4 outline-none"
bind:this={modalEl}
on:keydown={handleKeydown}
>
<form on:submit|preventDefault class="relative rounded-lg bg-white shadow dark:bg-gray-900">
<div
class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-600"
>
<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"
/> Use a Hugging Face Token
</h3>
<button
type="button"
on:click={() => dispatch('close')}
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"
>
<svg
class="size-3"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 14"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
/>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="space-y-6 p-4 md:p-5">
<p class="text-base leading-relaxed text-gray-700 2xl:text-balance dark:text-gray-400">
You need a free Hugging Face token to use this application. <strong class="font-semibold"
>Make sure you create a token with Inference API permission.</strong
><br /> Your token is kept safe by only being used from your browser.
</p>
<div class="mb-6">
<label for="hf-token" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
>Hugging Face Token</label
>
<input
required
placeholder="Enter HF Token"
type="text"
id="hf-token"
name="hf-token"
class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
/>
</div>
</div>
<!-- Modal footer -->
<div
class="flex items-center justify-between rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-600"
>
<a
href="https://huggingface.co/settings/tokens?new_token=true"
tabindex="-1"
target="_blank"
class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
>Create new token</a
>
<button
type="submit"
class="mb-2 me-2 rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
>Submit</button
>
</div>
</form>
</div>
</div>
|