Spaces:
Runtime error
Runtime error
File size: 3,175 Bytes
a3ae6ee 2606dde 5da61b4 2606dde 7764421 b7f9ccb a3ae6ee b2387f6 3072414 b2387f6 17dba7d 3072414 c8c5d70 3072414 229d4b4 959e78e 3072414 cb6af22 3072414 e532ada 2606dde 3072414 2606dde 17dba7d 3072414 2606dde cb6af22 3072414 2606dde 3072414 b2387f6 2606dde 3072414 2606dde a3ae6ee |
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>
|