chat-ui / src /routes /models /+page.svelte
victor's picture
victor HF staff
/models tweaks (#864)
8ffc49e unverified
raw
history blame
2.47 kB
<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}/?model={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="text-sm text-gray-500 dark:text-gray-400">{model.description || "-"}</dd>
</a>
{/each}
</dl>
</div>
</div>