Spaces:
Running
Running
File size: 4,196 Bytes
b1253fd a8a9533 b1253fd 564e576 e0fd7fa 72fed8b b1253fd 72fed8b b1253fd 57b36aa b1253fd 74503a1 b1253fd 74503a1 b1253fd 74503a1 b1253fd 72fed8b b1253fd 74503a1 564e576 b1253fd 74503a1 b1253fd 74503a1 b1253fd 74503a1 b1253fd 564e576 74503a1 564e576 74503a1 564e576 74503a1 564e576 e0fd7fa 74503a1 e0fd7fa 74503a1 e0fd7fa 74503a1 e0fd7fa 72fed8b 74503a1 b1253fd 74503a1 b1253fd 74503a1 b1253fd 74503a1 15042e9 74503a1 b1253fd 74503a1 b1253fd 72fed8b |
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 |
<script lang="ts">
import type { PageData } from "./$types";
import { env as envPublic } from "$env/dynamic/public";
import { isHuggingChat } from "$lib/utils/isHuggingChat";
import { base } from "$app/paths";
import { page } from "$app/stores";
import CarbonHelpFilled from "~icons/carbon/help-filled";
import CarbonTools from "~icons/carbon/tools";
import CarbonImage from "~icons/carbon/image";
import { useSettingsStore } from "$lib/stores/settings";
export let data: PageData;
const settings = useSettingsStore();
</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 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"
aria-label="Hub discussion about models"
>
<CarbonHelpFilled />
</a>
{/if}
</div>
<h2 class="text-gray-500">All models available on {envPublic.PUBLIC_APP_NAME}</h2>
<div 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)}
<div
aria-label="Model card"
role="region"
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"
class:active-model={model.id === $settings.activeModel}
>
<a
href="{base}/models/{model.id}"
class="absolute inset-0 z-10"
aria-label="View details for {model.displayName}"
/>
<div class="flex items-center justify-between gap-1">
{#if model.logoUrl}
<img
class="overflown aspect-square size-6 rounded border dark:border-gray-700"
src={model.logoUrl}
alt="{model.displayName} logo"
/>
{:else}
<div
class="size-6 rounded border border-transparent bg-gray-300 dark:bg-gray-800"
aria-hidden="true"
/>
{/if}
{#if model.tools}
<span
title="This model supports tools."
class="ml-auto grid size-[21px] place-items-center rounded-lg border border-purple-300 dark:border-purple-700"
aria-label="Model supports tools"
role="img"
>
<CarbonTools class="text-xxs text-purple-700 dark:text-purple-500" />
</span>
{/if}
{#if model.multimodal}
<span
title="This model is multimodal and supports image inputs natively."
class="ml-auto flex size-[21px] items-center justify-center rounded-lg border border-blue-700 dark:border-blue-500"
aria-label="Model is multimodal"
role="img"
>
<CarbonImage class="text-xxs text-blue-700 dark:text-blue-500" />
</span>
{/if}
{#if model.id === $settings.activeModel}
<span
class="rounded-full border border-blue-500 bg-blue-500/5 px-2 py-0.5 text-xs text-blue-500 dark:border-blue-500 dark:bg-blue-500/10"
>
Active
</span>
{:else if index === 0}
<span
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
</span>
{/if}
</div>
<span class="flex items-center gap-2 font-semibold">
{model.displayName}
</span>
<span class="whitespace-pre-wrap text-sm text-gray-500 dark:text-gray-400">
{model.description || "-"}
</span>
</div>
{/each}
</div>
</div>
</div>
<style lang="postcss">
.active-model {
@apply border-blue-500 bg-blue-500/5 hover:bg-blue-500/10;
}
</style>
|