File size: 2,126 Bytes
411fba2 b924465 4b8b411 e8b5344 60216ec 9ab40fd ba9894c 3138e12 711cbbd 86574c0 a8ce6ad 2488073 b924465 c7f83e1 a8ce6ad e3a37e9 1a8c098 a8ce6ad e8b5344 2488073 411fba2 f459835 25c63d0 2488073 9ab40fd |
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 |
<script lang="ts">
import type { Conversation, ModelWithTokenizer } from "$lib/types";
import { models } from "$lib/stores/models";
import Avatar from "../Avatar.svelte";
import IconCaret from "../Icons/IconCaret.svelte";
import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
import ProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
import { defaultSystemMessage } from "./inferencePlaygroundUtils";
export let conversation: Conversation;
let showModelPickerModal = false;
// Model
function changeModel(modelId: ModelWithTokenizer["id"]) {
const model = $models.find(m => m.id === modelId);
if (!model) {
return;
}
conversation.model = model;
conversation.systemMessage = { role: "system", content: defaultSystemMessage?.[modelId] ?? "" };
conversation.provider = undefined;
}
$: nameSpace = conversation.model.id.split("/")[0] ?? "";
$: modelName = conversation.model.id.split("/")[1] ?? "";
const id = crypto.randomUUID();
</script>
<div class="flex flex-col gap-2">
<label for={id} class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
Models<span class="text-xs font-normal text-gray-400">{$models.length}</span>
</label>
<button
{id}
class="relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
on:click={() => (showModelPickerModal = true)}
>
<div class="flex flex-col items-start">
<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
<Avatar orgName={nameSpace} size="sm" />
{nameSpace}
</div>
<div>{modelName}</div>
</div>
<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded-sm size-4 flex-none absolute right-2" />
</button>
</div>
{#if showModelPickerModal}
<ModelSelectorModal
{conversation}
on:modelSelected={e => changeModel(e.detail)}
on:close={() => (showModelPickerModal = false)}
/>
{/if}
<ProviderSelect bind:conversation />
|