Thomas G. Lopes commited on
Commit
c7f83e1
·
1 Parent(s): 8c7e7de

abstract models

Browse files
src/lib/components/InferencePlayground/InferencePlayground.svelte CHANGED
@@ -12,6 +12,7 @@
12
  } from "./inferencePlaygroundUtils";
13
 
14
  import { goto } from "$app/navigation";
 
15
  import { isMac } from "$lib/utils/platform";
16
  import { onDestroy, onMount } from "svelte";
17
  import IconCode from "../Icons/IconCode.svelte";
@@ -26,11 +27,9 @@
26
  import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
27
  import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
28
 
29
- export let models: ModelEntryWithTokenizer[];
30
-
31
  const startMessageUser: ConversationMessage = { role: "user", content: "" };
32
  const modelIdsFromQueryParam = $page.url.searchParams.get("modelId")?.split(",");
33
- const modelsFromQueryParam = modelIdsFromQueryParam?.map(id => models.find(model => model.id === id));
34
  const systemMessage: ConversationMessage = {
35
  role: "system",
36
  content: modelIdsFromQueryParam ? (defaultSystemMessage?.[modelIdsFromQueryParam[0]] ?? "") : "",
@@ -39,7 +38,7 @@
39
  let session: Session = {
40
  conversations: [
41
  {
42
- model: models.find(m => FEATURED_MODELS_IDS.includes(m.id)) ?? models[0],
43
  config: { ...defaultGenerationConfig },
44
  messages: [{ ...startMessageUser }],
45
  systemMessage,
@@ -242,7 +241,7 @@
242
  }
243
 
244
  function addCompareModel(modelId: ModelEntryWithTokenizer["id"]) {
245
- const model = models.find(m => m.id === modelId);
246
  if (!model || session.conversations.length === 2) {
247
  return;
248
  }
@@ -336,7 +335,6 @@
336
  <div class="max-sm:min-w-full">
337
  {#if compareActive}
338
  <PlaygroundConversationHeader
339
- {models}
340
  {conversationIdx}
341
  bind:conversation
342
  on:close={() => removeCompareModal(conversationIdx)}
@@ -439,7 +437,7 @@
439
  class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-linear-to-b from-white via-white p-3 shadow-xs dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
440
  >
441
  <div class="flex flex-col gap-2">
442
- <ModelSelector {models} bind:conversation={session.conversations[0]} />
443
  <div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
444
  <button
445
  class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
@@ -518,7 +516,6 @@
518
 
519
  {#if selectCompareModelOpen}
520
  <ModelSelectorModal
521
- {models}
522
  conversation={session.conversations[0]}
523
  on:modelSelected={e => addCompareModel(e.detail)}
524
  on:close={() => (selectCompareModelOpen = false)}
 
12
  } from "./inferencePlaygroundUtils";
13
 
14
  import { goto } from "$app/navigation";
15
+ import { models } from "$lib/stores/models";
16
  import { isMac } from "$lib/utils/platform";
17
  import { onDestroy, onMount } from "svelte";
18
  import IconCode from "../Icons/IconCode.svelte";
 
27
  import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
28
  import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
29
 
 
 
30
  const startMessageUser: ConversationMessage = { role: "user", content: "" };
31
  const modelIdsFromQueryParam = $page.url.searchParams.get("modelId")?.split(",");
32
+ const modelsFromQueryParam = modelIdsFromQueryParam?.map(id => $models.find(model => model.id === id));
33
  const systemMessage: ConversationMessage = {
34
  role: "system",
35
  content: modelIdsFromQueryParam ? (defaultSystemMessage?.[modelIdsFromQueryParam[0]] ?? "") : "",
 
38
  let session: Session = {
39
  conversations: [
40
  {
41
+ model: $models.find(m => FEATURED_MODELS_IDS.includes(m.id)) ?? $models[0],
42
  config: { ...defaultGenerationConfig },
43
  messages: [{ ...startMessageUser }],
44
  systemMessage,
 
241
  }
242
 
243
  function addCompareModel(modelId: ModelEntryWithTokenizer["id"]) {
244
+ const model = $models.find(m => m.id === modelId);
245
  if (!model || session.conversations.length === 2) {
246
  return;
247
  }
 
335
  <div class="max-sm:min-w-full">
336
  {#if compareActive}
337
  <PlaygroundConversationHeader
 
338
  {conversationIdx}
339
  bind:conversation
340
  on:close={() => removeCompareModal(conversationIdx)}
 
437
  class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-linear-to-b from-white via-white p-3 shadow-xs dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
438
  >
439
  <div class="flex flex-col gap-2">
440
+ <ModelSelector bind:conversation={session.conversations[0]} />
441
  <div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
442
  <button
443
  class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
 
516
 
517
  {#if selectCompareModelOpen}
518
  <ModelSelectorModal
 
519
  conversation={session.conversations[0]}
520
  on:modelSelected={e => addCompareModel(e.detail)}
521
  on:close={() => (selectCompareModelOpen = false)}
src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte CHANGED
@@ -9,8 +9,8 @@
9
  import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
10
  import Avatar from "../Avatar.svelte";
11
  import { goto } from "$app/navigation";
 
12
 
13
- export let models: ModelEntryWithTokenizer[];
14
  export let conversation: Conversation;
15
  export let conversationIdx: number;
16
 
@@ -19,7 +19,7 @@
19
  let modelSelectorOpen = false;
20
 
21
  function changeModel(newModelId: ModelEntryWithTokenizer["id"]) {
22
- const model = models.find(m => m.id === newModelId);
23
  if (!model) {
24
  return;
25
  }
@@ -46,7 +46,6 @@
46
 
47
  {#if modelSelectorOpen}
48
  <ModelSelectorModal
49
- {models}
50
  {conversation}
51
  on:modelSelected={e => changeModel(e.detail)}
52
  on:close={() => (modelSelectorOpen = false)}
 
9
  import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
10
  import Avatar from "../Avatar.svelte";
11
  import { goto } from "$app/navigation";
12
+ import { models } from "$lib/stores/models";
13
 
 
14
  export let conversation: Conversation;
15
  export let conversationIdx: number;
16
 
 
19
  let modelSelectorOpen = false;
20
 
21
  function changeModel(newModelId: ModelEntryWithTokenizer["id"]) {
22
+ const model = $models.find(m => m.id === newModelId);
23
  if (!model) {
24
  return;
25
  }
 
46
 
47
  {#if modelSelectorOpen}
48
  <ModelSelectorModal
 
49
  {conversation}
50
  on:modelSelected={e => changeModel(e.detail)}
51
  on:close={() => (modelSelectorOpen = false)}
src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte CHANGED
@@ -8,14 +8,14 @@
8
  import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
9
  import Avatar from "../Avatar.svelte";
10
  import { defaultSystemMessage } from "./InferencePlaygroundGenerationConfig.svelte";
 
11
 
12
- export let models: ModelEntryWithTokenizer[] = [];
13
  export let conversation: Conversation;
14
 
15
  let showModelPickerModal = false;
16
 
17
  function changeModel(modelId: ModelEntryWithTokenizer["id"]) {
18
- const model = models.find(m => m.id === modelId);
19
  if (!model) {
20
  return;
21
  }
@@ -36,7 +36,6 @@
36
 
37
  {#if showModelPickerModal}
38
  <ModelSelectorModal
39
- {models}
40
  {conversation}
41
  on:modelSelected={e => changeModel(e.detail)}
42
  on:close={() => (showModelPickerModal = false)}
 
8
  import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
9
  import Avatar from "../Avatar.svelte";
10
  import { defaultSystemMessage } from "./InferencePlaygroundGenerationConfig.svelte";
11
+ import { models } from "$lib/stores/models";
12
 
 
13
  export let conversation: Conversation;
14
 
15
  let showModelPickerModal = false;
16
 
17
  function changeModel(modelId: ModelEntryWithTokenizer["id"]) {
18
+ const model = $models.find(m => m.id === modelId);
19
  if (!model) {
20
  return;
21
  }
 
36
 
37
  {#if showModelPickerModal}
38
  <ModelSelectorModal
 
39
  {conversation}
40
  on:modelSelected={e => changeModel(e.detail)}
41
  on:close={() => (showModelPickerModal = false)}
src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte CHANGED
@@ -6,8 +6,8 @@
6
  import { FEATURED_MODELS_IDS } from "./inferencePlaygroundUtils";
7
  import IconSearch from "../Icons/IconSearch.svelte";
8
  import IconStar from "../Icons/IconStar.svelte";
 
9
 
10
- export let models: ModelEntryWithTokenizer[];
11
  export let conversation: Conversation;
12
 
13
  let backdropEl: HTMLDivElement;
@@ -17,8 +17,8 @@
17
 
18
  const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
19
 
20
- let featuredModels = models.filter(m => FEATURED_MODELS_IDS.includes(m.id));
21
- let otherModels = models.filter(m => !FEATURED_MODELS_IDS.includes(m.id));
22
 
23
  if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {
24
  highlightIdx = featuredModels.findIndex(model => model.id === conversation.model.id);
@@ -81,13 +81,13 @@
81
  }
82
 
83
  function filterModels(query: string) {
84
- featuredModels = models.filter(m =>
85
  query
86
  ? FEATURED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
87
  : FEATURED_MODELS_IDS.includes(m.id)
88
  );
89
 
90
- otherModels = models.filter(m =>
91
  query
92
  ? !FEATURED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
93
  : !FEATURED_MODELS_IDS.includes(m.id)
 
6
  import { FEATURED_MODELS_IDS } from "./inferencePlaygroundUtils";
7
  import IconSearch from "../Icons/IconSearch.svelte";
8
  import IconStar from "../Icons/IconStar.svelte";
9
+ import { models } from "$lib/stores/models";
10
 
 
11
  export let conversation: Conversation;
12
 
13
  let backdropEl: HTMLDivElement;
 
17
 
18
  const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
19
 
20
+ let featuredModels = $models.filter(m => FEATURED_MODELS_IDS.includes(m.id));
21
+ let otherModels = $models.filter(m => !FEATURED_MODELS_IDS.includes(m.id));
22
 
23
  if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {
24
  highlightIdx = featuredModels.findIndex(model => model.id === conversation.model.id);
 
81
  }
82
 
83
  function filterModels(query: string) {
84
+ featuredModels = $models.filter(m =>
85
  query
86
  ? FEATURED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
87
  : FEATURED_MODELS_IDS.includes(m.id)
88
  );
89
 
90
+ otherModels = $models.filter(m =>
91
  query
92
  ? !FEATURED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
93
  : !FEATURED_MODELS_IDS.includes(m.id)
src/lib/stores/models.ts ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
 
1
+ import { page } from "$app/stores";
2
+ import type { ModelEntryWithTokenizer } from "$lib/components/InferencePlayground/types";
3
+ import { derived } from "svelte/store";
4
+
5
+ export const models = derived(page, $page => $page.data.models as ModelEntryWithTokenizer[]);
src/routes/+page.svelte CHANGED
@@ -1,6 +1,5 @@
1
  <script lang="ts">
2
- export let data;
3
  import InferencePlayground from "$lib/components/InferencePlayground/InferencePlayground.svelte";
4
  </script>
5
 
6
- <InferencePlayground models={data.models} />
 
1
  <script lang="ts">
 
2
  import InferencePlayground from "$lib/components/InferencePlayground/InferencePlayground.svelte";
3
  </script>
4
 
5
+ <InferencePlayground />