Thomas G. Lopes commited on
Commit
73a8db9
·
1 Parent(s): 7f214aa

migrate token store

Browse files
src/lib/components/inference-playground/code-snippets.svelte CHANGED
@@ -7,7 +7,7 @@
7
  import python from "highlight.js/lib/languages/python";
8
  import { createEventDispatcher } from "svelte";
9
 
10
- import { token } from "$lib/stores/token.js";
11
  import { entries, fromEntries, keys } from "$lib/utils/object.js";
12
  import type { InferenceProvider } from "@huggingface/inference";
13
  import IconExternal from "~icons/carbon/arrow-up-right";
@@ -67,8 +67,8 @@
67
  };
68
 
69
  function getTokenStr(showToken: boolean) {
70
- if ($token.value && showToken) {
71
- return $token.value;
72
  }
73
  return "YOUR_HF_TOKEN";
74
  }
 
7
  import python from "highlight.js/lib/languages/python";
8
  import { createEventDispatcher } from "svelte";
9
 
10
+ import { token } from "$lib/state/token.svelte.js";
11
  import { entries, fromEntries, keys } from "$lib/utils/object.js";
12
  import type { InferenceProvider } from "@huggingface/inference";
13
  import IconExternal from "~icons/carbon/arrow-up-right";
 
67
  };
68
 
69
  function getTokenStr(showToken: boolean) {
70
+ if (token.value && showToken) {
71
+ return token.value;
72
  }
73
  return "YOUR_HF_TOKEN";
74
  }
src/lib/components/inference-playground/model-selector.svelte CHANGED
@@ -1,7 +1,7 @@
1
  <script lang="ts">
2
  import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
3
 
4
- import { models } from "$lib/stores/models.js";
5
  import IconCaret from "~icons/carbon/chevron-down";
6
  import Avatar from "../avatar.svelte";
7
  import ModelSelectorModal from "./model-selector-modal.svelte";
@@ -18,7 +18,7 @@
18
 
19
  // Model
20
  function changeModel(modelId: ModelWithTokenizer["id"]) {
21
- const model = $models.find(m => m.id === modelId);
22
  if (!model) {
23
  return;
24
  }
@@ -34,7 +34,7 @@
34
 
35
  <div class="flex flex-col gap-2">
36
  <label for={id} class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
37
- Models<span class="text-xs font-normal text-gray-400">{$models.length}</span>
38
  </label>
39
 
40
  <button
 
1
  <script lang="ts">
2
  import type { Conversation, ModelWithTokenizer } from "$lib/types.js";
3
 
4
+ import { models } from "$lib/state/models.svelte.js";
5
  import IconCaret from "~icons/carbon/chevron-down";
6
  import Avatar from "../avatar.svelte";
7
  import ModelSelectorModal from "./model-selector-modal.svelte";
 
18
 
19
  // Model
20
  function changeModel(modelId: ModelWithTokenizer["id"]) {
21
+ const model = models.$.find(m => m.id === modelId);
22
  if (!model) {
23
  return;
24
  }
 
34
 
35
  <div class="flex flex-col gap-2">
36
  <label for={id} class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
37
+ Models<span class="text-xs font-normal text-gray-400">{models.$.length}</span>
38
  </label>
39
 
40
  <button
src/lib/components/inference-playground/playground.svelte CHANGED
@@ -124,7 +124,7 @@
124
  if ($project.conversations.length === 2) {
125
  prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
126
  }
127
- addToast({
128
  title: "Failed to run inference",
129
  description: `${prefix}Messages must alternate between user/assistant roles.`,
130
  variant: "error",
 
124
  if ($project.conversations.length === 2) {
125
  prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
126
  }
127
+ return addToast({
128
  title: "Failed to run inference",
129
  description: `${prefix}Messages must alternate between user/assistant roles.`,
130
  variant: "error",
src/lib/state/models.svelte.ts CHANGED
@@ -1,4 +1,8 @@
1
  import { page } from "$app/state";
2
  import type { ModelWithTokenizer } from "$lib/types.js";
3
 
4
- export const models = $derived({ current: page.data.models as ModelWithTokenizer[] });
 
 
 
 
 
1
  import { page } from "$app/state";
2
  import type { ModelWithTokenizer } from "$lib/types.js";
3
 
4
+ class Models {
5
+ $ = $derived(page.data.models as ModelWithTokenizer[]);
6
+ }
7
+
8
+ export const models = new Models();
src/lib/state/token.svelte.ts ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { safeParse } from "$lib/utils/json.js";
2
+ import typia from "typia";
3
+
4
+ const key = "hf_token";
5
+
6
+ class Token {
7
+ #value = $state("");
8
+ writeToLocalStorage = $state(true);
9
+ showModal = $state(false);
10
+
11
+ constructor() {
12
+ const storedHfToken = localStorage.getItem(key);
13
+ if (storedHfToken !== null) {
14
+ const parsed = safeParse(storedHfToken);
15
+ this.value = typia.is<string>(parsed) ? parsed : "";
16
+ }
17
+ }
18
+
19
+ get value() {
20
+ return this.#value;
21
+ }
22
+
23
+ set value(token: string) {
24
+ if (this.writeToLocalStorage) localStorage.setItem(key, JSON.stringify(token));
25
+ this.#value = token;
26
+ this.showModal = !token.length;
27
+ }
28
+
29
+ reset() {
30
+ this.value = "";
31
+ localStorage.removeItem(key);
32
+ }
33
+ }
34
+
35
+ export const token = new Token();