feat: loading bar for phi

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "chat-ui",
-	"version": "0.0.1",
+	"version": "0.0.8",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "chat-ui",
-			"version": "0.0.1",
+			"version": "0.0.8",
 			"dependencies": {
 				"@huggingface/hub": "^0.5.1",
 				"@huggingface/inference": "^2.2.0",
@@ -29,6 +29,7 @@
 				"svelte-device-info": "^1.0.0",
 				"tailwind-scrollbar": "^3.0.0",
 				"tailwindcss": "^3.3.1",
+				"urijs": "^1.19.11",
 				"uuid": "^9.0.1",
 				"zod": "^3.21.4"
 			},
@@ -41,6 +42,7 @@
 				"@types/jsdom": "^21.1.1",
 				"@types/marked": "^4.0.8",
 				"@types/parquetjs": "^0.10.3",
+				"@types/urijs": "^1.19.20",
 				"@typescript-eslint/eslint-plugin": "^5.45.0",
 				"@typescript-eslint/parser": "^5.45.0",
 				"eslint": "^8.28.0",
@@ -1071,6 +1073,12 @@
 			"integrity": "sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg==",
 			"dev": true
 		},
+		"node_modules/@types/urijs": {
+			"version": "1.19.20",
+			"resolved": "https://registry.npmjs.org/@types/urijs/-/urijs-1.19.20.tgz",
+			"integrity": "sha512-77Mq/2BeHU894J364dUv9tSwxxyCLtcX228Pc8TwZpP5bvOoMns+gZoftp3LYl3FBH8vChpWbuagKGiMki2c1A==",
+			"dev": true
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "5.62.0",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
@@ -2776,9 +2784,9 @@
 			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
 		},
 		"node_modules/get-func-name": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-			"integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+			"integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
 			"dev": true,
 			"engines": {
 				"node": "*"
@@ -5864,6 +5872,11 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"node_modules/urijs": {
+			"version": "1.19.11",
+			"resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.11.tgz",
+			"integrity": "sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ=="
+		},
 		"node_modules/url-parse": {
 			"version": "1.5.10",
 			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chat-ui",
-	"version": "0.0.4",
+	"version": "0.0.8",
 	"private": true,
 	"packageManager": "[email protected]",
 	"scripts": {
@@ -22,6 +22,7 @@
 		"@types/jsdom": "^21.1.1",
 		"@types/marked": "^4.0.8",
 		"@types/parquetjs": "^0.10.3",
+		"@types/urijs": "^1.19.20",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"eslint": "^8.28.0",
@@ -61,6 +62,7 @@
 		"svelte-device-info": "^1.0.0",
 		"tailwind-scrollbar": "^3.0.0",
 		"tailwindcss": "^3.3.1",
+		"urijs": "^1.19.11",
 		"uuid": "^9.0.1",
 		"zod": "^3.21.4"
 	}

src/lib/components/LoadingModal.svelte

@@ -25,8 +25,9 @@
 			is_phi_loading = false;
 			loadingMap.set(model, Math.floor(Number(percent)));
 		}
-		else if (model != undefined && model.startsWith("phi")) {
-			is_phi_loading = true;
+		else if (model != undefined && model.endsWith("gguf")) {
+			is_phi_loading = false;
+			loadingMap.set(model, Math.floor(Number(percent)));
 		}
 		if (loadingMap.size > 0) 
 		{

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

@@ -26,7 +26,6 @@
 	let curr_model_id = 0;
 	curr_model_writable.subscribe((val) => {
 		curr_model_id = val;
-		console.log(val);
 	});
 
 	let pipelineWorker;
@@ -52,12 +51,16 @@
 	let pending = false;
 	let loginRequired = false;
 
+	//The code consider that the datalayer variable does not exist
+	//but it is instantiated by Google Tag Manager during runtime
+
 	// Create a callback function for messages from the worker thread.
 	const onMessageReceived = (e) => {
-		console.log(e)
 		let lastMessage: any = undefined;
 		switch (e.data.status) {
 			case "initiate":
+				if (e.data.file == "tokenizer.json") // Avoid to send the tag multiple times
+					dataLayer.push({'event': 'debut_chargement_chat', 'nom_modele':[e.data.name]});
 				break;
 
 			case "progress":
@@ -71,13 +74,13 @@
 				break;
 
 			case "init_model":
-				phi_writable.set(true);
 				break;
 
 			case "done":
 				break;
 
 			case "ready":
+				dataLayer.push({'event': 'fin_chargement_chat', 'nom_modele':[e.data.name]});
 				isloading_writable.set(false);
 				is_init_writable.set(false);
 				phi_writable.set(false);
@@ -99,6 +102,7 @@
 			case "aborted":
 			case "complete":
 				if (e.data.id_now == id_now) {
+					dataLayer.push({'event': 'reponse_message'});
 					lastMessage = messages[messages.length - 1];
 					lastMessage.webSearchId = e.data.searchID;
 					lastMessage.updatedAt = new Date();
@@ -152,6 +156,8 @@
 			isCode: false,
 		};
 
+		dataLayer.push({'event': 'envoi_message'});
+
 		addMessageToChat(conversationId, msg, curr_model);
 
 		let lastMessage = messages[messages.length - 1];

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

@@ -1,17 +1,71 @@
 import { pipeline, env } from "@xenova/transformers";
 import init, { Model } from "./phi/m.js";
+import URI from "urijs"
+
+// Shamelessly stolen from Transformers.js
+
+export async function tryCache(cache, ...names) {
+    for (let name of names) {
+        try {
+			console.log(name)
+            let result = await cache.match(name);
+            if (result) return result;
+        } catch (e) {
+            continue;
+        }
+    }
+    return undefined;
+}
+
+async function read_stream(url, response) {
+	const reader = response.body.getReader();
+	const contentLength = +response.headers.get('Content-Length');
+	let receivedLength = 0;
+	let chunks = []; 
+	let uri = new URI(url)
+
+	while(true) {
+		const {done, value} = await reader.read();
+		if (done) {
+			break;
+		}
+		chunks.push(value);
+		receivedLength += value.length;
+		let percent = (receivedLength / contentLength) * 100
+		self.postMessage({ status: "progress", file: uri.filename(), progress: percent });
+	}
+
+	let chunksAll = new Uint8Array(receivedLength); 
+	let position = 0;
+	for(let chunk of chunks) {
+		chunksAll.set(chunk, position); 
+		position += chunk.length;
+	}
+	return chunksAll
+}
 
 async function fetchArrayBuffer(url) {
-	const cacheName = "phi-mixformer-candle-cache";
-	const cache = await caches.open(cacheName);
-	const cachedResponse = await cache.match(url);
-	if (cachedResponse) {
-	  const data = await cachedResponse.arrayBuffer();
-	  return new Uint8Array(data);
+	let cache = await caches.open('transformers-cache');
+
+	const response = await tryCache(cache, url);
+	if (response != undefined) {
+		console.log(url)
+		let res = await read_stream(url, response)
+		cache.put(url, new Response(res, {
+            headers: response.headers
+        }));
+		return new Uint8Array(res);
 	}
-	const res = await fetch(url, { cache: "force-cache" });
-	cache.put(url, res.clone());
-	return new Uint8Array(await res.arrayBuffer());
+	else {
+		const response = await fetch(url);
+		let res = await read_stream(url, response)
+		cache.put(url, new Response(res, {
+            headers: response.headers,
+        }));
+		return new Uint8Array(res);
+	}
+
+
 }
 
 class Phi {
@@ -23,8 +77,6 @@ class Phi {
 		await init();
   
 		self.postMessage({ status: "loading", message: "Loading Model" });
-		self.postMessage({ status: "progress", file: "model-q4k.gguf", no_progress_bar: true, message: "Starting Phi" });
-
   
 		const [weightsArrayU8, tokenizerArrayU8] = await Promise.all([
 		  fetchArrayBuffer(weightsURL),
@@ -63,6 +115,7 @@ export class FlanPipeline {
 }
 
 let controller = null;
+let phi_model = null;
 
 // Listen for messages from the main thread
 self.addEventListener("message", async (event) => {
@@ -120,6 +173,9 @@ async function generate_phi(data) {
 	let top_p = 1;
 	let repeatPenalty = 1.1;
 	let seed = 299792458;
+
+	self.postMessage({ status: "initiate", file: "tokenizer.json", name: "phi-1_5" }); // Fake init
+
 	try {
 	  const model = await Phi.getInstance(
 		weightsURL,