Thomas G. Lopes
commited on
Commit
·
654f56a
1
Parent(s):
2168f52
project select
Browse files
src/lib/components/InferencePlayground/InferencePlayground.svelte
CHANGED
@@ -8,7 +8,7 @@
|
|
8 |
} from "./inferencePlaygroundUtils";
|
9 |
|
10 |
import { models } from "$lib/stores/models";
|
11 |
-
import { session } from "$lib/stores/session";
|
12 |
import { token } from "$lib/stores/token";
|
13 |
import { isMac } from "$lib/utils/platform";
|
14 |
import { HfInference } from "@huggingface/inference";
|
@@ -25,13 +25,10 @@
|
|
25 |
import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
|
26 |
import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
|
27 |
import IconExternal from "../Icons/IconExternal.svelte";
|
|
|
28 |
|
29 |
const startMessageUser: ConversationMessage = { role: "user", content: "" };
|
30 |
|
31 |
-
function getActiveProject(s: Session) {
|
32 |
-
return s.projects.find(p => p.id === s.activeProjectId) ?? s.projects[0]!;
|
33 |
-
}
|
34 |
-
|
35 |
$: project = getActiveProject($session);
|
36 |
project = getActiveProject($session); // needed, otherwise its undefined on startup (not sure why).
|
37 |
|
@@ -240,7 +237,10 @@
|
|
240 |
? 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)]'
|
241 |
: 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)_clamp(270px,25%,300px)]'}"
|
242 |
>
|
243 |
-
<div class="flex flex-col overflow-y-auto py-3 pr-3 max-md:pl-3">
|
|
|
|
|
|
|
244 |
<div
|
245 |
class="relative flex flex-1 flex-col gap-6 overflow-y-hidden rounded-r-xl border-x border-y border-gray-200/80 bg-linear-to-b from-white via-white p-3 shadow-xs max-md:rounded-xl dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"
|
246 |
class:pointer-events-none={!systemPromptSupported}
|
|
|
8 |
} from "./inferencePlaygroundUtils";
|
9 |
|
10 |
import { models } from "$lib/stores/models";
|
11 |
+
import { getActiveProject, session } from "$lib/stores/session";
|
12 |
import { token } from "$lib/stores/token";
|
13 |
import { isMac } from "$lib/utils/platform";
|
14 |
import { HfInference } from "@huggingface/inference";
|
|
|
25 |
import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
|
26 |
import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
|
27 |
import IconExternal from "../Icons/IconExternal.svelte";
|
28 |
+
import InferencePlaygroundProjectSelect from "./InferencePlaygroundProjectSelect.svelte";
|
29 |
|
30 |
const startMessageUser: ConversationMessage = { role: "user", content: "" };
|
31 |
|
|
|
|
|
|
|
|
|
32 |
$: project = getActiveProject($session);
|
33 |
project = getActiveProject($session); // needed, otherwise its undefined on startup (not sure why).
|
34 |
|
|
|
237 |
? 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)]'
|
238 |
: 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)_clamp(270px,25%,300px)]'}"
|
239 |
>
|
240 |
+
<div class="flex flex-col gap-2 overflow-y-auto py-3 pr-3 max-md:pl-3">
|
241 |
+
<div class="pl-2">
|
242 |
+
<InferencePlaygroundProjectSelect />
|
243 |
+
</div>
|
244 |
<div
|
245 |
class="relative flex flex-1 flex-col gap-6 overflow-y-hidden rounded-r-xl border-x border-y border-gray-200/80 bg-linear-to-b from-white via-white p-3 shadow-xs max-md:rounded-xl dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"
|
246 |
class:pointer-events-none={!systemPromptSupported}
|
src/lib/components/InferencePlayground/InferencePlaygroundProjectSelect.svelte
ADDED
@@ -0,0 +1,54 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script lang="ts">
|
2 |
+
import { getActiveProject, session } from "$lib/stores/session";
|
3 |
+
import { cn } from "$lib/utils/cn";
|
4 |
+
import { createSelect, createSync } from "@melt-ui/svelte";
|
5 |
+
import IconCaret from "../Icons/IconCaret.svelte";
|
6 |
+
import IconProvider from "../Icons/IconProvider.svelte";
|
7 |
+
|
8 |
+
const {
|
9 |
+
elements: { trigger, menu, option },
|
10 |
+
states: { selected },
|
11 |
+
} = createSelect<string, false>();
|
12 |
+
const sync = createSync({ selected });
|
13 |
+
$: sync.selected({ value: getActiveProject($session).id, label: getActiveProject($session).name }, p => {
|
14 |
+
if (p) $session.activeProjectId = p?.value;
|
15 |
+
});
|
16 |
+
</script>
|
17 |
+
|
18 |
+
<div class="flex flex-col gap-2">
|
19 |
+
<!--
|
20 |
+
<label class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
|
21 |
+
Providers<span class="text-xs font-normal text-gray-400"></span>
|
22 |
+
</label>
|
23 |
+
-->
|
24 |
+
|
25 |
+
<button
|
26 |
+
{...$trigger}
|
27 |
+
use:trigger
|
28 |
+
class={cn(
|
29 |
+
"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",
|
30 |
+
"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
|
31 |
+
)}
|
32 |
+
>
|
33 |
+
<div class="flex items-center gap-1 text-sm">
|
34 |
+
{getActiveProject($session).name}
|
35 |
+
</div>
|
36 |
+
<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded-sm size-4 flex-none absolute right-2" />
|
37 |
+
</button>
|
38 |
+
|
39 |
+
<div {...$menu} use:menu class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
|
40 |
+
{#each $session.projects as { name, id } (id)}
|
41 |
+
<button
|
42 |
+
{...$option({ value: id, label: name })}
|
43 |
+
use:option
|
44 |
+
class="group block w-full p-1 text-sm dark:text-white"
|
45 |
+
>
|
46 |
+
<div
|
47 |
+
class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
|
48 |
+
>
|
49 |
+
{name}
|
50 |
+
</div>
|
51 |
+
</button>
|
52 |
+
{/each}
|
53 |
+
</div>
|
54 |
+
</div>
|
src/lib/stores/session.ts
CHANGED
@@ -58,7 +58,7 @@ function createSessionStore() {
|
|
58 |
};
|
59 |
|
60 |
const defaultProject: Project = {
|
61 |
-
name: "
|
62 |
id: crypto.randomUUID(),
|
63 |
conversations: [defaultConversation],
|
64 |
};
|
@@ -147,3 +147,7 @@ function createSessionStore() {
|
|
147 |
}
|
148 |
|
149 |
export const session = createSessionStore();
|
|
|
|
|
|
|
|
|
|
58 |
};
|
59 |
|
60 |
const defaultProject: Project = {
|
61 |
+
name: "Default project",
|
62 |
id: crypto.randomUUID(),
|
63 |
conversations: [defaultConversation],
|
64 |
};
|
|
|
147 |
}
|
148 |
|
149 |
export const session = createSessionStore();
|
150 |
+
|
151 |
+
export function getActiveProject(s: Session) {
|
152 |
+
return s.projects.find(p => p.id === s.activeProjectId) ?? s.projects[0]!;
|
153 |
+
}
|