chat-ui / src /lib /components /ModelCardMetadata.svelte
nsarrazin's picture
nsarrazin HF staff
Add support for Meta Llama 3 70B in HuggingChat (#1029)
8582ce1 unverified
raw
history blame
1.67 kB
<script lang="ts">
import CarbonEarth from "~icons/carbon/earth";
import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
import BIMeta from "~icons/bi/meta";
import type { Model } from "$lib/types/Model";
export let model: Pick<Model, "name" | "datasetName" | "websiteUrl" | "modelUrl" | "datasetUrl">;
export let variant: "light" | "dark" = "light";
</script>
<div
class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-xs sm:text-sm
{variant === 'dark'
? 'text-gray-600 dark:bg-gray-800 dark:text-gray-300'
: 'text-gray-800 dark:bg-gray-100 dark:text-gray-600'}"
>
<a
href={model.modelUrl || "https://huggingface.co/" + model.name}
target="_blank"
rel="noreferrer"
class="flex items-center hover:underline"
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
Model
<div class="max-sm:hidden">&nbsp;page</div></a
>
{#if model.datasetName || model.datasetUrl}
<a
href={model.datasetUrl || "https://huggingface.co/datasets/" + model.datasetName}
target="_blank"
rel="noreferrer"
class="flex items-center hover:underline"
><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
Dataset
<div class="max-sm:hidden">&nbsp;page</div></a
>
{/if}
{#if model.websiteUrl}
<a
href={model.websiteUrl}
target="_blank"
class="ml-auto flex items-center hover:underline"
rel="noreferrer"
>
{#if model.name === "meta-llama/Meta-Llama-3-70B-Instruct"}
<BIMeta class="mr-1.5 shrink-0 text-xs text-gray-400" />
Built with Meta Llama 3
{:else}
<CarbonEarth class="mr-1.5 shrink-0 text-xs text-gray-400" />
Website
{/if}
</a>
{/if}
</div>