Spaces:
Paused
Paused
File size: 2,500 Bytes
25c844d 8ffc49e 25c844d 64b910e 25c844d 2ce3b4b 25c844d |
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 |
<script lang="ts">
import type { PageData } from "./$types";
import { PUBLIC_APP_NAME } from "$env/static/public";
import { isHuggingChat } from "$lib/utils/isHuggingChat";
import { base } from "$app/paths";
import { page } from "$app/stores";
import CarbonHelpFilled from "~icons/carbon/help-filled";
export let data: PageData;
</script>
<svelte:head>
{#if isHuggingChat}
<title>HuggingChat - Models</title>
<meta property="og:title" content="HuggingChat - Models" />
<meta property="og:type" content="link" />
<meta property="og:description" content="Browse HuggingChat available models" />
<meta property="og:url" content={$page.url.href} />
{/if}
</svelte:head>
<div class="scrollbar-custom mr-1 h-full overflow-y-auto py-12 max-sm:pt-8 md:py-24">
<div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
<div class="flex items-center">
<h1 class="text-2xl font-bold">Models</h1>
{#if isHuggingChat}
<a
href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions/372"
class="ml-auto dark:text-gray-400 dark:hover:text-gray-300"
target="_blank"
>
<CarbonHelpFilled />
</a>
{/if}
</div>
<h3 class="text-gray-500">All models available on {PUBLIC_APP_NAME}</h3>
<dl class="mt-8 grid grid-cols-1 gap-3 sm:gap-5 xl:grid-cols-2">
{#each data.models.filter((el) => !el.unlisted) as model, index (model.id)}
<a
href="{base}/models/{model.id}"
class="relative flex flex-col gap-2 overflow-hidden rounded-xl border bg-gray-50/50 px-6 py-5 shadow hover:bg-gray-50 hover:shadow-inner dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
>
<div class="flex items-center justify-between">
{#if model.logoUrl}
<img
class=" overflown aspect-square size-6 rounded border dark:border-gray-700"
src={model.logoUrl}
alt=""
/>
{:else}
<div class="size-6 rounded border border-transparent bg-gray-300 dark:bg-gray-800" />
{/if}
{#if index === 0}
<div
class="rounded-full border border-gray-300 px-2 py-0.5 text-xs text-gray-500 dark:border-gray-500 dark:text-gray-400"
>
Default
</div>
{/if}
</div>
<dt class="flex items-center gap-2 font-semibold">
{model.displayName}
</dt>
<dd class="whitespace-pre-wrap text-sm text-gray-500 dark:text-gray-400">
{model.description || "-"}
</dd>
</a>
{/each}
</dl>
</div>
</div>
|