Spaces:
Running
Running
File size: 3,590 Bytes
fbf8165 de2d4cd fbf8165 de2d4cd fbf8165 19e4f9a fbf8165 de2d4cd fbf8165 de2d4cd fbf8165 de2d4cd fbf8165 de2d4cd |
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 |
<script lang="ts">
import Icon from '@iconify/svelte';
import logo from '$lib/images/hf-logo.svg';
import ProTag from '$lib/components/ProTag.svelte';
import PrimaryLink from '$lib/components/sidebar/links/Primary.svelte';
import SecondaryLink from '$lib/components/sidebar/links/Secondary.svelte';
const LINKS = [
{
path: "/text-generation",
label: "Text Generation",
description: "Generate text from a prompt, using a model of your choice.",
icon: "heroicons:chat-bubble-left-right-20-solid",
type: "green",
},
{
path: "/image-generation",
label: "Image Generation",
description: "Generate images from a prompt, using a model of your choice.",
icon: "ph:images-square-fill",
type: "pink",
},
];
const FEW_SHOTS = [
{
path: "/text-generation/translation",
label: "Translation",
icon: "bi:translate",
},
{
path: "/text-generation/text-analysis",
label: "Text Analysis",
icon: "carbon:phrase-sentiment",
},
];
let open: boolean = false;
</script>
<div class="xl:hidden bg-slate-900 w-full px-8 py-5 border-b border-slate-800 flex items-center justify-between">
<header class="flex items-center justify-start gap-4">
<img src={logo} alt="Logo" width={28} height={28} />
<div class="flex items-center justify-start gap-2">
<p class="text-white font-bold text-lg">Inference API for</p>
<ProTag />
</div>
</header>
<button on:click={() => open = true}>
<Icon icon="line-md:menu" class="text-slate-100 w-5 h-5" />
</button>
</div>
<aside class={`${open ? '' : '-translate-x-full'} z-10 absolute xl:relative transition-all duration-200 xl:!translate-x-0 bg-slate-900 w-full xl:max-w-[360px] h-screen border-r border-slate-800 text-white`}>
<header class="flex items-center justify-between p-8 gap-4">
<div class="flex items-center justify-start gap-4">
<img src={logo} alt="Logo" width={34} height={34} />
<div class="flex items-center justify-start gap-2">
<p class="text-white font-bold text-xl">Inference API for</p>
<ProTag />
</div>
</div>
<button class="xl:hidden" on:click={() => open = false}>
<Icon icon="tdesign:close" class="text-slate-100 w-6 h-6" />
</button>
</header>
<nav class="grid grid-cols-1 gap-8 px-4">
<a
href="https://huggingface.co/pricing#pro"
target="_blank"
class="px-4"
>
<button class="group text-base font-bold uppercase tracking-wide bg-white text-slate-950 transition-all duration-200 px-6 py-3 w-full rounded-full relative">
Subscribe to Pro
</button>
</a>
<ul class="grid grid-cols-1 gap-4">
{#each LINKS as { path, description, label, type, icon }, i}
<PrimaryLink href={path} type={type}>
<div class="flex items-center justify-start gap-4">
<Icon icon={icon} class="w-6 h-6" />
<p class="font-semibold text-sm uppercase font-code">
{label}
</p>
</div>
<p class="text-sm mt-2 text-white/90">
{description ||
"Generate text from a prompt, using a model of your choice."}
</p>
</PrimaryLink>
{/each}
</ul>
<div class="grid grid-cols-1 gap-4">
<div class="flex items-center justify-start gap-4 mb-2">
<p class="text-slate-600 uppercase font-medium text-sm font-sans">
FEW SHOTS
</p>
<div class="w-full flex-1 h-[1px] bg-slate-800" />
</div>
{#each FEW_SHOTS as { path, label, icon }, i}
<SecondaryLink href={path}>
<Icon icon={icon} class="w-5 h-5" />
<p class="font-semibold text-sm uppercase font-code">
{label}
</p>
</SecondaryLink>
{/each}
</div>
</nav>
</aside>
|