Spaces:
Running
Running
File size: 3,175 Bytes
2c972ff 01b06a3 98051f8 01b06a3 d13f9cf e02c369 2c972ff 6a0861b fa48522 6a0861b a64fb4e fa48522 7c43dbf fa48522 5bc9ce5 96ea91d fa48522 6ab6228 fa48522 0825d7d 01b06a3 fa48522 01b06a3 a64fb4e fa48522 01b06a3 6ab6228 fa48522 01b06a3 fa48522 6a0861b 01b06a3 fa48522 01b06a3 2c972ff |
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 |
<script lang="ts">
import { PUBLIC_VERSION } from "$env/static/public";
import Logo from "$lib/components/icons/Logo.svelte";
import { createEventDispatcher } from "svelte";
import IconChevron from "$lib/components/icons/IconChevron.svelte";
import AnnouncementBanner from "../AnnouncementBanner.svelte";
import ModelsModal from "../ModelsModal.svelte";
import type { Model } from "$lib/types/Model";
import ModelCardMetadata from "../ModelCardMetadata.svelte";
import type { LayoutData } from "../../../routes/$types";
import { findCurrentModel } from "$lib/utils/models";
export let currentModel: Model;
export let settings: LayoutData["settings"];
export let models: Model[];
let isModelsModalOpen = false;
$: currentModelMetadata = findCurrentModel(models, settings.activeModel);
const dispatch = createEventDispatcher<{ message: string }>();
</script>
<div class="my-auto grid gap-8 lg:grid-cols-3">
<div class="lg:col-span-1">
<div>
<div class="mb-3 flex items-center text-2xl font-semibold">
<Logo classNames="mr-1 text-yellow-400 text-4xl" />
HuggingChat
<div
class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400 dark:border-gray-700/60 dark:bg-gray-800"
>
v{PUBLIC_VERSION}
</div>
</div>
<p class="text-base text-gray-600 dark:text-gray-400">
Making the community's best AI chat models available to everyone.
</p>
</div>
</div>
<div class="lg:col-span-2 lg:pl-24">
<AnnouncementBanner classNames="mb-4" title="BigCode/StarCoderBase is now available">
<button
type="button"
on:click={() => (isModelsModalOpen = true)}
class="mr-2 flex items-center underline hover:no-underline"
><IconChevron classNames="mr-1" /> Switch model</button
>
</AnnouncementBanner>
{#if isModelsModalOpen}
<ModelsModal {settings} {models} on:close={() => (isModelsModalOpen = false)} />
{/if}
<div class="overflow-hidden rounded-xl border dark:border-gray-800">
<div class="flex p-3">
<div>
<div class="text-sm text-gray-600 dark:text-gray-400">Current Model</div>
<div class="font-semibold">{currentModel.displayName}</div>
</div>
<button
type="button"
on:click={() => (isModelsModalOpen = true)}
class="btn ml-auto flex h-7 w-7 self-start rounded-full bg-gray-100 p-1 text-xs hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-600"
><IconChevron /></button
>
</div>
<ModelCardMetadata variant="dark" model={currentModel} />
</div>
</div>
{#if currentModelMetadata.promptExamples}
<div class="lg:col-span-3 lg:mt-12">
<p class="mb-3 text-gray-600 dark:text-gray-300">Examples</p>
<div class="grid gap-3 lg:grid-cols-3 lg:gap-5">
{#each currentModelMetadata.promptExamples as example}
<button
type="button"
class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
on:click={() => dispatch("message", example.prompt)}
>
{example.title}
</button>
{/each}
</div>
</div>{/if}
</div>
|