feat: zephyr

.env.local

@@ -2,10 +2,10 @@
 
 MODELS=`[
   {
-    "name": "Phind/Phind-CodeLlama-34B-v2",
+    "name": "HuggingFaceH4/zephyr-7b-alpha",
     "is_local": false,
     "type": "text-generation",
-    "userMessageToken": "<|prompter|>",
+    "userMessageToken": "<|user|>",
     "assistantMessageToken": "<|assistant|>",
     "messageEndToken": "</s>",
     "preprompt": "",

src/app.html

@@ -22,12 +22,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 		<meta property="og:image" content="/chatui/thumbnail.jpg" />
 		<script>
-			if (
-				localStorage.theme === "dark" ||
-				(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
-			) {
-				document.documentElement.classList.add("dark");
-			}
+			document.documentElement.classList.add("dark");
 		</script>
 		%sveltekit.head%
 	</head>

src/lib/components/SettingsModal2.svelte

@@ -29,16 +29,9 @@
 
 	export function switchTheme() {
 	const { classList } = document.querySelector("html") as HTMLElement;
-	if (classList.contains("dark")) {
-		classList.remove("dark");
-		localStorage.theme = "light";
-		themeStore.set('light');
-
-	} else {
-		classList.add("dark");
-		localStorage.theme = "dark";
-		themeStore.set('dark');
-	}
+	classList.add("dark");
+	localStorage.theme = "dark";
+	themeStore.set('dark');
 }
 	function themeViewToggle() {
 		isAccountView = false;
@@ -124,22 +117,14 @@
 	<div class="bg-white dark:bg-darkBackground dark:text-white dark:border-b-0 border-b border-b-gray" style="position: relative; display: flex; min-width:700px!important; font-family: Sora,sans-serif; text-align:center; justify-content: center; align-items: center; padding: 0 15px;">
 		{#if isAccountView}
 			<div class="text-2xl py-4 dark:text-white">Account</div>
-		{:else}
-			<div class="text-2xl py-4 dark:text-white">Theme</div>
 		{/if}
 
 		<button type="button" class="group text-black dark:text-white" on:click={() => dispatch("close")} style="position: absolute; right: 15px;">
 			<CarbonClose />
 		</button>
 	</div>
 
-	<div id="modal" class="bg-white dark:bg-darkBackground dark:text-white" style="display: flex; min-width:700px!important; font-family: Sora,sans-serif;">
-		<!-- Left-hand side menu -->
-		<div class="dark:border-r-0 border-r border-r-gray bg-lightSidebar dark:bg-darkSidebar" style="flex:1; display: flex; flex-direction: column;">
-			<button class="group flex h-11 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400" id="accountButton" on:click={accountViewToggle} type="button">Account</button>
-			<button class="group flex h-11 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400" id="themeButton" on:click={themeViewToggle} type="button">Theme</button>
-		</div>
-
+	<div id="modal" class="bg-white dark:bg-darkBackground dark:text-white" style="display: flex; min-width:700px!important; font-family: Sora,sans-serif;">	
 		<div class = views style="flex: 4; min-width:500px important; min-height:400px; margin-right:40px; padding 15px 15px;">
 		<!-- Account modal view -->
 		{#if isAccountView}
@@ -204,22 +189,6 @@
 		</div>
 	</div>
 {/if}
-
-		{#if isThemeView}
-		<script type="text/javascript">
-			document.getElementById("themeView").style.display = "block";
-		</script>
-		<!-- Theme modal view -->
-        <div class="flex p-5" id="themeView">
-        <button
-		on:click={switchTheme}
-		id="darkButton"
-		type="button"
-		class="yellow-button flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700">
-		Switch to {$themeStore === 'dark' ? 'light' : 'dark'} mode
-		</button>
-	</div>
-		{/if}
 	</div>
 	</div>
 </Modal>

src/lib/server/models.ts

@@ -86,8 +86,7 @@ const modelsRaw = z
 						"{{#each messages}}" +
 						"{{#ifUser}}{{@root.userMessageToken}}{{content}}{{@root.userMessageEndToken}}{{/ifUser}}" +
 						"{{#ifAssistant}}{{@root.assistantMessageToken}}{{content}}{{@root.assistantMessageEndToken}}{{/ifAssistant}}" +
-						"{{/each}}" +
-						"{{assistantMessageToken}}"
+						"{{/each}}"
 				),
 			webSearchSummaryPromptTemplate: z
 				.string()

src/lib/switchTheme.ts

@@ -1,10 +1,5 @@
 export function switchTheme() {
 	const { classList } = document.querySelector("html") as HTMLElement;
-	if (classList.contains("dark")) {
-		classList.remove("dark");
-		localStorage.theme = "light";
-	} else {
-		classList.add("dark");
-		localStorage.theme = "dark";
-	}
+	classList.add("dark");
+	localStorage.theme = "dark";
 }

src/lib/utils/template.ts

@@ -1,5 +1,5 @@
 import type { Message } from "$lib/types/Message";
-import type { LegacyParamatersTemplateInput } from "$lib/types/Template";
+import type { ChatTemplateInput, LegacyParamatersTemplateInput } from "$lib/types/Template";
 import Handlebars from "handlebars";
 
 Handlebars.registerHelper("ifUser", function (this: Pick<Message, "from" | "content">, options) {
@@ -26,3 +26,7 @@ export function compileTemplate<T>(input: string, model: LegacyParamatersTemplat
 		return template({ ...model, ...inputs }, options);
 	};
 }
+
+export function compileTemplate2(input: string, model: LegacyParamatersTemplateInput) {
+	return compileTemplate<ChatTemplateInput>(input, model)
+}

src/routes/+layout.server.ts

@@ -56,6 +56,7 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 			promptExamples: model.promptExamples,
 			parameters: model.parameters,
 			preprompt: model.preprompt,
+			chatPromptTemplate: model.chatPromptTemplate
 		})),
 		oldModels,
 		user: locals.user && {

src/routes/+layout.svelte

@@ -154,6 +154,7 @@
 	}
 
 	onMount(async () => {
+		localStorage.theme = "dark";
 		await refreshChats();
 	});
 

src/routes/conversation/[id]/+page.svelte

@@ -247,13 +247,8 @@
 
 		let lastMessage = messages[messages.length - 1];
 		pipelineWorker.postMessage({
-			is_local: curr_model_obj.is_local ?? true,
-			server_addr: curr_model_obj.server_addr ?? "",
-			is_phi: curr_model_obj.is_phi ?? false,
+			model_obj: curr_model_obj,
 			id_now: id_now,
-			task: curr_model_obj.type,
-			max_new_tokens: curr_model_obj.parameters?.max_new_tokens ?? 256,
-			temperature: curr_model_obj.parameters?.temperature ?? 0.7,
 			model: curr_model,
 			text: inputs,
 			webSearchId: webSearchId,

src/routes/conversation/[id]/worker.js

@@ -2,6 +2,7 @@ import { pipeline, env } from "@xenova/transformers";
 import init, { Model } from "./phi/m.js";
 import { streamToAsyncIterable } from "$lib/utils/streamToAsyncIterable";
 import URI from "urijs";
+import { compileTemplate2 } from "$lib/utils/template";
 
 // Shamelessly stolen from Transformers.js
 
@@ -128,8 +129,8 @@ self.addEventListener("message", async (event) => {
 				console.log(e);
 			}
 		}
-	} else if (event.data.is_local) {
-		if (event.data.is_phi) {
+	} else if (event.data.model_obj.is_local ?? true) {
+		if (event.data.model_obj.is_phi ?? false) {
 			controller = new AbortController();
 			generate_phi(event.data);
 		} else {
@@ -138,12 +139,12 @@ self.addEventListener("message", async (event) => {
 					self.postMessage(x);
 				},
 				event.data.model,
-				event.data.task
+				event.data.model_obj.type
 			);
 
 			let output = await pipe(event.data.text, {
-				max_new_tokens: event.data.max_new_tokens,
-				temperature: event.data.temperature,
+				max_new_tokens: event.data.model_obj.parameters?.max_new_tokens ?? 256,
+				temperature: event.data.model_obj.parameters?.temperature ?? 0.7,
 				callback_function: (x) => {
 					self.postMessage({
 						status: "update",
@@ -163,21 +164,33 @@ self.addEventListener("message", async (event) => {
 			});
 		}
 	} else {
+		const m = {
+			preprompt: event.data.model_obj.preprompt,
+			userMessageToken: event.data.model_obj.userMessageToken,
+			userMessageEndToken: event.data.model_obj.userMessageEndToken,
+			assistantMessageToken: event.data.model_obj.assistantMessageToken,
+			assistantMessageEndToken: event.data.model_obj.assistantMessageEndToken,
+		}
+		console.log(event.data.model_obj.chatPromptTemplate)
+		const t = compileTemplate2(event.data.model_obj.chatPromptTemplate, m)
+		const res = t({messages: event.data.messages, preprompt: ""})
+		console.log(res)
 		controller = new AbortController();
 		const context = buildContext(event.data);
 		const newParameters = {
-			max_new_tokens: event.data.max_new_tokens,
-			temperature: event.data.temperature,
+			max_new_tokens: event.data.model_obj.parameters?.max_new_tokens ?? 256,
+			temperature: event.data.model_obj.parameters?.temperature ?? 0.7,
 			truncate: 3072,
 			return_full_text: false,
 		};
 		let body = JSON.stringify({
-			inputs: context,
+			inputs: res,
 			parameters: newParameters,
 		});
 		let text_output = "";
+		const server_addr = event.data.model_obj.server_addr ?? ""
 		try {
-			let resp = await fetch(event.data.server_addr + "/generate_stream", {
+			let resp = await fetch(server_addr + "/generate_stream", {
 				headers: {
 					"Content-Type": "application/json",
 					accesstoken: event.data.jwt,
@@ -276,8 +289,8 @@ async function generate_phi(data) {
 	const tokenizerURL = "https://huggingface.co/microsoft/phi-1_5/raw/main/tokenizer.json";
 	const weightsURL = "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/model-q4k.gguf";
 	let prompt = data.text;
-	let maxSeqLen = data.max_new_tokens;
-	let temp = data.temperature;
+	let maxSeqLen = data.model_obj.parameters?.max_new_tokens ?? 256;
+	let temp = data.model_obj.parameters?.temperature ?? 0.7;
 	let modelID = 0;
 	let quantized = true;
 	let top_p = 1;
@@ -371,6 +384,5 @@ function buildContext(data) {
 	} else {
 		context = context + "<s>[INST] " + data.text + " [/INST]";
 	}
-	console.log(context);
 	return context;
 }