Count sysmte prompt tokens

src/lib/components/AssistantSettings.svelte

@@ -12,6 +12,7 @@
 
  import { useSettingsStore } from "$lib/stores/settings";
  import { isHuggingChat } from "$lib/utils/isHuggingChat";
+ import TokensCounter from "./TokensCounter.svelte";
 
  type ActionData = {
  error: boolean;
@@ -28,6 +29,10 @@
  export let models: Model[] = [];
 
  let files: FileList | null = null;
+ let selectedModel: Model | undefined = models.find(
+ (model) => assistant?.modelId && assistant.modelId === model.id
+ );
+ let enteredSystemPrompt = "";
 
  const settings = useSettingsStore();
 
@@ -70,6 +75,15 @@
  return returnForm?.errors.find((error) => error.field === field)?.message ?? "";
  }
 
+ function onModelChange(e: Event) {
+ const modelId = (e.target as HTMLSelectElement).value;
+ selectedModel = models.find((model) => model.id === modelId);
+ }
+
+ function onPromptChange(e: Event) {
+ enteredSystemPrompt = (e.target as HTMLSelectElement).value;
+ }
+
  let deleteExistingAvatar = false;
 
  let loading = false;
@@ -238,7 +252,11 @@
 
  <label>
  <div class="mb-1 font-semibold">Model</div>
- <select name="modelId" class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2">
+ <select
+ name="modelId"
+ class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
+ on:change={onModelChange}
+ >
  {#each models.filter((model) => !model.unlisted) as model}
  <option
  value={model.id}
@@ -395,6 +413,12 @@
  class="mb-20 min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm"
  placeholder="You'll act as..."
  value={assistant?.preprompt ?? ""}
+ on:input={onPromptChange}
+ />
+ <TokensCounter
+ classNames="absolute bottom-2 right-2"
+ prompt={enteredSystemPrompt}
+ model={selectedModel}
  />
  <p class="text-xs text-red-500">{getError("preprompt", form)}</p>
  </div>

src/lib/components/TokensCounter.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+ import type { Model } from "$lib/types/Model";
+ import { AutoTokenizer } from "@xenova/transformers";
+
+ export let classNames = "";
+ export let prompt = "";
+ export let model: Model | undefined = undefined;
+
+ let nTokens = 0;
+ let isDisabled = false;
+
+ async function tokenizeText() {
+ if (!model || !prompt) {
+ return;
+ }
+
+ try {
+ const tokenizer = await AutoTokenizer.from_pretrained(model.id);
+ const { input_ids } = await tokenizer(prompt);
+ nTokens = input_ids.size;
+ isDisabled = false;
+ } catch (err) {
+ isDisabled = true;
+ console.error("Error while counting tokens: ", err);
+ }
+ }
+
+ $: {
+ if (typeof window !== "undefined" && model && prompt) {
+ tokenizeText();
+ }
+ }
+</script>
+
+{#if !isDisabled && prompt && model?.parameters?.max_new_tokens}
+ <p class="text-sm opacity-60 hover:opacity-80 {classNames}">
+ {nTokens}/{model.parameters.max_new_tokens}
+ </p>
+{/if}

src/routes/settings/(nav)/[...model]/+page.svelte

@@ -5,6 +5,7 @@
  import type { BackendModel } from "$lib/server/models";
  import { useSettingsStore } from "$lib/stores/settings";
  import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
+ import TokensCounter from "$lib/components/TokensCounter.svelte";
  import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
  import CarbonLink from "~icons/carbon/link";
 
@@ -99,7 +100,7 @@
  {isActive ? "Active model" : "Activate"}
  </button>
 
- <div class="flex w-full flex-col gap-2">
+ <div class="relative flex w-full flex-col gap-2">
  <div class="flex w-full flex-row content-between">
  <h3 class="mb-1.5 text-lg font-semibold text-gray-800">System Prompt</h3>
  {#if hasCustomPreprompt}
@@ -117,5 +118,10 @@
  class="w-full resize-none rounded-md border-2 bg-gray-100 p-2"
  bind:value={$settings.customPrompts[$page.params.model]}
  />
+ <TokensCounter
+ classNames="absolute bottom-2 right-2"
+ prompt={$settings.customPrompts[$page.params.model]}
+ {model}
+ />
  </div>
 </div>