Spaces:
Running
Running
File size: 4,100 Bytes
faca43f 5528541 faca43f 5528541 faca43f 5528541 faca43f e66a6c5 faca43f d54ea4b 5528541 faca43f d54ea4b faca43f d54ea4b faca43f d54ea4b fe39225 5528541 fe39225 faca43f 5528541 faca43f d54ea4b faca43f d54ea4b faca43f d54ea4b faca43f d54ea4b faca43f d54ea4b faca43f |
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 123 124 125 |
<script lang="ts">
import { PUBLIC_APP_NAME, PUBLIC_VERSION } from "$env/static/public";
import { PUBLIC_ANNOUNCEMENT_BANNERS } 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 CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
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";
import { env } from "$env/dynamic/public";
import { curr_model_writable } from "../../../routes/LayoutWritable";
export let currentModel: Model;
export let settings: LayoutData["settings"];
export let models: Model[];
let isModelsModalOpen = false;
let selectedNum = 0;
curr_model_writable.subscribe((val) => {
selectedNum = val;
});
$: currentModelMetadata = findCurrentModel(models, models[selectedNum].name);
const announcementBanners = PUBLIC_ANNOUNCEMENT_BANNERS
? JSON.parse(PUBLIC_ANNOUNCEMENT_BANNERS)
: [];
const dispatch = createEventDispatcher<{ message: string }>();
function getTitles(str: string) {
const split = str.split(' ')
const map_str = new Map();
for (let i = 0; i < split.length; i++) {
map_str.set(i, split[i])
}
return map_str
}
$: title = env.PUBLIC_APP_NAME;
</script>
<div class="my-auto grid gap-8 lg:grid-cols-2">
<div class="lg:col-span-1">
<div>
<div class="mb-3 flex items-center text-2xl font-semibold">
<Logo classNames="mr-1flex-none" />
<div class = "pl-2 text-white"> {PUBLIC_APP_NAME} </div>
</div>
<p class="text-base text-gray-600 dark:text-gray-400">
Enjoying the best AI models, with privacy
</p>
</div>
</div>
<div class="lg:col-span-2 lg:pl-24 w-[50%] flex absolute right-[0%]">
{#each announcementBanners as banner}
<AnnouncementBanner classNames="mb-4" title={banner.title}>
<a
target="_blank"
href={banner.linkHref}
class="mr-2 flex items-center underline hover:no-underline"
><CarbonArrowUpRight class="mr-1.5 text-xs" /> {banner.linkTitle}</a
>
</AnnouncementBanner>
{/each}
{#if isModelsModalOpen}
<ModelsModal
{settings}
{models}
on:close={() => (isModelsModalOpen = false)}
on:closeAndSave={(id) => (
(isModelsModalOpen = false), curr_model_writable.set(id.detail.id)
)}
/>
{/if}
{#if models.length > 1}
<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>
{#if models.length > 1}
<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
>
{/if}
</div>
<ModelCardMetadata variant="dark" model={currentModel} />
</div>
{/if}
</div>
{#if currentModelMetadata.promptExamples}
<div class="lg:col-span-2 lg:mt-6">
<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-prompts dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
on:click={() => {
dataLayer.push({ event: "prompt", titre_prompt: [example.title] });
dispatch("message", example.prompt)}
}
>
{#each [...getTitles(example.title)] as [key, value]}
{#if key < 3}
<b>{value + " "} </b>
{:else}
{value + " "}
{/if}
{/each}
</button>
{/each}
</div>
</div>{/if}
</div>
|