File size: 2,867 Bytes
5c5d81b 5a3a165 5c5d81b e7afcb4 5c5d81b e30fa56 382cad0 5c5d81b 556c447 f39959c 5c5d81b 4e71bff 5c5d81b 4e71bff 5c5d81b f39959c 5c5d81b |
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 |
<script lang="ts">
import type { Conversation, ModelEntryWithTokenizer } from "$lib/components/InferencePlayground/types";
import { createEventDispatcher } from "svelte";
import { page } from "$app/stores";
import IconCog from "../Icons/IconCog.svelte";
import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
import Avatar from "../Avatar.svelte";
import { goto } from "$app/navigation";
export let models: ModelEntryWithTokenizer[];
export let conversation: Conversation;
export let conversationIdx: number;
const dispatch = createEventDispatcher<{ close: string }>();
let modelSelectorOpen = false;
function changeModel(newModelId: ModelEntryWithTokenizer["id"]) {
const model = models.find(m => m.id === newModelId);
if (!model) {
return;
}
conversation.model = model;
const url = new URL($page.url);
const queryParamValue = url.searchParams.get("modelId");
if (queryParamValue) {
const modelIds = queryParamValue.split(",") as [string, string];
modelIds[conversationIdx] = newModelId;
const newQueryParamValue = modelIds.join(",");
url.searchParams.set("modelId", newQueryParamValue);
const parentOrigin = "https://huggingface.co";
window.parent.postMessage({ queryString: `modelId=${newQueryParamValue}` }, parentOrigin);
goto(url.toString(), { replaceState: true });
}
}
$: [nameSpace] = conversation.model.id.split("/");
</script>
{#if modelSelectorOpen}
<ModelSelectorModal
{models}
{conversation}
on:modelSelected={e => changeModel(e.detail)}
on:close={() => (modelSelectorOpen = false)}
/>
{/if}
<div
class="{conversationIdx === 0
? 'mr-4 max-sm:ml-4'
: 'mx-4'} flex h-11 flex-none items-center gap-2 whitespace-nowrap rounded-lg border border-gray-200/80 bg-white pl-3 pr-2 text-sm leading-none shadow-sm *:flex-none max-sm:mt-4 dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
>
<Avatar orgName={nameSpace} size="md" />
<button class="!flex-1 self-stretch text-left hover:underline" on:click={() => (modelSelectorOpen = true)}
>{conversation.model.id}</button
>
<button
class="borderdark:border-white/5 flex size-6 items-center justify-center rounded bg-gray-50 text-xs hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600"
on:click={() => dispatch("close", conversation.model.id)}
>
✕
</button>
<button
class="borderdark:border-white/5 group relative flex size-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600"
>
<IconCog />
<GenerationConfig
bind:conversation
classNames="absolute top-7 min-w-[250px] z-10 right-3 bg-white dark:bg-gray-900 p-4 rounded-xl border border-gray-200 dark:border-gray-800 hidden group-focus:flex hover:flex"
/>
</button>
</div>
|