Spaces:
Build error
Build error
File size: 2,669 Bytes
5c5d81b e30fa56 5c5d81b 7ad8848 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 |
<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 { 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 });
}
}
</script>
{#if modelSelectorOpen}
<ModelSelectorModal
{models}
{conversation}
on:modelSelected={e => changeModel(e.detail)}
on:close={() => (modelSelectorOpen = false)}
/>
{/if}
<div
class="{conversationIdx === 0
? 'mr-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 dark:border-gray-800 dark:bg-gray-800/70 dark:hover:bg-gray-800"
>
<div class="size-3.5 rounded bg-black dark:bg-gray-400"></div>
<button on:click={() => (modelSelectorOpen = true)}>{conversation.model.id}</button>
<button
class="ml-auto flex size-6 items-center justify-center rounded bg-gray-50 text-xs hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
on:click={() => dispatch("close", conversation.model.id)}
>
✕
</button>
<button
class="group relative flex size-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
>
<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-600 hidden group-focus:flex hover:flex"
/>
</button>
</div>
|